@uiresponse/renderer-react 0.1.0

package/src/theme/uir.css

@@ -0,0 +1,1070 @@
+/*
+ * OBL renderer — structural stylesheet.
+ *
+ * Every value here reads a token. There are no literal colours and no literal typefaces below this
+ * comment: a tenant swaps `themeToCssVars()` and the whole page follows. That is the contract.
+ *
+ * Loaded AFTER `@openuidev/react-ui/index.css`. We do NOT restyle their components: in the light
+ * theme this stylesheet emits no `--openui-*` overrides, and nothing here reaches inside a chart, a
+ * control or a table primitive of theirs. Our layer is layout, spacing, and the semantic states OBL
+ * has and they do not — absence, staleness, per-block loading, per-block failure.
+ *
+ * ── DESIGN SOURCE OF TRUTH ────────────────────────────────────────────────────────────────────
+ * Every treatment below is converged on `design/UIR-element-system.dc.html`, the element system Dan
+ * built and approved. That file is the authority; when it and this stylesheet disagree, this one is
+ * wrong. Values live in `theme/tokens.js`, extracted from the sheets rather than eyeballed.
+ *
+ * ── THE COMPOSITION MODEL: ELEMENTS ON A SURFACE ──────────────────────────────────────────────
+ *
+ * A generated page is not a document. It is a handful of elements placed ON the host's surface —
+ * a workroom canvas, a chat thread, a home screen. So there is no inner paper, no bounded sheet,
+ * no masthead, and no horizontal rules. The renderer draws TILES and puts them in a grid.
+ *
+ * What that buys, concretely:
+ *   - Hierarchy comes from TYPE SCALE and TILE SIZE, never from rule weight or a display headline.
+ *   - A one-block page looks like one element in space, not a poster with a lonely chart on it.
+ *   - Chrome scales to content: a dashboard earns a header line; a one-block answer earns a label.
+ *   - The host owns the background. `.uir-page` paints none, so the same blocks drop onto a dark
+ *     canvas, into a chat card, or into a full window without carrying a page-shaped hole with them.
+ *
+ * Earlier passes drew a grey paper sheet with a masthead and full-width hairlines, then an editorial
+ * identity of condensed display type and tracked mono eyebrows. Both are gone. A page a model
+ * generated inside someone else's product must not arrive wearing our personality.
+ */
+
+.uir-page {
+  --uir-row-pad: var(--uir-density-comfortable);
+  /* No background. The surface belongs to the host. */
+  color: var(--uir-color-ink);
+  font-family: var(--uir-font-body);
+  font-size: var(--uir-size-base);
+  line-height: 1.5;
+  padding: var(--uir-space-lg);
+  -webkit-font-smoothing: antialiased;
+}
+.uir-page *, .uir-page *::before, .uir-page *::after { box-sizing: border-box; }
+.uir-shell { display: flex; flex-direction: column; gap: var(--uir-space-xl); margin: 0 auto; max-width: var(--uir-measure); }
+
+/* Chat is a slot, not a smaller page. The artifact keeps exactly the same bytes and semantics; the
+   inline rendering context removes shell padding, width ceremony and the title/status masthead so
+   its blocks land directly in the transcript. Individual data blocks remain tiles when their type
+   needs a frame (table, chart, metric); there is no tile around the group of tiles. */
+.uir-page--inline { padding: 0; }
+.uir-page--inline .uir-shell { gap: var(--uir-space-md); margin: 0; max-width: none; }
+
+/* Numbers, dates and identifiers are set with tabular figures. A column of numbers that does not
+   align on the decimal cannot be compared, and comparison is what the block is for. */
+.uir-num, .uir-mono {
+  font-family: var(--uir-font-mono);
+  font-feature-settings: "tnum" 1, "zero" 1;
+  font-variant-numeric: tabular-nums;
+}
+
+/* A label. Not an eyebrow: no tracking, no uppercase, no mono. */
+.uir-eyebrow {
+  color: var(--uir-color-graphite);
+  font-family: var(--uir-font-body);
+  font-size: var(--uir-size-small);
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+/* ── Header. A line, not a masthead. ──────────────────────────────────────── */
+.uir-header { display: flex; flex-direction: column; gap: 3px; }
+.uir-header__line { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--uir-space-md); }
+.uir-header__title {
+  font-size: var(--uir-size-large);
+  font-weight: 600;
+  letter-spacing: -0.008em;
+  line-height: 1.2;
+  margin: 0;
+}
+.uir-header__subtitle { color: var(--uir-color-graphite); font-size: var(--uir-size-small); margin: 0; max-width: 68ch; }
+
+/* One or two elements is an answer, not a document: the title drops to a label and gets out of
+   the way. A masthead over a single chart is a poster. */
+.uir-header[data-minimal] .uir-header__title {
+  color: var(--uir-color-graphite);
+  font-size: var(--uir-size-small);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.uir-header__status {
+  align-items: center; color: var(--uir-color-faint); display: inline-flex;
+  font-size: var(--uir-size-micro); gap: 0.5em; margin-left: auto;
+}
+.uir-header__status::before {
+  animation: uir-pulse 1.4s ease-in-out infinite; background: var(--uir-color-graphite);
+  border-radius: 50%; content: ""; height: 5px; width: 5px;
+}
+/* The animation is information. It ends when the information does. */
+.uir-header__status[data-settled]::before { animation: none; background: var(--uir-color-positive); }
+@keyframes uir-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
+
+/* ── Sections: a labelled GROUPING of tiles. No frame, no rule, no rail. ────
+   Grouping is legible from the gap around it — which is how grouping works on a canvas. */
+.uir-section { display: flex; flex-direction: column; gap: var(--uir-space-md); }
+/* 12px / 500 / graphite. Not an eyebrow: no tracking, no uppercase (design, "Containers"). */
+.uir-section__label {
+  color: var(--uir-color-graphite);
+  font-size: var(--uir-size-small);
+  font-weight: 500;
+  letter-spacing: 0;
+  margin: 0;
+}
+.uir-section[data-density="compact"] { --uir-row-pad: var(--uir-density-compact); }
+
+/* ── The editorial section: headline, standfirst, then the things. ───────────
+   A section that opens with a `text` block is a magazine section, and its title stops being a filing
+   label and becomes a headline. Nothing about the document changed; this is the renderer reading a
+   composition the document could already express (see containers.jsx `isEditorial`).
+
+   The headline borrows the metric ladder's `primaryValue` rather than introducing a display scale of
+   its own: a section headline and a hero number are the same rank of thing, and the ladder is where
+   this renderer keeps rank. */
+.uir-section[data-editorial] { gap: var(--uir-space-lg); }
+.uir-section[data-editorial] > .uir-section__label {
+  color: var(--uir-color-ink);
+  font-size: var(--uir-size-primary-value);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  margin-bottom: calc(var(--uir-space-md) * -1); /* pull the standfirst up under its headline */
+  max-width: 24ch;
+  text-wrap: balance;
+}
+/* The standfirst: one sentence, set at reading measure, in the quiet voice. */
+.uir-section[data-editorial] > .uir-arrange > .uir-block[data-type="text"]:first-child .uir-text {
+  color: var(--uir-color-graphite);
+  font-size: var(--uir-size-large);
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5;
+  max-width: 64ch;
+}
+
+/* The rail bleeds through the page's right margin. Scoped to an editorial section so a rail inside a
+   card or a drawer keeps its box. `--uir-space-lg` is `.uir-page`'s own padding. */
+.uir-section[data-editorial] .uir-posters[data-mode="rail"] {
+  margin-right: calc(var(--uir-space-lg) * -1);
+  padding-right: var(--uir-space-lg);
+}
+
+/* ── Arrangement. Consistent gaps; the renderer derives the column count. ─── */
+.uir-arrange { align-items: start; display: grid; gap: var(--uir-space-md); }
+.uir-arrange[data-arrangement="stack"] { grid-template-columns: minmax(0, 1fr); }
+.uir-arrange[data-arrangement="row"] { align-items: end; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
+/* There is no `columns` key in OBL (R5) — a voice renderer cannot honour `3`. `auto-fit` IS the
+   renderer deriving the count from the item count and the medium. */
+.uir-arrange[data-arrangement="grid"] { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+.uir-arrange[data-arrangement="flow"] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+
+/* A chart, a table, a timeline and a detail need width the way a metric needs none. They claim the
+   row; the compact tiles wrap above them. Their axes and bands are unusable at 200px. */
+.uir-arrange[data-arrangement="row"]:has(> .uir-block[data-type="chart"]),
+.uir-arrange[data-arrangement="row"]:has(> .uir-block[data-type="table"]),
+.uir-arrange[data-arrangement="row"]:has(> .uir-block[data-type="timeline"]) {
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+.uir-arrange:not([data-arrangement="stack"]) > .uir-block[data-type="chart"],
+.uir-arrange:not([data-arrangement="stack"]) > .uir-block[data-type="timeline"],
+/* A calendar squeezed into a column is seven columns inside one. It claims the row. */
+.uir-arrange:not([data-arrangement="stack"]) > .uir-block[data-type="calendar"],
+.uir-arrange:not([data-arrangement="stack"]) > .uir-block[data-type="table"],
+.uir-arrange:not([data-arrangement="stack"]) > .uir-block[data-type="detail"] { grid-column: 1 / -1; }
+
+@media (max-width: 640px) {
+  .uir-arrange[data-arrangement="row"] { grid-auto-columns: auto; grid-auto-flow: row; }
+  .uir-page { padding: var(--uir-space-md); }
+}
+
+/* ── THE TILE. A discrete, self-contained object placed on the surface. ───── */
+.uir-block { min-width: 0; position: relative; }
+
+.uir-block[data-tile] {
+  background: var(--uir-color-sheet);
+  border: 1px solid var(--uir-color-rule);
+  border-radius: var(--uir-radius-lg);
+  box-shadow: var(--uir-shadow);
+  padding: var(--uir-tile-pad-y) var(--uir-tile-pad-x);
+}
+
+/* STREAMING ARRIVAL. A tile folds in when its data lands — `obFold`, lifted from the design's own
+   <style> block along with its 0.45s cubic-bezier. The frame is already there; what arrives is the
+   content, which is exactly what progressive loading means. */
+@keyframes uir-fold {
+  from { opacity: 0; transform: translateY(7px) scale(0.985); }
+  to   { opacity: 1; transform: none; }
+}
+.uir-block[data-tile][data-state="ready"][data-arrived] { animation: uir-fold var(--uir-motion-fold); }
+
+/* Emphasis is TYPE SCALE and TILE SIZE. A `hero` tile is bigger and says its number louder; it does
+   not get a heavier border, because a heavy border is a rule wearing a costume. */
+.uir-block[data-tile][data-emphasis="hero"] { grid-column: span 2; }
+.uir-block[data-tile][data-type="metric"][data-emphasis="subtle"] { }
+@media (max-width: 520px) { .uir-block[data-tile][data-emphasis="hero"] { grid-column: 1 / -1; } }
+.uir-block[data-tile][data-emphasis="subtle"] { background: transparent; border-color: transparent; box-shadow: none; }
+
+/* A metric and a progress bar are COMPACT tiles: they say one number. Stretched across a stack they
+   become a 900px card with a word in the corner. In a grid they size themselves; in a stack they
+   need a ceiling. (A `hero` metric keeps its full span — that is what `hero` asked for.) */
+.uir-arrange[data-arrangement="stack"] > .uir-block[data-tile][data-type="metric"]:not([data-emphasis="hero"]),
+.uir-arrange[data-arrangement="stack"] > .uir-block[data-tile][data-type="progress"]:not([data-emphasis="hero"]) {
+  max-width: 300px;
+}
+
+.uir-card {
+  background: var(--uir-color-sheet);
+  border: 1px solid var(--uir-color-rule);
+  border-radius: var(--uir-radius-lg);
+  box-shadow: var(--uir-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: var(--uir-space-lg);
+  padding: var(--uir-space-lg);
+}
+.uir-card__title { font-size: var(--uir-size-base); font-weight: 600; letter-spacing: -0.005em; margin: 0; }
+.uir-card--clickable { cursor: pointer; transition: border-color 120ms ease; }
+.uir-card--clickable:hover { border-color: var(--uir-color-brand); }
+.uir-block[data-type="card"][data-emphasis="hero"] { grid-column: 1 / -1; }
+
+/* A card IS a tile; its children are contents, not objects. A tile inside a tile is a box in a box,
+   which is the exact thing this composition model exists to stop. */
+.uir-card .uir-block[data-tile],
+.uir-card .uir-block[data-tile][data-emphasis="hero"] {
+  background: none; border: 0; border-radius: 0; grid-column: auto; padding: 0;
+}
+
+/* ── Tabs: a segmented control, not a ruled tab strip. ────────────────────── */
+.uir-tabs { display: flex; flex-direction: column; gap: var(--uir-space-md); }
+.uir-tabs__list {
+  align-self: start; background: var(--uir-color-sunk); border-radius: 9px; display: inline-flex;
+  gap: 2px; max-width: 100%; overflow-x: auto; padding: 3px; scrollbar-width: none;
+}
+.uir-tab {
+  background: none; border: 0; border-radius: 7px; color: var(--uir-color-graphite); cursor: pointer;
+  font-family: var(--uir-font-body); font-size: var(--uir-size-small); font-weight: 500;
+  padding: 5px 14px; transition: background 120ms ease, color 120ms ease; white-space: nowrap;
+}
+.uir-tab[aria-selected="true"] { background: var(--uir-color-sheet); box-shadow: var(--uir-shadow); color: var(--uir-color-ink); }
+.uir-tab:hover:not([aria-selected="true"]) { color: var(--uir-color-ink); }
+
+/* ── metric — the compact tile. ───────────────────────────────────────────── */
+.uir-metric { display: flex; flex-direction: column; }
+.uir-metric__label { color: var(--uir-color-graphite); font-size: var(--uir-size-label); font-weight: 400; letter-spacing: 0; text-transform: none; }
+.uir-metric__value {
+  font-feature-settings: "tnum" 1;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  margin-top: 8px;
+}
+/* 14px / 400 / faint, 3px off the number — never the same weight as the value it qualifies. */
+.uir-metric__unit { color: var(--uir-color-faint); font-size: var(--uir-size-unit); font-weight: 400; letter-spacing: 0; margin-left: 3px; }
+
+/* The ladder, straight off `01 · Metric`. */
+.uir-metric[data-emphasis="hero"] .uir-metric__value { font-size: var(--uir-size-hero-value); letter-spacing: -0.02em; line-height: 1.05; }
+.uir-metric[data-emphasis="primary"] .uir-metric__value { font-size: var(--uir-size-primary-value); letter-spacing: -0.015em; line-height: 1.1; }
+.uir-metric[data-emphasis="normal"] .uir-metric__value { font-size: var(--uir-size-normal-value); line-height: 1.2; }
+.uir-metric[data-emphasis="subtle"] .uir-metric__value { color: var(--uir-color-muted); font-size: var(--uir-size-subtle-value); font-weight: 500; line-height: 1.3; margin-top: 4px; }
+
+/* DELTA — a renderer capability, ahead of the schema. See viz.jsx: OBL has no `metric.delta`, so a
+   metric without one simply renders none. The treatment is NOT in the design file (it shows no
+   deltas at all); it reuses the design's status-tone chips, and is flagged for Dan in NOTES. */
+.uir-metric__delta {
+  align-items: center; align-self: flex-start; border-radius: 999px; display: inline-flex; gap: 4px;
+  font-size: var(--uir-size-small); font-weight: 500; margin-top: 8px; padding: 2px 8px;
+}
+.uir-metric__delta[data-tone="positive"] { background: var(--uir-color-positive-soft); color: var(--uir-color-positive); }
+.uir-metric__delta[data-tone="negative"] { background: var(--uir-color-negative-soft); color: var(--uir-color-negative); }
+.uir-metric__delta[data-tone="neutral"] { background: var(--uir-color-neutral-soft); color: var(--uir-color-neutral); }
+.uir-metric__delta em { font-style: normal; font-variant-numeric: tabular-nums; }
+.uir-metric__delta span { color: var(--uir-color-graphite); font-weight: 400; }
+.uir-metric--clickable { background: none; border: 0; cursor: pointer; padding: 0; text-align: left; width: 100%; }
+.uir-metric--clickable:hover .uir-metric__value { color: var(--uir-color-brand); }
+
+/* ── Absence. `empty.show: "dash"` is OBL's default because "rendering an unfiled royalty as £0.00
+   is a lie the page tells confidently." The SEMANTIC survives — a missing value is visibly missing,
+   never a zero and never a blank cell. The costume does not: the dotted fill-in rule and the tracked
+   uppercase mono stamp were personality, and a page generated for someone else's product must not
+   arrive wearing ours. Muted text carries the same claim, quietly. */
+.uir-absent { color: var(--uir-color-faint); }
+.uir-metric__value .uir-absent--dash { color: var(--uir-color-rule-strong); }
+.uir-absent--dash { font-variant-numeric: tabular-nums; }
+.uir-absent--text { font-size: var(--uir-size-micro); }
+.uir-absent--zero { color: var(--uir-color-ink); }
+
+/* ── table (`03 · Table`) — a tile whose contents are rows. The tile carries a title row, then the
+   column heads, then rows separated by `ruleSoft`: a separator INSIDE a tile must be lighter than
+   the tile's own border, or the tile reads as a stack of boxes. ── */
+.uir-block[data-type="table"][data-tile] { padding: var(--uir-tile-pad-y) 0 0; }
+.uir-table__head { align-items: center; display: flex; justify-content: space-between; padding: 0 var(--uir-tile-pad-x) var(--uir-space-md); }
+.uir-table__title {
+  color: var(--uir-color-ink); font-size: var(--uir-size-large); font-weight: 600;
+  margin: 0;
+}
+.uir-density { background: var(--uir-color-sunk); border-radius: var(--uir-radius-md); display: inline-flex; gap: 2px; padding: 2px; }
+.uir-density button {
+  background: none; border: 0; border-radius: var(--uir-radius-sm); color: var(--uir-color-graphite);
+  cursor: pointer; font-family: inherit; font-size: var(--uir-size-small); font-weight: 500; padding: 4px 10px;
+}
+.uir-density button[aria-pressed="true"] { background: var(--uir-color-sheet); box-shadow: var(--uir-shadow); color: var(--uir-color-ink); }
+.uir-table-wrap { margin: 0; }
+.uir-table__scroll { overflow-x: auto; scrollbar-width: thin; }
+.uir-table { border-collapse: collapse; font-size: var(--uir-size-base); width: 100%; }
+.uir-table[data-density="comfortable"] { --uir-row-pad: var(--uir-density-comfortable); }
+.uir-table[data-density="compact"] { --uir-row-pad: var(--uir-density-compact); }
+.uir-table thead th {
+  border-top: 1px solid var(--uir-color-rule-soft);
+  color: var(--uir-color-faint);
+  font-size: var(--uir-size-small);
+  font-weight: 500;
+  letter-spacing: 0;
+  padding: 7px var(--uir-tile-pad-x);
+  text-align: left;
+  text-transform: none;
+  white-space: nowrap;
+}
+.uir-table tbody td { border-top: 1px solid var(--uir-color-rule-soft); padding: var(--uir-row-pad) var(--uir-tile-pad-x); vertical-align: middle; }
+.uir-table tbody tr { --row-bg: var(--uir-color-sheet); position: relative; }
+.uir-table tbody tr:hover { --row-bg: var(--uir-color-sunk); background: var(--uir-color-sunk); }
+.uir-table tbody tr[data-clickable="true"] { cursor: pointer; }
+.uir-table tbody tr[data-clickable="true"]:hover { --row-bg: var(--uir-color-brand-soft); background: var(--uir-color-brand-soft); }
+.uir-table tbody td:first-child { color: var(--uir-color-ink); font-weight: 500; }
+.uir-table td[data-numeric="true"], .uir-table th[data-numeric="true"] { text-align: right; }
+.uir-table td[data-numeric="true"] { font-variant-numeric: tabular-nums; }
+.uir-name-cell { align-items: center; display: inline-flex; gap: 10px; }
+.uir-initials {
+  align-items: center; background: var(--uir-color-sunk); color: var(--uir-color-muted); display: inline-flex;
+  flex: none; font-size: 9.5px; font-weight: 600; height: 24px; justify-content: center; letter-spacing: 0.02em; width: 24px;
+}
+.uir-initials[data-shape="round"] { border-radius: 50%; }
+.uir-initials[data-shape="square"] { border-radius: var(--uir-radius-md); color: var(--uir-color-graphite); font-size: 10px; height: 32px; width: 32px; }
+
+/* A column whose declared role is `image` is a picture, not a URL. `role` is the dataset saying what
+   a column MEANS as opposed to what it stores (DECISIONS D7); this is the renderer honouring it. */
+.uir-thumb {
+  background: var(--uir-color-sunk); border: 1px solid var(--uir-color-rule); border-radius: var(--uir-radius-sm);
+  display: block; height: 26px; object-fit: cover; width: 26px;
+}
+.uir-table td:has(> .uir-thumb) { padding-bottom: 5px; padding-top: 5px; width: 1%; }
+
+/* Row verbs float over the row's trailing edge on hover rather than occupying a column: reserving
+   one pushes a six-column table past its tile. Keyboard focus anywhere in the row brings them back,
+   so they are hidden, never unreachable. */
+.uir-table__actions-cell { padding: 0 !important; width: 0; }
+.uir-table__actions {
+  align-items: center; background: var(--row-bg); display: flex; gap: var(--uir-space-sm); opacity: 0;
+  padding: 0 var(--uir-tile-pad-x) 0 var(--uir-space-sm); pointer-events: none; position: absolute;
+  right: 0; top: 50%; transform: translateY(-50%); transition: opacity 110ms ease;
+}
+.uir-table__actions::before {
+  background: linear-gradient(to right, transparent, var(--row-bg)); bottom: 0; content: "";
+  left: -44px; position: absolute; top: 0; width: 44px;
+}
+.uir-table tbody tr:hover .uir-table__actions,
+.uir-table tbody tr:focus-within .uir-table__actions { opacity: 1; pointer-events: auto; }
+.uir-table__actions .uir-button { position: relative; }
+@media (hover: none) {
+  .uir-table__actions { opacity: 1; padding-left: 0; pointer-events: auto; position: static; transform: none; }
+  .uir-table__actions::before { display: none; }
+  .uir-table__actions-cell { padding: var(--uir-row-pad) var(--uir-tile-pad-x) !important; width: auto; }
+}
+.uir-pagination {
+  align-items: center; border-top: 1px solid var(--uir-color-rule-soft); color: var(--uir-color-graphite);
+  display: flex; font-size: var(--uir-size-small); font-variant-numeric: tabular-nums;
+  justify-content: space-between; padding: 10px var(--uir-tile-pad-x);
+}
+.uir-pagination > div { display: flex; gap: 6px; }
+.uir-pagination button {
+  align-items: center; background: var(--uir-color-sheet); border: 1px solid var(--uir-color-rule);
+  border-radius: var(--uir-radius-sm); color: var(--uir-color-muted); cursor: pointer; display: inline-flex;
+  font-family: inherit; font-size: 18px; height: 26px; justify-content: center; line-height: 1; width: 26px;
+}
+.uir-pagination button:hover:not(:disabled) { background: var(--uir-color-sunk-strong); color: var(--uir-color-ink); }
+.uir-pagination button:disabled { cursor: default; opacity: 0.35; }
+
+/* ── list ─────────────────────────────────────────────────────────────────── */
+.uir-list { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--uir-space-sm)); }
+.uir-list__item {
+  align-items: center; background: none; border: 0; border-radius: var(--uir-radius-md);
+  display: flex; gap: var(--uir-space-md); justify-content: space-between; padding: 8px var(--uir-space-sm);
+  text-align: left; width: 100%;
+}
+.uir-list__copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
+/* The sheet's row hover is a quiet ground, not a tinted one: a row that turns blue on hover has
+   spent the accent on the act of pointing at it (design sheet, "04 · List"). */
+.uir-list__item[data-clickable="true"] { cursor: pointer; }
+.uir-list__item[data-clickable="true"]:hover { background: var(--uir-color-sunk-strong); }
+.uir-list__title { font-family: var(--uir-font-body); font-size: var(--uir-size-small); font-weight: 500; letter-spacing: -0.003em; }
+.uir-list__subtitle { color: var(--uir-color-graphite); font-family: var(--uir-font-body); font-size: var(--uir-size-small); letter-spacing: 0; white-space: nowrap; }
+
+/* The one mark a row action gets. It leads the row's trailing edge and moves a hair on hover, which
+   is the whole animation budget for "this opens something". */
+.uir-chevron { align-self: center; flex: none; stroke: var(--uir-color-faint); transition: transform 160ms ease; }
+.uir-list__item[data-clickable="true"]:hover .uir-chevron { transform: translateX(2px); }
+@media (prefers-reduced-motion: reduce) {
+  .uir-chevron { transition: none; }
+  .uir-list__item[data-clickable="true"]:hover .uir-chevron { transform: none; }
+}
+
+/* ── BLUR-UP: an image that arrives, instead of one painted a band at a time. ─
+   The element's BACKGROUND is the low-resolution proxy (`primitives.jsx` sets it inline, from the
+   dataset's `*_thumb_url` column); the element's CONTENT is the full image. `filter` blurs the whole
+   element, so the full image appears already blurred and in register, then sharpens. One element:
+   nothing is positioned over anything, and this drops unchanged into a sleeve, a hero card and a
+   26px table cell, which size their images three different ways.
+
+   With no proxy the image is simply transparent until it has loaded, then fades in whole. That is
+   the universal fallback, and it is the one that kills the top-down JPEG wipe everywhere else. */
+.uir-img {
+  background-position: center; background-repeat: no-repeat; background-size: cover;
+  /* `transform` rides here too, so that the sleeve's hover lift does not have to declare a
+     `transition` of its own and silently drop the filter's. */
+  transition: filter 400ms ease, opacity 400ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
+}
+.uir-img[data-blurup="thumb"]:not([data-loaded]) { filter: blur(12px); }
+.uir-img[data-blurup="none"]:not([data-loaded]) { opacity: 0; }
+.uir-img[data-loaded] { filter: none; opacity: 1; }
+/* The sleeve clips, so its proxy may bleed past the edge the blur softens. Nothing else may. */
+.uir-poster__art > .uir-img[data-blurup="thumb"]:not([data-loaded]) { transform: scale(1.06); }
+@media (prefers-reduced-motion: reduce) {
+  .uir-img { transition: none; }
+  .uir-poster__art > .uir-img[data-blurup="thumb"]:not([data-loaded]) { transform: none; }
+}
+
+/* ── posters: a list of things you can SEE ───────────────────────────────────
+   The artwork is the ink. Everything around it is monochrome and quiet, so that the only colour on
+   the page is the colour the label actually made. There is no card: no border, no fill, no shadow.
+   Framing a picture is what makes a screen look like a dashboard.
+
+   `grid` for three or fewer, `rail` for four or more — the renderer's call, from the content
+   (see PosterList). The rail runs past the right edge on purpose: a carousel that stops flush with
+   its container reads as a grid that failed, and one that bleeds says there is more to push through. */
+.uir-posters { display: grid; gap: var(--uir-space-lg); }
+.uir-posters[data-mode="grid"] { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); }
+.uir-posters[data-mode="rail"] {
+  grid-auto-columns: minmax(150px, 184px);
+  grid-auto-flow: column;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding-bottom: var(--uir-space-sm);
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+}
+.uir-posters[data-mode="rail"] > .uir-poster { scroll-snap-align: start; }
+
+.uir-poster {
+  background: none; border: 0; display: flex; flex-direction: column; gap: 2px;
+  min-width: 0; padding: 0; text-align: left; width: 100%;
+}
+.uir-poster__art {
+  aspect-ratio: 1 / 1;                       /* a record is square */
+  background: var(--uir-color-sunk);
+  border-radius: var(--uir-radius-md);
+  display: block;
+  margin-bottom: var(--uir-space-sm);
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+/* The ring is INSIDE the art, so a white-ground cover keeps an edge without the page growing a
+   border. It is the sleeve's own edge, not a frame around it. */
+.uir-poster__art::after {
+  border-radius: inherit; box-shadow: inset 0 0 0 1px var(--uir-color-rule);
+  content: ""; inset: 0; pointer-events: none; position: absolute;
+}
+.uir-poster__art > img { display: block; height: 100%; object-fit: cover; width: 100%; }
+/* No cover yet. A plate, not a broken-image glyph, and not a missing card. */
+.uir-poster__art[data-empty] { background: var(--uir-color-sunk); }
+
+.uir-poster__title {
+  color: var(--uir-color-ink); font-size: var(--uir-size-large); font-weight: 600;
+  letter-spacing: -0.01em; line-height: 1.25;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
+}
+.uir-poster__caption {
+  color: var(--uir-color-graphite); font-size: var(--uir-size-small); line-height: 1.45;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
+}
+
+/* One micro-interaction, and only on things you can actually open. */
+.uir-poster[data-clickable="true"] { cursor: pointer; }
+/* The transition lives on `.uir-img`, which every sleeve's art now is. Re-declaring it here would
+   replace the blur-up's `filter` transition rather than add to it. */
+.uir-poster[data-clickable="true"]:hover .uir-poster__art > img { transform: scale(1.03); }
+.uir-poster[data-clickable="true"]:hover .uir-poster__title { color: var(--uir-color-brand); }
+.uir-poster:focus-visible { border-radius: var(--uir-radius-md); outline: 2px solid var(--uir-color-focus); outline-offset: 3px; }
+@media (prefers-reduced-motion: reduce) {
+  .uir-poster[data-clickable="true"]:hover .uir-poster__art > img { transform: none; }
+}
+
+/* A shelf needs the width of the page, not a column of a grid — and no tile around it. A `list` is a
+   tile, and a tile has a border, a fill and a shadow; drawn around a row of sleeves that is a frame
+   around a frame around a picture. The pictures ARE the objects. Nothing else needs an edge. */
+.uir-arrange:not([data-arrangement="stack"]) > .uir-block[data-type="list"]:has(.uir-posters) { grid-column: 1 / -1; }
+.uir-block[data-tile][data-type="list"]:has(.uir-posters) {
+  background: none;
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+/* ── detail ───────────────────────────────────────────────────────────────────
+   A record has a name, a state, and then some facts, and it must not say all three in one voice.
+   The name is set on the METRIC ladder (tokens.js `size`), not on a new scale — a record's name and
+   a metric's value are the same rank of thing, and `emphasis` already governs that rank. Everything
+   below the name is deliberately quiet: the facts are a caption, not a competing column of text. */
+.uir-detail { display: flex; flex-direction: column; gap: var(--uir-space-lg); margin: 0; }
+.uir-detail__head { display: flex; flex-direction: column; gap: var(--uir-space-sm); align-items: flex-start; }
+.uir-detail__name {
+  color: var(--uir-color-ink); font-size: var(--uir-size-normal-value); font-weight: 600;
+  letter-spacing: -0.01em; line-height: 1.15; margin: 0; text-wrap: balance;
+}
+/* Emphasis is type scale, never colour or rule weight (tokens.js). Same ladder as `metric`. */
+.uir-detail[data-emphasis="hero"] .uir-detail__name { font-size: var(--uir-size-hero-value); letter-spacing: -0.02em; line-height: 1.05; }
+.uir-detail[data-emphasis="primary"] .uir-detail__name { font-size: var(--uir-size-primary-value); letter-spacing: -0.015em; line-height: 1.1; }
+.uir-detail[data-emphasis="subtle"] .uir-detail__name { color: var(--uir-color-muted); font-size: var(--uir-size-subtle-value); font-weight: 500; }
+
+.uir-detail__badges { display: flex; flex-wrap: wrap; gap: var(--uir-space-sm); }
+
+.uir-detail__facts { display: grid; gap: 0; margin: 0; }
+.uir-detail__row { align-items: baseline; display: grid; gap: var(--uir-space-md); grid-template-columns: minmax(110px, 26%) 1fr; padding: 7px 0; }
+.uir-detail__row + .uir-detail__row { border-top: 1px solid var(--uir-color-rule); }
+/* A headed detail's facts are metadata. The rules between them go from `rule` to `ruleSoft`: they
+   separate a caption, and a caption does not need a table's scaffolding to be read. */
+.uir-detail[data-headed] .uir-detail__row + .uir-detail__row { border-top-color: var(--uir-color-rule-soft); }
+.uir-detail dt { color: var(--uir-color-graphite); font-size: var(--uir-size-small); }
+.uir-detail__value { font-size: var(--uir-size-small); font-variant-numeric: tabular-nums; margin: 0; }
+.uir-detail__value[data-numeric="true"] { font-variant-numeric: tabular-nums; }
+.uir-detail__link { color: var(--uir-color-brand); text-decoration: none; overflow-wrap: anywhere; }
+.uir-detail__link:hover { text-decoration: underline; }
+
+/* `layout.density` is a container's word about its contents, and a detail's rows are contents. */
+.uir-section[data-density="compact"] .uir-detail__row { padding: 3px 0; }
+.uir-section[data-density="compact"] .uir-detail { gap: var(--uir-space-md); }
+
+/* ── the hero record card: a sleeve, not two stacked boxes ────────────────────
+   When a card composes MEDIA and DETAIL, the two are not siblings in a stack — they are one object
+   seen and one object named. The cover bleeds to three edges of the card and squares off, which is
+   what a record sleeve does, and the name sits against it rather than under it.
+
+   Inferred from the blocks the author composed, never from a new prop: `:has()` reads the same
+   document the voice renderer reads, and a renderer that cannot do `:has()` simply draws the stack. */
+.uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) {
+  column-gap: var(--uir-space-xl);
+  display: grid;
+  grid-template-columns: minmax(150px, 32%) 1fr;
+  /* THE THIRD ROW EXISTS TO ABSORB SLACK, and it is the whole reason this composition works.
+     A grid item spanning several tracks has its height distributed across the INTRINSIC ones
+     (`auto`, `min-content`, `max-content`). With `grid-auto-rows: min-content`, the cover — taller
+     than the two text rows put together — inflated both of them, and the record's name floated into
+     the middle of the card with a void above it. `1fr` is flexible, not intrinsic, so the spanning
+     cover's extra height lands there and the badge and the name stay where they were put. */
+  grid-template-rows: min-content min-content 1fr;
+  /* The cover's height is the card's; text alone would letterbox it into a strip. */
+  min-height: 232px;
+  row-gap: var(--uir-space-md);
+}
+.uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) > .uir-block {
+  grid-column: 2;
+  min-width: 0;
+}
+.uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) > .uir-block[data-type="media"] {
+  /* `.uir-arrange` aligns its items to `start`, which is right for tiles of unequal height and wrong
+     for a plate that must fill the card. Its image is out of flow, so without this the block is
+     exactly zero pixels tall and the cover does not exist. */
+  align-self: stretch;
+  grid-column: 1;
+  grid-row: 1 / -1;
+  /* Cancel the card's own padding on the three edges the cover reaches. */
+  margin: calc(var(--uir-space-lg) * -1) 0 calc(var(--uir-space-lg) * -1) calc(var(--uir-space-lg) * -1);
+}
+/* `order` is honoured by grid auto-placement, so the status chip lands beside the name rather than
+   beneath the facts — without touching the document's block order, which is the author's claim. */
+.uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) > .uir-block[data-type="badge"] { order: -1; }
+
+/* The image is taken OUT OF FLOW so it contributes no height of its own to the tracks it spans —
+   see the note on the third row. It fills the plate it is given, and `cover` crops rather than
+   distorts: a sleeve with the wrong aspect ratio is a different artwork. */
+.uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) .uir-media {
+  height: 100%;
+  position: relative;
+}
+.uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) .uir-media__image {
+  border-radius: var(--uir-radius-lg) 0 0 var(--uir-radius-lg);
+  height: 100%;
+  inset: 0;
+  object-fit: cover;
+  position: absolute;
+  width: 100%;
+}
+
+/* Narrow: the sleeve goes back on top, square, and the name reads beneath it. Everything the wide
+   composition needed — the spanned column, the slack row, the out-of-flow image — is undone here,
+   because a single column has no span to absorb and no plate to fill. */
+@media (max-width: 640px) {
+  .uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) {
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+    min-height: 0;
+  }
+  .uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) > .uir-block,
+  .uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) > .uir-block[data-type="media"] {
+    grid-column: 1;
+    grid-row: auto;
+  }
+  .uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) > .uir-block[data-type="media"] {
+    margin: calc(var(--uir-space-lg) * -1) calc(var(--uir-space-lg) * -1) 0;
+  }
+  .uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) .uir-media {
+    height: auto;
+    position: static;
+  }
+  .uir-card > .uir-arrange:has(> .uir-block[data-type="media"]):has(> .uir-block[data-type="detail"]) .uir-media__image {
+    aspect-ratio: 1 / 1;
+    border-radius: var(--uir-radius-lg) var(--uir-radius-lg) 0 0;
+    height: auto;
+    position: static;
+  }
+}
+
+/* ── timeline: the distance between two items reflects the distance between their dates. ── */
+.uir-timeline { position: relative; }
+.uir-timeline__track { height: 224px; position: relative; }
+.uir-timeline__axis { background: var(--uir-color-rule); height: 1px; left: 0; position: absolute; right: 0; top: 50%; }
+.uir-timeline__today-line { border-left: 1px dashed var(--uir-color-rule-strong); bottom: 50%; position: absolute; top: 2px; width: 0; }
+.uir-timeline__today {
+  color: var(--uir-color-faint); font-family: var(--uir-font-mono); font-size: 9.5px;
+  position: absolute; top: -6px; transform: translateX(-50%);
+}
+.uir-timeline__ticks { bottom: 16px; left: 0; position: absolute; right: 0; }
+.uir-timeline__ticks span { color: var(--uir-color-faint); font-size: var(--uir-size-micro); position: absolute; transform: translateX(-50%); }
+.uir-timeline__item { bottom: 0; position: absolute; top: 0; width: 0; }
+.uir-timeline__dot {
+  background: var(--uir-color-brand); border: 2px solid var(--uir-color-sheet); border-radius: 50%;
+  height: 10px; left: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 10px; z-index: 2;
+}
+.uir-timeline__span { background: var(--uir-color-brand); height: 3px; opacity: 0.22; position: absolute; top: 50%; transform: translateY(-50%); }
+.uir-timeline__stem { background: var(--uir-color-rule-strong); left: 0; position: absolute; width: 1px; }
+/* Four lanes. The stem grows to reach whichever lane its caption sits in, so every label is still
+   tied to its own dot — a caption that floats free of its point is worse than a collision. */
+.uir-timeline__item[data-side="above"] .uir-timeline__stem { bottom: 50%; height: 16px; }
+.uir-timeline__item[data-side="below"] .uir-timeline__stem { height: 16px; top: 50%; }
+.uir-timeline__item[data-lane="2"] .uir-timeline__stem { height: 58px; }
+.uir-timeline__item[data-lane="3"] .uir-timeline__stem { height: 58px; }
+
+.uir-timeline__caption { position: absolute; text-align: center; transform: translateX(-50%); width: 104px; }
+.uir-timeline__item[data-side="above"] .uir-timeline__caption { bottom: calc(50% + 18px); }
+.uir-timeline__item[data-side="below"] .uir-timeline__caption { display: flex; flex-direction: column-reverse; top: calc(50% + 18px); }
+.uir-timeline__item[data-lane="2"] .uir-timeline__caption { bottom: calc(50% + 60px); }
+.uir-timeline__item[data-lane="3"] .uir-timeline__caption { top: calc(50% + 60px); }
+.uir-timeline__label {
+  -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden;
+  font-family: var(--uir-font-body); font-size: var(--uir-size-small); font-weight: 500; letter-spacing: -0.003em; line-height: 1.2;
+}
+.uir-timeline__date { color: var(--uir-color-faint); font-size: var(--uir-size-micro); margin-top: 2px; white-space: nowrap; }
+.uir-timeline__item[data-side="below"] .uir-timeline__date { margin: 0 0 2px; }
+
+/* ── progress ─────────────────────────────────────────────────────────────── */
+.uir-progress__head { align-items: baseline; display: flex; gap: var(--uir-space-md); justify-content: space-between; margin-bottom: 8px; }
+.uir-progress__track { background: var(--uir-color-sunk); border-radius: 999px; height: 6px; overflow: hidden; }
+/* `obBarIn` from design sheet `2a`: the bar draws itself in from zero on arrival, and TRANSITIONS
+   thereafter — a re-resolved value slides, it does not redraw from nothing. Two different events,
+   two different motions, which is why the sheet specifies both. */
+.uir-progress__fill {
+  animation: uir-bar-in var(--uir-motion-bar-in);
+  background: var(--uir-color-brand);
+  border-radius: 999px;
+  height: 100%;
+  transition: width 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+@keyframes uir-bar-in { from { width: 0; } }
+.uir-progress__value { font-size: var(--uir-size-small); font-variant-numeric: tabular-nums; font-weight: 500; }
+.uir-progress__ratio { color: var(--uir-color-graphite); font-weight: 400; }
+
+/* ── badge: a status, stated. An element, not a tile. ─────────────────────── */
+.uir-badge {
+  align-items: center; border-radius: 999px; display: inline-flex; gap: 0.4em;
+  font-family: var(--uir-font-body); font-size: var(--uir-size-micro); font-weight: 500;
+  letter-spacing: 0; padding: 3px 10px; text-transform: none; white-space: nowrap;
+}
+/* The same badge, inside a row. It sits on the cell's baseline rather than claiming its own line,
+   because a table's rows must stay the same height or the column stops being scannable. */
+.uir-badge--cell { font-size: var(--uir-size-micro); vertical-align: baseline; }
+.uir-badge[data-tone="positive"] { background: var(--uir-color-positive-soft); color: var(--uir-color-positive); }
+.uir-badge[data-tone="warning"] { background: var(--uir-color-warning-soft); color: var(--uir-color-warning); }
+.uir-badge[data-tone="negative"] { background: var(--uir-color-negative-soft); color: var(--uir-color-negative); }
+.uir-badge[data-tone="info"] { background: var(--uir-color-info-soft); color: var(--uir-color-info); }
+.uir-badge[data-tone="neutral"] { background: var(--uir-color-neutral-soft); color: var(--uir-color-neutral); }
+.uir-badge__label { color: var(--uir-color-graphite); font-weight: 400; }
+
+/* ── text: prose on the surface. No tile, no quote bar. ───────────────────── */
+.uir-text { font-size: var(--uir-size-small); margin: 0; max-width: 70ch; }
+.uir-text[data-emphasis="hero"] { font-size: var(--uir-size-large); font-weight: 600; letter-spacing: -0.01em; }
+.uir-text[data-emphasis="primary"] { font-size: var(--uir-size-base); font-weight: 500; }
+.uir-text[data-emphasis="subtle"] { color: var(--uir-color-graphite); }
+
+/* ── media ────────────────────────────────────────────────────────────────── */
+/* ── Calendar. A bounded period, drawn whole. ──────────────────────────────────
+   Every day of the period is present, including the empty ones: a month with its empty days removed
+   is not a month, it is a list — and the block for lists is `list`. */
+.uir-calendar__head { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: var(--uir-space-md); }
+.uir-calendar__count { color: var(--uir-color-faint); font-size: var(--uir-size-micro); }
+.uir-calendar__grid { display: grid; gap: 1px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.uir-calendar__weekday {
+  color: var(--uir-color-faint);
+  font-size: var(--uir-size-micro);
+  font-weight: 500;
+  padding-bottom: var(--uir-space-sm);
+  text-align: center;
+}
+.uir-calendar__cell {
+  background: var(--uir-color-sheet);
+  border-radius: var(--uir-radius-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 62px;
+  outline: 1px solid var(--uir-color-rule-soft);
+  padding: var(--uir-space-sm);
+}
+/* The days that make the weeks line up. Present, because the shape of the month depends on them;
+   quiet, because they are not in the period the reader asked about. */
+.uir-calendar__cell[data-outside] { opacity: 0.38; }
+.uir-calendar__cell[data-occupied] { background: var(--uir-color-brand-soft); }
+.uir-calendar__date { color: var(--uir-color-graphite); font-size: var(--uir-size-micro); font-variant-numeric: tabular-nums; }
+.uir-calendar__item {
+  color: var(--uir-color-ink);
+  font-size: var(--uir-size-micro);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uir-calendar[data-span="week"] .uir-calendar__cell { min-height: 96px; }
+
+.uir-media { margin: 0; }
+.uir-media__image { border-radius: var(--uir-radius-md); display: block; max-width: 100%; }
+.uir-media__caption { color: var(--uir-color-graphite); font-size: var(--uir-size-small); margin-top: var(--uir-space-sm); }
+.uir-audio { align-items: center; display: flex; gap: var(--uir-space-md); }
+.uir-audio > audio { display: none; }
+.uir-audio > button {
+  align-items: center; background: var(--uir-color-ink); border: 0; border-radius: 50%; color: var(--uir-color-sheet);
+  cursor: pointer; display: inline-flex; flex: none; height: 32px; justify-content: center; padding: 0; width: 32px;
+}
+.uir-audio > button:hover { background: var(--uir-color-muted); }
+.uir-audio > button span { font-size: 10px; transform: translateX(1px); }
+.uir-audio__body { flex: 1; min-width: 0; }
+.uir-audio__line { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
+.uir-audio__line strong { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uir-audio__line span { color: var(--uir-color-graphite); flex: none; font-size: var(--uir-size-small); font-variant-numeric: tabular-nums; }
+.uir-audio__track { background: var(--uir-color-rule-soft); border-radius: 2px; height: 3px; margin-top: 8px; overflow: hidden; }
+.uir-audio__track span { background: var(--uir-color-ink); display: block; height: 100%; }
+
+/* The frame reserves its box from `aspect` BEFORE the provider loads. Nothing else in the renderer
+   knows a third-party frame's shape, and a page that reflows around one is a page that jumps. */
+.uir-media__frame {
+  background: var(--uir-color-sunk);
+  border-radius: var(--uir-radius-md);
+  overflow: hidden;
+  width: 100%;
+}
+/* A portrait frame given the tile's full width would be taller than the viewport. `aspect` is the
+   semantic claim the page made; the cap is this renderer's answer to it, not a second claim. */
+.uir-media__frame[data-aspect="9:16"] { max-width: 320px; }
+.uir-media__embed { border: 0; display: block; height: 100%; width: 100%; }
+.uir-embed-meta { align-items: center; display: flex; gap: 9px; padding: 11px 6px 2px; }
+.uir-embed-meta__icon {
+  align-items: center; background: var(--uir-color-sunk); border: 1px solid var(--uir-color-rule);
+  border-radius: 4px; color: var(--uir-color-graphite); display: inline-flex; flex: none; font-size: 9px;
+  font-weight: 600; height: 16px; justify-content: center; width: 16px;
+}
+.uir-embed-meta__copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
+.uir-embed-meta__copy strong { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uir-embed-meta__copy span { color: var(--uir-color-faint); font-family: var(--uir-font-mono); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uir-embed-meta a { color: var(--uir-color-graphite); flex: none; font-size: var(--uir-size-small); font-weight: 500; text-decoration: none; }
+.uir-embed-meta a:hover { color: var(--uir-color-ink); }
+
+/* ── input / button ───────────────────────────────────────────────────────── */
+.uir-field { display: flex; flex-direction: column; gap: 5px; max-width: 280px; }
+.uir-input, .uir-select {
+  appearance: none; background: var(--uir-color-sheet); border: 1px solid var(--uir-color-rule-strong);
+  border-radius: var(--uir-radius-md); color: var(--uir-color-ink); font-family: var(--uir-font-body);
+  font-size: var(--uir-size-small); padding: 7px 10px; width: 100%;
+}
+.uir-select {
+  background-image: linear-gradient(45deg, transparent 50%, var(--uir-color-graphite) 50%), linear-gradient(135deg, var(--uir-color-graphite) 50%, transparent 50%);
+  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
+  background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 30px;
+}
+.uir-select-row { align-items: center; display: flex; gap: 10px; }
+.uir-select-row .uir-select { flex: 1; min-width: 0; }
+.uir-select-clear { background: none; border: 0; color: var(--uir-color-graphite); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 4px 2px; }
+.uir-select-clear:hover { color: var(--uir-color-ink); }
+.uir-input:focus-visible, .uir-select:focus-visible, .uir-button:focus-visible, .uir-tab:focus-visible,
+.uir-list__item:focus-visible, .uir-table tbody tr:focus-visible, .uir-metric--clickable:focus-visible {
+  outline: 2px solid var(--uir-color-focus); outline-offset: 2px;
+}
+.uir-toggle { align-items: center; display: flex; font-size: 13.5px; justify-content: space-between; max-width: 280px; padding: 7px 0; }
+.uir-toggle > button {
+  background: var(--uir-color-rule); border: 0; border-radius: 11px; cursor: pointer; display: flex;
+  height: 22px; padding: 2px; transition: background 150ms ease; width: 36px;
+}
+.uir-toggle > button > span {
+  background: var(--uir-color-sheet); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  display: block; height: 18px; transform: translateX(0); transition: transform 150ms ease; width: 18px;
+}
+.uir-toggle > button[aria-checked="true"] { background: var(--uir-color-brand); }
+.uir-toggle > button[aria-checked="true"] > span { transform: translateX(14px); }
+
+.uir-button {
+  background: var(--uir-color-ink); border: 1px solid var(--uir-color-ink); border-radius: var(--uir-radius-md);
+  color: var(--uir-color-sheet); cursor: pointer; font-family: var(--uir-font-body); font-size: var(--uir-size-small);
+  font-weight: 500; letter-spacing: 0; padding: 7px 14px; text-transform: none;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.uir-button:hover:not(:disabled) { background: var(--uir-color-brand); border-color: var(--uir-color-brand); }
+.uir-button--ghost { background: var(--uir-color-sheet); border-color: var(--uir-color-rule-strong); color: var(--uir-color-ink); }
+.uir-button--ghost:hover:not(:disabled) { background: var(--uir-color-brand-soft); border-color: var(--uir-color-brand); color: var(--uir-color-brand); }
+.uir-button--danger { background: var(--uir-color-sheet); border-color: var(--uir-color-rule); color: var(--uir-color-negative); }
+.uir-button--danger:hover:not(:disabled) { background: var(--uir-color-negative-soft); border-color: var(--uir-color-negative); color: var(--uir-color-negative); }
+.uir-button--confirm { background: #D92D20; border-color: #D92D20; color: #FFFFFF; }
+.uir-button--confirm:hover:not(:disabled) { background: var(--uir-color-negative); border-color: var(--uir-color-negative); }
+.uir-button--small { font-size: var(--uir-size-micro); padding: 4px 9px; }
+.uir-button:disabled { cursor: not-allowed; opacity: 0.45; }
+
+/* A disabled verb must say WHY. Anchored from the right so a 260px tooltip cannot widen a table. */
+.uir-disabled-wrap { display: inline-flex; position: relative; }
+.uir-disabled-wrap .uir-reason {
+  background: var(--uir-color-ink); border-radius: var(--uir-radius-md); bottom: calc(100% + 6px);
+  color: var(--uir-color-sheet); font-family: var(--uir-font-body); font-size: var(--uir-size-micro);
+  letter-spacing: 0; line-height: 1.35; opacity: 0; padding: 7px 9px; pointer-events: none;
+  position: absolute; right: 0; text-transform: none;
+  transition: opacity 110ms ease, visibility 110ms; visibility: hidden;
+  max-width: 260px; width: max-content; z-index: 5;
+}
+.uir-disabled-wrap:hover .uir-reason, .uir-disabled-wrap:focus-within .uir-reason { opacity: 1; visibility: visible; }
+
+/* Default confirmation surface (`12 · Button`). */
+.uir-confirm { align-items: center; display: flex; inset: 0; justify-content: center; position: fixed; z-index: 60; }
+.uir-confirm__scrim { background: rgba(9,9,11,0.28); border: 0; inset: 0; padding: 0; position: absolute; }
+.uir-confirm__panel {
+  background: var(--uir-color-sheet); border-radius: var(--uir-radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,0.18);
+  box-sizing: border-box; padding: 18px 18px 14px; position: relative; width: min(280px, calc(100vw - 32px));
+}
+.uir-confirm__panel:focus { outline: none; }
+.uir-confirm__panel h2 { font-size: 14.5px; font-weight: 600; margin: 0; }
+.uir-confirm__panel p { color: var(--uir-color-muted); font-size: 12.5px; line-height: 1.5; margin: 6px 0 0; }
+.uir-confirm__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
+.uir-confirm__actions .uir-button { border-radius: 7px; font-size: 12.5px; padding: 5px 12px; }
+
+/* ── Progressive loading (`States — skeleton`). The tile shape holds while content streams. The
+   shimmer is the design's `obShimmer`: a 90deg sweep across a 480px-wide gradient, 1.4s linear. ── */
+/* ── Arrival, row by row. ────────────────────────────────────────────────────
+   `data-arrived` is already set on the exact frame a block's data lands (UIResponsePage). The block folds
+   in; its rows rise in behind it, one short beat apart. Nothing new is invented — this is `uir-fold`
+   read one level deeper, so a view assembles like it is being poured rather than stamped.
+
+   `--uir-i` is the row's capped index (data.jsx). The delay is bounded by that cap, never by the
+   row count: a 3,000-row table finishes arriving in under half a second, like a 12-row one. */
+.uir-block[data-arrived] .uir-table tbody tr,
+.uir-block[data-arrived] .uir-list__item,
+.uir-block[data-arrived] .uir-poster {
+  animation: uir-rise 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
+  animation-delay: calc(var(--uir-i, 0) * 34ms);
+}
+@keyframes uir-rise { from { opacity: 0; transform: translateY(6px); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .uir-block[data-arrived] .uir-table tbody tr,
+  .uir-block[data-arrived] .uir-list__item,
+  .uir-block[data-arrived] .uir-poster { animation: none; }
+}
+
+@keyframes uir-shimmer { from { background-position: -240px 0; } to { background-position: 240px 0; } }
+.uir-skeleton { display: flex; flex-direction: column; padding-top: 0; }
+.uir-skeleton__bar, .uir-skeleton__value {
+  animation: uir-shimmer var(--uir-motion-shimmer);
+  background: linear-gradient(90deg, var(--uir-shimmer-from) 25%, var(--uir-shimmer-to) 40%, var(--uir-shimmer-from) 60%);
+  background-size: 480px 100%;
+}
+.uir-skeleton__bar { border-radius: 5px; height: 10px; margin-top: 14px; }
+.uir-skeleton__bar:first-child { margin-top: 0; width: 88px; }
+.uir-skeleton__bar--wide { width: 100%; }
+.uir-skeleton__bar--mid { width: 62%; }
+.uir-skeleton__bar--narrow { width: 34%; }
+.uir-skeleton__value { border-radius: 6px; height: 28px; margin-top: 12px; width: 150px; }
+
+/* What the document already said, set in real type. It does not shimmer, and it does not move when
+   the rows arrive: these are the same styles the finished block uses. */
+.uir-skeleton__heading { font-size: var(--uir-size-base); font-weight: 600; letter-spacing: -0.005em; margin: 0; }
+.uir-skeleton__label { color: var(--uir-color-graphite); font-size: var(--uir-size-label); }
+.uir-skeleton__cols {
+  border-bottom: 1px solid var(--uir-color-rule); color: var(--uir-color-faint); display: flex;
+  font-size: var(--uir-size-small); gap: var(--uir-space-lg); margin-top: var(--uir-space-md);
+  padding-bottom: var(--uir-space-sm);
+}
+.uir-loading-rule { display: none; }
+.uir-block[data-stale="true"] { opacity: 0.45; transition: opacity 140ms ease; }
+
+/* VALIDATION TICK (`States — validation`). Off by default: a tick means "this block was validated",
+   and the renderer does not validate — Phase 2 runs before it. The host says so with `validated`,
+   or nothing is drawn. A mark that appears whether or not the check ran is a decoration. */
+@keyframes uir-tick {
+  0% { opacity: 0; transform: scale(0.6); }
+  15%, 75% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0; transform: scale(1); }
+}
+.uir-tick {
+  align-items: center; animation: uir-tick var(--uir-motion-tick); background: var(--uir-color-sheet);
+  border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,0.14); display: inline-flex; height: 18px;
+  justify-content: center; pointer-events: none; position: absolute; right: -7px; top: -7px; width: 18px; z-index: 3;
+}
+.uir-tick svg { display: block; }
+.uir-tick polyline { fill: none; stroke: var(--uir-color-tick); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+
+/* NARRATION — the commentary track. Prose, not chrome: the same voice as the chat thread's
+   sentences, sitting between tiles like a person talking you through what just landed. */
+.uir-narration {
+  animation: uir-fold 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
+  color: var(--uir-color-ink); font-size: var(--uir-size-base); line-height: 1.6;
+  margin: 2px 2px 4px; text-wrap: pretty;
+}
+@media (prefers-reduced-motion: reduce) { .uir-narration { animation: none; } }
+
+/* The tick is a transient flourish — it announces, holds, and fades. With motion off there is no
+   moment to announce, and a mark frozen at its end state is invisible anyway; drop it whole. */
+@media (prefers-reduced-motion: reduce) {
+  .uir-tick { display: none; }
+}
+
+/* ── An error is one TILE that failed, not an outage (`States — error`). It says so at tile scale,
+   names the thing it could not resolve in mono, and offers the one action that can help. ── */
+.uir-error { align-items: flex-start; display: flex; gap: 11px; min-width: 0; }
+.uir-error__mark {
+  align-items: center; background: var(--uir-color-negative-soft); border-radius: 9px;
+  color: var(--uir-color-negative); display: inline-flex; flex: none; font-size: var(--uir-size-micro);
+  font-weight: 600; height: 18px; justify-content: center; line-height: 1; margin-top: 1px; width: 18px;
+}
+.uir-error__body { display: flex; flex-direction: column; min-width: 0; }
+.uir-error__label { color: var(--uir-color-ink); font-size: var(--uir-size-label); font-weight: 500; }
+.uir-error__msg {
+  -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--uir-color-graphite); display: -webkit-box;
+  font-size: var(--uir-size-small); line-height: 1.45; margin-top: 3px; overflow: hidden;
+}
+.uir-error__msg code { background: none; font-family: var(--uir-font-mono); font-size: var(--uir-size-micro); padding: 0; }
+.uir-error__retry {
+  align-self: flex-start; background: var(--uir-color-sheet); border: 1px solid var(--uir-color-rule);
+  border-radius: var(--uir-radius-sm); color: var(--uir-color-muted); cursor: pointer;
+  font-family: inherit; font-size: var(--uir-size-small); font-weight: 500; margin-top: 9px; padding: 3px 10px;
+}
+.uir-error__retry:hover { background: var(--uir-color-sunk-strong); color: var(--uir-color-ink); }
+
+/* ── chart: the plot fills its tile; nothing frames it twice. ─────────────── */
+.uir-chart-frame { margin: 0; }
+
+/* Multi-series legend (`02 · Chart`). Value beside its label, tabular, not hidden in a tooltip. */
+.uir-chart__legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 10px; }
+.uir-chart__legend-item { align-items: center; display: inline-flex; gap: 6px; }
+.uir-chart__swatch { border-radius: 4px; height: 8px; width: 8px; }
+.uir-chart__legend-label { color: var(--uir-color-muted); font-size: var(--uir-size-small); }
+.uir-chart__legend-value { color: var(--uir-color-ink); font-size: var(--uir-size-small); font-weight: 600; font-variant-numeric: tabular-nums; }
+.uir-chart-frame__inner { width: 100%; }
+
+/* pie/donut: the ring is sized within the tile and the legend reads beside it, WITH values.
+   Their built-in legend puts labels under a ring that grows to fill whatever box it is given —
+   which is how a four-slice donut became a bloated hoop with three slivers bunched at the top. */
+.uir-pie { align-items: center; display: grid; gap: var(--uir-space-xl); grid-template-columns: auto minmax(0, auto); justify-content: start; }
+@media (max-width: 460px) { .uir-pie { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
+/* The legend reads BESIDE the ring, and its value sits next to its label — not flung to the far
+   edge of the tile. A percentage a reader has to track across 600px is a percentage they will not read. */
+.uir-pie__legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; width: min(340px, 100%); }
+.uir-pie__row { align-items: center; display: grid; gap: var(--uir-space-sm); grid-template-columns: 9px minmax(0, 1fr) auto auto; }
+.uir-pie__swatch { border-radius: 2px; height: 9px; width: 9px; }
+.uir-pie__label { color: var(--uir-color-ink); font-size: var(--uir-size-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uir-pie__value { font-size: var(--uir-size-small); font-variant-numeric: tabular-nums; font-weight: 500; }
+.uir-pie__pct { color: var(--uir-color-faint); font-size: var(--uir-size-small); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
+
+@media (prefers-reduced-motion: reduce) {
+  .uir-page *, .uir-page *::before, .uir-page *::after {
+    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
+  }
+  .uir-loading-rule::after { transform: scaleX(0.35); }
+}
+
+/* ── Stage checklist. An ordered run, and the order is the content. ────────────
+   Not a rail with a travelling marker: the marker is a drawing of "the first stage not yet done",
+   which the words already say. A renderer that drew only the words would lose nothing. */
+.uir-stages { display: flex; flex-wrap: wrap; gap: var(--uir-space-sm); list-style: none; margin: 0; padding: 0; }
+.uir-stages__stage {
+  align-items: center;
+  background: var(--uir-color-sunk);
+  border-radius: 999px;
+  color: var(--uir-color-graphite);
+  display: inline-flex;
+  font-size: var(--uir-size-micro);
+  gap: 5px;
+  padding: 4px 10px;
+}
+.uir-stages__stage[data-done] { background: var(--uir-color-positive-soft); color: var(--uir-color-positive); }
+/* Where you are. A ring, not a fill: the stage is not done, and a filled chip would say it was. */
+.uir-stages__stage[data-current] { box-shadow: inset 0 0 0 1px var(--uir-color-brand); color: var(--uir-color-ink); }
+.uir-stages__mark { font-size: 10px; line-height: 1; }
+.uir-stages__label { font-weight: 500; }
+/* The state is said, not implied by colour — a page read aloud, or read by someone who cannot
+   distinguish the two greens, must still know which stages are behind. */
+.uir-stages__state { opacity: 0.72; }
+
+/* ── Overlay. A page PRESENTED, not a page navigated to (DECISIONS A13). ──────
+   Geometry and motion are extracted from design sheet `2a · Chat to page prototype`, not chosen:
+   372px, right, 1px left border, -16px 0 40px shadow, obSlideIn 0.32s, obFade 0.25s on an
+   rgba(9,9,11,0.18) scrim. Nothing about a drawer is in the schema — `mode: "overlay"` says only
+   that the user has not left, and this is one medium's answer to that claim. */
+.uir-overlay { inset: 0; position: fixed; z-index: 40; }
+.uir-overlay__scrim { animation: uir-fade var(--uir-motion-fade); background: var(--uir-overlay-scrim); inset: 0; position: absolute; }
+.uir-overlay__panel {
+  animation: uir-slide-in var(--uir-motion-slide-in);
+  background: var(--uir-color-sheet);
+  border-left: 1px solid var(--uir-color-rule);
+  bottom: 0;
+  box-shadow: var(--uir-overlay-shadow);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-width: 100vw;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: var(--uir-overlay-width);
+}
+.uir-overlay__panel:focus { outline: none; }
+.uir-overlay__head { align-items: center; display: flex; flex: none; justify-content: space-between; padding: 18px 22px 14px; }
+.uir-overlay__title { color: var(--uir-color-ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
+.uir-overlay__close {
+  align-items: center; background: var(--uir-color-sunk); border: none; border-radius: 14px;
+  cursor: pointer; display: inline-flex; height: 28px; justify-content: center; width: 28px;
+}
+.uir-overlay__close:hover { background: var(--uir-color-sunk-strong); }
+.uir-overlay__close line { stroke: var(--uir-color-muted); stroke-linecap: round; stroke-width: 1.5; }
+.uir-overlay__body { flex: 1; overflow-y: auto; padding: 2px 22px 20px; }
+/* The nested page is content in a panel, not a page in a window: it brings no padding of its own. */
+.uir-page--nested { padding: 0; }
+.uir-page--nested .uir-shell { gap: var(--uir-space-md); }
+
+@keyframes uir-slide-in { from { transform: translateX(100%); } }
+@keyframes uir-fade { from { opacity: 0; } }
+
+/* Motion is an enhancement, never information. Anyone who asked their system to stop moving things
+   gets the same page, arrived at instantly. */
+@media (prefers-reduced-motion: reduce) {
+  .uir-overlay__panel, .uir-overlay__scrim { animation: none; }
+}
+
+/* Motion is an enhancement, never information: the bar's WIDTH is the fact, and it is right on the
+   first painted frame either way. */
+@media (prefers-reduced-motion: reduce) {
+  .uir-progress__fill { animation: none; transition: none; }
+  .uir-block[data-tile] { animation: none; }
+}