/* P21 terminal materials; light theme is an explicit choice. */
:root {
  --bg: #0b100e;
  --bg-deep: #060a09;
  --surface: rgba(14, 21, 18, 0.86);
  --surface-solid: #0e1512;
  --surface-2: #121b17;
  --surface-3: #16221c;
  --line: #1d2a24;
  --line-strong: rgba(65, 255, 139, 0.22);
  --text: #d6e2da;
  --muted: #8fa39a;
  --faint: #798c84;
  --accent: #41ff8b;
  --accent-2: #58d6e7;
  --accent-soft: rgba(65, 255, 139, 0.08);
  --on-accent: #06120b;
  --glow: 0 0 18px rgba(65, 255, 139, 0.35);
  --panel-glow: 0 0 24px rgba(65, 255, 139, 0.06);
  --scanline: block;
  /* Label ink is typography, not an evidence state. */
  --label: #c9d977;

  --ok: #5fe39a;
  --caution: #ffd16a;
  --risk: #ff7f86;
  --risk-deep: #ff5b66;
  --unknown: #86b8de;
  --abstain: #7d938a;

  --shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
  --radius: 10px;
  --radius-sm: 6px;
  --col-wide: 1200px;
  --col: 720px;
  /* Chrome spans wider than the summary. */
  --shell: 1240px;
  --rail: 300px;
  --row-h: 34px;
  --data-lh: 1.35;
  --mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Explicit daylight palette. */
html[data-theme="light"] {
  --glow: none;
  --panel-glow: none;
  --bg: #f3f6f4;
  --bg-deep: #e9edeb;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-2: #f7faf8;
  --surface-3: #eef3f0;
  --line: rgba(17, 34, 27, 0.11);
  --line-strong: rgba(17, 34, 27, 0.2);
  --text: #101f19;
  --muted: #5c6e66;
  --faint: #5c6e66;
  --accent: #0a7f47;
  --accent-2: #0a6d80;
  --accent-soft: rgba(10, 127, 71, 0.09);
  --on-accent: #ffffff;
  --scanline: none;
  --label: #5f6f0f;
  --ok: #0a7f47;
  --caution: #9a5c05;
  --risk: #bb2333;
  --risk-deep: #8d1524;
  --unknown: #4e6288;
  --abstain: #5c6e66;
  --shadow: 0 1px 2px rgba(16, 32, 26, 0.05), 0 14px 34px rgba(16, 32, 26, 0.07);
}

/* Semantic aliases. */
:root {
  --good: var(--ok);
  --warning: var(--caution);
  --danger: var(--risk);
  --ok-soft: color-mix(in srgb, var(--ok) 13%, transparent);
  --caution-soft: color-mix(in srgb, var(--caution) 15%, transparent);
  --risk-soft: color-mix(in srgb, var(--risk) 14%, transparent);
  --unknown-soft: color-mix(in srgb, var(--unknown) 13%, transparent);
  --abstain-soft: color-mix(in srgb, var(--abstain) 13%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(65, 255, 139, 0.05), transparent 60%), var(--bg);
  color: var(--text);
  font-family: var(--mono);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
::selection { background: var(--accent); color: var(--bg-deep); }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border: 1px solid var(--accent);
  background: var(--surface-solid);
  color: var(--text);
  border-radius: 8px;
}
.skip-link:focus { transform: translateY(0); }

/* The scanline belongs to the dark terminal surface only; on the light surface it just
   adds noise over the data. */
.scanline {
  display: var(--scanline);
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(128, 255, 186, 0.012) 4px);
  mix-blend-mode: screen;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 4px max(20px, calc((100vw - var(--shell)) / 2));
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px);
  transition: border-color 180ms ease, background 180ms ease;
}
.site-header[data-elevated="true"] { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg-deep) 88%, transparent); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  color: var(--text);
  text-decoration: none;
}
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--accent-soft);
  font: 700 13px/1 var(--mono);
  color: var(--accent);
}
.brand-mark::before, .brand-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--line);
  border-radius: 50%;
}
.brand-mark::after { inset: -4px; border-style: solid; opacity: 0.25; }
.brand-mark.small { width: 36px; height: 36px; }
.brand-mark b { display: none; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font: 800 15px/1 var(--mono); letter-spacing: 0.13em; }
.brand-copy small { display: none; }

.header-nav { display: flex; align-items: center; gap: 8px; }
.header-nav a, .footer-links a {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--muted);
  transition: color 150ms ease;
}
.header-nav a { padding: 10px 12px; }
.header-nav a:hover, .header-nav a:focus-visible, .footer-links a:hover, .text-button:hover, .copy-inline:hover, .copy-inline:focus-visible, .secondary-button:hover, .secondary-button:focus-visible, .deliberation-log .log-status, .tabs button[aria-selected="true"], .tabs button:hover, .footer-routes a:hover, .footer-routes a:focus-visible, .record-article a { color: var(--accent); }

.header-actions { justify-self: end; display: flex; gap: 7px; }
.icon-button {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: 700 14px/1 var(--mono);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.icon-button:hover { border-color: var(--line-strong); color: var(--accent); transform: translateY(-1px); }

main { display: block; }

/* Reference-width card with in-flow rails. The tallest unit determines the row height. */
.first-screen { display: grid; align-items: start; }
.page-rail { display: none; }
@media (min-width: 1120px) {
  .first-screen { grid-template-columns: minmax(0, 1fr) calc(var(--col) + 48px) minmax(0, 1fr); }
  .first-screen > .hero { grid-column: 2; grid-row: 1; }
  .page-rail { display: grid; grid-row: 1; position: relative; margin-top: 132px; width: 160px; justify-self: center; justify-items: center; gap: 20px; }
  .page-rail[data-rail="left"] { grid-column: 1; }
  .page-rail[data-rail="right"] { grid-column: 3; }
  .page-rail:not(:empty) { align-content: start; padding: 30px 0 0; outline: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); box-shadow: var(--panel-glow); }
  .page-rail > * { max-width: 100%; }
  .page-rail:not(:empty)::before { content: "SPONSORED"; position: absolute; top: 8px; left: 10px; color: var(--faint); font: 700 10px/1 var(--mono); letter-spacing: .08em; }
}
@media (min-width: 1400px) { .page-rail { width: var(--rail); } }
/* The tool and its answer own the first screen; the hero is one compact line above it. */
.hero {
  position: relative;
  padding: 10px 24px 0;
}
/* Share a single measure between input and answer. */
.hero, .section-shell { width: min(calc(var(--col) + 48px), 100%); margin-inline: auto; }
.result-stage { width: min(calc(var(--col-wide) + 48px), 100%); margin-inline: auto; }
.court-shell { width: 100%; }
.eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  font: 700 11px/1 var(--mono);
  color: var(--accent);
  letter-spacing: 0.11em;
}
.eyebrow .muted { color: var(--faint); }
/* Task title in terminal chrome; never a marketing hero. */
.court-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.court-title h1 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font: 700 14px/1.4 var(--mono); letter-spacing: .01em; }
/* Visually hidden, still the input's accessible name. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.court-shell {
  position: relative;
  z-index: 5;
  border: 1px solid var(--line-strong);
  background: var(--surface-solid);
}
.court-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 28px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font: 600 10px/1 var(--mono);
  color: var(--faint);
  letter-spacing: 0.07em;
}
.court-chrome > span:last-child { justify-self: end; color: var(--accent); }
.term-dots { display: inline-flex; gap: 6px; margin-right: 12px; }
.term-dots i { width: 11px; height: 11px; border-radius: 50%; }
.term-dots i:nth-child(1) { background: #ff5f56; }
.term-dots i:nth-child(2) { background: #ffb454; }
.term-dots i:nth-child(3) { background: var(--accent); }

.lookup-form { padding: 8px 16px 4px; }
.lookup-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.input-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface-2);
}
.input-shell:focus-within, .correction-form input:focus, .correction-form textarea:focus, .compare-inputs input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.prompt { padding-left: 12px; color: var(--accent); font: 700 14px/1 var(--mono); }
.input-shell input {
  width: 100%; min-width: 0; height: 46px; padding: 0 44px 0 10px;
  border: 0; outline: 0; background: transparent; color: var(--text);
  font: 500 16px/1 var(--mono);
}
.input-shell input::placeholder { color: var(--faint); }
.clear-input {
  position: absolute; right: 0; width: 44px; height: 44px; border: 0; background: transparent;
  color: var(--faint); cursor: pointer; font-size: 21px; line-height: 1;
}
.primary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 46px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 10px;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  font: 800 11px/1 var(--mono); letter-spacing: .06em;
  transition: transform 150ms ease, filter 150ms ease;
}
.primary-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.primary-button kbd { border: 1px solid rgba(0,0,0,.22); border-radius: 4px; padding: 3px 5px; font: inherit; }
.lookup-options { display: grid; grid-template-columns: 100px 120px 140px; align-items: start; gap: 0 8px; margin-top: 0; }
.lookup-options > .text-button, .lookup-extra summary, .lookup-examples .text-button { display: flex; align-items: center; justify-content: center; min-height: 44px; font: 600 12px/1.4 var(--mono); }
.lookup-extra { min-width: 0; }
.lookup-extra summary { cursor: pointer; color: var(--muted); list-style: none; gap: 6px; }
.lookup-extra summary::-webkit-details-marker { display: none; }
.lookup-extra summary::after { content: "+"; color: var(--accent); }
.lookup-extra[open] { grid-column: 1 / -1; }
.lookup-extra[open] summary::after { content: "−"; }
.lookup-extra-body { border-top: 1px solid var(--line); padding-top: 4px; }
.lookup-examples { display: flex; align-items: center; gap: 16px; }
.text-button.retry-lookup { min-height: 44px; color: var(--accent); font-size: 13px; }
button:disabled { cursor: not-allowed; opacity: .5; }
.result-stage { scroll-margin-top: 64px; }
/* line-height 1 on 10px mono clips the descenders against the command bar below it. */
.text-button {
  padding: 3px 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  font: 600 10px/1.2 var(--mono); letter-spacing: .04em;
}

