@bongos/core 1.24.47 → 1.24.49

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

@@ -60,6 +60,9 @@
    shadows, motion, stacking — every surface loads. Imported FIRST so this
    sheet's own rules follow it; the hall's scale names below are aliases of it. */
 @import url("/modules/ui-design/public/tokens.css");
+/* The hall's one button and one field (task 1005084): .btn and its modifiers,
+   the text field / select / textarea. Straight after the scales it spends. */
+@import url("controls.css");
 @import url("page-notes.css");
 @import url("craft-review.css");
 
@@ -430,20 +433,7 @@ code, kbd, pre {
    the composition around it. */
 .num, .tabular { font-variant-numeric: tabular-nums; }
 
-select, input[type="text"], input[type="search"], textarea {
-  font-family: var(--font-body);
-  font-size: 14px;
-  color: var(--ink);
-  background: none;
-  border: 1px solid var(--rule);
-  border-radius: var(--radius-pill);
-  min-height: 30px;
-  padding: 5px 12px;
-}
-select:hover, input[type="text"]:hover, input[type="search"]:hover { border-color: var(--ink-faint); }
-textarea { border-radius: var(--radius-sm); }
-select:disabled { opacity: 0.55; cursor: not-allowed; }
-select option { background: var(--bg-card); color: var(--ink); }
+/* The field (text input, select, textarea) is controls.css's (task 1005084). */
 
 button { font-family: var(--font-body); }
 
@@ -569,12 +559,12 @@ main:focus { outline: none; }
   width: 28px; height: 28px;
   display: block;
   flex-shrink: 0;
+  /* drawn from the one mark (modules/ui-design/public/brand/mark.svg, task 1005088) */
+  --mark-ink: var(--ink);
 }
