/* ===========================================================================
   OOH Campaign Performance Analyzer
   Design system: "Monitor". Graphite chrome, one analytic accent, and a status
   vocabulary that is never used for decoration. Light-first, dark selected
   rather than inverted.

   Every value below comes from a token. If you find yourself typing a raw
   colour or a stray pixel value into a component, add a token instead.
   =========================================================================== */

:root{
  /* --- surfaces: neutral and warm, never pure white --------------------- */
  --bg:#f7f7f5;
  --surface:#fcfcfb;
  --surface-raised:#ffffff;
  --surface-sunken:#f1f1ee;
  --border:rgba(11,11,11,.10);
  --border-strong:#e3e2dc;

  /* --- ink -------------------------------------------------------------- */
  --text:#141413;
  --text-2:#52514e;
  --text-3:#7a7873;

  /* --- accent: interaction and the single analytic series --------------- */
  --accent:#2a78d6;
  --accent-ink:#ffffff;
  --accent-wash:rgba(42,120,214,.10);
  --accent-line:rgba(42,120,214,.28);

  /* --- status: fixed vocabulary, never decorative ----------------------- */
  --ok:#0ca30c;
  --ok-wash:rgba(12,163,12,.10);
  --caution:#fab219;
  --caution-wash:rgba(250,178,25,.14);
  --alert:#d03b3b;
  --alert-wash:rgba(208,59,59,.10);
  --idle:#898781;
  --idle-wash:rgba(137,135,129,.12);

  /* --- chart chrome ----------------------------------------------------- */
  --grid:#e6e5df;
  --axis:#cfcec7;

  /* --- type ------------------------------------------------------------- */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --fs-hero:56px; --fs-metric-lg:32px; --fs-metric:24px;
  --fs-h2:18px; --fs-h3:15px; --fs-body:14px;
  --fs-sm:13px; --fs-xs:12px; --fs-micro:11px;

  /* --- space, radius, elevation, motion --------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-14:56px;
  --r-chip:6px; --r-ctl:8px; --r-card:12px; --r-panel:16px; --r-pill:999px;
  --e-1:0 1px 2px rgba(11,11,11,.05), 0 0 0 1px rgba(11,11,11,.05);
  --e-2:0 4px 14px -3px rgba(11,11,11,.10), 0 0 0 1px rgba(11,11,11,.06);
  --e-3:0 18px 44px -12px rgba(11,11,11,.22), 0 0 0 1px rgba(11,11,11,.08);
  --t-fast:120ms; --t-base:180ms; --t-slow:240ms;
  --ease:cubic-bezier(.2,.6,.3,1);
  --maxw:1240px;
}

/* Dark is its own design: surfaces and accent are re-chosen for the dark
   ground, not flipped. Declared under both the OS query and the explicit
   toggle so the toggle wins in either direction. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d0d0d; --surface:#1a1a19; --surface-raised:#232322; --surface-sunken:#141413;
    --border:rgba(255,255,255,.10); --border-strong:#2e2e2b;
    --text:#f5f5f3; --text-2:#c3c2b7; --text-3:#908e87;
    --accent:#3987e5; --accent-wash:rgba(57,135,229,.16); --accent-line:rgba(57,135,229,.38);
    --ok-wash:rgba(12,163,12,.18); --caution-wash:rgba(250,178,25,.18);
    --alert-wash:rgba(208,59,59,.18); --idle-wash:rgba(137,135,129,.18);
    --grid:#2a2a28; --axis:#3a3a36;
    --e-1:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
    --e-2:0 4px 14px -3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
    --e-3:0 18px 44px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.09);
  }
}
:root[data-theme="dark"]{
  --bg:#0d0d0d; --surface:#1a1a19; --surface-raised:#232322; --surface-sunken:#141413;
  --border:rgba(255,255,255,.10); --border-strong:#2e2e2b;
  --text:#f5f5f3; --text-2:#c3c2b7; --text-3:#908e87;
  --accent:#3987e5; --accent-wash:rgba(57,135,229,.16); --accent-line:rgba(57,135,229,.38);
  --ok-wash:rgba(12,163,12,.18); --caution-wash:rgba(250,178,25,.18);
  --alert-wash:rgba(208,59,59,.18); --idle-wash:rgba(137,135,129,.18);
  --grid:#2a2a28; --axis:#3a3a36;
  --e-1:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  --e-2:0 4px 14px -3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
  --e-3:0 18px 44px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.09);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-chip)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:var(--sp-2); z-index:60; background:var(--accent);
  color:var(--accent-ink); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-ctl)}
.skip:focus{left:var(--sp-4)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-6)}
.num{font-variant-numeric:tabular-nums}

/* ---------- app bar ---------- */
.bar{position:sticky; top:0; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--border); backdrop-filter:saturate(1.1) blur(6px)}
.barin{display:flex; align-items:center; gap:var(--sp-6); height:60px;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-6)}
.brand{display:flex; align-items:center; gap:var(--sp-3); flex:none}
.mark{width:28px; height:28px; border-radius:7px; background:var(--text);
  display:grid; place-items:center; flex:none}
