/* Design tokens. Every color, radius, space, and font used below comes from this block. */
:root {
  --background: #ffffff;
  --foreground: #1d1d1f;
  --muted: #f5f5f7;
  --muted-foreground: #6e6e73;
  --subtle-foreground: #86868b;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --input: rgba(0, 0, 0, 0.1);
  --ring: #0066cc;
  --accent: #f5f5f7;
  --inspector: #fbfbfd;
  --paper: #faf8f5;
  --paper-tint: #f3efe8;
  --paper-border: rgba(63, 58, 51, 0.12);
  --paper-foreground: #3a352f;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --t11: 12px; --t12: 13px; --t13: 14px; --t14: 15px; --t16: 16px; --t20: 20px; --t28: 28px;

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Source Sans 3", system-ui, sans-serif;
  --font-source: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Source Sans 3", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "IBM Plex Mono", Menlo, monospace;

  /* status and claim colors: soft tinted fills, clean readable foregrounds */
  --green-50: #eefbf3; --green-200: #bbf7d0; --green-400: #34c759; --green-700: #157347;
  --sky-50: #f0f7ff; --sky-200: #bae6fd; --sky-400: #007aff; --sky-700: #0055b3;
  --amber-50: #fff9eb; --amber-200: #fde68a; --amber-300: #f59e0b; --amber-400: #ff9f0a; --amber-700: #9a5b00;
  --rose-50: #fff2f4; --rose-200: #fecdd3; --rose-700: #c41c3b;
  --gray-50: #fbfbfd; --gray-100: #f5f5f7; --gray-200: #e8e8ed; --gray-300: #d2d2d7; --gray-400: #86868b; --gray-500: #6e6e73; --gray-700: #424245; --gray-800: #1d1d1f;
  --enduring: var(--green-400); --renamed: var(--sky-400); --superseded: var(--amber-400); --dropped: var(--gray-400);
  --hf-yellow: #ffd21e; --hf-orange: #ff9f0a; --hf-yellow-50: #fff9eb;
  --card: #ffffff;
  --side-britannica: #b89f72; --side-wikipedia: var(--gray-400);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-ui); font-size: var(--t14); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { letter-spacing: -0.02em; margin: 0; font-weight: 600; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t28); line-height: 1.18; letter-spacing: -0.024em; }
h2 { font-size: var(--t16); }
h3 { font-size: var(--t14); }
p { margin: 0; }
code { font-family: var(--font-mono); font-size: var(--t12); background: var(--gray-100); color: var(--gray-700); padding: 2px 5px; border-radius: 5px; }

/* Links: no browser blue, no default underline. */
a { color: inherit; text-decoration: none; }
a.link { color: var(--foreground); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 3px; transition: text-decoration-color .15s, color .15s; }
a.link:hover { text-decoration-color: var(--foreground); }
a.ext::after { content: "\2197"; font-size: 11px; color: var(--subtle-foreground); margin-left: 2px; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.small { font-size: var(--t12); }
.muted { color: var(--muted-foreground); }
.mono { font-family: var(--font-mono); }
.num { font-family: var(--font-mono); font-size: var(--t13); font-variant-numeric: tabular-nums; }

/* Top utility bar: frosted translucent glass */
.top {
  height: 52px; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s6);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-family: var(--font-display); font-weight: 600; font-size: var(--t14); letter-spacing: -0.015em; white-space: nowrap; color: var(--foreground); display: inline-flex; align-items: center; gap: 6px; }
.brand span { color: var(--muted-foreground); font-weight: 400; }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t13); color: var(--muted-foreground); }
.crumbs .sep { color: var(--gray-300); }
.crumbs .here { color: var(--foreground); font-weight: 500; white-space: nowrap; }
.crumbs .head { font-family: var(--font-source); font-size: var(--t13); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 240px; }
.stepper { display: inline-flex; gap: 4px; margin-left: 4px; }
.top nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.top nav .btn { height: 30px; border-radius: 999px; border: 0; padding: 0 12px; font-size: var(--t13); font-weight: 500; color: var(--muted-foreground); background: transparent; }
.top nav .btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--foreground); }
.top nav .btn[aria-current="page"] { background: var(--gray-100); color: var(--foreground); font-weight: 600; }
.legend-key { display: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s1); height: 28px; padding: 0 var(--s3);
  font: 500 var(--t13)/1 var(--font-ui); color: var(--muted-foreground); background: transparent;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--accent); color: var(--foreground); }
