@bongos/core 1.19.455 → 1.19.457

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

@@ -3,8 +3,27 @@
    shared kit doesn't carry lives here: goal cards, the detail band, criteria /
    member / conflict lists, the invite + pending panels. Shared pieces —
    .pager--paged, .count-pill, .kit-tabs, .filters, .empty-state, .kit-skel —
-   are in style.css's hall-kit section. Everything derives from the shared
-   design tokens so instance packs reskin this page along with the rest. */
+   are in style.css's hall-kit section.
+
+   RE-SKINNED INTO THE CHROME WORLD, task 1003307 (goal 1000081). Goals is the
+   LIST ARCHETYPE the governance-and-lists pass applies across thirteen pages,
+   so this sheet is the reference the other twelve are held against. The
+   archetype is v3 "the glass hall", the owner's pick from the composition round
+   — docs/design/hall-direction-v2.md §6.
+
+   Three rules this sheet now keeps, and the next editor has to keep too:
+   - NO COMPAT ALIAS. --surface / --surface-2 / --border / --border-strong /
+     --accent-weak / --accent-text still resolve, because pages nobody has
+     re-skinned need them to. Spending one HERE is legal CSS that quietly opts
+     this sheet back out of the world. The real names are --bg-card / --glass /
+     --rule-soft / --rule / --accent-tint / --accent-ink.
+   - --line IS A WIDTH (1px), not a colour. The hairline's colour is --rule or
+     --rule-soft. A "border: var(--line) solid var(--rule-soft)" reads as one
+     idea; "1px solid var(--border)" reads as two guesses.
+   - THE PANEL HAS NO EDGE. v3 separates by tone: --bg-card at the full
+     --radius, its border transparent so focus and state have somewhere to go.
+   The ch unit is the zero glyph's width, not a character — the body measure is
+   --measure (48ch, measured at ~60 characters), never fresh ch arithmetic. */
 
 /* ---- goal-card grid (the CARDS view) ----
    task 2171 density pass: minmax 300→230 (four across at desktop width),
@@ -15,11 +34,12 @@
 .goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
 .goal-card {
   display: flex; flex-direction: column; gap: 7px;
-  background: var(--surface); border: 1px solid var(--border);
+  background: var(--bg-card); border: var(--line) solid transparent;
   border-radius: var(--radius); padding: 10px 12px;
   color: var(--ink);
 }
-a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); background: var(--surface-2); }
+/* Hover lifts the tone; the transparent edge is what focus lands on. */
+a.goal-card:hover { text-decoration: none; background: var(--glass); }
 .goal-card__head { display: flex; align-items: flex-start; gap: 9px; }
 /* task 1003136: the task-1760 drag handle/priority/dragging rules that lived
    here are deleted with wireDragReorder (see goals-page.js) — the revived
@@ -34,10 +54,10 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 /* task 2163 — the real goal id, shown as a monospace #NNN token so it reads as
    an identifier and never gets confused with the priority ordinal on the left. */
 .goal-card__id, .goal-detail__id {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-faint);
 }
-.goal-card__id { padding: 0 5px; border: 1px solid var(--rule-soft); border-radius: 5px; }
+.goal-card__id { padding: 0 5px; border: var(--line) solid var(--rule-soft); border-radius: var(--radius-sm); }
 .goal-detail__id { font-size: 0.72em; vertical-align: 0.12em; margin-right: 4px; }
 .goal-card__foot { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--ink-soft); }
 .goal-card__foot strong { font-variant-numeric: tabular-nums; }
@@ -49,8 +69,15 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 
 /* ---- detail view ---- */
 .goal-detail__head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
