/* The hub's shared chart kit (lane VIZ, 2026-09-28) -- styles for
 * app/tdi-chart.js. See that file's header for the API.
 *
 * Chart colours are their own tokens, not the page tokens: --pro, --gold and
 * --anti are tuned for TEXT on the light theme (dark, low-chroma shades), and
 * as bar fills they failed the dataviz checks -- a gold and a red a
 * deuteranope could not tell apart (OKLab dE 0.7), teal and gold under the
 * normal-vision floor. These keep the same meanings (teal = favorable /
 * operational / money in, gold = money out, red = adverse) at steps that
 * pass, validated in both modes against the panel surface (#fbfbfc light,
 * #141414 dark) with the dataviz skill's validate_palette.js:
 *   - teal + gold, categorical pair: CVD dE >= 12.9, normal >= 21.8;
 *     light gold sits at 2.95:1, so every chart ships a table view.
 *   - teal + red, the two poles of the outcome scale, with --tc-mid as its
 *     neutral midpoint (lighter than both poles on light, darker on dark).
 *   - --tc-heat-1..5, an ordinal ramp (federal reversal tiers T1..T5), one
 *     hue family amber -> red (spread 38 deg), monotone lightness, every
 *     step >= 0.06 apart; the hard end is the most salient in both modes.
 *   - --tc-sev-1..3, the same family for clinic status (limited, paused,
 *     closed), kept light -> dark in both modes to match the clinics map.
 *   - --tc-violet, a third categorical hue beside blue and gold (added
 *     2026-10-26 for the Democrats-crossing-over page's third series, which
 *     had used --tc-mid as a series colour and failed). Held clear of teal
 *     and red, which stay the pro/anti poles. Validated with the dataviz
 *     skill's validate_palette.js on [blue, gold, violet] against #fbfbfc and
 *     #141414, in the stack order blue, gold, violet, then --tc-gray:
 *       gold <-> violet (neighbours): CVD dE 31.3 light, 28.2 dark; blue <->
 *       gold, the pair this was held to, is 21.4 / 21.8.
 *       violet <-> gray (neighbours): CVD dE 25.6 light, 15.7 dark.
 *       all pairs of the three: closest is blue <-> violet, CVD dE 9.5 / 9.3
 *       (target 8) and normal vision 15.4 / 15.4 (floor 15); so blue and
 *       violet should not be stacked side by side.
 *     Light violet is 6.2:1 on the panel and dark 4.0:1; only gold (2.95:1)
 *     and gray (2.6:1 light) are under 3:1, which the legend and the table
 *     view cover. --tc-mid is the outcome scale's midpoint only: as a series
 *     it failed (dark gray <-> mid dE 6.1, light mid 1.58:1 on the panel). A
 *     chart with a fourth series uses --tc-gray ("other / unknown") or
 *     extends this list.
 * Never pick a new chart colour by eye: extend this list and re-run the
 * validator (scratchpad palette_check.mjs from session 23e4a84d is the
 * recipe).
 */
:root {
  --tc-teal:#1fa89c;   --tc-teal:light-dark(#01948a, #1fa89c);
  --tc-gold:#c18720;   --tc-gold:light-dark(#c6871a, #c18720);
  --tc-red:#d95544;    --tc-red:light-dark(#ba3728, #d95544);
  --tc-mid:#535250;    --tc-mid:light-dark(#cbcac8, #535250);
  --tc-blue:#5a98cb;   --tc-blue:light-dark(#4280b2, #5a98cb);
  --tc-violet:#8a5fc9; --tc-violet:light-dark(#7347af, #8a5fc9);
  --tc-gray:#646360;   --tc-gray:light-dark(#9f9e9b, #646360);
  --tc-heat-1:#8f5d04; --tc-heat-1:light-dark(#e9a23e, #8f5d04);
  --tc-heat-2:#b56c15; --tc-heat-2:light-dark(#db831b, #b56c15);
  --tc-heat-3:#de7a30; --tc-heat-3:light-dark(#cc6300, #de7a30);
  --tc-heat-4:#f29167; --tc-heat-4:light-dark(#b84400, #f29167);
  --tc-heat-5:#fdad96; --tc-heat-5:light-dark(#9f2900, #fdad96);
  --tc-sev-1:#c48525;  --tc-sev-1:light-dark(#e9a23e, #c48525);
  --tc-sev-2:#c16100;  --tc-sev-2:light-dark(#d46b02, #c16100);
  --tc-sev-3:#b33e18;  --tc-sev-3:light-dark(#b43504, #b33e18);
}

.tc { position:relative; margin:0; min-width:0; --tc-surface:var(--panel); }
.tc[hidden] { display:none; }
.tc-vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
         clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* legend: a swatch (rect for bars) beside plain text -- never coloured text */
.tc-legend { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 10px; padding:0; list-style:none;
             font-size:11.5px; color:var(--muted); }
.tc-legend li { display:inline-flex; align-items:center; gap:6px; }
.tc-sw { width:10px; height:10px; border-radius:2px; flex:none; }
.tc-sw.tc-empty { background:transparent; box-shadow:inset 0 0 0 1px var(--border-strong); }
.tc-sw.tc-key-line { width:18px; height:0; border-radius:0; border-top:2px solid; }
.tc-sw.tc-key-line.tc-dash { border-top-style:dashed; }
.tc-sw.tc-key-dot { border-radius:50%; }
.tc-legend-btns { gap:6px 8px; }
.tc-lg { display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--muted);
         border:1px solid var(--border); border-radius:14px; font:inherit; font-size:11.5px;
         padding:3px 10px 3px 8px; min-height:26px; cursor:pointer; text-align:left; }
.tc-lg:hover { color:var(--text); border-color:var(--border-strong); }
.tc-lg[aria-pressed="true"] { color:var(--text); border-color:var(--gold);
                              background:color-mix(in srgb, var(--gold) 12%, transparent); }
