/* ---------- Tokens (reference dataviz palette; light first, dark selected) ---------- */
:root {
  color-scheme: light dark;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --series-1: #83263f;   /* oxblood — authoritative, not "AI blue" */
  --series-2: #c26a2a;
  --series-3: #1f6b4f;
  --series-4: #b8860a;
  --series-5: #7a5ea8;
  --series-6: #2b6b8c;
  --series-1-soft: #eccdd5;
  --on-accent: #ffffff;   /* text/glyphs sitting on a filled accent */
  --good: #0ca30c;
  --good-text: #006300;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px -12px rgba(11, 11, 11, 0.10);
  --ring: color-mix(in srgb, var(--series-1) 22%, transparent);
  --gridline-page: color-mix(in srgb, var(--ink) 2%, transparent);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* buttery ease-out */
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.1);
    --series-1: #c65f79;   /* oxblood, lifted for dark surfaces */
    --series-2: #d98a4a;
    --series-3: #37a17a;
    --series-4: #d0a032;
    --series-5: #a58bd0;
    --series-6: #4f9ec2;
    --series-1-soft: #55223a;
    --good-text: #0ca30c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --gridline-page: color-mix(in srgb, var(--ink) 2.5%, transparent);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1000px 460px at 50% -200px, color-mix(in srgb, var(--series-1) 6%, transparent), transparent 72%),
    repeating-linear-gradient(0deg,   var(--gridline-page) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(60deg,  var(--gridline-page) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(120deg, var(--gridline-page) 0 1px, transparent 1px 44px),
    var(--page);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
em { font-style: italic; }

::selection { background: color-mix(in srgb, var(--series-1) 25%, transparent); }

/* ---------- Motion primitives ---------- */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes barGrowX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes lineDraw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.view { animation: viewIn 0.55s var(--ease) both; }

/* ---------- Header ---------- */
.top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  animation: fadeIn 0.6s var(--ease) both;
}
.brand { display: flex; align-items: center; gap: 10px; user-select: none; }
.mark { width: 27px; height: 27px; color: var(--ink); }
.mark .mk-mono, .gate-mark .mk-mono { fill: currentColor; }
.mark .mk-accent-f, .gate-mark .mk-accent-f { fill: var(--series-1); }
.wordmark { font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.wm-dot { color: var(--series-1); }

.top-right { display: flex; align-items: center; gap: 16px; }
.sysdot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--good);
  animation: pulse 2.2s ease-in-out infinite;
}

/* ---------- Controls ---------- */
button {
  font: inherit; cursor: pointer; border-radius: 10px;
  border: 1px solid var(--border);
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), opacity 0.2s var(--ease),
              transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
button:active { transform: scale(0.97); }
button.primary {
  background: var(--ink); color: var(--page); border-color: transparent;
  padding: 11px 24px; font-weight: 600;
}
button.primary:hover { opacity: 0.88; }
button.primary:disabled { opacity: 0.45; cursor: default; transform: none; }
button.ghost { background: transparent; color: var(--ink-2); padding: 6px 14px; }
button.ghost:hover { background: var(--surface); color: var(--ink); }

:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 10px; }

input[type="text"], input[type="password"] {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 15px;
  width: 100%; outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
input:focus { border-color: var(--series-1); box-shadow: 0 0 0 4px var(--ring); }

/* ---------- Gate ---------- */
.gate { display: grid; place-items: center; min-height: 78vh; padding: 24px; }
.gate-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; width: min(460px, 100%);
}
.gate-mark { width: 54px; height: 54px; color: var(--ink); margin-bottom: 20px; }
.gate-org {
  margin: 0 0 18px; font-size: 12px; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase; font-family: var(--mono);
}
.gate-title {
  margin: 0 0 8px; font-size: 34px; letter-spacing: -0.02em; font-weight: 700;
}
.gate-sub { margin: 0 0 26px; color: var(--ink-2); font-size: 16px; }
.gate-lines {
  margin: 0 0 30px; padding: 0; list-style: none;
  display: grid; gap: 7px;
}
.gate-lines li {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--muted);
}
.gate-lines li::before { content: "▸ "; color: var(--series-1); }
.gate-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; width: 100%;
  box-shadow: var(--shadow);
}
.gate-card form { display: flex; gap: 10px; }
.gate-card input { flex: 1; font-family: var(--mono); font-size: 14px; }
#gate-error { margin-top: 14px; }
.gate-foot {
  margin: 18px 0 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.07em; color: var(--muted);
}

