@bongos/core 1.24.82 → 1.24.84

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

@@ -182,7 +182,12 @@
   --line:        var(--ds-line);
   --radius:      var(--ds-radius-panel);
   --radius-sm:   var(--ds-radius-tile);
-  --radius-pill: var(--ds-radius-pill);
+  /* HELM DRAWS NO PILL (task 1005194, ADR 0402). The name stays, because some
+     seventy rules across the page sheets spell it, but in the hall it is a
+     square corner: a field, a tag, a chip, a toggle and a toast are square
+     inside one hairline, and only what you press is cut (--cut-path). A thing
+     that must be round says --ds-radius-pill. */
+  --radius-pill: 0px;
 
   /* ---- the shell's metrics. --topbar-h stays under the kit's 80px top-bar
           floor; --sidebar-w IS the rail, because v3 pins the rail at every
@@ -785,16 +790,26 @@ 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; }
+  /* tasks 1005148 and 1005195, the visor (visor.css): the top of a phone belongs to the scene
+     and the shell’s corner buttons, so the top arc, its notch and the place all step aside. The foot row keeps its three parts in one line and nothing leans: the sprite
+     with the count over its word, the one accent button (its name may take two lines; its key is in the sheet), and of
+     the key hints only Actions, as its dots (every other hint is a row in its sheet). */
+  html[data-game="on"] #visor { --visor-inset-bottom: 52px; }
+  html[data-game="on"] .visor__place, html[data-game="on"] .visor__notch, html[data-game="on"] .visor__frame--top, html[data-game="on"] .visor__name { display: none; }
+  html[data-game="on"] .visor__foot { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--ds-space-hair); }
+  html[data-game="on"] .visor__me, html[data-game="on"] .visor__hints { transform: none; }
+  html[data-game="on"] .visor__me { gap: var(--ds-space-hair); }
+  html[data-game="on"] .visor__sprite { width: 36px; height: 36px; }
+  html[data-game="on"] .visor__num { font-size: var(--ds-text-4xl); }
+  html[data-game="on"] .visor__credits { flex-direction: column; align-items: flex-start; gap: 2px; }
+  html[data-game="on"] .visor__unit { font-size: var(--ds-text-2xs); line-height: 1; }
+  html[data-game="on"] .visor__main { min-width: 0; overflow-wrap: anywhere; min-height: 48px; padding: var(--ds-space-hair) var(--ds-space-xs); gap: var(--ds-space-hair); font-size: var(--ds-text-xl); clip-path: var(--cut-path-sm); }
+  html[data-game="on"] .visor__hint:not([data-visor-sheet]) { display: none; }
+  html[data-game="on"] .visor__hint--sheet { min-width: 44px; justify-content: center; }
+  html[data-game="on"] .visor__hint--sheet .visor__dots { display: block; }
+  html[data-game="on"] .visor__hint--sheet > :not(.visor__dots) { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+  html[data-game="on"] .visor__main .visor__key { display: none; }
+  html[data-game="on"] .visor__sheet { bottom: calc(var(--visor-inset-bottom) + 80px); max-height: 70vh; }
 }
 /* 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
@@ -1126,19 +1141,26 @@ html[data-theme="dark"] .gplate__light { display: none; }
   min-width: 28px;
   padding: 0 11px 0 9px;
   border: 1px solid var(--rule);
-  border-radius: var(--radius-pill);
-  background: var(--bg-card);
+  border-radius: var(--press-radius);
+  /* Helm (task 1005194): it is pressed, so it is cut, in the name voice; the cut
+     clips an outline, so its focus is the inset ring */
+  clip-path: var(--cut-path-sm);
+  --focus-ring: var(--press-focus);
+  background: var(--press-fill);
   color: var(--ink);
   font: inherit;
-  font-size: 12px;
-  font-weight: 500;
+  font-family: var(--name-face);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-tight);
+  text-transform: var(--name-case);
   line-height: 1;
   white-space: nowrap;
   flex-shrink: 0;
   cursor: pointer;
 }
 .upd-pill:hover { border-color: var(--ink-faint); }
-.upd-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.upd-pill:focus-visible { outline: 0; border-radius: var(--press-radius); }
 .upd-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
 .upd-pill[data-face="held"] .upd-pill__dot { background: var(--ink-faint); }
 .upd-pill[data-face="done"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
@@ -1331,7 +1353,6 @@ 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
@@ -1343,13 +1364,22 @@ html[data-fullscreen="on"] .fullscreen-toggle {
   gap: 6px;
   padding: 0 14px 0 10px;
   color: var(--ink);
-  background: var(--bg-card);
-  box-shadow: 0 0 0 1px var(--rule), 0 4px 16px rgba(0, 0, 0, .35);
-  font-size: 13px;
-  font-weight: 500;
+  /* Helm (task 1005194): the cut corner on the press fill inside one hairline, in
+     the name voice. The fill is opaque, so it still reads on any ground. */
+  background: var(--press-fill);
+  border: var(--line) solid var(--rule);
+  border-radius: var(--press-radius);
+  clip-path: var(--cut-path-sm);
+  --focus-ring: var(--press-focus);
+  font-family: var(--name-face);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-tight);
+  text-transform: var(--name-case);
   white-space: nowrap;
 }
-/* A phone has no room for the words; the round button keeps its card tone. */
+html[data-fullscreen="on"] .fullscreen-toggle:focus-visible { outline: 0; border-radius: var(--press-radius); }
+/* A phone has no room for the words; the button keeps its fill. */
 @media (max-width: 640px) {
   html[data-fullscreen="on"] .fullscreen-toggle { width: 36px; padding: 0; }
   .fullscreen-toggle__label { display: none; }
@@ -1376,7 +1406,7 @@ html[data-embed="on"] .app-content { padding-top: 0; }
   z-index: var(--z-topbar);
   max-width: min(320px, calc(100vw - 24px));
   padding: 8px 12px;
-  border-radius: 10px;
+  border-radius: var(--press-radius);
   background: var(--bg-card);
   color: var(--ink);
   font-size: 13px;
@@ -1443,12 +1473,12 @@ html[data-embed="on"] .app-content { padding-top: 0; }
    (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. */
+/* The chip is the figure's head: the portrait cropped to 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-sprite--door { width: 100%; height: auto; aspect-ratio: 250 / 290; transition: transform var(--ds-dur-base) var(--ds-ease); }
 .craft-door--character:hover .craft-sprite--door,
 .craft-door--character:focus-visible .craft-sprite--door { transform: scale(1.03); }
 
@@ -1538,6 +1568,12 @@ html.setup-gate-open { overflow: hidden; }
 .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; } }
+/* THE PICKER IN HELM (task 1005194, ADR 0402). Two screens share these rules. The session
+   picker ("What are you doing now?") is a square night panel over the scrim. Character
+   creation (.craft-picker--create) is a whole screen, not a box: the night itself, the
+   title centred in the name voice, three tall doors, the one line at the foot. A door is
+   pressable, so it is cut; the door the hall suggests is the one thing lit. A cut clips an
+   outline, so a door's focus is the inset ring (--press-focus). */
 .craft-picker {
   position: fixed;
   inset: 0;
@@ -1545,27 +1581,36 @@ html.setup-gate-open { overflow: hidden; }
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding: max(24px, 8vh) 16px 24px;
+  padding: max(var(--ds-space-md), 8vh) var(--ds-space-sm) var(--ds-space-md);
   overflow-y: auto;
   background: var(--scrim);
 }
+.craft-picker--create { background: var(--bg); }
 .craft-picker__panel {
   position: relative;
   width: min(1120px, 100%);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 40px 44px 30px;
-  border-radius: 22px;
+  gap: var(--ds-space-xs);
+  padding: var(--ds-space-lg) var(--ds-space-lg) var(--ds-space-md);
   background: var(--bg-card);
   color: var(--ink);
-  box-shadow: 0 0 0 1px var(--glass-edge), 0 24px 64px rgba(0, 0, 0, .35);
+  border: var(--line-strong) solid var(--rule);
+  box-shadow: var(--ds-shadow-pop);
+}
+.craft-picker__panel--create {
+  padding: 0;
+  gap: var(--ds-space-sm);
+  background: none;
+  border: 0;
+  box-shadow: none;
+  text-align: center;
 }
 .craft-picker__close {
   position: absolute;
-  top: 14px;
-  right: 14px;
+  top: var(--ds-space-sm);
+  right: var(--ds-space-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1587,44 +1632,88 @@ html.setup-gate-open { overflow: hidden; }
   text-transform: var(--label-case);
   color: var(--ink-faint);
 }
+.craft-picker__panel--create .craft-picker__eyebrow { color: var(--ink-soft); }
 .craft-picker__title {
   margin: 0;
-  font-family: var(--font-display);
-  font-size: clamp(28px, 4vw, 40px);
-  font-weight: 300;
-  letter-spacing: -0.03em;
+  font-family: var(--name-face);
+  font-size: var(--ds-text-headline);
+  font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-tight);
+  text-transform: var(--name-case);
   line-height: 1.15;
+  text-wrap: balance;
+  color: var(--ink);
 }
-.craft-picker__lede { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
+.craft-picker__panel--create .craft-picker__title { letter-spacing: var(--name-space-wide); text-shadow: var(--name-glow); }
+.craft-picker__lede { margin: 0 0 var(--ds-space-sm); font-size: var(--ds-text-xl); line-height: 1.5; color: var(--ink-soft); }
+/* character creation says its one line at the foot, under the doors; the words and the
+   dialog's aria-describedby are where they were */
+.craft-picker__panel--create .craft-picker__lede { order: 3; margin: var(--ds-space-sm) 0 0; }
+.craft-picker__panel--create .craft-picker__error { order: 4; }
 .craft-picker__doors {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
+  gap: var(--ds-space-sm);
 }
+.craft-picker__panel--create .craft-picker__doors { gap: var(--ds-space-md); margin-top: var(--ds-space-md); }
 .craft-door {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 8px;
-  padding: 0 0 20px;
+  gap: var(--ds-space-hair);
+  padding: 0 0 var(--ds-space-md);
   overflow: hidden;
   border: 0;
-  border-radius: 14px;
-  background: var(--bg);
-  color: var(--ink);
+  border-radius: var(--press-radius);
+  clip-path: var(--cut-path);
+  position: relative;
+  background: var(--night-glass);
+  color: var(--ink-soft);
   font: inherit;
   text-align: left;
   cursor: pointer;
-  box-shadow: inset 0 0 0 1px var(--glass-edge);
-  transition: transform 200ms cubic-bezier(.2, .7, .3, 1), box-shadow 200ms;
-}
-.craft-door:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--rule); }
-.craft-door:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
-.craft-door--pre { box-shadow: inset 0 0 0 2px var(--accent); }
-.craft-door__head { display: flex; align-items: center; gap: 10px; padding: 10px 20px 0; }
-.craft-door__icon { width: 20px; height: 20px; flex-shrink: 0; }
-.craft-door__name { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
-.craft-door__line { padding: 0 20px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
+  box-shadow: inset 0 0 0 var(--line-strong) var(--rule);
+  transition: background-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
+}
+/* the door's edge again, over what it holds: an inset shadow sits under a portrait
+   that fills the door, so the hairline, the suggested door's edge and the focus ring
+   would all stop at the picture */
+.craft-door::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inherit; }
+.craft-door:hover { background: var(--glass); box-shadow: inset 0 0 0 var(--line-strong) var(--ink-faint); }
+/* the door the hall suggests: the accent's wash inside the accent's edge */
+.craft-door--pre, .craft-door--pre:hover { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent); }
+.craft-door:focus-visible { outline: 0; border-radius: var(--press-radius); box-shadow: var(--press-focus); }
+.craft-door__head { display: flex; align-items: center; gap: var(--ds-space-xs); padding: var(--ds-space-xs) var(--ds-space-md) 0; }
+.craft-door__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink); }
+.craft-door__name {
+  font-family: var(--name-face);
+  font-size: var(--ds-text-4xl);
+  font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-tight);
+  text-transform: var(--name-case);
+  line-height: 1;
+  color: var(--ink);
+}
+.craft-door--pre .craft-door__name { font-weight: var(--name-weight-lit); }
+.craft-door__line { padding: 0 var(--ds-space-md); font-size: var(--ds-text-lg); line-height: 1.45; color: var(--ink-soft); }
+/* a character's door: the portrait fills the top under the cut, the name is the largest
+   thing on it, and the door under the keyboard names the key that takes it */
+.craft-door--character { gap: var(--ds-space-xs); }
+.craft-door--character .craft-door__head { flex-wrap: wrap; padding-top: var(--ds-space-sm); }
+.craft-door--character .craft-door__name { font-size: var(--ds-text-headline); letter-spacing: var(--name-space); }
+.craft-door--character .craft-door__line { font-size: var(--ds-text-2xl); }
+.craft-door--character:focus-visible .craft-door__head::after {
+  content: "Enter";
+  padding: 2px var(--ds-space-hair);
+  background: var(--accent);
+  color: var(--accent-on);
+  font-family: var(--name-face);
+  font-size: var(--ds-text-md);
+  font-weight: var(--name-weight-lit);
+  letter-spacing: var(--label-space);
+  text-transform: var(--name-case);
+  line-height: 1.2;
+}
 .craft-art {
   position: relative;
   display: block;
@@ -1664,22 +1753,22 @@ html.setup-gate-open { overflow: hidden; }
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 12px 24px;
-  margin-top: 14px;
-  padding-top: 18px;
-  border-top: 1px solid var(--rule-soft);
+  gap: var(--ds-space-xs) var(--ds-space-md);
+  margin-top: var(--ds-space-sm);
+  padding-top: var(--ds-space-sm);
+  border-top: var(--line) solid var(--rule-soft);
 }
 .craft-picker__again {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--ds-space-xs);
   min-height: 24px;