.command-bar {
  display: flex; align-items: center; min-height: 24px; padding: 0;
  overflow-x: auto; white-space: nowrap;
  font: 500 10px/1 var(--mono);
}
.command-label { margin-right: 14px; color: var(--faint); }
.command-bar code { color: var(--text); }
.copy-mini { margin-left: 8px; border: 0; background: none; color: var(--accent); cursor: pointer; font: 700 9px/1 var(--mono); }
.command-divider { width: 1px; height: 18px; margin: 0 17px; background: var(--line); }

/* Separate input and full report. */
.result-stage { padding: 12px 24px 72px; }
.result-empty { margin-bottom: 8px; padding: 5px 12px; border: 1px dashed var(--line); color: var(--muted); }
.result-empty > div, .band-head, .summary-ip .ip-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.result-empty h2 { margin: 0; color: var(--accent); font: 700 10px/1.6 var(--mono); letter-spacing: .06em; }
.result-empty p { margin: 0; font-size: 11px; }

.result-card {
  border: 1px solid var(--line-strong); overflow: hidden;
  background: var(--surface-solid);
}
.result-card[data-static-example="true"], .summary-card[data-static-example="true"] { border-style: dashed; }


/* Empty alternative text keeps ornament silent. */
.report-head::after, .record-footer::before {
  display: block; overflow: hidden; white-space: nowrap;
  color: var(--line-strong); font: 700 11px/1 var(--mono); letter-spacing: .02em;
}
.report-head::after { content: "################################################################################################################################################" / ""; margin-top: 4px; }
.record-footer::before { content: "================================================================================================================================================" / ""; margin-bottom: 6px; }
.report-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; color: var(--faint); font: 600 10px/1.6 var(--mono); letter-spacing: .06em; }
.report-line b { color: var(--muted); font-weight: 600; letter-spacing: 0; }
.report-line a { color: var(--accent); text-decoration: none; letter-spacing: 0; }
.report-line a:hover, .report-line a:focus-visible, .identity-grid dd a:hover, .identity-grid dd a:focus-visible { text-decoration: underline; }
.report-brand, #resultMode { color: var(--accent); font-weight: 800; }

.ip-line { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 4px 10px; margin-top: 4px; }
/* IPv6 wraps at explicit group boundaries. */
.ip-line h2 { margin: 0; overflow-wrap: anywhere; color: var(--accent); font: 700 15px/1.5 var(--mono); letter-spacing: 0; }

.copy-inline { flex: none; white-space: nowrap; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 700 9px/1 var(--mono); padding: 5px 0; }

.report-headline { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.report-state { flex: none; }
.ip-line h2 { flex: none; }
.report-state { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); }
.report-state strong { padding: 3px 8px; background: var(--accent); color: var(--on-accent); font-size: 10px; letter-spacing: .08em; }
.report-state small, .report-state[data-state="record"] { display: none; }
.report-state[data-state="attention"] strong, .band-label[data-band="flagged"] { background: var(--risk); }
.report-state[data-state="example"] strong { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); }

/* Evidence category is separate from the policy index. */
.band-block { padding: 6px 24px 8px; border-bottom: 1px dashed var(--line-strong); }


.band-head .band-reason { flex: 1 1 24ch; min-width: 0; }

.band-label {
  display: inline-block; padding: 4px 10px; background: var(--muted); color: var(--bg-deep);
  font: 800 13px/1 var(--mono); letter-spacing: .08em;
}
.band-label[data-band="no-adverse-record"] { background: var(--ok); }
.band-label[data-band="limited"] { background: var(--unknown); }
.band-label[data-band="disputed"] { background: var(--caution); }

.band-label[data-band="listed"] { background: var(--risk-deep); }
.band-reason { margin: 0; color: var(--muted); font: 500 12px/1.5 var(--mono); }
.band-rule { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--faint); font: 700 9px/1.6 var(--mono); letter-spacing: .07em; }
.band-rule code { color: var(--accent); letter-spacing: 0; }


.info-dot {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: transparent; color: var(--faint); cursor: help;
  font: 700 9px/1 var(--mono); vertical-align: middle;
}
.info-dot:hover, .info-dot:focus-visible, .scenario-chip:hover { border-color: var(--accent); color: var(--accent); }
.legend { margin: 0; color: var(--faint); font: 600 10px/1.5 var(--mono); letter-spacing: .04em; }
.legend i { font-style: normal; color: var(--faint); }
.band-qualifiers { display: contents; }

/* Announce one status, not the entire rebuilt report. */
.verdict-plain {
  margin: 4px 0 0;
  color: var(--text); font-size: 12px; line-height: 1.5;
}
.verdict-plain:empty { display: none; }
.verdict-plain:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* A scenario is a lens over one record, not a different record: the rows stay in the
   published order and every axis stays readable, so nothing is hidden from a reader who
   picked the wrong reason. The ones their question turns on are simply brought forward. */
.scenario-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scenario-label { color: var(--muted); font: 600 12px/1.4 var(--mono); }
.scenario-chip {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
  font: 600 12px/1.4 var(--mono);
}

