*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{height:100%}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);font-size:var(--fs-base);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-0.011em;
display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100%}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.03em;font-family:var(--font-display)}
code{background:var(--surface-3);padding:2px 6px;border-radius:6px;font-size:0.9em;color:var(--brand)}
.muted{color:var(--ink-muted);font-size:12px}
.hidden{display:none!important}
/* ---- app rail (Apple Settings / Music sidebar) ---------------------------------------------------------- */
.app-rail{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:var(--sp-4);
padding:var(--sp-4) var(--sp-3) var(--sp-5);background:var(--rail);backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);border-right:0.5px solid var(--line);z-index:40}
.rail-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;padding:4px 8px;border-radius:var(--r-md)}
.rail-brand:hover{background:rgba(var(--ink-rgb),.04)}
.logo{width:36px;height:36px;border-radius:10px;background:var(--brand-deep);color:var(--on-dark);
font-weight:700;font-size:18px;display:grid;place-items:center;letter-spacing:-0.04em;flex:none}
.rail-brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.rail-brand-txt b{font-size:15px;font-weight:700;color:var(--ink-strong);letter-spacing:-0.03em}
.rail-brand-txt small{font-size:11px;color:var(--ink-muted);font-weight:500}
.rail-group{display:flex;flex-direction:column;gap:2px}
.app-rail a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);
color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:590;letter-spacing:-0.01em}
.app-rail .rail-group a:hover{background:rgba(var(--ink-rgb),.05)}
.app-rail .rail-group a.on{background:var(--surface);color:var(--ink-strong);box-shadow:var(--sh-1);font-weight:650}
.app-rail svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.rail-foot{margin-top:auto;padding:0 10px}
.feedage{display:block;font-size:11px;color:var(--ink-faint);line-height:1.4}
.app-frame{min-width:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
/* top bar — Apple toolbar: light, blurred, hairline */
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
gap:16px;min-height:var(--topbar-h);background:var(--toolbar);
/* clear of a notch and the rounded corners (viewport-fit=cover): the inset is 0 on a screen without them */
padding:calc(8px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 8px max(24px,env(safe-area-inset-left,0px));
color:var(--ink);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:0.5px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.topbar h1{font-size:22px;font-weight:700;letter-spacing:-0.03em;color:var(--ink-strong)}
.topbar .sub{font-size:12px;color:var(--ink-muted);margin-top:1px;font-weight:500}
.topactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* buttons — Apple control: quiet until they matter */
.btn{background:rgba(var(--ink-rgb),.05);color:var(--ink);border:0;padding:7px 14px;border-radius:var(--r-pill);
cursor:pointer;font-size:13px;font-weight:590;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);box-shadow:none}
.btn:hover{background:rgba(var(--ink-rgb),.09)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--on-accent-bg);color:var(--on-dark)}
.btn.primary:hover{background:var(--on-accent-bg-hover)}
.btn.ghost{background:transparent;color:var(--ink-muted)}
.btn.ghost:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink)}
.btn.tiny{padding:5px 10px;font-size:12px}
.btn.danger{color:var(--on-dark);background:var(--danger-vivid)}
.chip{background:rgba(var(--ink-rgb),.08);color:var(--ink);border-radius:var(--r-pill);padding:1px 7px;font-size:11px;font-weight:700}
.tb-more{position:relative}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;padding:6px;background:var(--surface);
border-radius:var(--r-lg);box-shadow:var(--sh-3);z-index:50;display:flex;flex-direction:column;gap:2px}
.more-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
background:transparent;border:0;padding:9px 12px;border-radius:var(--r-md);font:inherit;font-size:13.5px;
font-weight:500;color:var(--ink);cursor:pointer;text-decoration:none}
.more-item:hover{background:rgba(var(--ink-rgb),.05)}
body:not([data-page="sales"]) .sales-only{display:none!important}
/* More on a phone (hidden where every page has its own line in the rail) */
.rail-more{display:none}
.more-links{display:flex;flex-direction:column;gap:2px;margin:0 -6px 12px}
.more-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:var(--r-md);color:var(--ink);
text-decoration:none;font-size:15px;font-weight:600}
.more-link svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.more-link:hover{background:var(--surface-2)}
.more-link.on{background:var(--info-wash);color:var(--ink-strong)}
.more-link:focus-visible{outline:2px solid var(--info-strong);outline-offset:-2px}
.more-acct{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:0.5px solid var(--line);font-size:13px;color:var(--ink-muted)}
.more-acct b{font-size:15px;color:var(--ink-strong)}
.more-signout{width:100%;min-height:44px;justify-content:center}
/* layout */
.layout{display:flex;align-items:flex-start;gap:0}
.sidebar{width:280px;flex:0 0 280px;background:var(--surface);border-right:1px solid var(--line);
padding:20px;height:calc(100vh - 70px);position:sticky;top:70px;overflow-y:auto;box-shadow:2px 0 10px rgba(var(--ink-rgb),0.02)}
.sidebar-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}
.sidebar-head strong{flex:1;display:flex;align-items:center;gap:8px}
#filterCount{font-size:11px}
.filters-x,.sidebar-foot{display:none}
.content{flex:1;padding:24px 32px;min-width:0}
/* filters */
.filter-block{margin-bottom:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} /* minmax(0,…): a number input's own width may not widen a phone */
.flabel{display:block;font-size:11px;font-weight:700;color:var(--ink-strong);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px}
.finput{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;font-size:13px;background:var(--surface);color:var(--ink);transition:all 0.2s ease}
.finput:focus{outline:none;border-color:var(--info-vivid);background:var(--surface);box-shadow:0 0 0 3px rgba(var(--info-rgb),0.15)}
.pillrow{display:flex;gap:6px;flex-wrap:wrap}
.pill{padding:5px 10px;border:1px solid var(--line);border-radius:20px;cursor:pointer;font-size:12px;font-weight:600;background:var(--surface)}
button.pill{font-family:inherit;color:var(--ink);min-height:32px}
.pill.on{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.pill:focus-visible{outline:2px solid var(--info-strong);outline-offset:2px}
/* ---- a filter group (Stage 3b, 2026-09-27): the summary holds the name and a status at a fixed width; the Include /
Exclude choice is two native radios in the body, shown once something is ticked. Excluding is the neutral slate of
the filter tokens -- a choice, not an error -- and every excluded value also says "left out" in words. ---- */
details.fgroup{border:1px solid var(--line-strong);border-radius:8px;margin-bottom:8px;background:var(--surface)}
details.fgroup>summary{cursor:pointer;padding:0 12px;min-height:40px;font-weight:700;font-size:13px;list-style:none;display:flex;align-items:center;
gap:8px;color:var(--ink-strong);background:var(--surface-2);border-radius:8px}
details.fgroup[open]>summary{border-radius:8px 8px 0 0}
details.fgroup>summary::-webkit-details-marker{display:none}
details.fgroup>summary:focus-visible{outline:2px solid var(--info-strong);outline-offset:-2px}
.fg-chev{flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);
transition:transform var(--dur-fast) var(--ease);opacity:.6;margin-right:2px}
details.fgroup[open] .fg-chev{transform:rotate(45deg)}
.fg-label{flex:1;min-width:0}
.fg-status{flex:none;min-width:9.5em;text-align:right;font-size:12px;font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums}
details.fgroup.is-on>summary .fg-status{color:var(--filter-on)}
details.fgroup.is-ex{border-color:var(--filter-ex-line)}
details.fgroup.is-ex>summary{background:var(--filter-ex-soft)}
details.fgroup.is-ex>summary .fg-status{color:var(--filter-ex)}
.fg-mode{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border:0;margin:0;padding:8px 10px 4px;font-size:12px;color:var(--ink)}
.fg-mode[hidden]{display:none}
.fg-mode legend{float:left;width:100%;padding:0;margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-muted)}
.fg-mode label{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--line-strong);border-radius:16px;cursor:pointer}
.fg-mode input{accent-color:var(--filter-on);margin:0}
.fg-mode label:has(input:checked){background:var(--filter-on-soft);border-color:var(--filter-on);font-weight:700}
.fg-mode label:has(input[value=ex]:checked){background:var(--filter-ex-soft);border-color:var(--filter-ex);color:var(--filter-ex)}
.fg-mode label:has(input:focus-visible){outline:2px solid var(--info-strong);outline-offset:2px}
.checks{max-height:170px;overflow:auto;padding:4px 10px 10px;background:var(--surface)}
.checkrow{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13.5px;color:var(--ink-strong);min-height:32px;cursor:pointer}
.checkrow input{accent-color:var(--filter-on);flex:none}
.checkrow .c-val{min-width:0;overflow-wrap:anywhere}
.checkrow .c-tag{font-size:11px;font-weight:700;color:var(--filter-ex);text-transform:uppercase;letter-spacing:.03em}
.checkrow.ex-on .c-val{text-decoration:line-through;color:var(--filter-ex)}
.checkrow.ex-on input{accent-color:var(--filter-ex)}
@media (pointer:coarse){details.fgroup>summary,.checkrow,.fg-mode label,button.pill{min-height:44px}}
/* the Dates block: a fieldset with its own legend, From / To and the festive presets, then its Include / Exclude pair */
fieldset.filter-block{border:0;padding:0;margin:0 0 16px;min-width:0}
fieldset.filter-block>legend.flabel{padding:0}
.fsub{display:block;font-size:12px;font-weight:600;color:var(--ink-muted);margin:6px 0 4px}
.fdates .preset-row{margin-top:8px}
.fdates .fg-mode{padding:8px 0 0}
.fdates.is-ex .finput{border-color:var(--filter-ex);background:var(--filter-ex-soft)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.th-sort:focus-visible{outline:2px solid var(--info-strong);outline-offset:1px}
.th-sort{border:0;background:transparent;font:inherit;color:inherit;padding:0;cursor:pointer;text-align:inherit}
.fchip.ex{background:var(--filter-ex-soft);color:var(--filter-ex)}
/* Overall stock/promotion strip under the KPI tiles — headline health without the section detail. */
.ss-card{margin-bottom:14px}
.ss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;padding:4px 2px 2px}
.ss-stat .ss-lab,.ss-barhead span{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.ss-val{font-size:22px;font-weight:800;color:var(--brand);line-height:1.15;margin-top:2px}
.ss-sub{font-size:11px;color:var(--ink-muted);margin-top:3px}
.ss-bar{min-width:170px}
.ss-barhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.ss-barhead b{font-size:19px;font-weight:800;color:var(--brand)}
.ss-bar .st-wrap{height:11px}
.ss-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
@media print{.ss-card{break-inside:avoid}.ss-grid{grid-template-columns:repeat(4,1fr)}}
/* On floor, by season — age of the merchandise sitting on the shelf. */
.ss-season{border-top:1px solid var(--line);margin-top:12px;padding-top:11px;overflow-x:auto} /* its table is wider than a phone */
.ssq-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px;margin-bottom:7px}
.ssq-stack{display:flex;height:20px;border-radius:6px;overflow:hidden;background:var(--surface-3)}
.ssq{display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--on-dark);min-width:2px}
.ssq-cur{background:var(--ok-vivid)} .ssq-last{background:var(--info-vivid)} .ssq-old{background:var(--danger-vivid)} .ssq-unk{background:var(--ink-faint)}
.ssq-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:7px 0 9px;font-size:11.5px}
.ssq-key{display:inline-flex;align-items:center;gap:5px}
.ssq-key i{width:10px;height:10px;border-radius:3px;display:inline-block}
.ssq-dot{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}
.ssq-table{width:100%;border-collapse:collapse;font-size:12px}
.ssq-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);padding:3px 8px 3px 0;border-bottom:1px solid var(--line)}
.ssq-table td{padding:4px 8px 4px 0;border-bottom:1px solid var(--surface-3)}
.ssq-note{margin-top:9px;font-size:12px;background:var(--accent-soft);border-left:3px solid var(--accent);padding:7px 10px;border-radius:0 6px 6px 0}
@media print{.ss-season{break-inside:avoid}}
/* Festive period presets + the "exclude this period" switch on the date filter. */
.preset-row{display:flex;flex-wrap:wrap;gap:5px}
.preset{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:3px 9px;font-size:11px;
font-weight:700;color:var(--brand);cursor:pointer;white-space:nowrap}
.preset:hover{border-color:var(--brand-2)}
.preset.on{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.preset.on.ex{background:var(--filter-ex);border-color:var(--filter-ex)}
/* Warning when the chosen period ended in the past — stock is a live snapshot, so the two aren't comparable */
.asof-warn{margin:10px 0 0;font-size:12px;background:var(--danger-wash);border-left:3px solid var(--danger-vivid);
padding:8px 11px;border-radius:0 6px 6px 0;line-height:1.45}
.asof-warn b{color:var(--danger)}
@media print{.asof-warn{break-inside:avoid}}
.checkrow .c-amt{margin-left:auto;color:var(--ink-muted);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
/* empty */
.empty{max-width:620px;margin:8vh auto;text-align:center;background:var(--surface);padding:40px;border-radius:24px;box-shadow:var(--shadow)}
.empty h2{color:var(--brand);margin-bottom:12px;font-size:20px;letter-spacing:-0.01em}
.empty p{color:var(--ink-muted);line-height:1.6;font-size:15px}
/* store selector (top) */
.storebar{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap;
background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sh-1)}
.sb-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.sb-pills{display:flex;flex-wrap:wrap;gap:6px}
.sb-wh .sb-k{color:var(--warn)}
.pill.store{border:1px solid var(--line-strong);background:var(--surface);font:inherit;font-size:13px;font-weight:600;padding:7px 12px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;line-height:1.3;color:var(--ink)}
.pill.store.on{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.storebar .sb-left{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;flex:1 1 280px;min-width:0} /* 280: the right side wraps under it on a phone instead of squeezing the shops into a column */
.storebar .sb-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.pill.store:hover{border-color:var(--brand);background:var(--surface-2)}
.pill.store.on:hover{background:var(--brand-2);color:var(--on-dark)}
.pill.store .pchk{width:14px;height:14px;border:1.5px solid var(--line-strong);border-radius:4px;display:inline-grid;place-items:center;font-size:11px;line-height:1;color:var(--on-dark)}
.pill.store.on .pchk{background:var(--ok);border-color:var(--ok)}
.storebar .ctx{font-size:12px;color:var(--ink-muted);white-space:nowrap}
@media(max-width:640px){.storebar .ctx{white-space:normal}.storebar .sb-right{margin-left:0}}
.storebar .ctx b{color:var(--brand)}
#sectionSize .sz-sub td{background:var(--surface-2);font-size:12.5px;color:var(--ink)}
#sectionSize .sz-size{padding-left:18px;color:var(--ink-muted);font-weight:590}
/* Section × size accordion: sections always visible, sizes one click away (app.js renderSectionSize). */
#sectionSize .ss-tools{display:flex;gap:6px;justify-content:flex-end;padding:6px 8px}
#sectionSize tr.ss-sec.has-sizes{cursor:pointer}
#sectionSize tr.ss-sec.has-sizes:hover td{background:var(--surface-2)}
#sectionSize .ss-toggle{display:inline-flex;align-items:center;gap:2px;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
#sectionSize .ss-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#sectionSize .ss-caret{display:inline-block;width:14px;color:var(--ink-faint);transition:transform var(--dur-fast) var(--ease)}
#sectionSize .ss-toggle[aria-expanded='true'] .ss-caret{transform:rotate(90deg)}
#sectionSize tr.sz-sub.is-closed{display:none}
@media print{#sectionSize tr.sz-sub.is-closed{display:table-row}#sectionSize .ss-tools,#sectionSize .ss-caret{display:none}}
@media (prefers-reduced-motion: reduce){#sectionSize .ss-caret{transition:none}}
/* The small picture under each Sales tile. */
.kpi .vbar,.kpi .vstack{margin-top:var(--sp-2)}
.seg{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0;background:var(--surface-2)}
.seg .seg-h{font-size:12px;color:var(--ink-muted);margin-bottom:6px}
/* active filter chips */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fchip{background:var(--info-soft);color:var(--brand);border-radius:18px;padding:4px 10px;font-size:12px;font-weight:600;display:flex;gap:6px;align-items:center}
.fchip b{font-weight:800}
.fchip .x{display:inline-grid;place-items:center;min-width:24px;min-height:24px;margin:-4px -6px -4px 0;padding:0;border:0;border-radius:12px;
background:transparent;color:inherit;font:inherit;font-weight:800;cursor:pointer;opacity:.7}
.fchip .x:hover{opacity:1;background:rgba(var(--ink-rgb),.08)}
.fchip .x:focus-visible{outline:2px solid var(--info-strong);outline-offset:1px;opacity:1}
/* store / currency lock: part of the filter, shown as a chip, but only the store bar can change it */
.fchip.locked{background:var(--surface-3);color:var(--ink-muted);font-weight:600}
.fchip.locked b{color:var(--ink)}
/* Received: Purchases | Transfers | Both — a control, not a sentence */
.svs-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12px}
.segmented{display:inline-flex;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.segmented .seg{border:0;background:transparent;padding:5px 12px;font:inherit;font-size:12px;font-weight:600;color:var(--ink-muted);cursor:pointer;display:flex;gap:6px;align-items:center}
.segmented .seg+.seg{border-left:1px solid var(--line)}
.segmented .seg.on{background:var(--brand);color:var(--on-dark)}
.segmented .seg-n{font-weight:800;opacity:.85}
/* estate pill + Sham column */
.pill.store.estate{border-style:dashed;font-weight:700}
.pill.store.estate.on{border-style:solid}
.svs-tbl td.sham-col,.svs-tbl th.sham-col{color:var(--warn);background:var(--warn-wash)}
.buy-ignored{margin:8px 0 4px;font-size:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* KPIs */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi{background:var(--surface);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-1);border:0;
transition:box-shadow var(--dur) var(--ease)}
.kpi:hover{box-shadow:var(--sh-2)}
.kpi::after{display:none}
.kpi .k-label{font-size:11px;color:var(--ink-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.04em}
.kpi .k-val{font-size:28px;font-weight:700;color:var(--ink-strong);margin-top:6px;line-height:1.05;letter-spacing:-0.04em;
font-variant-numeric:tabular-nums;font-family:var(--font-display)}
.kpi .k-sub{font-size:12px;color:var(--ink-muted);margin-top:6px;line-height:1.35}
/* the figure a page exists for: the same tile, more type (Today's net sales and units) -- Stage 3d, one tile everywhere */
.kpi.is-lead{grid-column:span 2}
.kpi.is-lead .k-val{font-size:38px}
.kpi.is-lead .k-label{color:var(--ink)}
@media (max-width:1200px){.kpi.is-lead{grid-column:span 1}}
@media (max-width:640px){.kpi.is-lead .k-val{font-size:30px}}
.kpi .k-val small{font-size:14px;font-weight:600;color:var(--ink-muted);letter-spacing:0}
.kpi.is-compact{padding:12px 14px}.kpi.is-compact .k-val{font-size:22px}
.kpi.accent .k-val{color:var(--accent-strong)} .kpi.green .k-val{color:var(--ok)} .kpi.teal .k-val{color:var(--brand-teal)}
/* cards / grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}
.card{background:var(--surface);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-1);min-width:0;margin-bottom:16px;border:0}
.card:hover{box-shadow:var(--sh-1)}
.grid > .card{margin-bottom:0} /* grid uses gap; avoid double spacing */
#stockWrap > .card{margin-bottom:20px}
#stockWrap > .card:last-child{margin-bottom:0}
.card.span2{grid-column:span 2}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px 12px;margin-bottom:16px;flex-wrap:wrap} /* wraps before it widens a phone */
.card-h>h3{min-width:0}
.card-h h3{font-size:16px;color:var(--brand);font-weight:700;letter-spacing:-0.01em}
.card-h .muted{text-align:right}
.cbox{position:relative;height:240px;width:100%}
.span2 .cbox{height:260px}
/* section dividers — organise the long report into scannable groups */
.section-head{display:flex;align-items:center;gap:12px;margin:26px 2px 14px}
.section-head:first-child{margin-top:6px}
.section-head h2{font-size:15px;font-weight:800;color:var(--brand);white-space:nowrap;letter-spacing:.01em;margin:0}
.section-head .ico{font-size:17px;line-height:1}
.section-head .line{flex:1;height:1px;background:var(--line)}
.section-head .hint{font-size:11.5px;color:var(--ink-muted);white-space:nowrap;font-weight:600}
/* recs */
.recs-card{margin-bottom:16px;border-left:4px solid var(--accent)}
.recs{margin:0;padding-left:20px}
.recs li{margin:6px 0;line-height:1.45}
/* mini tables */
/* ==== table-layer: the ONE place a table header or cell is aligned (Stage 3b, 2026-09-27) =========================
Owner: "some table headers do not line up with their columns". A header and its cells carry the same class (ui.js
builds both from one column spec), so they cannot disagree: .num right with tabular figures · .rk a rank, centred ·
.dt a date or time, never wrapped · anything else starts at the left. lint_css.js fails on text-align for a th or td
anywhere outside this block. */
th{text-align:left}
:is(th,td).num{text-align:right;font-variant-numeric:tabular-nums}
:is(th,td).rk{text-align:center}
:is(th,td).dt{white-space:nowrap;font-variant-numeric:tabular-nums}
/* a heat grid is a grid, not a list: its hour columns are centred and its row labels sit against the grid */
.heat th,.heat td.hc{text-align:center}
.heat :is(td,th).hd{text-align:right}
/* ==== end table-layer ============================================================================================== */
/* a long table scrolls inside its own box, so its header can stay in view: the header cells are opaque for that */
.tbl-scroll{overflow:auto;max-height:min(70vh,640px);-webkit-overflow-scrolling:touch}
.tbl-scroll thead th{position:sticky;top:0;z-index:1;background:var(--surface)}
.minitable{overflow-x:auto;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(var(--ink-rgb),0.02)}
.minitable table{width:100%;border-collapse:collapse;font-size:12.5px}
.minitable th{color:var(--brand);background:var(--bg);padding:10px 12px;position:sticky;top:0;font-weight:600;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:0.02em;font-size:11px}
.minitable td{padding:10px 12px;border-bottom:1px solid var(--line);transition:background 0.2s}
.minitable tr:last-child td{border-bottom:none}
.minitable tr:hover td{background:var(--surface-3)}
.minitable .rk{color:var(--ink-muted);font-weight:700;width:24px;font-size:11px}
.ti-name{font-weight:600;color:var(--ink);line-height:1.25}
.ti-sub{font-size:11px;color:var(--ink-muted);line-height:1.25;margin-top:2px}
/* store comparison table (metrics as rows, stores as columns) */
.cmp{width:100%;border-collapse:collapse;font-size:13px}
.cmp th{background:var(--brand);color:var(--on-dark);padding:9px 12px;white-space:nowrap}
.cmp td{padding:9px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:top}
.cmp td:first-child{font-weight:700;color:var(--ink)}
.cmp tr:hover td{background:var(--info-wash)}
.cmp .cur-tag{font-size:11px;color:var(--ink-muted);font-weight:600}
.cmp td.best{background:var(--ok-soft)}
.cmp td.best .cval{color:var(--ok);font-weight:800}
.cmp .cval{font-weight:700;font-size:14px;color:var(--brand)}
.cmp-bar{height:6px;border-radius:3px;background:var(--info-vivid);margin:5px 0 0 auto;max-width:120px}
.cmp .cbadge{display:inline-block;font-size:11px;font-weight:800;color:var(--on-dark);background:var(--ok);border-radius:9px;padding:0 6px;margin-left:5px;vertical-align:middle}
/* returns & exchanges */
.ret-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ret-stat{flex:1;min-width:150px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.ret-stat .rs-val{font-size:22px;font-weight:800;color:var(--brand);line-height:1.1}
.ret-stat .rs-lab{font-size:11px;color:var(--ink-muted);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.ret-stat .rs-sub{font-size:12px;color:var(--ink-muted);margin-top:4px}
.ret-stat.warn{border-left:4px solid var(--accent)}
.ret-stat.warn .rs-val{color:var(--accent-ink)}
.tag.size{background:var(--info-soft);color:var(--info)}.tag.model{background:var(--warn-soft);color:var(--warn)}.tag.mixed{background:var(--surface-3);color:var(--ink-muted)}.tag.refund{background:var(--danger-soft);color:var(--danger)}
/* data table */
.tablewrap{overflow:auto;max-height:520px;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 8px rgba(var(--ink-rgb),0.03)}
#dataTable{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
#dataTable th{position:sticky;top:0;background:var(--bg);color:var(--brand);padding:10px 12px;cursor:pointer;user-select:none;font-weight:600;border-bottom:1px solid var(--line);font-size:12px}
#dataTable th .arr{opacity:.6;font-size:11px;margin-left:4px}
#dataTable td{padding:10px 12px;border-bottom:1px solid var(--line);transition:background 0.2s}
#dataTable td.num{font-variant-numeric:tabular-nums}
#dataTable tr:last-child td{border-bottom:none}
#dataTable tr:hover td{background:var(--surface-3)}
.tag{padding:1px 7px;border-radius:11px;font-size:11px;font-weight:700}
.tag.S{background:var(--ok-soft);color:var(--ok)}.tag.R{background:var(--danger-soft);color:var(--danger)}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding-top:10px}
.pager span{font-size:12px;color:var(--ink-muted)}
/* dropzone / modal / drawer / toast */
.dropzone{position:fixed;inset:0;z-index:50;background:rgba(var(--ink-rgb),0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--on-dark);display:grid;place-items:center;font-size:24px;font-weight:700;border:6px dashed rgba(var(--white-rgb),0.4)}
.modal,.drawer{position:fixed;inset:0;z-index:60;background:rgba(var(--ink-rgb),0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center}
.modal-box{background:var(--surface);border-radius:20px;padding:32px;width:460px;max-width:92vw;box-shadow:0 10px 40px rgba(var(--black-rgb),0.15)}
.modal-box h3{color:var(--brand);margin-bottom:8px;font-size:18px}
.modal-box .flabel{margin-top:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.drawer{justify-items:end;place-items:start end}
.drawer-box{background:var(--surface);height:100vh;height:100dvh;width:420px;max-width:94vw;padding:24px;overflow:auto;box-shadow:-4px 0 24px rgba(var(--black-rgb),0.1)}
.ds-item{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:12px 0;display:flex;justify-content:space-between;align-items:center;transition:background 0.2s}
.ds-item:hover{background:var(--bg)}
.ds-item .meta{font-size:12px;color:var(--ink-muted)}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--brand);color:var(--on-dark);padding:12px 24px;border-radius:12px;z-index:70;box-shadow:0 8px 24px rgba(var(--ink-rgb),0.2);font-weight:600;font-size:14px}
/* proactive alerts strip */
.alerts{background:var(--surface);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:20px;box-shadow:var(--sh-1);border:0}
.a-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.a-head strong{color:var(--brand);font-size:15px;letter-spacing:-0.01em}
.a-legend{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.a-leg{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;border:1px solid var(--line)}
.a-leg b{margin-left:2px}
.a-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a-chip{display:flex;align-items:flex-start;gap:8px;text-align:left;cursor:pointer;border:1px solid var(--line);
border-left-width:4px;border-radius:9px;background:var(--surface);padding:8px 11px;font:inherit;font-size:12.5px;line-height:1.35}
.a-chip:hover{background:var(--surface-2);box-shadow:var(--shadow)}
.a-chip .a-tag{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;padding-top:1px}
.a-chip .a-msg{color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1}
.a-chip .a-act{color:var(--ink-muted);font-weight:700;white-space:nowrap;margin-left:auto;padding-top:1px}
.a-none{color:var(--ok);font-weight:600;font-size:13px}
.a-red{border-left-color:var(--danger-vivid)!important}.a-red .a-tag{color:var(--danger)}.a-leg.a-red{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.a-amber{border-left-color:var(--warn-vivid)!important}.a-amber .a-tag{color:var(--warn)}.a-leg.a-amber{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.a-blue{border-left-color:var(--info-vivid)!important}.a-blue .a-tag{color:var(--info)}.a-leg.a-blue{background:var(--info-soft);border-color:var(--info-line);color:var(--info)}
.a-grey{border-left-color:var(--ink-faint)!important}.a-grey .a-tag{color:var(--ink-muted)}.a-leg.a-grey{background:var(--surface-3);border-color:var(--line-strong);color:var(--ink-muted)}
/* sell-through bars (shared by leaderboard + order sheet) */
.st-wrap{position:relative;background:var(--surface-3);border-radius:5px;height:16px;min-width:90px;overflow:hidden}
.st-bar{position:absolute;left:0;top:0;height:100%;border-radius:5px}
.st-lab{position:relative;font-size:11px;font-weight:700;color:var(--ink);padding-left:6px;line-height:16px;mix-blend-mode:normal}
.num .st-lab{padding:0 6px 0 0}
/* next-season order sheet */
.order-card{border-top:3px solid var(--accent)}
.plan-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.plan-controls .pc{font-size:12px;color:var(--brand);font-weight:600;display:flex;align-items:center;gap:4px}
.plan-controls input{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit;width:60px}
.plan-note{margin:-2px 0 12px}
.order-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.order-tbl th{color:var(--on-dark);background:var(--brand);padding:6px 8px}
.order-tbl td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.order-tbl td.num{font-variant-numeric:tabular-nums}
.order-tbl tfoot td{background:var(--surface-2);border-top:2px solid var(--brand)}
.sz-cell{max-width:520px}
.sz-chip{display:inline-flex;flex-direction:column;align-items:center;margin:2px 5px 2px 0}
.sz-chip label{font-size:11px;color:var(--ink-muted);font-weight:700}
.sz-in{border:1px solid var(--line);border-radius:5px;padding:2px 3px;text-align:center;font:inherit;font-size:12px}
.sz-in:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.sec-total b{color:var(--accent-ink);font-size:14px}
/* online sales card */
.chan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chan-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.chan-card.online{border-left:4px solid var(--accent)}
.chan-card.instore{border-left:4px solid var(--brand)}
.chan-card.share{border-left:4px solid var(--ok-vivid)}
.chan-h{font-size:11.5px;font-weight:800;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.02em}
.chan-big{font-size:24px;font-weight:800;color:var(--brand);line-height:1.15;margin-top:4px}
.chan-big span{font-size:12px;font-weight:700;color:var(--ink-muted)}
.chan-sub{font-size:12px;color:var(--ink-muted);margin-top:4px}
.share-bar{height:8px;background:var(--surface-3);border-radius:5px;margin:8px 0 4px;overflow:hidden}
.share-bar>div{height:100%;background:var(--accent);border-radius:5px}
.online-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;align-items:start}
.online-trend .cbox{margin:0}
/* day × hour heatmap */
.heatwrap{overflow-x:auto}
.heat{border-collapse:separate;border-spacing:2px;font-size:11.5px;width:100%}
.heat th{color:var(--ink-muted);font-weight:700;padding:2px 3px;font-size:11px}
.heat :is(td,th).hd{color:var(--brand);font-weight:800;padding-right:8px;white-space:nowrap;font-size:11px}
.heat td.hc{padding:5px 3px;border-radius:4px;min-width:30px;font-variant-numeric:tabular-nums;background:var(--surface-2)}
/* stock vs sold — action tags + drill-down */
.svs-note{margin:-2px 0 10px;line-height:1.55}
.svs-row{cursor:pointer}
.svs-row .caret{display:inline-block;width:14px;color:var(--ink-muted);transition:transform .12s;font-size:11px}
.svs-row.open .caret{transform:rotate(90deg);color:var(--accent-ink)}
.svs-row.open > td{background:var(--info-soft);font-weight:600}
.svs-detail > td{background:var(--surface-2);padding:8px 10px 12px 26px !important}
.svs-items-h{font-size:12px;font-weight:700;color:var(--brand);margin-bottom:6px}
.svs-items{width:100%;border-collapse:collapse;font-size:12px}
.svs-items th{color:var(--ink-muted);font-weight:700;border-bottom:1px solid var(--line);padding:4px 8px}
.svs-items td{padding:4px 8px;border-bottom:1px solid var(--surface-3)}
.svs-items td.num{font-variant-numeric:tabular-nums}
.svs-items td.mono{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-muted)}
.svs-sizes td b{color:var(--brand)}
.sham-q{font-weight:800;color:var(--warn);background:var(--warn-soft);border-radius:4px;padding:0 5px}
/* drill-down stats + full-price vs discount split bar */
.svs-stats{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.svs-stats .ss{min-width:74px}
.svs-stats .ss-lab{font-size:11px;color:var(--ink-muted);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.svs-stats .ss-val{font-size:20px;font-weight:800;color:var(--brand);line-height:1.1;margin-top:2px}
.ss-fp{flex:1;min-width:260px}
.fpbar{display:flex;height:26px;border-radius:6px;overflow:hidden;margin-top:5px;background:var(--surface-3)}
.fp-full,.fp-disc{display:flex;align-items:center;justify-content:center;color:var(--on-dark);font-weight:800;font-size:12px;min-width:0}
.fp-full{background:var(--ok-vivid)}.fp-disc{background:var(--accent)}
.fp-leg{display:flex;gap:18px;font-size:12px;color:var(--ink-muted);margin-top:7px;flex-wrap:wrap}
.fp-leg .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.sw-full{background:var(--ok-vivid)}.sw-disc{background:var(--accent)}
.act-tag{display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:20px;border:1px solid transparent}
.act-reorder{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.act-hold{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.act-promo{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.act-clear{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
/* most-profitable-brand callout + margin leaderboard */
.bp-body{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.bp-hero{min-width:210px;flex:0 0 auto;background:var(--surface-2);color:var(--ink);border-radius:var(--r-lg);padding:15px 18px;box-shadow:var(--sh-1)}
.bp-hero .bp-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted)}
.bp-hero .bp-name{font-size:23px;font-weight:800;margin:3px 0 7px;color:var(--ink-strong)}
.bp-hero .bp-fig{font-size:25px;font-weight:800;line-height:1;color:var(--ink-strong)}
.bp-hero .bp-cur{font-size:13px;font-weight:600;color:var(--ink-muted)}
.bp-hero .bp-sub{font-size:12px;color:var(--ink-muted);margin-top:6px}
.cov-warn{color:var(--warn);font-size:11px;font-weight:700}
.bp-hero .cov-warn{display:block;color:var(--warn);margin-top:7px}
.bp-table{width:100%}
.bp-table b{color:var(--ok)}
.cov-cell{position:relative}
.cov-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--ok-vivid);border-radius:2px;opacity:.5}
.bp-scroll{max-height:360px;overflow:auto;margin-top:2px;flex:1;min-width:0}
.bp-scroll .bp-table th{position:sticky;top:0;background:var(--surface);z-index:1}
.brand-detail{margin-top:12px;max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.brand-detail table{width:100%;border-collapse:collapse;font-size:12.5px}
.brand-detail th{position:sticky;top:0;background:var(--brand);color:var(--on-dark);padding:6px 10px;font-weight:700}
.brand-detail td{padding:5px 10px;border-bottom:1px solid var(--surface-3)}
.brand-detail td.num{font-variant-numeric:tabular-nums}
/* far warehouse (Sham) — pill + inventory panel */
.pill.store.warehouse{border:1px dashed var(--warn-vivid);background:var(--warn-wash);color:var(--warn)}
.pill.store.warehouse.on{background:var(--warn);color:var(--on-dark);border-style:solid}
.sham-head h2{margin:0;font-size:20px;color:var(--brand);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sham-badge{font-size:11px;font-weight:700;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line);border-radius:20px;padding:2px 10px}
.sham-head p{margin:6px 0 14px;max-width:820px}
.sham-kpis .k-cur{font-size:13px;font-weight:600;color:var(--ink-muted)}
.sham-kpis .k-sub{font-size:11px;color:var(--ink-muted);margin-top:3px}
.sham-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pill.sham-dest{cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:5px 13px;font-size:13px;font-weight:600;color:var(--ink)}
.pill.sham-dest .dcount{color:var(--ink-muted);font-weight:700;margin-left:4px}
.pill.sham-dest.on{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.pill.sham-dest.on .dcount{color:var(--on-dark-muted)}
.dest-tag{display:inline-block;font-size:11px;font-weight:700;background:var(--info-soft);color:var(--info);border-radius:5px;padding:1px 7px}
.sham-items{width:100%;border-collapse:collapse;font-size:12.5px}
.sham-items th{position:sticky;top:0;background:var(--brand);color:var(--on-dark);padding:7px 9px;font-weight:700}
.sham-items td{padding:5px 9px;border-bottom:1px solid var(--surface-3)}
.sham-items td.num{font-variant-numeric:tabular-nums}
/* order plan explanation */
.plan-explain{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:12px;font-size:13px;line-height:1.55}
.plan-explain p{margin:0 0 8px}.plan-explain p:last-child{margin-bottom:0}
.pf{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12px;white-space:nowrap;display:inline-block}
/* section table-of-contents nav — jump between report sections */
html{scroll-behavior:smooth}
.toc{position:sticky;top:calc(var(--topbar-h) + 8px);z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
background:rgba(var(--white-rgb),0.72);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
border:0.5px solid var(--line);border-radius:var(--r-pill);
padding:6px 8px;margin:0 0 20px;box-shadow:none}
.toc .toc-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-muted);margin-right:8px}
.toc a{font-size:13px;font-weight:600;color:var(--brand);text-decoration:none;padding:6px 14px;border-radius:20px;transition:all 0.2s;border:1px solid transparent}
.toc a:hover{background:var(--bg);border-color:var(--line);transform:translateY(-1px)}
.section-head{scroll-margin-top:74px}
/* print cover header — hidden on screen, shown when printing */
.print-header{display:none}
.print-header .ph-title{font-size:22px;font-weight:800;color:var(--brand)}
.print-header .ph-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--ink);margin-top:5px}
/* ===== Winter Buy Planner (Abel & Lula) ===== */
.buy-btn{border-color:var(--warn-vivid);background:var(--warn-wash);color:var(--warn);font-weight:700}
.buy-btn.primary{background:var(--warn);color:var(--on-dark);border-color:var(--warn)}
.buy-hero{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start;background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sh-1)}
.buy-hero h2{margin:0 0 6px;font-size:21px;color:var(--ink-strong)}
.buy-hero-main{flex:1 1 460px}
.buy-hero .muted{color:var(--ink-muted);max-width:860px;font-size:13px;line-height:1.55}
.buy-hero b{color:var(--ink-strong)}
.buy-controls{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:186px}
.buy-controls label{font-size:12px;color:var(--ink-muted);display:flex;align-items:center;justify-content:space-between;gap:8px}
.buy-controls select,.buy-controls input{border-radius:6px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:3px 6px;font-size:12.5px}
.conf-badge{display:inline-block;font-size:11px;font-weight:800;border-radius:20px;padding:2px 10px;letter-spacing:.02em}
.conf-badge.conf-high{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-line)}
.conf-badge.conf-medium{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.conf-badge.conf-low{background:var(--surface-3);color:var(--danger);border:1px solid var(--danger-line)}
.conf-badge.conf-summer{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.nonmerch-card{margin-bottom:14px}
.nm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:4px 12px 6px}
.nm-cell{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:9px;padding:10px 13px}
.nm-cell .nm-n{font-size:24px;font-weight:800;color:var(--warn);line-height:1.1}
.nm-cell .nm-l{font-size:12px;color:var(--ink);font-weight:600;margin-top:2px}
@media(max-width:1100px){.nm-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.nm-grid{grid-template-columns:1fr}}
.nm-note{margin:6px 12px 4px;font-size:11.5px}
.ai-card{margin-bottom:14px;border:0;background:var(--surface);box-shadow:var(--sh-1)}
.ai-card .ai-recs li{margin:5px 0}
.svs-total td{border-top:2px solid var(--line-strong);background:var(--surface-2);font-weight:700}
.sb-group.backstock{margin-left:6px;padding-left:8px;border-left:1px dashed var(--line-strong)}
.sb-group.backstock .cur-tag.bk{background:var(--warn-soft);color:var(--warn)}
.brand-order{display:flex;flex-direction:column}
.bo-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--surface-3)}
.bo-row:first-child{border-top:none}
.bo-rank{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--brand-deep);color:var(--on-dark);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.bo-main{flex:1 1 auto;min-width:0}
.bo-brand{font-weight:700;font-size:14px;color:var(--brand-deep)}
.bo-sub{font-size:11.5px;color:var(--ink-muted);margin-top:1px}
.bo-note{font-size:11.5px;color:var(--ink);margin-top:3px}
.bo-qty{flex:0 0 auto;text-align:right;min-width:82px}
.bo-qty-n{font-size:20px;font-weight:700;color:var(--ok);line-height:1.05}
.bo-qty-l{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px}
.bo-foot{padding:8px 14px;border-top:1px solid var(--surface-3);background:var(--surface-2);font-size:12px;color:var(--ink)}
.plan-notes{margin-top:12px;padding:12px 16px;background:var(--surface-2);border:0.5px solid var(--line);border-radius:var(--r-md)}
.plan-notes h4{margin:0 0 8px;font-size:13px;color:var(--brand-deep)}
.plan-notes ul{margin:0;padding:0;list-style:none}
.plan-notes li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:12.5px;line-height:1.45;color:var(--ink);border-top:1px solid var(--surface-3)}
.plan-notes li:first-child{border-top:none}
.plan-notes .pn-ic{flex:0 0 auto;font-size:14px;line-height:1.3}
@media print{
body.mgr-report .mgr-hide{display:none !important}
body.mgr-report .plan-controls,body.mgr-report .plan-explain,body.mgr-report .svs-note{display:none !important}
body.mgr-report .plan-notes{break-inside:avoid}
}
.buy-stores{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.buy-store-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px 15px;box-shadow:0 2px 8px rgba(var(--brand-rgb),.05)}
.buy-store-card.placeholder{border-style:dashed;background:var(--surface-2)}
.buy-store-card .bs-head{font-weight:800;color:var(--brand);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.buy-store-card .bs-units{font-size:26px;font-weight:800;color:var(--ink);line-height:1.1}
.buy-store-card .bs-val{font-size:13px;color:var(--ink-muted);margin-top:2px}
.buy-store-card .bs-share{height:7px;background:var(--surface-3);border-radius:6px;margin-top:10px;overflow:hidden}
.buy-store-card .bs-share-bar{height:100%;background:var(--brand);border-radius:6px}
.buy-store-card .bs-share-lab{font-size:11px;color:var(--ink-muted);margin-top:4px}
.buy-store-card .bs-empty{font-size:12.5px;color:var(--ink-muted);line-height:1.5;padding:6px 0}
.buy-store-card .cur-tag,.buy-table-card .card-h .cur-tag{font-size:11px;font-weight:800;color:var(--ink-muted);background:var(--surface-3);border-radius:5px;padding:2px 7px;letter-spacing:.03em}
.buy-table-card{margin-bottom:14px}
.buy-tbl td{vertical-align:top}
.buy-tbl .sz-chip.zero input{background:var(--surface-3);color:var(--ink-faint);border-color:var(--line)}
tr.wcat td{background:var(--surface-2)}
@media(max-width:1100px){.buy-stores{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.buy-stores{grid-template-columns:1fr}.buy-hero{flex-direction:column}}
/* ===== PRINT / SAVE AS PDF — a clean, paginated manager report ===== */
@media print{
@page{margin:14mm}
html,body{background:var(--surface) !important}
.topbar,.sidebar,#dropzone,.modal,.drawer,.toast,.pager,.filterbar,.storebar,.sham-tabs,.buy-controls,
.app-rail,#btnPrint,#btnExportCsv,#btnExportOrder,.plan-controls,.section-head .hint,.section-head .line,#brandMetricToggle,.tb-more{display:none !important}
body{display:block;grid-template-columns:none}
.app-frame{min-height:0}
.print-header{display:block !important;margin-bottom:14px;border-bottom:2px solid var(--brand);padding-bottom:9px}
.layout{display:block}
.content{padding:0 !important}
.card,.kpi,.section-head,.svs-detail,.bp-hero,.heatwrap{break-inside:avoid;page-break-inside:avoid}
.section-head{break-before:page;page-break-before:always;position:static !important;top:auto}
.section-head:first-of-type{break-before:avoid;page-break-before:avoid}
.grid{display:block}
.card,.card.span2,.grid>.card{margin-bottom:10px;box-shadow:none !important;border:1px solid var(--line)}
.tablewrap,.checks,.minitable,.svs-items,#stockVsSold{max-height:none !important;overflow:visible !important}
canvas{max-width:100% !important}
.kpi-row{grid-template-columns:repeat(4,1fr)}
*{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
}
@media(max-width:1100px){.kpi-row{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.card.span2{grid-column:span 1}.chan-grid{grid-template-columns:1fr}.online-2col{grid-template-columns:1fr}}
@media(max-width:780px){.a-chips{grid-template-columns:1fr}
.section-head{flex-wrap:wrap}.section-head h2{white-space:normal}.section-head .hint{display:none}}
/* ---- freshness gate -------------------------------------------------------------------------
Nothing renders until the CURRENT ERP feed has loaded. Previously the page painted cached data
first and swapped in the real feed ~30s later, so a stale figure could be read as current. */
.loadgate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
background:rgba(var(--ink-rgb),.94);backdrop-filter:blur(3px)}
.loadgate-box{max-width:560px;text-align:center;color:var(--on-dark-muted);padding:28px 32px}
.loadgate-msg{margin-top:16px;font-size:15px;line-height:1.6}
.loadgate-spin{width:38px;height:38px;margin:0 auto;border:3px solid rgba(var(--white-rgb),.18);
border-top-color:var(--info-on-dark);border-radius:50%;animation:lg-spin .9s linear infinite}
@keyframes lg-spin{to{transform:rotate(360deg)}}
.loadgate.err .loadgate-x{font-size:40px;color:var(--danger-on-dark)}
.stalebanner{background:var(--danger-deep);color:var(--on-dark);padding:12px 16px;border-radius:8px;margin-bottom:14px;
font-size:14px;line-height:1.5;border:1px solid var(--danger-vivid)}
.feedage{opacity:.75;font-size:11px;margin-left:8px;white-space:nowrap}
@media print{.loadgate{display:none !important}}
/* ---- Stock vs Sold: one table per brand family -------------------------------------------------
A merged table made "Junior Unisex" mean three different things at Littles Clothes (Mayoral + iDO +
the shared ladder). Each family now gets its own titled table and its own total. */
.svs-scheme-h{margin:18px 0 6px;font-weight:700;font-size:13px;letter-spacing:.2px}
.svs-scheme-h:first-child{margin-top:2px}
.svs-scheme-h .muted{font-weight:400;font-size:11px;margin-left:8px}
.svs-tbl{margin-bottom:2px}
.svs-grand{margin-top:16px;padding:10px 12px;border-radius:8px;background:rgba(var(--info-rgb),.10);
border:1px solid rgba(var(--info-rgb),.25);font-size:13px}
/* A season with zero stock left is SOLD OUT — the best outcome, not a reason to hide the row. */
.ssq-out{font-size:11px;font-weight:600;color:var(--ok);background:rgba(var(--ok-rgb),.12);
border:1px solid rgba(var(--ok-rgb),.35);border-radius:4px;padding:1px 5px;margin-left:6px}
/* Sub-brand line ("of which") rows in Stock vs Sold. A line such as Disney lives INSIDE its parent brand:
its units are already in the total above, so the row is styled as a breakdown, never as another total. */
.svs-tbl tfoot tr.svs-line td { font-weight: 400; background: transparent; border-top: 1px dashed var(--line, var(--line)); }
.svs-tbl tfoot tr.svs-line td:first-child { padding-left: 14px; }
.line-badge {
display: inline-block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
padding: 1px 5px; border-radius: 3px; margin-right: 5px; vertical-align: 1px;
background: color-mix(in srgb, currentColor 12%, transparent); opacity: .75;
}
@media print { .svs-tbl tfoot tr.svs-line td { border-top: 1px dashed var(--line-strong); } }
/* ==========================================================================================================
Layout & component layer (2026-08 redesign). Everything below uses tokens only.
========================================================================================================== */
/* --- shell: a real grid, not a flex hack. Sidebar column collapses to an off-canvas sheet under 1024px. --- */
.layout{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);align-items:start;gap:0}
.sidebar{width:auto;flex:none;height:calc(100vh - var(--topbar-h));height:calc(100dvh - var(--topbar-h));top:var(--topbar-h);border-right:0.5px solid var(--line);
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);background:var(--surface)}
.content{padding:var(--sp-6) var(--sp-7) 80px}
#btnFilters{display:none}
@media(max-width:1280px){:root{--sidebar-w:240px}.content{padding:var(--sp-5) var(--sp-6)}}
@media(max-width:1024px){
.layout{grid-template-columns:minmax(0,1fr)}
#btnFilters{display:inline-flex}
/* the old rule simply removed the sidebar under 780px — filtering vanished on tablets. It is a sheet now. */
.sidebar{display:block;position:fixed;left:0;top:var(--topbar-h);z-index:40;width:min(320px,92vw);
transform:translateX(-105%);box-shadow:none;overflow-y:auto}
body.filters-open .sidebar{transform:none;box-shadow:var(--sh-3)}
body.filters-open::after{content:"";position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(var(--ink-rgb),.35);z-index:35}
/* as a sheet: a header that stays (name, filters on, Reset, ✕) and a footer that closes it on the lines left */
.sidebar{z-index:42;padding-bottom:0}
.filters-x{display:grid;margin-right:-8px}
.sidebar-head{position:sticky;top:0;z-index:2;background:var(--surface);margin:-20px -20px 12px;padding:10px 12px 10px 20px;
border-bottom:0.5px solid var(--line)}
.sidebar-foot{display:block;position:sticky;bottom:0;z-index:2;background:var(--surface);margin:12px -20px 0;
padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:0.5px solid var(--line)}
.sidebar-foot .btn{width:100%;min-height:44px;justify-content:center}
}
/* a tablet in portrait: the drawer stops above the tab bar */
@media(max-width:900px){.sidebar{height:auto;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}}
/* a phone: the filters come up from the bottom, over the tab bar, like the details panel */
@media(max-width:640px){
.sidebar{top:auto;left:0;right:0;bottom:0;width:auto;height:auto;max-height:88vh;max-height:88dvh;z-index:46;
border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(105%)}
body.filters-open::after{inset:0;z-index:45}
}
@media(max-width:640px){.topbar{padding:calc(10px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px))}.topbar h1{font-size:16px}.topbar .sub{display:none}.content{padding:var(--sp-4)}}
/* --- cards & grids: auto-fit so a new card never needs a span rule --- */
.grid{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))}
.card.span2{grid-column:1/-1}
.kpi-row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media(max-width:640px){.kpi-row{grid-template-columns:1fr 1fr}.kpi-row .kpi.is-lead{grid-column:1/-1}}
.card,.kpi,.storebar,.alerts,.toc{border:1px solid rgba(var(--ink-rgb),.04)}
.card-h h3{font-size:var(--fs-lg)}
.cbox{height:var(--h-chart-md)}
.span2 .cbox{height:var(--h-chart-lg)}
@media(max-width:640px){.grid{grid-template-columns:1fr}.cbox{height:var(--h-chart-sm)}}
/* --- KPI tones: the number, not a left stripe --- */
.kpi.ok .k-val{color:var(--ok)} .kpi.warn .k-val{color:var(--warn)}
.kpi.danger .k-val{color:var(--danger)} .kpi.info .k-val{color:var(--info)}
/* --- badges: one shape, four tones; only critical ones may pulse --- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
border-radius:var(--r-pill);padding:2px 9px;border:1px solid transparent;line-height:1.6}
/* `badge--danger` is critical's other name: the Master Files page uses it throughout, and nothing styled it */
.badge--critical,.badge--danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.badge--warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.badge--good{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.badge--info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.badge--pulse{position:relative}
.badge--pulse::before{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--sev-critical);opacity:0;
animation:badge-pulse 1.6s var(--ease) infinite}
@keyframes badge-pulse{0%{opacity:.8;transform:scale(.95)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.badge--pulse::before{animation:none;opacity:.6;transform:none}}
/* --- motion: one entrance per render, opacity/transform only, capped stagger --- */
@keyframes fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.anim .card,.anim .kpi,.anim .alerts{animation:fade-up var(--dur-slow) var(--ease) both}
.anim .kpi:nth-child(2){animation-delay:40ms}.anim .kpi:nth-child(3){animation-delay:80ms}.anim .kpi:nth-child(4){animation-delay:120ms}
.anim .kpi:nth-child(n+5){animation-delay:160ms}
.btn,.pill,.preset,.fchip,.seg,.a-chip,.toc a,details.fgroup>summary{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.checks{transition:max-height var(--dur) var(--ease)}
/* --- tables: one header treatment for every table in the app --- */
.minitable th,#dataTable th,.order-tbl th,.cmp th,.brand-detail th,.sham-items th,.svs-items th{font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase}
.order-tbl th,.cmp th,.brand-detail th,.sham-items th{background:var(--brand);color:var(--on-dark)}
.minitable th,#dataTable th{background:var(--bg);color:var(--ink-strong)}
/* --- section heads read as a ruler, not a heading --- */
.section-head{margin:var(--sp-7) 2px var(--sp-4)}
.section-head h2{font-size:var(--fs-base);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);font-weight:800}
.section-head .line{background:var(--line)}
/* --- router: page visibility (kept separate from .hidden, which app.js owns) --- */
.page-hidden{display:none!important}
.page{min-width:0}
body.no-sidebar .layout{grid-template-columns:minmax(0,1fr)}
body.no-sidebar .sidebar,body.no-sidebar #btnFilters{display:none!important}
/* --- Alerts & insights panel --- */
.alerts{padding:var(--sp-4) var(--sp-5)}
.ins-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.ins-head strong{color:var(--brand);font-size:15px;letter-spacing:-0.01em}
.ins-tabs{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--surface)}
.ins-tab{border:0;background:transparent;font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--ink-muted);padding:5px 12px;cursor:pointer}
.ins-tab+.ins-tab{border-left:1px solid var(--line)}
.ins-tab.on{background:var(--brand);color:var(--on-dark)}
.ins-tab b{font-weight:800;margin-left:3px}
.ins-badges{display:flex;gap:6px;flex-wrap:wrap}
.ins-scope{margin-left:auto;font-size:var(--fs-xs)}
.ins-group{margin-top:var(--sp-3)}
.ins-group-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ins-more{margin-top:var(--sp-3)}
.a-chip.tone-critical{border-left-color:var(--sev-critical)!important}.a-chip.tone-critical .a-tag{color:var(--danger)}
.a-chip.tone-warn{border-left-color:var(--sev-warn)!important}.a-chip.tone-warn .a-tag{color:var(--warn)}
.a-chip.tone-good{border-left-color:var(--sev-good)!important}.a-chip.tone-good .a-tag{color:var(--ok)}
.a-chip.tone-info{border-left-color:var(--sev-info)!important}.a-chip.tone-info .a-tag{color:var(--info)}
.ins-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-5)}
.ins-cols h4{margin:0 0 6px;font-size:var(--fs-md);color:var(--brand)}
.ins-cols .recs li{font-size:var(--fs-md)}
.recs-card{display:none} /* its content moved into the Insights tab */
@media(max-width:640px){.ins-scope{margin-left:0}.ins-bar-hint{display:none}} /* the bar is a button: on a phone the hint only wrapped into a sliver */
.empty-act{margin-top:18px}
.page-hero{margin:0 0 var(--sp-5)}
.page-hero h2{font-size:28px;font-weight:700;letter-spacing:-0.04em;color:var(--ink-strong)}
.page-hero p{margin:0;color:var(--ink-muted);font-size:15px;line-height:1.45;max-width:640px} /* the top bar is the only page title (Stage 3d) */
/* iPhone-style tab bar under 900px — the rail becomes a bottom bar */
@media(max-width:900px){
body{grid-template-columns:minmax(0,1fr)}
/* four tabs chosen for the role + More (router.js TABS), clear of the home indicator and a landscape notch */
.app-rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));width:100%;
flex-direction:row;align-items:flex-start;padding:4px max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px));
border-right:0;border-top:0.5px solid var(--line);gap:0}
/* .app-rail a (0,1,1) outranks a bare .rail-brand: the brand used to sit in the tab bar and squeeze the tabs */
.app-rail .rail-brand,.app-rail .rail-foot{display:none}
.rail-group{flex-direction:row;flex:1;justify-content:space-around;gap:0}
.app-rail .rail-group a:not(.tab-primary){display:none}
.app-rail .rail-group a,.rail-more{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:2px;font-size:11px;font-weight:600;
padding:4px 2px;min-height:48px;border-radius:var(--r-md);text-align:center;line-height:1.15}
.app-rail .rail-group a.on,.rail-more.on{box-shadow:none;background:rgba(var(--ink-rgb),.06);color:var(--ink-strong)}
.rail-more{display:flex;align-items:center;border:0;background:transparent;color:var(--ink);font-family:inherit;cursor:pointer}
.rail-more:focus-visible,.app-rail .rail-group a:focus-visible{outline:2px solid var(--info-strong);outline-offset:-2px}
.app-rail svg{width:22px;height:22px}
.app-frame{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom,0px))}
.topbar h1{font-size:18px}
.topbar .sub{display:none}
.kpi-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.grid{grid-template-columns:1fr}
.card.span2{grid-column:span 1}
.content{padding:var(--sp-4)}
}
/* ---- Alerts collapsed to a bar -------------------------------------------------------------------
45 alerts used to push the KPI row below the fold, so the numbers the page exists for were the last
thing visible. The bar keeps counts and severity in view; the detail drops down on click. */
.ins-bar { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--surface); cursor: pointer; font: inherit; color: var(--ink);
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.ins-bar:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ins-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ins-bar.is-clear { cursor: default; }
.ins-caret { color: var(--ink-muted); font-size: var(--fs-sm); width: 1em; }
.ins-count { font-variant-numeric: tabular-nums; font-weight: 600; background: var(--surface-3);
color: var(--ink); border-radius: var(--r-pill); padding: 1px var(--sp-2); font-size: var(--fs-sm); }
.ins-bar-hint { margin-left: auto; font-size: var(--fs-sm); }
.ins-drop { margin-top: var(--sp-2); }
.ins-drop .ins-head strong { display: none; }
/* ---- Money privacy on the KPI row ---------------------------------------------------------------- */
.kpi .k-label { display: flex; align-items: center; gap: var(--sp-2); }
.kpi-eye { border: 0; background: none; padding: 2px; margin: -2px; color: var(--ink-faint);
cursor: pointer; line-height: 0; border-radius: var(--r-sm);
transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.kpi-eye:hover { color: var(--ink); background: var(--surface-3); }
.kpi-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-eye svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round; }
.kpi-hidden { color: var(--ink-faint); letter-spacing: .1em; user-select: none; }
.kpi-unit { font-size: var(--fs-sm); color: var(--ink-muted); font-weight: 400; }
/* ==========================================================================================================
Icons (icons.js) and inline data marks (2026-09-12)
Icons inherit `currentColor` and carry no colour of their own, so an icon is always exactly the colour of
the text it sits beside — that is the whole reason they are stroke paths and not emoji (which ignore the
token layer, and render as a different picture on every OS).
The data marks — bar, stacked bar, cell bar, sparkline — take their SIZE from the data (an inline
`--w` percentage, or a path built by Core.sparkline) and their COLOUR from the tokens here. Nothing that
paints may pass a colour in from JS: that is what lint_css.js is watching for.
========================================================================================================== */
.ic{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.ic-sm{width:1em;height:1em;stroke-width:1.8}
.ic-lg{width:1.45em;height:1.45em;stroke-width:1.6}
.ic--ok{color:var(--ok)}.ic--warn{color:var(--warn)}.ic--danger{color:var(--danger)}
.ic--info{color:var(--info)}.ic--accent{color:var(--accent-strong)}.ic--muted{color:var(--ink-faint)}
.badge>svg.ic{width:12px;height:12px;stroke-width:2}
/* a static heading names its icon with data-ic (Icons.hydrate fills it in) */
h3[data-ic]{display:flex;align-items:center;gap:var(--sp-2)}
h3[data-ic]>svg.ic{color:var(--ink-faint)}
.kpi .k-label{display:flex;align-items:center;gap:6px}
.kpi .k-label>svg.ic{color:var(--ink-faint)}
/* A head with an icon. The icon sits ON the text baseline — an icon floating above the cap height is the
commonest way a heading starts to look assembled rather than designed. */
.section-head h2,.card-h h3{display:inline-flex;align-items:center;gap:var(--sp-2)}
.section-head h2 .ic{color:var(--ink-faint)}
/* The icon chip: a soft square that gives a card a recognisable face without adding a sixth colour. */
.ih{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
background:var(--surface-3);color:var(--brand);flex:0 0 auto}
.ih .ic{width:15px;height:15px;vertical-align:0}
.ih--ok{background:var(--ok-soft);color:var(--ok)}
.ih--warn{background:var(--warn-soft);color:var(--warn)}
.ih--danger{background:var(--danger-soft);color:var(--danger)}
.ih--info{background:var(--info-soft);color:var(--info)}
.ih--accent{background:var(--accent-soft);color:var(--accent-strong)}
/* --- a single bar: share of a maximum ------------------------------------------------------------------ */
.vbar{position:relative;height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.vbar>i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--chart-1)}
.vbar--ok>i{background:var(--ok-vivid)}.vbar--warn>i{background:var(--warn-vivid)}
.vbar--danger>i{background:var(--danger-vivid)}.vbar--info>i{background:var(--info-vivid)}
.vbar--tall{height:10px}
/* --- a stacked bar: parts of a whole, with a legend that names every part ------------------------------- */
.vstack{display:flex;height:12px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-3)}
.vstack>i{display:block;width:var(--w,0%);min-width:0}
.vstack>i.s-ok{background:var(--ok-vivid)}
.vstack>i.s-info{background:var(--info-vivid)}
.vstack>i.s-warn{background:var(--warn-vivid)}
.vstack>i.s-danger{background:var(--danger-vivid)}
.vstack>i.s-mute{background:var(--ink-faint)}
.vlegend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-xs);
font-weight:700;color:var(--ink-muted)}
.vlegend span{display:inline-flex;align-items:center;gap:6px}
.vlegend b{color:var(--ink-strong)}
.vlegend i{width:9px;height:9px;border-radius:3px;flex:none}
.vlegend i.s-ok{background:var(--ok-vivid)}.vlegend i.s-info{background:var(--info-vivid)}
.vlegend i.s-warn{background:var(--warn-vivid)}.vlegend i.s-danger{background:var(--danger-vivid)}
.vlegend i.s-mute{background:var(--ink-faint)}
/* --- a bar inside a table cell, behind the number: a column of them reads as a small chart ------------- */
td.cellbar{position:relative}
td.cellbar>span{position:relative;z-index:1}
td.cellbar::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);height:62%;
width:calc(var(--w,0%) * 0.8);background:rgba(var(--brand-rgb),.10);border-radius:4px;z-index:0}
td.cellbar.is-ok::before{background:rgba(var(--ok-rgb),.16)}
td.cellbar.is-warn::before{background:rgba(var(--accent-rgb),.16)}
/* --- sparkline: the shape of the window behind the number it belongs to -------------------------------- */
.spark{display:block;width:100%;height:30px;margin-top:var(--sp-2);overflow:visible}
.spark .ln{fill:none;stroke:var(--chart-1);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.spark .ar{fill:rgba(var(--brand-rgb),.09);stroke:none}
.spark .pt{fill:none;stroke:var(--accent-strong);stroke-width:4.6;stroke-linecap:round}
.spark .base{stroke:var(--line);stroke-width:1;fill:none}
.kpi .spark{height:34px}
.kpi.is-lead .spark{height:42px}
.spark-lab{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-faint);font-weight:600}
/* season buy planner on the forecast engine (forecast.js) */
.kpi-row.kpi-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.kpi-row.kpi-5{grid-template-columns:repeat(3,1fr)}}
.buy-why{font-size:11px;color:var(--ink-muted);margin-top:3px;line-height:1.4;max-width:420px}
.cov-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cov-chip{font-size:11px;border:1px solid var(--line);border-radius:12px;padding:1px 8px;color:var(--ink-muted);background:var(--surface-2)}
.floor-bars{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;margin:8px 12px 4px;font-size:12px}
.floor-bars .fb-bar{height:7px;background:var(--surface-3);border-radius:6px;overflow:hidden}
.floor-bars .fb-fill{height:100%;background:var(--ok);border-radius:6px}
.hist-tbl td.partial{color:var(--ink-muted);font-style:italic}
/* table expand / collapse dropdown toggles */
.tbl-expand-wrap{display:flex;justify-content:center;padding:var(--sp-2) 0;margin-top:var(--sp-2);border-top:1px dashed var(--line)}
.tbl-expand-btn{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 14px;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.tbl-expand-btn:hover{background:var(--info-wash);border-color:var(--info-line);color:var(--info-strong)}
/* ---- sheet.js: the one details panel (Stage 3e, 2026-09-27). A drawer on the right; from the bottom on a phone. ---- */
.sheet-root{position:fixed;inset:0;z-index:65}
.sheet-backdrop{position:absolute;inset:0;background:rgba(var(--ink-rgb),.35)}
.sheet{position:absolute;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--surface);box-shadow:var(--sh-3);
display:flex;flex-direction:column;outline:none;padding-bottom:env(safe-area-inset-bottom,0px);animation:sheet-in .18s ease-out}
.sheet-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px;border-bottom:0.5px solid var(--line)}
.sheet-h h2{flex:1;min-width:0;margin:0;font-size:17px;font-weight:700;color:var(--ink-strong);line-height:1.3;overflow-wrap:anywhere}
.sheet-x{flex:none;width:44px;height:44px;margin:-8px -8px -8px 0;display:grid;place-items:center;border:0;border-radius:var(--r-pill);
background:transparent;color:var(--ink-muted);cursor:pointer}
.sheet-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sheet-x:hover{background:var(--surface-3);color:var(--ink)}
.sheet-x:focus-visible{outline:2px solid var(--info-strong);outline-offset:2px}
.sheet-b{flex:1;overflow:auto;padding:14px 18px 22px;overscroll-behavior:contain}
body.sheet-open{overflow:hidden}
@keyframes sheet-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){
.sheet{top:auto;left:0;width:auto;max-height:88vh;max-height:88dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;animation-name:sheet-up}
}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
/* pages/drill.js: what the panel holds */
.drill{font-size:13.5px;color:var(--ink);line-height:1.5}
.drill p{margin:0 0 8px}
.drill .muted{font-size:inherit}
.drill-sub{color:var(--ink-muted)}
.drill-state{padding:8px 10px;border-radius:var(--r-md);background:var(--warn-wash);border:1px solid var(--warn-line)}
.drill-h{margin:18px 0 6px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-muted)}
.drill-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 14px;margin:0}
.drill-dl dt{color:var(--ink-muted)}
.drill-dl dd{margin:0;overflow-wrap:anywhere}
.drill code{font-family:var(--font-mono);font-size:12.5px}
.drill-dl .badge{margin-left:4px}
.drill-t{width:100%;border-collapse:collapse;font-size:13px}
.drill-t th{font-size:12px;font-weight:650;color:var(--ink-muted);padding:4px 6px;border-bottom:0.5px solid var(--line-strong)}
.drill-t td{padding:6px;border-bottom:0.5px solid var(--line)}
.drill-t :is(th,td).num{font-variant-numeric:tabular-nums}
.drill-t tr.drill-here td{color:var(--warn);font-weight:650}
.drill-t tr.drill-sham td{font-weight:650}
.drill-tiny{font-size:12px}
.drill-list{list-style:none;margin:8px 0 0;padding:0}
.drill-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;width:100%;min-height:44px;padding:8px 10px;border:0;
border-bottom:0.5px solid var(--line);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.drill-row:hover{background:var(--surface-2)}
.drill-row:focus-visible{outline:2px solid var(--info-strong);outline-offset:-2px}
.drill-row-t{grid-column:1;font-weight:650;overflow-wrap:anywhere}
.drill-row-s{grid-column:1;color:var(--ink-muted);font-size:12.5px}
.drill-row-n{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--ink-muted);font-variant-numeric:tabular-nums}