/* Compliance Hub — design tokens.
   Neutrals carry the structure; the accent is reserved for state and action.
   Spending the accent on decoration is what made an earlier build read as a
   marketing page rather than a working tool. */
:root {
  color-scheme: dark;
  --bg: #0e1113;
  --surface: #14181b;
  --surface-2: #1a1f23;
  --surface-3: #21272c;
  --border: #262d33;
  --border-strong: #333c44;

  --text: #e8ecef;
  --text-2: #9aa5ad;
  --text-3: #6b757d;

  --accent: #3d9970;
  --accent-text: #57b98c;
  --accent-soft: rgba(61, 153, 112, .12);
  --accent-glow: rgba(61, 153, 112, .22);

  --risk-high: #d9534f;
  --risk-medium: #d99a3d;
  --risk-low: #3d9970;
  --risk-unknown: #6b757d;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --rail-w: 240px;
  --bar-h: 48px;
  --radius: 6px;
  --radius-lg: 12px;
}

/* Without a stored choice no data-theme is set, so the operating system
   preference decides on the very first paint. The explicit attribute below
   still wins when the user has chosen a theme. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg: #f7f8f9;
    --surface: #ffffff;
    --surface-2: #f2f4f5;
    --surface-3: #e8ebed;
    --border: #e2e6e9;
    --border-strong: #cdd4d9;
  
    --text: #16191c;
    --text-2: #5c666e;
    --text-3: #868f96;
  
    --accent: #2f7d5b;
    --accent-text: #2f7d5b;
    --accent-soft: rgba(47, 125, 91, .09);
    --accent-glow: rgba(47, 125, 91, .16);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8f9;
  --surface: #ffffff;
  --surface-2: #f2f4f5;
  --surface-3: #e8ebed;
  --border: #e2e6e9;
  --border-strong: #cdd4d9;

  --text: #16191c;
  --text-2: #5c666e;
  --text-3: #868f96;

  --accent: #2f7d5b;
  --accent-text: #2f7d5b;
  --accent-soft: rgba(47, 125, 91, .09);
  --accent-glow: rgba(47, 125, 91, .16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font: 400 13px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding-left: 18px; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.hidden { display: none !important; }
.spacer { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 10px; top: -60px; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: var(--radius); }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
kbd { font-family: var(--mono); border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 4px; font-size: 10px; }

/* ------------------------------------------------------------------ shell */

.app {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) 300px;
  overflow: hidden;
}
.app.no-evidence { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
/* Collapsing the column is not enough — the panel has to leave the grid, or it
   reflows underneath the workspace as a second row. */
.app.no-evidence .evidence { display: none; }
.app.rail { --rail-w: 56px; }

/* ---------------------------------------------------------------- sidebar */

.sidebar {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.sidebar-brand { height: var(--bar-h); display: flex; align-items: center; gap: 9px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.brand-mark { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; color: #fff; background: var(--accent); flex: 0 0 auto; }
.brand-mark svg { width: 14px; height: 14px; }
.brand-text { min-width: 0; flex: 1; }
.brand-text strong { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand-text em { font-style: normal; font-size: 9px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.rail-toggle { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-3); cursor: pointer; border-radius: 4px; flex: 0 0 auto; }
.rail-toggle:hover { color: var(--text); background: var(--surface-2); }
.rail-toggle svg { width: 15px; height: 15px; }

.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 12px 8px 8px; }
.rail-label { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 0 6px 7px; }

.gem-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
.gem-nav button {
  width: 100%; display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center;
  padding: 6px 7px; border: 0; border-radius: var(--radius);
  background: transparent; text-align: left; cursor: pointer; color: var(--text-2);
}
.gem-nav button:hover { background: var(--surface-2); color: var(--text); }
.gem-nav button.active { background: var(--accent-soft); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.gem-nav .gem-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gem-nav .pin { font-size: 9px; color: var(--accent-text); }

/* A hexagonal chip reads as a component rather than a bullet. clip-path removes
   any border, so definition comes from the fill and a hairline drop-shadow. */
.gem-icon {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: -.02em;
  color: var(--accent-text); background: var(--accent-soft);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: drop-shadow(0 0 0 var(--border-strong));
  transition: background .15s, color .15s;
}
.gem-icon.lg { width: 30px; height: 30px; font-size: 11px; }

.sidebar-foot { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 6px 8px 8px; display: grid; gap: 1px; }
.side-item {
  width: 100%; display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center;
  padding: 6px 7px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text-2); cursor: pointer; text-align: left; text-decoration: none;
}
.side-item:hover { background: var(--surface-2); color: var(--text); }
.side-item svg { width: 15px; height: 15px; justify-self: center; }
.side-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--risk-unknown); justify-self: center; }
.side-item.ok .dot { background: var(--accent-text); }
.side-item.warn .dot { background: var(--risk-medium); }
.side-item.bad .dot { background: var(--risk-high); }
.side-label { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-label b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.sidebar-controls { display: flex; align-items: center; gap: 6px; padding: 6px 7px 0; }
.seg { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button { width: 28px; height: 24px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: 11px; }
.seg button.active { background: var(--surface-3); color: var(--text); }
.icon-btn { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-2); cursor: pointer; flex: 0 0 auto; }
.icon-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.icon-btn svg { width: 14px; height: 14px; }
.moon-icon { display: none; }
html[data-theme="light"] .sun-icon { display: none; }
html[data-theme="light"] .moon-icon { display: block; }

/* Rail mode: labels collapse, icons stay. */
.app.rail .brand-text, .app.rail .rail-label, .app.rail .side-label,
.app.rail .gem-nav .gem-name, .app.rail .sidebar-controls { display: none; }
/* In rail mode the toggle is hidden for space, so the brand mark itself becomes
   the way back out — otherwise collapsing the sidebar is a one-way trip. */
.app.rail .sidebar-brand { justify-content: center; padding: 0 8px; cursor: pointer; }
.app.rail .sidebar-brand:hover .brand-mark { filter: brightness(1.15); }
.app.rail .rail-toggle { display: none; }
.app.rail .gem-nav button, .app.rail .side-item { grid-template-columns: 1fr; justify-items: center; }

/* -------------------------------------------------------------- workspace */

.workspace { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.workspace-bar { height: var(--bar-h); flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.workspace-bar h1 { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.drawer-btn { display: none; }
.mode-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px 2px 7px; background: var(--surface-2); cursor: pointer; white-space: nowrap; }
.mode-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--risk-medium); }
.mode-pill.live .dot { background: var(--accent-text); }
.mode-pill:hover { border-color: var(--border-strong); color: var(--text); }
.text-btn { height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-2); cursor: pointer; font-size: 12px; white-space: nowrap; }
.text-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.text-btn svg { width: 14px; height: 14px; }

/* min-height:0 is required: a flex item defaults to min-height:auto and refuses
   to shrink below its content, which pushes the composer off-screen. */
.thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.thread-inner { max-width: 800px; margin: 0 auto; padding: 24px 22px 8px; }

/* ------------------------------------------------------------ empty state */

.start { max-width: 800px; margin: 0 auto; padding: 30px 22px 8px; }
.start-head { margin-bottom: 22px; }
.start-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 5px; }
.start-head p { font-size: 12.5px; color: var(--text-2); max-width: 62ch; }
.section-label { display: flex; align-items: baseline; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin: 0 0 9px; }
.section-label span { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 11px; }

/* The empty state teaches what the sidebar and palette cannot: how to reach
   the catalogue, and something concrete to click first. */
.start-teach { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; }
.teach-row { background: var(--surface); padding: 12px 14px; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.teach-row kbd { justify-self: center; margin-top: 1px; font-size: 12px; padding: 2px 7px; }
.teach-pin { justify-self: center; margin-top: 1px; color: var(--accent-text); font-size: 13px; }
.teach-row strong { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.teach-row span { font-size: 11.5px; color: var(--text-2); line-height: 1.55; }

.starter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 7px; margin-bottom: 24px; }
.starter { text-align: left; cursor: pointer; padding: 11px 12px; color: inherit; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .15s, background .15s; }
.starter:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); background: var(--surface-2); }
.starter strong { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; line-height: 1.45; }
.starter small { display: block; font-size: 11px; color: var(--text-3); }

.gem-nav-empty { font-size: 11px; color: var(--text-3); padding: 4px 7px; line-height: 1.5; }
.app.rail .gem-nav-empty { display: none; }

/* The data line is what makes a gem read as wired into a real system rather
   than as a saved prompt, so it reports coverage honestly including gaps. */
.gem-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.gem-meta .sep { opacity: .5; }
.gem-meta .warn { color: var(--risk-medium); }
.gem-meta .none { color: var(--text-3); font-style: italic; }

.coverage-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); }
.coverage-cell { background: var(--surface); padding: 10px 12px; }
.coverage-cell b { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.coverage-cell span { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.coverage-cell.is-bad b { color: var(--risk-high); }
.coverage-cell.is-warn b { color: var(--risk-medium); }

/* -------------------------------------------------------------- messages */

.msg { margin-bottom: 20px; }
.msg-user { display: flex; justify-content: flex-end; }
.msg-user .bubble { max-width: 82%; padding: 9px 13px; border-radius: 12px 12px 3px 12px; background: var(--surface-3); font-size: 13px; white-space: pre-wrap; }
.gem-tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; color: var(--accent-text); background: var(--accent-soft); border-radius: 3px; padding: 0 5px; margin-bottom: 5px; }

.msg-assistant { display: grid; grid-template-columns: 24px 1fr; gap: 11px; }
.avatar { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.msg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-3); margin-bottom: 8px; }
.msg-meta .tag { font-family: var(--mono); }
.msg-meta .sep { color: var(--border-strong); }

