/* ============================================================
   CHART STYLING
   Type and motion for the SVG charts. Colour lives in the data
   ramp in brand/colorado.css; nothing here names a hue.

   Font sizes come from the chart's virtual coordinate space (a
   1000-unit-wide viewBox), so they are set in charts.js as
   attributes and inherited here — a px value in this file would
   not scale with the stage.
   ============================================================ */

figure.chart {
  display: block;
  position: relative;
  margin: 0;
  width: 100%;
  /* Every chart needs a height from its slide. This is the floor so a
     figure with no height still renders instead of collapsing to zero
     and silently skipping the draw. */
  min-height: 12cqh;
  color: inherit;
}
figure.chart > script { display: none; }

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

/* ---------- type ---------- */
.ch-label {
  font-family: var(--brand-f-body);
  font-weight: 400;
  fill: var(--ink-mute, #8A8A8A);
  font-variant-numeric: tabular-nums;
}
.ch-cat {
  font-family: var(--brand-f-body);
  font-weight: 600;
  fill: var(--ink-soft, currentColor);
}
.ch-value {
  font-family: var(--brand-f-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  fill: var(--ink, currentColor);
  font-variant-numeric: tabular-nums;
}
.ch-donut-mid {
  font-family: var(--brand-f-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  fill: var(--ink, currentColor);
  font-variant-numeric: tabular-nums;
}
/* Spotlight line charts (cfg.hero): the hero names itself in bold
   brand type, the context lines in quiet mono. */
.ch-hero {
  font-family: var(--brand-f-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  fill: var(--gold-deep, currentColor);
}
.ch-mono {
  font-family: var(--brand-f-mono);
  font-weight: 500;
  fill: var(--ink-soft, currentColor);
}
.ch-mono--note { font-weight: 400; letter-spacing: 0.08em; fill: var(--ink-mute, currentColor); }
.ch-legend text { font-family: var(--brand-f-body); font-weight: 600; fill: var(--ink-soft, currentColor); }

/* ---------- axes ---------- */
.ch-grid { stroke: currentColor; stroke-width: 1; opacity: 0.14; }
.ch-axis { stroke: currentColor; stroke-width: 2; opacity: 0.34; }

/* ---------- motion ----------
   Same contract as the slide motion layer: the VISIBLE state is the
   base style, and every animation runs `backwards` from hidden. A
   chart that never gets its animation still paints, finished — which
   is what print and reduced-motion rely on. */
@keyframes ch-rise   { from { transform: scaleY(0); }        to { transform: scaleY(1); } }
@keyframes ch-grow   { from { transform: scaleX(0); }        to { transform: scaleX(1); } }
@keyframes ch-grow-y { from { transform: scaleY(0); }        to { transform: scaleY(1); } }
@keyframes ch-fade   { from { opacity: 0; }                  to { opacity: 1; } }
@keyframes ch-pop    { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes ch-draw   { from { stroke-dashoffset: var(--len, 1000); } to { stroke-dashoffset: 0; } }

.ch-rise   { animation: ch-rise   .78s cubic-bezier(.2,.7,.2,1) backwards; }
.ch-grow   { animation: ch-grow   .78s cubic-bezier(.2,.7,.2,1) backwards; }
.ch-grow-y { animation: ch-grow-y .70s cubic-bezier(.2,.7,.2,1) backwards; }
.ch-fade   { animation: ch-fade   .60s ease backwards; }
.ch-pop    { animation: ch-pop    .58s cubic-bezier(.2,.7,.2,1) backwards; transform-box: fill-box; transform-origin: center; }
.ch-draw   { animation: ch-draw   1.4s cubic-bezier(.6,0,.4,1) backwards; }

/* ch-pop on donut and gauge wedges rotates around the centre of the
   chart, not the wedge, so those set transform-origin inline and must
   not be overridden by the fill-box rule above. */
.ch-svg > g > path.ch-pop,
.ch-svg > path.ch-pop { transform-box: view-box; }

@media (prefers-reduced-motion: reduce) {
  .ch-rise, .ch-grow, .ch-grow-y, .ch-fade, .ch-pop, .ch-draw {
    animation: ch-fade .01s backwards !important;
    stroke-dashoffset: 0 !important;
  }
}

@media print {
  .ch-rise, .ch-grow, .ch-grow-y, .ch-fade, .ch-pop, .ch-draw {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}