/* =====================================================================
   BRG Skin theme
   Colors: brgskin.com theme settings (cream #F4F1EC, off-white #FFFCF7,
   deep navy #003057, logo navy #1F3A5F, accent blue #2F5C8A,
   rosé #964D48, border #CDC8BE).
   Type and layout: Bebas Neue display + DM Sans text, outlined section
   numbers, tracked-caps labels, large numbers with small units.
   Loaded after dashboard.css and app.css.
   ===================================================================== */

:root{
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Bebas Neue","Oswald","Arial Narrow",sans-serif;

  --bg:#f4f1ec; --surface:#fffcf7; --surface-2:#eee9e1; --track:#e4dfd5;
  --line:rgba(0,48,87,.11); --line-2:#e8e2d8; --rule:#cdc8be;
  --ink:#003057; --ink-2:#335977; --muted:#4d6d87; --axis:#cdc8be; --outline:#b9b3a8;
  --c1:#1f3a5f; --link:#2f5c8a;
  --rose:#964d48; --rose-ink:#7d3a36; --blush:#eee0db; --blush-2:#f6ece8;
  --good:#17713a; --bad:#b3261e; --warn:#d99a1c;
  --brand:#003057; --nav-on-bg:#003057; --nav-on-ink:#fffcf7; --focus:#2f5c8a;
  --snap-bg:#1f3a5f; --snap-ink:#f4f1ec; --snap-ink-2:#d4d6d7; --snap-muted:#b8bec5;
  --snap-line:rgba(244,241,236,.14); --snap-chip:rgba(244,241,236,.08); --snap-chip-on:#f4f1ec; --snap-chip-on-ink:#003057;
  --snap-bar:#e3b5ab; --snap-bar-hi:#f2d6cf; --snap-good:#8fe0b0; --snap-bad:#ffaaa2;
  --f1:#8fa8c2; --f2:#6a8aad; --f3:#4a6f97; --f4:#2f5c8a; --f5:#003057;
  --heat-lo:#e9edf1; --heat-hi:#7f9bba; --heat-ink:#003057;
  --tip-bg:#003057; --tip-ink:#fffcf7;
  --logo:#1f3a5f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1726; --surface:#102136; --surface-2:#172b44; --track:#20354f;
    --line:rgba(244,241,236,.10); --line-2:#1d324c; --rule:#2c4361;
    --ink:#f4f1ec; --ink-2:#c8cdd3; --muted:#9eabb9; --axis:#2c4361; --outline:#3b5574;
    --c1:#9db5d0; --link:#9db5d0;
    --rose:#e3b5ab; --rose-ink:#f2d6cf; --blush:rgba(227,181,171,.16); --blush-2:rgba(227,181,171,.08);
    --good:#5fcf8a; --bad:#f39389; --warn:#e8b14a;
    --brand:#f4f1ec; --nav-on-bg:#f4f1ec; --nav-on-ink:#003057; --focus:#9db5d0;
    --snap-bg:#17314f;
    --f1:#2f4d70; --f2:#3f6590; --f3:#5a82ae; --f4:#86a5c8; --f5:#b9cce0;
    --heat-lo:#1a2b40; --heat-hi:#45678c; --heat-ink:#f4f1ec;
    --tip-bg:#f4f1ec; --tip-ink:#003057;
    --logo:#f4f1ec;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1726; --surface:#102136; --surface-2:#172b44; --track:#20354f;
  --line:rgba(244,241,236,.10); --line-2:#1d324c; --rule:#2c4361;
  --ink:#f4f1ec; --ink-2:#c8cdd3; --muted:#9eabb9; --axis:#2c4361; --outline:#3b5574;
  --c1:#9db5d0; --link:#9db5d0;
  --rose:#e3b5ab; --rose-ink:#f2d6cf; --blush:rgba(227,181,171,.16); --blush-2:rgba(227,181,171,.08);
  --good:#5fcf8a; --bad:#f39389; --warn:#e8b14a;
  --brand:#f4f1ec; --nav-on-bg:#f4f1ec; --nav-on-ink:#003057; --focus:#9db5d0;
  --snap-bg:#17314f;
  --f1:#2f4d70; --f2:#3f6590; --f3:#5a82ae; --f4:#86a5c8; --f5:#b9cce0;
  --heat-lo:#1a2b40; --heat-hi:#45678c; --heat-ink:#f4f1ec;
  --tip-bg:#f4f1ec; --tip-ink:#003057;
  --logo:#f4f1ec;
  color-scheme:dark;
}