-  font-size: 14px;
+  font-size: var(--ds-text-md);
   color: var(--ink-soft);
   cursor: pointer;
 }
 .craft-picker__again input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
-.craft-picker__hint { font-size: 13px; color: var(--ink-faint); }
+.craft-picker__hint { font-size: var(--ds-text-sm); color: var(--ink-faint); }
 .craft-picker__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
 /* task 1004685 (prototype): Governing is a held seat, so a builder with none sees
    three doors, not four (craft-mode.js stamps the count). */
@@ -1690,20 +1779,22 @@ html.setup-gate-open { overflow: hidden; }
   .craft-picker__doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 @media (max-width: 640px) {
-  .craft-picker { padding: 12px; }
-  .craft-picker__panel { padding: 28px 18px 20px; gap: 8px; border-radius: 18px; }
-  .craft-picker__doors { grid-template-columns: minmax(0, 1fr); gap: 10px; }
-  .craft-door { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 0 0 14px; }
+  .craft-picker { padding: var(--ds-space-xs); }
+  .craft-picker--create { padding: var(--ds-space-md) var(--ds-space-xs); }
+  .craft-picker__panel { padding: var(--ds-space-md) var(--ds-space-sm) var(--ds-space-sm); gap: var(--ds-space-hair); }
+  .craft-picker__panel--create { padding: 0; }
+  .craft-picker__doors, .craft-picker__panel--create .craft-picker__doors { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-xs); }
+  .craft-door { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 0 0 var(--ds-space-sm); clip-path: var(--cut-path-sm); }
   .craft-art { flex: 0 0 100%; height: 96px; }
   .craft-art__city { top: -8px; }
