@ucsandman/legcli 0.7.0

package/src/auth.mjs

@@ -0,0 +1,85 @@
+// auth — who is allowed in. Loopback with no token is open; any other bind
+// address refuses to start without a token, and with a token every /api
+// request needs `Authorization: Bearer <token>` (timing-safe). With `baton
+// share` on, each human has their own token and the board knows their name
+// and role (src/share.mjs); a loopback request is still the owner, so the
+// machine's own browser needs nothing.
+import { timingSafeEqual } from 'node:crypto'
+import { identify, isOn as shareIsOn, personNamed } from './share.mjs'
+
+export const LOOPBACK = ['127.0.0.1', '::1', 'localhost', '::ffff:127.0.0.1']
+
+export function isLoopback(bind) {
+  return LOOPBACK.includes(String(bind ?? '').trim().toLowerCase().replace(/^\[|\]$/g, ''))
+}
+
+// Tokenless owner access is safe only when both ends name loopback. Checking
+// the socket alone lets an attacker-controlled DNS name rebind to 127.0.0.1;
+// its page then has a same-origin Host/Origin pair and can drive the board.
+export function isLoopbackRequest(req) {
+  if (!isLoopback(remoteAddress(req))) return false
+  const host = req?.headers?.host
+  if (typeof host !== 'string' || !host) return false
+  try {
+    const target = new URL(`http://${host}`)
+    return isLoopback(target.hostname)
+  } catch { return false }
+}
+
+export class BindRefused extends Error {
+  constructor(bind) {
+    super(`refusing to bind ${bind} without LEG_TOKEN; see README "Network exposure"`)
+    this.name = 'BindRefused'
+    this.exitCode = 3
+  }
+}
+
+export function checkBind({ bind, token, share = null }) {
+  // share on means every request carries a personal token, so the bind is guarded
+  if (!isLoopback(bind) && !token && !shareIsOn(share ?? undefined)) throw new BindRefused(bind)
+  return true
+}
+
+export function remoteAddress(req) { return req?.socket?.remoteAddress ?? req?.connection?.remoteAddress ?? '' }
+
+export function tokenMatches(token, presented) {
+  if (!token || typeof presented !== 'string') return false
+  const a = Buffer.from(token)
+  const b = Buffer.from(presented)
+  if (a.length !== b.length) return false
+  return timingSafeEqual(a, b)
+}
+
+// Bearer header, or ?token= for EventSource (which cannot set headers).
+export function presentedToken(req, url) {
+  const h = req.headers.authorization
+  if (h && /^Bearer\s+/i.test(h)) return h.replace(/^Bearer\s+/i, '').trim()
+  return url.searchParams.get('token')
+}
+
+// → { ok, subject, person } where person is { name, role } when share is on.
+export function authorize({ token, req, url, share = null, bind = null, loopbackOwner = null }) {
+  const presented = presentedToken(req, url)
+  if (shareIsOn(share ?? undefined)) {
+    const person = identify(share, presented)
+    if (person) return { ok: true, subject: person.name, person }
+    // the machine's own browser is the owner over LOOPBACK only: with a
+    // non-loopback (Tailscale/LAN) bind the server also listens on 127.0.0.1
+    // (createBoardServer), so the owner opens the loopback URL tokenless while a
+    // real remote peer's address is never loopback and always needs a token.
+    const localOwner = loopbackOwner === null ? isLoopback(remoteAddress(req)) : loopbackOwner
+    if (!presented && share.loopback_owner !== false && localOwner) {
+      const owner = personNamed(share, share.owner) ?? share.people.find((p) => p.role === 'owner') ?? null
+      if (owner) return { ok: true, subject: owner.name, person: owner }
+    }
+    return { ok: false, subject: null, person: null }
+  }
+  // checkBind's invariant, re-applied per request: share.json stops reading as
+  // on (`baton share off`, a truncated file) while the shared address is still
+  // bound, and nobody but this machine may be the local owner in that window
+  if (!token && loopbackOwner === false) return { ok: false, subject: null, person: null }
+  if (!token && bind && !isLoopback(bind) && !isLoopback(remoteAddress(req))) return { ok: false, subject: null, person: null }
+  if (!token) return { ok: true, subject: 'local', person: null }
+  if (tokenMatches(token, presented)) return { ok: true, subject: 'token', person: null }
+  return { ok: false, subject: null, person: null }
+}

package/src/board/board.css

