/* ════════════════════════════════════════════════════════════════════
   CLICKFQ CHARTS — reusable, accessible data-viz component system
   Palette validated for CVD + contrast (dataviz six-checks, light & dark).
   Marks: thin, 4px rounded data-ends anchored to baseline, recessive grid,
   text wears ink tokens (never the series color), status = icon + label.
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* categorical (fixed order — assign by entity, never cycle/rank) */
  --cfqc-1:#1D4ED8; --cfqc-2:#15803D; --cfqc-3:#9333EA; --cfqc-4:#B45309;
  /* single-series + status */
  --cfqc-grow:#15803D; --cfqc-base:#94A3B8; --cfqc-neg:#B91C1C;
  /* surfaces + ink */
  --cfqc-surface:#ffffff; --cfqc-grid:#EAECEF;
  --cfqc-ink:#0B0B0E; --cfqc-muted:#616E80;
}
.cfqc-dark{
  --cfqc-1:#3B82F6; --cfqc-2:#16A34A; --cfqc-3:#A855F7; --cfqc-4:#D97706;
  --cfqc-grow:#22C55E; --cfqc-base:#64748B; --cfqc-neg:#F87171;
  --cfqc-surface:#0B1E38; --cfqc-grid:rgba(255,255,255,.10);
  --cfqc-ink:#ffffff; --cfqc-muted:rgba(255,255,255,.62);
}
.cfqc{ font-family:var(--font-body,Inter,system-ui,sans-serif); color:var(--cfqc-ink); }
.cfqc figure{ margin:0; }
.cfqc-title{ font-family:var(--font-display,'Bricolage Grotesque',sans-serif); font-weight:700; font-size:14px; letter-spacing:-.01em; color:var(--cfqc-ink); margin:0 0 2px; }
.cfqc-cap{ font-family:var(--font-mono,'Geist Mono',monospace); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--cfqc-muted); }
.cfqc-num{ font-variant-numeric:tabular-nums; }

/* ── 1. STAT TILE (a headline number is not a chart) ─────────────── */
.cfqc-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--cfqc-grid); border:1px solid var(--cfqc-grid); border-radius:14px; overflow:hidden; }
.cfqc-stat{ background:var(--cfqc-surface); padding:20px 22px; }
.cfqc-stat__val{ font-family:var(--font-display,'Bricolage Grotesque',sans-serif); font-weight:800; font-size:clamp(28px,3.4vw,40px); line-height:1; letter-spacing:-.02em; color:var(--cfqc-ink); font-variant-numeric:tabular-nums; }
.cfqc-stat__lbl{ font-family:var(--font-mono,'Geist Mono',monospace); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cfqc-muted); margin-top:8px; }
.cfqc-delta{ display:inline-flex; align-items:center; gap:4px; margin-top:10px; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; font-variant-numeric:tabular-nums; }
.cfqc-delta--up{ color:#0e5b27; background:rgba(21,128,61,.12); }
.cfqc-delta--down{ color:#7f1d1d; background:rgba(185,28,28,.12); }
.cfqc-delta svg{ width:11px; height:11px; }

/* ── 2. COMPARISON BARS (before → after, single measure) ─────────── */
.cfqc-cmp{ display:flex; flex-direction:column; gap:14px; }
.cfqc-cmp__row{ display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:12px; }
.cfqc-cmp__key{ font-size:12px; color:var(--cfqc-muted); }
.cfqc-cmp__track{ height:14px; background:var(--cfqc-grid); border-radius:7px; overflow:hidden; }
.cfqc-cmp__fill{ height:100%; width:var(--v,50%); border-radius:7px; }
.cfqc-cmp__fill--base{ background:var(--cfqc-base); }
.cfqc-cmp__fill--grow{ background:var(--cfqc-grow); }
.cfqc-cmp__val{ font-size:13px; font-weight:700; color:var(--cfqc-ink); font-variant-numeric:tabular-nums; min-width:56px; text-align:right; }

/* ── 3. VERTICAL BARS (magnitude over a few categories/time) ─────── */
.cfqc-bars{ position:relative; display:flex; align-items:flex-end; gap:14px; height:150px; padding-top:20px; border-bottom:1.5px solid var(--cfqc-grid); }
.cfqc-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.cfqc-bar__col{ width:100%; max-width:44px; height:var(--v,40%); background:var(--cfqc-grow); border-radius:4px 4px 0 0; transition:height .6s cubic-bezier(.2,.7,.2,1); }
.cfqc-bar__val{ font-size:12px; font-weight:700; color:var(--cfqc-ink); margin-bottom:6px; font-variant-numeric:tabular-nums; }
.cfqc-bar__lbl{ font-family:var(--font-mono,'Geist Mono',monospace); font-size:10px; letter-spacing:.04em; color:var(--cfqc-muted); margin-top:8px; }

/* ── 4. TREND (compounding line + area, single series) ───────────── */
.cfqc-trend{ width:100%; height:auto; display:block; }
.cfqc-trend .area{ fill:var(--cfqc-grow); opacity:.10; }
.cfqc-trend .line{ fill:none; stroke:var(--cfqc-grow); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cfqc-trend .dot{ fill:var(--cfqc-surface); stroke:var(--cfqc-grow); stroke-width:2.5; }
.cfqc-trend .base{ stroke:var(--cfqc-grid); stroke-width:1.5; }
.cfqc-trend .lbl{ font-family:var(--font-mono,'Geist Mono',monospace); font-size:11px; fill:var(--cfqc-muted); }

@media (prefers-reduced-motion: reduce){ .cfqc-bar__col{ transition:none; } }