/* Charts (F1). Colours by role; light and dark values from the validated reference palette (slot 1 blue). */
.viz {
  --viz-surface: var(--panel, #ffffff);
  --viz-ink: var(--ink, #14213d);
  --viz-ink-2: var(--slate, #5a6478);
  --viz-muted: var(--muted, #8b95a9);
  --viz-grid: var(--line, #e2e7f0);
  --viz-series: #2a78d6;
  --viz-band: rgba(42, 120, 214, 0.16);
  --viz-bar: #2a78d6;
  --viz-zone: rgba(15, 122, 82, 0.13);
  --viz-zone-ink: #0f6b48;
  --viz-ok: var(--ok, #0f7a52); --viz-ok-soft: var(--ok-soft, #e3f4ec);
  --viz-warn: var(--warn, #a15c00); --viz-warn-soft: var(--warn-soft, #fff1da);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz { --viz-series: #3987e5; --viz-band: rgba(57, 135, 229, 0.22); --viz-bar: #3987e5; --viz-zone: rgba(76, 199, 154, 0.20); --viz-zone-ink: #7fd8b4; }
}
:root[data-theme="dark"] .viz { --viz-series: #3987e5; --viz-band: rgba(57, 135, 229, 0.22); --viz-bar: #3987e5; --viz-zone: rgba(76, 199, 154, 0.20); --viz-zone-ink: #7fd8b4; }

.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.viz-card { background: var(--viz-surface); border: 1px solid var(--viz-grid); border-radius: 14px; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.viz-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.viz-title { font-weight: 600; font-size: 13.5px; color: var(--viz-ink); }
.viz-sub { font-size: 11.5px; color: var(--viz-ink-2); }
.viz-btn { border: 1px solid var(--viz-grid); background: transparent; border-radius: 7px; padding: 1px 8px; font: inherit; font-size: 11px; color: var(--viz-ink-2); cursor: pointer; }
.viz-btn:hover { color: var(--viz-ink); }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.viz svg:focus-visible { outline: 2px solid var(--viz-series); outline-offset: 2px; border-radius: 6px; }
.viz .tick { font-size: 10.5px; fill: var(--viz-muted); font-variant-numeric: tabular-nums; }
.viz .gridline { stroke: var(--viz-grid); stroke-width: 1; }
.viz .band { fill: var(--viz-band); }
.viz .line { fill: none; stroke: var(--viz-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .dot { fill: var(--viz-series); stroke: var(--viz-surface); stroke-width: 2; }
.viz .bar { fill: var(--viz-bar); }
.viz .cross { stroke: var(--viz-ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.viz .hit { fill: transparent; cursor: crosshair; }
.viz-tip { position: absolute; pointer-events: none; background: var(--viz-surface); color: var(--viz-ink); border: 1px solid var(--viz-grid); border-radius: 8px; padding: 6px 9px; font-size: 12px; line-height: 1.45; box-shadow: 0 4px 14px rgba(20, 33, 61, .14); white-space: nowrap; z-index: 2; font-variant-numeric: tabular-nums; }
.viz-tip b { font-weight: 600; }
.viz-note { font-size: 11.5px; color: var(--viz-ink-2); }
.viz-table { overflow-x: auto; }
.viz-table table { border-collapse: collapse; font-size: 12px; width: 100%; font-variant-numeric: tabular-nums; }
.viz-table th, .viz-table td { border-bottom: 1px solid var(--viz-grid); padding: 3px 6px; text-align: right; white-space: nowrap; }
.viz-table th:first-child, .viz-table td:first-child { text-align: left; }
.viz-legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--viz-ink-2); align-items: center; flex-wrap: wrap; }
.viz-key { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.viz-loading { color: var(--viz-ink-2); font-size: 12.5px; padding: 8px 0; }
@media (prefers-reduced-motion: reduce) { .viz * { transition: none !important; } }

/* Trends across runs: one dot and bar per run, the agreed range as a zone, a status chip and a plain sentence. */
.viz-head-r { display: inline-flex; gap: 8px; align-items: center; }
.viz .viz-chip { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 1px 9px; white-space: nowrap; background: var(--tint, #eef2f9); color: var(--viz-ink-2); }
.viz .viz-chip.in { background: var(--viz-ok-soft); color: var(--viz-ok); }
.viz .viz-chip.low, .viz .viz-chip.high { background: var(--viz-warn-soft); color: var(--viz-warn); }
.viz-read { margin: 0; font-size: 13px; line-height: 1.5; color: var(--viz-ink); max-width: 70ch; }
.viz-summary { margin: 0 0 12px; font-weight: 500; color: var(--viz-ink); }
.viz .zone { fill: var(--viz-zone); }
.viz .zone-edge { stroke: var(--viz-zone-ink); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.viz .spread { stroke: var(--viz-band); stroke-width: 7; stroke-linecap: round; }
.viz .dot.latest { stroke-width: 2.5; }
.viz .tick.strong { fill: var(--viz-ink); font-weight: 600; }
.viz .hl { fill: var(--viz-grid); opacity: .45; }
.viz-key.dot-key { width: 9px; height: 9px; border-radius: 50%; background: var(--viz-series); }
.viz-key.bar-key { width: 6px; height: 14px; border-radius: 3px; background: var(--viz-band); }
.viz-key.zone-key { background: var(--viz-zone); border: 1px solid var(--viz-zone-ink); }
.viz svg.spark { width: 168px; height: 34px; display: block; overflow: visible; }
.viz .spark-line { fill: none; stroke: var(--viz-band); stroke-width: 1.5; }