.answer { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.answer-head { display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 15px 16px; }
.risk-mark {
  align-self: start; display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  border-radius: 7px; white-space: nowrap;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 11%, transparent);
}
.risk-high { color: var(--risk-high); } .risk-medium { color: var(--risk-medium); }
.risk-low { color: var(--risk-low); } .risk-unknown { color: var(--risk-unknown); }
.answer-head h3 { font-size: 15.5px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; letter-spacing: -.01em; }
.answer-head p { font-size: 13px; color: var(--text-2); }

/* The gaps that block a conclusion and the actions that close them. These are
   the operative part of the answer, so they sit above the fold of the card
   rather than inside the collapsed trace. */
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.action-block { background: var(--surface); padding: 11px 14px; }
.action-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.action-label { font: 600 9.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); }
.action-count { font: 600 9.5px/1.6 var(--mono); min-width: 16px; text-align: center; border-radius: 8px; padding: 0 5px; }
.action-block.gaps .action-count { color: var(--risk-medium); background: rgba(217,154,61,.15); }
.action-block.actions .action-count { color: var(--accent-text); background: var(--accent-soft); }
.action-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; counter-reset: none; }
.action-items li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.action-items .marker {
  width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 4px;
  font: 600 10px/1 var(--mono); font-variant-numeric: tabular-nums;
}
/* Actions are worked through in order, so the marker is a step number. */
.action-block.actions .marker { color: var(--accent-text); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
/* Gaps are collected, not sequenced, so the marker is an empty checkbox. */
.action-block.gaps .marker { border: 1px solid color-mix(in srgb, var(--risk-medium) 55%, var(--border)); border-radius: 3px; background: rgba(217,154,61,.09); }
.action-items .item-body { min-width: 0; }
.action-items code { font-family: var(--mono); font-size: 11px; background: var(--surface-3); border-radius: 3px; padding: 0 4px; }
.action-items strong { color: var(--text); font-weight: 600; }
.action-block .from { display: block; font: 400 10px/1.6 var(--mono); color: var(--text-3); margin-top: 2px; }

.next-step { border-top: 1px solid var(--border); background: var(--surface-2); padding: 11px 16px; font-size: 13px; color: var(--text); }
.next-step b { display: block; font: 600 9.5px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }

/* Model prose keeps whatever structure the model gave it. */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 7px; }
.prose ul, .prose ol { margin: 5px 0 7px; padding-left: 20px; display: grid; gap: 4px; }
.prose li { line-height: 1.6; }
.prose li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; }
.prose code, .finding-detail code { font-family: var(--mono); font-size: 11.5px; background: var(--surface-3); border-radius: 3px; padding: 0 4px; }
.prose strong, .finding-detail strong { color: var(--text); font-weight: 600; }
.prose em, .finding-detail em { font-style: normal; color: var(--text); }
.next-step .prose p { margin: 0 0 5px; }

details.trace { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
details.trace > summary { cursor: pointer; list-style: none; padding: 8px 12px; font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
details.trace > summary::-webkit-details-marker { display: none; }
details.trace > summary::before { content: "▸"; color: var(--text-3); font-size: 9px; }
details.trace[open] > summary::before { content: "▾"; }
details.trace > summary:hover { color: var(--text); }
.trace-count { margin-left: auto; font: 600 9.5px/1.6 var(--mono); color: var(--text-3); border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; }
details.trace.limits > summary { color: var(--risk-medium); }
.limit-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 12px; color: var(--text-2); }
.limit-list li { padding-left: 13px; position: relative; line-height: 1.6; }
.limit-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 1px; background: var(--risk-medium); }
.trace-body { border-top: 1px solid var(--border); padding: 4px 12px 12px; }
.trace-agent { padding: 11px 0; border-bottom: 1px solid var(--border); }
.trace-agent:last-child { border-bottom: 0; padding-bottom: 0; }
.trace-agent-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.trace-agent-head strong { font-size: 12px; font-weight: 600; }
.risk-chip { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; border: 1px solid currentColor; }
.trace-agent > p { font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; }
.trace-findings { font-size: 12.5px; display: grid; gap: 5px; margin-bottom: 9px; }
.trace-findings b { font-weight: 600; }
.cite { display: inline-flex; gap: 3px; margin-left: 4px; }
.cite span { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
.trace-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trace-cols h4 { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.trace-cols ul { font-size: 12px; color: var(--text-2); display: grid; gap: 3px; }
.trace-cols p { font-size: 12px; color: var(--text-3); }
.msg-note { font-size: 10.5px; color: var(--text-3); margin-top: 7px; }

.typing { display: grid; grid-template-columns: 24px 1fr; gap: 11px; margin-bottom: 20px; }
.typing-body { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); height: 24px; }
.typing-body i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: blink 1.3s infinite; }
.typing-body i:nth-child(2) { animation-delay: .18s; }
.typing-body i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* -------------------------------------------------------------- composer */

.composer-wrap { flex: 0 0 auto; border-top: 1px solid var(--border); background: var(--surface); padding: 12px 22px 10px; }
.composer { max-width: 800px; margin: 0 auto; position: relative; }

/* One container with a uniform radius. The gem row lives inside it, so no
   corner ever has to square off to meet an attached panel. */
.composer-box {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-2); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.composer-box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); box-shadow: 0 0 0 3px var(--accent-soft); }