.btn[aria-current="page"] { color: var(--foreground); background: var(--accent); }
.btn.secondary { border-color: var(--border-strong); color: var(--foreground); background: var(--background); }
.btn.secondary:hover { background: var(--gray-100); }
.btn.icon { width: 26px; height: 26px; padding: 0; justify-content: center; font-size: var(--t13); border-radius: 999px; }
.btn.sm { height: 24px; padding: 0 10px; font-size: var(--t12); }
.btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* Chips: toggles and filters */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  --c: var(--gray-400);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font: 500 var(--t12)/1.2 var(--font-ui); color: var(--muted-foreground); background: var(--gray-100);
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.chip:hover { color: var(--foreground); background: var(--gray-200); }
.chip[aria-pressed="true"] {
  color: var(--foreground);
  background: var(--background);
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.chip .sw { width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: .45; transition: opacity .15s; }
.chip[aria-pressed="true"] .sw { opacity: 1; }
.chip .count { font-family: var(--font-mono); font-size: 11px; color: var(--subtle-foreground); }
.chip.enduring { --c: var(--green-400); } .chip.renamed { --c: var(--sky-400); }
.chip.superseded { --c: var(--amber-400); } .chip.dropped { --c: var(--gray-400); }

/* Pills and badges: soft, borderless Apple-like tags */
.pill {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 2px 8px; border-radius: 999px;
  font: 500 11px/16px var(--font-ui); letter-spacing: .005em; white-space: nowrap;
  background: var(--gray-100); color: var(--gray-700); border: 1px solid transparent;
}
.pill.ok, .pill.matched, .pill.enduring { background: var(--green-50); color: var(--green-700); }
.pill.renamed { background: var(--sky-50); color: var(--sky-700); }
.pill.superseded { background: var(--amber-50); color: var(--amber-700); }
.pill.dropped { background: var(--gray-100); color: var(--gray-500); }
.pill.warn, .pill.uncertain { background: var(--amber-50); color: var(--amber-700); }
.pill.bad { background: var(--rose-50); color: var(--rose-700); }
.pill.gen { background: var(--gray-100); color: var(--muted-foreground); }
.meta {
  display: inline-block; font: 400 11px/16px var(--font-mono); padding: 2px 6px; border-radius: 5px;
  background: var(--gray-100); color: var(--gray-500); white-space: nowrap; font-variant-numeric: tabular-nums;
}
a.meta { transition: background-color .15s; } a.meta:hover { background: var(--gray-200); color: var(--foreground); }
.cite { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--gray-100); color: var(--gray-500); white-space: nowrap; }
a.cite:hover { background: var(--gray-200); color: var(--foreground); }
.cite.b { background: var(--paper-tint); color: var(--paper-foreground); }
.dot-status { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); }
.dot-status.ok { background: var(--green-400); } .dot-status.bad { background: #fb7185; }

/* Key-value grid for scores */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--s2) var(--s3); margin: var(--s2) 0 0; }
.kv div { min-width: 0; }
.kv dt { font: 500 var(--t11)/1.4 var(--font-ui); color: var(--subtle-foreground); }
.kv dd { margin: 0; font: 400 var(--t13)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.note { font-size: var(--t13); color: var(--amber-700); background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: var(--radius); padding: var(--s2) var(--s3); margin: var(--s3) 0; }

/* Document pages (index, analysis, explore, how) */
.wide { max-width: 1200px; margin: 0 auto; padding: 32px var(--s6) 56px; }
.pagehead { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s6); }
.lead { color: var(--muted-foreground); font-size: 16px; max-width: 66ch; line-height: 1.55; }
.wide h2 { font-size: 18px; letter-spacing: -0.015em; margin: 40px 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
.wide h3 { font-size: var(--t13); margin: 0 0 var(--s2); }
.wide > p, .wide section > p { margin: var(--s2) 0; }
.prose-list { padding-left: var(--s4); margin: var(--s2) 0; color: var(--gray-700); }
.prose-list li { margin: var(--s1) 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.stats li { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--gray-50); display: flex; flex-direction: column; gap: 2px; }
.stats b { font: 600 18px/1.2 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--foreground); }
.stats span { font: 400 var(--t12)/1.3 var(--font-ui); color: var(--muted-foreground); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--s3); margin: 0 0 var(--s3); }
.toolbar .chips { flex: 1 1 auto; }
.toolbar .count-label { margin-left: auto; font-size: var(--t12); color: var(--subtle-foreground); font-family: var(--font-mono); }
.search { position: relative; display: inline-flex; align-items: center; width: 260px; max-width: 100%; }
.search svg { position: absolute; left: 11px; width: 14px; height: 14px; color: var(--subtle-foreground); pointer-events: none; }
.search input {
  width: 100%; height: 32px; padding: 0 var(--s3) 0 32px; font: 400 var(--t13) var(--font-ui); color: var(--foreground);
  background: var(--gray-100); border: 1px solid transparent; border-radius: 999px; outline: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--subtle-foreground); }