-html[data-theme="dark"] .brand-mark__mark .mr { stroke: #e2e1e4; }
-html[data-theme="dark"] .brand-mark__mark .mp { fill: #e2e1e4; }
+html[data-theme="dark"] .brand-mark__mark { --mark-ink: #e2e1e4; }
 @media (prefers-color-scheme: dark) {
-  html:not([data-theme]) .brand-mark__mark .mr { stroke: #e2e1e4; }
-  html:not([data-theme]) .brand-mark__mark .mp { fill: #e2e1e4; }
+  html:not([data-theme]) .brand-mark__mark { --mark-ink: #e2e1e4; }
 }
 /* A project's logo in the mark's place (ADR 0358): the image is the founder's, so
    it gets a soft square, never a recolour. */
@@ -1422,8 +1412,7 @@ html.setup-gate-open { overflow: hidden; }
 }
 .setup-gate code { font-family: var(--font-mono); font-size: 14px; padding: 1px 6px; border-radius: 6px; background: var(--glass); }
 .setup-gate__crafts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
-.setup-gate__craft,
-.setup-gate__save {
+.setup-gate__craft {
   min-height: 36px;
   padding: 0 16px;
   border-radius: var(--radius-pill);
@@ -1435,8 +1424,8 @@ html.setup-gate-open { overflow: hidden; }
   cursor: pointer;
 }
 .setup-gate__craft[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); }
-.setup-gate__save { margin-top: 12px; background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
-.setup-gate__save:disabled { opacity: .5; cursor: default; }
+/* 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__foot { margin: 24px 0 0; font-size: 14px; }
 .setup-gate__foot a { color: var(--ink-soft); }
@@ -2634,23 +2623,16 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
      wherever there is room and drops it where there is not. */
   min-width: min(150px, 100%);
   max-width: 100%;
-  min-height: 32px;
-  font-family: var(--font-body);
-  padding: 4px 8px;
-  font-size: 13.5px;
   text-transform: none;
   letter-spacing: normal;
   font-weight: 400;
 }
-/* task 1829: the Work Board free-text search box, sized to match the filter
-   selects it sits alongside. */
+/* task 1829: the Work Board free-text search box. Both it and the selects are
+   the shared field (controls.css, task 1005084); the filter only sets widths
+   and undoes the label voice they would inherit. */
 .filter input[type="search"] {
   min-width: min(200px, 100%);
   max-width: 100%;
-  min-height: 32px;
-  font-family: var(--font-body);
-  padding: 4px 8px;
-  font-size: 13.5px;
   text-transform: none;
   letter-spacing: normal;
   font-weight: 400;
@@ -2673,94 +2655,8 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 }
 .pager__range { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
 
-/* Pill or nothing (DESIGN.md, Shapes). A ghost button is a hairline pill; the
-   one filled shape on a page is the accent door, and only where the action is
-   the live thing. 28px of box plus the row’s own air clears the 24px floor. */
-.btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 30px;
-  min-width: 56px;
-  padding: 0 14px;
-  font-size: 13px;
-  text-transform: lowercase;
-  color: var(--ink-soft);
-  background: none;
-  border: 1px solid var(--rule);
-  border-radius: var(--radius-pill);
-  cursor: pointer;
-}
-.btn-ghost:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); text-decoration: none; }
-.btn-ghost:disabled { color: var(--ink-faint); border-color: var(--rule-soft); cursor: default; }
-
-/* The accent door: the page’s one primary action. --accent-on is the dark ink
-   that goes on the salmon; white on it fails AA and is banned. */
-.btn-accent {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 34px;
-  min-width: 74px;
-  padding: 0 16px;
-  font-size: 13.5px;
-  font-weight: 500;
-  text-transform: lowercase;
-  color: var(--accent-on);
-  background: var(--accent);
-  border: 0;
-  border-radius: var(--radius-pill);
-  cursor: pointer;
-}
-.btn-accent:hover:not(:disabled) { background: var(--accent-lift); color: var(--accent-on); text-decoration: none; }
-.btn-accent:disabled { background: var(--glass); color: var(--ink-faint); cursor: default; }
-
-/* `.btn` / `.btn--ghost` — the SECOND button vocabulary in the hall, used by
-   ideas, idea, copy-desk, my-projects and collab. Task 1003305 found it had no
-   rule anywhere in the surface: every one of those buttons was rendering as a
-   browser default control, on a page whose every other shape is a pill. They
-   are not renamed to .btn-accent/.btn-ghost because the class is spelled into
-   markup and into tests/idea_spark_hall.mjs; instead the two vocabularies are
-   made to say the same thing. `.btn` is the accent door and `.btn--ghost` its
-   quiet sibling, which is exactly how the calling pages already use the pair
-   (submit vs. discard, mark vs. withdraw). --accent-on is the dark ink for the
-   salmon; white on it fails AA and DESIGN.md bans it. */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 34px;
-  min-width: 74px;
-  padding: 0 16px;
-  font-family: var(--font-body);
-  font-size: 13.5px;
-  font-weight: 500;
-  text-transform: lowercase;
-  color: var(--accent-on);
-  background: var(--accent);
-  /* transparent rather than absent: collab.css's `.btn--quiet` sets only a
-     border-COLOUR, and a modifier cannot paint an edge that was never reserved. */
-  border: var(--line) solid transparent;
-  border-radius: var(--radius-pill);
-  cursor: pointer;
-}
-.btn:hover:not(:disabled) { background: var(--accent-lift); color: var(--accent-on); text-decoration: none; }
-.btn:disabled { background: var(--glass); color: var(--ink-faint); cursor: default; }
-.btn--ghost {
-  min-height: 30px;
-  min-width: 56px;
-  padding: 0 14px;
-  font-size: 13px;
-  font-weight: 400;
-  color: var(--ink-soft);
-  background: none;
-  border-color: var(--rule);
-}
-.btn--ghost:hover:not(:disabled) { background: none; border-color: var(--ink-faint); color: var(--ink); }
-.btn--ghost:disabled { background: none; color: var(--ink-faint); border-color: var(--rule-soft); }
+/* The buttons — .btn and its modifiers, and the older names pages still write
+   (.btn-accent, .btn-ghost, .btn--ghost …) — are controls.css's (task 1005084). */
 
 /* ---------- profile / standing ---------- */
 
@@ -3040,11 +2936,8 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
    gap keeps the label and the select together when the lede wraps. */
 .curve__filter { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
 .curve__filter-label { color: var(--ink-soft); }
-.curve__filter-select {
-  font: inherit; color: inherit; background: var(--surface-2);
-  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
-  padding: 2px 6px; max-width: 16ch;
-}
+/* the shared field (controls.css); only its width is the filter's */
+.curve__filter-select { max-width: 16ch; }
 
 .curve__headline {
   display: grid;
@@ -3297,22 +3190,6 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 }
 .setup__divider::before, .setup__divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule-soft); }
 
-.setup__btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: 34px;
-  padding: 0 16px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--accent);
-  background: var(--accent);
-  color: #fff;
-  font-size: 13.5px;
-  font-weight: 600;
-  cursor: pointer;
-}
-.setup__btn:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; text-decoration: none; }
-.setup__btn:disabled, .setup__btn--open[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 .setup__getcode { margin: 10px 0; }
 /* A <summary> is a control, so it owes the 24px floor like any other; it
    measured 20px tall (task 1003304). The height is bought with padding rather
@@ -3366,9 +3243,7 @@ html[data-door="out"] #hall-main { width: 100%; }
   background: var(--bg-card);
   text-align: center;
 }
-.landing__logo { display: block; width: 56px; height: 56px; margin: 0 auto 18px; overflow: visible; }
-.landing__ring { stroke: var(--ink); }
-.landing__planet { fill: var(--ink); }
+.landing__logo { display: block; width: 56px; height: 56px; margin: 0 auto 18px; overflow: visible; --mark-ink: var(--ink); }
 .landing__title {
   margin: 0 0 28px;
   font-family: var(--font-display);
@@ -3387,31 +3262,9 @@ html[data-door="out"] #hall-main { width: 100%; }
   line-height: 18px;
 }
 .landing__cta { margin: 14px 0; }
-.landing__btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  min-height: 46px;
-  padding: 0 22px;
-  border-radius: var(--radius-pill);
-  border: 0;
-  background: var(--accent);
-  color: var(--accent-on);
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: lowercase;
-  cursor: pointer;
-}
-.landing__btn:hover { background: var(--accent-lift); text-decoration: none; color: var(--accent-on); }
+/* .landing__btn is the shared primary door, --quiet its ghost (controls.css). */
 .landing__btn--block { display: flex; width: 100%; }
 .landing__gh { flex-shrink: 0; }
-.landing__btn--quiet {
-  background: transparent;
-  color: var(--ink);
-  box-shadow: inset 0 0 0 1px var(--border-strong);
-}
-.landing__btn--quiet:hover { background: var(--surface-2); color: var(--ink); }
 .landing__note { font-size: 12.5px; color: var(--ink-faint); }
 .landing__error { color: var(--danger); }
 .landing__error-h { color: var(--danger); margin: 0 0 4px; font-size: 14px; }
@@ -3642,29 +3495,8 @@ html[data-door="out"] #hall-main { width: 100%; }
    the touches chip and the whole-card selection target (promoted from work.css,
    task 1003659, so their cascade position is the same on every page). */
 
-/* The page's one primary action, and the only accent FILL on the board.
-   --accent-on is the dark ink that goes on the salmon: white on it fails AA and
-   DESIGN.md bans it outright, which is what the old `color: #fff` was. */
-.task__claim {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 34px;
-  min-width: 74px;
-  padding: 0 16px;
-  background: var(--accent);
-  border: 0;
-  color: var(--accent-on);
-  border-radius: var(--radius-pill);
-  font-size: 13.5px;
-  font-weight: 500;
-  text-transform: lowercase;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 150ms, opacity 150ms;
-}
-.task__claim:hover:not(:disabled) { background: var(--accent-lift); color: var(--accent-on); }
-.task__claim:disabled { background: var(--glass); color: var(--ink-faint); cursor: default; }
+/* The page's one primary action, and the only accent FILL on the board: the
+   shared primary door at the row size (controls.css, task 1005084). */
 
 /* Files a claimable task is responsible for — a compact count chip in the meta
    row; the full path list rides the tooltip (task 2170 density pass). The mono
@@ -3778,27 +3610,13 @@ html[data-door="out"] #hall-main { width: 100%; }
   color: var(--ink-faint);
 }
 
-.wip__release {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 30px;
-  padding: 0 14px;
-  background: none;
-  border: var(--line) solid var(--rule);
-  color: var(--ink-soft);
-  border-radius: var(--radius-pill);
-  font-size: 13px;
-  text-transform: lowercase;
-  cursor: pointer;
-  transition: background 150ms, color 150ms, border-color 150ms;
-}
+/* .wip__release is the shared ghost at the row size (controls.css); a release
+   is the undo of a claim, so its hover warns. */
 .wip__release:hover:not(:disabled) {
   background: var(--danger-weak);
   color: var(--danger);
   border-color: color-mix(in srgb, var(--danger) 40%, transparent);
 }
-.wip__release:disabled { opacity: 0.55; cursor: default; }
 
 .wip__select {
   appearance: none;
@@ -4064,38 +3882,8 @@ html[data-door="out"] #hall-main { width: 100%; }
 .td-dep:hover { text-decoration: underline; }
 .td-dep-status { color: var(--ink-faint); font-size: 12px; margin-left: 6px; }
 .td-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0; }
-/* Pill or nothing (DESIGN.md, Shapes): the ghost pill, with --btn--primary the
-   one accent door. It carried a literal `#fff` on the salmon until task 1003305
-   — the exact pairing DESIGN.md bans, because it fails AA. */
-.td-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font: inherit;
-  font-size: 13px;
-  min-height: 30px;
-  min-width: 56px;
-  padding: 0 14px;
-  border: var(--line) solid var(--rule);
-  border-radius: var(--radius-pill);
-  background: none;
-  color: var(--ink-soft);
-  text-transform: lowercase;
-  cursor: pointer;
-}
-.td-btn:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); text-decoration: none; }
-.td-btn--primary {
-  min-height: 34px;
-  min-width: 74px;
-  padding: 0 16px;
-  font-weight: 500;
-  background: var(--accent);
-  color: var(--accent-on);
-  border-color: var(--accent);
-}
-.td-btn--primary:hover:not(:disabled) { background: var(--accent-lift); border-color: var(--accent-lift); color: var(--accent-on); }
-.td-btn:disabled { color: var(--ink-faint); border-color: var(--rule-soft); cursor: default; }
-.td-btn--primary:disabled { background: var(--glass); }
+/* .td-btn is the shared ghost at the row size and .td-btn--primary the accent
+   door (controls.css, task 1005084). */
 .td-action-note { flex-basis: 100%; font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }
 
 /* Idea triage inside the record overlay (task 1002447). A two-column grid so
@@ -4103,17 +3891,9 @@ html[data-door="out"] #hall-main { width: 100%; }
 .td-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 14px 0 0; }
 .td-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
 .td-field--wide { grid-column: 1 / -1; }
-/* The base `select, input` rule already carries the world's field; this only
-   re-states the sizing the two-column grid needs. */
-.td-field input, .td-field select {
-  font-size: 13px;
-  min-width: 0;
-  max-width: 100%;
-}
-/* The 24px floor (task 1004301 found it failing): at 13px the base field's padding left a
-   number input 21px tall beside a select that clears it — the task page's "Wait for task"
-   box. Sized to sit level with its select. */
-.td-field input { min-height: 26px; box-sizing: border-box; }
+/* The field is the shared one (controls.css); the two-column grid only needs
+   it to shrink with its column. */
+.td-field input, .td-field select { min-width: 0; max-width: 100%; }
 .td-form .td-actions, .td-form-hint, .td-form .td-action-note { grid-column: 1 / -1; }
 .td-form .td-actions { margin: 4px 0 0; }
 .td-form-hint { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
@@ -4316,7 +4096,6 @@ html[data-door="out"] #hall-main { width: 100%; }
 .filter-views__tag { font-size: 11px; color: var(--ink-faint); margin-left: 6px; }
 .filter-views__empty, .filter-views__note { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
 .filter-views__note:empty { display: none; }
-.filter-views__row .btn-ghost { min-height: 24px; padding: 0 8px; font-size: 12px; }
 .filter-views__save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
 .filter-views__save .filter { flex: 1 1 180px; }
 /* On a phone the button can sit anywhere in a wrapped row, so the menu spans the
@@ -4378,9 +4157,6 @@ html[data-door="out"] #hall-main { width: 100%; }
    than edit the markup, the name joins the lede it meant. */
 .scroll__note { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); max-width: var(--measure); }
 
-/* collab.js:73-74 — the settle buttons asked for a small variant of .btn that
-   does not exist, so "Someone helped" rendered full-size on every row. */
-.btn--sm { min-height: 26px; padding: 0 11px; font-size: 12.5px; }
 
 /* The notice line: roster.js and blockers.js notice() set body.className='note'
    for an empty / error message, and neither page's sheet defines it. */
@@ -4450,7 +4226,7 @@ html[data-door="out"] #hall-main { width: 100%; }
 }
 /* the ring and the core: one ink, breathing */
 .hall-loading::before {
-  --hl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M137 31 A78 78 0 1 0 170 66' fill='none' stroke='black' stroke-width='15' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='100' r='55'/%3E%3C/svg%3E");
+  --hl-shape: url("/modules/ui-design/public/brand/mark-body.svg");
   background: color-mix(in srgb, var(--ink) 30%, var(--bg-card));
   animation:
     hall-loading-turn var(--hl-beat) cubic-bezier(.45, .05, .55, .95) infinite,
@@ -4458,7 +4234,7 @@ html[data-door="out"] #hall-main { width: 100%; }
 }
 /* the dot: the accent, laid exactly over the mark and turning with it */
 .hall-loading::after {
-  --hl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='156' cy='46' r='12'/%3E%3C/svg%3E");
+  --hl-shape: url("/modules/ui-design/public/brand/mark-dot.svg");
   position: absolute;
   top: var(--hl-pad);
   left: calc(50% - var(--hl-size) / 2);

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

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Task — {{worldName}}</title>
   <meta name="description" content="Task details — {{worldName}}.">
-  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <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">
@@ -59,7 +59,7 @@
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></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-06-sidebar"></script>
+<script src="/builders/shell.js?v=2026-11-07-brand-mark"></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

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

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>Your sky — {{worldName}}</title>
   <meta name="description" content="Your thinking, drawn from the ledger: every thought you filed as one of five objects, in the goal that caught it, sized by the work it caused.">
-  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <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>
   <!-- The faces (Manrope, JetBrains Mono) come from the branding pack's font
@@ -141,7 +141,7 @@
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></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-06-sidebar"></script>
+<script src="/builders/shell.js?v=2026-11-07-brand-mark"></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

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Tweak a page — {{worldName}}</title>
   <meta name="description" content="Tweak Mode's editor: every word of one page as a single document, typed over in place and saved as you go, then submitted as one batch.">
-  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <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-02-shell1">
@@ -145,7 +145,7 @@
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></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-06-sidebar"></script>
+<script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/brand-holes.js?v=2026-09-29-aqfix"></script>
 <script src="/builders/tweak-editor-lib.js?v=2026-09-29-tw27"></script>

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

@@ -8,7 +8,7 @@
   <!-- The hub's origin, for the link from a guild's head in the applications queue to
        its page on the hub (task 1002304). Empty on a vanilla instance: no link. -->
   <meta name="hub-origin" content="{{hubOrigin}}">
-  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <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-02-shell1">
@@ -271,7 +271,7 @@
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></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-06-sidebar"></script>
+<script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- shared component kit (window.OTBKit) — tabs, ledger, pager (task 2166). -->

package/modules/hall-ui/public/welcome-boot.css

@@ -75,11 +75,10 @@ html.wb-open { overflow: hidden; }
   letter-spacing: -.01em; text-transform: lowercase; white-space: nowrap;
 }
 /* the mark's ink follows the painting: pale by night, dark by day; the moon stays salmon */
