:root {
  --bg: #0b0d10;
  --panel: #13161b;
  --panel-2: #1a1e25;
  --line: #262b34;
  --hair: rgba(255, 255, 255, 0.1);
  --text: #eef1f5;
  --muted: #8b93a1;
  --jev: #c6ff3d;
  --gemini_text: #ff9f43;
  --gemini_pdf: #b18cff;
  --parse: #37b6ff;
  --bad: #ff4d5e;
  --good: #3ddc84;
  --empty: #20252d;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
button, select, input { font: inherit; color: inherit; }
b { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--hair);
  flex-wrap: wrap;
}
.title h1 { margin: 0; font-size: 20px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.title p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.controls { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; min-width: 0; }
/* A 22-page arXiv title would otherwise stretch the select to 800px and wrap the whole toolbar. */
#docPick { max-width: 300px; }
select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
button.primary { background: var(--jev); color: #0b0d10; border-color: var(--jev); }
button:disabled { opacity: 0.45; cursor: default; }

.notice {
  margin: 10px 20px 0;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: #ffd9de;
  background: color-mix(in srgb, var(--bad) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line));
}

/* ---------- shared parse rail ---------- */
.rail {
  margin: 10px 20px 0;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(230px, 330px) 1fr auto;
  align-items: center;
  gap: 6px 18px;
}
.rail-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.rail-name { font-size: 13.5px; font-weight: 700; color: var(--parse); white-space: nowrap; }
.rail-sub { font-size: 11px; color: var(--muted); }
.replay-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; align-self: start; margin-top: 3px; }
.rail-slots { display: flex; gap: 3px; height: 16px; }
.rail-slots i {
  flex: 1;
  border-radius: 3px;
  background: var(--empty);
  border: 1px solid transparent;
}
.rail-slots i.on { background: var(--parse); animation: pop 380ms ease-out; }
@keyframes pop { 0% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } }
.rail-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rail-stats b { color: var(--text); font-weight: 700; }

/* ---------- lanes ---------- */
.arena {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 20px 0;
}
.lane {
  --accent: var(--jev);
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  min-width: 0;
  overflow: hidden;
}
.lane[data-lane="gemini_text"] { --accent: var(--gemini_text); }
.lane[data-lane="gemini_pdf"] { --accent: var(--gemini_pdf); }
.lane.running { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.lane.done { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel)); }

.lane-head { padding: 10px 13px 11px; }
.who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-right: 46px; }
.who .name { font-size: 18px; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
.who .model { font-size: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Absolute so a long lane name can never push the badge onto a second line and grow the card. */
.who .place {
  position: absolute; top: 10px; right: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  color: #0b0d10; background: var(--accent);
  border-radius: 99px; padding: 2px 9px;
}
.status { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
.status .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--empty); flex: none; }
.lane.waiting .status { color: var(--parse); }
.lane.waiting .status .dot { background: var(--parse); animation: blink 1s ease-in-out infinite; }
.lane.busy .status { color: var(--accent); }
.lane.busy .status .dot { background: var(--accent); animation: blink 1s ease-in-out infinite; }
.lane.done .status { color: var(--good); }
.lane.done .status .dot { background: var(--good); }
.lane.failed .status { color: var(--bad); }
.lane.failed .status .dot { background: var(--bad); }
@keyframes blink { 50% { opacity: 0.25; } }

.stats { display: grid; grid-template-columns: 1.25fr 1fr 1fr 0.9fr; gap: 6px; margin-top: 6px; }
.stat { display: flex; flex-direction: column; min-width: 0; }
.stat .value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15; }
.stat.big .value { font-size: 31px; color: var(--accent); line-height: 1.02; letter-spacing: -0.02em; }
.stat .label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