.scenario-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.result-card[data-lens] .axis-card { opacity: .62; transition: opacity 180ms ease; }
.result-card[data-lens] .axis-card[data-focus="true"] { opacity: 1; border-color: var(--accent); }
.scenario-next { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; color: var(--faint); font: 700 9px/1.6 var(--mono); letter-spacing: .06em; }
.scenario-next a { color: var(--accent); letter-spacing: 0; font-weight: 600; }

/* The longitudinal rows read as a record, not a feed: claim first, subject beneath it,
   dates in the same monospace the rest of the provenance uses. */
.observation-record { padding: 14px 24px 18px; border-top: 1px dashed var(--line-strong); }
.observation-list { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.observation-list li { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.observation-list li:last-child { border-bottom: 0; }
.observation-list strong { display: flex; gap: 8px; justify-content: space-between; font-size: 12px; font-weight: 600; }
.chip[data-tone="watched"] { background: var(--line); color: var(--muted); }
.chip[data-tone="withdrawn"] { background: var(--unknown-soft); }
.observation-history summary { display: flex; align-items: center; min-height: 44px; }
.observation-history ul { margin: 0; padding: 0 0 4px 10px; list-style: none; }
/* 10ch is the exact width of an ISO date in this face, so any letter-spacing rounding wrapped it
   onto a second line. The column sizes to its content and the date never breaks. */
.observation-history li { display: grid; grid-template-columns: max-content 1fr; gap: 0 8px; }
.observation-history li i { white-space: nowrap; }
.observation-list small { color: var(--muted); font: 600 9px/1.4 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere; }
.observation-facts, .observation-history { color: var(--faint); font: 600 9px/1.5 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.input-error {
  display: flex; align-items: center; gap: 7px; margin: 9px 0 0;
  color: var(--danger); font: 600 11px/1.5 var(--mono);
}
.input-error::before { content: "!"; display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; }
#ipInput[aria-invalid="true"], .deliberation-log .failed .log-status { color: var(--danger); }
.qualifier-chip {
  padding: 4px 9px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--muted); font: 600 9px/1.3 var(--mono); letter-spacing: .04em;
}
/* A filled word. Roles wear the second accent so a hosting or infrastructure address is
   typed without being coloured as a finding either way. */
.chip { display: inline-block; padding: 2px 8px; font: 700 10px/1.5 var(--mono); letter-spacing: .06em; vertical-align: middle; }
.chip[data-tone="role"], .signal-matrix td[data-cell="role"] { background: var(--accent-2); color: var(--bg-deep); }

/* One field per line, label left and data right, the way every IP record a visitor has
   already read is laid out. Two-up halved the value column and turned the block into a
   spec sheet; five full-width rows read as answers. Labels are set at a size that can
   actually be read rather than at the micro-caps used for table chrome elsewhere. */
.identity-section { padding: 10px 24px 12px; border-bottom: 1px dashed var(--line-strong); }
/* Eleven fields in three columns: the reference reports set their identity block at
   twenty pixels a fact, and one field per line was costing this one thirty-one. Each cell
   is still a label beside its value, so a column reads down like the single-column form. */
.identity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin: 0; }
.identity-grid > div {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 8px;
  min-height: 24px; padding: 2px 0;
}
.identity-grid dt { color: var(--label); font: 600 11px/1.6 var(--mono); letter-spacing: .04em; }
.identity-grid dd a { color: var(--accent-2); text-decoration: none; }

.identity-grid dd {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  color: var(--text); font: 500 12px/1.5 var(--mono);
}
/* Who announces this address is the question most visitors arrive with, so the two
   fields that answer it are set larger than the address detail under them. */
.result-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 4px 0 0; }
.secondary-button {
  min-height: 28px; padding: 0; border: 0;
  background: transparent; color: var(--muted); cursor: pointer; font: 700 10px/1 var(--mono); letter-spacing: .03em;
}


.deliberation { padding: 6px 24px 8px; border-bottom: 1px dashed var(--line-strong); background: var(--bg-deep); }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; color: var(--accent); font: 700 9px/1.6 var(--mono); letter-spacing: .08em; }
.panel-tools { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.panel-tools .text-button { padding: 0; color: var(--accent); font-size: 9px; }
/* Open while the jurors answer, one line once they have: the report starts on the first screen. */
.deliberation[data-settled="true"]:not([data-expanded="true"]) .deliberation-log { display: none; }
.deliberation[data-settled="true"]:not([data-expanded="true"]) .panel-title { margin-bottom: 0; }
/* The transcript scrolls itself. Without its own scroll box, appendLog's
   scrollIntoView("nearest") walks up and scrolls the page instead, dragging the heading
   out of view during an auto-check the visitor never asked for. */
.deliberation-log { list-style: none; margin: 0; padding: 0; max-height: 140px; overflow-y: auto; overscroll-behavior: contain; font: 500 11px/1.75 var(--mono); color: var(--muted); }
.deliberation-log li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; border-bottom: 1px dotted var(--line); }
.deliberation-log li:last-child { border-bottom: 0; }
.deliberation-log .log-index { color: var(--faint); }


.deliberation-log .abstained .log-status { color: var(--warning); }

/* One row per geolocation source. Divergence is marked per row rather than resolved
   into a single "location" the reader has to trust. */
.matrix-section { padding: 10px 24px 12px; border-top: 1px dashed var(--line-strong); }

/* Sources across, signals down. Asserted answers are filled badges — green for a NO the
   source actually stated, red for an adverse YES — and the three non-answers each keep
   their own unfilled look so none of them can be misread as a finding. Cell spacing does
   the badge work: no per-cell chip markup, no borders to collide. */
.matrix-wrap { overflow-x: auto; }
.signal-matrix { width: auto; min-width: 60%; border-collapse: separate; border-spacing: 3px 3px; font-family: var(--mono); }
.signal-matrix th, .signal-matrix td { padding: 3px 8px; text-align: left; white-space: nowrap; }
.signal-matrix td { min-width: 72px; }
.signal-matrix thead th { padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); color: var(--accent); font: 700 10px/var(--data-lh) var(--mono); letter-spacing: .06em; text-align: center; }
.signal-matrix thead th:first-child { text-align: left; }
/* Columns are source systems, so the table grows every time the register does: it passed nine
   on 2026-09-04 and the measure holds seven. The table scrolls inside its own frame rather than
   pushing the record wider than the column every other section is set to, and the signal column
   stays pinned while it does — at every width, not only on a phone, because that is the column
   that says what each row is. */
.signal-matrix tbody th, .signal-matrix thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface-solid);
}
.signal-matrix tbody th, .axis-top span { color: var(--label); font: 600 10px/var(--data-lh) var(--mono); letter-spacing: .06em; }
.signal-matrix td { font: 700 10px/var(--data-lh) var(--mono); letter-spacing: .05em; text-align: center; }
.signal-matrix td[data-cell="no"], .signal-matrix td[data-cell="confirmed"] { background: var(--ok); color: var(--bg-deep); }
.signal-matrix td[data-cell="yes"] { background: var(--risk); color: var(--bg-deep); }

/* Forward confirmation reads the other way round: agreement between the two zones is the
   good answer, and a name that does not resolve back is a caution rather than a finding. */

.signal-matrix td[data-cell="unconfirmed"], .signal-matrix td[data-cell="value"][data-agreement="differ"] { background: var(--caution); color: var(--bg-deep); }
.signal-matrix td[data-cell="value"] { background: var(--surface-2); color: var(--text); }
.signal-matrix td[data-cell="value"][data-agreement="agree"] { color: var(--ok); }

