/* Earnings Ledger — quiet zinc edition.
   Base tokens from shadcn/ui (light, MIT), zinc + Inter. Colour is
   restrained: one muted accent per agent, a monochrome particle
   field behind, charts that reveal only when their data lands.
   Cards stay white and readable; colour is never the only carrier
   of meaning. */
:root {
  --background: #faf9ff;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --destructive: #dc2626;
  --destructive-bg: #fef2f2;
  --destructive-border: #fecaca;
  --radius: 0.625rem;
  --font-sans: "Inter", ui-sans-system, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --teal: #0f766e; --blue: #1d4ed8; --amber: #b45309; --violet: #6d28d9; --green: #15803d;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ---- Background: CSS mesh + tsParticles canvas (fixed, behind everything) ---- */
#bg-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; }
#bg-particles canvas { width: 100% !important; height: 100% !important; }

.shell { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 32px 24px 64px; }
.page-head { padding: 16px 0 24px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted-foreground); margin: 0 0 8px; }
.page-head h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 10px; }
.page-sub { color: #3f3f46; font-size: 16px; line-height: 1.6; margin: 0; max-width: 760px; }
/* Hero steps: one honest line, arrows carry the order. No pills
   that look clickable but do nothing, no pastel, no gradient. */
.hero-steps { display: flex; flex-wrap: wrap; align-items: center; margin: 16px 0 0; padding: 0; list-style: none; }
.hero-steps li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-foreground); }
.hero-steps li + li::before { content: "→"; margin: 0 10px; }
.hero-steps li strong { color: var(--foreground); font-weight: 600; }

/* ---- Wide 3-column layout: left loop, centre, right charts ---- */
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 20px; }
.rail { display: grid; gap: 16px; align-content: start; }
.rail-left, .rail-right { position: sticky; top: 16px; }
.main-col { min-width: 0; display: grid; gap: 16px; align-content: start; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); padding: 24px; }
.card + .card, article .card + .card { margin-top: 16px; }
.main-col .card + .card { margin-top: 0; }
.card-muted { background: var(--muted); box-shadow: none; }
.card h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
.rail-hint { font-size: 13px; color: var(--muted-foreground); margin: -4px 0 12px; }
.rail-card .list { font-size: 14px; }