.track { display: flex; gap: 3px; height: 22px; margin-top: 8px; }
.track .slot {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 3px;
  background: var(--empty);
  overflow: hidden;
}
.track .slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0 4px, transparent 4px 9px);
  opacity: 0;
}
.track .slot.pending-parse::after { opacity: 1; animation: slide 900ms linear infinite; }
.track .slot.ready { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
@keyframes slide { to { background-position: 26px 0; } }
.track .slot b, .track .slot u {
  position: absolute;
  top: 0; bottom: 0;
  display: block;
  animation: grow 260ms ease-out;
}
.track .slot b { background: var(--parse); }
.track .slot u { background: var(--accent); }
.track .slot.err { background: color-mix(in srgb, var(--bad) 45%, var(--empty)); }
@keyframes grow { from { transform: scaleX(0); transform-origin: left; } }

.split { display: flex; gap: 12px; margin-top: 6px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.split .k { display: inline-flex; align-items: center; gap: 5px; }
.split .k i { width: 9px; height: 9px; border-radius: 2px; }
.split .parse i { background: var(--parse); }
.split .decide i { background: var(--accent); }
.split b { color: var(--text); }
.split .none { color: var(--accent); font-weight: 600; }

/* ---------- verdict ---------- */
.verdict {
  margin: 10px 20px 0;
  padding: 10px 14px 11px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--hair);
  animation: land 450ms ease-out;
}
@keyframes land { from { opacity: 0; transform: translateY(8px); } }
.verdict .headline { display: flex; gap: 6px 20px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.verdict .headline .h { font-size: 12px; color: var(--muted); }
.verdict .headline .h b { font-size: 16px; color: var(--text); font-weight: 800; }
.verdict .headline .flag { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--good); text-transform: uppercase; }
.vrows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vrow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px 8px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--panel-2);
  border-left: 4px solid var(--vaccent, var(--line));
  min-width: 0;
}
.vrow .vname { grid-column: 1 / -1; font-weight: 800; color: var(--vaccent); font-size: 14px; line-height: 1.15; }
.vrow .vname small { display: block; color: var(--muted); font-weight: 500; font-size: 10.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; }
.vrow .v small { display: block; font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; }
.vrow .v.win { color: var(--good); }
.vrow .vname .fail { color: var(--bad); font-style: normal; }

