/* ==========================================================================
   charts.css — progressive-enhancement chart layout (T4.13)

   The data table is always the source of truth and is present in the DOM with
   or without JavaScript. Each chart lives in a <figure class="chart-figure">
   that is hidden by default (so no-JS users never see an empty canvas); the
   small charts.js reveals it only after Chart.js has drawn into the canvas.
   Colours come entirely from the theme tokens (see tokens.css), read by
   charts.js via getComputedStyle, so charts match light and dark themes.
   ========================================================================== */

/* The canvas needs an explicit box because Chart.js runs with
   maintainAspectRatio:false so it fills its container responsively. */
.chart-box {
  height: 20rem;
  min-height: 16rem;
}

@media (max-width: 40rem) {
  .chart-box {
    height: 16rem;
    padding: var(--space-3);
  }
}

/* The canvas itself fills the padded box. */
.chart-box > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* A short caption under the chart that mirrors the table's intent. */
.chart-figure__caption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* ==========================================================================
   Scoreline heatmap theme tokens (records page) — the heatmap itself stays a
   CSS grid (see components.css / _records.html). These make the cell shading
   adapt to the light and dark themes instead of a fixed light-blue palette,
   while keeping the shaded cells legible (text contrast holds at both the
   empty and the busiest end of the scale).
   ========================================================================== */
.heatmap {
  --heat-weak: #eef2f7; /* empty / low-count cell */
  --heat-strong: #9fc3e8; /* busiest cell */
  --heat-ink: #0d2d4f; /* cell numerals */
}
html[data-theme="dark"] .heatmap {
  --heat-weak: #1b2430;
  --heat-strong: #3d6ea5;
  --heat-ink: #eaf2fb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .heatmap {
    --heat-weak: #1b2430;
    --heat-strong: #3d6ea5;
    --heat-ink: #eaf2fb;
  }
}