/* Charts drawn by public-worker/src/chart.js: the research hub's chart kit (database-worker/public/app/tdi-chart.css)
 * without its script. Same colours, same strokes. The hub's chart colours are their own tokens, not the page tokens:
 * --pro, --gold and --anti are tuned for text and failed the colour-blindness checks as chart fills. These keep the
 * hub's meanings (teal = money in or the first series, gold = money out or the second, dashed as well as coloured, so
 * the two never rest on colour alone) at steps that pass in both themes against the panel surface.
 * Nothing here loads a font, an image or a file from another site; every figure is also in the table under a chart. */

:root {
  --tc-teal: #1fa89c;   --tc-teal: light-dark(#01948a, #1fa89c);
  --tc-gold: #c18720;   --tc-gold: light-dark(#c6871a, #c18720);
  --tc-surface: var(--panel);
}

.tc { margin: 0 0 14px; min-width: 0; }
.tc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; list-style: none;
  font-size: 12.5px; color: var(--muted); }
.tc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tc-sw { width: 18px; height: 0; flex: none; border-top: 2px solid; }
.tc-sw.tc-dash { border-top-style: dashed; }
.tc-sw.tc-s0 { border-top-color: var(--tc-teal); }
.tc-sw.tc-s1 { border-top-color: var(--tc-gold); }

.tc-plot { position: relative; min-width: 0; }
.tc-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.tc-grid line { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.tc-base { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.tc-axis text { fill: var(--faint); font: 11px var(--font-sans); font-variant-numeric: tabular-nums; }
.tc-hit { fill: transparent; }
.tc-hit:hover { fill: color-mix(in srgb, var(--text) 7%, transparent); }
.tc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tc-line.tc-dash { stroke-dasharray: 6 4; }
.tc-line.tc-s0 { stroke: var(--tc-teal); }
.tc-line.tc-s1 { stroke: var(--tc-gold); }
.tc-dot { stroke: var(--tc-surface); stroke-width: 2; forced-color-adjust: none; }
.tc-dot.tc-s0 { fill: var(--tc-teal); }
.tc-dot.tc-s1 { fill: var(--tc-gold); }
.tc-note { color: var(--faint); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }