/* ADV Command Center shell — chrome stylesheet, WRAPPER-SCOPED.
   docs/design/shell-reference/ui_kits/command-center-shell/shell.css lifted
   with every selector nested under .shell (preprocessor-free rewrite: each
   rule prefixed; the reference's class names are kept so PR two and the tab
   PRs lift frames against the same names). The four chrome roots (.side,
   .topbar, .filterbar, .chiprow) carry .shell on their own element, so their
   rules are compound (.shell.side); every other rule is a descendant rule.
   Consumes var(--*) from shell-tokens.css only; declares no token.

   ONE exception (3b): the page frame. The reference's .shell{grid}, .main
   and .inner rules are rewritten at the bottom against .shell-frame, a class
   that declares no token and carries no .shell, in literal lengths, so no
   ancestor of any #panel-* resolves a tree token. Rules beyond the reference
   (the rail and drawer variants of 4f, the disabled-bar dimming, the chip-row
   empty state, the logout button, the Store Portal anchor) are marked
   "ADDED" and listed in the Phase 2 report. */

/* ADV Command Center shell — desktop reference stylesheet.
   Frame 1: Overview, super_admin, selling day 7, 1440px canvas.
   Tokens come from the design system's styles.css (mobile-design-system.md §1.1).
   Vanilla CSS only. No framework, no icon font, no CDN, no second accent. */


/* ── SIDEBAR ─────────────────────────────────────────────── */
.shell.side{position:sticky;top:0;align-self:start;height:100vh;width:240px;display:flex;flex-direction:column;background:var(--bg-2);border-right:1px solid var(--border);overflow-y:auto}
.shell .side-head{padding:var(--s4) var(--s4) var(--s3)}
.shell .wordmark{display:flex;flex-direction:column;gap:3px}
.shell .wordmark b{font-size:17px;font-weight:800;letter-spacing:0.12em;color:var(--p-hover)}
.shell .wordmark span{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t-3);white-space:nowrap}
.shell .role{display:inline-block;margin-top:var(--s3);padding:3px 7px;border:1px solid var(--border-2);border-radius:var(--r1);font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--t-2);white-space:nowrap}
.shell .nav{padding:var(--s2) var(--s2) var(--s4)}
.shell .nav-group{margin-bottom:var(--s4)}
.shell .nav-eyebrow{padding:0 var(--s3) var(--s2);font-size:var(--f-eyebrow);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--t-3)}
.shell .nav a{display:block;padding:7px var(--s3);border-radius:var(--r1);font-size:var(--f-body);color:var(--t-2);text-decoration:none;transition:background var(--d1) var(--ease),color var(--d1) var(--ease)}
.shell .nav a:hover{background:var(--card);color:var(--t-1);text-decoration:none}
.shell .nav a[aria-current=page]{background:var(--p-soft);color:var(--t-1);font-weight:600;box-shadow:inset 2px 0 0 var(--p)}
.shell .nav a.sub{margin-left:var(--s4);font-size:var(--f-small);color:var(--t-3)}
.shell .nav a.sub:hover{color:var(--t-2)}
.shell .side-foot{margin-top:auto;padding:var(--s3) var(--s2) var(--s5);border-top:1px solid var(--divider)}
.shell .side-foot .nav-group{margin-bottom:var(--s3)}

/* ── MAIN COLUMN ─────────────────────────────────────────── */

.shell.topbar{display:flex;align-items:flex-end;gap:var(--s5);padding:var(--s5) var(--s7) var(--s4);border-bottom:1px solid var(--border);background:var(--bg)}
.shell.topbar h1{margin:0;font-size:var(--f-h1);font-weight:700;letter-spacing:-0.01em;color:var(--t-1)}
.shell .population{margin:4px 0 0;font-size:var(--f-small);color:var(--t-2)}
.shell .topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}

