toolroll 0.9.54 → 0.9.56

package/dist/server/console.css

@@ -0,0 +1,2819 @@
+
+/* The Console — the design system, v4 "Signal" (2026-09-27). A neutral
+   frame with paper sheets inset into it (Arc, Linear), compact Raycast
+   density, Geist for words and Geist Mono for machine facts. Ink is every
+   act a person can take; the accent (ink by default) means "waits on you" and nothing
+   else; blue means live. Flat surfaces: hairlines and one soft sheet
+   shadow, no glass. Zero dependencies, zero page JS beyond the nonce'd
+   chrome layer. */
+  @font-face {
+    font-family: "Geist"; font-style: normal; font-weight: 400;
+    font-display: swap; src: url("/fonts/geist-sans-400.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Geist"; font-style: normal; font-weight: 500;
+    font-display: swap; src: url("/fonts/geist-sans-500.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Geist"; font-style: normal; font-weight: 600;
+    font-display: swap; src: url("/fonts/geist-sans-600.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Geist Mono"; font-style: normal; font-weight: 400;
+    font-display: swap; src: url("/fonts/geist-mono-400.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Geist Mono"; font-style: normal; font-weight: 500;
+    font-display: swap; src: url("/fonts/geist-mono-500.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Geist Mono"; font-style: normal; font-weight: 600;
+    font-display: swap; src: url("/fonts/geist-mono-600.woff2") format("woff2");
+  }
+  /* One palette for every page (2026-09-27): neutral grey and paper with
+   * one chart magenta, light by day and dark after hours. The device decides unless
+   * the person pins a theme (html[data-theme], set from their cookie). The
+   * console's older token names map onto it, so the React workspace, the
+   * server-rendered pages and the pre-script fallback all paint the same. */
+  :root {
+    color-scheme: light;
+
+    --so-ground: #efefef; --so-paper: #ffffff; --so-sidebar: #efefef; --so-raised: #f5f5f5;
+    --so-ink: #171717; --so-muted: #666666; --so-line: #e6e6e6; --so-input-line: #d4d4d4;
+    --so-accent: #171717; --so-accent-hover: #383838; --so-accent-text: #171717; --so-on-accent: #ffffff; --so-soft: #f2f2f2;
+    --so-nav-ink: #525252; --so-nav-hover: #e4e4e4; --so-nav-current: #ffffff; --so-nav-current-ink: #171717;
+    --so-signal: #171717; --so-signal-hover: #383838; --so-on-signal: #ffffff; --so-signal-soft: #e8e8e8;
+    --so-danger: #c4320a; --so-danger-soft: #feebe7; --so-success: #218358; --so-success-soft: #e6f6eb;
+    --so-warning: #ab6400; --so-warning-soft: #fff4d5; --so-info: #0d74ce; --so-info-soft: #e6f4fe;
+    --so-neutral-ink: #525252; --so-neutral-soft: #f0f0f0; --so-live: #0d74ce;
+    --so-attention: var(--so-signal); --so-on-attention: var(--so-on-signal); --so-attention-soft: var(--so-signal-soft);
+    --so-sheet-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04), 0 4px 12px -6px rgb(0 0 0 / .06);
+    --so-pill-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .06);
+    --so-overlay: rgb(0 0 0 / .32); --so-shadow-overlay: 0 0 0 1px rgb(0 0 0 / .08), 0 24px 48px -12px rgb(0 0 0 / .22);
+    --so-selection: #d4d4d4; --so-scroll: #cfcfcf; --so-code-bg: #fafafa; --so-user-bubble: #f2f2f2;
+
+    --background: var(--so-ground); --foreground: var(--so-ink); --card: var(--so-paper);
+    --muted: var(--so-raised); --muted-foreground: var(--so-muted); --border: var(--so-line); --input: var(--so-input-line);
+    --primary: var(--so-accent); --primary-foreground: var(--so-on-accent); --secondary: var(--so-raised); --secondary-foreground: var(--so-ink);
+    --accent: var(--so-soft); --destructive: var(--so-danger); --destructive-strong: var(--so-danger); --destructive-soft: var(--so-danger-soft);
+    --success: var(--so-success); --success-soft: var(--so-success-soft); --warning: var(--so-warning); --warning-soft: var(--so-warning-soft);
+    --running: var(--so-info); --running-soft: var(--so-info-soft); --ring: var(--so-signal);
+    /* Magenta means one thing: a person is needed (approve, answer, decide). */
+    --brand: var(--so-attention); --brand-foreground: var(--so-on-attention); --brand-soft: var(--so-attention-soft);
+    --glass: var(--so-paper); --glass-strong: var(--so-paper); --glass-border: var(--so-line); --glass-highlight: transparent;
+    --ambient-one: transparent; --ambient-two: transparent; --user-message: var(--so-user-bubble);
+    --surface: var(--so-paper); --ok: var(--so-success); --danger: var(--so-danger); --fg-muted: var(--so-muted);
+    --shadow: none; --shadow-overlay: var(--so-shadow-overlay);
+    --radius: 0.625rem;
+    --so-ease-out: cubic-bezier(.23, 1, .32, 1);
+    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+    /* Phone spacing steps (760px and narrower): side gutter, gap under the
+       header, gap between page blocks, between rows, and inside a card. */
+    --so-phone-gutter: 16px; --so-phone-gap: 12px; --so-phone-block: 14px; --so-phone-row: 8px; --so-phone-card: 12px;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      color-scheme: dark;
+
+    --so-ground: #0b0b0b; --so-paper: #161616; --so-sidebar: #0b0b0b; --so-raised: #1c1c1c;
+    --so-ink: #ededed; --so-muted: #a1a1a1; --so-line: #262626; --so-input-line: #363636;
+    --so-accent: #ededed; --so-accent-hover: #ffffff; --so-accent-text: #ededed; --so-on-accent: #0a0a0a; --so-soft: #1f1f1f;
+    --so-nav-ink: #a1a1a1; --so-nav-hover: #171717; --so-nav-current: #1f1f1f; --so-nav-current-ink: #ededed;
+    --so-signal: #ededed; --so-signal-hover: #ffffff; --so-on-signal: #0a0a0a; --so-signal-soft: #2e2e2e;
+    --so-danger: #ff977d; --so-danger-soft: rgb(255 151 125 / .12); --so-success: #3dd68c; --so-success-soft: rgb(61 214 140 / .12);
+    --so-warning: #ffca16; --so-warning-soft: rgb(255 202 22 / .12); --so-info: #70b8ff; --so-info-soft: rgb(112 184 255 / .12);
+    --so-neutral-ink: #b4b4b4; --so-neutral-soft: #1f1f1f; --so-live: #70b8ff;
+    --so-attention: var(--so-signal); --so-on-attention: var(--so-on-signal); --so-attention-soft: var(--so-signal-soft);
+    --so-sheet-shadow: 0 0 0 1px #262626, 0 1px 2px rgb(0 0 0 / .4);
+    --so-pill-shadow: 0 0 0 1px #2a2a2a, 0 1px 2px rgb(0 0 0 / .5);
+    --so-overlay: rgb(0 0 0 / .6); --so-shadow-overlay: 0 0 0 1px #2e2e2e, 0 24px 48px -12px rgb(0 0 0 / .7);
+    --so-selection: #3a3a3a; --so-scroll: #333333; --so-code-bg: #111111; --so-user-bubble: #202020;
+    }
+  }
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+
+    --so-ground: #0b0b0b; --so-paper: #161616; --so-sidebar: #0b0b0b; --so-raised: #1c1c1c;
+    --so-ink: #ededed; --so-muted: #a1a1a1; --so-line: #262626; --so-input-line: #363636;
+    --so-accent: #ededed; --so-accent-hover: #ffffff; --so-accent-text: #ededed; --so-on-accent: #0a0a0a; --so-soft: #1f1f1f;
+    --so-nav-ink: #a1a1a1; --so-nav-hover: #171717; --so-nav-current: #1f1f1f; --so-nav-current-ink: #ededed;
+    --so-signal: #ededed; --so-signal-hover: #ffffff; --so-on-signal: #0a0a0a; --so-signal-soft: #2e2e2e;
+    --so-danger: #ff977d; --so-danger-soft: rgb(255 151 125 / .12); --so-success: #3dd68c; --so-success-soft: rgb(61 214 140 / .12);
+    --so-warning: #ffca16; --so-warning-soft: rgb(255 202 22 / .12); --so-info: #70b8ff; --so-info-soft: rgb(112 184 255 / .12);
+    --so-neutral-ink: #b4b4b4; --so-neutral-soft: #1f1f1f; --so-live: #70b8ff;
+    --so-attention: var(--so-signal); --so-on-attention: var(--so-on-signal); --so-attention-soft: var(--so-signal-soft);
+    --so-sheet-shadow: 0 0 0 1px #262626, 0 1px 2px rgb(0 0 0 / .4);
+    --so-pill-shadow: 0 0 0 1px #2a2a2a, 0 1px 2px rgb(0 0 0 / .5);
+    --so-overlay: rgb(0 0 0 / .6); --so-shadow-overlay: 0 0 0 1px #2e2e2e, 0 24px 48px -12px rgb(0 0 0 / .7);
+    --so-selection: #3a3a3a; --so-scroll: #333333; --so-code-bg: #111111; --so-user-bubble: #202020;
+  }
+  * { box-sizing: border-box; }
+  /* Touch: no grey flash on a tap, no double-tap zoom wait on a control,
+     and a long press never selects a control's label. Text stays selectable. */
+  html { -webkit-tap-highlight-color: transparent; }
+  a, button, summary, [role=button], [role=tab] { touch-action: manipulation; }
+  button, [role=button], [role=tab], .task-context-chip, .approval-chip, .verdict-chip { -webkit-user-select: none; user-select: none; }
+  ::selection { background: var(--so-selection); color: var(--so-ink); }
+  ::placeholder { color: var(--muted-foreground); }
+  body {
+    margin: 0; color: var(--foreground);
+    background: var(--background);
+    caret-color: var(--so-signal);
+    font: 400 0.875rem/1.5 var(--font-sans); font-feature-settings: "ss01" 0;
+    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+  }
+  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+
+  /* Scrollbars belong to the theme, not the platform default. */
+  * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+
+  .topbar {
+    position: sticky; top: 0; z-index: 10;
+    border-bottom: 1px solid var(--border); background: var(--background);
+  }
+  .topbar-inner {
+    max-width: 44rem; margin-inline: auto; padding: 0 1.25rem; height: 3.25rem;
+    display: flex; align-items: center; gap: 1.25rem;
+  }
+  .brand { font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); text-decoration: none;
+           display: flex; align-items: center; height: 100%; }
+  .brand .dot { color: var(--muted-foreground); }
+  .topbar nav { display: flex; gap: .25rem; margin-left: auto; height: 100%; }
+  .topbar nav a {
+    color: var(--muted-foreground); text-decoration: none; font-size: 0.8125rem; font-weight: 500;
+    display: flex; align-items: center; padding: 0 .625rem; transition: color .15s;
+  }
+  @media (hover: hover) and (pointer: fine) { .topbar nav a:hover { color: var(--foreground); } }
+  main { max-width: 44rem; margin-inline: auto; padding: 1.75rem 1.25rem 4rem; }
+  h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 .25rem; line-height: 1.3; }
+  h1 .meta { font-weight: 400; letter-spacing: 0; }
+  /* Section headers speak in the human voice (mono is for machine facts
+     only): small, semibold, dim — Linear's "In Progress 5" register. */
+  h2 {
+    font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em;
+    color: var(--muted-foreground); margin: 2rem 0 .5rem; font-family: var(--font-sans);
+  }
+  a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
+  @media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--muted-foreground); } }
+  p { margin: .4rem 0; }
+  code { background: var(--muted); border-radius: .3rem; padding: .1rem .35rem; font-family: var(--font-mono); font-size: .8125rem; }
+  .mono { font-family: var(--font-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+
+  .meta { font-size: 0.8125rem; color: var(--muted-foreground); }
+  .meta a { color: var(--muted-foreground); }
+  .hint { font-size: 0.75rem; color: var(--muted-foreground); margin: -.375rem 0 .625rem; }
+  .eyebrow {
+    display: block; color: var(--muted-foreground); font-size: .625rem;
+    font-weight: 500; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase;
+    font-family: var(--font-mono);
+  }
+  .num { font-variant-numeric: tabular-nums; }
+
+  /* Utility classes replacing the old inline style= attributes. */
+  .tight { margin-top: 0; }
+  .card > h2:first-child, .card > h3:first-child { margin-top: 0; }
+  .w-xs { width: 4.5rem; } .w-sm { width: 8rem; } .w-md { width: 12rem; } .w-lg { width: 14rem; }
+  .field-cap { width: 100%; max-width: 28rem; }
+  .field-cap-sm { width: 100%; max-width: 22rem; }
+  .field-cap-lg { width: 100%; max-width: 34rem; }
+  .prewrap { white-space: pre-wrap; }
+  .wrap-any { overflow-wrap: anywhere; }
+  .grab { cursor: grab; user-select: none; }
+
+  .palette {
+    position: fixed; top: 18vh; left: 50%; transform: translateX(-50%); width: min(32rem, 90vw);
+    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+    box-shadow: var(--shadow-overlay);
+    padding: .625rem; z-index: 50;
+  }
+  .palette input { width: 100%; margin: 0; }
+  .palette ul { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 40vh; overflow-y: auto; }
+  .palette li { padding: .4375rem .625rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; font-size: .875rem; }
+  .palette li[aria-selected="true"] { background: var(--muted); }
+
+  /* The ledger: the window's harvest as strong figures in a sentence. */
+  .ledger { font-size: 0.9375rem; color: var(--muted-foreground); margin: .875rem 0 0; line-height: 1.9; }
+  .ledger b { font-weight: 600; font-size: 1.25rem; color: var(--foreground); font-variant-numeric: tabular-nums; padding-right: .1rem; font-family: var(--font-mono); }
+  .ledger .good b { color: var(--success); }
+  .ledger .bad b { color: var(--destructive); }
+
+  /* Status labels are quiet metadata, not decoration. Their words carry
+     the meaning; the restrained tint only speeds scanning. Count badges
+     remain round so a number cannot be confused with a state. */
+  .badge {
+    display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: .375rem;
+    padding: .0625rem .4rem; font-size: 0.6875rem; font-weight: 500; line-height: 1.45;
+    background: color-mix(in srgb, var(--card) 58%, transparent); color: var(--muted-foreground); vertical-align: middle;
+    font-family: var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
+  }
+  .badge-done, .badge-answered, .badge-verified, .badge-built {
+    background: color-mix(in srgb, var(--muted) 58%, var(--card)); color: var(--foreground);
+    border-color: var(--border);
+  }
+  .badge-failed {
+    background: color-mix(in srgb, var(--muted) 58%, var(--card));
+    color: color-mix(in srgb, var(--destructive) 68%, var(--foreground)); border-color: var(--border);
+  }
+  .badge-note {
+    background: color-mix(in srgb, var(--muted) 58%, var(--card));
+    color: var(--so-warning, #ab6400); border-color: var(--border);
+  }
+  .badge-overdue {
+    background: color-mix(in srgb, var(--muted) 58%, var(--card)); color: var(--foreground);
+    border-color: var(--border);
+  }
+  /* The criterion matrix's fourth state (v39): neither a pass nor a
+     failure — evidence resolved everywhere except a manual-review kind,
+     which by design nothing here can machine-verify. Quieter than
+     badge-failed; still visibly distinct from a plain pass. */
+  .badge-manual-review {
+    background: color-mix(in srgb, var(--muted) 58%, var(--card));
+    color: color-mix(in srgb, var(--muted-foreground) 80%, var(--foreground)); border-color: var(--border);
+  }
+  /* "open" and "parked" are neutral facts (an open PR, a parked decision);
+     the MAGENTA form is the attention count — the number that waits on you.
+     One accent, two places (reduction pass §3): the needs-you count and
+     the act that resolves the screen. Cards, frames, and seals are neutral. */
+  .badge-open, .badge-parked { color: var(--foreground); }
+  .count {
+    min-width: 1.25rem; padding-inline: .35rem; border-radius: 9999px;
+  }
+  .count.badge-open {
+    background: var(--brand-soft); color: var(--brand);
+    border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
+  }
+  .badge-running {
+    background: color-mix(in srgb, var(--muted) 58%, var(--card));
+    color: color-mix(in srgb, var(--running) 72%, var(--foreground)); border-color: var(--border);
+  }
+  .badge-cut { background: var(--muted); }
+
+  .card {
+    border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass);
+    padding: 1rem 1.125rem; margin: .75rem 0;
+  }
+  .problem {
+    border: 1px solid color-mix(in srgb, var(--destructive) 35%, transparent);
+    background: var(--destructive-soft); color: var(--destructive);
+    border-radius: var(--radius); padding: .625rem .875rem; margin: .75rem 0; font-size: 0.8125rem;
+  }
+  /* A row is 2.25rem of quiet: hairline below, hover fills, nothing else. */
+  .row {
+    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
+    padding: .5rem .375rem; min-height: 2.25rem; border-bottom: 1px solid var(--border);
+    margin: 0; border-radius: calc(var(--radius) - 4px);
+  }
+  .row:last-of-type { border-bottom: none; }
+  .row .right { margin-left: auto; }
+  a.row { text-decoration: none; }
+  @media (hover: hover) and (pointer: fine) { a.row:hover { background: var(--muted); } }
+
+  /* A parked decision: the question in full weight, the whole card the
+     tap target, the neutral border — the "needs you" header above it
+     carries the colour for every card beneath. */
+  .decide-card {
+    display: block; border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--card); padding: .875rem 1.125rem; margin: .625rem 0;
+    text-decoration: none; transition: border-color .15s;
+  }
+  @media (hover: hover) and (pointer: fine) { .decide-card:hover { border-color: color-mix(in srgb, var(--border) 55%, var(--muted-foreground)); } }
+  .decide-card .q { font-weight: 600; margin: 0 0 .25rem; }
+
+  /* Buttons: secondary by default (paper + hairline); a form's one
+     submit is primary (ink on paper, paper on ink); the approve act is
+     the accent; danger is red and outlined. 2.125rem at a desk, 2.75rem to a thumb. */
+  button {
+    font: 500 0.8125rem/1.4 var(--font-sans); cursor: pointer; border-radius: calc(var(--radius) - 3px);
+    border: 1px solid var(--input); background: var(--card); color: var(--foreground);
+    padding: .35rem .75rem; min-height: 2.125rem;
+    transition: background .12s var(--so-ease-out), border-color .12s var(--so-ease-out), color .12s var(--so-ease-out);
+  }
+  @media (hover: hover) and (pointer: fine) { button:hover { background: var(--so-soft); } }
+  button:active { background: var(--so-nav-hover); }
+  form.card > button[type=submit], .sticky-actions button[type=submit], form.card .sticky-actions button {
+    background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600;
+  }
+  @media (hover: hover) and (pointer: fine) { form.card > button[type=submit]:hover, .sticky-actions button[type=submit]:hover {
+    background: color-mix(in srgb, var(--primary) 85%, var(--background)); border-color: color-mix(in srgb, var(--primary) 85%, var(--background));
+  } }
+  /* The approve act is the one magenta verb: it resolves what waits on you.
+     The ceremony's frame is neutral so the button is the only coloured thing
+     in it; a danger act stays red even inside one. */
+  .approve-form button[type=submit], .approve-form .sticky-actions button[type=submit] {
+    background: var(--brand); color: var(--brand-foreground); border-color: var(--brand); font-weight: 600;
+  }
+  @media (hover: hover) and (pointer: fine) { .approve-form button[type=submit]:hover, .approve-form .sticky-actions button[type=submit]:hover { background: color-mix(in srgb, var(--brand) 85%, var(--foreground)); border-color: color-mix(in srgb, var(--brand) 85%, var(--foreground)); } }
+  button.danger, .approve-form button[type=submit].danger {
+    color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 50%, transparent);
+    background: transparent; font-weight: 500;
+  }
+  @media (hover: hover) and (pointer: fine) { button.danger:hover, .approve-form button[type=submit].danger:hover { background: var(--destructive-soft); } }
+  /* Removing a credential takes a second, deliberate tap. */
+  details.confirm-remove { display: inline-block; margin: 0 0 0 .5rem; vertical-align: top; }
+  details.confirm-remove > summary { cursor: pointer; color: var(--destructive); font-size: .8125rem; min-height: 2.5rem; display: inline-flex; align-items: center; }
+  details.confirm-remove[open] { display: block; margin: .75rem 0 0; }
+  .project-card .project-name:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: .375rem; }
+
+  label { display: block; font-size: 0.8125rem; font-weight: 500; margin: .75rem 0 0; color: var(--foreground); }
+  input[type=text], input[type=password], input[type=number], input[type=url], input[type=email], input[type=search], input[type=time], textarea, select {
+    width: 100%; margin: .35rem 0 0; padding: .45rem .7rem; font: 400 0.875rem/1.4 var(--font-sans);
+    color: var(--foreground); background: var(--card); min-height: 2.125rem;
+    border: 1px solid var(--input); border-radius: calc(var(--radius) - 3px);
+    transition: border-color .15s, box-shadow .15s;
+  }
+  @media (hover: hover) and (pointer: fine) { input:hover, textarea:hover, select:hover { border-color: var(--muted-foreground); } }
+  input[type=number] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+  input[type=radio], input[type=checkbox] { accent-color: var(--ring); }
+  .permission-field { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
+  .permission-field legend { padding: 0; font-size: .8125rem; font-weight: 600; }
+  .permission-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .5rem; }
+  .permission-choice {
+    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start;
+    margin: 0; padding: .72rem .78rem; border: 1px solid var(--glass-border);
+    border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--card) 66%, transparent);
+    cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
+  }
+  @media (hover: hover) and (pointer: fine) { .permission-choice:hover { background: var(--muted); } }
+  .permission-choice:has(input:checked) {
+    border-color: color-mix(in srgb, var(--foreground) 42%, var(--border));
+    background: var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 8%, transparent), var(--shadow);
+  }
+  .permission-choice input { margin: .14rem 0 0; }
+  .permission-choice strong, .permission-choice small { display: block; }
+  .permission-choice strong { font-size: .8125rem; }
+  .permission-choice small { margin-top: .16rem; color: var(--muted-foreground); font-size: .8125rem; font-weight: 400; line-height: 1.4; }
+  .permission-note { margin: .55rem 0 0; }
+  .scope-editor .permission-toggle { grid-template-columns: 1fr; }
+  .scope-editor .problem { color: var(--foreground); }
+  /* New work starts like a conversation, not a configuration sheet. The
+     planner turns the one intent into the detailed, signed contract; these
+     controls expose the uncommon overrides without making them the door. */
+  main:has(.task-intake) { max-width: 68rem; }
+  .task-intake { width: min(100%, 50rem); margin: clamp(1rem, 5vh, 4rem) auto 0; }
+  .task-intake-hero { text-align: center; margin: 0 auto 1.35rem; max-width: 38rem; }
+  .task-intake-mark {
+    display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto .85rem;
+    border: 1px solid var(--border); border-radius: .75rem;
+    background: var(--card); box-shadow: var(--so-pill-shadow);
+    font: 600 .72rem/1 var(--font-mono); letter-spacing: -.05em;
+  }
+  .task-intake-hero h1 { margin: 0; font-size: clamp(1.65rem, 4vw, 2.2rem); letter-spacing: -.045em; }
+  .task-intake-hero p { margin: .45rem 0 0; color: var(--muted-foreground); }
+  .task-composer { padding: .75rem; border-radius: 1.45rem; box-shadow: var(--shadow-overlay); }
+  .task-prompt { margin: 0; font-size: 0; }
+  .task-prompt textarea {
+    min-height: 8.5rem; max-height: 18rem; margin: 0; padding: .9rem 1rem; resize: vertical;
+    border: 0; background: transparent; box-shadow: none; font-size: 1.05rem; line-height: 1.55;
+  }
+  .task-prompt textarea:focus-visible { border: 0; box-shadow: none; }
+  @media (hover: hover) and (pointer: fine) { .task-prompt textarea:hover { border: 0; box-shadow: none; } }
+  .task-repo { margin: .25rem .45rem .7rem; }
+  .task-composer-footer { display: flex; align-items: center; gap: .5rem; padding: .25rem; }
+  .task-context { display: flex; align-items: center; gap: .4rem; flex: 1 1 auto; min-width: 0; }
+  .task-context-chip {
+    display: inline-flex; align-items: center; min-height: 2rem; max-width: 13rem; padding: .25rem .65rem;
+    border: 1px solid var(--glass-border); border-radius: 999px; color: var(--muted-foreground);
+    background: color-mix(in srgb, var(--glass) 76%, transparent); font-size: .72rem; white-space: nowrap;
+    overflow: hidden; text-overflow: ellipsis;
+  }
+  .task-quality { margin: 0; flex: none; font-size: 0; }
+  .task-quality select {
+    width: auto; min-height: 2rem; margin: 0; padding: .25rem 1.75rem .25rem .65rem;
+    border-radius: 999px; color: var(--muted-foreground); font-size: .72rem; background-color: var(--glass);
+  }
+  .task-submit {
+    flex: none; min-height: 2.45rem; padding: .45rem .95rem; border-radius: 999px;
+    background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600;
+  }
+  @media (hover: hover) and (pointer: fine) { .task-submit:hover { background: color-mix(in srgb, var(--primary) 85%, var(--background)); border-color: transparent; } }
+  details.task-options {
+    margin: .65rem .25rem 0; padding: .15rem .5rem 0; border: 0; border-top: 1px solid var(--glass-border);
+    border-radius: 0; background: transparent;
+  }
+  details.task-options[open] { padding-bottom: .25rem; }
+  .task-options > summary { display: flex; align-items: center; gap: .5rem; list-style: none; }
+  .task-options > summary::-webkit-details-marker { display: none; }
+  .task-options > summary::after {
+    content: ""; width: .4rem; height: .4rem; margin-left: auto; margin-right: .25rem;
+    border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground);
+    transform: rotate(45deg) translateY(-.1rem); transition: transform .15s;
+  }
+  .task-options[open] > summary::after { transform: rotate(225deg) translateY(-.1rem); }
+  .task-options > summary small { color: var(--muted-foreground); font-weight: 400; }
+  .task-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; padding: 0 .25rem .5rem; }
+  .task-options-grid .wide, .task-options-grid .permission-field { grid-column: 1 / -1; }
+  .task-check { display: flex; gap: .55rem; align-items: flex-start; }
+  .task-check input { margin-top: .2rem; }
+  .task-check > span { display: grid; gap: .1rem; }
+  .task-check small { display: block; font-weight: 400; line-height: 1.45; }
+  .task-agent-note { text-align: center; max-width: 42rem; margin: .85rem auto 0; }
+  .visually-hidden {
+    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
+    margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important; border: 0 !important;
+  }
+  input[type=password] { font-family: var(--font-mono); }
+  input:focus-visible, textarea:focus-visible, select:focus-visible {
+    outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
+  }
+  button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+
+  .inline { display: inline-block; width: auto; margin: 0 .375rem .375rem 0; vertical-align: middle; }
+  .assistant-picker .button-link[aria-current=page] { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .inline input[type=text] { display: inline-block; width: auto; margin: 0 .375rem 0 0; vertical-align: middle; }
+  .inline button { width: auto; }
+
+  /* One option = one container: consequence first, then the act. */
+  form.option {
+    margin: .75rem 0; border: 1px solid var(--border); border-radius: var(--radius);
+    background: var(--card); padding: .875rem 1rem;
+  }
+  form.option button {
+    display: block; width: 100%; text-align: left; font-size: 0.9375rem; font-weight: 600;
+    min-height: 2.75rem;
+  }
+  /* Recommended is a suggestion, not attention: neutral emphasis, no magenta. */
+  form.option.recommended { border-color: color-mix(in srgb, var(--foreground) 30%, var(--border)); }
+  form.option.recommended .badge { background: var(--muted); color: var(--foreground); }
+  .consequence { font-size: 0.8125rem; color: var(--muted-foreground); margin: 0 0 .625rem; white-space: pre-wrap; }
+  form.option input[type=text] { font-size: 0.8125rem; margin-top: .5rem; min-height: 2.25rem; }
+
+  .recap { color: var(--muted-foreground); margin: .75rem 0; white-space: pre-wrap; }
+  #scope .recap, #scope .scope-paths, .approval-goal { overflow-wrap: anywhere; }
+  .result-card {
+    margin: 1.25rem 0; border-color: color-mix(in srgb, var(--success) 32%, var(--glass-border));
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+  }
+  .result-card h2 { margin: 0; }
+  .completion-receipt {
+    position: relative; overflow: hidden; margin: 1rem 0 1.25rem; padding: 1.15rem;
+    border-color: color-mix(in srgb, var(--foreground) 13%, var(--glass-border));
+    background: var(--card);
+    box-shadow: var(--shadow-card);
+  }
+  .completion-receipt::after {
+    content: ""; position: absolute; width: 11rem; height: 11rem; right: -5rem; top: -7rem;
+    border-radius: 50%; background: color-mix(in srgb, var(--running) 9%, transparent); filter: blur(4px); pointer-events: none;
+  }
+  .receipt-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
+  .receipt-head h2 { margin: .15rem 0 0; font-size: 1.15rem; }
+  /* The receipt's status line is the shared component (.status-line);
+     the head keeps it from wrapping under the heading. */
+  .receipt-head .status-line { flex: none; font-size: .8125rem; }
+  .receipt-summary { position: relative; z-index: 1; max-width: 43rem; margin: .75rem 0 1rem; font-size: 1rem; line-height: 1.55; }
+  .receipt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
+  .receipt-facts > span { min-width: 0; padding: .7rem .75rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--glass-strong) 64%, transparent); }
+  .receipt-facts strong, .receipt-facts small { display: block; overflow-wrap: anywhere; }
+  .receipt-facts strong { font-size: .78rem; font-weight: 600; }
+  .receipt-facts small { margin-top: .18rem; color: var(--muted-foreground); font-size: .75rem; line-height: 1.4; }
+  /* Thumbnails, never a full-width poster: auto-fill leaves a lone
+     screenshot at thumbnail size (UI polish 2026-09-13). */
+  .receipt-visuals { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 14rem)); gap: .55rem; margin-top: .75rem; }
+  .receipt-shot { display: grid; gap: .35rem; color: var(--muted-foreground); font-size: .75rem; text-decoration: none; }
+  .receipt-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: var(--muted); }
+  @media (hover: hover) and (pointer: fine) { .receipt-shot:hover { color: var(--foreground); } }
+  .report-items ol { margin: .35rem 0 .75rem; padding-left: 1.25rem; display: grid; gap: .75rem; }
+  .report-items li p { margin: .15rem 0; }
+  .report-link { overflow-wrap: anywhere; }
+  .receipt-caveats, .receipt-coverage { margin-top: .8rem; padding: .7rem .8rem; border-left: 1px solid var(--border); border-radius: 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0; background: color-mix(in srgb, var(--muted) 62%, transparent); font-size: .78rem; }
+  .receipt-caveats ul, .receipt-coverage ul { margin: .3rem 0 0; padding-left: 1.15rem; }
+  /* Secondary receipt detail (concise pass, 2026-09-13): native
+     disclosures in the receipt's own quiet tone — no card chrome. */
+  details.receipt-coverage, details.receipt-coverage[open] { padding: 0 .8rem .1rem; border-top: 0; border-right: 0; border-bottom: 0; }
+  details.receipt-coverage > summary { padding: .5rem 0; font-weight: 600; color: var(--foreground); font-size: .78rem; }
+  details.receipt-coverage[open] > summary { padding-bottom: .2rem; }
+  details.receipt-coverage ul { margin: 0 0 .5rem; }
+  .receipt-history, .receipt-history[open] { margin: .35rem 0 0; padding: 0; border: 0; background: none; border-radius: 0; }
+  .receipt-history > summary { padding: .35rem 0; min-height: 2.25rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; list-style: none; }
+  .receipt-history > summary::-webkit-details-marker { display: none; }
+  .receipt-history > summary::before { content: "▸"; }
+  .receipt-history[open] > summary::before { content: "▾"; }
+  .receipt-history .receipt-review { margin: 0 0 .35rem; }
+  .semantic-coverage p { margin: .2rem 0; }
+  .receipt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; margin-top: .9rem; }
+  .receipt-actions > a:not(.button-link) { font-size: .78rem; font-weight: 550; }
+  /* The review cockpit (Priority 5): a master/detail over completed work.
+     The queue is a ranked list, the detail one scan path — intent, proof,
+     changes, publication — and the primary act sits under the header. */
+  main:has(.cockpit) { max-width: 82rem; }
+  .cockpit { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
+  .cockpit-queue { position: sticky; top: 1rem; min-width: 0; }
+  .cockpit-queue h2 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .25rem; }
+  .cockpit-queue .lane-count { border: 1px solid var(--border); border-radius: 999px; padding: .04rem .5rem; font-weight: 500; color: var(--muted-foreground); font-size: .6875rem; }
+  .cockpit-queue-hint { margin: 0 0 .6rem; font-size: .7rem; line-height: 1.4; }
+  .cockpit-queue-list { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 9rem); overflow-y: auto; }
+  .cockpit-row {
+    display: grid; gap: .2rem; padding: .55rem .65rem; margin-bottom: .2rem; min-width: 0;
+    border: 1px solid transparent; border-radius: calc(var(--radius) - 3px); text-decoration: none; color: var(--foreground);
+  }
+  @media (hover: hover) and (pointer: fine) { .cockpit-row:hover { background: var(--card); } }
+  .cockpit-row.current { background: var(--muted); border-color: color-mix(in srgb, var(--foreground) 12%, var(--border)); }
+  .cockpit-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-width: 0; }
+  .cockpit-row-head strong { min-width: 0; overflow-wrap: anywhere; font-size: .8125rem; font-weight: 550; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+  .cockpit-row-meta { display: block; color: var(--muted-foreground); font-size: .68rem; overflow-wrap: anywhere; }
+  .cockpit-why { display: block; color: var(--muted-foreground); font-size: .7rem; line-height: 1.35; overflow-wrap: anywhere; }
+  .refusal-back a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
+  .cockpit-primary { margin: .85rem 0 1rem; }
+  .cockpit-primary .button-link { white-space: nowrap; }
+  .cockpit-detail { min-width: 0; }
+  .cockpit-head h1 { margin: .2rem 0 .55rem; color: var(--foreground); font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; }
+  .cockpit-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .35rem; }
+  .cockpit-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .85rem 0 1rem; padding: .85rem 1rem;
+    border-color: var(--glass-border); background: var(--glass-strong); }
+  .cockpit-next > div { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
+  .cockpit-next .meta { font-size: .78rem; line-height: 1.45; }
+  .cockpit-next form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
+  .cockpit-next form input[type=text] { min-width: 9rem; margin: 0; }
+  .cockpit-next .button-link, .cockpit-next button[type=submit] { white-space: nowrap; }
+  .cockpit-section { margin: .85rem 0; padding: .95rem 1.05rem; }
+  .cockpit-section h3 { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; color: var(--muted-foreground); }
+  .cockpit-section .recap { margin: .35rem 0; }
+  .cockpit-section .result-section { margin-top: .6rem; }
+  .cockpit-section .result-section ul, .cockpit-section ul { margin: .25rem 0 0; padding-left: 1.15rem; }
+  .cockpit-section li { overflow-wrap: anywhere; }
+  .cockpit-drift { margin: .6rem 0; font-size: .8rem; }
+  .cockpit-files { margin: .4rem 0 .6rem; padding-left: 1.25rem; font-size: .78rem; }
+  .cockpit-files li { margin: .2rem 0; }
+  .cockpit-files .pick-file { min-height: 1.75rem; padding: 0 .55rem; font-size: .75rem; }
+  .cockpit-section .diff-review { margin-top: .6rem; }
+  .cockpit-section .receipt-visuals { margin-top: .6rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 14rem)); }
+  .cockpit-disclosure { padding: 0; overflow: hidden; }
+  .cockpit-disclosure > summary {
+    display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem;
+    padding: .85rem 1.05rem; list-style: none; cursor: pointer;
+  }
+  .cockpit-disclosure > summary::-webkit-details-marker { display: none; }
+  .cockpit-disclosure > summary > h3 { display: grid; gap: .12rem; min-width: 0; margin: 0; font-size: .82rem; }
+  .cockpit-disclosure > summary small { color: var(--muted-foreground); font-size: .72rem; font-weight: 400; }
+  .cockpit-disclosure-action { color: var(--muted-foreground); font-size: .72rem; white-space: nowrap; }
+  .cockpit-disclosure-action::after { content: "↓"; margin-left: .35rem; }
+  .cockpit-disclosure[open] .cockpit-disclosure-action::after { content: "↑"; }
+  .cockpit-disclosure-body { padding: 0 1.05rem .95rem; border-top: 1px solid var(--glass-border); }
+  .cockpit-proof-group { margin: .65rem 0; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--glass-strong) 62%, transparent); }
+  .cockpit-proof-group > summary { padding: .65rem .75rem; cursor: pointer; font-weight: 550; }
+  .cockpit-proof-group .criterion-matrix { padding: 0 .75rem .7rem; }
+  .cockpit-proof-summary { display: grid; gap: .25rem; margin: .15rem 0 .75rem; line-height: 1.45; }
+  .cockpit-proof-summary strong { font-size: .88rem; }
+  .cockpit-evidence-group { margin: .65rem 0 0; scroll-margin-top: 6rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); overflow: hidden; }
+  .cockpit-evidence-group > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; cursor: pointer; list-style: none; font-weight: 550; }
+  .cockpit-evidence-group > summary::-webkit-details-marker { display: none; }
+  .cockpit-evidence-group > summary > span { flex: none; white-space: nowrap; }
+  .cockpit-evidence-group > summary small { min-width: 0; color: var(--muted-foreground); font-size: .7rem; font-weight: 400; text-align: right; }
+  .cockpit-evidence-group [data-primary-evidence] { scroll-margin-top: 6rem; }
+  .cockpit-evidence-body { padding: 0 .75rem .75rem; border-top: 1px solid var(--glass-border); }
+  .cockpit-accept { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--glass-border); }
+  .cockpit-accept > summary { cursor: pointer; font-size: .78rem; font-weight: 600; }
+  .cockpit-accept[open] > summary { margin-bottom: .55rem; }
+  .cockpit-accept p { margin: 0 0 .55rem; }
+  .cockpit-accept-form { display: flex; gap: .5rem; margin: 0; }
+  .cockpit-accept-form input { margin: 0; min-width: 10rem; }
+  .cockpit-accept-form button { flex: none; background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  .diff-review {
+    overflow: hidden; margin: .8rem 0 .5rem; border: 1px solid var(--glass-border);
+    border-radius: var(--radius); background: color-mix(in srgb, var(--card) 82%, transparent);
+    
+  }
+  .diff-review-bar {
+    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
+    min-height: 2.8rem; padding: .4rem .55rem .4rem .85rem;
+    border-bottom: 1px solid var(--glass-border); background: color-mix(in srgb, var(--glass-strong) 68%, transparent);
+  }
+  .diff-modes { display: inline-flex; padding: .18rem; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--muted); }
+  .diff-modes button {
+    min-height: 1.75rem; padding: .2rem .7rem; border: 0; border-radius: 999px;
+    background: transparent; box-shadow: none; color: var(--muted-foreground); font-size: .7rem;
+  }
+  @media (hover: hover) and (pointer: fine) { .diff-modes button:hover { transform: none; color: var(--foreground); } }
+  .diff-modes button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 3px color-mix(in srgb, var(--background) 20%, transparent); }
+  .diff-review-help {
+    margin: 0; padding: .62rem .85rem; border-bottom: 1px solid var(--glass-border);
+    background: color-mix(in srgb, var(--running) 7%, transparent); color: var(--muted-foreground); font-size: .75rem;
+  }
+  .diff-review[data-mode="view"] .diff-review-help { display: none; }
+  .diff-file { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+  .diff-file + .diff-file { border-top: 1px solid var(--glass-border); }
+  .diff-file[open] { padding-bottom: 0; }
+  .diff-file > summary {
+    display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .45rem .85rem;
+    list-style: none; color: var(--foreground); background: color-mix(in srgb, var(--glass) 55%, transparent);
+  }
+  .diff-file > summary::-webkit-details-marker { display: none; }
+  .diff-file > summary::before {
+    content: ""; flex: none; width: .35rem; height: .35rem;
+    border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground);
+    transform: rotate(-45deg); transition: transform .15s ease;
+  }
+  .diff-file[open] > summary::before { transform: rotate(45deg) translateY(-.1rem); }
+  .diff-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .75rem/1.4 var(--font-mono); }
+  .diff-file-counts { display: inline-flex; gap: .45rem; flex: none; margin-left: auto; font: 500 .75rem/1 var(--font-mono); }
+  .diff-file-counts b { color: var(--success); font-weight: 500; }
+  .diff-file-counts i { color: var(--destructive); font-style: normal; }
+  .diff-rename { margin: 0; padding: .4rem .85rem; border-top: 1px solid var(--glass-border); }
+  .diff-hunk + .diff-hunk { border-top: 1px solid var(--glass-border); }
+  .diff-hunk-head {
+    overflow-x: auto; padding: .42rem .85rem; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
+    background: color-mix(in srgb, var(--running) 8%, var(--card)); color: color-mix(in srgb, var(--running) 72%, var(--foreground));
+    font: 500 .75rem/1.4 var(--font-mono); white-space: pre;
+  }
+  .diff-lines { max-width: 100%; overflow-x: auto; background: color-mix(in srgb, var(--background) 48%, var(--card)); }
+  .diff-line {
+    display: grid; grid-template-columns: 2rem 3.2rem 3.2rem minmax(max-content, 1fr); align-items: stretch;
+    min-width: max-content; min-height: 1.8rem; font: 400 .75rem/1.55 var(--font-mono);
+  }
+  @media (hover: hover) and (pointer: fine) { .diff-line:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); } }
+  .diff-line code { display: flex; min-width: 0; padding: .3rem .75rem .3rem .6rem; color: inherit; white-space: pre; }
+  .diff-line code b { display: inline-block; width: 1rem; flex: none; font-weight: 500; opacity: .72; }
+  .diff-gutter {
+    display: flex; align-items: flex-start; justify-content: flex-end; min-width: 0; padding: .3rem .45rem;
+    border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent); color: var(--muted-foreground); user-select: none;
+  }
+  .diff-addition { background: color-mix(in srgb, var(--success) 10%, transparent); color: color-mix(in srgb, var(--success) 38%, var(--foreground)); }
+  .diff-deletion { background: color-mix(in srgb, var(--destructive) 9%, transparent); color: color-mix(in srgb, var(--destructive) 38%, var(--foreground)); }
+  .diff-meta { color: var(--muted-foreground); }
+  .diff-annotate, .diff-annotate-space {
+    position: sticky; left: 0; z-index: 1; display: grid; place-items: center; width: 2rem; min-width: 2rem; min-height: 1.8rem;
+    border: 0; border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 0;
+  }
+  .diff-annotate { padding: 0; background: color-mix(in srgb, var(--card) 94%, transparent); color: var(--muted-foreground); box-shadow: none; opacity: .35; }
+  .diff-annotate svg { width: .78rem; height: .78rem; }
+  @media (hover: hover) and (pointer: fine) { .diff-annotate:hover { transform: none; background: color-mix(in srgb, var(--running) 15%, var(--card)); color: var(--running); opacity: 1; } }
+  .diff-annotate-space { background: color-mix(in srgb, var(--card) 94%, transparent); }
+  .diff-review[data-mode="view"] .diff-line { grid-template-columns: 0 3.2rem 3.2rem minmax(max-content, 1fr); }
+  .diff-review[data-mode="view"] .diff-annotate,
+  .diff-review[data-mode="view"] .diff-annotate-space { visibility: hidden; width: 0; min-width: 0; overflow: hidden; border: 0; pointer-events: none; }
+  .diff-review[data-mode="annotate"] .diff-annotate { opacity: .72; }
+  .diff-cut { margin: 0; padding: .65rem .85rem; border-top: 1px solid var(--glass-border); color: var(--warning); font-size: .75rem; }
+  .diff-comments { display: grid; gap: .5rem; margin: .7rem 0; }
+  .diff-comment {
+    position: relative; padding: .7rem .8rem .7rem 1rem; border: 1px solid var(--glass-border);
+    border-radius: calc(var(--radius) - 2px); background: color-mix(in srgb, var(--glass) 76%, transparent);
+  }
+  .diff-comment-pin { position: absolute; left: -.2rem; top: .75rem; width: .38rem; height: 1.2rem; border-radius: 999px; background: var(--running); }
+  .diff-comment p { margin: 0 0 .25rem; overflow-wrap: anywhere; }
+  .diff-comment .meta { font-size: .68rem; }
+  .diff-comment-form { display: grid; gap: .65rem; margin: .75rem 0; padding: .85rem; }
+  .diff-comment-target { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .6rem; }
+  .diff-comment-form label { margin: 0; color: var(--muted-foreground); font-size: .68rem; font-weight: 550; }
+  .diff-comment-form input, .diff-comment-form textarea { margin-top: .28rem; }
+  .diff-comment-form button { justify-self: start; }
+  .diff-comment-limit { margin-top: -.35rem; font-size: .66rem; font-variant-numeric: tabular-nums; }
+  .revision-from-comments {
+    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
+    margin: .75rem 0; padding: .85rem; border-color: color-mix(in srgb, var(--running) 24%, var(--glass-border));
+    background: var(--card);
+  }
+  .revision-from-comments > div { display: grid; gap: .15rem; }
+  .revision-from-comments > div > span { display: block; }
+  .revision-from-comments button { flex: none; }
+  .result-section { margin-top: .875rem; }
+  .result-section > strong {
+    display: block; font: 600 .6875rem/1.3 var(--font-mono); color: var(--muted-foreground);
+    letter-spacing: .06em; text-transform: uppercase;
+  }
+  .result-section ul { margin: .375rem 0 0; padding-left: 1.25rem; }
+  .result-section li { margin: .25rem 0; }
+  .criterion-matrix .requirement-list { list-style: none; margin: .4rem 0 0; padding: 0; }
+  .criterion-matrix .requirement { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--border); min-width: 0; overflow-wrap: anywhere; }
+  .criterion-matrix .requirement:last-child { border-bottom: 0; }
+  .requirement-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; font-size: .75rem; color: var(--muted-foreground); }
+  .requirement-heading .badge { margin: 0; white-space: normal; }
+  .requirement-statement { margin: .5rem 0; line-height: 1.55; white-space: pre-wrap; }
+  .requirement-review { margin: .4rem 0; font-size: .78rem; color: var(--muted-foreground); }
+  .requirement-warning { margin: .65rem 0; padding: .6rem .75rem; border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border)); border-radius: 8px; background: var(--warning-soft); font-size: .8125rem; }
+  .requirement-warning strong { font-size: .78rem; }
+  .requirement-warning p { margin: .3rem 0 0; }
+  .requirement-issues { font-size: .8125rem; }
+  .criterion-matrix .requirement-evidence { margin: .35rem 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
+  .requirement-evidence > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; width: fit-content; padding: .35rem .1rem; cursor: pointer; list-style: none; font-size: .8125rem; }
+  .requirement-evidence > summary::-webkit-details-marker { display: none; }
+  .requirement-evidence > summary::after { content: "+"; color: var(--muted-foreground); }
+  .requirement-evidence[open] > summary::after { content: "−"; }
+  .requirement-evidence-body { padding: .25rem .75rem .65rem; border-left: 1px solid var(--border); }
+  .requirement-evidence-body p { margin: .35rem 0; }
+  .requirement-evidence-group { margin: .7rem 0; }
+  .requirement-evidence-group > strong { font-size: .75rem; color: var(--muted-foreground); }
+  .requirement-evidence-group code { white-space: normal; overflow-wrap: anywhere; font-size: .75rem; }
+  .requirement-evidence-group a { display: inline-block; padding: .4rem 0; }
+  .question { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; margin: 1rem 0; white-space: pre-wrap; }
+  .answered {
+    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-soft);
+    border-radius: var(--radius); padding: .875rem 1rem; margin: 1rem 0;
+  }
+  details {
+    margin: .75rem 0; border: 1px solid var(--border); border-radius: var(--radius);
+    padding: .25rem .875rem; background: var(--card);
+  }
+  details[open] { padding-bottom: .875rem; }
+  details.arm-danger { border-color: color-mix(in srgb, var(--destructive) 30%, transparent); }
+  summary { padding: .5rem 0; cursor: pointer; font-weight: 500; font-size: 0.8125rem; color: var(--muted-foreground); min-height: 2.25rem; }
+  @media (hover: hover) and (pointer: fine) { summary:hover { color: var(--foreground); } }
+  details form.option { border: none; padding: .25rem 0 0; margin: 0; }
+  .evidence { margin-top: 1.5rem; font-size: 0.8125rem; }
+  .evidence a { display: block; padding: .55rem 0; border-bottom: 1px solid var(--border); text-decoration: none; }
+  @media (hover: hover) and (pointer: fine) { .evidence a:hover { color: var(--muted-foreground); } }
+  .evidence strong { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); font-family: var(--font-mono); }
+
+  .filters { font-size: 0.8125rem; color: var(--muted-foreground); }
+  .filters a, .filters strong {
+    display: inline-block; padding: .25rem .625rem; border-radius: 9999px; text-decoration: none;
+    color: var(--muted-foreground); font-weight: 500;
+  }
+  .filters strong { background: var(--muted); color: var(--foreground); }
+  @media (hover: hover) and (pointer: fine) { .filters a:hover { color: var(--foreground); } }
+
+  .seal {
+    display: inline-block; font-family: var(--font-mono); font-size: .75rem;
+    background: var(--muted); border: 1px solid var(--border);
+    color: var(--foreground); border-radius: calc(var(--radius) - 4px); padding: .25rem .625rem;
+    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
+  }
+
+  /* The workspace shell: sidebar + content, an optional list pane between. */
+  /* The rail collapse is instant: a layout dimension is never animated (UI polish 2026-09-13). */
+  .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
+  .side {
+    border-right: 1px solid var(--glass-border);
+    background: var(--glass-strong);
+    padding: 1rem .875rem 1.125rem; display: flex; flex-direction: column; gap: .175rem;
+    position: sticky; top: 0; height: 100vh; overflow-y: auto;
+    box-shadow: 1px 0 0 var(--glass-highlight) inset;
+  }
+  .side-head { display: flex; align-items: center; gap: .25rem; min-height: 2.5rem; margin-bottom: .45rem; }
+  .side .brand { flex: 1; min-width: 0; padding: .25rem .625rem; font-size: 1rem; height: auto; letter-spacing: -.025em; }
+  .brand-short { display: none; font-family: var(--font-mono); letter-spacing: -.06em; }
+  .side-toggle {
+    display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; min-height: 2rem; padding: 0;
+    border-color: transparent; background: transparent; color: var(--muted-foreground); box-shadow: none;
+  }
+  @media (hover: hover) and (pointer: fine) { .side-toggle:hover { background: var(--glass); color: var(--foreground); transform: none; } }
+  .side-toggle svg { width: 1rem; height: 1rem; }
+  /* The scope bar: one hairline row, the single scope truth on every
+   * screen; its name is the switcher. Magenta never appears here except
+   * the needs-you count. */
+  .scope-bar {
+    display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap;
+    position: sticky; top: 0; z-index: 20;
+    padding: .625rem 2rem; border-bottom: 1px solid var(--glass-border);
+    background: var(--glass-strong); font-size: .8125rem;
+  }
+  .scope-bar .eyebrow { font-size: .6875rem; font-weight: 500; color: var(--muted-foreground); }
+  .scope-bar .name { font-weight: 600; }
+  /* The switcher: a folded menu of enrolled projects under the scope's name. */
+  .switcher { position: relative; }
+  .switcher > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
+  .switcher > summary::-webkit-details-marker { display: none; }
+  .switcher .chevron { width: .875rem; height: .875rem; color: var(--muted-foreground); transition: transform .15s; }
+  .switcher[open] > summary .chevron { transform: rotate(180deg); }
+  .switcher-menu {
+    position: absolute; top: calc(100% + .375rem); left: 0; z-index: 40; min-width: 15rem; max-width: 22rem;
+    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+    box-shadow: var(--shadow-overlay); padding: .375rem; display: flex; flex-direction: column; gap: .125rem;
+  }
+  .switcher-menu form { margin: 0; }
+  .switcher-menu button {
+    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; margin: 0;
+    background: transparent; border: 0; min-height: 2.5rem; padding: 0 .75rem;
+    border-radius: calc(var(--radius) - 4px); font: inherit; font-size: .875rem; color: var(--foreground);
+  }
+  .switcher-menu button.current { font-weight: 600; }
+  .switcher-menu button.current::after {
+    content: ""; margin-left: auto; width: .375rem; height: .625rem; flex: none;
+    border-right: 1.75px solid var(--foreground); border-bottom: 1.75px solid var(--foreground);
+    transform: rotate(45deg) translateY(-.125rem);
+  }
+  @media (hover: hover) and (pointer: fine) { .switcher-menu button:hover { background: var(--muted); } }
+  .switcher-menu .manage {
+    display: block; margin-top: .25rem; padding: .625rem .75rem; border-top: 1px solid var(--border);
+    font-size: .75rem; color: var(--muted-foreground); text-decoration: none;
+  }
+  .scope-status {
+    display: flex; gap: .5rem; flex-wrap: wrap;
+    color: var(--muted-foreground); font-size: .6875rem; font-variant-numeric: tabular-nums;
+    font-family: var(--font-mono);
+  }
+  .scope-status .hot { color: var(--brand); font-weight: 500; }
+  .scope-status a { color: inherit; text-decoration: none; }
+  @media (hover: hover) and (pointer: fine) { .scope-status a:hover { text-decoration: underline; } }
+  /* A project card's name and counts are forms or links dressed as text and chips. */
+  .project-card button.project-name, .project-card a.project-name {
+    all: unset; cursor: pointer; font-weight: 600; color: var(--foreground);
+  }
+  @media (hover: hover) and (pointer: fine) { .project-card a.project-name:hover, .project-card button.project-name:hover { text-decoration: underline; } }
+  .project-card button.badge { min-height: auto; box-shadow: none; cursor: pointer; }
+  @media (hover: hover) and (pointer: fine) { .project-card button.badge:hover, .project-card a.badge:hover { border-color: var(--input); } }
+  /* Adding a project is the page's primary job, not badge-sized metadata.
+   * Two roomy action tiles make both roads obvious on a desk and give each
+   * one a generous thumb target on a phone. The manual path stays tertiary. */
+  .project-add-card { margin-top: 1.25rem; padding: 1.25rem; }
+  .project-add-card h2.project-add-title {
+    margin: 0; color: var(--foreground); font-size: 1.0625rem; line-height: 1.35;
+    letter-spacing: -.015em;
+  }
+  .project-add-intro { margin: .25rem 0 0; max-width: 36rem; }
+  .project-add-actions {
+    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: .625rem; margin-top: 1rem;
+  }
+  .project-add-action {
+    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto;
+    align-items: center; gap: .75rem; min-height: 5rem; padding: .75rem .875rem;
+    border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 1px);
+    background: var(--glass-strong);
+    color: var(--foreground); text-decoration: none;
+    
+    transition: transform .15s ease, background .15s, border-color .15s, box-shadow .15s;
+  }
+  @media (hover: hover) and (pointer: fine) { .project-add-action:hover {
+    border-color: color-mix(in srgb, var(--border) 50%, var(--muted-foreground));
+    background: var(--card); text-decoration: none;
+    box-shadow: var(--shadow);
+  } }
+  .project-add-action:active { transform: translateY(0); }
+  .project-add-icon {
+    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
+    border: 1px solid var(--border); border-radius: .75rem;
+    background: var(--muted); color: var(--foreground);
+  }
+  .project-add-icon svg { width: 1.125rem; height: 1.125rem; }
+  .project-add-copy { min-width: 0; }
+  .project-add-copy strong { display: block; font-size: .9375rem; line-height: 1.35; }
+  .project-add-copy small {
+    display: block; margin-top: .175rem; color: var(--muted-foreground);
+    font-size: .75rem; font-weight: 400; line-height: 1.4;
+  }
+  .project-add-arrow { color: var(--muted-foreground); font-size: 1rem; }
+  .project-add-more { margin-top: .875rem; border-top: 1px solid var(--border); }
+  .project-add-more > summary {
+    display: flex; align-items: center; min-height: 2.75rem; width: fit-content;
+    color: var(--muted-foreground); cursor: pointer; font-size: .8125rem; font-weight: 500;
+  }
+  @media (hover: hover) and (pointer: fine) { .project-add-more > summary:hover { color: var(--foreground); } }
+  .project-add-more > .card { margin: 0 0 .25rem; }
+  .side nav { display: flex; flex-direction: column; gap: .125rem; }
+  /* Inline decision options: neutral buttons — the card's magenta outline is
+   * the attention signal; recommendation is a neutral badge, never magenta. */
+  .decide-options { margin-top: .5rem; display: flex; flex-direction: column; gap: .375rem; }
+  .decide-option { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
+  .decide-option button { margin: 0; }
+  .decide-option .meta { flex: 1 1 12rem; }
+  /* The rail's two accordion groups (sidebar rework): collapsed by
+   * default, the active page's group open, opening one closes the other
+   * (client toggle in chromeScript). Native <details>/<summary> carries
+   * the expanded state and keyboard operation for free — the same pattern
+   * the switcher already uses. */
+  .side .nav-groups { display: flex; flex-direction: column; gap: .125rem; margin-top: .375rem; }
+  .nav-group > summary {
+    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
+    list-style: none; cursor: pointer; padding: .4375rem .625rem; min-height: 2.125rem;
+    border-radius: calc(var(--radius) - 3px); text-decoration: none;
+    color: var(--muted-foreground); font-size: .6875rem; font-weight: 500;
+    font-family: var(--font-sans);
+  }
+  .nav-group > summary::-webkit-details-marker { display: none; }
+  @media (hover: hover) and (pointer: fine) { .nav-group > summary:hover { background: var(--glass); color: var(--foreground); } }
+  .nav-group > summary .chevron { width: .875rem; height: .875rem; flex: none; transition: transform .15s; }
+  .nav-group[open] > summary .chevron { transform: rotate(180deg); }
+  .nav-group .nav-group-items { display: flex; flex-direction: column; gap: .125rem; margin: .125rem 0 .25rem; }
+  .side .nav-settings { margin-top: .375rem; }
+  .side nav a {
+    position: relative;
+    display: flex; align-items: center; gap: .625rem; padding: .4375rem .625rem; min-height: 2.125rem;
+    border-radius: calc(var(--radius) - 3px); text-decoration: none;
+    color: var(--muted-foreground); font-size: .8125rem; font-weight: 500;
+    transition: color .15s, background .15s, transform .15s;
+  }
+  .side nav a .glyph { display: inline-flex; width: 1rem; height: 1rem; color: var(--muted-foreground); flex: none; }
+  .side nav a .glyph svg { width: 1rem; height: 1rem; }
+  @media (hover: hover) and (pointer: fine) { .side nav a:hover { background: var(--glass); color: var(--foreground); transform: translateX(2px); } }
+  .side nav a:active { background: var(--glass); color: var(--foreground); }
+  .app.sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
+  .app.sidebar-collapsed .side { padding-inline: .625rem; }
+  .app.sidebar-collapsed .side-head { flex-direction: column; gap: .2rem; margin-bottom: .55rem; }
+  .app.sidebar-collapsed .side .brand { flex: none; padding: .2rem 0; font-size: .75rem; }
+  .app.sidebar-collapsed .brand-long { display: none; }
+  .app.sidebar-collapsed .brand-short { display: block; }
+  .app.sidebar-collapsed .side-toggle svg { transform: rotate(180deg); }
+  .app.sidebar-collapsed .side nav a {
+    justify-content: center; gap: 0; min-height: 2.5rem; padding: .5rem; font-size: 0;
+  }
+  .app.sidebar-collapsed .side nav a .glyph { width: 1.125rem; height: 1.125rem; }
+  .app.sidebar-collapsed .side nav a .glyph svg { width: 1.125rem; height: 1.125rem; }
+  .app.sidebar-collapsed .side nav a .count {
+    position: absolute; top: .15rem; right: .05rem; min-width: 1rem; padding: 0 .25rem; font-size: .55rem;
+  }
+  .app.sidebar-collapsed .side .new-task { min-height: 2.5rem; padding: .4rem 0; font-size: 0; }
+  .app.sidebar-collapsed .side .new-task::after { content: "+"; font-size: 1rem; }
+  .app.sidebar-collapsed .side .nav-groups { display: none; }
+  .side nav a.active {
+    background: var(--card);
+    color: var(--foreground); box-shadow: 0 1px 0 var(--glass-highlight) inset;
+  }
+  .side nav a.active .glyph { color: var(--foreground); }
+  .side nav a .count { margin-left: auto; }
+  .side .grow { flex: 1; }
+  .side .new-task {
+    display: block; text-align: center; text-decoration: none; font-weight: 600; font-size: .8125rem;
+    background: var(--primary); color: var(--primary-foreground);
+    border: 1px solid var(--primary);
+    border-radius: calc(var(--radius) - 3px); padding: .525rem; margin: .75rem 0 .125rem;
+    box-shadow: 0 10px 28px -18px rgb(255 255 255 / .5);
+  }
+  @media (hover: hover) and (pointer: fine) { .side .new-task:hover { background: color-mix(in srgb, var(--primary) 85%, var(--background)); } }
+  /* The same action link outside the sidebar reads as a real button. */
+  .content .new-task {
+    display: inline-block; text-decoration: none; font-weight: 500; font-size: .8125rem;
+    background: var(--secondary); color: var(--foreground); border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 2px); padding: .5rem .875rem;
+  }
+  @media (hover: hover) and (pointer: fine) { .content .new-task:hover { background: color-mix(in srgb, var(--secondary) 70%, var(--border)); } }
+  .content { min-width: 0; }
+  .content > main { max-width: 54rem; margin: 0; padding: 2rem 2.5rem 4rem; }
+
+  /* Banners: honest labels, quiet strips. */
+  .banner {
+    border-bottom: 1px solid var(--glass-border); background: var(--glass);
+    padding: .375rem .9rem; font-size: .8125rem; color: var(--muted-foreground);
+  }
+  .banner .badge { margin-right: .5rem; }
+  /* Chat in `toolroll demo`: the scripted lead's conversation. */
+  .demo-chat { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; margin: 0 auto; padding-bottom: 1rem; }
+  .demo-thread { display: flex; flex-direction: column; gap: 1.25rem; }
+  .demo-turn { display: flex; flex-direction: column; gap: .75rem; scroll-margin-top: 1rem; }
+  .demo-said p { margin: 0; }
+  .demo-you { align-self: flex-end; max-width: min(34rem, 85%); background: var(--so-ink); color: var(--so-paper); border-radius: .875rem .875rem .25rem .875rem; padding: .55rem .85rem; overflow-wrap: anywhere; }
+  .demo-lead { max-width: 40rem; }
+  .demo-who { font-size: .75rem; font-weight: 600; color: var(--so-muted); margin-bottom: .15rem !important; }
+  .demo-chat .card { margin: 0; padding: 1rem 1.125rem; }
+  .demo-chat .card h2 { font-size: .9375rem; margin: .1rem 0 .4rem; }
+  .demo-chat .card h3 { font-size: .75rem; font-weight: 600; color: var(--so-muted); margin: .75rem 0 .25rem; }
+  .demo-chat .card ul { margin: 0; padding-left: 1.1rem; }
+  .demo-chat .card li { margin: .15rem 0; }
+  .demo-chat .card > p { margin: .25rem 0; }
+  .demo-kicker { font-size: .75rem; color: var(--so-muted); margin: 0 !important; }
+  .demo-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: .9rem; }
+  .demo-actions form { margin: 0; }
+  .demo-actions button, .demo-more > summary { min-height: 2.5rem; }
+  .demo-chat button.demo-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  .demo-chat details.demo-more { flex: 1 1 12rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
+  .demo-chat details.demo-more[open] { padding-bottom: 0; }
+  .demo-chat .demo-more > summary { display: inline-flex; align-items: center; color: var(--so-ink); padding: .35rem .85rem; border: 1px solid var(--so-input-line); border-radius: calc(var(--radius) - 3px); background: var(--so-paper); font-weight: 500; font-size: .8125rem; cursor: pointer; list-style: none; }
+  .demo-more > summary::-webkit-details-marker { display: none; }
+  .demo-more[open] > summary { margin-bottom: .5rem; }
+  .demo-more form, .demo-composer { display: flex; flex-direction: column; gap: .4rem; }
+  .demo-more label { font-size: .8125rem; font-weight: 500; }
+  .demo-more textarea, .demo-composer textarea { width: 100%; font: inherit; font-size: 1rem; resize: vertical; }
+  .demo-more form button { align-self: flex-start; }
+  .demo-steps { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0 !important; margin: .4rem 0 !important; }
+  .demo-steps li { display: inline-flex; align-items: center; gap: .4rem; color: var(--so-muted); font-size: .8125rem; margin: 0 !important; }
+  .demo-steps li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid currentColor; }
+  .demo-steps li.done { color: var(--so-ink); }
+  .demo-steps li.done::before { background: var(--so-success); border-color: var(--so-success); }
+  .demo-steps li.now { color: var(--so-ink); font-weight: 600; }
+  .demo-steps li.now::before { border-color: var(--so-info); background: var(--so-info); animation: demo-pulse 1.2s ease-in-out infinite; }
+  @keyframes demo-pulse { 50% { opacity: .35; } }
+  @media (prefers-reduced-motion: reduce) { .demo-steps li.now::before { animation: none; } }
+  .demo-state { display: flex; align-items: center; gap: .5rem; margin: 0 !important; }
+  .demo-chat .demo-handoff { border-color: var(--so-input-line); }
+  .demo-command { margin: .4rem 0 .5rem; padding: .6rem .8rem; border-radius: calc(var(--radius) - 3px); background: var(--so-raised); font: 500 .8125rem/1.5 var(--font-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
+  .demo-chat .badge.demo-ready { background: var(--so-info-soft); color: var(--so-info); }
+  .demo-chat .badge.demo-complete { background: var(--so-success-soft); color: var(--so-success); }
+  .demo-pass { color: var(--so-success); font-weight: 500; }
+  .demo-fail { color: var(--so-danger); font-weight: 500; }
+  .demo-chat details.demo-evidence { margin: .5rem 0 0; padding: 0; border: 0; border-top: 1px solid var(--so-line); border-radius: 0; background: none; box-shadow: none; }
+  .demo-evidence > summary { min-height: 2.5rem; display: list-item; padding-block: .55rem; cursor: pointer; font-weight: 500; font-size: .8125rem; }
+  .demo-evidence pre { margin: 0 0 .5rem; max-height: 22rem; overflow: auto; padding: .6rem .75rem; border-radius: .5rem; background: var(--so-raised); font: 400 .75rem/1.55 var(--font-mono); white-space: pre; overflow-wrap: normal; }
+  .demo-diff span { display: block; min-width: max-content; }
+  .demo-diff-add { background: var(--so-success-soft); color: var(--so-success); }
+  .demo-diff-del { background: var(--so-danger-soft); color: var(--so-danger); }
+  .demo-diff-hunk, .demo-diff-meta { color: var(--so-muted); }
+  .demo-diff-file { font-weight: 600; }
+  .demo-evidence figure { margin: 0 0 .5rem; }
+  .demo-evidence img { display: block; width: 100%; height: auto; border: 1px solid var(--so-line); border-radius: .5rem; }
+  .demo-evidence figcaption { margin-top: .35rem; }
+  .demo-hint { padding: 1.25rem 0 .25rem; }
+  .demo-hint-title { font-size: .9375rem; font-weight: 600; margin: 0 0 .75rem; }
+  .demo-suggestions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
+  .demo-suggestions button { min-height: 2.5rem; border-radius: 999px; padding: .35rem .95rem; }
+  .demo-composer { position: sticky; bottom: 0; padding: .75rem 0 .25rem; background: var(--so-paper); flex-direction: row; align-items: flex-end; }
+  .demo-chat .demo-composer textarea { flex: 1 1 auto; width: auto; min-width: 0; min-height: 2.75rem; }
+  .demo-chat .demo-composer button { flex: none; width: auto; min-height: 2.75rem; padding-inline: 1.1rem; }
+  .banner a { color: var(--muted-foreground); }
+  .sign-in-banner form { display: inline; margin: 0 0 0 .5rem; padding: 0; border: 0; background: transparent; }
+
+  .split { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); min-height: 100vh; }
+  .list-pane {
+    border-right: 1px solid var(--border); overflow-y: auto; height: 100vh;
+    position: sticky; top: 0; padding: 1rem .75rem;
+  }
+  .list-pane h2 { margin-top: .25rem; }
+  .list-pane a.item {
+    display: block; padding: .5rem .625rem; border-radius: calc(var(--radius) - 4px);
+    text-decoration: none; font-size: .8125rem; margin-bottom: .125rem;
+  }
+  @media (hover: hover) and (pointer: fine) { .list-pane a.item:hover { background: var(--card); } }
+  .list-pane a.item.current { background: var(--muted); }
+  .list-pane a.item .t { display: block; font-weight: 500; color: var(--foreground);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .list-pane a.item .m { display: flex; gap: .375rem; align-items: center; color: var(--muted-foreground);
+    font-size: .75rem; margin-top: .125rem; }
+  .split > .detail { min-width: 0; }
+  .split > .detail > main { max-width: 52rem; padding: 1.5rem 2rem 4rem; }
+  .split:has(#wb-rail) { grid-template-columns: minmax(320px, 360px) minmax(0, 1fr); }
+  .list-pane:has(#wb-rail) { padding: 0; background: var(--background); }
+  #wb-rail { padding: 1rem .75rem 1.5rem; }
+  #wb-rail-stamp { padding: 0 .75rem; }
+  .workbench-mobile-rail, .workbench-mobile-back { display: none; }
+  /* The task page (slice 1c): main column beside a rail; one column narrow. */
+  .task-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); gap: 0 2rem; align-items: start; }
+  /* The task page (task page pass): title, the acts in one row,
+     then folding sections; the rail is the property list. */
+  .task-identity { overflow-wrap: anywhere; }
+  .task-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+  .task-title-row .task-main-title { min-width: 0; margin-bottom: .85rem; }
+  .task-view-switch {
+    display: inline-grid; grid-template-columns: repeat(2, auto); flex: none; padding: .2rem;
+    border: 1px solid var(--glass-border); border-radius: .72rem; background: color-mix(in srgb, var(--glass) 82%, transparent);
+    
+  }
+  .task-view-switch a {
+    min-width: 4.6rem; padding: .4rem .72rem; border-radius: .52rem; color: var(--muted-foreground);
+    font-size: .72rem; font-weight: 550; text-align: center; text-decoration: none;
+  }
+  @media (hover: hover) and (pointer: fine) { .task-view-switch a:hover { color: var(--foreground); background: color-mix(in srgb, var(--muted) 70%, transparent); } }
+  .task-view-switch a.active { color: var(--foreground); background: var(--glass-strong); box-shadow: 0 1px 5px rgb(0 0 0 / .1); }
+  .acts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0 .25rem; }
+  .acts-bar form.inline { margin: 0; display: inline-flex; align-items: center; gap: .375rem; }
+  .acts-bar form.inline button { width: auto; }
+  .acts-bar .primary button { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  @media (hover: hover) and (pointer: fine) { .acts-bar .primary button:hover { background: color-mix(in srgb, var(--primary) 85%, var(--background)); } }
+  .acts-bar .act-hold input[type=text] { width: 10rem; min-height: 2.25rem; margin: 0; font-size: .8125rem; }
+  .acts-why { margin: 0 0 .5rem; }
+  .dispatch-status { padding: .8rem .9rem; border-radius: var(--radius); overflow: hidden; }
+  .dispatch-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .35rem; min-width: 0; }
+  .dispatch-copy .meta { min-width: 0; }
+  .dispatch-action-link { margin-top: .65rem; }
+  .dispatch-status[data-dispatch-status="proof-refuted"],
+  .dispatch-status[data-dispatch-status="needs-verification"] {
+    color: var(--foreground); border-color: var(--glass-border); background: var(--glass);
+  }
+  .dispatch-status[data-dispatch-status="proof-refuted"] .dispatch-copy > strong::before,
+  .dispatch-status[data-dispatch-status="needs-verification"] .dispatch-copy > strong::before {
+    content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; vertical-align: .08rem;
+    background: var(--so-warning, #ab6400);
+  }
+  .problem.dispatch-status[data-dispatch-status="proof-refuted"] .dispatch-copy > strong::before { background: var(--destructive); }
+  .dispatch-status[data-dispatch-status="needs-verification"] .dispatch-copy > strong::before { background: var(--muted-foreground); }
+  /* A review in flight (review fixes): the box reads neutral — neither the
+     green of a settled verdict nor the red of a problem — with the dot in
+     the review's own tone. */
+  .dispatch-status[data-work-status="reviewing"], .dispatch-status[data-work-status="review-pending"],
+  .dispatch-status[data-work-status="review-failed"], .dispatch-status[data-work-status="review-exhausted"] {
+    color: var(--foreground); border-color: var(--glass-border); background: var(--glass);
+  }
+  .dispatch-status[data-work-status="reviewing"] .dispatch-copy > strong::before, .dispatch-status[data-work-status="review-pending"] .dispatch-copy > strong::before,
+  .dispatch-status[data-work-status="review-failed"] .dispatch-copy > strong::before, .dispatch-status[data-work-status="review-exhausted"] .dispatch-copy > strong::before {
+    content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; vertical-align: .08rem; background: var(--warning);
+  }
+  .dispatch-status[data-work-status="reviewing"] .dispatch-copy > strong::before { background: var(--running); }
+  .review-retry { margin-bottom: .65rem; }
+  .task-control { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem .9rem; margin: .65rem 0; padding: .8rem .9rem; }
+  .task-control-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 16rem; }
+  .task-control-copy strong { display: flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
+  .task-control-copy .meta { overflow-wrap: anywhere; }
+  .task-control-form { margin: 0; flex: none; }
+  .task-control-button { width: auto; min-width: 7.5rem; white-space: nowrap; }
+  .task-control-button.primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  .task-control-button[disabled] { opacity: .65; cursor: not-allowed; }
+  .task-control[data-task-control="stopping"] { border-color: color-mix(in srgb, var(--destructive) 45%, var(--glass-border)); }
+  .task-control[data-task-control="stopping"] .live-dot { background: var(--destructive); }
+  .task-control[data-task-control="paused"] .eyebrow { color: var(--destructive); }
+  .resume-ceremony .row { margin: .3rem 0; }
+  @media (max-width: 480px) { .task-control { align-items: stretch; } .task-control-form, .task-control-button { width: 100%; } .task-control-form .task-control-button { width: 100%; } }
+  .review-attempts { margin: .55rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2rem; font-size: .8125rem; }
+  .review-attempts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; min-width: 0; }
+  .review-attempts .review-attempt-ordinal { font-weight: 600; }
+  .review-attempts .meta { min-width: 0; overflow-wrap: anywhere; }
+  .review-retry-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: .65rem; }
+  .review-retry-actions form.inline { margin: 0; }
+  .review-retry-button { width: auto; max-width: 100%; white-space: normal; }
+  .review-retry-form .review-retry-button { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  .review-retry-button[disabled] { opacity: .65; cursor: not-allowed; }
+  .proof-review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: .65rem 0; }
+  .proof-review-actions > .button-link { flex: none; }
+  details.proof-exception { margin: 0; }
+  details.proof-exception > summary { cursor: pointer; color: var(--muted-foreground); font-size: .78rem; font-weight: 600; }
+  details.proof-exception[open] { flex: 1 1 100%; padding: .75rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: var(--glass); }
+  details.proof-exception[open] > summary { margin-bottom: .6rem; color: var(--foreground); }
+  .proof-exception-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
+  .proof-exception-form input { margin: 0; min-width: 12rem; }
+  .proof-exception-form button[type=submit] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  .dispatch-proof-details { margin: .65rem 0 .85rem; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass); }
+  .dispatch-proof-details > summary { padding: .75rem .9rem; cursor: pointer; color: var(--muted-foreground); font-size: .78rem; font-weight: 600; }
+  .dispatch-proof-body { padding: 0 .9rem .85rem; border-top: 1px solid var(--glass-border); }
+  details.dispatch-recovery { margin-top: .65rem; border: 0; padding: 0; background: transparent; box-shadow: none; }
+  details.dispatch-recovery > summary {
+    display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .875rem; list-style: none;
+    border: 1px solid var(--primary); border-radius: calc(var(--radius) - 2px); cursor: pointer;
+    background: var(--primary); color: var(--primary-foreground); font-size: .8125rem; font-weight: 600;
+  }
+  details.dispatch-recovery > summary::-webkit-details-marker { display: none; }
+  .dispatch-recovery-body { margin-top: .65rem; padding: .7rem .75rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: var(--glass); color: var(--foreground); }
+  .dispatch-recovery-body p { margin: 0; }
+  .dispatch-recovery-body p + p { margin-top: .5rem; }
+  .dispatch-recovery-command { display: block; margin-top: .45rem; padding: .55rem .65rem; overflow-wrap: anywhere; border-radius: .5rem; background: var(--muted); }
+  .dispatch-status[data-dispatch-status="no-worker-registered"],
+  .dispatch-status[data-dispatch-status="no-worker-online"] {
+    color: var(--foreground); border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
+    background: color-mix(in srgb, var(--warning-soft) 48%, var(--glass));
+  }
+  .dispatch-status[data-dispatch-status="no-worker-registered"] .dispatch-copy > strong,
+  .dispatch-status[data-dispatch-status="no-worker-online"] .dispatch-copy > strong { color: color-mix(in srgb, var(--warning) 72%, var(--foreground)); }
+  .builder-notice { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); background: color-mix(in srgb, var(--warning-soft) 48%, var(--glass)); }
+  .builder-notice strong { color: color-mix(in srgb, var(--warning) 72%, var(--foreground)); }
+  .dispatch-status[data-dispatch-status="terminal-dependency"] {
+    color: var(--foreground); border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
+    background: color-mix(in srgb, var(--warning-soft) 72%, var(--glass));
+  }
+  .dispatch-status[data-dispatch-status="terminal-dependency"] .dispatch-copy > strong { color: var(--warning); }
+  .dispatch-status[data-dispatch-status="waiting-dependency"] {
+    color: var(--foreground); border-color: var(--glass-border); background: var(--glass);
+  }
+  .dependency-repair-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .7rem; }
+  .dependency-repair-help { flex: 1 0 100%; margin: 0 0 .1rem; }
+  .dependency-repair-actions form { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; max-width: 100%; margin: 0; }
+  .dependency-repair-label { flex: 1 1 16rem; min-width: 0; margin: 0; color: var(--foreground); font-size: .75rem; }
+  .dependency-repair-label select { display: block; margin: .3rem 0 0; }
+  .dependency-repair-actions select { width: auto; max-width: 16rem; min-height: 2rem; margin: 0; font-size: .75rem; }
+  .dependency-repair-actions button { min-height: 2rem; padding: .3rem .65rem; font-size: .75rem; }
+  .approve-form { margin: .75rem 0; }
+  .approve-form .ceremony-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .5rem; }
+  .approve-form .ceremony-head a { font-size: .8125rem; color: var(--muted-foreground); white-space: nowrap; }
+  .approve-form .recap { margin: .125rem 0 .5rem; }
+  .approval-card { padding: 1.2rem 1.3rem; border-radius: calc(var(--radius) + 3px); }
+  .approval-card .ceremony-head { align-items: flex-start; padding-bottom: .85rem; border-bottom: 1px solid var(--glass-border); }
+  .approval-title { display: grid; gap: .15rem; }
+  .approval-kicker { color: var(--muted-foreground); font: 500 .66rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
+  .approval-title strong { font-size: 1.05rem; letter-spacing: -.02em; }
+  .approval-label { display: block; margin: .9rem 0 .2rem; color: var(--muted-foreground); font: 500 12px/1.4 var(--font-sans); }
+  .approval-label::first-letter, .planner-plan .eyebrow::first-letter { text-transform: uppercase; }
+  .planner-plan .eyebrow { font: 500 12px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; }
+  .approval-goal { margin: 0; font-size: 1rem; line-height: 1.55; white-space: pre-wrap; }
+  .approval-boundaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .75rem; }
+  .approval-boundary { padding: .7rem .8rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--muted) 45%, transparent); }
+  .approval-boundary .approval-label { margin: 0 0 .2rem; }
+  .approval-boundary p { margin: 0; color: var(--muted-foreground); font-size: .8rem; overflow-wrap: anywhere; }
+  .approval-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 .3rem; }
+  /* The filed contract (contract handoff, task 1): preserved, amended, or
+     drafted from nothing — the same panel on the task page, in the
+     ceremony, and on /next, so an amendment is never a surprise after the
+     yes. An amendment is the one state that asks for a second look. */
+  .contract-panel { margin-top: .8rem; padding: .7rem .85rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--muted) 45%, transparent); }
+  .contract-panel .approval-label { margin: 0 0 .25rem; }
+  .contract-panel p { margin: .2rem 0; }
+  .contract-amended { border-color: color-mix(in srgb, var(--warning, #c98a1b) 55%, var(--glass-border)); background: color-mix(in srgb, var(--warning, #c98a1b) 9%, transparent); }
+  .contract-reason { font-size: .9rem; }
+  .contract-changes { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
+  .contract-changes li { overflow-wrap: anywhere; }
+  .contract-change-kind { display: inline-block; margin-right: .3rem; padding: .05rem .4rem; border-radius: 999px; font: 600 .62rem/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; background: color-mix(in srgb, var(--muted) 70%, transparent); }
+  .contract-change-added { background: color-mix(in srgb, var(--success, #2f9e5f) 18%, transparent); }
+  .contract-change-removed { background: color-mix(in srgb, var(--danger, #c8453d) 18%, transparent); }
+  .contract-change-changed { background: color-mix(in srgb, var(--warning, #c98a1b) 22%, transparent); }
+  .contract-before, .contract-after { margin-top: .15rem; font-size: .85rem; }
+  .contract-before { color: var(--muted-foreground); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted-foreground) 55%, transparent); }
+  .contract-note { margin-top: .5rem; }
+  /* The agents (v47): one compact summary, rendered identically on the task
+     page, in the approval ceremony, and in the focused chat; reasons and
+     change controls stay closed until asked for. */
+  .agents-card { margin-top: .75rem; }
+  .agents-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
+  .agents-head h3 { margin: 0; font-size: .95rem; letter-spacing: -.02em; }
+  .agents-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
+  .agents-summary { margin: .55rem 0 0; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
+  .agents-availability-label { margin: .6rem 0 .15rem; }
+  .agents-availability { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8125rem; }
+  .agents-availability li { overflow-wrap: anywhere; }
+  .agents-availability-unavailable { color: var(--destructive); font-weight: 600; }
+  .agents-availability-ready { color: var(--success); }
+  .agents-availability-unknown { color: var(--muted-foreground); }
+  .agents-halted { margin: .6rem 0 0; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--destructive) 40%, var(--border)); border-radius: calc(var(--radius) - 3px); background: var(--destructive-soft); font-size: .8rem; }
+  .agents-problems { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--destructive); font-size: .78rem; }
+  .agents-why, .agents-change { margin-top: .65rem; }
+  .agents-why > summary, .agents-change > summary { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem .2rem; cursor: pointer; font-size: .8rem; font-weight: 600; }
+  .agents-demands { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--muted-foreground); font-size: .76rem; line-height: 1.45; }
+  .agents-roles { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .45rem .6rem; margin: .5rem 0 0; }
+  .agents-roles dt { color: var(--muted-foreground); font: 500 .66rem/1.8 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
+  .agents-roles dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+  .agents-roles .agents-reasons { margin: .2rem 0 0; padding-left: 1rem; color: var(--muted-foreground); font-size: .74rem; line-height: 1.45; }
+  .agents-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; margin: 0; }
+  .agents-form label, .agents-form-risk label { display: grid; gap: .2rem; margin: 0; min-width: 0; font-size: .74rem; }
+  .agents-form input, .agents-form select, .agents-form-risk select { width: 100%; min-width: 0; min-height: 2.75rem; }
+  .agents-form button, .agents-form-risk button, .agents-clear button { min-height: 2.75rem; }
+  .agents-form-risk { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin-top: .5rem; }
+  .agents-form-risk label.agents-risky { display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; font-size: .85rem; }
+  .agents-overrides { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .78rem; }
+  .agents-overrides li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .6rem; }
+  .agents-clear { margin: 0; }
+  .agents-clear button { padding-inline: .8rem; font-size: .72rem; }
+  .agents-ceremony { margin: .5rem 0 0; }
+  .agents-ceremony .agents-badges { margin-top: .35rem; }
+  .agents-runtime { margin-top: .5rem; }
+  .agents-runtime > summary { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem .2rem; cursor: pointer; font-size: .8rem; font-weight: 600; }
+  .agents-role-forms { display: grid; gap: .45rem; margin-top: .6rem; }
+  .agents-role-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem; align-items: center; }
+  .agents-role-name { color: var(--muted-foreground); font: 500 .66rem/1.8 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
+  .task-chat-agents { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; margin: .1rem 0 .2rem; padding: .55rem .75rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--muted) 45%, transparent); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
+  .task-chat-agents a { white-space: nowrap; }
+  .task-chat-agents-aside { margin-top: .85rem; }
+  .task-chat-agents-aside .agents-summary { font-size: .74rem; }
+  .task-chat-agents-aside .agents-badges { margin-top: .35rem; }
+  .task-chat-agents-aside .agents-roles { grid-template-columns: 1fr; }
+  .approval-chip { padding: .25rem .6rem; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--muted-foreground); background: var(--glass); font-size: .7rem; }
+  .approval-confirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: end; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--glass-border); }
+  .approval-confirm label { margin: 0; }
+  .approval-card .approval-confirm button { min-height: 44px; white-space: nowrap; }
+  /* The ceremony's orientation and exact-terms group (UI polish 2026-09-13). */
+  /* Neutral by law: magenta belongs to the count and the approve act alone. */
+  .approval-orient { margin: .85rem 0 .25rem; }
+  .approval-terms { scroll-margin-top: 5rem; }
+  .approval-confirm { scroll-margin-top: 5rem; }
+  .approval-paths { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
+  .approval-paths li { color: var(--muted-foreground); font-size: .8rem; overflow-wrap: anywhere; }
+  /* The approval sheet (approval critique, Oct 2): the plan open in plain
+     rows, who builds in one line, one Approve & start beside the password,
+     and every other signed term in one Details fold at the end. Sentence
+     case, Geist, 12px and up; prose capped at 75ch. */
+  .approval-sheet { display: grid; gap: 16px; margin: 0; padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
+  .approval-sheet.approve-form > :not(input) { margin: 0; }
+  .approval-sheet-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
+  .approval-revision, .approval-note { max-width: 75ch; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
+  .approval-note { color: var(--muted-foreground); }
+  .approval-rows { display: grid; gap: 14px; margin: 0; }
+  .approval-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; }
+  .approval-row dt { margin: 0; color: var(--muted-foreground); font-size: 13px; font-weight: 500; line-height: 1.6; }
+  .approval-row dd { min-width: 0; max-width: 75ch; margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
+  .approval-row dd p, .approval-sheet .approval-goal { margin: 0; font-size: 14px; line-height: 1.6; }
+  .approval-row dd :is(ol, ul) { display: grid; gap: 4px; margin: 0; padding-left: 1.25rem; }
+  .approval-row dd ol + p { margin-top: 6px; }
+  .approval-row dd .approval-paths { margin-top: 2px; padding-left: 0; }
+  .approval-row dd .approval-paths li { font-size: 13px; }
+  .approval-amendment { max-width: 75ch; padding: 12px 14px; border-radius: 8px; background: var(--muted); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
+  .approval-amendment p { margin: 0; }
+  .approval-amendment ul { display: grid; gap: 4px; margin: 6px 0; padding-left: 1.25rem; }
+  .agents-size { margin: 0; font-size: 13px; line-height: 1.5; }
+  .approval-who { max-width: 75ch; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
+  .approval-act { display: grid; grid-template-columns: minmax(0, 20rem) auto; justify-content: start; align-items: center; gap: 8px; }
+  .approval-password { margin: 0; }
+  .approval-act input[type=password] { margin: 0; font-family: var(--font-sans); }
+  .approval-act button { margin: 0; min-height: 2.125rem; white-space: nowrap; }
+  .approval-after { max-width: 75ch; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
+  .approval-allowing, .approval-you-check { max-width: 75ch; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
+  .approval-sheet .approval-allowing + .approval-you-check { margin-top: -10px; }
+  .approval-act > button { grid-column: 2; grid-row: 1; }
+  .approval-password-note { grid-column: 1; grid-row: 2; margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
+  .approval-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+  details.approval-edit, details.approval-edit[open] { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
+  /* Edit plan, in place: the rows become fields where they stood; the
+     approval act and Details step aside until it is saved or cancelled. */
+  .approval-sheet { position: relative; }
+  .approval-edit > summary { list-style: none; cursor: pointer; }
+  .approval-edit > summary::-webkit-details-marker { display: none; }
+  .approval-edit-close, .approval-edit[open] .approval-edit-open { display: none; }
+  .approval-edit[open] .approval-edit-close { display: inline; }
+  .approval-edit[open] > summary { position: absolute; top: 14px; right: 20px; }
+  .approval-sheet:has(.approval-edit[open]) > :not(.approval-sheet-title, .approval-secondary) { display: none; }
+  .approval-secondary:has(> .approval-edit[open]) { display: block; }
+  .approval-secondary:has(> .approval-edit[open]) > a { display: none; }
+  .approval-editor { display: grid; gap: 14px; }
+  .approval-editor .problem { margin: 0; }
+  .approval-field { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
+  .approval-field-label { padding: 0; color: var(--muted-foreground); font-size: 13px; font-weight: 500; line-height: 1.6; }
+  .approval-field-hint { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
+  .approval-field textarea, .approval-field input[type=text] { width: 100%; max-width: 75ch; margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.55; }
+  .approval-requirements { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
+  .approval-edit-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+  .approval-edit-act button { margin: 0; min-height: 2.125rem; white-space: nowrap; }
+  .approval-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); font-size: 13px; font-weight: 500; text-decoration: none; }
+  .approval-secondary > .approval-link:not(:first-child) { border-color: transparent; background: none; color: var(--muted-foreground); }
+  @media (hover: hover) and (pointer: fine) { .approval-link:hover { background: var(--muted); color: var(--foreground); } }
+  details.approval-details { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
+  details.approval-details[open] { padding-bottom: 0; }
+  .approval-details > summary { display: flex; align-items: center; min-height: 40px; padding: 4px 0 0; font-size: 13px; }
+  .approval-detail { max-width: 75ch; margin: 12px 0 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
+  .approval-detail h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
+  .approval-detail p, .approval-detail ul, .approval-detail dl { margin: 4px 0; }
+  .approval-detail ul { padding-left: 1.25rem; }
+  .approval-detail .revision-card { margin: 0; padding: 0; border: 0; background: none; }
+  .approval-roles { display: grid; gap: 8px; }
+  .approval-roles > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 12px; }
+  .approval-roles dt { color: var(--muted-foreground); font-weight: 500; }
+  .approval-roles dd { margin: 0; }
+  .approval-roles dd ul { margin: 2px 0 0; color: var(--muted-foreground); }
+  .chat-plan .approval-sheet { padding: 0; border: 0; background: none; }
+  @media (max-width: 760px) {
+    .approval-sheet { gap: 12px; padding: 14px; }
+    .approval-row { grid-template-columns: 1fr; gap: 2px; }
+    .approval-act { grid-template-columns: 1fr; }
+    .approval-act > button, .approval-password-note { grid-column: auto; grid-row: auto; }
+    .approval-act input[type=password], .approval-act button { min-height: 44px; font-size: 16px; }
+    .approval-act button { width: 100%; }
+    /* The one act stays under the thumb: sticky at the bottom, clear of the home indicator. */
+    .approval-sheet[data-sticky] .approval-act {
+      position: sticky; bottom: 0; z-index: 20; margin: 0 -14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
+      border-top: 1px solid var(--border); background: var(--card);
+    }
+    .approval-link { min-height: 44px; padding: 0 16px; }
+    .approval-edit[open] > summary { top: 6px; right: 6px; }
+    .approval-field textarea, .approval-field input[type=text] { font-size: 16px; }
+    .approval-edit-act button { width: 100%; min-height: 44px; font-size: 16px; }
+    .approval-details > summary { min-height: 44px; }
+    .approval-roles > div { grid-template-columns: 1fr; gap: 2px; }
+  }
+  .run-facts-details { margin-top: 1.25rem; }
+  .run-facts-details > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+  .run-facts-details > summary .meta { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .task-main-title, .chat-project-name strong, .proposal h3 { overflow-wrap: anywhere; }
+  .planner-plan { margin-top: .75rem; padding: 1.15rem 1.2rem; overflow: hidden; background: color-mix(in srgb, var(--glass) 82%, transparent); }
+  .execution-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .95rem; }
+  .execution-plan-head h2 { margin: .15rem 0 0; font-size: 1.05rem; letter-spacing: -.025em; }
+  .execution-plan-head p { margin: .25rem 0 0; max-width: 38rem; }
+  details.planner-plan-collapsed { padding: 0; }
+  .planner-plan-collapsed > summary.execution-plan-head {
+    position: relative; list-style: none; align-items: center; min-height: 4.25rem; margin: 0; padding: .9rem 3rem .9rem 1.1rem; cursor: pointer;
+  }
+  .planner-plan-collapsed > summary::-webkit-details-marker { display: none; }
+  .planner-plan-collapsed > summary::after {
+    content: ""; position: absolute; right: 1.2rem; top: 50%; width: .45rem; height: .45rem;
+    border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground);
+    transform: translateY(-65%) rotate(45deg); transition: transform .15s ease;
+  }
+  .planner-plan-collapsed[open] > summary::after { transform: translateY(-35%) rotate(225deg); }
+  .planner-plan-collapsed[open] > summary { border-bottom: 1px solid var(--glass-border); }
+  .planner-plan-body { padding: 1rem 1.15rem 1.15rem; }
+  .plan-lock { flex: none; padding: .3rem .6rem; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--muted-foreground); background: color-mix(in srgb, var(--muted) 50%, transparent); font-size: .7rem; }
+  .execution-plan { display: grid; gap: .75rem; }
+  .execution-plan p { margin: .2rem 0 0; line-height: 1.55; white-space: pre-wrap; }
+  .execution-plan ol, .execution-plan ul { display: grid; gap: .45rem; margin: .35rem 0 0; padding-left: 1.3rem; }
+  .execution-plan li { padding-left: .15rem; line-height: 1.45; overflow-wrap: anywhere; }
+  .execution-milestones { padding: .85rem .9rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 2px); background: color-mix(in srgb, var(--muted) 36%, transparent); }
+  .execution-milestones li::marker { color: var(--muted-foreground); font: 500 .7rem var(--font-mono); }
+  .execution-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
+  .execution-support > div, .execution-proof { padding: .8rem .85rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--glass) 74%, transparent); }
+  .execution-proof li::marker { content: "✓  "; color: var(--running); }
+  .execution-plan-compact { gap: .55rem; margin-top: .4rem; }
+  .execution-plan-compact .execution-support { grid-template-columns: 1fr; }
+  .plan-editor { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--glass-border); }
+  .plan-editor > summary { width: fit-content; color: var(--muted-foreground); cursor: pointer; font-size: .8rem; font-weight: 600; }
+  .plan-editor form { margin-top: .7rem; }
+  .plan-editor textarea { width: 100%; font-family: var(--font-mono); font-size: .75rem; line-height: 1.55; }
+  .milestone-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+  .milestone-progress-head h2 { margin: .15rem 0 0; }
+  .milestone-progress-count { flex: none; padding: .28rem .58rem; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--muted-foreground); background: color-mix(in srgb, var(--muted) 45%, transparent); font-size: .7rem; font-weight: 600; }
+  .milestone-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
+  .milestone { display: flex; align-items: baseline; gap: .5rem; padding: .5rem .65rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--glass) 74%, transparent); overflow-wrap: anywhere; }
+  .milestone-badge { display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .08rem .45rem; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--muted-foreground); background: color-mix(in srgb, var(--muted) 36%, transparent); font-size: .67rem; font-weight: 600; letter-spacing: .01em; }
+  .milestone-badge::before { content: ""; width: .38rem; height: .38rem; border-radius: 999px; background: color-mix(in srgb, var(--muted-foreground) 55%, transparent); }
+  .milestone-current .milestone-badge { color: var(--foreground); }
+  .milestone-current .milestone-badge::before { background: var(--running); box-shadow: 0 0 0 2px color-mix(in srgb, var(--running) 13%, transparent); }
+  .milestone-completed .milestone-badge::before { background: var(--success, var(--running)); }
+  .milestone-blocked .milestone-badge::before { background: var(--warning); }
+  .milestone-progress-note { margin: .7rem .1rem 0; }
+  .plan-revision-pending { margin-top: .85rem; padding: .85rem .9rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 2px); background: color-mix(in srgb, var(--running-soft) 30%, transparent); }
+  .plan-revision-pending h3 { margin: .15rem 0 .35rem; font-size: 1rem; letter-spacing: -.02em; }
+  .plan-revision-pending > p { margin: .3rem 0; }
+  .plan-revision-pending form { margin-top: .6rem; display: inline-flex; gap: .4rem; align-items: center; }
+  .plan-revision-pending form + form { margin-left: .5rem; }
+  .plan-revision > h2 { margin: .15rem 0 .35rem; color: var(--foreground); font-size: 1rem; letter-spacing: -.02em; }
+  .plan-revision > p.meta { margin-top: 0; }
+  .plan-revision-history { margin-top: .85rem; }
+  .plan-revision-history > summary { cursor: pointer; color: var(--muted-foreground); font-size: .8rem; font-weight: 600; }
+  .planner-status { display: flex; gap: .8rem; align-items: flex-start; }
+  .planner-orb { position: relative; flex: 0 0 2.15rem; width: 2.15rem; height: 2.15rem; border-radius: .75rem; background: var(--running-soft); }
+  .planner-orb::after { content: ""; position: absolute; inset: .65rem; border-radius: 999px; background: var(--running); animation: pulse 1.25s ease-in-out infinite; }
+  .planner-status p { margin: 0; }
+  .planner-status .meta { display: block; margin-top: .2rem; }
+  .ceremony-road { margin: .75rem 0 0; }
+  .button-link {
+    display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0 .875rem;
+    border-radius: calc(var(--radius) - 2px); background: var(--primary); color: var(--primary-foreground);
+    font-weight: 600; font-size: .8125rem; text-decoration: none; border: 1px solid var(--primary);
+  }
+  .props .row { padding: .4375rem .375rem; align-items: baseline; }
+  .props .row .meta { flex: 0 0 6.5rem; }
+  .props .row .mono { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
+  .props .row .seal { margin-right: .375rem; }
+  details.section { border: 0; background: transparent; padding: 0; margin: 1.25rem 0 0; border-radius: 0; box-shadow: none; }
+  details.section[open] { padding-bottom: 0; }
+  details.section > summary { list-style: none; display: flex; align-items: center; padding: .25rem 0; min-height: 2.25rem; }
+  details.section > summary::-webkit-details-marker { display: none; }
+  details.section > summary h2 { margin: 0; flex: 1; display: flex; align-items: center; gap: .4rem; }
+  details.section > summary h2 .lane-count { border: 1px solid var(--border); border-radius: 999px; padding: .04rem .5rem; font-weight: 500; color: var(--muted-foreground); font-size: .6875rem; }
+  details.section > summary::after {
+    content: ""; width: .45rem; height: .45rem; flex: none; margin-right: .375rem;
+    border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground);
+    transform: rotate(45deg) translateY(-.125rem); transition: transform .15s;
+  }
+  details.section[open] > summary::after { transform: rotate(225deg) translateY(-.125rem); }
+  @media (hover: hover) and (pointer: fine) { details.section > summary:hover h2 { color: var(--foreground); } }
+  .task-layout > .task-main { min-width: 0; }
+  .task-rail { position: sticky; top: 1rem; }
+  .task-rail .card { margin-top: .75rem; }
+  .task-rail .mono { overflow-wrap: anywhere; }
+  main:has(.task-layout) { max-width: 76rem; }
+  @media (max-width: 980px) {
+    .task-layout { grid-template-columns: 1fr; }
+    .cockpit { grid-template-columns: 1fr; }
+    .cockpit-queue { position: static; padding-bottom: .75rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border); }
+    .cockpit-queue-list { max-height: 15rem; }
+    .task-rail { position: static; order: -1; border-bottom: 1px solid var(--border); padding-bottom: .75rem; margin-bottom: .75rem; }
+    .acts-bar form.inline, .acts-bar .primary, .acts-bar .primary form { flex: 1 1 auto; }
+    .acts-bar .primary { flex-basis: 100%; }
+    .acts-bar .primary button { width: 100%; }
+    .acts-bar .act-hold { flex-wrap: wrap; }
+    .acts-bar .act-hold input[type=text] { flex: 1 1 8rem; width: auto; }
+    .dependency-repair-actions { align-items: stretch; }
+    .dependency-repair-actions form { flex: 1 1 10rem; }
+    .dependency-repair-actions .dependency-repair-replace { flex-basis: 100%; }
+    .dependency-repair-actions select { flex: 1 1 auto; min-width: 0; max-width: none; }
+    .dependency-repair-actions button { white-space: nowrap; }
+    .split { grid-template-columns: 1fr; }
+    .list-pane { display: none; }
+    .workbench-mobile-rail, .workbench-mobile-back { display: block; }
+    .workbench-mobile-rail { margin-top: 1.75rem; border-top: 1px solid var(--border); padding-top: .75rem; }
+    .workbench-mobile-back { margin: 0 0 1rem; }
+  }
+  @media (max-width: 620px) {
+    .planner-plan { padding: 1rem; }
+    details.planner-plan-collapsed { padding: 0; }
+    .planner-plan-collapsed > summary.execution-plan-head { padding: .8rem 2.5rem .8rem .9rem; }
+    .planner-plan-collapsed > summary .plan-lock { display: none; }
+    .planner-plan-body { padding: .85rem .9rem 1rem; }
+    .execution-plan-head { flex-direction: column; align-items: flex-start; gap: .55rem; }
+    .execution-support { grid-template-columns: 1fr; }
+    .plan-lock { white-space: nowrap; }
+    .milestone-progress-head { align-items: center; }
+    .milestone-progress-count { padding-inline: .48rem; }
+    .milestone { align-items: flex-start; padding: .55rem; }
+    .plan-revision-pending form { display: flex; width: 100%; }
+    .plan-revision-pending form + form { margin-left: 0; margin-top: .4rem; }
+    .plan-revision-pending button { width: 100%; }
+  }
+
+  /* Work (workspace package 1): a quiet list of rows and dividers, never
+     another grid of cards. The status line is the same component every
+     surface renders for a run — a small dot in the tone, neutral words. */
+  .work-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+  .work-head h1 { margin-bottom: .25rem; }
+  .work-tools { display: none; position: relative; flex: none; margin: .25rem 0 0; border: 0; padding: 0; background: none; border-radius: 0; }
+  .app.sidebar-collapsed .work-tools { display: block; }
+  .work-tools > summary {
+    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
+    min-height: 2.25rem; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 999px;
+    font-size: .8125rem; font-weight: 500; color: var(--foreground); background: var(--card);
+  }
+  .work-tools > summary::-webkit-details-marker { display: none; }
+  .work-tools > summary .chevron { width: .875rem; height: .875rem; }
+  .work-tools[open] > summary .chevron { transform: rotate(180deg); }
+  .work-tools-menu {
+    position: absolute; right: 0; top: calc(100% + .375rem); z-index: 20; min-width: 11rem; max-width: calc(100vw - 2rem);
+    display: flex; flex-direction: column; padding: .375rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
+    background: var(--card); box-shadow: var(--shadow);
+  }
+  .work-tools-menu a { display: block; padding: .5rem .625rem; border-radius: .5rem; text-decoration: none; color: var(--foreground); font-size: .875rem; }
+  @media (hover: hover) and (pointer: fine) { .work-tools-menu a:hover { background: var(--muted); } }
+  /* The result panel (workspace package 3): one presentation of a finished
+     result for the run page, the review cockpit, and the chat's result
+     detail — the deliverable first, problems ahead of readiness words,
+     three local views, and Request changes beside it. */
+  .result-panel { position: relative; padding: 1.1rem 1.2rem 1rem; min-width: 0; }
+  .result-back { margin: 0 0 .4rem; font-size: .8125rem; }
+  /* A comfortable target at every width (repair 2026-09-14): 44px tall. */
+  .result-back a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .35rem; margin-left: -.35rem; border-radius: .375rem; text-decoration: none; font-weight: 550; }
+  .result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
+  .result-head h2 { margin: .15rem 0 0; font-size: 1.15rem; }
+  .result-head .eyebrow { overflow-wrap: anywhere; }
+  .result-head .status-line { flex: none; font-size: .8125rem; }
+  .result-summary { max-width: 46rem; margin: .6rem 0 0; font-size: .95rem; line-height: 1.5; }
+  .result-action { margin: .7rem 0 0; }
+  .result-action form { margin: 0; }
+  .result-action .button-link { min-height: 2.5rem; gap: .35rem; }
+  .result-action .button-link .meta { color: inherit; opacity: .78; font-weight: 500; }
+  .result-notes, .result-details, .result-notes[open], .result-details[open] { margin: .6rem 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
+  .result-notes > summary, .result-details > summary {
+    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .25rem; margin: 0 -.25rem;
+    border-radius: .375rem; font-size: .8125rem; font-weight: 550; color: var(--muted-foreground);
+  }
+  .result-notes > summary::-webkit-details-marker, .result-details > summary::-webkit-details-marker { display: none; }
+  .result-notes > summary::before, .result-details > summary::before { content: "▸"; }
+  .result-notes[open] > summary::before, .result-details[open] > summary::before { content: "▾"; }
+  @media (hover: hover) and (pointer: fine) { .result-notes > summary:hover, .result-details > summary:hover { color: var(--foreground); } }
+  .result-details > summary .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: .68rem; font-weight: 400; }
+  .result-notes .recap { margin: .25rem 0 .4rem; font-size: .875rem; }
+  .result-attention { margin: .75rem 0 .25rem; padding: .7rem .85rem; border-left: 1px solid var(--warning); border-radius: 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0; background: var(--warning-soft); font-size: .8125rem; }
+  .result-attention strong { display: block; font-size: .78rem; }
+  .result-you-check { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin: .75rem 0; padding: .65rem .85rem; border-radius: calc(var(--radius) - 3px); background: var(--muted); font-size: .8125rem; }
+  .result-you-check ul { flex: 1 1 14rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
+  .result-you-check form { margin: 0; }
+  .result-attention ul { margin: .3rem 0 0; padding-left: 1.15rem; }
+  .result-attention li { margin: .15rem 0; overflow-wrap: anywhere; }
+  .result-tabs { display: flex; gap: .25rem; margin: .9rem 0 .75rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
+  .result-tabs::-webkit-scrollbar { display: none; }
+  .result-tabs a {
+    display: inline-flex; align-items: center; gap: .4rem; flex: none; min-height: 2.5rem; padding: 0 .625rem;
+    margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none;
+    color: var(--muted-foreground); font-size: .875rem; font-weight: 500;
+  }
+  .result-tabs a .count { font-family: var(--font-mono); font-size: .6875rem; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
+  .result-tabs a[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--foreground); }
+  .result-tabs a[aria-selected="true"] .count { color: var(--foreground); }
+  .result-view { min-width: 0; }
+  .result-view[hidden] { display: none; }
+  .result-visuals { margin-top: .25rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
+  .result-unavailable { margin: .5rem 0 0; padding-left: 1.15rem; font-size: .78rem; }
+  .result-changes { margin: .25rem 0 .5rem; padding-left: 1.15rem; font-size: .875rem; }
+  .result-changes li { margin: .2rem 0; overflow-wrap: anywhere; }
+  .result-files li, .result-files .mono { overflow-wrap: anywhere; white-space: normal; }
+  .result-files li { min-width: 0; }
+  .result-section[data-cockpit-source="reviewer"] li { overflow-wrap: anywhere; }
+  @media (max-width: 760px) { .result-panel .pick-file, .result-panel .pick-line, .diff-modes button { min-height: 44px; min-width: 44px; white-space: nowrap; } }
+  .result-files-lead { margin: .25rem 0 .5rem; font-size: .8125rem; overflow-wrap: anywhere; }
+  .result-report h3 { margin: .2rem 0 .3rem; font-size: 1rem; }
+  .result-report .plan-doc { max-height: 28rem; overflow: auto; }
+  .result-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; margin: .4rem 0 0; }
+  .result-facts > div { min-width: 0; padding: .6rem .7rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--glass-strong) 64%, transparent); }
+  .result-facts dt { color: var(--muted-foreground); font: 500 .75rem/1.3 var(--font-sans); }
+  .result-facts dd { margin: .2rem 0 0; font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; }
+  .result-facts dd p { margin: 0; }
+  .result-facts dd form { margin: .35rem 0 0; }
+  .result-stat { margin: .2rem 0 .4rem; }
+  .result-files { margin: .4rem 0 .6rem; }
+  .result-label { display: block; margin: .5rem 0 .25rem; font: 600 .6875rem/1.3 var(--font-mono); color: var(--muted-foreground); letter-spacing: .06em; text-transform: uppercase; }
+  .result-verdict { align-items: center; }
+  .result-verdict > .meta { min-width: 0; overflow-wrap: anywhere; }
+  .result-request { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
+  .result-request h3 { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; color: var(--muted-foreground); }
+  .result-request .diff-comment-form { margin: .5rem 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
+  .result-request .diff-comment-form textarea { width: 100%; box-sizing: border-box; }
+  .result-pin, .result-pin[open] { margin: 0; padding: 0 .2rem; border: 0; background: none; }
+  .result-pin > summary { min-height: 2.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .78rem; font-weight: 550; cursor: pointer; list-style: none; }
+  .result-pin > summary::-webkit-details-marker { display: none; }
+  .result-pin > summary::before { content: "▸"; }
+  .result-pin[open] > summary::before { content: "▾"; }
+  .result-pin > summary .meta { font-weight: 400; }
+  .result-pin .diff-comment-target { margin: .25rem 0 .5rem; }
+  .revision-card, .revision-lineage, .task-history, .diff-comment p { min-width: 0; overflow-wrap: anywhere; }
+  .result-feedback-history > summary, .task-history > summary, .task-history a { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .5rem; }
+  .task-history > summary::before { content: "▸"; margin-right: .35rem; }
+  .task-history[open] > summary::before { content: "▾"; }
+  .task-history li { margin: .25rem 0; }
+  .result-revision { margin: .6rem 0; padding: .6rem .75rem; border: 1px solid color-mix(in srgb, var(--running) 24%, var(--glass-border)); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb, var(--running) 6%, var(--glass-strong)); font-size: .8125rem; overflow-wrap: anywhere; }
+  .result-links { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: .6rem 0 0; }
+  .result-links a { font-weight: 550; }
+  .result-links a + a::before { content: "·"; margin-right: .5rem; color: var(--muted-foreground); font-weight: 400; }
+  .cockpit-detail .result-panel { margin: .85rem 0; }
+  .cockpit-accept { margin-top: .75rem; }
+  /* The result beside the conversation (package 3): with room, two
+     columns and no second auxiliary panel; without it, the dedicated
+     result view with Back to chat and the conversation out of the way. */
+  .chat-result { min-width: 0; }
+  .task-chat-workspace.result-open { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; }
+  .task-chat-workspace.result-open .chat-main { max-width: none; }
+  /* Said once: while the result detail is open beside the conversation,
+     the receipt in the thread keeps its heading, status, and roads only. */
+  .result-open .completion-receipt > :not(.receipt-head):not(.receipt-actions) { display: none; }
+  @media (max-width: 1199px) {
+    .task-chat-workspace.result-open { display: block; }
+    .task-chat-workspace.result-open .chat-main, .task-chat-workspace.result-open .task-chat-agents { display: none; }
+    main:has(.chat-workspace.result-open) { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0rem)); }
+  }
+  @media (max-width: 359px) {
+    .result-tabs a .count { display: none; }
+    .result-panel { padding-inline: .7rem; }
+  }
+  .work-views { display: flex; gap: .25rem; margin: .75rem 0 .5rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
+  .work-views::-webkit-scrollbar { display: none; }
+  .work-views a {
+    display: inline-flex; align-items: center; gap: .4rem; flex: none; min-height: 2.5rem; padding: 0 .625rem;
+    margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none;
+    color: var(--muted-foreground); font-size: .875rem; font-weight: 500;
+  }
+  .work-views a .count { font-family: var(--font-mono); font-size: .6875rem; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
+  .work-views a.active { color: var(--foreground); border-bottom-color: var(--foreground); }
+  .work-views a.active .count { color: var(--foreground); }
+  .work-list { display: flex; flex-direction: column; }
+  .work-row {
+    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .5rem 1.5rem; align-items: start;
+    padding: .75rem 0; border-bottom: 1px solid var(--border);
+  }
+  .work-row:last-child { border-bottom: 0; }
+  .work-row-main, .work-row-status { min-width: 0; }
+  /* Concise rows (2026-09-13): the status, the next act, and the Details
+     toggle share one wrapping line; an opened disclosure is wider than
+     its summary, so it wraps onto its own full-width line by itself. */
+  .work-row-status { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .875rem; }
+  .work-details, .work-details[open] { max-width: 100%; margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
+  .work-details > summary {
+    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem;
+    min-height: 2.25rem; padding: 0 .25rem; margin: 0 -.25rem; border-radius: .375rem;
+    font-size: .8125rem; font-weight: 500; color: var(--muted-foreground);
+  }
+  .work-details > summary::-webkit-details-marker { display: none; }
+  .work-details > summary::before { content: "▸"; }
+  .work-details[open] > summary::before { content: "▾"; }
+  @media (hover: hover) and (pointer: fine) { .work-details > summary:hover { color: var(--foreground); } }
+  .work-title { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.35; color: var(--foreground); text-decoration: none; overflow-wrap: anywhere; }
+  @media (hover: hover) and (pointer: fine) { .work-title:hover { text-decoration: underline; } }
+  .work-meta { display: flex; flex-wrap: wrap; gap: .25rem .625rem; margin: .25rem 0 0; font-size: .75rem; color: var(--muted-foreground); }
+  .work-meta .mono { overflow-wrap: anywhere; }
+  .project-label { display: inline-block; padding: 0 .4rem; border: 1px solid var(--border); border-radius: 999px; font-size: .6875rem; line-height: 1.5; color: var(--foreground); }
+  .work-detail { margin: 0 0 .25rem; font-size: .8125rem; line-height: 1.45; color: var(--muted-foreground); overflow-wrap: anywhere; }
+  .work-details .work-id { margin: 0 0 .25rem; }
+  .work-action { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; font-weight: 500; }
+  .work-empty { padding: 2rem 0 1rem; max-width: 34rem; }
+  .work-empty p { margin: 0 0 .75rem; color: var(--muted-foreground); line-height: 1.5; }
+  .work-empty .row { display: flex; align-items: center; gap: 1rem; }
+  .work-empty .row > a { display: inline-flex; align-items: center; min-height: 44px; }
+  .work-bound { margin-top: .75rem; }
+  .status-line { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; font-size: .875rem; font-weight: 600; color: var(--foreground); }
+  .status-line .status-label { min-width: 0; overflow-wrap: anywhere; }
+  .status-line .status-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted-foreground); }
+  .status-line[data-tone="attention"] .status-dot { background: var(--warning); }
+  .status-line[data-tone="problem"] .status-dot { background: var(--destructive); }
+  .status-line[data-tone="live"] .status-dot { background: var(--running); box-shadow: 0 0 0 3px var(--running-soft); }
+  .status-line[data-tone="ready"] .status-dot, .status-line[data-tone="done"] .status-dot { background: var(--success); }
+  .status-line[data-tone="muted"] { color: var(--muted-foreground); font-weight: 500; }
+  .status-line[data-tone="muted"] .status-dot { background: var(--border); }
+  .pull-request { display: grid; gap: .35rem; }
+  .pull-request p { margin: 0; overflow-wrap: anywhere; }
+  .pull-request-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
+  .pull-request-head a, .pull-request .meta a { display: inline-flex; align-items: center; min-height: 44px; }
+  .pull-request-head strong { font-size: 1.0625rem; font-weight: 600; color: var(--foreground); display: inline-flex; align-items: center; gap: .5rem; }
+  .pull-request-head strong::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--muted-foreground); }
+  .pull-request--ok .pull-request-head strong::before { background: var(--success, #15803d); }
+  .pull-request--problem .pull-request-head strong::before { background: var(--so-warning, #ab6400); }
+  .pull-request-act { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin: .25rem 0 0; }
+  .pull-request-act .meta { flex: 1 1 100%; }
+  .pull-request-act label { display: grid; gap: .25rem; flex: 1 1 12rem; margin: 0; }
+  .pull-request-act label input { margin: 0; min-height: 44px; box-sizing: border-box; width: 100%; }
+  .pull-request-act button { min-height: 44px; white-space: nowrap; }
+  .result-complete-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
+  .result-complete-actions button { white-space: nowrap; }
+  .result-complete-actions button[name=publish], .pull-request-act button { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  @media (max-width: 480px) { .pull-request-act button, .result-complete-actions button { flex: 1 1 100%; } }
+  .receipt-publication { position: relative; z-index: 1; margin: .35rem 0 0; font-size: .8125rem; color: var(--muted-foreground); }
+  /* A raw repository path in ordinary copy wraps at any point rather than
+     widening the page (the phone task-list overflow, package 1). */
+  .path-words { overflow-wrap: anywhere; word-break: break-word; }
+  @media (max-width: 760px) {
+    .work-row { grid-template-columns: minmax(0, 1fr); gap: .125rem; padding: .625rem 0; }
+    .work-head { align-items: center; }
+    .work-head h1 { margin-bottom: 0; }
+    .work-details > summary, .work-action { min-height: 44px; }
+    /* The tools control sits at the head's right edge on every width, so
+       its menu keeps the desk's right-aligned anchor here too. A phone
+       override once re-anchored it at left: 0, which pushed the opened
+       menu past the viewport (right edge 441.5px at 390px) and widened
+       the document — found by the independent concise-UI review. */
+    /* All four filters share the row (review fixes, finding 3): each tab
+       takes an equal share, no tab scrolls out of view, the count sits on
+       the label, and every target stays ≥ 40px tall. */
+    .work-views { gap: 0; margin: .5rem 0 .25rem; overflow: visible; }
+    .work-views a { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 .25rem; font-size: .8125rem; gap: .3rem; white-space: nowrap; }
+  }
+  @media (max-width: 400px) {
+    .work-views a { font-size: .75rem; gap: .2rem; padding: 0 .125rem; }
+    .work-views a .count { font-size: .625rem; }
+  }
+  /* The narrowest phones (≤ 360px): four labels with counts cannot share
+     288px at legible type, so the strip becomes two rows of two — every
+     filter wholly visible, unclipped, 40px tall, never scrolled away. */
+  @media (max-width: 360px) {
+    .work-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .work-views a { font-size: .8125rem; gap: .3rem; padding: 0 .25rem; }
+    .work-views a .count { font-size: .6875rem; }
+  }
+
+  /* The phone shell: the sidebar disappears; a top bar carries the project
+     and quick capture; a bottom tab bar carries the destinations a thumb
+     visits. Desktop is untouched. */
+  .mobile-top, .tabbar { display: none; }
+  @media (max-width: 760px) {
+    .app { display: block; }
+    .side { display: none; }
+    .mobile-top {
+      display: flex; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 30;
+      background: var(--glass-strong); border-bottom: 1px solid var(--glass-border);
+      padding: calc(.375rem + env(safe-area-inset-top, 0rem)) .75rem .375rem;
+    }
+    /* One header row: the pill carries scope, counts, and the switch. */
+    .scope-bar { display: none; }
+    .mobile-top .brand-mini { font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--foreground); font-family: var(--font-mono); }
+    .mobile-top .project-pill { flex: 1; min-width: 0; position: static; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
+    .mobile-top a.project-pill, .mobile-top .project-pill > summary {
+      /* align-items: stretch, not the switcher's center: a centered column
+         item takes its content width, and a long project name then widens
+         the document (the 320px overflow, workspace package 1). */
+      min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .0625rem;
+      border: 1px solid var(--border); border-radius: 1.375rem; background: var(--card);
+      min-height: 2.75rem; padding: .25rem .875rem; text-decoration: none; color: var(--foreground);
+      font-size: .875rem; font-weight: 500; line-height: 1.25; cursor: pointer;
+    }
+    .mobile-top .project-pill > summary .name { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .mobile-top .project-pill > summary .name .chevron { flex: none; }
+    .mobile-top a.project-pill:active, .mobile-top .project-pill > summary:active { background: var(--muted); }
+    /* On a phone the menu drops from the header it belongs to (UI polish
+       2026-09-13). It was a fixed sheet, but the header's backdrop-filter
+       makes the header the containing block for fixed descendants, so the
+       sheet landed above the header, off-screen. Absolute to the sticky
+       header is exact, and never taller than the screen. */
+    .mobile-top .switcher-menu {
+      position: absolute; left: .5rem; right: .5rem; top: calc(100% - .25rem); bottom: auto; max-width: none;
+      max-height: calc(100dvh - 8rem); overflow-y: auto; z-index: 45;
+    }
+    .mobile-top .switcher-menu button { min-height: 2.75rem; }
+    .mobile-top .pill-status {
+      display: flex; flex-wrap: wrap; gap: .125rem .5rem;
+      font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
+      color: var(--muted-foreground); font-variant-numeric: tabular-nums;
+    }
+    .mobile-top .pill-status > span { white-space: nowrap; }
+    .mobile-top .pill-status .hot { color: var(--brand); }
+    .mobile-top .project-pill .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .mobile-top .mobile-new {
+      flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
+      min-height: 2.75rem; padding: 0 .875rem; border-radius: 999px;
+      background: var(--secondary); border: 1px solid var(--border); color: var(--foreground);
+      font-weight: 500; font-size: .875rem; text-decoration: none;
+    }
+    /* Tools and settings: a header action, never a fourth tab (workspace
+       package 1). A 44px target, the same quiet pill as quick capture. */
+    .mobile-top .mobile-more {
+      flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
+      width: 2.75rem; min-height: 2.75rem; border-radius: 999px;
+      border: 1px solid var(--border); background: var(--card); color: var(--foreground);
+    }
+    .mobile-top .mobile-more svg { width: 1.125rem; height: 1.125rem; }
+    @media (max-width: 360px) { .mobile-top .mobile-new { padding: 0 .625rem; } }
+    .tabbar {
+      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
+      background: var(--glass-strong); border-top: 1px solid var(--glass-border);
+      padding: .25rem max(.25rem, env(safe-area-inset-right, 0rem)) calc(.25rem + env(safe-area-inset-bottom, 0rem)) max(.25rem, env(safe-area-inset-left, 0rem));
+    }
+    .tabbar a {
+      flex: 1; display: flex; flex-direction: column; align-items: center; gap: .125rem;
+      padding: .375rem 0 .25rem; min-height: 3rem; text-decoration: none;
+      color: var(--muted-foreground); font-size: .6875rem; font-weight: 500;
+      font-family: var(--font-sans);
+    }
+    .tabbar a .glyph { display: flex; align-items: center; justify-content: center; height: 1.125rem; }
+    .tabbar a .glyph svg { width: 1rem; height: 1rem; }
+    .tabbar a.active { color: var(--foreground); }
+    .tabbar a.active .glyph { background: var(--muted); border-radius: 999px; box-shadow: 0 0 0 .35rem var(--muted); }
+    .tabbar a { position: relative; }
+    .tabbar a .dot-badge {
+      position: absolute; top: .3125rem; left: calc(50% + .375rem);
+      width: .375rem; height: .375rem; border-radius: 9999px; background: var(--brand);
+    }
+    .content > main { padding: 1rem 1rem calc(4.5rem + env(safe-area-inset-bottom, 0rem)); }
+    .project-add-card { padding: 1rem; }
+    .project-add-actions { grid-template-columns: minmax(0, 1fr); }
+    .project-add-action { min-height: 5.25rem; padding: .75rem; }
+    .project-add-more > summary { width: 100%; }
+  }
+
+  /* /menu mirrors the rail's workflows/admin grouping as plain headed
+   * sections — no collapse: it is already one tap behind the tab bar. */
+  .menu-group-label {
+    margin: 1.5rem 0 .25rem; font-size: .75rem; font-weight: 600;
+    color: var(--muted-foreground); font-family: var(--font-sans);
+  }
+  .menu-group-label:first-of-type { margin-top: .75rem; }
+  .menu-list { display: flex; flex-direction: column; gap: .375rem; margin-top: .75rem; }
+  .menu-row {
+    display: flex; flex-direction: column; gap: .125rem; text-decoration: none;
+    border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
+    padding: .75rem .875rem; color: var(--foreground); min-height: 44px; justify-content: center;
+  }
+  @media (hover: hover) and (pointer: fine) { .menu-row:hover { border-color: color-mix(in srgb, var(--border) 60%, var(--muted-foreground)); } }
+
+  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .625rem; margin: .5rem 0; }
+  .stat-card {
+    border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
+    padding: .75rem .875rem; min-width: 0;
+  }
+  .stat-card .k { font-weight: 600; font-size: .875rem; display: flex; align-items: center; gap: .4rem;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .stat-card .v { font-size: .75rem; color: var(--muted-foreground); margin-top: .25rem;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 9999px; flex: none; }
+  .dot-ok { background: var(--success); }
+  /* Caution without a claim on the operator: quiet, not magenta. */
+  .dot-warn { background: var(--muted-foreground); }
+  .dot-off { background: var(--muted-foreground); opacity: .5; }
+  .dot-bad { background: var(--destructive); }
+  .pulse { animation: pulse 2s ease-in-out infinite; }
+  .dot-ok.pulse { background: var(--running); }
+  @keyframes pulse { 50% { opacity: .35; } }
+
+  .login-viewport { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
+  .login-shell { width: 100%; max-width: 23rem; }
+  .login-shell h1 { text-align: center; margin: 0 0 .375rem; font-size: 1.5rem; letter-spacing: -0.02em; }
+  .login-shell > .hint { text-align: center; margin: 0 0 2rem; font-size: 0.875rem; }
+  .login-card {
+    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 1.5rem 1.5rem 1.625rem;
+  }
+  .login-card label:first-child { margin-top: 0; }
+  .login-card .problem { margin: 0 0 1rem; }
+  .login-shell button {
+    width: 100%; margin-top: 1.25rem;
+    background: var(--so-accent); color: var(--so-on-accent); border-color: var(--so-accent); font-weight: 600;
+  }
+  @media (hover: hover) and (pointer: fine) { .login-shell button:hover { background: var(--so-accent-hover); border-color: var(--so-accent-hover); } }
+  .login-foot { text-align: center; margin: 1.5rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.9; }
+  .login-foot code { background: none; padding: 0; color: var(--muted-foreground); white-space: nowrap; }
+  .so-wordmark { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; letter-spacing: -.02em; color: var(--foreground); }
+  .so-brand-mark { width: 18px; height: 22px; display: flex; align-items: center; gap: 3px; transform: skewY(-10deg); }
+  .so-brand-mark i { display: block; width: 4px; height: 15px; background: var(--so-signal); border-radius: 1px; }
+  .so-brand-mark i:nth-child(2) { height: 22px; }
+  .login-shell .login-brand { justify-content: center; font-size: 1.125rem; margin: 0 0 1.5rem; }
+  .sso-step-up { display: inline-flex; align-items: center; min-height: 36px; font-size: .9rem; }
+  .sso-step-up[data-sso-step-up="confirmed"] { color: var(--so-success); }
+  .sso-step-up[data-sso-step-up="confirmed"]::before { content: "✓"; margin-right: 6px; }
+  .login-shell .login-sso { display: flex; justify-content: center; align-items: center; min-height: 44px; border-radius: 8px; background: var(--so-accent); color: var(--so-on-accent); font-weight: 600; text-decoration: none; margin: 0 0 1rem; }
+  @media (hover: hover) and (pointer: fine) { .login-shell .login-sso:hover { background: var(--so-accent-hover); } }
+  .login-shell .login-password > summary { text-align: center; font-size: .875rem; color: var(--muted-foreground); cursor: pointer; margin: 0 0 .75rem; }
+  .focus-page { max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
+  .focus-page .focus-brand { display: inline-flex; margin: 0 0 2.5rem; }
+  .focus-page h1 { margin: 0 0 1rem; }
+  .secret-value { overflow-wrap: anywhere; font-size: .95rem; padding: .75rem .875rem; margin: .75rem 0; border: 1px solid var(--border); border-radius: 8px; background: var(--background); user-select: all; }
+
+  @media (max-width: 640px) {
+    button, form.option button { min-height: 2.75rem; }
+    .topbar nav a { padding: 0 .5rem; }
+  }
+
+  /* The board: lanes as columns, the pipeline left to right. */
+  .content > main:has(.board) { max-width: none; }
+  .board {
+    display: grid; grid-template-columns: repeat(5, minmax(12.5rem, 1fr));
+    gap: .625rem; overflow-x: auto; padding-bottom: .75rem; align-items: start;
+  }
+  /* The phone board (board pass): lanes stack as sections that fold, the
+     counts readable before a single card — what needs you, then what is
+     building, then the rest. A header is a 2.75rem tap; a drawn chevron
+     says which way it folds. */
+  @media (max-width: 760px) {
+    .board { display: flex; flex-direction: column; gap: .5rem; padding-bottom: 0; }
+    .board .lane { min-height: 0; padding: 0 .625rem .125rem; }
+    .board .lane > summary {
+      cursor: pointer; display: flex; align-items: center; min-height: 2.75rem; margin: 0;
+      -webkit-tap-highlight-color: transparent;
+    }
+    .board .lane > summary h2 { flex: 1; font-size: .75rem; }
+    .board .lane > summary .lane-count { border: 1px solid var(--border); border-radius: 999px; padding: .04rem .5rem; margin-left: .25rem; }
+    .board .lane > summary::after {
+      content: ""; width: .5rem; height: .5rem; flex: none; margin-right: .25rem;
+      border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground);
+      transform: rotate(45deg) translateY(-.125rem); transition: transform .15s;
+    }
+    .board .lane[open] > summary::after { transform: rotate(225deg) translateY(-.125rem); }
+    .board .lane .hint { margin-bottom: .25rem; }
+    .board .lane .lane-card:last-of-type { margin-bottom: .5rem; }
+    .board .lane-attention { order: 0; }
+    .board .lane-building { order: 1; }
+    .board .lane-queued { order: 2; }
+    .board .lane-waiting { order: 3; }
+    .board .lane-done { order: 4; }
+  }
+  .lane {
+    background: color-mix(in srgb, var(--card) 45%, var(--background)); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: .625rem; min-height: 12rem;
+  }
+  .lane > summary { list-style: none; cursor: default; margin: 0 0 .125rem; }
+  .lane > summary::-webkit-details-marker { display: none; }
+  .lane h2 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .6875rem; }
+  .lane h2 a { color: inherit; text-decoration: none; }
+  @media (hover: hover) and (pointer: fine) { .lane h2 a:hover { text-decoration: underline; } }
+  .lane .hint { margin-top: 0; }
+  .lane-count { color: var(--muted-foreground); font-weight: 400; font-variant-numeric: tabular-nums; }
+  .lane h2::before {
+    content: ""; width: .375rem; height: .375rem; border-radius: 9999px; flex: none;
+    background: var(--muted-foreground); opacity: .55;
+  }
+  .lane-attention h2::before { background: var(--brand); opacity: 1; }
+  .lane-building h2::before { background: var(--running); opacity: 1; }
+  .lane-done h2::before { background: var(--success); opacity: 1; }
+  .lane-card {
+    display: block; text-decoration: none; color: inherit;
+    background: var(--card); border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 2px); padding: .5rem .625rem; margin-top: .5rem;
+  }
+  @media (hover: hover) and (pointer: fine) { .lane-card:hover { border-color: color-mix(in srgb, var(--border) 55%, var(--muted-foreground)); } }
+  .lane-card .id { display: block; font-family: var(--font-mono); font-size: .6875rem; color: var(--muted-foreground); margin-bottom: .125rem; overflow-wrap: anywhere; }
+  .lane-card .t { display: block; font-size: .8125rem; font-weight: 500; line-height: 1.35; }
+  .lane-card .dot { margin-right: .4rem; }
+  .lane-card .meta, .lane-card .mono { display: block; margin-top: .125rem; font-size: .75rem; }
+  .lane-card .why { display: block; margin-top: .125rem; font-size: .75rem; color: var(--muted-foreground); }
+  /* The facts: mono key–value pairs, keys dim, values ink — one grammar on every lane. */
+  .lane-card .facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .0625rem .625rem; margin-top: .4rem; font-size: .6875rem; line-height: 1.5; }
+  .lane-card .fact { display: contents; }
+  .lane-card .fact .k { color: var(--muted-foreground); font-family: var(--font-mono); }
+  .lane-card .fact .v { font-family: var(--font-mono); color: var(--foreground); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+  .lane-card .chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
+  .lane-card .chips .badge { margin: 0; }
+  /* The live strip on a building card: stage and clock in an inset well —
+     the run's own facts, never a percent. */
+  .lane-card .live-line {
+    display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .375rem;
+    padding: .3rem .5rem; border-radius: calc(var(--radius) - 4px); background: var(--muted);
+    font-family: var(--font-mono); font-size: .6875rem; color: var(--running); font-variant-numeric: tabular-nums;
+  }
+  .lane-card .live-line .clock { color: var(--muted-foreground); }
+  .lane-empty { margin: .75rem 0 .25rem; }
+  .plan-doc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8125rem; max-height: 24rem; overflow-y: auto; }
+  .lane-more { display: block; margin-top: .5rem; font-size: .75rem; }
+
+  /* The attended control room: one cross-workspace pulse, then a dense
+     master rail. */
+  .control-room-head {
+    display: flex; align-items: flex-start; justify-content: space-between;
+    gap: 1rem; margin-bottom: 1.1rem;
+  }
+  .control-room-head h1 { font-size: 1.375rem; margin-top: .08rem; }
+  .control-room-head .actions { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
+  .control-room-head .actions a { text-decoration: none; }
+  .command-metrics {
+    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: .625rem; margin: .85rem 0 1.5rem;
+  }
+  .command-metric {
+    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card);
+    padding: .8rem .9rem; min-width: 0;
+  }
+  .command-metric .value { display: block; margin-top: .25rem; font-size: 1.5rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
+  .command-metric .label { display: flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .8125rem; }
+  .command-metric .label::before {
+    content: ""; width: .375rem; height: .375rem; border-radius: 9999px;
+    background: var(--muted-foreground); flex: none;
+  }
+  .command-metric .detail { display: block; color: var(--muted-foreground); font-size: .6875rem; margin-top: .18rem; }
+  .command-metric.attention .label::before { background: var(--brand); }
+  .command-metric.live .label::before { background: var(--running); }
+  .workspace-pulse { margin: .4rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .625rem; }
+  /* The workspace card: name and status word, four counts, the same counts
+     as a bar, and the one tap to its board. Neutral border always; the
+     needs-you count and the bar's segment carry the accent. */
+  .workspace-card {
+    padding: .75rem .9rem; border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 2px); background: var(--card); font-size: .8125rem; min-width: 0;
+  }
+  /* The mate's unified workspace: a glass project navigator beside one
+     long-lived conversation. The content stays calm and legible; the
+     atmosphere belongs to the shell and edges, never behind the prose. */
+  main:has(.chat-workspace) { max-width: 86rem; padding-top: 1.5rem; }
+  .chat-workspace {
+    display: grid; grid-template-columns: minmax(16rem, 18.5rem) minmax(0, 56rem);
+    align-items: start; gap: clamp(1.25rem, 3vw, 2.75rem);
+  }
+  .chat-workspace.projects-hidden { grid-template-columns: minmax(0, 56rem); }
+  .chat-workspace.projects-hidden .chat-projects { display: none; }
+  .chat-main { min-width: 0; max-width: 56rem; }
+  .task-chat-workspace { grid-template-columns: minmax(15rem, 18rem) minmax(0, 56rem); }
+  .task-chat-context {
+    position: sticky; top: 6rem; align-self: start; padding: 1rem;
+    border: 1px solid var(--glass-border); border-radius: calc(var(--radius) + 3px);
+    background: var(--glass); box-shadow: var(--shadow);
+  }
+  .task-chat-context-head { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
+  .task-chat-context h2 { margin: .7rem 0 .25rem; color: var(--foreground); font-size: 1rem; line-height: 1.35; letter-spacing: -.025em; }
+  .task-chat-context > .meta { margin: 0; overflow-wrap: anywhere; font-size: .65rem; }
+  .task-chat-status { display: grid; gap: .2rem; margin-top: .85rem; padding: .7rem; border-radius: calc(var(--radius) - 3px); background: var(--warning-soft); }
+  .task-chat-status.ready { background: var(--running-soft); }
+  .task-chat-status strong { font-size: .75rem; }
+  .task-chat-status span { color: var(--muted-foreground); font-size: .68rem; line-height: 1.45; }
+  .task-chat-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: .65rem 0; }
+  .task-chat-facts div { min-width: 0; padding: .45rem .5rem; border-radius: calc(var(--radius) - 5px); background: color-mix(in srgb, var(--muted) 58%, transparent); }
+  .task-chat-facts dt { color: var(--muted-foreground); font: 400 .58rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
+  .task-chat-facts dd { margin: .15rem 0 0; font-size: .68rem; overflow-wrap: anywhere; }
+  .task-chat-overview-actions { display: grid; justify-items: start; gap: .55rem; margin-top: .75rem; }
+  .task-chat-overview-link { display: block; font-size: .72rem; text-decoration: none; }
+  .task-chat-recovery-link { min-height: 2rem; padding-inline: .7rem; font-size: .7rem; }
+  #task-chat-live { display: grid; gap: 1rem; margin-bottom: 1.1rem; }
+  .task-journey {
+    position: relative; overflow: hidden; padding: 1rem 1.05rem;
+    border-color: color-mix(in srgb, var(--accent) 16%, var(--glass-border));
+    background: var(--card);
+  }
+  .task-journey::after { content: ""; position: absolute; width: 9rem; height: 9rem; right: -4rem; top: -5rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 8%, transparent); filter: blur(12px); pointer-events: none; }
+  .task-journey-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+  .task-journey h2 { margin: .2rem 0 0; font-size: 1rem; letter-spacing: -.025em; }
+  .task-journey > ol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; margin: 1rem 0 .75rem; padding: 0; list-style: none; }
+  .task-journey > ol::before { content: ""; position: absolute; top: .7rem; left: 10%; right: 10%; height: 1px; background: var(--border); }
+  .task-journey li { position: relative; z-index: 1; display: grid; justify-items: center; gap: .35rem; color: var(--muted-foreground); font-size: .625rem; text-align: center; }
+  .task-journey li i { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--border); border-radius: 50%; background: var(--card); font: 600 .58rem/1 var(--font-mono); font-style: normal; }
+  .task-journey li.complete i { color: var(--success); border-color: color-mix(in srgb,var(--success) 32%,var(--border)); background: color-mix(in srgb,var(--success) 9%,var(--card)); }
+  .task-journey li.complete span { color: var(--foreground); }
+  .task-journey li.active i { color: white; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent); }
+  .task-journey li.active span { color: var(--foreground); font-weight: 650; }
+  .task-journey > .meta { margin: 0; line-height: 1.45; }
+  .task-journey-action { margin-top: .75rem; min-height: 44px; }
+  .check-progress {
+    margin: .5rem 0 0; color: var(--running); font-size: clamp(.625rem,2.2vw,.75rem);
+    line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap;
+    overflow-x: auto; scrollbar-width: thin;
+  }
+  .check-progress[data-final="passed"] { color: var(--success); }
+  .check-progress[data-final="failed"] { color: var(--destructive); }
+  .check-progress[data-final="unknown"] { color: var(--warning); }
+  .receipt-actions [data-primary-action] { min-height: 44px; }
+  .task-status-reason { margin-top: .75rem; }
+  .task-status-reason summary, .task-status-details > summary { color: var(--muted-foreground); }
+  .task-status-details > summary { min-height: 44px; }
+  .task-status-details, #task-control-details { margin: 1rem 0; }
+  .task-control-copy { min-width: 0; overflow-wrap: anywhere; }
+  [data-primary-action] { max-width: 100%; }
+
+  .task-live-build { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin: .75rem 0 0; font-size: .72rem; }
+  .task-live-build .live-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb,var(--success) 10%,transparent); }
+  .chat-action-card { padding: 0; overflow: hidden; }
+  .chat-action-card:not(details) { padding: 1rem 1.05rem; }
+  .chat-action-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.05rem; cursor: pointer; list-style: none; }
+  .chat-action-card > summary::-webkit-details-marker { display: none; }
+  .chat-action-card > summary > span:first-child { display: grid; gap: .18rem; }
+  .chat-action-card > summary strong { font-size: .92rem; }
+  .chat-action-card > summary small { color: var(--muted-foreground); font-size: .68rem; font-weight: 400; }
+  .chat-action-card[open] > summary { border-bottom: 1px solid var(--border); }
+  .chat-run-details { padding: .65rem .75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); background: color-mix(in srgb,var(--muted) 45%,transparent); }
+  .chat-run-details > summary { color: var(--muted-foreground); cursor: pointer; font-size: .68rem; }
+  .chat-run-details > .meta { margin-bottom: 0; }
+  .chat-decisions { display: grid; gap: .7rem; }
+  .chat-section-head { margin: .15rem .15rem 0; }
+  .chat-section-head h2 { margin: .2rem 0 0; font-size: 1rem; }
+  .chat-decisions .decide-card { margin: 0; background: var(--glass); box-shadow: var(--shadow); }
+  .chat-publication { margin: -.25rem .25rem .25rem; }
+  .chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .5rem .25rem 0; }
+  .chat-head h1 { margin-bottom: .2rem; font-size: 1.65rem; letter-spacing: -.04em; }
+  .chat-head .badge-running { margin-top: .2rem; background: color-mix(in srgb, var(--success) 11%, var(--glass)); color: var(--success); }
+  .chat-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; flex-wrap: wrap; }
+  .task-chat-head > div { min-width: 0; flex: 1; }
+  .chat-task-back { margin: 0 0 .55rem; font-size: .6875rem; }
+  .chat-task-back a { text-decoration: none; }
+  .task-chat-title-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+  .task-chat-title-line > div { min-width: 0; }
+  .chat-project-toggle {
+    display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .25rem .55rem;
+    color: var(--muted-foreground); font-size: .6875rem; box-shadow: none;
+  }
+  .chat-project-toggle svg { width: .9rem; height: .9rem; }
+  .chat-project-toggle .badge { padding-inline: .38rem; font-size: .6rem; }
+  .chat-budget {
+    display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.25rem;
+    color: var(--muted-foreground); font-size: .6875rem; font-variant-numeric: tabular-nums;
+  }
+  .chat-budget > span {
+    white-space: nowrap; padding: .32rem .58rem; border: 1px solid var(--glass-border);
+    border-radius: 999px; background: color-mix(in srgb, var(--glass) 74%, transparent);
+  }
+  /* Provider, model, and limits behind one quiet disclosure (UI polish 2026-09-13). */
+  .chat-limits { margin: .5rem 0 .75rem; padding: 0 .9rem; border-color: var(--glass-border); background: color-mix(in srgb, var(--glass) 70%, transparent); }
+  .chat-limits > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.5rem; padding: .45rem 0; font-size: .75rem; }
+  .chat-limits > summary .meta { font-size: .75rem; }
+  .chat-limits[open] { padding-bottom: .6rem; }
+  .chat-limits .chat-budget { margin: .2rem 0 .1rem; }
+  .chat-main .chat-limits + .chat-fleet-context, .chat-main .chat-fleet-context + .chat-limits { margin-top: .5rem; }
+  .chat-overview {
+    margin: 0 0 1.35rem; padding: 1rem; border-radius: calc(var(--radius) + 2px);
+    background: var(--glass);
+    box-shadow: var(--shadow);
+  }
+  .chat-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+  .chat-overview-head h2 { margin: .1rem 0 0; color: var(--foreground); font-size: .95rem; letter-spacing: -.02em; }
+  .chat-overview-head form { margin: 0; }
+  .chat-overview-head button, .chat-overview-link {
+    min-height: 2rem; padding: .25rem .7rem; font-size: .6875rem; text-decoration: none;
+  }
+  .chat-overview-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-top: .85rem; }
+  .chat-overview-stat {
+    display: flex; flex-direction: column; min-width: 0; padding: .65rem .7rem;
+    border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px);
+    background: color-mix(in srgb, var(--glass-strong) 64%, transparent); text-decoration: none;
+  }
+  @media (hover: hover) and (pointer: fine) { .chat-overview-stat:hover { background: var(--glass-strong); } }
+  .chat-overview-stat b { color: var(--foreground); font: 600 1.2rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
+  .chat-overview-stat span { overflow: hidden; color: var(--muted-foreground); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
+  .chat-overview-stat.attention b { color: var(--warning); }
+  .chat-overview-stat.live b { color: var(--running); }
+  .chat-overview-items { display: grid; gap: .35rem; margin-top: .7rem; }
+  .chat-overview-item {
+    display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center; gap: .6rem;
+    padding: .48rem .55rem; border-radius: calc(var(--radius) - 4px); color: inherit; text-decoration: none;
+  }
+  @media (hover: hover) and (pointer: fine) { .chat-overview-item:hover { background: color-mix(in srgb, var(--muted) 72%, transparent); } }
+  .chat-overview-icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .55rem; background: var(--muted); color: var(--muted-foreground); }
+  .chat-overview-icon svg { width: .9rem; height: .9rem; }
+  .chat-overview-item.decision .chat-overview-icon { color: var(--warning); background: var(--warning-soft); }
+  .chat-overview-item.failed .chat-overview-icon { color: var(--destructive); background: var(--destructive-soft); }
+  .chat-overview-item.running .chat-overview-icon { color: var(--running); background: var(--running-soft); }
+  .chat-overview-copy { min-width: 0; }
+  .chat-overview-copy strong, .chat-overview-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .chat-overview-copy strong { font-size: .75rem; font-weight: 500; }
+  .chat-overview-copy span { color: var(--muted-foreground); font-size: .65rem; margin-top: .05rem; }
+  .chat-overview-arrow { color: var(--muted-foreground); }
+  .chat-overview-clear { display: flex; align-items: center; gap: .45rem; margin: .8rem .2rem 0; color: var(--muted-foreground); font-size: .75rem; }
+  .chat-overview-note { margin: .65rem .2rem 0; font-size: .6875rem; }
+  .chat-readonly { margin-top: 1rem; padding: 1rem; }
+  .chat-projects {
+    position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 5rem); overflow-y: auto;
+    padding: 1rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) + 3px);
+    background: var(--glass); box-shadow: var(--shadow);
+  }
+  .chat-projects-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; padding: 0 .15rem; }
+  .chat-projects-head h2 { margin: 0; color: var(--foreground); font-size: .8125rem; letter-spacing: -.01em; }
+  .chat-project-close { display: none; margin-left: auto; width: 2rem; min-height: 2rem; padding: 0; font-size: 1rem; box-shadow: none; }
+  .chat-project-card {
+    padding: .8rem; margin-top: .5rem; border: 1px solid transparent; border-radius: var(--radius);
+    background: color-mix(in srgb, var(--muted) 58%, transparent);
+    transition: transform .16s ease, background .16s, border-color .16s, box-shadow .16s;
+  }
+  @media (hover: hover) and (pointer: fine) { .chat-project-card:hover {
+    border-color: var(--glass-border); background: color-mix(in srgb, var(--muted) 82%, transparent);
+    box-shadow: 0 12px 28px -24px rgb(0 0 0 / .8);
+  } }
+  .chat-project-name { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .45rem; }
+  .chat-project-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
+  .chat-project-name .mono { color: var(--running); font-size: .6875rem; }
+  .chat-project-name .badge { background: var(--glass); font-size: .625rem; }
+  .chat-project-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .55rem; margin-top: .65rem; }
+  .chat-project-stats span { color: var(--muted-foreground); font-size: .6875rem; white-space: nowrap; }
+  .chat-project-stats b { color: var(--foreground); font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
+  .chat-project-stats span.hot, .chat-project-stats span.hot b { color: var(--brand); }
+  .chat-project-actions { display: flex; gap: .35rem; margin-top: .65rem; }
+  .chat-project-actions form { margin-bottom: 0; }
+  .chat-project-actions button { min-height: 1.8rem; padding: .2rem .6rem; font-size: .6875rem; box-shadow: none; background: transparent; }
+  .thread {
+    display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0 1.25rem;
+    min-height: min(32rem, 48vh); padding: .25rem;
+  }
+  .thread .msg { max-width: 48rem; line-height: 1.65; overflow-wrap: anywhere; }
+  .chat-previous-divider { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; color: var(--so-muted); font-size: .8rem; }
+  .chat-previous-divider::before, .chat-previous-divider::after { content: ""; flex: 1; border-top: 1px solid var(--so-line); }
+  .thread .msg p { margin: .3rem 0; }
+  .thread .msg.op {
+    align-self: flex-end; max-width: min(82%, 40rem); padding: .75rem 1rem;
+    border: 1px solid var(--glass-border); border-radius: 1.2rem 1.2rem .35rem 1.2rem;
+    background: var(--user-message); color: var(--so-ink);
+    box-shadow: 0 10px 30px -24px rgb(0 0 0 / .9), 0 1px 0 rgb(255 255 255 / .07) inset;
+  }
+  .thread .msg.mate {
+    position: relative; align-self: stretch; padding: .75rem .5rem .75rem 3.45rem;
+    border: 0; background: transparent;
+  }
+  .thread .msg.mate::before {
+    content: "T"; position: absolute; top: .7rem; left: .1rem; width: 2.35rem; height: 2.35rem;
+    display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: .8rem;
+    background: var(--glass-strong);
+    color: var(--foreground); font: 600 .6875rem/1 var(--font-mono); letter-spacing: -.04em;
+    box-shadow: var(--so-pill-shadow);
+  }
+  .chat-copy > :first-child { margin-top: 0; }
+  .chat-copy > :last-child { margin-bottom: 0; }
+  .chat-copy p { margin: .35rem 0 .7rem; }
+  .chat-copy h3 { margin: 1rem 0 .35rem; color: var(--foreground); font-size: .8125rem; }
+  .chat-copy ul, .chat-copy ol { margin: .4rem 0 .75rem; padding-left: 1.3rem; }
+  .chat-copy li { margin: .24rem 0; padding-left: .15rem; }
+  .chat-message-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
+  .chat-message-foot time { color: var(--muted-foreground); font: 400 .625rem/1 var(--font-mono); white-space: nowrap; }
+  .chat-activity { display: flex; flex-wrap: wrap; gap: .3rem; }
+  .chat-activity span { padding: .15rem .42rem; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--muted-foreground); font: 400 .625rem/1.25 var(--font-mono); }
+  .proposal { margin: .9rem 0 0; padding: 0; overflow: hidden; background: var(--glass); }
+  .proposal-head { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .75rem .85rem; border-bottom: 1px solid var(--glass-border); }
+  .proposal-head > span:nth-child(2) { min-width: 0; }
+  .proposal-head strong, .proposal-head small { display: block; }
+  .proposal-head strong { font-size: .75rem; }
+  .proposal-head small { margin-top: .05rem; color: var(--muted-foreground); font-size: .625rem; }
+  .proposal-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; color: var(--running); background: var(--running-soft); }
+  .proposal-icon svg { width: 1rem; height: 1rem; }
+  .proposal-cancel .proposal-icon { color: var(--destructive); background: var(--destructive-soft); }
+  .proposal-answer .proposal-icon { color: var(--warning); background: var(--warning-soft); }
+  .proposal-repair .proposal-icon { color: var(--warning); background: var(--warning-soft); }
+  .proposal-body { padding: .85rem; }
+  .proposal-body h3 { margin: 0; color: var(--foreground); font-size: .9rem; letter-spacing: -.015em; }
+  .proposal-summary { margin: .45rem 0 0; color: var(--foreground); white-space: pre-wrap; }
+  .proposal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: .75rem 0 0; }
+  .proposal-facts div { min-width: 0; padding: .45rem .55rem; border-radius: calc(var(--radius) - 5px); background: color-mix(in srgb, var(--muted) 65%, transparent); }
+  .proposal-facts dt { color: var(--muted-foreground); font: 400 .6rem/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
+  .proposal-facts dd { margin: .18rem 0 0; overflow-wrap: anywhere; font-size: .72rem; }
+  .proposal-rationale { margin-top: .75rem; padding: .65rem .75rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) - 3px); background: var(--muted); }
+  .proposal-rationale strong { display: block; margin-top: .2rem; }
+  .proposal-rationale p { margin: .2rem 0 0; color: var(--muted-foreground); }
+  .proposal-disclosure { margin-top: .7rem !important; font-size: .6875rem; }
+  .proposal-actions { padding: 0 .85rem .85rem; }
+  .proposal-actions .acts { display: flex; align-items: center; gap: .5rem; }
+  .proposal-actions form { margin: 0; }
+  /* The confirm is the card's one primary; dismiss stays quiet (UI polish 2026-09-13). */
+  .proposal-actions .acts form:first-child button[type=submit] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  @media (hover: hover) and (pointer: fine) { .proposal-actions .acts form:first-child button[type=submit]:hover { background: color-mix(in srgb, var(--primary) 85%, var(--background)); border-color: color-mix(in srgb, var(--primary) 85%, var(--background)); } }
+  .proposal-actions .done, .proposal-actions .refused, .proposal-wait { margin: 0; padding: .55rem .65rem; border-radius: calc(var(--radius) - 5px); font-size: .72rem; }
+  .proposal-actions .done { color: var(--success); background: var(--success-soft); }
+  .proposal-actions .refused { color: var(--destructive); background: var(--destructive-soft); }
+  .proposal.confirmed { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
+  .proposal.refused { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
+  .proposal .done { color: var(--ok); }
+  .proposal .refused { color: var(--danger); }
+  .chat-empty { margin: auto; padding: clamp(3rem, 9vh, 6rem) 1rem 3rem; text-align: center; }
+  .chat-empty::before {
+    content: "T"; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.1rem;
+    border: 1px solid var(--glass-border); border-radius: 1.15rem;
+    background: var(--glass-strong);
+    box-shadow: var(--so-pill-shadow);
+    font: 600 .8rem/1 var(--font-mono); letter-spacing: -.05em;
+  }
+  .chat-empty > strong { display: block; font-size: 1.2rem; letter-spacing: -.025em; }
+  .chat-empty > .meta { margin-top: .4rem; }
+  .chat-prompts { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
+  /* The composer's status line takes no room until it has a state to report. */
+  .composer-hint:empty { display: none; }
+  .chat-prompts form { margin: 0; }
+  .chat-prompts button { min-height: 2.35rem; box-shadow: none; background: var(--glass); padding-inline: .9rem; }
+  /* The New update action (package 2): sticks above the composer, takes no
+     room while hidden, and is the only thing that moves a reader who sat
+     above the latest message when a live update landed. */
+  .chat-new-update-holder { position: sticky; bottom: 1rem; z-index: 28; display: flex; justify-content: center; height: 0; margin: 0; pointer-events: none; }
+  .chat-new-update { pointer-events: auto; transform: translateY(-100%); min-height: 2.35rem; padding-inline: .9rem; border-radius: 999px; box-shadow: var(--shadow-overlay); }
+  .chat-new-update[hidden] { display: none; }
+  /* The concise plan (package 2): a title, the outcome, one line of
+     counts and limits, then one Review plan disclosure over the unchanged
+     exact-terms form. */
+  .chat-approval-stale { margin: .75rem 0 0; }
+  .chat-approval-stale a { font-weight: 600; }
+  form.approve-form[data-stale="1"] .approval-confirm, form.approve-form[data-stale="1"] .approval-act { opacity: .55; }
+  .proposal-filed { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 0; }
+  .chat-thinking { display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem; }
+  .chat-thinking p { flex: 1; margin: 0; }
+  .chat-thinking p strong, .chat-thinking p span { display: block; }
+  .chat-thinking p span { margin-top: .08rem; }
+  .chat-thinking form { margin: 0; }
+  /* On a desk the overview is its own card — no second frame around it. */
+  .chat-fleet-context, .chat-fleet-context[open] { margin: 0; padding: 0; border: 0; background: transparent; }
+  .chat-fleet-context > summary { display: none; }
+  /* The summary's needs-you count is magenta wherever the summary shows (a count, by the law). */
+  .chat-fleet-context > summary .hot { color: var(--brand); font-weight: 600; }
+  @media (min-width: 761px) {
+    /* A fresh conversation on a desk (annotation on build 1540): the
+       overview folds behind one summary row that still carries its two
+       counts, and the empty state gives up its centering slack, so the whole
+       composer and its send control sit inside the first 1280×800 viewport. */
+    .chat-main:has(.chat-empty) .chat-fleet-context { margin: 0 0 .25rem; border: 1px solid var(--glass-border); border-radius: 1rem; background: color-mix(in srgb, var(--glass) 70%, transparent); }
+    .chat-main:has(.chat-empty) .chat-fleet-context[open] { padding-bottom: .5rem; }
+    .chat-main:has(.chat-empty) .chat-fleet-context > summary { display: flex; align-items: center; gap: .6rem; min-height: 2.5rem; padding: .5rem .9rem; color: var(--muted-foreground); font-size: .78rem; cursor: pointer; }
+    .chat-main:has(.chat-empty) .chat-fleet-context > summary::before { content: "▸"; flex: none; font-size: .7rem; }
+    .chat-main:has(.chat-empty) .chat-fleet-context[open] > summary::before { content: "▾"; }
+    .chat-main:has(.chat-empty) .chat-fleet-context > summary .meta { margin-left: auto; font-size: .68rem; white-space: nowrap; }
+    .chat-main:has(.chat-empty) .chat-fleet-context .chat-overview { margin: 0 .5rem; box-shadow: none; }
+    .chat-main:has(.chat-empty) .thread { min-height: 0; margin: .75rem 0 .75rem; }
+    .chat-main:has(.chat-empty) .chat-empty { padding: clamp(1.25rem, 4vh, 2.25rem) 1rem 1rem; }
+  }
+  .thinking-orb { position: relative; width: 2rem; height: 2rem; flex: none; border-radius: 999px; background: var(--running-soft); }
+  .thinking-orb::after { content: ""; position: absolute; inset: .55rem; border-radius: inherit; background: var(--running); animation: pulse 1.25s ease-in-out infinite; }
+  .composer {
+    display: flex; align-items: flex-end; gap: .75rem; padding: .7rem; margin-top: .5rem;
+    border-radius: 1.35rem; background: var(--glass-strong);
+  }
+  .composer label { flex: 1; min-width: 0; margin: 0; font-size: 0; }
+  .composer textarea {
+    width: 100%; min-height: 3.5rem; max-height: 13rem; margin: 0; padding: .75rem .85rem;
+    resize: vertical; border: 0; background: transparent; box-shadow: none; font-size: 1rem;
+  }
+  .composer textarea:focus-visible { border: 0; box-shadow: none; }
+  @media (hover: hover) and (pointer: fine) { .composer textarea:hover { border: 0; box-shadow: none; } }
+  .composer button {
+    flex: 0 0 2.75rem; width: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 999px;
+    font-size: 0; box-shadow: 0 10px 24px -16px rgb(255 255 255 / .65);
+  }
+  .composer button::after { content: "↑"; font: 600 1.15rem/1 var(--font-sans); }
+  .chat-main > details { margin-top: 1rem; background: color-mix(in srgb, var(--glass) 70%, transparent); }
+  @media (min-width: 761px) {
+    /* Keep the desktop composer in the document flow. A sticky bottom
+     * constraint pulled it over proposal cards on long conversations (and
+     * into the middle of full-page captures), hiding the very acts it asks
+     * the operator to confirm. The #latest anchor still brings this form
+     * into view after every turn without making it an overlay. */
+    .chat-workspace .composer { position: static; width: 100%; box-shadow: var(--shadow); }
+    /* The agents summary is said ONCE per screen (v48): the context panel
+     * carries it on desktop, so the compact strip — the phone's copy —
+     * steps aside wherever that panel is visible. */
+    .task-chat-workspace .task-chat-agents { display: none; }
+  }
+  @media (min-width: 761px) and (max-width: 1199px) {
+    .chat-workspace { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
+    .chat-main { max-width: none; }
+    .chat-projects { display: none; }
+    .chat-workspace.projects-open::before {
+      content: ""; position: fixed; inset: 0 0 0 232px; z-index: 23; background: rgb(0 0 0 / .18);
+    }
+    .chat-workspace.projects-open .chat-projects {
+      display: block; position: fixed; top: 4rem; left: calc(232px + 1.25rem); z-index: 25;
+      width: min(18.5rem, calc(100vw - 232px - 2.5rem)); max-height: calc(100vh - 5rem);
+    }
+    .app.sidebar-collapsed .chat-workspace.projects-open::before { inset: 0 0 0 64px; }
+    .app.sidebar-collapsed .chat-workspace.projects-open .chat-projects { left: calc(64px + 1.25rem); }
+    .chat-project-close { display: grid; place-items: center; }
+  }
+  @media (min-width: 900px) and (max-width: 1199px) {
+    .task-chat-workspace { grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr); gap: 1.25rem; }
+  }
+  @media (max-width: 760px) {
+    main:has(.chat-workspace) { padding: 1rem max(1rem, env(safe-area-inset-right, 0rem)) calc(var(--composer-height, 4rem) + 5rem + env(safe-area-inset-bottom, 0rem)) max(1rem, env(safe-area-inset-left, 0rem)); }
+    /* Above the fixed composer and the tab bar, never beneath them. */
+    .chat-new-update-holder { bottom: calc(var(--composer-height, 4rem) + 4.5rem + env(safe-area-inset-bottom, 0rem)); }
+    .chat-main:has(.proposal.pending) .chat-new-update-holder, .chat-main:has(.chat-empty) .chat-new-update-holder { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0rem)); }
+    .chat-workspace, .chat-workspace.projects-hidden { display: block; }
+    .chat-workspace.projects-hidden .chat-projects, .chat-projects { display: none; }
+    .chat-project-toggle { display: inline-flex; min-height: 2.75rem; }
+    .chat-project-close { display: grid; place-items: center; min-height: 2.75rem; min-width: 2.75rem; }
+    .chat-workspace.projects-open::before { content: ""; position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / .18); }
+    .chat-workspace.projects-open .chat-projects { display: block; position: fixed; top: 5rem; left: 1rem; right: 1rem; width: auto; max-height: calc(100dvh - 10rem); overflow-y: auto; overscroll-behavior: contain; z-index: 31; background: var(--card); }
+    .chat-project-list { display: grid; gap: 0; padding: 0; }
+    .chat-project-card {
+      margin: 0; padding: .85rem .4rem; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent;
+    }
+    .chat-projects { position: static; max-height: none; overflow: hidden; padding: .65rem; margin-bottom: .85rem; }
+    .chat-projects-head { margin-bottom: .35rem; }
+    .chat-project-stats { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin-top: .35rem; }
+    .chat-project-stats span { font-size: .625rem; }
+    .chat-project-stats span:last-child { display: none; }
+    .chat-project-actions { margin-top: .5rem; }
+    .chat-project-actions button { min-height: 2.75rem; padding-inline: .85rem; font-size: .8125rem; }
+    .chat-head { padding-inline: 0; }
+    .chat-head h1 { font-size: 1.4rem; }
+    .chat-head-actions { align-items: flex-start; }
+    .task-chat-workspace .task-chat-context { display: none; }
+    .result-panel { padding: .25rem 0 1rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
+    .result-head { display: grid; gap: .45rem; }
+    .result-head .status-line { justify-self: start; }
+    .result-tabs { gap: 0; }
+    .result-tabs a { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 .25rem; font-size: .8125rem; gap: .3rem; white-space: nowrap; min-height: 2.75rem; overflow: hidden; }
+    .result-facts { grid-template-columns: 1fr; }
+    .result-request .diff-comment-form button, .result-request .revision-from-comments button { width: 100%; }
+    .result-action .button-link, .result-action form button { width: 100%; box-sizing: border-box; min-height: 2.75rem; }
+    .result-request .revision-from-comments { display: grid; }
+    .result-links { display: grid; gap: 0; }
+    .result-links a { min-height: 2.75rem; display: inline-flex; align-items: center; }
+    .result-links a + a::before { content: none; }
+    .task-chat-head { display: block; }
+    .task-chat-head > .badge { display: none; }
+    .task-chat-title-line { display: grid; gap: .65rem; }
+    .task-chat-title-line .task-view-switch { justify-self: start; }
+    #task-chat-live { gap: .75rem; }
+    .task-journey { padding: .85rem; }
+    .task-journey > ol { margin: .85rem -.2rem .65rem; }
+    .task-journey > ol::before { left: 9%; right: 9%; }
+    .task-journey li { font-size: .56rem; }
+    .task-journey li i { width: 1.25rem; height: 1.25rem; }
+    .chat-action-card > summary { align-items: flex-start; padding: .85rem; }
+    .chat-action-card > summary .button-link { min-height: 2.1rem; padding-inline: .6rem; font-size: .65rem; white-space: nowrap; }
+    .chat-action-card > summary small { max-width: 14rem; }
+    .chat-budget { gap: .3rem; margin: .65rem 0 .9rem; }
+    .chat-budget > span { padding: .25rem .48rem; }
+    .chat-budget > span:first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+    .chat-overview { padding: .8rem; }
+    .chat-fleet-context { margin: .5rem 0 .75rem; border: 1px solid var(--glass-border); border-radius: 1rem; background: var(--glass); }
+    .chat-fleet-context[open] { padding-bottom: .25rem; }
+    .chat-fleet-context > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .75rem .9rem; color: var(--muted-foreground); font-size: .8rem; cursor: pointer; }
+    .chat-fleet-context > summary::before { content: "▸"; flex: none; margin-right: .35rem; font-size: .7rem; }
+    .chat-fleet-context[open] > summary::before { content: "▾"; }
+    .chat-fleet-context > summary .meta { margin-left: auto; font-size: .68rem; white-space: nowrap; }
+    .chat-fleet-context .chat-overview { border: 0; box-shadow: none; margin: 0; }
+    .chat-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .chat-overview-head { align-items: flex-start; }
+    .chat-overview-copy strong, .chat-overview-copy span { white-space: normal; }
+    .thread { min-height: 18rem; padding: 0; }
+    .thread .msg.op { max-width: 90%; }
+    .thread .msg.mate { padding-left: 2.8rem; padding-right: 0; }
+    .thread .msg.mate::before { width: 2.15rem; height: 2.15rem; border-radius: .7rem; }
+    .proposal-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .proposal-actions .acts { align-items: stretch; flex-direction: row; flex-wrap: wrap; }
+    .proposal-actions .acts form { flex: 1 1 8rem; width: auto; }
+    .proposal-actions .acts form:has(.arm) { flex-basis: 100%; }
+    .proposal-actions .acts button { width: 100%; }
+    .chat-prompts {
+      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: .5rem; width: 100%; max-width: 100%; overflow: visible; padding: 0;
+    }
+    .chat-prompts form, .chat-prompts button { min-width: 0; width: 100%; }
+    .chat-prompts form:last-child:nth-child(odd) { grid-column: 1 / -1; }
+    .chat-main { padding-bottom: 0; }
+    .chat-main #latest { scroll-margin-top: 7rem; }
+    .chat-workspace .composer {
+      position: fixed; left: 1rem; right: 1rem; bottom: calc(3.75rem + env(safe-area-inset-bottom, 0rem));
+      z-index: 29; margin: 0; padding: .45rem; border-radius: 1.1rem; box-shadow: var(--shadow-overlay);
+    }
+    /* A confirmation is the primary act. Let the composer return to the
+       document flow while one is pending so it can never cover the card's
+       explanation or buttons on a short phone viewport. */
+    .chat-main:has(.proposal.pending) { padding-bottom: 0; }
+    .chat-main:has(.proposal.pending) .composer { position: static; width: 100%; margin-top: .5rem; }
+    /* …and the suggestion chips step aside for the same reason: on a phone
+       the card, its buttons, and the composer then share one screen. */
+    .chat-main:has(.proposal.pending) .chat-prompts { display: none; }
+    /* First use is one cohesive intake card: prompt, suggestions, then the
+       box. A fixed box belongs to an established thread; here it would sit
+       above the very question it is asking the person to answer. */
+    .chat-main:has(.chat-empty) { padding-bottom: 0; }
+    .chat-main:has(.chat-empty) .thread { min-height: 0; margin-bottom: .5rem; }
+    .chat-main:has(.chat-empty) .chat-empty {
+      width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 2rem 0 .75rem;
+    }
+    .chat-main:has(.chat-empty) .chat-empty > strong,
+    .chat-main:has(.chat-empty) .chat-empty > .meta { max-width: 22rem; margin-inline: auto; }
+    .chat-main:has(.chat-empty) .chat-empty > .meta { margin-top: .45rem; }
+    .chat-main:has(.chat-empty) .composer { position: static; width: 100%; margin-top: .5rem; }
+    .composer textarea { min-height: 2.75rem; padding: .55rem .65rem; font-size: 1rem; }
+    /* Hide bottom navigation only when viewport shrink indicates a soft
+       keyboard; hardware-keyboard focus and pinch zoom keep it available. */
+    html[data-mobile-keyboard] .tabbar { display: none; }
+    html[data-mobile-keyboard] .chat-workspace .composer { bottom: calc(var(--keyboard-inset, 0px) + .5rem); }
+    /* The raised composer needs the same room beneath the thread as the
+       resting one, or the newest message hides behind it while typing. */
+    html[data-mobile-keyboard] main:has(.chat-workspace) { padding-bottom: calc(var(--keyboard-inset, 0px) + var(--composer-height, 4rem) + 1.5rem); }
+    html[data-mobile-keyboard] main:has(.chat-workspace) :is(input, textarea, button, summary, a) { scroll-margin-block: 6rem calc(var(--keyboard-inset, 0px) + var(--composer-height, 4rem) + 1.5rem); }
+    html[data-mobile-keyboard] .chat-new-update-holder { bottom: calc(var(--keyboard-inset, 0px) + var(--composer-height, 4rem) + 1rem); }
+    html[data-mobile-keyboard] .sticky-actions { bottom: .5rem; }
+    .work-tools { display: block; }
+    .work-tools > summary, .work-tools-menu a, .work-views a { min-height: 2.75rem; }
+    .work-tools-menu a { display: flex; align-items: center; }
+    main :is(input, textarea, button, summary, a) { scroll-margin-block: 6rem calc(var(--composer-height, 4rem) + 5rem); }
+  }
+  main:has(.mate-mint) { max-width: 68rem; }
+  main:has(.mate-mint) > h1 { margin-top: .5rem; font-size: 1.7rem; letter-spacing: -.04em; }
+  .mate-mint { position: relative; max-width: 46rem; margin-top: 1.5rem; padding: 1.5rem; border-radius: calc(var(--radius) + 4px); }
+  .mate-mint::before {
+    content: "T"; position: absolute; top: 1.4rem; left: 1.4rem; width: 3rem; height: 3rem;
+    display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 1rem;
+    background: var(--glass-strong);
+    box-shadow: var(--so-pill-shadow);
+    font: 600 .75rem/1 var(--font-mono); letter-spacing: -.05em;
+  }
+  .mate-mint > p:first-child { min-height: 3rem; margin: 0; padding: .15rem 0 1.25rem 4rem; font-size: .95rem; }
+  .mate-mint > p:first-child strong { display: block; margin-bottom: .2rem; font-size: 1.1rem; letter-spacing: -.02em; }
+  .mate-mint form { border-top: 1px solid var(--glass-border); padding-top: .5rem; }
+  /* The start act is the page's one primary (UI polish 2026-09-13). */
+  .mate-mint form > button[type=submit] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
+  @media (hover: hover) and (pointer: fine) { .mate-mint form > button[type=submit]:hover { background: color-mix(in srgb, var(--primary) 85%, var(--background)); border-color: color-mix(in srgb, var(--primary) 85%, var(--background)); } }
+  .mate-terms { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; padding: .35rem 0; }
+  .mate-terms .inline-field { white-space: nowrap; }
+  button.quiet { background: transparent; color: var(--fg-muted); border-color: var(--border); }
+  .answer-options { list-style: none; padding: 0; margin: 0.4rem 0; }
+  .answer-options li { padding: 0.35rem 0.6rem; border-left: 1px solid var(--border); margin: 0.25rem 0; }
+  .answer-options li.picked { border-left-color: var(--foreground); }
+  .shared-action { max-width: 49rem; overflow-wrap: anywhere; }
+  .shared-action form { margin-top: 1.5rem; }
+  .shared-action label.arm { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding-block: .4rem; }
+  .shared-action label.arm input { flex: none; width: 20px; height: 20px; }
+  .shared-action button { white-space: nowrap; }
+  .proposal label.arm { display: inline-flex; gap: 0.35rem; align-items: center; margin-right: 0.5rem; font-size: 0.85rem; }
+  .coordinator-proposals .card { margin: 0.5rem 0; }
+  .workspace-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
+  .workspace-head .workspace-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-family: var(--font-mono); font-size: .8125rem; }
+  .workspace-head .badge { flex: none; }
+  .workspace-head form { margin: 0 0 0 auto; }
+  .workspace-head form button { min-height: 2rem; padding: 0 .625rem; font-size: .75rem; width: auto; }
+  .workspace-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; margin-top: .625rem; }
+  .workspace-stats .pulse-stat {
+    color: var(--muted-foreground); font-size: .6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    background: var(--muted); border-radius: calc(var(--radius) - 4px); padding: .375rem .5rem; text-align: center;
+  }
+  .workspace-stats .pulse-stat b { display: block; color: var(--foreground); font-weight: 600; font-family: var(--font-mono); font-size: 1.125rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
+  .workspace-stats .pulse-stat.hot b { color: var(--brand); }
+  .workspace-bar { display: flex; gap: 2px; height: .375rem; margin-top: .625rem; border-radius: 9999px; overflow: hidden; background: var(--muted); }
+  .workspace-bar .seg { flex: 1 1 0; }
+  .workspace-bar .seg.attention { background: var(--brand); }
+  .workspace-bar .seg.building { background: var(--running); }
+  .workspace-bar .seg.waiting { background: var(--muted-foreground); }
+  .workspace-bar .seg.queued { background: color-mix(in srgb, var(--muted-foreground) 45%, transparent); }
+  .attention-stack { display: grid; gap: .55rem; }
+  .attention-stack .decide-card { margin: 0; }
+  .attention-stack .q { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
+  .wb-rail-head {
+    display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem;
+    padding: 0 .15rem .6rem; border-bottom: 1px solid var(--border);
+  }
+  .wb-rail-head h2 { margin: .1rem 0 0; color: var(--foreground); font-size: .875rem; letter-spacing: -.01em; text-transform: none; font-family: var(--font-sans); }
+  .wb-rail-head a { font-size: .75rem; color: var(--muted-foreground); }
+  .wb-group { margin-top: 1.05rem; }
+  .wb-group > h2 {
+    display: flex; align-items: center; justify-content: space-between; margin: 0 .2rem .35rem;
+    font-size: .65rem;
+  }
+  .wb-group > h2 .lane-count { border: 1px solid var(--border); border-radius: 999px; padding: .04rem .42rem; }
+  .wb-row {
+    display: block; padding: .58rem .65rem; margin: .16rem 0; border: 1px solid transparent;
+    border-radius: calc(var(--radius) - 4px); color: inherit; text-decoration: none;
+  }
+  @media (hover: hover) and (pointer: fine) { .wb-row:hover { background: var(--card); border-color: var(--border); } }
+  .wb-row.wb-selected { background: var(--muted); border-color: var(--border); }
+  .wb-row .wb-title { display: block; font-size: .8125rem; font-weight: 500; line-height: 1.35; }
+  .wb-row .wb-meta { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .22rem; }
+  .wb-row .badge { padding: .04rem .42rem; font-size: .65rem; }
+  .wb-row .wb-reason { display: block; color: var(--muted-foreground); font-size: .72rem; margin-top: .22rem; line-height: 1.35; }
+  @media (max-width: 720px) {
+    .control-room-head { display: block; }
+    .control-room-head .actions { justify-content: flex-start; margin-top: .75rem; }
+    .command-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .workspace-pulse { grid-template-columns: 1fr; }
+    .workspace-stats .pulse-stat { padding: .375rem .125rem; font-size: .625rem; letter-spacing: -.01em; }
+    .permission-toggle { grid-template-columns: 1fr; }
+    .task-intake { margin-top: .25rem; }
+    .task-intake-hero { text-align: left; margin-bottom: .9rem; }
+    .task-intake-mark { display: none; }
+    .task-composer { margin-inline: 0; padding: .55rem; border-radius: 1.15rem; }
+    .task-prompt textarea { min-height: 7.25rem; padding: .75rem; font-size: 1rem; }
+    .task-composer-footer { flex-wrap: wrap; }
+    .task-context { order: 1; flex-basis: calc(100% - 7rem); }
+    .task-context-chip:first-child { max-width: 9.5rem; }
+    .task-context-chip:nth-child(2) { display: none; }
+    .task-quality { order: 2; }
+    .task-submit { order: 3; width: 100%; }
+    .task-options { order: 4; }
+    .task-options-grid { grid-template-columns: 1fr; }
+    .task-options-grid .wide, .task-options-grid .permission-field { grid-column: auto; }
+    .agents-form { grid-template-columns: 1fr; }
+    .agents-roles { grid-template-columns: 1fr; }
+    .agents-role-row { grid-template-columns: 1fr; }
+    .approval-card { padding: 1rem; }
+    /* The orientation block says the wait on a phone; the kicker would say it twice. */
+    .approval-card .approval-kicker { display: none; }
+    .approval-boundaries, .approval-confirm { grid-template-columns: 1fr; }
+    /* The approval stays IN FLOW on phones: the password field comes
+       first and the button follows it — never a sticky control floating
+       over the field it confirms. */
+    .approval-confirm .sticky-actions { position: static; margin-top: 0; padding: 0; border-top: 0; }
+  }
+
+  /* Runner lanes (queue + fleet): one column per worker. */
+  .content > main:has(.lanes) { max-width: none; }
+  .lanes {
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    gap: .625rem; padding-bottom: .75rem; align-items: start;
+  }
+  @media (max-width: 40rem) {
+    .lanes { display: flex; flex-direction: column; }
+    .lanes .lane { min-height: 0; }
+  }
+  .runner-note { width: 100%; }
+  .queue-handle {
+    display: inline-flex; align-items: center; justify-content: center; flex: none;
+    width: 2rem; height: 2rem; margin: -.375rem .125rem -.375rem -.5rem; vertical-align: middle;
+    color: var(--muted-foreground); cursor: grab; user-select: none; touch-action: none; border-radius: calc(var(--radius) - 4px);
+  }
+  .queue-handle svg { width: 1.125rem; height: 1.125rem; }
+  .queue-handle:active { cursor: grabbing; background: var(--muted); }
+  .icon-button, .inline button.icon-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; min-width: 2.75rem; padding: 0; }
+  .icon-button svg { width: 1rem; height: 1rem; }
+  .queue-card p { margin: 0; }
+  .queue-card a { text-decoration: none; }
+  @media (hover: hover) and (pointer: fine) { .queue-card a:hover { text-decoration: underline; } }
+  .queue-card .row + .row { margin-top: .125rem; border-bottom: none; }
+  .queue-card p.row { padding: 0; border-bottom: none; }
+  .tracks { margin-top: 1.5rem; }
+  .tracks > .hint { margin-bottom: .75rem; }
+  .track-row { margin-bottom: .6rem; }
+  .track-row p { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
+  .track-row p .right { margin-left: auto; }
+  .track-row a { text-decoration: none; }
+  @media (hover: hover) and (pointer: fine) { .track-row a:hover { text-decoration: underline; } }
+  .track-strip { display: inline-flex; gap: .3rem; align-items: center; vertical-align: middle; }
+  .fire {
+    display: inline-block; width: .65rem; height: .65rem; border-radius: 50%;
+    background: var(--muted);
+  }
+  .fire-ok { background: var(--success); }
+  .fire-bad { background: var(--destructive); }
+  .fire-live { background: var(--running); animation: pulse 1.6s ease-in-out infinite; }
+  .fire-skip { background: transparent; border: 1.5px solid var(--muted); }
+
+/* the phone: fingers, not cursors — tested at 320/390px */
+input, select, textarea { font-size: 16px; }
+button { min-height: 44px; }
+@media (max-width: 40rem) {
+  form.card button[type=submit], form > button[type=submit] { width: 100%; }
+  input[type=text], input[type=password] { width: 100%; max-width: 100%; box-sizing: border-box; }
+  main { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
+  /* Task actions are composed for a thumb, not allowed to wrap according
+     to their intrinsic text widths. Every row owns the available width. */
+  .task-title-row { display: grid; gap: .6rem; margin-bottom: .8rem; }
+  .task-title-row .task-main-title { margin-bottom: 0; }
+  .task-title-row .task-view-switch { justify-self: start; }
+  .task-main-title { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .4rem; }
+  .dispatch-copy { display: grid; gap: .2rem; }
+  .dispatch-copy > strong { line-height: 1.35; }
+  .dispatch-action-link, details.dispatch-recovery > summary { width: 100%; box-sizing: border-box; justify-content: center; }
+  .proof-review-actions { display: grid; }
+  .proof-review-actions > .button-link { width: 100%; box-sizing: border-box; text-align: center; }
+  details.proof-exception[open] { width: 100%; }
+  .dispatch-recovery-body { padding: .7rem; }
+  .dependency-repair-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .75rem; }
+  .dependency-repair-actions form { display: flex; width: 100%; max-width: none; margin: 0; }
+  .dependency-repair-actions form > button[type=submit] { width: 100%; }
+  .dependency-repair-actions .dependency-repair-replace {
+    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem;
+  }
+  .dependency-repair-actions .dependency-repair-label { width: 100%; min-width: 0; }
+  .dependency-repair-actions .dependency-repair-label > select { width: 100%; min-width: 0; max-width: none; }
+  .dependency-repair-actions .dependency-repair-replace > button[type=submit] { width: auto; }
+  .acts-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: .75rem 0 .35rem; }
+  .acts-bar > *, .acts-bar form.inline { min-width: 0; margin: 0; }
+  .acts-bar .primary { display: block; width: 100%; }
+  .acts-bar .primary form { width: 100%; margin: 0; }
+  .acts-bar .primary form.inline > button[type=submit] { width: 100%; margin: 0; }
+  .acts-bar .act-hold {
+    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
+    gap: .5rem; width: 100%;
+  }
+  .acts-bar .act-hold input[type=text] { width: 100%; min-width: 0; margin: 0; }
+  .acts-bar .act-hold > button[type=submit] { width: auto; white-space: nowrap; }
+  .acts-why { margin: .25rem 0 .85rem; font-size: .75rem; line-height: 1.5; }
+  .acts-why-plan { display: none; }
+  .task-scope-needed { padding: .85rem 1rem; }
+  .task-scope-needed p { margin: .2rem 0; }
+  .receipt-head { display: grid; gap: .45rem; }
+  .receipt-head .status-line { justify-self: start; }
+  .receipt-facts { grid-template-columns: 1fr; }
+  .receipt-actions { display: grid; grid-template-columns: 1fr; }
+  .receipt-actions .button-link { width: 100%; box-sizing: border-box; text-align: center; }
+  /* The cockpit already stacks at 980px (above); only the phone-width
+     act card and section padding are decided here. */
+  .cockpit-detail { grid-row: 1; }
+  .cockpit-queue { grid-row: 2; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--border); border-bottom: 0; }
+  .cockpit-next { display: grid; }
+  .cockpit-next form, .cockpit-next .button-link { width: 100%; box-sizing: border-box; }
+  .cockpit-next form input[type=text] { flex: 1 1 100%; }
+  .cockpit-next form button[type=submit] { width: 100%; }
+  .cockpit-section { padding: .85rem .8rem; }
+  .cockpit-disclosure { padding: 0; }
+  .cockpit-disclosure > summary { padding: .8rem; }
+  .cockpit-disclosure-body { padding: 0 .8rem .85rem; }
+  .cockpit-accept-form { display: grid; }
+  .cockpit-accept-form button { width: 100%; }
+  .diff-review { margin-inline: -.1rem; }
+  .diff-review-bar { padding-left: .7rem; }
+  .diff-file > summary { padding-inline: .7rem; }
+  .diff-line { grid-template-columns: 2.75rem 2.65rem 2.65rem minmax(max-content, 1fr); min-height: 2.75rem; }
+  .diff-annotate, .diff-annotate-space { width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; }
+  .diff-review[data-mode="view"] .diff-line { grid-template-columns: 0 2.65rem 2.65rem minmax(max-content, 1fr); }
+  .diff-review[data-mode="view"] .diff-annotate,
+  .diff-review[data-mode="view"] .diff-annotate-space { width: 0; min-width: 0; }
+  .diff-line code, .diff-gutter { padding-top: .72rem; padding-bottom: .72rem; }
+  .diff-comment-target { grid-template-columns: minmax(0, 1fr) 4.75rem; }
+  .diff-comment-form button { width: 100%; }
+  .revision-from-comments { display: grid; }
+  .revision-from-comments button { width: 100%; }
+  /* A decision option on a phone: the answer is the full-width thumb
+     target; its recommendation and consequence share the line beneath. */
+  .decide-option > button { flex: 0 0 100%; width: 100%; }
+  .decide-option .badge { flex: none; }
+  .decide-option .meta { flex: 1 1 10rem; }
+  /* A queue card's controls read as one row under the id: to-front · reserve (stretching) · move. */
+  .queue-card p.row.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+  .queue-card p.row.meta > .mono { flex: 0 0 100%; }
+  .queue-card .inline { margin: 0; display: inline-flex; align-items: center; gap: .375rem; }
+  .queue-card .inline:last-child { flex: 1 1 auto; min-width: 0; }
+  .queue-card .inline > button[type=submit]:not(.icon-button) { width: auto; }
+  .queue-card .inline select { flex: 1 1 6rem; min-width: 0; width: auto; min-height: 2.75rem; margin: 0; }
+  .queue-card .mono { overflow-wrap: anywhere; }
+  .queue-card .row + .row { margin-top: .5rem; }
+  /* The title sits beside the grip and wraps within its own box; the
+     chips flow after it, never above the name. */
+  .queue-card p.row > a:first-of-type { flex: 1 1 12rem; min-width: 0; }
+}
+/* A phone reads a long changed line wrapped, never scrolled sideways: the
+   line keeps its numbers and marker, the code column takes what is left. */
+@media (max-width: 760px) {
+  .diff-lines { overflow-x: visible; }
+  .diff-line, .diff-review .diff-line { min-width: 0; grid-template-columns: 2.75rem 2.65rem 2.65rem minmax(0, 1fr); }
+  .diff-review[data-mode="view"] .diff-line { grid-template-columns: 0 2.65rem 2.65rem minmax(0, 1fr); }
+  .diff-line code { white-space: pre-wrap; overflow-wrap: anywhere; }
+  .diff-hunk-head { overflow-x: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
+}
+@media (max-width: 30rem) {
+  .dependency-repair-actions .dependency-repair-replace { grid-template-columns: minmax(0, 1fr); }
+  .dependency-repair-actions .dependency-repair-replace > button[type=submit] { width: 100%; }
+}
+@media (max-width: 26rem) {
+  .acts-bar .act-hold { grid-template-columns: minmax(0, 1fr); }
+  .acts-bar .act-hold > button[type=submit] { width: 100%; }
+}
+.next-pager { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 .75rem; }
+.next-pager .skip {
+  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
+  padding: 0 .875rem; border: 1px solid var(--border); border-radius: 999px;
+  text-decoration: none; color: var(--foreground); background: var(--card);
+}
+@media (hover: hover) and (pointer: fine) { .next-pager .skip:hover { border-color: color-mix(in srgb, var(--border) 60%, var(--muted-foreground)); } }
+
+/* Motion: only where a human caused the change — navigation, presses,
+   overlays. Liveness swaps stay instant; the pulse dot is the one "alive"
+   signal. Everything dies under prefers-reduced-motion; auto-refresh pages
+   opt out of the navigation cross-fade separately (see shell()). */
+@view-transition { navigation: auto; }
+/* A page change fades THROUGH, not across: the old page leaves before the new
+   one arrives, so two pages' text is never on screen at once. The sidebar,
+   the same on both, swaps in place instead of fading (each shell names its
+   own, so a page can never carry the name twice). */
+::view-transition-old(root) { animation: so-page-leave 80ms ease-in both; }
+::view-transition-new(root) { animation: so-page-arrive 140ms ease-out 60ms both; }
+@keyframes so-page-leave { to { opacity: 0; } }
+@keyframes so-page-arrive { from { opacity: 0; } }
+.side { view-transition-name: so-nav-page; }
+.so-sidebar { view-transition-name: so-nav-app; }
+::view-transition-group(so-nav-page), ::view-transition-group(so-nav-app),
+::view-transition-old(so-nav-page), ::view-transition-new(so-nav-page),
+::view-transition-old(so-nav-app), ::view-transition-new(so-nav-app) { animation: none; }
+/* UI polish 2026-09-13 — the motion contract. Feedback transitions run
+   140–200 ms on color, border, shadow, opacity, and transform only; an
+   overlay's entrance is at most 220 ms of opacity + transform. Nothing
+   animates a width, height, margin, grid track, or blur, and nothing
+   pulses for decoration. The reduce block below is universal: every
+   animation and transition dies, and no page reads differently for it. */
+@media (prefers-reduced-motion: no-preference) {
+  .tabbar a, .side nav a { transition: color .15s, background .15s; }
+  button:active { transform: scale(.985); }
+  /* Anchor buttons press like buttons; nav links fill instead. The palette
+     and shortcuts overlay are keyboard-summoned, so they appear at once. */
+  .button-link, .side .new-task, .content .new-task, .result-feedback-link, .next-pager .skip { transition: transform 160ms var(--so-ease-out); }
+  :is(.button-link, .side .new-task, .content .new-task, .result-feedback-link, .next-pager .skip):active { transform: scale(.985); }
+  .chat-workspace.projects-open .chat-projects { animation: rise 200ms ease-out; }
+  .chat-workspace.projects-open::before { animation: fade 180ms ease-out; }
+  .switcher[open] .switcher-menu { animation: rise 160ms ease-out; }
+  @media (hover: hover) and (pointer: fine) {
+    .lane-card, .decide-card, .menu-row, .chat-overview-item, .proposal { transition: border-color .15s, transform .15s, box-shadow .15s; }
+    .lane-card:hover, .decide-card:hover, .menu-row:hover {
+     
+      box-shadow: 0 2px 8px -2px rgb(0 0 0 / .35);
+    }
+  }
+}
+@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
+@keyframes fade { from { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
+  button:active, :is(.button-link, .side .new-task, .content .new-task, .result-feedback-link, .next-pager .skip):active { transform: none; }
+  @media (hover: hover) and (pointer: fine) { button:hover, .side nav a:hover, .chat-project-card:hover, .lane-card:hover, .decide-card:hover, .menu-row:hover { transform: none; } }
+}
+
+/* The shortcuts overlay: display-only, toggled by the chrome layer, absent
+   from sensitive pages. */
+.kbd-help {
+  position: fixed; top: 18vh; left: 50%; transform: translateX(-50%); width: min(26rem, 92vw);
+  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+  box-shadow: var(--shadow-overlay);
+  padding: 1rem 1.25rem; z-index: 50;
+}
+.kbd-help h2 { margin: 0 0 .5rem; font-size: .8125rem; }
+.kbd-help table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
+.kbd-help td { padding: .25rem 0; vertical-align: top; }
+.kbd-help td:first-child { width: 7.5rem; color: var(--muted-foreground); white-space: nowrap; }
+.kbd-help kbd {
+  font-family: var(--font-mono); font-size: .75rem; background: var(--muted);
+  border: 1px solid var(--border); border-radius: .3rem; padding: .05rem .35rem;
+}
+@media (max-width: 760px) {
+  .kbd-help {
+    top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto;
+    border-radius: var(--radius) var(--radius) 0 0;
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0rem));
+  }
+}
+
+/* The per-file comment button: a small real button beside a diff row. */
+button.pick-file { min-height: 1.75rem; padding: 0 .55rem; font-size: .75rem; }
+
+/* Sticky ceremony actions: single-primary-action forms keep their submit
+   within thumb reach on phones. Desktop: plain flow. */
+@media (max-width: 760px) {
+  .sticky-actions {
+    position: sticky; bottom: calc(3.5rem + env(safe-area-inset-bottom, 0rem)); z-index: 20;
+    background: var(--background); border-top: 1px solid var(--border);
+    padding: .625rem 0; margin-top: .75rem;
+  }
+  .sticky-actions button { margin: 0; }
+}
+
+/* A time a person reads (when-html.ts): the full stamp on a desk, the short
+   one on a phone; the full stamp stays in the title. */
+.so-when-short { display: none; }
+@media (max-width: 760px) {
+  .so-when-full { display: none; }
+  .so-when-short { display: inline; }
+  /* Server pages outside the workspace keep the same phone rhythm. */
+  main { padding: var(--so-phone-gap) var(--so-phone-gutter) 3rem; }
+  h2 { margin: 1.25rem 0 .375rem; }
+  .card { padding: var(--so-phone-card); margin: var(--so-phone-row) 0; }
+  .problem { padding: .5rem .625rem; margin: var(--so-phone-row) 0; }
+  .meta, .hint { line-height: 1.35; }
+  details { margin: var(--so-phone-row) 0; }
+}