.signal-matrix td[data-cell="withheld"] { outline: 1px dashed var(--abstain); outline-offset: -1px; color: var(--abstain); }
.signal-matrix td[data-cell="abstain"] { outline: 1px dashed var(--caution); outline-offset: -1px; color: var(--caution); }
.signal-matrix td[data-cell="uncovered"] { color: var(--faint); }

.axis-section, .evidence-section { padding: 16px 24px 18px; border-top: 1px dashed var(--line-strong); }
/* A heading and its standfirst no longer fit side by side at the measure, so they
   stack. .compact — the in-record headings that carry a tab strip — stays a row. */
.section-heading { display: grid; gap: 9px; align-items: start; margin-bottom: 18px; }
.section-heading.compact { display: flex; justify-content: space-between; gap: 20px; }
.section-heading > div:first-child { display: flex; align-items: baseline; gap: 11px; }
/* The title never wraps to make room for its legend; the legend yields first. */
.section-heading.compact > div:first-child { flex: none; white-space: nowrap; }
.section-heading.compact > .legend { flex: 1 1 auto; text-align: right; font-size: 10px; }
.section-heading h2, .section-heading h3 { margin: 0; font-family: var(--mono); letter-spacing: -.02em; }
.section-heading h3 { color: var(--accent); font-size: 12px; letter-spacing: .06em; }
.section-heading h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.section-heading p { margin: 0; color: var(--muted); font-size: .88rem; }
.section-number, .method-list dt { color: var(--accent); font: 700 10px/1 var(--mono); }
.section-heading.light { align-items: start; }
.section-heading.light a { color: var(--accent); text-decoration: none; font: 700 10px/1 var(--mono); }
/* Six rows, not six cards: the axes read as one table so the reader compares them
   vertically instead of scanning a grid. The .axis-card class and its data attributes
   are unchanged — only the layout is. */
.axis-grid { display: grid; }
/* Four columns, two rows: axis, confidence, verdict and the expander share the first
   line, and the basis sits under the verdict it belongs to. Placement is explicit
   because .axis-top is display:contents — with auto-flow the basis would push the
   expander onto a line of its own. */
.axis-card {
  position: relative;
  display: grid;
  grid-template-columns: 118px 62px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 12px;
  padding: 7px 0 7px 12px;
  border-bottom: 1px dotted var(--line);
}
.axis-card .axis-label { grid-column: 3; grid-row: 1; }
.axis-card .axis-expand { grid-column: 4; grid-row: 1; }
.axis-card .axis-basis { grid-column: 3 / -1; grid-row: 2; }
.axis-card .axis-detail { grid-column: 1 / -1; grid-row: 3; }
.axis-card:last-child { border-bottom: 0; }
/* Confidence is not a risk level. It uses the accent ramp, never the status palette,
   so a MEDIUM-confidence axis on an otherwise clean record does not read as a warning. */
.axis-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.axis-card[data-confidence="medium"]::before { background: var(--accent-2); }
.axis-card[data-confidence="low"]::before { background: var(--faint); }
.axis-top { display: contents; }

.axis-top b { color: var(--accent); font: 700 9px/var(--data-lh) var(--mono); letter-spacing: .07em; }
.axis-card[data-confidence="medium"] .axis-top b { color: var(--accent-2); }
.axis-card[data-confidence="low"] .axis-top b { color: var(--faint); }
.axis-label { display: block; min-width: 0; overflow-wrap: anywhere; font: 600 12px/var(--data-lh) var(--mono); }
.axis-basis { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--muted); font: 500 10px/var(--data-lh) var(--mono); }
.axis-expand { border: 0; background: none; color: var(--accent); cursor: pointer; font: 700 8px/1 var(--mono); white-space: nowrap; }
/* The detail spans the full row width once opened. */
.axis-detail { grid-column: 1 / -1; }

.section-heading.compact { align-items: center; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tabs button { min-height: 28px; border: 0; padding: 0; background: transparent; color: var(--muted); cursor: pointer; font: 700 10px/1 var(--mono); }
.tabs button::before { content: "[ "; }
.tabs button::after { content: " ]"; }

.tabs span { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 3px; background: var(--surface-3); color: var(--text); font-size: 8px; }
.tab-panel { min-height: 180px; }
.jury-table-wrap { overflow-x: auto; }
/* The five juror columns still need more room than the measure gives, so this one keeps
   its scroll box. min-width is the point below which the source and basis columns start
   breaking mid-word, not the table's natural width. */
.jury-table { width: 100%; border-collapse: collapse; min-width: 620px; font-family: var(--mono); }
.jury-table th { padding: 6px 10px; text-align: left; color: var(--accent); border-bottom: 1px solid var(--line-strong); font-size: 9px; letter-spacing: .08em; }
.jury-table td { padding: 11px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; vertical-align: top; }
.jury-table td strong, .jury-table td small { display: block; }
.jury-table td strong { color: var(--text); font-size: 11px; }
.jury-table td small { margin-top: 3px; color: var(--faint); }
.confidence, .status { display: inline-flex; padding: 4px 6px; border-radius: 4px; font: 700 8px/1 var(--mono); }
.confidence.high, .status.responded { background: rgba(116,246,167,.1); color: var(--good); }
.confidence.medium { background: rgba(88,214,231,.1); color: var(--accent-2); }
.confidence.low, .status.abstained { background: rgba(255,209,106,.1); color: var(--warning); }
.dissent-list { display: grid; gap: 10px; }
.dissent-card { padding: 17px; border: 1px solid var(--line); border-left: 3px solid var(--warning); border-radius: 9px; background: var(--surface-2); }
.dissent-card[data-severity="high"] { border-left-color: var(--danger); }
.dissent-card header, .source-list section header { display: flex; justify-content: space-between; gap: 12px; }
.dissent-card h4 { margin: 0; font-size: .96rem; }
.dissent-card header span { color: var(--warning); font: 700 8px/1 var(--mono); }
.dissent-card p { margin: 8px 0 12px; color: var(--muted); font-size: .86rem; }
.dissent-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dissent-columns div { padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
.dissent-columns b { display: block; margin-bottom: 5px; font: 700 8px/1 var(--mono); color: var(--accent); }
.dissent-columns ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: .75rem; }
.empty-panel { display: grid; place-items: center; min-height: 180px; text-align: center; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); }
.empty-panel strong { color: var(--text); }
.empty-panel p { max-width: 650px; margin: 5px auto 0; font-size: .86rem; }
.context-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
.context-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.context-grid dt { color: var(--faint); font: 700 8px/1 var(--mono); letter-spacing: .06em; }
.context-grid dd { margin: 7px 0 0; color: var(--text); font-size: .85rem; overflow-wrap: anywhere; }
.code-toolbar { display: flex; justify-content: space-between; padding: 8px 11px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--faint); font: 700 8px/1 var(--mono); }
.code-toolbar button, .source-status-line button { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; }
.json-view { max-height: 430px; overflow: auto; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 0 0 8px 8px; background: var(--bg-deep); color: var(--accent-2); font: 500 11px/1.65 var(--mono); }
/* Provenance, not findings: when the record was taken, whether it came from cache, and
   the standing no-score disclaimer. It belongs under the evidence, not among it. */
/* The report's last line mirrors its first: the permalink, the actions, the standing
   no-score note and the attribution the licences require. */