.shell .btn{height:32px;padding:0 var(--s4);border-radius:var(--r1);font-size:var(--f-small);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.shell .btn-primary{background:var(--p);color:var(--t-on-accent)}
.shell .btn-primary:hover{background:var(--p-hover)}
.shell .btn-primary:active{background:var(--p-press)}
.shell .btn-quiet{background:transparent;border:1px solid var(--border-2);color:var(--t-2)}
.shell .btn-quiet:hover{background:var(--card);color:var(--t-1)}
.shell .usermenu{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 var(--s3);border:1px solid var(--border-2);border-radius:var(--r1);color:var(--t-2);font-size:var(--f-small)}
.shell .usermenu:hover{background:var(--card);color:var(--t-1)}
.shell .usermenu .caret{color:var(--t-3);font-size:10px}

/* ── FILTER BAR (input only — no state is painted here) ──── */
/* One row, three named groups. Controls wrap inside their own group so the
   three groups never stack. */
.shell.filterbar{display:grid;grid-template-columns:minmax(0,1.25fr) 1px minmax(0,1fr) 1px minmax(0,0.5fr);align-items:start;gap:var(--s4);padding:var(--s4) var(--s7);background:var(--bg-2);border-bottom:1px solid var(--border)}
.shell .fgroup{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.shell .fgroup>.flabel{font-size:var(--f-eyebrow);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--t-3)}
.shell .fcontrols{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.shell .fsep{width:1px;align-self:stretch;background:var(--divider)}
.shell .preset,.shell .toggle-opt,.shell .field,.shell .multi{height:30px;font-family:inherit;font-size:var(--f-small);color:var(--t-1);background:var(--card);border:1px solid var(--border);border-radius:var(--r1)}
.shell .preset,.shell .toggle-opt{padding:0 var(--s3);font-weight:600;letter-spacing:0.06em;color:var(--t-2)}
.shell .preset:hover,.shell .toggle-opt:hover{background:var(--card-2);color:var(--t-1)}
.shell .toggleset{display:inline-flex;gap:2px;padding:2px;background:var(--card);border:1px solid var(--border);border-radius:var(--r1)}
.shell .toggleset .toggle-opt{height:24px;border:0;background:transparent}
.shell .field{padding:0 var(--s2);color-scheme:dark}
.shell input.field[type=date]{width:118px}
.shell select.field{max-width:140px}
.shell select.field{appearance:none;-webkit-appearance:none;padding-right:var(--s5);background-image:none}
.shell .selwrap{position:relative;display:inline-flex}
.shell .selwrap::after{content:'▾';position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--t-3);font-size:10px;pointer-events:none}
.shell .multi{display:inline-flex;align-items:center;gap:8px;padding:0 var(--s3);color:var(--t-2)}
.shell .multi:hover{background:var(--card-2);color:var(--t-1)}
.shell .multi .hint{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t-3)}
/* Fixed scope: a label, not a control. The GM's store is not theirs to change,
   so it is not painted as an input and carries no removable chip. */
.shell .fixed-scope{display:inline-flex;align-items:center;height:30px;padding:0 var(--s3);border-radius:var(--r1);background:var(--card-3);border:1px solid var(--border);color:var(--t-1);font-size:var(--f-small);font-weight:600}

/* ── CHIP ROW (the sole rendering of filter state) ───────── */
.shell.chiprow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:var(--s3) var(--s7);border-bottom:1px solid var(--border)}
.shell.chiprow .rowlabel{font-size:var(--f-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--t-3);margin-right:var(--s1)}
.shell .chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 var(--s3);background:var(--p-soft);border:1px solid var(--p);border-radius:var(--r-pill);font-size:var(--f-small);font-weight:600;color:var(--t-1);white-space:nowrap}
.shell .chip .x{width:18px;height:18px;border-radius:var(--r-pill);display:grid;place-items:center;font-size:12px;line-height:1;color:var(--t-2)}
.shell .chip .x:hover{background:var(--card-3);color:var(--t-1)}
.shell .clear-all{height:28px;padding:0 var(--s3);border-radius:var(--r-pill);font-size:var(--f-small);font-weight:600;color:var(--t-2)}
.shell .clear-all:hover{color:var(--t-1);background:var(--card)}

