.overview-page { width: min(100%, 96rem); margin-inline: auto; padding-bottom: var(--space-12); }
.overview-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: end; }
.overview-hero__copy h1 { margin: var(--space-2) 0 0; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.05em; line-height: 1; }
.overview-hero__copy p { max-width: 46rem; margin: var(--space-4) 0 0; color: var(--color-text-muted); line-height: 1.6; }
.overview-freshness { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elevated); }
.overview-freshness > div { display: grid; min-width: 9rem; }
.overview-freshness small { color: var(--color-text-subtle); font-size: .67rem; }
.overview-freshness strong { font-size: var(--font-size-xs); }
.overview-live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--color-success) 14%, transparent); }
.overview-freshness .button { min-width: 2.25rem; padding-inline: .65rem; }
.overview-mode { display: flex; width: fit-content; gap: var(--space-1); padding: .3rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.overview-mode button { min-height: 2.6rem; padding: .55rem .9rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-xs); font-weight: 700; cursor: pointer; }
.overview-mode button:hover { color: var(--color-text); }
.overview-mode button.is-active { background: var(--color-bg-elevated); color: var(--color-text); box-shadow: var(--shadow-sm); }
.overview-period { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: var(--space-2); }
.overview-period label { display: grid; gap: .3rem; color: var(--color-text-subtle); font-size: .68rem; }
.overview-period select, .overview-period input, .overview-search input { min-height: 2.65rem; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); color: var(--color-text); font: inherit; }
.overview-period > span { padding-bottom: .65rem; color: var(--color-text-subtle); font-family: var(--font-mono); font-size: .68rem; }
.overview-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.overview-kpi { display: grid; min-width: 0; min-height: 8rem; align-content: space-between; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elevated); color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.overview-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border)); }
.overview-kpi span { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.35; }
.overview-kpi strong { font-size: clamp(1.65rem, 3vw, 2.45rem); letter-spacing: -.05em; }
.overview-kpi small { color: var(--color-text-subtle); font-size: .67rem; }
.overview-workspace { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .85fr); gap: var(--space-5); margin-top: var(--space-5); align-items: start; }
.overview-workspace main, .overview-workspace aside { display: grid; min-width: 0; gap: var(--space-5); }
.overview-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); }
.overview-card > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.overview-card > header span { color: var(--color-text-subtle); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.overview-card > header h2 { margin: .2rem 0 0; font-size: var(--font-size-lg); letter-spacing: -.025em; }
.overview-card > header > strong { display: grid; min-width: 2rem; height: 2rem; place-items: center; border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--font-size-xs); }
.overview-card > header > strong.is-ok { color: var(--color-success); }
.overview-card > header > strong.is-warning { color: var(--color-warning); }
.overview-search { display: block; padding: var(--space-4) var(--space-5) 0; }
.overview-search input { width: 100%; }
.overview-queue-group { padding: var(--space-4) var(--space-5); }
.overview-queue-group + .overview-queue-group { border-top: 1px solid var(--color-border); }
.overview-queue-group > h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-subtle); font-size: var(--font-size-xs); }
.overview-queue-group > h3 span { display: grid; min-width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: var(--color-surface); }
.overview-queue-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.overview-queue-item + .overview-queue-item { margin-top: var(--space-2); }
.overview-queue-item::before { position: absolute; top: 1rem; bottom: 1rem; left: -.1rem; width: .22rem; border-radius: 1rem; background: var(--color-accent); content: ""; }
.overview-queue-item.severity-high::before { background: var(--color-danger); }
.overview-queue-item h4 { margin: .25rem 0; font-size: var(--font-size-sm); }
.overview-queue-item p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.5; }
.overview-queue-item small { color: var(--color-text-subtle); font-size: .67rem; }
.overview-queue-item > div:last-child { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.overview-empty { padding: var(--space-7) var(--space-5); text-align: center; }
.overview-empty strong { font-size: var(--font-size-sm); }
.overview-empty p { max-width: 34rem; margin: var(--space-2) auto var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.55; }
.overview-list > a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none; }
.overview-list > a + a { border-top: 1px solid var(--color-border); }
.overview-list > a:hover { background: var(--color-surface-hover); }
.overview-list strong { font-size: var(--font-size-sm); }
.overview-list p { margin: .25rem 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.overview-list small { color: var(--color-text-subtle); font-size: .67rem; }
.overview-review-list article { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.overview-review-list article + article { border-top: 1px solid var(--color-border); }
.overview-review-list article > div:last-child { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--space-2); }
.overview-review-list strong { font-size: var(--font-size-sm); }
.overview-review-list p { margin: .25rem 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.overview-review-list small { color: var(--color-text-subtle); font-size: .67rem; }
.overview-capability-note { margin: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-subtle); font-size: .68rem; line-height: 1.5; }
.overview-readiness-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.overview-readiness-counts > span { display: grid; gap: .2rem; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); font-size: .67rem; }
.overview-readiness-counts strong { color: var(--color-text); font-size: var(--font-size-lg); }
.overview-table__head, .overview-table > a { display: grid; grid-template-columns: 1.15fr 1fr .7fr 1.2fr; gap: var(--space-3); padding: var(--space-3) var(--space-5); }
.overview-table__head { border-block: 1px solid var(--color-border); color: var(--color-text-subtle); font-size: .67rem; }
.overview-table > a { align-items: center; color: inherit; font-size: var(--font-size-xs); text-decoration: none; }
.overview-table > a + a { border-top: 1px solid var(--color-border); }
.overview-table > a:hover { background: var(--color-surface-hover); }
.overview-table i { display: block; width: fit-content; padding: .28rem .5rem; border-radius: var(--radius-pill); background: var(--color-surface); font-size: .65rem; font-style: normal; }
.overview-table i.status-ready { background: color-mix(in srgb, var(--color-success) 13%, transparent); color: var(--color-success); }
.overview-table i.status-not-ready { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.overview-table i.status-needs-review { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); }
.overview-table small { display: block; margin-top: .25rem; color: var(--color-text-subtle); font-size: .62rem; }
.overview-agenda, .overview-task-list { display: grid; }
.overview-agenda a, .overview-task-list a { display: grid; gap: .3rem; padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none; }
.overview-agenda a + a, .overview-task-list a + a { border-top: 1px solid var(--color-border); }
.overview-agenda a:hover, .overview-task-list a:hover { background: var(--color-surface-hover); }
.overview-agenda a.has-conflict { box-shadow: inset .2rem 0 var(--color-danger); }
.overview-agenda time, .overview-agenda small, .overview-task-list small { color: var(--color-text-subtle); font-size: .67rem; }
.overview-agenda strong, .overview-task-list strong { font-size: var(--font-size-xs); }
.overview-task-list a { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.overview-task-list i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-accent); }
.overview-task-list i.task-overdue { background: var(--color-danger); }
.overview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.overview-actions .button { justify-content: flex-start; }
.overview-health, .overview-health-ok { margin: 0; padding: var(--space-4) var(--space-5); }
.overview-health { display: grid; gap: var(--space-3); list-style: none; }
.overview-health li { display: grid; gap: .2rem; }
.overview-health strong { font-size: var(--font-size-xs); }
.overview-health span, .overview-health-ok { color: var(--color-text-muted); font-size: .7rem; line-height: 1.5; }
.overview-limitations { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .7rem; }
.overview-limitations summary { color: var(--color-text); cursor: pointer; }
.overview-limitations p { line-height: 1.55; }
.overview-warning { display: flex; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--color-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-elevated)); font-size: var(--font-size-xs); }
.overview-warning span { color: var(--color-text-muted); }
.overview-warning.is-success { border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-success) 8%, var(--color-bg-elevated)); }
.overview-loading { display: grid; gap: var(--space-4); margin-top: var(--space-6); color: var(--color-text-subtle); text-align: center; }
.overview-skeleton-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.overview-skeleton { min-height: 8rem; border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--color-surface) 20%, var(--color-surface-hover) 45%, var(--color-surface) 70%); background-size: 220% 100%; animation: overview-shimmer 1.4s linear infinite; }
.overview-skeleton--wide { min-height: 3.5rem; }
.overview-skeleton--body { min-height: 25rem; }
.overview-state { display: grid; min-height: 25rem; place-items: center; align-content: center; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-7); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-elevated); text-align: center; }
.overview-state > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); font-weight: 800; }
.overview-state h2, .overview-state p { margin: 0; }
.overview-state p { color: var(--color-text-muted); }
@keyframes overview-shimmer { to { background-position: -220% 0; } }