.gem-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; flex-wrap: wrap; }
.gem-row .gem-icon { width: 18px; height: 18px; font-size: 8px; }
.gem-row-name { font-size: 11.5px; font-weight: 600; }
.gem-row code { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.facts-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px;
  background: var(--surface); color: var(--text-2); font-size: 10.5px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.facts-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.facts-toggle.complete { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.gem-drop { border: 0; background: transparent; color: var(--text-3); cursor: pointer; padding: 2px; display: grid; place-items: center; border-radius: 4px; }
.gem-drop:hover { color: var(--text); background: var(--surface-3); }
.gem-drop svg { width: 13px; height: 13px; }
.facts-panel { flex: 1 0 100%; padding-top: 7px; }
.facts-panel ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.facts-panel li { font-size: 10.5px; color: var(--text-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; background: var(--surface); }
.facts-panel li.met { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.facts-panel li.met::before { content: "✓ "; }
.facts-sources { margin-top: 6px; font-size: 10px; color: var(--text-3); }

.composer textarea { width: 100%; min-height: 56px; max-height: 200px; resize: none; border: 0; background: transparent; padding: 10px 12px 4px; outline: none; font-size: 13px; display: block; }
.composer textarea::placeholder { color: var(--text-3); }
.composer-foot { display: flex; align-items: center; gap: 8px; padding: 4px 8px 7px 12px; }
.route-hint { flex: 1; display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-3); min-width: 0; flex-wrap: wrap; }
.route-hint .route-tag { border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; color: var(--text-2); }
.slash-hint { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.send-btn { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.send-btn:disabled { opacity: .4; cursor: default; }
.send-btn svg { width: 14px; height: 14px; }
.composer-note { max-width: 800px; margin: 7px auto 0; font-size: 10.5px; color: var(--text-3); text-align: center; }

/* --------------------------------------------------------- slash palette */

.palette { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 40; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 14px 36px rgba(0,0,0,.36); max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
html[data-theme="light"] .palette { box-shadow: 0 14px 36px rgba(0,0,0,.14); }
.palette-group { padding: 4px 0; border-bottom: 1px solid var(--border); }
.palette-group:last-child { border-bottom: 0; }
.palette-group-label { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 5px 11px 3px; }
.palette-item { width: 100%; display: grid; grid-template-columns: 22px 1fr auto; gap: 9px; align-items: center; padding: 7px 11px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.palette-item:hover, .palette-item.active { background: var(--surface-2); }
.palette-item.active { box-shadow: inset 2px 0 0 var(--accent); }
.palette-item strong { display: block; font-size: 12.5px; font-weight: 600; }
.palette-item small { display: block; font-size: 11px; color: var(--text-3); }
.palette-item code { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.palette-empty { padding: 16px 12px; font-size: 12px; color: var(--text-3); text-align: center; }
.palette-foot { padding: 6px 11px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-3); display: flex; gap: 12px; }

/* --------------------------------------------------------------- evidence */

.evidence { border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.evidence-head { height: var(--bar-h); flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.evidence-head h2 { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.count-badge { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-3); border: 1px solid var(--border); border-radius: 10px; padding: 0 6px; }
.evidence-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 8px; display: grid; gap: 6px; align-content: start; }
.evidence-empty { padding: 22px 16px; font-size: 11.5px; color: var(--text-3); text-align: center; line-height: 1.6; }
.source-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 10px; background: var(--surface); }
.source-card .authority { font-size: 10px; color: var(--text-3); margin-bottom: 3px; }
.source-card a { font-size: 12px; font-weight: 500; text-decoration: none; line-height: 1.45; display: block; }
.source-card a:hover { color: var(--accent-text); }
.source-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10px; color: var(--text-3); }
.source-status { border-radius: 3px; padding: 0 5px; border: 1px solid currentColor; }
.source-status.live { color: var(--accent-text); }
.source-status.metadata_only, .source-status.not_fetched { color: var(--text-3); }
.source-status.unavailable { color: var(--risk-high); }

/* ---------------------------------------------------------------- dialogs */

dialog { border: 0; padding: 0; background: transparent; color: inherit; max-width: 100vw; max-height: 100vh; }
dialog::backdrop { background: rgba(0,0,0,.55); }
.card { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); padding: 18px; }
.card-wide { width: min(660px, calc(100vw - 32px)); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.card-head h2 { font-size: 15px; font-weight: 600; }
.card-intro { font-size: 12px; color: var(--text-2); margin-bottom: 14px; }

.field { display: block; margin-bottom: 11px; }
.field > span { display: block; font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
.field input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); outline: none; }
.field input:focus { border-color: var(--accent); }
.pw { position: relative; display: block; }
.pw input { padding-right: 54px; }
.pw button { position: absolute; right: 5px; top: 4px; height: 24px; border: 0; background: transparent; color: var(--text-3); font-size: 11px; cursor: pointer; }

.note { display: flex; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 11.5px; color: var(--text-2); margin-bottom: 12px; }
.note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--text-3); }
.note-warn { border-color: color-mix(in srgb, var(--risk-medium) 45%, var(--border)); background: color-mix(in srgb, var(--risk-medium) 9%, var(--surface-2)); color: var(--text-1); }
.note-warn svg { color: var(--risk-medium); }
.status-line { font-size: 11.5px; margin-bottom: 10px; min-height: 16px; color: var(--text-2); }
.status-line.ok { color: var(--accent-text); }
.status-line.err { color: var(--risk-high); }
.card-actions { display: flex; justify-content: flex-end; gap: 7px; }
.btn { height: 30px; padding: 0 13px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: transparent; cursor: pointer; font-size: 12px; }
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }

.gem-detail-head { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; margin-bottom: 14px; }
.gem-detail-head h2 { font-size: 15px; font-weight: 600; }
.gem-detail-head code { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.gem-detail-head p { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.gem-spec { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.gem-spec-row { display: grid; grid-template-columns: 104px 1fr; border-bottom: 1px solid var(--border); }
.gem-spec-row:last-child { border-bottom: 0; }
.gem-spec-row dt { padding: 9px 11px; font-size: 11px; color: var(--text-3); background: var(--surface-2); }
.gem-spec-row dd { margin: 0; padding: 9px 11px; font-size: 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 10.5px; border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; color: var(--text-2); }
.chip.mono { font-family: var(--mono); font-size: 10px; }

.scenario-list { display: grid; gap: 5px; max-height: 50vh; overflow-y: auto; scrollbar-width: thin; }
.scenario-btn { display: grid; grid-template-columns: 26px 1fr; gap: 10px; text-align: left; cursor: pointer; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: inherit; }
.scenario-btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.scenario-btn .gem-icon { width: 26px; height: 26px; font-size: 9px; }
.scenario-btn strong { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.scenario-btn small { display: block; font-size: 11px; color: var(--text-3); }
.filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.filter-btn { height: 26px; padding: 0 9px; font-size: 11px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-2); cursor: pointer; }
.filter-btn.active { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px); background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text); padding: 8px 14px; border-radius: var(--radius); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 90; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 45; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .app .evidence { display: none; }
  .gem-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app, .app.no-evidence { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .app.drawer-open .sidebar { transform: none; }
  .app.rail { --rail-w: 240px; }
  .drawer-btn { display: grid; }
  .trace-cols { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- streaming stages */

/* Stage feedback while the analysis runs. The point is that the wait is
   legible: which agents were picked, what was retrieved, what each specialist
   concluded — reported as it lands rather than after everything finishes. */
/* One line naming the phase in flight, not a checklist of the whole run — the
   flow rail is the progress display. */
.live-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; color: var(--text-2); }
.live-steps:empty { display: none; }
.live-steps .tick { width: 10px; height: 10px; flex: 0 0 auto; border: 1px solid var(--accent); border-radius: 50%; position: relative; }
.live-steps .tick::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-steps .tick::after { animation: none; opacity: .8; } }

.live-note { font-size: 11.5px; color: var(--text-3); margin: -4px 0 10px; }
.live-agents { display: grid; gap: 8px; }
.live-agent { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; animation: rise .18s ease-out; }
.live-agent p { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
@keyframes rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-agent { animation: none; } }

/* ==========================================================================
   Data coverage page. Its own layout, but built from the same tokens so the
   two pages read as one product. These rules were lost when the workbench was
   restyled, which left this page unstyled.
   ========================================================================== */

.coverage-page { overflow: auto; }
.coverage-page .topbar {
  height: var(--bar-h); display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 20;
}
.coverage-page .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.coverage-page .brand strong { display: block; font-size: 12.5px; font-weight: 600; }
.coverage-page .brand small { display: block; font-size: 10px; color: var(--text-3); }
.coverage-page .top-actions { display: flex; align-items: center; gap: 7px; }
.settings-button, .coverage-back {
  height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 12px; text-decoration: none;
}
.settings-button:hover, .coverage-back:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.settings-button svg, .coverage-back svg { width: 14px; height: 14px; }
.segmented { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.segmented-btn { width: 28px; height: 26px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: 11px; }
.segmented-btn.active { background: var(--surface-3); color: var(--text); }
.icon-button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-2); cursor: pointer; }
.icon-button:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.icon-button svg { width: 14px; height: 14px; }

.coverage-shell { max-width: 1080px; margin: 0 auto; padding: 28px 22px 72px; }
.eyebrow { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.coverage-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.coverage-hero h1 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 6px; }
.coverage-hero p { font-size: 12.5px; color: var(--text-2); max-width: 62ch; }
.coverage-date { text-align: right; font-size: 11px; color: var(--text-3); }
.coverage-date strong { display: block; font-family: var(--mono); font-size: 13px; color: var(--text); margin-top: 3px; }

.coverage-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.coverage-summary article { background: var(--surface); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.summary-icon { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 5px; font: 700 11px/1 var(--mono); }
.summary-icon.live { color: var(--accent-text); background: var(--accent-soft); }
.summary-icon.ready { color: var(--accent-text); background: var(--accent-soft); }
.summary-icon.limited { color: var(--risk-medium); background: rgba(217,154,61,.13); }
.summary-icon.manual { color: var(--text-3); background: var(--surface-3); }
.coverage-summary strong { display: block; font: 600 18px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.coverage-summary span { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }

.coverage-disclosure { display: flex; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-left: 2px solid var(--risk-medium); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); margin-bottom: 20px; }
.coverage-disclosure svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--risk-medium); }
.coverage-disclosure strong { display: block; font-size: 12px; margin-bottom: 3px; }
.coverage-disclosure p { font-size: 11.5px; color: var(--text-2); }

.coverage-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.coverage-search { position: relative; flex: 1 1 240px; display: flex; align-items: center; }
.coverage-search svg { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.coverage-search input { width: 100%; height: 30px; padding: 0 10px 0 30px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); outline: none; font-size: 12.5px; }
.coverage-search input:focus { border-color: var(--accent); }
.coverage-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-button { height: 30px; padding: 0 11px; font-size: 11.5px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-2); cursor: pointer; }
.filter-button:hover { border-color: var(--border-strong); color: var(--text); }
.filter-button.active { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.coverage-select { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); }
.coverage-select select { height: 30px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-size: 12px; }

.coverage-list-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.coverage-list-head h2 { font-size: 14px; font-weight: 600; }
.coverage-list-head p { font-size: 11.5px; color: var(--text-3); margin-top: 3px; max-width: 70ch; }
.coverage-list-head .count-badge { margin-left: auto; }

.registry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.registry-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.registry-card-head h3 { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.registry-card-head p { font-size: 11px; color: var(--text-3); }
.registry-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.module-tag, .adapter-badge, .warning-badge {
  font: 500 10px/1.7 var(--mono); border-radius: 3px; padding: 0 6px;
  border: 1px solid var(--border); color: var(--text-2); white-space: nowrap;
}
.module-tag.module-trade { color: #6aa9e0; border-color: rgba(106,169,224,.4); }
.module-tag.module-product { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.module-tag.module-tpdd { color: #b48ce0; border-color: rgba(180,140,224,.4); }
.adapter-badge.ready { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.adapter-badge.limited { color: var(--risk-medium); border-color: rgba(217,154,61,.45); }
.adapter-badge.manual { color: var(--text-3); }
.warning-badge { color: var(--risk-medium); border-color: rgba(217,154,61,.45); }

.registry-fields { display: grid; gap: 6px; font-size: 11.5px; }
.registry-fields > div { display: grid; grid-template-columns: 76px 1fr; gap: 9px; }
.registry-fields dt, .registry-fields .k { color: var(--text-3); font-size: 10.5px; }
.registry-fields .v { color: var(--text-2); min-width: 0; word-break: break-word; }

.sync-panel { border-top: 1px solid var(--border); padding-top: 10px; display: grid; gap: 8px; }
.sync-details { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.sync-success .sync-dot, .sync-dot.sync-success { background: var(--accent-text); }
.sync-failed .sync-dot, .sync-dot.sync-failed { background: var(--risk-high); }
.sync-refresh_failed .sync-dot { background: var(--risk-medium); }
.sync-syncing .sync-dot, .sync-dot.sync-syncing { background: var(--risk-medium); }
.sync-fallback_snapshot .sync-dot, .sync-dot.sync-fallback_snapshot { background: var(--risk-medium); }
.sync-error { font-family: var(--mono); font-size: 10px; color: var(--risk-high); word-break: break-word; }
.source-sync-button { height: 26px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--text-2); cursor: pointer; font-size: 11.5px; justify-self: start; }
.source-sync-button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.source-sync-button:disabled { opacity: .45; cursor: default; }
.official-source-link { font-size: 11.5px; color: var(--accent-text); text-decoration: none; }
.official-source-link:hover { text-decoration: underline; }
.registry-empty { padding: 40px 16px; text-align: center; font-size: 12.5px; color: var(--text-3); }

@media (max-width: 640px) {
  .coverage-hero { flex-direction: column; }
  .coverage-date { text-align: left; }
  .registry-grid { grid-template-columns: 1fr; }
}
.coverage-state { font: 500 10px/1.7 var(--mono); border: 1px solid var(--border); border-radius: 3px; padding: 0 6px; color: var(--text-2); white-space: nowrap; }
.coverage-state.state-structured_snapshot, .coverage-state.state-verified_lookup { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.coverage-state.state-sample_snapshot, .coverage-state.state-query_context { color: var(--risk-medium); border-color: rgba(217,154,61,.45); }
.coverage-state.state-planned, .coverage-state.state-manual { color: var(--text-3); }
.registry-details { margin: 0; padding: 0; display: grid; gap: 6px; font-size: 11.5px; }
.registry-details > div { display: grid; grid-template-columns: 76px 1fr; gap: 9px; }
.registry-details dt { color: var(--text-3); font-size: 10.5px; }
.registry-details dd { margin: 0; color: var(--text-2); min-width: 0; word-break: break-word; }
/* An archived copy is real captured text, but not a live retrieval; a
   citation-only source was never fetched because its publisher refuses
   automated access. Neither is a failure, and neither is "live". */
.source-status.archived { color: var(--risk-medium); }
.source-status.citation_only { color: var(--text-3); }

/* Streamed specialist reasoning. Monospace and a muted tone mark it as work in
   progress rather than a conclusion — it is replaced by the finished card. */
.live-agent.thinking { border-style: dashed; }
.stream-text {
  font: 400 11.5px/1.75 var(--mono);
  color: var(--text-2); white-space: pre-wrap; margin-top: 6px;
  max-height: 190px; overflow-y: auto; scrollbar-width: thin;
}
.stream-text:empty::after { content: "…"; color: var(--text-3); }
.thinking-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .thinking-dot { animation: none; opacity: .7; } }

/* ==========================================================================
   In-app guide. Same tokens as the workbench; a register layout with a label
   gutter, so it reads as documentation rather than another dashboard.
   ========================================================================== */

.guide-shell { max-width: 940px; margin: 0 auto; padding: 32px 22px 80px; }
.guide-masthead { padding-bottom: 26px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.guide-masthead h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.guide-lead { font-size: 14px; color: var(--text); max-width: 64ch; }
.scope-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.scope-row span { font: 500 11px/1 var(--mono); border: 1px solid var(--border); border-radius: 3px; padding: 5px 9px; color: var(--text-2); }

.guide-reg { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 30px; border-top: 1px solid var(--border); padding: 30px 0; }
.guide-reg:first-of-type { border-top: 0; }
.guide-gutter { font: 600 10px/1.7 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); padding-top: 4px; }
.guide-body { min-width: 0; }
.guide-body h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 11px; }
.guide-body h3 { font-size: 13px; font-weight: 600; margin: 22px 0 7px; }
.guide-body p { font-size: 13px; color: var(--text-2); max-width: 66ch; margin-bottom: 12px; }
.guide-note { font-size: 12px; color: var(--text-3); }
.guide-note a { color: var(--accent-text); }
.guide-list { margin: 0 0 12px; padding-left: 18px; font-size: 12.5px; color: var(--text-2); display: grid; gap: 6px; max-width: 66ch; }
.guide-list li::marker { color: var(--text-3); }

.guide-figures { margin-bottom: 6px; }
.guide-figures article { justify-content: flex-start; }
.guide-figures strong.is-warn { color: var(--risk-medium); }

.status-table { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.status-table > div { background: var(--surface); padding: 9px 12px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 12.5px; color: var(--text-2); }
.status-pill { font: 500 10.5px/1.7 var(--mono); border: 1px solid currentColor; border-radius: 3px; padding: 0 6px; justify-self: start; }
.status-pill.ok { color: var(--accent-text); }
.status-pill.warn { color: var(--risk-medium); }
.status-pill.crit { color: var(--risk-high); }
.status-pill.muted { color: var(--text-3); }

.guide-gems { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; margin-bottom: 6px; }
.guide-gems article { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 11px 12px; }
.guide-gem-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.guide-gem-head strong { font-size: 12.5px; font-weight: 600; }
.guide-gem-head code { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.guide-gems p { font-size: 11.5px; color: var(--text-2); margin-bottom: 7px; }
.guide-gem-meta { font: 400 10.5px/1.6 var(--mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.guide-gem-meta .warn { color: var(--risk-medium); }

.verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 12px; margin-bottom: 12px; }
.verdict { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.verdict > header { padding: 10px 13px; border-bottom: 1px solid var(--border); font: 500 11.5px/1.6 var(--mono); color: var(--text-2); word-break: break-word; }
.verdict-out { padding: 11px 13px; display: grid; gap: 9px; font-size: 12.5px; }
.verdict-label { display: block; font: 600 9.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.verdict-call { font-weight: 600; }
.verdict.fp .verdict-call { color: var(--risk-medium); }
.verdict.esc .verdict-call { color: var(--risk-high); }
.cmp { display: grid; gap: 3px; font: 400 11px/1.7 var(--mono); }
.cmp > div { display: grid; grid-template-columns: 58px 44px minmax(0, 1fr); gap: 8px; }
.cmp .k { color: var(--text-3); }
.cmp .agree { color: var(--accent-text); }
.cmp .conflict { color: var(--risk-high); }
.cmp .v { color: var(--text-2); word-break: break-word; }

.guide-limit { border-left: 2px solid var(--risk-high); background: rgba(217,83,79,.07); border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 14px; margin-bottom: 6px; }
.guide-limit p { color: var(--text); margin-bottom: 9px; font-size: 12.5px; }
.guide-limit p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .guide-reg { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .guide-gutter { padding-top: 0; }
}
.stream-notice { color: var(--risk-medium); }

/* ---------------------------------------------------- the argument chain */

details.trace.reasoning > summary { color: var(--text); font-weight: 600; }
.rsteps { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 14px; counter-reset: rstep; }
.rstep { position: relative; padding-left: 22px; }
.rstep::before {
  counter-increment: rstep; content: counter(rstep);
  position: absolute; left: 0; top: 1px; width: 16px; height: 16px;
  display: grid; place-items: center; border-radius: 4px;
  font: 600 9.5px/1 var(--mono); color: var(--text-2);
  background: var(--surface-3); border: 1px solid var(--border);
}
/* A hairline spine ties the steps together as one chain. */
.rstep:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 21px; bottom: -14px; width: 1px; background: var(--border); }
.rstep-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.rstep-count { font: 600 9.5px/1.6 var(--mono); color: var(--text-3); border: 1px solid var(--border); border-radius: 8px; padding: 0 5px; }
.rstep-note { font-size: 10.5px; color: var(--risk-medium); margin-top: 5px; }

.rsource-list { display: grid; gap: 3px; }
.rsource { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); }
.rsource code { font-family: var(--mono); font-size: 10.5px; color: var(--text-2); background: var(--surface-2); border-radius: 3px; padding: 0 5px; }
.rsource .prov { color: var(--accent-text); }
.rsource .prov.warn { color: var(--risk-medium); }
.rsource time { font-variant-numeric: tabular-nums; }

.rmatch { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 8px 10px; margin-bottom: 5px; }
.rmatch-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rmatch-head strong { font-size: 12.5px; }
.rmatch-head .alt { font-size: 11.5px; color: var(--text-2); }
.rmatch-head .score { margin-left: auto; font: 500 10.5px/1.6 var(--mono); color: var(--text-3); }
.rmatch-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 10.5px; color: var(--text-3); }
.rmatch-meta code { font-family: var(--mono); background: var(--surface); border-radius: 3px; padding: 0 5px; }
.rmatch-meta a { color: var(--accent-text); text-decoration: none; }
.rmatch-meta a:hover { text-decoration: underline; }

/* The comparison is the argument: each element, its verdict, both values. */
.rverdict { border: 1px solid var(--border); border-left-width: 2px; border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface-2); padding: 9px 11px; margin-bottom: 6px; }
.rverdict.tone-ok { border-left-color: var(--accent); }
.rverdict.tone-warn { border-left-color: var(--risk-medium); }
.rverdict.tone-crit { border-left-color: var(--risk-high); }
.rverdict.tone-muted { border-left-color: var(--border-strong); }
.rverdict-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 7px; }
.rverdict-head code { font-family: var(--mono); font-size: 10px; color: var(--text-3); background: var(--surface); border-radius: 3px; padding: 0 4px; margin-left: 5px; }
.rv-vs { font: 500 10px/1 var(--mono); color: var(--text-3); }
.cmp-table { display: grid; gap: 2px; }
.cmp-row { display: grid; grid-template-columns: 62px 40px minmax(0, 1fr); gap: 9px; align-items: baseline; font-size: 11px; }
.cmp-el { color: var(--text-3); }
.cmp-status { font: 600 10px/1.6 var(--mono); }
.cmp-agree .cmp-status { color: var(--accent-text); }
.cmp-conflict .cmp-status { color: var(--risk-high); }
.cmp-unavailable .cmp-status { color: var(--text-3); }
.cmp-values { font-family: var(--mono); font-size: 10.5px; color: var(--text-2); min-width: 0; word-break: break-word; }
.cmp-values b { color: var(--text); font-weight: 600; }
.cmp-values i { font-style: normal; color: var(--text-3); margin: 0 6px; }
.rverdict-call { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.tone-ok .rverdict-call { color: var(--accent-text); }
.tone-warn .rverdict-call { color: var(--risk-medium); }
.tone-crit .rverdict-call { color: var(--risk-high); }

.rfacts { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.rfacts li { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; line-height: 1.6; }
.rfacts code { font-family: var(--mono); font-size: 10px; color: var(--text-3); background: var(--surface-2); border-radius: 3px; padding: 0 5px; flex: 0 0 auto; }

.next-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: nstep; }
.next-steps li { position: relative; padding-left: 24px; font-size: 13px; line-height: 1.55; }
.next-steps li::before {
  counter-increment: nstep; content: counter(nstep);
  position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
  display: grid; place-items: center; border-radius: 4px;
  font: 600 10px/1 var(--mono); color: #fff; background: var(--accent);
}

/* ------------------------------------------------------------- case list */

.rail-label-spaced { margin-top: 16px; }
.case-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
.case-nav button {
  width: 100%; display: grid; grid-template-columns: 6px 1fr; gap: 9px; align-items: start;
  padding: 6px 7px; border: 0; border-radius: var(--radius);
  background: transparent; text-align: left; cursor: pointer; color: var(--text-2);
}
.case-nav button:hover { background: var(--surface-2); color: var(--text); }
.case-risk { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: currentColor; }
.case-text { min-width: 0; }
.case-q { display: block; font-size: 11.5px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.case-when { display: block; font: 400 9.5px/1.6 var(--mono); color: var(--text-3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.case-empty { font-size: 11px; color: var(--text-3); padding: 4px 7px; }
.app.rail .case-nav .case-text, .app.rail .rail-label-spaced { display: none; }
.app.rail .case-nav button { grid-template-columns: 1fr; justify-items: center; }
.palette-pin { font-size: 12px; color: var(--text-3); padding: 2px 4px; border-radius: 4px; cursor: pointer; line-height: 1; }
.palette-pin:hover { color: var(--accent-text); background: var(--surface-3); }
.palette-pin.on { color: var(--accent-text); }

/* ==========================================================================
   Home figure and source map.
   Both render something true about the system — the route a question takes and
   what the data layer is actually doing — so the visual interest comes from
   the subject rather than from effects laid on top of it.
   ========================================================================== */

.hero-figure {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 30px 1fr 30px auto;
  align-items: center; gap: 0 4px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 8% 50%, var(--accent-soft), transparent 46%),
    var(--surface);
  padding: 16px 18px 26px;
  margin-bottom: 22px;
}
.hf-col { display: grid; gap: 6px; }
.hf-node {
  font: 500 11px/1 var(--mono); white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: 6px 9px; background: var(--surface-2); color: var(--text-2);
}
.hf-agents { grid-template-columns: 1fr; gap: 6px; }
.hf-agent { display: flex; align-items: center; gap: 7px; justify-content: flex-start; }
.hf-agent em { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.lane-product em { background: #6aa9e0; }
.lane-tpdd em { background: #b48ce0; }
.hf-answer { color: var(--text); border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong)); background: var(--accent-soft); }

/* Hairline fan-out and fan-in, so the three lanes read as one route. */
.hf-fan {
  position: relative; align-self: stretch; height: auto;
  display: grid; grid-template-rows: repeat(3, 1fr); gap: 6px;
}
.hf-fan i { align-self: center; height: 1px; background: var(--border-strong); }
/* The spine runs between the first and last line, not the full height: the two
   6px gaps are the only fixed measurements, so a row centre is exactly one
   sixth of what is left. */
.hf-fan::before {
  content: ""; position: absolute; left: 0; width: 1px; background: var(--border-strong);
  top: calc((100% - 12px) / 6); bottom: calc((100% - 12px) / 6);
}
.hf-fan-in::before { left: auto; right: 0; }

/* Real control codes, not lorem — the vernacular of the subject, set faint. */
.hf-codes {
  position: absolute; left: 18px; right: 18px; bottom: 7px;
  font: 400 9.5px/1 var(--mono); letter-spacing: .04em;
  color: var(--text-3); opacity: .5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.source-mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 24px; }
.mosaic-group { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 11px 12px; }
.mosaic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; color: var(--text-3); }
.mosaic-head b { font: 600 11px/1 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.mosaic-tiles { display: flex; flex-wrap: wrap; gap: 3px; }
.tile { width: 13px; height: 13px; border-radius: 2px; border: 1px solid var(--border); background: var(--surface-2); display: block; }
.tile.tone-live { background: var(--accent); border-color: var(--accent); }
.tile.tone-fallback { background: var(--risk-medium); border-color: var(--risk-medium); }
.tile.tone-failed { background: var(--risk-high); border-color: var(--risk-high); }
.tile.tone-syncing { background: var(--risk-medium); border-color: var(--risk-medium); opacity: .55; }
.tile:hover { outline: 1px solid var(--text-3); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .tile.tone-syncing { animation: pulse 1.4s ease-in-out infinite; }
}

@media (max-width: 620px) {
  .hero-figure { grid-template-columns: 1fr; gap: 10px; padding-bottom: 24px; }
  .hf-fan { display: none; }
  .hf-agents { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- the analysis path */

details.analysis-path > summary { color: var(--text); font-weight: 600; flex-wrap: wrap; }
.path-summary { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.ps { font: 600 10px/1.7 var(--mono); border-radius: 3px; padding: 0 6px; white-space: nowrap; }
.ps.ok { color: var(--accent-text); background: var(--accent-soft); }
.ps.warn { color: var(--risk-medium); background: rgba(217,154,61,.13); }
.ps.muted { color: var(--text-3); background: var(--surface-3); }

.path-lane { padding: 10px 0; border-bottom: 1px solid var(--border); }
.path-lane:last-child { border-bottom: 0; padding-bottom: 2px; }
.path-lane-label { font: 600 10px/1.6 var(--mono); letter-spacing: .08em; color: var(--text-3); margin-bottom: 8px; }
.path-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }

.path-step { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; position: relative; }
.step-mark {
  width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center;
  border-radius: 5px; font: 700 10px/1 var(--mono); border: 1px solid currentColor;
}
.path-step.tone-ok .step-mark { color: var(--accent-text); background: var(--accent-soft); }
.path-step.tone-warn .step-mark { color: var(--risk-medium); background: rgba(217,154,61,.11); }
.path-step.tone-muted .step-mark { color: var(--text-3); background: var(--surface-3); }
.path-step.tone-crit .step-mark { color: var(--risk-high); background: rgba(217,83,79,.11); }
/* A spine, so the steps read as a sequence with an order that matters. */
.path-step:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 22px; bottom: -9px; width: 1px; background: var(--border); }

.step-body { min-width: 0; }
.step-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.step-head strong { font-size: 12.5px; font-weight: 600; }
.step-status { font: 600 9.5px/1.7 var(--mono); letter-spacing: .04em; }
.tone-ok .step-status { color: var(--accent-text); }
.tone-warn .step-status { color: var(--risk-medium); }
.tone-muted .step-status { color: var(--text-3); }
.tone-crit .step-status { color: var(--risk-high); }

.step-basis, .step-needs { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }

/* Basis is what the step stands on; needs is what would settle it. The label
   gets its own column so it reads as a tag rather than running into the text —
   and the two are visually distinct, because confusing them is exactly the
   mistake to avoid. */
.step-basis li, .step-needs li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px;
  align-items: baseline; font-size: 11.5px; line-height: 1.65; word-break: break-word;
}
.step-basis li::before, .step-needs li::before {
  font: 600 9px/1.5 var(--mono); letter-spacing: .03em; text-align: center;
  border: 1px solid currentColor; border-radius: 3px; padding: 1px 0; opacity: .85;
}
.step-basis li { color: var(--text-2); }
.step-basis li::before { content: "依据"; color: var(--text-3); }
.step-needs li { color: var(--text-2); }
.step-needs li::before { content: "待补"; color: var(--risk-medium); }
html[lang="en"] .step-basis li, html[lang="en"] .step-needs li { grid-template-columns: 46px minmax(0, 1fr); }
html[lang="en"] .step-basis li::before { content: "BASIS"; font-size: 8px; }
html[lang="en"] .step-needs li::before { content: "NEEDS"; font-size: 8px; }

.action-grid.single { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------- evidence panel collapse */

.evidence-toggle { width: 20px; height: 20px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-3); cursor: pointer; border-radius: 4px; flex: 0 0 auto; }
.evidence-toggle:hover { color: var(--text); background: var(--surface-2); }
.evidence-toggle svg { width: 14px; height: 14px; transition: transform .18s; }
.app:not(.evidence-collapsed) .evidence-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .evidence-toggle svg { transition: none; } }

/* Collapsed keeps the header as a handle, so the panel can be brought back. */
.app.evidence-collapsed { grid-template-columns: var(--rail-w) minmax(0, 1fr) 42px; }
.app.evidence-collapsed .evidence-head { padding: 0 10px; }
.app.evidence-collapsed .evidence-head h2, .app.evidence-collapsed .evidence-head .spacer { display: none; }
.app.evidence-collapsed .evidence-list { display: none; }
.app.evidence-collapsed .count-badge { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); }
.app.evidence-collapsed .evidence { position: relative; }
.app.evidence-collapsed.no-evidence { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

.source-age { font: 500 9.5px/1.6 var(--mono); color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
.source-status.cached { color: var(--accent-text); }
.source-status.cached.stale { color: var(--risk-medium); }
/* A planned step reads as outlined and quiet until it resolves. */
.ps.pending { color: var(--text-3); background: var(--surface-3); }
.path-step.tone-pending .step-mark { color: var(--text-3); background: transparent; border-style: dashed; }
.path-step.tone-pending .step-head strong { color: var(--text-2); font-weight: 500; }
.tone-pending .step-status { color: var(--text-3); }

/* ---------------------------------------------------------- action list */

.plan-block { border-top: 1px solid var(--border); background: var(--surface-2); padding: 12px 16px; }
.plan-hint { font: 400 10px/1.6 var(--mono); color: var(--text-3); margin-left: auto; }
.plan-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.plan-items li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.55; }
.plan-items .marker {
  width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center;
  border-radius: 5px; font: 600 10px/1 var(--mono); font-variant-numeric: tabular-nums;
  color: #fff; background: var(--accent);
}
.plan-items .item-body { min-width: 0; }
/* Naming the step each action unblocks is what turns a list into a plan. */
.unblocks { display: block; font: 400 10.5px/1.6 var(--mono); color: var(--text-3); margin-top: 2px; }
.plan-blocked { font-size: 11.5px; color: var(--text-3); margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); }
.plan-closing { font-size: 12px; color: var(--text-2); margin-top: 8px; }
.plan-extra { margin-top: 9px; }
.plan-extra > summary { cursor: pointer; list-style: none; font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.plan-extra > summary::-webkit-details-marker { display: none; }
.plan-extra > summary::before { content: "▸"; font-size: 9px; }
.plan-extra[open] > summary::before { content: "▾"; }
.plan-extra ul { margin: 7px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }

/* -------------------------------------------------- answering a step inline */

.ps.declared { color: var(--risk-medium); background: rgba(217,154,61,.13); }
/* Declared reads as partial, deliberately: the fact is in, the check is not. */
.path-step.tone-declared .step-mark { color: var(--risk-medium); background: rgba(217,154,61,.11); border-style: dashed; }
.tone-declared .step-status { color: var(--risk-medium); }

.step-inputs { margin-top: 9px; padding: 10px 11px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); display: grid; gap: 8px; }
.si-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: center; }
.si-label { font-size: 11.5px; color: var(--text-2); }
.si-text { height: 28px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); outline: none; font-size: 12px; min-width: 0; }
.si-text:focus { border-color: var(--accent); }
.si-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.si-choice { height: 26px; padding: 0 10px; font: 500 11.5px/1 var(--mono); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-2); cursor: pointer; }
.si-choice:hover { border-color: var(--accent); color: var(--text); }
.si-choice.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.si-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.si-note { font-size: 10.5px; color: var(--risk-medium); }
.si-skipped { display: none; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); }
.si-reopen { border: 0; background: none; padding: 0; font-size: 11.5px; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.step-inputs.skipped { border-style: solid; background: none; padding: 7px 11px; }
.step-inputs.skipped > .si-row, .step-inputs.skipped > .si-actions { display: none; }
.step-inputs.skipped > .si-skipped { display: flex; }

@media (max-width: 620px) { .si-row { grid-template-columns: 1fr; gap: 4px; } }

/* --------------------------------------------------- where the path comes from */

.path-basis { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.pb-label { font: 600 9.5px/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pb-item { font-size: 11.5px; color: var(--text-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 7px; }
.pb-item a { color: var(--accent-text); text-decoration: none; }
.pb-item a:hover { text-decoration: underline; }
.pb-item i { font-style: normal; color: var(--text-3); font-size: 10px; margin-left: 6px; }
/* A derived entry is visibly not an official one. */
.pb-item.derived { border-style: dashed; color: var(--text-3); }

/* The provision a step follows, so "why these steps" has an answer on screen. */
.step-cite { font: 500 9.5px/1.7 var(--mono); color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; white-space: nowrap; cursor: help; }
.step-cite.derived { border-style: dashed; opacity: .8; }
@media (max-width: 620px) { .step-cite { display: none; } }

/* ------------------------------------------------ direct source lookup */

.src-dot { width: 7px; height: 7px; border-radius: 50%; justify-self: center; }
.src-dot.ok { background: var(--accent); }
.src-dot.warn { background: var(--risk-medium); }
.src-count { font: 500 10px/1.6 var(--mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.src-icon { font-size: 12px; color: var(--accent-text); }
.src-meta { font: 400 10px/1.6 var(--mono); color: var(--text-3); margin-left: auto; }
.src-stale { color: var(--risk-medium); }

.rec-list { display: grid; gap: 7px; }
.rec { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; }
.rec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.rec-head strong { font-size: 13px; font-weight: 600; }
.rec-head a { margin-left: auto; font-size: 10.5px; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.rec-head a:hover { text-decoration: underline; }
.rec-fields { margin: 0; display: grid; gap: 3px; }
.rec-fields > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; font-size: 11.5px; }
.rec-fields dt { color: var(--text-3); }
.rec-fields dd { margin: 0; color: var(--text-2); word-break: break-word; }
.rec-snippet { font: 400 11px/1.65 var(--mono); color: var(--text-2); background: var(--surface-2); border-left: 2px solid var(--border-strong); border-radius: 0 3px 3px 0; padding: 6px 9px; margin-top: 7px; }
/* A lookup returns records, never a verdict — the disposition stays visible. */
.rec-warn { margin-top: 7px; font: 500 10.5px/1.6 var(--mono); color: var(--risk-medium); }
.rec-actions { margin-top: 9px; }

.jump-source { border: 1px solid var(--border); background: transparent; color: var(--text-3); border-radius: 3px; font-size: 9.5px; padding: 0 4px; cursor: pointer; margin-left: 3px; }
.jump-source:hover { color: var(--accent-text); border-color: var(--accent); }

/* Detail folded into the step it belongs to, replacing a separate section. */
.step-detail { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.sd-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 11.5px; margin-bottom: 6px; }
.sd-head i { font-style: normal; color: var(--text-3); font-family: var(--mono); font-size: 10px; }
.sd-head code { font-family: var(--mono); font-size: 10px; color: var(--text-3); background: var(--surface); border-radius: 3px; padding: 0 4px; }
.sd-match { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 11.5px; padding: 2px 0; }
.sd-match strong { font-weight: 600; }
.sd-match span { color: var(--text-2); }
.sd-match code { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.sd-match .sd-score { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.sd-match a { font-size: 10.5px; color: var(--accent-text); text-decoration: none; }
.sd-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 11.5px; color: var(--text-2); }
.sd-facts code { font-family: var(--mono); font-size: 10px; color: var(--text-3); background: var(--surface); border-radius: 3px; padding: 0 4px; margin-right: 6px; }

/* Limits qualify the whole path, so they close it rather than sitting apart. */
.path-limits { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border); }
.pl-label { display: flex; align-items: center; gap: 7px; font: 600 10px/1.6 var(--mono); letter-spacing: .08em; color: var(--risk-medium); margin-bottom: 6px; }
.path-limits ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.path-limits li { padding-left: 13px; position: relative; line-height: 1.6; }
.path-limits li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 1px; background: var(--risk-medium); }

.path-templated { font-size: 11.5px; color: var(--risk-medium); padding: 7px 9px; border: 1px dashed color-mix(in srgb, var(--risk-medium) 45%, var(--border)); border-radius: var(--radius); margin-bottom: 10px; }
.source-status.tone-ok { color: var(--accent-text); }
.source-status.tone-warn { color: var(--risk-medium); }
.source-status.tone-crit { color: var(--risk-high); }
.source-status.tone-muted { color: var(--text-3); }
.server-note code { font-family: var(--mono); font-size: 11px; color: var(--accent-text); background: var(--surface-3); border-radius: 3px; padding: 0 5px; }

/* A declaration is evidence added to the answer above, not a new question, so it
   reads as an inline note rather than another turn in the conversation. */

/* Relevance is shown per record: a bar for the score and the terms it did and
   did not answer, so a ranked list can be read rather than trusted. */
.rec-rel { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 10.5px; color: var(--text-3); }
.rr-bar { flex: 0 0 42px; height: 3px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; }
.rr-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--accent); }
.rr-terms b { font: 500 10.5px/1.5 var(--mono); color: var(--accent-text); margin-right: 5px; }
.rr-miss { margin-left: 6px; opacity: 0.7; }
.rec-page { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; font-size: 11.5px; color: var(--text-3); }
.rec-page .btn { height: 26px; padding: 0 10px; font-size: 11.5px; }
.rec-page .btn:disabled { opacity: 0.4; cursor: default; }

/* One timeline: the lane is where its specialist reasons, and a step opens or
   closes by where it sits in the sequence. */
.path-lane.running > .path-lane-label { color: var(--text); }
.path-lane.queued { opacity: 0.62; }
.path-lane .lane-state { margin-left: 6px; font: 400 10.5px/1 var(--mono); color: var(--text-3); text-transform: none; letter-spacing: 0; }
.path-step .step-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.path-step .step-head::after { content: "▸"; margin-left: auto; font-size: 9px; color: var(--text-3); transition: transform 120ms ease; }
.path-step.open .step-head::after { transform: rotate(90deg); }
.path-step.shut > .step-body > .step-detail-wrap { display: none; }
.path-step.shut { opacity: 0.72; }
.path-step.asking { opacity: 1; }
.step-asking { font: 500 10px/1.6 var(--mono); padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.plan-items li.now .item-body { color: var(--text); }
.plan-items li.now .marker { background: var(--accent); border-color: var(--accent); color: #fff; }
.now-chip { display: inline-block; margin-left: 7px; padding: 0 6px; border-radius: 999px; font: 500 10px/1.7 var(--mono); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }

/* A submitted form stays visible as the record of what was supplied, greyed and
   locked, with the values spelled out. */
.step-inputs.submitted { border-style: solid; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.step-inputs.submitted .si-row, .step-inputs.submitted .si-actions { opacity: 0.45; pointer-events: none; }
.si-done { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); }
.sis-label { font: 500 10px/1.7 var(--mono); padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); }
.sis-state { font-size: 10.5px; color: var(--text-3); }
/* While a continuation is in flight the answer stays put and says it is working. */
.msg-assistant.resuming .analysis-path > summary::after { content: "···"; margin-left: 8px; color: var(--accent-text); letter-spacing: 2px; }

/* ---- flow rail: the plan as nodes, so state is answerable at a glance ---- */
.flow-panel { padding: 12px 14px 14px; border-bottom: 1px solid var(--border); }
.flow-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.flow-head h3 { font: 600 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.flow-count { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--text-2); }
.flow-bar { height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; margin-bottom: 12px; }
.fb-fill { display: block; height: 100%; width: var(--pct, 0%); background: var(--accent); transition: width 260ms ease; }
.flow-lane { margin-bottom: 10px; }
.fl-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.fl-label { font-size: 10.5px; color: var(--text-3); }
.fl-progress { margin-left: auto; font: 400 10px/1 var(--mono); color: var(--text-3); }
.flow-lane.running .fl-label { color: var(--accent-text); }
.fl-steps { list-style: none; margin: 0; padding: 0; }
/* The connecting line makes it a flow rather than a list of dots. */
.fl-step { position: relative; padding-left: 2px; }
.fl-step:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 15px; bottom: -3px; width: 1px; background: var(--border); }
.fl-step button { display: flex; align-items: flex-start; gap: 7px; width: 100%; padding: 2px 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.fl-node { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); font: 600 8px/13px var(--mono); text-align: center; color: var(--text-3); position: relative; z-index: 1; }
.fl-text { font-size: 11px; line-height: 1.5; color: var(--text-3); }
.fl-step.done .fl-node { border-color: var(--risk-low); color: var(--risk-low); }
.fl-step.done .fl-text { color: var(--text-2); }
.fl-step.declared .fl-node { border-color: var(--risk-medium); color: var(--risk-medium); }
.fl-step.declared .fl-text { color: var(--text-2); }
.fl-step.blocked .fl-node { border-color: var(--risk-medium); background: color-mix(in srgb, var(--risk-medium) 18%, var(--surface)); color: var(--risk-medium); }
.fl-step.blocked .fl-text { color: var(--text-1); }
.fl-step.review .fl-node { border-color: var(--risk-high); color: var(--risk-high); }
.fl-step.todo .fl-node { border-style: dashed; }
.fl-step.current .fl-node { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.fl-step.current .fl-text { color: var(--text); font-weight: 500; }
.fl-step button:hover .fl-text { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.flow-legend { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border); font: 400 10px/1.6 var(--mono); color: var(--text-3); }
.fl-key.done { color: var(--risk-low); }
.fl-key.blocked { color: var(--risk-medium); }

/* ---- where the path came from ---- */
.path-derivation { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.path-derivation > summary { padding: 7px 10px; font-size: 11.5px; color: var(--text-2); }
.deriv-body { padding: 2px 10px 10px; display: grid; gap: 10px; }
.deriv-flow { padding-top: 8px; border-top: 1px dashed var(--border); }
.deriv-flow:first-child { border-top: 0; padding-top: 0; }
.df-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; font-size: 12px; }
.df-lead { font: 500 10px/1.7 var(--mono); padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.df-steps { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--text-3); }
.df-rows { margin: 0; display: grid; gap: 3px; }
.df-rows > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
.df-rows dt { font-size: 10.5px; color: var(--text-3); }
.df-rows dd { margin: 0; font-size: 11.5px; color: var(--text-2); }
.df-rows code { font: 500 11px/1.5 var(--mono); padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); }
.df-auth { margin-left: 6px; font-size: 10.5px; color: var(--text-3); }
.df-kind { margin-left: 6px; font: 400 10px/1.7 var(--mono); padding: 0 5px; border-radius: 3px; }
.df-kind.official { background: color-mix(in srgb, var(--risk-low) 15%, transparent); color: var(--risk-low); }
.df-kind.derived { background: color-mix(in srgb, var(--risk-medium) 15%, transparent); color: var(--risk-medium); }
.df-official { color: var(--risk-low); }
.df-planned { display: block; color: var(--risk-medium); }
.lane-ahead { margin: 6px 0 0 18px; font-size: 11px; color: var(--text-3); }
.path-step.flash > .step-body { animation: flash-step 1.1s ease; }
@keyframes flash-step { 0%, 100% { background: transparent; } 30% { background: color-mix(in srgb, var(--accent) 12%, transparent); } }
/* One rail, two homes: the right column when there is room, inside the answer
   when the column is hidden. */
.flow-inline { display: none; }
.flow-inline .flow-panel, .flow-inline > * { border: 0; }
@media (max-width: 1180px) {
  .flow-inline { display: block; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
}
.app.evidence-collapsed .flow-panel { display: none; }

/* ---- right panel: two views of one run, as tabs ---- */
.panel-tabs { display: flex; gap: 2px; min-width: 0; flex: 1; }
.panel-tab { display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 30px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-3); font-size: 12px; cursor: pointer; white-space: nowrap; }
.panel-tab:hover { color: var(--text-2); }
.panel-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.panel-tab .count-badge { font: 500 10px/16px var(--mono); }
.panel-tab[aria-selected="false"] .count-badge { opacity: .6; }
/* One tab panel at a time; the flow is what shows unless evidence is chosen. */
.evidence.show-evidence .flow-panel { display: none; }
.evidence:not(.show-evidence) .evidence-list { display: none; }
.flow-panel { border-bottom: 0; overflow-y: auto; }
.app.evidence-collapsed .panel-tabs { display: none; }
/* The tab already carries the title and the count; the inline mirror has no tab,
   so it keeps its own heading. */
#flowPanel .flow-head { display: none; }
#flowPanel .flow-bar { margin-top: 2px; }
/* The blocked step points at the list instead of repeating it. */
.step-needs-link { margin: 4px 0 0 0; }
.step-needs-link button { border: 0; background: none; padding: 0; font: 400 11.5px/1.6 var(--font); color: var(--risk-medium); cursor: pointer; }
.step-needs-link button:hover { text-decoration: underline; text-underline-offset: 2px; }
.plan-items li.flash { animation: flash-step 1.3s ease; border-radius: var(--radius); }

/* ---- conclusion last, and an unfinished analysis says so ---- */
.answer-open { border-color: color-mix(in srgb, var(--risk-medium) 40%, var(--border)); }
.open-head { display: flex; gap: 12px; align-items: flex-start; }
.open-head h3 { font-size: 15px; margin: 0 0 4px; }
.open-lead { margin: 0 0 10px; font-size: 12px; color: var(--text-2); line-height: 1.7; }
.open-head .btn { height: 28px; }
.interim { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 8px; }
.interim > summary { font-size: 11.5px; color: var(--text-3); cursor: pointer; }
.interim-body { padding-top: 8px; }
.interim-body .answer-head h3 { font-size: 14px; }

/* ---- the path is the body of the answer, not a collapsible aside ---- */
.analysis-path { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; margin-bottom: 14px; }
/* The specialist's verdict and findings sit in the lane they belong to. */
.lane-verdict { margin: 2px 0 8px 18px; font-size: 12px; line-height: 1.7; color: var(--text-2); }
.lane-findings { list-style: none; margin: 8px 0 0 18px; padding: 0; display: grid; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.lane-findings li { padding-left: 12px; position: relative; line-height: 1.65; }
.lane-findings li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }
.lane-findings b { color: var(--text); font-weight: 500; }
/* Limits belong with the conclusion they qualify. */
.live-detail { color: var(--text-3); }
.live-detail::before { content: "· "; }
.live-elapsed { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--text-3); }
/* The waiting step is the focal point of an open analysis. */
.step-ask { margin: 8px 0 6px; font-size: 12px; font-weight: 500; color: var(--accent-text); }
.interim { margin-top: 4px; }
.interim > summary { padding: 6px 0; }

/* ---- streamed reasoning: one component, wherever it appears ----
   Sits clear of the content above it, never grows past a readable height, and
   scrolls itself so a long run does not push the rest of the answer away. */
.stream-box { display: none; margin: 10px 0 8px 18px; padding: 8px 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, transparent); border-radius: 0 var(--radius) var(--radius) 0; }
.stream-box.is-live { display: block; }
.sb-who { font: 500 10.5px/1.8 var(--mono); color: var(--accent-text); margin-bottom: 2px; }
.sb-who:empty { display: none; }
.sb-text { max-height: 168px; overflow-y: auto; font-size: 11.5px; line-height: 1.7; color: var(--text-2); white-space: pre-wrap; overscroll-behavior: contain; }
.sb-text:empty { display: none; }
.sb-text::-webkit-scrollbar { width: 4px; }
.sb-text::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
/* The placeholder runs only while nothing has arrived yet. */
.sb-dots { display: none; gap: 4px; padding: 3px 0 1px; }
.stream-box.is-waiting .sb-dots { display: flex; }
.sb-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .35; animation: sb-pulse 1.1s ease-in-out infinite; }
.sb-dots i:nth-child(2) { animation-delay: .18s; }
.sb-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes sb-pulse { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .sb-dots i { animation: none; opacity: .6; } }
/* Inside a submitted form the box aligns with the form, not with the steps. */
.step-inputs .stream-box { margin-left: 0; }

/* ---- the briefing: scopes, the procedure each follows, and its steps ---- */
.briefing { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.bf-lead { margin: 0 0 10px; font-size: 12px; color: var(--text-2); }
.bf-scopes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: scope; }
.bf-scope { padding-left: 22px; position: relative; counter-increment: scope; }
.bf-scope::before { content: counter(scope); position: absolute; left: 0; top: 1px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border-strong); font: 500 9px/14px var(--mono); text-align: center; color: var(--text-3); }
.bf-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.bf-head b { font-weight: 500; }
.bf-why { font-size: 10.5px; color: var(--text-3); }
.bf-why code { font: 500 10.5px/1.5 var(--mono); padding: 0 4px; margin-left: 3px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); }
.bf-std { margin-top: 2px; font-size: 11px; color: var(--text-2); }
.bf-std-label { color: var(--text-3); margin-right: 6px; }
.bf-std a { color: var(--accent-text); }
.bf-std i { margin-left: 6px; font-style: normal; font-size: 10.5px; color: var(--text-3); }
/* The steps as they will be worked through — the same list the flow rail shows. */
.bf-steps { margin: 5px 0 0; padding-left: 18px; display: grid; gap: 1px; font-size: 11.5px; color: var(--text-2); }
.bf-steps li { line-height: 1.65; }
.bf-steps li::marker { color: var(--text-3); font-family: var(--mono); font-size: 10px; }
.bf-tag { margin-left: 6px; font: 400 9.5px/1.6 var(--mono); padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--risk-medium) 15%, transparent); color: var(--risk-medium); }

