Vertical KPI Rail Stats Block for React

Edit WEEKS and KPIS at the top of the file. Each KPI is a label, a series of weekly readings (oldest first, one per week), a write function that formats a reading and a change kind: count for a difference (+11), percent for a share of the week before (−0.7%) or points for rates (+0.7 pts). The row's value, its change and the headline's number are all read from the series, and the week names carry no year, so nothing goes stale.

The rail is the second column of a two-column grid, lg:grid-cols-[minmax(0,1fr)_24rem]: change 24rem to resize it. To put the rail at the start, give it lg:col-start-1 lg:row-start-1 and move the divider (lg:border-s) to the header's cell, keeping the header first in the DOM so the reading order stays the same.

Whether a change is good depends on the figure: fewer parcels held at customs is good news, fewer on time isn't. The block shows the direction with an arrow and the sign, and leaves the judgement to the reader. That also keeps it correct in every theme preset and readable without colour. Dashes mark no change.

Yes. The figures are a description list: each label is a term, and the value and the change are its descriptions. The value is drawn first but read after its label, so a screen reader hears "On-time rate, 94.1%, +0.7 pts vs week 11". The arrows are hidden from assistive technology because the sign says the same, the minus is a true minus sign, and values sit in bdi elements with signs kept left to right for right-to-left pages.

The column is the grid itself, with the padding on its cells, so the rail's start line meets the page's top rule at a + mark, the way the other split blocks do. On a phone the divider is a hairline between the header and the rail, with its own marks. The rail ends the block, so it draws no bottom rule: the next block's top rule closes it.

The header comes first, then the rail with the same four rows. The line that names the week and its comparison is hidden on phones, since the headline and every row already say it ("in week 12", "vs week 11"). Nothing scrolls sideways at 320 pixels.