.search input:focus { background: var(--background); border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }

/* Clean tables */
.tablewrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: auto; max-height: calc(100vh - 120px); background: var(--background); box-shadow: 0 1px 2px rgba(0, 0, 0, .02); }
table.data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t13); }
table.data th {
  position: sticky; top: 0; z-index: 1;
  background: rgba(251, 251, 253, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-align: left; white-space: nowrap;
  font: 500 var(--t11)/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--subtle-foreground);
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
table.data td { padding: 8px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.045); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background-color .12s; }
table.data tbody tr:hover { background: var(--gray-50); }
table.data td.n, table.data th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.n { font-family: var(--font-mono); color: var(--muted-foreground); }
table.data td.n.zero { color: var(--gray-300); }
tr.rowlink { cursor: pointer; }
.thumb { width: 38px; height: 50px; object-fit: cover; object-position: top; display: block; border-radius: 4px; border: 1px solid var(--paper-border); background: var(--paper); }
td.rowid a { font-family: var(--font-mono); font-size: var(--t13); color: var(--muted-foreground); }
td.head { font-family: var(--font-source); font-size: var(--t14); color: var(--paper-foreground); max-width: 320px; }
td.head .pill { margin-left: var(--s2); font-family: var(--font-ui); }
td.pm { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.pm .pill { margin-right: 6px; }
td.latex { white-space: nowrap; }
td.latex a { margin-left: 6px; font-size: var(--t12); color: var(--muted-foreground); }
td.latex a:hover { color: var(--foreground); }

/* Page view workbench */
body.page-view { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.workbench { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 380px; }
.pane { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border-right: 1px solid var(--border); }
.pane:last-child { border-right: none; }
.pane-head {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
  min-height: 42px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pane-title { font: 600 var(--t12)/1.4 var(--font-ui); color: var(--muted-foreground); }
.pane-head .end { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.pane-body { padding: var(--s4); }

.pane.source { background: var(--paper); }
.pane.source .pane-head { background: rgba(250, 248, 245, 0.88); border-bottom-color: var(--paper-border); }
.scanwrap { position: relative; width: 100%; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 0 0 1px var(--paper-border); background: var(--paper-tint); }
.scanwrap img { position: absolute; inset: 0; width: 100%; height: 100%; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
rect.blk { fill-opacity: .06; stroke-width: 1.25px; stroke-opacity: .8; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill-opacity .15s, opacity .15s; }
rect.blk:hover { fill-opacity: .22; }
.overlay.dim rect.blk { opacity: .2; }
.overlay.dim rect.blk.hl { opacity: 1; fill-opacity: .25; stroke-width: 2.5px; }
.tip { position: absolute; top: var(--s2); left: var(--s2); background: var(--foreground); color: var(--background); font: 400 var(--t11)/1.4 var(--font-mono); padding: 2px 6px; border-radius: var(--radius-sm); pointer-events: none; }

details.blocktext { margin-top: var(--s4); border-top: 1px solid var(--paper-border); }
details.blocktext summary { cursor: pointer; padding: var(--s3) 0; font: 500 var(--t12) var(--font-ui); color: var(--muted-foreground); list-style: none; display: flex; align-items: center; gap: var(--s2); }
details.blocktext summary::-webkit-details-marker { display: none; }
details.blocktext summary::before { content: "\203A"; display: inline-block; width: 12px; font-size: var(--t16); line-height: 1; transition: transform .15s; }
details.blocktext[open] summary::before { transform: rotate(90deg); }
.blocktext ol { list-style: none; padding: 0; margin: 0; }
.blocktext li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s2); padding: 6px 0; border-top: 1px solid var(--paper-tint); font: 400 var(--t14)/1.55 var(--font-source); color: var(--paper-foreground); transition: background-color .3s; }
.blocktext li .ord { font: 400 var(--t11)/1.9 var(--font-mono); color: var(--subtle-foreground); text-align: right; }
.blocktext .cls { display: block; font: 600 var(--t12)/1.4 var(--font-ui); }
.blocktext li.flash { background: var(--amber-50); }

.prov { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--paper-border); }
.prov dt { font: 600 var(--t11)/1.6 var(--font-ui); color: var(--muted-foreground); }
.prov dd { margin: 0; font: 400 var(--t11)/1.6 var(--font-mono); color: var(--gray-700); word-break: break-all; }

.pane.latex { background: var(--background); display: flex; flex-direction: column; overflow: hidden; }
.pane.latex .pane-head { background: var(--background); }
iframe.pdf { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--muted); display: block; }
.pane.latex .pane-body { overflow: auto; }
pre.err { white-space: pre-wrap; font: 400 var(--t11)/1.5 var(--font-mono); background: var(--rose-50); color: var(--rose-700); border: 1px solid var(--rose-200); border-radius: var(--radius); padding: var(--s3); }

/* Inspector */
.pane.inspector { background: var(--inspector); }
.pane.inspector .pane-head { background: var(--inspector); }
.isec { padding: 0 var(--s4) var(--s4); border-bottom: 1px solid var(--border); }
.isec:last-child { border-bottom: none; }
.isec-h { display: flex; align-items: baseline; gap: var(--s2); padding-top: var(--s6); margin-bottom: var(--s3); }
.isec-h h2 { font: 600 var(--t12)/1.4 var(--font-ui); color: var(--muted-foreground); }
.isec-h .aside { white-space: nowrap; margin-left: auto; font-size: var(--t11); color: var(--subtle-foreground); }
.isec p, .isec .text { font-size: var(--t13); color: var(--gray-700); }
.isec .why { font-size: var(--t12); color: var(--muted-foreground); margin-top: var(--s3); line-height: 1.55; }
.matchline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2); font-size: var(--t14); }
.matchline .title { font-weight: 500; }
.subline { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.topic { font-size: var(--t12); color: var(--muted-foreground); margin-top: var(--s2); }
.topic b { font-family: var(--font-source); font-weight: 400; font-size: var(--t14); color: var(--paper-foreground); }

/* Drift */
.sbar { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--gray-100); margin: var(--s2) 0; }
.sbar.lg { height: 10px; }
.seg { height: 100%; min-width: 2px; }
.seg.enduring, .dot.enduring { background: var(--enduring); }
.seg.renamed, .dot.renamed { background: var(--renamed); }
.seg.superseded, .dot.superseded { background: var(--superseded); }
.seg.dropped, .dot.dropped { background: var(--dropped); }
.slegend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--t12); color: var(--muted-foreground); }
.slegend span { display: inline-flex; align-items: center; gap: 6px; }
.slegend b { font: 400 var(--t12) var(--font-mono); color: var(--foreground); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.gen-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--t12); color: var(--muted-foreground); line-height: 1.5; }

