@bongos/core 1.24.79 → 1.24.81

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

@@ -32,15 +32,19 @@
       grounds in both modes with ~9% of headroom. tests/hall_tokens.mjs measures
       them; do not hand-tune one without re-running it.
 
-   b. THE HALL KEEPS BOTH MODES, ON ITS OWN SWITCH. The apex went dark only
-      (ADR 0204), so light is the hall's alone. shell.js writes
-      html[data-theme] — NOT the world's html[data-mode] — so the dark tier is
-      written twice on THAT pair: html[data-theme="dark"] and, for first paint
-      before the script runs, @media (prefers-color-scheme: dark)
-      html:not([data-theme]). Both bodies are byte-identical; the twins rule is
-      what keeps them so. html[data-theme="dark"] is (0,1,1) and outranks the
-      pack's injected :root (0,1,0), which is what lets dark win over the pack
-      while the instance's accent survives.
+   b. THE HALL IS DARK ONLY, AND ITS DARK TIER IS HELM (task 1005192, ADR
+      0402). The server stamps html[data-theme="dark"] on every hall page and
+      shell.js sets it again; nothing offers light. The attribute is the
+      hall's own — NOT the world's html[data-mode] — and the dark tier is
+      still written twice on that pair: html[data-theme="dark"] and @media
+      (prefers-color-scheme: dark) html:not([data-theme]), for a page read
+      without the server's stamp. Both bodies are byte-identical; the twins
+      rule is what keeps them so. html[data-theme="dark"] is (0,1,1) and
+      outranks the pack's injected :root (0,1,0), which is what lets the night
+      win over the pack while the instance's accent survives. The light values
+      in :root are no longer rendered by the hall; they stay until the light
+      tier's own removal (the ADR 0204 precedent), so the sheets and tests
+      that still measure light keep measuring.
 
    c. --line IS A WIDTH HERE, NOT A COLOUR (DESIGN.md warns about exactly this
       name). The hairline's COLOUR is --rule / --rule-soft.
@@ -253,9 +257,67 @@
   --plate: none;
   --plate-blend: lighten;
   --plate-veil: none;
-}
 