.error {
  color: var(--critical); font-size: 14px;
  animation: riseIn 0.3s var(--ease) both;
}
/* A rejected non-research query is a neutral notice, not a failure. */
#search-error.notice {
  color: var(--ink-2);
  border-left: 2px solid var(--muted);
  padding: 10px 0 10px 14px;
}

/* ---------- Portal ---------- */
.portal { max-width: 880px; margin: 0 auto; padding: 8px 24px 90px; }
.searchbox { padding: 30px 0 8px; }
.tagline {
  font-size: 30px; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 700;
}
.search-row { display: flex; gap: 10px; }
.search-row input { font-size: 16px; padding: 14px 17px; }

.search-sub { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.modes { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; background: var(--surface); }
.modes button {
  border: none; background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: 6px;
}
.modes button:hover { color: var(--ink); }
.modes button.active { background: var(--ink); color: var(--page); }
.thread-chip {
  border: 1px solid color-mix(in srgb, var(--series-1) 45%, var(--border));
  background: color-mix(in srgb, var(--series-1) 8%, transparent);
  color: var(--series-1); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; padding: 5px 11px; border-radius: 999px;
}
.thread-chip:hover { background: color-mix(in srgb, var(--series-1) 15%, transparent); }
.sub-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Thick, smooth inline glyphs */
.ico {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Evidence attach: a file icon that lives inside the query bar */
.input-wrap { position: relative; flex: 1; display: flex; }
.input-wrap input { flex: 1; padding-left: 46px; }
.attach-icon {
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--muted); border-radius: 9px;
}
.attach-icon:hover { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 9%, transparent); }
/* The generic button:active scale would replace the centering translate and
   make the icon jump downward; keep the translate and scale about the centre. */
.attach-icon:active { transform: translateY(-50%) scale(0.92); }
.attach-icon .ico { width: 19px; height: 19px; transition: transform 0.18s var(--ease); }
.attach-icon:hover .ico { transform: scale(1.06); }
.attach-tray { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 8px 6px 10px;
}
.attach-chip .spinner { width: 12px; height: 12px; }
.ac-kind {
  flex: none; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--on-accent); background: var(--series-1);
  border-radius: 5px; padding: 2px 5px;
}
.ac-name {
  font-size: 13px; color: var(--ink); font-weight: 600;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); flex: none; }
.ac-rm {
  flex: none; border: none; background: transparent; color: var(--muted);
  font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 6px;
}
.ac-rm:hover { color: var(--critical); background: color-mix(in srgb, var(--critical) 12%, transparent); }

/* Connected people (dossier modes) */
.people-group {
  margin: 18px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); font-family: var(--mono);
}
.people-card h3.people-group:first-of-type { margin-top: 4px; }
.people { list-style: none; margin: 0; padding: 0; display: grid; }
.people li { padding: 9px 0; border-top: 1px solid var(--grid); min-width: 0; }
.people li:first-child { border-top: none; padding-top: 0; }
.pp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pp-name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.pp-rel {
  font-size: 12px; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px;
}
.pp-conf {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em;
  padding: 1.5px 7px; border-radius: 999px; color: #fff;
}
.pp-conf.pc-probable { background: var(--warning); }
.pp-conf.pc-unconfirmed { background: var(--serious); }
.pp-detail { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }

/* Likely work address (person dossiers) */
.email-guess .eg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eg-addr {
  font-size: 15px; font-weight: 600; padding: 6px 11px;
  background: color-mix(in srgb, var(--series-1) 9%, transparent);
  border-color: color-mix(in srgb, var(--series-1) 30%, var(--border));
  color: var(--ink);
}
.eg-copy { flex: none; }
.eg-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.eg-flag {
  display: inline-block; margin-right: 7px; padding: 1.5px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: #fff; background: var(--warning);
}
.eg-ev { margin: 7px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Disambiguation picker: choose which subject was meant */
.cand-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--page) 72%, transparent);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.22s var(--ease) both;
}
.cand-dialog {
  width: min(560px, 100%); max-height: 84vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 26px;
  animation: riseIn 0.32s var(--ease) both;
}
.cand-title { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.cand-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); }
.cand-list { display: grid; gap: 9px; }
.cand {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px;
  background: transparent;
}
.cand:hover, .cand:focus-visible {
  border-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 7%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -8px var(--ring);
}
.cand-name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.cand-desc { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.cand-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.cand-none {
  margin-top: 14px; width: 100%; padding: 10px 14px;
  background: transparent; border: 1px dashed var(--border); border-radius: 11px;
  color: var(--muted); font-size: 12.5px;
}
.cand-none:hover { color: var(--ink-2); border-color: var(--baseline); }
.cand-more { margin-top: 14px; display: grid; gap: 9px; animation: riseIn 0.28s var(--ease) both; }
.cand-more-label { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.cand-more-input {
  width: 100%; resize: vertical; font: inherit; font-size: 13.5px;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--page); color: var(--ink);
}
.cand-more-input:focus-visible { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px var(--ring); }
.cand-more-go { justify-self: start; }

/* Company mode: optional known-details form */
.cfields { margin-top: 10px; }
.cfields > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2); font-weight: 600;
  padding: 6px 12px 6px 9px; border: 1px solid var(--border); border-radius: 999px;
  width: fit-content; list-style: none; user-select: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cfields > summary::-webkit-details-marker { display: none; }
.cfields > summary:hover { border-color: var(--series-1); color: var(--series-1); }
.cfields > summary .ico { width: 13px; height: 13px; transition: transform 0.22s var(--ease); }
.cfields[open] > summary .ico { transform: rotate(90deg); }
.cfield-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
  margin-top: 12px; padding: 15px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  animation: riseIn 0.32s var(--ease) both;
}
@media (max-width: 640px) { .cfield-grid { grid-template-columns: 1fr; } }
.cfield-grid label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; color: var(--muted); font-family: var(--mono);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.cfield-grid .cf-wide { grid-column: 1 / -1; }
.cfield-grid input { font-size: 13.5px; padding: 9px 11px; }

/* ---------- Progress (ops log) ---------- */
.progress {
  margin-top: 22px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px;
  box-shadow: var(--shadow);
  animation: riseIn 0.45s var(--ease) both;
  font-family: var(--mono);
}
.term-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--grid);
}
.term-head .sysdot { animation-duration: 1.2s; }
.term-head .t { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); text-transform: none; }
.progress .stage {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 13px;
  transition: color 0.35s var(--ease);
}
.progress .stage + .stage { margin-top: 8px; }
.progress .stage.active { color: var(--ink); }
.progress .stage.done { color: var(--muted); }
.progress .stage .t {
  margin-left: auto; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.spinner {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid var(--grid); border-top-color: var(--series-1);
  animation: spin 0.7s linear infinite;
}
.tick { color: var(--good); font-weight: 700; animation: popIn 0.35s var(--spring) both; }
.subqueries { margin: 10px 0 0 21px; padding: 0; list-style: none; }
.subqueries li {
  font-size: 12px; color: var(--muted); padding: 2.5px 0;
  animation: riseIn 0.4s var(--ease) both;
  transition: color 0.3s var(--ease);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.subqueries li.ok { color: var(--ink-2); }
.subqueries li::before { display: inline-block; width: 16px; }
.subqueries li.ok::before { content: "✓"; color: var(--good); }
.subqueries li.fail::before { content: "✕"; color: var(--critical); }
.subqueries li.pending::before { content: "▸"; opacity: 0.5; animation: pulse 1.4s ease-in-out infinite; }

/* ---------- Dashboard ---------- */
.dashboard { margin-top: 24px; display: grid; gap: 12px; }
.dashboard > .answer-card,
.dash-main > *, .dash-rail > * { animation: riseIn 0.6s var(--ease) both; }

.dash-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 292px;
  gap: 12px; align-items: start;
}
.dash-main, .dash-rail { display: grid; gap: 12px; min-width: 0; }
/* Nothing may paint outside its column. The rail comes later in the DOM, so any
   overflow from the main column (long identifiers, URLs, wide tables) would be
   covered by the rail's cards and read as overlapping content. */
.dash-main > *, .dash-rail > * { min-width: 0; max-width: 100%; }
@media (max-width: 920px) {
  .dash-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
  box-shadow: var(--shadow);
  min-width: 0; overflow-wrap: break-word;
}
.card table { max-width: 100%; }
/* Flex/grid items default to min-width:auto, which refuses to shrink below
   their longest word and lets text spill past the card. */
.card li, .card p, .card ul, .card ol { min-width: 0; }
.fact-line, .fact-body, .fact-caveat, .tl-body, .fs-body, .src-body, .side-points li {
  min-width: 0; overflow-wrap: break-word;
}
.dash-rail .card { padding: 16px 18px; }
.card h2 {
  margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); font-family: var(--mono);
}
.card h2.mt { margin-top: 20px; }

