@bongos/core 1.19.484 → 1.19.486

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

@@ -1,14 +1,18 @@
-/* settings.css — page-local styles for Settings (task 2172; extracted from
-   settings.html's old inline <style> per the hall placement rules). Components
-   layered on the shared design system (style.css) — the rail (.section-rail /
-   .rail-link) and buttons derive from the shared tokens so instance theme
-   packs reskin this page too. */
+/* settings.css — what Settings has and the rest of the panel family does not
+   (task 1003308, goal 1000081; the archetype is panel.css). The grouped layout
+   behind the section rail, the group head, the token ladder, the voices grid,
+   the volume line and the image-key banner. Every colour is a `var()` of the
+   world's tier; the one literal pair is the Discord mark, named below.
 
-/* ---- grouped layout: left sub-nav rail + one visible group (task 1723) ---- */
+   The rail itself (.section-rail / .rail-link) is the shell's, built by
+   OTBKit.makeSectionRail in switch mode; this sheet only widens its column to
+   the mock's and keeps one group visible at a time. */
+
+/* ---- grouped layout: left rail + one visible group ------------------------ */
 .settings-layout {
   display: grid;
-  grid-template-columns: 180px minmax(0, 1fr);
-  gap: 20px;
+  grid-template-columns: 206px minmax(0, 1fr);
+  gap: 30px;
   align-items: start;
 }
 .settings-layout[hidden] { display: none !important; }
@@ -24,357 +28,136 @@
 .settings-groups[data-active="sound"] > [data-group="sound"],
 .settings-groups[data-active="extensions"] > [data-group="extensions"] { display: block; }
 .settings-groups > [data-group][hidden] { display: none !important; }
+.settings-groups .scroll { margin: 0 0 var(--sp-sm); }
+.settings-groups .scroll__lede { font-size: 14.5px; }
+/* the rail's items at the mock's height: the shell's 28px rows are Standing's
+   density, and a settings group is a destination, not a scroll-spy stop */
+#settings-rail .rail-link { min-height: 38px; padding: 0 14px; font-size: 14.5px; text-transform: none; border-radius: var(--radius-pill); }
+#settings-rail .rail-link--active::before { left: 0; top: 7px; bottom: 7px; }
 
