:root{
  --plane:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,0.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --b1:#86b6ef; --b2:#5598e7; --b3:#2a78d6; --b4:#1c5cab; --b5:#0d366b;
  --chip:rgba(11,11,11,0.05);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --plane:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,0.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  --b1:#184f95; --b2:#256abf; --b3:#3987e5; --b4:#6da7ec; --b5:#b7d3f6;
  --chip:rgba(255,255,255,0.06);
}}
:root[data-theme="dark"]{
  --plane:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,0.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  --b1:#184f95; --b2:#256abf; --b3:#3987e5; --b4:#6da7ec; --b5:#b7d3f6;
  --chip:rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--plane);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:0 56px}

/* ---- header ---- */
.top{padding-block:28px 18px}
.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
h1{font-size:26px;margin:6px 0 0;font-weight:650;letter-spacing:-.01em}
.sub{color:var(--ink2);margin:6px 0 0;max-width:62ch}

/* ---- filters ---- */
.filters{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--plane);
  padding-block:12px;border-bottom:1px solid var(--border);margin-bottom:26px}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
select{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
  border:1px solid var(--border);border-radius:6px;padding:6px 8px;min-width:118px}
select:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
.reset{font:inherit;font-size:13px;background:none;border:1px solid var(--border);color:var(--ink2);
  border-radius:6px;padding:7px 12px;cursor:pointer}
.reset:hover{background:var(--chip)}
.scope{font-size:12px;color:var(--muted);margin-top:8px}

/* ---- sections ---- */
section{margin-bottom:38px}
.shead{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid var(--grid)}
.snum{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
h2{font-size:15px;margin:0;font-weight:650;letter-spacing:-.005em}
.shead .note{margin-left:auto;font-size:12px;color:var(--muted)}

/* ---- kpi cards ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:13px 14px}
.kpi .k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .v{font-size:29px;font-weight:600;letter-spacing:-.02em;margin-top:5px;line-height:1.05}
.kpi .m{font-size:12px;color:var(--ink2);margin-top:3px}

.alert{display:flex;gap:12px;align-items:center;margin-top:10px;padding:12px 14px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--critical)}
.alert .n{font-size:24px;font-weight:650;color:var(--critical);font-variant-numeric:tabular-nums}
.alert .t{font-size:13px;color:var(--ink2)}
.alert .t b{color:var(--ink);display:block;font-size:13px}

/* ---- panels & bars ---- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:12px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:15px 16px}
.ptitle{font-size:13px;font-weight:650;margin:0 0 2px}
.psub{font-size:12px;color:var(--muted);margin:0 0 13px}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:118px 1fr auto;gap:10px;align-items:center}
.bar .bl{font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{height:9px;background:var(--chip);border-radius:5px;overflow:hidden}
.fill{height:100%;border-radius:5px;background:var(--s1);min-width:3px}
.bar .bv{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.bar .bv span{color:var(--muted);font-weight:400}

/* split bar */
.legend{display:flex;gap:14px;margin-bottom:9px;font-size:12px;color:var(--ink2)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}
.split{display:flex;height:34px;border-radius:6px;overflow:hidden;gap:2px}
.split div{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;
  font-weight:600;font-variant-numeric:tabular-nums;min-width:44px}

/* histogram */
.hist{display:flex;align-items:flex-end;gap:2px;height:132px;
  border-bottom:1px solid var(--baseline);padding-bottom:0}
.hcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.hbar{width:100%;border-radius:4px 4px 0 0;min-height:3px}
.hval{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.hx{display:flex;gap:2px;margin-top:7px}
.hx div{flex:1;text-align:center;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* tables */
.tscroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px}
th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:0 10px 8px 0;border-bottom:1px solid var(--grid);white-space:nowrap}
th.s{cursor:pointer;user-select:none}
th.s:hover{color:var(--ink)}
th.on{color:var(--ink)}
td{padding:8px 10px 8px 0;border-bottom:1px solid var(--grid);font-variant-numeric:tabular-nums}
td.nm{font-variant-numeric:normal;color:var(--ink)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--chip)}
.num{text-align:right}
.pill{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:600;
  background:var(--chip);color:var(--ink2)}
.pill.bad{background:rgba(208,59,59,.13);color:var(--critical)}
.pill.warnp{background:rgba(250,178,25,.18);color:#8a5d00}
:root[data-theme="dark"] .pill.warnp,
:root:not([data-theme="light"]) .pill.warnp{color:var(--warn)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .pill.warnp{color:#8a5d00}}
.empty{color:var(--muted);font-size:13px;padding:14px 0}
.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--grid);color:var(--muted);font-size:12px}
@media (max-width:520px){
  .bar{grid-template-columns:92px 1fr auto}
  h1{font-size:22px}
  .kpi .v{font-size:25px}
}

.caveat{margin-bottom:12px;padding:11px 13px;border:1px solid var(--border);
  border-left:3px solid var(--warn);border-radius:6px;background:var(--surface);
  color:var(--ink2);font-size:13px}
.caveat b{color:var(--ink)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--chip);padding:1px 5px;border-radius:4px}

.refresh{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
#refresh{font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--s1);
  border:1px solid transparent;border-radius:6px;padding:8px 15px;cursor:pointer;
  font-variant-numeric:tabular-nums}
#refresh:hover:not(:disabled){filter:brightness(1.08)}
#refresh:disabled{background:var(--chip);color:var(--muted);cursor:default}
#refresh:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.rstate{font-size:12px;color:var(--muted)}
.rstate.bad{color:var(--critical)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;min-height:22px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 6px 2px 9px;
  border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--ink2)}
