codehere 1.0.1 → 1.0.3

package/dist/infrastructure/protocols/ui/styles.js

@@ -1,2147 +0,0 @@
-import { DESIGN_TOKENS } from './tokens.js';
-export const SHARED_STYLES = `${DESIGN_TOKENS}
-  /* ════ S12 design tokens · ONE system shared with the landing ════
-   * Two hues over neutral glass: orange = primary (brand, primary action,
-   * focus) · blue = secondary (links, info). Semantic state colors are for
-   * STATE ONLY, never decoration: green appears ONLY where something was
-   * verified / allowed · amber = caught / partial · red = danger / stop.
-   * The per-agent rainbow is dead: agent identity = monochrome initials
-   * chip + the agent's NAME, never a hue.
-   *
-   * ════ S19 glyph language (BINDING · web + CLI) ════
-   * NEVER emoji-as-icon. Status/meaning is carried by the sanctioned
-   * geometric set + mono text labels + the semantic colors above:
-   *   done/ok ✓ · failed ✕ · running ● · queued ○ · list • · sep · —
-   *   killed/blocked ⊘ · affordance/flow › · warn ⚠ (only beside words)
-   * Plus exactly two arrows: ↑ ONLY on the send button, ← ONLY for back.
-   * Keyboard hints (⌘ / ⏎ inside .kbd spans or btn key chips) are keyboard
-   * symbols, not icons. A single-stroke inline SVG (currentColor, one
-   * stroke width) is allowed ONLY where an icon is genuinely irreplaceable.
-   * The ban is emoji-AS-ICON (chrome), never emoji a user typed: containers
-   * that render user/run CONTENT (prompts, say/think text, reports, step
-   * labels/outputs, goal/room titles from folder names or AI thread titles,
-   * cwd paths, write-pass intent fields: title/reason/target/payload) carry
-   * data-user-content and are excluded from the scan. ANY new container that
-   * renders user- or agent-derived values MUST carry data-user-content.
-   * Any emoji/pictograph codepoint reaching the rendered CHROME is a
-   * regression — /verify's H15 glyph-discipline invariant FAILS the board. */
-  /* ════ S22 voice standard (BINDING · web + CLI) ════
-   * Every user-facing string obeys from birth:
-   *   - Say the thing, never that you're saying it honestly. NO self-narration
-   *     of the product's own honesty/design ("and that's honest", "no demo
-   *     rows", "an honest disable, not a dead button"). Honesty reads from
-   *     BEHAVIOR, not commentary.
-   *   - Status = word + number ("12 passed", "Stopped"), not a sentence.
-   *   - Explanation = one concrete sentence. Teach/empty copy ≤ 2 short
-   *     sentences. Tooltip ≤ 1 sentence.
-   *   - Separator is · (the house middot), never an em dash. Em dash survives
-   *     ONLY as a typographic empty-value placeholder ("—" for no value), the
-   *     two left in this file. New copy with an em dash is a regression. */
-  /* Tokens live in ./tokens.ts and are prepended above — one :root for every
-     page the daemon serves, so /verify cannot drift its own palette again. */
-  * { box-sizing: border-box; margin: 0; }
-  /* AX (R7/R8) · visible keyboard focus on every interactive element. :focus-visible
-     fires on keyboard nav, never on mouse click, so it adds zero mouse-UI noise.
-     Text inputs keep their border-color focus treatment (no double ring). */
-  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
-  input:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible { outline: none; }
-  /* AX · honor reduced-motion everywhere (R8): kill reveals/seal/shimmer/transitions. */
-  @media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after {
-      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
-      transition-duration: .001ms !important; scroll-behavior: auto !important;
-    }
-  }
-  body {
-    margin: 0; background: var(--bg); color: var(--fg);
-    font-family: var(--sans); font-size: 13px; line-height: 1.55;
-    -webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden;
-    position: relative;
-  }
-  /* Ambient dot-grid backdrop · matches demo v12 + landing globals.css.
-   * Very faint blue dots on 24px grid · adds depth without distraction so
-   * the cards above visibly "lift" off a textured surface. Fixed position
-   * so it stays put while content scrolls. */
-  body::before {
-    content: ''; position: fixed; inset: 0;
-    background-image: radial-gradient(circle, var(--glass-3) 1px, transparent 1px);
-    background-size: 24px 24px;
-    pointer-events: none; z-index: 0; opacity: 0.7;
-  }
-  .app { height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
-
-  /* Header · glass · matches demo v12 + landing globals · darker tint
-   * with backdrop blur + saturate so the header sits visibly above the
-   * scroll content beneath it. */
-  .header {
-    display: flex; align-items: center; gap: 14px;
-    padding: 10px 20px; border-bottom: 1px solid var(--border-soft);
-    /* warm glass — the neutral rgba(0,0,0,.55) tint made the header a
-       colorless strip over the warm body (the "weird colours" seam). */
-    background: rgba(20, 18, 16, 0.62);
-    background: color-mix(in srgb, var(--bg) 62%, transparent);
-    backdrop-filter: blur(16px) saturate(140%);
-    -webkit-backdrop-filter: blur(16px) saturate(140%);
-    flex-shrink: 0;
-  }
-  /* Brand wordmark · matches the landing's rendered nav wordmark
-   * (codehere-landing components/ui/floating-nav.tsx, class gradient-text):
-   * lowercase 'codehere' in the 135° orange->blue gradient, NO dot — the
-   * landing carries none, so neither do we (S16 brand-sync; also keeps S13's
-   * orange budget intact). First thing every user sees on every screen. */
-  .logo { font-size: 14.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; letter-spacing: -0.01em; }
-  .logo .prerelease { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #e5c07b; background: rgba(229,192,123,0.12); border: 1px solid rgba(229,192,123,0.32); border-radius: 4px; padding: 1px 5px; position: relative; top: -1px; cursor: default; }
-  .logo .name {
-    background: linear-gradient(135deg, #ff9a76 0%, #4a90e2 100%);
-    -webkit-background-clip: text; background-clip: text;
-    -webkit-text-fill-color: transparent; color: transparent;
-    letter-spacing: -0.01em;
-  }
-
-  /* A-04 · local-first status pill · pinned next to the logo so the privacy
-   * promise is the SECOND thing every user sees · zero telemetry, all data
-   * on this machine. The pulsing dot says "still alive" without occupying
-   * focus. */
-  .local-pill {
-    display: inline-flex; align-items: center; gap: 6px;
-    font-family: var(--mono); font-size: 10.5px; color: var(--fg-50);
-    padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
-    background: rgba(132,181,148,0.04);
-  }
-  .local-pill .dot {
-    width: 6px; height: 6px; border-radius: 50%;
-    background: var(--fg-70); animation: pulse 2.4s ease infinite;
-  }
-  .local-pill:hover { color: var(--fg-70); border-color: var(--fg-30); }
-
-
-  /* Header budget chip · matches demo v12 spec · bordered chip with padding
-   * so the cost signal looks like a deliberate object, not a stray number. */
-  .budget {
-    margin-left: auto; font-family: var(--mono); font-size: 12px;
-    color: var(--fg-70); padding: 3px 9px;
-    border: 1px solid var(--border); border-radius: 4px;
-    letter-spacing: 0.02em;
-  }
-  .budget.safe { color: var(--fg-70); border-color: var(--border); }
-  .budget.warn { color: var(--warn); border-color: rgba(217,164,65,0.4); background: rgba(217,164,65,0.04); }
-  .budget.block { color: var(--caught); border-color: rgba(207,139,126,0.4); background: rgba(207,139,126,0.05); font-weight: 600; }
-
-  /* D-01 · file tree with trust grades · in the task detail · render each
-   * file as a chip with +N/-M diff counts and a trust grade pill. */
-  .file-chip {
-    display: inline-flex; align-items: center; gap: 8px;
-    padding: 5px 10px; margin: 4px 6px 4px 0;
-    border: 1px solid var(--border-soft); border-radius: 6px;
-    background: rgba(255,255,255,0.02);
-    font-family: var(--mono); font-size: 12px;
-  }
-  .file-chip .path { color: var(--fg-90); }
-  .file-chip .added { color: var(--verified); font-size: 10.5px; }
-  .file-chip .removed { color: var(--caught); font-size: 10.5px; }
-  .file-chip .trust { font-size: 10.5px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
-  .file-chip .trust.A { color: var(--verified); background: rgba(132,181,148,0.10); }
-  .file-chip .trust.B { color: var(--verified); background: rgba(132,181,148,0.06); }
-  .file-chip .trust.C { color: var(--warn); background: rgba(217,164,65,0.10); }
-  .file-chip .trust.F { color: var(--caught); background: rgba(207,139,126,0.10); }
-  /* S14 · files as quiet mono chips ("path +adds −dels" + trust grade) ·
-   * the container keeps the .file-tree class + filetree data-verify contract */
-  .file-tree.fileschips { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; margin: 4px 0 10px; }
-  .fchip { color: var(--fg-50); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; display: inline-flex; gap: 6px; align-items: baseline; }
-  .fchip b { color: var(--fg-80); font-weight: 500; }
-  .fchip .added { color: var(--verified); font-size: 10.5px; }
-  .fchip .removed { color: var(--caught); font-size: 10.5px; }
-  .fchip .trust { font-size: 10.5px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
-  .fchip .trust.A { color: var(--verified); background: rgba(132,181,148,0.10); }
-  .fchip .trust.B { color: var(--verified); background: rgba(132,181,148,0.06); }
-  .fchip .trust.C { color: var(--warn); background: rgba(217,164,65,0.10); }
-  .fchip .trust.F { color: var(--caught); background: rgba(207,139,126,0.10); }
-
-  /* Inline code-card · matches demo v12 (lines 441-454) · renders when an
-   * artifact file carries a .snippet. Dark VS-Code-ish surface with mono
-   * font, line numbers, lightweight syntax tinting via .kw/.fn/.str/.num/.cm.
-   * Lives directly under the file-chip strip so the reviewer can SEE what
-   * the agent wrote, not just "+118 lines". */
-  .code-card {
-    background: hsl(0 0% 12%); border: 1px solid var(--border);
-    border-radius: 6px; overflow: hidden; margin: 6px 0 10px;
-  }
-  .code-card .head {
-    padding: 7px 12px; background: rgba(255,255,255,0.03);
-    border-bottom: 1px solid var(--border-soft);
-    display: flex; align-items: center; gap: 8px;
-    font-family: var(--mono); font-size: 10.5px; color: var(--fg-50);
-  }
-  .code-card .head .lang { color: var(--fg-30); }
-  .code-card .head .path { color: var(--fg-70); }
-  .code-card .head .meta { margin-left: auto; color: var(--fg-30); font-size: 10.5px; }
-  .code-card pre {
-    margin: 0; padding: 11px 14px;
-    font-family: var(--mono); font-size: 12px; line-height: 1.6;
-    color: var(--fg-70); overflow-x: auto; white-space: pre;
-  }
-  .code-card .ln {
-    display: inline-block; width: 26px; text-align: right; margin-right: 12px;
-    color: var(--fg-20); user-select: none;
-  }
-  .code-card .kw { color: #c586c0; }
-  .code-card .fn { color: #dcdcaa; }
-  .code-card .str { color: #ce9178; }
-  .code-card .num { color: #b5cea8; }
-  .code-card .cm { color: #6a9955; font-style: italic; }
-  .code-card .tp { color: #4ec9b0; }
-
-  /* Report markdown · agent prose rendered with real code blocks, inline code,
-     bold and lists (was raw-escaped text leaking literal fence + backtick marks). */
-  .report-md .rep-p { margin: 8px 0; color: var(--fg-90); font-size: 13px; line-height: 1.6; }
-  .report-md .rep-p:first-child { margin-top: 0; }
-  .report-md .rep-list { margin: 8px 0; padding-left: 20px; color: var(--fg-90); font-size: 13px; line-height: 1.6; }
-  .report-md .rep-list li { margin: 3px 0; }
-  .report-md .rep-h { margin: 14px 0 6px; color: var(--fg); font-weight: 600; line-height: 1.35; }
-  .report-md .rep-h:first-child { margin-top: 0; }
-  .report-md h3.rep-h { font-size: 14.5px; }
-  .report-md h4.rep-h, .report-md h5.rep-h, .report-md h6.rep-h { font-size: 13px; }
-  .report-md .rep-table { border-collapse: collapse; margin: 10px 0; max-width: 100%; font-size: 12px; line-height: 1.5; }
-  .report-md .rep-table th, .report-md .rep-table td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; color: var(--fg-90); word-break: break-word; overflow-wrap: anywhere; }
-  .report-md .rep-table th { background: rgba(255,255,255,.04); font-weight: 600; color: var(--fg); }
-  .report-md .ic, .tl-say-text .ic {
-    font-family: var(--mono); font-size: 12px;
-    background: var(--bg-raise, rgba(255,255,255,.06)); color: var(--fg);
-    padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border-soft);
-  }
-  .report-md .code-card { margin: 10px 0; }
-
-  /* Live running action — the agent's current move, pulsing, updated as the
-     timeline streams. Replaces the useless "0 of N steps done" counter. */
-  .run-now { display: flex; align-items: center; gap: 9px; margin: 2px 0 7px; font-size: 14.5px; color: var(--fg); font-weight: 500; }
-  .run-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #ff9a76); flex: none; animation: runPulse 1.15s ease-in-out infinite; }
-  @keyframes runPulse { 0% { box-shadow: 0 0 0 0 rgba(255,154,118,.5); } 70% { box-shadow: 0 0 0 7px rgba(255,154,118,0); } 100% { box-shadow: 0 0 0 0 rgba(255,154,118,0); } }
-  .run-now-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .run-sub { color: var(--fg-50); font-size: 12px; font-family: var(--mono); margin-top: 2px; }
-
-  /* D-04 test-chip retired (S14) — test counts live in the evidence table's
-   * CHECKED row, with provenance (re-run vs as-reported) in the verdict meta. */
-
-
-  /* C-01 · first-run indexing banner · shows once per first-task, then fades */
-  .indexing-banner {
-    display: none;
-    padding: 6px 14px; margin-bottom: 10px;
-    background: var(--glass-3); border: 1px solid var(--glass-3);
-    border-radius: 6px;
-    font-family: var(--mono); font-size: 12px; color: var(--fg-70);
-  }
-  .indexing-banner .what { color: var(--fg-70); font-weight: 600; margin-right: 6px; }
-
-
-  /* E-03 · hook BLOCK affordance · override-with-reason · red-bordered card
-   * with 3 action buttons. */
-  .hook-block-card {
-    border: 1px solid rgba(207,139,126,0.35); border-radius: 8px;
-    padding: 12px 14px; margin: 10px 0;
-    background: rgba(207,139,126,0.04);
-  }
-  .hook-block-title { font-family: var(--mono); font-size: 10.5px; color: var(--caught); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
-  .hook-block-msg { color: var(--fg-90); font-size: 13px; margin-bottom: 10px; }
-  .hook-block-actions { display: flex; gap: 8px; }
-  .hook-block-actions button {
-    font-family: var(--mono); font-size: 12px;
-    padding: 5px 12px; border-radius: 5px; cursor: pointer;
-    border: 1px solid var(--border); background: transparent; color: var(--fg-70);
-  }
-  .hook-block-actions button:hover { color: var(--fg); border-color: var(--fg-30); }
-
-  /* E-07 · push gate · same hook-block pattern but warn-tinted for git push */
-  .push-gate-card {
-    border: 1px solid rgba(217,164,65,0.35); border-radius: 8px;
-    padding: 12px 14px; margin: 10px 0;
-    background: rgba(217,164,65,0.04);
-  }
-  .push-gate-title { font-family: var(--mono); font-size: 10.5px; color: var(--warn); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
-
-  /* P3 · Recovery affordance · session-level failure with explanatory copy
-     + user options (retry · diagnose · mark resolved). Demo v12 U10 spec.
-     Distinct from hook-block (agent BLOCKED by safety) — recovery covers
-     agent CRASHED / errored without a deliberate block. */
-  /* S14 · "Your call" dress — accent = needs-your-decision (rule 2: orange
-   * means exactly one thing), quiet left rule instead of the red alarm box. */
-  .recovery-card {
-    border-left: 2px solid var(--accent); border-radius: 0;
-    padding: 4px 0 4px 18px; margin: 14px 0;
-    background: transparent;
-  }
-  .recovery-title { font-size: 14.5px; font-weight: 600; color: var(--fg); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
-  .recovery-title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
-  .recovery-cause { color: var(--fg-90); font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
-  .recovery-cause b { color: var(--fg); font-weight: 600; }
-  .git-note .git-note-body { color: var(--fg-70); font-size: 12px; line-height: 1.55; }
-  .git-note .git-note-body code { font-family: var(--mono); font-size: 12px; background: var(--bg-2); padding: 1px 5px; border-radius: 3px; }
-  .recovery-resolve { color: var(--fg-70); font-size: 12px; line-height: 1.55; margin: 6px 0 10px; padding: 8px 11px; background: rgba(255,255,255,0.025); border-radius: 5px; border-left: 2px solid var(--fg-30); }
-  .recovery-resolve b { color: var(--fg); font-weight: 500; }
-  .recovery-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
-  .recovery-actions button {
-    font-family: var(--sans); font-size: 12px; padding: 7px 14px; border-radius: 5px; cursor: pointer;
-    border: 1px solid var(--border); background: transparent; color: var(--fg-70); transition: all 160ms ease;
-  }
-  .recovery-actions button:hover { color: var(--fg); border-color: var(--fg-30); }
-  .recovery-actions button.primary { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
-  .recovery-actions button.primary:hover { box-shadow: 0 0 0 3px rgba(255,154,118,0.20); }
-  .recovery-actions button[disabled] { opacity: .4; cursor: not-allowed; border-style: dashed; }
-  .recovery-actions button[disabled]:hover { color: var(--fg-70); border-color: var(--border); box-shadow: none; }
-  .recovery-actions button.linkbtn { background: none; border: none; color: var(--fg-50); padding: 4px 2px; text-decoration: underline; text-underline-offset: 2px; }
-  .recovery-actions button.linkbtn:hover { color: var(--fg); }
-  .recovery-actions button.linkbtn[disabled] { text-decoration: none; }
-  .recovery-reason { font-size: 12px; color: var(--fg-40); margin-top: 8px; font-style: italic; }
-  .recovery-ack { font-size: 12px; color: var(--verified); margin-top: 10px; }
-
-  /* G-U10 · crash recovery surface · shown when session was orphaned · "the
-   * daemon was killed mid-task · you can resume or discard" */
-  .crash-recovery {
-    border: 1px solid var(--border); border-radius: 8px;
-    padding: 10px 14px; margin: 10px 0;
-    background: rgba(255,255,255,0.02);
-  }
-  .crash-recovery-title { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
-
-  /* v0.8 S3 · Reshape view · ported from demo v12 lines 73-132 + 2486-2534.
-   * Demo v12's W-W4 differentiator · user describes the view they want,
-   * agent "composes" it from shared primitives. Backed by body.shape-*
-   * classes + a custom-view banner. Three preset shapes (ship-only,
-   * velocity, security) plus a free-text input that naive-classifies to
-   * the closest preset. */
-
-  /* v0.8 S4 · share-thread button + popover · per demo v12 W-W2 */
-  .share-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 310; padding: 24px; }
-  .share-modal.open { display: flex; animation: rs-fade 240ms ease; }
-  .share-modal.open .share-card { animation: wp-card-in var(--dur-max) var(--ease); }
-  /* S17 · share card joins the calm token system: glass-neutral border (the
-   * old orange->blue gradient ring was decorative orange), one radius family,
-   * motion inside the 200/300ms budget. Copy link stays the ONE filled
-   * button in this dialog. */
-  .share-card { width: 100%; max-width: 540px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; position: relative; overflow: hidden; }
-  .share-card .head { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; font-size: 13px; }
-  .share-card .head .tag { color: var(--fg-40); font-weight: 400; font-size: 12px; font-family: var(--mono); }
-  .share-card .blurb { color: var(--fg-70); font-size: 12px; margin: 10px 0; line-height: 1.55; }
-  /* Signed-payload link · brand-tinted so the value reads as "this is the
-   * codehere artifact you're about to share" · not a generic URL. The
-   * canonical brand var is --accent in product, --brand in demo — same
-   * #ff9a76. The original css here referenced --brand (undefined in
-   * product) and silently fell back to default fg-light. */
-  .share-link-box { background: hsl(0 0% 9%); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-70); margin: 10px 0; word-break: break-all; max-height: 96px; overflow: auto; }
-  .share-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
-  .share-actions button { font-family: var(--sans); font-size: 12px; padding: 7px 14px; border-radius: 5px; cursor: pointer; }
-  .share-btn-primary { background: var(--accent); color: #000; border: 0; font-weight: 600; }
-  .share-btn-primary:hover { filter: brightness(1.08); }
-  .share-btn-secondary { background: transparent; color: var(--fg-50); border: 1px solid var(--border); }
-  .share-btn-secondary:hover { color: var(--fg); border-color: var(--fg-30); }
-  .share-foot { color: var(--fg-40); font-size: 12px; margin-top: 12px; font-family: var(--mono); line-height: 1.5; }
-  .share-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-1); border: 1px solid var(--border); color: var(--fg); padding: 10px 18px; border-radius: 6px; font-size: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.4); z-index: 320; opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
-  .share-toast.show { opacity: 1; }
-
-  /* v0.9 S6 · W-PASS approval modal · demo v12 lines 2030-2050 */
-  .wp-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 330; padding: 24px; }
-  .wp-modal.open { display: flex; animation: rs-fade 280ms ease; }
-  .wp-modal.open .wp-card { animation: wp-card-in var(--dur-max) var(--ease); }
-  @keyframes wp-card-in {
-    from { opacity: 0; transform: translateY(12px) scale(0.985); }
-    to   { opacity: 1; transform: translateY(0) scale(1); }
-  }
-  /* W-PASS keeps its orange dress on purpose: an agent write awaiting YOUR
-   * approval IS the needs-your-decision state the hue is reserved for. */
-  .wp-card { width: 100%; max-width: 620px; background: var(--bg-1); border: 1px solid rgba(255,154,118,0.40); border-radius: var(--radius); padding: 22px 24px; position: relative; box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,154,118,0.06); }
-  .wp-banner { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
-  .wp-banner .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255,154,118,0.18); animation: wp-pulse 1.6s ease-in-out infinite; }
-  @keyframes wp-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,154,118,0.18); } 50% { box-shadow: 0 0 0 7px rgba(255,154,118,0.04); } }
-  .wp-title { font-size: 14.5px; font-weight: 600; color: var(--fg); margin: 4px 0 6px; letter-spacing: -0.01em; }
-  .wp-reason { font-size: 12px; color: var(--fg-70); line-height: 1.5; margin: 0 0 14px; padding: 8px 11px; background: rgba(255,255,255,0.025); border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; }
-  .wp-meta { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); margin: 8px 0; line-height: 1.6; }
-  .wp-meta b { color: var(--fg-90); }
-  .wp-payload-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; margin: 12px 0; max-height: 240px; overflow: auto; }
-  .wp-payload-head { display: flex; align-items: center; gap: 8px; padding: 6px 11px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); text-transform: uppercase; letter-spacing: 0.04em; }
-  .wp-payload-head .method { color: var(--accent); font-weight: 600; }
-  .wp-payload { padding: 10px 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-90); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
-  .wp-payload-edit { width: 100%; min-height: 140px; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-90); resize: vertical; outline: none; }
-  .wp-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
-  .wp-actions button { font-family: var(--sans); font-size: 12px; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-weight: 500; transition: all 160ms ease; }
-  .wp-btn-approve { background: var(--accent); color: #000; border: 0; }
-  .wp-btn-approve:hover { box-shadow: 0 0 0 3px rgba(255,154,118,0.20); }
-  .wp-btn-approve:disabled, .wp-btn-edit:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
-  .wp-btn-edit { background: transparent; color: var(--fg); border: 1px solid var(--border); }
-  .wp-btn-edit:hover { border-color: var(--accent); color: var(--accent); }
-  .wp-btn-cancel { background: transparent; color: var(--fg-50); border: 1px solid var(--border); }
-  .wp-btn-cancel:hover { color: var(--caught); border-color: var(--caught); }
-  .wp-btn-save { background: var(--accent); color: #000; border: 0; }
-  .wp-foot { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); margin-top: 12px; line-height: 1.55; }
-  .wp-result { margin-top: 12px; padding: 8px 11px; border-radius: 4px; font-size: 12px; line-height: 1.5; }
-  .wp-result.ok { background: rgba(132,181,148,0.08); border: 1px solid rgba(132,181,148,0.30); color: var(--verified); }
-  .wp-result.fail { background: rgba(254,80,80,0.08); border: 1px solid rgba(254,80,80,0.30); color: var(--caught); }
-  .wp-result.cancelled { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--fg-50); }
-  .wp-pending-badge { position: fixed; top: 14px; right: 220px; background: var(--accent); color: #000; padding: 4px 10px; border-radius: 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; cursor: pointer; display: none; z-index: 305; box-shadow: 0 4px 16px rgba(255,154,118,0.30); animation: wp-pulse 1.6s ease-in-out infinite; letter-spacing: 0.03em; }
-
-  /* Per-domain mediated-write trust grade chip · v0.9 must-ship */
-  .wp-trust-grade { display: inline-block; padding: 2px 7px; border-radius: 3px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; margin: 0 4px; }
-  .wp-trust-grade.A { color: var(--verified); background: rgba(132,181,148,0.12); }
-  .wp-trust-grade.B { color: var(--verified); background: rgba(132,181,148,0.08); }
-  .wp-trust-grade.C { color: var(--warn); background: rgba(217,164,65,0.10); }
-  .wp-trust-grade.D { color: var(--warn); background: rgba(217,164,65,0.15); }
-  .wp-trust-grade.F { color: var(--caught); background: rgba(207,139,126,0.12); }
-  .wp-trust-prompt { margin-top: 10px; padding: 9px 11px; background: rgba(207,139,126,0.06); border: 1px solid rgba(207,139,126,0.30); border-radius: 5px; font-size: 12px; color: var(--fg-90); }
-  .wp-trust-prompt input { margin-right: 6px; }
-  .wp-pending-badge.show { display: inline-block; }
-
-  /* v0.9 S7 · overlay-renderer · inspect-and-act for ctx-source URLs */
-  .or-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 295; padding: 24px; }
-  .or-overlay.open { display: flex; animation: rs-fade 280ms ease; }
-  .or-overlay.open .or-card { animation: wp-card-in var(--dur-max) var(--ease); }
-  /* S17 · glass-neutral card (gradient ring retired with the rest of the
-   * decorative orange), one radius family. */
-  .or-card { width: 100%; max-width: 720px; max-height: calc(100vh - 48px); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; position: relative; }
-  .or-head { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 12px; color: var(--fg-70); flex-shrink: 0; }
-  .or-head .src { color: var(--fg-70); font-weight: 600; }
-  .or-head .meta { color: var(--fg-50); }
-  .or-head .audit { margin-left: auto; padding: 2px 8px; background: rgba(132,181,148,0.06); border: 1px solid rgba(132,181,148,0.25); border-radius: 3px; font-size: 10.5px; color: var(--fg-50); }
-  .or-head .audit b { color: var(--verified); }
-  .or-head .or-close { background: transparent; border: 0; color: var(--fg-50); cursor: pointer; padding: 2px 8px; border-radius: 4px; font-size: 14.5px; line-height: 1; }
-  .or-head .or-close:hover { color: var(--fg); background: var(--bg-2); }
-  .or-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
-  .or-body h3 { font-size: 20px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; margin: 0 0 4px; }
-  .or-body .url-row { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); margin-bottom: 12px; word-break: break-all; }
-  .or-body .meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; font-family: var(--mono); font-size: 10.5px; }
-  .or-body .meta-row .pill { padding: 2px 7px; border: 1px solid var(--border); border-radius: 3px; color: var(--fg-70); background: var(--bg-2); }
-  .or-body .meta-row .pill.state-open { color: var(--verified); border-color: rgba(132,181,148,0.30); background: rgba(132,181,148,0.06); }
-  .or-body .meta-row .pill.state-closed { color: var(--caught); border-color: rgba(254,80,80,0.30); background: rgba(254,80,80,0.06); }
-  .or-body .preview-text { padding: 12px 14px; background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 12px; color: var(--fg-90); line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow-y: auto; }
-  .or-body .preview-error { padding: 14px 16px; background: rgba(254,80,80,0.06); border: 1px solid rgba(254,80,80,0.30); border-radius: 6px; color: var(--caught); font-size: 12px; line-height: 1.5; }
-  .or-body .preview-error .hint { color: var(--fg-50); font-family: var(--mono); font-size: 10.5px; margin-top: 6px; }
-  .or-body .preview-loading { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--fg-50); font-family: var(--mono); font-size: 12px; }
-  .or-body .preview-loading::before { content: ''; width: 10px; height: 10px; border: 2px solid var(--fg-30); border-top-color: var(--accent); border-radius: 50%; animation: or-spin 700ms linear infinite; }
-  @keyframes or-spin { to { transform: rotate(360deg); } }
-  .or-composer { padding: 12px 14px; background: var(--bg-2); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
-  .or-composer .hint { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); letter-spacing: 0.06em; }
-  .or-composer .row { display: flex; gap: 8px; align-items: center; }
-  .or-composer input { flex: 1; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; padding: 8px 11px; color: var(--fg); font-family: var(--sans); font-size: 13px; outline: none; transition: border-color 160ms ease; }
-  .or-composer input:focus { border-color: var(--accent); }
-  .or-composer button { background: var(--accent); color: #000; border: 0; border-radius: 6px; padding: 8px 14px; font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; }
-  .or-composer button:hover { box-shadow: 0 0 0 3px rgba(255,154,118,0.18); }
-  .or-composer button:disabled { opacity: 0.40; cursor: default; box-shadow: none; }
-
-  /* Linear inline render · per demo v12 lines 569-600. Authentic Linear
-     ticket card displayed inside the overlay when previewing linear://. */
-  .linear-render { background: #1c1c1e; color: #ebeaef; padding: 24px 28px; border-radius: 6px; font-family: 'Inter', -apple-system, sans-serif; }
-  .linear-id { font-family: var(--mono); font-size: 12px; color: #8a8a8e; letter-spacing: 0.04em; margin-bottom: 8px; }
-  .linear-title { font-size: 20px; font-weight: 600; color: #ebeaef; line-height: 1.35; margin-bottom: 14px; letter-spacing: -0.01em; }
-  .linear-props { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
-  .linear-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 4px; font-size: 12px; background: rgba(255,255,255,0.04); color: #b8b7bc; }
-  .linear-pri-urgent { color: #f87171; }
-  .linear-pri-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; width: 12px; height: 12px; }
-  .linear-pri-bars div { width: 2px; background: currentColor; border-radius: 0.5px; }
-  .linear-pri-bars div:nth-child(1) { height: 4px; }
-  .linear-pri-bars div:nth-child(2) { height: 7px; }
-  .linear-pri-bars div:nth-child(3) { height: 10px; }
-  .linear-status-progress { color: #fbbf24; }
-  .linear-status-circle { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; box-sizing: border-box; }
-  .linear-status-circle::after { content: ''; position: absolute; inset: 0; background: currentColor; border-radius: 50%; clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%); }
-  .linear-assignee { background: rgba(255,255,255,0.06); }
-  .linear-assignee .av { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #fff; font-family: var(--mono); }
-  .linear-desc { font-size: 13px; color: #b8b7bc; line-height: 1.65; padding: 14px 16px; background: rgba(255,255,255,0.025); border-radius: 6px; margin-bottom: 18px; }
-  .linear-desc code { background: rgba(255,255,255,0.07); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 12px; color: #ebeaef; }
-  .linear-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
-  .linear-sep .line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
-  .linear-sep .lbl { font-family: var(--mono); font-size: 10.5px; color: #6f6e74; letter-spacing: 0.1em; text-transform: uppercase; }
-  .linear-comment { display: flex; gap: 11px; padding: 10px 0; }
-  .linear-comment .av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; color: #fff; font-family: var(--mono); flex-shrink: 0; background: #5e6ad2; }
-  .linear-comment .col { flex: 1; min-width: 0; }
-  .linear-comment .who { display: flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 600; color: #ebeaef; margin-bottom: 2px; }
-  .linear-comment .ts { color: #6f6e74; font-size: 12px; font-weight: 400; }
-  .linear-comment .body { font-size: 13px; color: #b8b7bc; line-height: 1.55; }
-
-  /* Figma inline render · structured frame card (text-only by design · no
-     thumbnails · agents read structure, not pixels). */
-  .figma-render { background: #1c1c1e; color: #ebeaef; padding: 22px 26px; border-radius: 6px; font-family: 'Inter', -apple-system, sans-serif; }
-  .figma-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
-  .figma-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: #a259ff; padding: 2px 8px; border-radius: 4px; }
-  .figma-name { font-size: 20px; font-weight: 600; color: #ebeaef; letter-spacing: -0.01em; }
-  .figma-meta { font-family: var(--mono); font-size: 12px; color: #8a8a8e; margin: 4px 0 6px; }
-  .figma-note { font-size: 12px; color: #8a8a8e; padding: 8px 0; }
-  .figma-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
-  .figma-sep .line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
-  .figma-sep .lbl { font-family: var(--mono); font-size: 10.5px; color: #6f6e74; letter-spacing: 0.1em; text-transform: uppercase; }
-  .figma-frame { padding: 9px 12px; background: rgba(255,255,255,0.025); border-radius: 6px; margin-bottom: 7px; }
-  .figma-frame-name { font-size: 13px; font-weight: 600; color: #ebeaef; }
-  .figma-frame-dim { font-family: var(--mono); font-size: 12px; color: #8a8a8e; margin-left: 9px; }
-  .figma-frame-text { font-size: 12px; color: #b8b7bc; line-height: 1.5; margin-top: 4px; }
-  .figma-tree { font-family: var(--mono); font-size: 12px; color: #b8b7bc; line-height: 1.55; background: rgba(255,255,255,0.025); padding: 12px 14px; border-radius: 6px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; margin: 0; }
-
-  /* draw.io inline render · structure + XML excerpt (no rendered diagram image ·
-     the adapter ships XML text, not pixels · no mxGraph dependency). */
-  .drawio-render { background: #1c1c1e; color: #ebeaef; padding: 22px 26px; border-radius: 6px; font-family: 'Inter', -apple-system, sans-serif; }
-  .drawio-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
-  .drawio-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: #f08705; padding: 2px 8px; border-radius: 4px; }
-  .drawio-name { font-size: 14.5px; font-weight: 600; color: #ebeaef; word-break: break-all; }
-  .drawio-stats { display: flex; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
-  .drawio-stat { display: flex; flex-direction: column; align-items: center; min-width: 60px; padding: 10px 14px; background: rgba(255,255,255,0.03); border-radius: 6px; }
-  .drawio-stat .n { font-size: 20px; font-weight: 700; color: #ebeaef; font-family: var(--mono); }
-  .drawio-stat .l { font-size: 10.5px; color: #8a8a8e; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
-  .drawio-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
-  .drawio-sep .line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
-  .drawio-sep .lbl { font-family: var(--mono); font-size: 10.5px; color: #6f6e74; letter-spacing: 0.1em; text-transform: uppercase; }
-  .drawio-xml { font-family: var(--mono); font-size: 12px; color: #b8b7bc; line-height: 1.5; background: rgba(255,255,255,0.025); padding: 12px 14px; border-radius: 6px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; margin: 0; }
-
-  /* Make ctx-source URL chips throughout the UI clickable + discoverable.
-     Matches demo v12 lines 690-694. */
-  .ctx-url-chip { cursor: pointer; transition: all 180ms ease; padding: 2px 7px 2px 22px; border-radius: 4px; background: var(--glass-3); border: 1px solid var(--glass-3); color: var(--fg-70); position: relative; font-family: var(--mono); font-size: 10.5px; display: inline-block; }
-  .ctx-url-chip::before { content: '\\25CF'; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 10.5px; opacity: 0.85; }
-  .ctx-url-chip:hover { background: var(--glass-3); border-color: var(--glass-3); }
-
-  .reshape-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 300; padding: 24px; }
-  .reshape-modal.open { display: flex; animation: rs-fade 280ms ease; }
-  .reshape-modal.open .reshape-card { animation: wp-card-in var(--dur-max) var(--ease); }
-  @keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }
-  /* S17 · reshape card joins the calm token system: glass-neutral border
-   * (the gradient ring was decorative orange), one radius family. Compose
-   * stays the ONE filled button in this dialog. */
-  .reshape-card { width: 100%; max-width: 580px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; position: relative; overflow: hidden; }
-  /* Primitives note · blue info box at the modal bottom explaining what
-   * "primitives" the agent composes from · demo v12 lines 134-137. */
-  .primitives-note {
-    margin-top: 14px; padding: 8px 12px;
-    background: var(--glass-3); border: 1px solid var(--glass-3);
-    border-radius: 5px;
-    font-size: 12px; color: var(--fg-70); line-height: 1.55;
-  }
-  .primitives-note b { color: var(--fg-70); font-weight: 500; }
-  .primitives-note .prims { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); margin-top: 5px; }
-  .primitives-note .prims .p {
-    display: inline-block; padding: 1px 6px; margin: 2px 3px 0 0;
-    background: hsl(0 0% 9%); border: 1px solid var(--border);
-    border-radius: 3px; color: var(--fg-70);
-  }
-  .reshape-card .k { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); letter-spacing: 0.14em; text-transform: uppercase; }
-  .reshape-card h2 { font-size: 20px; font-weight: 600; margin: 4px 0 6px; color: var(--fg); letter-spacing: -0.01em; }
-  .reshape-card p.sub { color: var(--fg-50); font-size: 12px; margin: 0 0 14px; line-height: 1.55; }
-  .reshape-input { display: flex; gap: 8px; margin: 8px 0 16px; }
-  .reshape-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; color: var(--fg); font-size: 13px; outline: none; }
-  .reshape-input input:focus { border-color: var(--accent); }
-  .reshape-input button { background: var(--accent); color: #000; border: 0; border-radius: 6px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
-  .reshape-input button:hover { filter: brightness(1.08); }
-  .reshape-suggestions { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 14px; }
-  .reshape-suggestions .lbl { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; }
-  .reshape-suggestions .pill { padding: 6px 11px; background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; color: var(--fg-90); cursor: pointer; text-align: left; }
-  .reshape-suggestions .pill:hover { border-color: var(--fg-30); background: var(--glass-2); }
-  .reshape-suggestions .pill .what { color: var(--fg-50); margin-left: 8px; font-size: 12px; }
-  .reshape-card .close-x { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; color: var(--fg-50); cursor: pointer; font-size: 20px; padding: 4px 6px; border-radius: 4px; }
-  .reshape-card .close-x:hover { color: var(--fg); background: var(--bg-2); }
-  /* Connect-from-GitHub · clone modal + the "+ from GitHub" affordances */
-  .clone-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 300; padding: 24px; }
-  .clone-modal.open { display: flex; animation: rs-fade 220ms ease; }
-  .clone-card { width: 100%; max-width: 520px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; position: relative; }
-  .clone-card .close-x { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; color: var(--fg-50); cursor: pointer; font-size: 20px; padding: 4px 6px; border-radius: 4px; }
-  .clone-card .close-x:hover { color: var(--fg); background: var(--bg-2); }
-  .clone-card .head { font-size: 14.5px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
-  .clone-card .blurb { font-size: 12px; color: var(--fg-60); line-height: 1.5; margin: 0 0 14px; }
-  .clone-card .blurb code { font-family: var(--mono); background: var(--bg-2); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
-  .clone-input { display: flex; gap: 8px; }
-  .clone-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; color: var(--fg); font-size: 13px; font-family: var(--mono); outline: none; }
-  .clone-input input:focus { border-color: var(--accent); }
-  .clone-input button { background: var(--accent); color: #000; border: 0; border-radius: 6px; padding: 0 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
-  .clone-input button:hover { filter: brightness(1.08); }
-  .clone-input button:disabled { opacity: 0.5; cursor: default; }
-  .clone-status { margin-top: 12px; font-size: 12px; color: var(--fg-70); line-height: 1.45; }
-  .clone-status.ok { color: var(--accent); }
-  .clone-status.warn { color: #e0a; color: var(--fg-80); border-left: 2px solid var(--accent); padding-left: 9px; }
-  .section-label-row { display: flex; align-items: center; justify-content: space-between; }
-  .add-gh { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-70); font-size: 12px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
-  .add-gh:hover { border-color: var(--accent); color: var(--fg); }
-  .ex-gh { margin-top: 14px; font-size: 12px; color: var(--fg-50); }
-  .ex-gh .add-gh { margin-left: 6px; }
-  .agent-compose { display: none; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; font-family: var(--mono); font-size: 12px; color: var(--fg-70); margin-top: 12px; }
-  .agent-compose.show { display: block; animation: rs-fade 200ms ease; }
-  .agent-compose .agent-line { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
-  .agent-compose .line { opacity: 0; animation: rs-slide 240ms ease forwards; }
-  @keyframes rs-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
-  .agent-compose .line:nth-child(1) { animation-delay: 200ms; }
-  .agent-compose .line:nth-child(2) { animation-delay: 600ms; }
-  .agent-compose .line:nth-child(3) { animation-delay: 1000ms; }
-  .agent-compose .line:nth-child(4) { animation-delay: 1400ms; }
-  .agent-compose .line:nth-child(5) { animation-delay: 1800ms; }
-  .agent-compose .ok { color: var(--verified); }
-  .agent-compose .info { color: var(--fg-70); }
-  .agent-compose .kw { color: var(--fg-70); }
-
-  /* Custom-view banner · appears when reshape is active */
-  .custom-view-banner {
-    display: none;
-    padding: 8px 20px;
-    background: linear-gradient(90deg, rgba(255,154,118,0.06), var(--glass-3));
-    border-bottom: 1px solid rgba(255,154,118,0.2);
-    font-family: var(--mono); font-size: 12px; color: var(--fg-70);
-    display: none;
-  }
-  body.custom-view .custom-view-banner { display: flex; align-items: center; gap: 10px; }
-  .custom-view-banner .lbl { color: var(--accent); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; }
-  .custom-view-banner .prompt { color: var(--fg-90); font-style: italic; }
-  .custom-view-banner .reset { margin-left: auto; color: var(--fg-50); cursor: pointer; padding: 2px 8px; border: 1px solid var(--border); border-radius: 3px; font-size: 10.5px; }
-  .custom-view-banner .reset:hover { color: var(--fg); border-color: var(--fg-30); }
-
-  /* Failover banner · ported from v1 ui-page.ts on 2026-05-23 as part of /v1 kill.
-     Polls /api/failover-offers · when a rate-limited agent has a viable fallback,
-     amber strip appears between header and task list with "Switch / Dismiss". */
-  .failover-banner {
-    margin: 12px 24px 0; padding: 12px 18px;
-    border: 1px solid rgba(217,164,65,0.30);
-    background: rgba(217,164,65,0.06);
-    border-radius: 8px;
-    font-size: 13px; line-height: 1.5;
-    display: none; align-items: center; gap: 12px; flex-wrap: wrap;
-  }
-  .failover-banner.show { display: flex; }
-  .failover-banner .fb-msg { flex: 1; color: var(--fg-70); min-width: 200px; }
-  .failover-banner .fb-msg b { color: var(--fg); font-weight: 600; }
-  .failover-banner .fb-actions { display: flex; gap: 8px; flex-shrink: 0; }
-  .failover-banner .fb-actions button {
-    font-family: var(--mono); font-size: 12px;
-    padding: 5px 12px; border-radius: 5px; cursor: pointer;
-    border: 1px solid var(--border); background: transparent;
-    color: var(--fg-70); transition: color 0.15s, border-color 0.15s;
-  }
-  .failover-banner .fb-actions button:hover { color: var(--fg); border-color: var(--fg-30); }
-  .failover-banner .fb-actions button.fb-accept {
-    background: rgba(217,164,65,0.12); border-color: rgba(217,164,65,0.40);
-    color: var(--warn); font-weight: 600;
-  }
-  .failover-banner .fb-actions button.fb-accept:hover { background: rgba(217,164,65,0.20); }
-
-  /* SHAPE: ship-only · hide tool-call cards, steps blob, hook blocks, etc. */
-  body.shape-ship-only details.collapsible,
-  body.shape-ship-only .hook-block-card,
-  body.shape-ship-only .push-gate-card { display: none !important; }
-
-  /* REPL primitives · thinking dots + streaming caret + repl-beat narrative.
-   * Match demo v12 lines 299-309 + 455-457. The thinking pill appears
-   * while the agent is mid-reasoning; the streaming caret appends to text
-   * being streamed in; the repl-beat is an italic narrative paragraph
-   * between tool calls (italic = "agent's voice", not output). All three
-   * use the same brand-color blink so live state reads consistently. */
-  .thinking {
-    display: inline-flex; align-items: center; gap: 5px;
-    padding: 5px 10px; margin: 4px 0;
-    background: hsl(0 0% 9%); border: 1px solid var(--border);
-    border-radius: 12px;
-    font-family: var(--mono); font-size: 12px; color: var(--fg-50);
-  }
-  .thinking .dots { display: inline-flex; gap: 3px; }
-  .thinking .dots span {
-    width: 4px; height: 4px; border-radius: 50%; background: var(--fg-40);
-    animation: cb-blink 1.4s ease infinite;
-  }
-  .thinking .dots span:nth-child(2) { animation-delay: 0.2s; }
-  .thinking .dots span:nth-child(3) { animation-delay: 0.4s; }
-  @keyframes cb-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
-  .streaming { display: inline; }
-  .streaming::after {
-    content: '\\258D'; color: var(--accent); margin-left: 2px;
-    animation: cb-cursor 1s steps(2) infinite;
-  }
-  @keyframes cb-cursor { 50% { opacity: 0; } }
-  .repl-beat {
-    padding: 7px 11px; margin: 8px 0;
-    background: rgba(0,0,0,0.18);
-    border-left: 2px solid var(--border); border-radius: 0 4px 4px 0;
-    font-style: italic; color: var(--fg-70); font-size: 12px;
-    line-height: 1.55;
-  }
-  .repl-beat .cursor {
-    display: inline-block; width: 7px; height: 12px;
-    background: var(--accent); margin-left: 3px; vertical-align: text-bottom;
-    animation: cb-cursor 1s steps(2) infinite;
-  }
-
-  /* Audit-line · narrative beat between tool cards · matches demo v12
-   * lines 405-407. Dim mono row with a #NNNN seq prefix. When the chain
-   * records a notable event (pre-prompt scan, override, budget warning,
-   * W-PASS approval) the audit chain becomes VISIBLE in the timeline ·
-   * not buried in the footer. The line is the proof; the footer is the
-   * summary. */
-  .audit-line {
-    font-family: var(--mono); font-size: 10.5px; color: var(--fg-40);
-    padding: 6px 12px; margin: 8px 0;
-    background: rgba(0,0,0,0.2);
-    border-left: 2px solid var(--border); border-radius: 3px;
-    line-height: 1.55;
-  }
-  .audit-line .seq { color: var(--fg-30); margin-right: 8px; }
-  .audit-line.warn {
-    color: var(--warn); border-left-color: var(--warn);
-    background: rgba(217,164,65,0.03);
-  }
-  .audit-line.allow { border-left-color: rgba(132,181,148,0.4); }
-  .audit-line b { color: var(--fg-90); font-weight: 600; }
-  .audit-line code { background: hsl(0 0% 9%); padding: 1px 5px; border-radius: 3px; color: var(--fg-70); }
-
-  /* project-memory nudge · same quiet family as .audit-line (trust present-
-     but-quiet); .on = the post-click confirmation state */
-  .mem-nudge {
-    font-family: var(--mono); font-size: 10.5px; color: var(--fg-40);
-    padding: 6px 12px; margin: 8px 0;
-    background: rgba(0,0,0,0.2);
-    border-left: 2px solid var(--border); border-radius: 3px;
-    line-height: 1.55;
-  }
-  .mem-nudge .mem-btn {
-    background: none; border: 1px solid var(--border); border-radius: 4px;
-    color: var(--fg-70); font-family: var(--mono); font-size: 10.5px;
-    padding: 2px 8px; cursor: pointer; margin-left: 4px;
-  }
-  .mem-nudge .mem-btn:hover { border-color: var(--fg-30); color: var(--fg); }
-  .mem-nudge.on { border-left-color: rgba(132,181,148,0.4); color: var(--fg-70); }
-
-  /* Review lens (S20 · moved from the auditor persona rules): audit lines
-     amplified, trust grades bold — the trust job reads proof first. */
-  body[data-lens="review"] .audit-line { background: var(--glass-3); border-left-color: var(--fg-30); color: var(--fg-70); font-size: 12px; padding: 8px 14px; }
-  body[data-lens="review"] .fchip .trust { font-weight: 700; padding: 2px 7px; }
-
-  /* SHAPE: velocity · hide tool-call cards, summary prose, tokens, verifier · keep outcome + files */
-  body.shape-velocity .token-table,
-  body.shape-velocity details.collapsible { display: none !important; }
-
-  /* SHAPE: security · amplify verifier + hook blocks; hide summary prose */
-  body.shape-security .panel:has(.token-table),
-  body.shape-security details.collapsible { display: none !important; }
-  body.shape-security .hook-block-card { box-shadow: 0 0 0 2px rgba(207,139,126,0.3); }
-
-  /* Reshape shapes recompose the goal room too (slice 4): "just what shipped"
-   * / velocity hide per-turn meta; the audit/security shape amplifies the
-   * room's audit line. Reuses the existing body.shape-* + .meta-eng/.audit-line. */
-  body.shape-ship-only #task-list .card-row2 .meta-eng,
-  body.shape-velocity #task-list .card-row2 .meta-eng { display: none !important; }
-  body.shape-security #task-list .audit-line { background: var(--glass-3); border-left-color: var(--fg-30); font-size: 12px; padding: 8px 14px; }
-
-  /* v0.8 S2.5 · Settings drawer · ported from demo v12 lines 178-192 + A-09
-   * in the backlog. Right-side off-canvas panel · holds Context Sources +
-   * future section-visibility toggles. */
-  .drawer { position: fixed; top: 0; right: 0; width: 360px; height: 100vh; background: var(--bg-1); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform var(--dur-max) var(--ease); z-index: 200; padding: 20px 18px; overflow-y: auto; }
-  .drawer.open { transform: translateX(0); }
-  .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity var(--dur-max) var(--ease); z-index: 199; }
-  .drawer-overlay.open { opacity: 1; pointer-events: auto; }
-  .drawer h3 { font-family: var(--mono); font-size: 12px; color: var(--fg-50); letter-spacing: 0.12em; text-transform: uppercase; margin: 16px 0 8px; }
-  .drawer h3:first-child { margin-top: 0; }
-  .drawer p.sub { font-size: 12px; color: var(--fg-50); margin: 2px 0 12px; }
-  .drawer-close { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; color: var(--fg-50); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 4px; }
-  .drawer-close:hover { color: var(--fg); background: var(--bg-2); }
-  .drawer-title { font-size: 14.5px; font-weight: 600; color: var(--fg); margin-bottom: 12px; padding-right: 30px; }
-
-  /* Settings-button (cog) in the header · opens the drawer */
-
-  /* Context-source rows inside the drawer */
-  .cs-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 12px; border-bottom: 1px solid var(--border-soft); }
-  .cs-row .cs-icon { margin-top: 1px; }
-  .cs-row:last-child { border-bottom: none; }
-  .cs-row .cs-icon { width: 24px; height: 24px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--mono); }
-  .cs-row .cs-icon.linear { background: #5e6ad2; color: #fff; }
-  .cs-row .cs-icon.figma { background: #1e1e1e; color: #fff; border: 1px solid rgba(255,255,255,0.2); }
-  .cs-row .cs-label { font-weight: 500; color: var(--fg-90); }
-  .cs-row .cs-meta { font-size: 10.5px; color: var(--fg-50); font-family: var(--mono); }
-  .cs-row .cs-status { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
-  .cs-row .cs-status.connected    { color: var(--fg-70); background: var(--glass-3); }
-  .cs-row .cs-status.expired      { color: var(--warn); background: rgba(217,164,65,0.10); }
-  .cs-row .cs-status.manual       { color: var(--fg-50); background: rgba(255,255,255,0.04); }
-  .cs-row .cs-status.disconnected { color: var(--fg-40); background: rgba(255,255,255,0.02); }
-  .cs-row .cs-status.available    { color: var(--fg-70); background: var(--glass-3); }
-  .cs-row .cs-actions { margin-left: auto; display: flex; gap: 6px; }
-  .cs-btn { font-family: var(--mono); font-size: 12px; padding: 3px 9px; border-radius: 4px; cursor: pointer; background: transparent; color: var(--fg-70); border: 1px solid var(--border); }
-  .cs-btn:hover { color: var(--fg); border-color: var(--fg-30); }
-  .cs-btn.primary { color: var(--fg-70); border-color: var(--glass-3); }
-  .cs-btn.primary:hover { background: var(--glass-3); }
-  .cs-btn.danger:hover { color: var(--caught); border-color: var(--caught); }
-  .cs-btn:disabled { opacity: 0.35; cursor: not-allowed; }
-  .cs-empty-hint { font-size: 12px; color: var(--fg-50); padding: 8px 10px; background: rgba(255,255,255,0.02); border-radius: 4px; margin-top: 4px; }
-  .cs-empty-hint a { color: var(--fg-70); text-decoration: none; border-bottom: 1px solid var(--border); }
-  .cs-empty-hint a:hover { color: var(--fg); border-color: var(--fg-30); }
-  .cs-test-result { font-family: var(--mono); font-size: 10.5px; padding: 4px 8px; margin-top: 4px; border-radius: 3px; }
-  .cs-test-result.ok { color: var(--verified); background: rgba(132,181,148,0.06); }
-  .cs-test-result.fail { color: var(--caught); background: rgba(207,139,126,0.06); }
-
-  /* Demo v12 line 322 + 518-521 · context-source rendering on tool-call cards */
-
-  /* P10 · per-step hook badges in the trace details (same styles, different parent). */
-  .tc .hook-badge { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-right: 6px; vertical-align: middle; }
-  .tc .hook-badge.allow { color: var(--verified); background: rgba(132,181,148,0.10); }
-  .tc .hook-badge.block { color: var(--caught); background: rgba(207,139,126,0.10); }
-  .tc .hook-badge.override { color: var(--warn); background: rgba(217,164,65,0.10); }
-  .tc .hook-badge.ctx { color: var(--fg-70); background: var(--glass-3); border: 1px solid var(--glass-3); }
-
-  /* F-06 · interactive audit chain panel · dashboard footer · click "Verify"
-   * to call /api/audit/verify and render the verdict in plain English. The
-   * chain is the source of truth, NOT codehere itself · the button proves
-   * the daemon isn't lying to you. */
-  /* RADICAL bottom-chrome collapse (2026-05-24 · Ega flagged "audit
-   * section consuming space"). Pre-fix: audit-chain panel ate ~90px ·
-   * OSS footer ate ~25px · total bottom chrome ~115px on every screen.
-   * Post-fix: panel collapsed to inline + co-lives with OSS footer in
-   * the same 28px status-bar line. Audit info stays load-bearing
-   * (dots + stats + Verify button preserved · only the SHA-256
-   * subtitle and the panel-card chrome removed). Net ~85px reclaimed.
-   * No info-loss · just spatial economy. */
-  .audit-chain-panel {
-    display: inline-flex; align-items: center; gap: 12px;
-    padding: 0; margin: 0; background: none; border: none;
-  }
-  .audit-chain-title { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.06em; }
-  /* audit-chain stats line + activity dots · denser footer per demo v12 */
-  .audit-chain-dots .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
-  .audit-chain-dots .dot.allow { background: var(--fg-70); }
-  .audit-chain-dots .dot.block { background: var(--caught); }
-  .audit-chain-dots .dot.override { background: var(--warn); }
-  .audit-chain-dots .dot.muted { background: var(--fg-30); }
-  .audit-chain-btn {
-    font-family: var(--mono); font-size: 12px;
-    padding: 4px 12px; border-radius: 5px; cursor: pointer;
-    background: rgba(255,154,118,0.08); color: var(--accent);
-    border: 1px solid rgba(255,154,118,0.40); font-weight: 600;
-    transition: all 160ms ease;
-  }
-  .audit-chain-btn:hover { background: rgba(255,154,118,0.20); box-shadow: 0 0 0 3px rgba(255,154,118,0.10); }
-  .audit-chain-btn.verified { color: var(--verified); border-color: rgba(132,181,148,0.3); }
-  .audit-chain-btn.broken   { color: var(--caught); border-color: rgba(207,139,126,0.3); }
-  /* audit-chain-result starts collapsed (the subtitle "SHA-256
-   * hash-chain · run verify…" ate 25px on every screen). Only renders
-   * when verifyAuditChain() runs and writes a verdict · gets shown
-   * inline temporarily after click then fades back. */
-  .audit-chain-result { display: none; margin-top: 0; font-family: var(--mono); font-size: 12px; }
-  .audit-chain-result.show { display: inline-block; margin-left: 12px; }
-  .audit-chain-result .ok   { color: var(--verified); }
-  .audit-chain-result .fail { color: var(--caught); }
-  .audit-chain-counts { color: var(--fg-50); margin-top: 4px; }
-  .audit-chain-error  { color: var(--caught); margin-top: 4px; padding-left: 12px; }
-
-  /* F-04 · time-gap separator · slides between two consecutive items in the
-   * task list when their times differ by more than 2 hours. Says "Nh later"
-   * with an optional "· daemon restart" tail when there's a known restart in
-   * the gap. Helps the reviewer parse 17h+ histories without scrolling
-   * forever. */
-  .time-gap {
-    display: flex; align-items: center; gap: 16px;
-    padding: 14px 0; margin: 16px 0;
-    font-family: var(--mono); font-size: 12px;
-    color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em;
-  }
-  .time-gap .line {
-    flex: 1; height: 1px;
-    background: linear-gradient(90deg, transparent, var(--accent), transparent);
-    opacity: 0.45;
-  }
-  .time-gap .label {
-    padding: 7px 16px; border: 1px solid rgba(255,154,118,0.3);
-    border-radius: 100px; background: rgba(255,154,118,0.04);
-    text-align: center; line-height: 1.3;
-  }
-  .time-gap .label b { color: var(--fg); font-weight: 600; }
-  .time-gap .label .sub { display: block; margin-top: 3px; font-size: 10.5px; color: var(--fg-50); letter-spacing: 0.12em; }
-
-  /* F-08 · token table · per-agent breakdown of inputs/outputs/cache/cost in
-   * task detail · only renders when artifacts.usage has tokens. Mono numbers
-   * column-aligned, total row bold-line-above. */
-  .token-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
-  .token-table th { text-align: right; color: var(--fg-40); font-size: 10.5px; text-transform: uppercase; padding: 4px 8px; font-weight: 500; }
-  .token-table th:first-child { text-align: left; }
-  .token-table td { padding: 4px 8px; text-align: right; color: var(--fg-90); }
-  .token-table td:first-child { text-align: left; color: var(--fg-70); }
-  .token-table tr.total td { border-top: 1px solid var(--border); color: var(--fg); font-weight: 600; padding-top: 6px; }
-  .token-table td.dim { color: var(--fg-40); }
-
-  /* F-02 · cross-worktree alert · pulsing dot + label in the squad-row when
-   * any session in a different cwd has been running > 5 minutes. Click to
-   * jump to that detail. */
-  .worktree-alert {
-    display: none;
-    font-family: var(--mono); font-size: 10.5px; color: var(--warn);
-    background: rgba(217,164,65,0.06); border: 1px solid rgba(217,164,65,0.18);
-    padding: 2px 8px; border-radius: 4px; cursor: pointer;
-    margin-left: 8px;
-  }
-  .worktree-alert:hover { background: rgba(217,164,65,0.12); }
-  .worktree-alert .pulse-dot {
-    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
-    background: var(--warn); margin-right: 6px; animation: pulse 1.6s ease infinite;
-  }
-
-  /* F-01 · budget threshold warning · drops down under the header when daily
-   * spend crosses 80% of the cap. Color tracks safe/warn/block. The audit-
-   * line copy is intentionally plain English: who, how much, what to do. */
-  .budget-banner {
-    display: none;
-    padding: 8px 20px; border-bottom: 1px solid var(--border-soft);
-    font-family: var(--mono); font-size: 12px;
-    background: rgba(217,164,65,0.04); color: var(--warn);
-  }
-  .budget-banner.block {
-    background: rgba(207,139,126,0.06); color: var(--caught);
-  }
-  .budget-banner .what { color: var(--fg-90); margin-right: 8px; font-weight: 600; }
-  .budget-banner .hint { color: var(--fg-50); margin-left: 8px; }
-
-  /* A-10 · OSS · MIT footer · proof-of-real strip at the very bottom of the
-   * dashboard. The marketing line is "codehere is OSS, audit it yourself" ·
-   * if the running daemon doesn't say so somewhere visible, the line is
-   * empty marketing. Test count + version come from the server. */
-  /* OSS footer · proof-of-real strip · matches demo .proof-footer (lines
-   * 497-505). Darker bg so it reads as ground floor. Codehere wordmark gets
-   * the brand tint · the only colored item · everything else dim. Hover on
-   * any link goes to full fg, not 70 · the click target deserves full
-   * contrast when the cursor's actually there. */
-  .oss-footer {
-    flex-shrink: 0; padding: 9px 20px;
-    border-top: 1px solid var(--border-soft);
-    background: rgba(0,0,0,0.35);
-    font-family: var(--mono); font-size: 10.5px; color: var(--fg-40);
-    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
-  }
-  .oss-footer .brand { color: var(--accent); }
-  .oss-footer .right { margin-left: auto; }
-  .oss-footer a { color: var(--fg-50); text-decoration: none; transition: color 180ms cubic-bezier(0.16,1,0.3,1); }
-  .oss-footer a:hover { color: var(--fg); }
-  .oss-footer .sep { color: var(--fg-30); }
-
-
-  .content { flex: 1; overflow-y: auto; }
-  .content-inner { padding: 16px 20px; max-width: 900px; margin: 0 auto; }
-  /* Cockpit shell (Phase-1 S1) · persistent Projects sidebar + main pane. */
-  .shell { flex: 1; display: flex; min-height: 0; }
-  .sidebar { flex: 0 0 264px; width: 264px; overflow-y: auto; border-right: 1px solid var(--border-soft); background: var(--bg-1); padding: 12px 8px; }
-  .sidebar .sb-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-40); padding: 4px 8px 10px; display: flex; align-items: center; justify-content: space-between; }
-  /* DESIGN.md §4.1 "your team" roster — the presence dot carries the ONLY hue,
-     rows stay monochrome; the working agent's dot pulses, an unavailable one
-     dims (opacity set inline from readiness). This is the memorable thing made literal. */
-  .sidebar .sb-team { margin-bottom: 14px; }
-  .sidebar .sb-mate { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 6px; font-size: 12px; color: var(--fg-70); cursor: default; }
-  .sidebar .sb-mate:hover { background: var(--bg-2); color: var(--fg); }
-  .sidebar .sb-dot-wrap { width: 8px; display: inline-flex; flex: none; }
-  .sidebar .sb-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
-  .sidebar .sb-dot.working { animation: runPulse 1.6s ease-in-out infinite; }
-  .sidebar .sb-mate-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .sidebar .sb-mate-st { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); flex: none; }
-  .sb-add { background: none; border: 0; color: var(--fg-40); font-size: 14.5px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 4px; transition: color 140ms ease, background 140ms ease; }
-  .sb-add:hover { color: var(--accent); background: var(--bg-2); }
-  /* The home pane no longer duplicates the sidebar's project list on desktop. */
-  @media (min-width: 761px) { .home-projects { display: none; } }
-  .sb-proj-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 4px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--fg-90); cursor: pointer; }
-  .sb-proj-head:hover { background: var(--bg-1); }
-  .sb-proj-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
-  /* Active = a quiet neutral fill. The earlier accent-wash + orange inset bar
-     on BOTH the group and its leaf at once read as template styling (Ega,
-     2026-07-02) — the sidebar stays monochrome; accent is for actions. */
-  .sb-proj-head.active { background: var(--bg-2); }
-  .sb-car { background: none; border: 0; padding: 3px; cursor: pointer; color: var(--fg-40); display: inline-flex; flex: none; border-radius: 4px; }
-  .sb-car:hover { color: var(--fg); background: var(--bg-2); }
-  .sb-car svg { width: 11px; height: 11px; transition: transform 200ms cubic-bezier(.4,0,.2,1); }
-  .sb-proj.expanded > .sb-proj-head .sb-car svg { transform: rotate(90deg); }
-  .sb-pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
-  .sb-proj-head .ct { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); flex: none; }
-  /* Animated expand/collapse — max-height + opacity transition; morphNode toggles
-     the .expanded class in place, so the transition fires on real user toggles. */
-  .sb-leaves { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 260ms cubic-bezier(.4,0,.2,1), opacity 200ms ease; }
-  .sb-proj.expanded > .sb-leaves { max-height: 60vh; opacity: 1; overflow-y: auto; }
-  .sb-search { padding: 2px 8px 6px 22px; }
-  .sb-q { width: 100%; box-sizing: border-box; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; color: var(--fg-90); font-family: inherit; }
-  .sb-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
-  .sb-q::placeholder { color: var(--fg-40); }
-  .sb-loading { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); padding: 4px 8px 6px 24px; }
-  .sb-empty { font-family: var(--mono); font-size: 12px; color: var(--fg-40); padding: 10px 8px; line-height: 1.5; }
-  .sb-task { display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 24px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--fg-70); }
-  .sb-task:hover { background: var(--bg-1); }
-  .sb-task.active { background: var(--bg-2); color: var(--fg-90); }
-  .sb-task .ab { width: 14px; height: 14px; font-size: 10.5px; flex: none; }
-  /* Sidebar chips go monochrome — the per-agent candy colors belong in the
-     room, not stacked down a nav list (DESIGN.md 4.1: identity hues are
-     presence dots, never nav decoration). The ab.stk.AGENT rules carry 0-3-0
-     specificity, so the override must match it (sb-task .ab.stk) plus
-     !important to beat the per-agent backgrounds whichever agent class is on.
-     First fix was 0-2-0 and silently lost to Aider mauve in the drilled-in
-     leaves; caught by the regression probe. */
-  .sb-task .ab.stk { background: var(--bg-2) !important; color: var(--fg-50) !important; border: 1px solid var(--border); }
-  .sb-task .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-  .sb-more { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); padding: 4px 8px 8px 24px; cursor: pointer; }
-  .sb-more:hover { color: var(--fg-70); }
-  @media (max-width: 760px) { .sidebar { display: none; } }
-  .section-label {
-    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
-    color: var(--fg-40); text-transform: uppercase; margin: 16px 0 8px;
-    display: flex; align-items: center; gap: 8px;
-  }
-  .section-label:first-child { margin-top: 0; }
-  /* Featured section gets the brand tint · pinned demo + recent-work
-   * sections deserve the visual signal that says "this is what to look
-   * at first". Sub-dot precedes the label so the eye lands there before
-   * reading the text. */
-  .section-label.featured { color: var(--accent); }
-  .section-label.featured::before {
-    content: ''; display: inline-block;
-    width: 5px; height: 5px; border-radius: 50%;
-    background: var(--accent);
-    box-shadow: 0 0 0 3px rgba(255,154,118,0.18);
-  }
-
-  /* Goal-first home · each project (goal) is a group; its tasks live inside.
-   * The home is organized by what you're working toward, not by status. */
-  .goal-group { margin: 0 0 22px; }
-  .goal-head {
-    display: flex; align-items: baseline; gap: 10px;
-    padding: 0 0 8px; margin: 20px 0 10px;
-    border-bottom: 1px solid var(--border);
-  }
-  .goal-group:first-child .goal-head { margin-top: 0; }
-  .goal-title { font-size: 14.5px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
-  .goal-meta { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); margin-left: auto; }
-  .goal-head { cursor: pointer; }
-  .goal-head:hover .goal-title { color: var(--accent); }
-  .goal-head:hover .goal-meta { color: var(--fg-70); }
-
-  /* The goal room · a single goal opened to its multi-agent turns, in order. */
-  .room-head { margin: 4px 0 14px; }
-  /* .room-back died for the rail's Today row (nav option B, 2026-07-07). */
-  .sb-nav { margin: 0 0 14px; }
-  .sb-nav-row { padding: 6px 8px; border-radius: 7px; font-size: 13px; color: var(--fg-70); cursor: pointer; user-select: none; }
-  .sb-nav-row:hover { background: var(--bg-2); color: var(--fg); }
-  .sb-nav-row.here { background: var(--bg-2); color: var(--fg); }
-  .room-title { font-size: 20px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
-  .room-title-row { display: flex; align-items: center; gap: 8px; }
-  .room-rename { background: transparent; border: 0; color: var(--fg-30); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; opacity: 0; transition: opacity 140ms ease, color 140ms ease; }
-  .room-title-row:hover .room-rename { opacity: 1; }
-  .room-rename:hover { color: var(--accent); background: var(--bg-2); }
-  .room-rename:focus-visible { opacity: 1; }
-  .room-rename svg { width: 15px; height: 15px; }
-  .room-title-edit { font-size: 20px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 7px; padding: 2px 8px; font-family: var(--sans); outline: none; min-width: 280px; }
-  .room-sub { font-family: var(--mono); font-size: 12px; color: var(--fg-40); margin-top: 5px; }
-  .turns-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--fg-40); text-transform: uppercase; margin: 18px 0 12px; }
-  /* Conversation (room) — reads like a chat: the request, then the agent's reply */
-  .live-strip { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 11px 16px; margin: 12px 0 6px; }
-  .live-a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--fg-70); font-variant-numeric: tabular-nums; }
-  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease infinite; }
-  .live-task { color: var(--fg-50); }
-  .folded-runs { margin: 6px 0; }
-  .folded-runs > summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--fg-40); padding: 10px 4px; border-top: 1px dashed var(--border-soft); }
-  .folded-runs > summary::-webkit-details-marker { display: none; }
-  .folded-runs > summary::after { content: ' \\00b7 show \\203a'; color: var(--fg-30); }
-  .folded-runs[open] > summary { color: var(--fg-50); }
-  .folded-runs[open] > summary::after { content: ' \\00b7 hide'; }
-  /* Reveals animate open instead of snapping. Native <details> hides non-summary
-     content on close, so .reveal-body stays rendered (display:block) and the
-     max-height + opacity transition does the open/close motion. */
-  .folded-runs > .reveal-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 280ms cubic-bezier(.4,0,.2,1), opacity 220ms ease; }
-  .folded-runs:not([open]) > .reveal-wrap { display: grid; }
-  .folded-runs[open] > .reveal-wrap { grid-template-rows: 1fr; opacity: 1; }
-  .reveal-body { overflow: hidden; min-height: 0; }
-  /* The agent menu eases in (fade + rise) instead of popping. */
-  @keyframes ap-menu-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
-  .agentpick-menu { animation: ap-menu-in 150ms cubic-bezier(.4,0,.2,1); transform-origin: bottom right; }
-  /* The task detail view fades up on open instead of snapping in. */
-  @keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
-  #task-detail-view { animation: view-in 200ms cubic-bezier(.4,0,.2,1); }
-  @media (prefers-reduced-motion: reduce) { .folded-runs > .reveal-wrap, .agentpick-menu, #task-detail-view, .sb-leaves, .sb-car svg { transition: none !important; animation: none !important; } .folded-runs[open] > .reveal-wrap { grid-template-rows: 1fr; } }
-  /* reviewer-as-a-turn · a cross-vendor review reads as the reviewer speaking */
-
-  /* It-4 V1-MULTITASK · project rollup header · ONE row above a batch's
-   * children. Counts are derived live in batchH() every render. */
-  .project-rollup { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
-    background: var(--glass-1); border: 1px solid var(--border);
-    border-radius: 8px; padding: 9px 12px; margin: 6px 0 10px; }
-  .project-rollup .rollup-icon { color: var(--fg-50); font-size: 13px; }
-  .project-rollup .rollup-count { font-weight: 600; color: var(--fg); font-size: 13px; }
-  .project-rollup .rollup-sep { color: var(--fg-40); }
-  .project-rollup .rollup-stat { font-family: var(--mono); font-size: 12px; color: var(--fg-50); }
-  .project-rollup .rollup-note { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); letter-spacing: 0.04em; }
-  /* It-4 V1-FANOUT-ALL · @all fanout grid · one real column per ready adapter,
-   * side by side. Each column reuses the room turn card (cardH). */
-  .fanout-all { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 10px; margin: 0 0 14px; }
-  .fanout-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
-  .fanout-col-head { display: flex; align-items: center; gap: 5px; font-family: var(--mono);
-    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-50); }
-  .fanout-col .task-card { margin: 0; }
-
-  /* S21 · thread grouping — head card + nested older runs of the same task */
-  .task-thread { border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
-  .task-thread .task-card { margin: 0; border: 0; border-left: 0; border-radius: 0; background: transparent; }
-  .task-runs { border-top: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.015); }
-  .tr-more { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-40); padding: 8px 15px 2px; }
-  .task-run { display: flex; align-items: center; gap: 12px; padding: 7px 15px 7px 22px; cursor: pointer; border-top: 1px solid rgba(255,255,255,0.03); }
-  .task-run:hover { background: rgba(255,255,255,0.02); }
-  .task-run .tr-who { font-family: var(--mono); font-size: 12px; color: var(--fg-40); width: 100px; }
-  .task-run .tr-st { flex: 1; font-family: var(--mono); font-size: 12px; color: var(--fg-50); }
-  .task-run .tr-st.st-verified, .task-run .tr-st.st-running { color: var(--verified); }
-  .task-run .tr-st.st-caught { color: var(--caught); }
-  .task-run .tr-c { font-family: var(--mono); font-size: 12px; color: var(--fg-40); }
-
-  /* DEEP-4 · runs-timeline — sibling runs of one task, selectable in the detail */
-  .runs-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; }
-  .runs-strip-lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-40); margin-right: 2px; }
-  .runs-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; color: var(--fg-50); cursor: pointer; }
-  .runs-pill:hover { border-color: var(--fg-30); color: var(--fg-70); }
-  .runs-pill.cur { border-color: var(--accent); color: var(--fg); background: rgba(232,149,111,0.08); cursor: default; }
-  .runs-pill .rp-who { color: var(--fg-40); }
-  .runs-pill.cur .rp-who { color: var(--fg-70); }
-  .runs-pill .rp-c { color: var(--fg-30); }
-  .runs-pill.st-verified .rp-st, .runs-pill.st-running .rp-st { color: var(--verified); }
-  .runs-pill.st-caught .rp-st { color: var(--caught); }
-
-  /* Task card · glass surface · matches demo v12 .glass-card pattern.
-   * Faint white-on-dark fill + 1px low-contrast border · sits on top of
-   * the ambient dot-grid. Hover lifts 2px with a bigger shadow + inner
-   * ring · the card visibly comes forward when the cursor's on it. */
-  .task-card {
-    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
-    border-left: 2px solid rgba(255,255,255,0.06);
-    border-radius: 8px; padding: 13px 15px; margin-bottom: 8px;
-    cursor: pointer;
-    transition:
-      transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
-      border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
-      background 300ms cubic-bezier(0.16, 1, 0.3, 1),
-      box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  .task-card:hover {
-    border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
-    transform: translateY(-2px);
-    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
-  }
-  .task-card.tc-pinned { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(255,154,118,0.04), rgba(255,255,255,0.02) 30%); }
-  /* S12 · card left-borders no longer encode agent hue (the agent-* class
-   * stays on the element for targeting; the rainbow CSS is dead). One
-   * neutral border for all; identity lives in the monochrome chip + name. */
-  /* Outcome chip on the right of card-row2 · ✓ / ⚠ / re-run */
-  .card-outcome { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 3px; }
-  .card-stop { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 2px 8px; margin-left: 6px; border-radius: 3px; border: 1px solid rgba(207,139,126,0.45); background: rgba(207,139,126,0.08); color: var(--caught); cursor: pointer; }
-  .card-stop:hover { background: rgba(207,139,126,0.18); }
-  .card-stop:disabled { opacity: 0.6; cursor: default; }
-  .stop-fail { font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; margin-left: 6px; border-radius: 3px; color: var(--caught); background: rgba(207,139,126,0.06); }
-  .send-fail { font-size: 12px; color: var(--caught); background: rgba(207,139,126,0.07); border-left: 2px solid rgba(207,139,126,0.5); border-radius: 0 4px 4px 0; padding: 7px 10px; margin-top: 8px; line-height: 1.5; }
-  .stop-hero { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; padding: 4px 12px; margin-left: 10px; border-radius: 4px; border: 1px solid rgba(207,139,126,0.5); background: rgba(207,139,126,0.1); color: var(--caught); cursor: pointer; }
-  .stop-hero:hover { background: rgba(207,139,126,0.2); }
-  .card-outcome.ok { color: var(--verified); background: rgba(132,181,148,0.10); }
-  .card-outcome.warn { color: var(--warn); background: rgba(217,164,65,0.10); }
-  .card-outcome.fail { color: var(--caught); background: rgba(207,139,126,0.10); }
-  .card-outcome.queued { color: var(--fg-50); background: rgba(255,255,255,0.03); }
-  .card-stalled { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--caught); background: rgba(207,139,126,0.07); border-left: 2px solid var(--caught); padding: 5px 8px; border-radius: 3px; }
-  .card-row1 { display: flex; align-items: center; gap: 8px; }
-  .status-icon { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-  .status-icon.running { background: var(--accent); animation: pulse 1.5s ease infinite; }
-  .status-icon.paused { background: var(--warn); }
-  .status-icon.done { background: var(--fg-70); }
-  .status-icon.failed { background: var(--caught); }
-  .status-icon.crashed { background: var(--caught); }
-  .status-icon.killed { background: var(--fg-30); }
-  .status-icon.queued { background: var(--fg-30); }
-  .status-icon.blocked { background: var(--warn); }
-  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
-  /* The home task CARD (v2 mockup parity): avatar · title+vendor · stat-pill · cost · arrow */
-  .tcard { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--bg-1); border: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: 12px; }
-  .tcard:hover { transform: translateY(-2px); border-color: var(--fg-30); background: var(--bg-2); }
-  .tcard:hover .tc-arrow { opacity: 1; transform: translateX(0); }
-  .tcard .tc-av { flex: none; display: inline-flex; }
-  .tcard .tc-av .ab { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
-  .tcard.active .tc-av .ab { color: var(--accent); border-color: rgba(255,154,118,0.35); }
-  .tc-body { flex: 1; min-width: 0; }
-  .tc-title { font-size: 14.5px; font-weight: 560; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-90); }
-  .tc-meta { font-size: 12px; color: var(--fg-40); margin-top: 3px; }
-  .tc-meta .tc-vendor { color: var(--fg-70); }
-  .tc-glyphs { display: flex; align-items: center; gap: 14px; flex: none; }
-  .tc-stat { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 560; color: var(--fg-70); }
-  .tc-stat .tc-ico { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; font-size: 12px; }
-  .tc-stat.ok { color: var(--verified); }
-  .tc-stat.fail { color: var(--caught); }
-  .tc-stat.neutral { color: var(--fg-50); }
-  .tc-stat.run { color: var(--warn); }
-  .tc-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); animation: pulse 2.4s ease infinite; }
-  .tc-cost { font-size: 13px; color: var(--fg-50); font-weight: 560; font-variant-numeric: tabular-nums; }
-  .tc-arrow { color: var(--fg-30); opacity: 0; transform: translateX(-4px); transition: 0.15s ease; font-size: 20px; }
-
-  .card-title { font-weight: 600; color: var(--fg); font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .card-agent { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); background: rgba(255,255,255,0.04); padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; }
-  /* Shared-proof row (Phase 2.5 team visibility) · provenance + audit attestation on an imported session */
-  .shared-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; font-family: var(--mono); }
-  .prov-from { color: var(--fg-70); background: rgba(255,255,255,0.04); padding: 3px 8px; border-radius: 5px; }
-  .prov-note { color: var(--fg-40); font-size: 10.5px; }
-  .proof-badge { padding: 3px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 600; }
-  .proof-ok { color: var(--verified); background: rgba(132,181,148,0.12); border: 1px solid rgba(132,181,148,0.3); }
-  .proof-bad { color: #f08a8a; background: rgba(240,138,138,0.12); border: 1px solid rgba(240,138,138,0.35); }
-  .proof-neutral { color: var(--fg-50); background: rgba(255,255,255,0.04); }
-  /* Recovery badge — a failover REPLACEMENT took over a stalled/failed agent.
-     Amber = codehere saved the task; makes cross-vendor resilience visible. */
-  .recovered-badge { color: var(--warn); background: rgba(217,164,65,0.12); border: 1px solid rgba(217,164,65,0.32); padding: 3px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 600; }
-  /* Agent identity badge (squircle with initials) — used in cards, squad row,
-   * detail header. S12: ONE monochrome style — the initials + the agent NAME
-   * carry identity, never a hue (the per-agent rainbow was the main
-   * "too many colours" source). */
-  .ab { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; flex-shrink: 0; letter-spacing: -0.04em; background: var(--bg-3); color: var(--fg-70); border: 1px solid var(--border); }
-  .ab.user { background: var(--accent); color: #241a14; border: none; }
-  /* Phase 3 · who's-involved · overlapping avatar stack */
-  .pstack { display: inline-flex; align-items: center; vertical-align: middle; }
-  .pstack { gap: 3px; } /* light spacing, not crowded overlap — 2-char codes stay legible */
-  .pstack .ab:first-child { margin-left: 0; }
-  .pstack .ab.more { background: var(--raised); color: var(--fg-50); }
-  /* Stacked rollup badges · single letter, per-vendor color, legible at a glance. */
-  .ab.stk { color: #14110f; font-weight: 700; }
-  /* Room message + participant avatars carry the agent identity hue (DESIGN.md
-     §4.3 — the avatar IS the teammate). The sidebar NAV stays monochrome via the
-     .sb-task .ab.stk !important override; these hue the conversation, not the nav.
-     Dark text for legibility on the light hue. */
-  .ab.claude, .ab.stk.claude { background: var(--bg-3); color: var(--fg-80); }
-  .ab.codex, .ab.stk.codex { background: var(--bg-3); color: var(--fg-80); }
-  .ab.gemini, .ab.stk.gemini { background: var(--bg-3); color: var(--fg-80); }
-  .ab.aider, .ab.stk.aider { background: var(--bg-3); color: var(--fg-80); }
-  .ab.opencode, .ab.stk.opencode { background: var(--bg-3); color: var(--fg-80); }
-  .ab.conductor, .ab.stk.conductor { background: var(--bg-3); color: var(--fg-80); }
-  .ab.cursor, .ab.stk.cursor { background: var(--bg-3); color: var(--fg-80); }
-  .ab.stk.auto { background: var(--bg-3); color: var(--fg-70); }
-  .pstack .ab.stk.more { background: var(--raised); color: var(--fg-50); font-weight: 600; }
-  .ab.lg { width: 22px; height: 22px; font-size: 10.5px; border-radius: 6px; }
-  .ab.sm { width: 14px; height: 14px; font-size: 10.5px; border-radius: 3px; }
-  /* Cost signal pill — primitive #2 */
-  .cost-signal { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); padding: 1px 6px; border: 1px solid var(--border); border-radius: 3px; }
-  /* S12 green audit · "free" is cost information, not a verified state */
-  .cost-signal.free { color: var(--fg-70); border-color: var(--glass-3); background: var(--glass-2); }
-  .cost-signal.paid { color: var(--fg-50); }
-  .card-row2 { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); }
-  .card-row3 { margin-top: 6px; display: flex; gap: 6px; }
-  .card-btn {
-    font-family: var(--mono); font-size: 10.5px; padding: 3px 8px;
-    border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
-    background: transparent; color: var(--fg-50);
-  }
-  .card-btn:hover { color: var(--fg); border-color: var(--fg-30); }
-  .card-btn.kill:hover { color: var(--caught); border-color: var(--caught); }
-  .card-btn.verify:hover { color: var(--verified); border-color: var(--verified); }
-  .card-btn.restart:hover { color: var(--accent); border-color: var(--accent); }
-  .verify-badge { font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px; }
-  .verify-badge.verified { color: var(--verified); background: rgba(132,181,148,0.10); }
-  .verify-badge.unverified { color: var(--fg-30); background: rgba(255,255,255,0.04); }
-  .verify-badge.failed { color: var(--caught); background: rgba(207,139,126,0.10); }
-
-  .empty-state { text-align: center; padding: 60px 20px; color: var(--fg-40); }
-  /* S17 · first-run has exactly ONE primary CTA: the composer. The example
-   * prompts are quiet ghost text — no button chrome, no fill, no border —
-   * still clickable (they fill the composer), never competing with it. */
-  .empty-examples { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 20px; }
-  .ex-hint { font-size: 12px; color: var(--fg-50); margin-bottom: 4px; }
-  .ex-prompt { font-family: var(--mono); font-size: 12px; color: var(--fg-40); background: transparent; border: 0; padding: 2px 4px; cursor: pointer; transition: color var(--dur) var(--ease); }
-  .ex-prompt:hover { color: var(--fg-70); text-decoration: underline; text-underline-offset: 3px; }
-  .empty-state h2 { color: var(--fg-70); margin-bottom: 8px; font-weight: 500; font-size: 14.5px; }
-  /* First-run onboarding (lives in the empty-state). */
-  .onboarding { max-width: 560px; margin: 0 auto; text-align: left; padding: 40px 20px 20px; }
-  .onboarding h2 { font-size: 20px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
-  .ob-lede { color: var(--fg-60); font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; }
-  .ob-step { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border-soft); }
-  .ob-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-60); font-family: var(--mono); font-size: 12px; display: flex; align-items: center; justify-content: center; }
-  .ob-b { flex: 1; min-width: 0; }
-  .ob-h { font-size: 13px; font-weight: 600; color: var(--fg-90); margin-bottom: 12px; }
-  .ob-agents { display: flex; flex-direction: column; gap: 7px; }
-  .ob-agent { display: flex; align-items: center; gap: 9px; font-size: 13px; }
-  .ob-agent .ab { width: 18px; height: 18px; font-size: 10.5px; flex: none; }
-  .ob-an { flex: 1; color: var(--fg-80); }
-  .ob-ast { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
-  .ob-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
-  .ob-dot.ready { background: var(--fg-70); }
-  .ob-dot.setup { background: var(--warn, #d8b06a); }
-  .ob-dot.busy { background: var(--accent); }
-  .ob-dot.off { background: var(--fg-30); }
-  .ob-hint { font-size: 12px; color: var(--fg-50); margin-top: 12px; line-height: 1.5; }
-  .ob-ex { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
-  .ob-cta { margin: 2px 0 18px; }
-  .ob-tourbtn { background: var(--accent); color: #14110f; border: 0; border-radius: 8px; font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; transition: filter 140ms ease; }
-  .ob-tourbtn:hover { filter: brightness(1.06); }
-  /* Interactive walkthrough — spotlight coachmarks over the real UI (non-blocking). */
-  .ob-tour { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
-  .ob-spot { position: fixed; border-radius: 9px; box-shadow: 0 0 0 9999px rgba(8,8,10,0.62); outline: 2px solid var(--accent); pointer-events: none; transition: left 280ms cubic-bezier(.4,0,.2,1), top 280ms cubic-bezier(.4,0,.2,1), width 280ms cubic-bezier(.4,0,.2,1), height 280ms cubic-bezier(.4,0,.2,1); }
-  .ob-pop { position: fixed; width: 300px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,0.6); padding: 16px; pointer-events: auto; transition: left 220ms ease, top 220ms ease; }
-  .ob-pt { font-size: 14.5px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
-  .ob-pb { font-size: 13px; color: var(--fg-60); line-height: 1.55; }
-  .ob-pf { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
-  .ob-pdots { display: inline-flex; gap: 5px; }
-  .ob-pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-30); transition: background 160ms ease; }
-  .ob-pdot.on { background: var(--accent); }
-  .ob-pbtns { display: inline-flex; gap: 6px; align-items: center; }
-  .ob-skip { background: none; border: 0; color: var(--fg-50); font-size: 12px; cursor: pointer; padding: 6px 8px; }
-  .ob-skip:hover { color: var(--fg); }
-  .ob-next { background: var(--fg); color: #0a0a0a; border: 0; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 14px; }
-  .ob-next:hover { filter: brightness(1.08); }
-  @media (prefers-reduced-motion: reduce) { .ob-spot, .ob-pop { transition: none; } }
-  /* First-run welcome splash + first-time setup. */
-  .ob-welcome { position: fixed; inset: 0; z-index: 9500; background: rgba(8,8,10,0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; }
-  .ob-welcome[hidden] { display: none; } /* the .ob-welcome display:flex would otherwise defeat the hidden attribute and dim the whole app */
-  .obw-card { width: 480px; max-width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,0.6); padding: 36px 32px; animation: view-in 260ms cubic-bezier(.4,0,.2,1); }
-  .obw-splash { text-align: center; }
-  .obw-mark { font-size: 20px; font-weight: 700; background: linear-gradient(135deg,#ff9a76 0%,#4a90e2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 24px; }
-  .obw-h1 { font-size: 20px; font-weight: 600; color: var(--fg); line-height: 1.2; margin-bottom: 12px; }
-  .obw-sub { font-size: 14.5px; color: var(--fg-60); line-height: 1.6; max-width: 380px; margin: 0 auto 28px; }
-  .obw-actions { display: flex; gap: 10px; justify-content: center; align-items: center; }
-  .obw-cta { background: var(--accent); color: #14110f; border: 0; border-radius: 9px; font-size: 14.5px; font-weight: 600; padding: 11px 22px; cursor: pointer; transition: filter 140ms ease; }
-  .obw-cta:hover { filter: brightness(1.06); }
-  .obw-back { background: none; border: 0; color: var(--fg-50); font-size: 13px; cursor: pointer; padding: 11px 8px; }
-  .obw-back:hover { color: var(--fg); }
-  .obw-skip { background: none; border: 0; color: var(--fg-40); font-size: 12px; cursor: pointer; margin-top: 18px; display: block; margin-left: auto; margin-right: auto; }
-  .obw-skip:hover { color: var(--fg-60); }
-  .obw-setup { text-align: left; }
-  .obw-steplbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
-  .obw-h2 { font-size: 14.5px; font-weight: 600; color: var(--fg-90); margin: 22px 0 4px; }
-  .obw-setup .obw-h2:first-of-type { margin-top: 0; }
-  .obw-note { font-size: 12px; color: var(--fg-50); line-height: 1.5; margin-bottom: 12px; }
-  .obw-budget { display: flex; gap: 8px; }
-  .obw-amt { flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-70); border-radius: 8px; padding: 9px 0; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; }
-  .obw-amt:hover { border-color: var(--fg-30); }
-  .obw-amt.on { background: var(--accent-wash); border-color: var(--accent); color: var(--fg); }
-  .obw-setup .obw-actions { justify-content: flex-end; margin-top: 26px; }
-
-  /* S12 · first-load skeleton reserves REAL card heights (a .task-card is
-   * ~66px: two rows + 13px padding) so content arriving causes zero layout
-   * shift. Card-shaped: border + ghost title/meta bars under one shimmer.
-   * Never shown on poll refreshes — fetchAll removes it after first data. */
-  .skeleton { padding: 16px 20px; max-width: 900px; margin: 0 auto; }
-  .skeleton-card {
-    height: 66px; border-radius: var(--radius); margin-bottom: 8px;
-    border: 1px solid var(--border-soft); background: var(--glass-2);
-    position: relative; overflow: hidden; padding: 13px 15px;
-  }
-  .skeleton-card::before, .skeleton-card::after {
-    content: ''; display: block; border-radius: 4px; background: var(--glass-3);
-  }
-  .skeleton-card::before { height: 13px; width: 55%; margin-bottom: 10px; }
-  .skeleton-card::after { height: 10px; width: 32%; }
-  .skeleton-card .sk-sweep {
-    position: absolute; inset: 0;
-    background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.05) 50%, transparent 65%);
-    background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
-  }
-  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
-
-  /* Detail header · matches demo v12 .phase-head pattern · uppercase brand
-   * kicker label · 22px shimmering gradient title · meta line beneath.
-   * The shimmer is the same 6-stop gradient as demo h1, scaled down for
-   * inside-a-page use (vs full-phase headline). */
-  .detail-header {
-    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px;
-  }
-  .back-btn {
-    font-family: var(--mono); font-size: 12px; color: var(--fg-70);
-    cursor: pointer; padding: 4px 8px; border-radius: 4px;
-    border: 1px solid var(--border);
-    flex-shrink: 0; margin-top: 14px;
-  }
-  .back-btn:hover { background: rgba(255,255,255,0.06); color: var(--fg-90); }
-  .detail-title-wrap { flex: 1; min-width: 0; }
-  .detail-kicker {
-    font-family: var(--mono); font-size: 10.5px; color: var(--fg-50);
-    letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
-    margin-bottom: 4px;
-  }
-  .detail-title {
-    font-family: var(--display);
-    font-weight: 700; font-size: 20px; line-height: 1.3;
-    letter-spacing: -0.015em;
-    color: var(--fg);
-  }
-  .detail-meta { font-family: var(--mono); font-size: 12px; color: var(--fg-50); margin-bottom: 16px; }
-  /* REQUEST_METHOD §2 — the acceptance contract block. Mono label (evidence),
-     voice criteria; glyph carries the verdict (green=met, red=unmet, muted=pending). */
-  .contract { background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; }
-  .contract .ac-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-40); display: flex; align-items: center; margin-bottom: 8px; }
-  .contract .ac-count { margin-left: auto; font-size: 10.5px; color: var(--fg-50); }
-  .contract .ac-row { display: flex; align-items: baseline; gap: 9px; padding: 3px 0; font-size: 13px; color: var(--fg-90); line-height: 1.5; }
-  .contract .ac-g { font-size: 12px; flex: none; width: 12px; text-align: center; color: var(--fg-40); }
-  .contract .ac-row.met .ac-g { color: var(--verified); }
-  .contract .ac-row.unmet .ac-g { color: var(--caught); }
-  .contract .ac-t { flex: 1; min-width: 0; }
-  /* Artifacts drawer (task #51) · header trigger + slide-in side panel */
-  .art-trig { color: var(--fg-70); cursor: pointer; }
-  .art-trig:hover { text-decoration: underline; }
-  .art-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 90; }
-  .art-scrim.open { opacity: 1; pointer-events: auto; }
-  /* Centered preview popup · scales up on large screens so diagrams/tables get
-     room (vs a cramped right drawer). */
-  .art-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-48%) scale(.98); opacity: 0; pointer-events: none;
-    width: min(880px, 92vw); max-height: 86vh; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius);
-    box-shadow: 0 24px 80px rgba(0,0,0,.6); transition: opacity .18s ease, transform .18s ease; z-index: 100; display: flex; flex-direction: column; }
-  .art-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
-  .art-modal-h { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--fg-80); }
-  .art-modal-h .x { margin-left: auto; cursor: pointer; color: var(--fg-50); font-size: 14.5px; }
-  .art-modal-h .x:hover { color: var(--fg-80); }
-  .art-modal-body { overflow: auto; padding: 16px 18px; }
-  .art-modal-body .panel { border: none; padding: 0; margin: 0; background: transparent; }
-  .art-modal-body .panel-title { display: none; }
-  /* Legible canvas: each artifact lifts onto an elevated surface so it's not
-     lost on near-black, and diagram/chart strokes + table text get contrast. */
-  .art-modal .artifact-card, .art-modal .art-mock, .art-modal .art-pick { background: #1c1e26; border: 1px solid #2c2f3a; border-radius: 10px; padding: 14px; margin-bottom: 14px; }
-  .art-modal .art-pick { border-left: 3px solid var(--fg-30); }
-  .art-modal .artifact-h { color: var(--fg-70); font-size: 12px; margin-bottom: 10px; }
-  .art-modal .art-seq { background: #21242e; border: 1px solid #333744; border-radius: 8px; padding: 12px; }
-  .art-modal .art-cmp .hd { background: #2a2d38; color: var(--fg-80); }
-  .art-modal .art-cmp .rl { background: #23262f; color: var(--fg-70); }
-  .art-modal .art-cmp .cell { background: #1a1c23; color: #d2d4de; }
-  .art-modal .art-mock-body { color: #cdd0da; }
-  /* brighter diagram strokes/text so the graph actually reads */
-  .art-modal .seq-svg .ll { stroke: #4a4d5a; }
-  .art-modal .seq-svg .box { fill: #2a2e3a; stroke: #444858; }
-  .art-modal .seq-svg .msg { stroke: #c2c4d0; }
-  .art-modal .seq-svg .msg.ret { stroke: #8a8d9c; }
-  .art-modal .seq-svg .mt { fill: #d2d4de; }
-  .art-modal .seq-svg .ah { fill: #c2c4d0; }
-  .art-modal .seq-svg .ah-ret { fill: #8a8d9c; }
-  @media (max-width: 560px){ .art-modal { width: 94vw; max-height: 90vh; } }
-  /* Chapter divider · phase transition in the thread narrative (demo v12) */
-  .chapter-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-family: var(--mono); font-size: 10.5px; }
-  .chapter-divider .ch-prev { color: var(--verified); white-space: nowrap; }
-  .chapter-divider .ch-prev:empty { display: none; }
-  .chapter-divider .ch-line { flex: 1; height: 1px; background: var(--border); }
-  .chapter-divider .ch-next { color: var(--fg-50); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.4px; }
-  .chapter-divider .ch-next b { color: var(--fg-70); }
-  /* Compact density · tightens the thread for daily-driver scanning (demo W8) */
-  body.density-compact .panel { padding: 8px 11px; margin-bottom: 8px; }
-  body.density-compact .conv-turn { padding: 6px 0; }
-  body.density-compact .artifact-card { margin-bottom: 7px; }
-  /* User-override result line (E-03 real flow) */
-  .override-result { margin-top: 8px; font-size: 12px; color: var(--fg-60); }
-  .override-result .ok { color: var(--verified); margin-right: 4px; }
-  .override-result code { background: var(--bg-2,#1a1a1f); padding: 1px 5px; border-radius: 3px; color: var(--accent); font-size: 10.5px; }
-  /* Structured artifacts · comparison / mock / pick (demo v12 parity) */
-  .artifact-card { margin-bottom: 12px; }
-  .artifact-h { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); margin-bottom: 6px; }
-  .art-cmp { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; font-size: 12px; }
-  .art-cmp .hd { background: var(--bg-2,#1a1a1f); color: var(--fg-60); font-family: var(--mono); font-size: 10.5px; padding: 6px 8px; font-weight: 600; }
-  .art-cmp .rl { background: var(--bg-1,#141418); color: var(--fg-50); font-family: var(--mono); font-size: 10.5px; padding: 6px 8px; }
-  .art-cmp .cell { background: var(--bg,#0f0f12); color: var(--fg-70); padding: 6px 8px; }
-  .art-cmp .cell .pick { color: var(--verified); }
-  .art-cmp .cell .meh { color: var(--warn,#e0b341); }
-  .art-mock { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
-  .art-mock-head { display: flex; align-items: center; background: var(--bg-2,#1a1a1f); padding: 6px 10px; font-family: var(--mono); font-size: 10.5px; }
-  .art-mock-head .status { color: var(--warn,#e0b341); }
-  .art-mock-head .ct { margin-left: auto; color: var(--fg-40); font-size: 10.5px; }
-  .art-mock-body { padding: 10px 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-70); white-space: pre; overflow-x: auto; }
-  .art-mock-body .jk { color: var(--fg-50); }
-  .art-mock-body .js { color: var(--verified); }
-  .art-mock-body .jn { color: var(--warn,#e0b341); }
-  .art-pick { border-left: 2px solid var(--fg-30); background: transparent; border-radius: 0 6px 6px 0; padding: 10px 12px; margin-bottom: 12px; }
-  .art-pick .k { color: var(--fg-70); font-family: var(--mono); font-size: 12px; font-weight: 600; margin-bottom: 5px; }
-  .art-pick .what { color: var(--fg-80); font-size: 12px; line-height: 1.5; margin-bottom: 5px; }
-  .art-pick .why { color: var(--fg-50); font-size: 12px; line-height: 1.5; }
-  /* Benchmark chart · horizontal bars (demo v12 .bench) */
-  .art-bench { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; font-size: 12px; }
-  .art-bench .bl { font-family: var(--mono); color: var(--fg-50); min-width: 96px; font-size: 10.5px; }
-  .art-bench .bb { flex: 1; height: 8px; background: var(--bg-2,#1a1a1f); border-radius: 4px; overflow: hidden; }
-  .art-bench .bf { display: block; height: 100%; background: var(--fg-70); border-radius: 4px; }
-  .art-bench .bf.allow { background: var(--verified); }
-  .art-bench .bf.warn { background: var(--warn,#e0b341); }
-  .art-bench .bv { font-family: var(--mono); color: var(--fg-70); min-width: 56px; text-align: right; font-size: 10.5px; }
-  /* Verifier severity checklist · ✓/⚠ per check */
-  .art-checklist { display: flex; flex-direction: column; gap: 1px; }
-  .art-check { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; border-top: 1px solid rgba(42,42,50,.5); font-size: 12px; }
-  .art-check:first-child { border-top: none; }
-  .art-check .ci { color: var(--verified); flex-shrink: 0; font-size: 12px; }
-  .art-check.warn .ci { color: var(--warn,#e0b341); }
-  .art-check .cl { color: var(--fg-80); }
-  .art-check .cn { color: var(--fg-40); font-family: var(--mono); font-size: 10.5px; margin-left: auto; text-align: right; }
-  /* Sequence diagram · inline SVG · var() resolves in CSS rules, never in SVG
-     presentation attributes — so every fill/stroke is classed, not inlined. */
-  .art-seq { overflow-x: auto; padding: 2px 0; }
-  .seq-svg { display: block; max-width: 100%; }
-  .seq-svg .ll { stroke: var(--border); stroke-dasharray: 3 3; }
-  .seq-svg .box { fill: var(--bg-2,#1a1a1f); stroke: var(--border); }
-  .seq-svg .at { fill: var(--fg-80); }
-  .seq-svg .msg { stroke: var(--fg-50); fill: none; }
-  .seq-svg .msg.ret { stroke: var(--fg-40); stroke-dasharray: 4 3; }
-  .seq-svg .msg.allow { stroke: var(--verified); }
-  .seq-svg .msg.warn { stroke: var(--warn,#e0b341); }
-  .seq-svg .mt { fill: var(--fg-60); }
-  .seq-svg .mt.allow { fill: var(--verified); }
-  .seq-svg .mt.warn { fill: var(--warn,#e0b341); }
-  .seq-svg .ah { fill: var(--fg-50); }
-  .seq-svg .ah-allow { fill: var(--verified); }
-  .seq-svg .ah-warn { fill: var(--warn,#e0b341); }
-  .seq-svg .ah-ret { fill: var(--fg-40); }
-  /* Multi-speaker conversation · me + team + agents (demo v12 .turn/.speaker) */
-  .conv-turn { padding: 9px 0; border-top: 1px solid rgba(42,42,50,.5); }
-  .conv-turn:first-child { border-top: none; }
-  /* S17 · @agent route mentions are wayfinding, not a decision — secondary blue */
-
-  /* v2 mockup · chat-bubble turns (avatar beside a named bubble) */
-  .conv-turn.turn { display: flex; gap: 12px; align-items: flex-start; padding: 0; border-top: none; margin-bottom: 16px; background: none; }
-  .conv-turn.turn .ab { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; flex: none; margin-top: 2px; }
-  .turn-body { flex: 1; min-width: 0; }
-  .turn-name { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-50); margin-bottom: 5px; }
-  .turn-name b { color: var(--fg-90); font-weight: 560; }
-  .turn-name .turn-tier { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-40); }
-  .turn-name .time { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--fg-30); }
-  /* Day Log (Direction A, Ega-picked 2026-07-06) — the room feed as one
-     scannable line per task: rail hue = agent, title + glance, receipt right. */
-  .dlog { display: flex; align-items: baseline; gap: 10px; padding: 7px 0 7px 14px; border-left: 2px solid var(--rail, var(--border)); margin: 0 0 2px; cursor: pointer; border-radius: 0 6px 6px 0; }
-  .dlog:hover { background: var(--glass-2); }
-  .dlog-t { font-weight: 600; font-size: 13px; color: var(--fg); white-space: nowrap; max-width: 38%; overflow: hidden; text-overflow: ellipsis; flex: none; }
-  .dlog-x { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); background: var(--glass-3); border-radius: 3px; padding: 1px 6px; flex: none; }
-  .dlog-g { font-size: 13px; color: var(--fg-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
-  .dlog-r { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); white-space: nowrap; margin-left: auto; flex: none; }
-  .dlog-v { font-family: var(--mono); font-size: 10.5px; color: var(--verified); flex: none; }
-  .dlog-b { font-family: var(--mono); font-size: 10.5px; color: var(--caught); flex: none; }
-  .dlog-l { font-family: var(--mono); font-size: 10.5px; color: var(--warn); flex: none; }
-  /* Direction A "The Record" (Ega-picked 2026-07-05) — the conversation as a
-     clean shared record: one consistent treatment, a hue rail + dot marks the
-     speaker, voice text full-width, no bubbles. --rail set inline per speaker. */
-  .rec-row { display: flex; gap: 0; margin: 0 0 2px; }
-  .rec-rail { width: 2px; flex: none; border-radius: 2px; background: var(--rail, var(--border)); }
-  .rec-body { flex: 1; min-width: 0; padding: 8px 0 8px 16px; }
-  .rec-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
-  .rec-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rail, var(--fg-40)); }
-  .rec-who { font-weight: 600; font-size: 13px; color: var(--fg); }
-  .rec-role { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-35, var(--fg-40)); }
-  .rec-time { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--fg-35, var(--fg-40)); }
-  .rec-text { font-size: 13px; line-height: 1.55; color: var(--fg-90); }
-  .rec-row .rec-text .at-route { color: var(--fg-70); font-family: var(--mono); font-size: 12px; }
-  .route-div { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 12px; color: var(--fg-40); }
-  .route-div .rl-line { flex: 1; height: 1px; background: var(--border); }
-  .route-div .rl-txt .at-route { color: var(--fg-70); font-family: var(--mono); }
-  /* v2 mockup · the proof SEAL on the brand gradient (proven by a different vendor) */
-  .seal-wrap { margin: 18px 0; }
-  .seal { border-radius: 14px; padding: 1.5px; background: linear-gradient(135deg, #ff9a76, #4a90e2); }
-  .seal-inner { display: flex; align-items: center; gap: 14px; background: var(--bg-1); border-radius: 12.5px; padding: 15px 18px; }
-  .seal-check { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff9a76, #4a90e2); color: #fff; font-size: 14.5px; font-weight: 700; }
-  .seal-txt { flex: 1; min-width: 0; }
-  .seal-l1 { font-size: 13px; color: var(--fg-90); }
-  .seal-l1 b { font-weight: 600; }
-  .seal-l2 { font-size: 12px; color: var(--fg-50); margin-top: 3px; line-height: 1.45; }
-  .tl-div { display: flex; align-items: center; gap: 9px; margin: 15px 0 8px; }
-  .tl-verb { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--fg-70); background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
-  .tl-ln { flex: 1; height: 1px; background: var(--border); }
-  .tl-acts { padding-left: 25px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
-  .tl-evt { font-family: var(--mono); font-size: 12px; }
-  .tl-evt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-50); }
-  .tl-evt > summary::-webkit-details-marker { display: none; }
-  .tl-evt > summary:hover { color: var(--fg-70); border-color: var(--fg-30); }
-  .tl-evt .tl-caret { color: var(--fg-30); transition: transform .12s; font-size: 10.5px; }
-  .tl-evt[open] .tl-caret { transform: rotate(90deg); }
-  .tl-evt .tl-lbl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .tl-evt .tl-dur { color: var(--fg-30); }
-  .tl-evt .tl-badge { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; margin-left: auto; }
-  .tl-evt .tl-lbl + .tl-badge { margin-left: auto; }
-  .tl-evt .tl-outcome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-40); }
-  .tl-evt .tl-outcome::before { content: "\\00b7\\00a0"; color: var(--fg-30); }
-  .tl-evt.tl-flat > summary { cursor: default; }
-  .tl-evt.tl-flat .tl-caret { visibility: hidden; }
-  /* DESIGN.md §4.3 room→receipts — the step wall collapses into one calm mono
-     row; evidence one click away. Mono = evidence per the voice/evidence split. */
-  .tl-receipt { margin: 8px 0 4px; }
-  .tl-receipt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 8px; font-family: var(--mono); font-size: 12px; color: var(--fg-50); }
-  .tl-receipt > summary::-webkit-details-marker { display: none; }
-  .tl-receipt > summary:hover { color: var(--fg-70); border-color: var(--border); }
-  .tl-receipt .tl-caret { color: var(--fg-30); transition: transform .12s; }
-  .tl-receipt[open] > summary .tl-caret { transform: rotate(90deg); }
-  .tl-receipt .rcpt-view { margin-left: auto; color: var(--fg-35, var(--fg-40)); }
-  .tl-receipt[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: var(--fg-70); }
-  .tl-receipt .rcpt-body { border: 1px solid var(--border-soft); border-top: none; border-radius: 0 0 8px 8px; padding: 10px 12px 4px; }
-  .tl-evt .tl-badge.allow { color: var(--verified); background: rgba(52,208,88,.12); }
-  .tl-evt .tl-badge.block { color: var(--caught); background: rgba(207,139,126,.14); }
-  .tl-evt .tl-badge.clean { color: var(--fg-70); background: rgba(255,255,255,.06); }
-  .tl-evt.block > summary { border-color: rgba(207,139,126,.35); }
-  .tl-out { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); white-space: pre-wrap; padding: 7px 10px 2px 20px; }
-  /* Expandable full tool output (ANSI-colored; was clipped to 400 chars) */
-  .tl-out-x { margin: 2px 0 2px 20px; }
-  .tl-out-x > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px; }
-  .tl-out-x > summary::-webkit-details-marker { display: none; }
-  .tl-out-x .tl-out-prev { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); white-space: pre-wrap; flex: 1; min-width: 0; max-height: 40px; overflow: hidden; }
-  .tl-out-x .tl-out-more { font-size: 10.5px; color: var(--fg-70); white-space: nowrap; }
-  .tl-out-x[open] .tl-out-more::after { content: ' (collapse)'; }
-  .tl-out-full { font-family: var(--mono); font-size: 12px; color: var(--fg-70); white-space: pre-wrap; word-break: break-word; background: var(--bg-2); border-radius: 5px; padding: 8px 11px; margin: 5px 0 2px 16px; max-height: 360px; overflow: auto; }
-  /* Agent thinking (kind:'think') · interleaved reasoning, muted */
-  .tl-think { margin: 7px 0 7px 33px; padding-left: 10px; border-left: 2px solid var(--border); }
-  .tl-think-tag { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); letter-spacing: 0.04em; text-transform: uppercase; }
-  .tl-think-text { color: var(--fg-50); font-size: 12px; line-height: 1.5; font-style: italic; margin-top: 2px; }
-  .tl-think-text .ic { font-style: normal; }
-  /* Agent question card (kind:'ask') · the agent is asking the user */
-  .tl-ask { margin: 12px 0; border: 1px solid var(--accent); border-radius: 9px; background: rgba(255,154,118,.05); padding: 12px 14px; }
-  .tl-ask-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-  .tl-ask-title { font-weight: 600; font-size: 13px; color: var(--accent); }
-  .ask-q { margin: 8px 0; }
-  .ask-q-head { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
-  .ask-q-text { font-size: 14.5px; color: var(--fg); font-weight: 500; margin-bottom: 8px; }
-  .ask-opts { display: flex; flex-direction: column; gap: 6px; }
-  .ask-opt { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: border-color .12s, background .12s; }
-  .ask-opt:hover { border-color: var(--accent); background: rgba(255,154,118,.08); }
-  .ask-opt.picked { border-color: var(--accent); background: rgba(255,154,118,.14); }
-  .ask-opt-label { font-size: 13px; color: var(--fg); font-weight: 500; }
-  .ask-opt-desc { font-size: 12px; color: var(--fg-50); line-height: 1.4; }
-  .ask-hint { font-size: 12px; color: var(--fg-40); margin-top: 8px; }
-  .ask-foot { margin-top: 9px; }
-  .ask-send { background: var(--accent); color: #1a1a1f; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; padding: 7px 14px; cursor: pointer; }
-  .ask-send:disabled { opacity: .5; cursor: default; }
-  .ask-answered { margin-top: 9px; font-size: 12px; color: var(--verified); font-weight: 500; }
-  .tl-ask.answered { border-color: var(--border); background: rgba(255,255,255,.02); }
-  .tl-ask.answered .ask-opt { cursor: default; }
-  /* Agent's own words (kind:'say') · the "watch it work" reasoning, in the agent's voice */
-  .tl-say { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; }
-  .tl-say .ab { margin-top: 2px; width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
-  .tl-say-text { flex: 1; min-width: 0; font-size: 13px; color: var(--fg-80); line-height: 1.5; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; border-top-left-radius: 3px; padding: 11px 14px; }
-  .summary-turn .tl-say-body { flex: 1; min-width: 0; }
-  .summary-turn .card-agent { display: inline-block; margin-bottom: 7px; }
-  /* Layered turn — the glance leads, the record rests collapsed behind it. */
-  .glance-turn .gl-line { font-size: 14.5px; line-height: 1.5; color: var(--fg-90); letter-spacing: -0.005em; }
-  .glance-turn .gl-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px;
-    font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); }
-  .glance-turn .vline { margin: 10px 0 0; }
-  .glance-turn .vline-meta { margin-top: 2px; }
-  .glance-turn .gl-more { margin-top: 10px; }
-  .glance-turn .gl-more > summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 10.5px;
-    text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-40); user-select: none; }
-  .glance-turn .gl-more > summary::-webkit-details-marker { display: none; }
-  .glance-turn .gl-more > summary:hover { color: var(--fg-70); }
-  .glance-turn .gl-more[open] > summary { margin-bottom: 8px; }
-  .glance-turn .gl-more .tl-say-text { border-top-left-radius: 12px; }
-
-  .panel {
-    background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px;
-    padding: 13px 16px; margin-bottom: 12px;
-  }
-  .panel-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-40); text-transform: uppercase; margin-bottom: 9px; }
-  /* Observed (host) sessions — the coding agents codehere watches in your own
-     terminal · distinct from spawned tasks below. Proves the INWARD axis:
-     every agent, even the one you're talking to right now, is a member. */
-  .obs-head { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-60); margin-bottom: 2px; }
-  /* S19 · the eye emoji died; a state-colored glyph anchors the head (● live, ○ idle) */
-  .obs-head .obs-glyph { font-family: var(--mono); color: var(--fg-40); }
-  .obs-head .obs-glyph.live { color: var(--fg); }
-  .obs-head b { color: var(--fg-80); font-weight: 600; }
-  .obs-sub { font-size: 10.5px; color: var(--fg-40); margin-bottom: 9px; }
-  /* Thariq loop-2 · the observer as a PROMINENT rail (was a thin strip). */
-  #observer-rail { margin: 0 0 22px; }
-  .observer-rail { background: linear-gradient(180deg, var(--accent-wash, rgba(255,154,118,.10)), transparent); border: 1px solid rgba(255,154,118,0.22); border-radius: 9px; padding: 15px 18px; }
-  .observer-rail .obs-head { font-size: 13px; color: var(--fg-80); margin-bottom: 3px; }
-  .observer-rail .obs-head b { color: var(--fg); }
-  .observer-rail .obs-head .obs-live-n { color: var(--fg); font-weight: 600; }
-  .observer-rail .obs-sub { font-size: 12px; color: var(--fg-50); margin-bottom: 12px; }
-  .observer-rail .obs-row { padding: 8px 10px; margin: 0; font-size: 12px; border-top-color: var(--border-soft); }
-  .observer-rail.empty { border-style: dashed; }
-  .observer-rail .obs-teach { font-size: 12px; color: var(--fg-50); line-height: 1.6; margin-top: 4px; }
-  .observer-rail .obs-teach code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); color: var(--accent); }
-  .obs-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-top: 1px solid var(--border); font-size: 12px; cursor: pointer; border-radius: 5px; transition: background 0.12s; }
-  .obs-row:first-of-type { border-top: none; }
-  .obs-row:hover { background: rgba(255,154,118,0.06); }
-  .obs-id { font-family: var(--mono); color: var(--accent); font-size: 12px; min-width: 66px; }
-  .obs-mix { color: var(--fg-50); flex: 1; font-family: var(--mono); font-size: 10.5px; }
-  .obs-dur { color: var(--fg-40); font-size: 10.5px; }
-  .obs-live { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
-  .obs-live.live { background: var(--fg); animation: cb-blink 1.4s ease infinite; }
-  .obs-live.recent { background: var(--warn,#e0b341); }
-  .obs-live.idle { background: var(--fg-30); }
-  .obs-badge { font-size: 10.5px; text-transform: uppercase; font-family: var(--mono); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.3px; }
-  .obs-badge.low { color: var(--verified); border: 1px solid color-mix(in srgb, var(--verified) 40%, transparent); }
-  .obs-badge.medium { color: var(--warn, #e0b341); border: 1px solid color-mix(in srgb, var(--warn, #e0b341) 40%, transparent); }
-  .obs-badge.high { color: var(--caught); border: 1px solid color-mix(in srgb, var(--caught) 40%, transparent); }
-  .obs-blocked { color: var(--caught); font-size: 10.5px; font-family: var(--mono); }
-  /* Host-session thread · tool-call timeline */
-  .obs-timeline { display: flex; flex-direction: column; }
-  .obs-call { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 12px; }
-  .obs-call:first-child { border-top: none; }
-  .obs-call.is-block { background: color-mix(in srgb, var(--caught) 8%, transparent); margin: 0 -8px; padding: 5px 8px; border-radius: 4px; border-top-color: transparent; }
-  .obs-call-time { font-family: var(--mono); color: var(--fg-30); font-size: 10.5px; min-width: 64px; flex-shrink: 0; }
-  .obs-call-tool { font-family: var(--mono); color: var(--accent); font-size: 10.5px; min-width: 56px; flex-shrink: 0; }
-  .obs-call-prev { color: var(--fg-60); font-family: var(--mono); font-size: 10.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .obs-call-tag { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
-  .obs-call-tag.ok { color: var(--fg-40); }
-  .obs-call-tag.warn { color: var(--warn, #e0b341); }
-  .obs-call-tag.block { color: var(--caught); border: 1px solid color-mix(in srgb, var(--caught) 40%, transparent); }
-  .obs-call-tag.crit { color: #fff; background: var(--caught); }
-  /* Chain-flow · audit chain as connected nodes (demo v12 .chain-flow) */
-  .chain-flow-wrap { padding: 4px 0 14px; }
-  .chain-flow { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 4px 2px 8px; }
-  .cf-node { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-2,#1a1a1f); flex-shrink: 0; cursor: default; }
-  .cf-node .cf-seq { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); line-height: 1; }
-  .cf-node .cf-tool { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--fg-70); line-height: 1.2; }
-  .cf-node.ok { border-color: color-mix(in srgb, var(--verified) 35%, var(--border)); }
-  .cf-node.ok .cf-tool { color: var(--verified); }
-  .cf-node.block { border-color: var(--caught); background: color-mix(in srgb, var(--caught) 12%, var(--bg-2,#1a1a1f)); }
-  .cf-node.block .cf-tool { color: var(--caught); }
-  .cf-node.crit { border-color: var(--caught); background: var(--caught); }
-  .cf-node.crit .cf-tool, .cf-node.crit .cf-seq { color: #fff; }
-  .cf-link { width: 14px; height: 2px; background: linear-gradient(90deg, var(--verified), color-mix(in srgb, var(--verified) 30%, transparent)); flex-shrink: 0; opacity: 0.6; }
-  .cf-gap { font-family: var(--mono); font-size: 12px; color: var(--fg-30); padding: 0 8px; flex-shrink: 0; letter-spacing: 1px; }
-  .cf-legend { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); }
-  /* Observed session · honest read-only affordance (no fake composer) */
-  .obs-readonly-note { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px; background: rgba(255,255,255,0.015); }
-  .obs-readonly-note .t { font-size: 12px; color: var(--fg-50); line-height: 1.5; margin-bottom: 10px; }
-  .obs-fork-btn { background: var(--accent); color: #1a1a1f; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; }
-  .obs-fork-btn:hover { filter: brightness(1.08); }
-  .obs-fork-btn:disabled { opacity: 0.6; cursor: default; }
-  /* Remote-control panel · drive a managed agent (inject into running turn) */
-  #control-panel:empty { display: none; }
-  .ctl-head { font-size: 12px; color: var(--fg-50); font-family: var(--mono); margin-bottom: 8px; }
-  .ctl-head .ag { color: var(--fg); font-weight: 600; }
-  .ctl-head code { background: var(--bg-2,#1a1a1f); padding: 1px 5px; border-radius: 3px; color: var(--fg-70); }
-  .ctl-feed { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; max-height: 240px; overflow-y: auto; }
-  .ctl-evt { font-size: 12px; color: var(--fg-80); padding: 5px 9px; background: var(--bg-2,#1a1a1f); border-radius: 6px; border-left: 2px solid var(--border); }
-  .ctl-evt.dim { color: var(--fg-40); border-left-color: var(--border); font-style: italic; }
-  .ctl-composer { display: flex; gap: 7px; }
-  .ctl-composer input { flex: 1; background: var(--bg-2,#1a1a1f); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); padding: 7px 10px; font-size: 12px; }
-  .ctl-composer input:focus { outline: none; border-color: var(--accent); }
-  .ctl-composer button { background: var(--accent); color: #1a1a1f; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; }
-  /* Remote Control · honest live badge + steer chips + channel line. The badge
-     renders ONLY inside the real-channel branch (controlManagedAgent success) —
-     no live channel, no badge. Anti-screen-lie (the F-AGENT-SWITCHER class). */
-  .ctl-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(132,181,148,0.08); border: 1px solid rgba(132,181,148,0.35); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--verified); font-weight: 600; margin-bottom: 10px; }
-  .ctl-badge .lv { width: 8px; height: 8px; border-radius: 50%; background: var(--verified); box-shadow: 0 0 7px var(--verified); animation: pulse 1.6s infinite; }
-  .ctl-steer { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
-  .ctl-steer .chip { font-size: 12px; color: var(--fg-70); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
-  .ctl-steer .chip:hover { border-color: var(--accent); color: var(--fg); }
-  .ctl-steer .chip.stop { border-color: rgba(207,139,126,0.4); color: var(--caught); }
-  .ctl-channel { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-40); margin-top: 8px; }
-  .ctl-channel .lv { width: 7px; height: 7px; border-radius: 50%; background: var(--verified); box-shadow: 0 0 7px var(--verified); }
-  .ctl-channel b { color: var(--verified); }
-  .outcome-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-70); margin-bottom: 4px; }
-  .outcome-item .check { color: var(--verified); }
-  .outcome-item .cross { color: var(--caught); }
-  .outcome-item .pending { color: var(--fg-40); }
-
-  /* .verdict / .verdict.verified / .unverified / .failed removed 2026-08-07:
-     zero emitters anywhere in the product. Found by the §1 gate, which flagged
-     a verdict painting itself green with no evidence behind it — the rule was
-     right, the code was just already dead. */
-
-
-  /* W-PASS payload diff coloring · old values red strike-through, new values green */
-  .wp-payload .key { color: var(--fg-50); }
-  .wp-payload .val { color: var(--verified); }
-  .wp-payload .from { color: var(--caught); text-decoration: line-through; }
-  .wp-payload .arrow { color: var(--fg-40); margin: 0 4px; }
-  .wp-payload .added { color: var(--verified); }
-
-  /* W-PASS inline write-pass card · matches demo v12 lines 691-704 · blue
-   * accent (not orange) because writes to third-party systems are the rare
-   * moment when codehere mediates instead of just observes. Lives inline in
-   * the step timeline · primary button opens the modal for actual approval. */
-  .write-pass {
-    padding: 12px 14px; margin: 10px 0;
-    background: var(--glass-3);
-    border: 1px solid var(--glass-3);
-    border-left: 3px solid var(--fg-30);
-    border-radius: 6px;
-  }
-  .write-pass .head {
-    display: flex; align-items: baseline; gap: 8px;
-    margin-bottom: 6px;
-    font-family: var(--mono); font-size: 10.5px;
-    color: var(--fg-70); letter-spacing: 0.12em; text-transform: uppercase;
-  }
-  .write-pass h4 {
-    font-size: 13px; font-weight: 600; color: var(--fg);
-    margin: 2px 0 6px;
-  }
-  .write-pass .target { font-family: var(--mono); font-size: 12px; color: var(--fg-70); margin-bottom: 6px; }
-  .write-pass .target b { color: var(--fg); }
-  .write-pass .payload {
-    padding: 8px 11px; margin: 6px 0;
-    background: hsl(0 0% 9%); border: 1px solid var(--border);
-    border-radius: 4px;
-    font-family: var(--mono); font-size: 12px;
-    color: var(--fg-70); white-space: pre-wrap; line-height: 1.55;
-  }
-  .write-pass .payload .key { color: var(--fg-50); }
-  .write-pass .payload .val { color: var(--verified); font-weight: 600; }
-  .write-pass .payload .from { color: var(--caught); text-decoration: line-through; }
-  .write-pass .payload .arrow { color: var(--fg-40); margin: 0 4px; }
-  .write-pass .actions {
-    display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
-  }
-  .write-pass button {
-    font-family: var(--mono); font-size: 12px; padding: 5px 11px;
-    border-radius: 4px; cursor: pointer;
-    border: 1px solid var(--border); background: transparent; color: var(--fg-70);
-    transition: filter 150ms, border-color 150ms, color 150ms;
-  }
-  .write-pass button.primary {
-    background: var(--accent); color: #241a14; border-color: var(--accent); font-weight: 600;
-  }
-  .write-pass button.primary:hover { filter: brightness(1.08); }
-
-
-  /* Verified celebration · matches demo v12 .verified-block (lines 429-438).
-   * Centered card with gradient green bg, 38px ✓ badge, uppercase VERIFIED
-   * kicker, larger headline, mono stats line. Arrival animation slides up
-   * + shimmer sweep so the moment lands. The single most important moment
-   * in the detail view — the agent's claim survived verification. */
-  .verified-block {
-    padding: 18px 22px; text-align: center;
-    background: linear-gradient(135deg, rgba(132,181,148,0.08), rgba(132,181,148,0.02));
-    border: 1px solid rgba(132,181,148,0.35);
-    border-left: 3px solid var(--verified); border-radius: 8px;
-    margin: 8px 0; position: relative; overflow: hidden;
-    opacity: 0; transform: translateY(12px);
-    animation: verifiedIn 600ms cubic-bezier(0.16,1,0.3,1) 300ms forwards,
-               verifiedShimmer 1.2s ease 900ms;
-  }
-  @keyframes verifiedIn { to { opacity: 1; transform: translateY(0); } }
-  @keyframes verifiedShimmer {
-    0%   { background-image: linear-gradient(110deg, transparent 30%, rgba(132,181,148,0.18) 50%, transparent 70%); background-size: 250% 100%; background-position: -50% 0; background-repeat: no-repeat; }
-    100% { background-image: linear-gradient(110deg, transparent 30%, rgba(132,181,148,0.18) 50%, transparent 70%); background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat; }
-  }
-  .verified-block .badge {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 38px; height: 38px; border-radius: 50%;
-    background: var(--verified); color: #000;
-    font-size: 20px; font-weight: 700;
-    margin-bottom: 8px; box-shadow: 0 0 0 4px rgba(132,181,148,0.15);
-  }
-  .verified-block .k {
-    font-family: var(--mono); font-size: 10.5px; color: var(--verified);
-    letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 5px;
-  }
-  .verified-block .what {
-    font-size: 20px; font-weight: 600; color: var(--fg);
-    margin-bottom: 6px; letter-spacing: -0.01em; line-height: 1.35;
-  }
-
-  details.collapsible { margin-bottom: 12px; }
-  details.collapsible summary {
-    font-family: var(--mono); font-size: 12px; color: var(--fg-50);
-    cursor: pointer; padding: 8px 0; user-select: none;
-  }
-  details.collapsible summary:hover { color: var(--fg); }
-  .turn { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
-  .turn.user { color: var(--fg-90); }
-  .turn.assistant { color: var(--fg-70); }
-  .tc { font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
-  .tc-label { color: var(--fg); font-weight: 500; }
-  .tc-output { margin: 4px 0 0; padding: 6px 10px; background: var(--bg-2); border-radius: 4px; font-family: var(--mono); font-size: 12px; color: var(--fg-50); white-space: pre-wrap; word-break: break-all; max-height: 100px; overflow: auto; }
-  .tc-dur { font-size: 10.5px; color: var(--fg-30); margin-left: 8px; }
-
-  .input-area {
-    border-top: 1px solid var(--border-soft); padding: 12px 20px;
-    background: var(--bg-1); flex-shrink: 0;
-  }
-  /* GitHub import row (initGhImport): connect button or repo + issue picker. */
-  .gh-import { display: flex; align-items: center; gap: 6px; margin: 0 auto 6px; max-width: 900px; font-size: 12px; color: var(--fg-50); flex-wrap: wrap; }
-  .gh-import:empty { display: none; }
-  .gh-import .ghi-in { flex: 0 0 180px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: inherit; font: inherit; font-size: 12px; padding: 3px 8px; }
-  .gh-import .ghi-sel { background: var(--bg-2); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: var(--fg); font: inherit; font-size: 12px; padding: 3px 8px; max-width: 360px; }
-  .gh-import .ghi-btn { background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: var(--fg-70); font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; }
-  .gh-import .ghi-btn:hover { border-color: var(--accent); color: var(--fg); }
-  .gh-import .ghi-hint, .gh-import .ghi-msg { color: var(--fg-40); }
-  .input-bar {
-    display: flex; align-items: center; gap: 10px;
-    background: var(--bg-2); border: 1px solid var(--border);
-    border-radius: 12px; padding: 10px 14px; max-width: 900px; margin: 0 auto;
-    transition: border-color 140ms ease, box-shadow 140ms ease;
-  }
-  /* Composer · typing affordance · matches demo v12 .composer-bar.typing
-   * (line 329). The border goes brand-orange the moment the user starts
-   * typing · the input visibly "wakes up." :focus-within handles the
-   * focus state, .typing handles the value-has-chars state. */
-  .input-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
-  .input-bar.typing { border-color: var(--accent); }
-  .input-bar.warn { border-color: var(--warn); }
-  .input-bar.block { border-color: var(--caught); }
-  /* R10 · one canonical composer at a time. When detail-view is open the
-   * detail follow-up composer ("Ask a follow-up about this task...") is
-   * the only input that should accept text · hide the global main
-   * composer + kbd-hint. Pre-fix bug: BOTH composers stacked, both with
-   * "-> Auto · ~$0.02" chips, user couldn't tell which one typed to which.
-   * Surfaced 2026-05-24 by Ega. */
-  body.detail-open > .app > .input-area { display: none; }
-  /* Keyboard hint · matches demo v12 lines 418-419. Subtle row of mono
-   * shortcuts under the composer · enter send · shift+enter newline · ⌘K focus.
-   * Discoverable without being noise. */
-  .kbd-hint {
-    font-family: var(--mono); font-size: 10.5px; color: var(--fg-30);
-    padding: 4px 0 0; max-width: 900px; margin: 0 auto;
-    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
-  }
-  .kbd-hint .item { display: inline-flex; gap: 5px; align-items: center; }
-  .kbd {
-    padding: 1px 5px; background: hsl(0 0% 12%);
-    border: 1px solid var(--border); border-radius: 3px;
-    color: var(--fg-50); font-size: 10.5px; line-height: 1.4;
-  }
-  .input-ta {
-    flex: 1; background: transparent; border: none;
-    color: var(--fg); font-family: var(--sans); font-size: 13px;
-    resize: none; outline: none; height: 22px; line-height: 22px;
-  }
-  .input-ta::placeholder { color: var(--fg-40); }
-  .input-ta:disabled { color: var(--fg-30); }
-  .input-meta { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
-  .input-meta .pick-agent { color: var(--fg-70); cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: background 0.15s; background: transparent; border: none; font: inherit; -webkit-appearance: none; appearance: none; }
-  .input-meta .pick-agent:hover { background: rgba(255,255,255,0.05); color: var(--fg); }
-  /* S12 green audit · the cost estimate is information, not a verified/allow
-   * state — green here was decoration. Secondary hue instead. */
-  .input-meta .cost-est { color: var(--fg-70); padding: 2px 6px; border-radius: var(--radius-chip); background: var(--glass-2); }
-  /* Crafted agent picker (composer) — vendor badges + real readiness dots. */
-  .agentpick-wrap { position: relative; display: inline-flex; }
-  .agentpick { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border); color: var(--fg-70); cursor: pointer; padding: 3px 6px 3px 7px; border-radius: 7px; font: inherit; font-size: 12px; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; }
-  .agentpick:hover { border-color: var(--fg-30); background: var(--bg-2); color: var(--fg); }
-  .agentpick .agentpick-cur { display: inline-flex; align-items: center; gap: 5px; }
-  .agentpick .ap-name { font-weight: 500; }
-  .agentpick .ap-spark { width: 12px; height: 12px; color: var(--accent); }
-  .agentpick .ab { width: 15px; height: 15px; font-size: 10.5px; }
-  .agentpick-car { width: 12px; height: 12px; color: var(--fg-40); }
-  .agentpick-menu { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 236px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 14px 44px rgba(0,0,0,0.5); padding: 6px; z-index: 60; }
-  .ap-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 7px; cursor: pointer; }
-  .ap-item:hover, .ap-item:focus-visible { background: var(--bg-2); outline: none; }
-  .ap-item.sel { background: var(--accent-wash); }
-  .ap-item .ab { width: 18px; height: 18px; font-size: 10.5px; flex: none; }
-  .ap-item .ap-spark { width: 16px; height: 16px; color: var(--accent); flex: none; }
-  .ap-il { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
-  .ap-in { font-size: 12px; color: var(--fg-90); font-weight: 500; }
-  .ap-isub { font-size: 10.5px; color: var(--fg-40); }
-  .ap-st { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); text-transform: uppercase; letter-spacing: 0.08em; flex: none; }
-  .ap-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
-  .ap-dot.ready { background: var(--fg-70); }
-  .ap-dot.setup { background: var(--warn); }
-  .ap-dot.offline { background: var(--fg-30); }
-  .ap-dot.busy { background: var(--fg); }
-  .ap-chk { color: var(--accent); font-size: 12px; flex: none; }
-  .send-btn {
-    background: var(--accent); color: #241a14; border: none; border-radius: 8px;
-    width: 30px; height: 30px; display: flex; align-items: center;
-    justify-content: center; cursor: pointer; flex-shrink: 0;
-    transition: filter 140ms ease, transform 0.15s ease, opacity 140ms ease;
-  }
-  .send-btn:hover { filter: brightness(1.08); }
-  .send-btn:active { transform: scale(0.94); }
-  .send-btn:disabled { opacity: 0.35; cursor: default; }
-  .offline-banner {
-    text-align: center; padding: 4px; font-size: 10.5px; font-family: var(--mono);
-    color: var(--warn); background: rgba(217,164,65,0.06);
-    border-bottom: 1px solid rgba(217,164,65,0.15);
-  }
-  ::-webkit-scrollbar { width: 6px; }
-  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-
-  /* ════ S12 · A-home — the story of your day ════ */
-  /* The product home is never a landing page — upHero() only ever writes the
-     compact .day-line. The marketing block that used to live here (hh-kick, an
-     h1 at reading size, hh-grad, hh-teach, hh-agents) was dead: zero references
-     in JS or markup. Removed 2026-08-07, which also freed --fs-reading to mean
-     what DESIGN.md §0 says it means, and retired one of the wordmark-gradient
-     sites without touching the brand. */
-  .home-hero { max-width: 880px; margin: 0 auto; padding: 40px 24px 18px; text-align: center; }
-
-
-
-  /* Story-arc line on a card · ONE line from REAL data only */
-  .card-arc { margin: 6px 0 2px; font-size: 12px; color: var(--fg-70); line-height: 1.55; }
-  .card-arc .ok { color: var(--verified); }
-  .card-arc .wr { color: var(--warn); }
-
-  /* "show earlier work" expander · progressive disclosure, scroll preserved */
-  .show-earlier { display: block; width: 100%; margin: 8px 0; padding: 10px; background: transparent; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--fg-50); font-family: var(--mono); font-size: 12px; cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
-  .show-earlier:hover { color: var(--fg); border-color: var(--fg-30); }
-
-  /* ════ S14 · calm detail (direction E) — the verdict LINE ════
-   * Dot + ONE word + one quiet sentence. Green ONLY for verdict=verified on a
-   * non-failed, non-mock, git-tracked run — the only green on the page (H1/H9
-   * read the same data-verify contract off .vline the old hero carried). */
-  .vline { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 2px; }
-  .vline .vl-d { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; align-self: center; background: var(--fg-40); }
-  .vline .vl-w { font-size: 14.5px; font-weight: 600; color: var(--fg-90); }
-  .vline .vl-s { font-size: 13px; color: var(--fg-50); }
-  /* DESIGN.md §1 · green is reachable ONLY from measured evidence. Scoping it to
-     [data-evidence="measured"] makes that structural rather than a convention:
-     a verdict whose evidence is anything else renders in ink, so a future code
-     path that produced a green from a model's opinion would have to defeat CSS
-     specificity to show it. The fallback below is not decoration — it is what a
-     non-measured verdict is SUPPOSED to look like. */
-  .vline.v-ok[data-evidence='measured'] .vl-d { background: var(--verified); }
-  .vline.v-ok[data-evidence='measured'] .vl-w { color: var(--verified); }
-  .vline.v-ok:not([data-evidence='measured']) .vl-d { background: var(--fg-40); }
-  .vline.v-ok:not([data-evidence='measured']) .vl-w { color: var(--fg-90); }
-  .vline.v-wr .vl-d { background: var(--warn); }
-  .vline.v-wr .vl-w { color: var(--warn); }
-  .vline.v-bad .vl-d { background: var(--caught); }
-  .vline.v-bad .vl-w { color: var(--caught); }
-  .vline-meta { font-family: var(--mono); font-size: 12px; color: var(--fg-40); margin: 4px 0 12px; }
-
-  /* The evidence table · CLAIM / CHECKED / RESULT · real recorded values only */
-  .evi { border: 1px solid var(--border); border-radius: 9px; margin: 12px 0 14px; overflow: hidden; }
-  .evi .erow2 { display: flex; gap: 16px; padding: 12px 16px; align-items: baseline; }
-  .evi .erow2 + .erow2 { border-top: 1px solid rgba(255,255,255,0.05); }
-  .evi .elbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-30); flex: 0 0 74px; }
-  .evi .erow2.checked .elbl { color: var(--fg-50); }
-  .evi .etxt { font-size: 12px; color: var(--fg-70); line-height: 1.55; min-width: 0; }
-  .evi .erow2.result .etxt { font-family: var(--mono); font-size: 12px; }
-  .evi .erow2.result.good .etxt { color: var(--verified); }
-  .evi .erow2.result.bad .etxt { color: var(--warn); }
-  .evi .erow2.note .etxt { font-family: var(--mono); font-size: 12px; color: var(--fg-50); }
-
-  /* The conversation rests as one quiet row · expands the unified timeline */
-  details.conv-wrap > summary.convrow { font-family: var(--mono); font-size: 12px; color: var(--fg-40); cursor: pointer; padding: 10px 2px; margin-top: 8px; list-style: none; }
-  details.conv-wrap > summary.convrow::-webkit-details-marker { display: none; }
-  details.conv-wrap > summary.convrow:hover, details.conv-wrap[open] > summary.convrow { color: var(--fg-70); }
-
-  /* Timeline phase dividers · numbered chapters, S14-quiet (mono, hairline) */
-  .tl-div .tl-chap-n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--fg-30); line-height: 1; letter-spacing: 0.06em; }
-  .tl-div .tl-verb { letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-50); background: transparent; border-color: transparent; }
-
-  /* ════ S12 · AX floor ════ */
-  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
-  .task-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-
-  /* ════ S13 · One question at rest (direction E) ════
-   * ~95% grayscale at rest: orange belongs to the decision queue (+ focus
-   * ring) ONLY; green belongs to Verified only.
-   * S16 exception: the header wordmark KEEPS the gradient name (base rule
-   * above) — the landing (codehere.uk, repo codehere-landing) is the brand
-   * source of truth and its nav wordmark is lowercase 'codehere' in
-   * linear-gradient(135deg, #ff9a76 -> #4a90e2), with NO dot; the product
-   * header matches it exactly (the old pulsing accent dot was dropped —
-   * the landing never had one, and it spent orange this rule reserves for
-   * the decision queue). Same treatment on /verify's header. */
-  .header { gap: 12px; }
-  /* the rest of the at-rest chrome sheds its orange too: the composer send is
-     THE one filled button (white fill, like the queue primary), the footer
-     audit line + observer + first-run hero go calm gray. No orange — that's
-     reserved for the decision queue. (Send fill lives on the base .send-btn now.) */
-  .oss-footer .brand { color: var(--fg-50); }
-  .audit-chain-btn { background: var(--bg-2, rgba(255,255,255,0.05)); color: var(--fg-70); border-color: var(--border); }
-  .audit-chain-btn:hover { background: var(--bg-2, rgba(255,255,255,0.05)); box-shadow: none; border-color: var(--fg-30); }
-  .observer-rail { background: rgba(255,255,255,0.02); border-color: var(--border); }
-  .observer-rail.collapsed { background: transparent; border: 0; padding: 0; }
-  .observer-rail .obs-teach code { color: var(--fg-70); }
-  .local-pill { margin-left: auto; }
-  .local-pill .budget { margin-left: 8px; padding: 0 0 0 8px; border: 0; border-left: 1px solid var(--border); border-radius: 0; font-size: 10.5px; }
-  .local-pill .budget:empty { display: none; }
-  .cmdk-hint { background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--fg-50); font-family: var(--mono); font-size: 10.5px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
-  .cmdk-hint:hover { color: var(--fg); border-color: var(--fg-30); }
-  .cmdk-hint .kbd { font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; }
-  /* Narrow viewports · keep the header on one reachable row (drop the host
-   * string, let it wrap as a fallback) and give the drawer the full width so it
-   * never renders as a sliver over the page. */
-  @media (max-width: 560px){
-    .header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
-    .local-pill #local-host { display: none; }
-    .cmdk-hint { padding: 5px 8px; }
-    .drawer { width: 100vw; max-width: 100vw; }
-  }
-
-  /* column order · decisions first; first-run flips the hero to the top */
-  #task-list-view { display: flex; flex-direction: column; }
-  #decision-queue { order: 1; } .worktree-alert { order: 2; align-self: flex-start; }
-  #observer-rail { order: 3; } #home-hero { order: 4; } #filter-token { order: 5; } #task-list { order: 6; }
-  body.first-run #home-hero { order: 1; }
-  body.first-run #observer-rail { order: 2; }
-
-  /* the decision queue · THE only orange */
-  .dq-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); padding: 4px 0 8px; }
-  .dq-kicker .cnt { color: var(--fg-30); letter-spacing: 0; }
-  .dq-row { display: flex; align-items: center; gap: 14px; border-left: 2px solid var(--accent); padding: 8px 0 8px 16px; margin-bottom: 10px; border-radius: 0 6px 6px 0; }
-  .dq-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-  .dq-what { min-width: 0; flex: 1; }
-  .dq-t { font-size: 14.5px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
-  .dq-t .dq-id { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--accent); margin-right: 9px; }
-  .dq-why { font-family: var(--mono); font-size: 12px; color: var(--fg-50); margin-top: 4px; line-height: 1.5; }
-  .dq-result { font-family: var(--mono); font-size: 12px; color: var(--fg-70); margin-top: 5px; }
-  .dq-acts { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
-  .dq-btn { font-size: 12px; color: var(--accent); background: transparent; border: 1px solid rgba(255,154,118,0.35); border-radius: 6px; padding: 4px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; }
-  .dq-btn:hover { background: rgba(255,154,118,0.1); }
-  .dq-btn .kbd { font-family: var(--mono); font-size: 10.5px; border: 1px solid rgba(255,154,118,0.35); border-radius: 4px; padding: 0 4px; }
-  .dq-btn.quiet { color: var(--fg-50); border-color: var(--border); }
-  .dq-btn.quiet .kbd { border-color: var(--border); }
-  .dq-btn.quiet:hover { background: var(--bg-2); color: var(--fg-70); }
-  .dq-btn.fill { background: var(--fg); color: #0a0a0a; border-color: var(--fg); font-weight: 600; }
-  .dq-btn.fill .kbd { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.3); }
-  .dq-btn.fill:hover { filter: brightness(0.88); background: var(--fg); }
-
-  /* the TODAY day-line · mono caps, carries the H13 stamps */
-  .home-hero.day-line-mode { padding: 4px 0 6px; }
-  .day-line { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-40); display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
-  .day-line b { color: var(--fg-70); font-weight: 600; }
-  .day-line .dl-today { font-family: var(--display); color: var(--fg); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
-  .day-line .dl-quiet { color: var(--fg-40); text-transform: none; letter-spacing: 0; }
-
-  /* one-line task rows · status dot+word · title · agent · checks · cost */
-  .trow { display: flex; align-items: center; gap: 12px; padding: 9px 4px; cursor: pointer; border-radius: 6px; }
-  .trow + .trow { border-top: 1px solid rgba(255,255,255,0.04); }
-  .trow:hover { background: var(--bg-1, rgba(255,255,255,0.025)); }
-  .trow .row-status { flex: 0 0 96px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--fg-50); }
-  .trow .row-status .rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-50); display: inline-block; flex: 0 0 6px; }
-  .trow .row-status.verified { color: var(--verified); }
-  .trow .row-status.verified .rdot { background: var(--verified); }
-  .trow .row-status.caught, .trow .row-status.stalled { color: var(--warn); }
-  .trow .row-status.caught .rdot, .trow .row-status.stalled .rdot { background: var(--warn); }
-  .trow .row-status.running .rdot { background: var(--fg-70); animation: pulse 2.2s ease infinite; }
-  .trow .row-title { font-size: 13px; color: var(--fg-90, var(--fg)); min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .trow:hover .row-title { color: var(--fg); }
-  .trow .row-agent { font-family: var(--mono); font-size: 10.5px; color: var(--fg-40); flex: 0 0 auto; }
-  .trow .row-meta { font-family: var(--mono); font-size: 12px; color: var(--fg-40); flex: 0 0 auto; text-align: right; }
-  .trow .card-stop { flex: 0 0 auto; }
-
-  /* S20 lenses · Review rows lead with the claims-state word; Status rows
-     carry one outcome sentence. Real recomposition (template branches in
-     rowH/cardH/renderD) — these rules only dress the recomposed elements. */
-  .row-claims { font-family: var(--mono); font-size: 12px; color: var(--fg-50); flex: 0 0 110px; white-space: nowrap; }
-  .row-claims.verified { color: var(--verified); }
-  .row-claims.caught { color: var(--warn); }
-  .row-claims.stopped { color: var(--caught); }
-  .card-row1 .row-claims { flex: 0 0 auto; margin-right: 4px; }
-  .trow.srow .row-title { flex: 0 1 auto; max-width: 46%; }
-  .trow .row-outcome { font-size: 12px; color: var(--fg-50); min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-  /* history row · earlier + demos collapse behind ONE quiet row */
-  .hist-row { display: block; width: 100%; margin: 14px 0 4px; padding: 9px 4px; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.04); color: var(--fg-40); font-family: var(--mono); font-size: 12px; cursor: pointer; text-align: left; }
-  .hist-row:hover { color: var(--fg-70); }
-  /* S18 · the practice group is visually quiet — practice never competes
-     with real work for attention. */
-  .prac-row { opacity: 0.8; }
-  .practice-rows { opacity: 0.72; }
-
-  /* observer collapsed to one calm line · per-session dots keep H8 honest */
-  .obs-line { display: flex; align-items: center; gap: 10px; padding: 9px 4px; font-family: var(--mono); font-size: 12px; color: var(--fg-50); cursor: pointer; border-radius: 6px; }
-  .obs-line:hover { color: var(--fg-70); background: var(--bg-1, rgba(255,255,255,0.025)); }
-  .obs-line .obs-mini { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-30); flex: 0 0 6px; display: inline-block; }
-  .obs-line .obs-mini.live { background: var(--fg-70); animation: pulse 2.2s ease infinite; }
-  .obs-line .obs-mini.recent { background: var(--fg-50); }
-
-  /* active-filter token · removable, never a tab bar */
-  .ftoken { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--fg-50); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; margin: 6px 0; }
-  .ftoken .x { cursor: pointer; color: var(--fg-40); padding: 0 2px; }
-  .ftoken .x:hover { color: var(--fg); }
-
-  /* ⌘K palette */
-  .palette-scrim { position: fixed; inset: 0; z-index: 320; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; justify-content: center; align-items: flex-start; padding-top: 90px; }
-  .palette-scrim.open { display: flex; }
-  .palette { width: 560px; max-width: 92vw; max-height: 560px; background: hsl(0 0% 7%); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,0.7); display: flex; flex-direction: column; overflow: hidden; }
-  .palette .pin { display: flex; align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--border-soft); }
-  .palette .pin input { flex: 1; background: transparent; border: 0; outline: none; color: var(--fg); font-size: 13px; padding: 10px 10px; font-family: inherit; }
-  .palette .pin input::placeholder { color: var(--fg-40); }
-  .palette .plist { overflow-y: auto; padding: 6px; }
-  .pgroup { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-30); padding: 10px 11px 4px; }
-  .prow { display: flex; align-items: baseline; gap: 10px; padding: 8px 11px; border-radius: 7px; cursor: pointer; }
-  .prow .picon { color: var(--fg-40); flex: none; align-self: center; display: inline-flex; }
-  .prow.sel .picon, .prow:hover .picon { color: var(--accent); }
-  .prow:hover { background: var(--bg-2, rgba(255,255,255,0.05)); }
-  .prow.sel { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
-  .prow .n { font-size: 12px; color: var(--fg); font-weight: 500; flex: 0 0 auto; }
-  .prow .c { font-size: 12px; color: var(--fg-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .prow .pk { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--fg-50); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; }
-  .palette .pempty { padding: 18px 14px; font-family: var(--mono); font-size: 12px; color: var(--fg-40); }
-  .palette .pfoot { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--border-soft); font-family: var(--mono); font-size: 10.5px; color: var(--fg-30); letter-spacing: 0.06em; }
-
-  /* prefers-reduced-motion · ALL motion collapses, information stays */
-  @media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-
-  /* Wide screens: a 900px column next to the 264px sidebar leaves ~280px of dead
-     space on each side at 1680. Let the working column breathe — one tier, and
-     every column-capped surface (content, skeleton, composer, hints, hero) moves
-     together so the composer stays under the content it belongs to. Lives at the
-     END of the sheet: the base rules share specificity, so source order decides. */
-  @media (min-width: 1440px) {
-    .content-inner, .skeleton, .gh-import, .input-bar, .kbd-hint { max-width: 1100px; }
-    .home-hero { max-width: 1080px; }
-  }
-  /* The composer footer spans the WINDOW while the content centers in the pane
-     right of the 264px sidebar — so the composer sat ~150px left of the column
-     it feeds. Pad the footer by the sidebar width whenever the sidebar shows. */
-  @media (min-width: 761px) {
-    .input-area { padding-left: calc(264px + 20px); }
-  }
-`;
-//# sourceMappingURL=styles.js.map