/* ---- what hangs off a conclusion ----
   The answer box has no padding of its own — its head brings its own — so
   anything appended after it has to bring its own too, or it sits on the frame. */
.answer-extra { padding: 12px 16px 14px; border-top: 1px solid var(--border); }
.ae-label { font-size: 11.5px; font-weight: 500; margin-bottom: 3px; }
.answer-extra.is-limits .ae-label { color: var(--risk-medium); }
.answer-extra.is-suggested .ae-label { color: var(--text-2); }
.ae-note { margin: 0 0 7px; font-size: 10.5px; color: var(--text-3); line-height: 1.6; }
.answer-extra ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.answer-extra li { padding-left: 13px; position: relative; line-height: 1.7; }
.answer-extra li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 1px; background: var(--border-strong); }
.answer-extra.is-limits li::before { background: var(--risk-medium); }
/* Inside the collapsed interim there is no frame, so it aligns with its text. */
.interim-body .answer-extra { padding-left: 0; padding-right: 0; }
.fl-step.na .fl-node { border-style: dotted; color: var(--text-3); }
.fl-step.na .fl-text { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-strong); }
/* What triage removed, stated with the rule that allowed it. */
.bf-triage { list-style: none; margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--risk-low) 7%, transparent); display: grid; gap: 4px; }
.bf-triage li { display: flex; gap: 7px; align-items: baseline; font-size: 11px; color: var(--text-2); line-height: 1.6; }
.bt-mark { color: var(--risk-low); font: 600 11px/1.6 var(--mono); }
.bt-cite { margin-left: auto; padding-left: 10px; font: 400 10px/1.6 var(--mono); color: var(--text-3); white-space: nowrap; }
@media (max-width: 720px) { .bt-cite { display: none; } }
.composer-note.attribution { margin-top: 3px; opacity: .62; }
.source-attribution { margin: 6px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--text-3); }

