/* =============================================================================
   charts.css — chart containers only. Every colour a chart draws comes from
   tokens.css, read at runtime by js/charts/theme.js.

   Container heights include the x-axis band, so no card ever gets a nested
   scrollbar just to show its axis labels.
   ========================================================================== */

.chart { position: relative; width: 100%; min-width: 0; }
.chart canvas { display: block; width: 100% !important; }

.chart--lg { height: 340px; }
.chart--md { height: 300px; }
.chart--sm { height: 220px; }
.chart--donut { height: 260px; }

.donut { position: relative; display: grid; place-items: center; }
.donut__center {
  position: absolute;
  display: grid;
  justify-items: center;
  pointer-events: none;
  text-align: center;
}
.donut__center strong { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
.donut__center span { font-size: var(--fs-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; }

.stat__spark canvas { height: 54px !important; }

@media (max-width: 820px) {
  .chart--lg { height: 290px; }
  .chart--md { height: 270px; }
}