/* ---------- base type ---------- */
body{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg)}
.eyebrow,.brand-dept,.nav-label,.hero-l,.mini .l,.stat .l,.kpi h3,.card h3,.t th,.heat th,.tview th,
.ai .act b,.crumb,.pagefoot{font-family:var(--font);text-transform:uppercase;letter-spacing:.2em;font-weight:600}
.eyebrow{font-size:10.5px;color:var(--muted);margin-bottom:4px}

/* ---------- sidebar ---------- */
.side{background:var(--surface);border-right:1px solid var(--line)}
.brand-dept{font-size:9.5px;letter-spacing:.24em;color:var(--muted)}
.hello{font-size:13px}
.nav-label{font-size:9.5px;letter-spacing:.24em;padding-bottom:8px}
.nav a,.nav-btn{border-radius:999px;font-size:13.5px;color:var(--ink-2)}
.nav a[aria-current="true"]{background:var(--nav-on-bg);color:var(--nav-on-ink);font-weight:600}
.nav a:hover,.nav-btn:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="true"]:hover{background:var(--nav-on-bg);color:var(--nav-on-ink)}
.user{border-radius:14px;background:var(--bg)}
.avatar{background:var(--brand);color:var(--surface);font-family:var(--display);font-size:16px;letter-spacing:.04em;font-weight:400}

/* ---------- page header ---------- */
.top{align-items:flex-end;padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.top h1,.page-title{font-family:var(--display);font-weight:400;font-size:clamp(44px,6vw,64px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.page-title{font-size:clamp(40px,5vw,54px)}
.chain{margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.chain i{color:var(--rose)}
.badge{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:11px;letter-spacing:.06em;font-weight:600;padding:7px 14px}

/* ---------- sections: outlined number, eyebrow, display title ---------- */
.view{counter-reset:sec}
.sec{margin-top:52px}
.sec-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:20px;align-items:start;margin-bottom:18px}
.sec-head::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);font-family:var(--display);font-size:76px;line-height:.78;
  color:transparent;-webkit-text-stroke:1.2px var(--outline);letter-spacing:.02em;padding-top:2px}
@supports not (-webkit-text-stroke:1px black){.sec-head::before{color:var(--line-2)}}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,42px);line-height:.92;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.sowhat{margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:72ch}
.tag{align-self:start;border:0;background:var(--blush);color:var(--rose-ink);font-size:11.5px;font-weight:700;padding:4px 12px;margin-top:6px}
@media (max-width:640px){
  .sec-head{grid-template-columns:auto minmax(0,1fr);column-gap:14px}
  .sec-head::before{font-size:52px}
  .sec-head .tag{grid-column:2;justify-self:start;margin-top:10px}
}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.card h3{font-size:10.5px;color:var(--ink-2);letter-spacing:.2em}
.card .sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.note{font-size:12px;color:var(--muted)}
.grid-2,.stack,.two{gap:16px}

/* ---------- executive snapshot: the dark "results at a glance" band ---------- */
.snap{background:var(--snap-bg);border-radius:20px;padding:24px}
.snap-head h2{font-family:var(--display);font-weight:400;font-size:34px;line-height:.95;letter-spacing:.02em;text-transform:uppercase}
.snap-range{font-size:12.5px}
.seg{background:var(--snap-chip)}
.seg button{font-size:12px;letter-spacing:.04em}
.hero-l{font-size:10.5px;color:var(--snap-muted)}
.hero-v{font-family:var(--display);font-weight:400;font-size:clamp(64px,8vw,92px);line-height:.88;letter-spacing:.01em;margin-top:8px}
.mini{border-radius:16px;padding:16px;background:var(--snap-chip);border:1px solid var(--snap-line)}
.mini .l{font-size:9.5px;letter-spacing:.22em}
.mini .v{font-family:var(--display);font-weight:400;font-size:44px;line-height:.95;letter-spacing:.01em;margin-top:8px}
.mini .s{font-size:12px}
.share{background:rgba(244,241,236,.16)}
.link-btn{border-radius:999px;padding:5px 12px}

/* KPI tiles: label, big number, small unit, definition */
.kpis{gap:14px;margin-top:16px}
.kpi{border-radius:18px;padding:18px 18px 16px;background:var(--surface);border:1px solid var(--line)}
.kpi h3{font-size:9.5px;letter-spacing:.22em;color:var(--ink-2)}
.kpi .v{font-family:var(--display);font-weight:400;font-size:50px;line-height:.92;letter-spacing:.01em;margin-top:14px;color:var(--ink)}
.kpi .d{margin-top:10px;font-size:12px}
.kpi .def{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);font-size:12px}
.stat{border-radius:14px;padding:14px;background:var(--bg);border:1px solid var(--line)}
.stat .l{font-size:9.5px;letter-spacing:.2em;color:var(--ink-2)}
.stat .v{font-family:var(--display);font-weight:400;font-size:38px;line-height:.95;letter-spacing:.01em;margin-top:8px}
.stat .s{font-size:12px;margin-top:4px}

