/* Chart system — one shared visual language across all seven domains.
 *
 * The categorical palette is deliberately NOT built from sites.accent_color.
 * Cross-posting is the network's core mechanism, and a chart whose colours
 * changed meaning when it crossed a domain boundary would undermine it. The
 * site accent is page chrome and the single-series highlight only.
 *
 * Palette validated with the dataviz skill's validate_palette.js against this
 * site's own surfaces:
 *   light (#ffffff): adjacent CVD dE 9.1 worst pair, normal-vision dE 19.6 — PASS
 *   dark  (#1a1a19): adjacent CVD dE 8.4 worst pair, normal-vision dE 19.3 — PASS
 * Three light slots (aqua, yellow, magenta) sit below 3:1 on white; the relief
 * rule applies and is satisfied — every chart ships a legend, direct labels and
 * a "view as table" toggle, so identity is never colour-alone.
 */

:root {
    --viz-series-1: #2a78d6;  /* blue    */
    --viz-series-2: #eb6834;  /* orange  */
    --viz-series-3: #1baf7a;  /* aqua    */
    --viz-series-4: #eda100;  /* yellow  */
    --viz-series-5: #e87ba4;  /* magenta */
    --viz-series-6: #008300;  /* green   */
    --viz-series-7: #4a3aa7;  /* violet  */
    --viz-series-8: #e34948;  /* red     */

    --viz-surface:    #ffffff;
    --viz-text:       #0b0b0b;
    --viz-text-2:     #52514e;
    --viz-muted:      #898781;
    --viz-grid:       #e1e0d9;
    --viz-baseline:   #c3c2b7;
    --viz-band:       rgba(42, 120, 214, 0.12);
    --viz-diverging-mid: #f0efec;

    --viz-good:     #0ca30c;
    --viz-warning:  #fab219;
    --viz-critical: #d03b3b;
}

/* Dark steps are chosen for the dark surface and validated as their own set,
   not flipped from the light ones. Scoped to an explicit theme stamp: the
   pages are light-only today, so a prefers-color-scheme rule here would put
   dark charts on a light page. */
:root[data-theme="dark"] {
    --viz-series-1: #3987e5;
    --viz-series-2: #d95926;
    --viz-series-3: #199e70;
    --viz-series-4: #c98500;
    --viz-series-5: #d55181;
    --viz-series-6: #008300;
    --viz-series-7: #9085e9;
    --viz-series-8: #e66767;

    --viz-surface:  #1a1a19;
    --viz-text:     #ffffff;
    --viz-text-2:   #c3c2b7;
    --viz-muted:    #898781;
    --viz-grid:     #2c2c2a;
    --viz-baseline: #383835;
    --viz-band:     rgba(57, 135, 229, 0.18);
    --viz-diverging-mid: #383835;
}

/* ---------------------------------------------------------------- figure */

.viz {
    margin: 0 0 2rem;
    padding: 1rem 1.15rem 0.9rem;
    background: var(--viz-surface);
    border: 1px solid rgba(11, 11, 11, 0.10);
    border-radius: 8px;
}

.viz-title {
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--viz-text);
    margin-bottom: 0.15rem;
}

.viz-subtitle {
    font-size: 0.85rem;
    color: var(--viz-text-2);
    margin-bottom: 0.6rem;
}

.viz-stale {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--viz-text-2);
    background: rgba(250, 178, 25, 0.16);
    border: 1px solid rgba(250, 178, 25, 0.5);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    margin-bottom: 0.5rem;
}

.viz-plot { position: relative; overflow-x: auto; }

.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }

.viz-source {
    font-size: 0.74rem;
    color: var(--viz-muted);
    margin: 0.55rem 0 0;
    line-height: 1.5;
}

.viz-actions { font-size: 0.74rem; margin: 0.3rem 0 0; }
.viz-actions a { color: var(--viz-text-2); }

/* ---------------------------------------------------------------- marks */

.viz-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Dots and end-markers carry a 2px ring in the surface colour so they stay
   legible where they cross a line or overlap each other. */
.viz-dot,
.viz-endpoint {
    stroke: var(--viz-surface);
    stroke-width: 2;
}

.viz-band { fill: var(--viz-band); stroke: none; }

/* A single series over a baseline: a wash, never a saturated block. */
.viz-area { fill-opacity: 0.10; stroke: none; }
.viz-area-edge { fill: none; stroke-width: 2; stroke-linejoin: round; }

/* A stacked band is the opposite case — the fill carries the value, so it is
   solid, and the 2px surface stroke is the surface gap between bands. */
.viz-area-stacked {
    fill-opacity: 0.92;
    stroke: var(--viz-surface);
    stroke-width: 2;
    stroke-linejoin: round;
}

.viz-bar, .viz-bar-foot { stroke: none; }
.viz-bar-incomplete { opacity: 0.55; }

.viz-cell { stroke: none; }
.viz-cell-null { fill: var(--viz-grid); }

