:root {
  color-scheme: dark light;
  --bg: #0a0a0a;
  --bg-raised: #171717;
  --bg-hover: #1c1c1c;
  --surface: #1c1c1c;
  --surface-hover: #262626;
  --border: #2e2e2e;
  --border-light: #404040;
  --text: #fafafa;
  --text-dim: #d4d4d4;
  --text-muted: #a3a3a3;
  --accent: #1aa8a5;
  --accent-dim: rgba(26, 168, 165, 0.15);
  --accent-border: rgba(26, 168, 165, 0.3);
  --accent-border-strong: rgba(26, 168, 165, 0.4);
  --accent-text: #fafafa;
  --accent-hover: #008a88;
  --green: #34d399;
  --green-dim: rgba(52, 211, 153, 0.12);
  --green-border: rgba(52, 211, 153, 0.2);
  --green-highlight: rgba(52, 211, 153, 0.25);
  --yellow: #fbbf24;
  --yellow-dim: rgba(251, 191, 36, 0.12);
  --red: #f87171;
  --red-dim: rgba(248, 113, 113, 0.12);
  --red-border: rgba(248, 113, 113, 0.2);
  --red-highlight: rgba(248, 113, 113, 0.25);
  --indigo: #818cf8;
  --indigo-dim: rgba(129, 140, 248, 0.12);
  --mono: 'DM Mono', 'SF Mono', monospace;
  --sans: 'Geist', -apple-system, system-ui, sans-serif;
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,0.5);
  --backdrop: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
  --bg: #fafafa;
  --bg-raised: #f5f5f5;
  --bg-hover: #ededed;
  --surface: #ffffff;
  --surface-hover: #f5f5f5;
  --border: #e5e5e5;
  --border-light: #d4d4d4;
  --text: #171717;
  --text-dim: #404040;
  --text-muted: #737373;
  --accent: #006a68;
  --accent-dim: rgba(0, 106, 104, 0.08);
  --accent-border: rgba(0, 106, 104, 0.2);
  --accent-border-strong: rgba(0, 106, 104, 0.3);
  --accent-text: #ffffff;
  --accent-hover: #005453;
  --green: #16a34a;
  --green-dim: rgba(22, 163, 74, 0.08);
  --green-border: rgba(22, 163, 74, 0.15);
  --green-highlight: rgba(22, 163, 74, 0.2);
  --yellow: #ca8a04;
  --yellow-dim: rgba(202, 138, 4, 0.08);
  --red: #dc2626;
  --red-dim: rgba(220, 38, 38, 0.06);
  --red-border: rgba(220, 38, 38, 0.15);
  --red-highlight: rgba(220, 38, 38, 0.2);
  --indigo: #6366f1;
  --indigo-dim: rgba(99, 102, 241, 0.08);
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
  --backdrop: rgba(0, 0, 0, 0.4);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.shell {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.header-left { display: flex; flex-direction: column; gap: 2px; }
.logo {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
}
.logo-dot { color: var(--accent); }
.tagline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-light);
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.3s;
}
.status-dot.green { background: var(--green); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.status-dot.yellow { background: var(--yellow); box-shadow: 0 0 6px rgba(251, 191, 36, 0.3); }
.status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red-highlight); }

