/* Framing for native, static Sprout components. No replacement controls or icon set. */
html,body{width:1280px;height:960px;margin:0;overflow:hidden;background:#fff}
#root{zoom:1;width:400px;height:760px;min-height:0}
.detail-native-layout{background:#fff;display:block;width:400px;height:760px;min-height:0}
.detail-native-layout>.board-main{width:100%;height:100%;padding:24px;box-sizing:border-box;background:#fff}
.detail-native-layout .board-main-body{height:100%}
.detail-native-layout .board-overview{padding:0;margin:0}
.detail-native-layout .board-overview-document{padding:28px;border:0;box-shadow:none}
.detail-native-layout .board-history{margin:0;padding-top:28px;border:0;box-shadow:none}
.detail-native-layout .board-timeline{margin:0;box-shadow:none}
.detail-native-layout .board-timeline-scroll{margin-top:0}
.detail-native-layout .board-columns{padding:0}
.detail-native-layout .board-column{box-shadow:none}

/* Timeline focus keeps the original list gutter outside the magnified crop. */
body[data-detail-view="timeline"] #root,body[data-detail-view="timeline"] .detail-native-layout{width:588px}

/* Role cursors and compact badges reuse Sprout's palette and cursor shape. */
.detail-agent-layer{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0}
.detail-agent{position:absolute;left:0;top:0;display:flex;align-items:center;gap:2px;opacity:0;color:var(--agent-tone);will-change:transform;font-family:var(--sans)}
.detail-agent-cursor{transform-origin:4px 4px;transform:rotate(var(--cursor-angle,0deg));display:block;width:26px;height:26px;flex:0 0 26px;filter:drop-shadow(0 1px 2px #17231d24)}
.detail-agent-name{display:inline-flex;align-items:center;padding:.3rem .55rem;border-radius:999px;font-size:.75rem;font-weight:500;line-height:1.2;white-space:nowrap;color:color-mix(in srgb,var(--agent-tone) 70%,var(--text-primary));background:color-mix(in srgb,var(--agent-tone) 15%,var(--surface-panel))}
.detail-agent.label-left .detail-agent-name{position:absolute;right:calc(100% + 2px)}
.detail-agent[data-click=true] .detail-agent-cursor{transform:rotate(var(--cursor-angle,0deg)) scale(.86)}
@media(prefers-reduced-motion:reduce){.detail-agent-layer{display:none}}

/* Center the full-width Overview document in the right side, without inset panels. */
body[data-detail-view="overview"] #root,
body[data-detail-view="overview"] .detail-native-layout{width:380px}
body[data-detail-view="overview"] .detail-native-layout>.board-main{padding:0}
body[data-detail-view="overview"] .detail-native-layout .board-secondary-view-panel{margin:0;border:0;border-radius:0;box-shadow:none}
body[data-detail-view="overview"] .detail-native-layout .board-secondary-view-panel>.board-overview{width:100%;margin-inline:auto;padding:60px 0 0}
body[data-detail-view="overview"] .detail-native-layout .board-secondary-view-panel .board-overview-document{padding:0;border:0;border-radius:0;box-shadow:none}
body[data-detail-view="overview"] .preview-overview-document .tasklist-info-overview-table table{width:100%;table-layout:fixed}
body[data-detail-view="overview"] .preview-overview-document .tasklist-info-overview-table th:first-child{width:38%}
body[data-detail-view="overview"] .preview-overview-document .tasklist-info-overview-table th:nth-child(2){width:32%}
body[data-detail-view="overview"] .preview-overview-document .tasklist-info-overview-table th:nth-child(3){width:30%}
body[data-detail-view="overview"] .tasklist-info-overview-table-cell{overflow-wrap:normal;word-break:normal}

/* Timeline reaches the outer card without an inset frame. */
body[data-detail-view="timeline"] .detail-native-layout>.board-main{padding:24px 0 0 24px}
body[data-detail-view="timeline"] .detail-native-layout .board-secondary-view-panel,
body[data-detail-view="timeline"] .detail-native-layout .board-timeline{margin:0;border:0;border-radius:0;box-shadow:none}
body[data-detail-view="timeline"] .board-timeline-gantt-header{border-bottom:0}
/* The Board close-up blends into the surrounding feature card. */
body[data-detail-view="board"] .detail-native-layout .board-column{align-self:flex-start;min-height:0;height:auto;border:0;border-radius:var(--radius-card);box-shadow:none}

/* Match Board and History to the same full-width close-up composition. */
body[data-detail-view="board"] #root,
body[data-detail-view="board"] .detail-native-layout,
body[data-detail-view="history"] #root,
body[data-detail-view="history"] .detail-native-layout{width:380px}
body[data-detail-view="board"] .detail-native-layout>.board-main,
body[data-detail-view="history"] .detail-native-layout>.board-main{padding:24px 0 0}
body[data-detail-view="board"] .detail-native-layout .board-column{width:100%;min-width:0;max-width:none;flex-basis:100%}
body[data-detail-view="history"] .detail-native-layout .board-secondary-view-panel{margin:0;border:0;border-radius:0;box-shadow:none}
body[data-detail-view="history"] .detail-native-layout .board-secondary-view-panel>.board-history{width:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}

body[data-detail-view],
body[data-detail-view] .detail-native-layout,
body[data-detail-view] .detail-native-layout>.board-main{background:var(--surface-main)}

/* Blend the native white surfaces into the same canvas as their feature card. */
body[data-detail-view]{--surface-main:#fafaf9;--surface-panel:var(--surface-main);--surface-board:var(--surface-main);--surface-card:var(--surface-main)}
body[data-detail-view] .detail-native-layout>.board-main{--board-view-surface:var(--surface-main)}

/* Lighter content surfaces stand out softly against the program's gray canvas. */
body[data-detail-view]{--detail-content-surface:#fff;--surface-task-card:var(--detail-content-surface)}
body[data-detail-view] .tasklist-info-overview-table th,
body[data-detail-view] .tasklist-info-overview-table td{background:var(--detail-content-surface)}
/* The export paints every date column, including weekends, in strict alternation. */
body[data-detail-view] .board-timeline-board-grid>.board-timeline-band{display:none}

/* Overview shares the surrounding card canvas, including in the native dark theme. */
body[data-detail-view="overview"] .detail-native-layout .board-secondary-view-panel{background:var(--surface-main)}

/* Round the visible upper-right panel edge, rather than a corner outside the crop. */
body[data-detail-view="history"] .detail-native-layout .board-secondary-view-panel,
body[data-detail-view="timeline"] .detail-native-layout .board-secondary-view-panel{border-top-right-radius:18px;overflow:hidden}
body[data-detail-view="timeline"] .detail-native-layout .board-secondary-view-panel{width:calc(100% - 24px)}

/* Leave room inside the rounded crop for dates and the History day heading. */
body[data-detail-view="history"] .detail-native-layout .board-secondary-view-panel,
body[data-detail-view="timeline"] .detail-native-layout .board-secondary-view-panel{padding-top:24px;box-sizing:border-box}

body[data-detail-view="history"] .tasklist-history-group-labels{margin-left:8px}