/* units drawn smaller, as in "64%" and "$7.8M" (wrapped by dashboard.js) */
.u{font-size:.5em;margin-left:.05em;letter-spacing:.02em;opacity:.78}
.u-pre{font-size:.56em;vertical-align:.5em;margin-right:.03em;opacity:.85}

/* ---------- deltas ---------- */
.delta{font-size:12px}

/* ---------- tables ---------- */
.t caption{font-size:12px;color:var(--muted)}
.t th{font-size:9.5px;letter-spacing:.18em;color:var(--ink-2);border-bottom:1px solid var(--rule);padding:10px}
.t td{border-bottom:1px solid var(--line-2);padding:11px 10px}
.t td:first-child{color:var(--ink)}
.t tbody tr:hover td{background:var(--blush-2)}
.t tfoot td{border-top:1px solid var(--rule)}
.t tr.sel td{background:var(--nav-on-bg);color:var(--nav-on-ink)}
.t tr.grp td{font-size:9.5px;letter-spacing:.2em;color:var(--rose-ink)}

/* thin bars: navy for now, track for the base, rosé tick for the target */
.mbar .track,.dev-r .tr,.fr .tr,.br .tr{background:var(--track)}
.mbar .fill,.dev-r .fb,.br .fb{background:var(--c1)}
.br .fb.tot{background:var(--rose)}
.mbar .tick,.legend .tick-s{background:var(--rose);opacity:1}
.fr .n{font-weight:600}

/* ---------- pills, callouts, highlights ---------- */
.pill{border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:11.5px}
.pill.run{background:var(--blush);color:var(--rose-ink);border-color:transparent}
.pill.good{border-color:currentColor}
.callout{border-left:3px solid var(--rose);background:var(--blush-2);border-radius:0 14px 14px 0;color:var(--ink-2)}
.callout svg{stroke:var(--rose)}
.goto,.field small a{color:var(--link)}
mark,.hl{background:var(--blush);color:inherit;padding:0 .18em;border-radius:3px}
.flag svg{fill:var(--warn)}

/* ---------- AI insight cards ---------- */
.ai{position:relative;padding-top:24px}
.ai::before{content:"";position:absolute;left:20px;top:0;width:44px;height:3px;background:var(--rose);border-radius:0 0 2px 2px}
.ai h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.ai p{font-size:13.5px}
.ai .act b{font-size:9.5px;letter-spacing:.2em;color:var(--rose-ink)}

/* ---------- projection ---------- */
.steps li{border-radius:16px;background:var(--bg)}
.steps li::before{width:auto;height:auto;border-radius:0;background:none;color:transparent;-webkit-text-stroke:1px var(--outline);
  font-family:var(--display);font-weight:400;font-size:44px;line-height:.85;content:counter(step,decimal-leading-zero);display:block}
.steps h3{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.seg2 button[aria-pressed="true"]{background:var(--brand);color:var(--surface);box-shadow:none}

/* ---------- definitions, footer ---------- */
.defs summary{border-radius:999px;font-size:13px}
.foot{margin-top:28px;font-size:12px;color:var(--muted);max-width:80ch}
.pagefoot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:9.5px;letter-spacing:.22em;color:var(--muted)}

/* ---------- forms and settings ---------- */
.btn{border-radius:999px;font-size:13px;letter-spacing:.01em}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--surface)}
.field>span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.field small{text-transform:none;letter-spacing:0;font-size:11.5px}
.field input,.field select{border-radius:12px;background:var(--surface);border-color:var(--rule)}
.page-head{padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--rule);align-items:flex-end}
.page-sub{margin-top:10px}
.crumb{font-size:10px;letter-spacing:.2em;margin-bottom:6px}
.card-title{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.02em;text-transform:uppercase;line-height:1;margin-bottom:16px}
.flash{border-radius:14px}