-.wb__ring { stroke: #e2e1e4; }
-.wb__planet { fill: #e2e1e4; transform-box: fill-box; transform-origin: center; }
+.wb__mark { --mark-ink: #e2e1e4; }
+.wb__planet { transform-box: fill-box; transform-origin: center; }
 .wb__moonlet { transform-box: view-box; transform-origin: 100px 100px; }
-.wb--day .wb__ring { stroke: #17181a; }
-.wb--day .wb__planet { fill: #17181a; }
+.wb--day .wb__mark { --mark-ink: #17181a; }
 .wb--lit .wb__ring { stroke-dasharray: 100; animation: wb-ring 1.5s cubic-bezier(.6, 0, .2, 1) .5s both; }
 .wb--lit .wb__planet { animation: wb-planet 1s cubic-bezier(.3, 1.4, .5, 1) .3s both; }
 .wb--lit .wb__moonlet { animation: wb-orbit 1.6s cubic-bezier(.25, .8, .3, 1) 1.1s both, wb-glow 3.2s ease-in-out 2.7s infinite alternate; }

package/modules/hall-ui/public/welcome-boot.js

@@ -57,10 +57,12 @@
   // The banner is the logo, animated (task 1004953; it replaced "Working on the core of <project>"):
   // the ring draws in, the planet settles, the moon glides into the gap and glows. A project with its
   // own logo (theme.logo, ADR 0358) shows that instead, as the sidebar's brand mark does.
+  // The parts are referenced one by one from the one mark (task 1005088) so each can move.
+  var MARK = '/modules/ui-design/public/brand/mark.svg';
   var MARK_SVG = '<svg class="wb__mark" viewBox="0 0 200 200" aria-hidden="true">' +
-    '<path class="wb__ring" d="M137 31 A78 78 0 1 0 170 66" pathLength="100" fill="none" stroke-width="15" stroke-linecap="round"/>' +
-    '<circle class="wb__planet" cx="100" cy="100" r="55"/>' +
-    '<circle class="wb__moonlet" cx="156" cy="46" r="12" fill="#fb9569"/></svg>';
+    '<use class="wb__ring" href="' + MARK + '#mark-ring"/>' +
+    '<use class="wb__planet" href="' + MARK + '#mark-disc"/>' +
+    '<use class="wb__moonlet" href="' + MARK + '#mark-dot"/></svg>';
   function logoHtml(branding) {
     var logo = branding && branding.theme && branding.theme.logo;
     var mark = logo ? '<img class="wb__logo" src="' + esc(logo) + '" alt="" width="40" height="40" decoding="async">' : MARK_SVG;

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

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Tasks — {{worldName}}</title>
   <meta name="description" content="What {{worldName}} is building right now, and what waits to be claimed.">
-  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <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-02-shell1">
@@ -174,7 +174,7 @@
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></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-06-sidebar"></script>
+<script src="/builders/shell.js?v=2026-11-07-brand-mark"></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 1004727: the ONE karma vote control every task/idea list renders -->

package/modules/public-landing/public/account.html

@@ -97,11 +97,7 @@
 <header class="shell bar">
   <div class="barLeft">
     <a class="barMark" id="barMark" href="/">
-      <svg class="bongosMark" viewBox="0 0 200 200" aria-hidden="true">
-        <path class="mr" d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#17181a" stroke-width="15" stroke-linecap="round"/>
-        <circle class="mp" cx="100" cy="100" r="55" fill="#17181a"/>
-        <circle cx="156" cy="46" r="12" style="fill:var(--accent)"/>
-      </svg>
+      <svg class="bongosMark" viewBox="0 0 200 200" aria-hidden="true"><use href="/modules/ui-design/public/brand/mark.svg#mark"/></svg>
       <span>{{productName}}</span>
     </a>
   </div>

package/modules/public-landing/public/assets/cosmos.css

@@ -576,13 +576,13 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
 }
 /* the ring and the core: one ink, breathing */
 .loading-mark::before{
-  --lm-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M137 31 A78 78 0 1 0 170 66' fill='none' stroke='black' stroke-width='15' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='100' r='55'/%3E%3C/svg%3E");
+  --lm-shape:url("/modules/ui-design/public/brand/mark-body.svg");
   background:color-mix(in srgb,var(--ink) 30%,var(--bg-card));
   animation:loading-mark-turn 1.6s cubic-bezier(.45,.05,.55,.95) infinite,loading-mark-breathe .8s ease-in-out infinite alternate-reverse;
 }
 /* the dot: the accent, laid exactly over the mark and turning with it */
 .loading-mark::after{
-  --lm-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='156' cy='46' r='12'/%3E%3C/svg%3E");
+  --lm-shape:url("/modules/ui-design/public/brand/mark-dot.svg");
   background:var(--accent);
 }
 .loading-mark--page{--lm-size:64px;padding:72px 0;gap:16px;}
@@ -623,11 +623,12 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
   color:var(--ink);text-decoration:none;text-shadow:var(--type-halo);}
 /* the mark: Ink and one light; its Night ink twin on a dark ground (task 1004846) */
 .barMark svg{width:32px;height:32px;display:block;flex:none;}
-:root[data-mode="dark"] .bongosMark .mr{stroke:#e2e1e4;}
-:root[data-mode="dark"] .bongosMark .mp{fill:#e2e1e4;}
+/* drawn from the one mark (modules/ui-design/public/brand/mark.svg, task 1005088), coloured by
+   --mark-ink (the ring and planet) and --mark-dot (the moon; the accent when unset) */
+.bongosMark{--mark-ink:var(--ink);}
+:root[data-mode="dark"] .bongosMark{--mark-ink:#e2e1e4;}
 @media (prefers-color-scheme: dark){
-  :root:not([data-mode="light"]) .bongosMark .mr{stroke:#e2e1e4;}
-  :root:not([data-mode="light"]) .bongosMark .mp{fill:#e2e1e4;}
+  :root:not([data-mode="light"]) .bongosMark{--mark-ink:#e2e1e4;}
 }
 .barMark:hover{color:var(--ink);}
 /* the two-tone focus ring on the bar's and the bands' controls (DESIGN.md

package/modules/public-landing/public/community.html

@@ -165,11 +165,7 @@
 <header class="shell bar">
   <div class="barLeft">
     <a class="barMark" id="barMark" href="/">
-      <svg class="bongosMark" viewBox="0 0 200 200" aria-hidden="true">
-        <path class="mr" d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#17181a" stroke-width="15" stroke-linecap="round"/>
-        <circle class="mp" cx="100" cy="100" r="55" fill="#17181a"/>
-        <circle cx="156" cy="46" r="12" style="fill:var(--accent)"/>
-      </svg>
+      <svg class="bongosMark" viewBox="0 0 200 200" aria-hidden="true"><use href="/modules/ui-design/public/brand/mark.svg#mark"/></svg>
       <span>{{productName}}</span>
     </a>
   </div>

package/modules/public-landing/public/connections.html

@@ -70,11 +70,7 @@
 <header class="shell bar">
   <div class="barLeft">
     <a class="barMark" id="barMark" href="/">
-      <svg class="bongosMark" viewBox="0 0 200 200" aria-hidden="true">
-        <path class="mr" d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#17181a" stroke-width="15" stroke-linecap="round"/>
-        <circle class="mp" cx="100" cy="100" r="55" fill="#17181a"/>
-        <circle cx="156" cy="46" r="12" style="fill:var(--accent)"/>
-      </svg>
+      <svg class="bongosMark" viewBox="0 0 200 200" aria-hidden="true"><use href="/modules/ui-design/public/brand/mark.svg#mark"/></svg>
       <span>{{productName}}</span>
     </a>
   </div>