.mark span{display:block; width:11px; height:11px; border-radius:2px;
  background:var(--surface); box-shadow:5px 5px 0 -1px var(--accent)}
.brandname{font-size:var(--fs-sm); font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.nav{display:flex; gap:var(--sp-1); flex:1; min-width:0; overflow-x:auto;
  scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.navtab{background:none; border:0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-ctl);
  font-size:var(--fs-sm); color:var(--text-2); white-space:nowrap;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.navtab:hover{background:var(--surface-sunken); color:var(--text)}
.navtab[aria-current="page"]{background:var(--text); color:var(--surface); font-weight:500}
.navtab .badge{display:inline-block; min-width:18px; margin-left:var(--sp-2);
  padding:0 5px; border-radius:var(--r-pill); background:var(--alert); color:#fff;
  font-size:10px; font-weight:600; line-height:16px; text-align:center;
  font-variant-numeric:tabular-nums}
.navtab[aria-current="page"] .badge{background:var(--surface); color:var(--text)}
.barend{display:flex; align-items:center; gap:var(--sp-3); flex:none}
.asof{font-size:var(--fs-xs); color:var(--text-2); white-space:nowrap;
  padding:var(--sp-1) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-pill)}
.iconbtn{width:32px; height:32px; display:grid; place-items:center; background:none;
  border:1px solid var(--border); border-radius:var(--r-ctl); color:var(--text-2);
  transition:all var(--t-fast) var(--ease)}
.iconbtn:hover{color:var(--text); border-color:var(--border-strong); background:var(--surface-sunken)}

/* ---------- views ---------- */
.view{display:none; padding:var(--sp-8) 0 var(--sp-14)}
.view.on{display:block; animation:rise var(--t-base) var(--ease)}
@keyframes rise{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ---------- synthetic notice ---------- */
.synthetic{display:flex; gap:var(--sp-3); align-items:flex-start; margin:0 0 var(--sp-6);
  padding:var(--sp-3) var(--sp-4); border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--surface-sunken); font-size:var(--fs-xs); color:var(--text-2)}
.synthetic b{color:var(--text)}

/* ---------- intro ---------- */
.intro{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-6);
  margin-bottom:var(--sp-6); flex-wrap:wrap}
.intro .eyebrow{font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:var(--sp-2)}
.intro h1{font-size:var(--fs-metric); letter-spacing:-.02em; max-width:30ch}
.intro p{margin:var(--sp-2) 0 0; color:var(--text-2); font-size:var(--fs-sm); max-width:62ch}
.btn{display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4);
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:var(--r-ctl);
  font-size:var(--fs-sm); font-weight:500; transition:filter var(--t-fast) var(--ease)}
.btn:hover{filter:brightness(1.07); text-decoration:none}
.btn.ghost{background:none; color:var(--text-2); border:1px solid var(--border)}
.btn.ghost:hover{background:var(--surface-sunken); color:var(--text)}

