@bongos/core 1.19.459 → 1.19.460

package/docs/module-api-changelog.md

@@ -1355,5 +1355,7 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.457 with no explicit bump. run 33566876510. (task 1002620)
   1.19.459 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.458 with no explicit bump. run 33568609735. (task 1002620)
+  1.19.460 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.459 with no explicit bump. run 33571137958. (task 1002620)
 ---------------------------------------------------------------------------
 ```

package/modules/hall-ui/public/collab-lib.js

@@ -1,5 +1,6 @@
 // modules/hall-ui/public/collab-lib.js — the Collab page's PURE helpers, exposed
-// as window.OTBCollabLib (task 1003172 / C02, goal 1000075).
+// as window.OTBCollabLib (task 1003172 / C02, goal 1000075; the row's first
+// line, the asker and the groups added by the redesign, task 1003471).
 //
 // Same split as goals-lib.js: everything here is a pure function of its
 // arguments, so the rules can be executed by a test instead of grepped out of a
@@ -52,15 +53,29 @@
 
   // Who a request is addressed to, in words. A craft request and a by-name
   // request read differently on purpose: "asked of builders" is a call anyone of
-  // that craft may take, "asked of you" is personal and should feel it.
+  // that craft may take, "asked of you" is personal and should feel it. A
+  // by-name ask that is not yours names the person when the server joined a
+  // name, and says "one person" when it did not.
   function addressedTo(req, viewerId) {
     if (req && req.needs_builder_id != null) {
-      return String(req.needs_builder_id) === String(viewerId) ? 'asked of you by name' : 'asked of one person';
+      if (String(req.needs_builder_id) === String(viewerId)) return 'asked of you by name';
+      var name = req.needs_builder_name || req.needs_builder_login;
+      return name ? 'asked of ' + name + ' by name' : 'asked of one person';
     }
     if (req && req.needs_craft) return 'asked of ' + req.needs_craft + 's';
     return 'asked';
   }
 
+  // Who is ASKING, in words — the fact a helper needs to answer. The name the
+  // server joined, else the login, else the bare id an older server sends;
+  // never nothing.
+  function askerOf(req) {
+    if (!req) return '';
+    if (req.requested_by_name) return String(req.requested_by_name);
+    if (req.requested_by_login) return String(req.requested_by_login);
+    return req.requested_by != null ? 'builder ' + req.requested_by : '';
+  }
+
   // What the request is about, if anything. Returns null rather than an empty
   // string so a caller can skip the element entirely.
   function contextOf(req) {
@@ -70,8 +85,29 @@
     return null;
   }
 
+  // The row's first line. A help request has no title field, so the ask's
+  // first sentence is the title and the rest is the sub line — both the asker's
+  // own words, nothing clipped. A first sentence too long to be a line, or an
+  // ask with no sentence break, is the whole ask.
+  var TITLE_MAX = 140;
+  function titleOf(text) {
+    var s = String(text == null ? '' : text).trim();
+    var m = /^([\s\S]*?[.?!])\s+([\s\S]+)$/.exec(s);
+    if (!m || m[1].length > TITLE_MAX) return { title: s, rest: '' };
+    return { title: m[1], rest: m[2].trim() };
+  }
+
+  // The "asked of you" list reads in runs: what is asked of you BY NAME first
+  // (a personal ask is the one you owe an answer), then one run per craft.
+  function groupOf(req) {
+    if (req && req.needs_builder_id != null) return { id: 'you', label: 'asked of you by name' };
+    if (req && req.needs_craft) return { id: req.needs_craft, label: 'asked of ' + req.needs_craft + 's' };
+    return { id: 'other', label: 'asked' };
+  }
+
   window.OTBCollabLib = {
     BANDS: BANDS, ageBand: ageBand, byAgeOldestFirst: byAgeOldestFirst,
-    addressedTo: addressedTo, contextOf: contextOf,
+    addressedTo: addressedTo, askerOf: askerOf, contextOf: contextOf,
+    titleOf: titleOf, groupOf: groupOf,
   };
 })();

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

@@ -1,36 +1,20 @@
-/* modules/hall-ui/public/collab.css — the Collab page (task 1003172 / C02).
-   Tokens only from style.css's real set: inventing one renders as nothing, which
-   is how copy-desk.css ended up with invisible fallbacks (idea 1000821). */
-
-.cb-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
-
-.cb-item {
-  border: var(--line) solid var(--rule);
-  border-left: 3px solid var(--rule);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card);
-  padding: 10px 12px;
-}
-
-.cb-item__stuck { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
-.cb-item__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
-.cb-item__actions { margin: 8px 0 0; display: flex; gap: 8px; }
-.cb-who { color: var(--ink-soft); }
-.cb-ctx { color: var(--accent); text-decoration: none; }
-.cb-ctx:hover { text-decoration: underline; }
-.cb-empty { color: var(--ink-faint); font-size: 13px; margin: 10px 0 0; }
+/* modules/hall-ui/public/collab.css — the Collab page (task 1003172 / C02),
+   rebuilt on the hall's row archetype by task 1003471: the panel is the shell's
+   .scroll, the row is oversight.css's .ov-row, the age is a .fact-pill, the
+   context a .fact-chip. This sheet holds only what Collab has and no other
+   page does — the colour of each age band.
+   Tokens only from style.css's real set: inventing one renders as nothing,
+   which is how copy-desk.css once ended up with invisible fallbacks (idea
+   1000821). */
 
 /* THE AGEING SIGNAL. The criterion asks that a request nobody takes be visibly
-   aging rather than silently dead — so age changes how a row LOOKS, not only
-   where it sits. The left border carries it (a band of colour that reads at a
-   glance down a list) and the chip says it in words, because colour alone is not
-   a message and not everyone sees it. */
-.cb-age { color: var(--ink-faint); font-size: 11.5px; letter-spacing: 0.01em; }
-.cb-item--fresh   { border-left-color: var(--rule); }
-.cb-item--waiting { border-left-color: var(--ink-faint); }
-.cb-item--aging   { border-left-color: var(--warn); }
-.cb-item--stale   { border-left-color: var(--danger); }
-.cb-item--aging .cb-age { color: var(--warn); }
-.cb-item--stale .cb-age { color: var(--danger); font-weight: 600; }
-
-.btn--quiet { background: transparent; color: var(--ink-soft); border-color: var(--rule); }
+   aging rather than silently dead — so the age is a state pill in the row's
+   right column: read down the list and the column says it in words AND in the
+   verification colours, because colour alone is not a message and not everyone
+   sees it. Four bands, four treatments: faint, soft, warn, danger. The 3px
+   coloured band the first cut painted down the row's left edge is gone — this
+   world marks state with a pill, never with a bar. */
+.cb-age--fresh   { color: var(--ink-faint); }
+.cb-age--waiting { color: var(--ink-soft); }
+.cb-age--aging   { color: var(--warn); }
+.cb-age--stale   { color: var(--danger); font-weight: 600; }

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

@@ -9,6 +9,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/collab.css">
 </head>
 <body data-page="collab" data-page-title="Collab">
@@ -19,11 +20,9 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <!-- task 1003307: the board page head. Collab shipped with NO <h1> at all
-           (one-header-main-h1 measured 0 on every render), so the re-skin
-           carries the structural fix rather than porting the hole. The heading
-           is the LABEL voice, not a display line: on a working surface the
-           page's own name is the least interesting thing on it. -->
+      <!-- The board page head: the page's own name in the LABEL voice, not a
+           display line — on a working surface it is the least interesting
+           thing on it. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">Collab</h1>
         <p class="page-head__sub" id="cb-sub">Loading…</p>
@@ -32,28 +31,29 @@
       <main id="hall-main">
         <!-- ASKED OF YOU comes first: it is the half where someone is waiting on a
              human. Your own asks are below, because they are a status check, not a
-             call to act. -->
+             call to act. The rows are the hall's row archetype (oversight.css);
+             collab.js fills the mount with one run per addressee. -->
         <section class="scroll" aria-labelledby="cb-for-me-h">
           <h2 class="scroll__h" id="cb-for-me-h">Asked of you</h2>
-          <p class="scroll__note" id="cb-for-me-note">
+          <p class="scroll__lede" id="cb-for-me-note">
             Requests addressed to your craft, or to you by name. Answering is optional
             and declining costs nothing — nobody is assigned by being asked.
           </p>
-          <ul class="cb-list" id="cb-for-me"></ul>
-          <p class="cb-empty" id="cb-for-me-empty" hidden>
-            Nothing is waiting on you. Requests reach you by your craft — set yours in
-            <a href="/builders/settings">Settings</a> if this stays empty.
-          </p>
+          <div id="cb-for-me"></div>
+          <div class="empty-state" id="cb-for-me-empty" hidden>
+            <p>Nothing is waiting on you. Requests reach you by your craft — set yours in
+            <a href="/builders/settings">Settings</a> if this stays empty.</p>
+          </div>
         </section>
 
         <section class="scroll" aria-labelledby="cb-mine-h">
           <h2 class="scroll__h" id="cb-mine-h">Your asks</h2>
-          <p class="scroll__note">
+          <p class="scroll__lede">
             Only you can settle your own request — mark it answered when someone
             helped, or withdraw it when you no longer need it.
           </p>
-          <ul class="cb-list" id="cb-mine"></ul>
-          <p class="cb-empty" id="cb-mine-empty" hidden>You have no open asks.</p>
+          <ul class="ov-rows" id="cb-mine"></ul>
+          <div class="empty-state" id="cb-mine-empty" hidden><p>You have no open asks.</p></div>
         </section>
       </main>
     </div>
@@ -65,7 +65,7 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
-<script src="/builders/collab-lib.js?v=2026-08-24-c02"></script>
-<script src="/builders/collab.js?v=2026-08-24-c02"></script>
+<script src="/builders/collab-lib.js?v=2026-09-01-redesign"></script>
+<script src="/builders/collab.js?v=2026-09-01-redesign"></script>
 </body>
 </html>

package/modules/hall-ui/public/collab.js

@@ -1,15 +1,19 @@
 // modules/hall-ui/public/collab.js — the Collab page (/builders/collab).
-// Task 1003172 / C02 of goal 1000075, criterion collab-page-matches-my-craft.
+// Task 1003172 / C02 of goal 1000075, criterion collab-page-matches-my-craft;
+// rebuilt on the hall's row archetype by task 1003471 (goal 1000081).
 //
-// The hall surface for C01's help requests. Two sections, in this order on
+// The hall surface for C01's help requests. Two panels, in this order on
 // purpose: what is ASKED OF YOU first, because someone is waiting on a human
 // answer, then YOUR OWN ASKS, which are a status check rather than a call to act.
+// "Asked of you" reads in runs — by name first, then each craft — because a
+// personal ask is the one you owe an answer.
 //
-// THE PART THAT IS EASY TO SKIP, and the criterion names it explicitly: a request
-// nobody takes must be VISIBLY AGING, not silently dead. Sorting the oldest to the
-// top does not satisfy that — the oldest then looks exactly like the newest, only
-// lower. So every row carries an age BAND with its own label and styling, and the
-// rules for it live in collab-lib.js where a test can execute them.
+// A row is the family's .ov-row: the ask's first sentence as the title and the
+// rest as the sub (collab-lib titleOf), WHO IS ASKING as a fact with a door to
+// their profile, the task or goal as a chip, and the AGE as a state pill in the
+// right column, so a glance down the list reads the ages in words and in the
+// verification colours. The band rules live in collab-lib.js where a test can
+// execute them.
 //
 // MATCHING IS THE SERVER'S JOB, not this file's. GET /help-requests/for-me derives
 // the viewer's crafts from their own profile; sending a craft from here would be
@@ -31,15 +35,38 @@
 
   let settling = false;
 
+  // The age pill: the band's words, in the band's colour (collab.css .cb-age--*).
   function ageChip(req, nowMs) {
     const band = L.ageBand(req.created_at, nowMs);
-    return `<span class="cb-age cb-age--${band.id}" title="Asked ${escapeHtml(String(req.created_at || ''))}">${escapeHtml(band.label)}</span>`;
+    return `<span class="fact-pill cb-age cb-age--${band.id}" title="Asked ${escapeHtml(String(req.created_at || ''))}">${escapeHtml(band.label)}</span>`;
+  }
+
+  function whenLine(iso) {
+    const d = iso ? new Date(iso) : null;
+    if (!d || Number.isNaN(d.getTime())) return '';
+    return `<span class="ov-row__when">${escapeHtml(d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' }))}</span>`;
+  }
+
+  function titleHtml(req) {
+    const t = L.titleOf(req.what_is_stuck);
+    return `<span class="ov-row__title">${escapeHtml(t.title)}</span>`
+      + (t.rest ? `<p class="ov-row__sub">${escapeHtml(t.rest)}</p>` : '');
   }
 
   function contextChip(req) {
     const ctx = L.contextOf(req);
     if (!ctx) return '';
-    return `<a class="cb-ctx" href="${escapeHtml(ctx.href)}">${escapeHtml(ctx.kind)} #${escapeHtml(String(ctx.id))}</a>`;
+    return `<a class="fact-chip" href="${escapeHtml(ctx.href)}">${escapeHtml(ctx.kind)} #${escapeHtml(String(ctx.id))}</a>`;
+  }
+
+  // Who to answer: the asker's name, as a door to their profile.
+  function askerFact(req) {
+    const name = L.askerOf(req);
+    if (!name) return '';
+    const who = req.requested_by != null
+      ? `<a href="/builders/profile?id=${escapeHtml(String(req.requested_by))}">${escapeHtml(name)}</a>`
+      : escapeHtml(name);
+    return `<span class="ov-fact">asked by ${who}</span>`;
   }
 
   // A row for the "asked of you" list. There is deliberately NO "claim this"
@@ -47,58 +74,67 @@
   // be reimplementing the Agora, which this goal explicitly forbids (C06 owns the
   // chat mirror). What the page owes a helper is the request, its age, its
   // context, and who to answer.
-  function forMeRow(req, viewerId, nowMs) {
-    const who = L.addressedTo(req, viewerId);
-    return `<li class="cb-item cb-item--${L.ageBand(req.created_at, nowMs).id}">
-      <p class="cb-item__stuck">${escapeHtml(req.what_is_stuck || '')}</p>
-      <p class="cb-item__meta">
-        <span class="cb-who">${escapeHtml(who)}</span>
-        ${contextChip(req)}
-        ${ageChip(req, nowMs)}
-      </p>
+  function forMeRow(req, nowMs) {
+    return `<li class="ov-row" data-id="${escapeHtml(String(req.id))}">
+      <div class="ov-row__main">${titleHtml(req)}
+        <div class="ov-row__facts">${askerFact(req)}${contextChip(req)}</div>
+      </div>
+      <div class="ov-row__right">${ageChip(req, nowMs)}${whenLine(req.created_at)}</div>
     </li>`;
   }
 
   // Your own ask, with the two settle actions. Only the asker can settle — the
   // server enforces it in the UPDATE's WHERE, this is just the affordance.
   function mineRow(req, nowMs) {
-    return `<li class="cb-item cb-item--${L.ageBand(req.created_at, nowMs).id}" data-id="${escapeHtml(String(req.id))}">
-      <p class="cb-item__stuck">${escapeHtml(req.what_is_stuck || '')}</p>
-      <p class="cb-item__meta">
-        <span class="cb-who">${escapeHtml(L.addressedTo(req, null))}</span>
-        ${contextChip(req)}
-        ${ageChip(req, nowMs)}
-      </p>
-      <p class="cb-item__actions">
-        <button class="btn btn--sm" data-settle="answered" data-id="${escapeHtml(String(req.id))}">Someone helped</button>
-        <button class="btn btn--sm btn--quiet" data-settle="withdrawn" data-id="${escapeHtml(String(req.id))}">Withdraw</button>
-      </p>
+    const id = escapeHtml(String(req.id));
+    return `<li class="ov-row" data-id="${id}">
+      <div class="ov-row__main">${titleHtml(req)}
+        <div class="ov-row__facts"><span class="ov-fact">${escapeHtml(L.addressedTo(req, null))}</span>${contextChip(req)}</div>
+      </div>
+      <div class="ov-row__right">${ageChip(req, nowMs)}
+        <div class="ov-row__actions">
+          <button class="btn-accent" data-settle="answered" data-id="${id}">Someone helped</button>
+          <button class="btn-ghost" data-settle="withdrawn" data-id="${id}">Withdraw</button>
+        </div>
+      </div>
     </li>`;
   }
 
-  function renderList(hostSel, emptySel, rows, html) {
+  // "Asked of you" as runs under a group head: by name first, then each craft.
+  function groupedHtml(rows, nowMs) {
+    const groups = [];
+    for (const r of rows) {
+      const g = L.groupOf(r);
+      let hit = groups.find((x) => x.id === g.id);
+      if (!hit) { hit = { id: g.id, label: g.label, rows: [] }; groups.push(hit); }
+      hit.rows.push(r);
+    }
+    groups.sort((a, b) => Number(b.id === 'you') - Number(a.id === 'you'));
+    return groups.map((g) => `<section class="ov-group">
+      <div class="ov-group__head"><span class="ov-group__name">${escapeHtml(g.label)}</span><span class="ov-group__n">${g.rows.length}</span></div>
+      <ul class="ov-rows">${g.rows.map((r) => forMeRow(r, nowMs)).join('')}</ul>
+    </section>`).join('');
+  }
+
+  function paint(hostSel, emptySel, html, n) {
     const host = $(hostSel);
     const empty = $(emptySel);
-    if (!host) return;
-    host.innerHTML = rows.map(html).join('');
-    if (empty) empty.hidden = rows.length > 0;
+    if (host) host.innerHTML = html;
+    if (empty) empty.hidden = n > 0;
   }
 
   async function load() {
     const nowMs = Date.now();
-    const [forMe, mine, me] = await Promise.all([
+    const [forMe, mine] = await Promise.all([
       api.helpRequests.getHelpRequestsForMe({}),
       api.helpRequests.getHelpRequestsMine({ query: { status: 'open' } }),
-      api.me.getMe ? api.me.getMe({}) : Promise.resolve({ ok: false }),
     ]);
 
-    const viewerId = me && me.ok && me.data && me.data.builder ? me.data.builder.id : null;
-
     const forMeRows = ((forMe.ok && forMe.data && forMe.data.help_requests) || []).slice().sort(L.byAgeOldestFirst);
     const mineRows = ((mine.ok && mine.data && mine.data.help_requests) || []).slice().sort(L.byAgeOldestFirst);
 
-    renderList('#cb-for-me', '#cb-for-me-empty', forMeRows, (r) => forMeRow(r, viewerId, nowMs));
-    renderList('#cb-mine', '#cb-mine-empty', mineRows, (r) => mineRow(r, nowMs));
+    paint('#cb-for-me', '#cb-for-me-empty', groupedHtml(forMeRows, nowMs), forMeRows.length);
+    paint('#cb-mine', '#cb-mine-empty', mineRows.map((r) => mineRow(r, nowMs)).join(''), mineRows.length);
 
     const sub = $('#cb-sub');
     if (sub) {

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

@@ -1,12 +1,12 @@
 {
-  "_": "Collab — the two-sided ask board. ASKED OF YOU comes first because it is the half where someone is waiting, and the empty state of that half is the page's most common render. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once.",
+  "_": "Collab — the two-sided ask board. ASKED OF YOU comes first because it is the half where someone is waiting, and the empty state of that half is the page's most common render. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once; the redesign (task 1003471) put four asks and two of the viewer's own in the harness so the rows can be looked at.",
   "page": "/builders/collab",
   "surface": "hall-ui",
   "stub": {
     "prefix": "/builders/"
   },
   "modeQuery": false,
-  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY and SKELETON states — which is the point: those are states the floors must hold in. Against the hall-preview harness the same states render populated. Every declared 404 below is a fixture the harness does not carry, named rather than hidden.",
+  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY state — which is the point: that is a state the floors must hold in. Against the hall-preview harness the same state renders populated: help-requests__for-me.json (four asks across the four age bands, one by name) and help-requests__mine.json (two of the viewer's own). Every declared 404 below is a feed the kit's stub does not carry, named rather than hidden.",
   "ignoreRequests": [
     "/api/(gds|bongos)/me$",
     "/api/(gds|bongos)/me/",

package/modules/hall-ui/public/copy-desk.css

@@ -1,124 +1,79 @@
-/* modules/hall-ui/public/copy-desk.css — the Copy desk tab (task 1003113 / R02
-   of goal 1000074).
+/* modules/hall-ui/public/copy-desk.css — the Copy desk page (task 1003113 /
+   R02 of goal 1000074), rebuilt on the hall's row archetype by task 1003471:
+   the counts are the shell's glass .stat-row, every list is a run of
+   oversight.css's .ov-row, the filters and the search are the kit's .filters,
+   the two dialogs are the family's .ov-modal on a native <dialog>. What is
+   left here is what only this page has: the quoted string as evidence, the
+   reason as prose, the places a duplicate lives, the dialog's scrim.
 
-   Built on the hall's existing tokens (style.css) rather than a new palette: the
-   page whose subject is "does this project speak with one voice" would be a poor
-   place to introduce a second visual one. Only the shapes this page needs are
-   defined here. */
+   px and tokens throughout, and state is COLOUR — the pill's verification
+   vocabulary — never opacity. Opacity dims the panel behind the text as well
+   as the text, which is why the first cut read muddy rather than quiet. */
 
-.cd-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-  gap: 0.75rem;
-  margin: 0.5rem 0 1rem;
-}
-.cd-stat {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  padding: 0.75rem 0.9rem;
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
-  background: var(--glass);
-}
-.cd-stat__n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
-.cd-stat__l { font-size: 0.8rem; opacity: 0.7; }
-
-.cd-note { font-size: 0.85rem; opacity: 0.75; line-height: 1.5; }
-/* 4px, not --radius-sm: a 10px radius on a 16px-tall inline span reads as a
-   pill, and the tier has no smaller token. Deliberate, not missed. */
-.cd-note code {
-  padding: 0.05rem 0.3rem;
-  border-radius: 0.25rem;
-  background: var(--glass);
-  font-size: 0.95em;
-}
-
-.cd-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0.5rem 0 1rem; }
-.cd-filters__label { font-size: 0.8rem; opacity: 0.7; }
-.cd-filters__select,
-.cd-browse__input,
-.cd-dialog__select,
-.cd-dialog__input,
-.cd-dialog__text {
-  padding: 0.4rem 0.6rem;
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
-  background: var(--bg-deep);
-  color: inherit;
-  font: inherit;
-}
-
-.cd-browse { margin: 0.5rem 0 1rem; }
-.cd-browse__label { display: block; font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.3rem; }
-.cd-browse__input { width: 100%; max-width: 34rem; }
-
-.cd-list { display: flex; flex-direction: column; gap: 0.6rem; }
-.cd-empty { padding: 1rem; opacity: 0.65; font-size: 0.9rem; }
-
-.cd-card {
-  padding: 0.85rem 1rem;
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
+/* The summary strip sits closer to its provenance line than to the next panel.
+   The inline code takes 4px, not --radius-sm: a 10px radius on a 16px-tall
+   inline span reads as a pill, and the tier has no smaller token. */
+.cd-summary { margin-bottom: 12px; }
+.cd-registry-note { margin: 0 0 var(--sp-md); max-width: 72ch; }
+.cd-registry-note code,
+.cd-search-count code {
+  padding: 1px 5px;
+  border-radius: 4px;
   background: var(--glass);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--ink-soft);
 }
-.cd-card--slim { padding: 0.6rem 0.8rem; }
-.cd-card__head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
-.cd-card__target { margin: 0.2rem 0 0.45rem; line-height: 1.5; }
-.cd-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-top: 0.5rem; }
 
 /* The quoted string is the product's own words, shown as evidence — so it is
-   visually set apart from this page's own voice. Wrapping is preserved because
-   leading and trailing space in a string is often exactly what is wrong. */
+   set apart from this page's own voice: mono, in the ink, wrapping preserved
+   because leading and trailing space in a string is often exactly what is
+   wrong. It is the row's title, so it sits at the title's line, in the mono's
+   own size and weight. */
 .cd-quote {
   quotes: '"' '"';
   font-family: var(--font-mono);
-  font-size: 0.9em;
+  font-size: 13.5px;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--ink);
   white-space: pre-wrap;
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
-.cd-where { font-size: 0.8rem; opacity: 0.6; font-family: var(--font-mono); }
-.cd-byline { font-size: 0.8rem; opacity: 0.65; margin-left: auto; }
-.cd-reason { margin: 0.3rem 0 0; line-height: 1.55; }
-.cd-snapshot-label { font-size: 0.8rem; opacity: 0.6; }
-.cd-closed { margin: 0.5rem 0 0; font-size: 0.85rem; opacity: 0.8; line-height: 1.5; }
-.cd-places { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; opacity: 0.65; font-family: var(--font-mono); }
+.cd-snapshot-label { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
 
-.cd-tag {
-  display: inline-block;
-  padding: 0.1rem 0.45rem;
-  border: var(--line) solid var(--rule);
-  border-radius: var(--radius-pill);
-  font-size: 0.72rem;
-  letter-spacing: 0.02em;
-  opacity: 0.85;
-}
-.cd-tag--kind { font-weight: 600; opacity: 1; }
-/* 'untouched' is the only state that is WORK, so it is the only one that carries
-   colour — a queue where everything is highlighted highlights nothing. */
-.cd-tag--untouched { border-color: currentColor; opacity: 1; }
-.cd-tag--flagged,
-.cd-tag--settled,
-.cd-tag--moved { opacity: 0.6; }
-.cd-tag--gone { opacity: 0.75; font-style: italic; }
+/* The reason is the judgement the artist reads, so it takes the body ink at
+   body size rather than the sub line's soft ink, and the detail-lines' 72ch
+   rather than the clause measure: a reason is a paragraph. */
+.cd-reason { font-size: 14px; color: var(--ink); max-width: 72ch; }
+.cd-closed { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); max-width: 72ch; }
+.cd-closed b { color: var(--ink); font-weight: 500; }
 
-.cd-dialog {
-  width: min(34rem, 92vw);
-  padding: 1.25rem;
-  border: var(--line) solid var(--rule);
-  border-radius: var(--radius);
-  background: var(--bg-card);
-  color: inherit;
+/* Where a duplicate lives: one mono line per place and no hairlines — seven
+   near-identical file:line lines ruled apart read as a table nobody laid out. */
+.cd-places {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--ink-faint);
 }
-/* The one literal this sheet keeps. Pure black with alpha used as a SCRIM is
-   the single exception the Fifteen Rule names, and a backdrop cannot take a
-   ground token: it has to darken whatever is behind it in either mode. */
+.cd-places li { overflow-wrap: anywhere; }
+
+/* The search field takes the room a phrase needs. */
+.cd-find .filter { flex: 1 1 280px; max-width: 520px; }
+.cd-find .filter input[type="search"] { width: 100%; }
+.cd-search-count { margin: 0 0 14px; }
+
+/* The two dialogs are the family modal on a native <dialog>: bg-card, one rule
+   hairline, no shadow. The backdrop is the one literal this sheet keeps — pure
+   black with alpha as a SCRIM is the exception the Fifteen Rule names, and a
+   backdrop cannot take a ground token: it has to darken whatever is behind it
+   in either mode. */
+.cd-dialog { width: min(480px, calc(100vw - 32px)); color: var(--ink); }
 .cd-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
-.cd-dialog__h { margin: 0 0 0.5rem; font-size: 1.1rem; }
-.cd-dialog__target { margin: 0 0 0.9rem; line-height: 1.5; }
-.cd-dialog__label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.85rem; font-weight: 600; }
-.cd-dialog__hint { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.65; line-height: 1.45; margin-top: 0.1rem; }
-.cd-dialog__select, .cd-dialog__input, .cd-dialog__text { width: 100%; }
-.cd-dialog__text { resize: vertical; line-height: 1.5; }
-.cd-dialog__err { min-height: 1.2rem; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--danger); line-height: 1.45; }
-.cd-dialog__actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.9rem; }
+.cd-dialog .ov-form { margin: 14px 0 0; }
+.cd-dialog textarea { resize: vertical; line-height: 1.5; }
+.ov-modal .cd-dialog__err { min-height: 18px; margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--danger); }