/* Shared look for the /viz/ Plot charts (ON-342). Loaded by absolute path: /viz/lib/vizstyle.css.
   Everything is scoped under .viz; the colour tokens are also set on .figplot, so build-time article figures can import this file and match. The site is light unless :root[data-theme='dark'] (there is no
   prefers-color-scheme switch, matching site/src/styles/global.css).
   Series colours follow the site's --fig-* palette, snapped where the dataviz validator failed
   them. Both sets pass lightness, chroma, CVD, normal-vision and contrast checks against the site
   paper (#f2efe8 light, #12110e dark). Order is fixed: s1..s5; a 6th series folds into "Other".
   The link accent and the currency colour are not used for series. */
.viz, .figplot {
  --vz-surface: #f2efe8;
  --vz-ink: #0d0d0f;
  --vz-ink2: #55534e;
  --vz-muted: #8d8779;
  --vz-grid: #d8d2c6;
  --vz-axis: #55534e;
  --vz-ref: #8d8779;
  --vz-band: #0b5c8a;
  --vz-s1: #0b5c8a;
  --vz-s2: #c8102e;
  --vz-s3: #008573;
  --vz-s4: #7a4c9b;
  --vz-s5: #4d7a12;
  --vz-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vz-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
:root[data-theme='dark'] .viz, :root[data-theme='dark'] .figplot {
  --vz-surface: #12110e;
  --vz-ink: #ece8df;
  --vz-ink2: #a09a8c;
  --vz-muted: #7d776a;
  --vz-grid: #2b2823;
  --vz-axis: #a09a8c;
  --vz-ref: #7d776a;
  --vz-band: #3e97cf;
  --vz-s1: #3e97cf;
  --vz-s2: #e0505f;
  --vz-s3: #24a291;
  --vz-s4: #9d74c2;
  --vz-s5: #6b9e33;
}

/* Chart box. Plot's own SVG inherits type from here. */
.viz .vz-chart { font: 12px/1.35 var(--vz-font); color: var(--vz-ink2); max-width: 100%; }
.viz .vz-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.viz .vz-chart text { font-variant-numeric: tabular-nums; }

/* Recessive grid and axes. Plot labels its grid and axis groups with aria-label. */
.viz .vz-chart g[aria-label$='grid'] { stroke: var(--vz-grid); stroke-opacity: 1; }
.viz .vz-chart g[aria-label$='tick'] { stroke: var(--vz-axis); }
.viz .vz-chart g[aria-label$='tick label'], .viz .vz-chart g[aria-label$='axis label'] { fill: var(--vz-ink2); }

/* Series highlight: hovering one series (a group or a single node with a vz-s-* class) dims the rest. */
.viz [class*='vz-s-'] { transition: opacity 120ms ease-out; }
.viz .vz-hl [class*='vz-s-'].vz-dim { opacity: 0.18; }
.viz .vz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 2px; font: 13px/1.3 var(--vz-font); color: var(--vz-ink2); }
.viz .vz-legend button { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 2px; min-height: 24px; border-radius: 4px; }
.viz .vz-legend button:focus-visible { outline: 2px solid var(--vz-ink2); outline-offset: 2px; }
.viz .vz-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.viz .vz-legend.vz-hl button.vz-dim { opacity: 0.45; }

/* Call-outs: text in ink, never the series colour, with a surface halo so it reads over marks. */
.viz .vz-callout text, .viz text.vz-callout { fill: var(--vz-ink); font: 500 12px var(--vz-font); paint-order: stroke; stroke: var(--vz-surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.viz .vz-callout-ring circle, .viz circle.vz-callout-ring { fill: none; stroke: var(--vz-ink); stroke-width: 1.5px; pointer-events: none; }
.viz line.vz-callout-leader { stroke: var(--vz-ink2); stroke-width: 1px; pointer-events: none; }

/* Range bands: a light wash with thin edges, drawn behind the marks. */
.viz .vz-band path, .viz .vz-band rect { fill: var(--vz-band); fill-opacity: 0.12; stroke: none; }
.viz .vz-band-edge path { stroke: var(--vz-band); stroke-opacity: 0.55; stroke-width: 1px; fill: none; }
.viz .vz-range line, .viz .vz-range path { stroke-width: 2px; stroke-linecap: round; }

@media (max-width: 420px) {
  .viz .vz-chart { font-size: 11px; }
  .viz .vz-callout text, .viz text.vz-callout { font-size: 11px; }
  .viz .vz-legend { font-size: 12px; gap: 2px 10px; }
}
@media (prefers-reduced-motion: reduce) { .viz [class*='vz-s-'] { transition: none; } }