/* ==========================================================================
   Chart tokens and chrome
   --------------------------------------------------------------------------
   Categorical slots are the validated default order (blue, orange, aqua,
   yellow, magenta). Both modes were checked with the palette validator against
   this app's own surfaces (#FFFFFF light, #171A20 dark):

     light  CVD worst adjacent dE 9.1  |  normal-vision worst 19.6  |  PASS
     dark   CVD worst adjacent dE 8.4  |  normal-vision worst 19.3  |  PASS

   Light mode raises a contrast warning on aqua, yellow and magenta against
   white, so every chart that uses them ships the table view underneath as
   relief. Identity is never carried by colour alone.
   ========================================================================== */

.viz{
  --viz-surface:#FFFFFF;
  --viz-grid:#E7E9E3;
  --viz-axis:#B9BEB2;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4;
  --viz-seq:#2a78d6;
  --viz-good:#206B4C;
  --viz-bad:#B3261E;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .viz{
    --viz-surface:#171A20;
    --viz-grid:#252A33;
    --viz-axis:#454C58;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
    --viz-seq:#3987e5;
    --viz-good:#63BE93;
    --viz-bad:#F2B8B5;
  }
}
:root[data-theme="dark"] .viz{
  --viz-surface:#171A20;
  --viz-grid:#252A33;
  --viz-axis:#454C58;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
  --viz-seq:#3987e5;
  --viz-good:#63BE93;
  --viz-bad:#F2B8B5;
}

.viz{display:flex;flex-direction:column;gap:12px}
.viz__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.viz__title{font-family:var(--cond);font-weight:700;font-size:17px;margin:0}
.viz__sub{font-size:13px;color:var(--muted);margin:0;max-width:70ch}
.viz__plot{width:100%;height:auto;display:block;overflow:visible}

/* Recessive chrome: the data is the ink, the frame is not. */
.viz__grid{stroke:var(--viz-grid);stroke-width:1}
.viz__axis{stroke:var(--viz-axis);stroke-width:1}
.viz__tick{font-family:var(--mono);font-size:9px;fill:var(--muted);letter-spacing:.06em}
.viz__label{font-family:var(--mono);font-size:9.5px;fill:var(--ink-2);letter-spacing:.06em}

/* 2px lines, >=8px markers. */
.viz__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz__marker{r:4}
.viz__threshold{stroke:var(--signal);stroke-width:1.5;stroke-dasharray:4 4;fill:none}

/* A 2px surface gap between stacked segments and adjacent bars keeps the
   boundaries readable without a stroke. */
.viz__bar{stroke:var(--viz-surface);stroke-width:2}

.viz__legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.viz__key{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);text-transform:uppercase;font-size:10px;
  letter-spacing:.1em;color:var(--ink-2);
}
.viz__swatch{width:10px;height:10px;border-radius:2px;display:inline-block;flex:0 0 auto}

.viz__table{font-size:13px;width:100%;border-collapse:collapse;margin-top:4px}
.viz__table th,.viz__table td{
  text-align:right;padding:5px 8px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
}
.viz__table th:first-child,.viz__table td:first-child{text-align:left}
.viz__table th{color:var(--muted);text-transform:uppercase;font-weight:500}
.viz__details summary{
  font-family:var(--mono);text-transform:uppercase;font-size:10px;letter-spacing:.1em;
  color:var(--muted);cursor:pointer;
}
.viz__scroll{overflow-x:auto}

/* KPI row */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:13px 15px 11px}
.kpi__n{font-family:var(--mono);font-size:26px;line-height:1.1;display:block;color:var(--ink)}
.kpi__label{
  font-family:var(--mono);text-transform:uppercase;font-size:10px;letter-spacing:.1em;
  color:var(--muted);display:block;margin-top:4px;
}
.kpi__note{font-size:12px;color:var(--muted);display:block;margin-top:6px;line-height:1.4}
.kpi--good .kpi__n{color:var(--good)}
.kpi--bad .kpi__n{color:var(--signal)}

/* The hero figure a dashboard leads with. */
.hero-figure{font-family:var(--mono);font-size:52px;line-height:1;color:var(--ink);display:block}
.hero-figure--over{color:var(--signal)}

/* Fill and swatch classes. Under CSP (style-src 'self') a style attribute is
   blocked, so a datum's colour is carried by a class rather than by
   style="background:...". SVG fill= is a presentation attribute, not CSS, but
   the classes keep both surfaces reading from the same tokens. */
.viz__fill--s1{fill:var(--s1)} .viz__fill--s2{fill:var(--s2)}
.viz__fill--s3{fill:var(--s3)} .viz__fill--s4{fill:var(--s4)}
.viz__fill--s5{fill:var(--s5)}
.viz__swatch--s1{background:var(--s1)} .viz__swatch--s2{background:var(--s2)}
.viz__swatch--s3{background:var(--s3)} .viz__swatch--s4{background:var(--s4)}
.viz__swatch--s5{background:var(--s5)}
.viz__track{fill:var(--viz-grid)}
/* One hue for a single-series chart: the category is already named in the
   row label, so colour carries no identity and needs no CVD separation. */
.viz__fill--brand{fill:var(--brand-blue)}
.viz__value{font-family:var(--mono);font-size:10px;fill:var(--ink-2);letter-spacing:.06em}
.viz__fill--seq{fill:var(--viz-seq)}
.viz__stroke--seq{stroke:var(--viz-seq)}
.viz__stroke--surface{stroke:var(--viz-surface)}
.viz__table .cell--wrap{text-align:left;max-width:420px;white-space:normal}