.search-area {
  margin-bottom: 24px;
}
.search-box {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
/* Research mode wraps a tall textarea + controls strip — the 3px halo
   wrapping a ~100px-tall panel makes it feel detached. Drop the halo and
   rely on the accent border for focus affordance. */
.search-area[data-mode="research"] .search-box:focus-within {
  box-shadow: none;
}
.search-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.search-box:focus-within .search-icon { color: var(--accent); }
#search-input {
  flex: 1;
  min-width: 0;          /* allow shrink so mode-chip never overflows */
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 12px;
  min-height: 44px;
}
#search-input::placeholder { color: var(--text-muted); }
.search-clear {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.search-clear:hover { color: var(--text); }
.search-clear.visible { display: block; }
.search-clear.visible + .search-mode-toggle + .search-hint { display: none; }

.search-mode-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  transition: all 0.15s;
}
.search-mode-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.search-mode-toggle[data-mode="ask"] {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Segmented control shared (mode + research sub-mode + sources) */
.search-mode-segmented,
.research-submode,
.research-sources {
  display: inline-flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.seg-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  transition: background 0.12s, color 0.12s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  color: var(--accent-text);
  background: var(--accent);
}

/* Research textarea — fills the main row inside .search-box */
.research-textarea {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 12px;
  min-height: 72px;
  resize: none;        /* auto-grow via JS */
  line-height: 1.5;
}
.research-textarea::placeholder { color: var(--text-muted); }

/* Search-box main row — wraps icon + input/textarea + clear + mode chip.
   `position: relative` so the mode-popover anchors here (under the chip) and
   not to the whole search-box (which becomes flex-column in research mode). */
.search-box-main {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  position: relative;
}
.search-area[data-mode="research"] .search-box {
  flex-direction: column;
  align-items: stretch;
  padding: 0 12px;
}
/* In research mode the textarea takes the full width — the mode-chip moves
   into the footer (handled by JS) so no flex space is reserved at the top. */
.search-area[data-mode="research"] .search-box-main {
  align-items: flex-start;
  padding: 4px 4px 0;
}

/* Mode-chip wrapper — pairs the chip and its popover in one positioned unit
   so the popover anchors under the chip wherever the wrap lands (top-right
   in literal/ask, inside the footer in research). */
.mode-chip-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
/* When the wrap lives inside the research footer, right-align it next to
   the depth/source groups. */
.research-footer .mode-chip-wrap { margin-right: 0; }
.hidden { display: none !important; }

/* Research footer — sits inside .search-box below the textarea, separated by
   a hairline divider. Reads as one composed unit, not a separate strip. */
.research-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.research-control-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.research-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Icon submit — compact, accent-filled, lives at footer right */
.research-submit-icon {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 12px 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  flex-shrink: 0;
}
.research-submit-icon:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.research-submit-icon:active { transform: scale(0.97); }
.research-submit-icon svg { display: block; }
.research-submit-label {
  text-transform: lowercase;
}
.research-run-now {
  height: 32px;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.research-run-now:hover {
  color: var(--text);
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

/* Submit + warning popover wrap. Popover floats above the button so it
   never overlaps the keyboard or the submit itself. */
.research-submit-wrap {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.research-warn-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 70;
  width: min(320px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
  animation: fadeIn 0.12s ease;
}
.research-warn-title {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.research-warn-body {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.research-warn-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.research-warn-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.research-warn-btn:hover { color: var(--text); border-color: var(--text-muted); }
.research-warn-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.research-warn-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}
@media (max-width: 700px) {
  /* On mobile the submit is a 26px arrow circle — pin the popover relative
     to the wrap and clamp width so it can't overflow the screen. */
  .research-warn-popover { right: 0; left: auto; max-width: calc(100vw - 24px); }
}

/* Caption under the search box — replaces the paragraph disclaimer */
.research-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.research-quota {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.research-quota.exhausted { color: var(--red); }
.research-caption-note::before {
  content: "·";
  margin-right: 8px;
  color: var(--border-light);
}
.research-caption:has(.research-quota:empty) .research-caption-note::before { content: ""; margin: 0; }
.research-why-wrap {
  position: relative;
  display: inline-block;
}
.research-why {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.research-why:hover { color: var(--accent-hover); }

/* Why popover — matches the mode-picker pattern (anchored under the trigger,
   subtle border, surface bg). Shown on hover or click. */
.research-why-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: min(320px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  letter-spacing: 0;
  text-transform: none;
  animation: fadeIn 0.12s ease;
}
/* On mobile, position fixed and pin near-trigger but viewport-aligned so the
   popover can never overflow either edge regardless of where "Why?" sits in
   the wrapped caption text. */
@media (max-width: 700px) {
  .research-why-popover {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}
.research-why-wrap:hover .research-why-popover,
.research-why[aria-expanded="true"] + .research-why-popover {
  display: flex !important;
}
.research-why-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.research-why-key {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.research-why-val { color: var(--text-dim); }
.research-why-val code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: var(--mono);
}
.research-why-tip {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}
.research-why-tip em { font-style: normal; color: var(--text); font-weight: 500; }

@media (max-width: 700px) {
  .search-area[data-mode="research"] .search-box { padding: 4px 8px 6px; }
  /* Compact footer for mobile: drop the verbose labels, shrink pills, collapse
     mode chip to "R", and shorten source pill copy. Goal: fit mode + depth +
     source + submit on one row at iPhone widths. */
  .research-footer {
    gap: 6px;
    padding: 8px 2px 2px;
    flex-wrap: wrap;
    align-items: center;
  }
  .research-footer .research-submit-icon { margin-left: auto; }
  /* Drop the "depth" / "source" word labels on mobile — pills carry the
     meaning. Group container collapses so pills sit immediately after siblings. */
  .research-control-group { gap: 0; }
  .research-control-group .research-label { display: none; }
  .research-submode,
  .research-sources { padding: 2px; }
  .research-footer .seg-btn {
    font-size: 10px;
    padding: 3px 7px;
    min-height: 22px;
    letter-spacing: 0.01em;
  }
  /* In research mode, the mode-chip moves into the footer. Collapse its label
     to "R" so we save ~50px and the row fits. The popover floats right-anchored
     since the chip lives at the left of the footer. */
  .search-area[data-mode="research"] .mode-chip { padding: 4px 6px; height: 24px; }
  .search-area[data-mode="research"] .mode-chip-label {
    font-size: 0;
    letter-spacing: 0;
  }
  .search-area[data-mode="research"] .mode-chip-label::before {
    content: "R";
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  /* Source pill copy shortens at iPhone widths so the row fits. */
  .research-sources .seg-btn[data-sources="web+priorish"] { font-size: 0; }
  .research-sources .seg-btn[data-sources="web+priorish"]::before {
    content: "web+pr";
    font-size: 10px;
    letter-spacing: 0.01em;
  }
  .research-sources .seg-btn[data-sources="priorish_only"] { font-size: 0; }
  .research-sources .seg-btn[data-sources="priorish_only"]::before {
    content: "pr only";
    font-size: 10px;
    letter-spacing: 0.01em;
  }
  /* Submit collapses to a 26px arrow circle — no label. */
  .research-run-now {
    height: 26px;
    padding: 0 7px;
    font-size: 10px;
  }
  .research-submit-icon {
    height: 26px;
    min-width: 26px;
    width: 26px;
    padding: 0;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .research-submit-label { display: none; }
  .research-submit-icon svg { width: 13px; height: 13px; }
  .research-textarea {
    min-height: 72px;
    padding: 12px 6px 4px;
    font-size: 14px;
  }
  .research-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 10px;
  }
  .research-caption-note::before { content: ""; margin: 0; }
  /* Mode popover: when the chip lives at the LEFT of the research footer,
     anchor the popover to its left edge so it doesn't overflow the viewport
     to the left. */
  .search-area[data-mode="research"] .mode-popover {
    left: 0;
    right: auto;
    width: min(280px, calc(100vw - 56px));
  }
}

/* ── Reports view ───────────────────────────────────────────────────────── */
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.report-card {
  position: relative;
  display: block;
  padding: 12px 44px 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.report-card:hover {
  border-color: var(--accent-border);
  background: var(--surface);
}
.report-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.report-card-meta .badge { flex-shrink: 0; }
.report-card-prompt {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.report-mode {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.report-mode.mode-fast { color: var(--accent); }
.report-mode.mode-max  { color: #c7893f; }
.report-when, .report-dur {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.report-when::before { content: "·"; margin-right: 8px; color: var(--border-light); }
.report-dur::before  { content: "·"; margin-right: 8px; color: var(--border-light); }
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-progress { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.badge-ok       { color: #4a9e4a; background: color-mix(in srgb, #4a9e4a 14%, transparent); }
.badge-err      { color: #c94f3b; background: color-mix(in srgb, #c94f3b 14%, transparent); }
.badge-muted    { color: var(--text-muted); background: var(--bg); }

/* Card delete X — top-right corner, only the X is clickable (not the full
   card area), so the card link still navigates to the report detail. */
.report-card .report-del {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.report-card .report-del:hover {
  color: #c94f3b;
  background: var(--bg-hover);
}

.report-detail { padding: 4px 0; }
.report-back { margin-bottom: 16px; display: inline-block; }
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.report-prompt-full {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.report-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.report-meta .meta-dot { opacity: 0.5; }

.report-progress {
  text-align: center;
  padding: 48px 16px;
}
.report-progress h3 { margin: 16px 0 8px; }
.report-progress .muted { color: var(--text-muted); font-size: 13px; }
.report-progress .spinner { margin: 0 auto; }

.report-plan {
  margin-bottom: 24px;
}
.report-plan-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.report-plan-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.report-plan-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.report-approve {
  color: var(--accent);
  border-color: var(--accent-border);
}
.report-approve:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.report-approve:disabled {
  opacity: 0.55;
  cursor: wait;
}

.report-markdown { font-size: 15px; line-height: 1.6; color: var(--text); }
.report-markdown p { margin: 0 0 16px; }
.report-markdown h2, .report-markdown h3, .report-markdown h4, .report-markdown h5 {
  margin-top: 28px; margin-bottom: 10px; color: var(--text);
}
.report-markdown ul { margin: 0 0 16px 24px; }
.report-markdown li { margin-bottom: 4px; }
.report-markdown .cite-ref {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  margin: 0 1px;
}
.report-markdown .cite-ref:hover { text-decoration: underline; }

.report-citations {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.report-citations h4 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.report-citations ol { margin: 0; padding-left: 24px; }
.report-citations li { margin-bottom: 6px; font-size: 13px; }
.report-citations .cite-num { color: var(--text-muted); font-family: var(--mono); margin-right: 4px; }
.report-citations a { color: var(--text); text-decoration: none; }
.report-citations a:hover { color: var(--accent); text-decoration: underline; }

/* ── Reports sub-navigation (Reports / Trash tabs) ── */
.reports-nav {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.reports-nav-tab {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.reports-nav-tab:hover { color: var(--text); }
.reports-nav-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Conversation count chip on report cards */
.report-conv-chip {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Trash expiry label */
.report-trash-expiry {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--yellow);
  background: var(--yellow-dim);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Trash card variant — block (not a link) with action buttons */
.report-card--trash {
  display: block;
  text-decoration: none;
  cursor: default;
  padding-right: 14px;
}
.report-trash-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.trash-restore {
  font-size: 12px;
  padding: 4px 10px;
  color: var(--accent);
}
.trash-restore:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.trash-purge {
  font-size: 12px;
  padding: 4px 10px;
  color: var(--red);
}
.trash-purge:hover { background: var(--red-dim); }

/* ── Report follow-up conversation panel ── */
.report-conversation {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.report-conv-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.report-conv-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  flex-shrink: 0;
}
.report-conv-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* Conversation turns list */
.conv-turns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.conv-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 0;
}

/* Individual turns */
.conv-turn {
  display: flex;
  flex-direction: column;
}
.conv-turn--user {
  align-items: flex-end;
}
.conv-turn--assistant {
  align-items: flex-start;
}
.conv-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.55;
}
.conv-turn--user .conv-bubble {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-family: var(--sans);
}
.conv-turn--assistant .conv-bubble {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
}
.conv-turn--loading .conv-bubble {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.conv-turn--assistant .conv-bubble p { margin: 0 0 10px; }
.conv-turn--assistant .conv-bubble p:last-child { margin-bottom: 0; }
.conv-turn--assistant .conv-bubble ul { margin: 0 0 10px 18px; }
.conv-turn--assistant .conv-bubble li { margin-bottom: 3px; }
.conv-turn--assistant .conv-bubble strong { color: var(--text); }

/* Conversation input */
.conv-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.conv-input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 12px;
  resize: none;
  transition: border-color 0.12s;
  min-height: 38px;
  max-height: 200px;
}
.conv-input:focus {
  outline: none;
  border-color: var(--accent);
}
.conv-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.conv-input::placeholder { color: var(--text-muted); }
.conv-submit {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #0a0a0a;
  cursor: pointer;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, opacity 0.12s;
  flex-shrink: 0;
  height: 38px;
}
.conv-submit:hover { background: var(--accent-hover); }
.conv-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* Follow-up error message */
.conv-error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--red);
}

.search-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.source-toggles {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.controls-row .temp-control {
  margin-left: auto;
  flex-shrink: 0;
}
.controls-row .temp-control.hidden { display: none; }
.source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  min-height: 36px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  user-select: none;
}
.source-toggle:hover {
  color: var(--text-dim);
  border-color: var(--border-light);
}
.source-toggle.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent-border);
}
.source-toggle:not(.active) .status-dot {
  opacity: 0.5;
}

.temp-control {
  display: flex;
  align-items: center;
  gap: 6px;
}
.temp-control.hidden { display: none; }
.temp-control label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.temp-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.temp-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.temp-control input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--accent-hover);
}
.temp-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
.temp-control input[type="range"]::-moz-range-track {
  background: var(--border);
  height: 4px;
  border-radius: 2px;
  border: none;
}
.temp-value {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  min-width: 20px;
  text-align: right;
}

.as-of-control {
  display: flex;
  align-items: center;
  gap: 6px;
}
.as-of-control label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.date-input-wrap {
  position: relative;
}
.date-input-wrap input[type="text"] {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  min-height: 32px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.date-input-wrap input:focus { border-color: var(--accent); }
.date-input-wrap input::placeholder { color: var(--text-muted); opacity: 0.6; }
.date-resolved {
  position: absolute;
  top: 100%;
  left: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  height: 16px;
  line-height: 16px;
  pointer-events: none;
}
.date-resolved.valid { color: var(--green); }
.date-resolved.invalid { color: var(--red); }

.date-presets {
  display: flex;
  gap: 3px;
}
.date-presets button {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  min-height: 36px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.date-presets button:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.nl-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  animation: fadeIn 0.2s ease;
}
.nl-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: 3px;
}
.nl-preview code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.hidden { display: none !important; }

.mode-tabs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.mode-tabs-list {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.mode-tabs-list::-webkit-scrollbar { display: none; }
.mode-tabs-list > .mode-tab { scroll-snap-align: start; }
/* Right-edge fade affordance — hints at scrollable content */
.mode-tabs::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 1px;
  width: 24px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.mode-tabs.can-scroll-right::after { opacity: 1; }
.mode-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  min-width: 0;
}
.mode-tab {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 10px 20px;
  min-height: 44px;
  background: none;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.mode-tab:hover { color: var(--text-dim); }
.mode-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.view { display: none; }
.view.active { display: block; animation: fadeIn 0.25s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.welcome-state {
  text-align: center;
  padding: 48px 24px;
}
.welcome-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  color: var(--text-muted);
  opacity: 0.4;
}
.welcome-icon svg { width: 100%; height: 100%; }
.welcome-text {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.welcome-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.example-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}
.example-chip {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.example-chip:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}


.results-list { min-width: 0; overflow: hidden; }
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.results-header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.results-count {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.results-as-of {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.results-as-of::before {
  content: '·';
  color: var(--border-light);
  margin-right: 8px;
}

.results-view-toggle {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 2px;
  gap: 2px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.results-view-btn {
  height: 22px;
  min-width: 48px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 22px;
  cursor: pointer;
}
.results-view-btn:hover {
  color: var(--text);
}
.results-view-btn.active {
  background: var(--surface-hover);
  color: var(--accent);
}

.results-graph-shell {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.results-graph-toolbar {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.results-graph-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  white-space: nowrap;
}
.results-graph-stats span {
  color: var(--accent);
}
.results-graph-hint {
  text-align: right;
  overflow-wrap: anywhere;
}
.results-graph {
  height: min(68vh, 720px);
  min-height: 440px;
  width: 100%;
  background:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* Unified fact card — used on search results, provenance top, related facts,
   and blurred teaser. Opt-in variants apply on top (e.g. .derived, .fact-card--primary). */
.result-card,
.fact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s;
  animation: cardIn 0.3s ease both;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.fact-card[data-fact-id] { cursor: pointer; }
.fact-card[data-fact-id]:hover {
  border-color: var(--accent-border);
  background: var(--surface-hover);
}
.fact-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  /* Reserve right-side space for the absolutely-positioned date so badges
     never collide with it when they wrap. */
  padding-right: 76px;
  position: relative;
  min-height: 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 0;
}
.fact-date {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Result-type sections: facts render first, then data points, then source
   passages. The heading separates the grouped envelope's three groups. */
.result-type-heading {
  margin: 18px 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.result-type-tag {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Observation card — the numeric tick. display_value is the earned-color
   monospace headline; the label sits beneath in muted text. */
.observation-card[data-obs-detail],
.passage-card[data-origin-url] { cursor: pointer; }
.observation-card[data-obs-detail]:hover,
.passage-card[data-origin-url]:hover {
  border-color: var(--accent-border);
  background: var(--surface-hover);
}
.observation-value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1.2;
}
.observation-value--lg { font-size: 28px; }
.observation-label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-dim);
}

/* Passage card — original-source span. */
.passage-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}

/* Observation detail series table inside the slide-over panel. */
.obs-series { margin-top: 16px; }
.obs-series-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.obs-series-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.obs-series-table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.obs-series-date { color: var(--text-muted); }
.obs-series-val { text-align: right; color: var(--text); }
/* Knowledge-graph edge block inside a primary fact card. Shown below the
   fact content so the fact reads first, then the graph ref is centered
   with source on top, a clear down-arrow, and target below. */
.fact-graph {
  margin-top: 12px;
  padding: 12px 10px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  line-height: 1.4;
}
.fact-graph-label {
  align-self: stretch;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 4px;
}
.fact-graph .entity-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.fact-graph .entity-link:hover { text-decoration: underline; }
.fact-graph-arrow {
  display: inline-flex;
  color: var(--text-muted);
  line-height: 0;
  margin: 2px 0;
}
.fact-graph-arrow svg { display: block; }
.fact-content {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.fact-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.fact-actions--muted {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
}
.fact-actions--muted a {
  color: var(--text-muted);
  text-decoration: none;
}
.fact-actions--muted a:hover { color: var(--accent); }

/* Saga pointer in provenance — not a card, a tight inline row */
.saga-prov-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-dim);
  margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.saga-prov-row:hover {
  border-color: var(--accent-border);
  background: var(--surface-hover);
  color: var(--text);
}
.saga-prov-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saga-prov-arrow {
  font-family: var(--mono);
  color: var(--text-muted);
  flex-shrink: 0;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 4px;
  min-width: 0;
  overflow-wrap: break-word;
}
.result-content[data-truncated="true"] {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.result-content[data-truncated="false"] {
  display: block;
}

.result-content mark {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 1px 3px;
  border-radius: 2px;
}

.truncate-toggle {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  margin-bottom: 6px;
  transition: color 0.15s;
}
.truncate-toggle:hover { color: var(--accent); }

.result-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.source-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--accent);
  background: var(--accent-dim);
}
.cluster-badge {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
  margin-left: 4px;
}
.source-badge[data-source="alfred"] {
  color: var(--green);
  background: var(--green-dim);
}
.source-badge[data-source="fed"] {
  color: var(--indigo);
  background: var(--indigo-dim);
}
.source-badge[data-source="polymarket"] {
  color: var(--yellow);
  background: var(--yellow-dim);
}
.source-badge[data-source="kalshi"] {
  color: var(--red);
  background: var(--red-dim);
}
.meta-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-border-strong);
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.meta-link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
}
.meta-sep { color: var(--border); }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.page-btn {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.page-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}
.page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.page-info {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

.action-btn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 9px 20px;
  min-height: 36px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.action-btn:hover { background: var(--accent-hover); }

.saga-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saga-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  animation: cardIn 0.3s ease both;
  margin-bottom: 8px;
}
.saga-card:hover {
  border-color: var(--accent-border);
  background: var(--surface-hover);
}
.saga-card-body {
  flex: 1;
  min-width: 0;
}
.saga-card-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.saga-card-date { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .saga-card-date { margin-left: 0; }
}
.saga-card-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}
.saga-card-arrow {
  color: var(--text-muted);
  font-size: 16px;
  flex-shrink: 0;
}

.saga-back-btn {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  min-height: 32px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  margin-bottom: 16px;
}
.saga-back-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.saga-timeline-header {
  margin-bottom: 20px;
}
.saga-timeline-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.saga-timeline-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  align-items: center;
}

.saga-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saga-episode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  animation: cardIn 0.3s ease both;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.saga-episode-card[data-fact-id] { cursor: pointer; }
.saga-episode-card[data-fact-id]:hover {
  border-color: var(--accent-border);
  background: var(--surface-hover);
}
.saga-episode-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.saga-episode-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.saga-episode-meta a {
  color: var(--accent);
  text-decoration: none;
}
.saga-episode-meta a:hover { text-decoration: underline; }
.saga-episode-preview {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.saga-episode-preview[data-expanded="true"] {
  display: block;
  -webkit-line-clamp: unset;
}
.result-group-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
  gap: 8px;
}
.group-toggle-btn {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.group-toggle-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}
.group-toggle-btn.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.saga-group {
  margin-bottom: 16px;
}
.saga-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  transition: background 0.15s;
}
.saga-group-header:hover {
  background: var(--bg-hover);
}
.saga-group-header .source-badge { flex-shrink: 0; }
.saga-group-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}
.saga-group-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.saga-group-chevron {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.15s;
}
.saga-group.expanded .saga-group-chevron {
  transform: rotate(90deg);
}
.saga-group-results {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.saga-group-results .result-card {
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin-bottom: 0;
}
.saga-group-results .result-card:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.saga-group-more {
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}
.saga-group-more:hover {
  background: var(--accent-dim);
}

.saga-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fact-meta-top .saga-badge {
  flex: 0 1 auto;
  max-width: min(60%, 360px);
}
.saga-badge:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.provenance-overlay {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  animation: overlayIn 0.2s ease;
}
.provenance-overlay.hidden { display: none !important; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.provenance-panel {
  width: min(600px, 90vw);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  animation: slideIn 0.25s ease;
}
@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.provenance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.provenance-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.provenance-header h3 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.prov-back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.prov-back-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-light);
}

.close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.close-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.provenance-content {
  padding: 20px 24px;
}
.provenance-content .section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 24px;
}
.provenance-content .section-label:first-child { margin-top: 0; }

.prov-episode {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
}
.prov-episode-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.prov-episode-meta a {
  color: var(--accent);
  text-decoration: none;
}
.prov-episode-meta a:hover { text-decoration: underline; }

details {
  margin-top: 6px;
}
details summary {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  min-height: 32px;
  display: flex;
  align-items: center;
}
details summary:hover { color: var(--text-dim); }
.raw-content-scroll {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  background: var(--bg-raised);
  color: var(--text-dim);
  padding: 12px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--border);
}

.prov-chunk-excerpt {
  margin-top: 8px;
}
.prov-action-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.prov-action-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border);
}
.prov-action-btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 500;
}
.prov-action-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}
.prov-action-btn--muted {
  margin-left: auto;
  color: var(--text-muted);
  opacity: 0.75;
  font-size: 10px;
  padding: 4px 10px;
  border-color: transparent;
}
.prov-action-btn--muted:hover {
  opacity: 1;
  border-color: var(--border);
  color: var(--text-dim);
  background: var(--bg);
}
.prov-upgrade-hint {
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 12px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: default;
}
.prov-section-path {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 6px;
}
.prov-chunk-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}
.prov-chunk-highlight {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  background: var(--accent-dim);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
.prov-chunk-context {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 6px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0.6;
  max-height: 120px;
  overflow-y: auto;
}

.evidence-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.evidence-group {
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.evidence-group summary {
  min-height: 44px;
  padding: 10px 12px;
  gap: 10px;
  justify-content: space-between;
  color: var(--text);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  list-style: none;
}
.evidence-group summary::-webkit-details-marker { display: none; }
.evidence-group[open] summary {
  border-bottom: 1px solid var(--border);
}
.evidence-group-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.evidence-group-title {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evidence-group-count {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.evidence-group-body {
  padding: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.evidence-group-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.evidence-group-meta a {
  color: var(--accent);
  text-decoration: none;
}
.evidence-group-meta a:hover {
  text-decoration: underline;
}
.evidence-input-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.evidence-input-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.evidence-input-row:last-child {
  border-bottom: none;
}
.evidence-input-fact {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 6px;
}
.evidence-input-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.evidence-snapshot,
.evidence-audit {
  margin-top: 10px;
}
.evidence-snapshot summary,
.evidence-audit summary {
  min-height: 28px;
  padding: 0;
  color: var(--text-muted);
}
.audit-hash-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.audit-hash-row {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.audit-hash-row:last-child {
  border-bottom: none;
}
.audit-hash-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 4px;
}
.audit-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
}
.audit-hash-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.derived-evidence-more {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

.public-provenance-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.public-flow-arrow {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  color: var(--text-muted);
  overflow: visible;
}
.public-flow-arrow::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 4px;
  width: 1px;
  height: 16px;
  background: var(--border-light);
}
.public-flow-arrow::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.public-flow-step {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.public-source-heading {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.public-evidence-groups {
  margin-top: 0;
}
.public-source-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.public-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.public-source-row:last-child {
  border-bottom: none;
}
.public-source-row > span:nth-child(2) {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.info-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-light);
}
.info-btn svg { width: 16px; height: 16px; }

.info-overlay {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  animation: overlayIn 0.2s ease;
}
.info-overlay.hidden { display: none !important; }

.info-panel {
  width: min(600px, 90vw);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  animation: slideIn 0.25s ease;
}
.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.info-header h3 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.info-content {
  padding: 20px 24px;
}

.info-section {
  margin-bottom: 28px;
}
.info-section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.info-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}
.info-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-raised);
}
.info-source {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.info-source:last-child { border-bottom: none; }
.info-source .source-badge {
  justify-self: start;
  align-self: center;
}
.info-source-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}

.info-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 10px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.info-stat {
  background: var(--bg-raised);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-stat dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.info-stat dd {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin: 0;
}

.info-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.info-feature {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-raised);
}
.info-feature dt {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.info-feature dd {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}
.info-feature dd code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
}
.pricing-card--featured {
  border-color: var(--accent-border-strong);
  background: var(--bg-raised);
}
.pricing-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: 3px;
}
.pricing-price {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.pricing-price--accent {
  color: var(--accent);
}
.pricing-price-period {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 2px;
}
.pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pricing-features li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  padding: 3px 0 3px 14px;
  position: relative;
}
.pricing-features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.7;
}
.pricing-card--featured .pricing-features li::before {
  background: var(--accent);
  opacity: 1;
}
.pricing-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 4px;
}
.pricing-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 12px 0 0;
}
.pricing-waitlist-banner {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pricing-waitlist-banner-text {
  font-size: 13px;
  color: var(--text);
}
.pricing-waitlist-banner-text strong { color: var(--accent); }

.info-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}
.info-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 9px 20px;
  min-height: 36px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.info-cta:hover { background: var(--accent-hover); }
.info-docs-link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-border-strong);
  transition: color 0.15s, border-color 0.15s;
}
.info-docs-link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 13px;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 14px;
}
.empty-state p + p { margin-top: 4px; font-size: 13px; }