-  .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; }
+  .craft-door__head { padding: var(--ds-space-xs) var(--ds-space-sm) 0; }
+  .craft-door__line { flex: 0 0 100%; padding: 0 var(--ds-space-sm); 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-door.craft-door--character { display: grid; grid-template-columns: 86px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; gap: 4px var(--ds-space-sm); 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; }
+  .craft-door.craft-door--character > .craft-door__head { padding: var(--ds-space-xs) var(--ds-space-sm) 0 0; }
+  .craft-door.craft-door--character > .craft-door__line { padding: 0 var(--ds-space-sm) var(--ds-space-xs) 0; font-size: var(--ds-text-lg); }
+  .craft-door--character .craft-door__name { font-size: var(--ds-text-5xl); letter-spacing: var(--name-space-tight); }
 }
 
 /* THE CRAFT MODE LOOKS (task 1004495; direction docs/design/craft-mode-direction.md).
@@ -4220,10 +4311,15 @@ html[data-door="out"] #hall-main { width: 100%; }
   color: var(--accent-ink);
   background: var(--accent-tint);
   border: 0;
-  border-radius: var(--radius-pill);
+  border-radius: var(--press-radius);
+  /* Helm (task 1005194): a chip is pressed, so it takes the small cut and the
+     inset focus ring */
+  clip-path: var(--cut-path-sm);
+  --focus-ring: var(--press-focus);
   cursor: pointer;
 }
 .chip:hover { color: var(--ink); }