-.goal-detail__title { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
-.goal-detail__desc { color: var(--ink-soft); font-size: 13.5px; max-width: 72ch; margin: 6px 0 0; }
+/* The goal's name is the subject of the detail view, so it takes the display
+   voice (Manrope 300, tight, sentence case) rather than a heavy UI weight —
+   v3's own divergence from the mono-label archetypes. */
+.goal-detail__title {
+  font-family: var(--font-display); font-weight: 300;
+  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.03em;
+  color: var(--ink); text-shadow: var(--type-halo); margin: 0;
+}
+.goal-detail__desc { color: var(--ink-soft); font-size: 13.5px; max-width: var(--measure); margin: 6px 0 0; }
 .goal-detail__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
 /* task 1888/1828 — Completion | Members | Conflicts share ONE card. Wide:
    three columns split by vertical rules. Narrow: they stack, split by
@@ -59,10 +86,10 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
    work list can no longer push them off the bottom of the page. */
 .goal-band { padding: 0; margin-top: 20px; display: grid; grid-template-columns: 1fr; }
 .goal-band__col { padding: 14px 18px; min-width: 0; }
-.goal-band__col + .goal-band__col { border-top: 1px solid var(--rule-soft); }
+.goal-band__col + .goal-band__col { border-top: var(--line) solid var(--rule-soft); }
 @media (min-width: 900px) {
   .goal-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .goal-band__col + .goal-band__col { border-top: none; border-left: 1px solid var(--rule-soft); }
+  .goal-band__col + .goal-band__col { border-top: none; border-left: var(--line) solid var(--rule-soft); }
 }
 
 /* Live conflicts: the band COLUMN can't own the card border, so it gets a
@@ -70,26 +97,26 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
    (Count pills on these headers are the shared .count-pill.) */
 .goal-conflicts-card--live { background: color-mix(in srgb, var(--warn) 6%, transparent); }
 .goal-conflicts-card--live .count-pill { background: var(--warn-weak); color: var(--warn); }
-#goal-conflicts-view-card.goal-conflicts-card--live { background: var(--surface); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
+#goal-conflicts-view-card.goal-conflicts-card--live { background: var(--bg-card); border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
 
 /* task 1828 — inline Claim on a ready To-do row + the conflicts "view all". */
 .goal-claim-btn {
   display: inline-flex; align-items: center; justify-content: center;
   height: 24px; padding: 0 12px; border-radius: var(--radius-sm);
-  border: 1px solid var(--accent); background: var(--accent); color: #fff;
+  border: var(--line) solid var(--accent); background: var(--accent); color: var(--accent-on);
   font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
 }
-.goal-claim-btn:hover:not(:disabled) { background: var(--accent-deep); }
+.goal-claim-btn:hover:not(:disabled) { background: var(--accent-lift); }
 .goal-claim-btn:disabled { opacity: 0.55; cursor: default; }
 /* task 1828 — Release on the viewer's OWN active claim (ghost, not accent —
    it's the undo of a claim); a muted label for another builder's claim. */
 .goal-release-btn {
   display: inline-flex; align-items: center; justify-content: center;
   height: 24px; padding: 0 12px; border-radius: var(--radius-sm);
-  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft);
+  border: var(--line) solid var(--rule); background: var(--bg-card); color: var(--ink-soft);
   font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
 }