.claim { --accent-c: var(--gray-300); background: var(--background); border: 1px solid var(--border); border-left: 3px solid var(--accent-c); border-radius: var(--radius); padding: var(--s3); margin: var(--s3) 0 0; }
.claim.enduring { --accent-c: var(--green-400); } .claim.renamed { --accent-c: var(--sky-400); }
.claim.superseded { --accent-c: var(--amber-400); } .claim.dropped { --accent-c: var(--gray-400); }
.claim-h { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--t13); font-weight: 500; line-height: 1.45; }
.q { margin-top: var(--s2); padding: var(--s2); border-radius: var(--radius-sm); font-size: var(--t13); line-height: 1.55; }
.q .cite { margin-right: 6px; vertical-align: 1px; }
.qb { background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-tint); font-family: var(--font-source); font-style: italic; font-size: var(--t14); color: var(--paper-foreground); }
.qb .cite { font-style: normal; }
.qw { font-family: var(--font-ui); color: var(--gray-700); }
.qw.missing { color: var(--muted-foreground); font-size: var(--t12); }

.terms { list-style: none; padding: 0; margin: 0; }
.terms li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--t13); }
.terms li:first-child { border-top: none; }
.terms .old { font-family: var(--font-source); font-size: var(--t14); color: var(--paper-foreground); }
.terms .arrow { color: var(--subtle-foreground); }
.terms .new { font-weight: 500; }
.terms .cites { margin-left: auto; display: inline-flex; gap: var(--s1); }
.pairs { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s3); font-size: var(--t12); color: var(--muted-foreground); }