/* ---------- sign-in ---------- */
.auth-card{border-radius:20px;padding:30px 28px;border-color:var(--line);background:var(--surface)}
.auth-title{font-family:var(--display);font-weight:400;font-size:46px;line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.auth-sub{margin:10px 0 22px}
.auth-card .page-title{font-size:40px}

/* ---------- tooltip ---------- */
.tip{border-radius:10px;font-family:var(--font)}

@media (max-width:880px){
  .nav a,.nav-btn{border:1px solid var(--line)}
  .nav a[aria-current="true"]{border-color:var(--nav-on-bg)}
  .top{margin-bottom:20px}
  .sec{margin-top:40px}
}
@media (forced-colors: active){.sec-head::before,.steps li::before{color:CanvasText;-webkit-text-stroke:0}}

/* ---------- layout fixes after review ---------- */
#t-tests{min-width:0}
#t-tests td:first-child{white-space:normal}
.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.ai-grid{grid-template-columns:minmax(0,1fr)}}
.ai h3{font-family:var(--font);font-weight:700;font-size:17px;line-height:1.35;letter-spacing:0;text-transform:none}

/* =====================================================================
   v2: plan, targets and channel views
   Channel colors were run through the colorblind checks in this order
   (TikTok Shop, Amazon, DTC): light on #fffcf7, dark on #102136 and on the navy band.
   ===================================================================== */
:root{--ch-tts:#c76b5e; --ch-amz:#2b5f96; --ch-dtc:#2a9d8f; --band-tts:#d4705f; --band-amz:#5a8de0; --band-dtc:#14907f;
  --st-good:#17713a; --st-warn:#9a6400; --st-bad:#b3261e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ch-tts:#d4705f; --ch-amz:#5a8de0; --ch-dtc:#14907f; --st-good:#5fcf8a; --st-warn:#e8b14a; --st-bad:#f39389}}
:root[data-theme="dark"]{--ch-tts:#d4705f; --ch-amz:#5a8de0; --ch-dtc:#14907f; --st-good:#5fcf8a; --st-warn:#e8b14a; --st-bad:#f39389}

/* header: period switch */
.top-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.top-r .seg2{background:var(--surface);border:1px solid var(--line)}
.notice{border-left-color:var(--link);margin:-8px 0 20px}
@media (max-width:760px){.top-r{align-items:flex-start;width:100%}.top-r .seg2{width:100%}}

/* channel swatches */
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0;flex:none}
.seg-tts{background:var(--ch-tts)} .seg-amz{background:var(--ch-amz)} .seg-dtc{background:var(--ch-dtc)}
.snap .seg-tts{background:var(--band-tts)} .snap .seg-amz{background:var(--band-amz)} .snap .seg-dtc{background:var(--band-dtc)}

/* snapshot split bar */
.split{margin-top:18px}
.split-bar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;background:rgba(244,241,236,.1)}
.split-bar span{display:block;height:100%;min-width:2px}
.split-key{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px}
.split-key li{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;font-size:12px;color:var(--snap-ink-2)}
.split-key li .sw{margin:0}
.split-key b{grid-column:2;font-family:var(--display);font-weight:400;font-size:24px;line-height:1;color:var(--snap-ink);letter-spacing:.01em}
.split-key em{grid-column:2;font-style:normal;font-size:11.5px;color:var(--snap-muted)}
@media (max-width:520px){.split-key{grid-template-columns:minmax(0,1fr)}}
.hero-d span{color:var(--snap-muted)}
.hero-d .vs,.kpi .d .vs{color:inherit;opacity:.85;margin-left:6px}
.kpi .d .vs{color:var(--muted);opacity:1}

/* line chart (on the navy band) */
.chart svg .grid{stroke:rgba(244,241,236,.10);stroke-width:1}
.chart svg .grid.base{stroke:rgba(244,241,236,.28)}
.chart svg .ax{font-size:11px;fill:var(--snap-muted);font-family:var(--font)}
.chart svg .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart svg .ln.act{stroke:var(--snap-bar-hi)}
.chart svg .ln.plan{stroke:var(--snap-muted);stroke-dasharray:5 4;stroke-width:1.6}
.chart svg .dot.act{fill:var(--snap-bar-hi);stroke:var(--snap-bg);stroke-width:2}
.chart svg .today{stroke:rgba(244,241,236,.35);stroke-dasharray:2 3}
.chart svg .xh{stroke:rgba(244,241,236,.5);stroke-width:1}
.chart svg .hit{fill:transparent;cursor:crosshair}
.snap-legend{color:var(--snap-muted);margin-top:8px}
.snap-legend span{display:inline-flex;align-items:center;gap:6px;margin-right:14px}
.snap-legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--snap-bar-hi)}
.snap-legend i.ln-plan{border-top:2px dashed var(--snap-muted)}
.snap-legend i.ln-today{border-top:1px dashed rgba(244,241,236,.5)}