+.chip:focus-visible { outline: 0; border-radius: var(--press-radius); }
 
 /* tab strip — the .setup__tab idiom in the .setup__toggle frame, promoted */
 /* A tab strip is hairlines, not a segmented box: one rule under the row and a

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-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
   <!-- 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. -->

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

@@ -12,8 +12,8 @@
        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-11-11-view2">
-  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-10-visor">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
+  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-11-helm3">
   <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
@@ -146,7 +146,7 @@
 <script src="/builders/shell.js?v=2026-11-11-view2"></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-11-view2"></script>
+<script src="/builders/visor.js?v=2026-11-11-helm3"></script>
 <script src="/builders/palette.js" defer></script>
 
 <script src="/builders/idea-objects.js?v=2026-09-27-split"></script>

package/modules/hall-ui/public/tweak-editor.html

@@ -10,7 +10,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-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm3">
   <link rel="stylesheet" href="/builders/tweak-editor.css?v=2026-09-29-tw27-aqfix">
 </head>
 <!-- THE TWEAK EDITOR (task 1004321 / BV2.TW10, goal 1000095; ADR 0341 D4 and

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

@@ -1,80 +1,141 @@
-/* visor.css — the first-person visor (task 1005148, visor.js; ADR 0399). Glass over the scene:
-   the frame lines, the place, three pills and the actions sheet. It shows in game mode only, and
-   it is an overlay, never layout, so the stage under it never changes size (ADR 0399 §2.1).
-   Colours are the hall's tokens; the frame is hairline ink, never a glow (DESIGN.md: no
-   near-black-plus-neon HUD). Record: modules/hall-ui/records/visor.md. */
+/* visor.css — the first-person visor (task 1005148, visor.js; ADR 0399), in the Helm look: the
+   minimal visor (task 1005195, ADR 0402). Glass over the scene: two thin arcs, the place in the
+   name voice, and one foot row (your credits, the one accent button, a quiet row of key hints).
+   Hairlines, not cards: nothing on the glass is a box but the button you press and the key in
+   a hint. It shows in game mode only, and it is an overlay, never layout, so the stage under it
+   never changes size (ADR 0399 §2.1).
+   IT READS OVER ANY SKY, with no per-hour style: the glass darkens toward its top and bottom
+   edge (--night-glass), every word wears the type halo (--type-halo), every line is drawn over a
+   wider stroke of the night and so is every letter, and a key sits on a chip of the night. Colours, sizes and corners
+   are the hall tier's tokens; nothing here is typed in. Record: modules/hall-ui/records/visor.md. */
 .visor { display: none; }
 html[data-game="on"] .visor:not([hidden]) {
   display: block; position: fixed; inset: 0; z-index: 4; pointer-events: none;
   /* where the glass sits, so a scene's pop-up can keep clear of it (ADR 0399 §2.3) */
-  --visor-inset-top: 64px; --visor-inset-right: 40px; --visor-inset-bottom: 76px; --visor-inset-left: 40px;
+  --visor-inset-top: 64px; --visor-inset-bottom: 76px;
+  --visor-inset-right: max(var(--ds-space-gutter-narrow), var(--helm-inset)); --visor-inset-left: var(--visor-inset-right);
+  background: linear-gradient(to bottom, var(--night-glass), transparent 128px, transparent calc(100% - 260px), var(--night-glass));
   color: var(--ink); font-family: var(--font-body);
 }
 
