@bongos/core 1.24.80 → 1.24.82

package/modules/hall-ui/records/start-screen.md

@@ -11,11 +11,19 @@ Covers: Home (`shell-game.js` `start()`, `shell-game.css`, the hand-off in `welc
 - **Tips rotate** (`localStorage 'hall-game-tip'` counts them), so each load shows the next one. A tip must be true of the hall today; the first one is the Escape rule from `game-mode.md` (rewritten by task 1005144: Escape opens the options menu).
 - **The craft picker waits for the world.** While the start screen is up the shell asks no picker (`onAccess` returned true). `done` runs once the screen is gone and asks `OTBCraftMode.onAccess` then.
 - **Keys.** While either screen is up it keeps every key: the arrows and Tab walk the menu, Escape folds Extras away and does nothing else, so the shell's Escape cannot flip the bars underneath. Once the world shows, the last Escape opens the options menu (task 1005144); the screen's capture listener calls `preventDefault`, so the menu never opens from under it.
-- **The look.** The painting under the hall's `--scrim`, and on it one card of the hall's own tokens per screen (`--bg-card`, `--ink`, `--rule`; Start is the hall's primary pill, `--accent` under `--accent-on`), so both follow the hall's theme and the sheet holds no colour literal (`tests/hall_audit.mjs`). Sizes, corners and spacing are `--ds-*` tokens only; the sheet has no `@media` (the column is `max-width` in `rem` and wraps). The fade into the world is one CSS opacity transition, stopped by the hall's reduced-motion rule.
+- **The look is Helm (task 1005192, [ADR 0402](../../../docs/adr/0402-helm-is-the-halls-look-and-the-hall-is-dark-only.md)).** The start screen is one full-height night panel over the painting (`--night-glass`, an ice hairline left and right at `--line-strong`), `--helm-panel-w` wide. On a desk it stands off the left edge by `--helm-inset`; that token is a `clamp`, so on a phone the panel is the whole width and the sheet still has no `@media`. In it: the mark (the project's logo when it has one) over the name in the name voice; Start as a full-width accent bar under `--accent-on` that names its key ("Enter", drawn by CSS so the choice's own text stays "Start"); the other four as quiet rows on `--rule-soft` hairlines; and at the foot, over the strong hairline, the tip the load screen will show next (`#gs-line`), with the Quit note under it when the browser keeps the tab. The rows are list rows in a panel, so they are bars, not cut buttons. A row's focus is the inset two-tone ring (`--press-focus`), which is what makes focus visible on the accent bar.
+- **The load screen is the same panel, centred** over the painting under the hall's `--scrim`: the week in the name voice (`#gs-when`), one segment per week of the history (`#gs-segs`, the shared `.segs` / `.seg`; filled up to the week being shown, counted the way the sentence words it, and hidden from a screen reader because the sentence says the same), the city, and the tip under a hairline. With no city there are no segments.
+- **The literal floor is zero.** Every colour, size, corner, shadow, face and measure in `shell-game.css` is a hall-tier token (`style.css`); `tests/hall_start_screen.mjs` fails on a typed one. The fade into the world is one CSS opacity transition, stopped by the hall's reduced-motion rule.
 
 ## For the tasks after this one
 
 - R04 (task 1005144): point Options at the options menu and move Achievements/Extras targets if those pages lose their interfaces. Escape on the start screen is free for the menu to use.
 - `shell-game.js` is loaded on every hall page but only Home calls `start()`; `shell-game.css` is linked on Home only. A second page that wants the start screen links the sheet and calls `start()` with its own still.
 
-Tests: `tests/hall_start_screen.mjs` (the hand-off and pure parts in a vm; both screens, Quit, the no-city and reduced-motion paths in a real browser).
+- New art for the start screen (the city in the clouds) is task 1005196; `welcome-boot.js` still hands in the welcome's painting.
+
+Tests: `tests/hall_start_screen.mjs` (the hand-off and pure parts in a vm; both screens, the panel's place at desk and phone widths, the segments, Quit, the no-city and reduced-motion paths in a real browser).
+
+## The view chooser (task 1005200, owner 2026-11-11)
+
+Every sign-in now opens on a chooser before the start screen: **Game** or **Classic**, each with one line saying what it is. The view chosen last time (the browser's `hall-game` copy) is marked "Last time", lit with the accent on its edge, and focused, so Enter keeps it. Game goes on to the start screen as before; Classic closes the screen and the hall is as it always was. Either choice is saved to the account (`PATCH /api/bongos/me/hall-view`). The Extras list lost The docs: it is not a game place. Tests: `tests/hall_start_screen.mjs`.

package/modules/hall-ui/specimens/components.states.json

@@ -1,6 +1,7 @@
 {
-  "_": "The hall's shared components, each in each tone and state (task 1005086, goal 1000138): the status pill, the panel, the empty state, the loading state, the toast per kind, the tabs and view toggle, the buttons, the field and the dialog. Rendered by the ui-design kit in both modes at 1440/390/320: node modules/ui-design/kit/render.js --states modules/hall-ui/specimens/components.states.json. The public design-system reference (task 1005083) is meant to build on this.",
+  "_": "The hall's shared components, each in each tone and state (task 1005086, goal 1000138): the status pill, the panel, the empty state, the loading state, the toast per kind, the tabs and view toggle, the buttons, the field and the dialog. Rendered by the ui-design kit, dark only like the hall (task 1005192), at 1440/390/320: node modules/ui-design/kit/render.js --states modules/hall-ui/specimens/components.states.json. The public design-system reference (task 1005083) is meant to build on this.",
   "page": "/components",
+  "modes": ["dark"],
   "surface": "modules/hall-ui/specimens",
   "stub": {
     "prefix": "/"

package/modules/ui-design/public/brand.html

@@ -45,13 +45,13 @@
     <h2 class="scroll__h" id="ref-colour-h">Colour</h2>
     <p class="scroll__lede">The thirteen colours of the branding pack. An instance replaces them in its own pack; in dark mode only the neutrals flip, and the accent, sea and terracotta stay the pack’s.</p>
     
-    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg)" aria-hidden="true"></span><code class="ref-name">--bg</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#edecee</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-card)" aria-hidden="true"></span><code class="ref-name">--bg-card</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fbfafc</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#101012</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-deep)" aria-hidden="true"></span><code class="ref-name">--bg-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#e2e1e4</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-frame)" aria-hidden="true"></span><code class="ref-name">--bg-frame</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#f6f5f7</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#08080a</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink)" aria-hidden="true"></span><code class="ref-name">--ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#17181a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffffff</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-soft)" aria-hidden="true"></span><code class="ref-name">--ink-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#55565a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#c0c0c0</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-faint)" aria-hidden="true"></span><code class="ref-name">--ink-faint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#65656a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#a8a8a8</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule)" aria-hidden="true"></span><code class="ref-name">--rule</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c6c6c8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule-soft)" aria-hidden="true"></span><code class="ref-name">--rule-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#dcdbdd</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .08)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent)" aria-hidden="true"></span><code class="ref-name">--accent</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fb9569</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-deep)" aria-hidden="true"></span><code class="ref-name">--accent-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#a3481a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sea)" aria-hidden="true"></span><code class="ref-name">--sea</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#5b6fd0</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--terracotta)" aria-hidden="true"></span><code class="ref-name">--terracotta</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c9512c</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li></ul>
+    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg)" aria-hidden="true"></span><code class="ref-name">--bg</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#edecee</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-card)" aria-hidden="true"></span><code class="ref-name">--bg-card</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fbfafc</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#0a1622</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-deep)" aria-hidden="true"></span><code class="ref-name">--bg-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#e2e1e4</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-frame)" aria-hidden="true"></span><code class="ref-name">--bg-frame</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#f6f5f7</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#07111b</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink)" aria-hidden="true"></span><code class="ref-name">--ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#17181a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffffff</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-soft)" aria-hidden="true"></span><code class="ref-name">--ink-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#55565a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#c8f1f7</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-faint)" aria-hidden="true"></span><code class="ref-name">--ink-faint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#65656a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#a9cdd4</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule)" aria-hidden="true"></span><code class="ref-name">--rule</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c6c6c8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .4)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule-soft)" aria-hidden="true"></span><code class="ref-name">--rule-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#dcdbdd</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .2)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent)" aria-hidden="true"></span><code class="ref-name">--accent</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fb9569</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-deep)" aria-hidden="true"></span><code class="ref-name">--accent-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#a3481a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sea)" aria-hidden="true"></span><code class="ref-name">--sea</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#5b6fd0</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--terracotta)" aria-hidden="true"></span><code class="ref-name">--terracotta</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c9512c</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li></ul>
     <h3 class="ref-sub">The status vocabulary</h3>
     <p class="ref-note">Fixed, not taken from the pack, and the one exception to the fifteen tokens: a status is always a word as well as a colour.</p>
     <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ok)" aria-hidden="true"></span><code class="ref-name">--ok</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#187444</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#4ade80</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ok-weak)" aria-hidden="true"></span><code class="ref-name">--ok-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #187444 12%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #4ade80 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--warn)" aria-hidden="true"></span><code class="ref-name">--warn</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#895c00</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#fbbf24</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--warn-weak)" aria-hidden="true"></span><code class="ref-name">--warn-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #895c00 14%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #fbbf24 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--danger)" aria-hidden="true"></span><code class="ref-name">--danger</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#b42318</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#f87171</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--danger-weak)" aria-hidden="true"></span><code class="ref-name">--danger-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #b42318 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #f87171 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--info)" aria-hidden="true"></span><code class="ref-name">--info</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--sea) 86%, #000000)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--sea) 80%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--info-weak)" aria-hidden="true"></span><code class="ref-name">--info-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--info) 9%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--info) 14%, var(--bg-card))</code></span></li></ul>
     <h3 class="ref-sub">Derived colours</h3>
     <p class="ref-note">Mixed from the thirteen, never typed as a new colour. Black and white with alpha appear only as a scrim, a shadow or glass.</p>
-    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass)" aria-hidden="true"></span><code class="ref-name">--glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .05)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .11)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-strong)" aria-hidden="true"></span><code class="ref-name">--glass-strong</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .08)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .17)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-edge)" aria-hidden="true"></span><code class="ref-name">--glass-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .13)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void)" aria-hidden="true"></span><code class="ref-name">--void</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#050508</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-ink)" aria-hidden="true"></span><code class="ref-name">--void-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffffff</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--ink)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-edge)" aria-hidden="true"></span><code class="ref-name">--void-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--skeleton)" aria-hidden="true"></span><code class="ref-name">--skeleton</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-ink)" aria-hidden="true"></span><code class="ref-name">--accent-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 45%, #240e00)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-lift)" aria-hidden="true"></span><code class="ref-name">--accent-lift</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-tint)" aria-hidden="true"></span><code class="ref-name">--accent-tint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 30%, #fffdf9)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 22%, #0b0a09)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-on)" aria-hidden="true"></span><code class="ref-name">--accent-on</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a1305</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a1305</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--focus)" aria-hidden="true"></span><code class="ref-name">--focus</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent-deep) 82%, #3a1400)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--scrim)" aria-hidden="true"></span><code class="ref-name">--scrim</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(0, 0, 0, .55)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(0, 0, 0, .55)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--surface-2)" aria-hidden="true"></span><code class="ref-name">--surface-2</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 5%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 6%, var(--bg-card))</code></span></li></ul>
+    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass)" aria-hidden="true"></span><code class="ref-name">--glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .05)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .1)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-strong)" aria-hidden="true"></span><code class="ref-name">--glass-strong</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .08)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-edge)" aria-hidden="true"></span><code class="ref-name">--glass-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .2)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void)" aria-hidden="true"></span><code class="ref-name">--void</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#050508</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-ink)" aria-hidden="true"></span><code class="ref-name">--void-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffffff</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--ink)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-edge)" aria-hidden="true"></span><code class="ref-name">--void-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .4)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--skeleton)" aria-hidden="true"></span><code class="ref-name">--skeleton</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-ink)" aria-hidden="true"></span><code class="ref-name">--accent-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 45%, #240e00)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-lift)" aria-hidden="true"></span><code class="ref-name">--accent-lift</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-tint)" aria-hidden="true"></span><code class="ref-name">--accent-tint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 30%, #fffdf9)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 22%, #050d16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-on)" aria-hidden="true"></span><code class="ref-name">--accent-on</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a1305</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a1305</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--focus)" aria-hidden="true"></span><code class="ref-name">--focus</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent-deep) 82%, #3a1400)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--scrim)" aria-hidden="true"></span><code class="ref-name">--scrim</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(0, 0, 0, .55)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(0, 0, 0, .55)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--surface-2)" aria-hidden="true"></span><code class="ref-name">--surface-2</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 5%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 6%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--night-glass)" aria-hidden="true"></span><code class="ref-name">--night-glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--bg) 72%, transparent)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--bg) 72%, transparent)</code></span></li></ul>
   </section>
   <section class="scroll ref-sec" id="ref-type" aria-labelledby="ref-type-h">
     <h2 class="scroll__h" id="ref-type-h">Type</h2>

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.80",
+  "version": "1.24.82",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.24.80",
+      "version": "1.24.82",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.80",
+  "version": "1.24.82",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -11583,5 +11583,17 @@
       "id": "1005141",
       "text": "The builders' crafts now carry their game names: Engineers are Artisans, Ideators join the Artists, and Patron is the third character; old links and old records keep working."
     }