.chip b{font-weight:600;color:var(--ink)}
.chip button{all:unset;cursor:pointer;line-height:1;padding:0 3px;color:var(--muted);font-size:14px}
.chip button:hover{color:var(--critical)}
.chip button:focus-visible{outline:2px solid var(--s1);outline-offset:1px;border-radius:3px}
.chips .none{font-size:12px;color:var(--muted)}
.bar.click{cursor:pointer;border-radius:5px}
.bar.click:hover .bl{color:var(--ink)}
.bar.click:hover .track{background:rgba(42,120,214,.16)}
.bar.on .fill{outline:2px solid var(--ink);outline-offset:1px}
.split div.click{cursor:pointer}
.split div.click:hover{filter:brightness(1.12)}
tbody tr.click{cursor:pointer}
.kpi.click{cursor:pointer}
.kpi.click:hover{border-color:var(--s1)}
.kpi.on{border-color:var(--s1);box-shadow:inset 0 0 0 1px var(--s1)}
.hint{font-size:11px;color:var(--muted);margin-left:auto}

.kpi .v .vsm{font-size:22px;letter-spacing:-.01em}

/* ---- module nav ---- */
/* One scrollable row on narrow screens instead of wrapping (audit P2-4). */
.nav{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav>*{flex:0 0 auto;white-space:nowrap}
.nav{display:flex;align-items:center;gap:4px;padding-block:12px;border-bottom:1px solid var(--grid);
  margin-bottom:6px;font-size:13px}
.nav .brand{font-weight:650;color:var(--ink);margin-right:10px;letter-spacing:-.005em;text-decoration:none}
.nav .brand{position:sticky;left:0;z-index:1;background:var(--plane);margin-right:0;padding-right:16px}   /* tabs scroll under it on phones */
.nav a{color:var(--ink2);text-decoration:none;padding:5px 10px;border-radius:6px}
.nav a:hover{background:var(--chip);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--plane)}
.nav a:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
/* ---- landing tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:8px}
.tile{display:block;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:18px 20px;text-decoration:none;color:inherit}
.tile:hover{border-color:var(--s1)}
.tile:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.tile h3{margin:0 0 12px;font-size:16px;font-weight:650}
.tile .hl{display:grid;gap:8px}
.tile .hl div{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink2)}
.tile .hl b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.tile .when{margin-top:12px;font-size:11px;color:var(--muted)}
/* ---- leads: weekly trend ---- */
.trend{display:flex;align-items:flex-end;gap:3px;height:64px;margin-top:12px;
  border-bottom:1px solid var(--baseline)}
.trend div{flex:1;background:var(--s1);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}
.trend div:hover{opacity:1}
.trendx{display:flex;gap:3px;margin-top:5px}
.trendx div{flex:1;text-align:center;font-size:10px;color:var(--muted);overflow:hidden;white-space:nowrap}
.kpi .n,td .n{font-size:11px;color:var(--muted);font-weight:400;margin-left:6px}

/* ---- P2: accessibility, freshness, sign-out ---- */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface);color:var(--ink);
  padding:8px 12px;border-radius:6px;border:1px solid var(--border);text-decoration:none;font-size:13px}
.skip:focus{left:16px}
.fresh{font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--chip);
  color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.fresh:empty{display:none}
.fresh.ok{background:rgba(12,163,12,.12);color:var(--good)}
.fresh.warn{background:rgba(250,178,25,.18);color:#8a5d00}
.fresh.stale{background:rgba(208,59,59,.14);color:var(--critical)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fresh.warn{color:var(--warn)}}
.nav .signout{margin:0 0 0 auto;padding:0}
.nav .signout button{font:inherit;font-size:13px;background:none;border:0;cursor:pointer;
  color:var(--ink2);padding:5px 10px;border-radius:6px}
.nav .signout button:hover{background:var(--chip);color:var(--ink)}
.nav .signout button:focus-visible{outline:2px solid var(--s1);outline-offset:1px}

/* ---- sign-in page ---- */
.login{max-width:380px;margin:0 auto;padding:14vh 16px 40px}
.login h1{margin:6px 0 4px}
.login .psub{margin:0 0 22px}
.login form{display:flex;flex-direction:column;gap:8px}
.login label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.login input{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px}
.login input:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
.login button{font:inherit;font-size:14px;font-weight:600;color:#fff;background:var(--s1);border:0;
  border-radius:8px;padding:10px 14px;margin-top:8px;cursor:pointer}
.login button:hover{filter:brightness(1.08)}
.login button:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.login .err{margin:2px 0 0;font-size:13px;color:var(--critical)}

/* ---- print (P2-8): the data, not the controls; always light ---- */
@media print{
  :root:not([data-theme="print"]){--plane:#fff;--surface:#fff;--ink:#0b0b0b;--ink2:#3d3c39;--muted:#6b6a66;
    --grid:#dddcd5;--baseline:#b5b4ab;--border:rgba(11,11,11,.18);--chip:rgba(11,11,11,.06)}
  body{background:#fff}
  .nav,.filters,.refresh,.skip,#export,#reset,.chips{display:none!important}
  .wrap{max-width:none;padding:0}
  section,.panel,.kpi,tr{break-inside:avoid}
  .kpis{grid-template-columns:repeat(3,1fr)!important}
  a{color:inherit;text-decoration:none}
}