/* Entries */
.entries { list-style: none; padding: 0; margin: 0 calc(-1 * var(--s4)); }
.entry { padding: var(--s3) var(--s4); border-top: 1px solid var(--border); position: relative; transition: background-color .15s; }
.entry:first-child { border-top: none; }
.entry:hover { background: var(--background); }
.entry::before { content: ""; position: absolute; left: 0; top: var(--s3); bottom: var(--s3); width: 2px; border-radius: 2px; background: transparent; }
.entry.matched::before { background: var(--green-400); }
.entry.no_clear_counterpart::before { background: repeating-linear-gradient(var(--amber-300) 0 4px, transparent 4px 7px); }
.entry.error::before { background: #fb7185; }
.ehead { display: flex; align-items: center; gap: var(--s2); }
.ehead b { font-family: var(--font-source); font-weight: 500; font-size: var(--t16); letter-spacing: -0.01em; color: var(--paper-foreground); }
.snippet { font-family: var(--font-source); font-size: var(--t13); line-height: 1.55; color: var(--paper-foreground); background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-tint); padding: var(--s2); border-radius: var(--radius-sm); margin: var(--s2) 0; }
.entry .match { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t13); }
.entry .reason { font-size: var(--t12); color: var(--muted-foreground); margin-top: var(--s2); line-height: 1.5; }
.entry .saved { font: 400 var(--t11) var(--font-mono); color: var(--subtle-foreground); margin-top: var(--s2); word-break: break-all; }

