@bongos/core 1.19.448 → 1.19.450

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

@@ -173,6 +173,16 @@
   --sidebar-w:       var(--sidebar-w-rail);
   --rail-open:       246px;
   --content-max:     1120px;
+  /* the READING ceiling (task 1003306). A reading room is narrower than a
+     working surface: past ~1010px the article card is more empty ground than
+     page and reads as a void, so the room's head and its two columns share one
+     cap rather than each carrying a literal. */
+  --room-max:        1010px;
+  /* the RIGHT rail — the room a page reserves beside its main column for a
+     fixed side panel (the ideas composer's meter). Named here so the reserve
+     and the panel are measured from one value; see `.app-content--railed`. */
+  --rail-right-w:    17rem;
+  --rail-right-gap:  1.5rem;
 
   /* ---- spacing: DESIGN.md's rhythm (6/10/14/22/34/52). The four-step
           --space-* scale task 2179 named aliases onto it, so no ported rule
@@ -201,12 +211,18 @@
   --shadow-pop: 0 18px 40px rgba(0, 0, 0, .28);
 
   /* ---- z ladder — content overlays (rank tips z-50, modals z-50, toast z-100,
-     copy-toast z-1000, deeplink z-2000, diagram fullscreen z-9999) must beat
-     the chrome; the mobile drawer sits above chrome but below dialogs. ---- */
+     copy-toast z-1000, deeplink z-2000) must beat the chrome; the mobile drawer
+     sits above chrome but below dialogs. The two ends belong to the reading
+     rooms and were hand-written numbers until task 1003306 named them: the
+     reading hairline sits UNDER the topbar so it reads as the article's
+     progress and not as app chrome, and the diagram's fullscreen canvas is the
+     top of the whole ladder because it covers the shell entirely. ---- */
+  --z-progress: 25;
   --z-topbar: 30;
   --z-sidebar: 40;
   --z-scrim: 140;
   --z-drawer: 150;
+  --z-diagram-full: 9999;
 
   /* ---- the hall's own plate: the declared seam, deferred by the owner
           ("decide after the shell lands", 2026-08-30). The hall's plate was
@@ -879,6 +895,31 @@ main:focus { outline: none; }
   flex: 1;
 }
 
+/* ---- the right rail (task 1003305) ----
+   A page whose main column runs beside a fixed side panel asks the SHELL for the
+   room instead of reaching into `.app-content > main` itself. ideas.css did the
+   latter, and paid for it twice: a page override of shell layout is invisible
+   from the shell, and the panel's `top: 6.5rem` hard-coded a topbar height that
+   the shell is free to change. Both halves live here so they cannot drift.
+   Opt in with `.app-content--railed` on the content wrapper + `.app-rail` on the
+   panel; below the breakpoint the panel is an ordinary block in the flow, which
+   is the only honest answer on a phone (a readout you cannot see is not one). */
+.app-content--railed { position: relative; }
+.app-rail { margin: var(--sp-md) 0; }
+
+@media (min-width: 62rem) {
+  .app-content--railed > main { padding-right: calc(var(--rail-right-w) + var(--rail-right-gap)); }
+  .app-rail {
+    position: fixed;
+    top: calc(var(--topbar-h) + var(--rail-right-gap));
+    right: var(--rail-right-gap);
+    width: var(--rail-right-w);
+    max-height: calc(100vh - var(--topbar-h) - var(--rail-right-gap) * 2);
+    overflow-y: auto;
+    margin: 0;
+  }
+}
+
 .app-views .view > .view-zone + .view-zone { margin-top: var(--sp-md); }
 .view-zone--band {
   display: grid;
@@ -1221,6 +1262,72 @@ main:focus { outline: none; }
 }
 .page-head__sub { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
 
+/* The re-skinned page head: the page's own name in v3's LABEL voice, because the
+   display face is saved for section headings and the page's name is the quietest
+   thing on it. The rule above (22px/650) is the pre-shell compat one, and belongs
+   to the pages nobody has re-skinned yet.
+   Promoted here from work.css by task 1003305 when the ideas composer became the
+   third consumer — a modifier on the shell's own .page-head is shell chrome, and
+   a second copy is how the two would have drifted. */
+.page-head--board .page-head__h {
+  margin: 0 0 6px;
+  font-family: var(--label-face);
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+}
+.page-head--board .page-head__sub { font-size: 14px; max-width: var(--measure); }
+
+/* The READING-ROOM page head (task 1003306, mock docs/design/mocks/hall/reading/v3.html).
+   The board's head is quiet BECAUSE the board is a working surface and the page's
+   name is the least interesting thing on it. A reading room is the opposite: the
+   document IS the page, so its name is the largest thing in the first viewport,
+   lowercase in the display face over the ground, with the label voice spent on a
+   one-word eyebrow above it. Two voices, one per archetype — the divergence is
+   the owner's pick, not drift.
+   The sub takes --measure because it is body prose. The h1 does NOT: --measure is
+   the BODY measure, and spending it on a display line caps it near 950px and lets
+   the title run the column's width (tests/hall_record_world.mjs §8). A heading's
+   cap is the room's own --room-max, which is a layout ceiling, not a measure.
+   The modifier carries the VOICE only. The room's WIDTH belongs to room.css,
+   which caps the head and the column it heads from one value — so a page that
+   takes the voice without loading the archetype (Ranks) keeps the shell's width
+   for both, and never ends up with a 1010px head over 1120px cards. */
+.page-head--room { padding: var(--sp-xl) 0 var(--sp-lg); margin: 0; }
+.page-head--room .page-head__eyebrow {
+  margin: 0 0 14px;
+  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);
+}
+.page-head--room .page-head__h {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(34px, 4.6vw, 58px);
+  line-height: 1.02;
+  letter-spacing: -0.042em;
+  text-transform: lowercase;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+}
+.page-head--room .page-head__sub {
+  margin: var(--sp-md) 0 0;
+  max-width: var(--measure);
+  font-size: 16px;
+  color: var(--ink-soft);
+}
+@media (max-width: 760px) {
+  .page-head--room { padding-top: var(--sp-lg); }
+  .page-head--room .page-head__h { font-size: 34px; }
+}
+
 .hall-nav {
   position: sticky;
   top: var(--topbar-h);
@@ -1462,7 +1569,52 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   cursor: pointer;
 }
 .btn-accent:hover:not(:disabled) { background: var(--accent-lift); color: var(--accent-on); text-decoration: none; }
-.btn-accent:disabled { background: var(--surface-2); color: var(--ink-faint); cursor: default; }
+.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); }
 
 /* ---------- profile / standing ---------- */
 
@@ -2251,7 +2403,17 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   .task__body { grid-column: 1 / -1; }
 }
 
-/* ---------- ranks page ---------- */
+/* ---------- ranks page ----------
+   Re-skinned into the chrome world by task 1003306 (goal 1000081). Ranks is a
+   reading room by archetype — a document about the ladder — so it takes the
+   room's page head (.page-head--room) and the room's voice on its labels, but
+   not room.css: it has no article, no table of contents and no figures, and a
+   sheet loaded for one max-width is a request spent on nothing.
+   The rank card is `.scroll--quiet`'s level expressed as a list row: a tone one
+   step further from the ground than the panel it sits in, with the edge
+   reserved as transparent so a modifier can draw one without the base having
+   to. The compat aliases are retired here; the badges above still spend them,
+   because they render on every page in the hall and belong to 1003308. */
 
 .ranks-standing {
   display: grid;
@@ -2260,47 +2422,51 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   align-items: center;
 }
 .ranks-standing__badge { display: flex; }
-.ranks-standing__title { font-weight: 650; font-size: 15px; }
-.ranks-standing__blurb { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); }
+.ranks-standing__title { font-family: var(--font-display); font-weight: 300; font-size: 19px; letter-spacing: -0.02em; }
+.ranks-standing__blurb { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); max-width: var(--measure); }
 .ranks-standing__next { grid-column: 1 / -1; font-size: 13px; color: var(--ink-faint); }
 @media (max-width: 540px) { .ranks-standing { grid-template-columns: minmax(0, 1fr); } }
 
 .ranks-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
 .rank-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
+  background: var(--glass);
+  border: var(--line) solid transparent;
   border-radius: var(--radius);
-  padding: 14px 16px;
+  padding: var(--sp-sm) 16px;
 }
-.rank-card--current { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-weak); }
-.rank-card--next { border-style: dashed; }
+/* the reader's own rung is the one warm thing on the ladder */
+.rank-card--current { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
+.rank-card--next { border-style: dashed; border-color: var(--rule); }
 .rank-card--sealed { opacity: 0.7; }
 .rank-card--placeholder { color: var(--ink-faint); }
 .rank-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.rank-card__title { font-weight: 650; font-size: 14px; }
+.rank-card__title { font-family: var(--font-display); font-weight: 400; font-size: 16px; letter-spacing: -0.02em; }
 .rank-card__status {
   margin-left: auto;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
 }
-.rank-card__status--current { color: var(--accent-text); }
+.rank-card__status--current { color: var(--accent-ink); }
 .rank-card__status--next { color: var(--info); }
 .rank-card__status--sealed { color: var(--ink-faint); }
-.rank-card__blurb { font-size: 13px; color: var(--ink-soft); margin: 6px 0; }
+.rank-card__blurb { font-size: 13px; color: var(--ink-soft); margin: 6px 0; max-width: var(--measure); }
 .rank-card__blurb--sealed { font-style: italic; }
 .rank-card__unlocks-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  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);
-  margin: 8px 0 4px;
+  margin: 10px 0 4px;
 }
-.rank-card__list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
+.rank-card__list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); max-width: var(--measure); }
 .rank-card__list li { margin: 2px 0; }
-.ranks-rise__body { font-size: 13.5px; }
+.rank-card__list li::marker { color: var(--ink-faint); }
+.ranks-rise__body { font-size: 13.5px; max-width: var(--measure); }
 .ranks-rise__body p { margin: 8px 0; }
 
 /* ---------- toast + copy toast + deep-link overlay ---------- */
@@ -2377,35 +2543,41 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   cursor: pointer;
 }
 .deeplink-card__close:hover { border-color: var(--ink-faint); color: var(--ink); }
+/* The record's kind eyebrow, in the label voice — mono in light, the body face
+   in dark. Task 1003305 retired the hand-rolled 11px/600/0.06em copy of that
+   voice for the tokens, so the overlay flips with the rest of the surface. */
 .deeplink-card__kind {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink-faint);
-  margin: 0 0 4px;
+  margin: 0 0 12px;
 }
-.deeplink-card__title { font-family: var(--font-display); font-size: 21px; font-weight: 300; letter-spacing: -0.03em; margin: 0 0 8px; }
-.deeplink-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
+.deeplink-card__title { font-family: var(--font-display); font-size: 21px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 10px; }
+.deeplink-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin: 0 0 10px; }
 .deeplink-card__summary { font-size: 13.5px; margin: 0 0 10px; }
 .deeplink-card__note { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
 .deeplink-card__link { font-size: 13px; }
 /* task 1753: the deepened TASK body inside the shared record overlay. */
 .td-goal { font-size: 13px; margin: 0 0 10px; }
+/* Prose, not a box. The panel is already the container, and in v3 tone does the
+   separation — a bordered well inside a card is the card-in-a-card the pick
+   removed. The scroll cap stays: this sits in a modal with its own max-height. */
 .td-desc {
   font-size: 13px;
-  line-height: 1.55;
+  line-height: 1.6;
   white-space: pre-wrap;
   word-break: break-word;
+  color: var(--ink-soft);
   margin: 0 0 12px;
-  padding: 10px 12px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
   max-height: 42vh;
   overflow-y: auto;
 }
-.td-touches { font-size: 12.5px; color: var(--ink-faint); word-break: break-word; margin: 0 0 12px; }
+.td-touches { font-size: 12.5px; color: var(--ink-faint); font-family: var(--font-mono); word-break: break-word; margin: 0 0 12px; }
 /* task 1003109: the ship-time VISUAL, rendered directly under the value summary
    it restates. Sized to be READ (this exists so a non-engineer can see a change),
    capped so a tall screenshot can't push the rest of the record off the page, and
@@ -2417,9 +2589,9 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   max-height: 52vh;
   width: auto;
   height: auto;
-  border: 1px solid var(--border);
+  border: var(--line) solid var(--rule-soft);
   border-radius: var(--radius-sm);
-  background: var(--surface-2);
+  background: var(--glass);
 }
 .td-visual__caption { font-size: 12.5px; color: var(--ink-faint); margin: 6px 0 0; }
 /* The compact form: a thumbnail beside a value summary in a ship FEED, where the
@@ -2430,49 +2602,83 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   height: 44px;
   flex: 0 0 auto;
   object-fit: cover;
-  border: 1px solid var(--border);
+  border: var(--line) solid var(--rule-soft);
   border-radius: var(--radius-sm);
-  background: var(--surface-2);
+  background: var(--glass);
   vertical-align: middle;
 }
-/* Shared small-caps label: overlay section heads and triage form-field labels. */
-.td-section-h, .td-field > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
-.td-section-h { margin: 0 0 4px; }
+/* Shared section label: overlay section heads and triage form-field labels, in
+   the label voice rather than a second hand-rolled copy of it. */
+.td-section-h, .td-field > span {
+  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);
+}
+.td-section-h { margin: 0 0 8px; }
 .td-deps { margin: 0 0 12px; }
-.td-dep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
-.td-dep { font-size: 13px; color: var(--accent-text); text-decoration: none; }
+/* v1's bare ledger inside a v3 panel — a hairline on top, air, and the first row
+   drops both. The same row grammar the board's history list took (task 1003304). */
+.td-dep-list { list-style: none; margin: 0; padding: 0; }
+.td-dep-list li { border-top: var(--line) solid var(--rule-soft); padding: 10px 0; }
+.td-dep-list li:first-child { border-top: 0; padding-top: 0; }
+.td-dep {
+  display: inline-block;
+  font-size: 13px;
+  color: var(--ink);
+  text-decoration: none;
+  min-height: 24px;
+  padding: 3px 0;
+  line-height: 18px;
+}
 .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: 8px; align-items: center; margin: 14px 0 0; }
+.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;
-  padding: 6px 12px;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  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 { background: var(--surface-2); }
-.td-btn--primary { background: var(--accent); color: #fff; border-color: transparent; }
-.td-btn--primary:hover { background: var(--accent-deep); }
-.td-btn:disabled { opacity: 0.6; cursor: default; }
-.td-action-note { flex-basis: 100%; font-size: 12.5px; color: var(--warn); margin: 4px 0 0; }
+.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-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
    promote's five fields fit the panel without scrolling; --wide spans both. */
 .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: inherit;
   font-size: 13px;
-  padding: 5px 8px;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
-  color: var(--ink);
   min-width: 0;
   max-width: 100%;
 }

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

@@ -0,0 +1,71 @@
+/* task.css — what the TASK record has that the idea record does not
+   (task 1003305, goal 1000081). The shared composition is record.css; this is
+   the page's own two shapes.
+
+   Promoted out of task.html's inline <style>, which was the last substantive
+   inline block in the hall and sat at its tests/hall_audit.mjs ratchet with zero
+   headroom — so the re-skin could not have added a line to it even if it wanted
+   to. Its three rules are gone rather than ported: the back link and the status
+   pill are the record archetype's now (.rec-back, .rec-pill), and the claim line
+   is an ordinary section. */
+
+/* ---- the lifecycle rail -------------------------------------------------- */
+/* The world's signature component, and the answer to "where is this task": five
+   beats with exactly ONE lit, which is the same lit-step grammar as the open tab
+   and the current nav item. It is a READOUT, not a control — nothing here is
+   pressable, so the accent lights only the beat the task is actually on.
+   The six GDS statuses fold into five beats because backlog / blocked / ready
+   are all "no builder has it yet"; task.js writes the caption that says which. */
+.tk-rail {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0;
+  margin: var(--sp-lg) 0 0;
+  padding: 0;
+  list-style: none;
+}
+.tk-step { border-top: 2px solid var(--rule-soft); padding: 14px 16px 0 0; }
+.tk-step__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-pill);
+  border: var(--line) solid var(--ink-faint);
+  margin-bottom: 12px;
+}
+.tk-step__n {
+  display: block;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  margin-bottom: 5px;
+}
+.tk-step__c { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-faint); }
+.tk-step[aria-current="step"] { border-top-color: var(--accent); }
+.tk-step[aria-current="step"] .tk-step__dot { background: var(--accent); border-color: var(--accent); }
+.tk-step[aria-current="step"] .tk-step__n { color: var(--ink); }
+.tk-step[aria-current="step"] .tk-step__c { color: var(--ink-soft); }
+
+/* ---- the ship-time visual ------------------------------------------------ */
+/* task 1003109: the same claim as the value summary in another medium, so it
+   renders at a size a NON-ENGINEER can actually read rather than as a thumbnail,
+   and capped so a tall screenshot cannot push the rest of the record off the
+   page. Nothing at all is drawn when a task has no visual. */
+.tk-visual { margin: 0; }
+.tk-visual__img {
+  display: block;
+  max-width: 100%;
+  max-height: 52vh;
+  width: auto;
+  height: auto;
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius-sm);
+  background: var(--glass);
+}
+.tk-visual__caption { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); max-width: var(--measure); }
+
+@media (max-width: 640px) {
+  .tk-rail { grid-template-columns: 1fr; }
+  .tk-step { padding: 12px 0 0; }
+}

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