/* ---------- hero band ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--sp-10);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel);
  padding:var(--sp-8); box-shadow:var(--e-1); margin-bottom:var(--sp-6)}
.herofig{font-size:var(--fs-hero); font-weight:600; line-height:1; letter-spacing:-.035em}
.herolab{font-size:var(--fs-h3); color:var(--text-2); margin-top:var(--sp-2)}
.herosub{font-size:var(--fs-sm); color:var(--text-3); margin-top:var(--sp-1)}
.hidden-note{margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--border);
  font-size:var(--fs-sm); color:var(--text-2); line-height:1.6}
.hidden-note b{color:var(--text); font-weight:600}

/* health bar: segment order is a CVD result (green beside red fails), not taste */
.healthbar{display:flex; gap:2px; height:10px; margin-top:var(--sp-5)}
.healthbar div{border-radius:2px; transition:flex-grow var(--t-slow) var(--ease)}
.healthbar .s-ok{background:var(--ok)}
.healthbar .s-done{background:var(--idle)}
.healthbar .s-live{background:var(--alert)}
.healthleg{display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-3);
  font-size:var(--fs-xs); color:var(--text-2)}
.healthleg span{display:inline-flex; align-items:center; gap:6px}
.healthleg i{width:8px; height:8px; border-radius:2px; display:block; flex:none}
.healthleg .k-ok{background:var(--ok)}
.healthleg .k-done{background:var(--idle)}
.healthleg .k-live{background:var(--alert)}

.states{display:flex; flex-direction:column; gap:0; align-self:start; width:100%}
.state{display:flex; align-items:flex-start; gap:var(--sp-4); width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--border);
  padding:var(--sp-4) var(--sp-2); border-radius:var(--r-ctl);
  transition:background var(--t-fast) var(--ease)}
.state:last-child{border-bottom:0}
.state:hover{background:var(--surface-sunken)}
.state-n{font-size:var(--fs-metric); font-weight:600; letter-spacing:-.02em; min-width:2.6ch}
.state>span{display:block}
.state-t{display:block; font-size:var(--fs-sm); font-weight:500}
.state-s{display:block; font-size:var(--fs-xs); color:var(--text-2); margin-top:2px}
.state-go{margin-left:auto; color:var(--text-3); font-size:var(--fs-h3)}

/* ---------- callout ---------- */
.callout{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r-card);
  background:var(--alert-wash); border:1px solid rgba(208,59,59,.22);
  font-size:var(--fs-sm); margin-bottom:var(--sp-8)}
.callout.info{background:var(--accent-wash); border-color:var(--accent-line)}
.callout .glyph{flex:none; width:22px; height:22px; border-radius:var(--r-pill);
  display:grid; place-items:center; background:var(--alert); color:#fff;
  font-size:var(--fs-micro); font-weight:700}
.callout.info .glyph{background:var(--accent)}
.callout p{margin:0; flex:1; min-width:16ch}
.callout .btn{margin-left:auto}

/* ---------- panels ---------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-panel);
  box-shadow:var(--e-1); margin-bottom:var(--sp-6); overflow:hidden}
.panel.flat{box-shadow:none; background:transparent; border:0}
.phead{display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-5) var(--sp-6) 0}
.phead h2{font-size:var(--fs-h2)}
.phint{font-size:var(--fs-xs); color:var(--text-3); margin-left:auto}
.pnote{padding:0 var(--sp-6); margin:var(--sp-2) 0 0; color:var(--text-2);
  font-size:var(--fs-sm); max-width:86ch}
.pbody{padding:var(--sp-5) var(--sp-6) var(--sp-6)}

/* ---------- tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid var(--border)}
.tile{padding:var(--sp-5) var(--sp-6); border-right:1px solid var(--border)}
.tile:last-child{border-right:0}
.tile .lab{font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3)}
.tile .val{font-size:var(--fs-metric); font-weight:600; letter-spacing:-.02em; margin-top:var(--sp-2)}
.tile .sub{font-size:var(--fs-xs); color:var(--text-2); margin-top:var(--sp-1)}

/* ---------- status chips ---------- */
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px var(--sp-2);
  border-radius:var(--r-chip); background:var(--surface-sunken); border:1px solid var(--border);
  font-size:var(--fs-xs); font-weight:500; white-space:nowrap}