/* ---------- document sheet ---------- */
.sheet { margin: 10px 20px 0; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.sheet-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.sheet-head p { margin: 0; font-size: 11px; color: var(--muted); }
.sheet-head p b { color: var(--text); font-weight: 700; }

.grid-head, .row {
  display: grid;
  grid-template-columns: minmax(104px, 0.72fr) minmax(190px, 1.55fr) repeat(3, minmax(166px, 1.1fr));
  gap: 8px;
  align-items: center;
}
.grid-head {
  padding: 3px 10px 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--hair);
}
.grid-head .c-lane[data-lane="jev"] { color: var(--jev); }
.grid-head .c-lane[data-lane="gemini_text"] { color: var(--gemini_text); }
.grid-head .c-lane[data-lane="gemini_pdf"] { color: var(--gemini_pdf); }
.row { padding: 2px 10px; border-bottom: 1px solid #1b1f26; min-height: 32px; }
.row:nth-child(even) { background: rgba(255, 255, 255, 0.017); }

.c-doc { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 0; }
.c-doc .fn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; display: block; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.c-doc .fn:hover { color: var(--parse); text-decoration: underline; }
.c-doc .pp { color: var(--muted); font-size: 10.5px; display: block; line-height: 12px; }
.c-truth { min-width: 0; }
.c-truth .tt { font-size: 12px; color: #c8ced8; display: block; line-height: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; }
.c-truth .cat { display: block; line-height: 14px; width: fit-content; max-width: 100%; color: var(--text); background: var(--panel-2); border-radius: 5px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cell { min-width: 0; font-size: 12px; }
.cell .l1 { display: flex; align-items: center; gap: 5px; min-width: 0; height: 15px; }
.cell .l2 { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #9aa3b2; font-variant-numeric: tabular-nums; height: 14px; }
.cell .mark { font-style: normal; font-weight: 900; font-size: 13px; width: 13px; flex: none; text-align: center; }
.mark.ok { color: var(--good); }
.mark.no { color: var(--bad); }
.cell .cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell .conf { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; flex: none; }
.cell .tm { font-weight: 700; }
.cell .tm.ok { color: var(--good); }
.cell .tm.no { color: var(--bad); }
.cell .sv b { color: #c8ced8; font-weight: 700; }
.cell .sv.yes b { color: #ffc53d; }
.dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--empty); display: block; }
.dots i.f { background: #c8ced8; }
.cell.err { color: var(--bad); }
.cell .pend { display: block; flex: 1; height: 7px; border-radius: 4px; background: var(--empty); max-width: 150px; }
.cell .l2 .pend { max-width: 92px; }
.row.lit-jev .cell[data-lane="jev"],
.row.lit-gemini_text .cell[data-lane="gemini_text"],
.row.lit-gemini_pdf .cell[data-lane="gemini_pdf"] { animation: fill 600ms ease-out; }
@keyframes fill { 0% { background: color-mix(in srgb, currentColor 20%, transparent); } 100% { background: transparent; } }

/* ---------- footnote ---------- */
.foot {
  margin: 9px 20px 12px;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--hair);
  padding-top: 7px;
  display: flex;
  gap: 6px 18px;
  flex-wrap: wrap;
}
.foot span::before { content: "· "; color: var(--line); }
.foot span:first-child::before { content: ""; }
.foot .err { color: var(--bad); }
.foot .score { color: #c8ced8; font-variant-numeric: tabular-nums; }

/* ---------- narrow ---------- */
@media (max-width: 1100px) {
  .arena { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; }
  .rail-stats { flex-wrap: wrap; white-space: normal; }
  .vrows { grid-template-columns: 1fr; }
  .vrow { grid-template-columns: minmax(170px, 1.3fr) repeat(5, minmax(84px, 1fr)); }
  .vrow .vname { grid-column: auto; }
}
@media (max-width: 900px) {
  .grid-head { display: none; }
  .row {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 9px 10px;
    align-items: stretch;
  }
  /* Label in its own column, both answer lines in the second one. */
  .row .cell { display: grid; grid-template-columns: 84px 1fr; column-gap: 8px; align-items: center; padding: 1px 0; }
  .row .cell::before {
    content: attr(data-short);
    grid-row: 1 / span 2;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
    color: var(--lane-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .row .cell > div { grid-column: 2; min-width: 0; }
  .row { border-bottom: 1px solid var(--hair); }
  .c-truth { margin-bottom: 3px; }
}
@media (max-width: 720px) {
  .top, .rail, .arena, .verdict, .sheet, .foot { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
  .notice { margin: 10px 16px 0; }
  .rail { margin: 12px 16px 0; padding: 10px 14px; }
  .verdict { margin: 12px 16px 0; }
  .arena { padding-left: 16px; padding-right: 16px; }
  .sheet { margin: 12px 16px 0; padding: 0; }
  .foot { margin: 12px 16px 16px; padding-left: 0; padding-right: 0; }
  .title h1 { font-size: 18px; }
  .controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .controls button { padding: 9px 12px; }
  .vrow { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .vrow .vname { grid-column: 1 / -1; }
  .vrow .vname small { white-space: normal; }
  .stat.big .value { font-size: 30px; }
}

/* ================================================================ document mode ================ */

:root {
  --role-title: #ff79c6;
  --role-author_contact: #ffc93c;
  --role-abstract_summary: #2ec4b6;
  --role-section_heading: #4d96ff;
  --role-body_text: #5f6b7e;
  --role-list_or_skills: #8ce563;
  --role-experience_entry: #b36bff;
  --role-education_entry: #ff8b3d;
  --role-table_or_figure: #00d3f2;
  --role-reference: #c79a6b;
  --role-other: #cfd6e0;
  --pii: #ff1f3d;
  --dis: #ffb300;
}

body[data-view="document"] .only-corpus { display: none !important; }
body[data-view="corpus"] .only-document { display: none !important; }

/* The scoreboard and bottom-bar wrappers exist only for the one-screen desktop grid. Everywhere
   else they dissolve, so corpus mode and the phone layout keep the exact stacking they had. */
.score, .underbar { display: contents; }
.underbar .legend { margin: 10px 20px 0; }
.score .agree-panel { margin: 10px 20px 0; }
.page-switch { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; min-width: 0; }

.l-jev { color: var(--jev); }
.l-gemini_text { color: var(--gemini_text); }
.l-gemini_pdf { color: var(--gemini_pdf); }
.s-jev { --lane: var(--jev); }
.s-gemini_text { --lane: var(--gemini_text); }
.s-gemini_pdf { --lane: var(--gemini_pdf); }

/* ---------- viewer shell ---------- */
.viewer {
  margin: 10px 20px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 12px;
  align-items: start;
  min-width: 0;
}
.pages-wrap { min-width: 0; }
.pages-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 5px; }
.pages-head h2 { margin: 0; font-size: 14px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pages-head p { margin: 0; font-size: 11px; color: var(--muted); flex: 1 1 330px; min-width: 0; }
.pages-head p b { font-weight: 700; }

.pages {
  height: clamp(380px, calc(100vh - 336px), 1100px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  scrollbar-color: var(--line) transparent;
  overscroll-behavior: contain;
}
.page {
  position: relative;
  width: 100%;
  max-width: 880px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  flex: none;
}
.page img { display: block; width: 100%; height: auto; }
.page .boxes { position: absolute; inset: 0; }
.page-no {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 13, 16, 0.72);
  border-radius: 5px;
  padding: 2px 7px;
  pointer-events: none;
}

/* ---------- a segment box: three lane stripes, tinted by the role ---------- */
.seg {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  outline: 1px solid rgba(20, 28, 42, 0.16);
  overflow: hidden;
  cursor: pointer;
}
.seg.lit { outline-color: rgba(20, 28, 42, 0.42); }
/* Before any lane answers, a faint neutral wash shows which pieces Docling found — deliberately
   colourless, so it can never be mistaken for a role a lane picked. */
.seg:not(.lit) { background: rgba(58, 92, 148, 0.09); }
.seg .st {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  background: transparent;
  transform-origin: left center;
}
.seg .st.on { animation: stripeIn 300ms cubic-bezier(0.2, 0.8, 0.3, 1); }
/* Three lanes have to stay countable even when two of them picked the same role. */
.seg .st:not(:last-child).on { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55); }
@keyframes stripeIn { from { transform: scaleX(0); } }
.seg .st::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--lane);
}
.seg .st.on::before { width: 5px; }
.seg.pii { outline: 2px solid var(--pii); }
.seg.dis::after {
  content: "";
  position: absolute;
  right: 0; top: 0;
  border: 8px solid transparent;
  border-top-color: var(--dis);
  border-right-color: var(--dis);
  pointer-events: none;
}
.seg:hover, .seg.sel { outline: 2px solid #0b0d10; box-shadow: 0 0 0 2px #fff; }

.st.r-title { background: color-mix(in srgb, var(--role-title) 60%, transparent); }
.st.r-author_contact { background: color-mix(in srgb, var(--role-author_contact) 60%, transparent); }
.st.r-abstract_summary { background: color-mix(in srgb, var(--role-abstract_summary) 60%, transparent); }
.st.r-section_heading { background: color-mix(in srgb, var(--role-section_heading) 60%, transparent); }
.st.r-body_text { background: color-mix(in srgb, var(--role-body_text) 34%, transparent); }
.st.r-list_or_skills { background: color-mix(in srgb, var(--role-list_or_skills) 60%, transparent); }
.st.r-experience_entry { background: color-mix(in srgb, var(--role-experience_entry) 60%, transparent); }
.st.r-education_entry { background: color-mix(in srgb, var(--role-education_entry) 60%, transparent); }
.st.r-table_or_figure { background: color-mix(in srgb, var(--role-table_or_figure) 60%, transparent); }
.st.r-reference { background: color-mix(in srgb, var(--role-reference) 60%, transparent); }
.st.r-other { background: color-mix(in srgb, var(--role-other) 56%, transparent); }

/* clicking a legend chip isolates that role across all three lanes */
.pages[data-focus] .st { opacity: 0.1 !important; }
.pages[data-focus] .seg { outline-color: rgba(20, 28, 42, 0.1); }
.pages[data-focus] .seg.dis::after { opacity: 0.15; }
.pages[data-focus="title"] .st.r-title,
.pages[data-focus="author_contact"] .st.r-author_contact,
.pages[data-focus="abstract_summary"] .st.r-abstract_summary,
.pages[data-focus="section_heading"] .st.r-section_heading,
.pages[data-focus="body_text"] .st.r-body_text,
.pages[data-focus="list_or_skills"] .st.r-list_or_skills,
.pages[data-focus="experience_entry"] .st.r-experience_entry,
.pages[data-focus="education_entry"] .st.r-education_entry,
.pages[data-focus="table_or_figure"] .st.r-table_or_figure,
.pages[data-focus="reference"] .st.r-reference,
.pages[data-focus="other"] .st.r-other { opacity: 1 !important; }

/* ---------- side panel ---------- */
.side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; min-width: 0; }
.panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 9px 12px 11px;
  min-width: 0;
}
.panel h3 {
  margin: 0 0 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.agree-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.agree-big b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.agree-big small { color: var(--muted); font-size: 10.5px; line-height: 1.2; }
.agree-pairs { display: grid; gap: 4px; }
.apair { display: grid; grid-template-columns: 1fr 54px 34px; align-items: center; gap: 7px; font-size: 10.5px; color: var(--muted); }
.apair .an { display: flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apair .an .d { width: 7px; height: 7px; border-radius: 99px; background: var(--lane); flex: none; }
.apair .an .d + .d { margin-right: 3px; }
.apair .ab { height: 5px; border-radius: 3px; background: var(--empty); overflow: hidden; }
.apair .ab i { display: block; height: 100%; background: var(--good); transition: width 240ms ease-out; }
.apair b { text-align: right; color: var(--text); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.inspect .unpin {
  margin-left: auto;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 99px;
}
.inspect.pinned { border-color: color-mix(in srgb, var(--parse) 50%, var(--line)); }
.inspect h3 span { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.inspect-text {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.38;
  color: #c8ced8;
  max-height: 78px;
  overflow: auto;
  word-break: break-word;
}
.iverdict { font-size: 10.5px; color: var(--good); margin-bottom: 5px; font-weight: 700; }
.iverdict.bad { color: var(--dis); }
.inspect-lanes { display: grid; gap: 4px; }
.irow {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--panel-2);
  border-left: 3px solid var(--lc);
}
.irow .iname { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lc); grid-row: 1 / span 2; overflow: hidden; text-overflow: ellipsis; }
.irow .irole { font-size: 12px; font-weight: 700; border-radius: 5px; padding: 0 6px; width: fit-content; max-width: 100%; color: #0b0d10; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irow .irole.pend { color: var(--muted); background: var(--empty); font-weight: 500; }
.irow .imeta { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.irow .imeta b { color: #c8ced8; }
.irow .imeta b.hot { color: var(--pii); }
.irole.r-title { background: var(--role-title); }
.irole.r-author_contact { background: var(--role-author_contact); }
.irole.r-abstract_summary { background: var(--role-abstract_summary); }
.irole.r-section_heading { background: var(--role-section_heading); }
.irole.r-body_text { background: var(--role-body_text); color: #eef1f5; }
.irole.r-list_or_skills { background: var(--role-list_or_skills); }
.irole.r-experience_entry { background: var(--role-experience_entry); }
.irole.r-education_entry { background: var(--role-education_entry); }
.irole.r-table_or_figure { background: var(--role-table_or_figure); }
.irole.r-reference { background: var(--role-reference); }
.irole.r-other { background: var(--role-other); }

.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: #c8ced8;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { background: var(--panel-2); }
.chip.on { background: var(--panel-2); color: #fff; font-weight: 700; }
.chip .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.sw.r-title { background: var(--role-title); }
.sw.r-author_contact { background: var(--role-author_contact); }
.sw.r-abstract_summary { background: var(--role-abstract_summary); }
.sw.r-section_heading { background: var(--role-section_heading); }
.sw.r-body_text { background: var(--role-body_text); }
.sw.r-list_or_skills { background: var(--role-list_or_skills); }
.sw.r-experience_entry { background: var(--role-experience_entry); }
.sw.r-education_entry { background: var(--role-education_entry); }
.sw.r-table_or_figure { background: var(--role-table_or_figure); }
.sw.r-reference { background: var(--role-reference); }
.sw.r-other { background: var(--role-other); }
.legend-notes { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 7px; font-size: 10px; color: var(--muted); }
.legend-notes .ln::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.legend-notes .pii::before { border: 2px solid var(--pii); }
.legend-notes .dis::before { background: var(--dis); }

/* document-mode lane track is one continuous bar */
.track .slot.wide b, .track .slot.wide u { transition: width 160ms linear, left 160ms linear; }
.verdict .vnote { margin-top: 7px; font-size: 10.5px; color: var(--muted); }

/* ---------- narrow ---------- */
@media (max-width: 1100px) {
  .viewer { grid-template-columns: 1fr; }
  .side { position: static; }
  .pages { height: clamp(320px, 62vh, 760px); }
  .legend-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .viewer { margin: 12px 16px 0; }
  .pages { padding: 8px; height: clamp(300px, 56vh, 620px); }
  .pages-head p { font-size: 10.5px; }
  .legend-grid { grid-template-columns: 1fr 1fr; }
  .agree-big b { font-size: 26px; }
  .controls { grid-template-columns: 1fr 1fr; }
  .controls .field select { width: 100%; }
  .field { min-width: 0; }
  select { max-width: 100%; }
}

.lane.blind .cost, .lane.blind .tokens { color: var(--muted); letter-spacing: 0.08em; }

/* ---------- phone: the annotated page is the point, so it comes before the lane cards ---------- */
.btns { display: flex; gap: 10px; }
@media (max-width: 720px) {
  .controls { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: end; }
  .btns button { padding: 9px 4px; }
  body[data-view="document"] .top { order: 0; }
  body[data-view="document"] .notice { order: 1; }
  body[data-view="document"] .rail { order: 2; }
  body[data-view="document"] .viewer { order: 3; }
  body[data-view="document"] .arena { order: 4; }
  body[data-view="document"] .agree-panel { order: 5; margin: 10px 16px 0; }
  body[data-view="document"] .verdict { order: 6; }
  body[data-view="document"] .legend { order: 7; margin: 10px 16px 0; }
  body[data-view="document"] .foot { order: 8; }
  .title h1 { font-size: 17px; }
  .title p { font-size: 11.5px; }
  .top { padding: 9px 16px; gap: 10px; }
  /* three lane cards have to fit on one phone screen, so the card loses its slack, not its numbers */
  .lane-head { padding: 8px 11px 9px; }
  .stat.big .value { font-size: 24px; }
  .stat .value { font-size: 15px; }
  .who .name { font-size: 16px; }
  .track { height: 16px; margin-top: 6px; }
  .rail { gap: 5px 18px; }
  .rail-sub { display: none; }
  .pages { height: clamp(300px, 58vh, 620px); }
}

/* ================================================================================================
   ONE SCREEN — desktop document mode

   The whole story has to be readable in a single screen recording: no page scroll, the PDF as
   large as the viewport allows, and headline numbers that survive a LinkedIn re-encode. The body
   becomes a fixed-height grid; the left column is the scoreboard, the right column is the paper.
   Below 1101px none of this applies and the page keeps its old stacked layout.
   ============================================================================================== */
@media (min-width: 1101px) {
  body[data-view="document"] {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
    display: grid;
    /* The pages are limited by the column's HEIGHT, not its width, so the scoreboard can be this
       wide without costing the paper a single pixel. */
    grid-template-columns: clamp(400px, 29vw, 470px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top    top"
      "notice notice"
      "score  viewer"
      "under  under";
    column-gap: 14px;
    padding: 0 18px 8px;
  }
  body[data-view="document"] > .top { grid-area: top; margin: 0 -18px; padding: 9px 18px; }
  body[data-view="document"] > .notice { grid-area: notice; margin: 8px 0 0; }
  body[data-view="document"] > .score {
    grid-area: score;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding-top: 9px;
    overflow: hidden;
  }
  body[data-view="document"] > .viewer { grid-area: viewer; }
  body[data-view="document"] > .underbar {
    grid-area: under;
    display: flex;
    align-items: flex-start;
    gap: 4px 18px;
    flex-wrap: wrap;
    border-top: 1px solid var(--hair);
    margin-top: 5px;
    padding-top: 5px;
  }

  /* ---------- header: one compact band ---------- */
  /* Left to its max-content width the subline pushes the toolbar onto a second row and costs 40px
     of paper; letting the title shrink keeps the header to a single band. */
  body[data-view="document"] .title { min-width: 0; flex: 1 1 320px; }
  body[data-view="document"] .title h1 { font-size: 19px; }
  body[data-view="document"] .title p { font-size: 12.5px; line-height: 1.3; }
  body[data-view="document"] .controls { flex: none; }

  /* ---------- left column: the shared parse rail ---------- */
  body[data-view="document"] .rail {
    margin: 0;
    flex: none;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "head stats" "slots slots";
    align-items: center;
    gap: 5px 12px;
    padding: 6px 12px 7px;
  }
  body[data-view="document"] .rail-head { grid-area: head; gap: 6px 10px; }
  body[data-view="document"] .rail-name { font-size: 14px; }
  body[data-view="document"] .rail-sub { display: none; }
  body[data-view="document"] .replay-tag { font-size: 12px; margin-top: 0; align-self: center; }
  body[data-view="document"] .rail-slots { grid-area: slots; height: 9px; }
  body[data-view="document"] .rail-stats {
    grid-area: stats;
    justify-content: flex-end;
    font-size: 12.5px;
    gap: 2px 12px;
    flex-wrap: wrap;
    white-space: nowrap;
  }
  body[data-view="document"] #poolInfo { display: none; }

  /* ---------- left column: the three lanes, stacked, sharing the leftover height ---------- */
  body[data-view="document"] .arena {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: 8px;
  }
  body[data-view="document"] .lane { min-height: 0; }
  /* Status and the parse/decide split are both one short line, so they share a row — that is a
     whole line of height handed back to the numbers above them. */
  body[data-view="document"] .lane-head {
    padding: 7px 12px 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "who who" "stats stats" "track track" "status split";
    /* On a tall screen the card has slack; spreading it keeps the status line pinned to the foot
       of the card instead of leaving a dead band underneath. */
    align-content: space-between;
    row-gap: 4px;
    column-gap: 10px;
    height: 100%;
  }
  /* One line, always: the model id ellipsises rather than wrapping, because a second line here
     costs more than the tail of "gemini-3.8-flash". */
  body[data-view="document"] .who {
    grid-area: who;
    flex-wrap: nowrap;
    align-items: baseline;
    line-height: 1.12;
    gap: 7px;
    /* The place badge only exists once a lane finishes, so the name keeps the full width for the
       whole race and only gives way at the photo finish. */
    padding-right: 10px;
  }
  body[data-view="document"] .lane.done .who { padding-right: 56px; }
  /* The lane name is the label people read; the model id gives way first. */
  body[data-view="document"] .who .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
  body[data-view="document"] .who .model { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 200 auto; }
  /* 18px keeps "Docling → Gemini 3.8 Flash" and its model id on ONE line in this column, which is
     a whole line of card height for two of the three lanes. */
  body[data-view="document"] .who .name { font-size: 18px; }
  body[data-view="document"] .who .model { font-size: 11px; }
  body[data-view="document"] .who .place { font-size: 12px; top: 8px; right: 11px; padding: 2px 10px; }
  /* Status and split share the last row and must never wrap onto a second one — a clipped tail is
     recoverable on video, a clipped row is not. */
  body[data-view="document"] .status {
    grid-area: status;
    font-size: 11.5px;
    margin-top: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
  }
  body[data-view="document"] .split {
    grid-area: split;
    justify-content: flex-end;
    font-size: 11.5px;
    margin-top: 0;
    gap: 0 11px;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }
  /* The headline numbers are the point of the video, so they are the largest type on the page. */
  body[data-view="document"] .stats { grid-area: stats; grid-template-columns: 1.2fr 1.05fr 1fr 0.7fr; gap: 5px; margin-top: 0; }
  body[data-view="document"] .stat.big .value { font-size: 40px; }
  body[data-view="document"] .stat .value { font-size: 20px; }
  body[data-view="document"] .stat .label { font-size: 11px; }
  body[data-view="document"] .track { grid-area: track; height: 16px; margin: 0; }

  /* ---------- left column: agreement ---------- */
  body[data-view="document"] .agree-panel { margin: 0; flex: none; padding: 7px 12px 8px; }
  body[data-view="document"] .panel h3 { font-size: 12px; margin-bottom: 4px; }
  /* The big number is labelled by the sentence beside it; the heading is one line of pure cost. */
  body[data-view="document"] .agree-panel h3 { display: none; }
  body[data-view="document"] .agree-big { margin-bottom: 5px; align-items: center; }
  body[data-view="document"] .agree-big b { font-size: 36px; }
  body[data-view="document"] .agree-big small { font-size: 12px; }
  body[data-view="document"] .agree-pairs { gap: 3px; }
  body[data-view="document"] .apair { font-size: 11.5px; grid-template-columns: minmax(0, 1fr) 58px 38px; }
  body[data-view="document"] .apair b { font-size: 13px; }

  /* ---------- left column: the verdict ----------
     Every per-lane number in .vrows is already on the lane card directly above it — wall time,
     cost, segments, tokens — and the winner is already flagged by the card's place badge. So on
     one screen the verdict is its headline alone, and the "never accuracy" sentence lives in the
     bottom bar where it is on screen for the whole race rather than only at the end. */
  body[data-view="document"] .verdict { margin: 0; flex: none; padding: 8px 12px 9px; }
  body[data-view="document"] .verdict .headline { gap: 3px 14px; margin-bottom: 0; }
  body[data-view="document"] .verdict .headline .h { font-size: 12px; }
  body[data-view="document"] .verdict .headline .h b { font-size: 18px; }
  body[data-view="document"] .verdict .headline .flag { font-size: 12.5px; flex: 1 1 100%; }
  body[data-view="document"] .verdict .vrows,
  body[data-view="document"] .verdict .vnote { display: none; }

  /* ---------- right column: the paper ---------- */
  body[data-view="document"] .viewer {
    margin: 0;
    padding-top: 9px;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }
  body[data-view="document"] .pages-wrap {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 5px;
    min-height: 0;
  }
  body[data-view="document"] .pages-head { margin: 0; align-items: center; gap: 4px 12px; }
  body[data-view="document"] .pages-head h2 { font-size: 19px; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-view="document"] .pages-head p { font-size: 12.5px; line-height: 1.35; flex: 1 1 320px; }
  body[data-view="document"] .pages {
    height: auto;
    min-height: 0;
    padding: 8px;
    gap: 8px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  /* More pages than fit side by side: a horizontal strip that follows the annotation. */
  body[data-view="document"] .pages.strip { overflow-x: auto; justify-content: flex-start; }
  body[data-view="document"] .page { width: var(--pw, 100%); max-width: none; }
  body[data-view="document"] .page-no { font-size: 12px; padding: 2px 8px; }

  /* ---------- right column: the inspector, floating over the foot of the paper ---------- */
  body[data-view="document"] .side {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    z-index: 5;
    display: block;
    pointer-events: none;
  }
  body[data-view="document"] .inspect {
    pointer-events: auto;
    background: rgba(12, 15, 19, 0.94);
    backdrop-filter: blur(8px);
    border-color: var(--line);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.55);
    display: grid;
    grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1.6fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 14px;
    padding: 8px 12px;
    animation: land 220ms ease-out;
  }
  body[data-view="document"] .inspect.empty { display: none; }
  body[data-view="document"] .inspect h3 { grid-column: 1; grid-row: 1; margin: 0; font-size: 12px; }
  body[data-view="document"] .inspect h3 span { font-size: 13px; }
  body[data-view="document"] .inspect-text {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    max-height: 36px;
    overflow: hidden;
  }
  body[data-view="document"] .inspect-lanes {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 8px;
  }
  body[data-view="document"] .inspect-lanes .iverdict { grid-column: 1 / -1; margin: 0 0 1px; font-size: 12px; }
  body[data-view="document"] .irow { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 4px 8px; }
  body[data-view="document"] .irow .iname { grid-row: auto; font-size: 11px; }
  body[data-view="document"] .irow .irole { font-size: 12.5px; }
  body[data-view="document"] .irow .imeta { font-size: 11.5px; }

  /* ---------- bottom bar: role legend on one wrapped row, then the standing footnotes ---------- */
  body[data-view="document"] .underbar .legend {
    margin: 0;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 14px;
    background: none;
    border: none;
    padding: 0;
  }
  body[data-view="document"] .underbar .legend h3 { margin: 0; font-size: 11.5px; }
  body[data-view="document"] .legend-grid { display: flex; flex-wrap: wrap; gap: 1px 4px; }
  body[data-view="document"] .chip { font-size: 13px; padding: 1px 6px; }
  body[data-view="document"] .chip .sw { width: 12px; height: 12px; }
  body[data-view="document"] .legend-notes { margin-top: 0; font-size: 12px; gap: 2px 14px; }
  body[data-view="document"] .foot {
    margin: 0;
    padding: 0;
    border-top: none;
    font-size: 12px;
    line-height: 1.3;
    flex: 1 1 100%;
    gap: 2px 14px;
  }

  /* ---------- the page switcher, shown only when the pages cannot all fit side by side ---------- */
  body[data-view="document"] .page-switch button {
    padding: 2px 9px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 7px;
    font-variant-numeric: tabular-nums;
  }
  body[data-view="document"] .page-switch button.on { background: var(--parse); border-color: var(--parse); color: #0b0d10; }
  body[data-view="document"] .page-switch .ps-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
  body[data-view="document"] .page-switch .ps-now { color: var(--text); font-size: 13px; }
}

/* 900-tall laptops: the column has ~130px per lane card, so the softer type gives back a few
   pixels each and the footnote gets the pixel back for legibility after a video re-encode. */
@media (min-width: 1101px) and (max-height: 940px) {
  body[data-view="document"] .title p { font-size: 12px; line-height: 1.25; }
  body[data-view="document"] .stat.big .value { font-size: 36px; }
  body[data-view="document"] .agree-big b { font-size: 32px; }
  body[data-view="document"] .rail { padding: 5px 12px 6px; }
  body[data-view="document"] .agree-panel { padding: 6px 12px 7px; }
  body[data-view="document"] .verdict { padding: 7px 12px 8px; }
  body[data-view="document"] > .score { gap: 7px; }
}

/* A wide but short screen (a 16:9 recording crop, a laptop with the dock showing) must not push
   the lane cards past their own content — shed the softer type first. */
@media (min-width: 1101px) and (max-height: 840px) {
  body[data-view="document"] .stat.big .value { font-size: 34px; }
  body[data-view="document"] .agree-big b { font-size: 32px; }
  body[data-view="document"] .title p { display: none; }
  body[data-view="document"] .pages-head p { display: none; }
}