/* Chart primitives — structural colour only. Data colour is set inline by js/charts.js.
   Every rule here resolves from tokens.css so the charts follow the design system.
   --ch-surface is the colour the chart sits on; override it on a tinted panel. */

.ch{
  --ch-surface:var(--bg-1,#fff);
  display:block; width:100%; height:auto; max-width:100%;
  overflow:visible;
  font-family:var(--sans); font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.ch.is-empty{min-height:24px}

/* ── hairlines. Never heavier than 1px. ───────────────────────────────── */
.ch .grid{stroke:var(--line); stroke-width:1; shape-rendering:crispEdges}
.ch .base{stroke:var(--line-2); stroke-width:1; shape-rendering:crispEdges}
.ch .conn{stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 3}
.ch .bandedge{stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 3}
.ch .target{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:5 4}

/* ── type. Values read darker than labels; nothing wears a series colour. ─ */
.ch text{fill:var(--ink-2)}
.ch .val{fill:var(--ink)}
.ch .val.pos{fill:var(--pos)}
.ch .val.neg{fill:var(--neg-ink)}
.ch .cat{fill:var(--ink-3)}
.ch .axis{fill:var(--ink-4); letter-spacing:.06em; text-transform:uppercase}
.ch .total{fill:var(--ink); font-family:var(--serif); letter-spacing:-.01em}
.ch .cellv,.ch .segv,.ch .pillv{paint-order:stroke}

/* ── marks ───────────────────────────────────────────────────────────── */
.ch .bar,.ch .seg,.ch .node,.ch .cell,.ch .sw{transition:opacity .16s var(--ease), filter .16s var(--ease)}
.ch .bar-start{fill-opacity:.92}

.ch-waterfall:hover .bar{opacity:.55}
.ch-waterfall .bar:hover{opacity:1}

.ch-heatmap .cell{stroke:var(--ch-surface); stroke-width:1}
.ch-heatmap:hover .cell{opacity:.72}
.ch-heatmap .cell:hover{opacity:1; stroke:var(--ink-2); stroke-width:1.25}

.ch-sankey .ribbon{transition:fill-opacity .16s var(--ease)}
.ch-sankey:hover .ribbon{fill-opacity:.14}
.ch-sankey .ribbon:hover{fill-opacity:.5}
.ch-sankey .lbl.nm{fill:var(--ink-2)}
.ch-sankey .lbl.vv{fill:var(--ink-3)}
.ch-sankey .lbl{
  paint-order:stroke; stroke:var(--ch-surface); stroke-width:3.5px;
  stroke-linejoin:round; stroke-linecap:round;
}

.ch-trend .band{transition:fill-opacity .16s var(--ease)}
.ch-trend .pt{transition:r .16s var(--ease)}
.ch-trend .pt:hover{r:4.4}
.ch-trend .pill{filter:none}

.ch-stacked:hover .seg{opacity:.5}
.ch-stacked .seg:hover{opacity:1}

.ch-donut .arc{stroke:var(--ch-surface); stroke-width:2; transition:opacity .16s var(--ease)}
.ch-donut:hover .arc{opacity:.5}
.ch-donut .arc:hover{opacity:1}

/* the brand accent, for consumers that want to tint a chart chrome element */
.ch{--ch-accent:var(--brand); --ch-accent-text:var(--brand-deep)}

/* on the warm ground rather than a white panel */
.ch-on-ground,.on-ground .ch{--ch-surface:var(--bg)}

@media (prefers-reduced-motion:reduce){
  .ch *{transition:none!important}
}