.chip .dot{width:7px; height:7px; border-radius:2px; flex:none}
.chip.ok .dot{background:var(--ok)} .chip.ok{background:var(--ok-wash)}
.chip.live .dot{background:var(--alert)} .chip.live{background:var(--alert-wash)}
.chip.minor .dot{background:var(--caution)} .chip.minor{background:var(--caution-wash)}
.chip.done .dot{background:var(--idle)} .chip.done{background:var(--idle-wash)}
.chip.plain{background:var(--surface-sunken)}

/* ---------- pacing bars ---------- */
.pace{display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-2) var(--sp-3);
  align-items:center; font-size:var(--fs-xs)}
.pace .k{color:var(--text-3)}
.track{height:8px; border-radius:var(--r-pill); background:var(--surface-sunken);
  border:1px solid var(--border); overflow:hidden}
.track i{display:block; height:100%; border-radius:var(--r-pill);
  transition:width var(--t-slow) var(--ease)}
.fill-plan{background:var(--idle)}
.fill-ok{background:var(--ok)} .fill-live{background:var(--alert)}
.fill-minor{background:var(--caution)} .fill-done{background:var(--idle)}
.pace .v{font-variant-numeric:tabular-nums; color:var(--text-2); min-width:4.5ch; text-align:right}

/* ---------- campaign cards ---------- */
.cards{display:grid; gap:var(--sp-4)}
.ccard{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) auto;
  gap:var(--sp-6); align-items:center; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--sp-5); box-shadow:var(--e-1);
  transition:box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease)}
.ccard:hover{box-shadow:var(--e-2); transform:translateY(-1px); border-color:var(--border-strong)}
.ccard.closed{background:var(--surface-sunken); box-shadow:none}
.ccard>span{display:block; min-width:0}
.cname{display:block; font-size:var(--fs-h3); font-weight:600; letter-spacing:-.01em}
.cmeta{display:block; font-size:var(--fs-xs); color:var(--text-2); margin-top:2px}
.cmask{display:block; font-size:var(--fs-xs); color:var(--text-2); margin-top:var(--sp-3); line-height:1.5}
.cmask b{color:var(--text)}
.cmoney{text-align:right}
.cmoney .v{display:block; font-size:var(--fs-metric); font-weight:600; letter-spacing:-.02em}
.cmoney .l{display:block; font-size:var(--fs-xs); color:var(--text-2)}

/* ---------- live issue cards ---------- */
.issues{display:grid; gap:var(--sp-4)}
.issue{position:relative; background:var(--surface-raised); border:1px solid var(--border);
  border-left:3px solid var(--alert); border-radius:var(--r-card); padding:var(--sp-5);
  box-shadow:var(--e-1); transition:box-shadow var(--t-fast) var(--ease)}
.issue:hover{box-shadow:var(--e-2)}
.issue.minor{border-left-color:var(--caution)}
.ihead{display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--sp-4); flex-wrap:wrap}
.iwhere{font-size:var(--fs-h3); font-weight:600}
.iwho{font-size:var(--fs-xs); color:var(--text-2); margin-top:2px}
.iexp{text-align:right}
.iexp .v{font-size:var(--fs-metric); font-weight:600; letter-spacing:-.02em; color:var(--alert)}
.issue.minor .iexp .v{color:var(--text)}
.iexp .l{font-size:var(--fs-xs); color:var(--text-2)}
.igrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:var(--sp-4); margin:var(--sp-4) 0; padding:var(--sp-4) 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.igrid .k{font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}
.igrid .v{font-size:var(--fs-h3); font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums}
.inote{display:flex; gap:var(--sp-3); font-size:var(--fs-sm); color:var(--text-2); line-height:1.6}
.inote .glyph{flex:none; color:var(--text-3)}
.inote b{color:var(--text); font-weight:600}
.iact{display:flex; gap:var(--sp-3); align-items:center; margin-top:var(--sp-4)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; border-top:1px solid var(--border)}
table{width:100%; border-collapse:collapse; font-size:var(--fs-sm)}
/* top:0, not the 60px app-bar height: .tablewrap is an overflow container, so
   sticky resolves against IT, and any offset pushes the header down over the
   first rows instead of clearing the app bar. */
thead th{position:sticky; top:0; z-index:2; background:var(--surface);
  text-align:left; font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3); font-weight:500; padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border-strong); white-space:nowrap}
thead th.r{text-align:right}
thead th button{background:none; border:0; padding:0; font:inherit; color:inherit;
  letter-spacing:inherit; text-transform:inherit; display:inline-flex; gap:4px; align-items:center}
thead th button:hover{color:var(--text)}
tbody td{padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border);
  vertical-align:top}
tbody td.r{text-align:right; font-variant-numeric:tabular-nums}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:hover{background:var(--surface-sunken)}
tbody tr:last-child td{border-bottom:0}
.cellmain{font-weight:500}
.cellsub{font-size:var(--fs-xs); color:var(--text-2); margin-top:2px}
.neg{color:var(--alert)} .pos{color:var(--ok)}
.empty{padding:var(--sp-10) var(--sp-6); text-align:center; color:var(--text-2)}
.goodstate{display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  padding:var(--sp-8) var(--sp-6); background:var(--ok-wash); border-radius:var(--r-card);
  color:var(--text-2); font-size:var(--fs-sm)}
.goodstate b{color:var(--text)}

/* ---------- filter bar ---------- */
.filters{display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap;
  margin-bottom:var(--sp-4)}
.filters select,.filters input{font:inherit; font-size:var(--fs-sm); color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-ctl);
  padding:var(--sp-2) var(--sp-3); transition:border-color var(--t-fast) var(--ease)}
.filters select:hover,.filters input:hover{border-color:var(--border-strong)}
.filters input{min-width:200px}
.fchips{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
  font-size:var(--fs-xs); color:var(--text-2)}
.fchip{display:inline-flex; align-items:center; gap:6px; padding:3px var(--sp-2);
  background:var(--accent-wash); border:1px solid var(--accent-line);
  border-radius:var(--r-chip); color:var(--text)}
.fchip button{background:none; border:0; padding:0; color:var(--text-2); line-height:1}
.fchip button:hover{color:var(--text)}
.count{font-size:var(--fs-xs); color:var(--text-3); margin-left:auto}

/* ---------- ranked bars ---------- */
.ranked{display:grid; gap:var(--sp-3)}
.rrow{display:grid; grid-template-columns:minmax(88px,auto) 1fr auto auto; gap:var(--sp-3);
  align-items:center; font-size:var(--fs-sm)}
.rrow .rk{color:var(--text-2)}
.rrow .rb{height:20px; background:var(--surface-sunken); border-radius:3px; overflow:hidden}
.rrow .rb i{display:block; height:100%; background:var(--accent);
  border-radius:0 3px 3px 0; transition:width var(--t-slow) var(--ease)}
.rrow .rv{font-variant-numeric:tabular-nums; min-width:8ch; text-align:right}
.rrow .rp{font-variant-numeric:tabular-nums; min-width:5ch; text-align:right; color:var(--text-2)}

/* ---------- charts ---------- */
.chart{width:100%; display:block; overflow:visible}
.chart .grid{stroke:var(--grid); stroke-width:1}
.chart .axis{stroke:var(--axis); stroke-width:1}
.chart text{fill:var(--text-3); font-size:10px; font-family:var(--sans);
  font-variant-numeric:tabular-nums}
.chart .lbl{fill:var(--text-2); font-size:11px}
.chart .ln-plan{fill:none; stroke:var(--idle); stroke-width:2; stroke-linejoin:round}
.chart .ln-act{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round}
.chart .gap{fill:var(--alert); opacity:.12}
.chart .onset{fill:var(--alert); opacity:.55}
.legend{display:flex; gap:var(--sp-4); font-size:var(--fs-xs); color:var(--text-2);
  margin-bottom:var(--sp-3); flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:14px; height:2px; border-radius:1px; display:block}

/* ---------- drill-down ---------- */
.back{display:inline-flex; align-items:center; gap:var(--sp-2); background:none; border:0;
  color:var(--text-2); font-size:var(--fs-sm); padding:var(--sp-2) 0; margin-bottom:var(--sp-3)}
.back:hover{color:var(--text)}
.ddhead{display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-5)}
.ddhead h1{font-size:var(--fs-metric-lg); letter-spacing:-.025em}
.ddmeta{font-size:var(--fs-sm); color:var(--text-2); margin-top:var(--sp-1)}
.seg{display:inline-flex; gap:2px; padding:2px; background:var(--surface-sunken);
  border:1px solid var(--border); border-radius:var(--r-ctl)}