-/* ---------- dark theme ----------
+  /* ---- HELM: the hall's look (task 1005192, ADR 0402). The kit's recipes,
+          named once here so no page sheet types one in. None of them flips
+          with the mode; the Helm NEUTRALS are the dark tier below, which is
+          the only tier the hall renders.
+
+          TYPE, TWO VOICES. The name voice names a thing (a title, a button, an
+          eyebrow): the display face in wide tracked capitals. Everything said
+          to you is the body face in plain sentences. --helm-display and
+          --helm-body are the Helm faces themselves; html[data-faces="helm"]
+          (below the dark twins) hands them to --font-display / --font-body for
+          a hall whose pack has not chosen faces of its own. ---- */
+  --helm-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
+  --helm-body:    "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
+  --name-face:        var(--font-display);
+  --name-weight:      500;
+  --name-weight-lit:  600;
+  --name-case:        uppercase;
+  --name-space:       .24em;
+  --name-space-wide:  .3em;
+  --name-space-tight: .16em;
+  /* a title's glow: the soft ink, never the accent (the accent is for what you
+     can act on) */
+  --name-glow: 0 0 22px color-mix(in srgb, var(--ink-soft) 45%, transparent);
+
+  /* SHAPE, THREE MOVES (the arc is the visor's and is not in this slice).
+     THE CUT CORNER is anything you can press: top-left and bottom-right cut,
+     no pill. A clip-path clips an outline, so a cut control's focus is the
+     inset two-tone ring --press-focus: the focus colour on the edge, then a
+     band of the ground, so one of the two reads on any fill. */
+  --cut:         12px;
+  --cut-sm:      8px;
+  --cut-path:    polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
+  --cut-path-sm: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
+  --press-radius: 0px;
+  --press-fill:   var(--surface-2);
+  --press-focus:  inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--bg);
+  /* THE SEGMENT is progress: one small skewed bar per step. */
+  --seg-w:    40px;
+  --seg-h:    8px;
+  --seg-gap:  var(--ds-space-hair);
+  --seg-skew: -28deg;
+
+  /* THE PANEL OVER ART: the ground at 72%, closed left and right by the strong
+     hairline. --helm-inset is how far a full-height panel stands off the left
+     edge: nothing on a phone, growing to its full step on a desk, with no
+     breakpoint. */
+  --night-glass: color-mix(in srgb, var(--bg) 72%, transparent);
+  --line-strong: 1.5px;
+  --helm-panel-w: 400px;
+  --helm-row:     60px;
+  --helm-mark:    60px;
+  --helm-inset:   clamp(0px, calc((100vw - var(--helm-panel-w)) * .1), 96px);
+}
+
+/* ---------- dark theme: the Helm neutrals ----------
+   The only tier the hall renders (task 1005192, ADR 0402). Each colour has one
+   job: NIGHT is the ground and every panel (--bg; --bg-card is the night
+   lifted a step, for a panel at rest); ICE is information you read
+   (--ink-soft, and the hairlines as ice at 40% and 20%); WHITE is names and
+   numbers (--ink); the pack's --accent is only what you can act on.
    Only the NEUTRALS and the mode-dependent derivations flip; the pack's
    accent/sea/terracotta + fonts survive (the Unpinned Accent Rule — a dark
    block may pin no accent literal, or a re-themed instance cannot reach dark),
@@ -265,24 +327,24 @@
 
 html[data-theme="dark"] {
   color-scheme: dark;
-  --bg:        #000000;
-  --bg-card:   #101012;
-  --bg-deep:   #000000;
-  --bg-frame:  #08080a;
+  --bg:        #050d16;
+  --bg-card:   #0a1622;
+  --bg-deep:   #050d16;
+  --bg-frame:  #07111b;
   --ink:       #ffffff;
-  --ink-soft:  #c0c0c0;
-  --ink-faint: #a8a8a8;
-  --rule:      rgba(255, 255, 255, .16);
-  --rule-soft: rgba(255, 255, 255, .08);
-  --glass:        rgba(255, 255, 255, .11);
-  --glass-strong: rgba(255, 255, 255, .17);
-  --glass-edge:   rgba(255, 255, 255, .13);
+  --ink-soft:  #c8f1f7;
+  --ink-faint: #a9cdd4;
+  --rule:      rgba(200, 241, 247, .4);
+  --rule-soft: rgba(200, 241, 247, .2);
+  --glass:        rgba(200, 241, 247, .1);
+  --glass-strong: rgba(200, 241, 247, .16);
+  --glass-edge:   rgba(200, 241, 247, .2);
   --glass-blur:   18px;
-  --void:      #000000;
+  --void:      #050d16;
   --void-ink:  var(--ink);
-  --void-edge: rgba(255, 255, 255, .16);
+  --void-edge: rgba(200, 241, 247, .4);
   --accent-ink:  var(--accent);
-  --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
+  --accent-tint: color-mix(in srgb, var(--accent) 22%, #050d16);
   --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
   --ok:          #4ade80;
   --ok-weak:     color-mix(in srgb, #4ade80 14%, var(--bg-card));
@@ -293,36 +355,36 @@ html[data-theme="dark"] {
   --info:        color-mix(in srgb, var(--sea) 80%, #ffffff);
   --info-weak:   color-mix(in srgb, var(--info) 14%, var(--bg-card));
   --focus:       var(--accent);
-  --label-face:  var(--font-body);
+  --label-face:  var(--font-display);
   --label-size:  var(--ds-text-2xs-plus);
-  --label-space: .1em;
+  --label-space: .2em;
   --type-halo:   0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
   --surface-2:   color-mix(in srgb, var(--ink) 6%, var(--bg-card));
-  --plate-veil:  linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .93));
+  --plate-veil:  linear-gradient(to bottom, rgba(5, 13, 22, .82), rgba(5, 13, 22, .93));
 }
 html[data-theme="dark"] body { background: var(--bg); }
 
 @media (prefers-color-scheme: dark) {
   html:not([data-theme]) {
     color-scheme: dark;
-    --bg:        #000000;
-    --bg-card:   #101012;
-    --bg-deep:   #000000;
-    --bg-frame:  #08080a;
+    --bg:        #050d16;
+    --bg-card:   #0a1622;
+    --bg-deep:   #050d16;
+    --bg-frame:  #07111b;
     --ink:       #ffffff;
-    --ink-soft:  #c0c0c0;
-    --ink-faint: #a8a8a8;
-    --rule:      rgba(255, 255, 255, .16);
-    --rule-soft: rgba(255, 255, 255, .08);
-    --glass:        rgba(255, 255, 255, .11);
-    --glass-strong: rgba(255, 255, 255, .17);
-    --glass-edge:   rgba(255, 255, 255, .13);
+    --ink-soft:  #c8f1f7;
+    --ink-faint: #a9cdd4;
+    --rule:      rgba(200, 241, 247, .4);
+    --rule-soft: rgba(200, 241, 247, .2);
+    --glass:        rgba(200, 241, 247, .1);
+    --glass-strong: rgba(200, 241, 247, .16);
+    --glass-edge:   rgba(200, 241, 247, .2);
     --glass-blur:   18px;
-    --void:      #000000;
+    --void:      #050d16;
     --void-ink:  var(--ink);
-    --void-edge: rgba(255, 255, 255, .16);
+    --void-edge: rgba(200, 241, 247, .4);
     --accent-ink:  var(--accent);
-    --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
+    --accent-tint: color-mix(in srgb, var(--accent) 22%, #050d16);
     --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
     --ok:          #4ade80;
     --ok-weak:     color-mix(in srgb, #4ade80 14%, var(--bg-card));
@@ -333,16 +395,27 @@ html[data-theme="dark"] body { background: var(--bg); }
     --info:        color-mix(in srgb, var(--sea) 80%, #ffffff);
     --info-weak:   color-mix(in srgb, var(--info) 14%, var(--bg-card));
     --focus:       var(--accent);
-    --label-face:  var(--font-body);
+    --label-face:  var(--font-display);
     --label-size:  var(--ds-text-2xs-plus);
-    --label-space: .1em;
+    --label-space: .2em;
     --type-halo:   0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
     --surface-2:   color-mix(in srgb, var(--ink) 6%, var(--bg-card));
-    --plate-veil:  linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .93));
+    --plate-veil:  linear-gradient(to bottom, rgba(5, 13, 22, .82), rgba(5, 13, 22, .93));
   }
   html:not([data-theme]) body { background: var(--bg); }
 }
 
+/* The Helm faces (task 1005192, ADR 0402). The server stamps data-faces="helm"
+   on a hall page whose pack still names the platform's default faces
+   (src/hall-helm.js) and links the two families. (0,1,1) outranks the pack's
+   spliced :root, so the hall reads Barlow while the landing keeps the pack's
+   face; a hall that wears faces of its own never gets the attribute and keeps
+   them. */
+html[data-faces="helm"] {
+  --font-display: var(--helm-display);
+  --font-body:    var(--helm-body);
+}
+
 /* The Kill Switch Rule (DESIGN.md). Nothing escapes it, and no motion is
    authored in JavaScript, because JavaScript motion escapes it. */
 @media (prefers-reduced-motion: reduce) {
@@ -712,6 +785,16 @@ html[data-theme="dark"] .brand-mark__mark { --mark-ink: #e2e1e4; }
   .founding-band { flex-wrap: wrap; row-gap: 2px; padding: 8px 16px; }
   .founding-band__desc { display: none; }
   .founding-band__stage { margin-left: 0; white-space: normal; }
+  /* task 1005148, the visor (visor.css): the top of a phone belongs to the scene and the shell’s
+     corner buttons, so the compass and the place line step aside and all three pills share the
+     bottom row: the main action, Actions (its dots and key only), the sprite with the credits. */
+  html[data-game="on"] .visor:not([hidden]) { --visor-inset-right: var(--ds-space-gutter-narrow); --visor-inset-left: var(--ds-space-gutter-narrow); --visor-inset-bottom: 40px; }
+  html[data-game="on"] .visor__place, html[data-game="on"] .visor__cell, html[data-game="on"] .visor__mark { display: none; }
+  html[data-game="on"] .visor__pill--actions { top: auto; right: auto; left: 50%; bottom: var(--visor-inset-bottom); transform: translateX(-50%); padding: 0 var(--ds-space-xs); }
+  html[data-game="on"] .visor__pill--actions > span:not(.visor__dots) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+  html[data-game="on"] .visor__sheet { top: auto; bottom: calc(var(--visor-inset-bottom) + 56px); right: var(--visor-inset-right); max-height: 70vh; }
+  html[data-game="on"] .visor__me .visor__name { display: none; }
+  html[data-game="on"] .visor__me { padding: 4px var(--ds-space-xs) 4px 4px; }
 }
 /* task 1004424 (BV2.PS10): THE FOUNDING MARK. A pill in .rank-badge's grammar (same
    height, type and radius) so it sits beside a rank without competing with it; the
@@ -1172,23 +1255,7 @@ html[data-handoff="on"] .app-content { padding: 0; }
 .topbar-menu:hover { color: var(--ink); }
 .topbar-menu svg { width: 16px; height: 16px; }
 
-.theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px; height: 32px;
-  border: 0;
-  border-radius: var(--radius-pill);
-  background: none;
-  color: var(--ink-soft);
-  cursor: pointer;
-  padding: 0;
-  flex-shrink: 0;
-}
-.theme-toggle:hover { color: var(--ink); }
-.theme-toggle svg { width: 16px; height: 16px; }
-
-/* task 1475: the accessibility zoom control — sibling of the theme toggle.
+/* task 1475: the accessibility zoom control.
    Widens to fit the "125%"/"150%" label when zoom is active. */
 .zoom-toggle {
   display: inline-flex;
@@ -1255,7 +1322,15 @@ html[data-fullscreen="on"] .app-topbar {
   pointer-events: none;
 }
 html[data-fullscreen="on"] .app-topbar > :not(.topbar-side),
-html[data-fullscreen="on"] .topbar-side > :not(.fullscreen-toggle) { display: none; }
+html[data-fullscreen="on"] .topbar-side > :not(.fullscreen-toggle):not(.upd-pill) { display: none; }
+/* task 1005191: the Update pill stays with the bars away. Game mode opens every page
+   this way, and an update nobody can see is an update nobody takes. */
+html[data-fullscreen="on"] .upd-pill {
+  pointer-events: auto;
+  min-height: 36px;
+  margin-right: 8px;
+  box-shadow: var(--shadow-pop);
+}
 /* task 1004430: the way back must read on ANY ground. The hall's glass is
    near-clear, so over the black sky in the light theme it was a dark glyph on
    black — the page looked stuck without its bars. The card tone plus a drop
@@ -1281,6 +1356,16 @@ html[data-fullscreen="on"] .fullscreen-toggle:hover { color: var(--accent-ink);
 /* A page with no full-screen layout of its own steps its content clear of the
    corner button; the sky and the studio lay themselves out (shell.js `plain`). */
 html[data-fullscreen="on"][data-fullscreen-plain="on"] .app-content { padding-top: 60px; }
+/* EMBEDDED (html[data-embed="on"], shell-game.js; task 1005144, ADR 0401): a screen
+   opened inside the options menu's frame. The menu is the chrome, so the page keeps
+   none of its own — no sidebar, scrim, foot or top bar — and sits on the frame's
+   ground. The page keeps its one <header> in the DOM (hidden), as full screen does. */
+html[data-embed="on"] .app-sidebar,
+html[data-embed="on"] .app-scrim,
+html[data-embed="on"] .app-foot,
+html[data-embed="on"] .app-topbar { display: none; }
+html[data-embed="on"] .app-body { margin-left: 0; }
+html[data-embed="on"] .app-content { padding-top: 0; }
 /* Said once on entering, since the choice is remembered and a page can open in it. */
 .fullscreen-hint {
   position: fixed;
@@ -1313,7 +1398,8 @@ html[data-fullscreen="on"][data-fullscreen-plain="on"] .app-content { padding-to
   flex-shrink: 0;
 }
 .craft-switch__opt,
-.craft-switch__open {
+.craft-switch__open,
+.craft-switch__me {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -1330,10 +1416,12 @@ html[data-fullscreen="on"][data-fullscreen-plain="on"] .app-content { padding-to
   white-space: nowrap;
 }
 .craft-switch__opt:hover,
-.craft-switch__open:hover { color: var(--ink); background: var(--glass); }
+.craft-switch__open:hover,
+.craft-switch__me:hover { color: var(--ink); background: var(--glass); }
 .craft-switch__opt[aria-pressed="true"] { color: var(--ink); background: var(--glass-strong); }
 .craft-switch__opt:focus-visible,
-.craft-switch__open:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.craft-switch__open:focus-visible,
+.craft-switch__me:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
 .craft-switch__icon { width: 15px; height: 15px; flex-shrink: 0; }
 .craft-switch__open { display: none; }
 @media (max-width: 1180px) {
@@ -1344,7 +1432,23 @@ html[data-fullscreen="on"][data-fullscreen-plain="on"] .app-content { padding-to
   .craft-switch { padding: 2px; }
   .craft-switch__opt[aria-pressed="false"] { display: none; }
   .craft-switch--unset .craft-switch__open { display: inline-flex; padding: 0 7px; }
-}
+  .craft-switch__me { padding: 0 2px; }
+  .craft-switch__me .craft-switch__label { display: none; }
+}
+
+/* THE CHARACTER (task 1005147). A builder who holds a character wears its sprite in
+   the top bar in place of the switch: one button, which offers "Change character"
+   (signing out). The sprites are pixel art, so they scale by whole pixels. */
+.craft-sprite { display: block; image-rendering: pixelated; object-fit: contain; }
+.craft-switch__me { padding: 0 10px 0 4px; color: var(--ink); }
+/* The chip is the figure's head: the portrait cropped round its top third. */
+.craft-sprite--chip { width: 26px; height: 26px; border-radius: var(--radius-pill); object-fit: cover; object-position: 50% 22%; }
+/* Character creation: each door is the owner's portrait — the figure on its plinth
+   in the torch-lit hall — filling the top of the door, the words beneath it. */
+.craft-plinth { display: block; overflow: hidden; }
+.craft-sprite--door { width: 100%; height: auto; aspect-ratio: 250 / 290; transition: transform 200ms cubic-bezier(.2, .7, .3, 1); }
+.craft-door--character:hover .craft-sprite--door,
+.craft-door--character:focus-visible .craft-sprite--door { transform: scale(1.03); }
 
 /* The picker: a dialog over a scrim, four doors in a row above the
    "ask me again" box. Each door carries its scene from the approved prototype,
@@ -1427,7 +1531,8 @@ html.setup-gate-open { overflow: hidden; }
 .setup-gate__craft[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); }
 /* The save is the shared primary door (controls.css, task 1005084). */
 .setup-gate__save { margin-top: 12px; }
-.setup-gate__err { margin: 8px 0 0; font-size: 14px; color: var(--danger); }
+.setup-gate__err,
+.craft-picker__error { margin: 8px 0 0; font-size: 14px; color: var(--danger); }
 .setup-gate__foot { margin: 24px 0 0; font-size: 14px; }
 .setup-gate__foot a { color: var(--ink-soft); }
 @media (max-width: 640px) { .setup-gate__panel { padding: 28px 20px 20px; border-radius: 18px; } }
@@ -1525,9 +1630,9 @@ html.setup-gate-open { overflow: hidden; }
   overflow: hidden;
   background: #101012;
 }
-.craft-art--artistry { background: #0c1122; }
+.craft-art--artist { background: #0c1122; }
 .craft-art--ideating { background: #05060d; }
-.craft-art--governing { background: #000; }
+.craft-art--patron { background: #000; }
 .craft-art__dot { position: absolute; border-radius: 999px; box-sizing: border-box; }
 .craft-art__dot--star { background: #d8dcf0; }
 .craft-art__dot--lit { background: var(--accent); border-radius: 0; }
@@ -1592,6 +1697,11 @@ html.setup-gate-open { overflow: hidden; }
   .craft-door__head { padding: 10px 16px 0; }
   .craft-door__name { font-size: 18px; }
   .craft-door__line { flex: 0 0 100%; padding: 0 16px; box-sizing: border-box; }
+  /* A phone stacks the three as rows: the portrait on the left, the words beside it. */
+  .craft-door.craft-door--character { display: grid; grid-template-columns: 86px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; gap: 4px 14px; padding: 0; }
+  .craft-plinth { grid-row: 1 / span 2; width: 86px; }
+  .craft-door.craft-door--character > .craft-door__head { padding: 12px 14px 0 0; }
+  .craft-door.craft-door--character > .craft-door__line { padding: 0 14px 12px 0; }
 }
 
 /* THE CRAFT MODE LOOKS (task 1004495; direction docs/design/craft-mode-direction.md).
@@ -1601,37 +1711,30 @@ html.setup-gate-open { overflow: hidden; }
    what to press: the accent stays the action colour in every mode. Light values
    clear 5.4:1 on the hall's paper; the dark values are the prototype's. Light
    keeps the paper ground; only dark changes the ground and the glass. */
-html[data-craft="artistry"] { --craft: #2e3c6e; --craft-on: #f1e6d2; }
-html[data-craft="ideating"] { --craft: #7a5a0c; --craft-on: #fdf6dd; }
-html[data-craft="governing"] { --craft: #33479e; --craft-on: #eef1ff; }
-html[data-theme="dark"][data-craft="artistry"] {
+html[data-craft="artist"] { --craft: #2e3c6e; --craft-on: #f1e6d2; }
+html[data-craft="patron"] { --craft: #33479e; --craft-on: #eef1ff; }
+html[data-theme="dark"][data-craft="artist"] {
   --craft: #f1e6d2; --craft-on: #0c1122;
   --bg: #07080d; --bg-frame: #0a0b12;
   --glass: rgba(150, 170, 230, .11); --glass-strong: rgba(170, 190, 240, .17);
   --glass-edge: rgba(241, 230, 210, .16);
 }
-html[data-theme="dark"][data-craft="ideating"] {
-  --craft: #f2d27a; --craft-on: #1d1604;
-  --bg: #05060d;
-  --glass: rgba(140, 150, 225, .10); --glass-strong: rgba(160, 170, 240, .16);
-  --glass-edge: rgba(242, 210, 122, .16);
-}
-html[data-theme="dark"][data-craft="governing"] {
+html[data-theme="dark"][data-craft="patron"] {
   --craft: #aabeff; --craft-on: #0a1030;
   --glass-edge: rgba(170, 190, 255, .16);
 }
 /* The shared treatment: the switch's current pill, the current tab and the top
    bar's hairline take the mode colour. */
-html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .craft-switch__opt[aria-pressed="true"] {
+html:is([data-craft="artist"], [data-craft="patron"]) .craft-switch__opt[aria-pressed="true"] {
   background: var(--craft); color: var(--craft-on);
 }
-html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .nav-item--active {
+html:is([data-craft="artist"], [data-craft="patron"]) .nav-item--active {
   background: color-mix(in srgb, var(--craft) 14%, transparent); color: var(--craft);
 }
-html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .nav-item--active .nav-icon,
-html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .nav-item--active .nav-item__label { color: var(--craft); }
-html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .nav-item--active::before { background: var(--craft); }
-html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing"]) .app-topbar {
+html:is([data-craft="artist"], [data-craft="patron"]) .nav-item--active .nav-icon,
+html:is([data-craft="artist"], [data-craft="patron"]) .nav-item--active .nav-item__label { color: var(--craft); }
+html:is([data-craft="artist"], [data-craft="patron"]) .nav-item--active::before { background: var(--craft); }
+html:is([data-craft="artist"], [data-craft="patron"]) .app-topbar {
   border-bottom-color: color-mix(in srgb, var(--craft) 30%, transparent);
 }
 /* The header mark: the mode's own words beside the page title (craft-mode.js
@@ -1735,7 +1838,7 @@ html:is([data-craft="artistry"], [data-craft="ideating"], [data-craft="governing
   .craft-plate .craft-art { width: calc(100% / .582); transform: scale(.582); }
 }
 /* The plate follows the theme (owner, 2026-10-03): light shows each scene's day. */
-html[data-theme="light"] .craft-plate .craft-art--artistry { background: #dfe3ef; }
+html[data-theme="light"] .craft-plate .craft-art--artist { background: #dfe3ef; }
 html[data-theme="light"] .craft-plate .craft-art__dot--star { background: #2e3c6e; }
 html[data-theme="light"] .craft-plate .craft-art__moon { background: #f3c98b; box-shadow: 0 0 0 9px rgba(243, 201, 139, .28); }
 html[data-theme="light"] .craft-plate .craft-art__ground { background: #c3c9dc; }
@@ -1745,28 +1848,8 @@ html[data-theme="light"] .craft-plate .craft-art__dot--gold { background: #c9a23
 html[data-theme="light"] .craft-plate .craft-art__dot--glow { background: #b8891c; box-shadow: 0 0 10px rgba(184, 137, 28, .45); }
 html[data-theme="light"] .craft-plate .craft-art__dot--proto { box-shadow: inset 0 0 0 1px rgba(122, 90, 12, .6); }
 html[data-theme="light"] .craft-plate .craft-art__ring { box-shadow: inset 0 0 0 1px rgba(122, 90, 12, .35); }
-html[data-theme="light"] .craft-plate .craft-art--governing { background: #e9ecf6; }
+html[data-theme="light"] .craft-plate .craft-art--patron { background: #e9ecf6; }
 html[data-theme="light"] .craft-plate .craft-art__city { filter: invert(1) hue-rotate(180deg); }
-/* Ideating's star dust: a few faint fixed specks across the rail itself. */
-html[data-craft="ideating"] .app-sidebar {
-  background-image:
-    radial-gradient(1px 1px at 14px 40px, rgba(242, 210, 122, .5), transparent),
-    radial-gradient(1px 1px at 46px 130px, rgba(242, 210, 122, .35), transparent),
-    radial-gradient(1.5px 1.5px at 120px 90px, rgba(242, 210, 122, .4), transparent),
-    radial-gradient(1px 1px at 200px 190px, rgba(242, 210, 122, .35), transparent),
-    radial-gradient(1px 1px at 30px 230px, rgba(242, 210, 122, .3), transparent),
-    radial-gradient(1.5px 1.5px at 170px 260px, rgba(242, 210, 122, .3), transparent);
-  background-size: 246px 280px;
-}
-html[data-theme="light"][data-craft="ideating"] .app-sidebar {
-  background-image:
-    radial-gradient(1px 1px at 14px 40px, rgba(184, 137, 28, .45), transparent),
-    radial-gradient(1px 1px at 46px 130px, rgba(184, 137, 28, .3), transparent),
-    radial-gradient(1.5px 1.5px at 120px 90px, rgba(184, 137, 28, .35), transparent),
-    radial-gradient(1px 1px at 200px 190px, rgba(184, 137, 28, .3), transparent),
-    radial-gradient(1px 1px at 30px 230px, rgba(184, 137, 28, .25), transparent),
-    radial-gradient(1.5px 1.5px at 170px 260px, rgba(184, 137, 28, .25), transparent);
-}
 
 /* THE MODE TOOLS (task 1004496, craft-mode.js TOOLS): a round button beside the
    switch, in the mode's colour, shown only in its own mode. Artistry's palette
@@ -1965,7 +2048,7 @@ html.pb-editing main { padding-bottom: 180px; }
      tighter and each icon button is 28px — still above the 24px floor — so the
      whole row fits with room to spare. Pinned in tests/hall_topbar_320.mjs. */
   .app-topbar { gap: var(--ds-space-hair); padding: 0 var(--ds-space-xs); }
-  .topbar-menu, .theme-toggle, .fullscreen-toggle { width: 28px; height: 28px; }
+  .topbar-menu, .fullscreen-toggle { width: 28px; height: 28px; }
   .zoom-toggle { min-width: 28px; height: 28px; padding: 0 6px; }
   .topbar-side .topbar-jump { min-width: 28px; padding: 0 6px; }
 }
@@ -2047,11 +2130,13 @@ html.pb-editing main { padding-bottom: 180px; }
 /* Focus: the world's two-tone ring — a 2px accent-derived outline at 3px offset
    inside an 8px --bg halo, so the indicator keeps its own edge over whatever it
    lands on (a bare outline measured 1.1:1 over the light bar). The rail's items
-   ring inside themselves instead, or the halo would spill out of the 64px strip. */
+   ring inside themselves instead, or the halo would spill out of the 64px strip.
+   A CUT control (controls.css) hands in --focus-ring: its clip-path would clip
+   the outline and the halo away, so its ring is the inset two-tone one. */
 :focus-visible {
   outline: 2px solid var(--focus);
   outline-offset: 3px;
-  box-shadow: 0 0 0 8px var(--bg);
+  box-shadow: var(--focus-ring, 0 0 0 8px var(--bg));
   border-radius: var(--radius-sm);
 }
 .nav-item:focus-visible,

package/modules/hall-ui/public/task-detail.js

@@ -451,8 +451,8 @@
       // A create with no discipline the server cannot infer from the wording is
       // refused (task 1002988), so the builder names the craft here. Engineer is
       // the default, the same fallback bug routing uses (ideas/inbox.js).
-      var craftOptions = [['engineer', 'Engineer'], ['artist', 'Artist'], ['ideator', 'Ideator'], ['ui', 'UI']].map(function (c) {
-        return '<option value="' + c[0] + '"' + (c[0] === 'engineer' ? ' selected' : '') + '>' + c[1] + '</option>';
+      var craftOptions = [['artisan', 'Artisan'], ['artist', 'Artist'], ['ui', 'UI']].map(function (c) {
+        return '<option value="' + c[0] + '"' + (c[0] === 'artisan' ? ' selected' : '') + '>' + c[1] + '</option>';
       }).join('');
       box.innerHTML =
         '<form class="td-form" data-form="promote">'
@@ -509,7 +509,7 @@
         title: title,
         description: body + provenance,
         priority: Number(form.priority.value) || 3,
-        discipline: (form.discipline && form.discipline.value) || 'engineer',
+        discipline: (form.discipline && form.discipline.value) || 'artisan',
         source: 'idea_inbox',
         source_ref: 'idea:' + idea.id,
       };
@@ -750,7 +750,8 @@
   }
 
   window.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape' && document.getElementById('deeplink-card')) clearLink();
+    // Spent once it closed the card (ADR 0399 §2.4 row 5, task 1005144).
+    if (e.key === 'Escape' && document.getElementById('deeplink-card')) { e.preventDefault(); clearLink(); }
   });
   window.addEventListener('hashchange', resolve);
 

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

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-07-03-roadmap1">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm">
   <!-- The record archetype (shared with idea.html) and this page's own two
        shapes. Promoted out of an inline <style> by task 1003305 — the block was
        the hall's last substantive one and sat at its hall_audit ratchet. -->
@@ -57,17 +57,17 @@
 <!-- The app shell (sidebar + top bar + footer). Dependency-free; runs at parse
      time so the chrome exists before the deferred page scripts execute. -->
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-09-game-mode"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-helm"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
-<script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
-<script src="/builders/shell.js?v=2026-11-09-game-mode"></script>
+<script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
+<script src="/builders/shell.js?v=2026-11-11-helm"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- task-detail.js still owns the #/idea/N and #/blocker/N deep-link overlay
      (and the #/task/N → /task/N redirect, task 751); load it here too so those
      links still resolve from this page. -->
-<script src="/builders/task-detail.js?v=2026-07-03-taskdetail2" defer></script>
+<script src="/builders/task-detail.js?v=2026-11-10-options" defer></script>
 <script src="/builders/brand-apply.js?v=2026-06-19-r56" defer></script>
 <script src="/builders/md-reader.js" defer></script>
 <script src="/builders/hall-visual.js?v=2026-09-16-visual1" defer></script>

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

@@ -1,6 +1,7 @@
 {
   "_": "The hall's TASK RECORD through modules/ui-design/kit/render.js (task 1003305). The record's own controls — the dependency links, the lifecycle buttons, the figure band, the way back — only exist once a task has LOADED, so the floors here are run against the hall-preview harness rather than the kit's own stub, which carries the public-landing feeds and not the hall's:\n\n  node scripts/hall-preview/server.js --port 4612 --fixture-me\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/task.states.json --base-in http://builders.localhost:4612 --base-out http://builders.localhost:4612\n\nRun against the kit's own stubs instead and every state renders `no such task`, which is a real state and is the `missing` one below — just not the one the re-skin changed.",
   "page": "/task/2166",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",

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

@@ -304,3 +304,13 @@ html[data-fullscreen="on"] .sky-stage .top { padding-right: 184px; }
   .card { max-width: 240px; }
 }
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
+
+/* task 1005148: with the visor up (html.visor-on, game mode; visor.js), the sky's own layers keep
+   clear of the glass, as ADR 0399 §2.3 asks of a scene's pop-ups: the top row, the composer, the
+   jump field and the two side panels step below the compass and the place line, and the foot and
+   the tour rise above the visor's corner pills. Outside game mode nothing here applies. */
+html.visor-on .top { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
+html.visor-on .composer, html.visor-on .jump { top: calc(116px + env(safe-area-inset-top, 0px)); }
+html.visor-on .panel, html.visor-on .room { top: calc(180px + env(safe-area-inset-top, 0px)); bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
+html.visor-on .foot { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
+html.visor-on .tour, html.visor-on .start { bottom: calc(210px + env(safe-area-inset-bottom, 0px)); }

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

@@ -12,8 +12,9 @@
        links, injected into this head by the server like every hall page's
        (tests/hall_tokens.mjs: no hall page hardcodes a web-font stylesheet).
        The template carried its own Google Fonts link for the same two faces. -->
-  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
-  <link rel="stylesheet" href="/builders/thinking.css?v=2026-09-27-split">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm">
+  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-10-visor">
+  <link rel="stylesheet" href="/builders/thinking.css?v=2026-11-10-visor">
 </head>
 <!-- THE SKY (task 1004231 / sky part 3 of 5, goal 1000095; ADR 0331, ADR 0227
      §11). This page is docs/design/mocks/sky/sky.template.html — the prototype
@@ -139,11 +140,13 @@
 </div>
 
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-09-game-mode"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-helm"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
-<script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
-<script src="/builders/shell.js?v=2026-11-09-game-mode"></script>
+<script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
+<script src="/builders/shell.js?v=2026-11-11-helm"></script>
 <script src="/builders/hall-dialog.js"></script>
+<!-- task 1005148: the visor (glass over the scene, game mode only; ADR 0399), after the shell and hall-dialog.js -->
+<script src="/builders/visor.js?v=2026-11-10-visor"></script>
 <script src="/builders/palette.js" defer></script>
 
 <script src="/builders/idea-objects.js?v=2026-09-27-split"></script>
@@ -152,7 +155,7 @@
 <script src="/builders/sky-data.js?v=2026-09-30-uat1"></script>
 <script src="/builders/sky-layout.js?v=2026-09-27-split"></script>
 <script src="/builders/sky-draw.js?v=2026-09-27-split"></script>
-<script src="/builders/sky-interaction.js?v=2026-09-30-uat1"></script>
+<script src="/builders/sky-interaction.js?v=2026-11-10-visor"></script>
 <script src="/builders/sky-panel.js?v=2026-09-30-uat1"></script>
 <script src="/builders/sky-composer.js?v=2026-09-27-split"></script>
 <script src="/builders/sky-tour.js?v=2026-09-27-split"></script>

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

@@ -1,6 +1,7 @@
 {
   "_": "THE SKY (task 1004231 / sky part 3 of 5, goal 1000095; ADR 0331) through modules/ui-design/kit/render.js. The page draws GET /sky + GET /sky/mine; against the kit's own stub neither exists, so every state below renders the EMPTY sky — a real state the floors must hold in (the composer, the tour, the list drawer and the lenses all exist with no thought filed). To look at the populated sky, run it against the hall-preview harness, whose sky.json + sky__mine.json fixtures carry the wells and one of each of the five objects:\n\n  node scripts/hall-preview/server.js --port 4615 --fixture-me\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/thinking.states.json --base-in http://localhost:4615 --base-out http://localhost:4615\n\nThe tour opens by itself on a first visit (sky-tour-seen), so states that want the bare sky skip it first.\n\nIN THE HALL (task 1004327): the page sits in the hall chrome, so it renders in BOTH modes — the chrome follows the hall theme and the sky's stage stays the void in both. The full-* states press the shell's full-screen switch: the sidebar and the top bar leave, and the one button that brings them back floats top right.",
   "page": "/builders/thinking",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",