`) carries the Copy button and no badge. PHASE-08 TOKENS ONLY — no hex/rgb/hsl literal anywhere in this block (the phase-92 monochrome invariant, and the :root-drift test parses the built-ins out of this file, so a literal would be a second source of truth). A monochrome or inverted theme keeps every state readable because the states are carried by TEXT and STRUCTURE, never by colour alone (WCAG 1.4.1): `Copy` → `Copied` is a text change with the --ok family as support, the badge is the WORD "VERBATIM", the unresolved state is a sentence, and the line gutter is digits. Contrast of the pairs used here (built-in palette, all AA ≥4.5:1): --ink on --surface 15.3:1 (the code text) --ink-soft on --surface 8.2:1 (caption, gutter, pending state, button label) --ok-ink on --ok-bg 10.6:1 (the badge, the copied state's fill) --ok-ink on --surface 12.2:1 (the copied state's label on hover-off) --ink-soft on --err-bg 7.9:1 (the unresolved sentence) A code surface is also readable in a LIGHT theme for the same reason: no #fff/#000, no new hue — every token comes from the theme's own palette. Static content: NOTHING in this block animates or transitions, so prefers-reduced-motion has nothing to still (the pending state is a `role="status"` live region — the announcement IS the feedback, a pulse would add nothing but motion). */ .verbatim { display: block; min-width: 0; margin: 0.5rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } /* The head row is the panel's sticky header — PLAN §7.1's bounded-panel rule (the .table-wrap table thead th idiom, phase 156): it stays put while the body scrolls, so the caption (source/path · lines 12–40 of 210) is never off-screen in a 40-line slice. OPAQUE --surface background, so scrolled bytes never show through it. */ .verbatim-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.4rem 0.6rem; background: var(--surface); border-bottom: 1px solid var(--line); } /* The clipped label keeps the phase-156 `.cell-clip` ellipsis convention (block/flex item that shrinks below its text width, hard cut → "…"); the FULL text stays reachable through the control's aria-label / title, so the clip is visual only. */ .verbatim-caption { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); /* 8.2:1 on --surface */ } /* The badge is a WORD, never an icon alone (locked A5: the VERBATIM claim must survive a screen reader and a monochrome theme), and `text-transform: none` keeps the lowercase letters the clipboard/AT would otherwise have to reconcile (no uppercase surprises spelled out letter-by-letter). --ok-ink on --ok-bg is the app's existing AA pair. */ .verbatim-badge { flex: 0 0 auto; padding: 0.1rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); /* 10.6:1 on --ok-bg */ font-family: var(--mono); font-size: 0.68rem; text-transform: none; } /* The bounded scroll panel (PLAN §7.1: a bounded panel, never a page-long paste). CODE scrolls sideways and never wraps (phase 116 locked A1 — wrapping breaks code readability), so overflow-wrap is pinned back to normal against the .bubble's `overflow-wrap: anywhere` (the phase-165 prose/code split: prose wraps, code scrolls). min-width: 0 keeps the long-line escape hatch that every other scroller in the app carries. */ .verbatim-body { max-height: min(40rem, 70vh); overflow: auto; min-width: 0; margin: 0; padding: 0.5rem 0.75rem; background: var(--surface); color: var(--ink); /* 15.3:1 on --surface */ font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; white-space: pre; tab-size: 2; overflow-wrap: normal; } /* No scrollbar-color here ON PURPOSE: phase 116 scoped the themed scrollbar to `.doc-modal .doc-raw` alone (pinned by tests/unit/test_prose_word_wrap.py — "no global scrollbar restyle"), and the chat's other scrollers (.bubble pre, .md-table-wrap) keep the browser-native bar. The verbatim panel joins THOSE, not the modal. */ /* The gutter: the SERVER's line numbers (the phase-131 coordinate system — the same 1-based lines `read` and `grep` report), never the model's claim. `user-select: none` is the load-bearing rule: a reader who selects the text — or hits Copy on a panel whose selection the browser picks up — never drags line numbers into the clipboard. The digits are rendered as list-item TEXT (list-style is off) so the rule behaves the same in every engine, tabular-nums keeps the column straight, and the gutter sticks to the left edge while the code scrolls under it. */ .verbatim-lines { list-style: none; position: sticky; left: 0; flex: 0 0 auto; min-width: 2.5rem; background: var(--surface); /* opaque: scrolled code never shows THROUGH the gutter (the .table-wrap thead rule) */ margin: 0; padding: 0 0.6rem 0 0; text-align: right; color: var(--ink-soft); /* 8.2:1 on --surface — a gutter is still text */ font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; } .verbatim-lines li { user-select: none; -webkit-user-select: none; } /* Neutralize the .bubble pre treatment INSIDE the panel: the panel is its own surface (its own padding, hairline, scroll), so a
 child must
   not stack a second border/padding on top of it. */
.verbatim pre {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* The streaming/pending state (markdown.js step 0 → the restore step) and
   the settled-but-unresolvable state. The pending look is MUTED on purpose
   — it is not an answer yet — and it never paints the model's bytes. */
.verbatim-pending {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  padding: 0.45rem 0.6rem;
  background: var(--surface);
}
.verbatim-state {
  min-width: 0;
  color: var(--ink-soft); /* 8.2:1 on --surface */
  font-size: 0.78rem;
}
/* The honest failure state (locked A7): a locator the server could not
   resolve says so in a sentence, carries NO badge and NO body, and shows
   none of the model's text. --err-line is the app's existing UI boundary
   token (decorative, 4.6:1 — the sentence, not the colour, carries the
   meaning); the badge rule below is CSS-side enforcement of the claim that
   an unresolved panel never badges, whatever DOM reaches it. */
.verbatim-unresolved {
  padding: 0.45rem 0.6rem;
  background: var(--err-bg);
  border-color: var(--err-line);
  color: var(--ink-soft); /* 7.9:1 on --err-bg */
  font-size: 0.8rem;
}
.verbatim-unresolved .verbatim-badge { display: none; }
/* The two Copy controls — `.verbatim-copy` inside a resolved panel's head,
`.code-block-copy` under an ordinary answer code block (locked A5: every
   fenced block gets a Copy button, only a resolved one gets the badge).
   The house pill family (mono text, --line hairline, --surface fill,
   ink-soft label 8.2:1); the label is the designated clip target
   (text-overflow: ellipsis, the phase-156 convention) while the control's
   aria-label names the full path and line count. `min-height: 2rem` is the
   desktop pill; the ≤640px block below lifts both to the 44px touch floor,
   and the global :focus-visible ring is restated with the SAME values
   (explicit here because the panel clips with overflow: hidden). */
.code-block {
  position: relative;
  min-width: 0;
  margin: 0.4rem 0;
}
.code-block pre { margin: 0; }
.code-block-copy,
.verbatim-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  min-width: 0;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft); /* 8.2:1 on --surface */
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
}
.code-block-copy > span,
.verbatim-copy > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-block-copy:hover,
.verbatim-copy:hover { color: var(--ink); border-color: var(--ink-soft); }
.code-block-copy:focus-visible,
.verbatim-copy:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* The `.copied` state: the TEXT changes ("Copy" → "Copied", task 07 owns
   the swap) and this rule SUPPORTS it with the --ok family — colour is
   never the only signal (WCAG 1.4.1), so a monochrome theme still reads
   "Copied". */
.code-block-copy.copied,
.verbatim-copy.copied {
  color: var(--ok-ink); /* 10.0:1 on --surface */
  border-color: var(--ok-ink);
  background: var(--ok-bg);
}
/* A resolved panel's Copy pill sits at the END of the head row (the caption
   already took the flexible space; the auto margin keeps it right even
   when the caption clips). */
.verbatim-copy { margin-left: auto; flex: 0 0 auto; }
.code-block-copy { margin: 0.25rem 0 0; }
/* What task 07's REAL DOM needs on top of task 06's contract — palette
   variables only, no new literal, nothing animated. The body is a ROW of
   (gutter, text): the gutter's `flex: 0 0 auto` + `position: sticky;
   left: 0` above are written for exactly this, and the text takes its own
   width so a long line scrolls UNDER the sticky gutter instead of wrapping
   (phase 116 locked A1). */
.verbatim-body { display: flex; align-items: flex-start; }
.verbatim-text { flex: 0 0 auto; }
/* The panel's link to the document viewer (the chat page opens the modal,
   the shared page navigates — one affordance, one look). It is a TEXT link
   (underlined, not colour-only — WCAG 1.4.1) in the mono family of the
   caption it sits beside, and it restates the app-wide focus ring with the
   SAME values because the panel clips with `overflow: hidden`. */
.verbatim-open {
  flex: 0 0 auto;
  color: var(--ink-soft); /* 8.2:1 on --surface */
  font-family: var(--mono);
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.verbatim-open:hover { color: var(--ink); }
.verbatim-open:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* The truncation line of a capped block: one muted sentence naming that the
   rest lives in the document, plus the same link. It sits OUTSIDE the scroll
   body, so it stays readable without scrolling the bytes. */
.verbatim-more {
  padding: 0.4rem 0.6rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft); /* 8.2:1 on --surface */
  font-size: 0.75rem;
}
/* ---------- Verbatim panels (phase 182, task 06) — END ---------- */

.msg.user { justify-content: flex-end; }
.msg.user .msg-body { align-items: flex-end; }
.msg.user .bubble {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--bg);
  border-bottom-right-radius: 4px;
}
.msg.user .bubble code { background: color-mix(in srgb, var(--bg) 16%, transparent); }

/* Phase 123 (task 02, TODO L6): the question's IMAGE in the user
   bubble — the attachment is PART of the question, so it sits at the
   TOP of the bubble (above the text). Capped height (a tall portrait
   must not blow the chat column) + full-width safe; the theme's
   bordered-image treatment (the .source-image-img language) — the
   border gives the bytes a boundary against the brand bubble fill. */
.msg-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.45rem;
}

/* Phase 123 (task 03, TODO L6): the question's image is UNAVAILABLE —
   the stored file was deleted out-of-band (the record keeps its
   path, the render degrades): the small muted line takes the img's
   place at the top of the user bubble on BOTH pages (the chat
   restore and the shared view render the same record shape through
   the same .msg/.bubble structure, and share this stylesheet). It
   inherits the bubble's text color — the user bubble's text already
   passes 4.5:1 (PLAN §7.2), so the note does too; the smaller size +
   italic make it read as a note, never a broken-image icon. The
   margin-bottom mirrors .msg-image's, so the text below keeps its
   spacing either way. */
.msg-image-unavailable {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-style: italic;
}

.msg.brain .bubble { border-bottom-left-radius: 4px; }
.msg.brain.is-deflected .bubble {
  background: var(--accent-bg);
  border-color: var(--accent-line);
}

/* Collapsible "Thinking" block (phase 17): the model's reasoning streams
   open ABOVE the answer bubble, auto-collapses when the answer starts, and
   stays user-toggleable (native / — a real focusable
   control: >=44px target, :focus-visible via the global rule). Summary
   text is brand-ink on surface ≈8.7:1; the scratchpad body is ink-soft on
   surface ≈6.9:1 — both AA. */
details.thinking {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-soft);
  border-radius: var(--radius-sm);
  margin: 0 0 0.5rem;
  overflow: hidden;
}
details.thinking summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  color: var(--brand-ink); /* 8.7:1 on --surface */
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}
details.thinking summary::-webkit-details-marker { display: none; }
/* CSS chevron: ▸ rotates 90° when open (transition stills under
   prefers-reduced-motion — see the reduced-motion block below). */
details.thinking summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
}
details.thinking[open] summary::before { transform: rotate(90deg); }
details.thinking summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* The scratchpad is a live-tail, compact area (max-height keeps long
   reasoning from pushing the answer off-screen while open). */
details.thinking .thinking-text {
  padding: 0 0.75rem 0.75rem;
  color: var(--ink-soft); /* 6.9:1 on --surface */
  font-size: 0.875rem;
  line-height: 1.55;
  max-height: 320px;
  overflow-y: auto; /* user-scrollable window (owner direction 2026-08-27,
                        TODO.md L7): autoscroll follows the live tail
                        only while the user is pinned near the window's
                        bottom — the phase-17 pin, gated in app.js (task
                        02: THINKING_NEAR_BOTTOM_PX); scrolling up
                        pauses the follow, returning to the bottom
                        resumes it. */
}
/* The scratchpad is compact: tighten the renderer's paragraph/list margins. */
details.thinking .thinking-text p,
details.thinking .thinking-text ul { margin: 0 0 0.5rem; }

/* Phase 161 (owner TODO 2026-10-05, D3): the ONE reasoning bubble —
   the ENTIRE per-run timeline (phase-158 thinking + tool-call blocks,
   arrival order) nests INSIDE this details.reasoning container instead
   of stacking above the answer, so the live turn condenses to ONE
   bounded window (the .reasoning-body, 320px) and the runs no longer
   push the answer off-screen. Family treatment of details.thinking
   (phase 17): the SAME surface/line/brand-soft/radius tokens, so the
   two disclosures read as one block family. The summary is a native
   focusable toggle — >=44px target, the house 3px :focus-visible ring,
   the webkit marker suppressed, a CSS chevron ▸ that rotates 90° when
   open (the transition stills under prefers-reduced-motion — see the
   reduced-motion block below). Contrast: --brand-ink on --surface
   ≈8.7:1, --ink-soft on --surface ≈6.9:1 (the status span) — both AA.
   overflow: hidden clips the scrollable body to the corner radius. */
details.reasoning {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-soft);
  border-radius: var(--radius-sm);
  margin: 0 0 0.5rem;
  overflow: hidden;
}
summary.reasoning-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-height: 44px; /* WCAG 2.1 AA touch target (the family pin) */
  color: var(--brand-ink); /* 8.7:1 on --surface */
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}
summary.reasoning-summary::-webkit-details-marker { display: none; }
/* CSS chevron: ▸ rotates 90° when open (the details.thinking
   convention; the transition stills under prefers-reduced-motion —
   see the reduced-motion block below). */
summary.reasoning-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
}
details.reasoning[open] summary.reasoning-summary::before {
  transform: rotate(90deg);
}
summary.reasoning-summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* D6: the live status suffix ("Thinking…" / "Calling …" /
   "N steps") rides the summary row AFTER the "Reasoning" literal —
   the flex row lays it out after the chevron + literal; ink-soft on
   surface ≈6.9:1 (AA); text + color, never color alone (B5). */
.reasoning-status {
  color: var(--ink-soft); /* 6.9:1 on --surface */
  font-size: 0.8rem;
  line-height: 1.4;
  margin-left: 0.25rem;
}
/* D3: the ONE bounded live window — 320px (the phase-17 window
   convention), user-scrollable; app.js's pinned-tail follow
   (REASONING_NEAR_BOTTOM_PX) keeps the live tail in view while the
   user stays near the bottom — scrolling up pauses it, returning to
   the bottom resumes it. The per-run blocks nested inside are
   de-bordered below so THIS is the single scroll surface (no nested
   boxes). */
.reasoning-body {
  padding: 0 0.75rem 0.75rem;
  max-height: 320px;
  overflow-y: auto;
}
/* D3 inner-run compacting + the D5 refinement (owner 2026-10-06):
   the per-run blocks nest as plain divs inside the container —
   NEVER collapsible (the container is the ONE disclosure; a nested
   fold inside the fold was the defect). The blocks are distinct
   from each other by LABEL + RAIL: the thinking run carries the
   family's brand-soft rail + the brand-ink "Thinking" label; the
   tool run carries the neutral --line rail + the accent-ink
   "Tool call(s) (N)" label (the phase-117 accent pairing). The
   inner 320px windows are disabled (max-height: none) so the
   container's window is the single scroll surface (the phase-17
   per-block follow in app.js no-ops on the now-unscrollable
   .thinking-text). */
details.reasoning .thinking {
  border-left: 2px solid var(--brand-soft);
  padding-left: 0.75rem;
  margin: 0.5rem 0;
}
/* The static (non-interactive) "Thinking" label — brand-ink on the
   surface ≈8.7:1 (the family's summary pairing, AA); no cursor, no
   focus target (it is not a control — the container's summary is).
   */
details.reasoning .thinking .thinking-summary {
  display: block;
  color: var(--brand-ink);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 0.15rem;
}
details.reasoning .thinking .thinking-text {
  padding: 0 0 0.75rem;
  color: var(--ink-soft); /* 6.9:1 on --surface — the scratchpad pairing */
  font-size: 0.875rem;
  line-height: 1.55;
  max-height: none;
  overflow-y: visible;
}
details.reasoning .thinking .thinking-text p,
details.reasoning .thinking .thinking-text ul { margin: 0 0 0.5rem; }
/* The tool run — the neutral rail (distinct from the thinking run's
   brand-soft rail) + the phase-117 accent-ink label (≈10.4:1 on the
   surface, AA). The .tool-calls rows keep the exact phase-37/117
   treatment below (the shared rule — no new bytes). */
details.reasoning .tool-calls-disclosure {
  border-left: 2px solid var(--line);
  padding-left: 0.75rem;
  margin: 0.5rem 0;
}

/* Phase 117: the tool-call record folds into a single disclosure line,
   reusing the Thinking block's native  convention. Open while
   the turn is live (phase 87's elapsed suffix stays visible), folded at
   rest / on restore. The summary is a native focusable toggle — it
   inherits the house 3px :focus-visible ring (see details.thinking
   summary). Accent rides the TEXT (var(--accent-ink), ≈10.4:1 on the
   surface) — text + color, never color alone (B5). No new literal. The
   chevron matches details.thinking summary::before so the two
   disclosures read as one family — the count text is the accessible
   label either way. */
.tool-calls-disclosure { margin: 0.25rem 0; }
.tool-calls-summary {
  color: var(--accent-ink);
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.15rem 0;
}
/* The legacy (out-of-container) disclosure's summary is a native
   focusable toggle — the interactive treatment is scoped to the
    element: the in-container run's label is a plain span
   (the D5 refinement — the container is the ONE disclosure, so the
   run's label is not a control). */
summary.tool-calls-summary {
  cursor: pointer;
  list-style: none; /* the native marker is redundant with the count text */
}
summary.tool-calls-summary::-webkit-details-marker { display: none; }
/* CSS chevron: ▸ rotates 90° when open — the same family treatment as
   details.thinking summary::before (the transition stills under
   prefers-reduced-motion — see the reduced-motion block below). Scoped
   to the  element: the in-container run's label (a span with
   the same class) carries no chevron. */
summary.tool-calls-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}
details.tool-calls-disclosure[open] summary.tool-calls-summary::before {
  transform: rotate(90deg);
}

/* Agent tool-call lines (phase 37, deboxed in phase 117): one compact
   inline-flow row per `tool` SSE frame — in the same wrap as the
   Thinking block, above the answer, below the Thinking summary, inside
   the phase-117 disclosure. Deliberately distinct from the scratchpad:
   accent text (--accent-ink) vs the brand-ink summary. Contrast:
   --accent-ink on the surface ≈10.4:1 (11.6:1 on the page bg), and
   --ink on the surface in the path `code` ≈11.5:1 — all comfortably AA
   in the (single dark) theme. Inline rows only: appending lines never
   shifts the chat column (72rem — the .container width at every
   viewport; no new container), and the rows are not interactive — no
   focus targets (the fold is the disclosure's native summary). */
.tool-calls {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* Phase 117 deboxed the line (owner visual-glitch report 2026-09-15):
   no card, no flex — the label + the inline `code` flow as ONE
   continuous run, so a long path wraps to the left edge like a normal
   sentence and the label no longer breaks mid-word ("Rea/ding" is
   gone). The accent now rides the TEXT color (var(--accent-ink))
   instead of a border. */
.tool-call {
  color: var(--accent-ink);
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* Phase 117 dechipped the path: it keeps the mono + ink treatment
   (var(--ink) on the surface ≈11.5:1 — AA) but loses the chip
   background — it is inline text in the line's run now. */
.tool-call code {
  font-family: var(--mono);
  font-size: 0.95em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* Phase 87 (TODO.md L5): the latest tool line's visible "processing"
   suffix — ticking "(Ns)" while ≥5s of the turn's stream stay silent
   after the call; removed on the next frame (settle). ink-soft on the
   bubble surface (the AA pairing), small mono like every status line. */
.tool-elapsed {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-left: 0.5rem;
  white-space: nowrap;
}
/* Phase 95 (task 02): the truncation marker on a Reading line — the
   " (truncated — showing N of M chars)" span the `tool_result` frame
   appends (live) or the restore/shared paths re-render from the stored
   record. Theme-neutral, NO new hue (the phase-92 zero-literal
   invariant): it borrows --ink-soft — the same AA-safe soft-ink the
   status suffixes use — so under phase 93's monochrome theme it grays
   automatically, and the marker stays TEXT, never color alone (B5). */
.tool-call .truncated-note {
  color: var(--ink-soft);
}

.msg-meta {
  font-size: 0.75rem;
  color: var(--ink-soft);
  padding-inline: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
/* Phase 130 (task 03, TODO L6): the ACTIONS cluster — the bubble's
   LAST .msg-meta row (Tune / Retry / Save-as-doc + the Stopped/Failed
   notes — phase 130 task 02's getActionsRow). The row's justify does
   the TODO's "bottom right" (the bubble's bottom row, right edge);
   the buttons are plain flex items of the row — the per-button auto
   margins (the phase-49/59 .tune-btn/.retry-btn/.save-as-doc-btn
   margin mechanisms) are gone, so chips and figures can never push
   the cluster around. DOM order inside the row = insertion order
   (Tune, Retry, Save-as-doc per their gates). */
.msg-meta.msg-actions {
  justify-content: flex-end;
}
/* Phase 130 (task 03, TODO L6): the source-IMAGES cluster — the
   second .msg-meta row appendSources builds (phase 130 task 01):
   one .source-image figure per image ref, no chips (the figure IS
   the citation for image docs). The explicit rule PINS the chip row's
   rhythm — wrap + the base .msg-meta 0.35rem gap + center align — so
   a future base-rule change cannot drift the two clusters apart. */
.msg-meta.msg-images {
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  text-decoration: none;
  max-width: 100%;
  /* min-width: 0 so the nowrap pill ellipsizes instead of widening its row */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-chip:hover { background: var(--brand-soft); text-decoration: underline; }

/* Phase 122 (task 05): the sources block's COMPACT INLINE IMAGE for a
   retrieved IMAGE document ("shown in the chat nicely", TODO L6) — the
   .source-image figure sits beside its chip in the .msg-meta flex row
   (additive: the chip's text and affordance stay). A capped (96px,
   contain) img on the theme's surface, the document's summary as the
   visible caption in the AA-safe muted ink (8.6:1 on --bg — the
   row's page background). A failed image load removes the whole
   figure in JS (the plain chip stays — never a broken-image icon). */
.source-image {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  max-width: 100%;
  min-width: 0;
  text-decoration: none;
}
.source-image-img {
  display: block;
  max-height: 96px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.source-image-caption {
  max-width: 14rem;
  color: var(--ink-soft); /* 8.6:1 on --bg (AA) — the row's page background */
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.source-image:hover { text-decoration: underline; } /* flat — the caption underlines, the chip pattern */

/* Phase 124 (task 06, TODO L3): the LLM's ANSWER IMAGE — the brain
   answer's first-class figure (A4: below the text, above the chips).
   The .source-image language at ANSWER scale — the figure is the
   answer's own image, not a chip accessory: max-width 100% of the
   .msg-body column, a 320px height cap (the 46rem chat column — a
   full-height image would blow the turn's height), contain on the
   theme's surface with the bordered-image treatment
   (.source-image-img's border/background/radius), the visible
   caption in the AA-safe muted ink (the same --ink-soft the chip
   caption uses — the row's page background, 8.6:1). Token-only (the
   zero-literal invariant — the monochrome themes carry it). The
   hover underline applies to the chat page's ANCHOR figure only (the
   shared page's figure is a plain  — zero controls, the
   element-type scope keeps it out). */
.answer-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  min-width: 0;
}
.answer-image-img {
  display: block;
  max-width: 100%;
  max-height: 320px; /* the one free number (task 06): the answer scale */
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.answer-image-caption {
  max-width: 100%;
  color: var(--ink-soft); /* 8.6:1 on --bg (AA) — the row's page background */
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* the summary can be long; the alt + title carry the full text */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.answer-image { text-decoration: none; }
a.answer-image:hover { text-decoration: underline; } /* flat — the caption underlines, the chip pattern */

/* Phase 113 (task 02): the related-docs row — the SECONDARY tier of
   scored docs (phase 113 task 01's usefulness bar demotes the
   sub-floor hits out of the citation surface; on a deflected turn the
   weak hits live HERE and the chip row is absent). It must never read
   as a citation: smaller mono links, DASHED border (the solid brand
   pill is the citation look), transparent fill, muted --ink-soft text
   — 8.6:1 on --bg (verified ≥4.5:1, WCAG 2.1 AA), palette variables
   only (phase-92 zero-literal: no new hue, the monochrome theme grays
   it automatically). The row joins .msg-meta (the .msg-body flex gap
   stacks it below the citation row — no extra margin) but the meta
   ACTIONS never do: app.js appends it last, after the first-row
   claimers. :focus-visible via the global 3px outline rule. The hover
   is deliberately flat — NO background swap (the chip's brand-soft
   hover is the citation affordance): only the ink-soft → ink step-up
   plus the underline. */
.related-docs-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.related-doc {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  text-decoration: none;
  max-width: 100%;
  /* min-width: 0 so the nowrap pill ellipsizes (same as the chips) */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-doc:hover {
  color: var(--ink); /* ink on --bg 16.7:1 — the flat secondary hover */
  text-decoration: underline;
}

/* "Maybe try" chips under a deflected bubble (phase 04). Unlike the
   onboarding row (which scrolls horizontally on mobile), this group wraps
   at every width: the chips are the actionable follow-up, not decoration.
   The pills themselves reuse .suggestion-chip (>=44px, brand-soft/ink). */
.maybe-try {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-inline: 0.25rem;
}
/* ---------- Steering notes (phase 15) ---------- */
/* "Tune" button in the completed brain bubble's actions row
   (.msg-meta.msg-actions — phase 130: the ROW's right-align is the
   cluster's "bottom right"; the button is a plain flex item, no
   per-button auto margin). Ghost pill, ≥44px. ink-soft on surface
   ≈6.9:1; hover pair brand-ink/brand-soft ≈6.9:1. */
.tune-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}
.tune-btn svg { width: 14px; height: 14px; display: block; }
.tune-btn:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* Phase 49 (owner-locked 2026-08-29, TODO.md L4): the "Retry" button —
   the redo-in-place action in the actions row (.msg-meta.msg-actions —
   phase 130) of the LAST brain bubble. The exact visual family of
   .tune-btn (same pill size/spacing, the global :focus-visible ring,
   >=44px via min-height) so the meta actions read as a set — but
   neutral: ink-soft -> ink on hover (Tune keeps the brand pair). The
   redo glyph rides currentColor. No per-button auto margin (phase 130
   — the row's justify right-aligns the cluster). Contrast:
   ink-soft on --bg ~8.6:1, ink ~15:1, hover ink on --brand-soft
   ~15.7:1 — all AA. */
.retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}
.retry-btn svg { width: 14px; height: 14px; display: block; }
.retry-btn:hover { background: var(--brand-soft); color: var(--ink); }

/* Phase 160 (task 04, TODO L4): the "Continue researching" button —
   the one-click continuation in the actions row
   (.msg-meta.msg-actions — phase 130) of a cap-reached brain bubble
   (the done frame's budget_exhausted, task 03). The exact visual
   family of .retry-btn (same pill size/spacing, the global
   :focus-visible ring, >=44px via min-height) so the meta actions
   read as a set — but neutral: ink-soft -> ink on hover (Tune keeps
   the brand pair). The forward glyph rides currentColor. No
   per-button auto margin (phase 130 — the row's justify right-aligns
   the cluster). No animation of its own, so the
   prefers-reduced-motion blocks need nothing for it (the family's
   parity — .retry-btn / .edit-btn have none either). Contrast: ink-soft on --bg ~8.6:1, ink
   ~15:1, hover ink on --brand-soft ~15.7:1 — all AA. */
.continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}
.continue-btn svg { width: 14px; height: 14px; display: block; }
.continue-btn:hover { background: var(--brand-soft); color: var(--ink); }

/* Phase 159 (task 01, TODO L3): the "Edit" button — the
 * trim-and-re-ask action in the .msg-meta.msg-actions row (phase 130)
 * of the NEWEST user bubble (markLastEditable — the phase-49
 * single-target discipline, one `who` over). The exact visual family
 * of .retry-btn (same pill size/spacing, the global :focus-visible
 * ring, >=44px via min-height) so the meta actions read as a set —
 * but neutral: ink-soft -> ink on hover (Tune keeps the brand pair).
 * The pencil glyph rides currentColor. No per-button auto margin
 * (phase 130 — the row's justify right-aligns the cluster). Contrast:
 * ink-soft on --bg ~8.6:1, ink ~15:1, hover ink on --brand-soft
 * ~15.7:1 — all AA. */
.edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}
.edit-btn svg { width: 14px; height: 14px; display: block; }
.edit-btn:hover { background: var(--brand-soft); color: var(--ink); }

/* Phase 59 (owner-locked 2026-08-31, TODO.md L3): the "Save as doc"
   button — the bottom-right action of every completed brain bubble's
   meta row (the JS gates: admin + a configured docs repo; this rule
   only styles). The exact visual family of .tune-btn / .retry-btn
   (same pill size/spacing, the global :focus-visible ring, >=44px via
   min-height) so the meta actions read as one set — the brand hover
   pair like Tune (a docs action), the file glyph rides currentColor.
   No per-button auto margin (phase 130 — the row's .msg-actions
   justify right-aligns the WHOLE cluster to the row's RIGHT edge, the
   TODO's "bottom right"; the button appends LAST in the row's DOM
   order per its gate, so it stays the rightmost action). Contrast:
   ink-soft on --bg ~8.6:1, hover brand-ink on --brand-soft — AA,
   same as the family. */
.save-as-doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}
.save-as-doc-btn svg { width: 14px; height: 14px; display: block; }
.save-as-doc-btn:hover { background: var(--brand-soft); color: var(--brand-ink); }
.save-as-doc-btn:disabled { opacity: 0.6; cursor: wait; } /* draft POST in flight */

/* Phase 48: the "Stopped" note in a stopped brain bubble's meta row:
   ink-soft on the surface bubble ≈6.9:1, the 10px filled-square glyph
   centered with the row (the Tune button shares the row), and
   non-interactive — no hover, no focus (pointer-events: none). The text
   carries the accessible meaning; the glyph is aria-hidden in the JS. */
.stopped-note {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.stopped-note svg { width: 10px; height: 10px; display: block; fill: currentColor; }

/* Phase 120 (TODO.md L3–4): the "Failed" note in a failed brain
   bubble's meta row — the .stopped-note family in the theme's error
   color (text + color, never color alone — B5: the "Failed" label
   carries the meaning, the triangle glyph is aria-hidden decoration in
   the JS). --err-ink on the --surface bubble ≈9.0:1 (the same value as
   --brand-ink, computed 9.0:1 on --surface above) — well past 4.5:1
   (WCAG 2.1 AA); the monochrome theme grays it automatically (token,
   not literal — phase-92 zero-literal). Non-interactive — no hover, no
   focus (pointer-events: none), the stopped note's way. The detail
   span WRAPS (the stopped note's nowrap fits a one-word label; a 500-
   char error detail must not blow out the 46rem chat column) —
   overflow-wrap: anywhere keeps long unbroken details inside the row. */
.failed-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.3rem;
  max-width: 100%;
  color: var(--err-ink);
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
}
.failed-note svg {
  width: 10px;
  height: 10px;
  margin-top: 0.15rem;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
}
.failed-detail { font-weight: 400; overflow-wrap: anywhere; }

/* Inline tuning form under the bubble: labeled textarea + Save/Cancel
   (both ≥44px). Save = brand button (dark ink 5.2:1), Cancel = ghost. */
.tune-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
}
.tune-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.tune-form textarea {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  resize: vertical;
  min-height: 2.6rem;
}
.tune-form-actions { display: flex; gap: 0.5rem; }
.tune-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--bg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tune-save:hover:not(:disabled) { background: var(--brand-hover); }
.tune-save:disabled { opacity: 0.6; cursor: wait; }
.tune-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tune-cancel:hover { background: var(--brand-soft); color: var(--brand-ink); }
/* Save confirmation (role=status): ok pair ≈10.6:1. */
.tune-saved {
  margin: 0.2rem 0 0 0.25rem;
  background: var(--ok-bg);
  color: var(--ok-ink);
  border: 1px solid color-mix(in srgb, var(--ok-ink) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
}
/* Inline save failure (role=alert): err pair ≈9.1:1 — form is kept. */
.tune-error {
  margin: 0 0 0 0.25rem;
  background: var(--err-bg);
  color: var(--err-ink);
  border: 1px solid var(--err-line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Phase 159 (task 01, TODO L3): the inline EDIT form in the newest
 * user bubble. Phase 170 (A1, owner-locked 2026-10-10): the form
 * renders INSIDE the .bubble itself — it inherits the bubble's own
 * --brand fill, border, and padding, so it keeps the bubble's
 * dimensions by construction (no shrunken sibling box, no
 * display:none swap — .is-editing is the state class, the bubble
 * stays VISIBLE). Label + action text are the bubble's --bg ink on
 * the --brand fill: 5.2:1 (the .msg.user .bubble text pairing,
 * documented in :root — B5: the state is text + color, never color
 * alone). The textarea keeps its own --surface fill + --ink text
 * (a readable edit field on the --brand bubble, 15.3:1) at
 * width:100% — the "not tiny" fix. Both buttons keep the ≥44px
 * floor; the save pill edges at --bg (5.2:1 on the --brand bubble,
 * ≥3:1 UI boundary — a --brand pill on the --brand bubble would be
 * invisible); the textarea's maxlength = the 4000 cap,
 * single-sourced from MAX_QUESTION_CHARS in app.js. Cancel / Escape
 * restore the rendered markdown + the attachment and return focus
 * to the toggle (the openTuneForm cancel rule). Save rejection
 * (role=alert) keeps the form open (the note is never lost — the
 * openTuneForm failure way). */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.edit-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bg); /* --bg ink on the --brand fill: 5.2:1 (the user-bubble pairing) */
}
.edit-form textarea {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  width: 100%;
  resize: vertical;
  min-height: 2.6rem;
}
.edit-form-actions { display: flex; gap: 0.5rem; }
.edit-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--bg);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--bg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.edit-save:hover:not(:disabled) { background: var(--brand-hover); }
.edit-save:disabled { opacity: 0.6; cursor: wait; }
.edit-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--bg); /* was --ink-soft: 1.6:1 on --brand (fails AA); --bg ink: 5.2:1 */
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.edit-cancel:hover { background: var(--brand-soft); color: var(--brand-ink); }
/* Inline save rejection (role=alert): the --err-* pair is
 * self-contained — text vs its own --err-bg is 9.3:1 (≥4.5:1), so
 * it holds on the --brand bubble without a scoped variant; the box
 * edge on --brand holds 4.9:1 (≥3:1 UI boundary). Form is kept. */
.edit-error {
  margin: 0 0 0 0.25rem;
  background: var(--err-bg);
  color: var(--err-ink);
  border: 1px solid var(--err-line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Header panel above the messages: notes newest-first, per-note delete,
   designed empty state. */
.steering-panel {
  background: var(--surface);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 1.1rem 1rem;
}
.steering-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.steering-panel-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.steering-panel-sub { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
.steering-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.steering-note {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.4rem 0.35rem 0.8rem;
}
.steering-note-text {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
  /* Notes may be multi-line instructions — keep line breaks as typed. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}
.steering-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.steering-delete svg { width: 16px; height: 16px; display: block; }
.steering-delete:hover:not(:disabled) { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.steering-delete:disabled { opacity: 0.5; cursor: wait; }
.steering-empty { margin: 0.65rem 0 0; color: var(--ink-soft); font-size: 0.88rem; }
/* Phase 34 task 04 (visual pass): on the non-chat pages the panel is a
   direct child of  (not inside a .container) — pin it to the same
   72rem content column as everything else so it never renders as a
   full-viewport band. The chat page's panel sits inside .chat-shell's
   container, so this selector only hits the direct-child placement. */
.app-main > .steering-panel {
  width: calc(100% - 2.5rem);
  max-width: 69.5rem;
  margin-inline: auto;
}

/* ---------- Global tuning page (phase 27) ---------- */
/* /tuning.html: create / edit / delete steering notes without a chat
   conversation. Full-container width (owner instruction 2026-09-12:
   "match the width of the RAG page for all other pages" — the
   phase-27 capped-column discipline is superseded): the shell rides
   the .container's 72rem frame like the RAG page, and the form and
   the note list span its FULL width (no skinny lists). Every
   interactive target is >=44px; text pairs reuse the Phase-08 AA
   palette (dark ink on brand 5.2:1, brand-ink/brand-soft 6.9:1,
   ok 10.6:1, err 9.1:1, ink-soft >=6.9:1). No filter: blur, no CDN,
   system font stack. */
.tuning-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
}

/* Create form — the composer's surface as a vertical card: labeled
   textarea (visually-hidden label; the placeholder carries the visible
   hint) + the brand "Add note" button (dark ink on brand: 5.2:1 —
   never white on brand, 3.7:1, fails). */
#tune-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem 1rem;
}
#tune-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
#tune-note {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0.2rem 0.1rem;
  resize: vertical;
  min-height: 4.6rem;
}
#tune-note::placeholder { color: var(--ink-soft); }
#tune-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 1.2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--bg); /* dark ink on brand: 5.2:1 */
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#tune-save:hover:not(:disabled) { background: var(--brand-hover); }
#tune-save:disabled { opacity: 0.6; cursor: wait; }

/* Notes list — the phase-15 steering panel's language at full column
   width: rows are flex (text flexes + ellipsizes, actions shrink-0)
   with a bottom divider (the last row keeps none). */
.tuning-panel {
  background: var(--surface);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 1.1rem 1rem;
}
.tuning-panel-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.tuning-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tuning-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.tuning-note:last-child { border-bottom: 0; }
/* The note text is the row's flex citizen: it takes every spare pixel
   and ellipsizes (the full text is one Edit away — the inline form). */
.tuning-note-text {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Row actions: icon + label, >=44px, shrink-0. Edit = brand pair on
   hover (brand-ink/brand-soft 6.9:1); Delete = err pair on hover
   (9.1:1), consistent with .steering-delete. */
.tuning-edit,
.tuning-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}
.tuning-edit svg, .tuning-delete svg { width: 14px; height: 14px; display: block; }
.tuning-edit:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-soft); }
.tuning-delete:hover:not(:disabled) { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.tuning-edit:disabled, .tuning-delete:disabled { opacity: 0.5; cursor: wait; }

/* Inline edit: the row swaps to a vertical card — the text span is
   hidden and replaced by the .tuning-edit-form (textarea pre-filled +
   Save/Cancel, reusing the phase-15 .tune-save/.tune-cancel styles);
   the row-level Edit/Delete buttons step aside for the form's own. */
.tuning-note.is-editing {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
}
.tuning-note.is-editing .tuning-note-text,
.tuning-note.is-editing .tuning-edit,
.tuning-note.is-editing .tuning-delete { display: none; }
.tuning-edit-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.tuning-edit-input {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  resize: vertical;
  min-height: 2.6rem;
}
.tuning-edit-input::placeholder { color: var(--ink-soft); }
.tuning-edit-form-actions { display: flex; gap: 0.5rem; }

/* Per-action status pills (role=status / role=alert), the phase-15
   pairs: ok 10.6:1, err 9.1:1. */
.tuning-saved {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border: 1px solid color-mix(in srgb, var(--ok-ink) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.tuning-error {
  background: var(--err-bg);
  color: var(--err-ink);
  border: 1px solid var(--err-line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
}

#tune-empty {
  margin: 0.65rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-style: italic;
  text-align: center;
}

/* typing indicator */
/* align-items: center — the dots stay vertically centered when the
   phase-87 "Ns" hint (a full text line) makes the row taller; with
   only the three 8px dots the centering is a visual no-op. */
.typing { display: inline-flex; align-items: center; gap: 5px; padding: 0.9rem 1rem; }
.typing span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.5;
  animation: typing 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
/* Phase 87 (TODO.md L5): the visible pre-token elapsed hint — the
   10s thinking clock promoted from aria-only to sighted users.
   ink-soft on the bubble surface (the AA pairing), small mono like
   every status line. Plain text: no animation, no motion opt-out.
   The span is a sibling of the dots inside the same .typing bubble, so
   it resets the dot geometry (.typing span) it would otherwise inherit.
   The selector MUST stay ".typing span.typing-elapsed": a bare
   ".typing-elapsed" (0,1,0) LOSES the specificity war to the dot rule
   ".typing span" (0,1,1) — every reset below (width/height/border-
   radius/background/opacity/animation) would be overridden and the
   hint would render as an 8×8px bouncing dot with the "Ns" text
   wrapping one character per line (phase-87 regression, 2026-09). */
.typing span.typing-elapsed {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  opacity: 1;
  animation: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-left: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .typing span { animation: none; opacity: 0.7; }
  /* Phase 87 (TODO.md L5): the elapsed hint is plain text, not motion —
     it keeps full opacity (the AA pairing) under reduced motion. */
  .typing span.typing-elapsed { opacity: 1; }
  /* Phase 17 thinking block: the chevron stills (no rotation motion). */
  details.thinking summary::before { transition: none; }
  /* Phase 117 tool-calls disclosure: the same chevron, the same still
     (scoped to the  — the in-container span label has no
     chevron to still). */
  summary.tool-calls-summary::before { transition: none; }
  /* Phase 161 reasoning bubble: the family chevron, the family still. */
  summary.reasoning-summary::before { transition: none; }
}

/* Phase 117 (owner request 2026-09-15, live-mockup-confirmed — the
   phase-109 D16 dot cue replaced by a BRAIN-WAVE; the owner picked the
   ECG over the first equalizer mock): a compact trace (P bump, QRS
   spike, T bump — 49px wide, 8px flat tails; the middle is never
   rescaled) in index.html as a static SVG. .bw-ghost is the
   always-visible dim trace (the shape reads even when the sweep is
   between peaks); .bw-pulse is the same path in brand with a
   42/140 stroke-dash segment that TRAVELS the path — the classic
   heart-monitor draw (the bwdraw keyframe below). Still the phase-109
   D16 contract: visible for the ENTIRE active turn (send → terminal
   frame), its hidden attribute owned solely by app.js's setUiState
   (shown iff inFlight — hidden by construction in every terminal
   state, PLAN §7.4). DECORATIVE (aria-hidden in index.html):
   #send-status carries the state's meaning, so contrast is N/A here
   (§7.2 "text + color, never color alone" — the state TEXT stays in
   #send-status). The container is 44px = .send-btn min-height (house
   cross-reference — keep in lockstep), the trace centered against the
   button. The NEW bwdraw family is deliberate: the phase-109 "reuse
   the typing animation" pin is superseded by the owner's redesign.
   The loader sits LEFT of the button in the markup (index.html) so
   its appearance/disappearance never shifts the button. */
.turn-loader {
  display: inline-flex;
  align-items: center; /* center the trace against the button */
  width: auto;
  height: 44px; /* = .send-btn min-height (44px) — keep in lockstep */
  background: none;
  border-radius: 0;
  opacity: 1;
  align-self: flex-end; /* the composer row is flex-end aligned */
  animation: none; /* the sweep carries the motion, not the container */
}
.turn-loader svg {
  width: 49px;
  height: 32px;
  overflow: visible; /* the QRS spike (y=3) may exceed the box top */
}
.turn-loader .bw-ghost {
  fill: none;
  stroke: var(--ink-soft);
  stroke-opacity: 0.3; /* the dim always-visible trace */
  stroke-width: 2;
}
.turn-loader .bw-pulse {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The sweep: a 42/140 bright segment on the pathLength-normalized
     path — the dash cycle (42 + 98) equals the normalized length, so
     the bwdraw loop is seamless (no visible restart point). */
  stroke-dasharray: 42 98;
  animation: bwdraw 0.9s linear infinite;
}
@keyframes bwdraw {
  from { stroke-dashoffset: 140; }
  to { stroke-dashoffset: 0; }
}
/* Phase 117: reduced motion — the sweep is STILLED (the full trace
   shows static, no travel — §7.2 house law), never HIDDEN: visibility
   is owned by the JS hidden attribute in setUiState (D16), not by
   CSS. This override MUST sit AFTER the main rules above: equal
   specificity, and the later rule wins the cascade — a media block
   placed before the main rule would lose the cascade and the sweep
   would keep traveling under reduced motion (the phase-109 cascade
   pitfall, carried over). */
@media (prefers-reduced-motion: reduce) {
  .turn-loader .bw-pulse { animation: none; stroke-dasharray: none; }
}

/* ---------- Empty state & suggestions ---------- */
.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 1.75rem;
  text-align: center;
  margin-top: 1rem;
}
.empty-state-glyph { color: var(--brand-ink); width: 44px; height: 44px; margin-inline: auto; }
.empty-state-glyph svg { width: 44px; height: 44px; display: block; }
.empty-state-title { margin: 0.8rem 0 0.4rem; font-size: 1.5rem; color: var(--ink); }
.empty-state-sub { margin: 0 auto 1.25rem; max-width: 34rem; color: var(--ink-soft); }
.empty-state-sub code { font-family: var(--mono); font-size: 0.85em; background: var(--brand-soft); padding: 0.1em 0.35em; border-radius: 5px; }

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The shared chip pill — both chip rows (the onboarding row in the
   empty state and the "Maybe try" row under a deflected bubble) reuse
   it. Phase 104 (owner 2026-09-12, A1): a chip is ONE line at every
   viewport width — `white-space: nowrap` stops a 400-char question
   from wrapping the pill into a multi-line "chonk"; `overflow: hidden`
   zeroes the flex item's automatic minimum size (min-width:auto would
   pin the item to the full text width), so `max-width: 100%` binds and
   `text-overflow: ellipsis` clips the text at the row edge — in the
   desktop wrap row 100% is the chat column, in the ≤640px row
   (nowrap + overflow-x: auto) 100% is the VISIBLE width and the row
   scrolls. That clipping is the phase-07 overflow fix the old
   "Maybe try" chip override used to carry (min-width:0 + max-width:
   100%) — now fully subsumed here and deleted, provenance folded into
   this comment so the history lives with the contract. The full text
   stays one hover away (the title tooltip, phase 104 task 02). */
.suggestion-chip {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.suggestion-chip:hover { background: var(--brand-soft); }
.suggestion-chip:active { transform: scale(0.98); }

/* ---------- Composer ---------- */
/* Phase 52 (2026-08-30, TODO.md L3): the composer is PINNED to the
   viewport bottom. The page scrolls at the document level and
   `.chat-shell` (the centered reading column — 72rem, the
   .container width at every viewport) is the composer's sticky
   containing block, so the box sticks to the bottom edge of the
   viewport at every scroll position and settles back into its normal
   flow position (above the footer) once the document bottom is
   reached. Before this, a long conversation put the composer below the
   fold while phase 42 forbids auto-scrolling a streaming reply — the
   Stop control could literally not be reached ("it runs away from the
   user as they try to click stop").
   The pin is TWO rules working together — sticky alone is not enough
   (owner revision 2026-08-30: "the chat message-input textarea should be
   at the bottom of the screen"). `position: sticky` can only pull the
   box UP to the viewport's bottom edge while the document overflows; it
   never pushes it DOWN, so on an empty/short chat the box still sat
   mid-screen. `.messages { flex: 1 1 auto }` supplies the missing half:
   it puts the box's resting position at the bottom of the full-height
   column, and sticky takes over the moment the conversation overflows.
   The offset is the notch-aware safe-area inset (`env()` resolves to 0,
   or falls back to 0 where unsupported, so the box sits flush with the
   viewport bottom; ≤640px keeps its own
   `main { padding-bottom: env(safe-area-inset-bottom) }`).
   CSS-only by design: no DOM change, no JS, and NO new scroll call
   site (the phase-42 never-auto-scroll contract stays intact —
   `scrollReveal` is still the one page scroll in app.js).
   The solid `--surface` background, border, radius and shadow are kept
   so messages scrolling behind the pinned box never show through it,
   and no z-index is added: DOM order already paints the composer over
   `.messages`, it never overlaps the sticky header (z 20) and stays
   under the z-1000 document modal.
   Phase 65 (2026-09-01, `TODO.md` L3, owner-locked A1): the pin now
   belongs to the .chat-bottom wrapper (rule below) — the row + this
   form are ONE sticky unit; this composer's own sticky declaration is
   kept, redundant inside the wrapper but pinned as a computed style by
   tests/e2e/test_pinned_composer.py. */
/* Phase 65 (owner-locked A1, 2026-09-01, `TODO.md` L3): the pinned
   bottom cluster — the .chat-actions row + the #composer form as ONE
   sticky unit (A1): the pills are literally always at the bottom of
   the screen, even while the reader is scrolled up through a long
   conversation (the rejected in-flow alternative would scroll away).
   The sticky range is the .chat-shell containing block (the wrapper's
   parent) — the same range the composer used to have alone — and the
   .messages flex-grow still rests the WHOLE unit at the screen bottom
   on short chats (the wrapper is the last shell child, so the grow
   pushes it down). The shell's 1rem gap applies only ABOVE the unit,
   from .messages — the 0.5rem gap here is the row↔composer spacing
   INSIDE it. No z-index: the phase-12 sticky header (z 20) and the
   phase-46 dropdown always stay on top, and at the document bottom the
   unit settles back into flow above the footer (the composer's opaque
   surface keeps messages hidden where the box overlaps them). The
   composer's own sticky rule below stays — redundant here (its
   containing block is the wrapper, so it cannot shift within the
   unit), pinned by tests/e2e/test_pinned_composer.py. */
.chat-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: sticky;
  bottom: env(safe-area-inset-bottom, 0);
}
/* Phase 88: pre-boot, the composer cluster is NOT sticky. The sticky
   promotion (a compositor layer) is deferred out of the first layout
   commit — on real Android, the cluster's sticky layer born at first
   commit was eating the hamburger's click (owner bug report
   2026-09-08; the client-side switch into chat — same layer, born on
   a settled page — always worked). app.js adds .chat-booted two
   frames after boot settles; no-JS keeps the cluster static, which in
   the only no-JS state (empty, 100dvh document) sits exactly where
   the pin would. */
#view-chat:not(.chat-booted) .chat-bottom,
#view-chat:not(.chat-booted) .composer {
  position: static;
}
/* Phase 104 (owner 2026-09-12, A4): the question-length counter —
   right-aligned above the composer, a child of the .chat-bottom sticky
   unit (between the actions row and the form), hidden until 80% of the
   4,000-char cap (app.js updateCharCount). It sits on the APP
   background behind the transparent .chat-bottom unit, so both pairings
   are verified against --bg: --ink-soft on --bg = 8.6:1 (≥4.5:1, WCAG
   AA) and the .is-max state's --err-ink on --bg = 10.4:1 (AA). The
   .is-max state ALSO changes the copy ("— character limit") — text +
   color, never color alone (B3). */
.char-count { margin: 0; text-align: right; font-size: 0.75rem; line-height: 1.2; color: var(--ink-soft); }
.char-count.is-max { color: var(--err-ink); }
/* Phase 123 (task 02, TODO L6): the ATTACH PREVIEW STRIP — the
   selected image ABOVE the input row (thumbnail ≤48px + the filename
   + the remove button): a surface card in the .chat-bottom stack, between
   the char-count line and the composer. The name is ellipsized
   (AA-safe --ink on --surface = 13.8:1) — a long filename never widens
   the strip; the thumbnail is a fixed 48px cover box (the preview
   crops, the bubble shows the whole image); the remove button keeps the
   44px touch
   target (PLAN §7.1) with a destructive hover (--err-ink on --err-bg =
   9.3:1 — text + color, never color alone, B3). Hidden by default
   (the global [hidden] rule) — revealed only while a file is attached,
   cleared with the send so the strip never lingers into a turn. */
.attach-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.attach-preview-img {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.attach-preview-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--ink);
}
.attach-preview-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}
.attach-preview-remove svg { width: 18px; height: 18px; }
.attach-preview-remove:hover { background: var(--err-bg); color: var(--err-ink); }
/* Phase 132 (task 02, TODO L8): the strip's UPLOADING look — the
   visual half of the owner-confirmed double-spam block (task 01's JS
   state proves the image is moving while POST /api/chat-images is in
   flight; before this the strip looked frozen and the user spammed
   Send). The thumbnail DIMS to 0.5 (it is decorative — no contrast
   duty — and 0.5 is the house dim value the disabled remove button
   below); the filename HIDES with visibility (the flex: 1 slot keeps
   its measured width — the status takes the row's right hand WITHOUT
   reflowing the pinned 44px remove button); the house loading arc
   (the status part's svg — task 01's markup, currentColor = the
   status's --ink-soft) SPINS at the sync spinner's pace (the house
   `spin` keyframes at 1s linear — .sync-icon.is-spinning's in-flight
   pace; the .spinner's 0.8s is the busy-turn arc's). The status text
   is --ink-soft on the strip's --surface — the :root-pinned pair,
   8.2:1 computed against WCAG 2.1 (AA ≥ 4.5:1), at the strip's
   small text size (the name's 0.85rem). The remove button (task 01
   disables it mid-flight) dims with its disabled attribute — the
   attribute is the state, the 0.5 is its visual half; the Send rides
   the same house :disabled language (.send-btn:disabled's
   --brand-busy + not-allowed below — which reads as disabled already,
   so NO new color or weight was added, B4). prefers-reduced-motion stills the arc (the house block): the
   "Uploading image…" TEXT + the dimmed thumbnail carry the state
   without motion (B5 — never motion alone). Every value is a theme
   variable or a neutral number — the block ships no raw color. */
.attach-preview.is-uploading .attach-preview-img {
  opacity: 0.5;
}
.attach-preview.is-uploading .attach-preview-name {
  visibility: hidden; /* keep the flex: 1 slot; the status takes its right hand */
}
.attach-preview-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.85rem; /* the strip's small text — the name's size */
  min-width: 0; /* the row's clamp: at 320 px the text WRAPS (no clip) */
}
.attach-preview-status-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  animation: spin 1s linear infinite; /* the house spin keyframes (the sync pace) */
}
@media (prefers-reduced-motion: reduce) {
  .attach-preview-status-icon { animation: none; }
}
.attach-preview.is-uploading .attach-preview-remove {
  opacity: 0.5; /* the disabled attribute's visual half (task 01 sets it) */
}
.composer {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  position: sticky;
  bottom: env(safe-area-inset-bottom, 0);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.6rem;
}
.composer:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.composer textarea {
  flex: 1;
  font: inherit;
  color: var(--ink);
  border: 0;
  resize: none;
  max-height: 12rem;
  padding: 0.55rem 0.5rem;
  background: transparent;
}
.composer textarea::placeholder { color: var(--ink-soft); }
/* Phase 123 (task 02, TODO L6): the composer's ATTACH CONTROL — the
   paperclip glyph button LEFT of the input. Hidden in the markup until
   app.js reveals it from the config's images flag (the global [hidden]
   rule keeps it out of the flag-off DOM — A5's default-off contract).
   A neutral cut of the .send-btn family: the same 44px hit target +
   radius + the global :focus-visible ring (PLAN §7.2); surface fill
   with a muted hover step (the icon: --ink-soft on --surface = 5.1:1,
   hover --brand-ink on --brand-soft = 12.4:1 — both past the 3:1
   non-text floor). */
.attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}
.attach-btn svg { width: 20px; height: 20px; }
.attach-btn:hover { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-ink); }
.send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 84px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  /* Dark ink on brand (5.2:1) — never white on brand (3.7:1, fails). */
  color: var(--bg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding-inline: 1rem;
}
.send-btn:hover:not(:disabled) { background: var(--brand-hover); }
.send-btn:disabled { background: var(--brand-busy); cursor: not-allowed; }

/* Phase 48 (2026-08-29, TODO.md L3): the in-flight Stop treatment — one
   button, two roles. --brand-stop (the brand darkened 75% toward --bg;
   the built-in default mixes to ≈ (187, 50, 73)) with a white label =
   5.8:1 (WCAG AA); the hover step (--brand at 55% toward --bg) holds
   8.5:1. white is the ONE literal allowed outside :root — the dark bg
   ink on the stop fill is only ≈3.4:1 (fails AA). Same radius/height/
   hit target as the Send state and the shared :focus-visible ring — the
   .is-stop class rides the same .send-btn element, and the later rules
   win the hover specificity tie. */
.send-btn.is-stop { background: var(--brand-stop); color: #fff; }
.send-btn.is-stop:hover { background: color-mix(in srgb, var(--brand) 55%, var(--bg)); }

/* Busy spinner: dark arc (--bg) on the --brand-busy button ≈ 11.3:1
   (well above the 9:1 floor the phase-48 note pinned for the arc). */
.spinner {
  width: 16px; height: 16px;
  border: 2.5px solid color-mix(in srgb, var(--bg) 30%, transparent);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}
/* ---------- Banners ---------- */
.kb-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-bg);
  color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.kb-banner.is-error { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.kb-banner svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
/* Phase 53 (task 05): the stale-saved-chat banner — the .kb-banner
   FAMILY (the section carries both classes: same flex row, accent
   tokens — accent-ink on accent-bg 9.5:1 — 18px glyph), but the
   leading mark is the REDO glyph, distinct from the warning triangle.
   It sits directly after #kb-banner in .chat-shell, so when both are
   visible the empty-KB banner keeps the top slot and the stale banner
   stacks directly below (the flex column's gap spaces them). The text
   takes the row; the Regenerate pill right-aligns (margin-left: auto)
   and the row wraps only when it must. The pill is the EXACT
   brand-pill family of Save/Share: solid --brand, --bg text (5.2:1,
   AA), borderless, 999px radius, ≥44px target, hover lightens the
   brand fill; the 16px redo glyph is the phase-49 Retry asset. The
   ≤640px block below makes the pill a full-width row. */
.stale-banner { flex-wrap: wrap; }
.stale-banner > span { flex: 1 1 auto; }
.stale-regenerate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-left: auto;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 0;
  background: var(--brand);
  color: var(--bg);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
}
.stale-regenerate:hover { background: var(--brand-hover); color: var(--bg); }
.stale-regenerate:disabled { opacity: 0.6; cursor: wait; }
.stale-regenerate svg { width: 16px; height: 16px; display: block; }

/* Phase 111 (task 01): the banner Retry button — the same pill treatment
   as .stale-regenerate (brand fill, ≥44px, 999px radius, redo glyph) so
   the banner's action reads as the same component family. The kb-banner
   flex row + gap already handles inline spacing after #kb-banner-text. */
.banner-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-left: auto;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 0;
  background: var(--brand);
  color: var(--bg);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
}
.banner-retry:hover { background: var(--brand-hover); color: var(--bg); }
.banner-retry:disabled { opacity: 0.6; cursor: wait; }
.banner-retry svg { width: 16px; height: 16px; display: block; }

/* Phase 55 (task 04): the share-success toast (TODO.md L5). Top-right,
   just under the sticky header (--header-h + a small offset — the
   variable already steps 64px → 58px at ≤640px), z-index 1000 (the
   modal overlay contract — above the header's 20 and the skip-link's
   100). VISUAL ONLY (A4 owner-locked): the node ships aria-hidden
   from app.js — #send-status stays the a11y announcer (no double
   screen-reader read). Solid brand fill: --bg text on --brand = 5.2:1
   (AA — the .new-chat-btn family); rounded, shadowed, one line of
   text that wraps under the small max-width. Hidden by default
   (opacity 0 + pointer-events: none — it never intercepts clicks when
   idle); .toast.is-visible (toggled by showToast) runs the entry:
   slide-down + fade (translateY(-8px) → 0, 200ms). */
.toast {
  position: fixed;
  top: calc(var(--header-h) + 0.75rem);
  right: 1rem;
  z-index: 1000;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--bg);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  /* No slide: BOTH states rest at transform: none (the .is-visible
     rule would otherwise out-specify the bare .toast); the opacity
     fade remains (120ms). */
  .toast,
  .toast.is-visible { transform: none; }
  .toast { transition: opacity 120ms ease; }
}

/* ---------- Login page (phase 16) ---------- */
/* Centered card in the standard frame: one admin, one password. */
.login-shell {
  display: flex;
  justify-content: center;
  flex: 1;
}
.login-card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2rem 2.25rem;
}
.login-card h1 { margin: 0 0 0.4rem; font-size: 1.6rem; }
.login-sub { margin: 0 0 1.5rem; color: var(--ink-soft); }
#login-form { display: flex; flex-direction: column; gap: 0.75rem; }
#login-password {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  min-height: 44px;
}
#login-password:focus-visible { border-color: var(--brand); }
/* Brand button: dark ink on brand 5.2:1 (never white on brand). */
.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--bg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding-inline: 1rem;
}
.login-submit:hover:not(:disabled) { background: var(--brand-hover); }
.login-submit:disabled { opacity: 0.6; cursor: wait; }
/* Login failure (role=alert): err pair ≈9.1:1. */
.login-error {
  margin: 0.9rem 0 0;
  background: var(--err-bg);
  color: var(--err-ink);
  border: 1px solid var(--err-line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Sources page ---------- */
.sources-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
}
/* Phase 93 task 03 (TODO.md L3): "the header and description of each
   page needs a background - the grid makes it hard to read." Every
   page's h1 + description sits on a solid surface panel — the house
   card language (var(--surface) fill, itself tab-controlled, so a
   monochrome theme grays it automatically; the 1px --line border; the
   house radius). No new color literal, no blur (the phase-08 perf
   anchor). One rule covers the six shell views' .page-head (Global
   Tuning, Knowledge base, Git sources, Saved chats, Access tokens,
   Theme) + doc-edit.html, and the shared page's head (its h1 + lede
   are wrapped in the same class in shared.html). #view-chat carries
   no .page-head — its head is the navbar (audited, unchanged). The
   History page-head keeps its flex row (scoped below — the padding
   lives on the flex container, not the children). */
.page-head {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.page-head h1 { margin: 0 0 0.25rem; font-size: 1.7rem; }
.page-head-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.page-sub { margin: 0; color: var(--ink-soft); }
.page-sub code { font-family: var(--mono); font-size: 0.85em; background: var(--brand-soft); padding: 0.1em 0.35em; border-radius: 5px; }
/* ---------- Sync button (Sources page) ---------- */
.sync-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.sync-btn:hover { background: var(--brand-soft); color: var(--brand-ink); }
.sync-btn:disabled { opacity: 0.6; cursor: wait; }
.sync-btn.is-error {
  background: var(--err-bg);
  color: var(--err-ink);
  border-color: var(--err-line);
}
.sync-btn.is-error:hover { background: var(--err-bg); color: var(--err-ink); }
/* Phase 134 (task 02): the Cancel control — the in-flight sync run's
   cooperative stop (visible ONLY while a SYNC run is in flight; the
   upload job is not cancellable in this phase — sources.js owns the
   show/hide, the same never-stale contract as the main button). The
   SECONDARY pill language of the house button family (the
   .kb-summary-cancel pair): transparent fill, 1px --line border,
   --ink-soft text (5.1:1 on --surface, AA), the global 3px
   :focus-visible ring, the >=44px touch floor. :disabled = the cancel
   request in flight (one request at a time — never stale); the hover
   is guarded on :not(:disabled) so a disabled button under the cursor
   never reads as actionable. The [hidden] rule keeps the attribute
   authoritative over the display above (the .kb-summary-edit pattern).
   No layout regression on the sync-control row: the row already
   flexes with a 1rem gap (desktop) and wraps (mobile, where the pill
   goes full-width like the main button — the 360px case). */
.sync-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft); /* 5.1:1 on --surface (AA) */
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.sync-cancel-btn:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-ink); }
.sync-cancel-btn:disabled { opacity: 0.6; cursor: default; } /* the cancel request is in flight */
.sync-cancel-btn[hidden] { display: none; } /* the hidden attr must beat the display above */
.sync-icon { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
.sync-btn .sync-icon.is-spinning { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sync-btn .sync-icon.is-spinning { animation: none; }
}
/* Phase 64: the live-file label ("Syncing…  (n/m)" / "Importing
    (n/m)") — a long source/relative/path ellipsizes inside the
   pill; the full path lives in the button title + the #sync-progress
   box (the aria-live announcer — phase 150: the SOLE sync text
   surface). Phase 128 (task 02): the label is a FLEX ROW
   of parts — .sync-label-main (the prefix + file/folder: min-width
   0, the shrinkable item whose ellipsis engages) + .sync-label-count
   (the pinned "(n/m)": flex 0 0 auto, NEVER clipped — the
   .sync-progress-text mono language, a position reads as data). Phase 129
   (task 04): a THIRD pinned part — .sync-label-chunk (the "· chunk
   n/m" embed-batch position of the in-flight file, the same pinned
   mono language; hidden in every state but the import phase after
   the file's first batch). */
.sync-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  max-width: min(16rem, 40vw);
}
.sync-label-main {
  min-width: 0; /* the flex item that shrinks — what engages the ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-label-count {
  flex: 0 0 auto; /* NEVER clipped — the (n/m) position is the point */
  white-space: nowrap;
  font-family: var(--mono); /* the .sync-progress-text mono language (position reads as data) */
}
.sync-label-chunk {
  flex: 0 0 auto; /* NEVER clipped — the · chunk n/m position is the point (phase 129) */
  white-space: nowrap;
  font-family: var(--mono); /* the same pinned-part language as the count (position reads as data) */
}
/* Phase 149 (task 02): the sync detail box — the house's bordered panel
   language (the .page-head card: --surface fill, 1px --line border,
   the house radius; --line is decorative, no contrast duty, like every
   other house border). It sits in the .sources-shell flex column whose
   1.25rem gap IS the house spacing above and below — no margin-top
   (it would double the gap). min-height ≈ 2 lines (0.8rem mono at the
   body 1.55 line-height, + the 0.75rem block padding + the 2px border,
   border-box) so even a one-line label reads as a calm panel with
   breathing room. The box is hidden-attr-driven (the global [hidden]
   !important rule keeps it display:none while its text is empty —
   phase 150: it shows while a run is in flight AND stays up after
   settle to carry the result line). Mobile: a block in the same
   .container rides the 100%-width phone shell — full width with no
   override (task 03's E2E asserts it at 360px). */
.sync-progress {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  min-height: 4rem;
}
.sync-progress-text {
  display: block;
  font-family: var(--mono); /* the house mono language — position reads as data */
  font-size: 0.8rem; /* the house small-data size */
  line-height: 1.55; /* the house body line-height */
  color: var(--ink-soft); /* PINNED identity pair on --surface (8.2:1 on the
                              built-in dark, AA in both built-ins; the theme gate
                              keeps any custom theme at >= 4.5:1) */
  overflow-wrap: anywhere; /* THE POINT of the box — a long source/relative/path WRAPS
                              inside the panel; the pre-phase pill ellipsis is retired
                              for the live detail (never clipped) */
}
/* Phase 149 (task 02): the running button IS the loading spinner (the
   owner's ask) — the label parts hide via the .is-running class
   (sources.js adds/removes it exactly where the icon's .is-spinning
   travels). The pill's padding/border stay, so the control never
   collapses: the 16px icon centers in a ~47x44px pill (desktop) or the
   full-width 44px bar (mobile — the pre-phase .sync-btn { width: 100% }
   rule keeps the big in-flight target, viewport-agnostic rule defined
   ONCE here). :hover, :disabled, and :focus-visible are untouched —
   they live on the .sync-btn element, and hiding the label span touches
   neither. The idle "Sync sources" label (and the mobile ellipsis rules
   for it) render exactly as pre-phase when the class is absent. */
.sync-btn.is-running .sync-label { display: none; }
/* Sync failure modal — lazily created by sources.js, appended to .
   Error surface: --err-bg with --err-line border, title in --ink,
   error text in --err-ink (9.1:1 on --err-bg). Backdrop dims with
   --bg at 82%. z-index 1000 (same overlay contract as doc-modal). */
.sync-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease;
}
.sync-modal-backdrop.is-open {
  visibility: visible;
  opacity: 1;
}
.sync-modal {
  position: relative;
  width: 100%;
  max-width: 28rem;
  background: var(--err-bg);
  border: 1px solid var(--err-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 3rem 1.25rem 1.25rem;
}
#sync-modal-title {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  color: var(--ink);
}
#sync-modal-error {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--err-ink);
  overflow-wrap: anywhere;
}
.sync-modal-close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--err-line);
  background: transparent;
  color: var(--err-ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.sync-modal-close:hover { background: color-mix(in srgb, var(--err-line) 15%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .sync-modal-backdrop { transition: none; }
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.9rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
/* Mono stat values — technical readout (phase 08). */
.stat-value { font-family: var(--mono); font-size: 2rem; font-weight: 800; color: var(--brand-ink); line-height: 1.1; }
.stat-value-sm { font-size: 1.15rem; font-weight: 700; }
.stat-label { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; }

/* Phase 16: anonymous sign-in gate — the designed replacement for the
   catalog (stat cards + table) until the admin signs in. */
.sources-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 1.75rem;
}
.sources-gate-glyph { color: var(--brand-ink); width: 44px; height: 44px; }
.sources-gate-glyph svg { width: 44px; height: 44px; display: block; }
.sources-gate h2 { margin: 0.6rem 0 0.3rem; font-size: 1.4rem; }
.sources-gate-sub { margin: 0 auto; max-width: 30rem; color: var(--ink-soft); }
.sources-gate-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--bg); /* dark ink on brand: 5.2:1 */
  font-weight: 700;
  text-decoration: none;
}
.sources-gate-link:hover { background: var(--brand-hover); }

/* Phase 79 (task 05): the in-app token gate — the gate surface of the
   two token-only pages (the shell + the document viewer, one shared
   .auth-gate markup each). A body-level FIXED overlay (the
   body-level doc-modal precedent): while visible it is the only
   CONTENT-level interactive surface — assets/token-gate.js locks the
   root (#main, inert) so focus and keyboard traversal stay inside
   the gate (WCAG, the inert-pair contract).
   Stacking (phase 85, TODO.md L3): z-index 15 — ABOVE all app
   content (static) but BELOW the sticky header (20) and its mobile
   dropdown (21, inside the header's stacking context): the
   unauthenticated visitor keeps a reachable hamburger + menu while
   the gate still covers and locks the app content (#main stays
   inert — the lock is JS, not z-order — phase 79). The skip-link
   (100) and the 1000-family overlays (doc-modal, sync backdrop) are
   unaffected — all above 15; the doc-modal can only be opened from
   the unlocked app anyway. Solid --bg: the canvas + grid texture
   live on  (the body stays transparent), so the overlay reads
   as the app's own surface — no blur (the phase-08 perf anchor).
   The centered card reuses the #sources-gate visual language
   (surface card + hairline + glyph + heading + sub + action) in a
   tighter column. */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex; /* the card is the only in-flow child — margin: auto centers it */
  overflow-y: auto; /* short viewports: the card scrolls fully into view */
  background: var(--bg);
}
/* Explicit (the global [hidden] rule already wins — this is the
   documented, testable contract for the skeleton). */
.auth-gate[hidden] { display: none; }

.auth-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  /* margin:auto centers AND stays scrollable on overflow (the flex
     centering pitfall: align/justify center would clip the top of a
     taller-than-viewport card). */
  margin: auto;
  width: min(28rem, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 1.75rem;
}
.auth-gate-glyph { color: var(--brand-ink); width: 44px; height: 44px; }
.auth-gate-glyph svg { width: 44px; height: 44px; display: block; }
.auth-gate h2 { margin: 0.6rem 0 0.3rem; font-size: 1.4rem; }
.auth-gate-sub { margin: 0; max-width: 24rem; color: var(--ink-soft); }

/* The token form: mono input (the token is code — the house mono
   language), a visible focus ring (WCAG — the 3px :focus-visible
   outline at offset 0 + the brand border), and the house submit
   button (the .tune-save language: dark ink on brand, 5.2:1). Both
   targets are ≥44px (the touch-target contract). */
.auth-gate form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.9rem;
}
.auth-gate input {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink); /* 16.7:1 on --bg */
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  min-height: 44px;
  width: 100%;
}
.auth-gate input::placeholder { color: var(--ink-soft); }
.auth-gate input:focus-visible { outline-offset: 0; border-color: var(--brand); }
.auth-gate-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--bg); /* dark ink on brand: 5.2:1 */
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.auth-gate-submit:hover:not(:disabled) { background: var(--brand-hover); }
.auth-gate-submit:disabled { opacity: 0.6; cursor: wait; }

/* The one-line error (role=alert) — the rose/danger family the
   house alerts use (--err-ink on --err-bg, 9.3:1). */
.auth-gate-error {
  margin: 0.75rem 0 0;
  background: var(--err-bg);
  color: var(--err-ink);
  border: 1px solid var(--err-line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
}

/* The secondary "Sign in as admin" link reuses the .sources-gate-link
   pill language (its own margin-top: 0.75rem applies) — the guest's
   other door: the admin password login (the static ?next=/ is the
   no-JS fallback). */

/* Phase 86: the card is the containing block for the
   position:absolute .visually-hidden elements it hosts (the table
for #### and
