/* Chart styles. Paired with src/js/components/charts.js — see the rule block at
   the top of that file. Everything here resolves through theme tokens, so
   charts recolor with the active appearance and never hardcode a hue.

   Fill and stroke COLORS are set by the builder (each is a --series-* / --seq-*
   var chosen per series), so the rules below carry geometry and behavior only.

   Plots sit on --chart-surface rather than --surface: for most themes the two
   are identical, but Windows 2000 needs a white plate because no categorical
   palette can clear the contrast floor on its silver face. */

.chart {
  position: relative;
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
}

.chart-plot {
  width: 100%;
  background: var(--chart-surface);
}

.chart-plot svg { display: block; overflow: visible; }

/* ── Axes & grid ──────────────────────────────────────────────
   Recessive by design: hairline, solid, one step off the surface.
   Never dashed — dashing reads as "projection" or "threshold"
   when it is only a grid. */

.chart-grid {
  stroke: var(--border-light);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

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

/* Axis ticks stack in a column, so tabular figures are right here (unlike
   headline values, which take proportional figures). */
.chart-axis {
  fill: var(--text-dim);
  font-size: 10px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

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

.chart-bar,
.chart-slice,
.chart-band {
  transition: opacity var(--speed);
  outline: none;
}

.chart-bar:hover,   .chart-bar.is-active,
.chart-slice:hover, .chart-slice.is-active,
.chart-band:hover,  .chart-band.is-active { opacity: 0.82; }

.chart-bar:focus-visible,
.chart-slice:focus-visible,
.chart-band:focus-visible {
  stroke: var(--text);
  stroke-width: 2;
}

.chart-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* An area is a wash under its line, never a saturated block. */
.chart-area { stroke: none; opacity: 0.10; }

.chart-connector {
  stroke: var(--border);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart-needle     { stroke: var(--text); stroke-linecap: round; }
.chart-needle-hub { fill: var(--text); }

/* Invisible oversized hit target for line charts — the visible dot is 8px,
   the region you have to hit is much larger. */
.chart-hit { fill: transparent; outline: none; }
.chart-hit:focus-visible { fill: var(--hover); }

/* ── Direct labels ────────────────────────────────────────────
   Selective by construction (the builder labels only the extreme,
   and only when the text fits). Text wears an ink token, never
   the series color. */

.chart-value {
  fill: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
}

.chart-donut-total {
  fill: var(--text);
  font-size: 19px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: -0.02em;
}

.chart-donut-cap {
  fill: var(--text-dim);
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chart-gauge-value {
  fill: var(--text);
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: -0.02em;
}

/* ── Legend ───────────────────────────────────────────────────
   Present whenever there are ≥2 series — the dependable identity
   channel, so a reader never has to match colors from memory.
   A single series gets none; the card title already names it. */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 2px 0;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-legend-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-caption {
  font-size: 11px;
  color: var(--text-dim);
  padding-top: 6px;
}

.chart-figure { display: flex; flex-direction: column; min-width: 0; }

/* ── Stacked panels ───────────────────────────────────────────
   Two measures in different units, each with its own single axis,
   one above the other. The house alternative to a dual-axis plot. */

.chart-panels { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.chart-panel { min-width: 0; }

.chart-panel-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 2px;
}

/* ── Progress meter ───────────────────────────────────────────
   The track is a lighter step of the fill's own ramp, so state
   reads across the whole bar and not only where it is filled. */

.chart-meter { display: flex; flex-direction: column; gap: 7px; }

.chart-meter-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--seq-1);
  overflow: hidden;
}

.chart-meter-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--seq-3);
  transition: width var(--speed) ease;
}

/* Goal beaten — a full-width pass in the strongest step, so overshoot reads
   without the bar having to grow past its own track. */
.chart-meter-over {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--seq-4);
}

.chart-meter-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.chart-meter-pct {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.chart-meter-of { font-size: 11px; color: var(--text-dim); }

/* ── Tooltip ──────────────────────────────────────────────────
   Enhances, never gates: every value is also reachable from the
   axis, a direct label, or the legend, and keyboard focus shows
   exactly what hover shows. */

.chart-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: var(--radius-control);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: var(--shadow-pop);
}

.chart-tip[hidden] { display: none; }
.chart-tip .chart-tip-sub { display: block; font-weight: 400; opacity: 0.8; font-size: 10px; }

.chart-empty {
  padding: 26px 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .chart-bar, .chart-slice, .chart-band, .chart-meter-fill { transition: none; }
}