/* ── SECTION HEADS ───────────────────────────────────────── */
.shell .section{margin-top:var(--s6)}
.shell .section:first-child{margin-top:0}
.shell .sechead{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.shell .sechead .bar{width:3px;height:14px;border-radius:2px;background:var(--p)}
.shell .sechead h2{margin:0;font-size:var(--f-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--t-1)}
.shell .sechead .note{margin-left:auto;font-size:var(--f-small);color:var(--t-3)}

/* ── WHAT CHANGED STRIP ──────────────────────────────────── */
.shell .strip{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.shell .delta{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s3) var(--s4)}
.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 in this reference is a real reading.
   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. 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 GRID ────────────────────────────────────────────── */
.shell .kpigrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}
.shell .kpigrid-4{grid-template-columns:repeat(4,1fr)}
.shell .kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s3) var(--s4);min-width:0}
.shell .kpi .l{font-size:var(--f-eyebrow);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t-2)}
.shell .kpi .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 .kpi .s{margin-top:6px;font-size:var(--f-small);color:var(--t-3);line-height:1.35;overflow-wrap:anywhere;text-wrap:pretty}
.shell .kpi .v.placeholder{color:var(--t-3);font-weight:600}

/* ── PANELS ──────────────────────────────────────────────── */
.shell .panels{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.shell .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s5) var(--s5) var(--s5);min-width:0;overflow:hidden}
.shell .panel 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)}

/* chart chrome — gridlines at --divider, axis text at --t-3 */
.shell .plot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 var(--s2)}
.shell .plot>*{min-width:0}
.shell .axis{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--t-3);height:200px}
.shell .axis.right{text-align:right}
.shell .grid{position:relative;height:200px;border-bottom:1px solid var(--border-2)}
.shell .grid .line{position:absolute;left:0;right:0;border-top:1px solid var(--divider)}
.shell .bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:0 2px}
.shell .bars .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.shell .bars .fill{background:var(--p);border-radius:2px 2px 0 0}
.shell .bars .fill-a{background:var(--chart-2);border-radius:0}
.shell .bars .fill-b{background:var(--chart-4);border-radius:2px 2px 0 0}
.shell .bars .marker{align-self:center;width:7px;height:7px;border-radius:var(--r-pill);background:var(--t-2);margin-bottom:-3px}
.shell .xaxis{display:flex;gap:6px;padding:6px 2px 0}
.shell .xaxis span{flex:1 1 0;min-width:0;font-size:9px;letter-spacing:0.04em;text-transform:uppercase;color:var(--t-3);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell .xaxis.rot span{text-align:left;transform:rotate(-38deg);transform-origin:top left;height:32px}
.shell .xaxis.xaxis-20 span{font-size:9px;height:56px;transform:rotate(-60deg)}

/* ── TABLE PRIMITIVE ─────────────────────────────────────── */
.shell .tablewrap{max-height:520px;overflow:auto;border:1px solid var(--border);border-radius:var(--r2);background:var(--card)}
.shell .tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.shell .tbl th,.shell .tbl td{padding:9px var(--s3);text-align:right;white-space:nowrap}
.shell .tbl thead th{position:sticky;top:0;z-index:1;background:var(--bg-2);color:var(--t-3);font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;border-bottom:1px solid var(--border-2)}
.shell .tbl thead th.col-store,.shell .tbl tbody th{text-align:left}
.shell .tbl tbody th{position:sticky;left:0;background:var(--card);font-weight:700;font-size:13px;color:var(--t-1)}
.shell .tbl tbody th a{color:inherit;text-decoration:none}
.shell .tbl tbody th a::after{content:' ↗';font-size:9px;color:var(--t-3)}
.shell .tbl tbody th a:hover{color:var(--p-hover);text-decoration:underline}
.shell .tbl tbody td{color:var(--t-2);border-top:1px solid var(--divider)}
.shell .tbl tbody th{border-top:1px solid var(--divider)}
.shell .tbl tbody tr:nth-child(even) td{background:var(--bg-2)}
.shell .tbl tbody tr:nth-child(even) th{background:var(--bg-2)}
.shell .tbl tbody tr:hover td,.shell .tbl tbody tr.is-hovered td{background:var(--card-2)}
.shell .tbl tbody tr:hover th,.shell .tbl tbody tr.is-hovered th{background:var(--card-2)}
.shell .tbl tbody tr.is-unpopulated th a{color:var(--t-2)}
.shell .tbl td.placeholder{color:var(--t-3)}
.shell .legend-inline{display:flex;justify-content:center;gap:var(--s4);margin-bottom:var(--s3);font-size:var(--f-small);color:var(--t-2)}
.shell .legend-inline i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}