@@ -0,0 +1,543 @@
+/* Leg board: dark-only operator UI. Shared by index.html and floor.html.
+ *
+ * The design this implements is .design/BOARD-V4-DIRECTION.md: mock B,
+ * "dark product surface", with C's headline framing and A's staleness
+ * sentence. It replaces the printed-operator's-manual brief that produced six
+ * rejected rounds. The shape of that brief was hairline rules as the only
+ * structure, a flat single plane, 2px radii, a saturated navy ground and a
+ * monospace face for prose. None of it survives here on purpose.
+ *
+ * What the design is, in one line each:
+ *   - the ground is neutral near-black, and the panels are raised objects on
+ *     it, lit from above with a 1px top highlight and a shadow beneath
+ *   - size encodes importance: the login that is the problem gets the wide
+ *     lit panel, the ones that are not get half panels under it
+ *   - the largest thing on the board is a sentence, not a number
+ *   - one accent, one blue, on the primary action and nowhere else
+ *   - severity paints inside a gauge track and marks a state dot; it is never
+ *     the colour of a word
+ *   - history sits on the ground, unpanelled, so it cannot compete with what
+ *     is live
+ *
+ * ---------------------------------------------------------------------------
+ * SHAPES THE TEST SUITE PINS. Each item names the test file that goes red if
+ * the shape moves. Read that test before you change the shape it describes.
+ * ---------------------------------------------------------------------------
+ *
+ *  1. The token block below ships HEX values, with the OKLCH the value was
+ *     designed in written after the semicolon on the same line.
+ *     test/board-a11y.test.mjs hand-parses that block with a flat regex,
+ *     resolves var() exactly one level, and converts each value with
+ *     parseInt on the first six hex digits. A bare oklch() value converts to
+ *     NaN and the contrast math then fails without saying why. Keep the
+ *     values hex. Text after the semicolon is outside the captured value,
+ *     which is what makes the OKLCH comment safe. Two further rules for that
+ *     block: no comment inside it may contain a semicolon, and none may
+ *     contain the word color followed by a colon, because either one is read
+ *     as a declaration.
+ *  2. The literal two-selector rule for the html and body elements, carrying
+ *     both a text colour and a background. board-a11y finds it by matching
+ *     the trimmed selector exactly, so no comment may sit between the
+ *     previous rule's closing brace and that selector.
+ *  3. At least six rules whose selector contains "chip" or "pill" and that
+ *     set a text colour, none of them inside a media or keyframes block,
+ *     which the flat parser does not descend into. board-a11y measures each
+ *     against var(--panel-2) and needs 3.0:1. In this design .chip is a flat
+ *     inline data token, not a capsule: the test checks its contrast, not its
+ *     shape, so the name is load-bearing and is kept honestly.
+ *  4. The focus ring. board-a11y requires the focus-visible pseudo-class
+ *     followed, within eighty characters, by a declaration of a two-pixel
+ *     solid outline. A box-shadow ring, or the colour split onto its own
+ *     line, breaks the match. There are two such rules in this file.
+ *  5. The [hidden] attribute rule, set to display none with !important,
+ *     verbatim. test/server.test.mjs matches it in the served /board.css body.
+ *  6. The reduced-motion block, keyed on prefers-reduced-motion reduce.
+ *     board-a11y finds that at-rule by its exact text and brace-matches it,
+ *     then requires a selector containing state-active followed by an
+ *     animation of none, and a universal rule setting transition to none.
+ *  7. Four scroll boxes, each with its class as the FIRST TOKEN ON ITS LINE:
+ *     .drawer-task, then .drawer-msg p, then .drawer-timeline, then
+ *     .drawer-diff. Each rule carries overflow auto or overflow-y auto.
+ *     test/board-drawer.test.mjs finds them by scanning lines for that
+ *     prefix, not by parsing CSS. Do not merge them onto one line, do not
+ *     reformat them, and do not let an earlier line in this file begin with
+ *     any of those four strings.
+ *  8. No positive tabindex, and no outline of none or 0 on a selector that is
+ *     not itself a focus selector. board-a11y scans board.css, index.html,
+ *     floor.html, board.js and floor.js for both.
+ *
+ * Type rule that keeps the 14px floor from regressing: no rule in this file
+ * sets a font-size in px. Sizes come from the --t-* scale, and --t--1 is
+ * redefined to the body size inside the narrow breakpoint, so the floor is a
+ * property of the token rather than something every rule has to remember.
+ */
+
+@font-face{font-family:"Atkinson Hyperlegible Next";src:url("fonts/atkinson-board.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
+@font-face{font-family:"Azeret Mono";src:url("fonts/azeret-board.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
+
+:root {
+  /* families. Atkinson is self-hosted and stays: it is a real face with a
+     purpose rather than the system stack, and a board read at a glance all day
+     is exactly what hyperlegible letterforms are for. Azeret is demoted to
+     true data tokens only, never prose */
+  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* ground and elevation, hue 258 at a chroma low enough never to read as
+     navy. The old ramp was the same hue at four times this chroma */
+  --e0: #0E1012;         /* oklch(0.170 0.006 258) page ground, unlit */
+  --e1: #171A1D;         /* oklch(0.215 0.007 258) recessed well, tracks, wells, inputs */
+  --e2: #212427;         /* oklch(0.258 0.008 258) the raised panel */
+  --panel-2: #212427;    /* oklch(0.258 0.008 258) the panel again, under the name the contrast test reads */
+  --e3: #2C2F34;         /* oklch(0.305 0.009 258) quiet control */
+  --e4: #363A40;         /* oklch(0.345 0.010 258) control hover */
+  --selected: #2A3340;   /* oklch(0.300 0.020 258) selected row */
+  --track: #2B2E32;      /* oklch(0.300 0.008 258) gauge track */
+
+  /* edges. --line separates siblings INSIDE one panel and is the only rule
+     left in the design. --edge is the panel boundary, barely there */
+  --line: #35383D;        /* oklch(0.335 0.008 258) sibling separator inside one panel */
+  --line-strong: #4A4E55; /* oklch(0.420 0.009 258) section rule on the ground */
+  --edge: #2A2D31;        /* oklch(0.285 0.008 258) panel boundary */
+  --edge-hi: #4B5058;     /* oklch(0.430 0.010 258) the top edge that catches light */
+  --control-edge: #686D75; /* oklch(0.540 0.010 258) quiet control boundary, 3.00:1 on the panel */
+
+  /* text */
+  --text: #F3F4F7;       /* oklch(0.960 0.004 258) primary, 14.18:1 on the panel */
+  --text-2: #B9BEC6;     /* oklch(0.800 0.010 258) secondary, 8.35:1 on the panel */
+  --text-3: #9399A1;     /* oklch(0.680 0.012 258) meta, 5.43:1 on the panel */
+  --text-dim: #6B7079;   /* oklch(0.540 0.012 258) disabled only, never encodes state */
+
+  /* the one accent. It means: this is the action to take. Nowhere else */
+  --accent: #5C91FF;     /* oklch(0.680 0.185 264) */
+  --accent-hi: #7CADFF;  /* oklch(0.760 0.150 264) */
+  --on-accent: #070D1A;  /* oklch(0.150 0.030 264) 6.43:1 on the accent */
+
+  /* state. A fill paints inside a track and a mark is a dot. The -text
+     variants exist for the few places a word must carry the state itself */
+  --calm: #5F6670;        /* oklch(0.520 0.012 258) a healthy gauge is quiet, not green */
+  --ok: #3FA463;          /* oklch(0.620 0.140 152) success fill */
+  --ok-text: #6FD68F;     /* oklch(0.800 0.130 150) success mark and sentence */
+  --warn: #E0A33C;        /* oklch(0.760 0.140 75) gauge segment 60 to 85 */
+  --warn-text: #F0BE6E;   /* oklch(0.830 0.110 78) warning mark and sentence */
+  --danger: #E64343;      /* oklch(0.620 0.200 25) gauge segment past 85, and the walled fill */
+  --danger-text: #FF8A8A; /* oklch(0.760 0.150 22) error mark and sentence */
+
+  /* interaction and identity. Identity is a dot beside a printed name and the
+     gauge fill. It is never text colour on a row and never a border */
+  --focus: #EDF2FA;      /* oklch(0.960 0.010 258) focus ring, appears nowhere else */
+  --id-claude: #FCA169;  /* oklch(0.790 0.130 52) warm */
+  --id-codex: #69DBBA;   /* oklch(0.815 0.115 172) cool green */
+  --id-agy: #CC97F3;     /* oklch(0.760 0.140 310) violet, 46 degrees clear of the accent */
+  --id-fake: #A0A6AE;    /* oklch(0.720 0.010 258) the scripted adapter, neutral in hue */
+
+  /* type scale. Fixed rem, range 13 to 52. The old board ran 13 to 21, which
+     is why it read as a spreadsheet */
+  --t--1: 0.8125rem;     /* 13px the row register and the scaffolding strip */
+  --t-0: 0.9375rem;      /* 15px labels, meta, controls, the narrow floor */
+  --t-1: 1.0625rem;      /* 17px prompts, panel heads, body default */
+  --t-2: 1.3125rem;      /* 21px section heads, secondary readings */
+  --t-3: 2.125rem;       /* 34px the gauge numeral */
+  --t-4: 3.25rem;        /* 52px the verdict */
+
+  --w-text: 400;
+  --w-head: 700;
+
+  --r-panel: 16px;
+  --r-well: 12px;
+  --r-control: 10px;
+
+  --ease: cubic-bezier(.2,0,0,1);
+
+  /* one raised object, lit from above. The inset highlight is the top edge and
+     the two shadows are contact and ambient */
+  --lift: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.45), 0 18px 44px -14px rgba(0,0,0,.70);
+  --lift-hi: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.45), 0 22px 52px -14px rgba(0,0,0,.75);
+  --sink: inset 0 1px 3px rgba(0,0,0,.50);
+}
+
+* { box-sizing: border-box; }
+
+html, body { color: var(--text); background: var(--e0); }
+
+body {
+  margin: 0;
+  font-family: var(--sans);
+  font-size: var(--t-1);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
+ul, ol { padding: 0; list-style: none; }
+button { font: inherit; color: inherit; margin: 0; }
+code { font-family: var(--mono); font-size: 0.94em; }
+
+[hidden] { display: none !important; }
+
+/* one focus treatment for every control on the board */
+:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }
+.panel-prompt:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-control); }
+
+/* ---- shell ------------------------------------------------------------- */
+.wrap { max-width: 1120px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); padding-bottom: 72px; }
+
+.banner { background: var(--e1); border-bottom: 1px solid var(--edge); color: var(--text-2); font-size: var(--t-0); padding: 10px clamp(20px, 4vw, 40px); padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
+
+.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 28px 0; }
+.brand { font-size: var(--t-1); font-weight: var(--w-head); letter-spacing: -.01em; }
+.brand-glyph { display: inline-block; margin-right: 4px; }
+.masthead-right { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: var(--t-0); color: var(--text-3); }
+.floor-link { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
+.floor-link:hover { color: var(--text); border-bottom-color: var(--text-2); }
+
+.sse-status { display: inline-flex; align-items: center; gap: 8px; }
+.sse-word { color: var(--text-3); }
+.sse-rule { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: none; }
+.sse-rule.is-connecting { background: var(--warn); }
+.sse-rule.is-down { background: var(--danger); }
+.sched-status { color: var(--text-3); }
+
+/* ---- the verdict: the largest thing on the board is a sentence ---------- */
+.verdict { padding-block: 56px 56px; }
+.verdict h1 { font-size: var(--t-4); font-weight: var(--w-head); line-height: 1.08; letter-spacing: -.028em; max-width: 26ch; text-wrap: balance; }
+.verdict p { margin-top: 16px; font-size: var(--t-2); line-height: 1.5; color: var(--text-2); max-width: 54ch; text-wrap: pretty; }
+.verdict p:empty { display: none; }
+
+/* ---- panel: a raised object, not a drawn rectangle ---------------------- */
+.panel { position: relative; background: var(--e2); border: 1px solid var(--edge); border-radius: var(--r-panel); padding: 32px; box-shadow: var(--lift); }
+.panel--lit { box-shadow: var(--lift-hi); }
+
+.panel-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
+.who { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-1); font-weight: var(--w-head); }
+.who-note { font-size: var(--t-0); color: var(--text-3); }
+
+.dot { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--id-fake); }
+.dot.id-claude { background: var(--id-claude); }
+.dot.id-codex { background: var(--id-codex); }
+.dot.id-agy { background: var(--id-agy); }
+
+/* ---- logins ------------------------------------------------------------- */
+.logins { display: grid; gap: 20px; }
+.logins-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.head-caption { margin-top: 16px; font-size: var(--t-0); color: var(--text-3); }
+
+/* ---- the gauge: the instrument ------------------------------------------ */
+.gauge-block + .gauge-block { margin-top: 26px; }
+.gauge { display: flex; align-items: center; gap: 20px; }
+.gauge-label { flex: none; width: 62px; font-size: var(--t-0); color: var(--text-3); }
+.gauge--none .gauge-label { width: auto; }
+.gauge-track { flex: 1 1 auto; min-width: 0; position: relative; height: 16px; background: var(--track); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0,0,0,.45); overflow: hidden; }
+.gauge--minor .gauge-track { height: 8px; }
+.gauge-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--calm); }
+/* the reserve notch: a 2px gap cut through the bar where 85 percent sits */
+.gauge-post { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--e1); }
+.gauge-readout { flex: none; width: 168px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
+.gauge--noread::after { content: ""; flex: none; width: 96px; }
+.gauge-read { text-align: right; font-size: var(--t-3); font-weight: var(--w-head); letter-spacing: -.02em; line-height: 1; }
+.gauge--minor .gauge-read { font-size: var(--t-2); }
+.gauge-read--none { font-size: var(--t-2); font-weight: var(--w-text); color: var(--text-3); }
+.gauge-note { font-size: var(--t-0); color: var(--text-3); white-space: nowrap; }
+
+.reading { margin-top: 22px; font-size: var(--t-2); font-weight: var(--w-head); line-height: 1.3; letter-spacing: -.012em; }
+.reading-sub { margin-top: 8px; font-size: var(--t-0); color: var(--text-2); max-width: 46ch; }
+.reading-sub--lead { margin-top: 22px; }
+
+/* ---- section heads ------------------------------------------------------ */
+.section-head { padding-block: 56px 20px; }
+.section-head h2 { font-size: var(--t-2); font-weight: var(--w-head); letter-spacing: -.012em; }
+.section-head .region-meta { margin-top: 8px; font-size: var(--t-0); color: var(--text-3); }
+.section-head--quiet { padding-block: 56px 16px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
+.section-head--quiet .region-meta { margin-top: 0; }
+.hoisted { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-0); }
+.hoisted-note { color: var(--text-2); }
+.hoisted-note.tone-warn { color: var(--warn-text); }
+.hoisted-note.tone-danger { color: var(--danger-text); }
+.hoisted-note.tone-muted { color: var(--text-3); }
+
+/* ---- terminals: rows inside one panel, separated by the only rule left --- */
+.terms { padding: 4px 0; }
+.term { padding: 26px 32px; }
+.term + .term { border-top: 1px solid var(--line); }
+.term.is-urgent { background: linear-gradient(to right, rgba(230,67,67,.07), transparent 40%); }
+.term-row { display: flex; align-items: center; gap: 28px; }
+.term-body { flex: 1 1 auto; min-width: 0; }
+.term-row > .term-body { flex-basis: 24ch; }
+.term-clock { flex: none; display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; font-size: var(--t--1); color: var(--text-3); white-space: nowrap; }
+.term-register { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: var(--t--1); color: var(--text-3); }
+.term-where { color: var(--text-2); }
+.term-when { color: var(--text-3); min-width: 6ch; text-align: right; }
+.term-id { color: var(--text-3); min-width: 4ch; text-align: right; font-family: var(--mono); }
+.term-actions { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 272px; }
+.term-actions .btn { white-space: nowrap; width: 100%; }
+/* a row with one or three controls keeps the grid honest rather than stretching
+   the odd one across both columns */
+.term-actions .btn:only-child { grid-column: 1 / -1; }
+
+.state { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: var(--w-head); }
+.mark { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--text-3); }
+.mark.tone-ok { background: var(--ok); }
+.mark.tone-warn { background: var(--warn); }
+.mark.tone-danger { background: var(--danger); }
+.mark.state-active { background: var(--text); }
+@media (prefers-reduced-motion: no-preference) {
+  .mark.state-active { animation: breathe 2400ms var(--ease) infinite; }
+}
+@keyframes breathe { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
+
+.term-prompt { margin-top: 14px; font-size: var(--t-1); line-height: 1.45; max-width: 62ch; color: var(--text); }
+.term-prompt--empty { color: var(--text-3); }
+.panel-prompt { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin-top: 14px; font-size: var(--t-1); line-height: 1.45; max-width: 62ch; color: var(--text); cursor: pointer; }
+.panel-prompt:hover { color: var(--accent-hi); }
+
+.sentence { margin-top: 10px; font-size: var(--t-0); color: var(--text-2); max-width: 64ch; }
+.sentence.tone-warn { color: var(--warn-text); }
+.sentence.tone-danger { color: var(--danger-text); }
+.sentence.tone-ok { color: var(--ok-text); }
+.sentence.tone-muted { color: var(--text-3); }
+.files { margin-top: 10px; font-size: var(--t--1); color: var(--text-3); }
+.file { color: var(--text-3); }
+.file.is-overlap { color: var(--warn-text); }
+.blocker { margin-top: 10px; font-size: var(--t-0); color: var(--text-3); max-width: 64ch; }
+.blocker.is-hoisted { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* the flat inline data token. Not a capsule: a chip here is a word set in the
+   meta colour beside the thing it qualifies */
+.chip { font-size: var(--t--1); color: var(--text-2); font-family: var(--mono); }
+.chip.is-stale { color: var(--text-3); }
+.chip-id-claude { color: var(--id-claude); }
+.chip-id-codex { color: var(--id-codex); }
+.chip-id-agy { color: var(--id-agy); }
+.chip-id-fake { color: var(--id-fake); }
+.chip-state-ok { color: var(--ok-text); }
+.chip-state-warn { color: var(--warn-text); }
+
+.acct-name { font-weight: var(--w-head); }
+.acct-name.id-claude { color: var(--id-claude); }
+.acct-name.id-codex { color: var(--id-codex); }
+.acct-name.id-agy { color: var(--id-agy); }
+.acct-name.id-fake { color: var(--id-fake); }
+
+/* ---- controls ----------------------------------------------------------- */
+.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; border-radius: var(--r-control); font-size: var(--t-0); font-weight: var(--w-head); letter-spacing: -.005em; cursor: pointer; border: 1px solid transparent; background: none; transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease), color 150ms var(--ease); }
+.btn-primary { background: var(--accent); color: var(--on-accent); }
+.btn-primary:hover { background: var(--accent-hi); }
+.btn-secondary { background: var(--e3); color: var(--text); border-color: var(--control-edge); }
+.btn-secondary:hover { background: var(--e4); border-color: #7D828A; }
+.btn-danger { background: var(--e3); color: var(--danger-text); border-color: var(--control-edge); }
+.btn-danger:hover { background: var(--e4); }
+.btn-text { min-height: 32px; padding: 0 2px; background: none; color: var(--text-2); border: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
+.btn-text:hover { color: var(--text); text-decoration-color: var(--text-2); }
+.btn:active { transform: translateY(1px); }
+.btn:disabled { color: var(--text-dim); background: var(--e1); border-color: var(--edge); cursor: not-allowed; }
+.btn:disabled:hover { background: var(--e1); }
+
+/* ---- disclosure wells --------------------------------------------------- */
+.drawer { margin-top: 22px; background: var(--e1); border-radius: var(--r-well); padding: 24px; box-shadow: var(--sink); }
+.drawer-head { font-size: var(--t-1); font-weight: var(--w-head); margin-bottom: 18px; }
+.drawer-note { margin-top: 18px; font-size: var(--t-0); color: var(--text-2); max-width: 64ch; }
+.drawer-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
+
+/* the four scroll boxes board-drawer.test.mjs scans for by line prefix. Each
+   class is the first token on its line, in this order, and no earlier line in
+   this file begins with any of the four */
+.drawer-task { max-height: 22rem; overflow: auto; font-size: var(--t-0); color: var(--text-2); }
+.drawer-msg p { max-height: 18rem; overflow-y: auto; font-size: var(--t-0); color: var(--text-2); }
+.drawer-timeline { max-height: 22rem; overflow: auto; font-size: var(--t-0); }
+.drawer-diff { max-height: 26rem; overflow: auto; font-family: var(--mono); font-size: var(--t--1); }
+
+.drawer-msg { margin-top: 14px; }
+.drawer-msg-role { font-size: var(--t--1); color: var(--text-3); font-weight: var(--w-head); }
+.drawer-msg-when { font-size: var(--t--1); color: var(--text-3); }
+
+/* ---- ledger: on the ground, unpanelled --------------------------------- */
+.ledger { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 32px; border-top: 1px solid var(--edge); }
+.ledger-cell h3 { font-size: var(--t-2); font-weight: var(--w-head); letter-spacing: -.012em; }
+.ledger-cell .region-meta { margin-top: 6px; font-size: var(--t-0); color: var(--text-3); }
+.ledger-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
+.ledger-cell .empty-line { margin-top: 12px; font-size: var(--t-0); color: var(--text-3); }
+
+.list { margin-top: 20px; }
+.list li { padding: 14px 0; font-size: var(--t-0); }
+.list li + li { border-top: 1px solid var(--line); }
+.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 8px 20px; align-items: baseline; }
+.line--commit { grid-template-columns: 1fr auto; }
+.line-main { color: var(--text); }
+.line-meta { color: var(--text-2); }
+.line-when { color: var(--text-3); text-align: right; }
+.group-head { display: flex; align-items: baseline; gap: 10px; margin-top: 24px; margin-bottom: 4px; font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }
+.group-head:first-child { margin-top: 0; }
+.group-head span { font-weight: var(--w-text); color: var(--text-3); }
+
+.trunk-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: baseline; padding: 14px 0; font-size: var(--t-0); }
+.trunk-row + .trunk-row { border-top: 1px solid var(--line); }
+.landed-by { color: var(--text-3); }
+.finished-line { padding: 14px 0; font-size: var(--t-0); }
+.finished-names { margin-left: 10px; color: var(--text-3); }
+
+/* ---- cards -------------------------------------------------------------- */
+.card-list { display: grid; gap: 14px; }
+/* A card row reads down the same four columns as an account and a terminal
+   (board.js buildRow): R1 who, R2 what, R3 where, R4 when-act. The first three
+   stack in the body column; R4 is the clock and the actions on the right, the
+   same shape as .term-row. Without this the four cells fell back to block
+   defaults and the row read as unstyled markup. */
+.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; align-items: start; padding: 26px 32px; background: var(--e2); border: 1px solid var(--edge); border-radius: var(--r-well); }
+.r1, .r2, .r3 { grid-column: 1; min-width: 0; }
+.r1 { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: var(--t--1); color: var(--text-3); }
+.r2 { margin-top: 8px; }
+.r3 { margin-top: 12px; display: grid; gap: 8px; }
+.r4 { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
+.r4 .elapsed { font-size: var(--t--1); white-space: nowrap; }
+/* the same 2x2 block the terminal rows use, so the two row kinds line up */
+.r4 .row-actions { margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 272px; }
+.r4 .row-actions .btn { white-space: nowrap; width: 100%; }
+.r4 .row-actions .btn:only-child { grid-column: 1 / -1; }
+.leases { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.reassign-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+/* a bare mono span: the chips carry their own font, this one does not */
+.mono { font-family: var(--mono); }
+.row:hover { background: var(--e3); }
+.row.is-selected { background: var(--selected); }
+/* a bare <button> keeps the UA's light-grey fill and padding, which put
+   near-white text on near-white and made the card title unreadable. Reset it
+   the way .panel-prompt does for terminal rows. */
+.row-title { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font-size: var(--t-1); line-height: 1.45; color: var(--text); cursor: pointer; }
+.row-title:hover { color: var(--accent-hi); }
+.row-meta { font-size: var(--t-0); color: var(--text-3); display: flex; gap: 14px; flex-wrap: wrap; }
+.row-actions { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
+/* the demoted-notes disclosure in a terminal row */
+.also { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--t-0); color: var(--text-3); }
+.status-word { font-weight: var(--w-head); color: var(--text-2); }
+.elapsed { font-family: var(--mono); color: var(--text-3); }
+.where { color: var(--text-2); }
+.worktree { color: var(--text-3); }
+
+/* ---- detail panes ------------------------------------------------------- */
+.detail { margin-top: 22px; background: var(--e1); border-radius: var(--r-well); box-shadow: var(--sink); }
+.detail-inner { padding: 24px; }
+.detail-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: var(--t-1); font-weight: var(--w-head); margin-bottom: 12px; }
+.detail-section { margin-top: 20px; }
+.detail-sub { font-size: var(--t-0); color: var(--text-3); margin-bottom: 8px; }
+.kv { display: grid; grid-template-columns: 148px 1fr; gap: 10px 20px; font-size: var(--t-0); }
+.kv-key { color: var(--text-3); }
+.kv-val { color: var(--text); }
+.well { background: var(--e0); border-radius: var(--r-control); padding: 14px; }
+.log-pre { font-family: var(--mono); font-size: var(--t--1); white-space: pre-wrap; color: var(--text-2); max-height: 26rem; overflow: auto; }
+.hunk { font-family: var(--mono); font-size: var(--t--1); white-space: pre-wrap; }
+.file-row { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; text-align: left; }
+.turn { padding: 12px 0; }
+.turn + .turn { border-top: 1px solid var(--line); }
+.turn-role { font-size: var(--t--1); color: var(--text-3); font-weight: var(--w-head); }
+.turn-when { font-size: var(--t--1); color: var(--text-3); }
+/* the kind word sits beside the clock, not welded to it: `10:40 AMstarted` */
+.turn-when + .turn-role { margin-left: 10px; }
+
+/* ---- chain rail, order rows, confirm ------------------------------------ */
+.chain-rail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-0); color: var(--text-3); }
+.cap-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: var(--t-0); color: var(--text-3); margin-top: 8px; }
+.order-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: var(--t-0); }
+.order-row-name { flex: 1 1 auto; }
+/* the label on each agent row in the New card dialog */
+.fallback-row-title { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }
+.confirm-row { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--e4); border-radius: var(--r-control); padding: 12px 14px; font-size: var(--t-0); }
+.actions { display: flex; gap: 10px; flex-wrap: wrap; }
+
+/* ---- the floor: the scheduler's view, tables on the same ground --------- */
+.masthead-left { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
+.repos-status, .counts-status { color: var(--text-3); }
+.counts-status span { color: var(--text-2); font-weight: var(--w-head); margin-left: 2px; }
+.region-floor { margin-top: 12px; }
+.ftable { width: 100%; border-collapse: collapse; background: var(--e2); border: 1px solid var(--edge); border-radius: var(--r-panel); box-shadow: var(--lift); overflow: hidden; font-size: var(--t-0); }
+.ftable th, .ftable td { text-align: left; vertical-align: top; padding: 14px 18px; }
+.ftable thead th { color: var(--text-3); font-weight: var(--w-head); font-size: var(--t--1); border-bottom: 1px solid var(--line); }
+.ftable tbody tr + tr td { border-top: 1px solid var(--line); }
+.ftable tbody tr:hover td { background: var(--e3); }
+.ftable td.c-elapsed, .ftable td.c-since, .ftable td.c-time { font-family: var(--mono); color: var(--text-3); white-space: nowrap; }
+.ftable .c-actions { text-align: right; }
+.ftable .c-actions .btn { white-space: nowrap; }
+.ftable-wrap { overflow-x: auto; }
+.ftable td.is-empty { color: var(--text-3); }
+
+/* ---- settings and forms ------------------------------------------------- */
+.settings-body { display: grid; gap: 24px; }
+.field { display: grid; gap: 8px; }
+.field label, .form-row label { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }
+.field-help { font-size: var(--t-0); color: var(--text-3); max-width: 64ch; }
+.field-status { font-size: var(--t-0); color: var(--text-3); }
+.board-facts { font-size: var(--t-0); color: var(--text-3); }
+input[type="text"], input[type="password"], textarea, select { font: inherit; font-size: var(--t-0); color: var(--text); background: var(--e0); border: 1px solid var(--control-edge); border-radius: var(--r-control); padding: 9px 12px; min-height: 36px; }
+input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
+fieldset { border: 1px solid var(--edge); border-radius: var(--r-well); padding: 18px; display: grid; gap: 12px; }
+legend { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); padding-inline: 6px; }
+.form-row { display: grid; gap: 8px; margin-top: 18px; }
+.form-error { background: var(--e1); border-left: 3px solid var(--danger); border-radius: var(--r-control); padding: 12px 14px; font-size: var(--t-0); color: var(--danger-text); }
+.advanced-options { margin-top: 22px; }
+.advanced-options summary { cursor: pointer; font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }
+.dialog-title { font-size: var(--t-2); font-weight: var(--w-head); }
+.dialog-intro { margin-top: 8px; font-size: var(--t-0); color: var(--text-3); max-width: 64ch; }
+.dialog-actions { margin-top: 26px; display: flex; gap: 10px; justify-content: flex-end; }
+dialog { background: var(--e2); color: var(--text); border: 1px solid var(--edge); border-radius: var(--r-panel); box-shadow: var(--lift-hi); padding: 32px; max-width: 640px; width: calc(100vw - 40px); }
+dialog::backdrop { background: rgba(0,0,0,.6); }
+
+.empty-line { font-size: var(--t-0); color: var(--text-3); margin-top: 18px; max-width: 64ch; }
+.sysmsg { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; }
+.sysmsg:empty { display: none; }
+.sysmsg-item { background: var(--e4); color: var(--text); border-radius: var(--r-control); padding: 12px 16px; font-size: var(--t-0); box-shadow: var(--lift); }
+.prov { font-size: var(--t--1); color: var(--text-3); }
+.prov.is-stale { color: var(--warn-text); }
+.tone-muted { color: var(--text-3); }
+.tone-warn { color: var(--warn-text); }
+.tone-danger { color: var(--danger-text); }
+.tone-ok { color: var(--ok-text); }
+
+/* ===========================================================================
+   narrow. One breakpoint, because the layout has one narrow form: everything
+   in a single column. --t--1 is redefined to the body size here, which is what
+   holds the 14px floor without every rule having to remember it.
+   =========================================================================== */
+@media (max-width: 760px) {
+  .wrap { --t-4: 2rem; --t-3: 1.75rem; --t-2: 1.1875rem; --t--1: 0.9375rem; }
+  .verdict { padding-block: 36px 32px; }
+  .verdict h1 { max-width: none; letter-spacing: -.02em; }
+  .verdict p { margin-top: 16px; }
+  .panel { padding: 22px; border-radius: 14px; }
+  .logins-pair { grid-template-columns: 1fr; }
+  .gauge { gap: 14px; flex-wrap: wrap; }
+  .gauge-label { width: 100%; }
+  .gauge-track { flex: 1 1 110px; }
+  .gauge-readout { display: contents; }
+  .gauge-read { width: 68px; }
+  .gauge-note { width: 100%; text-align: left; margin-top: 8px; }
+  .gauge--noread::after { width: 68px; }
+  .gauge-block + .gauge-block { margin-top: 22px; }
+  code { font-size: 1em; }
+  .section-head { padding-block: 40px 16px; }
+  .section-head--quiet { padding-block: 40px 16px; }
+  .term { padding: 22px; }
+  .term-row { flex-direction: column; align-items: stretch; gap: 14px; }
+  .term-clock { order: -1; width: auto; justify-content: flex-end; gap: 14px; }
+  .term-id { min-width: 0; }
+  .term-actions { width: auto; justify-content: flex-start; }
+  .term-actions .btn { flex: 1 1 auto; }
+  .term-register { gap: 10px 14px; }
+  .kv { grid-template-columns: 1fr; gap: 4px 0; }
+  .kv-val + .kv-key { margin-top: 12px; }
+  .ledger { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
+  .line { grid-template-columns: 1fr auto; gap: 6px 14px; }
+  .line-main { grid-column: 1 / -1; }
+  .line-meta { grid-column: 1; }
+  .line--commit .line-main { grid-column: 1; }
+  .drawer { padding: 18px; }
+  dialog { padding: 22px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mark.state-active { animation: none; }
+  * { transition: none !important; }
+  .btn:active { transform: none; }
+}