.seg button{background:none; border:0; padding:var(--sp-1) var(--sp-3); border-radius:6px;
  font-size:var(--fs-xs); color:var(--text-2); transition:all var(--t-fast) var(--ease)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--e-1)}

/* ---------- method ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--sp-4)}
.step{background:var(--surface-sunken); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--sp-5)}
.step .n{font-family:var(--mono); font-size:var(--fs-xs); color:var(--accent)}
.step h3{font-size:var(--fs-h3); margin:var(--sp-2) 0}
.step p{margin:0; font-size:var(--fs-sm); color:var(--text-2)}
.step code{font-family:var(--mono); font-size:var(--fs-xs); color:var(--text);
  background:var(--surface); padding:2px 5px; border-radius:4px; display:inline-block;
  margin-top:var(--sp-2)}
details.adet{border-bottom:1px solid var(--border); padding:var(--sp-4) 0}
details.adet summary{cursor:pointer; font-weight:500; display:flex; gap:var(--sp-3);
  align-items:center; list-style:none}
details.adet summary::-webkit-details-marker{display:none}
details.adet summary::before{content:"+"; color:var(--text-3); font-family:var(--mono)}
details.adet[open] summary::before{content:"\2212"}
details.adet p{margin:var(--sp-3) 0 0 var(--sp-5); color:var(--text-2); font-size:var(--fs-sm)}
.solo{display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap}
.solo .v{font-size:var(--fs-metric-lg); font-weight:600; letter-spacing:-.025em}
.solo .l{font-size:var(--fs-sm); color:var(--text-2)}
.classlegend{display:flex; gap:var(--sp-5); flex-wrap:wrap; font-size:var(--fs-xs);
  color:var(--text-2); margin-bottom:var(--sp-4)}
.classlegend b{font-family:var(--mono); color:var(--text)}

/* ---------- why this matters ---------- */
.why{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5)}
.whycol{padding:var(--sp-5); border-radius:var(--r-card); background:var(--surface-sunken);
  border:1px solid var(--border)}