/* Not-enough-data panel state — same shape as the WHAT CHANGED too-early
   state: tertiary ink, no chart chrome, one instruction 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: 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 list */
.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)}
/* Benchmark badges. A comparison IS defined for these six: the thresholds are
   in force inline at public/js/tabs/overview.js:111-116, and the desktop
   green/amber/red maps to --standout / --mixed / --watch per §1.4. Painted
   from those literals as-is; bm() is deliberately not consulted here. */
.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)}

/* donut + two-column legend */
.shell .donutwrap{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center}
.shell .donut{width:156px;height:156px;border-radius:50%;position:relative}
.shell .donut::after{content:'';position:absolute;inset:27px;border-radius:50%;background:var(--card)}
.shell .legend-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:var(--s2) var(--s4)}
.shell .legend-cols div{display:flex;align-items:center;gap:8px;font-size:var(--f-small);color:var(--t-2);min-width:0;white-space:nowrap}
.shell .legend-cols i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}

.shell .footnote{margin-top:var(--s5);font-size:var(--f-small);color:var(--t-3);line-height:1.5;max-width:76ch}

/* ── FRAME 6: STATES SHEET ───────────────────────────────── */
.shell .sheet-canvas{min-height:100vh;padding:var(--s6) var(--s7) var(--s9);background:var(--bg)}
.shell .sheet-head h1{margin:0;font-size:var(--f-h1);font-weight:700;color:var(--t-1)}
.shell .sheet-head .population{margin:4px 0 var(--s6)}
.shell .sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px 240px 320px;gap:var(--s4);align-items:start;min-width:1240px}
.shell .spec{min-width:0}
.shell .spec-label{margin-bottom:var(--s2);font-size:var(--f-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--t-3)}
.shell .spec-body{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.shell .spec-body-pad{padding:var(--s4)}
.shell .side-static{position:static;height:auto;min-height:520px;border-right:0}
.shell .statecol{padding:0;display:grid;gap:2px}
.shell .statecol a{padding:7px var(--s3)}
.shell .nav a.is-hover{background:var(--card);color:var(--t-1)}
.shell .nav a.is-focus{outline:2px solid var(--p-ring);outline-offset:2px}
.shell .nav a.is-corp{color:var(--t-3);font-size:var(--f-small)}
.shell .nav a.is-corp .tag,.shell .corp .tag{color:var(--t-3);font-size:10px;letter-spacing:0.1em;text-transform:uppercase}
.shell .spec-notes{margin:var(--s4) 0 0;display:grid;grid-template-columns:88px 1fr;gap:6px var(--s3);font-size:var(--f-small)}
.shell .spec-notes dt{color:var(--t-2);font-weight:600}
.shell .spec-notes dd{margin:0;color:var(--t-3);line-height:1.45}

/* collapsed rail — geometry is real, glyph coverage is not */
.shell .rail{width:72px;padding:var(--s3) 0;background:var(--bg-2);border-right:1px solid var(--border);min-height:520px}
.shell .rail-head{display:grid;place-items:center;padding-bottom:var(--s3);margin-bottom:var(--s2);border-bottom:1px solid var(--divider)}
.shell .rail-head b{font-size:13px;font-weight:800;letter-spacing:0.1em;color:var(--p-hover)}
.shell .rail-group{padding:var(--s2) 0;border-bottom:1px solid var(--divider);display:grid;justify-items:center;gap:2px}
.shell .rail-group:last-child{border-bottom:0}
.shell .rail-item{display:grid;place-items:center;width:44px;height:38px;border-radius:var(--r1);color:var(--t-2)}
.shell .rail-item:hover{background:var(--card);color:var(--t-1)}
.shell .rail-item[aria-current=page]{background:var(--p-soft);color:var(--t-1);box-shadow:inset 2px 0 0 var(--p)}
.shell .rail-blank{width:18px;height:18px;border:1px dashed var(--border-2);border-radius:3px}
.shell .rail-init{font-size:12px;font-weight:700;letter-spacing:0.04em}
.shell .rail-item.rail-sub .rail-init{font-size:10px;font-weight:600;color:var(--t-3)}
.shell .rail-item.rail-sub{height:30px}

/* ── FRAMES 7-8: 380px COLLAPSE ──────────────────────────── */
.shell .m-body{background:var(--bg)}
.shell .m-frame{position:relative;width:380px;min-height:820px;margin:0 auto;padding-bottom:64px;background:radial-gradient(120% 60% at 50% -10%,rgba(0,111,160,0.10),transparent 60%),var(--bg);overflow:hidden}
.shell .m-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);background:rgba(10,17,24,0.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--border)}
.shell .m-burger{width:36px;height:36px;border-radius:var(--r2);display:grid;place-items:center;background:var(--card-2);border:1px solid var(--border);color:var(--t-1);flex:0 0 auto}
.shell .m-brand b{font-size:15px;font-weight:800;letter-spacing:0.12em;color:var(--p-hover)}
.shell .m-spacer{flex:1}
.shell .m-title{padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--border)}
.shell .m-title h1{margin:0;font-size:var(--f-h1);font-weight:700;color:var(--t-1)}
.shell .m-main{padding:var(--s4) var(--s4) var(--s6)}
.shell .m-main .section{margin-top:var(--s5)}
.shell .m-main .section:first-child{margin-top:0}
.shell .m-strip{display:grid;gap:var(--s2)}
.shell .m-kpigrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.shell .m-kpigrid .kpi{padding:var(--s3)}
.shell .m-kpigrid .v{font-size:22px}
.shell .m-main .panel{padding:var(--s4)}

/* closed filter sheet: the chip row is the peek */
.shell .m-sheet-peek{position:absolute;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);background:var(--bg-2);border-top:1px solid var(--border-2);box-shadow:var(--shadow-sheet)}
.shell .m-chips{flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.shell .m-chips::-webkit-scrollbar{display:none}
.shell .m-chips .chip,.shell .m-chips .clear-all{flex:0 0 auto}
.shell .m-filter-btn{flex:0 0 auto;height:32px;padding:0 var(--s4);border-radius:var(--r1);background:var(--p);color:var(--t-on-accent);font-size:var(--f-small);font-weight:700;letter-spacing:0.1em;text-transform:uppercase}

/* drawer */
.shell .m-scrim{position:absolute;inset:0;z-index:1000;background:var(--overlay);backdrop-filter:blur(2px)}
.shell .m-drawer{position:absolute;top:0;left:0;bottom:0;z-index:1010;width:240px;display:flex;flex-direction:column;background:var(--bg-2);border-right:1px solid var(--border-2);box-shadow:var(--shadow-2);overflow-y:auto}
.shell .m-drawer .side-head{position:relative;padding:var(--s4) var(--s4) var(--s3)}
.shell .m-drawer .nav{padding:var(--s2) var(--s2) var(--s4)}
.shell .m-drawer .side-foot{margin-top:auto;padding:var(--s3) var(--s2) var(--s5);border-top:1px solid var(--divider)}
.shell .m-drawer-close{position:absolute;top:var(--s3);right:var(--s3);width:28px;height:28px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--card-2);border:1px solid var(--border);color:var(--t-2)}

/* ── FRAME 9: COMPONENT SHEET ────────────────────────────── */
.shell .sheet-grid-9{grid-template-columns:repeat(3,minmax(0,1fr));min-width:1240px}
.shell .spec-wide{grid-column:span 3}
.shell .spec-disclaimer{margin-bottom:var(--s5);padding:var(--s3) var(--s4);background:var(--card);border:1px dashed var(--border-2);border-radius:var(--r2)}
.shell .spec-disclaimer .ps-body{max-width:none;color:var(--t-2)}
.shell .kpigrid-2{grid-template-columns:1fr 1fr}
.shell .strip-state-spec{margin-top:var(--s3);min-height:0;padding:var(--s4)}
.shell .panel-state-spec{min-height:0;padding:var(--s5) var(--s4);background:var(--card);border:1px solid var(--border);border-radius:var(--r2)}
.shell .spec-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.shell .chiprow-spec{padding:0;border-bottom:0}
.shell .chip.is-hover{background:var(--card-3);border-color:var(--border-2)}
.shell .chip .x.is-hover-x{background:var(--card-3);color:var(--t-1)}
.shell .chip .x.is-focus{outline:2px solid var(--p-ring);outline-offset:2px}
.shell .spec-sub{display:flex;gap:var(--s5);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--divider)}
.shell .spec-sub-col{flex-direction:column;gap:2px}
.shell .spec-sub .population{margin:0}
.shell .tablewrap-spec{max-height:none;border:0;border-radius:0;border-bottom:1px solid var(--border)}
.shell .spec-notes-pad{padding:var(--s4)}
.shell .rail-note{min-height:0;padding:var(--s4);text-align:left;align-items:flex-start;background:var(--card);border-top:1px solid var(--border)}
.shell .rail-note .ps-body{max-width:none}


/* ═══════════════════════════════════════════════════════════════════════════
   ADDED — rules beyond the reference (listed in the Phase 2 report)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Chrome icons (Sep 24 amendments, part two, item 4): <svg class="ico"><use
   href="/icons/shell.svg#name"/></svg>, a same-origin sprite whose symbols
   carry fill none and stroke currentColor, so an icon takes its element's
   color. 16px beside a sidebar label, 18px alone in the rail (the .collapsed
   block below); the head, drawer and chip-row buttons size their own. Every
   sidebar entry, the foot's rows included, leads with its icon; the expanded
   sidebar shows icon and label, the rail hides .lbl and the entry's title
   names it. The former initials tiles (.init) are gone; the user row keeps
   one, .initials, because a name has no icon. The Segment tag now sits in a
   PLAN entry (item 3), styled here in place of the retired .corp rules. */
.shell .ico{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none}
.shell .nav a{display:flex;align-items:center;gap:var(--s2)}
.shell .nav a .tag{color:var(--t-3);font-size:10px;letter-spacing:0.1em;text-transform:uppercase}
.shell .side-foot .initials{display:none}
.shell .side-head{position:relative}
.shell .side-head .m-drawer-close{display:none}
/* Sidebar collapse toggle (Sep 24 amendment 3): a chevron in the side head,
   top right beside the wordmark when expanded; in the head's grid flow under
   the ADV mark in the rail; hidden at or below 1024px where the drawer wins. */
.shell .side-head .nav-toggle{position:absolute;top:var(--s3);right:var(--s3);width:28px;height:28px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--card-2);border:1px solid var(--border);color:var(--t-2)}
.shell .side-head .nav-toggle:hover{background:var(--card-3);color:var(--t-1)}
.shell .side-head .nav-toggle .ico,.shell .side-head .m-drawer-close .ico{width:14px;height:14px}
.shell .side-head .nav-toggle .ico-expand{display:none}
/* Store Portal (part two, item 2): the reference's quiet button, spanning the
   foot's width, the label centred with the outward arrow trailing it. At
   (0,3,1) it outranks the .nav a entry rule whatever the order. */
.shell .side-foot a.btn{display:flex;width:100%;justify-content:center;height:32px;padding:0 var(--s4);margin-bottom:var(--s2);border:1px solid var(--border-2);border-radius:var(--r1);background:transparent;font-size:var(--f-small);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--t-2)}
.shell .side-foot a.btn:hover{background:var(--card);color:var(--t-1)}
.shell .side-foot a.btn .ico{width:14px;height:14px}
/* Sidebar foot, user group (Sep 24 amendment 7): Store Portal and the user
   menu (name + Logout) moved here from the top bar, in the foot's own
   styling: the Store Portal link is a nav entry; the user row is the name at
   --t-2 with the Logout button at its right. In the rail both become initials
   tiles (SP, the user's initials, Lo) through the same .lbl / .init pair. */
.shell .side-foot .usermenu{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);height:auto;padding:7px var(--s3);border:0;border-radius:var(--r1);color:var(--t-2);font-size:var(--f-small)}
.shell .side-foot .usermenu .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Top bar: hamburger hidden above the drawer breakpoint; title block; status
   line kept (display:none inline, read by allRowsLoaded()). The logout button
   styling below is the user menu's, now in the sidebar foot (amendment 7);
   the anchor rule keeps any a.btn from underlining. */
.shell.topbar .m-burger{display:none}
.shell.topbar .m-burger .ico{width:18px;height:18px}
.shell.topbar .topbar-title{min-width:0}
.shell.topbar .population[hidden]{display:none}
.shell .usermenu .logout{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:0 2px;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--t-3)}
.shell .usermenu .logout .ico{width:12px;height:12px}
.shell .usermenu .logout:hover{color:var(--t-1)}
.shell a.btn,.shell a.btn:hover{text-decoration:none}