/* ---- the step being asked, made unmistakable ----
   It is the only thing on the page the reader can act on, and a status chip was
   not enough to say so. */
.path-step.asking > .step-body {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 4px 0 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
}
.path-step.asking .step-head strong { font-size: 13.5px; color: var(--text); }
.path-step.asking .step-mark {
  border-color: var(--accent); color: #fff; background: var(--accent);
  animation: asking-pulse 1.8s ease-in-out infinite;
}
@keyframes asking-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .path-step.asking .step-mark { animation: none; } }
/* And the same step in the rail, so the two panels point at one place. */
.fl-step.current .fl-node { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); background: var(--accent); color: #fff; }
.fl-step.current { position: relative; }
.fl-step.current::after { content: ""; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--accent); }
.fl-step.current .fl-text { color: var(--text); font-weight: 600; }

/* ---- a submitted step is one block, not four ----
   It had become the accent panel of the asking step, inside it the dashed input
   box, inside that the submitted-values row, inside that the streaming box: four
   frames around one short paragraph. The step's panel is the only frame that
   earns its place; everything inside it is now plain content. */
.step-inputs.submitted {
  border: 0; background: none; padding: 0; margin-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding-top: 8px; border-radius: 0;
}
/* The fields themselves have served their purpose once submitted; the values are
   restated in one line below, so showing both is repetition. */