.viz-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz-baseline { stroke: var(--viz-baseline); stroke-width: 1; shape-rendering: crispEdges; }

/* Text always wears text tokens, never the series colour. */
.viz-axis-label { font-size: 11px; fill: var(--viz-muted); font-variant-numeric: tabular-nums; }
.viz-axis-y { text-anchor: end; }
.viz-axis-x { text-anchor: middle; }
.viz-axis-title { font-size: 10.5px; fill: var(--viz-muted); text-anchor: start; }
.viz-cat-label { font-size: 11.5px; fill: var(--viz-text-2); text-anchor: end; }
.viz-heat-col { text-anchor: start; }
.viz-value-label { font-size: 11px; fill: var(--viz-text-2); font-weight: 600; }
.viz-annotation { font-size: 10px; fill: var(--viz-muted); text-anchor: middle; font-style: italic; }
.viz-empty-text { font-size: 13px; fill: var(--viz-muted); text-anchor: middle; }

/* ---------------------------------------------------------------- legend */

.viz-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    padding: 0;
    margin: 0 0 0.6rem;
    font-size: 0.79rem;
    color: var(--viz-text-2);
}

.viz-legend li { display: flex; align-items: center; gap: 0.35rem; }

.viz-swatch {
    width: 11px; height: 11px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.viz-ramp {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.74rem; color: var(--viz-muted);
    margin-bottom: 0.6rem;
}
.viz-ramp-bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; flex: 0 1 220px; }
.viz-ramp-bar i { flex: 1 1 auto; }

/* ---------------------------------------------------------------- hover */

.viz-hit { fill: transparent; cursor: crosshair; }
.viz-crosshair { stroke: var(--viz-baseline); stroke-width: 1; pointer-events: none; }

.viz-tooltip {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    background: var(--viz-surface);
    border: 1px solid rgba(11, 11, 11, 0.14);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
    color: var(--viz-text);
    min-width: 120px;
}

.viz-tooltip-x { font-weight: 650; margin-bottom: 0.25rem; display: block; }
.viz-tooltip-row { display: flex; align-items: center; gap: 0.4rem; justify-content: space-between; }
.viz-tooltip-key { display: flex; align-items: center; gap: 0.35rem; color: var(--viz-text-2); }
.viz-tooltip-val { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------------------------------------------------------------- table */

.viz-table { margin-top: 0.6rem; font-size: 0.8rem; }
.viz-table summary { cursor: pointer; color: var(--viz-text-2); font-size: 0.78rem; }
.viz-data-table { margin-top: 0.5rem; }
.viz-data-table td, .viz-data-table th { font-variant-numeric: tabular-nums; }
.viz-table-wrap { overflow-x: auto; max-height: 420px; }

/* ---------------------------------------------------------------- stat tiles */

.viz-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.viz-stat {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.75rem 0.85rem;
    background: var(--viz-surface);
    border: 1px solid rgba(11, 11, 11, 0.10);
    border-radius: 8px;
}

.viz-stat-label { font-size: 0.76rem; color: var(--viz-text-2); }
.viz-stat-value { font-size: 1.55rem; font-weight: 650; color: var(--viz-text); line-height: 1.15; }
.viz-stat-unit  { font-size: 0.72rem; color: var(--viz-muted); }
.viz-stat-note  { font-size: 0.7rem; color: var(--viz-muted); margin-top: 0.2rem; }
.viz-stat-delta { font-size: 0.76rem; font-weight: 600; }
.viz-stat-period { font-weight: 400; color: var(--viz-muted); }
.viz-delta-good { color: var(--viz-good); }
.viz-delta-bad  { color: var(--viz-critical); }
.viz-delta-flat { color: var(--viz-muted); }

.viz-hero {
    font-size: 3rem;
    font-weight: 650;
    line-height: 1.05;
    color: var(--viz-text);
}

.viz-sparkline { width: 100%; height: 30px; margin-top: 0.3rem; }
.viz-sparkline polyline { fill: none; stroke: var(--viz-muted); stroke-width: 1.5; }
.viz-sparkline circle { fill: var(--site-accent); }

/* ---------------------------------------------------------------- small multiples */

.viz-multiples {
    display: grid;
    grid-template-columns: repeat(var(--viz-cols, 3), minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

@media (max-width: 900px) { .viz-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .viz-multiples { grid-template-columns: 1fr; } }

.viz-panel-title { font-size: 0.88rem; font-weight: 650; margin: 0 0 0.05rem; color: var(--viz-text); }
.viz-panel-subtitle { font-size: 0.74rem; color: var(--viz-text-2); margin: 0 0 0.3rem; }

/* Texture is the backup identity channel where hue fails. */
@media (forced-colors: active) {
    .viz-bar, .viz-area, .viz-cell { forced-color-adjust: none; }
}

@media print {
    .viz-table[open] summary { display: none; }
    .viz { break-inside: avoid; }
}