.label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.search-row { display: flex; gap: 8px; flex-wrap: wrap; }
.search-row input { flex: 1; min-width: 160px; height: 44px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px); text-transform: uppercase; }
.search-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.btn-primary { height: 44px; padding: 0 20px; font: inherit; font-size: 14px; font-weight: 600; color: var(--primary-foreground); background: var(--primary); border: 1px solid var(--primary); border-radius: calc(var(--radius) - 4px); cursor: pointer; white-space: nowrap; }
.btn-primary:hover { background: #000; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.chips { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.chip { height: 32px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); cursor: pointer; }
.chip:hover { background: var(--muted); }
.hint { font-size: 13px; color: var(--muted-foreground); margin: 12px 0 0; }

/* ---- Handover rail (left rail): a straight line, not a loop ---- */
.baton-rail { display: flex; align-items: flex-start; gap: 0; margin: 14px 0 4px; }
.baton-step { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; }
.baton-node { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--muted-foreground); }
.baton-step[data-agent="scout"] .baton-node { background: #0f766e; }
.baton-step[data-agent="analyst"] .baton-node { background: #1d4ed8; }
.baton-step[data-agent="critic"] .baton-node { background: #b45309; }
.baton-step[data-agent="writer"] .baton-node { background: #6d28d9; }
.baton-step:not(.is-active):not(.is-done) { opacity: 0.55; }
.baton-step.is-active .baton-node { animation: dot-pulse 1.2s ease-in-out infinite; }
.baton-step.is-done .baton-node { background: #15803d; }
.baton-label { font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
.baton-step.is-active .baton-label { color: var(--foreground); }
.baton-conn { flex: 1; height: 2px; background: var(--border); margin: 13px 2px 0; min-width: 8px; }
.baton-conn.is-filled { background: var(--foreground); }
.loop-legend { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.loop-leg { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.loop-leg:hover { background: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-teal { background: var(--teal); } .dot-blue { background: var(--blue); } .dot-amber { background: var(--amber); } .dot-violet { background: var(--violet); }
.loop-status { font-size: 13px; font-weight: 600; margin: 12px 0 8px; }
.handover-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted-foreground); }
.handover-feed li { border-left: 3px solid var(--blue); padding-left: 8px; }
.handover-feed time { font-variant-numeric: tabular-nums; color: var(--foreground); font-weight: 600; }

/* ---- Charts (right rail) ---- */
.chart-card { border-top: 4px solid #1d4ed8; }
.chart-card:nth-of-type(2) { border-top-color: #0f766e; }
.chart-card:nth-of-type(3) { border-top-color: #b45309; }
.chart-wrap { position: relative; min-height: 120px; }
.chart-wrap canvas { width: 100% !important; }
.chart-doughnut { margin-top: 16px; }
.chart-empty { font-size: 13px; color: var(--muted-foreground); margin: 8px 0 0; }
.glance { margin: 0; display: grid; gap: 10px; }
.glance div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.glance div:last-child { border-bottom: none; padding-bottom: 0; }
.glance dt { font-size: 13px; color: var(--muted-foreground); }
.glance dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Existing components (kept, IDs unchanged) ---- */
.log-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.log-list li { font-size: 14px; color: var(--muted-foreground); }
.log-list time { font-variant-numeric: tabular-nums; color: var(--foreground); }
.btn-secondary { height: 36px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 500; color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); cursor: pointer; margin-top: 12px; }
.btn-secondary:hover { background: var(--muted); }
.sk { height: 16px; background: var(--muted); border-radius: 4px; animation: pulse 1.6s ease-in-out infinite; margin-bottom: 12px; }
.sk-title { height: 24px; width: 55%; } .sk-line { width: 100%; } .sk-line.short { width: 65%; margin-bottom: 0; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.alert-error { border: 1px solid var(--destructive-border); background: var(--destructive-bg); border-radius: calc(var(--radius) + 2px); padding: 16px 20px; }
.alert-title { font-weight: 600; font-size: 14px; color: #991b1b; margin: 0 0 4px; }
.alert-msg { font-size: 14px; color: #7f1d1d; margin: 0; white-space: pre-wrap; line-height: 1.6; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: calc(var(--radius) - 4px); border: 1px solid transparent; }
.badge-primary { background: var(--primary); color: var(--primary-foreground); }
.badge-outline { background: var(--card); color: var(--foreground); border-color: var(--border); }
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-beat { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.badge-miss { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.verdict { font-size: 28px; line-height: 1.25; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 24px; max-width: 720px; }
.table-wrap { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 16px 12px 0; vertical-align: top; border-bottom: 1px solid var(--border); }
th { font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
th.num { text-align: right; }
.list { margin: 0; padding-left: 20px; } .list li { margin-bottom: 8px; } .list li:last-child { margin-bottom: 0; }
.muted-list { color: var(--muted-foreground); font-size: 14px; }
.body-text { margin: 0; font-size: 15px; line-height: 1.7; }
.story p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: #3f3f46; } .story p:last-child { margin-bottom: 0; }
.meta { font-size: 13px; color: var(--muted-foreground); margin: 16px 0 0; }
.sources { list-style: none; margin: 0; padding: 0; } .sources li { margin-bottom: 8px; font-size: 14px; } .sources li:last-child { margin-bottom: 0; }
.sources a { color: var(--foreground); text-underline-offset: 4px; } .sources a:hover { text-decoration: underline; }
footer { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 24px; font-size: 13px; line-height: 1.6; color: var(--muted-foreground); }
footer p { margin: 0 0 8px; } footer a { color: var(--foreground); text-underline-offset: 4px; }

/* Progressive agent cards */
.agent-card[data-agent="scout"] { --agent: #0f766e; --agent-tint: #f0fdfa; }
.agent-card[data-agent="analyst"] { --agent: #1d4ed8; --agent-tint: #eff6ff; }
.agent-card[data-agent="critic"] { --agent: #b45309; --agent-tint: #fffbeb; }
.agent-card[data-agent="writer"] { --agent: #6d28d9; --agent-tint: #f5f3ff; }
.conductor { display: flex; align-items: center; gap: 12px; padding: 16px 24px; }
.conductor.is-alert { border-left: 4px solid #b45309; }
.conductor-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted-foreground); flex-shrink: 0; }
.conductor-text { display: flex; flex-direction: column; min-width: 0; }
.conductor-text strong { font-size: 14px; font-weight: 600; } .conductor-text span { font-size: 13px; color: var(--muted-foreground); }
.conductor-time { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); white-space: nowrap; }
.agent-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--agent); border-radius: calc(var(--radius) + 2px); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); padding: 20px 24px; }
.agent-head { display: flex; align-items: flex-start; gap: 12px; }
.agent-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--agent); margin-top: 4px; flex-shrink: 0; }
.agent-card[data-state="working"] .agent-dot { animation: dot-pulse 1.2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
.agent-title { display: flex; flex-direction: column; min-width: 0; }
.agent-title strong { font-size: 15px; font-weight: 600; } .agent-title span { font-size: 13px; color: var(--muted-foreground); }
.agent-status { margin-left: auto; flex-shrink: 0; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; border-radius: calc(var(--radius) - 4px); background: var(--secondary); color: var(--secondary-foreground); }
.agent-card[data-state="working"] .agent-status { background: var(--agent-tint); color: var(--agent); }
.agent-card[data-state="done"] .agent-status { background: #f0fdf4; color: #15803d; }
.agent-card[data-state="revising"] .agent-status { background: #fffbeb; color: #b45309; }
.agent-card[data-state="gate"] .agent-status { background: #fffbeb; color: #b45309; }
.agent-card[data-state="queued"] .agent-status { background: var(--muted); color: var(--muted-foreground); }
.agent-card[data-state="skipped"] .agent-status { background: var(--muted); color: var(--muted-foreground); }
.agent-card[data-state="paused"] .agent-status { background: var(--muted); color: var(--muted-foreground); }
.agent-card[data-state="skipped"] { opacity: 0.7; }
.agent-card[data-state="failed"] .agent-status { background: var(--destructive-bg); color: #991b1b; }
/* Handover lines between ledger rows: filled only on a real handover. */
.handover-line { font-size: 12px; color: var(--muted-foreground); padding: 2px 0 2px 4px; margin: 0 0 12px; }
.agent-time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); white-space: nowrap; padding-top: 3px; }
.agent-accountable { font-size: 13px; color: var(--muted-foreground); margin: 12px 0 0; }
.agent-body { margin-top: 16px; }
.agent-body .table-wrap { margin: 0 -24px; padding: 0 24px; }
.agent-body table { font-size: 13px; }
.agent-waiting { color: var(--muted-foreground); font-size: 14px; margin: 0; }
.agent-filing { font-size: 14px; font-weight: 500; margin: 0 0 12px; }
.agent-note { font-size: 13px; color: var(--muted-foreground); margin: 0 0 12px; }
.agent-pass { font-size: 14px; color: #15803d; margin: 0; }
.agent-fail { font-size: 14px; color: #991b1b; margin: 0 0 12px; }
.agent-body .story p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: #3f3f46; } .agent-body .story p:last-child { margin-bottom: 0; }

.search-results { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search-results[hidden] { display: none; }
.search-match { cursor: pointer; }
.search-empty { font-size: 13px; color: var(--muted-foreground); margin: 0; }

/* Pivot metric tables (Scout card) */
.metric-table { margin: 0 0 20px; } .metric-table:last-child { margin-bottom: 0; }
.metric-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; list-style: none; }
.metric-head::-webkit-details-marker { display: none; }
.metric-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--metric, #71717a); flex: none; }
.metric-unit { font-size: 12px; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.metric-revenue { --metric: #047857; } .metric-opinc { --metric: #1d4ed8; } .metric-eps { --metric: #6d28d9; } .metric-other { --metric: #71717a; }
.metric-table th.latest-col, .metric-table td.latest-col { background: color-mix(in srgb, var(--metric, #71717a) 9%, transparent); }
.metric-table td.latest-col { font-weight: 700; }
.metric-table tbody tr:hover td { background: var(--muted); }
.metric-table tbody tr:hover td.latest-col { background: color-mix(in srgb, var(--metric, #71717a) 16%, transparent); }
.metric-col-head { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.metric-row-label { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.metric-footnote { font-size: 12px; color: var(--muted-foreground); margin: 8px 0 0; }

/* ---- Analyst table (replaces the claim cards) ---- */
.analyst-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.analyst-filter { height: 30px; padding: 0 11px; font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; }
.analyst-filter.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.analyst-sort { height: 30px; font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 0 6px; margin-left: auto; }
.analyst-table-wrap { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
table.analyst-table { font-size: 13.5px; min-width: 560px; }
table.analyst-table th { position: sticky; top: 0; background: #fff; z-index: 1; }
table.analyst-table th.sortable { cursor: pointer; }
table.analyst-table tbody tr { cursor: pointer; }
table.analyst-table tbody tr:hover td { background: #f8fafc; }
table.analyst-table td.metric-cell { font-weight: 600; }
table.analyst-table td.metric-cell .kind-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
table.analyst-table td.period-cell { color: var(--muted-foreground); white-space: nowrap; font-size: 12.5px; }
table.analyst-table td.result-cell { text-align: right; white-space: nowrap; }
.result-pill { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; }
.result-pill.kind-growth { background: #1d4ed8; } .result-pill.kind-margin { background: #6d28d9; }
.result-pill.kind-eps { background: #b45309; } .result-pill.kind-price { background: #0f766e; } .result-pill.kind-other { background: #71717a; }
.result-pill.negative { outline: 2px solid #fecaca; outline-offset: 1px; }
table.analyst-table td.detail-cell { color: #3f3f46; font-size: 13px; }
.formula-row td { background: #f8fafc !important; border-bottom: 1px solid var(--border); }
.formula-row code { font-family: var(--font-mono); font-size: 12px; color: #3f3f46; white-space: normal; word-break: break-word; }
.formula-row[hidden] { display: none; }
.analyst-note { font-size: 12.5px; color: var(--muted-foreground); margin-top: 10px; }

/* Legacy claim blocks (kept only as a fallback render path) */
.claim { border: 1px solid var(--border); border-left: 4px solid var(--claim, #71717a); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.claim:last-child { margin-bottom: 0; }
.claim-growth { --claim: #1d4ed8; } .claim-margin { --claim: #6d28d9; } .claim-eps { --claim: #b45309; } .claim-price { --claim: #0f766e; } .claim-other { --claim: #71717a; }
.claim-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.claim-text { font-weight: 500; font-size: 14px; }
.claim-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--claim); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.claim-derivation { font-size: 13px; color: var(--muted-foreground); margin-top: 6px; }

/* ---- Responsive: rails stack under the centre, in reading order ---- */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .rail-left, .rail-right { position: static; }
  .rail-left { order: 2; } .main-col { order: 1; } .rail-right { order: 3; }
}
@media (max-width: 560px) {
  .shell { padding: 20px 16px 48px; }
  .page-head h1 { font-size: 38px; }
  .verdict { font-size: 23px; }
  .card { padding: 20px 16px; }
  .table-wrap, .analyst-table-wrap { margin: 0 -16px; padding: 0 16px; }
  th, td { padding-right: 12px; }
  .agent-card { padding: 16px; }
  .agent-body .table-wrap { margin: 0 -16px; padding: 0 16px; }
  .conductor { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .baton-step.is-active .baton-node, .agent-card[data-state="working"] .agent-dot { animation: none !important; }
}

/* Recent searches strip (Batch 1 UX): chips row under the search box. */
.recent-searches { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
/* Author display:flex beats the UA [hidden] rule, so a hidden flex
   strip would still show without this (found live: Clear hid the
   keys but the empty strip stayed visible). Same for the picker. */
.recent-searches[hidden], .quarter-picker[hidden] { display: none; }
.recent-searches .label { margin: 0; }
#recent-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#recent-briefing-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#recent-briefings-clear { margin-top: 0; margin-left: auto; }

/* Charts reveal progressively: on first load the rail holds one
   quiet note, not four blank cards. The trend card appears when
   Scout facts land; growth, EPS/margin, and glance appear when
   Analyst claims land. Same rule as the ledger: show output as it
   arrives, never blank placeholders up front. */
.rail-right .chart-card, .rail-right #glance-card { display: none; }
.rail-right.has-facts #chart-trend-card { display: block; }
.rail-right.has-claims #chart-growth-card, .rail-right.has-claims #chart-eps-card, .rail-right.has-claims #glance-card { display: block; }
.rail-right.has-facts #charts-empty-state, .rail-right.has-claims #charts-empty-state { display: none; }
.briefing-actions { margin-bottom: 1rem; }
.briefing-actions .btn-secondary { margin-top: 0; }
.quarter-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.quarter-picker .label { font-size: 13px; color: var(--muted-foreground); }
.quarter-picker .btn-secondary { margin-top: 0; }
.compare-box { margin-top: 1rem; margin-bottom: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.compare-box .label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.compare-box input { width: 100%; height: 44px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px); }
.compare-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.compare-verdict { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.compare-verdict-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#comparison h4 { font-size: 13px; font-weight: 600; color: var(--muted-foreground); margin: 1rem 0 0.5rem; }
#comparison-quarters { font-size: 13px; color: var(--muted-foreground); }
#b-logo { display: inline-flex; }
.logo-img { object-fit: contain; border-radius: 4px; flex: none; }
.logo-chip { width: 20px; height: 20px; }
.logo-header, .logo-verdict { width: 28px; height: 28px; }
.logo-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--muted); color: var(--muted-foreground); font-size: 10px; font-weight: 600; border-radius: 4px; flex: none; }
.logo-header.logo-initials, .logo-verdict.logo-initials { font-size: 12px; }
.search-match { display: inline-flex; align-items: center; gap: 6px; }
.compare-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.compare-table th, .compare-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.compare-table th.num, .compare-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cache-banner { border: 1px solid #e4e4e7; border-radius: 0.625rem; padding: 12px 16px; margin-bottom: 16px; background: #fafafa; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.chart-switch { display: inline-flex; gap: 2px; background: var(--muted); border-radius: calc(var(--radius) - 4px); padding: 2px; margin: 0 0 10px; }
.chart-switch-btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--muted-foreground); background: transparent; border: 0; border-radius: calc(var(--radius) - 6px); padding: 4px 10px; cursor: pointer; }
.chart-switch-btn.is-active { color: var(--foreground); background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }

/* Dark mode (Batch 16): token swap, then overrides for the colours
   the light theme hardcodes instead of tokenizing. Charts get
   their colours from JS (themeColor + Chart.defaults), not here. */
[data-theme="dark"] {
  --background: #09090b; --foreground: #fafafa; --card: #18181b; --card-foreground: #fafafa;
  --muted: #27272a; --muted-foreground: #a1a1aa; --border: #27272a; --input: #3f3f46;
  --primary: #fafafa; --primary-foreground: #09090b; --secondary: #27272a; --secondary-foreground: #fafafa;
  --destructive: #f87171; --destructive-bg: #450a0a; --destructive-border: #7f1d1d;
  --teal: #2dd4bf; --blue: #60a5fa; --amber: #fbbf24; --violet: #a78bfa; --green: #4ade80;
}
.page-head-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.page-head-top .btn-secondary { margin-top: 0; white-space: nowrap; }
[data-theme="dark"] .page-sub, [data-theme="dark"] .story p, [data-theme="dark"] .agent-body .story p { color: #d4d4d8; }
[data-theme="dark"] .btn-primary:hover { background: #e4e4e7; }
[data-theme="dark"] .baton-node { color: #09090b; }
[data-theme="dark"] .loop-leg { background: var(--card); }
[data-theme="dark"] .alert-title { color: #fca5a5; }
[data-theme="dark"] .alert-msg { color: #fecaca; }
[data-theme="dark"] .agent-pass { color: #4ade80; }
[data-theme="dark"] .agent-fail { color: #fca5a5; }
[data-theme="dark"] .agent-card[data-state="failed"] .agent-status { color: #fca5a5; }
[data-theme="dark"] .agent-card[data-state="done"] .agent-status { background: #052e16; color: #4ade80; }
[data-theme="dark"] .agent-card[data-state="revising"] .agent-status, [data-theme="dark"] .agent-card[data-state="gate"] .agent-status { background: #451a03; color: #fbbf24; }
[data-theme="dark"] .agent-card[data-agent="scout"] { --agent-tint: #134e4a; }
[data-theme="dark"] .agent-card[data-agent="analyst"] { --agent-tint: #172554; }
[data-theme="dark"] .agent-card[data-agent="critic"] { --agent-tint: #451a03; }
[data-theme="dark"] .agent-card[data-agent="writer"] { --agent-tint: #2e1065; }
[data-theme="dark"] .cache-banner { background: #27272a; border-color: #3f3f46; }
[data-theme="dark"] .badge-beat { background: #052e16; color: #4ade80; border-color: #14532d; }
[data-theme="dark"] .badge-miss { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }

/* Print (Batch 17): the briefing article is the document. Search,
   rails, workflow UI, and buttons never print; the article, any
   comparison, and the footer disclaimer do. Dark mode is forced
   back to light tokens so print never yields light text on white
   paper — including the dark overrides, which the print rules
   below re-override at equal-or-higher specificity. */
@media print {
  html[data-theme="dark"] {
    --background: #ffffff; --foreground: #000000; --card: #ffffff; --card-foreground: #000000;
    --muted: #f4f4f5; --muted-foreground: #52525b; --border: #d4d4d8; --input: #d4d4d8;
    --primary: #000000; --primary-foreground: #ffffff; --secondary: #f4f4f5; --secondary-foreground: #000000;
  }
  #bg-particles, .search-card, .compare-box, .rail, #agents, #log, #error,
  .briefing-actions, #quarter-picker, .theme-toggle, .cache-banner { display: none !important; }
  .shell { padding: 0; max-width: none; }
  .layout { display: block; margin-top: 0; }
  .page-head .page-sub, .hero-steps { display: none; }
  .card, .agent-card { box-shadow: none; border-color: #d4d4d8; }
  [data-theme="dark"] .story p, [data-theme="dark"] .agent-body .story p { color: #000; }
  [data-theme="dark"] .agent-pass { color: #15803d; }
  [data-theme="dark"] .agent-fail, [data-theme="dark"] .alert-title { color: #991b1b; }
  [data-theme="dark"] .alert-msg { color: #7f1d1d; }
  a { color: inherit; }
}