/* Answer hero with viewfinder corners */
.answer-card { padding: 26px 28px; position: relative; }
.hero-chips { margin-top: 16px; }
.answer-card::before, .answer-card::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, var(--series-1) 55%, transparent);
  transition: opacity 0.3s var(--ease);
}
.answer-card::before { top: 10px; left: 10px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.answer-card::after { bottom: 10px; right: 10px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }
.answer-card .answer {
  font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; margin: 0;
  overflow-wrap: break-word;
}
.answer-card .answer.sz-m { font-size: 28px; }
.answer-card .answer.sz-s { font-size: 22px; line-height: 1.3; }

.actions { display: flex; gap: 8px; margin-top: 14px; }
.action-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink-2); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.05em; padding: 6px 13px;
}
.action-btn:hover { border-color: var(--series-1); color: var(--ink); }
.answer-card .detail { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; }
.answer-meta { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; padding: 4.5px 11px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink-2);
  font-family: var(--mono); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.badge .swatch { width: 8px; height: 8px; border-radius: 50%; }
.sw-good { background: var(--good); }
.sw-warning { background: var(--warning); }
.sw-serious { background: var(--serious); }
.sw-critical { background: var(--critical); }

/* Verification card */
.verify-line { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink-2); }
.verify-line .spinner { align-self: center; }
.verify-line .vdot { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.verify-note { margin: 8px 0 0 18px; font-size: 13px; color: var(--muted); }
.verify-issues { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.verify-issues li {
  border-left: 2px solid var(--serious); padding: 2px 0 2px 12px;
  font-size: 13.5px; color: var(--ink-2);
}
.verify-issues .claim { color: var(--ink); font-weight: 600; }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--series-1) 35%, var(--border)); }
.tile .label {
  font-size: 10.5px; color: var(--muted); letter-spacing: 0.07em;
  font-family: var(--mono); text-transform: uppercase;
}
.tile .value { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-top: 3px; }
.tile .sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* Facts: a scannable list. Each row leads with a bold label, so the card can be
   read by running down the left edge rather than reading every sentence. */
