Gauge Cluster Features Block for React

Edit GAUGES at the top of the file: each has a title, a unit, a base reading at no load, a rise across the whole range, a max for the dial's far end, a sentence, and knee for a curve that stays flat and climbs late. The arc, needle, reading and state all read from the same helper, so they always agree.

From how far round the dial a reading is: below 60 percent is Healthy, 60 to 84 is Busy and 85 or more is Over. Over is a filled badge and the other two are outlined, and the word is always there, so colour is never the only signal.

The slider's value is state; each gauge column gets its dial position as a CSS variable, and the arc's fill and the needle's rotation are CSS that read it, with a short transition. Under reduced motion the transitions are off and the needles jump.

The dials are drawings and are hidden from assistive technology. Each gauge is a list item with a heading, its reading and its state in text, and the slider is named "Simulate load" and reads its value as "60 percent of peak traffic". When you let go of the slider, one polite live region announces all three readings.

The gauges stack one per row, divided by hairlines, with a shorter dial, and the slider sits full width under the header. Nothing scrolls sideways at 320 pixels.

No: a dial's sweep is read as a measurement, so it keeps its direction, while the text, the badge and the slider follow the page's direction. The readings are wrapped so their units keep their order.