/* Dark Charts — CSS + SVG chart components. No charting library, no dependencies.
   Every chart reads the same tokens, so a palette swap recolours the whole set. */

:root{
  --chart-bg:#0f1115;
  --chart-surface:#161a20;
  --chart-hair:#252a33;
  --chart-ink:#ECEEF0;
  --chart-mute:#98a0ab;
  --chart-faint:#67707c;
  --chart-grid:rgba(255,255,255,.06);

  --c1:#4C82F7; --c2:#3FB984; --c3:#E0A33E; --c4:#E8455F; --c5:#A97BFF; --c6:#3FC8D6;
  --chart-good:var(--c2); --chart-bad:var(--c4); --chart-warn:var(--c3);

  --chart-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --chart-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

.chart{
  background:var(--chart-surface);
  border:1px solid var(--chart-hair);
  border-radius:12px;
  padding:18px 20px 16px;
  color:var(--chart-ink);
  font-family:var(--chart-font);
}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:4px}
.chart-title{font-size:14.5px;font-weight:650;letter-spacing:-.2px}
.chart-sub{font-size:12.5px;color:var(--chart-mute)}
.chart-value{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin:6px 0 2px}
.chart-delta{font-family:var(--chart-mono);font-size:12px;font-weight:600}
.chart-delta.up{color:var(--chart-good)} .chart-delta.down{color:var(--chart-bad)}
.chart svg{display:block;width:100%;overflow:visible}

/* axes and grid */
.chart .grid line{stroke:var(--chart-grid);stroke-width:1}
.chart .axis text{fill:var(--chart-faint);font-family:var(--chart-mono);font-size:10px}
.chart .axis line{stroke:var(--chart-hair);stroke-width:1}

/* line + area */
.chart .line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .line.s1{stroke:var(--c1)} .chart .line.s2{stroke:var(--c2)}
.chart .line.s3{stroke:var(--c3)} .chart .line.s4{stroke:var(--c4)}
.chart .area{stroke:none;opacity:.16}
.chart .area.s1{fill:var(--c1)} .chart .area.s2{fill:var(--c2)}
.chart .area.s3{fill:var(--c3)} .chart .area.s4{fill:var(--c4)}
.chart .dot{r:3;stroke:var(--chart-surface);stroke-width:2}
.chart .dot.s1{fill:var(--c1)} .chart .dot.s2{fill:var(--c2)}

/* bars */
.chart .bar{rx:3}
.chart .bar.s1{fill:var(--c1)} .chart .bar.s2{fill:var(--c2)}
.chart .bar.s3{fill:var(--c3)} .chart .bar.s4{fill:var(--c4)}
.chart .bar.muted{fill:var(--chart-hair)}

/* donut + gauge */
.chart .track{fill:none;stroke:var(--chart-hair);stroke-width:14}
.chart .arc{fill:none;stroke-width:14;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.chart .arc.s1{stroke:var(--c1)} .chart .arc.s2{stroke:var(--c2)}
.chart .arc.s3{stroke:var(--c3)} .chart .arc.s4{stroke:var(--c4)}
.chart .center-label{fill:var(--chart-ink);font-size:20px;font-weight:800;text-anchor:middle;
  font-family:var(--chart-font);letter-spacing:-.6px}
.chart .center-sub{fill:var(--chart-mute);font-size:11px;text-anchor:middle;font-family:var(--chart-font)}

/* sparkline — sits inline in text or a table cell */
.spark{display:inline-block;vertical-align:middle;width:88px;height:24px}
/* `.chart svg{width:100%}` outranks `.spark`, so restate it at higher specificity. */
.chart svg.spark{width:88px;height:24px}
.spark path{fill:none;stroke:var(--c1);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spark.up path{stroke:var(--chart-good)} .spark.down path{stroke:var(--chart-bad)}
.spark .fill{stroke:none;opacity:.14;fill:var(--c1)}

/* heatmap calendar */
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,11px);
      grid-auto-columns:11px;justify-content:start;gap:3px}
.heat i{display:block;width:11px;height:11px;border-radius:2.5px;background:var(--chart-hair)}
.heat i[data-l="1"]{background:color-mix(in srgb,var(--c2) 28%,var(--chart-hair))}
.heat i[data-l="2"]{background:color-mix(in srgb,var(--c2) 52%,var(--chart-hair))}
.heat i[data-l="3"]{background:color-mix(in srgb,var(--c2) 76%,var(--chart-hair))}
.heat i[data-l="4"]{background:var(--c2)}

/* horizontal ranked bars */
.ranked{display:grid;gap:9px;margin-top:12px}
.ranked .row{display:grid;grid-template-columns:88px 1fr 56px;align-items:center;gap:12px;font-size:13px}
.ranked .lab{color:var(--chart-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranked .track{height:8px;background:var(--chart-hair);border-radius:4px;overflow:hidden}
.ranked .fill{height:100%;background:var(--c1);border-radius:4px}
.ranked .val{text-align:right;font-family:var(--chart-mono);font-size:12px;color:var(--chart-ink)}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12.5px;color:var(--chart-mute)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2px;display:block}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--chart-surface);border:1px solid var(--chart-hair);border-radius:10px;padding:14px 16px}
.stat .k{font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--chart-faint);font-weight:700}
.stat .v{margin-top:6px;font-size:23px;font-weight:800;letter-spacing:-.9px}
.stat .d{margin-top:3px;font-family:var(--chart-mono);font-size:11.5px}
.stat .d.up{color:var(--chart-good)} .stat .d.down{color:var(--chart-bad)}

/* print: charts keep their ink, but lighten the canvas */
@media print{
  :root{--chart-surface:#fff;--chart-bg:#fff;--chart-hair:#d6dae0;--chart-ink:#111;
        --chart-mute:#444;--chart-faint:#666;--chart-grid:rgba(0,0,0,.08)}
  .chart{break-inside:avoid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}