/* ADV Command Center shell — Overview panels stylesheet (shell PR two, section
   16 row 94; docs/design/DESIGN_overview_panel_restyle.md Decision 1 under R-A).
   Consumes var(--*) from shell-tokens.css only; declares no token. Linked in
   public/index.html directly after shell.css. Every rule is scoped under .shell:
   the Overview's #overview-content carries class="shell" and is the size
   container every column step below queries (Decision 8); the KPI card is
   self-rooted (.shell.kcard, the chrome's compound-root precedent) because the
   shared renderer, public/js/core/kpi-cards.js, emits it on every tab, inside
   or outside a .shell wrapper (Decision 2).

   The reference primitives PR one lifted into shell.css and never used moved
   here under their final class names (STOP-2 rider, ruled Oct 6 2026): the
   strip and its states; the KPI grid and the card, .kpi renamed .shell.kcard
   because .kpi still matches 17 legacy selectors in dashboard.css; the panels,
   .panel renamed .spanel because .panel is the legacy tab-panel class
   (dashboard.css:100 hides it, main.js strips its .active); the panel states
   and the two pill kinds; the Deal Quality list and its badges. The reference's
   CSS-drawn donut ring and HTML legend (.donutwrap, .donut, .legend-cols) are
   not carried: under R-F the donut is a Chart.js canvas with Chart.js's legend
   on the same tokens, so those four rules would have no element.
   probe p2-overview-panels:shell-panels */

/* ── THE COLUMN (Decision 8, STOP-8) ────────────────────────
   #overview-content is a size container; every step is a container query on
   its width, so the sidebar's state (240 expanded, 72 rail, none at the drawer)
   moves the steps without a second set of viewport queries. No maximum width.
   Cards: six-up at 960 and above (6 × 150 + 5 × 12, a 150px card floor, so the
   1280-expanded canvas of 971px renders six-up), three-up from 480 to 959,
   two-up below 480; six divides into 3 and 2, so no orphan at any step. The
   strip five-up at 800 and above, one-up below. Chart panels two-up at 880 and
   above, one-up below, cells filling their track. */
#overview-content.shell{container-type:inline-size}

.shell .kpigrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.shell .strip{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.shell .panels{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-bottom:var(--s4)}
@container (min-width:480px){
  .shell .kpigrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:800px){
  .shell .strip{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container (min-width:880px){
  .shell .panels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:960px){
  .shell .kpigrid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* vertical rhythm: the strip section, the three card rows, the pace section,
   the two panel rows. The strip and the pace section are display:none when
   their gate (the current month) does not hold. */
.shell .ovstrip{margin-bottom:var(--s6)}
.shell .pacesec{margin:var(--s4) 0 var(--s5)}
.shell .sechead .info-icon{margin-left:0}

/* ── WHAT CHANGED STRIP (Decision 5; D1 structure, D7 placeholders) ───── */
.shell .delta{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s3) var(--s4);min-width:0}
.shell .delta .name{font-size:var(--f-eyebrow);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t-2)}
.shell .delta .v{margin-top:6px;font-size:22px;font-weight:700;line-height:1;letter-spacing:var(--ls-num)}
.shell .delta .v.up{color:var(--standout)}
.shell .delta .v.down{color:var(--watch)}
.shell .delta .baseline{margin-top:6px;font-size:var(--f-small);color:var(--t-3);line-height:1.4}
.shell .delta .attrib{margin-top:var(--s2);display:inline-block;white-space:nowrap;padding:2px 8px;border-radius:var(--r-pill);background:var(--card-3);font-size:var(--f-eyebrow);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--t-2)}
/* Placeholder treatment — no delta value is a real reading until the D1 chain
   ships. Declared after .attrib so it wins at equal specificity: dashed outline
   and tertiary ink, so an unpopulated slot can never read as a measured fact. */
.shell .delta .v.placeholder{color:var(--t-3);font-weight:600;letter-spacing:0.02em}
.shell .delta .attrib.placeholder-attrib{background:transparent;border:1px dashed var(--border-2);color:var(--t-3)}

/* Too-early state for the WHAT CHANGED strip (selling days 1 and 2). Same
   vocabulary as the panel state, sized to the strip's row so the KPI grid
   below does not shift. */
.shell .strip-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);min-height:132px;padding:var(--s4) var(--s5);text-align:center;background:var(--card);border:1px dashed var(--border-2);border-radius:var(--r2)}