.facts { margin: 0; padding: 0; list-style: none; display: grid; }
.facts li {
  display: flex; gap: 11px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--grid);
}
.facts li:first-child { border-top: none; padding-top: 2px; }
.facts li:last-child { padding-bottom: 2px; }
.facts .bullet {
  flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--series-1); transform: translateY(-3px);
}
.facts li:has(.fact-body.w-supporting) .bullet { background: var(--baseline); }
.fact-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fact-line { line-height: 1.55; }
.fact-line strong {
  font-weight: 700; color: var(--ink);
  letter-spacing: -0.005em;
}
.fact-body.w-supporting .fact-line { color: var(--ink-2); }
.fact-body.w-decisive .fact-line strong { color: var(--series-1); }
.fact-tag {
  display: inline-block; margin-left: 8px; padding: 1.5px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; font-weight: 600;
  color: var(--on-accent); background: var(--series-1); border: none;
  vertical-align: 1px;
}
.fact-conf {
  margin-left: 7px; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.fact-caveat { font-size: 12.5px; color: var(--muted); }
.fact-caveat::before { content: "△ "; color: var(--warning); }
code {
  font-family: var(--mono); font-size: 0.88em;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--border);
  padding: 0.5px 5px; border-radius: 5px;
  /* Identifiers (LEI, KVK, registration numbers) and commands are long and
     unbreakable: nowrap pushed them straight out of the card. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.facts .refs, .section .refs {
  color: var(--muted); font-size: 11px; white-space: nowrap;
  font-family: var(--mono);
}
.section h3 { margin: 0 0 10px; font-size: 15.5px; }
.section p { margin: 0 0 10px; color: var(--ink-2); }
.section p:last-child { margin-bottom: 0; }

/* Chart */
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-card svg text { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.chart-unit { font-size: 11px; color: var(--muted); margin: 0 0 12px; font-family: var(--mono); }
.chart-card details { margin-top: 12px; }
.chart-card summary {
  font-size: 11px; color: var(--muted); cursor: pointer; font-family: var(--mono);
  letter-spacing: 0.04em; transition: color 0.2s var(--ease);
}
.chart-card summary:hover { color: var(--ink); }

.bar {
  transform-box: fill-box; transform-origin: center bottom;
  animation: barGrow 0.7s var(--ease) both;
}
.bar:hover { opacity: 0.85; }
.line-path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: lineDraw 1.1s var(--ease) 0.15s both;
}
.dot { animation: popIn 0.35s var(--spring) both; }
.chart-label { animation: fadeIn 0.5s var(--ease) 0.5s both; }
.hbar-bar {
  transform-box: fill-box; transform-origin: left center;
  animation: barGrowX 0.7s var(--ease) both;
}
.hbar-bar:hover { opacity: 0.85; }
.seg { animation: fadeIn 0.55s var(--ease) both; }
.seg:hover { opacity: 0.85; }

/* Donut + legend */
.donut-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.chart-card svg.donut { width: 190px; height: 190px; flex: none; }
.legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.legend li { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; }
.lg-swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; transform: translateY(0.5px); }
.s1 { background: var(--series-1); }
.s2 { background: var(--series-2); }
.s3 { background: var(--series-3); }
.s4 { background: var(--series-4); }
.s5 { background: var(--series-5); }
.s6 { background: var(--series-6); }
.lg-label { color: var(--ink); font-weight: 600; }
.lg-val { color: var(--muted); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* Flow diagram */
.flow { display: grid; }
.flow-step {
  display: flex; gap: 14px; position: relative; padding: 9px 0;
  animation: riseIn 0.5s var(--ease) both;
}
.fs-i {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--on-accent);
  border-radius: 8px;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--series-1); z-index: 1; flex: none;
}
.flow-step:not(:last-child)::before {
  content: ""; position: absolute; left: 14px; top: 40px; bottom: -12px;
  width: 1px; background: var(--grid);
}
.fs-body { padding-top: 3px; min-width: 0; }
.fs-label { font-weight: 600; font-size: 14.5px; }
.fs-detail { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* Timeline */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li {
  display: flex; gap: 14px; position: relative; padding: 9px 0;
  animation: riseIn 0.5s var(--ease) both;
}
.timeline li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--series-1); flex: none; margin-top: 6px; z-index: 1;
}
.timeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 3.5px; top: 22px; bottom: -12px;
  width: 1px; background: var(--grid);
}
.tl-date {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  width: 78px; flex: none; padding-top: 3px; font-variant-numeric: tabular-nums;
}
.tl-body { min-width: 0; }
.tl-label { font-weight: 600; font-size: 14.5px; }
.tl-detail { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grid); }
th {
  color: var(--muted); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; font-weight: 600; font-family: var(--mono);
}
td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.15s var(--ease); }
tbody tr:hover { background: color-mix(in srgb, var(--series-1) 4%, transparent); }
.table-wrap { overflow-x: auto; }