.error-state {
  background: var(--red-dim);
  border: 1px solid var(--red-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--red);
  font-size: 13px;
  font-family: var(--mono);
}
.error-state p { margin: 0 0 10px; }
.error-cta {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-family: var(--mono);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.error-cta:hover { background: var(--surface-3); }
.gate-card {
  text-align: center;
  padding: 24px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin-top: 8px;
}
.gate-card p {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.blurred-preview {
  filter: blur(4px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  color: var(--text-muted);
}

.auth-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  min-height: 36px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.auth-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-light); }
.auth-btn.signed-in { color: var(--accent); border-color: var(--accent-border); }
.auth-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.admin-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  text-decoration: none;
}
.admin-link:hover {
  background: var(--bg-hover);
  color: var(--accent);
  border-color: var(--border-light);
}
.admin-link svg { width: 14px; height: 14px; }

.account-overlay {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  animation: overlayIn 0.2s ease;
}
.account-overlay.hidden { display: none !important; }

.account-panel {
  width: min(500px, 90vw);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  animation: slideIn 0.25s ease;
}
.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.account-header h3 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.account-content { padding: 20px 24px; }

.account-section {
  margin-bottom: 28px;
}
.account-section .section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.account-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.plan-tier {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
}
.plan-upgrade-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 12px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.plan-upgrade-btn:hover { background: var(--accent-hover); }
.plan-waitlist-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 12px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.plan-waitlist-btn:hover { background: var(--accent-dim); }
.plan-waitlist-btn:disabled { opacity: 0.6; cursor: default; }

