/* Shared chart grammar (Phase 2.8) -- the CSS half of charts.js.
 *
 * Linked by the two pages that draw the statewide revenue stack and the
 * rate-vs-enrollment decomposition (index.html, statewide.html). It is a
 * SEPARATE stylesheet rather than part of app.css on purpose: `.legend` and
 * `.dot` are generic names that other views (drill-down) already define
 * differently for their own components, and folding these rules into the
 * sitewide sheet would leak `display:flex` and friends into them. Loading it
 * only where the charts live keeps the extraction honest -- one definition,
 * scoped to its actual users.
 *
 * Tokens for the two decomposition series live here too, since both callers of
 * renderDecomp need them. The composition-chart slots (--series-foundation and
 * friends) stay inline on statewide.html: that chart is not shared.
 */

:root {
  --series-rate: var(--cat-1);
  --series-adm: var(--cat-2);
}
@media (prefers-color-scheme: dark) {
  :root {
    --series-rate: var(--cat-1);
    --series-adm: var(--cat-2);
  }
}

.chart-card {
  background: var(--surface-1); border: 1px solid var(--gridline);
  border-radius: 12px; padding: 20px 20px 14px; margin: 0 0 26px;
}
.chart-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.chart-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
.axis text { fill: var(--text-muted); font-size: 11px; }
.axis line, .axis path { stroke: var(--gridline); }
.baseline { stroke: var(--baseline-axis, #c3c2b7); }
.area-band { stroke: var(--surface-1); stroke-width: 1.5; }  /* 2px surface gap between fills */
.series-line { fill: none; stroke-width: 2; }
.dot { stroke: var(--surface-1); stroke-width: 2; }
.direct-label { font-size: 11px; font-weight: 600; }
.crosshair { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 12px 2px 0; font-size: 12.5px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 10; opacity: 0;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 11px; font-size: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14); max-width: 260px;
}
.tooltip .tt-year { font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.tooltip .tt-row .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tooltip .tt-row .tt-val { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-primary); padding-left: 12px; }
.tooltip .tt-total { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--gridline); font-weight: 600; }