/* Chip row: empty state reads "None" in tertiary ink; chips carry data-kind. */
.shell.chiprow .none{font-size:var(--f-small);color:var(--t-3)}

/* Filter bar collapse (Sep 24 amendment 4): the Filters disclosure at the left
   of the chip row, before ACTIVE; the chip row stays visible as the state
   display while the bar is collapsed. Below 768px the legacy FILTERS drawer
   path stands: the button hides and the collapsed class is inert. */
.shell.chiprow .filters-toggle{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s3);margin-right:var(--s1);border-radius:var(--r-pill);background:var(--card);border:1px solid var(--border);font-size:var(--f-small);font-weight:600;color:var(--t-2)}
.shell.chiprow .filters-toggle:hover{background:var(--card-2);color:var(--t-1)}
.shell.chiprow .filters-toggle .ico{width:14px;height:14px}
.shell.chiprow .filters-toggle::after{content:'\25B4';font-size:10px;color:var(--t-3)}
.shell.chiprow .filters-toggle[aria-expanded=false]::after{content:'\25BE'}
@media (min-width:768px){
  .shell.filterbar.collapsed{display:none}
}
@media (max-width:767.98px){
  .shell.chiprow .filters-toggle{display:none}
}

/* Pressed states (Sep 24 amendment 5, Matt's ruling): the chip row remains the
   rendering of state, and a control that holds a state mirrors it in the
   chip's own three tokens, so a pressed preset or toggle option reads as its
   chip: fill --p-soft, hairline --p, text --t-1. A toggleset option has no
   border (border:0 inside the set), so its hairline is an inset box-shadow. */
.shell .preset[aria-pressed=true]{background:var(--p-soft);border-color:var(--p);color:var(--t-1)}
.shell .toggle-opt[aria-pressed=true]{background:var(--p-soft);box-shadow:inset 0 0 0 1px var(--p);color:var(--t-1)}

/* Local-filter tabs (segment, inventory, breakeven): the bar and the chip row
   dim, the group toggle and the group chip stay live — main.js:161-167's
   global-filters-disabled class, carried from dashboard.css:124-144. */
.shell.filterbar.global-filters-disabled{position:relative}
.shell.filterbar.global-filters-disabled .flabel,
.shell.filterbar.global-filters-disabled .preset,
.shell.filterbar.global-filters-disabled .field,
.shell.filterbar.global-filters-disabled .selwrap,
.shell.filterbar.global-filters-disabled .multi{opacity:0.35;pointer-events:none}
.shell.filterbar.global-filters-disabled .toggleset,
.shell.filterbar.global-filters-disabled .toggleset *{opacity:1;pointer-events:auto}
.shell.filterbar.global-filters-disabled::after{content:'Tab uses local filters below';position:absolute;right:var(--s7);bottom:-18px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t-3)}
.shell.chiprow.global-filters-disabled .chip:not([data-kind=group]),
.shell.chiprow.global-filters-disabled .clear-all{opacity:0.35;pointer-events:none}

/* Scrim behind the drawer (4f). Hidden until the sidebar opens below 1024px. */
.shell.scrim{display:none;position:fixed;inset:0;z-index:var(--z-scrim);background:var(--overlay);backdrop-filter:blur(2px)}

/* ── The 72px initials rail (frame 6), ONE block (Sep 24 amendment 3). The
      state is the .collapsed class on .shell.side; main.js sets it from the
      stored preference (localStorage adv_nav_collapsed) and, with none stored,
      from the 1280px breakpoint through matchMedia, and index.html restores
      the same reading inline before first paint. The block sits above the
      drawer breakpoint so at or below 1024px the drawer wins whatever the
      class says. The frame's first column follows through .shell-frame
      .nav-collapsed in the PAGE FRAME section. ────────────────────────── */
