v3.11.0 — the history a phone could not show

The page was driven in a real browser for the first time. Everything below was measured there.

The ninety-day history was invisible on every phone

• Ninety bars with a three-pixel gap need 267px of gap; the strip is 252px wide at a 360px viewport. Every bar computed to zero width, so thirteen rows of history rendered as a blank band.
• Bars reach one pixel at a 465px viewport and two at 555px — every common phone is below both. The gap gives way below 600px now.

A day bar says which day it was in height as well as hue

• Simulated over the palette: a reader with deuteranopia sees a good day and a bad one at 1.17:1 — two olives — and a protanope sees a good day and a degraded one at 1.00:1, the same colour. A bar is 4px wide, unlabelled, aria-hidden, so hue was the whole message.
• The palette is unchanged. Good is the full column, degraded two thirds, bad under half.
• A day with no data is a hairline rather than a full block: it was 1.21:1 against its own well, so a row with no history read as a solid band of something.

What a reader on a phone met

• A service name truncated to a letter and a half — "Webhook delivery" as "We…", in German "W…" — because the pill and the latency take the width first. The name takes its own line below 480px. A status page that cannot say which service is down is not one.
• The uptime figure broke across two lines in de, es and fr: the space before the sign was an ordinary one. It is non-breaking.
• An event's timestamp broke into four lines at 360px.
• The pen and the panel's icon links are 24 and 28 CSS pixels; on a coarse pointer they are 36.

Accessibility

• .md a was colour-only until hover and 2.46:1 against the text around it in dark — a 1.4.1 failure. Underlined from the start.
• The dialog's three fields set outline: none, leaving one pixel of border as the only focus cue. Two pixels, offset, like every other control.
• Lighthouse: accessibility, best practices, SEO and agentic browsing all 100, desktop and mobile, 51 audits passed and none failed — none of which covered any of the above.

The design system

• .md code was 6px inside a 20px surface where the concentric rule says 8.
• The #lang chevron carried a hex matching neither theme's --mut; the dialog's shadow and scrim were light-theme values reused unchanged in dark. All three are tokens now, declared in the same three places every colour is — and that rule, held until now by attention alone, has a test.
• The 2px corner on a day bar is written down as the one radius outside the two laws: it is a tick, not a surface.

Held

• Every text pair passes AA in both themes (light floor 4.71:1, dark 5.97:1). Concentric 20/8 with squircles everywhere, capsules on every pill. Icon tiles are hue-on-tint, never white-on-solid. Under prefers-reduced-motion nothing moves at all — getAnimations() is empty and a view transition produces zero animations. No horizontal overflow at 360, 768 or 1440.

Upgrading

• A pull. No schema change.