@bongos/core 1.18.3 → 1.18.19

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

@@ -0,0 +1,302 @@
+// palette.js — the hall's jump palette (task 2178). Ctrl/Cmd-K, or the top-bar
+// slot shell.js renders inert until this file loads.
+//
+// Dependency-free like shell.js: it runs on pages that load neither dom-utils.js
+// nor hall-kit.js, so it defines its own helpers and reads the DOM shell.js has
+// already drawn. OTBKit owns pagers/filters/tabs/rails — a modal command palette
+// is none of those, so it is built here rather than bent out of a kit primitive.
+//
+// Progressive enhancement is the contract: a page that does not load palette.js
+// keeps a hidden slot and no key handler, and nothing in shell.js calls in here.
+//
+// The index is CLIENT-SIDE ONLY (no new server surface, task 2178 scope):
+//   1. Pages — read live from the sidebar shell.js rendered, so rank + module
+//      gating come for free and can never drift from the nav. A hidden nav item
+//      is a hidden destination. (Cosmetic only; the server still gates each page.)
+//   2. Sections — the sub-destinations of the three pages that have them. These
+//      cannot be read from another page's DOM, so they are declared below and
+//      held to the real ids by tests/hall_palette.mjs.
+//   3. Records — id syntax: `1234`, `g 12`, `b 7`, `i 42`.
+// Full-text search over tasks/docs is phase 2 — it needs a server surface.
+(function () {
+  'use strict';
+
+  var PALETTE_ID = 'jump-palette';
+  var MAX_RESULTS = 40;
+
+  // Sub-destinations, grouped by the nav item that owns them. `gate` names the
+  // element whose visibility decides whether the group is offered — the nav item
+  // itself for pages, the profile chip for Settings (which is not a nav item).
+  // Anchors must stay in step with their source of truth; the test asserts it:
+  //   standing → builders.js STANDING_GROUPS (+ shell.js VIEW_ALIASES)
+  //   work     → work.js makeTabs ids
+  //   settings → settings.js RAIL_GROUPS
+  var SECTIONS = [
+    { parent: 'Standing', gate: 'nav-standing', items: [
+      { label: 'Work', href: '/#standing-work' },
+      { label: 'Karma', href: '/#standing-karma' },
+      { label: 'Progress', href: '/#standing-progress' },
+      { label: 'Achievements', href: '/#standing-achievements' },
+    ] },
+    { parent: 'Tasks', gate: 'nav-work', items: [
+      { label: 'Ready', href: '/work#ready' },
+      { label: 'In Progress', href: '/work#in-progress' },
+      { label: 'Backlog', href: '/work#backlog' },
+      { label: 'Completed', href: '/work#completed' },
+    ] },
+    { parent: 'Settings', gate: 'shell-user', items: [
+      { label: 'Account', href: '/settings#account' },
+      { label: 'Access', href: '/settings#access' },
+      // settings.js builds this panel only when the dev-box module is on, so the
+      // jump must carry the same condition or it lands on a panel that isn't there.
+      { label: 'Dev box', href: '/settings#devbox', module: 'dev-box' },
+      { label: 'Extensions', href: '/settings#extensions' },
+      { label: 'Preferences', href: '/settings#preferences' },
+      { label: 'Sound', href: '/settings#sound' },
+    ] },
+  ];
+
+  // id syntax → destination. `overlay: true` marks an overlay hash: those resolve
+  // in place when the page carries task-detail.js, and otherwise route via the index.
+  var SYNTAX = [
+    { re: /^(\d+)$/, hint: 'task', href: function (n) { return '/task/' + n; } },
+    { re: /^g\s*(\d+)$/i, hint: 'goal', href: function (n) { return '/goals#/goal/' + n; } },
+    { re: /^b\s*(\d+)$/i, hint: 'blocker', href: function (n) { return '#/blocker/' + n; }, overlay: true },
+    { re: /^i\s*(\d+)$/i, hint: 'idea', href: function (n) { return '#/idea/' + n; }, overlay: true },
+  ];
+
+  var isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || '');
+  var root = null;      // the overlay element, built on first open
+  var input = null;
+  var listEl = null;
+  var results = [];
+  var cursor = 0;
+  var lastFocus = null;
+
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+  function visible(id) {
+    var el = document.getElementById(id);
+    return !!(el && !el.hidden);
+  }
+  // Same contract as shell.js moduleOn: an unknown key is treated as ON, so a
+  // core instance that publishes no module map keeps every destination.
+  function moduleOn(name) {
+    var m = window.__MODULES__;
+    if (!m || !m.enabled || !(name in m.enabled)) return true;
+    return m.enabled[name] === true;
+  }
+
+  // Pages, straight from the rendered sidebar. Skips the external API-docs link's
+  // target rewrite by reading the href attribute as authored.
+  //
+  // Re-read per keystroke rather than cached at open(): on a non-index page
+  // shell.js settles gating ASYNCHRONOUSLY (its /me probe), so a cache taken when
+  // the palette opened could offer pages the builder cannot see, or hide ones they
+  // can. The nav is ~18 nodes — correctness is worth the query.
+  function pageEntries() {
+    var out = [];
+    document.querySelectorAll('#app-sidebar .nav-item').forEach(function (a) {
+      if (a.hidden) return;
+      var label = (a.querySelector('.nav-item__label') || {}).textContent || '';
+      if (!label) return;
+      out.push({
+        label: label.trim(),
+        group: 'Pages',
+        href: a.getAttribute('href') || '/',
+        external: a.target === '_blank',
+      });
+    });
+    return out;
+  }
+
+  function sectionEntries() {
+    var out = [];
+    SECTIONS.forEach(function (s) {
+      if (!visible(s.gate)) return;
+      s.items.forEach(function (it) {
+        if (it.module && !moduleOn(it.module)) return;
+        out.push({ label: it.label, group: s.parent, href: it.href });
+      });
+    });
+    return out;
+  }
+
+  // Subsequence match — "stw" finds "Standing › Work". Returns a score (lower is
+  // better) or -1. A prefix hit on the label outranks a scattered match.
+  function score(entry, q) {
+    if (!q) return 0;
+    var hay = (entry.group + ' ' + entry.label).toLowerCase();
+    var label = entry.label.toLowerCase();
+    if (label.indexOf(q) === 0) return 0;
+    if (label.indexOf(q) > 0) return 1;
+    if (hay.indexOf(q) >= 0) return 2;
+    var i = 0;
+    for (var c = 0; c < hay.length && i < q.length; c++) if (hay[c] === q[i]) i++;
+    return i === q.length ? 3 : -1;
+  }
+
+  function recordEntry(q) {
+    for (var i = 0; i < SYNTAX.length; i++) {
+      var m = q.match(SYNTAX[i].re);
+      if (!m) continue;
+      var n = m[1];
+      return {
+        label: SYNTAX[i].hint.charAt(0).toUpperCase() + SYNTAX[i].hint.slice(1) + ' ' + n,
+        group: 'Go to',
+        href: SYNTAX[i].href(n),
+        overlay: !!SYNTAX[i].overlay,
+      };
+    }
+    return null;
+  }
+
+  function compute(q) {
+    var query = String(q || '').trim().toLowerCase();
+    var rec = recordEntry(query);
+    var pool = pageEntries().concat(sectionEntries());
+    var scored = [];
+    pool.forEach(function (e) {
+      var s = score(e, query);
+      if (s >= 0) scored.push({ e: e, s: s });
+    });
+    scored.sort(function (a, b) { return a.s - b.s; });
+    var list = scored.slice(0, MAX_RESULTS).map(function (x) { return x.e; });
+    return rec ? [rec].concat(list) : list;
+  }
+
+  function render() {
+    if (!results.length) {
+      listEl.innerHTML = '<li class="palette__empty" role="presentation">No match. Try a page name, or an id like <kbd>1234</kbd>, <kbd>g 12</kbd>, <kbd>b 7</kbd>, <kbd>i 42</kbd>.</li>';
+      return;
+    }
+    listEl.innerHTML = results.map(function (e, i) {
+      return '<li class="palette__item' + (i === cursor ? ' palette__item--active' : '') + '"' +
+        ' role="option" id="palette-opt-' + i + '" aria-selected="' + (i === cursor ? 'true' : 'false') + '" data-i="' + i + '">' +
+        '<span class="palette__group">' + esc(e.group) + '</span>' +
+        '<span class="palette__label">' + esc(e.label) + '</span>' +
+        (e.external ? '<span class="palette__hint">opens a new tab</span>' : '') +
+        '</li>';
+    }).join('');
+    var active = listEl.querySelector('.palette__item--active');
+    if (active && active.scrollIntoView) active.scrollIntoView({ block: 'nearest' });
+    input.setAttribute('aria-activedescendant', results.length ? 'palette-opt-' + cursor : '');
+  }
+
+  function move(delta) {
+    if (!results.length) return;
+    cursor = (cursor + delta + results.length) % results.length;
+    render();
+  }
+
+  function choose() {
+    var e = results[cursor];
+    if (!e) return;
+    close();
+    if (e.external) { window.open(e.href, '_blank', 'noopener'); return; }
+    // An overlay hash resolves in place where task-detail.js is loaded; elsewhere
+    // it has no listener, so route through the index which always carries it.
+    if (e.overlay) {
+      if (window.OTBTaskDetail) window.location.hash = e.href;
+      else window.location.assign('/' + e.href);
+      return;
+    }
+    window.location.assign(e.href);
+  }
+
+  function build() {
+    root = document.createElement('div');
+    root.className = 'palette';
+    root.id = PALETTE_ID;
+    root.hidden = true;
+    root.innerHTML =
+      '<div class="palette__scrim" data-close="1"></div>' +
+      '<div class="palette__panel" role="dialog" aria-modal="true" aria-label="Jump to">' +
+        '<input class="palette__input" id="palette-input" type="text" autocomplete="off" spellcheck="false"' +
+          ' role="combobox" aria-expanded="true" aria-controls="palette-list"' +
+          ' placeholder="Jump to a page, section, or id…">' +
+        '<ul class="palette__list" id="palette-list" role="listbox" aria-label="Results"></ul>' +
+      '</div>';
+    document.body.appendChild(root);
+    input = root.querySelector('#palette-input');
+    listEl = root.querySelector('#palette-list');
+
+    input.addEventListener('input', function () {
+      results = compute(input.value);
+      cursor = 0;
+      render();
+    });
+    listEl.addEventListener('click', function (ev) {
+      var li = ev.target.closest ? ev.target.closest('[data-i]') : null;
+      if (!li) return;
+      cursor = Number(li.dataset.i) || 0;
+      choose();
+    });
+    root.addEventListener('mousedown', function (ev) {
+      if (ev.target && ev.target.dataset && ev.target.dataset.close) close();
+    });
+    // Focus trap: the panel holds exactly one focusable control, so keeping focus
+    // on the input is the whole trap.
+    root.addEventListener('keydown', function (ev) {
+      if (ev.key === 'Tab') { ev.preventDefault(); input.focus(); }
+    });
+  }
+
+  function isOpen() { return !!(root && !root.hidden); }
+
+  function open() {
+    if (!root) build();
+    if (isOpen()) return;
+    lastFocus = document.activeElement;
+    root.hidden = false;
+    document.documentElement.classList.add('palette-open');
+    input.value = '';
+    results = compute('');
+    cursor = 0;
+    render();
+    input.focus();
+  }
+
+  function close() {
+    if (!isOpen()) return;
+    root.hidden = true;
+    document.documentElement.classList.remove('palette-open');
+    if (lastFocus && lastFocus.focus) lastFocus.focus();
+    lastFocus = null;
+  }
+
+  // Don't steal the key from a field the builder is typing in.
+  function inTextField(el) {
+    if (!el) return false;
+    var tag = (el.tagName || '').toLowerCase();
+    return tag === 'input' || tag === 'textarea' || tag === 'select' || el.isContentEditable;
+  }
+
+  document.addEventListener('keydown', function (ev) {
+    if ((ev.ctrlKey || ev.metaKey) && (ev.key === 'k' || ev.key === 'K')) {
+      if (inTextField(ev.target) && !isOpen()) return;
+      ev.preventDefault();
+      if (isOpen()) close(); else open();
+      return;
+    }
+    if (!isOpen()) return;
+    if (ev.key === 'Escape') { ev.preventDefault(); close(); return; }
+    if (ev.key === 'ArrowDown') { ev.preventDefault(); move(1); return; }
+    if (ev.key === 'ArrowUp') { ev.preventDefault(); move(-1); return; }
+    if (ev.key === 'Enter') { ev.preventDefault(); choose(); }
+  });
+
+  // Reveal the slot shell.js left inert, and label it for this platform.
+  var slot = document.getElementById('topbar-jump');
+  if (slot) {
+    slot.hidden = false;
+    slot.addEventListener('click', open);
+    var kbd = document.getElementById('topbar-jump-kbd');
+    if (kbd) kbd.textContent = isMac ? '⌘K' : 'Ctrl K';
+  }
+
+  window.OTBPalette = { open: open, close: close, isOpen: isOpen, compute: compute };
+})();

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