/* Sources (compact rail list; used_for shown as hover tooltip) */
.sources { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.sources li { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.sources .sid {
  flex: none; font-size: 10.5px; font-weight: 700; color: var(--on-accent);
  background: var(--series-1); border-radius: 6px; padding: 1px 6px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; line-height: 1.5;
}
.src-body { display: flex; flex-direction: column; min-width: 0; }
.sources a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px;
  transition: color 0.2s var(--ease);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sources a:hover { color: var(--series-1); }
.sources .meta {
  font-size: 10.5px; color: var(--muted); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Caveats & follow-ups */
.caveats { margin: 0; padding-left: 18px; color: var(--ink-2); }
.caveats li { margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 15px; font-size: 13px; color: var(--ink-2);
}
.chip:hover {
  border-color: var(--series-1); color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px var(--ring);
}

/* Run meta footer */
.runmeta {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  letter-spacing: 0.05em; padding: 2px 4px 0;
  font-variant-numeric: tabular-nums;
}
.caveats li { font-size: 13px; }
.dash-rail .verify-line { font-size: 13px; }
.dash-rail .verify-note { font-size: 12px; }

/* Debate: live turns in the recon log */
.debate-turns { margin: 12px 0 0; display: grid; gap: 10px; }
.turn { display: flex; gap: 10px; align-items: flex-start; animation: riseIn 0.45s var(--ease) both; }
.turn-tag {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  border-radius: 7px; border: none; color: var(--on-accent);
}
.side-a .turn-tag, .tag-a { background: var(--series-1); }
.side-b .turn-tag, .tag-b { background: var(--series-2); }
.turn-pos { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.turn-sum { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }

/* Debate: final card */
.debate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .debate-grid { grid-template-columns: 1fr; } }
.debate-side {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
}
.dside-a { border-top: 2px solid var(--series-1); }
.dside-b { border-top: 2px solid var(--series-2); }
.side-head { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; }
.side-pos { font-weight: 600; font-size: 14px; line-height: 1.35; }
.side-points { margin: 0; padding-left: 17px; }
.side-points li { font-size: 13px; color: var(--ink-2); margin: 5px 0; }
.ruling { margin-top: 14px; border-top: 1px solid var(--grid); padding-top: 12px; }
.ruling p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* Next move: closing decision fork */
.nm-q { margin: 0 0 12px; font-weight: 600; font-size: 15px; }
.branches { display: grid; gap: 8px; }
.branch {
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--border); border-left: 2px solid var(--series-1);
  border-radius: 9px; padding: 11px 14px;
}
.branch-if {
  font-family: var(--mono); font-size: 12px; color: var(--series-1);
  overflow-wrap: anywhere; line-height: 1.45;
}
.branch-then { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* Monitor card */
.monitor-why { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.monitor-form { display: grid; gap: 8px; }
.monitor-form input { font-size: 13px; padding: 8px 11px; font-family: var(--mono); }
.monitor-btn { font-size: 13px; padding: 8px 14px; }
.monitor-ok { color: var(--good-text); font-size: 12px; }

/* ---------- Print (PDF export) ---------- */
@media print {
  .top, .searchbox, .progress, .hero-chips, .actions, .monitor-card,
  #search-error, .chart-card summary { display: none !important; }
  body { background: #fff; }
  .dash-grid { grid-template-columns: 1fr; }
  .card, .tile { box-shadow: none; break-inside: avoid; }
  .dashboard > .answer-card, .dash-main > *, .dash-rail > *,
  .bar, .hbar-bar, .seg, .dot, .line-path, .chart-label, .view { animation: none !important; }
  .line-path { stroke-dashoffset: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .answer-card .answer { font-size: 27px; }
  .tagline { font-size: 24px; }
  .search-row { flex-direction: column; }
  .sys { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .spinner { animation-duration: 0.7s !important; animation-iteration-count: infinite !important; }
}