+  ],
+  "1.24.81": [
+    {
+      "id": "1005192",
+      "text": "The hall now wears the new Helm look: deep night panels, ice-blue text, wide capital titles and cut-corner buttons, all from one shared design system. The start and load screens are rebuilt to match, and the hall is dark only."
+    }
+  ],
+  "1.24.82": [
+    {
+      "id": "1005200",
+      "text": "The hall now has two separate views, Game and Classic, and never mixes them. You choose one each time you sign in and can switch only in Options. Game mode stays full screen and only opens the game's places."
+    }
   ]
 }

package/scripts/hall-preview/README.md

@@ -135,15 +135,14 @@ overlay). A concept no table holds is not drawn: never add sample data for one.
 
 ## The evidence matrix (per page-redesign ship)
 
-Screenshot every changed page at **{light, dark} × {1280w, 390w}**, plus one
+Screenshot every changed page at **{1280w, 390w}** (the hall is dark only since task 1005192, ADR 0402), plus one
 instance-pack run (`--brand config/branding.json`) proving the theming contract
 survives. Run the harness with **`--fixture-me`** for these — the pinned snapshot
 is what makes two runs comparable. With the Playwright MCP (`npx playwright install chrome` once):
 
 1. `browser_navigate` → the page. `browser_console_messages` must show **0 errors**.
 2. 1280w: `browser_resize 1280×900` → `browser_take_screenshot` (fullPage for tall pages).