.record-footer { display: grid; gap: 6px; padding: 8px 24px 16px; background: var(--bg-deep); }
.record-footer .report-line span { display: inline-flex; align-items: center; gap: 6px; }
.record-footer .attribution { margin: 6px 0 0; }
.watermark { color: var(--faint); font: 700 8px/1.4 var(--mono); letter-spacing: .08em; }

/* Vertical rhythm follows the measure down: 75px of air between sections read as a
   deliberate pause at 1200px and as a gap at 760px. */
/* Prose surfaces keep the reading face; the tool and the record are set in the report's mono. */
.section-shell { padding: 58px 24px; font-family: var(--sans); }
.drawer-shell, .modal-shell { font-family: var(--sans); }
.method-preview, .rules-section, .intent-links, .faq { border-top: 1px solid var(--line); }
/* Stacked, not side by side: two 340px columns cannot hold the counter-example and the
   verdict model at a readable size. The ≠ becomes a divider between them. */
.comparison-board { display: grid; align-items: stretch; gap: 14px; }
.comparison-board article { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.comparison-board .bad-model { opacity: .78; }
.board-label { color: var(--faint); font: 700 9px/1 var(--mono); letter-spacing: .08em; }
.mystery-number { margin: 18px 0 13px; color: var(--danger); font: 800 4rem/1 var(--mono); letter-spacing: -.08em; }
.mystery-number small { font-size: 1rem; letter-spacing: 0; }
.comparison-board p { color: var(--muted); }
.comparison-board ul { margin: 18px 0 0; padding-left: 18px; color: var(--faint); font-size: .86rem; }
.versus { display: grid; place-items: center; height: 26px; color: var(--accent); font: 700 1.5rem/1 var(--mono); }
.mini-axis-list { display: grid; gap: 7px; margin: 24px 0; }
.mini-axis-list span { display: flex; justify-content: space-between; gap: 20px; padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--accent-soft); font: 600 10px/1 var(--mono); }
.mini-axis-list b { color: var(--muted); }
.mini-axis-list i { color: var(--accent); font-style: normal; text-align: right; }


/* Five rules across a 760px measure would be 140px each. Two across, last one full. */
.rule-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 0; margin: 0; }
.rule-grid li:last-child { grid-column: span 2; }
.rule-grid li { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.rule-grid li > span { display: block; margin-bottom: 16px; color: var(--accent); font: 700 11px/1 var(--mono); }
.rule-grid h3 { margin: 0 0 9px; font-size: .95rem; line-height: 1.25; }
.rule-grid p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }


.intent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.intent-grid a { position: relative; min-height: 128px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.intent-grid a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.intent-grid span { display: block; color: var(--accent); font: 700 9px/1 var(--mono); }
.intent-grid strong { display: block; margin: 16px 0 6px; font-size: 1rem; }
.intent-grid small { color: var(--muted); font-size: .76rem; }
.intent-grid a::after { content: "↗"; position: absolute; right: 16px; top: 14px; color: var(--faint); }


/* align-items: start so an opened answer grows its own card instead of stretching the
   closed one beside it into a tall empty box — visible once the measure narrowed and
   answers started running to four or five lines. */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.faq summary { list-style: none; cursor: pointer; padding: 17px 42px 17px 18px; position: relative; font-weight: 650; font-size: .91rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 15px; color: var(--accent); font: 700 18px/1 var(--mono); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: .84rem; }

/* The header is chrome and spans the shell; the footer is content and sits on the
   measure, because its brand line and attribution are left-aligned text that would
   otherwise start 240px outside the column everything above it shares. Three columns do
   not fit at the measure, so the link row takes a line of its own. */
.site-footer { width: min(var(--col-wide), calc(100% - 48px)); margin: 0 auto; padding: 35px 0 42px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 20px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand strong { font: 800 14px/1 var(--mono); letter-spacing: .08em; }
.footer-brand p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
.footer-links { order: 3; grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px; }
/* The evidence routes used to be a full section on every page. The tool route now ends at
   the record, so the footer carries them — one line, still a real path for reader and crawler. */
.footer-routes { order: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px 14px; padding-top: 4px; }
.footer-routes a { color: var(--faint); font: 600 10px/1.4 var(--mono); letter-spacing: .05em; text-decoration: none; transition: color 150ms ease; }

.footer-meta { justify-self: end; text-align: right; font-family: var(--mono); }
.footer-meta span, .footer-meta small { display: block; }
.footer-meta span { color: var(--accent); font-size: 8px; }
.footer-meta small { margin-top: 5px; color: var(--faint); font-size: 8px; }

.drawer, .modal { border: 0; padding: 0; background: transparent; color: var(--text); }
.drawer::backdrop, .modal::backdrop { background: rgba(1, 5, 3, .78); backdrop-filter: blur(5px); }
.drawer { width: min(780px, 96vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; }
.drawer-shell { min-height: 100%; background: var(--surface-solid); border-left: 1px solid var(--line-strong); box-shadow: -30px 0 80px rgba(0,0,0,.35); }
.drawer-shell > header, .modal-shell > header { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 22px 25px; border-bottom: 1px solid var(--line); }
.drawer-shell header span, .modal-shell header span { color: var(--accent); font: 700 8px/1 var(--mono); letter-spacing: .08em; }
.drawer-shell header h2, .modal-shell header h2 { margin: 5px 0 0; font-size: 1.45rem; }
.drawer-close, .modal-shell header button, .modal-close { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 21px; }
.drawer-progress { height: 2px; background: var(--line); }
.drawer-progress span { display: block; width: 0; height: 100%; background: var(--accent); }
.drawer-body { height: calc(100dvh - 83px); overflow: auto; padding: 28px 30px 70px; }
.drawer-body .record-article { max-width: 78ch; }
.record-article .lead { margin: 0 0 25px; color: var(--text); font-size: 1.1rem; line-height: 1.6; }
.record-article h3 { margin: 29px 0 10px; font-family: var(--mono); font-size: .95rem; }
.record-article p, .record-article li, .record-article dd { color: var(--muted); font-size: .89rem; }
.record-article pre { overflow: auto; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-deep); color: var(--accent-2); font: 500 11px/1.65 var(--mono); }
.record-article code { font-family: var(--mono); }

.route-article .record-article { max-width: 74ch; }
.route-article .record-article > :first-child { margin-top: 0; }
.method-list { display: grid; gap: 7px; margin: 0; }
.method-list div { padding: 13px; border: 1px solid var(--line); border-radius: 8px; }

.method-list dd { margin: 6px 0 0; }
.method-code { color: var(--accent) !important; }
.method-table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 14px 0; }
.method-table th, .method-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.method-table thead th { color: var(--faint); font: 600 8px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.method-table tbody td:first-child { color: var(--text); font: 700 10px/1.4 var(--mono); white-space: nowrap; }
.method-table code { color: var(--accent); font-size: .78rem; }
.callout { display: block; margin: 24px 0; padding: 14px 15px; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--accent-soft); color: var(--muted); font-size: .85rem; }
.callout.warning { border-left-color: var(--warning); }
.bullet-list, .guide-steps { padding-left: 20px; }
.bullet-list li, .guide-steps li { margin: 7px 0; }
.source-status-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--muted); font: 700 9px/1 var(--mono); }

.source-list { display: grid; gap: 9px; }
.source-list section { padding: 15px; border: 1px solid var(--line); border-radius: 9px; }

