/* ============================================================
   Savant — Charts
   Categorical core: purple, teal, amber (CVD-validated, ΔE > 13).
   Green / red are status only (waterfall up/down). Heat map is a
   sequential purple ramp. Steps brighten on dark, darken on light.
   ============================================================ */
:root {
  --chart-1: var(--purple-400);
  --chart-2: var(--teal-500);
  --chart-3: var(--amber-600);
  --chart-pos: var(--green-500);
  --chart-neg: var(--red-400);
  --chart-seq: var(--purple-500);
  --chart-grid: var(--border-hairline);
  --chart-ink: var(--text-muted);
}
:root[data-theme="light"] {
  --chart-1: var(--purple-600);
  --chart-2: var(--teal-600);
  --chart-3: var(--amber-700);
  --chart-pos: var(--green-600);
  --chart-neg: var(--red-600);
  --chart-seq: var(--purple-600);
}

/* Charts render at their natural size and the demo card hugs them, so there is
   no empty gap on the right and no zooming the SVG up to fill the width. */
.sv-chart { width: 560px; max-width: 100%; }
.sv-chart--radial { width: 300px; max-width: 100%; }
.sv-chart--gauge  { width: 320px; max-width: 100%; }
.sv-chart--spark  { width: max-content; max-width: 100%; }
.sv-chart--spark svg { width: 150px; }
.sv-demo--chart { width: max-content; max-width: 100%; }
.sv-chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.sv-chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.sv-chart .ax { fill: var(--chart-ink); font-size: 11px; }
.sv-chart .val { fill: var(--text-secondary); font-size: 11px; font-weight: 600; }
.sv-chart .mark { transition: opacity .12s ease; }
.sv-chart .mark:hover { opacity: .82; }
.sv-chart__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 16px; }

/* Custom hover tooltip for chart marks */
.sv-charttip {
  position: fixed; z-index: 100; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 7px 11px; border-radius: 9px; white-space: nowrap;
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  color: var(--text-primary); font: 600 12px/1.35 var(--font-sans);
  box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity .12s ease;
}
.sv-charttip.is-shown { opacity: 1; }
.sv-chart__legend span { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--font-sans); color: var(--text-secondary); }
.sv-chart__legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }