@bongos/core 1.19.447 → 1.19.449

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

@@ -0,0 +1,324 @@
+/* record.css — the RECORD archetype: one row of the ledger, read end to end
+   (task 1003305, goal 1000081). Shared by the task page (task.html) and the idea
+   page (idea.html), which are the same composition over different facts.
+
+   THE ARCHETYPE is v3 "the glass hall", the owner's pick from the composition
+   round — docs/design/hall-direction-v2.md §6, mock docs/design/mocks/hall/task/v3.html.
+   Reading order, top to bottom: the way back and a mono sub line; then ONE panel
+   holding the kind eyebrow, the title, the facts, a figure band, the lifecycle
+   rail, and the record's sections. The panel is the shell's `.scroll` — v3 has
+   exactly three card levels and a fourth would be a design decision, not a
+   local override (modules/hall-ui/CLAUDE.md, Hard rules).
+
+   WHY IT IS ITS OWN SHEET rather than two copies: the task page and the idea
+   page differ in their FACTS, not their composition, and a second copy of a
+   hundred lines is how the two would drift apart the first time one is touched.
+   Page-specific shapes stay page-local (idea.css keeps the grade badge, the
+   five answers and the mark control; task.css keeps the lifecycle rail's
+   captions and the touches list).
+
+   Everything below spends the world's real token names. No compat alias
+   (--surface / --surface-2 / --border / --border-strong / --accent-weak /
+   --accent-text) appears here — they exist for pages nobody has re-skinned, so
+   spending one is legal CSS that quietly opts this sheet back out of the world.
+   `--line` is a WIDTH; the hairline's colour is --rule / --rule-soft. */
+
+/* ---- the way back ------------------------------------------------------- */
+/* These two pages are deliberately not in the sidebar (both are always reached
+   from a link), so a deep-linked visitor needs a way back BEFORE the record has
+   loaded — which is why the crumb is static markup and not rendered by the page
+   script. 3px of padding buys the 24px control floor without changing the line's
+   own leading; the link measured 21px on task.html and 20px on idea.html. */
+.rec-crumb {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin: 0 0 4px;
+}
+.rec-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 24px;
+  padding: 3px 0;
+  color: var(--ink-soft);
+  font-size: 13.5px;
+  text-transform: lowercase;
+  text-decoration: none;
+}
+.rec-back:hover { color: var(--ink); text-decoration: underline; }
+.rec-back__ic { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
+/* The sub line is the record's address, so it is tabular: an id that re-renders
+   must not re-space the line it sits in. */
+.rec-sub {
+  margin: 0;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- the head of the record --------------------------------------------- */
+.rec-kind {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin: 0 0 14px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+
+/* The ONE place a lifecycle state is coloured. The status vocabulary is the
+   sanctioned exception to the Fifteen Rule (DESIGN.md §Reuse) — a failed grade
+   must not be salmon on a page whose ship button is also salmon — and its values
+   are measured by tests/hall_tokens.mjs, never hand-tuned. */
+.rec-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0 13px;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-pill);
+  background: none;
+  font-family: var(--font-body);
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: lowercase;
+  color: var(--ink-soft);
+}
+.rec-pill--ok { color: var(--ok); background: var(--ok-weak); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
+.rec-pill--warn { color: var(--warn); background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
+.rec-pill--danger { color: var(--danger); background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
+.rec-pill--info { color: var(--info); background: var(--info-weak); border-color: color-mix(in srgb, var(--info) 42%, transparent); }
+.rec-pill--sm { min-height: 22px; padding: 0 9px; font-size: 11.5px; }
+
+.rec-title {
+  margin: 0 0 18px;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(24px, 2.6vw, 34px);
+  line-height: 1.14;
+  letter-spacing: -0.032em;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+  /* NOT --measure. That token is the BODY reading measure (48ch at 15px, ~60
+     characters); spent on a 34px display face it caps at ~950px and the title
+     runs the width of the panel. A heading's cap is its own em-based one, and
+     24ch is the mock's — measured on the display face, not the body face. */
+  max-width: 24ch;
+}
+/* The record's id, quoted from the machine: mono, tabular, and set back from the
+   title so the words lead. */
+.rec-title__id {
+  font-family: var(--font-mono);
+  font-size: 0.56em;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+  margin-right: 0.5em;
+  vertical-align: 0.14em;
+}
+
+.rec-meta,
+.rec-note {
+  margin: 0 0 8px;
+  font-size: 14px;
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+.rec-meta b { font-weight: 500; color: var(--ink); }
+
+.rec-goal {
+  margin: 18px 0 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: 14.5px;
+  color: var(--ink-soft);
+}
+.rec-goal a {
+  display: inline-block;
+  min-height: 24px;
+  padding: 3px 0;
+  line-height: 18px;
+  color: var(--ink);
+  text-decoration: none;
+  border-bottom: var(--line) solid var(--rule);
+}
+.rec-goal a:hover { border-bottom-color: var(--ink); text-decoration: none; }
+
+/* ---- the figure band ----------------------------------------------------- */
+/* v2's stat-tile grid is the reference for any figure row the hall renders
+   (hall-direction-v2 §6): ONE band divided by vertical hairlines, not four
+   separate objects. A figure is DATA, never live, so it is ink and never the
+   accent — the One Warm Thing Rule. Only figures the record actually carries are
+   drawn: a task with no recorded actual minutes must not look incomplete. */
+.rec-figs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 0;
+  margin: var(--sp-lg) 0 0;
+  border-top: var(--line) solid var(--rule-soft);
+}
+.rec-fig { padding: 18px 20px 2px; border-left: var(--line) solid var(--rule-soft); }
+.rec-fig:first-child { border-left: 0; padding-left: 0; }
+.rec-fig__l {
+  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: 10px;
+}
+.rec-fig__v {
+  display: block;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(26px, 3vw, 40px);
+  line-height: 1;
+  letter-spacing: -0.035em;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+/* The unit, one third the size, in the machine's face. */
+.rec-fig__u {
+  text-decoration: none;
+  font-family: var(--font-mono);
+  font-size: 0.36em;
+  letter-spacing: 0;
+  color: var(--ink-faint);
+  margin-left: 0.3em;
+}
+
+/* ---- the sections -------------------------------------------------------- */
+.rec-sec { margin: var(--sp-lg) 0 0; }
+.rec-sec__h {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin: 0 0 12px;
+  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);
+}
+.rec-sec__h em {
+  font-style: normal;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  text-transform: lowercase;
+  color: var(--ink-faint);
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius-pill);
+  padding: 2px 8px;
+}
+.rec-body {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--ink-soft);
+  max-width: var(--measure);
+}
+.rec-body b { font-weight: 500; color: var(--ink); }
+/* The description as filed. `--measure` is MEASURED (48ch renders ~60 characters
+   in Manrope) — a `ch` is the zero glyph's width, not a character, so do not do
+   fresh ch arithmetic here. */
+.rec-desc {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--ink-soft);
+  max-width: var(--measure);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* v1's bare ledger inside a v3 panel: a hairline on top, air, and the first row
+   drops both. The paths are the machine's words, so they take the mono face. */
+.rec-files { list-style: none; margin: 0; padding: 0; }
+.rec-files li {
+  border-top: var(--line) solid var(--rule-soft);
+  padding: 11px 0;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  color: var(--ink-soft);
+  overflow-wrap: anywhere;
+}
+.rec-files li:first-child { border-top: 0; padding-top: 0; }
+
+.rec-depcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-lg); }
+.rec-deplist { list-style: none; margin: 0; padding: 0; }
+.rec-deplist li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  border-top: var(--line) solid var(--rule-soft);
+  padding: 12px 0;
+}
+.rec-deplist li:first-child { border-top: 0; padding-top: 0; }
+.rec-dep {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 11px;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 24px;
+  padding: 2px 0;
+  font-size: 14.5px;
+  color: var(--ink);
+  text-decoration: none;
+}
+.rec-dep:hover { text-decoration: underline; }
+.rec-dep__id {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- the actions --------------------------------------------------------- */
+.rec-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+/* Where a lifecycle control would be but is not, the record says why in words.
+   Nothing here is pressable-or-live, so nothing here is warm. */
+.rec-actnote { margin: 0; flex: 1 1 240px; font-size: 14px; color: var(--ink-soft); max-width: var(--measure); }
+
+/* ---- the honest not-found / could-not-load headings ---------------------- */
+/* A real <h1>, not a styled paragraph: the empty and error states are renders
+   like any other, and one-header-main-h1 measures the DOM, not the happy path.
+   The mock draws these as a bare line, which is where the size comes from. */
+.rec-big {
+  margin: 0 0 14px;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(22px, 2.4vw, 30px);
+  line-height: 1.16;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+}
+
+@media (max-width: 640px) {
+  .rec-figs { grid-template-columns: repeat(2, 1fr); }
+  .rec-fig { padding: 16px 14px 2px; }
+  .rec-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
+  .rec-fig:nth-child(n + 3) { border-top: var(--line) solid var(--rule-soft); margin-top: 12px; }
+  .rec-title { max-width: none; }
+}

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

@@ -173,6 +173,11 @@
   --sidebar-w:       var(--sidebar-w-rail);
   --rail-open:       246px;
   --content-max:     1120px;
+  /* 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
@@ -879,6 +884,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 +1251,25 @@ 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); }
+
 .hall-nav {
   position: sticky;
   top: var(--topbar-h);
@@ -1462,7 +1511,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 ---------- */
 
@@ -2377,35 +2471,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 +2517,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 +2530,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; }
+}