.source-list section strong, .source-list section small { display: block; }
.source-list section small { margin-top: 4px; color: var(--accent); font: 700 8px/1 var(--mono); }
.source-list section header > span { color: var(--faint); font: 600 8px/1.4 var(--mono); text-align: right; }
.source-list section p { margin: 10px 0 0; font-size: .8rem; }
.correction-form { display: grid; gap: 13px; }
.correction-form label, .compare-inputs label { display: grid; gap: 6px; color: var(--faint); font: 700 9px/1 var(--mono); }
.correction-form input, .correction-form textarea, .compare-inputs input { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-deep); color: var(--text); outline: 0; font-family: var(--mono); }
.correction-form input, .compare-inputs input { height: 45px; padding: 0 12px; }
.correction-form textarea { min-height: 130px; padding: 12px; resize: vertical; }


.modal { width: min(680px, calc(100vw - 30px)); max-width: none; }
.modal-shell { padding-bottom: 22px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-solid); box-shadow: var(--shadow); }
.modal-shell > :not(header) { margin-left: 22px; margin-right: 22px; }
.compact-modal { width: min(520px, calc(100vw - 30px)); }
.compare-inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; margin-top: 20px; }

.compare-inputs > span { padding-bottom: 16px; color: var(--accent); font: 700 11px/1 var(--mono); }
#compareForm > .primary-button { margin-top: 15px; width: calc(100% - 44px); }
.compare-output { margin-top: 15px; }
.history-list { display: grid; gap: 8px; margin-top: 16px !important; margin-bottom: 14px !important; }
.history-item { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.history-item button { border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.history-item strong, .history-item small { display: block; }
.history-item strong { font-family: var(--mono); overflow-wrap: anywhere; }
.history-item small { margin-top: 4px; color: var(--faint); }
.history-item > span { color: var(--accent); font: 700 8px/1 var(--mono); }
.format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px !important; }
.format-grid button { min-height: 54px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--accent); cursor: pointer; font: 700 10px/1 var(--mono); }
.shortcut-list { margin-top: 18px !important; }
.shortcut-list div { display: grid; grid-template-columns: 70px 1fr; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.shortcut-list dt, .shortcut-list dd { margin: 0; }
kbd { border: 1px solid var(--line-strong); border-radius: 5px; padding: 4px 7px; background: var(--bg-deep); color: var(--accent); font: 700 10px/1 var(--mono); }
.popover {
  position: fixed; z-index: 150; width: min(330px, calc(100vw - 20px)); max-height: 48vh; overflow: auto;
  padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface-solid); box-shadow: var(--shadow); color: var(--muted);
  font: 500 11px/1.55 var(--mono); animation: popover-in 150ms ease both;
}
.popover h4 { margin: 0 0 9px; color: var(--text); font: 700 10px/1.35 var(--mono); letter-spacing: .06em; }
.popover p { margin: 0 0 9px; font-size: 12px; }
.popover dl { display: grid; gap: 5px; margin: 0; }
.popover dl div { display: grid; grid-template-columns: 88px 1fr; gap: 9px; }
.popover dt { color: var(--faint); font-size: 8px; letter-spacing: .06em; }
.popover dd { margin: 0; color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.popover b { display: block; margin: 11px 0 4px; color: var(--accent); font: 700 8px/1 var(--mono); letter-spacing: .06em; }
.popover ul { margin: 0; padding-left: 15px; font-size: 10px; }
.popover em { display: block; margin-top: 11px; padding-top: 9px; border-top: 1px dotted var(--line); color: var(--faint); font-size: 9px; font-style: normal; }
[data-popover-key] { cursor: help; }
.jury-table td[data-popover-key] { text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; }
.axis-card[data-reveal="true"] { animation: axis-reveal 320ms ease both; animation-delay: calc(var(--i, 0) * 70ms); }
.report-state[data-reveal="true"] { animation: log-line 260ms ease both; }
.deliberation-log li { animation: log-line 220ms ease both; }
@keyframes axis-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes log-line { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
@keyframes popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translate(-50%, 150%); max-width: calc(100vw - 30px); padding: 11px 15px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-solid); box-shadow: var(--shadow); color: var(--text); font: 700 10px/1.4 var(--mono); transition: transform 180ms ease; }
.toast[data-show="true"] { transform: translate(-50%, 0); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

@media (max-width: 1048px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-nav { display: none; }
  .identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-row { margin-left: 0; }
}

@media (max-width: 760px) {
  .site-header { min-height: 52px; padding-inline: 15px; }
  .brand-copy small { display: none; }
  .hero { padding: 8px 14px 0; }
  .lookup-form { padding: 10px 12px 8px; }
  .lookup-row { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
  .primary-button { width: 100%; padding-inline: 8px; }
  .lookup-row .primary-button kbd, .court-chrome > #connectionState { display: none; }
  .lookup-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; }
  .court-chrome { grid-template-columns: auto minmax(0, 1fr); }
  .court-title h1 { white-space: normal; font-size: 12px; }
  .scenario-label { width: 100%; }
  .report-line { gap: 2px 8px; letter-spacing: 0; }
  .command-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; }
  .command-divider, #powershellCommand, #powershellCommand + .copy-mini { display: none; }
  .result-stage { padding: 14px 14px 55px; }
  .result-empty { align-items: start; }

  .report-state { margin-left: 0; }
  .band-block { padding: 12px 14px 16px; }
  .identity-grid, .context-grid, .rule-grid, .intent-grid, .faq-grid, .dissent-columns, .format-grid, .compare-inputs { grid-template-columns: 1fr; }
  .identity-grid > div { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
  .result-actions { gap: 6px; }
  .result-actions .secondary-button { flex: 1 1 145px; }
  .identity-section, .axis-section, .evidence-section, .matrix-section, .observation-record, .deliberation, .record-footer { padding: 14px 14px 16px; }
  .section-heading.compact { display: grid; align-items: start; }
  /* One field per line below the two-column threshold; the placement is respecified
     rather than unset because the desktop rows are explicit. */
  .axis-card { grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; }
  .axis-card .axis-top b { justify-self: end; }
  .axis-card .axis-label { grid-column: 1 / -1; grid-row: 2; }
  .axis-card .axis-basis { grid-column: 1 / -1; grid-row: 3; }
  .axis-card .axis-expand { grid-column: 1; grid-row: 4; justify-self: start; }
  .axis-card .axis-detail { grid-column: 1 / -1; grid-row: 5; }
  /* Touch targets for the value-level copy affordances. */
  .copy-inline, .copy-mini { min-height: 44px; min-width: 44px; }
  .tabs { width: 100%; overflow-x: auto; }
  .tabs button { flex: 1 0 auto; }


  .section-shell { padding: 55px 14px; }

  .rule-grid li:last-child { grid-column: auto; }
  .intent-grid a { min-height: 130px; }
  .site-footer { width: calc(100% - 28px); grid-template-columns: 1fr; align-items: start; }
  .footer-meta { justify-self: start; text-align: left; }
  .footer-links { order: initial; grid-column: auto; justify-content: flex-start; }
  .drawer { width: 100vw; }
  .drawer-shell { border-left: 0; }
  .drawer-body { padding: 22px 17px 60px; }


  .compare-inputs > span { padding: 0; text-align: center; }
}

@media (max-width: 410px) {
  .hero, .site-header { padding-inline: 10px; }
  .result-stage, .section-shell { padding-left: 10px; padding-right: 10px; }

  .brand-mark { width: 37px; height: 37px; }
  .brand-copy strong { font-size: 14px; }
  .header-actions { gap: 4px; }
  .ip-line { align-items: start; flex-wrap: wrap; }
  .report-headline { white-space: normal; }
  .identity-grid > div { grid-template-columns: 88px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media print {
  :root { --bg: #fff; --surface-solid: #fff; --surface-2: #fff; --text: #111; --muted: #333; --line: #bbb; --line-strong: #888; --accent: #075d36; }
  body { background: #fff; }
  .scanline, .site-header, .lookup-form, .command-bar, .result-empty, .result-actions, .deliberation, .section-shell, .site-footer, .page-rail, dialog, .popover, .toast { display: none !important; }
  .first-screen { display: block; }
  .hero { min-height: 0; padding: 0; }
  .court-shell { display: none; }
  .result-stage { display: block !important; padding: 0; }
  .result-card { box-shadow: none; border-color: #777; }
  .summary-expand, .summary-actions, .copy-inline, .retry-lookup { display: none !important; }
  .axis-grid { grid-template-columns: repeat(2, 1fr); }
  .tab-panel[hidden] { display: none !important; }
  .record-footer { background: #fff; }
}

.compare-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 14px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.compare-table th, .compare-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table thead th { color: var(--accent); font: 700 9px/1.3 var(--mono); letter-spacing: .06em; }
.compare-table tbody th { width: 25%; color: var(--faint); font: 700 9px/1.4 var(--mono); letter-spacing: .05em; }
.compare-table td span { display: block; color: var(--text); }
.compare-table td i { display: inline-block; margin-top: 5px; font-style: normal; }
.compare-table tr[data-diff="true"] { background: var(--accent-soft); }
.compare-table tr[data-diff="true"] th { box-shadow: inset 3px 0 0 var(--warning); }
.compare-table[data-only="true"] tr:not([data-diff="true"]) { display: none; }
.axis-detail { margin-top: 11px; padding-top: 11px; border-top: 1px dotted var(--line); }
.axis-detail ul { margin: 0 0 9px; padding-left: 16px; color: var(--muted); font-size: .78rem; }
.axis-detail dl { display: grid; gap: 6px; margin: 0 0 9px; }
.axis-detail dt { color: var(--accent); font: 700 8px/1.3 var(--mono); letter-spacing: .05em; }
.axis-detail dd { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.history-actions { display: flex; align-items: center; gap: 10px; }
.history-time { color: var(--faint); font: 600 9px/1 var(--mono); }
.history-stamp { font: 700 8px/1 var(--mono); letter-spacing: .05em; font-style: normal; color: var(--muted); }
.history-stamp[data-band="no-adverse-record"] { color: var(--ok); }
.history-stamp[data-band="limited"] { color: var(--unknown); }
.history-stamp[data-band="disputed"], .summary-sources dd[data-agreement="differ"] { color: var(--caution); }
.history-stamp[data-band="flagged"] { color: var(--risk); }
.history-stamp[data-band="listed"] { color: var(--risk-deep); }
.jury-table tr[data-flash="true"] { animation: row-flash 1.6s ease both; }
@keyframes row-flash { 0%, 70% { background: var(--accent-soft); } 100% { background: transparent; } }
.section-shell:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 480px; }

@media (max-width: 760px) {
  .modal:not(.drawer)::backdrop { background: rgba(3, 8, 6, .72); }
  .modal:not(.drawer) { margin: auto auto 0; width: 100vw; max-width: 100vw; }
  .modal:not(.drawer) .modal-shell { border-radius: 14px 14px 0 0; max-height: 86dvh; }
  .compare-table th, .compare-table td { padding: 8px 6px; font-size: .76rem; }
  .history-actions { flex-wrap: wrap; justify-content: flex-end; }
}
.attribution { margin: 10px 0 0; color: var(--faint); font: 500 9px/1.6 var(--mono); }
.attribution a { color: var(--muted); }
.site-attribution { order: 4; grid-column: 1 / -1; max-width: 96ch; }

/* P18: panels are rounded again, in the reference's radius; the report's inner rules
   and matrix cells stay square so the table still reads as a table. */
.court-shell, .summary-card, .result-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--panel-glow); }


/* Optional attributed publisher chart: no painted values outside the frame. */
#asnTrafficToggle,#asnTrafficReload { min-height:44px; font-size:12px; }
/* P35: 44px stays on touch widths; 32px on the desktop measure. */
@media(min-width:761px) { #asnTrafficToggle { min-height:32px; } }
#asnTrafficRow a { margin-left:10px; color:var(--muted); }
/* The note shares the toggle's 44px line instead of opening a third line under it. */
#trafficPrivacy { flex:1 1 10ch; min-width:0; color:var(--muted); font:500 11px/1.4 var(--mono); }
.summary-rows > .traffic-panel { display:block; padding:8px 20px; border-block:1px solid var(--line); }
.traffic-panel p,.traffic-tools { margin:4px 0; color:var(--muted); font:500 12px/1.5 var(--mono); }
.traffic-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
#asnTrafficFrame iframe { display:block; width:100%; height:280px; border:0; background:var(--surface-solid); color-scheme:dark; }
html[data-theme="light"] #asnTrafficFrame iframe { color-scheme:light; }
@media(max-width:760px) { #asnTrafficFrame iframe { height:400px; } .summary-rows > .traffic-panel { padding-inline:8px; } }
@media print { #asnTrafficRow,.traffic-panel { display:none!important; } }

/* Native values, never a chart framework. */
.native-traffic { flex-basis:100%; width:100%; padding-block:1px; }
#asnTrafficRow dd { position:relative; }
/* P35: both controls sit on the values line; the bar absorbs the width, so nothing wraps. */
.native-traffic:not([hidden]) ~ #asnTrafficLink { position:absolute; right:0; top:2px; min-height:22px; }
.native-traffic:not([hidden]) ~ #asnTrafficToggle { position:absolute; right:76px; top:0; min-height:22px; }
.traffic-values { display:flex; align-items:center; gap:12px; padding-right:170px; font-size:13px; }
.traffic-bar { flex:1 1 80px; display:flex; height:6px; margin:0; background:var(--line); border-radius:3px; overflow:hidden; }
.traffic-bar i:first-child { background:var(--accent); }
.traffic-bar i:last-child { background:var(--risk); }
.native-traffic small { display:block; color:var(--muted); font:500 11px/1.3 var(--mono); }
.native-traffic[data-state="stale"] small:last-child { color:var(--caution); }
.asn-domain { display:block; color:var(--muted); font-size:11px; line-height:1.3; }
.asn-domain:empty { display:none; }
.score-label { font:700 12px/1.4 var(--mono); letter-spacing:.06em; color:var(--text); }
/* P33: band intervals on the track; span outlines the transport interval; tick is the point. */
.score-scale { position:relative; height:8px; margin:5px 0 14px; border-radius:4px; background:linear-gradient(90deg,var(--risk-deep) 0 25%,var(--line) 25% 30%,var(--risk) 30% 45%,var(--line) 45% 50%,var(--caution) 50% 65%,var(--line) 65% 70%,var(--ok) 70%); }
.scale-span { position:absolute; inset-block:-3px; left:var(--lo); width:calc(var(--hi) - var(--lo)); border:2px solid var(--text); border-radius:6px; }
.scale-tick { position:absolute; top:-5px; left:calc(var(--at) - 1px); width:2px; height:18px; background:var(--text); }
.score-scale[data-tick="false"] .scale-tick { display:none; }
.scale-ticks { position:absolute; top:10px; left:0; right:0; color:var(--faint); font:600 10px/1 var(--mono); }
.scale-ticks i { position:absolute; transform:translateX(-50%); font-style:normal; }
.scale-ticks i:first-child { transform:none; }
.scale-ticks i:last-child { transform:translateX(-100%); }
.score-why { display:grid; grid-template-columns:6ch 1fr; gap:0 12px; margin:4px 0 2px; font:500 12px/1.35 var(--mono); }
.why-label { color:var(--label); font-weight:600; letter-spacing:.04em; }
#scoreWhyList { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
#scoreWhyList li { display:grid; grid-template-columns:3.5ch 1fr; gap:0 8px; color:var(--text); overflow-wrap:anywhere; }
#scoreWhyList b { text-align:right; font-weight:600; }
#scoreWhyList li[data-zero="true"] { color:var(--faint); }
/* Range lines carry no number: one full-width column instead of two wrapping halves. */
#scoreWhyList:has(li > b:empty), #scoreWhyList li:has(> b:empty) { grid-template-columns:1fr; }

@media(max-width:760px) { #scoreWhyList { grid-template-columns:1fr; } .score-why { grid-template-columns:1fr; } }
#verdictStatus span + span::before { content:" · "; }
.score-reading { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:6px; max-width:100%; }
.band-kicker strong { font-size:10px; }
.score-reading strong { font:700 32px/1 var(--mono); color:var(--text); }
.score-reading small { color:var(--muted); font-size:12px; }
#scoreValue[data-numeric="false"] { font-size:16px; }
.score-details { border-top:1px solid var(--line); margin-top:4px; font:500 12px/1.6 var(--mono); }
.score-details summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; color:var(--muted); }
.score-details summary::before { content:"+"; color:var(--accent); }
.score-details[open] summary::before { content:"−"; }
.score-details p { margin:6px 0; color:var(--muted); }
.score-details ol { padding-left:20px; margin:8px 0; }
.score-details li { margin:5px 0; overflow-wrap:anywhere; }
@media print { .score-details > *,details.observation-history > * { display:block!important; } .score-details::details-content,details.observation-history::details-content { display:contents!important; content-visibility:visible!important; } }

/* Summary: terminal materials, source rows and independent evidence. */
.summary-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 4px 0 4px; }
.summary-line .report-line { flex: 1 1 auto; }
.summary-actions { display: inline-flex; gap: 6px; }
#resultFreshness[data-stale="true"] { color: var(--caution); font-weight: 700; }
.summary-card { border: 1px solid var(--line-strong); background: var(--surface-solid); padding: 1px 0 0; }

.summary-rows { margin: 0; }
.summary-rows > div {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 6px 16px;
  padding: 3px 20px;
}
.summary-rows > div:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.summary-rows dt { color: var(--text); font: 700 12px/1.4 var(--mono); letter-spacing: .04em; }
.summary-rows dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); font: 500 15px/1.3 var(--mono); }
.summary-rows dd b { color: var(--accent); font-weight: 700; }
.summary-sub { padding-block: 2px !important; }
#asnTrafficRow.summary-sub { padding-block: 0 !important; } /* the toggle is the row height (P35: 32px on desktop) */
.summary-sub dt { padding-left: 12px; color: var(--faint); font-weight: 600; font-size: 12px; }
.summary-sub dd, .summary-group dd { color: var(--muted); font-size: 13px; }
#asnTrafficRow dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#asnTrafficLink { color: var(--accent); text-underline-offset: 3px; }
.summary-row dt .info-dot { vertical-align: middle; }
.summary-rows > .summary-sources { display: grid; gap: 0; padding: 2px 20px 3px; grid-template-columns: 1fr; } /* P35: six rows */
.summary-sources > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 16px; padding: 0 0 0 12px; }
.summary-sources dt { color: var(--faint); font: 600 12px/1.2 var(--mono); }
.summary-sources dd { margin: 0; color: var(--text); font: 500 13px/1.2 var(--mono); }

.summary-sources dd[data-agreement="abstain"] { color: var(--faint); }

.summary-ip .ip-line h2 { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: 26px; text-shadow: var(--glow); }
.summary-ip .copy-inline { min-width: 44px; min-height: 44px; font-size: 11px; }
.summary-ip .ip-line:has(h2[data-long="true"]) { flex-wrap: nowrap; }
#resultIp[data-long="true"] { font-size: 18px; }
.summary-rows .chip { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; padding: 4px 8px; border-radius: 6px; font: 700 11px/1.4 var(--mono); letter-spacing: .03em; }
/* P33 core block: ROUTE and IP TYPE directly above the score. */
#routeRow { border-top: 1px solid var(--line-strong); }
.route-prefix { color: var(--muted); font-size: 12px; }
.chip[data-tone="conflict"] { background: var(--caution); color: var(--bg-deep); }
@media (min-width: 761px) { .summary-rows > .summary-core { padding-block: 2px; } .summary-core .chip { min-height: 24px; padding-block: 2px; } }
.summary-snapshot { padding: 6px 20px 5px; border-top: 1px solid var(--line); }
.snapshot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.snapshot-head strong, .band-kicker strong { color: var(--accent); font: 800 12px/1.3 var(--mono); letter-spacing: .04em; }
.snapshot-head span, .band-kicker span { color: var(--faint); font: 700 10px/1.4 var(--mono); letter-spacing: .02em; }
.snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 5px 0 0; }
.snapshot-grid > div { min-width: 0; padding: 0 12px; border-left: 1px dotted var(--line); }
.snapshot-grid > div:first-child { padding-left: 0; border-left: 0; }
.snapshot-grid dt { color: var(--muted); font: 700 10px/1.4 var(--mono); letter-spacing: .04em; }
.snapshot-grid dd { margin: 2px 0 0; color: var(--text); font: 500 13px/1.4 var(--mono); overflow-wrap: anywhere; }
.summary-card .band-block { padding: 4px 20px 3px; border-top: 1px solid var(--line); border-bottom: 0; }
.band-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.summary-card .band-head { justify-content: space-between; gap: 2px 6px; }
.summary-card .band-label { border-radius: 4px; font-size: 15px; }
.summary-card .qualifier-chip { padding: 2px 5px; font-size: 10px; letter-spacing: 0; }
.summary-card .verdict-plain { font-size: 12px; line-height: 1.35; }
.summary-expand { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin-top: 2px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); text-decoration: none; font: 700 12px/1.3 var(--mono); letter-spacing: .03em; }
.summary-expand b { width: 8px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; font-size: 0; transform: rotate(45deg); transition: transform 150ms ease; }
.summary-expand:hover, .summary-expand:focus-visible { background: var(--accent-soft); color: var(--accent); text-shadow: var(--glow); }
.summary-expand:hover b, .summary-expand:focus-visible b { transform: translateY(2px) rotate(45deg); }
.summary-expand[aria-expanded="true"] b { transform: rotate(225deg); }
.brand-copy strong, .prompt, .report-brand { text-shadow: var(--glow); }
.report-head { padding: 10px 24px 6px; }
@media (max-width: 760px) {
  .summary-rows > div { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 8px 14px; }
  .summary-rows > .summary-ip { grid-template-columns: 1fr; gap: 3px; }
  .summary-rows dd { font-size: 13px; }
  .summary-sub dt { padding-left: 0; }
  .summary-sources { padding: 4px 14px 8px !important; }
  .summary-sources > div { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding-left: 0; }
  .summary-snapshot { padding: 8px 14px 6px; }
  .snapshot-head span { display: none; }
  .snapshot-grid { grid-template-columns: 1fr; margin-top: 3px; }
  .snapshot-grid > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 4px 0; border: 0; border-top: 1px dotted var(--line); }
  .snapshot-grid > div:first-child { border-top: 0; }
  .snapshot-grid dd { margin: 0; }
  .summary-card .band-block { padding: 8px 14px 5px; }
}