@bongos/core 1.19.449 → 1.19.451

package/modules/hall-ui/public/roadmap.css

@@ -1,53 +1,69 @@
-/* roadmap.css — Page-local styles for the Roadmap page.
-   Lifted verbatim out of the page's inline <style> block (task 1002176);
-   the ?v= cache-bust is stamped automatically from this file's content hash
-   at boot (src/asset-version.js). */
-
-/* Roadmap — the "Command deck" (task 1002426, owner-approved redesign from the
-   mockup review). Replaces the old flat stack of version progress bars +
-   nested goal/criteria disclosures with: a program-level hero, then versions
-   GROUPED BY their real status (planning=Staged · building=In flight ·
-   frozen=Parked · shipped=Shipped), and a SUMMARIZED goal layer per version
-   (status bar + only the goals active right now, full list on the Goals page).
-
-   Every class is `rm-`prefixed so nothing collides with the shared hall
-   stylesheet, and only THREE derived helper tokens are added here — the pack
-   tokens + light/dark theming stay owned by style.css + themeMarkup (the
-   theming contract). The helpers derive via color-mix on pack tokens, so they
-   re-derive automatically when the theme flips. */
-:root {
+/* roadmap.css — the Roadmap "command deck" (task 1002426; lifted out of the
+   page's inline <style> by task 1002176; rebuilt into the chrome world by task
+   1003306, goal 1000081). The ?v= cache-bust is stamped automatically from this
+   file's content hash at boot (src/asset-version.js).
+
+   THE PAGE: a program-level hero, then versions GROUPED BY their real status
+   (planning=Staged · building=In flight · frozen=Parked · shipped=Shipped),
+   and a SUMMARIZED goal layer per version (status bar + only the goals active
+   right now, the full list on the Goals page).
+
+   It is a reading room by task, not by archetype: nothing here is long-form, so
+   it does not load room.css. What it takes from the world is the world itself —
+   the token tier, v3's panel (a tone at the full radius, never a drawn box and
+   never a shadow), the label voice, and the display face on a figure.
+
+   THREE THINGS THIS SHEET USED TO DO THAT IT DOES NOT ANY MORE:
+     * A page-local `:root`. It was the only one in the hall and it is
+       forbidden: the branding pack's :root is spliced at the END of <head> at
+       (0,1,0), so a page-local one is outranked one way and defeats re-branding
+       the other. The three --rm-* values were fine; only the scope was wrong.
+       Page tokens live on `body`.
+     * `--rm-shadow-soft`, on five surfaces. v3 separates by TONE: a panel is
+       never a drawn box and never a shadow (modules/hall-ui/CLAUDE.md).
+     * The compat aliases (--surface / --surface-2 / --border / --border-strong /
+       --accent-weak / --accent-text). They still EXIST for pages nobody has
+       re-skinned yet, so spending one here would be legal CSS that quietly opts
+       this sheet back out of the world.
+
+   `--line` is a WIDTH; the hairline's colour is --rule / --rule-soft. */
+
+body[data-page="roadmap"] {
   --rm-plan:  color-mix(in srgb, var(--ink) 16%, var(--bg));
   --rm-terra-weak: color-mix(in srgb, var(--terracotta) 13%, var(--bg-card));
-  --rm-shadow-soft: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
 }
 
 .rm-num { font-variant-numeric: tabular-nums; }
 
-/* ---- shared atoms ---- */
-.rm-chip { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600;
-  letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap; }
+/* ---- shared atoms ----
+   The chips are the deck's label voice: they name a KIND, so they take the
+   label tokens rather than a hand-written uppercase of their own. */
+.rm-chip { display:inline-flex; align-items:center; gap:5px;
+  font-family:var(--label-face); font-size:var(--label-size); font-weight:400;
+  letter-spacing:var(--label-space); text-transform:var(--label-case);
+  padding:4px 9px; border-radius:var(--radius-pill); white-space:nowrap; }
 .rm-chip .rm-sq { width:7px; height:7px; border-radius:2px; }
-.rm-chip--product  { background:var(--accent-weak); color:var(--accent-text); }
+.rm-chip--product  { background:var(--accent-tint); color:var(--accent-ink); }
 .rm-chip--product  .rm-sq { background:var(--accent); }
-.rm-chip--internal { background:var(--info-weak); color:color-mix(in srgb, var(--sea) 78%, var(--ink)); }
+.rm-chip--internal { background:var(--info-weak); color:var(--info); }
 .rm-chip--internal .rm-sq { background:var(--sea); }
 .rm-chip--dogfood  { background:var(--rm-terra-weak); color:color-mix(in srgb, var(--terracotta) 82%, var(--ink)); }
 .rm-chip--dogfood  .rm-sq { background:var(--terracotta); }
 
-.rm-phase { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
-  padding:3px 9px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
+.rm-phase { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500;
+  padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; border:var(--line) solid transparent; }
 .rm-phase .rm-pd { width:6px; height:6px; border-radius:50%; }
 .rm-phase--building { background:var(--ok-weak); color:var(--ok); }
 .rm-phase--building .rm-pd { background:var(--ok); }
-.rm-phase--planning { background:var(--accent-weak); color:var(--accent-text);
-  border-color:color-mix(in srgb, var(--accent) 22%, var(--border)); }
+.rm-phase--planning { background:var(--accent-tint); color:var(--accent-ink);
+  border-color:color-mix(in srgb, var(--accent) 22%, var(--rule-soft)); }
 .rm-phase--planning .rm-pd { background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent); }
-.rm-phase--frozen { background:var(--surface-2); color:var(--ink-soft); border-color:var(--border); }
+.rm-phase--frozen { background:var(--glass); color:var(--ink-soft); border-color:var(--rule-soft); }
 .rm-phase--frozen .rm-pd { background:var(--ink-faint); }
 
 /* lifecycle segmented bar (shipped / confirmed / completed / remaining) */
-.rm-lbar { display:flex; height:9px; border-radius:999px; overflow:hidden;
-  background:var(--rule-soft); border:1px solid var(--border); }
+.rm-lbar { display:flex; height:9px; border-radius:var(--radius-pill); overflow:hidden;
+  background:var(--rule-soft); }
 .rm-lbar__s { height:100%; }
 .rm-lbar__s--sh { background:var(--ok); }
 .rm-lbar__s--co { background:var(--info); }
@@ -57,65 +73,87 @@
 .rm-ring { --p:0; --rc:var(--accent); position:relative; flex:none; width:60px; height:60px;
   border-radius:50%; display:grid; place-items:center;
   background:conic-gradient(var(--rc) calc(var(--p)*3.6deg), var(--rule-soft) 0); }
-.rm-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--surface); }
-.rm-ring b { position:relative; z-index:1; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
-.rm-ring b i { font-style:normal; font-size:9.5px; font-weight:600; color:var(--ink-faint); }
+.rm-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--bg-card); }
+.rm-ring b { position:relative; z-index:1; font-family:var(--font-display); font-size:16px; font-weight:300;
+  font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
+.rm-ring b i { font-style:normal; font-size:9.5px; font-weight:400; color:var(--ink-faint); }
 
 /* goal-status bar (segmented by goal COUNT: achieved / in progress / not started) */
-.rm-gbar { display:flex; height:8px; border-radius:999px; overflow:hidden;
-  background:var(--rule-soft); border:1px solid var(--border); }
+.rm-gbar { display:flex; height:8px; border-radius:var(--radius-pill); overflow:hidden;
+  background:var(--rule-soft); }
 .rm-gbar__s { height:100%; }
 .rm-gbar__s--ach  { background:var(--ok); }
 .rm-gbar__s--prog { background:var(--accent); }
 .rm-gbar__s--plan { background:var(--rm-plan); }
 
-/* ---- program hero ---- */
-.rm-hero { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--bg-card)), var(--bg-card) 62%);
-  border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-bottom:22px; box-shadow:var(--rm-shadow-soft); }
+/* ---- program hero ----
+   v3's figure band: one glass strip of numbers, not a tinted card. The old
+   accent gradient spent the warm colour on something nobody can press. */
+.rm-hero { background:var(--glass); border:var(--line) solid var(--glass-edge);
+  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
+  border-radius:var(--radius); padding:var(--sp-md); margin-bottom:var(--sp-md); }
 .rm-hero__top { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
 .rm-big { display:flex; align-items:baseline; gap:3px; }
-.rm-big .n { font-size:52px; font-weight:700; line-height:.95; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
-.rm-big .u { font-size:18px; font-weight:600; color:var(--ink-faint); }
-.rm-lab { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-top:7px; max-width:16ch; }
+.rm-big .n { font-family:var(--font-display); font-size:52px; font-weight:300; line-height:.95;
+  letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
+.rm-big .u { font-size:18px; font-weight:400; color:var(--ink-faint); }
+/* The cap is load-bearing — the hero's left column is `auto`, so without it the
+   caption sizes to its content and never wraps under the figure. It is a length
+   and not a `ch`: this is a label in the mono face, and a `ch` there is the zero
+   glyph's width, which is the measurement that put 90 characters on the primer. */
+.rm-lab { font-family:var(--label-face); font-size:var(--label-size); font-weight:400;
+  letter-spacing:var(--label-space); text-transform:var(--label-case); color:var(--ink-faint);
+  margin-top:7px; max-width:8rem; }
 .rm-hbar { height:15px; }
 .rm-stats { display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:14px; }
 .rm-stat { display:flex; flex-direction:column; gap:1px; }
-.rm-stat .v { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
-.rm-stat .k { font-size:11px; color:var(--ink-faint); font-weight:500; }
+.rm-stat .v { font-family:var(--font-display); font-size:19px; font-weight:300;
+  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
+.rm-stat .k { font-size:11.5px; color:var(--ink-faint); }
 .rm-stat .v.sh { color:var(--ok); } .rm-stat .v.co { color:var(--info); } .rm-stat .v.cm { color:var(--warn); }
-.rm-hgoals { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; padding-top:15px; border-top:1px solid var(--border); }
-.rm-hgoals .glab { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
+.rm-hgoals { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; padding-top:15px;
+  border-top:var(--line) solid var(--rule-soft); }
+.rm-hgoals .glab { font-family:var(--label-face); font-size:var(--label-size); font-weight:400;
+  letter-spacing:var(--label-space); text-transform:var(--label-case); color:var(--ink-faint); }
 .rm-hgoals .rm-gbar { width:200px; max-width:44vw; }
 .rm-hgoals .gleg { font-size:12.5px; color:var(--ink-soft); }
-.rm-hgoals .gleg b { color:var(--ink); font-variant-numeric:tabular-nums; }
+.rm-hgoals .gleg b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
 
 /* ---- section rhythm ---- */
-.rm-sec { margin-top:26px; }
+.rm-sec { margin-top:var(--sp-md); }
 .rm-sec__h { display:flex; align-items:center; gap:10px; margin:0 2px 13px; }
 .rm-sec__dot { width:8px; height:8px; border-radius:50%; }
 .rm-sec__dot--flight  { background:var(--ok); }
 .rm-sec__dot--staged  { background:var(--accent); }
 .rm-sec__dot--parked  { background:var(--ink-faint); }
 .rm-sec__dot--shipped { background:var(--sea); }
-.rm-sec__t { font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
+.rm-sec__t { font-family:var(--label-face); font-size:var(--label-size); font-weight:400;
+  letter-spacing:var(--label-space); text-transform:var(--label-case); color:var(--ink); }
 .rm-sec__n { font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
-  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:1px 8px; }
-.rm-sec__rule { flex:1; height:1px; background:var(--border); }
+  background:var(--glass); border-radius:var(--radius-pill); padding:2px 9px; }
+.rm-sec__rule { flex:1; height:var(--line); background:var(--rule-soft); }
 
-/* ---- version cards ---- */
+/* ---- version cards ----
+   v3's panel: a tone at the full radius, with a transparent edge reserved so a
+   modifier can draw one (staged) without the base having to. */
 .rm-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
-.rm-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:17px; box-shadow:var(--rm-shadow-soft); }
+.rm-card { background:var(--bg-card); border:var(--line) solid transparent;
+  border-radius:var(--radius); padding:var(--sp-md); }
 .rm-card--feat { grid-column:1 / -1; }
-.rm-card--parked { background:var(--surface-2); }
-.rm-card--staged { border-style:dashed; background:color-mix(in srgb, var(--accent) 3%, var(--surface)); }
+.rm-card--parked { background:var(--glass); }
+/* staged is the one card that IS a drawn edge, and it earns it: a dashed border
+   is the deck's whole signal that the version is not real yet. */
+.rm-card--staged { background:none; border-style:dashed; border-color:var(--rule); }
 .rm-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
-.rm-name { font-size:16px; font-weight:700; letter-spacing:-.01em; margin:9px 0 0; }
-.rm-id { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
-.rm-desc { font-size:12.5px; color:var(--ink-soft); margin:7px 0 0; }
+.rm-name { font-family:var(--font-display); font-size:19px; font-weight:300; line-height:1.15;
+  letter-spacing:-.03em; margin:9px 0 0; }
+.rm-id { font-family:var(--label-face); font-size:var(--label-size); font-weight:400;
+  letter-spacing:var(--label-space); color:var(--ink-faint); font-variant-numeric:tabular-nums; }
+.rm-desc { font-size:13px; color:var(--ink-soft); margin:7px 0 0; max-width:var(--measure); }
 .rm-desc--clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
 .rm-cardprog { margin-top:14px; }
-.rm-count { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
-.rm-count b { color:var(--ink); font-variant-numeric:tabular-nums; }
+.rm-count { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
+.rm-count b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
 .rm-featgrid { display:grid; grid-template-columns:1.05fr 1fr; gap:22px; align-items:start; }
 .rm-featgrid__l { min-width:0; }
 .rm-feat-top { display:flex; align-items:flex-start; gap:16px; }
@@ -123,57 +161,85 @@
 
 /* ---- goals block ---- */
 .rm-goals { min-width:0; }
-.rm-goals__frame { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; }
+.rm-goals__frame { background:var(--glass); border:var(--line) solid var(--glass-edge);
+  border-radius:var(--radius-sm); padding:var(--sp-sm); }
 .rm-goals__h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
-.rm-goals__h .t { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
+.rm-goals__h .t { font-family:var(--label-face); font-size:var(--label-size); font-weight:400;
+  letter-spacing:var(--label-space); text-transform:var(--label-case); color:var(--ink-faint); }
 .rm-goals__h .n { font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
-.rm-gdist { display:flex; gap:12px; flex-wrap:wrap; margin-top:9px; font-size:12px; color:var(--ink-soft); }
+.rm-gdist { display:flex; gap:12px; flex-wrap:wrap; margin-top:9px; font-size:12.5px; color:var(--ink-soft); }
 .rm-gdist span { display:inline-flex; align-items:center; gap:6px; }
 .rm-gdist i { width:9px; height:9px; border-radius:2px; }
 .rm-gdist i.rm-ach { background:var(--ok); } .rm-gdist i.rm-prog { background:var(--accent); } .rm-gdist i.rm-plan { background:var(--rm-plan); }
-.rm-gdist b { color:var(--ink); font-variant-numeric:tabular-nums; }
+.rm-gdist b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
 .rm-ginp { margin-top:14px; }
-.rm-ginp__cap { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:2px; }
-.rm-goal { display:flex; align-items:center; gap:10px; padding:7px 0; }
-.rm-goal + .rm-goal { border-top:1px solid var(--rule-soft); }
+.rm-ginp__cap { font-family:var(--label-face); font-size:var(--label-size); font-weight:400;
+  letter-spacing:var(--label-space); text-transform:var(--label-case); color:var(--ink-faint); margin-bottom:2px; }
+.rm-goal { display:flex; align-items:center; gap:10px; padding:4px 0; }
+.rm-goal + .rm-goal { border-top:var(--line) solid var(--rule-soft); }
 .rm-goal__dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); }
-.rm-goal__t { flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--ink); text-decoration:none;
+/* THE 24px FLOOR, BOTH AXES (task 1003304's rule, applied here). This is a link
+   in a row whose only height was its 13px line box plus 7px of row padding —
+   measured 20px, and it is the deck's most-clicked target. The row's padding
+   comes down by the same amount the link's goes up, so the target grows and the
+   list does not re-space around it. */
+.rm-goal__t { flex:1; min-width:0; display:flex; align-items:center; min-height:24px; padding:3px 0;
+  font-size:13px; color:var(--ink); text-decoration:none;
   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-a.rm-goal__t:hover { color:var(--accent-text); text-decoration:underline; }
-.rm-goal__ready { flex:none; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
-  color:var(--ok); background:var(--ok-weak); padding:2px 6px; border-radius:999px; }
-.rm-goal__meter { flex:none; width:70px; height:5px; border-radius:999px; background:var(--rule-soft); overflow:hidden; }
+a.rm-goal__t:hover { color:var(--accent-ink); text-decoration:underline; }
+.rm-goal__ready { flex:none; font-family:var(--label-face); font-size:10px; font-weight:400;
+  letter-spacing:var(--label-space); text-transform:var(--label-case);
+  color:var(--ok); background:var(--ok-weak); padding:3px 7px; border-radius:var(--radius-pill); }
+.rm-goal__meter { flex:none; width:70px; height:5px; border-radius:var(--radius-pill); background:var(--rule-soft); overflow:hidden; }
 .rm-goal__meter i { display:block; height:100%; background:var(--accent); }
 .rm-goal__n { flex:none; font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:28px; text-align:right; }
-.rm-goal__seed { flex:none; font-size:11px; color:var(--ink-faint); }
-.rm-gmore { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--accent-text); text-decoration:none; }
+.rm-goal__seed { flex:none; font-size:11.5px; color:var(--ink-faint); }
+/* the same floor: this link measured 19px */
+.rm-gmore { display:inline-flex; align-items:center; gap:6px; min-height:24px; margin-top:10px; padding:3px 0;
+  font-size:12.5px; font-weight:500; color:var(--accent-ink); text-decoration:none; }
 .rm-gmore:hover { text-decoration:underline; }
 .rm-gmore svg { width:13px; height:13px; }
 .rm-gnone { font-size:12.5px; color:var(--ink-faint); margin:2px 0 0; }
 
 /* parked note + staged state */
-.rm-parknote { display:flex; gap:9px; font-size:12.5px; color:var(--ink-soft); background:var(--surface);
-  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-top:13px; }
+.rm-parknote { display:flex; gap:9px; font-size:12.5px; color:var(--ink-soft); background:var(--bg-card);
+  border-radius:var(--radius-sm); padding:10px 12px; margin-top:13px; }
 .rm-parknote svg { flex:none; width:15px; height:15px; margin-top:1px; color:var(--ink-faint); }
 .rm-staged-state { display:flex; align-items:center; gap:11px; margin-top:15px; padding:12px 14px;
-  border:1px dashed var(--border-strong); border-radius:var(--radius-sm); }
+  border:var(--line) dashed var(--rule); border-radius:var(--radius-sm); }
 .rm-staged-state svg { flex:none; width:18px; height:18px; color:var(--accent); }
-.rm-staged-state .s1 { font-size:13px; font-weight:600; color:var(--ink); }
-.rm-staged-state .s2 { font-size:12px; color:var(--ink-soft); margin-top:1px; }
-.rm-staged-state .s2 b { color:var(--ink); font-variant-numeric:tabular-nums; }
+.rm-staged-state .s1 { font-size:13px; font-weight:500; color:var(--ink); }
+.rm-staged-state .s2 { font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
+.rm-staged-state .s2 b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
 
 /* shipped strip */
 .rm-shipstrip { display:flex; flex-wrap:wrap; gap:10px; }
-.rm-shippill { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--border);
-  border-radius:999px; padding:8px 15px 8px 10px; box-shadow:var(--rm-shadow-soft); text-decoration:none; }
-.rm-shippill:hover { border-color:var(--border-strong); }
+.rm-shippill { display:flex; align-items:center; gap:11px; min-height:38px; background:var(--bg-card);
+  border:var(--line) solid transparent; border-radius:var(--radius-pill); padding:8px 15px 8px 10px; text-decoration:none; }
+.rm-shippill:hover { border-color:var(--rule); }
 .rm-shippill .ok { width:20px; height:20px; border-radius:50%; background:var(--ok-weak); color:var(--ok);
   display:grid; place-items:center; font-size:11px; }
-.rm-shippill .nm { font-size:12.5px; font-weight:700; color:var(--ink); }
-.rm-shippill .mt { font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
+.rm-shippill .nm { font-size:13px; font-weight:500; color:var(--ink); }
+.rm-shippill .mt { font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
 
 @media (max-width:820px) {
   .rm-grid { grid-template-columns:1fr; }
   .rm-featgrid { grid-template-columns:1fr; }
   .rm-hero__top { grid-template-columns:1fr; gap:14px; }
-}
+}
+
+/* A goal row is dot + title + ready pill + meter + count on ONE line, and the
+   title is the only flexible item — so at 320 the four fixed ones eat the row
+   and `flex: 1; min-width: 0` resolves the title to ZERO width. Measured: a
+   0x26 link, which passes the 24px floor's height and fails its width, and is
+   invisible either way. The row wraps here instead: the title takes the first
+   line whole and the meters follow under it. */
+@media (max-width:400px) {
+  .rm-goal { flex-wrap:wrap; row-gap:2px; }
+  /* the title takes the first line whole; the meter, count and ready pill
+     follow under it. The dot goes — it is a decorative repeat of a state the
+     meter already carries, and left in place it would sit alone above the
+     title on a line of its own. */
+  .rm-goal__dot { display:none; }
+  .rm-goal__t { flex:1 0 100%; white-space:normal; }
+}

package/modules/hall-ui/public/roadmap.html

@@ -19,7 +19,12 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head">
+      <!-- The page had no <h1> at all before task 1003306, so it failed
+           one-header-main-h1 on every render. The deck takes the BOARD voice,
+           not the reading room's: it is a working surface whose figures are the
+           thing to look at, and its own name is the quietest thing on it. -->
+      <div class="page-head page-head--board">
+        <h1 class="page-head__h">Roadmap</h1>
         <p class="page-head__sub" id="roadmap-sub">Loading the roadmap…</p>
       </div>
 

package/modules/hall-ui/public/roadmap.states.json

@@ -0,0 +1,31 @@
+{
+  "_": "The hall's roadmap deck through modules/ui-design/kit/render.js (task 1003306). The deck is the hall's densest figure surface — a hero band, four status groups and a summarised goal layer per version — so its floors are the 24px one (the goal rows are links in a tight list) and horizontal overflow at 320.",
+  "page": "/builders/roadmap",
+  "surface": "hall-ui",
+  "stub": { "prefix": "/builders/" },
+  "modeQuery": false,
+  "_feeds": "The kit's stub carries the public-landing fixtures, not the hall's versions/goals feeds, so the deck renders its EMPTY state here and the feed 404s are declared, never hidden. The populated deck is the hall-preview harness's job: node scripts/hall-preview/server.js --port 4612 --fixture-me, then this same file with --base-in/--base-out pointed at it.",
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/versions",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/tasks",
+    "/api/(gds|bongos)/inbox/",
+    "/api/(gds|bongos)/public/"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b404\\b",
+    "Unauthorized",
+    "Not Found",
+    "load failed",
+    "roadmap"
+  ],
+  "states": {
+    "in": { "auth": true, "expect": { "visible": ["#rm-root"] } },
+    "out": { "auth": false }
+  },
+  "reducedMotion": { "auth": true }
+}