-.goal-release-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
+.goal-release-btn:hover:not(:disabled) { background: var(--glass); color: var(--ink); }
 .goal-release-btn:disabled { opacity: 0.55; cursor: default; }
 .ledger__claimed { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
 .ledger__action { text-align: right; white-space: nowrap; }
@@ -121,8 +148,8 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 .goal-work__tabs .kit-tabs { margin: 0; }
 .conflict__sev {
   display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 8px;
-  border-radius: 999px; font-size: 10.5px; font-weight: 600; vertical-align: 1px;
-  background: var(--surface-2); color: var(--ink-soft);
+  border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; vertical-align: 1px;
+  background: var(--glass); color: var(--ink-soft);
 }
 .conflict__sev--high { background: var(--danger-weak); color: var(--danger); }
 .conflict__sev--medium { background: var(--warn-weak); color: var(--warn); }
@@ -130,10 +157,13 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 .crit-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
 /* task 1002164 — a third trailing column holds the per-criterion Confirm action;
    it collapses to zero width on the rows that have none. */
-.crit { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
+.crit { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 10px; padding: 6px 0; border-bottom: var(--line) solid var(--rule-soft); font-size: 13px; }
 .crit:last-child { border-bottom: none; }
-.crit__mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-faint); }
-.crit--done .crit__mark { background: var(--ok); border-color: var(--ok); color: #fff; }
+.crit__mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rule); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-faint); }
+/* The tick reads ON the ok fill, so it takes the card ground: near-white in
+   light where --ok is a deep green, near-black in dark where --ok is a light
+   one. A fixed #fff was legible in one mode only. */
+.crit--done .crit__mark { background: var(--ok); border-color: var(--ok); color: var(--bg-card); }
 .crit--done .crit__text { color: var(--ink-soft); }
 
 /* task 1002164 — "met, awaiting confirmation": every linked task shipped but the
@@ -143,33 +173,33 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 .crit__act { display: flex; align-items: center; }
 .crit-list--full .crit__act { align-self: start; padding-top: 1px; }
 .crit__confirm {
-  cursor: pointer; white-space: nowrap; padding: 3px 10px; border-radius: 999px;
-  border: 1px solid var(--ok); background: transparent; color: var(--ok);
-  font: inherit; font-size: 11.5px; font-weight: 600;
+  cursor: pointer; white-space: nowrap; padding: 3px 10px; border-radius: var(--radius-pill);
+  border: var(--line) solid var(--ok); background: transparent; color: var(--ok);
+  font: inherit; font-size: 11.5px; font-weight: 600; min-height: 24px;
 }
-.crit__confirm:hover:not(:disabled) { background: var(--ok); color: #fff; }
+.crit__confirm:hover:not(:disabled) { background: var(--ok); color: var(--bg-card); }
 .crit__confirm:disabled { opacity: .6; cursor: default; }
 .crit__flag {
-  white-space: nowrap; padding: 2px 8px; border-radius: 999px;
+  white-space: nowrap; padding: 2px 8px; border-radius: var(--radius-pill);
   background: var(--warn-weak); color: var(--warn); font-size: 10.5px; font-weight: 600;
 }
 /* BV1.R79: per-criterion expand in the capped band — short label, full text on
    click (matches the Roadmap page's .vbar__crit-d pattern). */
 .crit-d { min-width: 0; }
-.crit-d > summary { cursor: pointer; list-style: none; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
+.crit-d > summary { cursor: pointer; list-style: none; min-height: 24px; text-decoration: underline dotted var(--rule); text-underline-offset: 3px; }
 .crit-d > summary::-webkit-details-marker { display: none; }
 .crit-d[open] > summary { text-decoration: none; font-weight: 500; }
 .crit-d .crit__detail { margin-top: 4px; }
 
 .member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
-.member { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
+.member { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: var(--line) solid var(--rule-soft); font-size: 13px; }
 .member:last-child { border-bottom: none; }
-.member__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-weak); color: var(--accent-text); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
+.member__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
 .member__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
 .member__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .member__name small { color: var(--ink-faint); }
-.member-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--ink-soft); }
-.member-pill--lead { background: var(--accent-weak); color: var(--accent-text); }
+.member-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; background: var(--glass); color: var(--ink-soft); }
+.member-pill--lead { background: var(--accent-tint); color: var(--accent-ink); }
 
 /* task 1762/1877 — owner/manager invite control (goal member admission),
    collapsed behind "+ Invite" (disclosure, closed by default — task 2171). */
@@ -181,17 +211,21 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
    pending invite/join-request queue (manager view, next to the invite box). */
 .goal-badge--locked { background: var(--warn-weak); color: var(--warn); }
 .goal-pending { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 10px; }
-.pending-group__h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-faint); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
+.pending-group__h {
+  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: 0 0 4px; display: flex; align-items: center; gap: 6px;
+}
 .pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
-.pending-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; flex-wrap: wrap; }
+.pending-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: var(--line) solid var(--rule-soft); font-size: 13px; flex-wrap: wrap; }
 .pending-row:last-child { border-bottom: none; }
 .pending-row__who { font-weight: 600; }
 .pending-row__note { color: var(--ink-faint); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pending-row__actions { display: flex; gap: 6px; margin-left: auto; }
 
-.conflict { border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); background: var(--warn-weak); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; margin: 8px 0 0; }
+.conflict { border: var(--line) solid color-mix(in srgb, var(--warn) 42%, transparent); background: var(--warn-weak); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; margin: 8px 0 0; }
 .conflict__pair { font-weight: 600; }
-.conflict__paths { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; word-break: break-all; }
+.conflict__paths { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; word-break: break-all; }
 .conflict-note { font-size: 12px; color: var(--ink-faint); margin: 10px 0 0; }
 
 /* Filtered-count line under the kit filter bar (list view). */
@@ -214,37 +248,84 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 .gr-sm b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
 .gr-sm__dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
 
-.gr-sec { display: flex; align-items: center; gap: 9px; margin: 26px 0 8px; }
-.gr-sec b { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
+/* The group head sits on a --rule hairline (the archetype's .group__head): a
+   heavier line than the rows' --rule-soft, so the groups read as the outer
+   division and the rows as the inner one. */
+.gr-sec { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; padding: 0 0 10px; border-bottom: var(--line) solid var(--rule); }
+/* The section name is the label voice — take the tokens, never the family:
+   --label-face is mono in light and the body face in dark, because mono caps
+   read as precise on paper and as thin and technical on black. */
+.gr-sec b {
+  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);
+}
 .gr-sec__n { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
 
-.gr-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
-.gr-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--rule-soft); }
-.gr-row:last-child { border-bottom: 0; }
-.gr-row:hover { background: color-mix(in srgb, var(--ink) 2.5%, var(--bg-card)); }
+/* The rollup list is one panel, not a stack of bordered rows: --bg-card at the
+   full radius with a transparent edge, and the rows' own hairlines doing the
+   dividing. The padding is the panel's, so the first and last rows breathe
+   against it rather than against their own borders. */
+.gr-list { border: var(--line) solid transparent; border-radius: var(--radius); background: var(--bg-card); padding: 4px 0; overflow: hidden; }
+/* The archetype's row (mock .goal): the air is the loosest of the three
+   versions, the columns are ring / content / right, and the rule sits on TOP so
+   the first row can drop it and start flush against the panel's own padding. */
+.gr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 20px 22px; border-top: var(--line) solid var(--rule-soft); }
+.gr-row:first-child { border-top: 0; }
+.gr-row:hover { background: var(--glass); }
 .gr-ringcol { flex: none; }
 .gr-crit-none { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--rule); color: var(--ink-faint); font-size: 13px; }
 .gr-main { min-width: 0; }
-.gr-title { display: inline-block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.3; }
-.gr-title:hover { color: var(--accent-text); }
-.gr-meta { font-size: 12px; color: var(--ink-faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
-.gr-roll { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
+/* The goal's name is the way into the goal, so it is a control and owes the
+   24px floor on BOTH axes. Its 15px/1.3 line box measured 20px tall (the kit's
+   controls-24px finding, 26 rows at 1440); the padding buys the height and the
+   equal negative margin hands the space back so the row does not re-space. */
+/* The name at the archetype's weight: 17px/500, not 15px/650. A heavy small
+   title reads as a label; this reads as the thing itself. It is also the way
+   into the goal, so it owes the 24px floor on both axes — the padding buys the
+   height and the equal negative margin hands the space back. */
+.gr-title {
+  display: inline-block; font-size: 17px; font-weight: 500; letter-spacing: -.014em;
+  color: var(--ink); line-height: 1.3; text-decoration: none;
+  min-height: 24px; min-width: 24px; padding: 3px 4px; margin: 0 -4px;
+}
+.gr-title:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
+/* The id rides INSIDE the title rather than on the meta line below it, so every
+   row's name starts at the same x and the id never competes for the second line
+   the subtitle now wants. */
+.gr-title__id { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-faint); margin-right: 9px; }
+
+/* The goal's own one-line explanation. Task 1003224 made this a tooltip; task
+   1003307 gives it the line back on the owner's call, because 35 of 72 goals
+   carry one and a tooltip does not exist on a touch screen. Empty goals render
+   no element at all, so a row without a subtitle simply closes up. */
+.gr-sub { margin: 5px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: var(--measure); }
+
+/* The fact line: the state, then what the goal is scoped to. The pill and the
+   chip themselves are the shell's .fact-pill / .fact-chip — this row only says
+   how they sit together. */
+.gr-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; }
+/* What is left of the old meta run-on: the sort stamp, and only while a date
+   sort is active. The id moved into the title, the version became a chip and the
+   status became a pill. */
+.gr-meta { font-size: 12px; color: var(--ink-faint); margin-top: 8px; font-variant-numeric: tabular-nums; }
+.gr-roll { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
 .gr-d { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
 .gr-d i { width: 7px; height: 7px; border-radius: 50%; }
 .gr-d b { color: var(--ink); font-weight: 600; }
-.gr-right { text-align: right; min-width: 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+.gr-right { text-align: right; min-width: 150px; max-width: 244px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
 .gr-next { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 230px; }
 .gr-next__t { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
-.gr-claim { background: var(--accent); color: #fff; border-radius: 8px; padding: 6px 14px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
+.gr-claim { background: var(--accent); color: var(--accent-on); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
 .gr-claim:hover { background: var(--accent-deep); }
-.gr-drill { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 5px; }
-.gr-drill:hover { color: var(--accent-text); }
+.gr-drill { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; min-height: 24px; gap: 5px; }
+.gr-drill:hover { color: var(--accent-ink); }
 .gr-met { font-size: 12.5px; font-weight: 600; color: var(--ok); }
 .gr-quiet { font-size: 12.5px; color: var(--ink-faint); }
 
 .gr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
-.gr-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 20px; padding: 6px 13px 6px 8px; color: var(--ink-soft); font-size: 12.5px; }
-.gr-pill:hover { border-color: var(--border-strong); }
+.gr-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: var(--line) solid var(--rule); border-radius: var(--radius-pill); padding: 6px 13px 6px 8px; color: var(--ink-soft); font-size: 12.5px; min-height: 24px; }
+.gr-pill:hover { background: var(--glass); }
 .gr-pill b { color: var(--ink); font-weight: 600; }
 .gr-pill__ok { width: 17px; height: 17px; border-radius: 50%; background: var(--ok-weak); color: var(--ok); display: grid; place-items: center; font-size: 10px; font-weight: 800; }
 .gr-pill__id { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
@@ -266,25 +347,26 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
    subordinate; the bulk prose Claude writes is behind a disclosure and absent
    from the default reading path until someone asks for it.
    Tokens only from style.css's real set (--ink-soft, --ink-faint, --rule,
-   --surface, --radius-sm) — inventing one renders as nothing, which is how
+   --glass, --radius-sm) — inventing one renders as nothing, which is how
    copy-desk.css ended up with invisible fallbacks (idea 1000821). */
 .goal-detail__subtitle {
   color: var(--ink-soft);
   font-size: 13px;
   font-weight: 400;
   line-height: 1.45;
-  max-width: 72ch;
+  max-width: var(--measure);
   margin: 3px 0 0;
 }
 
 /* The disclosure is deliberately quiet: a row someone can ignore. */
 .claude-text {
   margin: 10px 0 0;
-  max-width: 72ch;
-  border-top: 1px solid var(--rule);
+  max-width: var(--measure);
+  border-top: var(--line) solid var(--rule);
   padding-top: 8px;
 }
 
+/* A <summary> is a control: the floor applies. It measured 162x19. */
 .claude-text__toggle {
   color: var(--ink-faint);
   font-size: 12px;
@@ -293,6 +375,7 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
   user-select: none;
   display: inline-flex;
   align-items: center;
+  min-height: 24px;
   gap: 6px;
 }
 
@@ -305,18 +388,16 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
 }
 .claude-text[open] > .claude-text__toggle::before { transform: rotate(90deg); }
 .claude-text__toggle:hover { color: var(--ink-soft); }
-.claude-text__toggle:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
-}
+/* The shell already rings :focus-visible in the world's two-tone recipe; a
+   page-local ring here would be a second, thinner one. Removed with the
+   re-skin — style.css:...:focus-visible owns it. */
 
 /* Set apart once opened, so it reads as a machine's notes rather than as the
    goal's own definition. */
 .claude-text__body {
   margin: 8px 0 0;
   padding: 8px 10px;
-  background: var(--surface);
+  background: var(--glass);
   border-radius: var(--radius-sm);
   color: var(--ink-soft);
   font-size: 13px;

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

@@ -30,7 +30,14 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head">
+      <!-- task 1003307: the board page head. goals.html shipped with NO <h1>
+           at all (the platform floor one-header-main-h1 measured 0), so the
+           re-skin carries the structural fix rather than porting the hole. The
+           heading is the label voice, not a display line: the goals ARE the
+           page, and a 22px title above them would be the loudest thing on a
+           surface whose content is rows. -->
+      <div class="page-head page-head--board">
+        <h1 class="page-head__h">Goals</h1>
         <p class="page-head__sub" id="goals-sub">Loading goals…</p>
       </div>
 

package/modules/hall-ui/public/goals.states.json

@@ -0,0 +1,74 @@
+{
+  "_": "The hall's Goals list + goal detail through modules/ui-design/kit/render.js (task 1003307). Goals is the LIST ARCHETYPE the governance-and-lists re-skin applies across thirteen pages, so its floors are measured first and the rest are held against them. Populated look: node scripts/hall-preview/server.js --port 4620 --fixture-me, then --base-in/--base-out at that origin.",
+  "page": "/builders/goals",
+  "surface": "hall-ui",
+  "stub": {
+    "prefix": "/builders/"
+  },
+  "modeQuery": false,
+  "_feeds": "The kit's own stub carries no goal feed, so against it the page renders its EMPTY and SKELETON states — which is deliberate: an empty board is a state the floors must hold in. Against the hall-preview harness the same states render populated. The feed 404s are declared here, never hidden. work-categories and goals/rollups have no checked-in fixture, so the harness answers 404: declared here, not hidden.",
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/tasks",
+    "/api/(gds|bongos)/versions",
+    "/api/(gds|bongos)/inbox/",
+    "/api/(gds|bongos)/work-categories"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\b401\b",
+    "\b404\b",
+    "Unauthorized",
+    "Not Found",
+    "load failed"
+  ],
+  "states": {
+    "list": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          600
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#goals-list-view",
+          "#goals-filters"
+        ],
+        "hidden": [
+          "#goal-detail-view"
+        ]
+      }
+    },
+    "detail": {
+      "auth": true,
+      "url": "/builders/goals#/goal/1000081",
+      "actions": [
+        [
+          "wait",
+          800
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#goal-detail-view"
+        ]
+      }
+    },
+    "out": {
+      "auth": false
+    }
+  },
+  "reducedMotion": {
+    "auth": true,
+    "actions": [
+      [
+        "wait",
+        600
+      ]
+    ]
+  }
+}

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

