/* The formats chart (chart.js). Series colours are the dataviz reference palette's first
   four slots, validated on this site's surfaces in both modes (adjacent CVD dE >= 8.4,
   normal >= 19.8); light-mode contrast is below 3:1 for three, hence direct labels,
   a legend and the table view. Text stays in text colours, never the series colour. */
figure.demo-chart { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; margin: 1.8rem 0; }
@media (prefers-color-scheme: dark) { figure.demo-chart { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; } }
.chart-box { position: relative; }
svg.chart { display: block; width: 100%; height: auto; font-family: var(--font-body); touch-action: pan-y; }
svg.chart .grid { stroke: var(--rule); stroke-width: 1; }
svg.chart .axis { stroke: var(--muted); stroke-width: 1; }
svg.chart .tick { fill: var(--muted); font: 12px var(--font-mono); }
svg.chart .axis-title { fill: var(--muted); font-size: 13px; }
svg.chart .ceiling { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .7; }
svg.chart .ceiling-label { fill: var(--muted); font-size: 12px; }
svg.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
svg.chart .dot { stroke: var(--bg); stroke-width: 2; }
svg.chart .served { fill: var(--fg); stroke-width: 3; }
svg.chart .served-num { fill: var(--bg); font: 600 12px var(--font-mono); pointer-events: none; }
svg.chart .end-label { fill: var(--fg); font-size: 13px; font-weight: 600; }
svg.chart .s1 { stroke: var(--c1); } svg.chart .dot.s1 { fill: var(--c1); }
svg.chart .s2 { stroke: var(--c2); } svg.chart .dot.s2 { fill: var(--c2); }
svg.chart .s3 { stroke: var(--c3); } svg.chart .dot.s3 { fill: var(--c3); }
svg.chart .s4 { stroke: var(--c4); } svg.chart .dot.s4 { fill: var(--c4); }
svg.chart .cross line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
svg.chart .cross circle { fill: none; stroke: var(--fg); stroke-width: 2; }
.chart-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: var(--fg); color: var(--bg); font: .78rem/1.35 var(--font-mono); padding: .35rem .55rem; border-radius: 4px; pointer-events: none; max-width: 16rem; text-align: center; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .8rem; color: var(--muted); margin: 0 0 .4rem; }
.chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: .4rem; vertical-align: middle; }
.chart-legend .s1 { background: var(--c1); } .chart-legend .s2 { background: var(--c2); }
.chart-legend .s3 { background: var(--c3); } .chart-legend .s4 { background: var(--c4); }
.chart-table { margin-top: .6rem; font-size: .85rem; }
.chart-table summary { cursor: pointer; color: var(--accent); }
.chart-table table { font-size: .82rem; }