/* Chart classes map to --chart-N tokens, so charts follow the theme. No inline styles anywhere. */
.chart { margin: 0; min-width: 0; }
.chart-title { font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); font-size: var(--fs-4); }
.chart-svg { display: block; width: 100%; height: auto; max-width: 45rem; overflow: visible; }
.chart-svg text { font-family: var(--font-sans); font-size: .75rem; fill: var(--ink-muted); }
.chart-svg .ch-label-strong { fill: var(--ink); font-weight: 600; }
.chart-svg .ch-axis-label { font-size: .6875rem; }
.chart-svg .ch-grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .ch-axis { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .ch-area { stroke: none; opacity: 0.14; }
.chart-svg .ch-dot { stroke: var(--surface); stroke-width: 2; }
.chart-svg .ch-hit { fill: transparent; stroke: none; }
.chart-svg .ch-hit:hover + .ch-dot, .chart-svg .ch-hit:hover { fill-opacity: 0.12; }
.chart-svg .ch-gap { stroke: var(--surface); stroke-width: 2; }
.chart-svg .ch-track { fill: var(--chart-grid); }
.chart-svg .ch-center { fill: var(--ink); font-size: 1.375rem; font-weight: 700; }
.chart-svg .ch-center-sub { font-size: .6875rem; }
.chart-svg .ch-empty-cell { fill: var(--surface-2); }
.chart-svg rect.ch-cell:hover, .chart-svg path.ch-bar:hover { opacity: 0.85; }
.chart-svg.spark { width: 7.5rem; height: 2rem; display: inline-block; }
.chart-svg.chart-meter { max-width: 26.25rem; }

.legend { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--fs-2); color: var(--body); }
.legend li { display: inline-flex; align-items: center; gap: .375rem; }
.swatch { width: .625rem; height: .625rem; border-radius: 2px; display: inline-block; }
.chart-table { margin-top: var(--space-2); font-size: var(--fs-2); }
.chart-table summary { cursor: pointer; color: var(--accent); }
.chart-empty { padding: var(--space-4) 0; }

.ch-fill-1 { fill: var(--chart-1); } .ch-fill-2 { fill: var(--chart-2); } .ch-fill-3 { fill: var(--chart-3); } .ch-fill-4 { fill: var(--chart-4); }
.ch-fill-5 { fill: var(--chart-5); } .ch-fill-6 { fill: var(--chart-6); } .ch-fill-7 { fill: var(--chart-7); } .ch-fill-8 { fill: var(--chart-8); }
.ch-stroke-1 { stroke: var(--chart-1); } .ch-stroke-2 { stroke: var(--chart-2); } .ch-stroke-3 { stroke: var(--chart-3); } .ch-stroke-4 { stroke: var(--chart-4); }
.ch-stroke-5 { stroke: var(--chart-5); } .ch-stroke-6 { stroke: var(--chart-6); } .ch-stroke-7 { stroke: var(--chart-7); } .ch-stroke-8 { stroke: var(--chart-8); }
.ch-bg-1 { background: var(--chart-1); } .ch-bg-2 { background: var(--chart-2); } .ch-bg-3 { background: var(--chart-3); } .ch-bg-4 { background: var(--chart-4); }
.ch-bg-5 { background: var(--chart-5); } .ch-bg-6 { background: var(--chart-6); } .ch-bg-7 { background: var(--chart-7); } .ch-bg-8 { background: var(--chart-8); }

/* Status colours for meters (always paired with a text label) */
.ch-fill-ok { fill: var(--ok); } .ch-fill-warn { fill: var(--warn); } .ch-fill-danger { fill: var(--danger); } .ch-fill-info { fill: var(--info); }

/* Heatmap steps: blend series 1 into the surface */
.hm-1 { fill: color-mix(in srgb, var(--chart-1) 14%, var(--surface)); }
.hm-2 { fill: color-mix(in srgb, var(--chart-1) 28%, var(--surface)); }
.hm-3 { fill: color-mix(in srgb, var(--chart-1) 42%, var(--surface)); }
.hm-4 { fill: color-mix(in srgb, var(--chart-1) 56%, var(--surface)); }
.hm-5 { fill: color-mix(in srgb, var(--chart-1) 70%, var(--surface)); }
.hm-6 { fill: color-mix(in srgb, var(--chart-1) 85%, var(--surface)); }
.hm-7 { fill: var(--chart-1); }
.hm-sw-1 { background: color-mix(in srgb, var(--chart-1) 14%, var(--surface)); } .hm-sw-3 { background: color-mix(in srgb, var(--chart-1) 42%, var(--surface)); }
.hm-sw-5 { background: color-mix(in srgb, var(--chart-1) 70%, var(--surface)); } .hm-sw-7 { background: var(--chart-1); }
.heat-scale { display: flex; align-items: center; gap: .375rem; font-size: var(--fs-1); color: var(--ink-muted); margin-top: var(--space-2); }
.chart-svg.chart-donut { max-width: 16.25rem; }

/* R6 (SRR-05): one class per chart type on the svg (Drawing.Class), a hook for tests and screen rules. */
.chart-bar-h, .chart-bar-v, .chart-heatmap, .chart-line, .chart-stacked { display: block; }