Crosshair Quad Tile Grid Stats Block for React

Edit QUARTER, BEFORE and KPIS at the top of the file. A figure has a label, this quarter's value, the previous one, a suffix, its decimals and a change kind: points for a rate (+1.4 pts) or unit for a count in the figure's own unit (−5 min). The values, the signs, the arrows and the headline are read from them. The quarter names are plain text, so the copy never goes stale.

It is made of the page's own lines, not a picture. The band's top rule comes from Guides, the second row of cells has a Guides rule on top (with a + at each rail and one at the centre), and the second column has a start border that runs from the top rule to the foot. The round badge is absolutely positioned with inset-0 and m-auto, which centres it on the crossing with no offsets, so it stays centred in right-to-left pages and at any height.

The grid becomes one column of four rows. The vertical line and the centre badge go away, and each row after the first gets its own rule with + marks on the rails, so the horizontal lines survive. The DOM order never changes: satisfaction, first reply, backlog, reopens.

Yes. The four quadrants are list items, each with a heading for its label. The badge is decorative and hidden from assistive technology, because the quarter is also written in the header and in each change ("vs Q2"). The arrows are hidden too, since the sign says the same; the minus is a true minus sign, read as "minus". Numbers sit in bdi elements, and signed changes are kept left to right.

A falling first reply time is good and a rising backlog is bad; the block can't know, so it shows direction only, with an arrow and a sign in the text colour. That also keeps it correct in every theme preset, light and dark, and readable without colour.

The crosshair ends the block. The next section draws its own top rule along its foot, so a bottom border here would double it, and the column has no bottom padding for the same reason.