@@ -9,35 +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-03-roadmap1">
-  <style>
-    /* Page-local styles for the task-detail page (task 751) — the full-page
-       replacement for the old #/task/N overlay (task-detail.js). Reuses the
-       overlay's .deeplink-card__*/.td-* content classes (style.css) since the
-       body markup is the same shape, just not wrapped in a modal panel. */
-
-    .task-detail__back { font-size: 13px; color: var(--ink-soft); text-decoration: none; display: inline-block; margin-bottom: 10px; }
-    .task-detail__back:hover { color: var(--ink); text-decoration: underline; }
-
-    .task-status-pill {
-      display: inline-flex; align-items: center; height: 20px; padding: 0 10px;
-      border-radius: 999px; font-size: 12px; font-weight: 600;
-      background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft);
-      text-transform: capitalize;
-    }
-    .task-status-pill--ready,
-    .task-status-pill--shipped,
-    .task-status-pill--confirmed { background: var(--ok-weak); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
-    .task-status-pill--active,
-    .task-status-pill--completed { background: var(--accent-weak); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
-    .task-status-pill--blocked,
-    .task-status-pill--backlog { background: var(--warn-weak); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
-
-    .task-detail__claim {
-      font-size: 13px; color: var(--ink-soft); margin: 0 0 12px;
-      display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
-    }
-    .task-detail__claim strong { color: var(--ink); font-weight: 600; }
-  </style>
+  <!-- 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. -->
+  <link rel="stylesheet" href="/builders/record.css">
+  <link rel="stylesheet" href="/builders/task.css">
 </head>
 <body data-page="task" data-page-title="Task">
 
@@ -51,14 +27,21 @@
         <!-- task 2175: the breadcrumb sits in the page head, above the card, so a
              deep-linked visitor (this page is deliberately not in the nav) has a
              way back before the task body has loaded. -->
-        <a class="task-detail__back" href="/work">← Back to Tasks</a>
-        <p class="page-head__sub" id="task-sub">Loading task…</p>
+        <div class="rec-crumb">
+          <a class="rec-back" href="/work">
+            <svg class="rec-back__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M9.4 3.6 5 8l4.4 4.4"/><path d="M5 8h7.2"/></svg>Back to tasks</a>
+          <p class="rec-sub" id="task-sub">Loading task</p>
+        </div>
       </div>
 
       <main id="hall-main">
         <section class="scroll" id="task-scroll" aria-labelledby="task-h">
           <div id="task-body">
-            <p class="deeplink-card__title" id="task-h">Loading…</p>
+            <!-- The h1 is present in EVERY state, including this one: the
+                 one-header-main-h1 floor measures the rendered DOM, and a page
+                 whose heading only appears once a fetch lands has none for the
+                 whole of the load, the not-found and the error renders. -->
+            <h1 class="rec-big" id="task-h">Loading the task</h1>
           </div>
         </section>
       </main>