.tc-lg:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* ---- horizontal bars */
.tc-rows { list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.tc-row { display:grid; grid-template-columns:minmax(9rem, 32%) minmax(0, 1fr); align-items:center;
          gap:12px; min-height:30px; padding:3px 6px; border-radius:5px; outline-offset:1px; }
.tc-row[role="button"] { cursor:pointer; }
.tc-row:hover, .tc-row.tc-on { background:color-mix(in srgb, var(--text) 6%, transparent); }
.tc-row[aria-pressed="true"] { background:color-mix(in srgb, var(--gold) 13%, transparent);
                               box-shadow:inset 2px 0 0 var(--gold); }
.tc-row:focus-visible { outline:2px solid var(--gold); }
.tc-lab { font-size:12.5px; color:var(--text); line-height:1.3; min-width:0; overflow-wrap:anywhere; }
.tc-lab small { display:block; color:var(--faint); font-size:11px; }
.tc-scale { display:flex; align-items:center; gap:6px; min-width:0; }
.tc-fill { display:flex; height:14px; flex:none; }
.tc-seg { height:100%; flex:none; forced-color-adjust:none; }
.tc-seg + .tc-seg { margin-left:2px; }                 /* the 2px surface gap */
.tc-seg:last-child { border-radius:0 4px 4px 0; }       /* rounded data-end, square baseline */
.tc-seg.tc-rest { background:transparent; box-shadow:inset 0 0 0 1px var(--border-strong); }
.tc-row .tc-seg.tc-hot { filter:brightness(1.12) saturate(1.1); }
.tc-clickseg .tc-seg:not(.tc-rest) { cursor:pointer; }
.tc-val { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:560px) {
  .tc-row { grid-template-columns:minmax(0, 1fr); gap:3px; padding:5px 6px; }
}

/* ---- columns (SVG) */
.tc-plot { position:relative; min-width:0; }
.tc-plot:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.tc-plot svg { display:block; width:100%; overflow:visible; }
.tc-plot .tc-grid line { stroke:var(--border); stroke-width:1; shape-rendering:crispEdges; }
.tc-plot .tc-base { stroke:var(--border-strong); stroke-width:1; shape-rendering:crispEdges; }
.tc-plot .tc-axis text { fill:var(--faint); font-size:11px; font-variant-numeric:tabular-nums; }
.tc-plot .tc-hl { fill:color-mix(in srgb, var(--text) 7%, transparent); }
.tc-plot .tc-hit { fill:transparent; }
.tc-plot .tc-mark text { fill:var(--muted); font-size:11px; }
.tc-plot .tc-mark line { stroke:var(--faint); stroke-width:1; }
/* ---- lines: 2px strokes, round joins; >= 8px dots with a 2px surface ring */
.tc-plot .tc-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.tc-plot .tc-line.tc-dash { stroke-dasharray:6 4; }
.tc-plot .tc-dot { stroke:var(--tc-surface); stroke-width:2; forced-color-adjust:none; }
.tc-plot .tc-ring { fill:none; stroke:var(--faint); stroke-width:1; stroke-dasharray:2 2; }
.tc-plot .tc-cross { stroke:var(--muted); stroke-width:1; shape-rendering:crispEdges; }

/* ---- lanes: a swim-lane timeline */
.tc-plot .tc-lane-label { fill:var(--text); font-size:12px; }
.tc-plot .tc-lane-total { fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.tc-plot .tc-cell { fill:none; stroke:var(--gold); stroke-width:1.5; }
.tc-plot .tc-emph { stroke:var(--tc-surface); stroke-width:2; forced-color-adjust:none; }
.tc-plot .tc-axis text { dominant-baseline:auto; }
.tc-lane-detail { margin-top:10px; }
.tc-lane-detail:empty { display:none; }
.tc-lane-h { font-size:13px; margin:0 0 6px; color:var(--text); font-weight:600; }
.tc-lane-n { color:var(--faint); font-weight:400; margin-left:4px; }
.tc-lane-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:12.5px;
                max-height:320px; overflow:auto; }
.tc-lane-list li { line-height:1.4; }
.tc-lane-when { color:var(--faint); font-variant-numeric:tabular-nums; margin-right:6px; }
.tc-lane-tag { color:var(--muted); font-size:11px; border:1px solid var(--border); border-radius:9px;
               padding:0 6px; margin-left:4px; white-space:nowrap; }

/* ---- the tooltip: values lead (strong), labels follow; line keys, not boxes */
.tc-tip { position:absolute; z-index:6; pointer-events:none; min-width:150px; max-width:300px;
          background:var(--panel); color:var(--text); border:1px solid var(--border-strong);
          border-radius:6px; padding:7px 10px; font-size:12px; line-height:1.45;
          box-shadow:0 8px 22px rgb(0 0 0 / .28); }
.tc-tip[hidden] { display:none; }
.tc-tip .tc-tt { display:block; font-weight:600; margin-bottom:3px; }
.tc-tip .tc-l { display:flex; align-items:baseline; gap:7px; }
.tc-tip .tc-l i { width:12px; flex:none; border-top:2px solid; transform:translateY(-3px); }
.tc-tip .tc-l i.tc-empty { border-top:1px solid var(--border-strong); }
.tc-tip .tc-l strong { font-variant-numeric:tabular-nums; font-weight:650; }
.tc-tip .tc-l span { color:var(--muted); }
.tc-tip .tc-x { color:var(--faint); margin-top:3px; font-size:11.5px; }
.tc-tip .tc-go { color:var(--faint); margin-top:4px; font-size:11px; }

.tc-note { color:var(--faint); font-size:11.5px; line-height:1.5; margin:10px 0 0; }

/* ---- the table view (the chart's accessible twin) and the actions row */
.tc-table { margin-top:10px; }
.tc-table > summary { cursor:pointer; color:var(--gold); font-size:12px; min-height:24px;
                      display:inline-flex; align-items:center; }
.tc-scroll { position:relative; overflow-x:auto; margin-top:6px; }
.tc-tbl { border-collapse:collapse; font-size:12px; min-width:100%; }
.tc-tbl th, .tc-tbl td { padding:4px 12px 4px 0; border-bottom:1px solid var(--border); text-align:left;
                         vertical-align:top; }
.tc-tbl thead th { color:var(--faint); font-weight:600; font-size:10.5px; text-transform:uppercase;
                   letter-spacing:.5px; }
.tc-tbl .tc-n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tc-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:8px; }
.tc-actions .tdi-cite-panel { flex-basis:100%; }
.tc-btn { background:transparent; color:var(--muted); border:1px solid var(--control-border, var(--border-strong));
          border-radius:5px; font:inherit; font-size:11.5px; padding:3px 10px; min-height:26px; cursor:pointer; }
.tc-btn:hover { color:var(--text); border-color:var(--gold); }
.tc-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.tc-empty-note { color:var(--faint); font-size:12.5px; margin:4px 0; }