.whycol.tool{background:var(--accent-wash); border-color:var(--accent-line)}
.whycol h3{font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:var(--sp-4)}
.flow{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm)}
.flow em{font-style:normal; padding:var(--sp-1) var(--sp-3); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-chip)}
.flow .arr{color:var(--text-3)}
.whycol.tool .flow em.hit{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.whycol p{margin:var(--sp-4) 0 0; font-size:var(--fs-xs); color:var(--text-2)}

/* ---------- drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(11,11,11,.4); opacity:0; pointer-events:none;
  transition:opacity var(--t-slow) var(--ease); z-index:40}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); z-index:41;
  background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--e-3);
  transform:translateX(100%); transition:transform var(--t-slow) var(--ease);
  overflow-y:auto; padding:var(--sp-6)}
.drawer.on{transform:none}
.drawer h2{font-size:var(--fs-h2); margin-bottom:var(--sp-1)}
.dclose{position:absolute; top:var(--sp-4); right:var(--sp-4)}
.dl{display:grid; grid-template-columns:1fr auto; gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm); margin:var(--sp-5) 0}
.dl dt{color:var(--text-2)}
.dl dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:500}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border); padding:var(--sp-6) 0 var(--sp-10);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  font-size:var(--fs-xs); color:var(--text-3)}
footer nav{display:flex; gap:var(--sp-4)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr; gap:var(--sp-6)}
  .ccard{grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .ccard .cmoney{grid-column:1/-1; text-align:left; display:flex; gap:var(--sp-6); align-items:baseline}
}
@media (max-width:768px){
  :root{--fs-hero:44px; --fs-metric-lg:28px; --sp-8:24px}
  .brandname{display:none}
  .why{grid-template-columns:1fr}
  .ccard{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .tile{border-bottom:1px solid var(--border)}
  .asof{display:none}
}
@media (max-width:480px){
  :root{--fs-hero:38px}
  .wrap{padding:0 var(--sp-4)}
  .hero{padding:var(--sp-5)}
  .tiles{grid-template-columns:1fr}
  .tile{border-right:0}
  .drawer{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important}
}
@media print{.bar,.filters,.btn{display:none}}

/* ===========================================================================
   P0 visual-analytics additions
   Four components, built from the existing tokens. No new colour is
   introduced: the heatmap is one hue at varying opacity, the waterfall reuses
   the status vocabulary, and the explain layer is chrome.
   =========================================================================== */

/* ---------- explain layer (progressive disclosure) ---------- */
.xpl{
  display:inline-grid; place-items:center; width:16px; height:16px; flex:none;
  margin-left:5px; padding:0; vertical-align:middle;
  background:none; border:1px solid var(--border-strong); border-radius:50%;
  color:var(--text-3); font-size:10px; line-height:1; font-weight:600;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.xpl:hover,.xpl[aria-expanded="true"]{color:var(--accent); border-color:var(--accent)}
.pop{
  position:absolute; z-index:50; width:min(320px,calc(100vw - 32px));
  background:var(--surface-raised); border:1px solid var(--border-strong);
  border-radius:var(--r-card); box-shadow:var(--e-3); padding:var(--sp-4);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pop.on{opacity:1; transform:none; pointer-events:auto}
.pop h4{margin:0 0 var(--sp-2); font-size:var(--fs-sm); font-weight:600}
.pop p{margin:0; font-size:var(--fs-sm); color:var(--text-2); line-height:1.55}
.pop .more{display:inline-block; margin-top:var(--sp-3); font-size:var(--fs-xs)}
.pop .term{font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:var(--sp-1)}

/* ---------- comparison strip (issue cards) ---------- */
.strip{display:grid; gap:var(--sp-3); margin:var(--sp-4) 0 0;
  padding:var(--sp-4) 0 0; border-top:1px solid var(--border)}
.srow{display:grid; grid-template-columns:118px 1fr 118px; gap:var(--sp-4); align-items:center}
.srow .sk{font-size:var(--fs-xs); color:var(--text-2); display:flex; align-items:center}
.srow .sv{font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums;
  text-align:right; line-height:1.3}
.srow .sv .cap{display:block; font-size:10.5px; font-weight:400; color:var(--text-3);
  letter-spacing:.01em}
.srow.money{border-top:1px solid var(--border); padding-top:var(--sp-3)}
.ifacts{display:flex; gap:var(--sp-8); flex-wrap:wrap;
  margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--border)}
.ifacts .k{display:block; font-size:var(--fs-micro); letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3)}
.ifacts .v{display:block; font-size:var(--fs-h3); font-weight:600; margin-top:2px;
  font-variant-numeric:tabular-nums}
.pair{display:grid; gap:4px; min-width:0}
.laneline{display:grid; grid-template-columns:62px 1fr; gap:var(--sp-2); align-items:center}
.laneline em{font-style:normal; font-size:10px; color:var(--text-3); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lane{height:9px; border-radius:var(--r-pill); background:var(--surface-sunken);
  border:1px solid var(--border); overflow:hidden}
.lane i{display:block; height:100%; border-radius:var(--r-pill)}
.f-ghost{background:var(--idle); opacity:.45}
.f-act{background:var(--alert)}
.f-ok{background:var(--ok)}
.f-time{background:var(--accent); opacity:.8}
.f-need{background:var(--caution)}
.f-lost{background:var(--idle)}
.f-prev{background:var(--alert)}

/* ---------- waterfall ---------- */
.wf{width:100%; max-width:600px; display:block; margin:0 auto; overflow:visible}
.wf .bar-gross{fill:var(--alert)}
.wf .bar-offset{fill:var(--idle); opacity:.8}
.wf .bar-net{fill:var(--alert); opacity:.55}
.wf .conn{stroke:var(--axis); stroke-width:1; stroke-dasharray:3 3}
.wf .base{stroke:var(--axis); stroke-width:1}
.wf text{fill:var(--text-2); font-size:11px; font-family:var(--sans);
  font-variant-numeric:tabular-nums}
.wf text.v{fill:var(--text); font-weight:600; font-size:13px}
.wf text.k{fill:var(--text-3); font-size:10.5px}
.wfnote{font-size:var(--fs-sm); color:var(--text-2); margin:var(--sp-4) 0 0; line-height:1.6}
.wfnote b{color:var(--text)}

/* ---------- heatmap ---------- */
.hm{width:100%; border-collapse:separate; border-spacing:2px; font-size:var(--fs-xs)}
.hm th{font-weight:500; color:var(--text-3); font-size:var(--fs-micro);
  letter-spacing:.05em; text-transform:uppercase; padding:var(--sp-2); text-align:center}
.hm th.rowh{text-align:left; font-size:var(--fs-sm); text-transform:none;
  letter-spacing:0; color:var(--text); font-weight:500; white-space:nowrap;
  max-width:190px; overflow:hidden; text-overflow:ellipsis}
.hm td{padding:var(--sp-2) var(--sp-1); text-align:center; border-radius:var(--r-chip);
  font-variant-numeric:tabular-nums; color:var(--text);
  background:color-mix(in srgb, var(--accent) calc(var(--w) * 100%), var(--surface-sunken));
}
.hm td.zero{color:var(--text-3)}
.hmleg{display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4);
  font-size:var(--fs-xs); color:var(--text-2)}
.hmleg .sc{display:flex; gap:2px}
.hmleg .sc i{width:22px; height:10px; border-radius:2px; display:block;
  background:color-mix(in srgb, var(--accent) calc(var(--w) * 100%), var(--surface-sunken))}
.hmwrap{overflow-x:auto}

@media (max-width:620px){
  .srow{grid-template-columns:84px 1fr; }
  .srow .sv{grid-column:2; text-align:left}
}

/* ---------- flight timeline ---------- */
.tlbar{position:relative; padding-top:16px; margin:0 0 var(--sp-2)}
.tltrack{display:flex; gap:0; height:30px; border-radius:4px; overflow:hidden}
.tltrack i{display:block; height:100%}
/* Healthy and recovered are the SAME state -- delivering to plan -- so they get
   the same fill. The badges carry the narrative; a brighter green at the end
   would imply recovery beat the plan, which it did not. */
.tltrack .s-healthy,.tltrack .s-recovered{background:var(--ok); opacity:.6}
.tltrack .s-impaired{background:var(--alert)}
.tltrack .s-future{background:var(--surface-sunken);
  box-shadow:inset 0 0 0 1px var(--border-strong)}
.tlwin{position:absolute; top:0; height:9px; border-radius:2px;
  background:var(--accent); opacity:.22}
.tlb{position:absolute; top:24px; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-raised); border:1.5px solid var(--text);
  font-size:var(--fs-xs); font-weight:600; font-variant-numeric:tabular-nums}