/* bar charts on light cards */
.chart.light svg .grid{stroke:var(--line)}
.chart.light svg .grid.base{stroke:var(--rule)}
.chart.light svg .ax{fill:var(--muted)}
.chart.light svg .bar{fill:var(--c1)}
.chart.light svg .bar.c-amz{fill:var(--ch-amz)} .chart.light svg .bar.c-tts{fill:var(--ch-tts)}
.chart.light svg .bar.c-dtc{fill:var(--ch-dtc)} .chart.light svg .bar.c-marketplace{fill:var(--ch-amz)} .chart.light svg .bar.c-total{fill:var(--c1)}
.chart.light svg .bar.fc{opacity:.35}
.chart.light svg .plan-tick{stroke:var(--rose);stroke-width:2.5;stroke-linecap:round}
.chart.light svg .col.on .bar{opacity:.85}
.chart.light svg .col.on .bar.fc{opacity:.55}
.chart.light svg .hit{fill:transparent;cursor:pointer}
.chart.light{margin-top:10px}

/* target tiles in the band */
.strip .tgt{display:flex;flex-direction:column;gap:6px}
.tgt .l{letter-spacing:.18em}
.tgt-top{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:6px}
.tgt .v{margin-top:0!important}
.tgt .s{margin-top:0}
.tbar{position:relative;height:8px;border-radius:99px;background:rgba(244,241,236,.16);margin:6px 0 4px}
.tbar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--snap-bar)}
.tbar .tt{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--snap-ink);opacity:.75;border-radius:1px}
.tbar .exp{position:absolute;top:-6px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--snap-bar-hi);transform:translateX(-5px)}
.snap .pill{background:rgba(244,241,236,.1);border-color:transparent;color:var(--snap-ink)}
.snap .pill.st-good{color:var(--snap-good)} .snap .pill.st-bad{color:var(--snap-bad)} .snap .pill.st-warn{color:#f3c773}

/* status pills */
.pill.st-good{color:var(--st-good);border-color:currentColor;background:transparent}
.pill.st-warn{color:var(--st-warn);border-color:currentColor;background:transparent}
.pill.st-bad{color:var(--st-bad);border-color:currentColor;background:transparent}
.pill.st-none{color:var(--muted)}

/* below the band */
.snap-below{margin-top:16px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.alerts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.al{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:13px}
.al-tag{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.al-bad{border-left:3px solid var(--st-bad)} .al-bad .al-tag{color:var(--st-bad)}
.al-warn{border-left:3px solid var(--st-warn)} .al-warn .al-tag{color:var(--st-warn)}
.al-ok{border-left:3px solid var(--st-good)} .al-ok .al-tag{color:var(--st-good)}
.al .goto{font-size:12px}
@media (max-width:520px){.al{grid-template-columns:minmax(0,1fr)}}

/* plan */
#reforecast{margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#reforecast .stat{background:var(--surface)}
#t-targets td:first-child{min-width:200px}
#t-targets td,#t-targets th{white-space:nowrap}
#t-targets td:first-child,#t-targets td:last-child{white-space:normal}
#t-months tr.sel td{background:var(--blush-2);color:var(--ink)}

/* creators flow */
.flow{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.flow li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:13px}
.flow .n{font-family:var(--display);font-size:22px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--outline)}
.flow b{font-variant-numeric:tabular-nums}

.health{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin-top:10px}
.mbar .fill{background:var(--c1)}
.mbar .tick{background:var(--rose)}
@media (max-width:1100px){.snap-below{grid-template-columns:minmax(0,1fr)}}

/* v2 fixes after review */
.main{counter-reset:sec}
.toolbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-8px 0 22px;padding:10px 0;
  background:var(--bg);border-bottom:1px solid var(--line)}
.toolbar .seg2{background:var(--surface);border:1px solid var(--line)}
.toolbar-note{font-size:12px;color:var(--muted)}
@media (max-width:880px){.toolbar{position:static;margin-top:0}.toolbar .seg2{width:100%;justify-content:space-between}}
.sec{scroll-margin-top:72px}
.t.compact{min-width:0}
.t.compact td:first-child{white-space:normal}
.t .pos{color:var(--st-good);font-weight:600} .t .neg{color:var(--st-bad);font-weight:600}
.flow-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.flow-row li{grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
.flow-row li b{grid-column:2;font-family:var(--display);font-weight:400;font-size:28px;line-height:1;letter-spacing:.01em}
@media (max-width:1100px){.flow-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.flow-row{grid-template-columns:minmax(0,1fr)}}
.kpi{min-width:0}
@media (max-width:520px){.kpi .v{font-size:clamp(30px,9.5vw,44px)}.kpi{padding:14px}}
.snap .pill.st-none{color:var(--snap-ink-2);border-color:rgba(244,241,236,.25)}