-/* task 2172 density pass — standard panel anatomy (title → one-line purpose →
-   control → save-semantics note) in a tighter card: less padding + stacking
-   margin than the default .scroll, ledes clamped to one visual line's worth. */
-.settings-groups .scroll { padding: 16px 18px; margin: 0 0 12px; }
-.settings-groups .scroll__lede { font-size: 13px; margin-bottom: 10px; }
+/* the group head: the group's name in the display voice over a hairline, with
+   its own address in the mono face beside it (a machine's word keeps its case) */
+.grp__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--sp-sm);
+  margin: 0 0 var(--sp-sm);
+  padding-bottom: var(--sp-xs);
+  border-bottom: var(--line) solid var(--glass-edge);
+}
+.grp__h { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.1vw, 29px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
+.grp__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
 
-@media (max-width: 768px) {
+@media (max-width: 860px) {
   /* Collapse to one column; the shared .section-rail ≤768px rules turn the
-     rail into a sticky horizontal chip strip just under the top bar. */
-  .settings-layout { grid-template-columns: minmax(0, 1fr); }
+     rail into a horizontal chip strip just under the top bar. */
+  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }
 }
-
-.settings-status {
-  font-size: 13px;
-  color: var(--ink-soft);
-  min-height: 1.2em;
-  margin-top: 8px;
-}
-.section-note {
-  color: var(--ink-faint);
-  font-size: 12.5px;
-  margin-top: 10px;
-  margin-bottom: 0;
+@media (max-width: 520px) {
+  .grp__head { flex-direction: column; align-items: flex-start; gap: 4px; }
 }
 
-/* ---- Voices (per-skill model picker) ---- */
-.voices-scroll { /* keep many rows compact within a bounded, scrollable box */ }
-.voices-wrap {
-  max-height: 460px;
-  overflow-y: auto;
-  margin-top: 6px;
-  border: 1px solid var(--border);
+/* ---- the token ladder (CLI access) ------------------------------------------
+   A 64-character token cannot be a line of prose, so it is quoted: one tonal
+   step down from the panel, the machine's words receding to the soft ink so the
+   secret itself is the only ink on the line. */
+.cli-result { flex-basis: 100%; margin-top: var(--sp-xs); }
+.cli-result__say { margin: 0 0 var(--sp-xs); font-size: 14.5px; color: var(--ink); }
+.quote {
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
   border-radius: var(--radius-sm);
+  padding: var(--sp-xs) var(--sp-sm) var(--sp-hair);
 }
-table.voices {
-  width: 100%;
-  border-collapse: collapse;
+.quote__eyebrow { margin: 0 0 var(--sp-hair); font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+.quote__pre {
+  margin: 0;
+  font-family: var(--font-mono);
   font-size: 13px;
+  line-height: 1.6;
   color: var(--ink);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-all;
 }
-table.voices th, table.voices td {
-  padding: 7px 12px;
-  text-align: left;
-  border-bottom: 1px solid var(--rule-soft);
-  vertical-align: middle;
-}
-table.voices th {
-  /* sticks inside .voices-wrap's own scroller, not the window — top:0 is
-     relative to the wrap, so no --topbar-h offset needed here */
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: var(--surface);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-  border-bottom: 1px solid var(--border-strong);
-}
-table.voices tr:last-child td { border-bottom: none; }
-table.voices tbody tr:hover td { background: var(--surface-2); }
-.voices__skill code {
-  font-size: 12.5px;
-  color: var(--info);
-}
-.voices__default {
-  font-size: 12.5px;
-  color: var(--ink-soft);
-}
-select.voices__select { min-width: 140px; }
-.voices-empty, .craft-empty {
-  color: var(--ink-faint);
-  font-style: italic;
-  font-size: 13px;
-  padding: 10px 0;
-}
-
-/* ---- Sounds (per-sound on/off toggles) ---- */
-.sound-rows { margin-top: 8px; }
-.sound-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 9px 0;
-  border-bottom: 1px solid var(--rule-soft);
-}
-.sound-row:last-child { border-bottom: none; }
-.sound-row__text { min-width: 0; }
-.sound-row__label {
-  font-size: 13.5px;
-  color: var(--ink);
-  font-weight: 600;
-}
-.sound-row__desc {
-  font-size: 12.5px;
-  color: var(--ink-soft);
-  margin-top: 2px;
-}
-button.sound-toggle {
-  font-family: var(--font-body);
-  font-size: 12.5px;
-  font-weight: 600;
-  padding: 5px 16px;
-  min-width: 72px;
-  border-radius: 999px;
-  border: 1px solid var(--border-strong);
-  background: var(--surface);
-  color: var(--ink-soft);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-button.sound-toggle[data-on="1"] {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
-}
-button.sound-toggle:disabled { opacity: 0.5; cursor: default; }
-.sound-volume {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 4px 0 12px;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 4px;
-}
-.sound-volume__label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--ink-faint);
-  flex-shrink: 0;
-}
-.sound-volume input[type="range"] {
-  flex: 1;
-  accent-color: var(--accent);
-  cursor: pointer;
-}
-.sound-volume__pct {
-  font-size: 13px;
-  color: var(--ink);
-  min-width: 3.2em;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-/* ---- Event sounds (per-event variant dropdowns, task 582) ---- */
-.event-sound-rows { margin-top: 8px; }
-.event-sound-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 9px 0;
-  border-bottom: 1px solid var(--rule-soft);
-}
-.event-sound-row:last-child { border-bottom: none; }
-.event-sound-row__text { flex: 1; min-width: 0; }
-.event-sound-row__label {
-  font-size: 13.5px;
-  color: var(--ink);
-  font-weight: 600;
-}
-.event-sound-row__desc {
-  font-size: 12.5px;
-  color: var(--ink-soft);
-  margin-top: 2px;
-}
-.event-sound-row__controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-.event-sound-select { cursor: pointer; }
-.event-sound-preview {
-  font-family: var(--font-body);
-  font-size: 12px;
-  font-weight: 600;
-  padding: 5px 12px;
-  border-radius: 999px;
-  border: 1px solid var(--border-strong);
-  background: transparent;
-  color: var(--ink-soft);
-  cursor: pointer;
-}
-.event-sound-preview:active { opacity: 0.7; }
-
-/* ---- Disciplines (preference chips) ---- */
-.craft-chips {
+.quote__foot {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 8px;
-}
-.craft-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13.5px;
-  color: var(--ink);
-  background: var(--surface);
-  border: 1px solid var(--border-strong);
-  border-radius: 999px;
-  padding: 6px 14px;
-  cursor: pointer;
-  user-select: none;
-  text-transform: capitalize;
-}
-.craft-chip:hover { background: var(--surface-2); }
-.craft-chip input { cursor: pointer; }
-.craft-chip[data-on="1"] {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
-}
-.craft-actions {
-  display: flex;
   align-items: center;
-  gap: 14px;
-  margin-top: 14px;
-  flex-wrap: wrap;
-}
-
-/* ---- Buttons (Save / card actions) ---- */
-button.craft-save, .settings-btn {
-  font-family: var(--font-body);
-  font-size: 13px;
-  font-weight: 600;
-  padding: 7px 16px;
-  border: 1px solid var(--accent);
-  background: var(--surface);
-  color: var(--accent-text);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  display: inline-block;
-  text-decoration: none;
-}
-button.craft-save:hover:not(:disabled), .settings-btn:hover:not(:disabled) {
-  background: var(--accent);
-  color: #fff;
-  text-decoration: none;
-}
-button.craft-save:disabled, .settings-btn:disabled { opacity: 0.5; cursor: default; }
-/* Discord brand button — keeps its blurple so it's recognisable. */
-.settings-btn--discord {
-  background: #5865F2;
-  border-color: #4853c4;
-  color: #fff;
+  gap: var(--sp-xs);
+  margin-top: var(--sp-xs);
+  padding-top: var(--sp-hair);
+  border-top: var(--line) solid var(--glass-edge);
 }
-.settings-btn--discord:hover { background: #4853c4; color: #fff; }
-.settings-btn--quiet {
-  border-color: var(--border-strong);
-  color: var(--ink-soft);
-}
-.settings-btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
 
-/* ---- Display name (single editable field, task 1669) ---- */
-.display-name-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-  margin-top: 8px;
-}
-input.display-name-input {
-  flex: 1 1 280px;
-  min-width: 0;
-}
+/* ---- active sessions --------------------------------------------------------
+   The name is a run with its pill and the agent beside it, then the when-line
+   underneath; a row of the family otherwise. */
+.sessions-row__main > strong { display: inline; }
+.sessions-row__agent { display: inline; margin-left: 8px; }
+.sessions-row__when { display: block; }
 
-/* ---- Connections + CLI access cards ---- */
-.settings-card {
-  margin-top: 8px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-}
-.settings-card__hint { color: var(--ink-soft); font-size: 13px; }
-.settings-card__ok { font-weight: 600; color: var(--ok); }
-.cli-result { flex-basis: 100%; margin-top: 4px; }
-.cli-result pre {
-  background: var(--bg-deep);
-  color: var(--ink);
-  padding: 10px 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  overflow-x: auto;
-  font-size: 12.5px;
-  margin: 6px 0;
+/* ---- Voices (per-skill model picker) ------------------------------------- */
+.voices-wrap { margin-top: var(--sp-sm); overflow-x: auto; }
+table.voices { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; color: var(--ink); }
+table.voices th, table.voices td {
+  padding: var(--sp-xs) var(--sp-xs) var(--sp-xs) 0;
+  vertical-align: middle;
+  border-top: var(--line) solid var(--rule-soft);
+}
+table.voices thead th {
+  padding-top: 0;
+  border-top: 0;
+  border-bottom: var(--line) solid var(--rule);
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  white-space: nowrap;
 }
+.voices__skill { white-space: nowrap; }
+.voices__skill code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
+.voices__default { margin-left: 0; font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
+td.voices__choice { width: 1%; white-space: nowrap; }
+select.voices__select { min-width: 140px; }
+.voices-empty, .craft-empty { padding: var(--sp-xs) 0; font-size: 13.5px; color: var(--ink-faint); }
 
-/* ---- Active sessions (task 1003341) — one row per live session, the current
-   one badged so nobody ends the page they are reading. ---- */
-.sessions-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--border);
-}
-.sessions-row:last-child { border-bottom: 0; }
-.sessions-row__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
-.sessions-row__agent,
-.sessions-row__when { color: var(--ink-soft); font-size: 13px; }
-.sessions-row__agent { overflow-wrap: anywhere; }
-.sessions-row__when { flex-basis: 100%; }
-.sessions-row__badge {
-  font-size: 12px;
-  padding: 1px 7px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--ink-soft);
-}
+/* ---- Sounds: the volume line ------------------------------------------- */
+.sound-volume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); margin-bottom: var(--sp-xs); }
+.sound-volume .field-label { margin: 0; }
+.sound-volume__pct { min-width: 3.2em; font-size: 13px; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
 
-/* ---- Image key (task 1013) — the "we cover it" / "action needed" banner
-   uses the shared semantic status tokens. ---- */
+/* ---- Image key: the covered / action-needed banner ------------------------ */
 .artkey-banner {
-  border-radius: var(--radius-sm);
-  padding: 10px 14px;
-  font-size: 13px;
+  margin: 0 0 var(--sp-sm);
+  padding: var(--sp-xs) var(--sp-sm);
+  font-size: 14px;
   line-height: 1.45;
-  border: 1px solid var(--border);
-  margin-bottom: 10px;
-}
-.artkey-banner--covered {
-  background: var(--ok-weak);
-  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
-  color: var(--ok);
-}
-.artkey-banner--action {
+  color: var(--ink);
+  border-left: 2px solid var(--warn);
   background: var(--warn-weak);
-  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
-  color: var(--warn);
-}
-.artkey-entry-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex-basis: 100%; }
-.artkey-input {
-  flex: 1 1 280px;
-  min-width: 0;
-  padding: 7px 10px;
-  border: 1px solid var(--border-strong);
   border-radius: var(--radius-sm);
-  background: var(--surface);
-  color: var(--ink);
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 13px;
 }
