/* Signet app-specific overrides ONLY. Never duplicate design-kit-meridian classes here.
   Check lib/design-kit-meridian/src/components/ before adding anything. */

/* ── Scroll-into-view must clear the fixed topbar ─────────────────────────────
   Meridian's .topbar is `position: fixed` 48px tall and the window is the page's
   only scroller, but the kit sets no scroll-padding to match. So anything the
   browser scrolls to the "top" of the viewport — a `#anchor`, a scrollIntoView
   (reopening a conversation on the Agent page, j/k walking the proposal queue) —
   lands underneath the topbar and reads as a cut-off page. App-side compensation;
   the kit should carry this itself. Note this only affects scroll-into-view and
   snapping, never a programmatic window.scrollTo, so it cannot re-introduce an
   offset of its own. */
html {
  scroll-padding-top: calc(var(--topbar-h, 48px) + var(--s8, 8px));
}

/* Toast stack — neither kit ships one (floating layer: shadow allowed per Meridian law #1) */
.toast-stack {
  position: fixed;
  top: var(--s16);
  right: var(--s16);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  max-width: 380px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s8);
  padding: var(--s12) var(--s16);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r8);
  box-shadow: var(--elev-2);
  font-size: var(--t-13);
  animation: dk-rise-in 200ms ease-out;
}
.toast-ok { border-left: 2px solid var(--ok); }
.toast-warn { border-left: 2px solid var(--warn); }
.toast-err { border-left: 2px solid var(--err); }

/* Brand wordmark (text, not the kit's img-oriented .brand-logo) */
.brand-name {
  font-weight: 650;
  font-size: var(--t-13);
  letter-spacing: 0.14em;
  color: var(--ink-1);
  cursor: default;
}

/* NotificationBell (notification-kit component; classes styled per-app — PMO precedent) */
.notification-bell { position: relative; }
.notification-bell-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink-2); cursor: pointer;
  padding: 4px; border-radius: 6px; transition: color 120ms ease-out;
}
.notification-bell-btn:hover { color: var(--ink-1); background: var(--bg-inset); }
.notification-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--err);
  /* per-theme ink on the solid err fill — hardcoded #fff fails AA on night's
     light err hue; a count is a quantity, so tabular sans, not mono (ATTEST) */
  color: var(--broken-ink, #fff);
  font-size: var(--t-10); font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.notification-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-height: 480px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--elev-2); z-index: 200; display: flex; flex-direction: column;
}
.notification-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.notification-dropdown-title { font-weight: 600; font-size: var(--t-13); }
.notification-dropdown-list { overflow-y: auto; flex: 1; }
.notification-empty { padding: 32px 16px; text-align: center; color: var(--ink-3); font-size: var(--t-13); }
.notification-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); padding: 10px 16px; cursor: pointer;
}
.notification-item:hover { background: var(--bg-inset); }
.notification-item.unread { border-left: 2px solid var(--accent); }
.notification-item-title { font-size: var(--t-13); color: var(--ink-1); }
.notification-item-body { font-size: var(--t-12); color: var(--ink-2); margin-top: 2px; }
.notification-item-time { font-size: var(--t-11); color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── Agent conversation ───────────────────────────────────────────────────────
   A chat, not a log. The operator is having a conversation with something that
   reads their client's documents, so the two voices need to be distinguishable at
   a glance and the text needs to be comfortable to read at length — the rest of
   the console is scan-and-decide, this one surface is read-and-think. */
.chat-log {
  padding: var(--s16);
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}

.chat-turn { display: flex; flex-direction: column; gap: 4px; max-width: 78%; }
.chat-turn--user { align-self: flex-end; align-items: flex-end; }
.chat-turn--assistant { align-self: flex-start; align-items: flex-start; }

.chat-who {
  font-size: var(--t-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chat-turn--user .chat-who { color: var(--accent); }

.chat-bubble {
  padding: var(--s12) var(--s16);
  border: 1px solid var(--line);
  border-radius: var(--r8);
  background: var(--surface-2);
}
.chat-turn--user .chat-bubble {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Reading size, deliberately a step above the console's 13px body. */
.chat-text {
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--ink-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-composer .form-input { font-size: var(--t-15); padding-block: var(--s8); }

@media (max-width: 900px) {
  .chat-turn { max-width: 92%; }
}

/* ── Reading surfaces ──────────────────────────────────────────────────────────
   Some surfaces are read-and-decide, not scan-and-move-on: the proposal queue, a
   requirement or deliverable detail panel, a revision diff, not a scan-and-move-on one: the operator
   reads a full requirement statement or definition of done and judges whether it
   is true, well-formed and worth committing. That is reading, so the prose gets a
   reading size — the same step up the conversation gets — while refs, counts and
   labels stay at the console floor. Without this the two were identical, because
   the bottom three type tiers all sit at the 12px floor. */
.read-prose {
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--ink-1);
  overflow-wrap: anywhere;
}
.read-prose--muted { color: var(--ink-2); }

/* The verbatim span is the evidence itself — under ATTEST it takes the record's
   voice: serif, read size, full ink (attest.css owns the values; kept in sync
   here so this file never re-asserts the Meridian look). */
.read-quote {
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--ink-1);
}

/* ── Sidebar activity signals ─────────────────────────────────────────────────
   Right-aligned, quiet: a mono count for actionable items (pending proposals,
   docs needing OCR, live runs, open questions, open defects) and a 6px accent
   dot when something changed there since the operator last opened that tab.
   The dot never renders on the active tab; counts stay while still actionable. */
.nav-activity {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  flex-shrink: 0;
}
.nav-activity-count {
  /* a count is a quantity → tabular sans (ATTEST); mono is for refs only */
  font-size: var(--t-11);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-3);
  background: var(--surface-2);
  border-radius: 3px;
  padding: 2px 5px;
  min-width: 1.6em;
  text-align: center;
}
.nav-link.active .nav-activity-count {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.nav-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Client timeline (Timeline & Facts spec) ─────────────────────────────────
   One chronological stream, two registers: Layer 0 documents are the QUIET
   derived layer (small, ink-3, no box); Layer 1 events are the PROMINENT
   curated layer (hairline card). Dates are readouts → mono. Borders, never
   shadows — the stream sits flat inside the client inspector. */
.tl-stream {
  display: flex;
  flex-direction: column;
}
.tl-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: var(--s12);
  padding: var(--s4) 0;
}
.tl-date {
  /* a date is a quantity (compared, ordered) → tabular sans, not mono (ATTEST) */
  font-size: var(--t-11);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-4);
  text-align: right;
  white-space: nowrap;
  padding-top: 3px;
}
.tl-row--event { padding: var(--s6) 0; }
.tl-row--event .tl-body {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s8) var(--s12);
  min-width: 0;
}
.tl-row--doc .tl-body {
  font-size: var(--t-12);
  color: var(--ink-3);
  line-height: 1.5;
  min-width: 0;
  padding-top: 2px;
}
.tl-row--doc .tl-body .tl-doc-name { color: var(--ink-2); }
/* Compact v-chain: a superseded lineage collapsed onto its current head
   (URS V0.1 → V0.2) — refs and dates only, one line. */
.tl-chain {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--ink-4);
  overflow-wrap: anywhere;
}

/* Facts panel — "What we currently know". History rows hang off the current
   value on a hairline rail; every node keeps its click-through to source. */
.fact-history {
  border-left: 1px solid var(--line);
  margin-left: var(--s8);
  padding-left: var(--s12);
  margin-top: var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

/* ── Client page ('#client?id=N') — THE STANDING BRIEF ───────────────────────
   The client page is a brief, not a console: one payload (GET /clients/:id/brief),
   one column, six zones in a fixed order — rail · next move · momentum · latest ·
   engagements · people · what we know. Structure is rules and hairlines (ATTEST
   LAW 3); the only hue is state (ok/attend/broken) or the one interaction accent.
   Category — phase, folder, event kind — never takes a hue: position, shape and
   weight carry it instead.

   The tabbed layout and its sticky right rail are gone. Three record surfaces the
   brief SUMMARISES are reachable as sub-views of this same page (timeline, library,
   client record); everything engagement-scoped routes to its own screen. */
.client-page { overflow-wrap: anywhere; }
.client-back {
  display: inline-block;
  font-size: var(--t-meta);
  color: var(--ink-3);
  text-decoration: none;
  margin-bottom: var(--s8);
}
.client-back:hover { color: var(--ink-1); }

/* ── The masthead: kit .mast; the h1 carries the state dot inline ── */
.client-mast-h1 { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.client-statedot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.client-statedot--idle { background: var(--ink-4); }
.client-statelabel { font-size: var(--t-label); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
/* the record disclosure behind "Record" — the file, not the brief (kit .sheet) */
.client-record {
  margin-top: var(--s16); margin-bottom: var(--s16);
  padding: var(--s12) var(--s16); max-width: var(--measure-read);
}
.client-recdl { display: grid; grid-template-columns: auto 1fr; gap: var(--s6) var(--s16); margin: 0; font-size: var(--t-scan); }
.client-recdl dt { color: var(--ink-4); font-size: var(--t-meta); white-space: nowrap; }
.client-recdl dd { margin: 0; color: var(--ink-2); }

/* Rail and zone rhythm: the shared kit (attest.css §7). Only the brief's own
   content classes live on below. */

/* ── Zone 1 · NEXT MOVE — ranked, evidence-cited, advisory (kit .sheet--edge) ── */
.client-move { padding: var(--s20) var(--s20) var(--s16); }
.client-move-head { display: flex; align-items: flex-start; gap: var(--s16); flex-wrap: wrap; }
.client-move h2 { font-size: var(--t-h2); line-height: 1.28; margin: 0; max-width: 36ch; }
.client-move-cta { margin-left: auto; display: flex; gap: var(--s8); align-items: center; }
.client-move-why { margin-top: var(--s12); }
.client-chips { margin-top: var(--s12); display: flex; gap: var(--s6); flex-wrap: wrap; align-items: center; }
.client-chip {
  display: inline-flex; align-items: center; font-size: var(--t-label);
  padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--r1);
  color: var(--ink-2); white-space: nowrap; line-height: 1.7;
}
.client-chip--derived { border-style: dashed; color: var(--ink-3); }
.client-qtoggle {
  margin-top: var(--s12); font-size: var(--t-scan); color: var(--ink-3);
  display: inline-flex; align-items: center; gap: var(--s6);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.client-qtoggle:hover { color: var(--accent); }
.client-qrow { display: flex; gap: var(--s12); align-items: flex-start; padding: var(--s12) var(--s16); border-top: 1px solid var(--line); }
.sheet > .client-qrow:first-child { border-top: 0; }
.client-qn { min-width: 18px; flex: none; padding-top: 2px; font-size: var(--t-meta); color: var(--ink-4); }
.client-qbody { flex: 1; min-width: 0; }
.client-qtitle { font-size: var(--t-ui); font-weight: 500; }
.client-qwhy { font-size: var(--t-scan); color: var(--ink-2); margin-top: 3px; max-width: var(--measure-read); line-height: var(--lh-scan); }
/* The engagement a move belongs to — rendered only when the client has more than
   one live engagement. A code is an identity, so it is mono and it is NOT a hue. */
.client-qeng {
  display: inline-block; border: 1px solid var(--line-strong); border-radius: var(--r1);
  padding: 0 6px; margin-right: var(--s8); color: var(--ink-2); line-height: 1.7;
}

/* ── Zone 2 · MOMENTUM ── */
.client-mom { display: flex; gap: var(--s32); align-items: flex-end; flex-wrap: wrap; }
.client-mom-chart { flex: 1; min-width: 340px; }
.client-bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; border-bottom: 1px solid var(--line-strong); }
.client-bar { flex: 1; background: var(--ink-3); min-height: 2px; position: relative; border-radius: 1px 1px 0 0; }
.client-bar--gap { background: var(--rule-2); }
.client-bar--now { background: var(--ink-1); }
.client-axis {
  display: flex; justify-content: space-between; font-size: var(--t-label);
  color: var(--ink-4); margin-top: var(--s8); border-top: 1px solid var(--line); padding-top: 5px;
}
.client-legend { display: flex; gap: var(--s12); font-size: var(--t-label); color: var(--ink-4); margin-top: var(--s8); flex-wrap: wrap; }
.client-mom-read { display: flex; gap: var(--s24); flex-wrap: wrap; }
.client-mom-n { font-size: var(--t-fig-lg); color: var(--ink-1); line-height: 1.1; }
.client-mom-n--warn { color: var(--warn); }
.client-mom-l { font-size: var(--t-meta); color: var(--ink-3); margin-top: var(--s4); max-width: 16ch; line-height: 1.35; }

/* ── Zone 3 · LATEST — expandable rows, NEW marked from the payload ──
   NEW is a delta, not a claim and not a state: it takes ink weight, never a hue. */
.client-lrow {
  display: flex; gap: var(--s12); align-items: baseline; width: 100%; text-align: left; color: var(--ink-1);
  padding: var(--s8) var(--s16); border: 0; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer; position: relative;
}
.sheet > div:last-child .client-lrow:last-child { border-bottom: 0; }
.sheet > .client-qtoggle { padding: 10px var(--s16); }
.client-lrow:hover { background: var(--surface-2); }
.client-lrow--new::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--ink-1); }
.client-ldate { min-width: 84px; flex: none; font-size: var(--t-meta); color: var(--ink-4); }
.client-lkind {
  min-width: 104px; flex: none; font-size: var(--t-label); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-4);
}
.client-ltitle { flex: 1 1 0; width: 0; min-width: 0; font-size: var(--t-scan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-lrow--open .client-ltitle { white-space: normal; }
.client-lsum { padding: 0 var(--s16) var(--s12) 216px; border-bottom: 1px solid var(--line); }

/* ── Zone 4 · ENGAGEMENTS — the ONLY zone that may state a phase or a gate,
      because a card has an engagement id and the page does not. ── */
.client-eng { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.client-eng + .client-eng { margin-top: var(--s12); }
.client-eng--arch { background: var(--surface-2); }
.client-eng-h { display: flex; gap: var(--s12); align-items: center; padding: var(--s12) var(--s16); flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.client-eng-h h3 { font-size: var(--t-h3); margin: 0; font-weight: 600; }
.client-eng-figs { margin-left: auto; display: flex; gap: var(--s24); }
.client-eng-fig { text-align: right; }
.client-eng-fig-n { font-size: var(--t-ui); color: var(--ink-1); }
.client-eng-fig-l { font-size: var(--t-label); color: var(--ink-4); }
.client-lc { display: flex; gap: var(--s20); align-items: center; flex-wrap: wrap; padding: var(--s12) var(--s16); border-bottom: 1px solid var(--line); }
.client-lc-l { display: flex; align-items: center; gap: var(--s12); min-width: 0; }
.client-lc-r { margin-left: auto; display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; font-size: var(--t-meta); color: var(--ink-3); }
/* the position indicator: nine ticks, weight (not hue) marks where this engagement is */
.client-ptrack { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; width: 132px; flex: none; }
.client-ptick { height: 5px; border-radius: 1px; background: var(--bg-inset); border: 1px solid var(--line); }
.client-ptick--done { background: var(--ink-4); border-color: var(--ink-4); }
.client-ptick--at { background: var(--ink-1); border-color: var(--ink-1); height: 8px; margin-top: -2px; }
.client-eng--arch .client-ptick--at { background: var(--ink-4); border-color: var(--ink-4); }
.client-lc-cap { font-size: var(--t-meta); color: var(--ink-3); white-space: nowrap; }
.client-lc-cap b { color: var(--ink-1); font-weight: 600; }
.client-lc-cap .client-ph { color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.client-lc-gate { font-size: var(--t-ui); color: var(--ink-1); font-weight: 600; }
.client-lc-title { color: var(--ink-2); }
.client-lc-tally { color: var(--ink-3); white-space: nowrap; }
.client-lc-tally b { color: var(--ink-1); font-weight: 600; }
/* the pip track — one pip per automatic condition of THIS engagement's current gate */
.client-pips { display: grid; gap: 3px; width: 56px; flex: none; }
.client-pip { height: 4px; border-radius: 2px; background: var(--bg-inset); border: 1px solid var(--line-strong); }
.client-pip--on { background: var(--ok); border-color: var(--ok); }
.client-pip--off { background: var(--warn-dim); border-color: var(--warn); }
.client-routes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); }
.client-route { background: var(--surface); padding: var(--s12); text-align: left; border: 0; width: 100%; cursor: pointer; color: var(--ink-1); transition: background var(--dt-fast) var(--ease); }
.client-route:hover { background: var(--surface-2); }
.client-route-n { font-size: var(--t-h3); color: var(--ink-1); line-height: 1.1; }
.client-route-n--zero { color: var(--ink-4); }
.client-route-l { font-size: var(--t-meta); color: var(--ink-3); margin-top: 5px; }
.client-route:hover .client-route-l { color: var(--accent); }
.client-route-q { font-size: var(--t-label); color: var(--ink-4); margin-top: 2px; }

/* ── Zone 5 · PEOPLE — contacts on the record, and the people the evidence names.
      A ghost is not a record: its card is dashed, exactly like every other
      unheld thing in this language. ── */
/* Hairlines are drawn INSIDE each card rather than by a gap over a tinted container:
   a client with one contact would otherwise show two tinted phantom cells beside it. */
.client-people {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden;
}
.client-person {
  background: var(--surface); padding: var(--s12) var(--s16);
  box-shadow: inset -1px -1px 0 0 var(--line);
}
.client-person--ghost { background: var(--surface-2); }
.client-person-name { font-size: var(--t-ui); font-weight: 600; color: var(--ink-1); display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; line-height: 1.35; }
.client-person-role { font-size: var(--t-scan); color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.client-person-con { font-size: var(--t-meta); color: var(--ink-3); margin-top: var(--s8); line-height: 1.6; word-break: break-word; }
.client-ghost-mark { border: 1px dashed var(--line-strong); border-radius: var(--r1); padding: 0 6px; font-size: var(--t-label); color: var(--ink-3); }

/* ── Zone 6 · WHAT WE KNOW — facts by conversational group ── */
.client-facts { columns: 2; column-gap: var(--s40); }
.client-facts.sheet--pad { padding: var(--s8) var(--s20) var(--s16); }
.client-fgroup { padding: 0 0 var(--s20); break-inside: avoid; -webkit-column-break-inside: avoid; }
.client-fgroup-h { display: flex; align-items: baseline; gap: var(--s8); padding-bottom: var(--s8); border-bottom: 1px solid var(--line-strong); }
.client-fgroup-h .client-fgroup-n { margin-left: auto; font-size: var(--t-label); color: var(--ink-4); font-weight: 400; letter-spacing: 0; text-transform: none; }
.client-fact { border-bottom: 1px solid var(--line); padding: var(--s8) 0; }
.client-fact-top { display: flex; gap: var(--s12); align-items: baseline; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-1); }
.client-fk { font-size: var(--t-scan); color: var(--ink-3); min-width: 118px; flex: none; }
.client-fval { font-size: var(--t-scan); color: var(--ink-1); flex: 1; min-width: 0; line-height: 1.45; }
.client-fmeta { font-size: var(--t-label); color: var(--ink-4); flex: none; }
.client-fdet { padding: var(--s8) 0 var(--s4) 130px; }
.client-fdet-src { margin-top: var(--s8); display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap; font-size: var(--t-meta); color: var(--ink-3); }
.client-fdet-act { margin-top: var(--s12); display: flex; gap: var(--s6); flex-wrap: wrap; }
.client-fslot { display: flex; align-items: baseline; gap: var(--s12); padding: var(--s4) 0; font-size: var(--t-scan); color: var(--ink-4); }

/* ── Sub-views: the record surfaces the brief summarises. Same page, one level in. ── */
.client-subview-head {
  display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap;
  padding-bottom: var(--s12); border-bottom: 2px solid var(--ink-1); margin-bottom: var(--s16);
}
.client-subview-head h2 { font-size: var(--t-h2); margin: 0; }

/* One open question in the timeline sub-view — a quiet hairline row. */
.client-oq { padding: var(--s8) 0; border-bottom: 1px solid var(--line); }
.client-oq:last-child { border-bottom: none; }

/* Engagement cards keep the kit's .card; only the spacing is ours. */
.eng-card { margin-bottom: var(--s12); }

@media (max-width: 1000px) {
  .client-lc-r { margin-left: 0; }
}
@media (max-width: 920px) {
  .client-facts { columns: 1; }
  .client-routes { grid-template-columns: repeat(3, 1fr); }
  .client-people { grid-template-columns: 1fr; }
  .client-mom-chart { min-width: 0; }
  .client-fdet { padding-left: 0; }
  .client-lsum { padding-left: var(--s16); }
}
@media (max-width: 700px) {
  /* Below tablet width every toolbar row on this page wraps instead of pushing the
     document wide — a wrapped button row beats a horizontally scrolling page, always. */
  .client-page .flex { flex-wrap: wrap; }
  .client-ldate { min-width: 0; }
  .client-lkind { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENTS — the evidence corpus (tab-documents).
   Everything here is prefixed `.docs-` and scoped under `.docs-page`, so it can
   only ever dress this one tab. The instrument rail is NOT redeclared: it reuses
   .client-instr / .client-rail / .client-fld / .client-fl / .client-fv / .client-fd
   verbatim, which is why the five cells measure identically to the client page's.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Rail, zones and pressed-cell filtering: the shared kit (attest.css §7). */

/* ── HOLDS ─────────────────────────────────────────────────────────────────
   One card per KIND of hold, each carrying ONE bulk verb and ONE consequence
   sentence. No card takes a filled control: the masthead keeps the page's single
   primary (ATTEST §5). The 2px left mark is the zone's one loud element. */
.docs-hold {
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  background: var(--surface); margin-bottom: var(--s12); overflow: hidden;
}
.docs-hold-head { display: flex; align-items: flex-start; gap: var(--s16); padding: var(--s16) var(--s20); }
.docs-hold-mark {
  flex: none; width: 2px; align-self: stretch; background: var(--warn);
  margin: calc(var(--s16) * -1) 0 calc(var(--s16) * -1) calc(var(--s20) * -1);
}
.docs-hold--quiet .docs-hold-mark { background: var(--line-strong); }
.docs-hold--done .docs-hold-mark { background: var(--ok); }
.docs-hold--done { background: var(--surface-2); border-color: var(--line); }
.docs-hold-body { flex: 1; min-width: 0; }
.docs-hold-t { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.docs-hold-w {
  margin-top: 5px; font-size: var(--t-scan); color: var(--ink-2);
  line-height: var(--lh-scan); max-width: 74ch;
}
.docs-hold-cta { margin-left: auto; display: flex; gap: var(--s8); align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.docs-hold-drawer {
  border-top: 1px solid var(--line); background: var(--surface-2);
  padding: var(--s12) var(--s20) var(--s16);
}

/* the date drawer — ref · date · what it was detected FROM · filename · tickbox */
.docs-dl { width: 100%; border-collapse: collapse; font-size: var(--t-scan); }
.docs-dl td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.docs-dl tr:last-child td { border-bottom: 0; }
.docs-dl .docs-c-src { color: var(--ink-3); font-size: var(--t-meta); }
.docs-dl .docs-c-file {
  color: var(--ink-3); font-size: var(--t-meta); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 0;
}
.docs-dl tr.docs-off td { opacity: .42; }

/* the pair decider — both halves side by side, exactly two marks */
.docs-pair { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); margin-bottom: var(--s8); }
.docs-pair-why {
  padding: var(--s8) var(--s12); font-size: var(--t-meta); color: var(--ink-3);
  border-bottom: 1px solid var(--line); display: flex; gap: var(--s8); align-items: baseline; flex-wrap: wrap;
}
.docs-pair-grid { display: grid; grid-template-columns: 1fr 1fr; }
.docs-pair-side { padding: var(--s12); min-width: 0; }
.docs-pair-side + .docs-pair-side { border-left: 1px solid var(--line); }
.docs-pair-h { display: flex; gap: var(--s8); align-items: baseline; flex-wrap: wrap; }
.docs-pair-f {
  margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docs-pair-m { margin-top: 6px; font-size: var(--t-meta); color: var(--ink-2); display: flex; gap: 10px; flex-wrap: wrap; }
/* the two deciding marks: weight and a rule, never a hue (ATTEST LAW 2) */
.docs-mark {
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--ink-1); border-bottom: 2px solid var(--ink-1); line-height: 1.3;
}
.docs-pair-verbs {
  display: flex; gap: var(--s8); padding: var(--s8) var(--s12) var(--s12);
  flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line);
}

/* ── toolbar, facets, selection bar ────────────────────────────────────────
   These are the CONTROLS OF THE CORPUS SHEET and they live inside it: the toolbar
   is the container's head band, the search report and the selection bar are rows
   under it. Nothing here floats on the bare field (the operator's design law). */
.docs-toolbar {
  display: flex; gap: var(--s12); align-items: center; flex-wrap: wrap;
  padding: var(--s12) var(--s16); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.docs-chip-n { color: var(--ink-4); margin-left: 5px; font-variant-numeric: tabular-nums; }
.chip.active .docs-chip-n { color: var(--accent); opacity: .8; }
.docs-chipnote { font-size: var(--t-meta); color: var(--ink-4); align-self: center; }
.docs-search { position: relative; margin-left: auto; }
.docs-searchnote {
  font-size: var(--t-meta); color: var(--ink-3);
  padding: var(--s8) var(--s16); border-bottom: 1px solid var(--line); background: var(--surface);
}
.docs-selbar {
  display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap;
  padding: var(--s8) var(--s16); font-size: var(--t-scan);
  background: var(--accent-dim); border-bottom: 1px solid var(--line);
}

/* No rows under the current filters — stated INSIDE the sheet, with its own control. */
.docs-empty-in { padding: var(--s32) var(--s16); text-align: center; background: var(--surface); }

/* ── the grid (kit .sheet + table.tbl carry the container and the head) ──
   ☐ · EFFECTIVE · REF · DOCUMENT · YIELD · HOLD, chunked by month of effective
   date. */
.docs-grid tbody tr { cursor: pointer; }
.docs-grid tbody tr:hover { background: var(--surface-2); }
.docs-grid tbody tr.docs-row--sel { background: var(--accent-dim); }
.docs-grid tbody tr.docs-row--sup td { color: var(--ink-4); }
.docs-grid tr.docs-group td {
  background: var(--bg); border-bottom: 1px solid var(--line-strong); cursor: default;
  padding: var(--s20) 8px 5px;
}
.docs-grid tr.docs-group:hover td { background: var(--bg); }
.docs-grouplab { display: flex; align-items: baseline; gap: 10px; }
.docs-c-sel { width: 30px; } .docs-c-date { width: 116px; } .docs-c-ref { width: 84px; }
.docs-c-yield { width: 136px; } .docs-c-hold { width: 210px; }
.docs-sum { color: var(--ink-1); line-height: 1.4; display: flex; gap: 6px; align-items: baseline; max-width: 72ch; }
.docs-sum-txt { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.docs-file {
  margin-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 64ch;
}
.docs-form { margin-top: 4px; font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.docs-date-unc { color: var(--warn); }

/* YIELD: magnitude as LENGTH and ink weight, never a hue (ATTEST LAW 2). */
.docs-yield { display: flex; align-items: center; gap: var(--s8); }
.docs-ybar { width: 52px; height: 8px; background: var(--bg-inset); border: 1px solid var(--line); position: relative; flex: none; }
.docs-ybar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-1); display: block; }
.docs-ydark { font-size: var(--t-meta); color: var(--ink-4); margin-top: 3px; }
.docs-holds-cell { display: flex; gap: 4px; flex-wrap: wrap; }

/* One tag shape for the whole tab: a hold, a subject, a state. */
.docs-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-label);
  padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: var(--r1);
  color: var(--ink-2); background: var(--surface-2); white-space: nowrap; line-height: 1.6;
}
.docs-tag--attend { color: var(--warn); border-color: var(--warn); background: var(--warn-dim); }
.docs-tag--broken { color: var(--err); border-color: var(--err); background: var(--err-dim); }
.docs-tag--ok { color: var(--ok); border-color: var(--ok); background: var(--ok-dim); }

/* ── the panel ─────────────────────────────────────────────────────────────
   Yield first: the question the corpus exists to answer, before the furniture. */
.docs-sec { padding-top: var(--s24); }
.docs-sec:first-child { padding-top: 0; }
.docs-sec + .docs-sec { border-top: 1px solid var(--line); margin-top: var(--s24); }
.docs-sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s12); flex-wrap: wrap; }
.docs-dl2 { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s16); margin: 0; font-size: var(--t-scan); }
.docs-dl2 dt { color: var(--ink-4); font-size: var(--t-meta); white-space: nowrap; }
.docs-dl2 dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.docs-evblock { padding: var(--s12) 0; border-bottom: 1px solid var(--line); }
.docs-evblock:last-child { border-bottom: 0; }
.docs-fold summary { cursor: pointer; font-size: var(--t-scan); color: var(--ink-3); list-style: none; }
.docs-fold summary::-webkit-details-marker { display: none; }
.docs-fold summary::before { content: '▸ '; color: var(--ink-4); }
.docs-fold[open] summary::before { content: '▾ '; }
.docs-disposals {
  margin-top: var(--s12); padding: var(--s12); border: 1px solid var(--line);
  border-radius: var(--r2); background: var(--surface-2);
}
.docs-note { font-size: var(--t-meta); color: var(--ink-4); margin-top: var(--s8); }

/* An inline verb that reads as a link: the accent is INTERACTION, and this is the
   only thing on the page that carries it besides the one filled control. */
.docs-page .link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-align: left;
}
.docs-page .link-btn:hover { text-decoration: underline; }