/* Plate */
.nstrip { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); }
.nthumb { display: flex; flex-direction: column; gap: 2px; font-size: var(--t11); min-width: 72px; width: 72px; color: var(--muted-foreground); }
.nthumb img { width: 72px; height: 96px; object-fit: cover; object-position: top; border: 1px solid var(--paper-border); border-radius: 2px; transition: border-color .15s; }
.nthumb:hover img { border-color: var(--gray-400); }
.nthumb .mono { color: var(--foreground); }
.nthumb .nh { font-family: var(--font-source); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-box { background: var(--paper); border: 1px solid var(--paper-border); border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s3); }
.src-box .lbl, .gen-box .lbl { font-size: var(--t12); color: var(--muted-foreground); margin-bottom: var(--s2); }
.gen-box { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s3); }
.desc { font-size: var(--t13); line-height: 1.55; margin: var(--s2) 0; color: var(--foreground); }
.evid { font-size: var(--t12); margin-top: var(--s2); color: var(--gray-700); }
.evid q { font-family: var(--font-source); font-style: italic; font-size: var(--t13); color: var(--paper-foreground); }
.stage-top { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); font-size: var(--t12); margin-top: var(--s3); }
.stage-top dt { font: 600 var(--t11)/1.6 var(--font-ui); color: var(--muted-foreground); }
.stage-top dd { margin: 0; font-weight: 500; }
.ptable { border-collapse: collapse; width: 100%; margin-top: var(--s3); font-size: var(--t12); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ptable th { font: 600 var(--t11) var(--font-ui); color: var(--muted-foreground); text-align: right; padding: 6px var(--s2); border-bottom: 1px solid var(--border); background: var(--inspector); }
.ptable th:first-child, .ptable td:first-child { text-align: left; }
.ptable td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--muted); text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ptable td:first-child { font-family: var(--font-ui); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptable tr:last-child td { border-bottom: none; }
.ptable tr.chosen td { background: var(--green-50); }

.page-foot { padding: var(--s4); font-size: var(--t11); color: var(--subtle-foreground); line-height: 1.6; border-top: 1px solid var(--border); }
.bottom { padding: var(--s4) var(--s6); font-size: var(--t12); color: var(--muted-foreground); border-top: 1px solid var(--border); }

/* Analysis */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kpi { padding: var(--s3) var(--s4); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; display: flex; flex-direction: column; gap: var(--s1); }
.kpi b { font: 500 var(--t20)/1.2 var(--font-mono); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.kpi span { font-size: var(--t12); color: var(--muted-foreground); line-height: 1.4; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.frame { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); min-width: 0; }
.frame > h3 { margin-bottom: var(--s3); }
.frame .caption, figure.plot figcaption, .caption { font-size: var(--t12); color: var(--muted-foreground); margin-top: var(--s3); }
.hbar { display: grid; grid-template-columns: minmax(140px, 52%) 1fr 48px; gap: var(--s3); align-items: center; font-size: var(--t13); padding: 3px 0; }
.hbar .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gray-700); }
.hbar .track { height: 8px; }
.hbar .bar { display: block; height: 8px; border-radius: 2px; background: var(--amber-300); }
.hbar .bar.britannica { background: var(--side-britannica); }
.hbar .bar.wikipedia { background: var(--side-wikipedia); }
.hbar .v { font: 400 var(--t12) var(--font-mono); text-align: right; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hbar .word { font-family: var(--font-mono); font-size: var(--t12); }
figure.plot { margin: var(--s4) 0; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); }
figure.plot img { max-width: 100%; display: block; margin: 0 auto; }
figure.plot figcaption { font-family: var(--font-mono); }
details.disclose { margin-top: var(--s4); border: 1px solid var(--border); border-radius: var(--radius); }
details.disclose summary { cursor: pointer; padding: var(--s2) var(--s3); font-size: var(--t13); font-weight: 500; list-style: none; display: flex; align-items: center; gap: var(--s2); }
details.disclose summary::-webkit-details-marker { display: none; }
details.disclose summary::before { content: "\203A"; display: inline-block; width: 12px; font-size: var(--t16); line-height: 1; color: var(--muted-foreground); transition: transform .15s; }
details.disclose[open] summary::before { transform: rotate(90deg); }
details.disclose[open] summary { border-bottom: 1px solid var(--border); }
details.disclose .tablewrap { border: 0; border-radius: 0; max-height: 480px; }

/* Explore */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--gray-100); border-radius: 999px; margin-bottom: var(--s4); }
.tab { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; cursor: pointer; font: 500 var(--t13) var(--font-ui); color: var(--muted-foreground); transition: background-color .15s, color .15s, box-shadow .15s; }
.tab:hover { color: var(--foreground); }
.tab.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.tab .mono { font-size: var(--t11); color: var(--subtle-foreground); margin-left: var(--s1); }
table.explore td { vertical-align: top; padding: 10px 14px; }
table.explore .claimtext { max-width: 300px; font-weight: 500; }
.qcell { max-width: 380px; }
.qcell .src-label { font-size: var(--t12); color: var(--muted-foreground); margin-left: 6px; }
.qt { margin-top: 6px; line-height: 1.55; color: var(--gray-700); }
.qt.qb { padding: 6px 10px; border-radius: var(--radius-sm); }
table.explore tr.ocr td { color: var(--subtle-foreground); }
table.explore tr.ocr .qt.qb { opacity: .7; }
table.explore .old { font-family: var(--font-source); font-size: var(--t14); }
table.explore .old .pill { margin-left: 6px; font-family: var(--font-ui); }
table.explore .new { font-weight: 500; }

/* How it works */
figure.diagram { margin: var(--s4) 0 var(--s2); }
figure.diagram img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--border); background: var(--gray-50); }
figure.diagram figcaption { font-size: var(--t12); color: var(--muted-foreground); margin-top: var(--s2); }
pre.steps { margin: var(--s3) 0 0; padding: var(--s4); overflow: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--inspector); font: 13px/1.55 var(--font-mono); color: var(--gray-800); }
.pipeline { list-style: none; padding: 0; margin: var(--s6) 0 0; counter-reset: step; max-width: 820px; }
.pipeline li { counter-increment: step; position: relative; display: grid; grid-template-columns: 32px 1fr; gap: var(--s4); padding-bottom: var(--s6); }
.pipeline li::before {
  content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 500 var(--t12) var(--font-mono); background: var(--background); border: 1px solid var(--border-strong); color: var(--gray-700); position: relative; z-index: 1;
}
.pipeline li.model::before { background: var(--green-50); border-color: var(--green-200); color: var(--green-700); }
.pipeline li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 28px; bottom: 0; width: 1px; background: var(--border); }
.pipeline .step-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 28px; }
.pipeline .step-h b { font-size: var(--t14); font-weight: 600; }
.pipeline p { font-size: var(--t13); color: var(--gray-700); margin-top: var(--s1); line-height: 1.6; }