.account-usage {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.usage-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
}
.usage-label { color: var(--text-muted); }
.usage-value { color: var(--text-dim); }

.keys-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.action-btn--sm {
  font-size: 11px;
  padding: 5px 12px;
  min-height: 28px;
}
.key-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 6px;
}
.key-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.key-prefix {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.key-revoke-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--red);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.key-revoke-btn:hover {
  background: var(--red-dim);
  border-color: var(--red-highlight);
}

.new-key-display {
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  animation: fadeIn 0.2s ease;
}
.new-key-value {
  display: flex;
  align-items: center;
  gap: 8px;
}
.new-key-value code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
  flex: 1;
}
.copy-key-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.copy-key-btn:hover { background: var(--accent-hover); }

.sign-out-btn {
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  width: 100%;
}
.sign-out-btn:hover {
  color: var(--red);
  border-color: var(--red-highlight);
  background: var(--red-dim);
}

@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .shell { padding: 20px 14px 60px; }
  /* Tighter tabs so all 5 fit without scroll on iPhone Pro */
  .mode-tab { padding: 10px 12px; font-size: 11px; }
  /* Account button: icon-only on mobile to reclaim space */
  .auth-btn .auth-label { display: none; }
  .auth-btn { padding: 6px; width: 32px; justify-content: center; }
  /* Keep header as a row on mobile so logo (+ tagline) sits on the left
     and the sign-in / info / theme buttons sit on the right, one line. */
  .header { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .header-left { min-width: 0; }
  .header-right { flex-shrink: 0; }
  /* Let the focus slider flex inline with the source pills so it wraps
     naturally into the pill row on small screens instead of sitting on
     its own line with stranded whitespace. display: contents on the
     pills-group lifts each pill into .controls-row as a direct flex
     child, so pills + slider all wrap together as one group. */
  .controls-row {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;  /* override desktop space-between */
  }
  .controls-row .temp-control { margin-left: 0; }
  .source-toggles { display: contents; }
  .mode-tabs { flex-direction: column; align-items: stretch; gap: 8px; }
  .mode-controls { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 12px; }
  .as-of-control { flex-wrap: nowrap; gap: 6px; width: 100%; }
  .as-of-control .date-input-wrap { flex: 1; min-width: 0; }
  .date-presets { flex-wrap: wrap; }
  .date-presets button { min-height: 44px; padding: 8px 10px; }
  .header-right { gap: 8px; }
  .provenance-panel { width: 100vw; }
  .info-panel { width: 100vw; }
  .account-panel { width: 100vw; }
  .pricing-grid { grid-template-columns: 1fr; }
  .info-features-grid { grid-template-columns: 1fr; }
  .info-stats { grid-template-columns: repeat(3, 1fr); }
  .example-chips { gap: 6px; }
  .entity-panel { width: 100vw; }
  .neighbor-row { flex-wrap: wrap; }
  .results-graph-toolbar { align-items: flex-start; flex-direction: column; }
  .results-graph-hint { text-align: left; }
  .results-graph { min-height: 360px; height: 64vh; }
  .prov-action-btn { min-height: 44px; padding: 10px 14px; }
}