/* ── the page-level drop target ────────────────────────────────────────────
   The permanent ~110px drop zone and its two lines of instruction are gone
   (Krug p.78): the PAGE is the target, and the overlay exists only while a drag
   is actually over it. */
.docs-droplay {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: var(--scrim-c); pointer-events: none;
}
.docs-dropcard {
  background: var(--surface); border: 2px dashed var(--accent); border-radius: var(--r8);
  padding: var(--s24) var(--s32); font-size: var(--t-ui); color: var(--ink-1); box-shadow: var(--elev-2);
}

@media (max-width: 980px) {
  .docs-c-yield, .docs-c-hold { width: auto; }
  .docs-pair-grid { grid-template-columns: 1fr; }
  .docs-pair-side + .docs-pair-side { border-left: 0; border-top: 1px solid var(--line); }
  .docs-search { margin-left: 0; }
}

/* ══ CLIENTS BOARD ('#clients') — THE PORTFOLIO BOARD ═══════════════════════
   The only surface on which the whole portfolio exists at once. Its hierarchy is
   built from SCALE and POSITION, never from a hue (SWD p.105; Laws of UX p.100):
   lead card → move rows → quiet rows → folded band. Colour is spent only on state
   (--attend on a ball and a silence) and interaction (--act).

   THE SHEET DISCIPLINE: content and controls sit on white sheets against the warm
   field; the field shows only BETWEEN them. The instrument block (rail + filter
   bar) is one sheet; every zone's rows live inside a bordered container. Nothing
   floats. */
/* Shell, masthead, instrument rail and filter band: the shared kit
   (attest.css §7 — .page / .mast / .instr / .rail / .fld / .instr-band).
   Only the board's own content classes live on. */
.cl-notice { font-size: var(--t-meta); color: var(--warn); }
.cl-chips { display: flex; gap: var(--s4); flex-wrap: wrap; }
.cl-board .cl-chips .chip { padding: 2px 7px; font-weight: 400; }
.cl-board .cl-chips .chip.active { font-weight: 600; }
.cl-cnt { font-variant-numeric: tabular-nums; opacity: 0.72; margin-left: 5px; }
.cl-search { margin-left: auto; position: relative; }
.cl-search input {
  width: 280px; padding: 4px 26px 4px 9px; font-family: inherit; font-size: var(--t-scan);
  border: 1px solid var(--line-strong); border-radius: var(--r1); background: var(--sheet); color: var(--ink-1);
}
.cl-search input::placeholder { color: var(--ink-4); }
.cl-search .clr {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: 0; background: none;
  color: var(--ink-4); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px;
}

/* zones: kit .zone / .zone-head / .zone-count */
.cl-znote { font-size: var(--t-meta); color: var(--ink-3); margin: 0 0 var(--s12); max-width: var(--measure-read); }

/* ── the lead move card — the ONE loud element in zone 1 (kit .sheet--edge) ── */
.cl-lead { padding: 18px 20px; margin-bottom: var(--s12); }
/* ── a client row, inside the standard bordered container (kit .sheet) ── */
.cl-row {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--line); padding: 15px 18px; cursor: pointer; color: inherit;
  transition: background var(--dt-fast) var(--ease);
}
.cl-row:hover { background: var(--surface-2); }
.cl-band > .cl-row:first-child { border-top: 0; }

.cl-idline { display: flex; align-items: baseline; gap: var(--s12); flex-wrap: wrap; }
.cl-name { font-size: var(--t-h3); font-weight: 600; color: var(--ink-1); letter-spacing: -0.015em; }
.cl-lead .cl-name { font-size: var(--t-h2); }
.cl-ident { font-size: var(--t-meta); color: var(--ink-3); display: flex; gap: var(--s8); align-items: baseline; flex-wrap: wrap; }
.cl-statelabel {
  font-size: var(--t-label); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; border: 1px solid var(--line-strong); border-radius: var(--r1); padding: 1px 6px;
}
.cl-engs { display: flex; gap: var(--s12); flex-wrap: wrap; margin-top: var(--s6); font-size: var(--t-meta); color: var(--ink-3); }
.cl-eng { display: inline-flex; gap: 6px; align-items: baseline; }
.cl-eng .ph { color: var(--ink-4); }

.cl-move { margin-top: var(--s12); }
.cl-movetitle { font-size: var(--t-lead); font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
.cl-row .cl-movetitle { font-size: var(--t-ui); }
.cl-why { margin-top: var(--s6); font-size: var(--t-scan); line-height: 1.55; color: var(--ink-2); max-width: var(--measure-read); }
.cl-verbs { margin-top: var(--s12); display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap; }
.cl-more { font-size: var(--t-meta); color: var(--ink-3); }

/* the right-hand figures — a fixed two-slot readout on every row */
.cl-rowgrid { display: flex; gap: var(--s24); align-items: flex-start; }
.cl-rowmain { flex: 1; min-width: 0; }
.cl-figs { flex: none; display: grid; grid-template-columns: repeat(2, minmax(84px, auto)); gap: var(--s20); text-align: right; }
.cl-fig .k { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-4); line-height: 1; }
.cl-fig .v { margin-top: var(--s8); font-size: var(--t-h3); font-weight: 600; line-height: 1; color: var(--ink-1); }
.cl-fig .v.warn { color: var(--warn); }
.cl-fig .v.nil { color: var(--ink-4); font-weight: 400; }
.cl-fig .u { font-size: var(--t-meta); color: var(--ink-3); margin-left: 3px; font-weight: 400; }
.cl-fig .d { margin-top: 5px; font-size: var(--t-label); color: var(--ink-4); line-height: 1.2; }

/* ── the not-engaged band: rows that do NOT navigate on click carry the disposals ── */
.cl-fold {
  display: flex; align-items: center; gap: var(--s12); width: 100%; background: var(--surface-2);
  border: 0; padding: 9px var(--s16); cursor: pointer; color: var(--ink-2); text-align: left;
}
.cl-fold:hover { background: var(--bg-inset); }
.cl-fold .cl-foldgo { margin-left: auto; font-size: var(--t-meta); color: var(--accent); }
.cl-dead {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s12); align-items: center;
  border-top: 1px solid var(--line); padding: 11px var(--s16);
}
.cl-dead:hover { background: var(--surface-2); }
.cl-deadname { font-size: var(--t-ui); color: var(--ink-1); font-weight: 500; display: flex; gap: var(--s8); align-items: baseline; flex-wrap: wrap; }
.cl-deadwhat { font-size: var(--t-meta); color: var(--ink-3); margin-top: 3px; }
.cl-deadverbs { display: flex; gap: var(--s8); flex-wrap: wrap; justify-content: flex-end; }

/* ── loading: the rail's five cells and the zone rhythm are PRESERVED ── */
.cl-skel { height: 12px; border-radius: 2px; background: var(--bg-inset); animation: cl-pulse 1.2s var(--ease) infinite; }
@keyframes cl-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }

@media (max-width: 720px) {
  .cl-rowgrid { flex-direction: column; }
  .cl-figs { text-align: left; }
  .cl-search { margin-left: 0; width: 100%; }
  .cl-search input { width: 100%; }
}

/* ── Dashboard ('#dashboard') — THE PORTFOLIO TRIAGE SURFACE ─────────────────
   The operator's landing page, and the reference reading for the visual standard
   (UNIFIED-DESIGN §1–§9): content sits on white SHEETS against the warm field,
   every structural element closes on a visible rule, and the field shows only
   BETWEEN the sheets. Tone is carried by text colour and by the one loud card's
   2px left border — never by tinting a row or a container.

   One payload (GET /api/dashboard/brief), one column, four zones in a fixed
   order — next move · the clocks · moved without you · engagements. */
.dash { overflow-wrap: anywhere; }

/* Masthead and rail: the shared kit (attest.css §7 — .mast / .instr / .rail /
   .fld). Only the dashboard's own tones and stale label live here. */
/* A stale poll is LABELLED, never blank: the numbers above it are still the last good ones. */
.dash-stale { color: var(--warn); }

/* Tone is TEXT COLOUR. `nil` (counted, zero / nothing on record) and `unknown`
   (not counted) are different facts and render differently — B8. */
.dash-tone--ink { color: inherit; }
.dash-tone--ok { color: var(--ok); }
.dash-tone--warn, .dash-tone--attend { color: var(--warn); }
.dash-tone--err, .dash-tone--broken { color: var(--err); }
.dash-tone--nil { color: var(--ink-4); }
.dash-tone--unknown { color: var(--ink-4); border-bottom: 1px dotted var(--ink-4); }

/* ── Zone rhythm — kit .zone / .zone-head; the flash on in-page routing is ours ── */
.dash .zone-head .u-label { transition: color 300ms var(--ease); }
.dash .zone-head.is-flash .u-label { color: var(--accent); }
.dash .zone-head .btn { align-self: center; }
.dash-right { text-align: right; }

/* ── Zone 1 · NEXT MOVE — one lead at reading density, rows under it ── */
.dash-lead {
  padding: 18px var(--s20); display: flex; gap: var(--s20); align-items: flex-start; flex-wrap: wrap;
}
.dash-lead--ok { border-left-color: var(--ok); }
.dash-lead--broken { border-left-color: var(--err); }
.dash-lead-body { flex: 1 1 460px; min-width: 0; }
.dash-lead-title {
  font-size: var(--t-lead); font-weight: 600; line-height: 1.28;
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
}
/* The page's ONE reading surface — 15.5px / 1.62 inside 68ch. */
.dash-lead-why {
  margin-top: var(--s8); font-size: var(--t-read); line-height: var(--lh-read);
  color: var(--ink-2); max-width: var(--measure-read);
}
.dash-chips { margin-top: 11px; display: flex; gap: 7px; flex-wrap: wrap; }
.dash-lead-route { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.dash-rank { font-size: var(--t-label); color: var(--ink-4); font-family: var(--font-mono, monospace); }

.dash-moves { margin-top: var(--s12); }
.dash-move {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s12);
  align-items: start; padding: 11px var(--s16); border-top: 1px solid var(--line);
}
.dash-moves .dash-move:first-child { border-top: 0; }
.dash-move .dash-rank { padding-top: 2px; }
.dash-move-body { min-width: 0; }
.dash-move-title { font-size: var(--t-ui); font-weight: 600; display: flex; gap: var(--s8); align-items: baseline; flex-wrap: wrap; }
.dash-move-why { font-size: var(--t-scan); color: var(--ink-3); line-height: 1.5; margin-top: 3px; max-width: 78ch; }
.dash-move-act { display: flex; align-items: center; gap: var(--s8); }
.dash-disclose {
  width: 100%; text-align: left; padding: 9px var(--s16); border: 0; border-top: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-3); font-size: var(--t-scan); cursor: pointer;
}
.dash-disclose:hover { color: var(--accent); }

/* An engagement code is an identity: mono, bordered, never a hue. */
.dash-tag {
  font-size: var(--t-label); color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; white-space: nowrap;
}
.dash-gate-tag { font-size: var(--t-label); color: var(--warn); white-space: nowrap; }

/* ── Zone 2 · THE CLOCKS ── */
.dash-clock {
  display: grid; grid-template-columns: minmax(0, 1fr) 122px 96px 118px; gap: var(--s16);
  align-items: center; padding: 10px var(--s16); border-top: 1px solid var(--line);
}
.dash-table .dash-clock:first-child { border-top: 0; }
.dash-clock--head { background: var(--surface-2); padding-top: 7px; padding-bottom: 7px; }
.dash-clock-what { min-width: 0; }
.dash-clock-name { font-size: var(--t-scan); color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-clock-sub { font-size: var(--t-meta); color: var(--ink-3); margin-top: 2px; }
.dash-clock-date { font-size: var(--t-scan); color: var(--ink-2); text-align: right; }
.dash-clock-delta { font-size: var(--t-scan); font-weight: 600; text-align: right; }
.dash-clock-route { display: flex; justify-content: flex-end; }

/* ── Zone 3 · MOVED WITHOUT YOU ── */
.dash-feed-note {
  padding: var(--s12) var(--s16); font-size: var(--t-scan); color: var(--ink-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.dash-entry {
  padding: 13px var(--s16); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: var(--s16); align-items: start;
}
.dash-feed .dash-entry:first-child { border-top: 0; }
.dash-feed-note + .dash-entry { border-top: 0; }
/* NEW is a delta, not a state: it takes ink weight, never a hue. */
.dash-entry--new { box-shadow: inset 2px 0 0 0 var(--ink-1); }
.dash-entry-when { font-size: var(--t-meta); color: var(--ink-3); padding-top: 2px; }
.dash-entry-body { min-width: 0; }
.dash-entry-what { font-size: var(--t-scan); color: var(--ink-1); display: flex; gap: var(--s8); align-items: baseline; flex-wrap: wrap; }
.dash-entry-detail { font-size: var(--t-meta); color: var(--ink-3); margin-top: 3px; }
.dash-entry .ev { margin-top: var(--s8); }
.dash-entry-act { display: flex; align-items: center; }

/* ── Zone 4 · ENGAGEMENTS — the record surface. One card, one quiet header, one
      position track, one gate tally, one route grid, one ⋯. No filled control. ── */
.dash-engs { display: flex; flex-direction: column; gap: var(--s16); }
.dash-eng {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 2px solid var(--line-strong); padding: 15px 18px 14px;
}
.dash-eng--arch { opacity: .62; }
.dash-eng-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s16); flex-wrap: wrap; }
.dash-eng-id-wrap { min-width: 0; }
.dash-eng-id { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.dash-eng-code { font-size: var(--t-ui); font-weight: 600; color: var(--ink-1); }
.dash-eng-name { font-size: var(--t-ui); font-weight: 500; color: var(--ink-1); }
.dash-eng-meta { font-size: var(--t-meta); color: var(--ink-3); margin-top: 3px; }
.dash-eng-verbs { display: flex; align-items: center; gap: var(--s8); }
.dash-eng-life { display: flex; gap: var(--s24); align-items: flex-end; margin-top: 13px; flex-wrap: wrap; }
.dash-track { flex: 1 1 300px; min-width: 220px; }
/* Nine equal segments, each a 2px top rule; the current one is full ink over the
   inset well. POSITION, never a hue. */
.dash-ticks { display: flex; gap: 4px; align-items: flex-end; }
.dash-tick { flex: 1; min-width: 0; height: 14px; border-top: 2px solid var(--line); background: transparent; }
.dash-tick.is-passed { border-top-color: var(--ink-4); }
.dash-tick.is-current { border-top-color: var(--ink-1); background: var(--bg-inset); }
.dash-track-cap { margin-top: var(--s6); font-size: var(--t-meta); color: var(--ink-3); }
.dash-phase { color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dash-gatebox { flex: 0 0 auto; text-align: right; max-width: 40ch; }
.dash-gate-line { font-size: var(--t-meta); color: var(--ink-3); line-height: 1.5; }
.dash-pips { display: inline-flex; gap: 3px; vertical-align: -1px; margin: 0 var(--s6); }
.dash-pip { width: 7px; height: 7px; border-radius: 50%; border: 1px dashed var(--ink-4); display: inline-block; }
.dash-pip.is-met { background: var(--ok); border: 1px solid var(--ok); }
.dash-routes {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: var(--s16);
  background: var(--line); border: 1px solid var(--line); overflow: hidden;
}
.dash-route { background: var(--surface); border: 0; padding: var(--s8) 9px 9px; text-align: left; cursor: pointer; min-width: 0; color: var(--ink-1); }
.dash-route:hover { background: var(--accent-dim); }
.dash-route-k { display: block; }
/* The COUNT is always ink; the QUALIFIER carries the state hue. Tinting the count
   would colour one column from another column's value. */
.dash-route-n { display: block; font-size: var(--t-h3); font-weight: 600; margin-top: 3px; color: var(--ink-1); }
.dash-route-n.is-nil { color: var(--ink-4); }
.dash-route-q { display: block; font-size: var(--t-label); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-route-q.dash-tone--ink, .dash-route-q.dash-tone--nil { color: var(--ink-3); }

/* The row's overflow menu: the shared kit (attest.css §7 .rowmenu). */

@media (max-width: 1080px) {
  .dash-routes { grid-template-columns: repeat(3, 1fr); }
  .dash-gatebox { text-align: left; }
}
@media (max-width: 720px) {
  .dash-clock { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s6); }
  .dash-clock--head { display: none; }
  .dash-clock-route { grid-column: 1 / -1; justify-content: flex-start; }
  .dash-entry { grid-template-columns: minmax(0, 1fr); }
  .dash-move { grid-template-columns: 22px minmax(0, 1fr); }
  .dash-move-act { grid-column: 2; }
}

/* The dashboard's empty states are STATED RESULTS, not wells. The shared EmptyState card is
   the zone's own container (dashed, per UNIFIED-DESIGN §9) and its sentence sits at the same
   left margin and reading density as every other sentence on the page — the kit's centred
   48px-on-48px well would make "0 dated obligations exist" the largest thing in the zone. */
.dash .empty-state-card { padding: 0; }
.dash .empty-state { text-align: left; padding: var(--s16) var(--s20); }
.dash .empty-state-title { font-size: var(--t-h3); color: var(--ink-1); margin-bottom: var(--s6); }
.dash .empty-state-desc { max-width: 64ch; margin: 0; font-size: var(--t-scan); line-height: 1.55; }
.dash .empty-state .flex { justify-content: flex-start; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRACTING — the signable-document instrument (tab-contracting).
   Everything is prefixed `.ctr-` and scoped under `.ctr-page`. The instrument
   rail is NOT redeclared: it reuses .client-instr / .client-rail / .client-fld
   verbatim, so its five cells measure identically to the client page's.

   THE OPERATOR'S DESIGN LAW throughout: content sits on WHITE SHEETS against
   the warm field, controls live INSIDE those sheets, and the field shows only
   between them. Nothing here floats on the bare field.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Masthead, rail and zones: the shared kit (attest.css §7). */
.ctr-kicker { letter-spacing: .11em; margin-bottom: var(--s2); }
.ctr-mast-sub .src-ref { color: var(--ink-2); }

/* ── the verdict: one sentence, and the page's ONE filled control — a band
      INSIDE the instrument sheet (kit .instr-band) ── */
.instr .ctr-verdict { padding: 12px var(--s16); gap: var(--s16); }
.ctr-verdict-txt { font-size: var(--t-lead); line-height: 1.35; flex: 1; min-width: 280px; }
.ctr-verdict-sub { font-size: var(--t-meta); color: var(--ink-3); margin-top: 4px; }
.ctr-verdict-act { flex: none; }

.ctr-zroute { margin-left: auto; }
.ctr-note { font-size: var(--t-meta); color: var(--ink-3); line-height: 1.5; }
.ctr-muted { font-size: var(--t-meta); color: var(--ink-4); }

/* ── the lamp: three registers, never six rows at one weight in one hue ──── */
.ctr-lamp {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: middle; flex: none; margin-right: 5px;
}
.ctr-lamp--broken { background: var(--err); }
.ctr-lamp--attend { background: transparent; border: 1.5px solid var(--warn); }
.ctr-lamp--ok { background: var(--ok-line); }

.ctr-split {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: var(--t-meta); color: var(--ink-4); padding: 0 0 10px;
}
.ctr-split b { color: var(--ink-2); font-weight: 600; }

/* ── readiness rows ──────────────────────────────────────────────────────── */
.ctr-rd {
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); margin-bottom: var(--s8); overflow: hidden;
}
.ctr-rd.is-open { border-color: var(--line-strong); }
.ctr-rd-head {
  display: flex; align-items: flex-start; gap: var(--s12); width: 100%;
  text-align: left; background: none; border: 0; padding: 11px 14px;
  cursor: pointer; font: inherit; color: var(--ink-1);
}
.ctr-rd-head:hover { background: var(--surface-2); }
.ctr-rd-head > .ctr-lamp { margin-top: 6px; }
.ctr-rd--broken { border-left: 2px solid var(--err); }
.ctr-rd--broken .ctr-rd-title { font-weight: 500; }
.ctr-rd--ok { background: var(--surface-2); }
.ctr-rd--ok .ctr-rd-title { color: var(--ink-3); }
.ctr-rd-title { flex: 1; font-size: var(--t-ui); line-height: 1.4; min-width: 0; }
.ctr-n { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.ctr-rd-route { flex: none; font-size: var(--t-meta); color: var(--accent); white-space: nowrap; padding-top: 2px; }
.ctr-rd-chev { flex: none; color: var(--ink-4); transition: transform var(--dt-fast) var(--ease); }
.ctr-rd-body {
  border-top: 1px solid var(--line); background: var(--surface-2);
  display: grid; grid-template-columns: 1fr minmax(220px, 300px);
  gap: var(--s20); padding: var(--s12) 14px 14px var(--s40);
}
.ctr-rd-fix { border-left: 1px solid var(--line); padding-left: var(--s16); }
.ctr-rd-fix .u-label { display: block; margin-bottom: var(--s6); }
.ctr-rd-fix p { font-size: var(--t-scan); color: var(--ink-2); line-height: 1.5; margin: 0 0 10px; }
.ctr-why {
  font-size: var(--t-scan); color: var(--ink-2); line-height: 1.5;
  max-width: var(--measure-read); margin: 0 0 10px;
}
.ctr-item { margin: 0 0 14px; }
.ctr-item:last-child { margin-bottom: 0; }
.ctr-itemhead { font-size: var(--t-meta); color: var(--ink-3); margin-bottom: 4px; }
.ctr-lint {
  font-size: var(--t-meta); color: var(--warn); margin-top: 5px;
  max-width: var(--measure-read); line-height: 1.45;
}
.ctr-lint--err { color: var(--err); }

/* candidate rows — a blank contract variable the record can fill */
.ctr-cand {
  display: grid; grid-template-columns: minmax(150px, 190px) 1fr auto;
  gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line);
}
.ctr-cand:first-of-type { border-top: 0; }
.ctr-cand-k { font-size: var(--t-meta); color: var(--ink-3); }
.ctr-cand-v { font-size: var(--t-scan); min-width: 0; }
.ctr-cand-val { font-family: var(--serif); font-size: var(--t-read); }
.ctr-cand-src { display: block; font-size: var(--t-label); color: var(--ink-4); margin-top: 2px; }

/* the gate, quoted — the engine's own condition strings, never recounted */
.ctr-gate {
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-2); padding: var(--s12) 14px; margin-top: var(--s12);
}
.ctr-gate-list { list-style: none; margin: var(--s8) 0 0; padding: 0; }
.ctr-gate-list li {
  display: flex; align-items: baseline; gap: var(--s8);
  padding: 4px 0; font-size: var(--t-scan); flex-wrap: wrap;
}
.ctr-gate-l { color: var(--ink-1); }
.ctr-gate-d { color: var(--ink-3); font-size: var(--t-meta); margin-left: auto; }

/* ── the pipeline: position and weight, never a hue (LAW 2) ───────────────── */
.ctr-pipe {
  display: flex; border: 1px solid var(--line); border-radius: var(--r2);
  overflow: hidden; background: var(--surface); margin-bottom: 14px;
}
.ctr-pipe-step { flex: 1; padding: 9px var(--s12); border-left: 1px solid var(--line); min-width: 0; }
.ctr-pipe-step:first-child { border-left: 0; }
.ctr-pipe-k {
  font-size: var(--t-label); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-4);
}
.ctr-pipe-v {
  font-size: var(--t-meta); color: var(--ink-4); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums lining-nums;
}
.ctr-pipe-step.is-done .ctr-pipe-k, .ctr-pipe-step.is-done .ctr-pipe-v { color: var(--ink-3); }
.ctr-pipe-step.is-now { background: var(--bg-inset); box-shadow: inset 0 -2px 0 var(--ink-1); }
.ctr-pipe-step.is-now .ctr-pipe-k { color: var(--ink-1); }
.ctr-pipe-step.is-now .ctr-pipe-v { color: var(--ink-2); }

/* ── the version chips ───────────────────────────────────────────────────── */
.ctr-verlist { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; margin-bottom: 14px; }
.ctr-verchip {
  display: inline-flex; align-items: center; gap: var(--s6);
  border: 1px solid var(--line-strong); border-radius: var(--r1);
  background: var(--surface); color: var(--ink-1); padding: 3px 9px;
  font-size: var(--t-meta); cursor: pointer;
}
.ctr-verchip:hover { background: var(--surface-2); }
.ctr-verchip.is-sel { background: var(--accent-dim); border-color: var(--accent-mid); }

/* ── document workspace ──────────────────────────────────────────────────── */
.ctr-doc { display: grid; grid-template-columns: minmax(330px, 430px) 1fr; gap: var(--s16); align-items: start; }
.ctr-doc-left > .card { margin-bottom: 14px; }
.ctr-page .card-b { padding: 11px 13px; }
.ctr-fill { margin-left: auto; font-size: var(--t-meta); color: var(--ink-4); max-width: 46ch; text-align: right; }
.ctr-cardverbs {
  display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap;
  margin-top: var(--s12); padding-top: var(--s8); border-top: 1px solid var(--line);
}
.ctr-dirty { font-size: var(--t-meta); color: var(--warn); }
.ctr-blanknote { font-size: var(--t-label); color: var(--warn); margin-top: 3px; }

.ctr-grpline { display: flex; align-items: baseline; gap: var(--s8); margin: 14px 0 var(--s6); }
.ctr-grpline:first-child { margin-top: 0; }
.ctr-grpline .u-label { color: var(--ink-3); }
.ctr-cnt { margin-left: auto; font-size: var(--t-meta); color: var(--ink-4); }

.ctr-fieldrow { display: grid; gap: 2px; padding: 5px 0; border-top: 1px solid var(--line); }
.ctr-fl { font-size: var(--t-meta); color: var(--ink-3); }
.ctr-fv { font-size: var(--t-scan); color: var(--ink-1); word-break: break-word; }
.ctr-fv.is-blank { color: var(--warn); }
.ctr-fv.is-quiet { color: var(--ink-4); }

.ctr-secrow {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 6px 0; border: 0; border-top: 1px solid var(--line);
  background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink-1);
}
.ctr-secrow:hover { background: var(--surface-2); }
.ctr-sn { font-family: var(--mono); font-size: var(--t-label); color: var(--ink-4); width: 20px; flex: none; }
.ctr-st { font-size: var(--t-scan); flex: 1; min-width: 0; }
.ctr-sw { font-size: var(--t-meta); color: var(--ink-3); text-align: right; max-width: 46%; }
.ctr-sw--attend { color: var(--warn); }
.ctr-sw--broken { color: var(--err); }
.ctr-secrow.is-sel { background: var(--accent-dim); }

.ctr-clauserow {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  border-top: 1px solid var(--line); font-size: var(--t-scan);
}
.ctr-ck { flex: 1; min-width: 0; }
.ctr-cv { font-size: var(--t-label); color: var(--ink-3); }

.ctr-preview { position: sticky; top: 14px; overflow: hidden; }
.ctr-previewbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: var(--s8) 13px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: var(--t-meta);
}
.ctr-previewbar-end { margin-left: auto; display: flex; gap: var(--s8); align-items: center; }
/* The document is PAPER in both themes, because it prints. */
.ctr-frame { display: block; width: 100%; height: 64vh; min-height: 420px; border: 0; background: #fff; }

/* ── tables (kit table.tbl carries the head and the rows) ────────────────── */
.ctr-t td { vertical-align: middle; }
.ctr-tscroll { overflow-x: auto; }
.ctr-t .form-input, .ctr-t .form-select { min-width: 0; }
.ctr-row-edit td { background: var(--accent-dim); }
.ctr-total td { background: var(--surface-2); }
.ctr-ord { color: var(--ink-4); white-space: nowrap; }
.ctr-move {
  background: none; border: 0; color: var(--ink-4); cursor: pointer;
  font-size: var(--t-scan); padding: 0 3px; line-height: 1;
}
.ctr-move:hover:not(:disabled) { color: var(--ink-1); }
.ctr-move:disabled { opacity: .3; cursor: default; }
.ctr-rowverbs { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.ctr-check { display: inline-flex; align-items: center; gap: var(--s6); font-size: var(--t-meta); cursor: pointer; }
.ctr-warncell { color: var(--warn); font-size: var(--t-meta); display: inline-flex; align-items: center; }
.ctr-okcell { color: var(--ok); font-size: var(--t-scan); }
/* the controls of the schedule sheet, inside the sheet */
.ctr-sheetfoot {
  display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap;
  padding: var(--s12) 13px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.ctr-sheetfoot .form-input { flex: 0 1 240px; }

/* ── one tag shape for the whole tab: a state, a kind, a flag ─────────────── */
.ctr-tag {
  display: inline-block; font-size: var(--t-label); padding: 1px 6px; margin-left: 4px;
  border-radius: var(--r1); border: 1px solid var(--line-strong);
  color: var(--ink-2); background: var(--surface-2); white-space: nowrap; line-height: 1.6;
}
.ctr-tag:first-child { margin-left: 0; }
.ctr-tag--strong { border-color: var(--ink-3); color: var(--ink-1); }
.ctr-tag--ok { border-color: var(--ok-line); color: var(--ok); background: var(--ok-dim); }
.ctr-tag--attend { border-color: var(--warn); color: var(--warn); background: var(--warn-dim); }

/* ── change-request list ─────────────────────────────────────────────────── */
.ctr-crrow {
  display: grid; grid-template-columns: 110px 1fr 160px auto 20px; gap: var(--s12);
  align-items: baseline; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--line); padding: 10px 3px;
  cursor: pointer; font: inherit; color: var(--ink-1);
}
.ctr-crrow:last-child { border-bottom: 0; }
.ctr-crrow:hover { background: var(--surface-2); }
.ctr-crt { font-size: var(--t-scan); min-width: 0; }
.ctr-crm { font-size: var(--t-meta); color: var(--ink-3); }
.ctr-crt .ctr-crm { display: block; margin-top: 2px; }
/* the superseded half of a revision — struck, quiet, still readable */
.ctr-ev-was { color: var(--ink-3); text-decoration: line-through; border-left-color: var(--line-strong); }

/* ── the record drawer ───────────────────────────────────────────────────── */
.ctr-drawer {
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-2); margin-top: 30px;
}
.ctr-drawer-h {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 11px 14px; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink-1);
}
.ctr-drawer-h .u-label { color: var(--ink-3); }
.ctr-dsub { font-size: var(--t-meta); color: var(--ink-4); margin-left: auto; }
.ctr-drawer-b { padding: 0 14px 16px; border-top: 1px solid var(--line); }
.ctr-drawer-b > .card { background: var(--surface); }
.ctr-diffbar {
  display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap;
  padding: var(--s12); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); margin-bottom: 14px;
}
.ctr-clauselib { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--s16); align-items: start; }

/* ── narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ctr-doc { grid-template-columns: 1fr; }
  .ctr-preview { position: static; }
}
@media (max-width: 900px) {
  .ctr-rd-body { grid-template-columns: 1fr; padding-left: 14px; }
  .ctr-rd-fix { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s12); }
  .ctr-clauselib { grid-template-columns: 1fr; }
  .ctr-crrow { grid-template-columns: 100px 1fr; row-gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REGISTER ('#register') — THE CONTRACT-BEARING HEART.
   Everything here is prefixed `.reg-` and scoped under `.reg-page`.

   THE SHEET DISCIPLINE: content and controls sit on white sheets against the
   warm field; the field shows only BETWEEN them. The ledger is one sheet closed
   at the top by the page's single 2px ink rule; the obligation is a sheet with a
   2px state edge; each contested question is a row inside one band; the grid's
   toolbar, tag row, selection bar, search report and footer all live INSIDE the
   grid's own sheet as its head and foot bands. Nothing floats.

   COLOUR is spent on state (--warn on a shortfall, --ok on a clear condition)
   and interaction (--accent), and on nothing else. Weight, coverage and category
   are carried by ink, case, shape and position (ATTEST LAW 2).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── masthead: the shared kit (attest.css §7 .mast) ── */

/* a small menu that keeps the second-rank verbs off the masthead (Export, More) */
.reg-menu { position: relative; }
.reg-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 210px;
  background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r2);
  box-shadow: var(--elev-1); padding: var(--s4); display: flex; flex-direction: column;
}
.reg-menu-list a, .reg-menu-list button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 6px 9px; font-size: var(--t-scan); color: var(--ink-2); cursor: pointer;
  border-radius: var(--r1); text-decoration: none;
}
.reg-menu-list a:hover, .reg-menu-list button:hover { background: var(--surface-2); color: var(--ink-1); }
.reg-menu-list button.danger { color: var(--err); }
.reg-menu-list button:disabled { opacity: 0.45; cursor: not-allowed; }
.reg-menu--inline { display: inline-block; }
.reg-menu--inline > summary { list-style: none; display: inline-flex; }
.reg-menu--inline > summary::-webkit-details-marker { display: none; }
.reg-menu--inline .reg-menu-list { right: auto; left: 0; bottom: calc(100% + 4px); top: auto; }

/* an inline verb that reads as a link — the accent is INTERACTION, and this and
   the one filled control are the only things on the page that carry it */
.reg-page .reg-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-meta); color: var(--accent); text-align: left;
}
.reg-page .reg-link:hover { text-decoration: underline; }
.reg-lnone { font-size: var(--t-meta); color: var(--ink-4); }

/* ── ZONE 1 · THE LEDGER — the kit instrument (.instr/.rail/.fld) with two of
   the register's own marks. A FIGURE IS A FIGURE: colour on this rail is spent
   on the DETAIL line (ATTEST LAW 2), so the warn/ok/err tones stay ink here. */
.reg-lcell { border-top: 2px solid transparent; }
/* the binding condition caps the figure it is about — the page's only 2px accent */
.reg-lcell--bind { border-top-color: var(--accent); }
.reg-lcell--bind .u-label { color: var(--ink-1); }
.reg-lfig--warn, .reg-lfig--ok, .reg-lfig--err { color: var(--ink-1); }
.reg-lfig--nil { color: var(--ink-4); font-weight: 400; }
/* B8: 'not counted' is not 'counted as zero'. The dotted underline hugs the glyph. */
.reg-lfig--unknown { color: var(--ink-4); font-weight: 400; text-decoration: underline dotted; text-underline-offset: 4px; }
.reg-ldet--short { color: var(--warn); }
.reg-lroute { display: block; margin-top: 7px; }

/* coverage did not answer: one sentence, once, naming what is unaffected */
.reg-degraded {
  margin-top: 14px; padding: var(--s8) 0 9px var(--s16);
  border-left: 2px solid var(--err); font-size: var(--t-scan);
  color: var(--ink-2); line-height: 1.55; max-width: 88ch;
}
.reg-degraded b { color: var(--err); }

/* ── zone rhythm: the shared kit (attest.css §7 .zone / .zone-head) ── */

/* ── ZONE 2 · THE OBLIGATION — the one clause on the page ── */
.reg-oblig {
  background: var(--sheet); border: 1px solid var(--line);
  border-left: 2px solid var(--warn); border-radius: var(--r2);
  padding: 14px 18px;
}
.reg-oblig--clear { border-left-color: var(--ok); }
.reg-oblig-line { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.reg-oblig-cond { font-size: var(--t-lead); font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
.reg-oblig-det { font-size: var(--t-scan); color: var(--warn); }
.reg-oblig--clear .reg-oblig-det { color: var(--ok); }
.reg-oblig-go { margin-left: auto; }
.reg-oblig-next {
  margin-top: var(--s8); font-size: calc(var(--t-meta) + 0.5px); color: var(--ink-3);
  line-height: 1.55; max-width: 96ch;
}

/* ── ZONE 3 · CONTESTED — a band of questions, each one a row inside it ── */
.reg-band { border: 1px solid var(--line); border-radius: var(--r2); background: var(--sheet); overflow: hidden; }
.reg-q { padding: 16px 18px; border-top: 1px solid var(--line); }
.reg-band > .reg-q:first-child { border-top: 0; }
.reg-q--done { padding: 11px 18px; }
.reg-q-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.reg-q-title { font-size: var(--t-scan); color: var(--ink-1); font-weight: 600; flex: 1; min-width: 220px; max-width: 92ch; }
.reg-q-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
/* a ref is a REF: mono text with an underline. Pills that repeated a ref the ❝
   source line under each quote already stated said one fact twice — they are gone. */
.reg-refchip {
  font-family: var(--mono); font-size: 12px; padding: 0; border: 0; background: none;
  color: var(--accent); cursor: pointer; letter-spacing: -0.01em;
  text-decoration: underline; text-underline-offset: 3px;
}
.reg-q-body { margin-top: 10px; }
.reg-q-anchor { padding-left: var(--s16); border-left: 2px solid var(--ink-1); margin-bottom: var(--s12); }
.reg-q-anchor-k { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-4); }
.reg-q-anchor-s {
  font-family: var(--serif); font-size: var(--t-read); line-height: 1.5;
  color: var(--ink-1); max-width: var(--measure-quote); margin-top: 3px;
}
.reg-q-anchor-m { font-size: var(--t-meta); color: var(--ink-3); margin-top: 4px; line-height: 1.5; max-width: 88ch; }
.reg-q-pos { border-top: 1px solid var(--line); padding-top: 11px; margin-top: 11px; }
.reg-q-body > .reg-q-pos:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.reg-q-win { display: flex; gap: 14px; align-items: baseline; margin-top: var(--s8); flex-wrap: wrap; }
.reg-q-what { font-size: var(--t-meta); color: var(--ink-3); }
.reg-q-hinge { font-size: var(--t-meta); color: var(--ink-3); margin-top: var(--s8); }
.reg-q-acts { display: flex; gap: 18px; margin-top: 11px; align-items: baseline; flex-wrap: wrap; }
.reg-q-resolve { margin-top: 11px; max-width: 72ch; }
.reg-verdict {
  margin-top: var(--s8); padding: var(--s12); border: 1px solid var(--line-strong);
  border-radius: var(--r2); background: var(--surface-2); max-width: 72ch;
}
/* the act is a LINK on the grid — the page's one filled control is the masthead's */
.reg-page .reg-act {
  background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--t-scan); font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.reg-page .reg-act--quiet { font-weight: 500; color: var(--ink-2); }
.reg-page .reg-act--quiet:hover { color: var(--ink-1); }
.reg-page .reg-act:disabled { opacity: 0.45; cursor: not-allowed; }
.reg-fold { margin-top: var(--s12); }
.reg-fold > summary { cursor: pointer; font-size: var(--t-meta); color: var(--ink-3); list-style: none; }
.reg-fold > summary::-webkit-details-marker { display: none; }
.reg-fold > summary::before { content: '▸ '; color: var(--ink-4); }
.reg-fold[open] > summary::before { content: '▾ '; }

/* ── ZONE 4 · THE ROWS ─────────────────────────────────────────────────────
   Tabs sit on the field (they select the sheet below them); everything else —
   toolbar, tag row, filter report, selection bar, grid, footer — is one sheet. */
.reg-tabs { margin-bottom: 0; }
.reg-tabn { color: var(--ink-4); margin-left: 5px; font-variant-numeric: tabular-nums; }
.reg-gridwrap { border-radius: 0 var(--r2) var(--r2) var(--r2); }
.reg-toolbar {
  display: flex; gap: var(--s8) var(--s12); align-items: center; flex-wrap: wrap;
  padding: var(--s8) var(--s16); background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.reg-toolbar--2 { background: var(--sheet); }
.reg-page .reg-toolbar .chip { padding: 2px 7px; font-weight: 400; }
.reg-page .reg-toolbar .chip.active { font-weight: 600; }
.reg-n { color: var(--ink-4); margin-left: 5px; font-variant-numeric: tabular-nums; }
.chip.active .reg-n { color: var(--accent); opacity: 0.8; }
.reg-sep { width: 1px; height: 16px; background: var(--line-strong); flex: none; }
.reg-search { margin-left: auto; position: relative; }
.reg-search input {
  width: 240px; padding: 4px 26px 4px 9px; font: inherit; font-size: var(--t-scan);
  border: 1px solid var(--line-strong); border-radius: var(--r1); background: var(--sheet); color: var(--ink-1);
}
.reg-search .clr {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--ink-4); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px;
}
.reg-note {
  font-size: var(--t-meta); color: var(--ink-3); line-height: 1.5;
  padding: var(--s8) var(--s16); border-bottom: 1px solid var(--line); background: var(--sheet);
}
.reg-selbar {
  display: flex; gap: var(--s12); align-items: center; flex-wrap: wrap;
  padding: var(--s8) var(--s16); background: var(--accent-dim); border-bottom: 1px solid var(--line);
}
.reg-selcnt { font-size: var(--t-scan); color: var(--accent); font-weight: 600; }
.reg-selverbs { margin-left: auto; display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap; }
/* a select is a control, not a headline: it never grows to the length of its longest option */
.reg-selverbs .form-select { max-width: 200px; }

/* an empty state INSIDE the sheet does not draw a second sheet round itself */
.reg-gridwrap .empty-state-card { border: 0; background: none; border-radius: 0; padding: var(--s32) var(--s16); }

/* ── the grid: ☐ · REF · STATEMENT · WEIGHT · COVER · EVID · act
      (kit table.tbl carries the head and rows; the sticky head is ours) ── */
.reg-grid thead th { position: sticky; top: var(--topbar-h, 48px); z-index: 5; }
.reg-grid tbody tr { cursor: pointer; }
.reg-grid tbody tr:hover { background: var(--surface-2); }
.reg-grid tbody tr.reg-row--sel { background: var(--accent-dim); }
.reg-grid tbody tr.reg-row--open { box-shadow: inset 2px 0 0 var(--ink-1); }
.reg-grid td { padding: 10px 8px; }
.reg-c-sel { width: 30px; } .reg-c-ref { width: 104px; } .reg-c-w { width: 78px; } .reg-c-src { width: 96px; }
/* header and figures share one alignment per column: Weight centred, Evid right (the kit's
   left-aligned thead is overridden here so the head sits over its own numbers) */
.reg-grid .reg-c-w { text-align: center; }
.reg-grid .reg-c-ev { text-align: right; }
.reg-srcbtn { display: block; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.reg-srcbtn:hover { text-decoration: underline; }
.reg-c-cov { width: 96px; white-space: nowrap; } .reg-c-ev { width: 58px; text-align: right; }
.reg-c-act { width: 150px; }
/* the "in discussion" chip in the status slot — the way into the call at this question */
.reg-disc { appearance: none; border: 1px solid var(--rule-2); background: none; border-radius: var(--r1);
  padding: 1px 6px; margin-bottom: 4px; font-size: var(--t-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); cursor: pointer; white-space: nowrap; display: block; }
.reg-disc:hover { color: var(--act); border-color: var(--act); }
/* the call tab's viewer hosts the question card without its own band chrome */
.pq-stand .reg-q { padding: 0; border-top: 0; }
.reg-refcell { font-family: var(--mono); font-size: var(--t-scan); color: var(--ink-1); letter-spacing: -0.01em; }
/* the status word is printed ONLY when abnormal — 36 rows saying "confirmed" is
   36 repetitions of the default, and the claim mark already says who holds it */
.reg-refstat { font-size: var(--t-label); color: var(--ink-4); margin-top: 3px; letter-spacing: 0.04em; text-transform: uppercase; }
.reg-refstat--draft { color: var(--warn); }
.reg-srcline { display: flex; gap: var(--s8); align-items: baseline; margin-top: 5px; flex-wrap: wrap; }
.reg-srcline .src-ref { color: var(--ink-4); font-size: 12px; }
.reg-dels { color: var(--ink-4); }
/* WEIGHT = weight and case, never a hue (ATTEST LAW 2) */
.reg-w { font-size: var(--t-scan); }
.reg-w--must { color: var(--ink-1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--t-meta); }
.reg-w--should { color: var(--ink-2); }
.reg-w--could { color: var(--ink-4); }
.reg-w--wont { color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--t-meta); }
/* COVER = three FIXED slots (Deliverable · Acceptance criterion · Test case),
   monochrome: a computed tally is not a state worth 39 warn lamps. A dotted pip
   is NOT-APPLICABLE — an exclusion needs none of the three, and that is a third
   state, not a failure. */
.reg-cov { display: inline-flex; gap: 5px; align-items: center; }
.reg-pip { width: 9px; height: 14px; border: 1px solid var(--line-strong); border-radius: 1px; display: inline-block; cursor: help; }
.reg-pip--on { background: var(--ink-2); border-color: var(--ink-2); }
.reg-pip--na { border-style: dotted; opacity: 0.55; }
.reg-covkey { font-size: var(--t-label); color: var(--ink-4); letter-spacing: 0.22em; display: block; margin-top: 2px; }
/* EVID is a count AND the way in to what it counts */
.reg-evfig { font-variant-numeric: tabular-nums; font-size: var(--t-scan); color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0; }
.reg-evfig:hover { text-decoration: underline; }
.reg-evfig--zero { color: var(--warn); }
.reg-rowlock { font-size: var(--t-label); color: var(--ink-4); }
/* the descoped trigger keeps the quiet text dress */
.reg-rowheld { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); gap: 5px; }
.reg-rowheld:hover, .reg-rowheld[aria-expanded="true"] { color: var(--ink-1); }
/* the confirm slot: one round check — grey while it is still to confirm, green once it is.
   The word beside it stays grey either way; the CIRCLE carries the state (LAW 2). */
.reg-ck { appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: var(--r1); }
.reg-ck:disabled { opacity: .45; cursor: not-allowed; }
.reg-ck-c { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; background: var(--well); color: var(--ink-4);
  border: 1px solid var(--rule-2); }
.reg-ck-c svg { width: 11px; height: 11px; }
.reg-ck-c--on { background: var(--ok); color: #fff; border-color: transparent; }
.reg-ck-t { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); }
.reg-ck:hover .reg-ck-t { color: var(--ink-2); }
/* the call stamp field in the Contested zone head */
.reg-callref { display: inline-flex; align-items: center; gap: 8px; }
.reg-callref .form-input { width: 32ch; padding: 4px 9px; font-size: var(--t-meta); }
/* ── the call viewer's card — four registers, in reading order, each delineated ── */
.cq-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cq-meta { font-size: var(--t-meta); color: var(--ink-3); }
.cq-question { margin: 10px 0 0; font-size: calc(var(--t-ui) + 0.5px); font-weight: 600;
  color: var(--ink-1); line-height: 1.5; max-width: 92ch; }
.cq-req { margin-top: 14px; border: 1px solid var(--rule-2); border-left: 2px solid var(--ink-1);
  border-radius: var(--r2); padding: 12px 14px; background: var(--sheet-2); }
.cq-req-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cq-req-s { margin: 8px 0 0; font-size: calc(var(--t-scan) + 0.5px); line-height: 1.55; max-width: 92ch; }
.cq-why { margin-top: 14px; padding: 2px 0 2px 14px; border-left: 2px solid var(--rule-2);
  color: var(--ink-3); font-size: calc(var(--t-meta) + 0.5px); }
.cq-why p { margin: 6px 0 0; line-height: 1.55; white-space: pre-wrap; max-width: 92ch; }
.cq-why .ev-src { margin-top: 8px; }
.pq-stand .reg-q-acts { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); gap: 8px; }
/* the SETTLED bucket word on a settled question */
.reg-q-bucket { margin-left: auto; font-size: var(--t-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ok); white-space: nowrap; }
.reg-q-bucket.quiet { color: var(--ink-4); }
.reg-gridfoot {
  font-size: var(--t-meta); color: var(--ink-4); padding: var(--s8) var(--s16);
  border-top: 1px solid var(--line); background: var(--surface-2);
}

/* ── the panel ─────────────────────────────────────────────────────────────
   Statement · Evidence · Obligations · Classification · History, and a footer
   carrying ONE primary with everything else behind More. */
.reg-p-meta { font-size: var(--t-meta); color: var(--ink-3); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.reg-p-meta .sep { color: var(--ink-4); }
.reg-evblock { padding: var(--s12) 0; border-bottom: 1px solid var(--line); }
.reg-evblock:last-child { border-bottom: 0; padding-bottom: 0; }
/* The obligation row is a GRID, not a flex line: the act sits on the head line and
   the value gets the panel's full width under it. As a flex row the act stole 130px
   from the criteria column and every acceptance criterion wrapped at 30 characters. */
.reg-obl {
  display: grid; grid-template-columns: 8px auto 1fr auto;
  column-gap: 10px; row-gap: var(--s8); align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.reg-obl:last-child { border-bottom: 0; }
.reg-lamp {
  width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; top: 5px;
  border: 1px dashed var(--ink-4);
}
.reg-lamp.on { background: var(--ink-2); border: 1px solid var(--ink-2); }
.reg-obl-k { grid-column: 2; font-size: var(--t-meta); color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; }
.reg-obl-v { grid-column: 2 / -1; grid-row: 2; min-width: 0; font-size: var(--t-scan); color: var(--ink-2); }
.reg-obl-a { grid-column: 4; grid-row: 1; justify-self: end; }
.reg-ac { padding: var(--s8) 0; border-bottom: 1px solid var(--line); }
.reg-ac:last-child { border-bottom: 0; }
.reg-ac--hit { box-shadow: inset 2px 0 0 var(--accent); padding-left: var(--s8); }
.reg-tc { padding: var(--s8) 0; border-bottom: 1px solid var(--line); }
.reg-tc:last-child { border-bottom: 0; }
.reg-klist { display: grid; grid-template-columns: 96px 1fr; gap: 10px var(--s12); margin: 0; font-size: var(--t-scan); align-items: baseline; }
.reg-klist dt { font-size: var(--t-meta); color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; }
.reg-klist dd { margin: 0; color: var(--ink-2); min-width: 0; }
.reg-rev { border-left: 2px solid var(--line); padding: 9px 0 9px 13px; margin-bottom: 10px; }
.reg-rev--cur { border-left-color: var(--ink-1); }
.reg-p-foot {
  border-top: 1px solid var(--line-strong); padding: var(--s12) var(--s20);
  display: flex; gap: var(--s8); align-items: center; background: var(--surface-2); flex-wrap: wrap;
}
.reg-p-foot .reg-more { position: relative; margin-left: auto; }
.reg-p-foot .reg-more-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 220px; z-index: 5;
  background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r2);
  box-shadow: var(--elev-1); padding: var(--s4); display: flex; flex-direction: column;
}
.reg-p-foot .reg-more-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 6px 9px; font-size: var(--t-scan); color: var(--ink-2); cursor: pointer; border-radius: var(--r1);
}
.reg-p-foot .reg-more-menu button:hover { background: var(--surface-2); color: var(--ink-1); }
.reg-p-foot .reg-more-menu button.danger { color: var(--err); }
.reg-p-foot .reg-more-menu button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 1080px) {
  .rail .reg-lcell--bind:nth-child(n+4) { border-top-color: var(--accent); }
}
@media (max-width: 860px) {
  .rail .reg-lcell--bind { border-top-color: var(--accent); }
  .reg-c-w, .reg-c-cov, .reg-c-src { display: none; }
  .reg-search { margin-left: 0; width: 100%; }
  .reg-search input { width: 100%; }
  .reg-oblig-go { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCEPTANCE — the acceptance instrument (tab-acceptance).
   Shell, masthead, ladder-as-rail, zone heads and the runs table come from the
   shared kit (attest.css §7). Everything here is the tab's own content dress,
   scoped `.ac-*`. Content sits on white sheets against the warm field; controls
   live inside the sheets (the operator's design law).
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-notice { font-size: var(--t-meta); color: var(--ink-3); }

/* the ladder rungs ride the kit rail; state is position and weight, one hue only when broken */
.fld.ac-rung { position: relative; cursor: pointer; }
.ac-zone { padding-top: 20px; }
.zone.ac-sec:first-child { margin-top: 4px; }


.ac-rung .step { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.ac-rung .step-n { font-family: var(--mono); font-size: var(--t-label); color: var(--ink-4); }
.ac-rung .u-label { color: var(--ink-4); }
.ac-rung .val { font-size: var(--t-fig); font-weight: 600; line-height: 1.05; color: var(--ink-1);
  display: flex; align-items: baseline; gap: 6px; }
.ac-rung .val .unit { font-size: var(--t-meta); font-weight: 400; color: var(--ink-3);
  letter-spacing: .02em; }
.ac-rung .det { margin-top: 5px; font-size: var(--t-meta); color: var(--ink-3);
  line-height: 1.35; min-height: 2.7em; }
/* state: met / current / ahead — position and weight, one hue only when broken */
.ac-rung--met .val { color: var(--ink-3); }
.ac-rung--ahead .val, .ac-rung--ahead .det { color: var(--ink-4); }
.fld.ac-rung--current { background: var(--well); }
.ac-rung--current::before { content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--ink-1); }
.ac-rung--current .u-label { color: var(--ink-1); }
/* an unmet rung that is NOT the loud one keeps the position and drops the rule, so exactly
   one rule is drawn on the rail at a time */
.ac-rung--position .u-label, .ac-rung--position .val { color: var(--ink-2); }
.ac-rung--warn .val { color: var(--attend); }
.ac-rung--warn::before { content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--attend); }
.ac-rung--alarm .val { color: var(--broken); }
.ac-rung--alarm::before { content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--broken); }
.ac-tick { font-family: var(--mono); font-size: var(--t-label); }
.ac-tick--met { color: var(--ok); }
.ac-tick--open { color: var(--ink-4); }

.ac-ladder-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  margin-top: 9px; font-size: var(--t-meta); color: var(--ink-3); }
.ac-ladder-foot .lead { color: var(--ink-1); font-weight: 600; }
.ac-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--t-meta); color: var(--act); border-bottom: 1px solid transparent; }
.ac-linkbtn:hover { border-bottom-color: var(--act); }

/* ── the next move ─────────────────────────────────────────────────────── */
.ac-move { margin-top: 20px; background: var(--sheet); border: 1px solid var(--rule-2);
  border-left: 2px solid var(--ink-1); border-radius: var(--r2); padding: 18px 20px; }
