/* ============================================================
   FREESIDE CHART STYLING
   ------------------------------------------------------------
   Load after freeside.css. Works with hand-authored SVG and with
   any chart library (map these vars to its theme).

   The categorical palette below was VALIDATED, not eyeballed:
   lightness band, chroma floor, colourblind separation (deutan/
   protan/tritan), normal-vision separation and contrast-vs-surface
   all pass in BOTH light and dark. Dark steps are *selected*, not
   a flip of the light ones. Do not substitute ad-hoc hues.
   Rules of use: DESIGN_SYSTEM.md §12.
   ============================================================ */

:root{
  /* Categorical — assign in FIXED ORDER, never cycled.
     blue → orange → teal → violet → magenta → green */
  --fs-c1:#0F72B8; --fs-c2:#C2571B; --fs-c3:#009B8A;
  --fs-c4:#6C5CE0; --fs-c5:#B3306E; --fs-c6:#4C8B21;

  /* Sequential — ONE hue, light → dark (magnitude/heatmap) */
  --fs-seq1:#E4EFF8; --fs-seq2:#BFDCF0; --fs-seq3:#84BCE2;
  --fs-seq4:#4795CE; --fs-seq5:#0F72B8; --fs-seq6:#0B4F80;

  /* Diverging — two poles + NEUTRAL GREY midpoint (never a hue) */
  --fs-div-neg2:#9E3A17; --fs-div-neg1:#DA9873; --fs-div-mid:#E7E9EC;
  --fs-div-pos1:#63B8AC; --fs-div-pos2:#00695E;

  /* Chart furniture */
  --fs-chart-surface:var(--fs-paper);
  --fs-chart-grid:var(--fs-line);
  --fs-chart-axis:var(--fs-neutral);
  --fs-chart-label:var(--fs-ink3);
  --fs-chart-value:var(--fs-ink);
  --fs-chart-band:color-mix(in srgb, var(--fs-forecast) 16%, transparent); /* confidence */
  --fs-chart-baseline:var(--fs-ink3);   /* do-nothing / reference line */
  --fs-chart-now:var(--fs-agent);       /* the "now" marker */
}
:root[data-theme="dark"]{
  --fs-c1:#2E90D8; --fs-c2:#D9702F; --fs-c3:#00A88F;
  --fs-c4:#8A78F0; --fs-c5:#CC4A8C; --fs-c6:#5FA22F;
  --fs-seq1:#10314C; --fs-seq2:#16456B; --fs-seq3:#1D5D91;
  --fs-seq4:#2E90D8; --fs-seq5:#63B6ED; --fs-seq6:#A8D6F5;
  --fs-div-neg2:#E8843F; --fs-div-neg1:#A55A2E; --fs-div-mid:#3A4657;
  --fs-div-pos1:#1C8377; --fs-div-pos2:#4FD1BC;
}

/* ── Figure shell ───────────────────────────────────────────── */
.fs-figure{ background:var(--fs-chart-surface); border:1px solid var(--fs-line);
  border-radius:var(--fs-rad-lg); box-shadow:var(--fs-sh-card); padding:20px; }
.fs-figure__head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:4px; }
.fs-figure__title{ font-size:15px; font-weight:600; color:var(--fs-ink); letter-spacing:-.2px; }
/* The subtitle carries the UNIT and the period — always state them. */
.fs-figure__sub{ font-family:var(--fs-mono); font-size:11px; color:var(--fs-ink3); margin-top:3px; letter-spacing:.3px; }
.fs-figure__tools{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.fs-figure__plot{ margin-top:14px; }
.fs-figure__note{ font-size:12px; color:var(--fs-ink3); margin-top:10px; line-height:1.5; }
.fs-figure__filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }

/* ── Plot furniture (recessive: data first) ─────────────────── */
.fs-plot{ width:100%; height:auto; display:block; overflow:visible; }
.fs-plot .grid line, .fs-plot .fs-grid{ stroke:var(--fs-chart-grid); stroke-width:1; }
.fs-plot .axis line, .fs-plot .fs-axis{ stroke:var(--fs-chart-axis); stroke-width:1; }
.fs-plot .fs-axis-label, .fs-plot text{ font-family:var(--fs-mono); font-size:10px;
  fill:var(--fs-chart-label); letter-spacing:.3px; }
.fs-plot .fs-value-label{ font-family:var(--fs-sans); font-size:11px; font-weight:600; fill:var(--fs-chart-value); }