/* ── KPI CARD PRIMITIVE (Decisions 2 and 3): .shell.kcard ─────────────────
   Emitted by kpi-cards.js on every tab: .l the label, .v the figure, always in
   the primary ink because a level paints no verdict (no band class exists), .s the sub-text
   and, on the three per-eligible cards, a second .s.target line carrying
   "<P>% of <target> target" (STOP-3), then .yoy, neutral in --t-2 with the
   glyph carrying direction (STOP-2 rider). */
.shell.kcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s3) var(--s4);min-width:0}
.shell.kcard .l{font-size:var(--f-eyebrow);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t-2)}
.shell.kcard .v{margin-top:6px;font-size:26px;font-weight:700;line-height:1;letter-spacing:var(--ls-num);color:var(--t-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.kcard .s{margin-top:6px;font-size:var(--f-small);color:var(--t-3);line-height:1.35;overflow-wrap:anywhere;text-wrap:pretty}
.shell.kcard .v.placeholder{color:var(--t-3);font-weight:600}
.shell.kcard .yoy{margin-top:6px;font-size:var(--f-small);color:var(--t-2)}

/* ── PANELS (Decision 6): .spanel, its h3 and the chart box ──────────────
   The chart box grows with its track at 2:1, bounded (220px floor, 260 for the
   donut, 400px ceiling), which is what stops the fixed-height stretch past
   1600px that read as emptied canvas (STOP-8). */
.shell .spanel{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s5);min-width:0;overflow:hidden}
.shell .spanel h3{margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--border);font-size:var(--f-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--t-2)}
.shell .chartbox{position:relative;width:100%;aspect-ratio:2/1;min-height:220px;max-height:400px}
.shell .chartbox.chartbox-donut{min-height:260px}
.shell .chartbox>canvas{display:block}
.shell .chartbox[hidden],.shell .panel-state[hidden]{display:none}

/* Not-enough-data panel state (the two D5 states) — same shape as the WHAT
   CHANGED too-early state: tertiary ink, no chart chrome, one pill. */
.shell .panel-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);min-height:238px;padding:0 var(--s5);text-align:center}
.shell .ps-title{margin:0;font-size:var(--f-h3);font-weight:600;color:var(--t-2)}
.shell .ps-body{margin:0;max-width:38ch;font-size:var(--f-small);line-height:var(--lh-prose);color:var(--t-3);text-wrap:pretty}
.shell .ps-pill{margin:var(--s2) 0 0;padding:4px 10px;border:1px dashed var(--border-2);border-radius:var(--r-pill);font-size:var(--f-eyebrow);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--t-3)}
/* Empty-state pills differentiate by KIND, not decoration (D6): an instruction
   is an action and keeps the dashed edge; a schedule is a fact and drops it. */
.shell .ps-pill--schedule{border:0;padding:4px 0}

/* ── DEAL QUALITY SNAPSHOT: the list and the badge pills ─────────────────
   A comparison IS defined for the six banded rows: the thresholds are in force
   inline in public/js/tabs/overview.js (the Deal Quality literals, section 16
   row 144), and green/amber/red maps to --standout / --mixed / --watch per
   mobile-design-system.md 1.4. Painted from those literals as-is; bm() is
   deliberately not consulted. The two fact rows take the neutral pill. */
.shell .qlist{display:grid}
.shell .qrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:11px 0;border-bottom:1px solid var(--divider)}
.shell .qrow:last-child{border-bottom:0}
.shell .qrow .k{font-size:var(--f-body);color:var(--t-1)}
.shell .pill{display:inline-block;white-space:nowrap;padding:3px 9px;border-radius:var(--r-pill);background:var(--card-3);border:1px solid var(--border-2);font-size:var(--f-small);font-weight:600;color:var(--t-1)}
.shell .pill--standout{background:var(--standout-bg);border-color:transparent;color:var(--standout)}
.shell .pill--mixed{background:var(--mixed-bg);border-color:transparent;color:var(--mixed)}
.shell .pill--watch{background:var(--watch-bg);border-color:transparent;color:var(--watch)}
.shell .pill.placeholder{background:transparent;border:1px dashed var(--border-2);color:var(--t-3)}