.ac-move--alarm { border-left-color: var(--broken); }
.ac-move--warn { border-left-color: var(--attend); }
.ac-move h2 { margin: 0 0 6px; font-size: var(--t-lead); font-weight: 600; }
.ac-move .why { font-size: var(--t-scan); color: var(--ink-2); line-height: 1.55; max-width: 74ch; }
.ac-move .acts { margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ac-move .acts .aside { font-size: var(--t-meta); color: var(--ink-4); }
.ac-move-also { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 9px; }
.ac-move-also summary { cursor: pointer; font-size: var(--t-meta); color: var(--ink-3);
  list-style: none; }
.ac-move-also summary::-webkit-details-marker { display: none; }
.ac-move-also summary::before { content: '▸ '; color: var(--ink-4); }
.ac-move-also[open] summary::before { content: '▾ '; }
.ac-move-also summary:hover { color: var(--ink-1); }
.ac-move-also .row { margin-top: 9px; font-size: var(--t-meta); color: var(--ink-2);
  line-height: 1.5; max-width: 78ch; }
.ac-move-also .row b { color: var(--ink-1); font-weight: 600; }

/* ── tabs — underline items riding the rule ────────────────────────────── */
.ac-tabs { display: flex; gap: 0; margin-top: 30px; border-bottom: 1px solid var(--rule); }
.ac-tabs button { background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 15px 8px; font-size: var(--t-scan); color: var(--ink-3); cursor: pointer;
  margin-bottom: -1px; display: flex; align-items: center; gap: 7px; font-family: inherit; }
.ac-tabs button:hover { color: var(--ink-1); }
.ac-tabs button[aria-selected="true"] { color: var(--ink-1); font-weight: 600;
  border-bottom-color: var(--ink-1); }
.ac-tabs .flag { font-family: var(--mono); font-size: var(--t-label); }



/* ── the readiness ledger ──────────────────────────────────────────────── */
.ac-ledger { border: 1px solid var(--rule-2); border-radius: var(--r2); background: var(--sheet);
  overflow: hidden; margin-top: 4px; }
.ac-ledger-head { padding: 13px 16px 12px; border-bottom: 1px solid var(--rule);
  background: var(--sheet-2); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ac-ledger-head h3 { margin: 0; font-size: var(--t-h3); font-weight: 600; }
.ac-ledger-head .count { margin-left: auto; font-size: var(--t-meta); color: var(--ink-3); }
.ac-lrow { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 11px 16px; border-bottom: 1px solid var(--rule); }
.ac-lrow:last-of-type { border-bottom: 0; }
.ac-lrow--done { background: var(--sheet-2); }
.ac-lrow .what { font-size: var(--t-scan); color: var(--ink-1); display: flex; flex-wrap: wrap;
  gap: 7px; align-items: baseline; }
.ac-lrow--done .what { color: var(--ink-3); }
.ac-lrow .objs { font-size: var(--t-meta); color: var(--ink-3); margin-top: 3px;
  overflow-wrap: anywhere; }
.ac-mark { font-family: var(--mono); font-size: var(--t-label); flex: none; }
.ac-mark--blocked { color: var(--attend); }
.ac-mark--done { color: var(--ok); }
.ac-ledger-foot { padding: 13px 16px; background: var(--well); display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.ac-ledger-foot .note { font-size: var(--t-meta); color: var(--ink-3); max-width: 62ch;
  line-height: 1.5; }

/* ── the plan ──────────────────────────────────────────────────────────── */
.ac-seg { display: flex; gap: 16px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.ac-seg button { background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 2px 2px 8px; font-size: var(--t-scan); color: var(--ink-3);
  cursor: pointer; font-family: inherit; }
.ac-seg button[aria-pressed="true"] { color: var(--ink-1); font-weight: 600;
  border-bottom-color: var(--ink-1); }
.ac-seg button:hover { color: var(--ink-1); }

.ac-del { margin-top: 18px; background: var(--sheet); border: 1px solid var(--rule);
  border-top: 2px solid var(--ink-1); border-radius: 0 0 var(--r2) var(--r2); padding: 11px 16px 4px; }
.ac-del-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ac-del-head h3 { margin: 0; font-size: var(--t-h3); font-weight: 600; }
.ac-del-head .meta { margin-left: auto; font-size: var(--t-meta); color: var(--ink-3);
  display: flex; gap: 8px; align-items: baseline; }
.ac-dod { margin-top: 5px; font-size: var(--t-meta); color: var(--ink-3); max-width: 88ch;
  line-height: 1.5; }
.ac-hoist { margin-top: 11px; padding: 9px 13px; background: var(--well);
  border-left: 2px solid var(--rule-2); font-size: var(--t-meta); color: var(--ink-2);
  max-width: 82ch; line-height: 1.5; }

.ac-crit { border-bottom: 1px solid var(--rule); padding: 13px 0; display: grid;
  grid-template-columns: 104px 1fr 250px; gap: 18px; align-items: start; }
.ac-crit:last-child { border-bottom: 0; }
.ac-crit .ids { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-meta); }
.ac-crit .ids .line { display: flex; gap: 6px; align-items: baseline; }
.ac-crit .ids .src-ref { color: var(--ink-2); }
.ac-crit .stmt { font-family: var(--serif); font-size: var(--t-read); line-height: var(--lh-read);
  color: var(--ink-1); font-variant-numeric: normal; max-width: var(--measure-quote); }
.ac-crit .lint { margin-top: 6px; font-size: var(--t-meta); color: var(--attend); max-width: 64ch; }
.ac-crit .lint .src-ref { color: var(--attend); }
.ac-crit .runcell { font-size: var(--t-meta); color: var(--ink-3); }
.ac-crit .runcell .top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ac-crit .runcell .when { margin-top: 4px; }
/* a failure is a 2px left rule in the broken hue — never a row tint */
.ac-crit--fail { border-left: 2px solid var(--broken); margin-left: -16px; padding-left: 14px; }

.ac-lamp { font-size: var(--t-label); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: var(--r1);
  border: 1px solid var(--rule-2); background: var(--sheet-2); color: var(--ink-2);
  white-space: nowrap; }
.ac-lamp--pass { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.ac-lamp--fail { color: var(--broken); border-color: var(--broken-line); background: var(--broken-soft); }
.ac-lamp--blocked { color: var(--attend); border-color: var(--attend-line); background: var(--attend-soft); }
.ac-lamp--none { color: var(--ink-4); border-style: dashed; background: transparent; }
.ac-tag { font-size: var(--t-label); color: var(--ink-3); border: 1px solid var(--rule);
  background: var(--sheet-2); border-radius: var(--r1); padding: 1px 5px; white-space: nowrap; }
.ac-tag--attend { color: var(--attend); border-color: var(--attend-line); background: var(--attend-soft); }

/* ── the runs table ────────────────────────────────────────────────────── */
.ac-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r2);
  background: var(--sheet); }


/* ── the defect board ──────────────────────────────────────────────────── */
.ac-defect { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  margin-top: 12px; padding: 15px 18px; border-left: 2px solid var(--rule-2); }
.ac-defect--blocking { border-left-color: var(--broken); }
.ac-defect--major { border-left-color: var(--attend); }
.ac-defect--off { opacity: .72; background: var(--sheet-2); }
.ac-defect-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ac-defect-top .ref { font-family: var(--mono); font-size: var(--t-scan); color: var(--ink-1);
  font-weight: 600; }
.ac-defect-top .clock { margin-left: auto; font-size: var(--t-meta); color: var(--ink-3); }
.ac-defect .title { margin-top: 9px; font-family: var(--serif); font-size: var(--t-read);
  line-height: var(--lh-read); color: var(--ink-1); font-weight: 600;
  max-width: var(--measure-quote); font-variant-numeric: normal; }
.ac-defect .desc { margin-top: 3px; font-family: var(--serif); font-size: var(--t-read);
  line-height: var(--lh-read); color: var(--ink-2); max-width: var(--measure-quote);
  font-variant-numeric: normal; white-space: pre-wrap; }
.ac-defect .ev { margin-top: 12px; }
.ac-defect .acts { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-defect .acts .spacer { margin-left: auto; }
.ac-ctl { display: flex; flex-direction: column; gap: 3px; }
.ac-ctl .u-label { color: var(--ink-4); }
.ac-ctl select, .ac-ctl input { width: auto; }

.ac-sev { font-size: var(--t-label); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--r1);
  border: 1px solid var(--rule-2); background: var(--sheet-2); color: var(--ink-2);
  white-space: nowrap; }
.ac-sev--blocking { color: var(--broken); border-color: var(--broken-line); background: var(--broken-soft); }
.ac-sev--major { color: var(--attend); border-color: var(--attend-line); background: var(--attend-soft); }
.ac-status-word { font-size: var(--t-meta); color: var(--ink-2); }

.ac-disc { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.ac-disc summary { cursor: pointer; font-size: var(--t-meta); color: var(--ink-3); list-style: none; }
.ac-disc summary::-webkit-details-marker { display: none; }
.ac-disc summary::before { content: '▸ '; color: var(--ink-4); }
.ac-disc[open] summary::before { content: '▾ '; }
.ac-disc summary:hover { color: var(--ink-1); }
.ac-sevdef { margin-top: 10px; display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px;
  font-size: var(--t-scan); color: var(--ink-2); max-width: 96ch; }

/* ── the record and its clock ──────────────────────────────────────────── */
.ac-rec { border: 1px solid var(--rule-2); border-radius: var(--r2); background: var(--sheet);
  margin-top: 14px; overflow: hidden; }
.ac-rec-head { padding: 14px 17px 13px; display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.ac-rec-head .ref { font-family: var(--mono); font-size: var(--t-h3); font-weight: 600; }
.ac-rec-head .ms { font-size: var(--t-scan); color: var(--ink-2); }
.ac-rec-head .state { margin-left: auto; }
.ac-rec-body { padding: 15px 17px; }
.ac-clock .track { position: relative; height: 3px; background: var(--rule); border-radius: 2px;
  margin: 22px 0 8px; }
.ac-clock .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-3);
  border-radius: 2px; }
.ac-clock .fill--over { background: var(--broken); border-radius: 0 2px 2px 0; }
.ac-clock .deadline { position: absolute; top: -4px; width: 1px; height: 11px; background: var(--rule-2); }
.ac-clock .pin { position: absolute; top: -6px; width: 2px; height: 15px; background: var(--ink-1); }
.ac-clock .pin > span { position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-label); color: var(--ink-1); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 600; }
.ac-clock .pin--right > span { left: auto; right: 0; transform: none; }
.ac-clock .ends { display: flex; justify-content: space-between; font-size: var(--t-label);
  color: var(--ink-3); gap: 12px; flex-wrap: wrap; }
.ac-clock .ends b { font-weight: 600; color: var(--ink-2); }
.ac-court { margin-top: 14px; font-size: var(--t-scan); color: var(--ink-2); line-height: 1.55; }
.ac-court strong { color: var(--ink-1); }
.ac-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 22px; margin-top: 14px; }
.ac-fact { border-top: 1px solid var(--rule); padding-top: 7px; }
.ac-fact .u-label { display: block; margin-bottom: 4px; }
.ac-fact .v { font-size: var(--t-scan); color: var(--ink-1); }
.ac-fact .v.src-ref { overflow-wrap: anywhere; color: var(--ink-2); }
.ac-rec-acts { padding: 13px 17px; background: var(--well); display: flex; gap: 8px;
  flex-wrap: wrap; align-items: center; border-top: 1px solid var(--rule); }
.ac-rec-acts .spacer { margin-left: auto; }

.ac-state-badge { font-size: var(--t-label); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--r1);
  border: 1px solid var(--rule-2); background: var(--sheet-2); color: var(--ink-2);
  white-space: nowrap; }
.ac-state-badge--ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.ac-state-badge--attend { color: var(--attend); border-color: var(--attend-line); background: var(--attend-soft); }
.ac-state-badge--broken { color: var(--broken); border-color: var(--broken-line); background: var(--broken-soft); }

.ac-taskrow { display: flex; gap: 16px; align-items: center; margin-top: 4px; padding: 12px 16px;
  background: var(--sheet); border: 1px solid var(--rule); border-left: 2px solid var(--broken);
  border-radius: var(--r2); flex-wrap: wrap; }
.ac-taskrow > div:first-child { flex: 1 1 320px; }

/* ── the coverage strip ────────────────────────────────────────────────── */
.ac-cov { display: flex; flex-direction: column; border: 1px solid var(--rule);
  border-radius: var(--r2); background: var(--sheet); overflow: hidden; margin-top: 10px; }
.ac-cov .r { display: flex; gap: 12px; align-items: baseline; padding: 9px 14px;
  border-bottom: 1px solid var(--rule); font-size: var(--t-scan); flex-wrap: wrap; }
.ac-cov .r:last-child { border-bottom: 0; }
.ac-cov .r .on { margin-left: auto; font-size: var(--t-meta); color: var(--ink-3); }

/* ── panels: the composer and the defect form ──────────────────────────── */
.ac-panel-foot { padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--sheet-2);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-panel-foot .spacer { margin-left: auto; }
.ac-willwrite { border: 1px solid var(--rule-2); border-radius: var(--r2); background: var(--sheet-2);
  padding: 12px 14px; margin-top: 6px; }
.ac-willwrite ul { margin: 8px 0 0; padding-left: 18px; font-size: var(--t-scan);
  color: var(--ink-2); line-height: 1.7; }
.ac-warnblock { border-left: 2px solid var(--attend); background: var(--attend-soft);
  padding: 10px 14px; border-radius: 0 var(--r1) var(--r1) 0; margin-bottom: 12px; }
.ac-warnblock .u-label { color: var(--attend); }
.ac-warnblock p { font-size: var(--t-scan); color: var(--ink-1); margin: 5px 0 0; line-height: 1.5; }
.ac-doc { border: 1px solid var(--rule-2); border-radius: var(--r2); background: var(--sheet-2);
  padding: 16px 18px; font-size: var(--t-scan); color: var(--ink-2); max-height: 300px;
  overflow-y: auto; }
.ac-doc h4 { font-size: var(--t-label); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4); margin: 14px 0 6px; font-weight: 600; }
.ac-doc h4:first-child { margin-top: 0; }
.ac-doc > div { line-height: 1.6; }

/* ── the empty states inherit .empty-state-card from the kit; only spacing here ── */
.page.ac .empty-state-card { margin-top: 14px; }




/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN — the system's own record (tab-admin).
   Shell, masthead, rail and zone heads come from the shared kit (attest.css
   §7). Everything here is the tab's own content dress, scoped `.adm-*`.
   ═══════════════════════════════════════════════════════════════════════════ */
.adm-sub .src-ref { color: var(--ink-2); }
/* the rail cell's route line and token figure ride the kit .fld */
.adm-fld-r { margin-top: 7px; font-size: var(--t-meta); color: var(--act); }
button.fld:hover .adm-fld-r { color: var(--act-hover); text-decoration: underline; }
.fv .tok { font-family: var(--mono); font-size: 17px; letter-spacing: -.01em; }
.fv .u.adm-unit { font-size: var(--t-label); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.adm-fv--unknown { color: var(--ink-3); }
.adm .zone { margin-bottom: 32px; }
.adm .zone-head .ml { margin-left: auto; display: flex; gap: 7px; align-items: center; }

.adm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); margin-left: 11px; vertical-align: .22em; }
.adm-dot--attend { background: var(--attend); }
.adm-dot--unknown { background: none; border: 1px dashed var(--ink-4); }
.adm-state { font-size: var(--t-label); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-left: 7px; vertical-align: .28em; }

/* ── posture rows ──────────────────────────────────────────────────────── */
.adm-post { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  overflow: hidden; }
.adm-post-r { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 11px 14px; border-top: 1px solid var(--rule); }
.adm-post-r:first-child { border-top: 0; }
.adm-lamp { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--ok); }
.adm-lamp--attend { background: var(--attend); }
.adm-lamp--off { background: none; border: 1px dashed var(--ink-4); }
.adm-lamp--unknown { background: none; border: 1px dotted var(--ink-4); }
.adm-claim { font-size: var(--t-ui); color: var(--ink-1); line-height: 1.4; }
.adm-ev { margin-top: 3px; font-size: var(--t-meta); color: var(--ink-3); display: flex;
  gap: 8px; flex-wrap: wrap; align-items: baseline; }
.adm-ev .sep { color: var(--ink-4); }
.adm-ev .src-ref { color: var(--ink-2); }
.adm-post-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; }

/* ── consequence cards ─────────────────────────────────────────────────── */
.adm-cons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.adm-cons-c { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  padding: 13px 15px 12px; display: flex; flex-direction: column; gap: 7px; }
.adm-cons-c--loud { border-color: var(--rule-2); }
.adm-cons-n { font-size: var(--t-fig-lg); line-height: 1; font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums; }
.adm-cons-n small { font-size: var(--t-meta); font-weight: 400; color: var(--ink-3);
  margin-left: 7px; letter-spacing: .02em; }
.adm-cons-t { font-size: var(--t-scan); color: var(--ink-2); line-height: 1.42; }
.adm-cons-f { margin-top: auto; padding-top: 4px; display: flex; gap: 8px; align-items: center; }
.adm-read { font-size: var(--t-read); line-height: var(--lh-read); max-width: var(--measure-read);
  color: var(--ink-2); }

/* ── the trail ─────────────────────────────────────────────────────────── */
.adm-trail { display: grid; grid-template-columns: 246px minmax(0, 1fr);
  border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  overflow: hidden; }