.step-inputs.submitted > .si-row, .step-inputs.submitted > .si-actions { display: none; }
.step-inputs.submitted .si-done { padding: 0; }
.step-inputs.submitted .stream-box {
  border: 0; background: none; border-radius: 0;
  margin: 6px 0 0; padding: 0 0 0 11px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.step-inputs.skipped { border: 0; background: none; padding: 0; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; border-radius: 0; }

/* ---- the rail's current step, made as loud as the body's ----
   A ring on a 15px dot is not enough to find at a glance in a list of seventeen. */
.fl-step.current { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: var(--radius); margin: 2px -6px;
  /* The band extends 6px into the gutter, so the left padding has to give that
     6px back plus the 2px every other step has — otherwise the highlighted step
     is the one that looks misaligned. */
  padding: 3px 6px 3px 8px; }
.fl-step.current::after { left: -6px; top: 3px; bottom: 3px; width: 3px; }
/* Scaled about its own centre, so the centre stays on the column with the rest.
   Pinning the left edge instead — which is what an earlier measurement of
   getBoundingClientRect().left led to — keeps the edges flush and pushes the
   circle visibly right, because a row of circles reads as aligned by centre. */
.fl-step.current .fl-node { transform: scale(1.15); animation: asking-pulse 1.8s ease-in-out infinite; }
.fl-step.current .fl-text { color: var(--text); font-weight: 600; }
/* While the analysis is running on that step the whole row says so. */
.flow-panel .fl-step.current.is-running .fl-text::after { content: "…"; margin-left: 4px; color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .fl-step.current .fl-node { animation: none; } }

/* ---- what does not apply, folded away ---- */
.lane-na { margin: 6px 0 0 18px; }
.lane-na > summary { font-size: 11px; color: var(--text-3); cursor: pointer; list-style: none; }
.lane-na > summary::before { content: "▸ "; font-size: 9px; }
.lane-na[open] > summary::before { content: "▾ "; }
.lane-na ul { list-style: none; margin: 5px 0 0; padding: 0 0 0 12px; display: grid; gap: 4px; font-size: 11px; color: var(--text-3); }
.lane-na b { font-weight: 500; color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--border-strong); }