-3. dark: `browser_evaluate` `() => { localStorage.setItem('hall-theme','dark'); location.reload(); }` → screenshot. (Reset with `'light'`.)
-4. 390w: `browser_resize 390×844` → light + dark screenshots.
+3. 390w: `browser_resize 390×844` → screenshot.
 
 ## Seam assertions (copy-paste `browser_evaluate` snippets)
 

package/scripts/hall-preview/pref-writes.js

@@ -14,7 +14,7 @@
 //
 // What it is NOT: storage. Nothing is written to disk and a restart forgets
 // everything; each recorded write is logged so the harness console shows what the
-// page sent. Only these five routes are recorded — every other write is refused
+// page sent. Only these routes are recorded — every other write is refused
 // exactly as before.
 'use strict';
 
@@ -27,6 +27,7 @@ const wandering = lib('wandering-prefs');
 const models = lib('model-alloc-prefs');
 const render = lib('render-prefs');
 const skills = lib('skill-prefs');
+const hallView = lib('hall-view-prefs'); // task 1005200: game or classic
 
 // apiPath → the /me slice it answers for (null: the skill prefs, not on /me)
 const ROUTES = {
@@ -35,6 +36,7 @@ const ROUTES = {
   'me/model-allocation': 'model_allocation',
   'me/render': 'render',
   'me/skill-prefs': null,
+  'me/hall-view': 'hall_view',
 };
 
 function createPrefRecorder({ log = console.log } = {}) {
@@ -63,6 +65,7 @@ function createPrefRecorder({ log = console.log } = {}) {
     if (slice === 'wandering') return wandering.describeForApi(behavior, rank);
     if (slice === 'model_allocation') return models.describeForApi(behavior, instanceModels);
     if (slice === 'render') return render.describeForApi(behavior);
+    if (slice === 'hall_view') return hallView.describeForApi(behavior);
     return {
       prefs: skillPrefs, effective: skills.listEffective(skillPrefs), defaults: skills.SKILL_DEFAULTS,
       known_skills: skills.KNOWN_SKILLS, allowed_models: skills.ALLOWED_MODELS,
@@ -96,6 +99,10 @@ function createPrefRecorder({ log = console.log } = {}) {
       v = render.validatePatch(b);
       if (!v.ok) return invalid(v.errors);
       behavior = render.applyPatch(behavior, v.patch);
+    } else if (slice === 'hall_view') {
+      v = hallView.validatePatch(b);
+      if (!v.ok) return invalid(v.errors);
+      behavior = hallView.applyView(behavior, v.view);
     } else {
       v = skills.validatePatch(b);
       if (!v.ok) return invalid(v.errors);

package/src/bongos/serve-internal.js

@@ -45,6 +45,7 @@ const { buildInfo } = require('../build-info');
 const { buildBongosDownloads, installScriptReader } = require('../bongos-downloads');
 const { clientBranding, branding, applyBrandConditionals } = require('../branding');
 const { themeMarkup } = require('../theme-markup');
+const { applyHelm } = require('../hall-helm');
 const { linkPreviewTags } = require('../link-preview');
 const { prelaunchGate } = require('./prelaunch-gate');
 const { platformVisibilityGate } = require('./platform-visibility-gate');
@@ -126,8 +127,12 @@ function injectBrandingGlobal(html, brand = clientBranding(), mods = clientModul
   // §4), injected the same way as __BRANDING__ so hall/status scripts can hide
   // UI sections for off modules synchronously (no fetch, no race). R60 wires the
   // actual section-hiding; this exposes the data. The link-preview card (task 1005091) rides along.
-  const stamped = applyBrandTokens(html, brand);
-  const tag = `${clientBundleScriptTag()}<script>window.__BRANDING__=${jsonForScript(brand)};window.__MODULES__=${jsonForScript(mods)};</script>${linkPreviewTags(stamped, brand, safePublicOrigin())}${themeMarkup(brand.theme)}`;
+  // A HALL page (one that links the hall's sheet) is pinned dark and, unless its pack
+  // chose faces of its own, takes the Helm faces (task 1005192, ADR 0402, src/hall-helm.js).
+  // Every other page comes back from applyHelm untouched.
+  const helm = applyHelm(applyBrandTokens(html, brand), brand.theme);
+  const stamped = helm.html;
+  const tag = `${clientBundleScriptTag()}<script>window.__BRANDING__=${jsonForScript(brand)};window.__MODULES__=${jsonForScript(mods)};</script>${linkPreviewTags(stamped, brand, safePublicOrigin())}${themeMarkup(brand.theme)}${helm.tail}`;
   return stamped.includes('</head>') ? stamped.replace('</head>', `${tag}</head>`) : tag + stamped;
 }
 

package/src/hall-helm.js

@@ -0,0 +1,79 @@
+// src/hall-helm.js — Helm, the look the builders' hall wears (task 1005192, ADR 0402).
+//
+// The hall is the game: everything after sign-in. It is dark only, and it reads in
+// the two Helm faces unless its pack chose faces of its own. Both are decided HERE,
+// at serve time, for one reason each:
+//
+//   * DARK ONLY. A fixed html[data-theme="dark"] in the served markup selects the
+//     hall sheet's dark tier before first paint, with nothing to flash and nothing
+//     for the OS preference to reach (the ADR 0204 move, on the hall's own
+//     attribute). shell.js sets the same value again for a page read without it.
+//   * THE FACES. The pack splices --font-display / --font-body as a plain :root
+//     after every sheet, for every surface, so the landing and the hall would
+//     always read the same face. The hall sheet carries the Helm stacks as its own
+//     tokens (--helm-display / --helm-body) and hands them to the two font tokens
+//     under html[data-faces="helm"], which outranks the pack's :root. This file
+//     stamps that attribute, and links the two families, only for a hall whose
+//     pack still names the platform's default faces. A pack that names its own
+//     (config/branding.json, or a look from the style library with faces of its
+//     own, ADR 0358) is never stamped and keeps them.
+//
+// A hall page is recognised by what makes it one: it links the hall's sheet. So one
+// seam (serve-internal.js injectBrandingGlobal) covers the server, the preview
+// harness and the design kit's stub, and the landing, the hub and the status page,
+// which never link that sheet, are never touched. PURE given `defaults`.
+'use strict';
+
+const fs = require('node:fs');
+const path = require('node:path');
+const { escapeHtml: esc } = require('./html-escape');
+
+// Barlow Condensed (the name voice) and Barlow (everything said to you), swapped in.
+const HELM_FONTS_HREF = 'https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&family=Barlow:wght@400;500&display=swap';
+const HALL_SHEET_RE = /<link\b[^>]*\bhref="\/builders\/style\.css[^"]*"/i;
+const HTML_TAG_RE = /<html\b([^>]*)>/i;
+
+function isHallPage(html) {
+  return HALL_SHEET_RE.test(String(html || ''));
+}
+
+// The platform's default faces: the neutral pack's two stacks, read once. A hall
+// whose resolved pack still carries exactly these has not chosen faces.
+let _defaults = null;
+function defaultFaces() {
+  if (_defaults) return _defaults;
+  try {
+    const { resolveCoreRoot } = require('./instance-config'); // eslint-disable-line global-require
+    const pack = JSON.parse(fs.readFileSync(path.join(resolveCoreRoot(), 'config', 'branding.neutral.json'), 'utf8'));
+    const fonts = (pack.theme && pack.theme.ui && pack.theme.ui.fonts) || {};
+    _defaults = { display: String(fonts.display || ''), body: String(fonts.body || '') };
+  } catch { _defaults = { display: '', body: '' }; }
+  return _defaults;
+}
+
+// Whether this hall takes the Helm faces: its pack names the default ones (or none).
+function wearsHelmFaces(theme, defaults = defaultFaces()) {
+  const fonts = (theme && theme.fonts) || {};
+  const same = (mine, theirs) => !mine || mine === theirs;
+  return same(fonts.display, defaults.display) && same(fonts.body, defaults.body);
+}
+
+// Set one attribute on the document's <html> tag, replacing a value already there.
+function stampHtml(html, name, value) {
+  return html.replace(HTML_TAG_RE, (tag, attrs) => {
+    const rest = attrs.replace(new RegExp(`\\s${name}(?:="[^"]*")?`, 'i'), '');
+    return `<html${rest} ${name}="${esc(value)}">`;
+  });
+}
+
+// The whole transform for one served page: a page that does not link the hall's
+// sheet comes back untouched. `tail` is markup for the end of <head>.
+function applyHelm(html, theme, defaults = defaultFaces()) {
+  if (!isHallPage(html)) return { html, tail: '' };
+  let out = stampHtml(html, 'data-theme', 'dark');
+  if (!wearsHelmFaces(theme, defaults)) return { html: out, tail: '' };
+  out = stampHtml(out, 'data-faces', 'helm');
+  return { html: out, tail: `<link rel="stylesheet" href="${esc(HELM_FONTS_HREF)}">` };
+}
+
+module.exports = { applyHelm, isHallPage, wearsHelmFaces, stampHtml, HELM_FONTS_HREF };

package/src/module-api.js

@@ -81,7 +81,7 @@ const { sleep } = require('./sleep');
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.24.80'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.24.82'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/design_reference.mjs

@@ -76,7 +76,7 @@ test('every pack colour shows its light value and its dark value; the status voc
     assert.ok(r.includes(`light</span> <code>${light}</code>`), `${prop} light ${light}`);
     assert.match(r, /dark<\/span> <code>[^<]+<\/code>/, `${prop} has a dark value`);
   }
-  assert.ok(rowOf(PAGE, '--bg').includes('dark</span> <code>#000000</code>'), 'the dark ground is read from the hall\'s dark tier');
+  assert.ok(rowOf(PAGE, '--bg').includes('dark</span> <code>#050d16</code>'), 'the dark ground is read from the hall\'s dark tier: the Helm night (task 1005192, ADR 0402)');
   assert.ok(rowOf(PAGE, '--ok').includes('light</span> <code>#187444</code>') && rowOf(PAGE, '--ok').includes('dark</span> <code>#4ade80</code>'));
   for (const s of ['--warn', '--danger', '--info', '--ok-weak', '--warn-weak', '--danger-weak', '--info-weak']) rowOf(PAGE, s);
 });

package/tests/hall_builders_page_pass.mjs

@@ -152,7 +152,8 @@ test('A: the quiet fill is a defined variant, not an inline colour', () => {
   const m = css.match(/([^{}]*\.landing__btn--quiet[\s,][^{}]*)\{([^{}]*)\}/);
   assert.ok(m, 'controls.css defines .landing__btn--quiet');
   const block = m[2];
-  assert.match(block, /background:\s*transparent/, 'the quiet variant is the ghost');
+  // Helm (task 1005192, ADR 0402): the ghost takes the hall's press fill, and nothing without the hall's tier
+  assert.match(block, /background:\s*var\(--press-fill, transparent\)/, 'the quiet variant is the ghost');
   assert.deepEqual(block.match(/#[0-9a-f]{3,8}\b/gi) || [], [], 'the variant carries no literal colour');
   // Same geometry as the request button means it inherits .landing__btn's
   // min-height and padding rather than restating them.

package/tests/hall_city.mjs

@@ -12,8 +12,8 @@
 //     the ring road, or a task with no building;
 //   * the line under the button saying anything but the docket's own line;
 //   * the start governing button going anywhere but the street;
-//   * the switch not using the hall's own preference, so the city opens in a
-//     different mode from every other hall page;
+//   * a light/dark switch coming back: the hall is dark only (task 1005192,
+//     ADR 0402), so the city draws its night faces and reads no stored choice;
 //   * motion that escapes the Kill Switch, or docket text reaching innerHTML.
 //
 // Run:  node tests/hall_city.mjs
@@ -263,7 +263,7 @@ test('parcels ride only the roads of plots that hold a district, and leave throu
 
 // ── the page ────────────────────────────────────────────────────────────────
 
-test('the page holds only the wordmark, the switch, the city, one button and one line', () => {
+test('the page holds only the wordmark, the city, one door and one line, and no light/dark switch', () => {
   const html = read('city.html').replace(/<!--[\s\S]*?-->/g, ''); // the markup, not the prose about it
   assert.equal((html.match(/<header\b/g) || []).length, 1);
   assert.equal((html.match(/<main\b/g) || []).length, 1);
@@ -271,7 +271,8 @@ test('the page holds only the wordmark, the switch, the city, one button and one
   assert.match(html, /<a class="city-start" id="cityStart" href="#decide"/);
   assert.equal((html.match(/<a\b/g) || []).length, 3, 'one door, and the two faint archived links to the street');
   assert.ok(html.includes('<p class="city-archived">Archived: <a href="/builders/street">Street</a> &amp; <a href="/builders/street#building=charter">Building Level Views</a>.</p>'), 'the street is archived behind two faint links');
-  assert.equal((html.match(/<button\b/g) || []).length, 1, 'one switch');
+  assert.equal((html.match(/<button\b/g) || []).length, 0, 'no switch: the hall is dark only (task 1005192, ADR 0402)');
+  assert.doesNotMatch(html, /cityMode/);
   assert.match(html, /class="city-mark">\{\{productName\}\}</);
   assert.equal(City.STREET_HREF, '/builders/street');
 });
@@ -346,7 +347,7 @@ function fakeDom() {
     return el;
   };
   const html = mk('html');
-  for (const id of ['cityMode', 'cityModeIcon', 'cityStage', 'cityFlat', 'cityBlds', 'cityParcels', 'cityPins', 'cityLine', 'cityStart']) mk('x').setAttribute('id', id);
+  for (const id of ['cityStage', 'cityFlat', 'cityBlds', 'cityParcels', 'cityPins', 'cityLine', 'cityStart']) mk('x').setAttribute('id', id);
   const document = {
     documentElement: html,
     getElementById: (id) => byId.get(id) || null,
@@ -421,33 +422,18 @@ test('a failed docket read draws no pins and says the docket could not be read',
   assert.equal(p.byId.get('cityLine').textContent, City.FALLBACK_LINE);
 });
 
-test('the switch reads and writes the hall\'s own theme preference', async () => {
-  const p = await bootPage({ feeds: FEEDS([]), stored: 'light', osDark: true });
-  assert.equal(p.html.attrs['data-theme'], 'light', 'the stored hall choice beats the OS');
-  assert.equal(p.byId.get('cityMode').attrs['aria-label'], 'Switch to dark mode');
-  const before = JSON.stringify(p.byId.get('cityFlat').children[0].attrs);
-  p.byId.get('cityMode').fire('click');
-  assert.equal(p.store.get('hall-theme'), 'dark');
-  assert.equal(p.html.attrs['data-theme'], 'dark');
-  assert.equal(p.byId.get('cityMode').attrs['aria-label'], 'Switch to light mode');
-  assert.notEqual(JSON.stringify(p.byId.get('cityFlat').children[0].attrs), before, 'the city redraws in the new mode');
+test('the city is dark only: no stored choice and no OS setting reaches it (task 1005192, ADR 0402)', async () => {
+  const p = await bootPage({ feeds: FEEDS([]), stored: 'light', osDark: false, shell: { applyTheme() { throw new Error('the city no longer drives the shell'); } } });
+  assert.equal(p.html.attrs['data-theme'], 'dark', 'a stored light choice and a light OS are both ignored');
+  assert.equal(p.store.get('hall-theme'), 'light', 'and the old preference is never written');
+  assert.equal(p.observers.length, 0, 'nothing flips the theme, so nothing watches it');
   const q = await bootPage({ feeds: FEEDS([]), stored: null, osDark: true });
-  assert.equal(q.html.attrs['data-theme'], 'dark', 'no stored choice follows the OS');
+  assert.equal(JSON.stringify(q.byId.get('cityFlat').children[0].attrs), JSON.stringify(p.byId.get('cityFlat').children[0].attrs), 'one drawing whatever was stored');
+  const src = read('city.js');
+  assert.doesNotMatch(src, /hall-theme|localStorage|prefers-color-scheme/, 'city.js reads no theme preference');
 });
 
-test('in the hall, the city and the top bar\'s theme switch never disagree (task 1004544)', async () => {
-  let shellPaints = 0;
-  const p = await bootPage({ feeds: FEEDS([]), stored: 'light', osDark: true, shell: { applyTheme() { shellPaints++; } } });
-  assert.equal(p.observers.length, 1, 'the page watches html[data-theme]');
-  p.byId.get('cityMode').fire('click');
-  assert.equal(shellPaints, 1, 'this switch repaints the shell\'s');
-  const before = JSON.stringify(p.byId.get('cityFlat').children[0].attrs);
-  p.store.set('hall-theme', 'light'); p.html.setAttribute('data-theme', 'light'); // the shell's switch
-  p.observers[0].fn();
-  assert.equal(p.byId.get('cityMode').attrs['aria-label'], 'Switch to dark mode', 'this switch follows the shell\'s');
-  assert.notEqual(JSON.stringify(p.byId.get('cityFlat').children[0].attrs), before, 'and the city redraws in that mode');
-  assert.equal(shellPaints, 1, 'following the shell does not echo back to it');
-});
+
 
 test('the artboard fits the stage the hall chrome leaves, not the window (task 1004544)', async () => {
   const p = await bootPage({ feeds: FEEDS([]), stage: { clientWidth: 688, clientHeight: 900 } });

package/tests/hall_controls.mjs

@@ -9,6 +9,11 @@
 //     button (it loads later) without re-drawing it;
 //   * THE SIZES — primary is DESIGN.md's 46–48px door, the row size and the
 //     text button keep the 24px floor, the field clears it;
+//   * THE HELM SHAPE AND VOICE (task 1005192, ADR 0402) — in the hall a button
+//     is the cut corner in the name voice, every piece of it a hall-tier token
+//     spent with the old pill/lowercase as its fallback (the status page links
+//     this sheet without the hall's tier), and a cut button's focus ring is
+//     drawn inside the shape, because a clip-path clips an outline;
 //   * CONTRAST, MEASURED — the button's ink on its fill (rest AND hover), the
 //     ghost's and the text button's ink on both grounds, the field's text and
 //     its edge (3:1, WCAG 1.4.11), in both modes, resolved from the real
@@ -144,11 +149,11 @@ test('style.css imports controls.css right after the shared token sheet', () =>
 
 // ── 2. the sizes ─────────────────────────────────────────────────────────────
 
-test('primary is the 46–48px pill; the row size and the text button keep the 24px floor', () => {
+test('primary is the 46–48px door; the row size and the text button keep the 24px floor', () => {
   const base = sharedRule('.btn');
   const h = px(prop(base, 'min-height'));
   assert.ok(h >= 46 && h <= 48, `.btn is ${h}px — DESIGN.md's door is 46–48px`);
-  assert.equal(prop(base, 'border-radius'), 'var(--radius-pill)', 'pill or nothing (DESIGN.md, Shapes)');
+  assert.equal(prop(base, 'border-radius'), 'var(--press-radius, var(--radius-pill))', 'the hall\'s corner, and the pill where the hall\'s tier is not loaded');
   assert.match(prop(base, 'border'), /transparent$/, 'the edge is reserved, so a modifier that sets only its colour draws');
   for (const sel of ['.btn--sm', '.btn--text']) {
     assert.ok(px(prop(sharedWith(sel, 'min-height'), 'min-height')) >= 24, `${sel} keeps 24px of height`);
@@ -203,6 +208,49 @@ test('no hall sheet puts white ink on an accent fill', () => {
 const PRIMARY = ['.btn', '.btn-accent', '.landing__btn', '.task__claim', '.setup-gate__save', '.td-btn--primary', '.pbtn--save', '.craft-save'];
 const GHOST = ['.btn--ghost', '.btn-ghost', '.landing__btn--quiet', '.td-btn', '.wip__release', '.pbtn', '.settings-btn'];
 const SMALL = ['.btn--sm', '.btn-ghost', '.task__claim', '.td-btn', '.wip__release'];
+// the ghost's fill: the hall's press fill, and nothing at all without the hall's tier
+const GHOST_FILL = 'var(--press-fill, transparent)';
+
+// ── 3b. the Helm shape and voice (task 1005192, ADR 0402) ───────────────────
+
+test('in the hall a button is the cut corner in the name voice, and without the hall\'s tier it is the pill it was', () => {
+  const base = sharedRule('.btn');
+  // every Helm piece is a token with the old look as its fallback
+  assert.equal(prop(base, 'clip-path'), 'var(--cut-path, none)');
+  assert.equal(prop(base, 'font-family'), 'var(--name-face, var(--font-body))');
+  assert.equal(prop(base, 'font-weight'), 'var(--name-weight, 500)');
+  assert.equal(prop(base, 'letter-spacing'), 'var(--name-space-tight, normal)');
+  assert.equal(prop(base, 'text-transform'), 'var(--name-case, lowercase)');
+  assert.equal(prop(sharedWith('.btn--sm', 'clip-path'), 'clip-path'), 'var(--cut-path-sm, none)', 'the row size takes the smaller cut');
+  // the tokens are the hall tier's, and the status page (which links this sheet) defines none of them
+  const status = fs.readFileSync(path.join(ROOT, 'modules', 'status-ui', 'public', 'style.css'), 'utf8');
+  for (const name of ['--cut-path', '--cut-path-sm', '--press-radius', '--press-fill', '--press-focus', '--name-face', '--name-weight', '--name-space-tight', '--name-case']) {
+    assert.ok(root[name], `${name} is in the hall's token block`);
+    assert.ok(!new RegExp(`${name}\\s*:`).test(status), `the status page does not define ${name}, so the fallback stands there`);
+  }
+  assert.equal(root['--cut-path'], 'polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut))', 'top-left and bottom-right are cut');
+  assert.equal(root['--name-case'], 'uppercase');
+  // a link in a sentence is not a cut control and does not shout
+  const text = sharedWith('.btn--text', 'clip-path');
+  assert.equal(prop(text, 'clip-path'), 'none');
+  assert.equal(prop(text, 'text-transform'), 'none');
+});
+
+test('a cut button keeps a visible focus ring: inset, two-tone, 3:1 on its own fill', () => {
+  // clip-path clips the outline and the outer halo, so the base rule hands the shell's
+  // :focus-visible rule an inset ring instead; the text button (not cut) hands it back
+  assert.equal(prop(sharedRule('.btn'), '--focus-ring'), 'var(--press-focus)');
+  assert.equal(prop(sharedWith('.btn--text', '--focus-ring'), '--focus-ring'), 'initial');
+  const shell = rulesOf(styleSrc).find((x) => x.sels.length === 1 && x.sels[0] === ':focus-visible');
+  assert.ok(shell, 'the shell\'s ring rule');
+  assert.match(prop(shell.body, 'box-shadow'), /^var\(--focus-ring, /, 'the shell\'s ring spends what a cut control hands in');
+  assert.equal(root['--press-focus'], 'inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--bg)', 'the focus colour on the edge, then a 2px band of the ground');
+  // one of the two tones reads against each fill a cut button paints (WCAG 1.4.11, 3:1), in the mode the hall renders
+  for (const [what, fill] of [['primary', 'var(--accent)'], ['primary hover', 'var(--accent-lift)'], ['ghost on the page', onGround(GHOST_FILL, 'var(--bg)', 'dark')], ['ghost on a panel', onGround(GHOST_FILL, 'var(--bg-card)', 'dark')], ['danger', 'var(--danger)']]) {
+    const best = Math.max(contrast('var(--focus)', fill, 'dark'), contrast('var(--bg)', fill, 'dark'));
+    assert.ok(best >= 3, `dark ${what}: the ring's better tone is ${best.toFixed(2)}:1 on the fill`);
+  }
+});
 
 test('every older button name sits in the shared rule it means', () => {
   const fill = (sel) => {
@@ -210,11 +258,11 @@ test('every older button name sits in the shared rule it means', () => {
     return r.length ? prop(r[0].body, 'background') : null;
   };
   for (const sel of PRIMARY) assert.equal(fill(sel), 'var(--accent)', `${sel} is a primary door`);
-  for (const sel of GHOST) assert.equal(fill(sel), 'transparent', `${sel} is a ghost`);
+  for (const sel of GHOST) assert.equal(fill(sel), GHOST_FILL, `${sel} is a ghost`);
   for (const sel of SMALL) assert.equal(prop(sharedWith(sel, 'min-height'), 'min-height'), '30px', `${sel} is the row size`);
   // and the primary-on-a-ghost-base names come AFTER the ghost rule, or the ghost wins on order
   const list = rulesOf(controls);
-  const ghostAt = list.findIndex((x) => x.sels.includes('.td-btn') && prop(x.body, 'background') === 'transparent');
+  const ghostAt = list.findIndex((x) => x.sels.includes('.td-btn') && prop(x.body, 'background') === GHOST_FILL);
   const primaryAt = list.findIndex((x) => x.sels.includes('.td-btn--primary') && prop(x.body, 'background'));
   assert.ok(primaryAt > ghostAt, '.td-btn--primary follows .td-btn, so the shared order paints it');
 });