/* Marks — thin, 2px lines, ≥8px markers, rounded data-ends */
.fs-plot .fs-line{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fs-plot .fs-line--pred{ stroke-dasharray:6 5; }            /* predicted = dashed */
.fs-plot .fs-line--baseline{ stroke:var(--fs-chart-baseline); stroke-width:1.6; stroke-dasharray:3 4; }
.fs-plot .fs-area{ stroke:none; opacity:.16; }
.fs-plot .fs-band{ fill:var(--fs-chart-band); stroke:none; }  /* confidence interval */
.fs-plot .fs-bar{ rx:4; }                                     /* 4px rounded data-end */
.fs-plot .fs-dot{ r:4.5; stroke:var(--fs-chart-surface); stroke-width:2; }
.fs-plot .fs-now{ stroke:var(--fs-chart-now); stroke-width:1; stroke-dasharray:2 3; opacity:.8; }
.fs-plot .fs-threshold{ stroke:var(--fs-danger); stroke-width:1.4; stroke-dasharray:4 4; }

/* Series colour by fixed slot — use .fs-s1…6 on the mark */
.fs-s1{ stroke:var(--fs-c1); fill:var(--fs-c1); } .fs-s2{ stroke:var(--fs-c2); fill:var(--fs-c2); }
.fs-s3{ stroke:var(--fs-c3); fill:var(--fs-c3); } .fs-s4{ stroke:var(--fs-c4); fill:var(--fs-c4); }
.fs-s5{ stroke:var(--fs-c5); fill:var(--fs-c5); } .fs-s6{ stroke:var(--fs-c6); fill:var(--fs-c6); }
/* Semantic series (single-meaning charts) */
.fs-s-actual{ stroke:var(--fs-ink); fill:var(--fs-ink); }
.fs-s-pred{ stroke:var(--fs-forecast); fill:var(--fs-forecast); }
.fs-s-sim{ stroke:var(--fs-sim); fill:var(--fs-sim); }

/* 2px surface gap between adjacent/stacked fills */
.fs-plot .fs-stack > *{ stroke:var(--fs-chart-surface); stroke-width:2; }

/* ── Legend — always present for ≥2 series; text in ink, not series colour ── */
.fs-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px;
  font-family:var(--fs-mono); font-size:11px; color:var(--fs-ink3); }
.fs-legend__item{ display:inline-flex; align-items:center; gap:7px; }
.fs-legend__swatch{ width:14px; height:3px; border-radius:2px; background:currentColor; flex:none; }
.fs-legend__swatch--dot{ width:9px; height:9px; border-radius:50%; }
.fs-legend__swatch--dash{ background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px); }
.fs-legend__item--c1{ color:var(--fs-c1); } .fs-legend__item--c2{ color:var(--fs-c2); }
.fs-legend__item--c3{ color:var(--fs-c3); } .fs-legend__item--c4{ color:var(--fs-c4); }
.fs-legend__item--c5{ color:var(--fs-c5); } .fs-legend__item--c6{ color:var(--fs-c6); }
.fs-legend__label{ color:var(--fs-ink3); }   /* label text stays ink — identity comes from the swatch */

/* ── Tooltip / crosshair (ship by default on line & area) ───── */
.fs-charttip{ position:absolute; pointer-events:none; z-index:var(--fs-z-tooltip,600);
  background:var(--fs-ink); color:var(--fs-canvas); border-radius:var(--fs-rad-sm);
  padding:8px 10px; font-size:12px; box-shadow:var(--fs-sh-pop); min-width:120px; }
.fs-charttip__t{ font-family:var(--fs-mono); font-size:10px; opacity:.75; letter-spacing:.4px; }
.fs-charttip__row{ display:flex; align-items:center; gap:8px; margin-top:5px; }
.fs-charttip__sw{ width:9px; height:9px; border-radius:2px; flex:none; }
.fs-charttip__v{ margin-left:auto; font-family:var(--fs-mono); font-weight:600; font-feature-settings:"tnum"; }
.fs-crosshair{ stroke:var(--fs-neutral); stroke-width:1; stroke-dasharray:3 3; }

/* ── Sparkline & mini ───────────────────────────────────────── */
.fs-spark{ width:100px; height:26px; display:inline-block; vertical-align:middle; overflow:visible; }
.fs-spark path{ fill:none; stroke:var(--fs-c1); stroke-width:1.8; stroke-linecap:round; }
.fs-spark .fs-spark__end{ fill:var(--fs-c1); r:2.5; stroke:none; }

/* ── Heatmap cells ──────────────────────────────────────────── */
.fs-heat rect{ rx:3; stroke:var(--fs-chart-surface); stroke-width:2; }
.fs-heat__l1{ fill:var(--fs-seq1); } .fs-heat__l2{ fill:var(--fs-seq2); } .fs-heat__l3{ fill:var(--fs-seq3); }
.fs-heat__l4{ fill:var(--fs-seq4); } .fs-heat__l5{ fill:var(--fs-seq5); } .fs-heat__l6{ fill:var(--fs-seq6); }

/* ── Texture (CVD / print / forced-colors relief) ───────────── */
.fs-texture-a{ fill:url(#fsHatchA); } .fs-texture-b{ fill:url(#fsHatchB); }

/* ── Chart states ───────────────────────────────────────────── */
.fs-chart-empty, .fs-chart-loading{ display:grid; place-items:center; min-height:180px;
  border-radius:var(--fs-rad-md); background:var(--fs-surface); box-shadow:var(--fs-sh-inset);
  color:var(--fs-ink3); font-size:13px; text-align:center; padding:20px; }

/* Table view — the accessible twin of every chart */
.fs-chart-table[hidden]{ display:none; }

@media (forced-colors: active){
  .fs-plot .fs-line, .fs-plot .fs-bar{ forced-color-adjust:none; }
  .fs-legend__swatch{ border:1px solid; }
}
@media (prefers-reduced-motion: reduce){ .fs-plot *{ animation:none !important; transition:none !important; } }