@@ -19,40 +19,39 @@
 .gov-rank-list { display: flex; flex-direction: column; gap: 8px; }
 .gov-rank {
   text-align: left; font: inherit; cursor: pointer;
-  border: 1px solid var(--border); border-radius: var(--radius-sm);
-  background: var(--surface); padding: 10px 12px;
+  border: var(--line) solid var(--rule-soft); border-radius: var(--radius-sm);
+  background: var(--bg-card); padding: 10px 12px;
   display: flex; flex-direction: column; gap: 4px;
 }
-.gov-rank:hover { background: var(--surface-2); }
+.gov-rank:hover { background: var(--glass); }
 .gov-rank[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
 .gov-rank__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
 .gov-rank__label { font-weight: 600; color: var(--ink); font-size: 13.5px; }
 .gov-rank__meta { color: var(--ink-faint); font-size: 11.5px; }
 
-.gov-pill {
-  font-size: 10.5px; font-weight: 600;
-  letter-spacing: 0.04em; text-transform: uppercase;
-  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
-  border: 1px solid var(--border); color: var(--ink-soft); background: var(--surface-2);
-}
-.gov-pill--seeded { background: var(--info-weak); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
-.gov-pill--custom { background: var(--ok-weak, var(--surface-2)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
-.gov-pill--locked { background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
+/* The base is the shell's .fact-pill (task 1003307) — this sheet's copy spelled
+   the label voice as literals, so it never flipped to the body face in dark.
+   Only the states are the page's own, and a state is a HAIRLINE in its own
+   colour: the archetype's .status carries no fill, so the pill never competes
+   with the row it sits on. */
+.gov-pill--seeded { color: var(--info); }
+.gov-pill--custom { color: var(--ok); }
+.gov-pill--locked { color: var(--danger); }
 .gov-pill--floor { font-variant-numeric: tabular-nums; }
 
 /* ---- permission grid ---------------------------------------------------- */
-.gov-section { margin: 0 0 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
+.gov-section { margin: 0 0 18px; border: var(--line) solid var(--rule-soft); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
 .gov-section__head {
   padding: 8px 14px; font-size: 11.5px; font-weight: 600;
   letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
-  background: var(--surface-2); border-bottom: 1px solid var(--border);
+  background: var(--glass); border-bottom: var(--line) solid var(--rule-soft);
 }
-.gov-perm { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
+.gov-perm { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: var(--line) solid var(--rule-soft); }
 .gov-perm:last-child { border-bottom: 0; }
 .gov-perm__main { flex: 1 1 auto; min-width: 0; }
 .gov-perm__key {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
-  color: var(--accent-text); background: var(--surface-2);
+  font-family: var(--font-mono); font-size: 12.5px;
+  color: var(--accent-ink); background: var(--glass);
   padding: 1px 5px; border-radius: 4px;
 }
 .gov-perm__guards { color: var(--ink-soft); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
@@ -60,10 +59,10 @@
 /* The toggle: a small pill button. Held = filled; not held = outline. */
 .gov-toggle {
   font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
-  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
-  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft);
+  padding: 4px 12px; border-radius: var(--radius-pill); white-space: nowrap;
+  border: var(--line) solid var(--rule); background: var(--bg-card); color: var(--ink-soft);
 }
-.gov-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
+.gov-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
 .gov-toggle:hover:not(:disabled) { border-color: var(--accent); }
 .gov-toggle:disabled { opacity: 0.55; cursor: default; }
 .gov-held-note { color: var(--ok); font-size: 12px; white-space: nowrap; }
@@ -73,33 +72,33 @@
 .gov-assign { flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
 .gov-input {
   font: inherit; font-size: 13px; color: var(--ink);
-  background: var(--surface); border: 1px solid var(--border-strong);
+  background: var(--bg-card); border: var(--line) solid var(--rule);
   border-radius: var(--radius-sm); padding: 7px 10px;
 }
 .gov-input:focus { outline: none; border-color: var(--accent); }
 .gov-input--id { width: 110px; }
 .gov-btn {
   font: inherit; font-size: 13px; font-weight: 600;
-  padding: 7px 16px; border: 1px solid var(--accent);
-  background: var(--accent); color: #fff;
+  padding: 7px 16px; border: var(--line) solid var(--accent);
+  background: var(--accent); color: var(--accent-on);
   border-radius: var(--radius-sm); cursor: pointer; align-self: flex-start;
 }
-.gov-btn:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
+.gov-btn:hover:not(:disabled) { background: var(--accent-lift); border-color: var(--accent-lift); }
 .gov-btn:disabled { opacity: 0.45; cursor: default; }
-.gov-btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
-.gov-btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
+.gov-btn--ghost { background: var(--bg-card); color: var(--ink); border-color: var(--rule); }
+.gov-btn--ghost:hover:not(:disabled) { background: var(--glass); }
 .gov-btn--small { font-size: 12px; padding: 4px 10px; }
 
 /* ---- assignments + principals ------------------------------------------ */
-.gov-assign-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
+.gov-assign-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: var(--line) solid var(--rule-soft); }
 .gov-assign-row:last-child { border-bottom: 0; }
 .gov-assign-row__who { flex: 1 1 auto; color: var(--ink); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
 .gov-assign-row__who .muted { color: var(--ink-faint); }
-.gov-principal { padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--ink-soft); }
+.gov-principal { padding: 8px 14px; border-bottom: var(--line) solid var(--rule-soft); font-size: 12.5px; color: var(--ink-soft); }
 .gov-principal:last-child { border-bottom: 0; }
 .gov-principal code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
-  color: var(--accent-text); background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
+  font-family: var(--font-mono); font-size: 12px;
+  color: var(--accent-ink); background: var(--glass); padding: 1px 5px; border-radius: 4px;
 }
 
 /* ---- the Board Room: one sitting, one decision (task 1003270) -------------
@@ -109,8 +108,8 @@
    title, the ballot sits directly under it, the idea's own words are body text,
    and the constitutional metadata is the only thing behind a click. */
 .gov-item {
-  margin: 0 0 18px; border: 1px solid var(--border); border-radius: var(--radius);
-  background: var(--surface); overflow: hidden;
+  margin: 0 0 18px; border: var(--line) solid var(--rule-soft); border-radius: var(--radius);
+  background: var(--bg-card); overflow: hidden;
 }
 .gov-item__head {
   display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
@@ -129,7 +128,7 @@
 .gov-item__cast { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
 
 /* The idea itself: open, and set as prose rather than as permission rows. */
-.gov-idea { padding: 12px 14px 2px; border-top: 1px solid var(--border); }
+.gov-idea { padding: 12px 14px 2px; border-top: var(--line) solid var(--rule-soft); }
 .gov-idea__part { margin: 0 0 12px; }
 .gov-idea__label { margin: 0 0 3px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
 .gov-idea__body {
@@ -139,14 +138,14 @@
 
 /* Secondary: the tally rides the summary (visible without a click — ADR 0175
    §9), the rules and the open ballot sit inside it. */
-.gov-item__meta { border-top: 1px solid var(--border); }
+.gov-item__meta { border-top: var(--line) solid var(--rule-soft); }
 .gov-item__summary {
   padding: 8px 14px; cursor: pointer; color: var(--ink-soft); font-size: 12px;
   list-style-position: inside;
 }
 .gov-item__summary:hover { color: var(--ink); }
-.gov-item__metabody { padding: 10px 14px 2px; background: var(--surface-2); }
-.gov-item__metabody .gov-section { margin: 0 0 12px; background: var(--surface); }
+.gov-item__metabody { padding: 10px 14px 2px; background: var(--glass); }
+.gov-item__metabody .gov-section { margin: 0 0 12px; background: var(--bg-card); }
 .gov-item__metabody .gov-empty { padding: 0 0 12px; }
 
 /* ---- the ballot controls ------------------------------------------------- */