-/* the frame: stretched over the stage, every stroke one hairline at any size */
-.visor__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+/* the frame: each arc is stretched across the stage, every stroke one hairline at any size. The
+   top arc, its notch and the place all sit inside the top inset, above where a scene starts its
+   own top row; the foot arc runs under the foot row. */
+.visor__frame { position: absolute; left: 0; width: 100%; overflow: visible; }
+.visor__frame--top { top: calc(var(--visor-inset-top) - 50px); height: 42px; }
+.visor__frame--foot { bottom: calc(var(--visor-inset-bottom) - 44px); height: 18px; }
 .visor__frame path { vector-effect: non-scaling-stroke; }
-.visor__line { fill: none; stroke: var(--rule); stroke-width: var(--ds-line); }
-.visor__line--side { stroke: var(--rule-soft); }
-.visor__cell { fill: color-mix(in srgb, var(--ink) 12%, transparent); stroke: var(--rule); stroke-width: var(--ds-line); }
-.visor__mark { fill: var(--accent); stroke: none; }
+.visor__line { fill: none; stroke: var(--ink-soft); stroke-opacity: .6; stroke-width: var(--line-strong); }
+.visor__line--under { stroke: var(--night-glass); stroke-opacity: 1; stroke-width: 5px; }
+.visor__dot { fill: var(--ink-soft); stroke: var(--night-glass); stroke-width: var(--line-strong); }
+.visor__notch, .visor__sight { position: absolute; left: 50%; transform: translate(-50%, -50%); overflow: visible; }
+.visor__notch { top: calc(var(--visor-inset-top) - 36px); width: 12px; height: 9px; }
+.visor__sight { top: 50%; width: 24px; height: 24px; }
 
-/* the place, under the compass */
+/* type over the scene: the halo, and a stroke of the night painted under each letter, the same
+   move as the lines' */
+.visor__place, .visor__who, .visor__hint {
+  text-shadow: var(--type-halo); -webkit-text-stroke: 4px var(--night-glass); paint-order: stroke fill;
+}
+/* the name voice, for every name on the glass */
+.visor__place, .visor__name, .visor__unit, .visor__main, .visor__hint, .visor__key, .visor__sheet-title, .visor__cap {
+  font-family: var(--name-face); font-weight: var(--name-weight); text-transform: var(--name-case);
+}
+
+/* the place, under the top arc */
 .visor__place {
-  position: absolute; left: 50%; top: max(9.5%, 84px); transform: translateX(-50%); margin: 0;
-  font-family: var(--font-mono); font-size: var(--ds-text-2xs); letter-spacing: .14em; text-transform: uppercase;
+  position: absolute; left: 50%; top: calc(var(--visor-inset-top) - 26px); transform: translateX(-50%); margin: 0;
+  font-size: var(--ds-text-2xl); letter-spacing: var(--name-space-wide); line-height: 1.2;
   color: var(--ink-soft); white-space: nowrap;
 }
 
