/* charts-metal.css: companion to metal/charts-metal.js (green liquid-metal chart marks, approved 9 Nov 2026). Copy only; nothing here applies unless the script runs.
   html.metal-pending: set by an inline script until the script has decided; html.metal: WebGL is running. In both states the original SVG/CSS marks are hidden so there is no flash;
   if WebGL is missing, forced colours are on, ?metal=off is used or the script never loads, the pending class is removed and the original marks show unchanged. */
html.metal-pending .ring .v,html.metal .ring .v,
html.metal-pending .fillbar,html.metal .fillbar,
html.metal-pending .trk,html.metal .trk{visibility:hidden}
html.metal-pending .gfx-svg .dot circle[fill="var(--link)"],html.metal .gfx-svg .dot circle[fill="var(--link)"]{fill:none!important;stroke:none!important;filter:none!important}
/* the checklist stack: every coloured segment (pass, partial, fail, not applicable, not checked) becomes metal in its own colour; only the stack's own empty track stays quiet */
html.metal-pending .stack .seg,html.metal .stack .seg{background:transparent!important;box-shadow:none!important;filter:none!important}
/* the metal band is 6.5 wide in the ring's 80-unit space; the quiet track underneath matches it so no hairline shows beside the metal */
html.metal .ring circle{stroke-width:6.5!important}
.ringbox canvas.mgl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ringbox .rnum{z-index:2}
/* svg marks: the canvas sits UNDER the svg, so ticks, labels and check marks keep drawing above the metal exactly as before */
.mwrap{position:relative;display:block;width:100%;max-width:340px}
.mwrap .gfx-svg{position:relative;z-index:1}
.mlayer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.stack .seg{position:relative}
.mseg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.card.enter .mlayer.beads{animation:mfade .5s ease both;animation-delay:.3s}
@media (prefers-reduced-motion:reduce){.card.enter .mlayer.beads{animation:none}}