/*
 * Chart tokens and marks.
 *
 * The categorical palette below is NOT eyeballed. It was produced by running the
 * dataviz validator over brand-derived candidates until all six checks passed
 * under --pairs all (every donut segment touches every other, so adjacent-only
 * is too weak a check here):
 *
 *   lightness band · chroma floor · CVD separation · normal-vision floor ·
 *   contrast vs surface
 *
 * Light steps validated against the card surface #fffdfa, dark steps against
 * #221c17. Same three HUES in both modes, re-stepped per surface — dark mode is
 * selected, not an automatic flip, and the entity keeps its hue so a mode change
 * never repaints identity.
 *
 * Teal was the obvious third brand hue and it FAILED: teal against blue came out
 * at ΔE 13.2 normal-vision, below the hard floor of 15. Violet replaced it.
 */

:root {
  /* Categorical — identity. Assigned in FIXED ORDER, never cycled. */
  --c-cat-1: #3a7bc8;
  --c-cat-2: #c1841a;
  --c-cat-3: #9c3f8f;

  /* Sequential — magnitude. One hue, light to dark, monotone L. */
  --c-seq-1: #d4ad5e;
  --c-seq-2: #c1922e;
  --c-seq-3: #a87a14;
  --c-seq-4: #7d5a0e;

  /* Status — RESERVED. Never reused as "series 4". Always with a label. */
  --c-ok:     #3f7d3c;
  --c-info:   #2a66ab;
  --c-warn:   #c05621;
  --c-danger: #b03030;

  /* Recessive chrome. Grid and axes must never compete with the data. */
  --c-grid: rgba(36, 31, 26, .09);
  --c-axis: rgba(36, 31, 26, .28);
  --c-surface: #fffdfa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-cat-1: #5b93d6;
    --c-cat-2: #b8851e;
    --c-cat-3: #b0509e;
    --c-grid: rgba(239, 230, 215, .10);
    --c-axis: rgba(239, 230, 215, .30);
    --c-surface: #221c17;
  }
}

:root[data-theme="dark"] {
  --c-cat-1: #5b93d6;
  --c-cat-2: #b8851e;
  --c-cat-3: #b0509e;
  --c-grid: rgba(239, 230, 215, .10);
  --c-axis: rgba(239, 230, 215, .30);
  --c-surface: #221c17;
}

/* ── Figure scaffolding ──────────────────────────────────────────────────── */

.fig { margin: 0; }
.fig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.fig-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.fig-sub { font-size: 12px; color: var(--ink-soft); }
.fig-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.45; }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Legend is ALWAYS present for >= 2 series, so identity is never colour-alone. */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-mid); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ── Marks ───────────────────────────────────────────────────────────────── */

.mark-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mark-area { stroke: none; }
.mark-grid { stroke: var(--c-grid); stroke-width: 1; }
.mark-axis { stroke: var(--c-axis); stroke-width: 1; }
.mark-tick { font-size: 10.5px; fill: var(--ink-soft); }

/* Bars: 4px rounded data-end, anchored square to the baseline. */
.mark-bar { rx: 4; transition: opacity .12s ease; }
.mark-bar:hover { opacity: .82; }

/* A 2px surface ring separates overlapping/adjacent fills. */
.mark-sep { stroke: var(--c-surface); stroke-width: 2; }

.mark-dot { r: 4.5; stroke: var(--c-surface); stroke-width: 2; }

/* ── Sparkline: a KPI ornament, deliberately axis-free ───────────────────── */

.spark { width: 100%; height: 34px; display: block; }
.spark .mark-line { stroke-width: 1.8; }

/* ── Hover layer ─────────────────────────────────────────────────────────── */
/* An HTML/SVG chart IS interactive; a static one is a screenshot. Hit targets
   are wider than the marks they trigger. */

.chart-hit { fill: transparent; cursor: crosshair; }
.chart-hit:hover ~ .chart-crosshair,
.chart-hit:focus ~ .chart-crosshair { opacity: 1; }

.chart-crosshair { stroke: var(--c-axis); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }

.chart-tip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 10px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity .1s ease;
  z-index: 20;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
}
.chart-tip b { font-weight: 600; }
.chart-tip.on { opacity: 1; }

.chart-wrap { position: relative; }

/* Donut segments get a hover lift, and the centre carries the total. */
.donut-seg { transition: opacity .12s ease; cursor: default; }
.donut-seg:hover { opacity: .8; }
.donut-total { font-family: var(--serif); font-weight: 600; fill: var(--ink); }
.donut-label { font-size: 11px; fill: var(--ink-soft); }

/* Table view — the accessible fallback, and often the thing people want. */
.fig-table { margin-top: 12px; font-size: 13px; }
.fig-table summary { cursor: pointer; color: var(--gold-deep); font-size: 12.5px; }
.fig-table table { margin-top: 8px; }

@media print {
  .chart-tip { display: none; }
}