-.artkey-actions { display: flex; gap: 10px; flex-wrap: wrap; }
+.artkey-banner--covered { border-left-color: var(--ok); background: var(--ok-weak); }
+.artkey-banner strong { font-weight: 500; }
 #artkey-entry { flex-basis: 100%; }
+/* the entry renders inside the card's flex row, so its label takes the row */
+#artkey-card > .field-label, #artkey-entry > .field-label { flex: 1 1 100%; margin-top: 0; }
+#artkey-entry[hidden] { display: none; }
+.artkey-entry-row { flex-basis: 100%; }
+
+/* ---- Discord -----------------------------------------------------------------
+   THIRD-PARTY MARK, KEPT ON PURPOSE. Discord's blurple is Discord's, not the
+   world's: the button is recognisable as theirs only in their colour, and the
+   link opens their consent screen. These two literals are the one sanctioned
+   exception in this sheet — a future literal sweep must leave them alone. */
+.settings-btn--discord { background: #5865F2; border-color: #4853c4; color: #ffffff; }
+.settings-btn--discord:hover:not(:disabled) { background: #4853c4; border-color: #4853c4; color: #ffffff; }
+
+/* ---- dev box ------------------------------------------------------------- */
+/* the box panel is the shell's (.setup__box, box-panel.js); inside a settings
+   panel it sits on the glass rather than a second card */
+.settings-groups .setup__box { margin: var(--sp-sm) 0 0; background: var(--glass); border-color: var(--glass-edge); border-radius: var(--radius-sm); }

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

@@ -9,9 +9,11 @@
   <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-02-shell1">
-  <!-- Page-local styles (task 2172) — extracted from the old inline <style>
-       block per the hall placement rules; the rail comes from style.css's
-       shared .section-rail/.rail-link rules. -->
+  <!-- The PANEL archetype (task 1003308): the row, the switch, the field, the
+       chip control and the family's voices, shared with profile, pair and
+       not-ready. settings.css then holds only what this page
+       has — the rail layout, the group head, the token ladder, the voices grid. -->
+  <link rel="stylesheet" href="/builders/panel.css">
   <link rel="stylesheet" href="/builders/settings.css">
 </head>
 <body data-page="settings" data-page-title="Settings">
@@ -22,15 +24,22 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head"><p class="page-head__sub" id="settings-sub">Loading your preferences…</p></div>
+      <!-- The page's ONE h1 (one-header-main-h1): the page's own name in the
+           room voice, because here the document is the page. The sub-line is
+           settings.js's — "Your preferences, <name>." and the two failure states. -->
+      <div class="page-head page-head--room page-head--panel">
+        <h1 id="settings-h1" class="page-head__h">settings</h1>
+        <p class="page-head__sub" id="settings-sub">Loading your preferences…</p>
+      </div>
 
       <main id="hall-main">
         <!-- Not-signed-in notice — shown by settings.js before it redirects, and
              as a fallback if reading the viewer fails. Deliberately OUTSIDE the
              grouped layout: full-width, ungrouped. -->
-        <section class="scroll" id="gate-scroll" aria-labelledby="gate-h" hidden>
-          <h2 id="gate-h" class="scroll__h">Not signed in</h2>
-          <p class="scroll__lede" id="gate-body">You're not signed in yet. Sign in to manage your preferences.</p>
+        <section class="scroll gate" id="gate-scroll" aria-labelledby="gate-h" hidden>
+          <h2 id="gate-h" class="gate__h">Not signed in</h2>
+          <p class="gate__lede" id="gate-body">You're not signed in yet. Sign in to manage your connections, your keys, your dev box and the way the hall behaves.</p>
+          <div class="row-end"><a class="pbtn pbtn--save" href="/api/bongos/auth/web/start">Sign in</a></div>
         </section>
 
         <!-- Grouped layout (task 1723 → kit, task 2172): the sections sit in six
@@ -68,10 +77,11 @@
                 and the work feed. Your sign-in and the credit for shipped work stay
                 tied to your account, not this label.
               </p>
+              <label class="field-label" for="display-name-input">Display name</label>
               <div class="display-name-row">
                 <input type="text" class="display-name-input" id="display-name-input"
                        maxlength="60" autocomplete="off" spellcheck="false"
-                       aria-label="Display name" placeholder="Your display name">
+                       placeholder="Your display name">
                 <button type="button" class="craft-save" id="display-name-save">Save</button>
               </div>
               <p class="settings-status" id="display-name-status" role="status" aria-live="polite"></p>
@@ -158,7 +168,7 @@
               </p>
               <div id="sessions-list" class="sessions-list" aria-live="polite"></div>
               <div class="settings-card">
-                <button type="button" class="settings-btn" id="sessions-revoke-all">Sign out everywhere</button>
+                <button type="button" class="settings-btn settings-btn--quiet" id="sessions-revoke-all">Sign out everywhere</button>
                 <span class="settings-card__hint">ends every session including this one — you will be asked to sign in again.</span>
               </div>
               <p class="section-note">Ending a session takes effect immediately; the token stops working on its very next request.</p>
@@ -213,11 +223,11 @@
               <div class="settings-card">
                 <a class="settings-btn" href="/downloads/devbox/mac-arm64">Download for Mac</a>
                 <a class="settings-btn" href="/downloads/devbox/win-x64">Download for Windows</a>
-                <span class="settings-card__hint">Intel Mac? <a href="/downloads/devbox/mac-x64">This one</a>.
-                  ARM Windows (Surface, Snapdragon, Parallels)? <a href="/downloads/devbox/win-arm64">This one</a>.</span>
-                <!-- #924: latest-release courtesy line; populated from /downloads/devbox/version -->
-                <span class="settings-card__hint" id="boxapp-latest" hidden></span>
               </div>
+              <p class="panel-hint">Intel Mac? <a href="/downloads/devbox/mac-x64">This one</a>.
+                ARM Windows (Surface, Snapdragon, Parallels)? <a href="/downloads/devbox/win-arm64">This one</a>.
+                <!-- #924: latest-release courtesy line; populated from /downloads/devbox/version -->
+                <span id="boxapp-latest" hidden></span></p>
               <p class="section-note">
                 First open: your computer warns about an unknown developer — expected
                 (we haven't bought the signing certificates yet; the app is ours).
@@ -252,7 +262,7 @@
                 claimed task. It never limits the work on the task itself. Your rank
                 sets the starting point; newcomers stay locked low.
               </p>
-              <div class="sound-rows" id="wander-rows"></div>
+              <div class="prows" id="wander-rows" role="radiogroup" aria-labelledby="wandering-h"></div>
               <p class="settings-status" id="wandering-status" role="status" aria-live="polite"></p>
               <p class="section-note" id="wandering-note"></p>
             </section>
@@ -287,7 +297,7 @@
               <div class="voices-wrap">
                 <table class="voices" id="voices-table">
                   <thead>
-                    <tr><th>Skill</th><th>Default</th><th>Your choice</th></tr>
+                    <tr><th scope="col">Skill</th><th scope="col">Default</th><th scope="col">Your choice</th></tr>
                   </thead>
                   <tbody id="voices-body"></tbody>
                 </table>
@@ -305,9 +315,8 @@
                 any you would rather not hear.
               </p>
               <div class="sound-volume" id="sound-volume" hidden>
-                <span class="sound-volume__label">Volume</span>
-                <input type="range" id="sound-volume-range" min="0" max="100" step="5" value="100"
-                       aria-label="Master sound volume">
+                <label class="field-label" for="sound-volume-range">Volume</label>
+                <input type="range" id="sound-volume-range" min="0" max="100" step="5" value="100">
                 <span class="sound-volume__pct" id="sound-volume-pct">100%</span>
               </div>
               <div class="sound-rows" id="sound-rows"></div>
@@ -360,7 +369,7 @@
 <script src="/builders/task-detail.js?v=2026-07-03-taskdetail"></script>
 <!-- #807: shared dev-box panel — loaded before settings.js so OTBBoxPanel exists. -->
 <script src="/builders/box-panel.js?v=2026-06-14-domutils"></script>
-<script src="/builders/settings.js?v=2026-07-10-regroup"></script>
+<script src="/builders/settings.js?v=2026-09-02-panel"></script>
 <!-- task 1003341: the Active sessions panel. Its own file rather than more of
      settings.js, which sits close to the 1500-line size ratchet. -->
 <script src="/builders/settings-sessions.js?v=2026-08-29-sessions"></script>