:root {
  color-scheme: light;
  --surface-1:#fcfcfb; --page:#f9f9f7;
  --ink-1:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,0.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --seq:#2a78d6; --warnbg:#fdf6e7; --warnbd:#eda100;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1:#1a1a19; --page:#0d0d0d;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
    --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,0.10);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --seq:#3987e5; --warnbg:#2a2416; --warnbd:#c98500;
  }
}
* { box-sizing:border-box; margin:0; }
body { background:var(--page); color:var(--ink-1);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; padding:20px; }
.wrap { max-width:1100px; margin:0 auto; }
h1 { font-size:20px; font-weight:650; }
h2 { font-size:15px; font-weight:600; margin-bottom:10px; }
.sub { color:var(--ink-2); margin:2px 0 14px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.filter { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.filter label { font-size:12px; color:var(--ink-2); }
select { background:var(--surface-1); color:var(--ink-1); border:1px solid var(--axis);
  border-radius:8px; padding:6px 10px; font:13px system-ui,-apple-system,"Segoe UI",sans-serif; }
.banner { background:var(--warnbg); border:1px solid var(--warnbd); border-radius:8px;
  padding:10px 14px; margin-bottom:16px; color:var(--ink-1); font-size:13px; }
.banner b { font-weight:650; }
.card { background:var(--surface-1); border:1px solid var(--ring); border-radius:10px;
  padding:16px; margin-bottom:16px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:16px; }
.kpi { background:var(--surface-1); border:1px solid var(--ring); border-radius:10px; padding:12px 14px; }
.kpi .v { font-size:24px; font-weight:650; margin:2px 0; }
.kpi .l { font-size:12px; color:var(--ink-2); }
.kpi .n { font-size:11px; color:var(--ink-3); }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-bottom:8px; }
.legend span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:3px;
  margin-right:5px; background:var(--c); vertical-align:-1px; }
svg text { font:11px system-ui,-apple-system,"Segoe UI",sans-serif; fill:var(--ink-3); }
svg .val { fill:var(--ink-2); font-variant-numeric:tabular-nums; }
svg .cat { fill:var(--ink-1); font-size:12px; }
.bar-row { cursor:pointer; }
.bar-row:hover rect.data { opacity:.85; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--ink-2); font-weight:600; border-bottom:1px solid var(--axis); padding:6px 8px; }
td { padding:6px 8px; border-bottom:1px solid var(--grid); font-variant-numeric:tabular-nums; }
td.r, th.r { text-align:right; }
tr.click { cursor:pointer; } tr.click:hover { background:var(--grid); }
details { margin-top:10px; } summary { cursor:pointer; color:var(--ink-2); font-size:12px; }
.crumb { margin-bottom:12px; font-size:13px; }
.crumb a { color:var(--s1); cursor:pointer; text-decoration:none; }
.crumb a:hover { text-decoration:underline; }
#tip { position:fixed; pointer-events:none; background:var(--surface-1); border:1px solid var(--ring);
  border-radius:8px; padding:8px 10px; font-size:12px; box-shadow:0 2px 10px rgba(0,0,0,.15);
  display:none; z-index:10; max-width:260px; }
#tip b { display:block; margin-bottom:2px; }
.note { font-size:12px; color:var(--ink-3); margin-top:8px; }
.defs li { margin-bottom:6px; color:var(--ink-2); font-size:13px; }
.chartbox { overflow-x:auto; }
/* Replacements for inline style attributes, which the Content Security Policy
   does not permit. Behaviour is identical to the standalone page. */
.note-gap { margin-bottom: 16px; }
a.drill { color: var(--s1); cursor: pointer; }