/* ========================================================================
   vc-charts.css — Chart frame, legend, canvas-height utilities, theme-aware
   helpers for the RetirePlusPlus investor module ($30M Series B).

   Phase 0 foundation (owner: FOUND-COMPONENTS). Consumes the §1 semantic
   tokens authored by FOUND-TOKENS in vc-tokens.css — NO raw hexes here.

   Charts are drawn on <canvas> by VCCharts (chart-builder.js), which reads
   the --chart-* custom properties below via getComputedStyle and re-renders
   on a `themechange` CustomEvent. This file owns the FRAME + LEGEND + the
   theme-aware vars; the JS owns the pixels.

   CSP: external CSS only, no inline style. Dynamic heights use utility
   classes (.chart-canvas-wrap--*) or el.style.setProperty('--chart-h', …).
   ======================================================================== */

/* ------------------------------------------------------------------------
   Theme-aware chart variables (consumed by VCCharts via getComputedStyle)
   ------------------------------------------------------------------------
   vc-tokens.css already defines --chart-title / --chart-label / --chart-grid
   and the --accent-* roles in both themes. We expose a chart-specific
   surface/series palette here, derived from those same semantic roles so a
   chart never hard-codes a colour and always tracks the active theme.       */
:root {
  --chart-surface:        var(--bg-surface);
  --chart-tooltip-bg:     var(--bg-elevated);
  --chart-tooltip-text:   var(--text-primary);
  --chart-tooltip-border: var(--border-strong);

  /* Series palette — semantic accents, ordered for categorical charts.
     Kept in sync with the legend swatch classes below.                      */
  --chart-series-1: var(--accent-primary);
  --chart-series-2: var(--accent-secondary);
  --chart-series-3: var(--accent-tertiary);
  --chart-series-4: var(--accent-partner);
  --chart-series-5: var(--status-info);
  --chart-series-6: var(--status-warning);

  /* Fill (area) opacity tokens so JS can build rgba-equivalent fills from
     the resolved series colour without inventing alpha inline.              */
  --chart-fill-opacity: 0.16;
  --chart-grid-opacity: 1; /* grid colour already carries its own alpha in dark */
}

/* ------------------------------------------------------------------------
   Chart card frame (.chart-card) — figure wrapper
   Structure:
     <figure class="chart-card">
       <figcaption class="chart-title">Takeaway…</figcaption>
       <div class="chart-canvas-wrap chart-canvas-wrap--md">
         <canvas role="img" aria-label="…"></canvas>
       </div>
       <figure-level visually-hidden data table>
     </figure>
   ------------------------------------------------------------------------ */
.chart-card {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
}

.chart-card > figcaption,
.chart-title {
  font-family: var(--font-data);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: var(--space-1);
}

/* Optional sub-line under the title (e.g. "Illustrative — for discussion"). */
.chart-card .chart-subtitle {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------------------
   Canvas wrapper — reserves height so there is NO layout shift before the
   chart paints (perf/CLS budget, design §10). Height set via utility class;
   default falls back to the --chart-h custom property if a page sets one.
   ------------------------------------------------------------------------ */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: var(--chart-h, 18rem);
}

.chart-canvas-wrap > canvas {
  display: block;
  width: 100% !important;   /* Chart.js sets inline px; keep it fluid */
  height: 100% !important;
  max-width: 100%;
}

/* Fixed-height utilities (no inline style="height:…") ------------------- */
.chart-canvas-wrap--xs { height: 10rem; }
.chart-canvas-wrap--sm { height: 14rem; }
.chart-canvas-wrap--md { height: 18rem; }
.chart-canvas-wrap--lg { height: 22rem; }
.chart-canvas-wrap--xl { height: 26rem; }

/* Standalone canvas-height helpers (for canvases not inside .chart-card) */
.chart-h-xs { height: 10rem; }
.chart-h-sm { height: 14rem; }
.chart-h-md { height: 18rem; }
.chart-h-lg { height: 22rem; }
.chart-h-xl { height: 26rem; }

/* ------------------------------------------------------------------------
   Legend (.chart-legend) — author legends in HTML so they print, work
   without JS, and carry meaning by text + swatch (not colour alone).
     <ul class="chart-legend">
       <li class="chart-legend-item">
         <span class="chart-swatch chart-swatch--1" aria-hidden="true"></span>
         <span class="chart-legend-label">Activated members</span>
       </li> …
     </ul>
   ------------------------------------------------------------------------ */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.chart-swatch {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  background: var(--chart-series-1);
}

/* Line/area series often want a stroke-style swatch (a bar) */
.chart-swatch--line {
  width: 1.125rem;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
}

.chart-swatch--1 { background: var(--chart-series-1); }
.chart-swatch--2 { background: var(--chart-series-2); }
.chart-swatch--3 { background: var(--chart-series-3); }
.chart-swatch--4 { background: var(--chart-series-4); }
.chart-swatch--5 { background: var(--chart-series-5); }
.chart-swatch--6 { background: var(--chart-series-6); }

/* ------------------------------------------------------------------------
   Visually-hidden data table that mirrors every chart series.
   Required text-alternative for SR + print + no-JS (design §2.7 / §6.6).
   Pages put the real <table> inside .chart-data-table; it is hidden on
   screen but revealed for print and for the no-JS / .no-js fallback.
   ------------------------------------------------------------------------ */
.chart-data-table {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* No-JS / failed-load fallback: if the page root carries .no-js, show the
   accessible table in place of the (empty) canvas frame. */
.no-js .chart-data-table {
  position: static;
  width: auto;
  height: auto;
  margin: var(--space-4) 0 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.no-js .chart-canvas-wrap { display: none; }

/* ------------------------------------------------------------------------
   Loading / empty state — shown while data hydrates (aria-busy="true").
   ------------------------------------------------------------------------ */
.chart-canvas-wrap[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background:
    linear-gradient(
      100deg,
      transparent 30%,
      color-mix(in srgb, var(--bg-surface-2) 60%, transparent) 50%,
      transparent 70%
    ),
    var(--bg-surface-2);
  background-size: 200% 100%;
  animation: vc-chart-shimmer 1.4s var(--ease-standard) infinite;
  pointer-events: none;
}

@keyframes vc-chart-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ------------------------------------------------------------------------
   Responsive — charts shrink a step on small screens so they don't dominate
   the fold; never below a usable min so they can't collapse (design §9).
   ------------------------------------------------------------------------ */
@media (max-width: 48rem) {
  .chart-card { padding: var(--space-5); }
  .chart-canvas-wrap--lg { height: 18rem; }
  .chart-canvas-wrap--xl { height: 20rem; }
}

@media (max-width: 30rem) {
  .chart-canvas-wrap { min-height: 12rem; }
}

/* ------------------------------------------------------------------------
   Reduced motion — no shimmer.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .chart-canvas-wrap[aria-busy="true"]::after {
    animation: none;
    background: var(--bg-surface-2);
  }
}

/* ------------------------------------------------------------------------
   Print — reveal the accessible data table, hide the canvas frame chrome.
   (Charts rasterise poorly; the table is the print-of-record.)
   ------------------------------------------------------------------------ */
@media print {
  .chart-card {
    box-shadow: none;
    border: 0.0625rem solid #ddd;
    page-break-inside: avoid;
  }
  .chart-data-table {
    position: static;
    width: auto;
    height: auto;
    margin: 0.5rem 0 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}