@media (max-width: 74rem) { .overview-summary, .overview-skeleton-grid { grid-template-columns: repeat(3, 1fr); } .overview-workspace { grid-template-columns: minmax(0, 1fr); } .overview-workspace aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .overview-aside-card:first-child { grid-column: 1 / -1; } }
@media (max-width: 48rem) { .overview-hero { grid-template-columns: 1fr; } .overview-freshness { width: fit-content; } .overview-mode { width: 100%; overflow-x: auto; } .overview-mode button { flex: 1 0 auto; } .overview-period { justify-content: flex-start; } .overview-summary, .overview-skeleton-grid { grid-template-columns: repeat(2, 1fr); } .overview-workspace aside { grid-template-columns: 1fr; } .overview-aside-card:first-child { grid-column: auto; } .overview-queue-item { align-items: flex-start; flex-direction: column; } .overview-queue-item > div:last-child { justify-content: flex-start; } .overview-readiness-counts { grid-template-columns: repeat(2, 1fr); } .overview-table__head { display: none; } .overview-table > a { grid-template-columns: 1fr 1fr; } .overview-table > a span::before { display: block; margin-bottom: .2rem; color: var(--color-text-subtle); content: attr(data-label); font-size: .62rem; } }
@media (max-width: 30rem) { .overview-summary { grid-template-columns: 1fr; } .overview-kpi { min-height: 6.5rem; } .overview-actions { grid-template-columns: 1fr; } .overview-list > a { grid-template-columns: minmax(0, 1fr) auto; } .overview-list > a small { display: none; } }
@media (max-width: 40rem) { .overview-review-list article { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .overview-skeleton { animation: none; } .overview-kpi { transition: none; } }