@@ -401,4 +401,17 @@ body.primer-body { background: var(--bg); }
   .primer-article h2 {
     font-size: 1.25rem;
   }
+  /* A markdown table's column count is fixed by the source, so its min-content
+     width outruns a phone (measured: 79px of page overflow on /drachmae). Give
+     the table its own horizontal scroller instead of letting it drag the page
+     sideways — the .section-rail / .kit-tabs strips already set that precedent.
+     `display: block` is what makes the table box a scrollport; the rows still
+     lay out through the anonymous table box inside it. Nothing here is sticky,
+     so this costs no header behaviour. */
+  .primer-article table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+  }
 }

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

@@ -78,6 +78,8 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
+<script src="/builders/palette.js" defer></script>
 <script src="/builders/primer.js?v=2026-05-29-primer-1" defer></script>
 <script src="/builders/diagram-viewer.js?v=2026-06-14-diagviewer-1" defer></script>
 <script src="/builders/copy-on-click.js?v=2026-06-01-copy-1" defer></script>

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

@@ -78,6 +78,8 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
+<script src="/builders/palette.js" defer></script>
 <!-- shared frontend toolkit (window.OTB) — loaded before profile.js, which pulls from it. -->
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
 <script src="/builders/profile.js?v=2026-06-14-domutils"></script>

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