@media (min-width:1025px){
  .shell.side.collapsed{width:72px}
  .shell.side.collapsed .side-head{display:grid;place-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--divider)}
  .shell.side.collapsed .wordmark span,.shell.side.collapsed .role{display:none}
  .shell.side.collapsed .wordmark b{font-size:13px;letter-spacing:0.1em}
  .shell.side.collapsed .side-head .nav-toggle{position:static;margin-top:var(--s2)}
  .shell.side.collapsed .side-head .nav-toggle .ico-collapse{display:none}
  .shell.side.collapsed .side-head .nav-toggle .ico-expand{display:block}
  .shell.side.collapsed .nav{padding:0}
  .shell.side.collapsed .nav-group{margin-bottom:0;padding:var(--s2) 0;border-bottom:1px solid var(--divider);display:grid;justify-items:center;gap:2px}
  .shell.side.collapsed .nav-eyebrow{display:none}
  .shell.side.collapsed .nav a,.shell.side.collapsed .nav .who,.shell.side.collapsed .nav .logout{display:grid;place-items:center;width:44px;height:38px;padding:0;margin:0;font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:none}
  .shell.side.collapsed .nav .lbl{display:none}
  .shell.side.collapsed .nav .ico{width:18px;height:18px}
  .shell.side.collapsed .side-foot .initials{display:block}
  .shell.side.collapsed .side-foot a.btn{border:0;margin:0}
  .shell.side.collapsed .nav a[data-sub]{height:30px;margin-left:0;font-size:10px;font-weight:600}
  .shell.side.collapsed .usermenu{display:grid;justify-items:center;gap:2px;padding:0;overflow:visible}
  .shell.side.collapsed .side-foot{padding:0 0 var(--s4)}
  .shell.side.collapsed .side-foot .nav-group{margin-bottom:0}
}

/* ── 1024px: the sidebar becomes the drawer behind the hamburger (frame 8).
      Full labels return inside the drawer. ─────────────────────────────── */
@media (max-width:1024px){
  /* align-self:auto (Sep 24 amendment 6): the base rule's align-self:start
     is what kept the fixed drawer content-tall, so top:0 and bottom:0 never
     stretched it and it never scrolled; measured 1009px tall on a 700px
     viewport. auto restores the stretch; the drawer then scrolls and the
     foot sits in flow after the nav, not pinned. */
  .shell.side{position:fixed;top:0;left:0;bottom:0;height:auto;align-self:auto;width:240px;z-index:var(--z-sheet);transform:translateX(-100%);transition:transform var(--d2) var(--ease);border-right:1px solid var(--border-2);box-shadow:var(--shadow-2);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .shell.side.open{transform:none}
  .shell .side-head .m-drawer-close{display:grid}
  .shell .side-head .nav-toggle{display:none}
  .shell .side-foot{margin-top:0}
  .shell.scrim.open{display:block}
  .shell.topbar{gap:var(--s3);padding-left:var(--s4);padding-right:var(--s4)}
  .shell.topbar .m-burger{display:grid}
  .shell.filterbar{padding-left:var(--s4);padding-right:var(--s4)}
  .shell.chiprow{padding-left:var(--s4);padding-right:var(--s4)}
}
@media (max-width:768px){
  .shell.topbar{flex-wrap:wrap;align-items:center}
  .shell.topbar .topbar-actions{margin-left:0;flex-wrap:wrap}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE FRAME — the one exception to the .shell prefix (3b). No token is
   declared or consumed here; literal lengths only. The frame, the content
   column and the canvas carry no .shell, so every #panel-* resolves its
   var(--*) to dashboard.css exactly as today. The canvas has no max-width
   (Sep 24 amendment 1): it takes the column, and the panels' own dashboard.css
   grids govern their width as they did under #main. The rail column follows
   .nav-collapsed (amendment 3), set by main.js, never a breakpoint alone.
   ═══════════════════════════════════════════════════════════════════════════ */
.shell-frame{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.shell-frame>.main{min-width:0}
.shell-frame .canvas{min-width:0;padding:24px 32px 56px}
@media (min-width:1025px){
  .shell-frame.nav-collapsed{grid-template-columns:72px minmax(0,1fr)}
}
@media (max-width:1024px){
  .shell-frame{grid-template-columns:minmax(0,1fr)}
  .shell-frame .canvas{padding:16px 20px 40px}
}
@media (max-width:768px){
  .shell-frame .canvas{padding:16px 12px 40px}
}
@media (min-width:1600px){
  .shell-frame .canvas{padding:28px 32px 56px}
}