.tl-winlab{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2);
  font-size:var(--fs-xs); color:var(--accent); font-weight:500}
.tl-winlab i{width:18px; height:9px; border-radius:2px; background:var(--accent);
  opacity:.22; flex:none; display:block}
.tl-ends{display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  margin:var(--sp-6) 0 var(--sp-5); font-size:var(--fs-xs); color:var(--text-3)}
.tlnow{position:absolute; top:56px; transform:translateX(-50%); white-space:nowrap;
  font-size:10.5px; color:var(--text-3)}
.tlnow::before{content:""; position:absolute; left:50%; top:-12px; width:1px; height:10px;
  background:var(--border-strong)}

.tlsteps{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3)}
.tlsteps li{display:grid; grid-template-columns:26px 1fr; gap:var(--sp-3); align-items:start}
.tlsteps .tn{width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--text); font-size:var(--fs-xs); font-weight:600; margin-top:1px}
.tlsteps .tb{display:grid; gap:2px}
.tlsteps .tt{font-size:var(--fs-h3); font-weight:600}
.tlsteps .td{font-size:var(--fs-xs); color:var(--text-3); font-variant-numeric:tabular-nums}
.tlsteps .tx{font-size:var(--fs-sm); color:var(--text-2); line-height:1.55; margin-top:2px}
.tlsteps b{color:var(--text); font-weight:600}
@media (max-width:620px){
  .tl{max-width:none}
  .tl .tl-win,.tl .tl-end{font-size:13px}
}