@media (max-width: 1100px) {
  body.page-view { height: auto; overflow: auto; }
  .workbench { grid-template-columns: 1fr; }
  .pane { overflow: visible; border-right: none; border-bottom: 1px solid var(--border); }
  .pane.latex { height: 80vh; }
  .top nav .btn { padding: 0 var(--s2); }
  .crumbs .head { display: none; }
}
@media (max-width: 720px) {
  .top { height: auto; flex-wrap: wrap; padding: var(--s2) var(--s4); }
  .top nav { margin-left: 0; flex-wrap: wrap; }
  .wide { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Uncertainty cause (match/uncertainty.jsonl) */
.pill.cause { background: var(--gray-100); color: var(--muted-foreground); border-color: transparent; }
.cause-note { display: block; flex-basis: 100%; font-size: var(--t12); color: var(--muted-foreground); line-height: 1.5; }
td.pm .pill.cause { margin-left: 0; }
td.pm .cause-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* Progressive disclosure: key facts stay visible, details open on demand. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.more { margin-top: var(--s3); }
details.more > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  font: 500 var(--t12)/1.4 var(--font-ui); color: var(--muted-foreground); padding: 2px 0; border-radius: var(--radius-sm);
  transition: color .15s;
}
details.more > summary:hover { color: var(--foreground); }
details.more > summary::before { content: "\203A"; display: inline-block; width: 8px; font-size: var(--t14); line-height: 1; transition: transform .15s; }
details.more[open] > summary::before { transform: rotate(90deg); }
details.more[open] > summary { margin-bottom: var(--s1); }

.entry { padding: 0; }
.entry > details > summary.erow { display: flex; flex-direction: column; gap: 6px; padding: var(--s3) var(--s4); cursor: pointer; }
.entry .ehead { justify-content: space-between; }
.entry .ehead b { font-size: var(--t14); }
.entry .ehead .meta { opacity: 0; transition: opacity .15s; }
.entry:hover .ehead .meta, .entry details[open] .ehead .meta { opacity: 1; }
.entry .erow .match { min-width: 0; }
.entry .erow .match .link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.edetail { padding: 0 var(--s4) var(--s3); }
.edetail .snippet { margin-top: 0; }
.edetail .cause-note { margin-bottom: var(--s2); }
.entry details[open] { background: var(--background); }

/* Layer popover on the scan pane */
.popover { position: relative; }
.popover > summary.chip { list-style: none; }
.popover[open] > summary.chip { color: var(--foreground); border-color: var(--border-strong); }
.popover-body {
  position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 30; width: 260px; padding: var(--s2);
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.pane-head .chips.end { margin-left: auto; }
body.page-view .legend-key { display: none; }

/* Index: notes on hover only; cause chips appear with the uncertain filter */
td.pm .cause-note { display: none; }
#cause-chips { display: none; gap: 6px; flex-wrap: wrap; padding-left: var(--s2); border-left: 1px solid var(--border); }
#index-filters.show-causes #cause-chips { display: inline-flex; }
.claim .q { padding-bottom: 0; border-bottom: var(--s2) solid transparent; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; cursor: pointer; }
.claim .q.open { -webkit-line-clamp: unset; }

/* Clean cards and surfaces */
.btn.primary { color: #ffffff; border-color: var(--foreground); background: var(--foreground); }
.btn.primary:hover { background: #333336; border-color: #333336; color: #ffffff; }

.kpis { border: 0; border-radius: 0; overflow: visible; gap: 10px; }
.kpi {
  margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--gray-50);
}
.frame, figure.plot, .gen-box, details.disclose { border-radius: var(--radius-lg); background: var(--background); box-shadow: 0 1px 2px rgba(0, 0, 0, .02); }
.claim { border-radius: 10px; }
.src-box { border-radius: var(--radius-lg); }