Dual Stat Metric Banner Block for React

Edit METRICS at the top of the file: each entry has a label, the figure as text, the change on last week as a number (a positive one points up, a negative one down), the share of the goal reached and the goal as text. The share is typed, not computed from the figure, because the figure is already formatted ("$38.4k"); keep the two in step when you change one.

A rise is the normal case and a fall is the exception, so colour is spent on the exception. The arrow for a fall uses the destructive colour; the number itself stays in the foreground colour, which keeps the text readable in every theme and means the change reads the same without colour, through the sign, the arrow's direction and the words "on last week". The bars never take a status colour, because nothing here has crossed a limit.

The bar is a picture of the sentence under it, so it is hidden from assistive technology and the words carry the information: "64% of the week's 6,700 goal". Each figure and its change are plain text, with the percentage and amounts in bdi elements so a right-to-left layout keeps the signs and units in order. The + and the real minus sign are part of the text, so the change is read as a number with a sign.

Below md the cells stack, one under the other, with a full-width rule and + marks between them instead of the vertical hairline. The figure and its change wrap onto two lines if they need to, and nothing scrolls sideways at 320 pixels.

Add an entry to METRICS and change md:grid-cols-2 to md:grid-cols-3. Every cell after the first draws its own hairline and + mark, so the divider follows on its own. Past three the figures get narrow; for a row of many, a stats block fits better.