-/* the pills: the only parts of the glass that take a pointer */
-.visor__pill, .visor__me {
-  position: absolute; pointer-events: auto; box-sizing: border-box;
-  display: inline-flex; align-items: center; gap: var(--ds-space-xs);
-  min-height: 46px; padding: 0 var(--ds-space-sm);
-  background: var(--bg-card); color: var(--ink); border: var(--ds-line) solid var(--rule);
-  border-radius: var(--ds-radius-pill); font: inherit; font-size: var(--ds-text-sm); text-decoration: none;
+/* the foot row: you on the left, the one thing to press in the middle, the key hints on the
+   right. The two side groups lean in a little, as the glass curves. */
+.visor__foot {
+  position: absolute; left: var(--visor-inset-left); right: var(--visor-inset-right); bottom: var(--visor-inset-bottom);
+  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--ds-space-sm);
+}
+.visor__me {
+  justify-self: start; display: flex; align-items: center; gap: var(--ds-space-sm);
+  transform: perspective(900px) rotateY(16deg); transform-origin: left center;
+}
+.visor__sprite {
+  flex: none; width: 56px; height: 56px; object-fit: cover; object-position: 50% 12%;
+  background: var(--glass-strong); clip-path: var(--cut-path-sm);
+}
+.visor__who { display: flex; flex-direction: column; gap: 2px; }
+.visor__name { font-size: var(--ds-text-xs); letter-spacing: var(--name-space); line-height: 1; color: var(--ink-soft); }
+.visor__credits { display: flex; align-items: baseline; gap: var(--ds-space-xs); white-space: nowrap; }
+.visor__num { font-family: var(--name-face); font-size: var(--ds-text-headline); font-weight: 400; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
+.visor__unit { font-size: var(--ds-text-md); letter-spacing: var(--name-space); color: var(--ink-soft); }
+
+/* the one accent button: the cut corner, the dark ink, the key that takes it */
+.visor__main {
+  pointer-events: auto; box-sizing: border-box; justify-self: center;
+  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm);
+  min-height: 56px; padding: var(--ds-space-hair) var(--ds-space-sm) var(--ds-space-hair) var(--ds-space-md);
+  background: var(--accent); color: var(--accent-on); border: 0; border-radius: var(--press-radius); clip-path: var(--cut-path);
+  font-size: var(--ds-text-3xl); font-weight: var(--name-weight-lit); letter-spacing: var(--name-space-tight); line-height: 1.1;
+  text-decoration: none; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.visor__main:hover { background: var(--accent-lift); color: var(--accent-on); text-decoration: none; }
+
+/* the key hints: a key and a name, no box round the pair. The only other parts of the glass
+   that take a pointer. */
+.visor__hints {
+  justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 var(--ds-space-md);
+  transform: perspective(900px) rotateY(-16deg); transform-origin: right center;
+}
+.visor__hint {
+  pointer-events: auto; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--ds-space-hair);
+  min-height: 44px; padding: 0; background: none; border: 0; border-radius: var(--press-radius);
+  color: var(--ink-soft); font-size: var(--ds-text-lg); letter-spacing: var(--name-space-tight); white-space: nowrap;
+  text-decoration: none; cursor: pointer;
+  transition: color var(--ds-dur-fast) var(--ds-ease);
+}
+.visor__hint:hover { color: var(--ink); text-decoration: none; }
+.visor__hint[hidden] { display: none; }
+/* Actions on a phone: three dots on the same chip of the night a key sits on (style.css shows it) */
+.visor__dots {
+  display: none; box-sizing: content-box; width: 14px; height: 4px; padding: 10px 5px; border: var(--line-strong) solid currentColor;
+  background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0 / 5px 4px repeat-x content-box, var(--bg);
 }