/* ---- the arrow that says "here" ----
   Inside the step, on the line that states it is waiting. Absolutely positioned
   outside it, it was at the mercy of every ancestor's overflow. */
.step-arrow { display: inline-block; margin-right: 6px; color: var(--accent); animation: point-here 1.4s ease-in-out infinite; }
@keyframes point-here {
  0%, 100% { transform: translateX(-3px); opacity: .5; }
  50% { transform: translateX(2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .step-arrow { animation: none; opacity: .9; } }
/* Once the prompt has been acted on it stops prompting: no arrow, no animation,
   and the line recedes to a caption over the values that were supplied. */
.path-step.answered .step-arrow { display: none; }
.path-step.answered .step-ask { color: var(--text-3); font-weight: 400; font-size: 11px; }
.path-step.answered .step-mark { animation: none; }
/* A standing property of the deployment, stated beside the list it qualifies. */
.case-volatile { margin: 8px 4px 0; font-size: 11px; line-height: 1.5; color: var(--text-3); }
/* .table-wrap was in the guide markup but never styled, so a wide table pushed
   the whole page sideways instead of scrolling inside itself. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { min-width: 100%; }

/* Procedures section: dense tables that have to stay readable on a phone, so
   they scroll inside their own wrapper rather than widening the page. */
.proc-lane { margin-top: 18px; }
.proc-lane h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.proc-lane h4 span { font-size: 11px; font-weight: 400; color: var(--text-3); }
.proc-n { color: var(--text-3); font-variant-numeric: tabular-nums; width: 1%; }
.proc-count { font-variant-numeric: tabular-nums; }
.proc-count span { display: block; font-size: 10px; color: var(--text-3); }
.proc-note { display: block; margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--text-3); }
.proc-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px;
  color: var(--text-3); border: 1px solid color-mix(in srgb, var(--text-3) 40%, transparent); }
/* A failed continuation says so where it failed, not only in a toast that has
   already gone. */
.si-error { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--risk-high); }
.sis-elapsed { font: 500 10.5px/1 var(--mono); color: var(--text-3); font-variant-numeric: tabular-nums; }