.evidence-badge {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: help;
  white-space: nowrap;
  color: var(--text-dim);
  position: relative;
}
.evidence-icon { vertical-align: -1px; margin-right: 2px; }
.evidence-badge[data-basis="primary"] { color: var(--green); border-color: var(--green-border); }
.evidence-badge[data-basis="derived"] { color: var(--text-muted); }
.evidence-badge[data-status="superseded"] { opacity: 0.6; text-decoration: line-through; }
.evidence-badge[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 10px;
  white-space: nowrap;
  color: var(--text-dim);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.05s;
  z-index: 10;
}
.evidence-badge[data-tip]:hover::after,
.evidence-badge[data-tip].evidence-badge--open::after {
  opacity: 1;
}

.entity-overlay {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  z-index: 210;
  display: flex;
  justify-content: flex-end;
  animation: overlayIn 0.2s ease;
}
.entity-overlay.hidden { display: none !important; }
.entity-panel {
  width: min(600px, 90vw);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  animation: slideIn 0.25s ease;
}
.entity-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.entity-panel-header h3 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 48px);
}
.entity-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}
.entity-tab {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 10px 16px;
  background: none;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.entity-tab:hover { color: var(--text-dim); }
.entity-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.entity-content { padding: 20px 24px; }
.neighbor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.neighbor-row:last-child { border-bottom: none; }
.neighbor-row[data-open-fact-id],
.revision-row[data-open-fact-id] {
  cursor: pointer;
}
.neighbor-row[data-open-fact-id]:hover,
.revision-row[data-open-fact-id]:hover {
  background: var(--surface-hover);
  margin-inline: -10px;
  padding-inline: 10px;
}
.neighbor-name {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.neighbor-name:hover { text-decoration: underline; }
.neighbor-type {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.neighbor-fact {
  color: var(--text-dim);
  font-size: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.revision-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.revision-row:last-child { border-bottom: none; }
.revision-fact {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.5;
}
.revision-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.entity-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.entity-link:hover { text-decoration: underline; }

.chain-timeline {
  margin-top: 24px;
}
.chain-step {
  padding-left: 20px;
  margin-bottom: 16px;
  position: relative;
}
.chain-step::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 1;
}
/* Subtle connector between consecutive chain steps — drawn from this step's
   dot down to the next step's dot. Does NOT connect upward to the Fact card.
   A 1px line with a small arrowhead near the bottom indicates the chain
   reads top-to-bottom (each step produced by the next). Mask-driven so the
   line color follows --border-light across light/dark themes. */
.chain-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 14px;
  bottom: -16px;
  width: 8px;
  background-color: var(--border-light);
  --chain-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 8 100'><line x1='4' y1='8' x2='4' y2='100' stroke='black' stroke-width='1'/><path d='M1.5 12 L4 8 L6.5 12' stroke='black' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-image: var(--chain-arrow);
  mask-image: var(--chain-arrow);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 0;
}
.chain-fact {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.5;
}
.chain-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  overflow-wrap: anywhere;
}
.chain-hash {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  cursor: help;
}

.coverage-section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.coverage-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.coverage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  animation: cardIn 0.3s ease both;
}
.coverage-card:hover { border-color: var(--border-light); }
.coverage-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 10px;
}
.coverage-avail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.avail-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
.avail-badge[data-kind="vintage"] { color: var(--green); background: var(--green-dim); border-color: transparent; }
.avail-badge[data-kind="realtime"] { color: var(--accent); background: var(--accent-dim); border-color: transparent; }
.avail-badge[data-kind="revisions"] { color: var(--yellow); background: var(--yellow-dim); border-color: transparent; }
.avail-badge[data-kind="novintage"] { opacity: 0.55; }
.coverage-headline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  margin-bottom: 12px;
}
.coverage-headline-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coverage-headline-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coverage-headline-value--sm { font-size: 13px; color: var(--text-dim); white-space: normal; line-height: 1.35; }
.coverage-headline-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.density-strip {
  display: flex;
  gap: 1px;
  height: 24px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.density-cell {
  flex: 1 1 0;
  min-width: 2px;
  background: var(--accent);
  opacity: calc(0.15 + 0.85 * var(--i, 0));
  cursor: help;
}
.density-cell[data-empty="true"] {
  background: transparent;
  opacity: 1;
}
.coverage-gaps { display: flex; flex-wrap: wrap; gap: 6px; }
.coverage-gap-pill {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--yellow);
  background: var(--yellow-dim);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Saga card type label */
/* Series sparkline chart */
.series-container {
  margin-bottom: 20px;
}
.series-current {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.series-value {
  font: 600 32px/1 var(--mono);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.series-label {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.series-canvas {
  width: 100%;
  height: 200px;
  border-radius: var(--radius);
  cursor: crosshair;
  display: block;
}
.series-tooltip {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: 400 12px/1.4 var(--mono);
  color: var(--text);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
.series-tooltip.hidden {
  display: none;
}
.series-leader {
  font: 400 12px/1.2 var(--mono);
  color: var(--text-muted);
  margin-top: 4px;
  flex-basis: 100%;
}
.series-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding-top: 10px;
  font: 400 11px/1.2 var(--mono);
  color: var(--text-muted);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.legend-pct {
  color: var(--text);
  font-weight: 500;
  margin-left: 4px;
}

/* Market episode table */
.market-episodes-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
}
.market-episodes {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.4 var(--mono);
}
.market-episodes th:first-child,
.market-episodes td:first-child {
  min-width: 240px;
  max-width: 420px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.market-episodes th:not(:first-child),
.market-episodes td:not(:first-child) {
  white-space: nowrap;
}
.market-episodes th {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.market-episodes td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(46, 46, 46, 0.5);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.market-episodes tbody tr { cursor: pointer; }
.market-episodes tr:hover td { background: var(--bg-raised); }
.market-episodes tbody tr:focus { outline: none; }
.market-episodes tbody tr:focus td { background: var(--bg-raised); }
.market-episodes a {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
}
.market-episodes a:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The search-box wrapper already shows focus via border-color; a second
   accent outline on the inner input/textarea reads as a second panel
   floating inside the first. Suppress it — the wrapper is the affordance. */
.search-box :is(#search-input, #research-input):focus-visible {
  outline: none;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Agent synthesis ── */
.agent-synthesis {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.agent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.agent-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.agent-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-meta-stamp {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
}
.agent-action-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 5px;
  display: inline-flex;
  align-items: center;
  transition: color 0.1s, border-color 0.1s;
}
.agent-action-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border);
}
.spinner-sm {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.agent-report {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.agent-report p {
  margin: 0 0 10px;
}
.agent-report p:last-child {
  margin-bottom: 0;
}
.agent-report strong {
  color: var(--text);
  font-weight: 600;
}
.agent-bullet {
  color: var(--accent);
  margin-right: 4px;
}
.agent-h {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 20px 0 6px;
}
h3.agent-h { font-size: 14px; }
.agent-report ul {
  margin: 4px 0 8px;
  padding-left: 0;
  list-style: none;
}
.agent-report li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
}
.agent-report li::before {
  content: '\2022';
  color: var(--accent);
  position: absolute;
  left: 0;
}
/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.agent-cite-ref {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  vertical-align: super;
  font-weight: 500;
}
.agent-cite-ref:hover {
  text-decoration: underline;
}

/* Citation cards */
.agent-cite-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.agent-cite-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-border);
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}
.agent-cite-body {
  flex: 1;
  min-width: 0;
}

/* ───────────── Mobile-first chip system ─────────────
   Mode chip in search bar, filter chips below, popovers,
   bottom sheet for sources. Replaces the legacy controls-row
   + segmented control + always-visible date presets. */

/* Mode chip — sits inside .search-box, replaces segmented control */
.mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 4px 8px 4px 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  flex-shrink: 0;
  height: 28px;
  transition: background 0.15s, border-color 0.15s;
}
.mode-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.mode-chip[aria-expanded="true"] {
  background: var(--surface);
  border-color: var(--border-light);
  color: var(--text);
}
.mode-chip svg { transition: transform 0.15s; }
.mode-chip[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Mode popover — anchored under the search box */
.search-box { position: relative; }
.mode-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 240px;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 80;
}
.mode-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.mode-option:last-child { border-bottom: none; }
.mode-option:hover { background: var(--surface); }
.mode-option.selected { background: var(--accent-dim); }
.mode-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.mode-option.selected .mode-name { color: var(--accent); }
.mode-check { color: var(--accent); display: none; }
.mode-option.selected .mode-check { display: inline; }
.mode-option-locked { opacity: 0.45; cursor: not-allowed; }
.mode-option-locked .mode-name::after {
  content: 'upgrade';
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
}
.mode-option-locked:hover { background: transparent; }
.mode-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.mode-desc code {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--bg);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--text-dim);
}
.mode-badge {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* Filter chip row */
.filter-chips {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}
/* Mobile: tighten chip padding + drop the "sources" word so three chips fit
   on one row even when "as of" expands to a full date like "2026-04-16". */
@media (max-width: 700px) {
  .filter-chips { gap: 5px; }
  .filter-chip { padding: 5px 8px; gap: 5px; height: 28px; font-size: 11px; }
  #chip-sources .chip-label { display: none; }
  #chip-sources .chip-value::before {
    content: "src ";
    color: var(--text-muted);
    font-weight: 400;
  }
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 999px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.filter-chip:hover { border-color: var(--border-light); color: var(--text); }
.filter-chip .chip-label { color: var(--text-muted); }
.filter-chip .chip-value { color: var(--text); font-weight: 500; }
.filter-chip .chip-caret { color: var(--text-muted); transition: transform 0.15s; }
.filter-chip[aria-expanded="true"] {
  background: var(--surface);
  border-color: var(--accent-border);
  color: var(--accent);
}
.filter-chip[aria-expanded="true"] .chip-label,
.filter-chip[aria-expanded="true"] .chip-value,
.filter-chip[aria-expanded="true"] .chip-caret { color: var(--accent); }
.filter-chip[aria-expanded="true"] .chip-caret { transform: rotate(180deg); }
.filter-chip.dirty:not([aria-expanded="true"]) {
  background: var(--accent-dim);
  border-color: var(--accent-border);
}
.filter-chip.dirty:not([aria-expanded="true"]) .chip-label,
.filter-chip.dirty:not([aria-expanded="true"]) .chip-value { color: var(--accent); }

/* Inline as-of expansion — unified scrubber control */
.asof-expanded {
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 12px;
  animation: fadeIn 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Single connected bar: calendar picker + presets share one rounded
   container with no gap between them. Input has no border of its own,
   the wrapper provides it. */
.asof-input-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.asof-input-row:focus-within {
  border-color: var(--accent);
}
.asof-input-row input[type="datetime-local"] {
  flex: 0 0 auto;
  width: 36px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--text);
  color-scheme: dark light;
  overflow: hidden;
}
.asof-input-row input[type="datetime-local"]:focus,
.asof-input-row input[type="datetime-local"]:focus-visible {
  outline: none;
}
.asof-input-row input[type="datetime-local"]::-webkit-datetime-edit { display: none; }
.asof-input-row input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin: 0 auto;
  cursor: pointer;
  filter: invert(0.5);
}
.asof-expanded .date-presets {
  display: inline-flex;
  gap: 0;
  flex-wrap: nowrap;
  align-self: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.asof-input-row .date-presets {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: space-between;
}
.asof-expanded .date-presets button {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 3px;
  padding: 8px 8px;
  min-height: 40px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.asof-expanded .date-presets button:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.asof-expanded .date-presets button.active,
.asof-expanded .date-presets button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-dim);
}
/* ─────────── Time scrubber (Bloomberg-style) ─────────── */
.asof-wheel {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wheel-scrubber {
  position: relative;
  padding-top: 14px;     /* room for cursor callout */
}
/* Edge fade + swipe hint: tells the user the wheel has more content off-screen
   and is draggable. The hint pulses subtly until the wheel is touched, then
   the .wheel-touched class on .asof-wheel removes it. */
.wheel-scrubber::before,
.wheel-scrubber::after {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
}
.wheel-scrubber::before {
  left: 0;
  background: linear-gradient(to right, var(--surface) 10%, transparent);
}
.wheel-scrubber::after {
  right: 0;
  background: linear-gradient(to left, var(--surface) 10%, transparent);
}
.wheel-swipe-hint {
  align-self: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
  white-space: nowrap;
  margin-top: -2px;
  animation: wheelSwipeHint 1.8s ease-in-out infinite;
}
.wheel-hint-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  /* Sits below the cursor dot (which extends ~4.5px past the bar bottom)
     so the hint text never overlaps the dot. */
  margin-top: 8px;
}
.wheel-hint-dirty { display: none; color: var(--accent); }
.asof-wheel.wheel-dirty .wheel-hint-default { display: none; }
.asof-wheel.wheel-dirty .wheel-hint-dirty   { display: inline; }
.asof-wheel.wheel-dirty .wheel-swipe-hint   { animation: none; }
.asof-wheel.wheel-touched:not(.wheel-dirty) .wheel-swipe-hint { display: none; }

/* Cancel — small top-right × on the expanded panel. Only visible when
   there's a pending scrub change. Clicking it discards the scrub without
   firing the API call on collapse. */
.asof-expanded { position: relative; }
.wheel-cancel {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.wheel-cancel:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--bg-hover);
}
.asof-expanded:has(.asof-wheel.wheel-dirty) .wheel-cancel { display: inline-flex; }
@keyframes wheelSwipeHint {
  0%, 100% { opacity: 0.4; transform: translateX(-3px); }
  50%      { opacity: 0.8; transform: translateX(3px); }
}
@keyframes wheelHintNudge {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}
.wheel-viewport {
  position: relative;
  height: 52px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* No scroll-snap — mandatory snap forces viewport.scrollLeft to integer-day
     positions on every settle, which collapses sub-day precision on desktop
     drag. Velocity-driven snapping in JS handles the rest-state correctly. */
  cursor: grab;
  touch-action: pan-x;
}
.wheel-viewport:active { cursor: grabbing; }
.wheel-viewport::-webkit-scrollbar { display: none; }
.wheel-track {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  /* Padding equal to half-viewport keeps the cursor at the center
     of any reachable date (computed in JS since viewport width varies) */
}
.wheel-tick {
  position: relative;
  flex: 0 0 96px;       /* DAY_PX = 96 (must match JS DAY_PX in app.js) */
  width: 96px;          /* lock width so month labels can't push the tick wider */
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 0;
}
.wheel-tick::before {
  content: '';
  display: block;
  width: 1px;
  background: var(--border);
  height: 4px;
  transition: background 0.1s, height 0.1s;
  order: 2;             /* tick mark at the bottom */
}
.wheel-tick[data-grade="week"]::before  { height: 7px; background: var(--border-light); }
.wheel-tick[data-grade="month"]::before { height: 11px; background: var(--text-muted); }
.wheel-tick[data-today="true"]::before  {
  background: var(--accent);
  height: 11px;
}
.wheel-tick-label {
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 3px;   /* label just above the tick mark */
  position: absolute;
  bottom: 7px;          /* hover just above the tick's bottom mark */
  pointer-events: none;
}
/* Only label month starts — hide "today" inline label (callout above cursor handles it). */
.wheel-tick[data-today="true"] .wheel-tick-label { display: none; }
.wheel-cursor {
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 3;
}
/* Dot at the bottom of the cursor line — matches the landing scrubber. */
.wheel-cursor::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--accent);
}
.wheel-cursor::after { content: none; }
/* Date·time label above the cursor — text only, no flag chrome. */
.wheel-cursor-label {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}