@@ -62,6 +62,8 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
+<script src="/builders/palette.js" defer></script>
 <!-- shared frontend toolkit (window.OTB) — loaded before ranks.js, which pulls from it. -->
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
 <script src="/builders/ranks.js?v=2026-06-14-domutils"></script>

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

@@ -0,0 +1,179 @@
+/* roadmap.css — Page-local styles for the Roadmap page.
+   Lifted verbatim out of the page's inline <style> block (task 1002176);
+   the ?v= cache-bust is stamped automatically from this file's content hash
+   at boot (src/asset-version.js). */
+
+/* Roadmap — the "Command deck" (task 1002426, owner-approved redesign from the
+   mockup review). Replaces the old flat stack of version progress bars +
+   nested goal/criteria disclosures with: a program-level hero, then versions
+   GROUPED BY their real status (planning=Staged · building=In flight ·
+   frozen=Parked · shipped=Shipped), and a SUMMARIZED goal layer per version
+   (status bar + only the goals active right now, full list on the Goals page).
+
+   Every class is `rm-`prefixed so nothing collides with the shared hall
+   stylesheet, and only THREE derived helper tokens are added here — the pack
+   tokens + light/dark theming stay owned by style.css + themeMarkup (the
+   theming contract). The helpers derive via color-mix on pack tokens, so they
+   re-derive automatically when the theme flips. */
+:root {
+  --rm-plan:  color-mix(in srgb, var(--ink) 16%, var(--bg));
+  --rm-terra-weak: color-mix(in srgb, var(--terracotta) 13%, var(--bg-card));
+  --rm-shadow-soft: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
+}
+
+.rm-num { font-variant-numeric: tabular-nums; }
+
+/* ---- shared atoms ---- */
+.rm-chip { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600;
+  letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap; }
+.rm-chip .rm-sq { width:7px; height:7px; border-radius:2px; }
+.rm-chip--product  { background:var(--accent-weak); color:var(--accent-text); }
+.rm-chip--product  .rm-sq { background:var(--accent); }
+.rm-chip--internal { background:var(--info-weak); color:color-mix(in srgb, var(--sea) 78%, var(--ink)); }
+.rm-chip--internal .rm-sq { background:var(--sea); }
+.rm-chip--dogfood  { background:var(--rm-terra-weak); color:color-mix(in srgb, var(--terracotta) 82%, var(--ink)); }
+.rm-chip--dogfood  .rm-sq { background:var(--terracotta); }
+
+.rm-phase { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
+  padding:3px 9px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
+.rm-phase .rm-pd { width:6px; height:6px; border-radius:50%; }
+.rm-phase--building { background:var(--ok-weak); color:var(--ok); }
+.rm-phase--building .rm-pd { background:var(--ok); }
+.rm-phase--planning { background:var(--accent-weak); color:var(--accent-text);
+  border-color:color-mix(in srgb, var(--accent) 22%, var(--border)); }
+.rm-phase--planning .rm-pd { background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent); }
+.rm-phase--frozen { background:var(--surface-2); color:var(--ink-soft); border-color:var(--border); }
+.rm-phase--frozen .rm-pd { background:var(--ink-faint); }
+
+/* lifecycle segmented bar (shipped / confirmed / completed / remaining) */
+.rm-lbar { display:flex; height:9px; border-radius:999px; overflow:hidden;
+  background:var(--rule-soft); border:1px solid var(--border); }
+.rm-lbar__s { height:100%; }
+.rm-lbar__s--sh { background:var(--ok); }
+.rm-lbar__s--co { background:var(--info); }
+.rm-lbar__s--cm { background:var(--warn); opacity:.62; }
+
+/* progress ring (conic-gradient — no SVG path authoring) */
+.rm-ring { --p:0; --rc:var(--accent); position:relative; flex:none; width:60px; height:60px;
+  border-radius:50%; display:grid; place-items:center;
+  background:conic-gradient(var(--rc) calc(var(--p)*3.6deg), var(--rule-soft) 0); }
+.rm-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--surface); }
+.rm-ring b { position:relative; z-index:1; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
+.rm-ring b i { font-style:normal; font-size:9.5px; font-weight:600; color:var(--ink-faint); }
+
+/* goal-status bar (segmented by goal COUNT: achieved / in progress / not started) */
+.rm-gbar { display:flex; height:8px; border-radius:999px; overflow:hidden;
+  background:var(--rule-soft); border:1px solid var(--border); }
+.rm-gbar__s { height:100%; }
+.rm-gbar__s--ach  { background:var(--ok); }
+.rm-gbar__s--prog { background:var(--accent); }
+.rm-gbar__s--plan { background:var(--rm-plan); }
+
+/* ---- program hero ---- */
+.rm-hero { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--bg-card)), var(--bg-card) 62%);
+  border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-bottom:22px; box-shadow:var(--rm-shadow-soft); }
+.rm-hero__top { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
+.rm-big { display:flex; align-items:baseline; gap:3px; }
+.rm-big .n { font-size:52px; font-weight:700; line-height:.95; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
+.rm-big .u { font-size:18px; font-weight:600; color:var(--ink-faint); }
+.rm-lab { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-top:7px; max-width:16ch; }
+.rm-hbar { height:15px; }
+.rm-stats { display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:14px; }
+.rm-stat { display:flex; flex-direction:column; gap:1px; }
+.rm-stat .v { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
+.rm-stat .k { font-size:11px; color:var(--ink-faint); font-weight:500; }
+.rm-stat .v.sh { color:var(--ok); } .rm-stat .v.co { color:var(--info); } .rm-stat .v.cm { color:var(--warn); }
+.rm-hgoals { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; padding-top:15px; border-top:1px solid var(--border); }
+.rm-hgoals .glab { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
+.rm-hgoals .rm-gbar { width:200px; max-width:44vw; }
+.rm-hgoals .gleg { font-size:12.5px; color:var(--ink-soft); }
+.rm-hgoals .gleg b { color:var(--ink); font-variant-numeric:tabular-nums; }
+
+/* ---- section rhythm ---- */
+.rm-sec { margin-top:26px; }
+.rm-sec__h { display:flex; align-items:center; gap:10px; margin:0 2px 13px; }
+.rm-sec__dot { width:8px; height:8px; border-radius:50%; }
+.rm-sec__dot--flight  { background:var(--ok); }
+.rm-sec__dot--staged  { background:var(--accent); }
+.rm-sec__dot--parked  { background:var(--ink-faint); }
+.rm-sec__dot--shipped { background:var(--sea); }
+.rm-sec__t { font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
+.rm-sec__n { font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
+  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:1px 8px; }
+.rm-sec__rule { flex:1; height:1px; background:var(--border); }
+
+/* ---- version cards ---- */
+.rm-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
+.rm-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:17px; box-shadow:var(--rm-shadow-soft); }
+.rm-card--feat { grid-column:1 / -1; }
+.rm-card--parked { background:var(--surface-2); }
+.rm-card--staged { border-style:dashed; background:color-mix(in srgb, var(--accent) 3%, var(--surface)); }
+.rm-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+.rm-name { font-size:16px; font-weight:700; letter-spacing:-.01em; margin:9px 0 0; }
+.rm-id { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
+.rm-desc { font-size:12.5px; color:var(--ink-soft); margin:7px 0 0; }
+.rm-desc--clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+.rm-cardprog { margin-top:14px; }
+.rm-count { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
+.rm-count b { color:var(--ink); font-variant-numeric:tabular-nums; }
+.rm-featgrid { display:grid; grid-template-columns:1.05fr 1fr; gap:22px; align-items:start; }
+.rm-featgrid__l { min-width:0; }
+.rm-feat-top { display:flex; align-items:flex-start; gap:16px; }
+.rm-feat-top .rt { flex:1; min-width:0; }
+
+/* ---- goals block ---- */
+.rm-goals { min-width:0; }
+.rm-goals__frame { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; }
+.rm-goals__h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
+.rm-goals__h .t { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
+.rm-goals__h .n { font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
+.rm-gdist { display:flex; gap:12px; flex-wrap:wrap; margin-top:9px; font-size:12px; color:var(--ink-soft); }
+.rm-gdist span { display:inline-flex; align-items:center; gap:6px; }
+.rm-gdist i { width:9px; height:9px; border-radius:2px; }
+.rm-gdist i.rm-ach { background:var(--ok); } .rm-gdist i.rm-prog { background:var(--accent); } .rm-gdist i.rm-plan { background:var(--rm-plan); }
+.rm-gdist b { color:var(--ink); font-variant-numeric:tabular-nums; }
+.rm-ginp { margin-top:14px; }
+.rm-ginp__cap { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:2px; }
+.rm-goal { display:flex; align-items:center; gap:10px; padding:7px 0; }
+.rm-goal + .rm-goal { border-top:1px solid var(--rule-soft); }
+.rm-goal__dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); }
+.rm-goal__t { flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--ink); text-decoration:none;
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+a.rm-goal__t:hover { color:var(--accent-text); text-decoration:underline; }
+.rm-goal__ready { flex:none; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
+  color:var(--ok); background:var(--ok-weak); padding:2px 6px; border-radius:999px; }
+.rm-goal__meter { flex:none; width:70px; height:5px; border-radius:999px; background:var(--rule-soft); overflow:hidden; }
+.rm-goal__meter i { display:block; height:100%; background:var(--accent); }
+.rm-goal__n { flex:none; font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:28px; text-align:right; }
+.rm-goal__seed { flex:none; font-size:11px; color:var(--ink-faint); }
+.rm-gmore { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--accent-text); text-decoration:none; }
+.rm-gmore:hover { text-decoration:underline; }
+.rm-gmore svg { width:13px; height:13px; }
+.rm-gnone { font-size:12.5px; color:var(--ink-faint); margin:2px 0 0; }
+
+/* parked note + staged state */
+.rm-parknote { display:flex; gap:9px; font-size:12.5px; color:var(--ink-soft); background:var(--surface);
+  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-top:13px; }
+.rm-parknote svg { flex:none; width:15px; height:15px; margin-top:1px; color:var(--ink-faint); }
+.rm-staged-state { display:flex; align-items:center; gap:11px; margin-top:15px; padding:12px 14px;
+  border:1px dashed var(--border-strong); border-radius:var(--radius-sm); }
+.rm-staged-state svg { flex:none; width:18px; height:18px; color:var(--accent); }
+.rm-staged-state .s1 { font-size:13px; font-weight:600; color:var(--ink); }
+.rm-staged-state .s2 { font-size:12px; color:var(--ink-soft); margin-top:1px; }
+.rm-staged-state .s2 b { color:var(--ink); font-variant-numeric:tabular-nums; }
+
+/* shipped strip */
+.rm-shipstrip { display:flex; flex-wrap:wrap; gap:10px; }
+.rm-shippill { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--border);
+  border-radius:999px; padding:8px 15px 8px 10px; box-shadow:var(--rm-shadow-soft); text-decoration:none; }
+.rm-shippill:hover { border-color:var(--border-strong); }
+.rm-shippill .ok { width:20px; height:20px; border-radius:50%; background:var(--ok-weak); color:var(--ok);
+  display:grid; place-items:center; font-size:11px; }
+.rm-shippill .nm { font-size:12.5px; font-weight:700; color:var(--ink); }
+.rm-shippill .mt { font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
+
+@media (max-width:820px) {
+  .rm-grid { grid-template-columns:1fr; }
+  .rm-featgrid { grid-template-columns:1fr; }
+  .rm-hero__top { grid-template-columns:1fr; gap:14px; }
+}