-.visor__pill { cursor: pointer; }
-.visor__pill:hover { border-color: var(--ink-faint); }
-.visor__pill:focus-visible, .visor__row:focus-visible, .visor__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
-.visor__pill--main { left: var(--visor-inset-left); bottom: var(--visor-inset-bottom); background: var(--accent); color: var(--accent-on); border-color: var(--accent); font-weight: 500; }
-.visor__pill--main:hover { border-color: var(--accent-deep); }
-.visor__pill--actions { right: var(--visor-inset-right); top: var(--visor-inset-top); }
-.visor__pill[hidden] { display: none; }
-.visor__dots { width: 14px; height: 4px; background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0 / 5px 4px repeat-x; }
-.visor__me { right: var(--visor-inset-right); bottom: var(--visor-inset-bottom); padding: 4px var(--ds-space-sm) 4px 4px; pointer-events: none; }
-.visor__sprite { width: 38px; height: 38px; border-radius: var(--ds-radius-pill); object-fit: cover; object-position: 50% 12%; background: var(--bg-deep); }
-.visor__who { display: flex; flex-direction: column; line-height: 1.2; }
-.visor__name { font-weight: 500; }
-.visor__credits { font-size: var(--ds-text-2xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
 .visor__key {
-  font-family: var(--font-mono); font-size: var(--ds-text-2xs); line-height: 1; padding: 3px 5px;
-  border: var(--ds-line) solid currentColor; border-radius: var(--ds-radius-pill); opacity: .75;
+  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none;
+  min-width: 24px; height: 24px; padding: 0 5px;
+  border: var(--line-strong) solid currentColor; background: var(--bg);
+  font-size: var(--ds-text-sm); letter-spacing: 0; line-height: 1; text-shadow: none; -webkit-text-stroke: 0;
 }
+.visor__main .visor__key { background: none; }
+/* a cut corner clips an outline, so every control here takes the inset two-tone ring */
+.visor__main:focus-visible, .visor__hint:focus-visible, .visor__row:focus-visible, .visor__close:focus-visible { outline: 0; border-radius: var(--press-radius); box-shadow: var(--press-focus); }
 
-/* the sheet: above the scene's pop-ups, under the modals (ADR 0399 §2.3 layer 4) */
+/* the sheet: above the scene's pop-ups, under the modals (ADR 0399 §2.3 layer 4). The night
+   panel between two strong hairlines, standing over the hints that opened it, clear of the foot
+   row even when the hints have wrapped onto a second line. */
 .visor__sheet {
-  position: absolute; right: var(--visor-inset-right); top: var(--visor-inset-top); z-index: 1;
+  position: absolute; right: var(--visor-inset-right); bottom: calc(var(--visor-inset-bottom) + 100px); z-index: 1;
   pointer-events: auto; box-sizing: border-box; width: min(18rem, calc(100vw - 2 * var(--ds-space-gutter-narrow)));
-  max-height: calc(100% - var(--visor-inset-top) - var(--visor-inset-bottom)); overflow-y: auto;
-  padding: var(--ds-space-sm); background: var(--bg-card); border: var(--ds-line) solid var(--rule);
-  border-radius: var(--ds-radius-panel); box-shadow: var(--ds-shadow-pop);
+  max-height: calc(100% - var(--visor-inset-top) - var(--visor-inset-bottom) - 100px); overflow-y: auto;
+  padding: var(--ds-space-sm); background: var(--bg-card);
+  border: 0 solid var(--rule); border-left-width: var(--line-strong); border-right-width: var(--line-strong);
 }
 .visor__sheet-head { display: flex; align-items: center; justify-content: space-between; }
-.visor__sheet-title { margin: 0; font-size: var(--ds-text-md); font-weight: 500; }
-.visor__close { min-width: 32px; min-height: 32px; background: none; border: 0; color: var(--ink-soft); cursor: pointer; }
-.visor__cap { margin: var(--ds-space-xs) 0 2px; font-family: var(--font-mono); font-size: var(--ds-text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
+.visor__sheet-title { margin: 0; font-size: var(--ds-text-xl); letter-spacing: var(--name-space); color: var(--ink); }
+.visor__close { min-width: 32px; min-height: 32px; padding: 0; background: none; border: 0; color: var(--ink-soft); cursor: pointer; }
+.visor__cap { margin: var(--ds-space-xs) 0 2px; font-size: var(--ds-text-xs); letter-spacing: var(--name-space); color: var(--ink-soft); }
 .visor__rows { list-style: none; margin: 0; padding: 0; }
 .visor__rows + .visor__rows { margin-top: var(--ds-space-xs); }
 .visor__row {
   display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-xs);
-  box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 2px;
+  box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 2px;
   background: none; border: 0; border-top: var(--ds-line) solid var(--rule-soft);
-  color: var(--ink); font: inherit; font-size: var(--ds-text-sm); text-align: left; text-decoration: none; cursor: pointer;
+  color: var(--ink); font: inherit; font-size: var(--ds-text-md); text-align: left; text-decoration: none; cursor: pointer;
 }
-.visor__row:hover { color: var(--accent-deep); }
+.visor__row:hover { color: var(--accent-ink); }
 .visor__row--hint { cursor: default; color: var(--ink-soft); }
 .visor__row--hint:hover { color: var(--ink-soft); }
+.visor__sheet .visor__key { color: var(--ink-soft); background: none; }
 
 /* a phone (640px and narrower): the rules live in style.css’s shared phone block, so the
    visor adds no breakpoint of its own (the design-count ratchet). */