/* Focus popover (small floating panel under chip) */
.focus-popover {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 14px;
  animation: fadeIn 0.15s ease;
  max-width: 360px;
}
.focus-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.focus-popover-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.focus-popover input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.focus-popover input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.focus-popover input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
.focus-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.edge-type-segmented {
  flex-shrink: 1;
}
.edge-type-segmented .seg-btn {
  height: 24px;
  padding: 4px 9px;
}
@media (max-width: 420px) {
  .focus-control-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .edge-type-segmented {
    align-self: stretch;
  }
  .edge-type-segmented .seg-btn {
    flex: 1 1 0;
    padding-left: 6px;
    padding-right: 6px;
  }
}
.focus-popover-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Sources bottom sheet */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 200;
  animation: fadeIn 0.2s ease;
}
.sources-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-raised);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 12px 16px 28px;
  z-index: 210;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  animation: sheetIn 0.22s ease;
}
@keyframes sheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  margin: 0 auto 14px;
  flex-shrink: 0;
}
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.sheet-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 6px;
}
.sheet-actions { display: flex; gap: 12px; align-items: center; }
.sheet-action {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 0;
  text-transform: lowercase;
}
.sheet-action.sheet-close { color: var(--text); font-weight: 500; }
.sheet-search {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.sheet-search:focus { border-color: var(--accent); }
.sheet-body {
  overflow-y: auto;
  flex: 1;
  margin: 0 -8px;
  padding: 0 8px;
}
.sheet-group-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 14px 0 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sheet-group-label:first-child { margin-top: 0; }
.sheet-group-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sheet-group-toggle:hover { color: var(--accent); }
.sheet-source-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.sheet-source-row:last-child { border-bottom: none; }
.sheet-source-row .checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-light);
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background 0.1s, border-color 0.1s;
}
.sheet-source-row .checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
}
.sheet-source-row .checkbox svg { color: var(--bg); display: none; }
.sheet-source-row .checkbox.checked svg { display: block; }
.sheet-source-row .source-name {
  flex: 1;
  font-size: 14px;
  color: var(--text);
}
.sheet-source-row.unchecked .source-name { color: var(--text-muted); }
.sheet-source-row .source-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-light);
  flex-shrink: 0;
}
.sheet-source-row .source-cat {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
}
.sheet-empty {
  padding: 24px 4px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Provenance chain — flipped (extraction first, closest to fact).
   First step's dot is slightly larger + glowing to anchor the chain, but
   no connector line goes upward to the Fact card. */
.chain-timeline.chain-flipped { margin-top: 8px; }
.chain-timeline.chain-flipped .chain-step:first-child {
  padding-top: 0;
  margin-top: 0;
}
.chain-timeline.chain-flipped .chain-step:first-child::before {
  background: var(--accent);
  width: 10px;
  height: 10px;
  left: 1px;
  top: 5px;
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Override the legacy mobile @media: orphans no longer matter */
@media (max-width: 700px) {
  .mode-popover { width: min(280px, calc(100vw - 56px)); }
  /* date-presets buttons inside expanded asof — bigger touch targets */
  .asof-expanded .date-presets button { min-height: 44px; padding: 8px 6px; }
}

/* No additional <500px override — the <=700px rule above sizes generously
   for touch targets, and the layout already wraps cleanly at iPhone widths. */