/* ═══════════════════════════════════════════════════════════════════════════
   CHARTS — shell styling for every canvas chart on the site.

   Used by: about.html (platform growth), routine_overview.html (per-routine
   completions). The renderers themselves are in static/js/charts.js.

   Link it from a page's {% block extra_head %}; it is not loaded globally
   because only chart pages need it.
   ═══════════════════════════════════════════════════════════════════════ */

/* Grain selector: Daily / Weekly / Monthly / Cumulative */
.grain-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 18px;
}
.grain-tab {
  flex: 1; text-align: center;
  padding: 6px 14px; font-size: 0.83rem; font-weight: 600;
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; cursor: pointer; color: #aaa;
  font-family: inherit; white-space: nowrap;
}
.grain-tab.active { color: #2b7a3e; border-bottom-color: #2b7a3e; }
.grain-tab:hover:not(.active) { color: #555; }

/* The canvas is sized in JS from this wrapper's width, so the wrapper is what
   constrains the chart; it scrolls rather than squashing on narrow screens. */
.stat-canvas-wrap { overflow-x: auto; }
.stat-canvas-wrap canvas { display: block; max-width: 100%; }

/* Caption under a chart, saying what the y-axis counts. */
.chart-caption {
  font-size: 0.76rem; color: #aaa; text-align: center;
  margin: 10px 0 0; line-height: 1.45;
}

@media (max-width: 480px) {
  .grain-tab { padding: 6px 4px; font-size: 0.78rem; }
}