≤ 640px

phone

Rail: overlay drawer over a scrim; member name hides, role badge stays
Board: one lane per row, in attention order
Tables: rows stack into labelled pairs
Transcript: type label above the body
Decision bar: reason full-width, buttons split the row

≤ 900px

tablet

Rail: collapsed by default, opens as the same drawer
Board: lanes wrap to two rows (auto-fill, min 230px)
Tables and forms: unchanged

≥ 1200px

wide

Rail: open at 220px, collapsible to 0
Board: all five lanes abreast
Main column capped at --container

Reflow, never silent scroll. Every mobile treatment above is a reflow: lanes wrap, table rows become labelled pairs, the rail becomes a drawer. Nothing important is left off-screen behind an unannounced horizontal scroll (see the visibility rule). The literals live in each component's media queries; custom properties cannot appear in @media, so 640 / 900 / 1200 are the system's numbers — do not invent new ones per surface. A desktop-only app surface does not meet the system's bar: the adopting application's open defect is precisely that it has zero media queries at 430px.