.adm-cat { border-right: 1px solid var(--rule); background: var(--sheet-2); min-width: 0; }
.adm-cat-h { padding: 10px 12px 8px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: 8px; }
.adm-cat-scroll { max-height: 560px; overflow-y: auto; }
.adm-fam { border-bottom: 1px solid var(--rule); }
.adm-fam-h { width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
  text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.adm-fam-h:hover { background: var(--well); }
.adm-fam-h.on { background: var(--act-soft); }
.adm-fam-h.on .adm-fam-name { color: var(--act); }
.adm-fam-name { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); flex: 1;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.adm-fam-n { font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.adm-caret { font-size: 12px; color: var(--ink-4); width: 9px; }
.adm-verbs-list { padding-bottom: 5px; }
.adm-verb { width: 100%; display: flex; align-items: baseline; gap: 8px;
  padding: 3px 12px 3px 30px; text-align: left; background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer; }
.adm-verb:hover { background: var(--well); }
.adm-verb.on { background: var(--act-soft); }
.adm-verb.on .adm-verb-v { color: var(--act); }
.adm-verb-v { font-family: var(--mono); font-size: 12px; color: var(--ink-3); flex: 1;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.adm-verb-n { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.adm-log { min-width: 0; display: flex; flex-direction: column; }
.adm-log-h { padding: 9px 14px; border-bottom: 1px solid var(--rule); display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; }
.adm-seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r1);
  overflow: hidden; }
.adm-seg button { padding: 3px 10px; font-size: var(--t-meta); color: var(--ink-3);
  border: 0; border-right: 1px solid var(--rule-2); background: none; font: inherit;
  font-size: var(--t-meta); cursor: pointer; }
.adm-seg button:last-child { border-right: 0; }
.adm-seg button.on { background: var(--ink-1); color: var(--field); }
.adm-days { display: flex; gap: 2px; align-items: flex-end; margin-left: auto; }
.adm-day { display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 2px 4px 0; border-radius: var(--r1); background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; }
.adm-day:hover { background: var(--well); }
.adm-day.on { background: var(--act-soft); }
.adm-day-bar { width: 22px; background: var(--ink-3); border-radius: 1px; display: block; }
.adm-day.on .adm-day-bar { background: var(--act); }
.adm-day-l { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.adm-filterbar { padding: 7px 14px; border-bottom: 1px solid var(--rule);
  background: var(--sheet-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: var(--t-meta); color: var(--ink-3); }
.adm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px;
  border: 1px solid var(--act-line); background: var(--act-soft); color: var(--act);
  border-radius: var(--r1); font-size: var(--t-meta); font-family: var(--mono); }
.adm-chip button { color: var(--act); font-size: 13px; line-height: 1; background: none;
  border: 0; padding: 0; cursor: pointer; }
.adm-search { flex: 0 1 200px; min-width: 120px; padding: 3px 8px; border: 1px solid var(--rule-2);
  border-radius: var(--r1); background: var(--sheet); color: var(--ink-1); font: inherit;
  font-size: var(--t-meta); }
.adm-search:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--act); }

.adm-rows { max-height: 560px; overflow-y: auto; }
.adm-row { border-bottom: 1px solid var(--rule); }
.adm-row:last-child { border-bottom: 0; }
.adm-row-h { width: 100%; display: grid; grid-template-columns: 88px 92px minmax(0, 1fr) auto;
  gap: 12px; padding: 8px 14px; text-align: left; align-items: baseline; background: none;
  border: 0; color: inherit; font: inherit; cursor: pointer; }
.adm-row-h:hover { background: var(--sheet-2); }
.adm-row.open .adm-row-h { background: var(--well); }
.adm-row-t { font-size: var(--t-meta); color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.adm-row-a { font-size: var(--t-meta); color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.adm-row-a.sys { font-style: italic; color: var(--ink-4); }
.adm-row-c { font-size: var(--t-scan); color: var(--ink-1); line-height: 1.4; min-width: 0; }
.adm-row-c .src-ref { color: var(--ink-2); }
.adm-row-c .adm-q { font-family: var(--serif); font-size: var(--t-read); color: var(--ink-1); }
.adm-row-v { font-family: var(--mono); font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.adm-marks { display: inline-flex; gap: 5px; margin-left: 7px; vertical-align: 1px; }
.adm-mk { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  padding: 0 5px; border-radius: var(--r1); border: 1px solid var(--rule-2); color: var(--ink-3); }
.adm-mk--reason { border-color: var(--attend-line); color: var(--attend); background: var(--attend-soft); }
.adm-mk--tomb { border-color: var(--broken-line); color: var(--broken); background: var(--broken-soft); }
.adm-mk--hash { border-color: var(--ok-line); color: var(--ok); background: var(--ok-soft); }

/* the expansion — indented to the consequence column so the sentence stays the spine */
.adm-det { padding: 2px 14px 16px 194px; background: var(--well); border-top: 1px solid var(--rule); }
.adm-det-grid { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  overflow: hidden; margin-top: 12px; }
.adm-det-grid > div { padding: 5px 10px; border-top: 1px solid var(--rule);
  font-size: var(--t-scan); min-width: 0; overflow-wrap: anywhere; }
.adm-det-grid > div:nth-child(-n+3) { border-top: 0; background: var(--sheet-2); }
.adm-dk { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.adm-dv { color: var(--ink-2); }
.adm-dv--was { color: var(--ink-4); text-decoration: line-through; text-decoration-thickness: 1px; }
.adm-dv--now { color: var(--ink-1); }
.adm-chg { background: color-mix(in srgb, var(--attend-soft) 70%, transparent); }
.adm-det-foot { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-cite { font-family: var(--mono); font-size: 12px; color: var(--ink-3); background: var(--sheet);
  border: 1px dashed var(--rule-2); border-radius: var(--r1); padding: 3px 8px;
  overflow-wrap: anywhere; }
.adm-det-note { margin-top: 12px; }
.adm-noroute { font-size: var(--t-meta); color: var(--ink-3); }

.adm-paging { display: flex; gap: 10px; align-items: center; padding: 9px 14px;
  border-top: 1px solid var(--rule); background: var(--sheet-2); font-size: var(--t-meta);
  color: var(--ink-3); }
.adm-paging .ml { margin-left: auto; display: flex; gap: 6px; }

/* ── switches ──────────────────────────────────────────────────────────── */
.adm-sw { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  overflow: hidden; }
.adm-sw-r { display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(150px, .9fr) minmax(0, 1.6fr) auto;
  gap: 14px; align-items: start; padding: 11px 14px; border-top: 1px solid var(--rule); }
.adm-sw-r:first-child { border-top: 0; }
.adm-sw-r--dead { background: var(--sheet-2); }
.adm-sw-k { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.adm-sw-lab { font-size: var(--t-meta); color: var(--ink-4); margin-top: 2px; }
.adm-sw-val input, .adm-sw-val select { font: inherit; font-family: var(--mono); font-size: 13px;
  color: var(--ink-1); background: var(--sheet); border: 1px solid var(--rule-2);
  border-radius: var(--r1); padding: 3px 7px; width: 140px; max-width: 100%; }
.adm-sw-val input:focus, .adm-sw-val select:focus { outline: none; box-shadow: var(--focus-ring);
  border-color: var(--act); }
.adm-sw-con { font-size: var(--t-meta); color: var(--ink-3); line-height: 1.45; }
.adm-sw-con .src-ref { color: var(--ink-2); }
.adm-sw-con b { color: var(--attend); font-weight: 600; }
.adm-badge { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--r1); border: 1px solid var(--rule-2); color: var(--ink-3);
  white-space: nowrap; }
.adm-badge--live { border-color: var(--ok-line); color: var(--ok); background: var(--ok-soft); }
.adm-badge--dead { border-color: var(--rule-2); color: var(--ink-4); }

/* the removal note — a disclosure, on its own sheet, closed by default */
.adm-note { margin-top: 12px; border: 1px solid var(--rule); border-radius: var(--r2);
  background: var(--sheet); overflow: hidden; }
.adm-note-bar { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.adm-note-bar:hover { background: var(--sheet-2); }
.adm-note-body { border-top: 1px solid var(--rule); padding: 13px 15px; }
.adm-note-body p { font-size: var(--t-scan); color: var(--ink-1); line-height: 1.55;
  max-width: 78ch; margin: 0 0 9px; }
.adm-aa { margin-top: 6px; font-size: var(--t-meta); border-collapse: collapse; width: auto; }
.adm-aa th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 2px 14px 4px 0;
  font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; }
.adm-aa td { padding: 2px 14px 2px 0; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-aa td.k { font-family: var(--mono); font-size: 12px; }
.adm-aa td.fail { color: var(--broken); font-weight: 600; }
.adm-aa td.pass { color: var(--ok); }
.adm-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid var(--rule-2); vertical-align: -1px; margin-right: 6px; }

/* the accent control — picker + hex, and the preview sub-row under it */
.adm-accent-in { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-accent-in input[type=color] { width: 30px; height: 26px; padding: 1px; border: 1px solid var(--rule-2);
  border-radius: var(--r1); background: var(--sheet); cursor: pointer; }
.adm-accent-in input[type=color]:disabled { cursor: default; opacity: .5; }
.adm-accent-in input:not([type=color]) { width: 96px; }
.adm-accent { grid-column: 1 / -1; border-top: 1px dashed var(--rule); padding: 10px 14px 12px;
  background: var(--sheet-2); display: flex; flex-direction: column; gap: 8px; }
.adm-accent-ramps { display: flex; gap: 22px; flex-wrap: wrap; }
.adm-ramp { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: var(--r1);
  border: 1px solid var(--rule); background: #FFFFFF; }
.adm-ramp.dark { background: #14130F; border-color: #2C2924; }
.adm-ramp.dark .u-label { color: #948E81; }
.adm-ramp .sw { display: inline-block; width: 22px; height: 22px; border-radius: 4px; }
.adm-ramp .sw.fill { width: auto; padding: 0 8px; font-size: 12px; font-weight: 600; line-height: 22px; }
.adm-ramp .lnk-sample { font-family: var(--mono); font-size: 12px; margin-left: 6px; text-decoration: underline; }
.adm-accent-verdict { font-size: var(--t-meta); line-height: 1.45; }
.adm-accent-verdict.pass { color: var(--ok); }
.adm-accent-verdict.fail { color: var(--broken); font-weight: 600; }
.adm-accent-near { font-size: var(--t-meta); color: var(--ink-2); }
.adm-accent-near .lnkb { font-size: var(--t-meta); }

/* a text-level route, never a peer of a filled control */
.adm-link { font: inherit; font-size: var(--t-meta); color: var(--act); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--act-line); text-underline-offset: 3px; }
.adm-link:hover { text-decoration-color: var(--act); }
.adm-link[disabled] { color: var(--ink-4); cursor: default; text-decoration: none; }

.adm-empty { padding: 30px 20px; text-align: center; color: var(--ink-3); font-size: var(--t-scan); }
.adm-empty strong { display: block; color: var(--ink-1); font-size: var(--t-ui);
  font-weight: 600; margin-bottom: 5px; }
.adm-empty .btn { margin-top: 12px; }


@media (max-width: 900px) {
  .adm-trail { grid-template-columns: 1fr; }
  .adm-cat { border-right: 0; border-bottom: 1px solid var(--rule); }
  .adm-cat-scroll { max-height: 200px; }
  .adm-row-h { grid-template-columns: 74px minmax(0, 1fr); row-gap: 2px; }
  .adm-row-a, .adm-row-v { grid-column: 1 / -1; }
  .adm-det { padding-left: 14px; }
  .adm-sw-r { grid-template-columns: 1fr; }
  .adm-post-r { grid-template-columns: 16px minmax(0, 1fr); }
  .adm-post-act { grid-column: 2; justify-content: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AGENT — the dispatch desk (tab-agent).
   Shell, masthead, instrument sheet and zone heads come from the shared kit
   (attest.css §7). The status line is an .instr-band; everything below is the
   tab's own content dress, scoped `.ag-*`.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The page's two faces — Desk | Proposals. Same .tabs.reg-tabs dress as the register's
   row tabs, but here a whole page follows rather than a sheet, so the kit margin the
   reg-tabs variant zeroes out comes back. */
.ag-tabs { margin-bottom: 26px; }
/* ProposalsPage rides inside the proposals tab with its own `.page.pq` root; strip the
   outer page chrome it would double up (the .ag shell already carries width and padding). */
.page.ag .page.pq { max-width: none; margin: 0; padding: 0; }
.ag-instrwrap { margin-bottom: 30px; }
.instr-band.ag-instr { gap: 14px; padding: 10px var(--s16); background: var(--sheet);
  font-size: var(--t-meta); color: var(--ink-3); }
.ag-instr b { color: var(--ink-1); font-weight: 600; }
.ag-instr .sep { color: var(--rule-2); }
.instr-band.ag-instr--broken { background: var(--broken-soft); align-items: flex-start; line-height: 1.55; }
.ag-instrwrap:has(.ag-instr--broken) { border-color: var(--broken-line); }
.ag-instr--broken b { color: var(--broken); }
.ag .zone { margin: 0 0 30px; }
.mast-verbs.ag-mast-side { display: block; text-align: right; font-size: var(--t-meta); color: var(--ink-3); }

.ag-instr-say { flex: 1 1 340px; min-width: 0; color: var(--ink-2); }
.ag-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ag-instr-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }


/* ── the standing fault ────────────────────────────────────────────────── */
.ag-standing { font-size: var(--t-scan); line-height: 1.55; color: var(--ink-2);
  max-width: var(--measure-read); border-left: 2px solid var(--attend-line);
  padding: 2px 0 2px 12px; margin: 0 0 14px; }
.ag-standing b { color: var(--ink-1); }
.ag-standing em { font-family: var(--serif); font-style: normal;
  font-size: var(--t-read); color: var(--ink-1); }

/* ── dispatch deck ─────────────────────────────────────────────────────── */
.ag-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ag-card { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  padding: 13px 14px 12px; display: flex; flex-direction: column; gap: 7px;
  cursor: pointer; text-align: left; color: inherit; font: inherit;
  transition: border-color 110ms ease-out, background 110ms ease-out; }
.ag-card:hover { border-color: var(--rule-2); }
.ag-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ag-card--armed { border-color: var(--act); }
.ag-card--blocked { background: var(--sheet-2); }
.ag-card-top { display: flex; align-items: baseline; gap: 8px; }
.ag-fig { font-size: var(--t-fig); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.ag-unit { font-size: var(--t-meta); color: var(--ink-3); }
.ag-arm { margin-left: auto; font-size: var(--t-label); color: var(--act);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ag-card-label { font-size: var(--t-scan); font-weight: 600; color: var(--ink-1); }
.ag-card-subj { font-size: var(--t-meta); color: var(--ink-3); font-family: var(--mono);
  word-break: break-word; }
.ag-card-blurb { font-size: var(--t-meta); color: var(--ink-3); line-height: 1.5; min-height: 34px; }
.ag-card-foot { margin-top: auto; display: flex; flex-direction: column;
  align-items: flex-start; gap: 5px; padding-top: 4px; }
.ag-why { font-size: var(--t-meta); color: var(--ink-3); }
.ag-why--bad { color: var(--broken); }

/* the armed card's note travels into the pass it is written for */
.ag-note { width: 100%; margin-top: 2px; padding: 6px 9px; border: 1px solid var(--rule-2);
  border-radius: var(--r1); background: var(--sheet); color: var(--ink-1);
  font: inherit; font-size: var(--t-meta); }
.ag-note:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--act); }

/* The escape hatch and the ledger's housekeeping both live INSIDE a sheet — the operator's
   design law: the field shows only between sheets, never under a control. */
.ag-escape { margin-top: 10px; border: 1px solid var(--rule); border-radius: var(--r2);
  background: var(--sheet); padding: 9px 14px; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap; font-size: var(--t-meta); color: var(--ink-3); }
.ag-ledger-foot { padding: 9px 16px; border-top: 1px solid var(--rule);
  background: var(--sheet-2); font-size: var(--t-meta); color: var(--ink-3);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ── the escape hatch: the full scope picker, inside its own sheet ─────── */
.ag-picker { margin-top: 12px; border: 1px solid var(--rule); border-radius: var(--r2);
  background: var(--sheet); overflow: hidden; }
.ag-picker-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.ag-picker-body { max-height: 300px; overflow-y: auto; }
.ag-picker-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-top: 1px solid var(--rule); background: var(--sheet-2); }
.ag-drow { display: grid; grid-template-columns: 22px 76px 1fr 96px 84px; gap: 10px;
  align-items: center; width: 100%; padding: 6px 14px; border: 0; border-top: 1px solid var(--rule);
  background: none; color: inherit; font: inherit; font-size: var(--t-scan);
  text-align: left; cursor: pointer; }
.ag-drow:first-child { border-top: 0; }
.ag-drow:hover { background: var(--sheet-2); }
.ag-drow .ag-dfile { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-2); min-width: 0; }
.ag-drow .ag-dstate { font-size: var(--t-label); color: var(--ink-4); text-align: right; }

/* ── the pass in flight ────────────────────────────────────────────────── */
.ag-live { border: 1px solid var(--act-line); border-radius: var(--r2);
  background: var(--sheet); padding: 16px 18px; }
.ag-live-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ag-live-title { font-size: var(--t-h3); font-weight: 600; }
.ag-meta { font-size: var(--t-meta); color: var(--ink-3); }
.ag-gg { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.ag-cell { height: 22px; border-radius: 2px; border: 1px solid var(--rule-2); background: var(--well);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-label);
  font-family: var(--mono); color: var(--ink-3); padding: 0 7px; }
.ag-cell--done { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.ag-filed { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0;
  border-top: 1px solid var(--rule); }
.ag-filed:first-of-type { border-top: 0; }
.ag-row-in { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ag-input { flex: 1 1 240px; min-width: 0; padding: 7px 10px; border: 1px solid var(--rule-2);
  border-radius: var(--r1); background: var(--sheet); color: var(--ink-1);
  font: inherit; font-size: var(--t-scan); }
.ag-input:focus { outline: none; border-color: var(--act); }   /* the flyout composer's focus, not a second grammar */

/* ── the ledger ────────────────────────────────────────────────────────── */
.ag-ledger { border: 1px solid var(--rule); border-radius: var(--r2);
  background: var(--sheet); overflow: hidden; }
.ag-run { border-bottom: 1px solid var(--rule); }
.ag-run:last-child { border-bottom: 0; }
.ag-run-row { display: grid; grid-template-columns: 118px 1fr auto; gap: 16px; align-items: baseline;
  width: 100%; padding: 11px 16px; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit; font: inherit; }
.ag-run-row:hover { background: var(--sheet-2); }
.ag-run-row:focus-visible { outline: 2px solid var(--act); outline-offset: -2px; }
.ag-run-id { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ag-run-ref { font-family: var(--mono); font-size: var(--t-scan); color: var(--ink-1); }
.ag-run-when { font-size: var(--t-label); color: var(--ink-4); }
.ag-run-mid { min-width: 0; }
.ag-run-pass { display: block; font-size: var(--t-scan); font-weight: 600;
  color: var(--ink-1); margin-bottom: 2px; }
.ag-run-verdict { display: block; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.5; }
.ag-run-verdict .fig { color: var(--ink-1); font-weight: 600; }
.ag-run-flag { display: block; font-size: var(--t-meta); color: var(--attend);
  margin-top: 3px; line-height: 1.5; }
.ag-run-flag--bad { color: var(--broken); }
.ag-run-push { display: block; font-size: var(--t-meta); color: var(--ink-3);
  margin-top: 3px; line-height: 1.5; }
.ag-run-push .n { color: var(--attend); font-weight: 600; }
.ag-run-right { display: flex; align-items: center; gap: 10px; justify-self: end; flex-wrap: wrap;
  justify-content: flex-end; }
.ag-seal { font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; padding: 2px 7px; border-radius: var(--r1); border: 1px solid; white-space: nowrap; }
.ag-seal--ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.ag-seal--attend { color: var(--attend); border-color: var(--attend-line); background: var(--attend-soft); }
.ag-seal--broken { color: var(--broken); border-color: var(--broken-line); background: var(--broken-soft); }
.ag-seal--none { color: var(--ink-3); border-color: var(--rule-2); background: var(--sheet-2); }

/* ── the run expansion (replaces the slide-in) ─────────────────────────── */
.ag-open { padding: 4px 16px 22px; background: var(--sheet-2); border-top: 1px solid var(--rule); }
.ag-sub { margin: 16px 0 0; }
.ag-sub-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ag-acct { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet); overflow: hidden; }
.ag-acct-row { display: grid; grid-template-columns: 118px 1fr 46px; gap: 12px;
  padding: 7px 12px; border-top: 1px solid var(--rule);
  font-size: var(--t-meta); line-height: 1.5; align-items: baseline; }
.ag-acct-row:first-child { border-top: 0; }
.ag-acct-row--zero { color: var(--ink-4); }
.ag-acct-k { font-family: var(--mono); font-size: 12px; color: var(--ink-2); word-break: break-word; }
.ag-acct-row--zero .ag-acct-k { color: var(--ink-4); }
.ag-acct-n { text-align: right; font-weight: 600; color: var(--ink-1); }
.ag-acct-row--zero .ag-acct-n { font-weight: 400; color: var(--ink-4); }
.ag-acct-sec { padding: 7px 12px; border-top: 1px solid var(--rule); background: var(--sheet-2); }
.ag-acct-warn { padding: 9px 12px; background: var(--attend-soft); color: var(--attend);
  font-size: var(--t-meta); line-height: 1.5; border-top: 1px solid var(--attend-line); }
.ag-acct-none { padding: 11px 12px; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.55; }

.ag-prop { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  padding: 11px 13px; margin-bottom: 8px; }
.ag-prop-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 5px; font-size: var(--t-meta); color: var(--ink-3); }
.ag-prop-st { margin-left: auto; font-size: var(--t-meta); color: var(--ink-3); }
.ag-prop-st--bad { color: var(--attend); }
.ag-reflist { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.ag-pill { font-size: var(--t-label); padding: 1px 6px; border-radius: var(--r1);
  border: 1px solid var(--rule-2); color: var(--ink-3); background: var(--sheet-2); white-space: nowrap; }
.ag-pill--push { color: var(--attend); border-color: var(--attend-line); background: var(--attend-soft); }
.ag-pill--miss { color: var(--ink-4); border-style: dashed; }
.ag-reflist .ag-pill { font-family: var(--mono); }

/* The provenance record is a DISCLOSURE, not a page: run #43 is 82 turns and 125 tool calls,
   and letting it set the page height would bury the two runs below it. */
.ag-tsheet { border: 1px solid var(--rule); border-radius: var(--r2);
  background: var(--sheet); padding: 4px 14px 10px; max-height: 620px; overflow-y: auto; }
.ag-tuser { color: var(--ink-4); font-style: italic; }
.ag-tstep { padding: 10px 0; border-top: 1px solid var(--rule); }
.ag-tstep:first-child { border-top: 0; }
.ag-tsay { font-size: var(--t-scan); color: var(--ink-2); line-height: 1.55;
  margin: 0 0 7px; max-width: var(--measure-read); white-space: pre-wrap; }
.ag-tcall { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 4px 0; font-size: var(--t-meta); }
.ag-tcall .ag-tname { font-family: var(--mono); font-size: 12px; color: var(--ink-1); }
.ag-tcall .ag-targ { font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 160px; min-width: 0; }
.ag-push-msg { flex-basis: 100%; margin-top: 3px; padding: 6px 9px;
  border-left: 2px solid var(--attend-line); background: var(--attend-soft);
  color: var(--attend); font-size: var(--t-meta); line-height: 1.5; white-space: pre-wrap; }
.ag-miss-msg { flex-basis: 100%; margin-top: 3px; padding: 6px 9px;
  border-left: 2px solid var(--rule-2); background: var(--sheet-2);
  color: var(--ink-3); font-size: var(--t-meta); line-height: 1.5; white-space: pre-wrap; }

.ag-prov { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet);
  padding: 11px 13px; font-size: var(--t-meta); color: var(--ink-3); line-height: 1.6; }
.ag-prov .src-ref { color: var(--ink-2); }
.ag-prov-acts { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── the corpus dock ───────────────────────────────────────────────────── */
.ag-dock { border: 1px solid var(--rule); border-radius: var(--r2); background: var(--sheet); }
.ag-dock-bar { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit; font: inherit; }
.ag-dock-bar:hover { background: var(--sheet-2); }
.ag-dock-body { border-top: 1px solid var(--rule); padding: 14px; }
.ag-dock-log { max-height: 460px; overflow-y: auto; }
/* ONE CHAT DRESS — the dock's turns wear the flyout grammar (.rw-msg-op / .rw-msg-ag): the
   operator's words are the accent-soft bubble on the right, the agent's the bordered card
   with its uppercase byline. Same conversation machinery, same face — the serif reading
   voice this zone used to wear made the desk's chat look like a different product from the
   bench, planner and modal chats. */
.ag-turn { max-width: none; }
.ag-turn--user { margin: 6px 0 6px auto; width: fit-content; max-width: min(56ch, 86%);
  background: var(--act-soft); border: 1px solid var(--rule-2); border-radius: var(--r2);
  padding: 8px 12px; }
.ag-turn--user .ag-turn-who { display: none; }   /* the bubble's side already says who */
.ag-turn--user .ag-turn-body { font-size: var(--t-scan); line-height: 1.5; color: var(--ink-1);
  white-space: pre-wrap; }
.ag-turn--agent { margin: 6px 0; background: var(--sheet-2); border: 1px solid var(--rule-2);
  border-radius: var(--r2); padding: 10px 12px; }
.ag-turn-who { font-size: var(--t-label); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.ag-turn--agent .ag-turn-body { font-size: var(--t-scan); color: var(--ink-2);
  line-height: 1.55; white-space: pre-wrap; }

/* a text-level route, never a peer of a filled control */
.ag-link { font: inherit; font-size: var(--t-meta); color: var(--act); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--act-line); text-underline-offset: 3px; }
.ag-link:hover { text-decoration-color: var(--act); }

@media (max-width: 720px) {
  .ag-run-row { grid-template-columns: 1fr; gap: 6px; }
  .ag-run-right { justify-self: start; justify-content: flex-start; }
  .ag-acct-row { grid-template-columns: 96px 1fr 38px; }
  .ag-drow { grid-template-columns: 22px 70px 1fr; }
  .ag-drow .ag-dwhen, .ag-drow .ag-dstate { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIFECYCLE — the engagement console (tab-lifecycle).
   Shell, masthead and zone heads come from the shared kit (attest.css §7).
   Everything here is the tab's own content dress, scoped `.lc-*`.
   ═══════════════════════════════════════════════════════════════════════════ */
.lc-mast-side { margin-left: auto; text-align: right; flex: none; }
.lc .zone-head .u-label .src-ref { color: var(--ink-3); }
.zone-note .na { color: var(--ink-4); }

.lc-link { font: inherit; font-size: var(--t-meta); color: var(--act); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--act-line); text-underline-offset: 3px; }
.lc-link:hover { text-decoration-color: var(--act); }
.lc-hint { font-size: var(--t-meta); color: var(--ink-3); }
.lc-hint b { color: var(--ink-1); font-weight: 600; }

/* ── the verdict: the ONE loud element on the page (UNIFIED-DESIGN §2) ──── */
.lc-verdict { margin-top: 20px; background: var(--sheet); border: 1px solid var(--rule-2);
  border-left: 2px solid var(--ink-1); border-radius: 0; padding: 18px 20px; }
.lc-verdict--clear { border-left-color: var(--ok); }
.lc-verdict--broken { border-left-color: var(--broken); }
.lc-vhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.lc-vlead { margin: 0; font-size: var(--t-lead); line-height: 1.5; max-width: 56ch; color: var(--ink-1); }
.lc-vlead b { font-weight: 650; }
.lc-because { margin-top: 8px; font-size: var(--t-scan); color: var(--ink-3);
  max-width: 66ch; line-height: 1.5; }
.lc-acts { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lc-spring { flex: 1; }

/* a text-level escape, never a peer of the filled control */
.lc-quiet { font: inherit; font-size: var(--t-scan); font-weight: 500; background: none;
  border: 0; border-radius: 0; padding: 2px 2px; cursor: pointer; color: var(--act);
  text-decoration: underline; text-decoration-color: var(--act-line); text-underline-offset: 3px; }
.lc-quiet:hover:not(:disabled) { text-decoration-color: var(--act); }
.lc-quiet:disabled { opacity: .55; cursor: not-allowed; }
.lc-quiet--attend { color: var(--attend); text-decoration-color: var(--attend-line); }
.lc-quiet--attend:hover:not(:disabled) { text-decoration-color: var(--attend); }

/* ── the approach vector, on its own sheet ─────────────────────────────── */
.lc-railsheet { margin-top: 20px; background: var(--sheet); border: 1px solid var(--rule-2);
  border-radius: var(--r2); padding: 12px 16px 13px; }
.lc-rail { display: flex; gap: 4px; align-items: flex-end; }
.lc-rstep { flex: 1 1 0; min-width: 0; padding: 6px 4px 5px; text-align: left;
  border: 0; border-top: 2px solid var(--rule); background: none; color: inherit; cursor: pointer; }
.lc-rstep .g { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .06em; color: var(--ink-4); }
.lc-rstep .l { font-size: var(--t-label); color: var(--ink-4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lc-rstep--passed { border-top-color: var(--ink-4); }
.lc-rstep--passed .g, .lc-rstep--passed .l { color: var(--ink-3); }
.lc-rstep--active { border-top-color: var(--ink-1); }
.lc-rstep--active .g { color: var(--ink-1); }
.lc-rstep--active .l { color: var(--ink-1); font-weight: 650; }
.lc-rstep--debt .g::after { content: ' \\25C7'; color: var(--attend); }
.lc-railcap { font-size: var(--t-meta); color: var(--ink-3); margin-top: 10px; }
.lc-railcap b { color: var(--ink-1); font-weight: 600; }

.lc-block { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 2px;
  padding-bottom: 4px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }

/* ── condition rows, on a sheet ────────────────────────────────────────── */
.lc-list { background: var(--sheet); border: 1px solid var(--rule-2);
  border-radius: var(--r2); padding: 0 16px; margin-top: 2px; }
.lc-cond { display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; padding: 12px 0;
  border-bottom: 1px solid var(--rule); }
.lc-cond:last-child { border-bottom: 0; }
.lc-mark { font-family: var(--mono); font-size: 14px; line-height: 1.3; text-align: center;
  user-select: none; padding-top: 1px; }
.lc-mark--held { color: var(--ink-1); }
.lc-mark--unheld { color: var(--attend); }
.lc-mark--auto { color: var(--ink-3); }
.lc-mark--na { color: var(--ink-4); }
.lc-mark--quiet { color: var(--ink-4); }
/* a manual condition's mark IS the control, and says so with one rule under the glyph */
button.lc-mark { border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  width: 22px; height: 21px; display: flex; align-items: center; justify-content: center;
  padding: 0; background: none; cursor: pointer; }
button.lc-mark:hover { border-bottom-color: var(--ink-3); }
.lc-clabel { font-size: var(--t-ui); color: var(--ink-1); font-weight: 500; }
.lc-cond--met .lc-clabel { font-weight: 400; color: var(--ink-2); }
.lc-cdetail { font-size: var(--t-scan); color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.lc-cdetail--open { color: var(--ink-2); }
.lc-kind { font-size: var(--t-label); color: var(--ink-4); letter-spacing: .04em; }

/* subjects are REFS, not pills: mono on the grid, dotted underline for "more behind this word" */
.lc-subjects { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 7px;
  font-size: var(--t-label); color: var(--ink-4); align-items: baseline; }
.lc-subjects::before { content: 'subjects'; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; }
.lc-subj { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: -.01em;
  border-bottom: 1px dotted var(--ink-4); cursor: help; }
.lc-subj-more { font-size: var(--t-label); color: var(--ink-4); }

/* a route is a LINK; the affordance is the underline, not a box */
.lc-routes { margin-top: 9px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lc-route { font: inherit; font-size: var(--t-meta); font-weight: 500; color: var(--act);
  background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--act-line); text-underline-offset: 3px; }
.lc-route:hover { text-decoration-color: var(--act); }
.lc-route .n { font-variant-numeric: tabular-nums lining-nums; opacity: .85; }
.lc-conseq { margin-top: 9px; font-size: var(--t-scan); color: var(--ink-2); line-height: 1.5;
  border-left: 2px solid var(--rule-2); padding-left: 10px; max-width: 74ch; }
.lc-conseq .src-ref { color: var(--ink-1); }

/* the operator's note is the record: serif, written ON the grid */
.lc-noteline { margin-top: 8px; display: flex; align-items: flex-start; gap: 8px; }
.lc-note { font-family: var(--serif); font-size: var(--t-read); line-height: 1.5; color: var(--ink-1);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 1px 0 3px;
  width: 100%; max-width: 60ch; resize: none; overflow: hidden; }
.lc-note::placeholder { font-family: var(--sans); font-size: var(--t-scan); color: var(--ink-4); }
.lc-note:focus { outline: none; border-bottom: 2px solid var(--act); padding-bottom: 2px; }
.lc-saved { font-size: var(--t-label); color: var(--ok); white-space: nowrap; flex: none;
  transition: opacity var(--dt-fast) var(--ease); }

/* held conditions, collapsed */
.lc-heldrow { display: grid; grid-template-columns: 22px 1fr auto; gap: 0 10px; padding: 8px 0;
  border-bottom: 1px solid var(--rule); align-items: baseline; }
.lc-heldrow:last-child { border-bottom: 0; }
.lc-heldrow .t { font-size: var(--t-scan); color: var(--ink-2); }
.lc-heldrow .d { font-size: var(--t-meta); color: var(--ink-4); text-align: right; max-width: 42ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-disc { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-meta);
  color: var(--act); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* the zone's own secondary verb rides inside the sheet */
.lc-addrow { display: flex; gap: 8px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--rule); flex-wrap: wrap; }
.lc-addrow .form-input { max-width: 420px; }

/* ── the ahead ledger, on a sheet ──────────────────────────────────────── */
.lc-ahead { background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r2);
  overflow: hidden; }
.lc-arow { display: grid; grid-template-columns: 46px 1fr 250px 22px; gap: 12px; align-items: center;
  padding: 10px 16px; border: 0; border-top: 1px solid var(--rule); width: 100%; text-align: left;
  background: none; color: inherit; cursor: pointer; }
.lc-ahead > *:first-child { border-top: 0; }
.lc-arow:hover { background: var(--sheet-2); }
.lc-arow .g { font-family: var(--mono); font-size: var(--t-scan); color: var(--ink-2); }
.lc-arow .t { font-size: var(--t-scan); color: var(--ink-1); min-width: 0; }
.lc-arow .t small { display: block; color: var(--ink-4); font-size: var(--t-label);
  letter-spacing: .03em; text-transform: uppercase; }
.lc-arow .st { font-size: var(--t-meta); color: var(--ink-3); text-align: right;
  font-variant-numeric: tabular-nums lining-nums; }
.lc-arow .st .na { color: var(--ink-4); }
.lc-arow .chev { color: var(--ink-4); font-size: 12px; text-align: center; }
.lc-apanel { padding: 2px 16px 14px 62px; border-top: 1px solid var(--rule); background: var(--sheet-2); }
.lc-apanel .lc-cond { padding: 9px 0; }
.lc-endpoint { font-family: var(--mono); font-size: 12px; color: var(--ink-4); margin-top: 10px; }
.lc-note-na { margin-top: 10px; font-size: var(--t-scan); color: var(--ink-3);
  line-height: 1.5; max-width: 74ch; }

/* ── the record, on a sheet ────────────────────────────────────────────── */
.lc-record { background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r2);
  padding: 0 16px; }
.lc-trow { display: grid; grid-template-columns: 1fr 210px; gap: 16px; padding: 13px 0;
  border-bottom: 1px solid var(--rule); }
.lc-trow:last-child { border-bottom: 0; }
.lc-move { font-size: var(--t-ui); font-weight: 600; display: flex; gap: 10px;
  align-items: baseline; flex-wrap: wrap; }
.lc-snap { font-size: var(--t-meta); color: var(--ink-3); margin-top: 4px; }
.lc-when { text-align: right; font-size: var(--t-meta); color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums; }
.lc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-label);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  border: 0; padding: 0; background: none; }
.lc-badge--attend { color: var(--attend); }
.lc-badge--ok { color: var(--ok); }
.lc-reason { margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--attend-line); }
.lc-debt { margin-top: 7px; font-size: var(--t-scan); color: var(--attend); line-height: 1.5; max-width: 70ch; }

/* ── states ────────────────────────────────────────────────────────────── */
.lc-state { background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r2);
  border-left: 2px solid var(--rule-2); padding: 16px 20px; max-width: 74ch; margin-top: 20px; }
.lc-state--broken { border-left-color: var(--broken); }
.lc-state h3 { margin: 0 0 8px; font-size: var(--t-h3); }
.lc-state p { margin: 0 0 12px; font-size: var(--t-scan); color: var(--ink-2); line-height: 1.55; }
.lc-state .lc-routes { margin-top: 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
.lc-notice { margin-top: 10px; font-size: var(--t-meta); color: var(--attend); }
.lc-skel { background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r2);
  padding: 18px 20px; margin-top: 20px; font-size: var(--t-scan); color: var(--ink-3); }

.lc-foot { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 14px;
  font-size: var(--t-meta); color: var(--ink-4); line-height: 1.6; max-width: 78ch; }
.lc-foot .src-ref { color: var(--ink-3); }

@media (max-width: 860px) {
  .lc-rail { flex-wrap: wrap; }
  .lc-rstep { flex: 0 0 calc(33.33% - 4px); }
  .lc-arow { grid-template-columns: 44px 1fr; }
  .lc-arow .st { grid-column: 2; text-align: left; margin-top: 2px; }
  .lc-arow .chev { display: none; }
  .lc-trow { grid-template-columns: 1fr; }
  .lc-when { text-align: left; }
  .lc-apanel { padding-left: 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL ADMIN — the projection console (tab-portal).
   Shell, masthead, rail, master-switch band, zone heads and sheets come from
   the shared kit (attest.css §7). Everything here is the tab's own dress,
   scoped `.pa-*`. The preview pane PINS DAY (LAW 4).
   ═══════════════════════════════════════════════════════════════════════════ */
.pa-h1 { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.pa-instr { margin-bottom: 30px; }
.fv .pa-move { color: var(--act); margin-left: 8px; font-weight: 600; }
.fd .warn { color: var(--attend); }
.fd .act { color: var(--act); }
.instr-band.pa-switch { padding: 10px var(--s16); font-size: var(--t-meta); color: var(--ink-3); }
.zone-count .act { color: var(--act); }
.pa-sheet > .zone-empty, .pa-sheet > .pa-pad { padding: 14px 16px; }
.sheet.pa-move { padding: 18px 20px; }

.pa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.pa-dot--off { background: var(--ink-4); }
.pa-state { font-size: var(--t-label); color: var(--ink-3); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; }

.pa-switch-say { flex: 1 1 320px; min-width: 0; line-height: 1.5; }
.pa-switch-say b { color: var(--ink-1); font-weight: 600; }
.pa-switch-acts { margin-left: auto; display: flex; gap: var(--s8); align-items: center; }


.pa-move-head { display: flex; align-items: flex-start; gap: var(--s16); flex-wrap: wrap; }
.pa-move h2 { margin: 0; font-size: var(--t-h2); line-height: 1.28; max-width: 38ch;
  font-weight: 600; letter-spacing: -.015em; }
.pa-move-cta { margin-left: auto; display: flex; gap: var(--s8); align-items: center; }
.pa-move-why { margin-top: var(--s12); }
.pa-chips { margin-top: var(--s12); display: flex; gap: var(--s6); flex-wrap: wrap; align-items: center; }
.pa-chip { display: inline-flex; align-items: center; font-size: var(--t-label); padding: 2px 8px;
  border: 1px dashed var(--rule-2); border-radius: var(--r1); color: var(--ink-3);
  white-space: nowrap; line-height: 1.7; }
/* the disclosure lives INSIDE the move sheet — it is that card's own control */
.pa-qtoggle { margin-top: var(--s16); padding-top: var(--s12); border-top: 1px solid var(--rule);
  width: 100%; text-align: left; font-size: var(--t-scan); color: var(--ink-3);
  display: flex; align-items: center; gap: var(--s6); background: none; border-left: 0;
  border-right: 0; border-bottom: 0; cursor: pointer; font-family: inherit; }
.pa-qtoggle:hover { color: var(--act); }
.pa-qlist { margin-top: var(--s12); border: 1px solid var(--rule); border-radius: var(--r2);
  background: var(--sheet); overflow: hidden; }
.pa-qrow { display: flex; gap: var(--s12); align-items: flex-start; padding: var(--s12) 16px;
  border-top: 1px solid var(--rule); }
.pa-qrow:first-child { border-top: 0; }
.pa-qn { min-width: 18px; flex: none; padding-top: 2px; font-size: var(--t-meta); color: var(--ink-4); }
.pa-qtitle { font-size: var(--t-ui); font-weight: 500; }
.pa-qwhy { font-size: var(--t-scan); color: var(--ink-2); margin-top: 3px;
  max-width: var(--measure-read); line-height: var(--lh-scan); }

/* ── zone 2 · the projection ───────────────────────────────────────────── */
.pa-proj { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: var(--s32); align-items: start; }
.pa-navtab { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: var(--s12);
  align-items: baseline; padding: var(--s12) 16px; border-top: 1px solid var(--rule); }
.pa-navtab:first-child { border-top: 0; }
.pa-navtab-mark { font-size: var(--t-scan); line-height: 1.4; padding-top: 2px; }
.pa-navtab-name { font-size: var(--t-ui); font-weight: 600; }
.pa-navtab--off .pa-navtab-name { color: var(--ink-4); font-weight: 400; }
.pa-navtab-why { font-size: var(--t-meta); color: var(--ink-3); margin-top: 3px; }
.pa-navtab-why .warn { color: var(--attend); }
.pa-navtab-cap { font-size: var(--t-meta); color: var(--ink-2); text-align: right; }
/* the provenance sentence is content, so it stays ON the sheet — a footer, not a float */
.pa-projnote { border-top: 1px solid var(--rule); background: var(--sheet-2);
  padding: var(--s12) 16px; font-size: var(--t-scan); line-height: var(--lh-scan);
  color: var(--ink-3); max-width: none; }

/* THE PREVIEW PANE PINS DAY (LAW 4) — the portal has no theme toggle, so a faithful
   miniature cannot follow the operator's night paper. */
.pa-preview {
  --field: #F4F2EE; --sheet: #FFFFFF; --sheet-2: #FAF9F6; --well: #EFECE6;
  --ink-1: #1A1917; --ink-2: #454239; --ink-3: #63605A; --ink-4: #6C675C;
  --rule: #E3DFD8; --rule-2: #C8C3B9;
  --act: #2445C9; --act-soft: #E9EBFB; --act-line: #8B9CE8; --act-ink: #FFFFFF;
  --ok: #1A6E3C; --attend: #8A5300; --attend-soft: #FAF1E0; --attend-line: #C9973F;
  background: var(--field); color: var(--ink-1);
  border: 1px solid var(--rule-2); border-radius: var(--r2); overflow: hidden;
}
.pa-preview .pv-head { background: var(--sheet); border-bottom: 1px solid var(--rule);
  padding: var(--s12) var(--s16); }
.pa-preview .pv-brand { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-1); }
.pa-preview .pv-eng { font-size: var(--t-scan); color: var(--ink-3); margin-top: 3px; }
.pa-preview .pv-tabs { display: flex; gap: var(--s16); padding: 0 var(--s16); background: var(--sheet);
  border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.pa-preview .pv-tab { font-size: var(--t-meta); color: var(--ink-3); padding: 7px 0 6px;
  border-bottom: 2px solid transparent; background: none; border-left: 0; border-right: 0;
  border-top: 0; cursor: pointer; font-family: inherit; }
.pa-preview .pv-tab.on { color: var(--ink-1); font-weight: 600; border-bottom-color: var(--act); }
.pa-preview .pv-body { padding: var(--s16); min-height: 190px; }
.pa-preview .pv-row { padding: var(--s8) 0; border-top: 1px solid var(--rule); }
.pa-preview .pv-row:first-child { border-top: 0; }
.pa-preview .pv-ref { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); }
.pa-preview .pv-stmt { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--ink-1); }
.pa-preview .pv-stmt--record { font-family: var(--serif); font-variant-numeric: normal; }
.pa-preview .pv-stmt--ref { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  overflow-wrap: anywhere; }
.pa-preview .pv-more { font-size: var(--t-label); color: var(--ink-4); margin-top: 10px; }
.pa-preview .pv-empty { font-size: var(--t-scan); color: var(--attend);
  border: 1px dashed var(--attend-line); border-radius: var(--r1); padding: var(--s12);
  background: var(--attend-soft); }
.pa-preview .pv-quiet { font-size: var(--t-scan); color: var(--ink-3); border: 1px solid var(--rule);
  border-radius: var(--r1); padding: var(--s12); background: var(--sheet); }
.pa-preview .pv-note { font-size: var(--t-label); color: var(--ink-4);
  padding: var(--s8) var(--s16) var(--s12); border-top: 1px solid var(--rule); background: var(--sheet-2); }
.pa-preview .pv-signin { max-width: 280px; margin: 6px auto 0; }
.pa-preview .pv-field { height: 30px; border: 1px solid var(--rule-2); border-radius: 3px;
  background: var(--sheet); }
.pa-preview .pv-flabel { font-size: var(--t-meta); color: var(--ink-4); margin-bottom: 6px; }
.pa-preview .pv-signbtn { margin-top: 12px; height: 30px; border-radius: 3px; background: var(--act);
  color: var(--act-ink); font-size: var(--t-scan); display: flex; align-items: center;
  justify-content: center; }
.pa-preview .pv-refused { margin-top: 12px; font-size: var(--t-meta); color: var(--attend);
  text-align: center; }

/* ── zone 3 · what is shared ───────────────────────────────────────────── */
.pa-tsec { border-top: 1px solid var(--rule); }
.pa-tsec:first-child { border-top: 0; }
/* fixed tracks, not fr: a matrix whose selects do not line up is not a matrix */
.pa-tsec-head { display: grid; grid-template-columns: 16px 216px 124px minmax(0, 1fr) 268px;
  gap: var(--s12); align-items: center; width: 100%; text-align: left; padding: var(--s12) 16px;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.pa-tsec-head:hover { background: var(--sheet-2); }
.pa-tsec-caret { color: var(--ink-4); font-size: var(--t-meta);
  transition: transform var(--dt-fast) var(--ease); }
.pa-tsec--open .pa-tsec-caret { transform: rotate(90deg); }
.pa-tsec-name { font-size: var(--t-ui); font-weight: 600; }
.pa-tsec--hidden .pa-tsec-name { color: var(--ink-3); font-weight: 400; }
.pa-tsec-tally { font-size: var(--t-meta); color: var(--ink-3); }
.pa-tsec-tally .strong { color: var(--ink-1); font-weight: 600; }
.pa-tsec-note { font-size: var(--t-meta); color: var(--ink-4); justify-self: end; text-align: right; }
.pa-tsec-note .warn { color: var(--attend); }
.pa-tsec-body { padding: 0 16px var(--s16) var(--s32); }
.pa-tsec-verbs { display: flex; gap: var(--s8); align-items: center; padding: var(--s4) 0 var(--s12);
  flex-wrap: wrap; }
.pa-tsec-verbs .spacer { margin-left: auto; font-size: var(--t-meta); color: var(--ink-4); }
.pa-prow { display: grid; grid-template-columns: 16px 92px minmax(0, 1fr) 124px; gap: var(--s12);
  align-items: start; padding: var(--s8) 0; border-top: 1px solid var(--rule); }
.pa-prow-ref { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-2); padding-top: 2px; }
.pa-prow-stmt { font-size: var(--t-read); line-height: 1.5; color: var(--ink-1);
  max-width: var(--measure-quote); }
.pa-prow-stmt--record { font-family: var(--serif); font-variant-numeric: normal; }
.pa-prow-stmt--label { font-size: var(--t-ui); }
.pa-prow-stmt--ref { font-family: var(--mono); font-size: var(--t-scan); letter-spacing: -.01em;
  color: var(--ink-2); overflow-wrap: anywhere; }
.pa-prow > .att { font-size: 15px; line-height: 1; padding-top: 5px; }
.pa-prow--off .pa-prow-stmt { color: var(--ink-3); }
.pa-prow-meta { font-size: var(--t-meta); color: var(--ink-4); margin-top: 3px; display: flex;
  gap: var(--s8); flex-wrap: wrap; }
.pa-prow-meta .warn { color: var(--attend); }
.pa-pub { justify-self: end; display: inline-flex; align-items: center; gap: var(--s6);
  font-size: var(--t-meta); color: var(--ink-3); border: 1px solid transparent;
  border-radius: var(--r1); padding: 2px 6px; white-space: nowrap; background: none;
  cursor: pointer; font-family: inherit; }
.pa-pub:hover { border-color: var(--rule-2); background: var(--sheet-2); }
.pa-pub-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-4); flex: none; }
.pa-pub--on .pa-pub-dot { background: var(--ink-1); border-color: var(--ink-1); }
.pa-pub--on { color: var(--ink-1); font-weight: 600; }
.pa-pub--staged .pa-pub-dot { border-style: dashed; border-color: var(--act); background: none; }
.pa-pub--staged { color: var(--act); font-weight: 600; }
.pa-pub--stagedoff .pa-pub-dot { border-color: var(--act); background: none; }
.pa-pub--stagedoff { color: var(--act); text-decoration: line-through; }

/* the staging bar — a FLOATING layer, so it may carry the one shadow (LAW 3) */
.pa-stagebar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: var(--s16); background: var(--sheet);
  border: 1px solid var(--rule-2); border-radius: var(--r8); box-shadow: var(--lift-1);
  padding: 10px var(--s16); max-width: min(920px, calc(100vw - 48px)); }
.pa-stage-what { font-size: var(--t-scan); color: var(--ink-2); }
.pa-stage-what b { color: var(--ink-1); }
.pa-stage-warn { font-size: var(--t-meta); color: var(--attend); }
.pa-stage-verbs { margin-left: auto; display: flex; gap: var(--s8); }

/* ── zone 4 · people ───────────────────────────────────────────────────── */
.pa-prow2 { display: grid; grid-template-columns: minmax(0, 1.2fr) 132px minmax(0, 1.3fr) 196px;
  gap: var(--s16); align-items: start; padding: var(--s12) 16px; border-top: 1px solid var(--rule); }
.pa-prow2:first-child { border-top: 0; }
.pa-pname { font-size: var(--t-ui); }
.pa-pmail { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); margin-top: 2px; }
.pa-plink { font-size: var(--t-label); color: var(--ink-4); margin-top: 2px; }
.pa-pstate { font-size: var(--t-meta); color: var(--ink-3); }
.pa-pcan { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.6; }
.pa-pcan .none { color: var(--ink-4); }
.pa-pverbs { display: flex; gap: var(--s6); align-items: flex-start; justify-self: end; flex-wrap: wrap;
  justify-content: flex-end; }
.pa-invite { margin-top: var(--s8); display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap; }
.pa-invite input { font-family: var(--mono); font-size: var(--t-meta); flex: 1 1 220px; min-width: 0;
  padding: 3px 6px; border: 1px solid var(--rule-2); border-radius: var(--r1);
  background: var(--sheet-2); color: var(--ink-2); }

/* ── zone 5 · conversation ─────────────────────────────────────────────── */
.pa-thread { border-top: 1px solid var(--rule); padding: var(--s16) 16px; scroll-margin-top: 24px; }
.pa-thread:first-child { border-top: 0; }
/* the open thread is distinguished by what it CARRIES — the statement and the reply box —
   not by a hue. LAW 2: the accent means interaction, and "open" is not an interaction. */
.pa-thread--lit { background: var(--sheet-2); }
.pa-thread-head { display: flex; align-items: baseline; gap: var(--s12); flex-wrap: wrap; }
.pa-thread-ref { font-family: var(--mono); font-size: var(--t-scan); color: var(--act);
  background: none; border: 0; cursor: pointer; padding: 0; }
.pa-thread-ref:hover { text-decoration: underline; }
.pa-thread-age { font-size: var(--t-meta); color: var(--ink-4); }
.pa-msg { margin-top: var(--s12); }
/* A3 — the author is distinguished by POSITION and a badge, never by the interaction hue. */
.pa-msg--you { padding-left: var(--s16); border-left: 1px solid var(--rule-2); }
.pa-reply { margin-top: var(--s12); max-width: var(--measure-read); }
.pa-reply textarea { width: 100%; min-height: 62px; padding: 8px 10px; border: 1px solid var(--rule-2);
  border-radius: var(--r1); background: var(--sheet); color: var(--ink-1); font-size: var(--t-scan);
  line-height: 1.5; resize: vertical; font-family: inherit; }
.pa-reply-verbs { margin-top: var(--s8); display: flex; gap: var(--s8); align-items: center; }


@media (max-width: 980px) {
  .pa-proj { grid-template-columns: minmax(0, 1fr); }
  .pa-tsec-head { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .pa-tsec-tally, .pa-tsec-note { grid-column: 2 / -1; justify-self: start; text-align: left; }
  .pa-prow2 { grid-template-columns: minmax(0, 1fr); }
  .pa-pverbs { justify-self: start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PROPOSALS — the standing queue (tab-proposals).
   Shell, masthead, rail, zone heads and sheet containers come from the shared
   kit (attest.css §7). Everything here is the tab's own dress, scoped `.pq-*`.
   ═══════════════════════════════════════════════════════════════════════════ */
.pq-ledger > .pq-rat { padding: 12px 16px; }
.sheet.pq-empty { padding: 34px 30px; max-width: 74ch; }
.pq-meter { margin-top: 9px; height: 3px; background: var(--well); border: 1px solid var(--rule);
  border-radius: 2px; overflow: hidden; }
.pq-meter i { display: block; height: 100%; background: var(--ink-2); }

.pq-sub { margin-top: 6px; font-size: var(--t-meta); color: var(--ink-3);
  max-width: 78ch; line-height: 1.45; }
.pq-sub .src-ref { color: var(--ink-2); }
.pq-gateline { display: block; margin-top: 5px; font-size: var(--t-meta); color: var(--ink-3); max-width: 78ch; }
.pq-keys { font-family: var(--mono); font-size: var(--t-label); color: var(--ink-4); }
.pq-notice { font-size: var(--t-meta); color: var(--attend); }



/* ── the alert strip — present ONLY when a run earned it ───────────────── */
.pq-alert { border: 1px solid var(--rule-2); border-left: 2px solid var(--attend);
  border-radius: var(--r2); background: var(--sheet); padding: 11px 14px; margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: var(--t-scan); }
.pq-alert .note { color: var(--attend); font-size: var(--t-meta); max-width: 92ch; line-height: 1.5; }


/* the pane pair: ONE kit sheet, two halves — deliberately NOT .sheet--clip,
   which would kill the sticky action bar */
.pq-panes { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0; align-items: stretch;
  min-height: min(76vh, 900px); }
/* the rail is exactly as tall as the stand beside it — never taller, never shorter. The scroller
   is absolutely positioned inside the grid cell so the rail's OWN content never sizes the row:
   the stand sets the height, the rail fills it and scrolls inside. */
.pq-qrail { position: relative; border-right: 1px solid var(--rule); background: var(--sheet-2);
  border-radius: var(--r2) 0 0 var(--r2); }
.pq-qwrap { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
/* the two tabs — UNTREATED / TREATED, each with its count; the selected one carries the accent */
.pq-qtabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--rule-2);
  background: var(--sheet-2); border-radius: var(--r2) 0 0 0; }
.pq-qtab { flex: 1 1 0; appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  padding: 10px 12px 9px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--ink-4); border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; justify-content: center; align-items: baseline; gap: 6px; }
.pq-qtab:hover { color: var(--ink-2); }
.pq-qtab.on { color: var(--ink-1); border-bottom-color: var(--act); }
.pq-qtab .n { letter-spacing: 0; font-weight: 400; color: var(--ink-4); }
.pq-qtab.on .n { color: var(--act); }
span.pq-qtab, span.pq-qtab:hover { cursor: default; color: var(--ink-4); }
.pq-qscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-radius: 0 0 0 var(--r2); }
.pq-qempty { padding: 16px 14px; font-size: var(--t-meta); color: var(--ink-4); }
.pq-qgrp { padding: 9px 14px 5px; font-size: var(--t-label); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 600; color: var(--ink-4); background: var(--well);
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 1;
  display: flex; gap: 8px; align-items: baseline; }
.pq-qgrp .n { letter-spacing: 0; text-transform: none; font-weight: 400; }
.pq-qrow { display: grid; grid-template-columns: 16px minmax(0, 1fr) 108px auto; gap: 8px;
  align-items: start; width: 100%; padding: 9px 12px 9px 8px; border: 0;
  border-bottom: 1px solid var(--rule); border-left: 2px solid transparent;
  background: none; font: inherit; font-size: var(--t-scan); color: var(--ink-2);
  text-align: left; cursor: pointer; }
.pq-qrow:hover { background: var(--sheet); }
.pq-qrow.on { background: var(--sheet); border-left-color: var(--act); color: var(--ink-1); }
.pq-qrow .qk { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-4); font-weight: 600; display: block; margin-bottom: 2px; }
.pq-qrow.on .qk { color: var(--ink-2); }
.pq-qrow .qs { line-height: 1.4; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* the attribute column — type · weight · category, each on its own line, ellipsised */
.pq-qattr { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px;
  font-size: var(--t-label); line-height: 1.3; color: var(--ink-4); }
.pq-qattr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-qattr .w { color: var(--ink-3); font-weight: 600; }
/* the sort bar under the tabs — one pressed key; the group headers follow it */
.pq-qsort { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 5px 10px;
  border-bottom: 1px solid var(--rule); background: var(--sheet-2); }
.pq-qsort .u-label { margin-right: 4px; }
.pq-qsortk { appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  font-size: var(--t-label); color: var(--ink-4); padding: 2px 6px; border-radius: var(--r1); }
.pq-qsortk:hover { color: var(--ink-2); }
.pq-qsortk.on { color: var(--ink-1); background: var(--well); }
.pq-qflag { font-size: var(--t-label); font-weight: 600; white-space: nowrap; padding-top: 1px; }
.pq-qflag.attend { color: var(--attend); }
.pq-qflag.broken { color: var(--broken); }
.pq-qflag.mute { color: var(--ink-4); }

/* ── the stand ─────────────────────────────────────────────────────────── */
.pq-stand { padding: 0; min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.pq-sthd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px;
  border-bottom: 1px solid var(--rule); font-size: var(--t-scan); color: var(--ink-3); }
.pq-stkind { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--ink-2); }
.pq-stbody { padding: 20px; flex: 0 0 auto; }
/* an empty state inside the stand is stand copy on the one sheet, not a second framed card */
.pq-stand .empty-state-card { border: 0; background: none; border-radius: 0; padding: 0; }
.pq-sec { margin-top: 22px; }
.pq-sec:first-child { margin-top: 0; }
.pq-lbl { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--ink-4); margin-bottom: 9px;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pq-lbl .r { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 400;
  color: var(--ink-4); }
.pq-attr { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.pq-rat { font-size: var(--t-scan); color: var(--ink-3); line-height: 1.5;
  max-width: var(--measure-read); }
.pq-rat b, .pq-rat strong { color: var(--ink-1); font-weight: 600; }

/* the write preview — what the committing control will do */
.pq-wpre { display: flex; align-items: baseline; gap: 9px; padding: 9px 12px;
  background: var(--well); border: 1px solid var(--rule); border-left: 2px solid var(--ink-3);
  border-radius: var(--r1); font-size: var(--t-scan); color: var(--ink-2); flex-wrap: wrap; }
.pq-wpre .src-ref { color: var(--ink-1); font-weight: 600; }
.pq-wpre--held { border-left-color: var(--ok); }
.pq-wpre--refused { border-left-color: var(--ink-4); }

/* the register neighbourhood */
.pq-nb { border: 1px solid var(--rule); border-radius: var(--r1); background: var(--sheet-2);
  padding: 11px 13px; margin-bottom: 7px; }
.pq-nb.hit { border-color: var(--attend-line, var(--rule-2)); background: var(--attend-soft, var(--sheet-2)); }
.pq-nbhd { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: var(--t-meta); color: var(--ink-3); margin-bottom: 7px; }
.pq-nbhd .src-ref { color: var(--ink-1); font-weight: 600; font-size: var(--t-scan); }
.pq-nb.hit .pq-nbhd .src-ref { color: var(--attend); }
.pq-nbhd .sim { margin-left: auto; color: var(--ink-4); }
.pq-nb .voice-record { font-size: var(--t-scan); line-height: 1.5; }
.pq-nbnone { font-size: var(--t-scan); color: var(--ink-4); padding: 3px 0; }
.pq-dif { font-family: var(--serif); font-size: var(--t-scan); line-height: 1.55; margin-top: 8px;
  padding-top: 8px; border-top: 1px dotted var(--rule-2); color: var(--ink-3); }
.pq-dif ins { color: var(--ok); text-decoration: none; font-weight: 600; }
.pq-dif del { color: var(--broken); opacity: .85; }
.pq-nbacts { margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; }
/* an amendment's before/after — two labelled blocks, not an inline word-diff, because a
   description that was largely rewritten made the diff split mid-token and read as garbage */
.pq-ba { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.pq-ba-k { flex: none; width: 62px; font-size: var(--t-label); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4); }
.pq-ba-k + p { margin: 0; }
.pq-ba-was { color: var(--ink-3); }


/* lint — always in full: a warning under a passing lint is still a warning */
.pq-lint { display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-scan);
  line-height: 1.5; padding: 7px 0; color: var(--ink-2); border-top: 1px dotted var(--rule); }
.pq-lint:first-child { border-top: 0; }
.pq-lint .lm { flex: none; font-size: var(--t-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; width: 52px; padding-top: 2px; color: var(--ink-4); }
.pq-lint.err .lm { color: var(--broken); }
.pq-lint.warn .lm { color: var(--attend); }
.pq-lint.pass .lm { color: var(--ok); }

/* conflict positions */
.pq-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pq-side { border: 1px solid var(--rule); border-radius: var(--r1); padding: 12px;
  background: var(--sheet-2); }
.pq-side.win { border-color: var(--act); background: var(--act-soft); }
.pq-sidehd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px;
  font-size: var(--t-meta); color: var(--ink-3); }
.pq-sidehd .u-label { color: var(--ink-2); }

/* the action row — the FOOT of the sheet, never a floating bar */
.pq-foot { margin-top: auto; position: sticky; bottom: 0; z-index: 5; background: var(--sheet-2);
  border-top: 1px solid var(--rule-2); border-radius: 0 0 var(--r2) 0; }
.pq-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px 20px; }
.pq-acts .spacer { margin-left: auto; }
.pq-count { font-size: var(--t-meta); color: var(--ink-3); }
.pq-reasons { padding: 12px 20px; border-top: 1px solid var(--rule);
  background: var(--attend-soft, var(--sheet-2)); border-radius: 0 0 var(--r2) 0; }
.pq-rg { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.pq-rg button { padding: 5px 10px; font-size: var(--t-scan); font-family: inherit;
  border: 1px solid var(--attend-line, var(--rule-2)); border-radius: var(--r1);
  background: var(--sheet); color: var(--ink-2); cursor: pointer; }
.pq-rg button:hover { background: var(--sheet-2); color: var(--ink-1); border-color: var(--attend); }
.pq-rg button.pre { border-color: var(--attend); color: var(--attend); font-weight: 600; }
.pq-edit { padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--well);
  border-radius: 0 0 var(--r2) 0; }
.pq-edit textarea { width: 100%; font-family: var(--serif); font-size: var(--t-read);
  line-height: var(--lh-read); padding: 9px 11px; border: 1px solid var(--rule-2);
  border-radius: var(--r1); background: var(--sheet); color: var(--ink-1); resize: vertical; }
.pq-edit input, .pq-edit select { width: 100%; font-family: var(--sans); font-size: var(--t-scan);
  padding: 7px 10px; border: 1px solid var(--rule-2); border-radius: var(--r1);
  background: var(--sheet); color: var(--ink-1); }
.pq-edit-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.pq-edit-row > * { flex: 1 1 160px; }
.pq-kbd { font-family: var(--mono); font-size: var(--t-label); color: var(--ink-4);
  border: 1px solid var(--rule); border-radius: 2px; padding: 0 4px; margin-left: 5px; }
.btn-accent .pq-kbd { color: var(--act-ink, #fff); border-color: currentColor; opacity: .7; }

.pq-led { display: grid; grid-template-columns: 20px 96px minmax(0, 1fr) auto auto; gap: 12px;
  align-items: baseline; padding: 8px 16px; border-bottom: 1px solid var(--rule);
  font-size: var(--t-scan); }
.pq-led:last-child { border-bottom: 0; }
.pq-led .lk { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-4); font-weight: 600; }
.pq-led .lt { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-led .lr { color: var(--ink-3); font-size: var(--t-meta); }

/* ── the runs strip ────────────────────────────────────────────────────── */
.pq-run { border: 1px solid var(--rule-2); border-radius: var(--r2); background: var(--sheet);
  margin-bottom: 8px; }
.pq-run.attend { border-left: 2px solid var(--attend); }
.pq-runhd { display: flex; align-items: center; gap: 14px; padding: 11px 14px; flex-wrap: wrap;
  font-size: var(--t-scan); }
.pq-runhd .src-ref { color: var(--ink-1); font-weight: 600; }
.pq-note { color: var(--ink-3); font-size: var(--t-meta); }
.pq-note.attend { color: var(--attend); }
.pq-runbody { border-top: 1px solid var(--rule); padding: 12px 14px; background: var(--sheet-2);
  border-radius: 0 0 var(--r2) var(--r2); }
.pq-acct { font-size: var(--t-scan); color: var(--ink-2); line-height: 1.5; max-width: 96ch; }
.pq-acct > div { padding: 2px 0; border-bottom: 1px dotted var(--rule); }
.pq-acct > div:last-child { border-bottom: 0; }
.pq-acct .muted { color: var(--ink-4); }
.pq-acct b { font-family: var(--mono); font-size: max(12px, .93em); color: var(--ink-1); font-weight: 600; }
.pq-acct strong { color: var(--ink-1); font-weight: 600; }
.pq-acct-head { font-size: var(--t-meta); color: var(--ink-3); margin-bottom: 8px; }
.pq-acct-warn { font-size: var(--t-meta); color: var(--attend); margin-top: 9px; max-width: 92ch;
  line-height: 1.5; }

.pq-empty h3 { margin: 0; font-size: var(--t-h2); font-weight: 600; letter-spacing: -.015em; }
.pq-empty p { margin: 10px 0 0; font-size: var(--t-read); line-height: var(--lh-read); color: var(--ink-2); }
.pq-empty .row { margin-top: 20px; display: flex; gap: 9px; flex-wrap: wrap; }

/* ── loading: the rail's five cells and the zone rhythm are PRESERVED ──── */
.pq-skel { height: 11px; background: var(--well); border-radius: 2px; margin: 9px 0; }
.pq-skel.w40 { width: 40%; } .pq-skel.w70 { width: 70%; }



@media (max-width: 1080px) {
  .pq-panes { grid-template-columns: 1fr; grid-template-rows: 320px minmax(0, 1fr); }
  .pq-qrail { height: 320px; border-right: 0; border-bottom: 1px solid var(--rule);
    border-radius: var(--r2) var(--r2) 0 0; }
  .pq-qtabs { border-radius: var(--r2) var(--r2) 0 0; }
  .pq-qscroll { border-radius: 0; }
  .pq-foot { border-radius: 0 0 var(--r2) var(--r2); }
  .pq-sides { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pq-led { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .pq-led .lk { display: none; }
}



/* ═══ THE APPLICATION LANGUAGE — the DE | EN switch in the topbar ═══ */
.lang-switch { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r1); overflow: hidden; }
.lang-switch-btn { border: 0; background: none; padding: 3px 8px; font: inherit; font-size: var(--t-label);
  letter-spacing: .06em; color: var(--ink-4); cursor: pointer; }
.lang-switch-btn + .lang-switch-btn { border-left: 1px solid var(--rule-2); }
.lang-switch-btn:hover { color: var(--ink-2); }
.lang-switch-btn.on { color: var(--ink-1); background: var(--well); }

/* ═══ THE CONTENT LANGUAGE — <Tx>, its marks, and the topbar setting ═══
   Two rules govern everything below.
   LAW 1: the chip names a LANGUAGE, so it is mono — checkable identity, not a quantity.
   LAW 6: a machine translation is a PROPOSAL about wording (◇ att--proposed); one an operator
   has stood behind is held (▪ att--held). Neither mark is decoration: remove it and the reader
   can no longer tell a projection from the record. Floors: nothing here under 12px (LAW 5). */

.tx-mark { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
  vertical-align: baseline; white-space: nowrap; }
/* Beside a block element (a statement <p>), the marks sit on their own baseline. */
.tx-mark--compact { margin-left: 0; margin-top: 3px; display: inline-flex; }

.tx-chip { font-family: var(--mono); font-size: max(12px, .78em); line-height: 1.35;
  padding: 0 4px; border: 1px solid var(--rule-2); border-radius: var(--r1);
  background: var(--sheet-2); color: var(--ink-3); cursor: pointer; }
button.tx-chip { font-weight: 500; letter-spacing: .02em; }
.tx-chip:hover { color: var(--ink-1); border-color: var(--ink-4); }
/* An original language nobody could read out of the text — assumed from the engagement's
   correspondence language. Dotted, the ATTEST idiom for "can't see it" (.n-unknown). */
.tx-chip--assumed { border-style: dotted; }
.tx-chip--pending { cursor: default; color: var(--ink-4); border-color: var(--rule); }
.tx-chip--frozen { cursor: default; color: var(--ink-4); border-color: var(--rule); }
.tx-chip--attend { cursor: default; color: var(--attend); border-color: var(--attend-line);
  background: var(--attend-soft); }
/* the wrong LANGUAGE, not a wrong word — the broken hue, because what the row claims about
   itself is false (ATTEST: broken is reserved for a statement the record cannot support) */
.tx-chip--broken { cursor: default; color: var(--broken); border-color: var(--broken-line);
  background: var(--broken-soft); }
.tx-claim { font-size: max(12px, .8em); line-height: 1; }

/* The topbar setting: one select for the content language, one toggle for "name every item's
   language". Sized to the same budget as the engagement picker beside it. */
.tx-langset { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.tx-langsel { font-size: var(--t-label); padding: 3px 6px; max-width: 170px; min-width: 0; }
.tx-badgebtn { border: 1px solid var(--rule-2); border-radius: var(--r1); background: none;
  padding: 3px 6px; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em;
  color: var(--ink-4); cursor: pointer; }
.tx-badgebtn:hover { color: var(--ink-2); }
.tx-badgebtn.on { color: var(--ink-1); background: var(--well); }

/* The operator's editor for one translation — detail surfaces only. */
.tx-tools { margin-top: 8px; }
.tx-tools-area { width: 100%; font-family: var(--serif); font-size: var(--t-read);
  line-height: var(--lh-read); }
.tx-tools-verbs { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.tx-tools-err { margin-top: 6px; font-size: var(--t-meta); color: var(--broken); }

/* The Terminology panel (engagement settings → the engagement's own vocabulary). */
.tm-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--rule); }
.tm-row:last-child { border-bottom: 0; }
.tm-term { font-size: var(--t-scan); color: var(--ink-1); }
.tm-term--inv { font-family: var(--mono); font-size: max(12px, .93em); }
.tm-note { grid-column: 1 / -1; font-size: var(--t-meta); color: var(--ink-3); margin-top: 2px; }
.tm-verbs { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.tm-src { font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); }
.tm-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end;
  padding: 12px 0; }
.tm-form .form-input { font-size: var(--t-scan); }
@media (max-width: 760px) {
  .tm-row, .tm-form { grid-template-columns: 1fr; }
  .tm-verbs { justify-content: flex-start; }
}

/* ═══ THE ROADMAP & WORKBENCH (register · deliverables tab) — prototyped 2026-08-24 ═══ */
.rw-subtabs { margin: 0 0 0; }
.rw-subtabs .tab { padding: 6px 13px; font-size: var(--t-meta); }
.rw-board { position: relative; }
.rw-head { display: flex; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.rw-hint { font-size: var(--t-meta); color: var(--ink-3); }
.rw-live { font-size: var(--t-meta); color: var(--act); min-height: 1.2em; }
.rw-scroll { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.rw-scroll::-webkit-scrollbar { display: none; }
/* the compass: a measuring band in place of the scrollbar — week ticks, long month lines,
   and a draggable window showing what the viewport sees */
.rw-compass { position: relative; height: 26px; margin: 0 18px; border-top: 1px solid var(--rule);
  cursor: pointer; touch-action: none; user-select: none; }
.rw-compass .ck { position: absolute; bottom: 5px; width: 1px; height: 7px; background: var(--rule-2); pointer-events: none; }
.rw-compass .ck.mo { height: 15px; background: var(--ink-4); }
.rw-compass .win { position: absolute; top: 4px; bottom: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--act) 14%, transparent); border: 1px solid var(--act-line);
  cursor: grab; min-width: 18px; }
.rw-compass .win:active { cursor: grabbing; }
/* the calendar fits the screen → nothing to pan → no compass */
.rw-compass.off { display: none; }
/* the breakout: the board takes the whole content width when asked */
.rw-widebtn { margin-left: auto; border: 1px solid var(--rule-2); background: var(--sheet); border-radius: var(--r1);
  padding: 1px 8px; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.rw-widebtn:hover { color: var(--act); border-color: var(--act); }
.rw-board--wide { width: calc(100vw - var(--sidebar-w, 216px) - 48px);
  margin-left: calc((100% - (100vw - var(--sidebar-w, 216px) - 48px)) / 2); }
.shell--collapsed .rw-board--wide { width: calc(100vw - 48px - 48px);
  margin-left: calc((100% - (100vw - 48px - 48px)) / 2); }
@media (prefers-reduced-motion: reduce) { .rw-scroll { scroll-behavior: auto; } }
.rw { padding: 18px; min-height: 452px; }
.rw-months { display: grid; border-bottom: 1px solid var(--rule-2); }
.rw-month { padding: 0 10px 8px; }
.rw-month .y { color: var(--ink-4); font-weight: 400; letter-spacing: .05em; margin-left: 4px; }
.rw-grid { position: relative; display: grid; align-content: start; gap: 12px 0; padding-top: 16px;
  background-image:
    repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), var(--well) calc(100% - 1px), var(--well) 100%),
    repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), var(--rule-2) calc(100% - 1px), var(--rule-2) 100%);
  background-repeat: repeat-x; }
.rw-card { background: var(--sheet); border: 1px solid var(--rule-2); border-left: 3px solid var(--act);
  border-radius: var(--r2); padding: 9px 12px 7px; margin: 0 5px; box-shadow: 0 1px 0 rgba(33,30,25,.04);
  position: relative; cursor: grab; user-select: none; touch-action: none; will-change: transform; }
.rw-card:hover { border-color: var(--act); box-shadow: 0 2px 8px rgba(47,78,126,.10); }
.rw-card.dragging { box-shadow: 0 8px 22px rgba(47,78,126,.24); cursor: grabbing; z-index: 6; }
.rw-card.sel { border-color: var(--act); box-shadow: 0 0 0 2px var(--act-soft, #E7ECF4), 0 2px 8px rgba(47,78,126,.12); }
.rw-card .top { display: flex; gap: 8px; align-items: baseline; }
.rw-card .top .src-ref { color: var(--ink-3); font-size: var(--t-label); }
.rw-card .due { margin-left: auto; font-size: var(--t-label); color: var(--act);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-card h3 { margin: 3px 0 4px; font-size: var(--t-scan); font-weight: 600; color: var(--ink-1); line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rw-card .reqs { display: flex; gap: 4px; flex-wrap: wrap; min-height: 16px; }
.rw-card .rq { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); background: var(--sheet-2);
  border: 1px solid var(--rule); border-radius: var(--r1); padding: 0 4px; }
/* THE SHORT CARD — the exact span kept (edges are dates, handles stay on them), the SAME
   height as every other card in the row, the name wrapped INSIDE and clamped. Nothing floats
   outside the border any more: the old hanging tail shared pixels with pinned neighbours and
   with whatever painted later, hiding the title exactly when short cards sat adjacent. */
.rw-card--bar { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px 6px;
  overflow: hidden; }
.rw-card--bar .top { display: flex; gap: 5px; align-items: baseline; min-width: 0; }
.rw-card--bar .top .src-ref { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-card--bar h3 { margin: 0; font-size: 11.5px; line-height: 1.28; -webkit-line-clamp: 5;
  overflow-wrap: anywhere; hyphens: auto; }
/* the record slot degrades quietly when its span is narrow — never wraps, never overflows */
.rw-slot { overflow: hidden; white-space: nowrap; min-width: 0; }
.rw-hnd { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; touch-action: none; z-index: 2; }
.rw-hnd.l { left: -3px; } .rw-hnd.r { right: -3px; }
.rw-hnd::after { content: ''; position: absolute; top: 28%; bottom: 28%; width: 3px; border-radius: 2px; background: transparent; }
.rw-hnd.l::after { left: 3px; } .rw-hnd.r::after { right: 3px; }
.rw-card:hover .rw-hnd::after { background: var(--rule-2); }
.rw-hnd:hover::after { background: var(--act) !important; }
.rw-tray { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--rule); }
.rw-traychip { border: 1px dashed var(--rule-2); background: none; border-radius: var(--r1); padding: 3px 9px;
  font-size: var(--t-meta); color: var(--ink-3); text-align: left; }
.rw-traychip:hover { color: var(--act); border-color: var(--act); }
.rw-note { padding: 10px 18px 14px; font-size: var(--t-meta); color: var(--ink-4); border-top: 1px solid var(--rule); }

/* ── THE PENCIL LAYER (roadmap · workbench) ──────────────────────────────────
   A working value is NOT the record, and the dress says so before the words do: the ghost is
   dashed (LAW 6 — open/dashed is a claim nobody has stood behind yet) and carries the attend
   hue through .att--proposed/.tag-unheld, which are the kit's own claim marks. No new hue,
   no new shape vocabulary: category still takes none (LAW 2), structure is still rules (LAW 3). */
.rw-viewsw { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r1); overflow: hidden; }
.rw-viewbtn { border: 0; background: none; padding: 3px 10px; font: inherit; font-size: var(--t-meta);
  color: var(--ink-3); cursor: pointer; }
.rw-viewbtn + .rw-viewbtn { border-left: 1px solid var(--rule-2); }
.rw-viewbtn:hover { color: var(--ink-1); }
.rw-viewbtn.on { color: var(--ink-1); background: var(--well); font-weight: 600; }
/* the ghost: same card, pencilled — dashed edge, attend-hued spine, a touch lighter */
.rw-card--ghost { border-style: dashed; border-left-style: solid; border-left-color: var(--attend);
  background: var(--sheet-2); }
.rw-card--ghost .due { color: var(--attend); }
.rw-card--ghost:hover { border-color: var(--attend); }
.rw-annahme { display: flex; gap: 5px; align-items: baseline; margin: 0 0 4px; font-size: var(--t-label); }
.rw-annahme .src-ref { color: var(--ink-4); }
/* the record's own position, left behind: a slot, not a card — no fill, no shadow, no verbs */
.rw-slot { border: 1px dashed var(--rule-2); border-radius: var(--r2); margin: 0 5px; padding: 8px 10px;
  display: flex; gap: 8px; align-items: baseline; color: var(--ink-4); font-size: var(--t-label);
  background: none; pointer-events: none; z-index: 0; }
.rw-slot .src-ref { color: var(--ink-4); }
.rw-slot .voice-figure { margin-left: auto; }
/* the pencil affordance and the form it opens */
.rw-pencilbtn { border: 1px dashed var(--rule-2); background: none; border-radius: var(--r1);
  padding: 1px 7px; font: inherit; font-size: var(--t-label); color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.rw-pencilbtn:hover { color: var(--attend); border-color: var(--attend); }
.rw-pencil { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px;
  padding: 8px 10px; border: 1px dashed var(--attend-line); border-radius: var(--r2); background: var(--attend-soft); }
.rw-pencil select { max-width: 340px; }
.rw-pencil .nt { flex: 1; min-width: 140px; }
.rw-ghostline { display: inline-flex; gap: 5px; align-items: baseline; font-size: var(--t-label); }
.rw-ghostline .nt { color: var(--ink-3); }
.rw-ghostline .x { border: 0; background: none; color: var(--ink-4); cursor: pointer; padding: 0 2px; font-size: 13px; }
.rw-ghostline .x:hover { color: var(--broken); }
.rw-dates .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 3px 0; }
.rw-clarify { display: inline-flex; gap: 4px; align-items: baseline; }
.rw-ci-ref { color: var(--ink-4); font-size: var(--t-label); }

/* the pencil layer where the CALL meets it (register · contested zone) */
.reg-q-assume { display: inline-flex; gap: 5px; align-items: baseline; margin-right: auto; }
.reg-q-adopt { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-meta); color: var(--ink-2);
  padding: 7px 9px; border: 1px dashed var(--attend-line); border-radius: var(--r2); background: var(--attend-soft); }
.reg-q-adopt input { margin-top: 2px; flex: none; }
.reg-q-adopt .src-ref { color: var(--ink-2); }

/* THE DOCK — a fixed strip between the sidebar and the right edge that holds the open
   benches SIDE BY SIDE (as many as the width allows — a wide monitor holds more). The page
   grows by the dock's height (.rw-dock-space) so the map can always be scrolled up above it. */
.rw-dock { position: fixed; left: calc(var(--sidebar-w, 216px) + 28px); right: 28px; bottom: 0;
  height: min(54vh, calc(100vh - 330px)); min-height: 340px;
  display: flex; gap: 14px; align-items: stretch; z-index: 190; pointer-events: none; }   /* under the kit's modals (200) */
.shell--collapsed .rw-dock { left: calc(48px + 28px); }
.rw-dock-space { width: 100%; }
/* one bench: it rises from below; its own scroll; container-sized so several fit legibly */
.rw-wb { flex: 1 1 0; min-width: 0; height: 100%; pointer-events: auto; container-type: inline-size;
  background: var(--sheet); border-top: 2px solid var(--ink-1);
  border-left: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2);
  border-radius: var(--r2) var(--r2) 0 0;
  box-shadow: 0 -14px 34px rgba(33,30,25,.13);
  display: flex; flex-direction: column; animation: rw-rise .28s ease; }
@keyframes rw-rise { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.rw-wb { transition: box-shadow .9s ease; }
/* the affirmation: one swell of the accent that holds, then fades — never a blink */
.rw-wb.glow { box-shadow: 0 0 0 2px var(--act), 0 0 30px rgba(47,78,126,.30), 0 -14px 34px rgba(33,30,25,.13);
  transition: box-shadow .18s ease; }
@media (prefers-reduced-motion: reduce) { .rw-wb { animation: none; } }
/* the fold rail: the benches that do not fit, one vertical tab each */
.rw-fold { flex: none; width: 40px; pointer-events: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0; background: var(--sheet); border-top: 2px solid var(--ink-1);
  border-left: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2);
  border-radius: var(--r2) var(--r2) 0 0; box-shadow: 0 -14px 34px rgba(33,30,25,.13);
  animation: rw-rise .28s ease; overflow-y: auto; }
.rw-foldtab { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rw-foldtab .x { border: 0; background: none; padding: 2px 6px; color: var(--ink-4); cursor: pointer; font-size: 13px; line-height: 1; }
.rw-foldtab .x:hover { color: var(--err, #A33); }
.rw-foldtab .lbl { border: 1px solid var(--rule-2); background: var(--sheet-2); border-radius: var(--r1); cursor: pointer;
  padding: 9px 4px; writing-mode: vertical-rl; transform: rotate(180deg); }
.rw-foldtab .lbl .src-ref { color: var(--ink-2); font-size: var(--t-label); letter-spacing: .06em; }
.rw-foldtab .lbl:hover { border-color: var(--act); }
.rw-foldtab .lbl:hover .src-ref { color: var(--act); }
.rw-traychip.sel { border-style: solid; border-color: var(--act); color: var(--act); }
/* a tray chip is draggable onto the grid — the cursor says so, the dashed column says where */
.rw-traychip { cursor: grab; }
/* the tray's card-shaped chips: the grid's own card, one month wide, undated — as a button */
.rw-card--tray { flex: none; display: block; margin: 0; font: inherit; text-align: left;
  appearance: none; }
.rw-dropcol { pointer-events: none; background: var(--act-soft, #E7ECF4); opacity: .45;
  border-inline: 1px dashed var(--act); }
/* …and the tray catches back: while a card is in flight it offers itself and lights up */
.rw-tray.hot { outline: 1px dashed var(--act); outline-offset: -4px; background: var(--act-soft, #E7ECF4); }
.rw-tray .q { font-size: var(--t-label); color: var(--ink-4); }
.rw-wb-head { display: flex; gap: 10px; align-items: baseline; padding: 13px 18px; border-bottom: 1px solid var(--rule-2); flex-wrap: wrap; }
.rw-wb-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink-1); }
.rw-wb-head .due { font-size: var(--t-label); color: var(--act); font-variant-numeric: tabular-nums; }
.rw-wb-head .state { font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.rw-wb-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.rw-wb-nav button { border: 1px solid var(--rule-2); background: var(--sheet); border-radius: var(--r1);
  font-size: var(--t-label); padding: 2px 8px; color: var(--ink-3); cursor: pointer; }
.rw-wb-nav button:hover:not(:disabled) { color: var(--act); border-color: var(--act); }
.rw-wb-nav button:disabled { opacity: .4; cursor: default; }
.rw-wb-nav .x { font-size: 15px; }
/* ── THE BENCH BODY — two columns, each with its own scroll ─────────────────────────
   The dock fixes the bench's height, so the body is a flex ROW that fills what the head
   leaves and never grows the page. LEFT is the chat (foldable, narrower); RIGHT is the
   deliverable — description, definition of done, dates, Contents, and below Contents the
   requirements it satisfies. Neither column scrolls the other. */
.rw-wb-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; overflow: hidden; }
.rw-wb-doc { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 16px 22px 24px; }
.rw-wb-meta { margin: 0 0 4px; font-size: var(--t-meta); color: var(--ink-3); }
.rw-dod { margin-top: 10px; border: 1px solid var(--rule-2); border-left: 2px solid var(--ink-1); background: var(--sheet-2);
  border-radius: var(--r2); padding: 10px 13px; font-size: var(--t-scan); color: var(--ink-2); }
.rw-dod .u-label { display: block; margin-bottom: 4px; }
.rw-sec { margin-top: 20px; }
.rw-sec-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--rule-2); padding-bottom: 6px; }
.rw-sec-head .hint { margin-left: auto; font-size: var(--t-meta); color: var(--ink-4); }
.rw-empty { padding: 12px 2px; font-size: var(--t-meta); color: var(--ink-4); }
.rw-ci { border-bottom: 1px solid var(--rule); }
.rw-ci-h { display: flex; gap: 9px; align-items: center; padding: 9px 2px; cursor: pointer; }
.rw-ci-h .mark { color: var(--attend); flex: none; }
.rw-ci.held .rw-ci-h .mark { color: var(--ink-1); }
.rw-ci-h .txt { font-size: var(--t-scan); color: var(--ink-1); min-width: 0; }
.rw-ci-h .rw-ci-title { flex: 1 1 220px; min-width: 140px; border: 1px solid var(--rule-2); border-radius: var(--r1);
  background: var(--sheet); font: inherit; font-size: var(--t-scan); color: var(--ink-1); padding: 2px 6px; }
.rw-ci-h .rw-ci-title:focus { border-color: var(--act); outline: none; }
.rw-ci-h .date { margin-left: auto; font-size: var(--t-label); color: var(--act); white-space: nowrap; }
.rw-ci-h .date.none { color: var(--ink-4); }
.rw-ci-h .ud { display: flex; gap: 2px; }
.rw-ci-h .ud button { border: 1px solid var(--rule-2); background: var(--sheet); border-radius: var(--r1);
  font-size: var(--t-label); color: var(--ink-3); padding: 0 5px; cursor: pointer; }
.rw-ci-h .ud button:hover:not(:disabled) { color: var(--act); border-color: var(--act); }
.rw-ci-h .ud button:disabled { opacity: .35; cursor: default; }
.rw-ci-h .chev { color: var(--ink-4); font-size: 11px; transition: transform .18s; flex: none; }
.rw-ci.open .rw-ci-h .chev { transform: rotate(90deg); }
.rw-ci-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.rw-ci.open .rw-ci-b { grid-template-rows: 1fr; }
.rw-ci-b > div { overflow: hidden; }
.rw-ci-in { padding: 2px 2px 14px 24px; display: flex; flex-direction: column; gap: 10px; }
.rw-ci-in textarea { width: 100%; border: 1px solid var(--rule-2); border-radius: var(--r1); background: var(--sheet);
  color: var(--ink-1); font: inherit; font-size: var(--t-scan); padding: 8px 10px; resize: vertical; min-height: 56px; }
.rw-ci-in .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rw-ci-in .row .u-label { min-width: 76px; }
.rw-ci-in .row .q { font-size: var(--t-label); color: var(--ink-4); }
.rw-ci-in .row .sp { margin-left: auto; }
.rw-ci-in input[type=date] { border: 1px solid var(--rule-2); border-radius: var(--r1); padding: 3px 8px;
  font: inherit; font-size: var(--t-meta); background: var(--sheet); color: var(--ink-1); }
.rw-ci-in select { border: 1px solid var(--rule-2); border-radius: var(--r1); padding: 3px 6px;
  font: inherit; font-size: var(--t-label); background: var(--sheet); color: var(--ink-3); }
.rw-ci-in .doc { font-family: var(--mono); font-size: var(--t-label); border: 1px solid var(--rule);
  background: var(--sheet-2); border-radius: var(--r1); padding: 1px 6px; color: var(--ink-3);
  display: inline-flex; gap: 5px; align-items: center; }
.rw-ci-in .doc button { border: 0; background: none; padding: 0; color: var(--ink-4); cursor: pointer; }
.rw-ci-in .doc button:hover { color: var(--err, #A33); }
.lnkb { border: 0; background: none; padding: 0; color: var(--act); font-size: var(--t-label);
  letter-spacing: .04em; cursor: pointer; }
.lnkb:hover { text-decoration: underline; }
.lnkb.danger { color: var(--err, #A33); }
.rw-add { display: flex; gap: 8px; padding: 10px 2px 0; }
.rw-add input { flex: 1; border: 1px solid var(--rule-2); border-radius: var(--r1); padding: 7px 10px;
  font: inherit; font-size: var(--t-scan); background: var(--sheet); color: var(--ink-1); }
/* ── THE CHAT COLUMN — one measure, folded down to a spine on demand. The panel keeps its
   own width while the column animates, so folding SLIDES it out behind the column edge
   instead of squeezing the words down to nothing on the way. */
.rw-wb { --rw-chat-w: 528px; }
.rw-chat { position: relative; flex: 0 0 auto; width: var(--rw-chat-w); display: flex;
  overflow: hidden; background: var(--sheet); border-right: 1px solid var(--rule-2);
  transition: width .26s var(--ease); }
.rw-chat.folded { width: 46px; }
@media (prefers-reduced-motion: reduce) { .rw-chat { transition: none; } }
.rw-chat-panel { position: relative; flex: none; width: var(--rw-chat-w); min-width: 0;
  display: flex; flex-direction: column; min-height: 0; }
.rw-chat.folded .rw-chat-panel { display: none; }
/* the folded spine — never a mystery sliver: it names itself and counts what is folded away */
.rw-chat-spine { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center;
  gap: 9px; padding: 13px 0; border: 0; background: none; font: inherit; cursor: pointer; }
.rw-chat-spine .ic { flex: none; font-size: 15px; line-height: 1; color: var(--ink-3); }
.rw-chat-spine .lbl { min-height: 0; overflow: hidden; white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: var(--t-label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.rw-chat-spine .n { flex: none; font-size: var(--t-label); color: var(--ink-3); }
.rw-chat-spine:hover .ic, .rw-chat-spine:hover .lbl, .rw-chat-spine:hover .n { color: var(--act); }

/* zone 1 — the head: fold, the conversation switcher, and which run is speaking */
.rw-chat-head { flex: none; display: flex; gap: 8px; align-items: center; min-width: 0;
  padding: 8px 12px 8px 4px; border-bottom: 1px solid var(--rule); }
.rw-chat-fold { flex: none; border: 0; background: none; padding: 2px 7px; font: inherit;
  font-size: 15px; line-height: 1; color: var(--ink-4); cursor: pointer; }
.rw-chat-fold:hover { color: var(--act); }
.rw-convsw { display: inline-flex; gap: 6px; align-items: center; min-width: 0; cursor: pointer;
  border: 1px solid var(--rule-2); background: var(--sheet); border-radius: var(--r1); padding: 2px 8px; font: inherit; }
.rw-convsw .u-label { color: var(--ink-3); }
.rw-convsw .chev { font-size: var(--t-label); line-height: 1; color: var(--ink-4); }
.rw-convsw:hover { border-color: var(--act); }
.rw-convsw:hover .u-label, .rw-convsw:hover .chev { color: var(--act); }
.rw-chat-head .sess { margin-left: auto; font-size: var(--t-label); color: var(--ink-4); white-space: nowrap; }
.rw-chat-stack { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* zone 2 — THE THREAD, the only scrolling part. A short thread sits at the FOOT and grows
   upward: margin-top:auto on the first child, NOT justify-content:flex-end, which cuts the
   head off an overflowing scroll container. */
.rw-chat-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 13px 6px; }
.rw-chat-log { display: flex; flex-direction: column; min-height: 100%; }
.rw-chat-log > :first-child { margin-top: auto; }
.rw-chat-blank { display: flex; flex-direction: column; gap: 7px; }
/* the operator's turn is human-authored — the record's voice (ATTEST LAW 1 / §5), as on the
   Agent page's transcript; the agent's turn stays sans, because that is the system speaking */
.rw-msg-op { margin: 6px 0 6px auto; width: fit-content; max-width: min(56ch, 86%); background: var(--act-soft);
  border: 1px solid var(--rule-2); border-radius: var(--r2); padding: 8px 12px; }
.rw-msg-ag { margin: 6px 0; background: var(--sheet-2); border: 1px solid var(--rule-2); border-radius: var(--r2);
  padding: 10px 12px; font-size: var(--t-scan); color: var(--ink-2); }
.rw-msg-ag .who { font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.rw-prop { display: flex; gap: 10px; align-items: center; border: 1px solid var(--rule-2); border-radius: var(--r1);
  padding: 7px 10px; margin-top: 6px; background: var(--sheet); }
.rw-prop .mark { color: var(--attend); flex: none; }
.rw-prop .t { font-size: var(--t-scan); color: var(--ink-1); min-width: 0; }
.rw-prop .lnkb, .rw-prop .q { margin-left: auto; }
.rw-prop .q { font-size: var(--t-label); color: var(--ink-4); }

/* zone 3 — the composer, pinned to the foot. It never scrolls away, and the thread above it
   never grows the bench: Enter sends, Shift+Enter breaks the line, and the box scrolls itself
   once it has grown a few lines. */
.rw-chat-foot { position: relative; flex: none; padding: 9px 13px 11px; border-top: 1px solid var(--rule); }
.rw-chat-jump { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  border: 1px solid var(--rule-2); background: var(--sheet); border-radius: var(--r1); padding: 3px 10px;
  font: inherit; font-size: var(--t-label); color: var(--ink-2); cursor: pointer; white-space: nowrap;
  box-shadow: var(--lift-1); }
.rw-chat-jump:hover { border-color: var(--act); color: var(--act); }
.rw-ask { display: flex; gap: 8px; align-items: flex-end; }
.rw-ask .btn { flex: none; }
.rw-askbox { flex: 1 1 auto; min-width: 0; border: 1px solid var(--rule-2); border-radius: var(--r1);
  padding: 8px 10px; font: inherit; font-size: var(--t-scan); line-height: 1.45;
  background: var(--sheet); color: var(--ink-1); resize: none; overflow-y: auto; min-height: 36px; max-height: 132px; }
/* the example placeholder is longer than a 352px composer — it elides rather than wrapping to
   a second line the one-line box then clips */
.rw-askbox::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-askbox:focus { border-color: var(--act); outline: none; }
.rw-askbox:disabled { background: var(--well); color: var(--ink-4); }
.rw-agent-note { margin: 8px 0 0; font-size: var(--t-meta); color: var(--ink-4); }
.rw-chat-blank .rw-agent-note { margin: 0; }

/* THE CONVERSATION SWITCHER — a 176px rail was half of a 352px panel, so the list is a
   slide-over inside the chat instead: both tabs, + New conversation and the same cards, over
   the thread, gone the moment a thread is picked. It is a floating layer, so it may lift. */
.rw-convpop { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 9px;
  padding: 10px 13px 12px; background: var(--sheet); box-shadow: var(--lift-2); }
.rw-convpop-head { display: flex; gap: 8px; align-items: center; }
.rw-convpop-head .x { margin-left: auto; border: 0; background: none; padding: 0 4px; font: inherit;
  font-size: 15px; line-height: 1; color: var(--ink-4); cursor: pointer; }
.rw-convpop-head .x:hover { color: var(--act); }
.rw-convpop .rw-convcards { flex: 1 1 auto; min-height: 0; max-height: none; }
.rw-convrail-tabs { display: inline-flex; gap: 2px; }
.rw-convrail-tabs button { border: 0; background: none; padding: 2px 8px; border-radius: var(--r1);
  font: inherit; font-size: var(--t-label); letter-spacing: .04em; color: var(--ink-4); cursor: pointer; }
.rw-convrail-tabs button:hover { color: var(--ink-2); }
.rw-convrail-tabs button.on { color: var(--ink-1); background: var(--well); }
.rw-convnew { border: 1px dashed var(--rule-2); background: none; border-radius: var(--r1);
  padding: 4px 8px; font: inherit; font-size: var(--t-meta); color: var(--ink-3); cursor: pointer; text-align: left; }
.rw-convnew:hover { color: var(--act); border-color: var(--act); }
.rw-convcards { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 330px; }
.rw-convcard { text-align: left; border: 1px solid var(--rule); background: var(--sheet); border-radius: var(--r1);
  padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font: inherit; }
.rw-convcard:hover { border-color: var(--act); }
.rw-convcard.on { border-color: var(--act); background: var(--act-soft, #E7ECF4); }
.rw-convcard .top { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.rw-convcard .top .d { margin-left: auto; font-size: var(--t-label); color: var(--ink-4); white-space: nowrap; }
.rw-convcard .top .mine { color: var(--act); }
.rw-convcard .t { font-size: var(--t-meta); color: var(--ink-2); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* A bench under 940px cannot carry two columns — 528px of chat would leave the deliverable
   about 370px, which is not a document. ONE behaviour at that width: the chat column shrinks to
   its spine and the OPEN panel OVERLAYS the deliverable, so the deliverable keeps its full
   measure at every width and the chat becomes a slide-in (LAW 3 — a floating layer is the one
   place a shadow belongs). The bench also opens folded there (BENCH_NARROW in RoadmapView.tsx),
   without overwriting the stored preference. The threshold tracks the chat width: widen one and
   the other moves with it, or the deliverable silently loses its measure. */
@container (max-width: 940px) {
  .rw-chat, .rw-chat.folded { width: 46px; overflow: visible; }
  .rw-chat-panel { position: absolute; left: 0; top: 0; bottom: 0; z-index: 6;
    width: min(var(--rw-chat-w), 88cqw); background: var(--sheet);
    border-right: 1px solid var(--rule-2); box-shadow: var(--lift-2); }
  .rw-chat:not(.folded) .rw-chat-panel { animation: rw-chat-in .22s var(--ease); }
}
@keyframes rw-chat-in { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rw-chat:not(.folded) .rw-chat-panel { animation: none; } }

/* ── THE PLANNER — the deliverables section's flap-out (register/PlannerChat.tsx, mounted by
   RegisterPage for the WHOLE tab): the same chat shell as the benches, fixed to the RIGHT EDGE
   of the screen so the plan stays in view beside it — on the List sub-view exactly as on the
   roadmap. A floating layer, so it carries the shadow (LAW 3) in both states. Anchored at the
   BOTTOM — when benches are open the board publishes --planner-bottom on :root
   (RoadmapView.tsx) so the foot always clears the dock; the 18px fallback covers every other
   screen — with a hard height floor: a half-height window with a bench open must shrink the
   drawer, never clip the composer or swallow the spine that reopens it. Folded it is a compact
   spine tab, not a full-height rail — the board's right edge stays clickable above it. The
   width yields to the room the CONTENT actually has (viewport minus sidebar, minus a board
   remainder), and z stays under the topbar (100) and its dropdowns, the overlay modals (80 —
   they scrim the page anyway), the dock (190) and the kit's modals (200). */
.rw-planner { --rw-chat-w: clamp(300px, calc(100vw - var(--sidebar-w, 216px) - 260px), 472px);
  position: fixed; right: 0; top: calc(var(--topbar-h, 48px) + 14px); bottom: var(--planner-bottom, 18px);
  /* top + bottom + min-height: over-constrained resolution drops `bottom`, so a too-short
     window slides the FOOT under the dock — never the head (and its fold control) under the
     topbar, which would leave no way to fold the drawer back in. */
  min-height: 280px;
  z-index: 70; display: flex; }
.shell--collapsed .rw-planner { --rw-chat-w: clamp(300px, calc(100vw - 48px - 260px), 472px); }
/* Folded: a compact spine tab hugging the dock, not a full-height rail — the board's right
   edge stays clickable above it. The floor keeps the tab big enough for its own content. */
.rw-planner--folded { top: auto;
  height: clamp(96px, calc(100vh - var(--topbar-h, 48px) - 32px - var(--planner-bottom, 18px)), 280px);
  min-height: 0; }
.rw-planner .rw-chat { height: 100%; background: var(--sheet);
  border: 1px solid var(--rule-2); border-right: 0; border-radius: 12px 0 0 12px;
  overflow: hidden; box-shadow: var(--lift-2); }
/* The sidebar goes off-canvas at 820px (AppShell's PHONE_QUERY) — its reserve is dead space,
   the same correction .rw-dock and .rw-board--wide get in the phone block below. */
@media (max-width: 820px) {
  .rw-planner, .shell--collapsed .rw-planner { --rw-chat-w: clamp(300px, calc(100vw - 292px), 472px); }
}
@media (max-width: 620px) {
  .rw-planner, .shell--collapsed .rw-planner { --rw-chat-w: min(88vw, calc(100vw - 24px)); }
}
@container (max-width: 560px) { .rw-wb-doc { padding: 14px 15px 20px; } }
.rw-req { padding: 11px 2px; border-bottom: 1px solid var(--rule); }
.rw-req .rh { display: flex; gap: 8px; align-items: baseline; }
.rw-req .rh .w { font-size: var(--t-label); color: var(--ink-3); }
.rw-req p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ── roadmap round 2: pan cursor, editable fields, req chips, convo history ── */
.rw-grid { cursor: grab; }
.rw-grid.panning { cursor: grabbing; }
.rw-name { flex: 1 1 240px; min-width: 160px; border: 1px solid transparent; border-radius: var(--r1);
  background: none; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink-1); padding: 1px 6px; }
.rw-name:hover { border-color: var(--rule-2); }
.rw-name:focus { border-color: var(--act); background: var(--sheet); outline: none; }
.rw-edit { width: 100%; border: 1px solid transparent; border-radius: var(--r1); background: none;
  color: var(--ink-2); font: inherit; font-size: var(--t-scan); line-height: 1.5; padding: 6px 8px;
  resize: vertical; min-height: 40px; }
.rw-edit:hover { border-color: var(--rule-2); }
.rw-edit:focus { border-color: var(--act); background: var(--sheet); outline: none; }
.rw-desc { color: var(--ink-3); font-size: var(--t-meta); margin-bottom: 4px; }
.rw-dod .rw-edit { margin-top: 2px; }
.rw-ci-h .lnks { font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }
.rw-reqchip { border: 1px solid var(--rule-2); background: none; border-radius: var(--r1); padding: 1px 7px;
  font-family: var(--mono); font-size: var(--t-label); color: var(--ink-4); cursor: pointer; }
.rw-reqchip:hover { border-color: var(--act); color: var(--act); }
.rw-reqchip.on { border-color: var(--act); color: var(--act); background: var(--act-soft, #E7ECF4); }
.rw-agent-tabs { display: inline-flex; gap: 2px; }
.rw-agent-tabs button { border: 0; background: none; padding: 2px 8px; border-radius: var(--r1);
  font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); cursor: pointer; }
.rw-agent-tabs button:hover { color: var(--ink-2); }
.rw-agent-tabs button.on { color: var(--ink-1); background: var(--well); }
.rw-convo { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  border: 1px solid var(--rule); background: var(--sheet); border-radius: var(--r1); padding: 7px 10px;
  margin-top: 6px; font-size: var(--t-meta); color: var(--ink-2); cursor: pointer; }
.rw-convo:hover { border-color: var(--act); }
.rw-convo .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-convo .d { margin-left: auto; color: var(--ink-4); font-size: var(--t-label); }
.rw-req .rh .srcs { margin-left: auto; display: flex; gap: 8px; }


/* ── round 4: edit-on-demand, rich-lite text, labeled blocks, growing cards ── */
.rw-name-h { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink-1);
  display: inline-flex; gap: 8px; align-items: baseline; min-width: 0; }
.rw-editbtn { border: 0; background: none; padding: 0 2px; color: var(--ink-4); cursor: pointer; font-size: 13px; }
.rw-editbtn:hover { color: var(--act); }
.rw-block { margin-top: 4px; }
.rw-block > .u-label, .rw-dod > .u-label { display: inline-flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.rw-rich { font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 82ch; }
.rw-rich p { margin: 0 0 6px; } .rw-rich p:last-child { margin-bottom: 0; }
.rw-rich ul { margin: 0 0 6px; padding-left: 20px; } .rw-rich li { margin: 2px 0; }
.rw-rich b { color: var(--ink-1); }
.rw-none { font-size: var(--t-meta); color: var(--ink-4); }
.rw-grow { width: 100%; border: 1px solid var(--act); border-radius: var(--r1); background: var(--sheet);
  color: var(--ink-1); font: inherit; font-size: 14px; line-height: 1.55; padding: 8px 10px;
  resize: none; overflow: hidden; min-height: 44px; }
.rw-grow:focus { outline: none; }
.rw-hintline { font-size: var(--t-label); color: var(--ink-4); margin-top: 3px; }
.rw-specrow { display: flex; gap: 8px; align-items: baseline; }
.rw-specrow .rw-rich { flex: 1; }

/* ── round 5: the generalised pencil layer — PROVISIONAL standing, and the ◇ queue reaching
   the workbench. Same claim-mark vocabulary as everywhere else in ATTEST (LAW 6: open/dashed =
   proposed, the attend hue): ◇ is reused as-is (.att--proposed / .tag-unheld, exactly what the
   Annahme and "under clarification" chips already use); ◈ is the same family's own mark for a
   standing override, added here (not in attest.css, which stays untouched) because this
   generalisation is specific to the roadmap/register register — the base .att layout class and
   the --attend token both come from attest.css already. ── */
.att--standing::before { content: '◈'; color: var(--attend); }
.rw-standing { display: inline-flex; gap: 5px; align-items: baseline; font-size: var(--t-label); }
.rw-standing .nt { color: var(--ink-3); }
.rw-standing .x { border: 0; background: none; color: var(--ink-4); cursor: pointer; padding: 0 2px; font-size: 13px; }
.rw-standing .x:hover { color: var(--broken); }
/* the tether ref is a LINK, not just print — a mark you cannot reach the question from is the
   sticky note this whole layer exists to prevent (see RoadmapView.tsx's StandingLine) */
.rw-qlink { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.rw-qlink:hover { color: var(--act); text-decoration: underline; }
.rw-untreated { display: inline-flex; gap: 5px; align-items: baseline; font-size: var(--t-label); }
.rw-marks { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 0 0 4px; }
.rw-standing-picker { padding: 0 18px 10px; }
.rw-wb-doc .rw-standing-picker { padding: 0; margin: 4px 0 8px; }
.rw-untreated-sec .rw-prop:first-of-type { margin-top: 8px; }

/* ── round 6: the dependency linker — the Linked section's rows, the add-link line, the
   stale ("linked content changed") flag and the cross-deliverable chips on proposal cards.
   Same claim-mark vocabulary again: stale is a PROPOSED-state attention flag (◇/--attend),
   because it names work the operator has not yet judged — adapt or declare reconciled. ── */
.rw-linkrow { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  border: 1px solid var(--rule-2); border-radius: var(--r1); padding: 5px 10px; margin-top: 6px;
  font-size: var(--t-meta); color: var(--ink-2); }
.rw-linkrow.stale { border-color: var(--attend); }
.rw-linkrow.in { color: var(--ink-3); }
.rw-linkrow .q { font-size: var(--t-label); color: var(--ink-4); }
.rw-linkrow .t { min-width: 0; }
.rw-linkrow .nt { color: var(--ink-3); font-size: var(--t-label); }
.rw-linkrow .doc { font-size: var(--t-label); color: var(--ink-4); }
.rw-linkrow .x { border: 0; background: none; color: var(--ink-4); cursor: pointer; padding: 0 2px;
  font-size: 13px; margin-left: auto; }
.rw-linkrow .x:hover { color: var(--broken); }
.rw-stale { display: inline-flex; gap: 5px; align-items: baseline; font-size: var(--t-label); }
.rw-linkadd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.rw-linkadd select, .rw-linkadd .nt { max-width: 240px; }
.rw-links .rw-sec-head .lnkb { margin-left: auto; }
.rw-crossref { color: var(--attend); flex: none; }
/* the Satisfies rows' unmap — the link goes, the requirement stays */
.rw-req .rh .x { border: 0; background: none; color: var(--ink-4); cursor: pointer; padding: 0 2px; font-size: 13px; }
.rw-req .rh .x:hover { color: var(--broken); }

/* ── round 7: BUTTONS DO NOT INHERIT COLOR. A <button> falls back to the UA's own (black)
   text color unless told otherwise — invisible on the dark theme. Every borderless
   text-button that relies on its surroundings' ink says `color: inherit` explicitly. ── */
.reg-srcbtn { color: inherit; }
.rw-qlink { color: inherit; }

/* ── the compose modals: draft-with-the-agent on the left, the form in the middle, the
   overview rail (and a peeked deliverable) on the right. One layout, three modals: new
   deliverable, deliverable detail, requirement create/revise. ── */
.modal.modal-compose { max-width: min(1240px, calc(100vw - 40px)); width: 100%; }
.del-compose { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.del-compose-form { flex: 1 1 380px; min-width: 320px; }
/* the requirement PICKER rail — the create overlay's actual decision, as readable cards:
   statement, priority, who funds it already; the unfunded lead (they are why the overlay is
   open at all — G2). Selection is the card itself. */
.req-pickrail { flex: 1 1 340px; min-width: 300px; max-width: 440px; border-left: 1px solid var(--rule);
  padding-left: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 62vh; }
.req-pickhead { display: flex; gap: 8px; align-items: center; }
.req-pickcards { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.req-pickcard { text-align: left; font: inherit; color: inherit; background: var(--sheet);
  border: 1px solid var(--rule-2); border-radius: var(--r1); padding: 7px 9px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; }
.req-pickcard:hover { border-color: var(--act); }
.req-pickcard.on { border-color: var(--act); box-shadow: 0 0 0 2px var(--act-soft, #E7ECF4); }
.req-pickcard .rp-top { display: flex; gap: 8px; align-items: center; }
.req-pickcard .rp-stmt { font-size: var(--t-meta); color: var(--ink-1); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.req-pickcard .rp-funded { font-size: var(--t-label); color: var(--ink-3); }

/* ── a requirement ref that shows its face on hover (deliverables list). Fixed-position:
   the table lives in a clipped sheet that would cut an absolute card. ── */
.req-pop { position: relative; cursor: default; }
.req-popcard { position: fixed; z-index: 90; width: 360px; background: var(--sheet);
  border: 1px solid var(--rule-2); border-radius: var(--r2); box-shadow: 0 8px 22px rgba(33,30,25,.18);
  padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; white-space: normal;
  text-transform: none; letter-spacing: normal; font-family: var(--sans); font-weight: 400; text-align: left; }
.rp-head { display: flex; gap: 8px; align-items: baseline; }
.rp-meta { font-size: var(--t-label); color: var(--ink-3); }
.rp-statement { font-size: var(--t-meta); color: var(--ink-1); line-height: 1.45; }
.rp-why { font-size: var(--t-label); color: var(--ink-3); line-height: 1.4; }

/* ── the form modals' drafting chat: the SHELL is the shared flap-out (AgentFlyout — the
   workbench's own .rw-chat classes); the modal context only sets its width and height. What
   remains FieldChat's is the take-into-field block riding an agent turn. ── */
/* 380, not 320: at 320 the same shell read as a squeezed cousin of the bench/planner chat —
   the modal's 1240px measure holds 380 + the 380px form + the 340px rail with room to spare,
   and below that the flex-wrap has always taken over. */
.del-compose { --rw-chat-w: 380px; }
.del-compose .rw-chat { max-height: 62vh; align-self: stretch; }
.fieldchat-block { border: 1px dashed var(--attend); border-radius: var(--r1); padding: 7px 9px;
  display: flex; flex-direction: column; gap: 5px; margin-top: 6px; font-size: var(--t-meta); }
.fieldchat-block .bh { display: flex; gap: 6px; align-items: baseline; }
.fieldchat-block .bt { white-space: pre-wrap; color: var(--ink-1); }
.fieldchat-block .btn { align-self: flex-start; }

/* ── the # reference picker (components/RefSuggest.tsx): the dropdown under a prose field.
   position: fixed, measured off the textarea at open — accordions and clipped sheets between
   the field and the viewport cannot cut it. ── */
.refwrap { position: relative; }
.refsuggest { position: fixed; z-index: 95;
  background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r1);
  box-shadow: 0 8px 22px rgba(33,30,25,.18); overflow: hidden; }
.refsuggest-row { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left;
  border: 0; background: none; color: inherit; font: inherit; font-size: var(--t-meta);
  padding: 5px 10px; cursor: pointer; }
.refsuggest-row:hover, .refsuggest-row.on { background: var(--well); }
.refsuggest-row .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }

/* ── THE END OF THE ADJUSTABLE TEXTBOX (2026-08-30, Yves): every .form-textarea is a
   borderless field that GROWS with its text — no resize handle, no inner scrollbar, quiet at
   rest, the field appears on hover, commitment shows on focus (the bench's ✎ idiom,
   app-wide). Heights are kept true by components/growTextareas.ts; these rules kill the box.
   textarea.form-textarea (0,1,1) outranks the kit's .form-textarea (forms.css, 0,1,0)
   regardless of file order, and the [data-theme] pairs outrank its dark override the same
   way. */
textarea.form-textarea { resize: none; overflow: hidden; min-height: 34px;
  border-color: transparent; background: none; box-shadow: none; }
textarea.form-textarea:hover { border-color: var(--rule-2); }
textarea.form-textarea:focus { border-color: var(--act); background: var(--sheet); box-shadow: none; }
[data-theme="dark"] textarea.form-textarea { border-color: transparent; background: none; }
[data-theme="dark"] textarea.form-textarea:hover { border-color: var(--rule-2); }
[data-theme="dark"] textarea.form-textarea:focus { border-color: var(--act); background: var(--sheet); }

/* an inline ref in PROSE is a link and says so — the accent, not the surrounding ink */
.ref-inline { color: var(--act); }

/* ── THE THINKING PHASE, SHOWN (components/ChatActivity.tsx): while a turn blocks, the band
   carries the clock, the (interpolated, "≈"-marked) token count, the last tool calls and the
   streamed tail — in every chat: bench, form modals, agent tab. ── */
.chat-act { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-meta); color: var(--ink-2); }
.chat-act-head { display: flex; gap: 8px; align-items: baseline; }
.chat-act-meta { margin-left: auto; font-size: var(--t-label); color: var(--ink-3); white-space: nowrap; }
.chat-act-dots { display: inline-flex; gap: 3px; align-items: center; }
.chat-act-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--act);
  animation: chat-act-pulse 1.2s ease-in-out infinite; }
.chat-act-dots span:nth-child(2) { animation-delay: .2s; }
.chat-act-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-act-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-act-dots span { animation: none; opacity: .7; } }
.chat-act-tool { display: flex; gap: 6px; align-items: baseline; font-size: var(--t-label); color: var(--ink-3); }
.chat-act-tool strong { font-family: var(--mono); font-weight: 500; color: var(--ink-2); }
.chat-act-tool .chat-act-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rule-2); flex: none; }
.chat-act-tool.live .chat-act-dot { background: var(--act); }
.chat-act-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-act-preview { font-size: var(--t-label); color: var(--ink-4); font-style: italic; line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* the bench's "Referenced in" chips — who names this ref, derived from prose */
.rw-refbacks { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rw-refbacks .src-ref { border: 1px solid var(--rule-2); border-radius: var(--r1); padding: 1px 7px; }
.rw-refbacks button.src-ref:hover { border-color: var(--act); }


/* ═══ LOGIN — the split page ═══════════════════════════════════════════════
   Pre-auth and outside the app shell, so it is its own single-theme world:
   a full-bleed photograph (dark ground, gold accent) beside a paper sign-in
   column. Component: src/client/pages/LoginPage.tsx. Everything here is
   scoped under `.lg-` so nothing leaks into the app, and nothing of the
   app's theme leaks in — the page ignores data-theme on purpose.

   Faces are self-hosted like attest.css (zero network fetches): Geist for
   the system voice, Instrument Serif italic for the one emphasised word,
   Geist Mono for the tracked eyebrow. All three are OFL. Fallbacks are the
   ATTEST faces already on disk, then platform faces of the same class.

   Contrast (WCAG, computed): paper #f1efea ← ink #121316 16.2:1, muted
   #5b5e66 5.6:1, error #8f2626 7.4:1; button ink ← paper 16.2:1. The
   brand stack sits in the scrim's darkest zone (≥ .85 alpha of #0b0c0e),
   where ink #f3f1ec ≥ 11:1 and gold #e2c990 ≥ 8:1 even over white pixels. */

@font-face {
  font-family: 'Geist';
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('/fonts/Geist-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('/fonts/Geist-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/fonts/GeistMono-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/InstrumentSerif-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/InstrumentSerif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/InstrumentSerif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── tokens + the two-column root ─────────────────────────────────────── */
.lg-root {
  /* dark side */
  --lg-bg: #0b0c0e;
  --lg-ink: #f3f1ec;
  --lg-ink-2: #d9d6cf;
  --lg-muted: #9a9da3;
  --lg-line: rgba(243, 241, 236, .14);
  --lg-gold: #c8a96e;
  --lg-gold-2: #e2c990;
  /* paper side */
  --lg-page: #f1efea;
  --lg-sheet: #ffffff;
  --lg-ink-d: #121316;
  --lg-muted-d: #5b5e66;
  --lg-placeholder: #6b6e75;
  --lg-line-d: rgba(18, 19, 22, .12);
  --lg-line-d2: rgba(18, 19, 22, .22);
  --lg-err: #8f2626;
  /* type + motion */
  --lg-sans: 'Geist', 'Source Sans 3', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --lg-serif: 'Instrument Serif', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --lg-mono: 'Geist Mono', 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  --lg-ease: cubic-bezier(.16, 1, .3, 1);
  --lg-ease-io: cubic-bezier(.65, 0, .35, 1);
  --lg-r: 12px;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  overflow-x: clip;
  background: var(--lg-page);   /* the host's body colour never shows through */
  font-family: var(--lg-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── the image panel ──────────────────────────────────────────────────── */
.lg-brand {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* the stack sits LOW: full padding at top/sides, a tight bottom */
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(16px, 1.8vw, 26px);
  background: var(--lg-bg);
  color: var(--lg-ink);
}
.lg-brand-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.lg-brand-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 0% 100%;  /* left edge for the sun; bottom-anchored so the image sits as HIGH as cover allows */
  transform-origin: 0% 100%;
  transform: scale(1.04);
  animation: lg-drift 32s var(--lg-ease-io) infinite alternate;
  will-change: transform;
}
@keyframes lg-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(-1.2%, -1%, 0); }
}
/* The scrim: darkest along the bottom where the stack sits, a softer wash
   from the left, and the sky left alone. */
.lg-scrim {
  /* the photograph stays crisp: no wash — one soft pool of shade under the stack, nothing above it */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 16% 86%, rgba(11, 12, 14, .58), rgba(11, 12, 14, .28) 55%, rgba(11, 12, 14, 0) 100%),
    linear-gradient(0deg, rgba(11, 12, 14, .42) 0%, rgba(11, 12, 14, .1) 24%, rgba(11, 12, 14, 0) 40%);
}
.lg-brand-stack {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(.9rem, 1.6vh, 1.25rem);
  max-width: 40ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 22px rgba(0, 0, 0, .45);
}
/* the naven logo, top left of the panel — the landing page's idiom: the name and a gold dot */
.lg-logo {
  position: absolute;
  top: clamp(20px, 3.2vw, 40px);
  left: clamp(20px, 3.2vw, 40px);
  z-index: 2;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  padding: .9rem 1.4rem;
  /* a feathered pool of shade, not a pill: no edge, no blur box */
  background: radial-gradient(70% 90% at 50% 50%, rgba(11, 12, 14, .42), rgba(11, 12, 14, 0) 78%);
  font-family: var(--lg-sans);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: .16em;
  color: var(--lg-ink);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 16px rgba(0, 0, 0, .4);
}
.lg-logo i {
  width: .34em;
  height: .34em;
  margin-left: .18em;
  border-radius: 50%;
  background: var(--lg-gold);
  display: inline-block;
  align-self: baseline;   /* the dot SITS on the baseline — it does not hover */
}
.lg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  font-family: var(--lg-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lg-ink-2);
}
.lg-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--lg-gold);
  flex: none;
}
.lg-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--lg-ink);
}
.lg-wordmark i {
  display: inline-block;
  align-self: baseline;   /* on the baseline, not hovering */
  width: .17em;
  height: .17em;
  border-radius: 50%;
  background: var(--lg-gold);
}
.lg-tagline {
  /* the string's own \n is the ONLY line break: no ch-cap, no balancing */
  white-space: pre-line;
  margin: .1rem 0 0;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--lg-ink);
}
.lg-brand-foot {
  margin: clamp(1rem, 2.6vh, 1.8rem) 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--lg-line);
  font-family: var(--lg-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lg-muted);
}

/* ── the paper column ─────────────────────────────────────────────────── */
.lg-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 7vh, 80px) clamp(24px, 5vw, 72px);
  background: var(--lg-page);
  color: var(--lg-ink-d);
}
.lg-card {
  width: 100%;
  max-width: 400px;
}
.lg-form h1 {
  margin: 0 0 .4rem;
  font-family: var(--lg-sans);
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--lg-ink-d);
}
.lg-lede {
  margin: 0 0 2rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--lg-muted-d);
}
.lg-field {
  display: grid;
  gap: .45rem;
  margin-bottom: 1.1rem;
}
.lg-label {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--lg-ink-d);
}
.lg-input {
  width: 100%;
  height: 48px;
  padding: 0 .95rem;
  border: 1px solid var(--lg-line-d2);
  border-radius: var(--lg-r);
  background: var(--lg-sheet);
  color: var(--lg-ink-d);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  box-shadow: none;
  transition: border-color .3s var(--lg-ease), box-shadow .3s var(--lg-ease);
}
.lg-input::placeholder { color: var(--lg-placeholder); opacity: 1; }
.lg-input:hover { border-color: rgba(18, 19, 22, .4); }
.lg-input:focus { outline: none; }
.lg-input:focus-visible {
  border-color: var(--lg-ink-d);
  outline: 2px solid var(--lg-ink-d);
  outline-offset: 2px;
}
.lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  height: 48px;
  margin-top: .5rem;
  padding: 0 1.25rem;
  border: 1px solid var(--lg-ink-d);
  border-radius: var(--lg-r);
  background: var(--lg-ink-d);
  color: var(--lg-page);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .5s var(--lg-ease), background .4s var(--lg-ease), box-shadow .5s var(--lg-ease);
}
.lg-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform .5s var(--lg-ease);
}
.lg-btn:hover:not(:disabled) {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(18, 19, 22, .16);
}
.lg-btn:hover:not(:disabled) svg { transform: translateX(3px); }
.lg-btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
.lg-btn:disabled { opacity: .6; cursor: default; }
.lg-btn:focus-visible {
  outline: 2px solid var(--lg-ink-d);
  outline-offset: 3px;
}
.lg-error {
  margin: 0 0 1.25rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(143, 38, 38, .3);
  border-left: 2px solid var(--lg-err);
  border-radius: 8px;
  background: rgba(143, 38, 38, .06);
  color: var(--lg-err);
  font-size: .9rem;
  line-height: 1.45;
}
.lg-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--lg-ink-dark, #121316);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lg-linkbtn:hover { opacity: .75; }
.lg-fp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(11, 12, 14, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lg-fp {
  background: #f1efea;
  color: #121316;
  border-radius: 14px;
  padding: 26px 28px;
  width: min(440px, 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.lg-fp h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.lg-fp-body { margin: 0 0 16px; font-size: .92rem; line-height: 1.5; color: #5b5e66; }
.lg-fp-done { margin: 0 0 16px; font-size: .95rem; line-height: 1.5; color: #1a6e3c; }
.lg-fp-row { display: flex; gap: 14px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.lg-fp-row .lg-btn { width: auto; padding-left: 22px; padding-right: 22px; }

.lg-foot {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--lg-line-d);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--lg-muted-d);
}

/* ── film grain, on the photograph only (paper stays clean) ───────────── */
.lg-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── entry ────────────────────────────────────────────────────────────── */
.lg-enter {
  opacity: 0;
  transform: translateY(18px);
  animation: lg-enter .9s var(--lg-ease) forwards;
}
.lg-d1 { animation-delay: .08s; }
.lg-d2 { animation-delay: .18s; }
.lg-d3 { animation-delay: .3s; }
@keyframes lg-enter { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lg-enter { animation: none; opacity: 1; transform: none; }
  .lg-brand-media img { animation: none; transform: none; will-change: auto; }
  .lg-input, .lg-btn, .lg-btn svg { transition: none; }
  .lg-btn:hover:not(:disabled) { transform: none; }
  .lg-btn:hover:not(:disabled) svg { transform: none; }
}

/* ── narrow: the image becomes a band above the form ──────────────────── */
@media (max-width: 960px) {
  /* auto 1fr: the leftover height goes to the paper, never to the band */
  .lg-root { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .lg-brand {
    position: relative;
    top: auto;
    align-self: auto;
    height: clamp(260px, 42vh, 400px);
    padding: clamp(20px, 4vw, 32px);
  }
  /* a short band carries the stack higher up, so the scrim reaches higher too */
  .lg-scrim {
    background:
      radial-gradient(70% 70% at 18% 90%, rgba(11, 12, 14, .6), rgba(11, 12, 14, 0) 100%),
      linear-gradient(0deg, rgba(11, 12, 14, .5) 0%, rgba(11, 12, 14, .12) 45%, rgba(11, 12, 14, 0) 70%);
  }
  .lg-brand-stack { max-width: none; gap: .7rem; }
  .lg-wordmark { font-size: clamp(2.3rem, 7vw, 3.2rem); }
  .lg-tagline { font-size: clamp(1.15rem, 3.2vw, 1.5rem); max-width: 30ch; }
  .lg-brand-foot { display: none; }
  .lg-form { align-items: flex-start; padding-top: clamp(28px, 6vh, 48px); }
}

/* ── phones: drop the photograph, keep a dark brand band ──────────────── */
@media (max-width: 640px) {
  .lg-brand { height: auto; padding: 22px 20px 24px; }
  .lg-brand-media, .lg-scrim, .lg-grain { display: none; }
  .lg-brand-stack { gap: .5rem; }
  .lg-wordmark { font-size: 2.1rem; }
  .lg-tagline { font-size: 1.05rem; max-width: none; }
  .lg-form { padding: 28px 20px 40px; }
}

/* ═══ PHONE — pages ≤820px ═══════════════════════════════════════════════
   Page-level companion to the shell chrome in attest.css. Same line (820px)
   so a page never goes off-canvas-sidebar without also getting scrollable
   tables and stackable form rows. Scoped to `.shell` throughout — the portal
   has no `.shell` and keeps its own responsive rules untouched. */
@media (max-width: 820px) {
  /* register · deliverables · test-cases (all `.reg-gridwrap`) and documents
     (`.docs-gridwrap`) sit in a `.sheet--clip` band — `overflow: hidden` was
     right for masking row hover past the sheet's own radius, but on a table
     wider than the phone it just crops the missing columns instead of
     letting the operator reach them. overflow-y stays hidden (the vertical
     clip is still doing its job); overflow-x becomes the scrollbar, kept
     inside the sheet so the PAGE BODY never gains a horizontal scrollbar.
     Compounded with `.sheet--clip` itself (both classes — `.sheet--clip`
     alone is attest.css §7 kit vocabulary, loaded after main.css, so a
     same-specificity `.reg-gridwrap { overflow: hidden }` fight would lose
     to it on file order alone): this is what actually lets `.content` — a
     flex item of `.shell`, whose automatic min-width is its widest
     unshrinkable descendant — shrink to the viewport instead of stretching
     `.shell`, and with it the page, out to the table's un-scrolled width. */
  .sheet--clip.reg-gridwrap, .sheet--clip.docs-gridwrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* the register toolbar already wraps (kit + .reg-toolbar are flex-wrap);
     its search box just stops holding a 240px desktop width once it's the
     only thing that wrapped onto its own line */
  .reg-search { margin-left: 0; width: 100%; }
  .reg-search input { width: 100%; }

  /* every fixed-width `.form-group` (toolbars, modals, record panels — set
     inline via style={{ width: N }} from a dozen components outside this
     agent's writable surface) goes full-width; the row it sits in wraps
     instead of holding those columns side by side */
  .shell .flex { flex-wrap: wrap; }
  .shell .form-group { width: 100% !important; }

  /* ROADMAP — the dock spans edge to edge instead of sidebar-w + 28px (the
     sidebar is off-canvas now, so that reserve is dead space); bench
     capacity already floors to 1 at this width (dockCapacity() in
     RoadmapView.tsx reads the live `.shell .content` rect, so it needs no
     change here) and the `.rw-wb-body` container query already collapses
     to one column under 760px of *bench* width, which a full-width phone
     dock is always under. */
  .rw-dock, .shell--collapsed .rw-dock { left: 8px; right: 8px; }
  /* the ⤢ wide toggle: the board is already full width, so it's a no-op —
     hidden rather than left to invite a tap that does nothing (and, if a
     desktop session left it toggled on before the window narrowed, this
     also neutralises the state so it can't hold a bogus 100vw-sidebar
     width across the resize). */
  .rw-widebtn { display: none; }
  .rw-board--wide, .shell--collapsed .rw-board--wide { width: auto; margin-left: 0; }
}