/* =============================================================
   paper.css, SVRL project page
   Layered on top of the site-wide assets/css/styles.css
   ============================================================= */

/* --- Title block --- */
.paper-hero {
  text-align: center;
  padding-bottom: 0.5rem;
}

.paper-venue {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.85rem;
}

.paper-title {
  font-size: 2.05rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 auto 1.35rem;
  text-wrap: balance;
}

.paper-authors {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-bottom: 0.9rem;
}
.author {
  font-size: 1.02rem;
  line-height: 1.35;
}
.author sup { font-size: 0.72em; }
.author-email {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-light);
  letter-spacing: -0.01em;
}

.paper-note {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 0;
}

/* --- Action buttons --- */
.paper-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.btn {
  display: inline-block;
  padding: 0.42rem 1.05rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  transition: background var(--tr), color var(--tr);
}
.btn:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }

/* Jumps to the interactive explorer rather than off-site */
.btn-accent {
  background: var(--gold);
  border-color: var(--gold);
  color: #2b2410;
}
.btn-accent:hover { background: #a8965f; border-color: #a8965f; color: #2b2410; }

/* Artifact announced but not yet posted */
.btn-soon {
  background: transparent;
  color: var(--text-light);
  border-style: dashed;
  border-color: var(--border);
  cursor: default;
}

/* --- Sticky section nav ---
   Sits directly under the site header and follows the reader down the page. */
.paper-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  margin: 1.75rem 0 0.5rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.paper-nav-inner {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.paper-nav-inner::-webkit-scrollbar { display: none; }
.paper-nav a {
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--tr), border-color var(--tr);
}
.paper-nav a:hover { color: var(--primary); text-decoration: none; }
.paper-nav a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
/* breathing room so the first section doesn't sit flush against the bar */
.paper-nav + .container > .page-section:first-child { margin-top: 2.25rem; }

/* Anchor targets clear both the site header and this bar */
#top, #abstract, #demo, #video, #methods, #algorithm, #results, #bibtex {
  scroll-margin-top: calc(var(--nav-h) + 3.5rem);
}

/* --- Figures ---
   Every figure is exactly one text-block wide and never wider, so the page reads
   as a single column the way a blog article does. */
.fig {
  width: 100%;
  margin: 2.25rem 0;
}
.fig img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.fig figcaption {
  margin-top: 0.75rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* A tall plot at full text width would stand over 1000px high, so the image is
   capped and centred while its caption keeps the full text width. */
.fig-plot img {
  width: min(420px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Two figures side by side. The column ratio matches the two images' aspect
   ratios (1.81 and 3.25), so both render at exactly the same height and the pair
   together spans one text block, never more. */
.fig-row {
  display: grid;
  grid-template-columns: 1.81fr 3.25fr;
  gap: 1.25rem;
  align-items: start;
}
.fig-row .fig { margin: 1.5rem 0 0; }

/* =============================================================
   Interactive trace explorer
   ============================================================= */
.demo-body {
  margin-top: 1.25rem;
}

/* --- example picker --- */
.demo-picker-outer { position: relative; margin-bottom: 1rem; }

.demo-picker-wrap {
  overflow-x: auto;
  padding-bottom: 0.6rem;
  scrollbar-width: thin;
}
.demo-picker-wrap::-webkit-scrollbar { height: 7px; }
.demo-picker-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.demo-picker-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* Arrow affordances, shown only when there is more to scroll to */
.demo-scroll {
  position: absolute;
  top: calc(50% - 0.4rem);
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}
.demo-scroll:hover { color: var(--primary); border-color: var(--primary); }
.demo-scroll-l { left: -10px; }
.demo-scroll-r { right: -10px; }

.demo-picker {
  display: flex;
  gap: 0.6rem;
}
.demo-pick {
  flex: 0 0 152px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.45rem;
  text-align: left;
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--tr), background var(--tr);
}
.demo-pick:hover { border-color: var(--primary); }
.demo-pick.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.demo-pick img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--bg-alt);
}
.demo-pick-q {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- stage --- */
.demo-stage {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 1rem;
}
.demo-question {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.demo-img {
  width: 168px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fff;
}
.demo-q { font-size: 0.98rem; font-weight: 600; line-height: 1.5; }
.demo-gt { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.35rem; }

/* --- model switch --- */
.demo-models {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}
.demo-model {
  padding: 0.3rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: none;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.demo-model:hover { color: var(--primary); }
.demo-model.active { background: var(--primary); color: #fff; }

/* --- transcript --- */
.demo-transcript {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.turn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  font-size: 0.86rem;
  line-height: 1.6;
  animation: turn-in 0.18s ease-out;
}
@keyframes turn-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.turn-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.25rem;
}
.turn-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; }

.turn-agent { border-left: 3px solid var(--primary); }
.turn-tool  { border-left: 3px solid var(--gold); display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
/* Retrieved evidence is not the model talking. Different surface, colder accent,
   deeper indent and a connector, so it reads as arriving from outside. */
.turn-result {
  border: 1px solid #c2cfe3;
  border-left: 4px solid #3b6cb7;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #e8eefa 0%, #eef2fa 100%);
  /* deliberately narrower than the conversation column and pushed inward, so it
     reads as an aside from an external service rather than another chat turn */
  margin-left: 4.5rem;
  max-width: 73%;
  padding: 0.7rem 0.8rem 0.75rem;
  position: relative;
  box-shadow: inset 0 1px 0 #fff;
}
/* elbow from the conversation column into the evidence card */
.turn-result::before {
  content: "";
  position: absolute;
  left: -4.5rem;
  top: -0.45rem;
  width: 4.1rem;
  height: 1.9rem;
  border-left: 2px dotted #a9bad6;
  border-bottom: 2px dotted #a9bad6;
  border-bottom-left-radius: 8px;
}
.ext-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.45rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #cfdaec;
}
.ext-icon { flex-shrink: 0; display: block; }
.ext-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #24405f;
}
.ext-meta { font-size: 0.72rem; color: #64789a; }

/* verification mask folded into the reasoning card */
.verify-block {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.turn-answer{ border-left: 3px solid var(--primary); background: var(--primary-light); }
.turn-answer p { font-weight: 600; }

.tool-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--gold);
  color: #2b2410;
}
.turn-tool code { font-size: 0.76rem; }
.turn-tool-block { display: block; }
.tool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.tool-head .turn-note { margin-top: 0; }
.ran-key { color: #1f5c35; font-weight: 700; font-style: normal; }

.queries { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.query {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
/* the candidate that was actually executed */
.query-ran {
  background: #d8ecdd;
  border-color: #86bd9b;
  color: #1f5c35;
  font-weight: 700;
}

/* verification mask */
.mask-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.mask-row > span:first-child { min-width: 5.8rem; }
.mask {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
}
.mask-keep { background: #d8ecdd; color: #1f5c35; }
.mask-drop { background: #f6dcdc; color: #8c2b2b; }

/* retrieved evidence cards */
.ev-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.ev {
  border: 1px solid #d3dcea;
  border-radius: 4px;
  background: #fff;
  padding: 0.4rem 0.5rem;
}
.ev[open] { background: #fff; box-shadow: var(--shadow); }
/* card with nothing to expand into (baseline image results: title only) */
.ev-flat { display: flex; align-items: center; gap: 0.55rem; }
.ev summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
}
.ev summary::-webkit-details-marker { display: none; }
.ev-thumb {
  flex-shrink: 0;
  width: 62px;
  height: 44px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: #fff;
}
.ev-thumb-none {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-light);
  background: var(--border);
}
.ev-body {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.79rem;
}
.ev-n {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.65rem;
  color: var(--text-muted);
}
.ev-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-host { flex-shrink: 0; font-size: 0.7rem; color: var(--text-light); }
.ev p { font-size: 0.79rem; color: var(--text-muted); margin: 0.45rem 0 0.3rem; }
.ev a { font-size: 0.75rem; }

/* --- verdict --- */
.verdict {
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.verdict-label {
  display: inline-block;
  min-width: 7rem;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
}
.verdict-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* answer text and its correct/incorrect pill sit on one line */
/* The answer <p> is not the last child here, so it keeps the global
   margin-bottom; flex centres the margin box and the text drifts above the
   pill. Zero it and let the row centre on the text itself. */
.answer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.answer-line p { margin-bottom: 0; line-height: 1.4; }
.verdict-judge p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.3rem; }
.judge-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #d8ecdd;
  color: #1f5c35;
}
.judge-pill.judge-wrong { background: #f6dcdc; color: #8c2b2b; }

/* --- controls --- */
.demo-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.demo-btn {
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.demo-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.demo-btn:disabled { opacity: 0.42; cursor: default; }
.demo-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.demo-btn-primary:hover:not(:disabled) { background: var(--primary-dark); color: #fff; }
.demo-progress {
  flex: 1;
  font-size: 0.76rem;
  color: var(--text-light);
}

/* --- Video --- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- TL;DR highlight cards --- */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.highlight {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
}
.highlight h3 {
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.highlight p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- Abstract --- */
.abstract-body {
  font-size: 1.02rem;
  line-height: 1.8;
}

/* --- Method bullets --- */
.method-list {
  margin: 0 0 1rem 1.15rem;
  padding-left: 0.35rem;
}
.method-list li { margin-bottom: 0.7rem; }

/* --- Headline numbers --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  text-align: center;
}
.stat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 0.9rem;
}
.stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- Sub-headings inside a section --- */
.sub-heading {
  margin: 2rem 0 0.6rem;
  font-size: 1rem;
  color: var(--primary);
}
.sub-heading:first-of-type { margin-top: 0.5rem; }

/* --- Data tables --- */
.table-scroll {
  overflow-x: auto;
  margin: 1rem 0 1.25rem;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  line-height: 1.5;
}
.data-table caption {
  caption-side: bottom;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
}
.data-table th,
.data-table td {
  padding: 0.42rem 0.75rem;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
  white-space: normal;
}
.data-table thead th {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--text-light);
}
/* Group headers sit centred over the columns they span */
.data-table thead th[colspan] {
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .row-group td {
  text-align: left;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  padding-top: 0.9rem;
}
/* Trajectory-format table holds code, not numbers, keep it left-aligned */
.data-table td code { font-size: 0.8em; }
.data-table.table-text th,
.data-table.table-text td { text-align: left; }

/* Highlight our own rows in the results tables */
.data-table .row-ours td { background: var(--primary-light); }

/* --- Algorithm block --- */
.algo {
  border: 1px solid var(--border);
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  border-left: none;
  border-right: none;
  padding: 0.9rem 0.25rem 1rem;
  margin: 2rem 0;
  overflow-x: auto;
}
.algo-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.algo-require {
  font-size: 0.82rem;
  line-height: 1.7;
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.algo em { font-style: italic; }

.algo-steps {
  list-style: none;
  counter-reset: algoline;
  font-size: 0.82rem;
  line-height: 1.85;
}
.algo-steps li {
  counter-increment: algoline;
  position: relative;
  padding-left: 2.4rem;
  white-space: nowrap;
}
.algo-steps li::before {
  content: counter(algoline) ":";
  position: absolute;
  left: 0;
  width: 1.9rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-light);
}
.algo-steps .i1 { padding-left: 3.6rem; }
.algo-steps .i2 { padding-left: 4.8rem; }
.algo-steps .i3 { padding-left: 6.0rem; }
.algo-steps b { font-weight: 700; }
.algo-head { font-weight: 700; }
.algo-steps code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.92em;
}
.algo-note {
  color: var(--text-light);
  font-style: italic;
  margin-left: 1.1rem;
}
.algo-note::before { content: "\25B9\00a0"; }

/* --- Collapsible system prompt --- */
.prompt-details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 1rem;
  margin: 1.25rem 0;
  background: var(--bg-alt);
}
.prompt-details summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}
.prompt-details[open] summary { margin-bottom: 0.25rem; }
.prompt-details pre {
  background: var(--bg);
  margin-bottom: 0.9rem;
  max-height: 30rem;
  overflow: auto;
}
.prompt-details pre code {
  font-size: 0.76rem;
  line-height: 1.55;
}

/* --- BibTeX --- */
.copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
}
#bibtex pre { white-space: pre; }

@media (max-width: 640px) {
  .paper-title { font-size: 1.55rem; max-width: none; }
  .paper-authors { font-size: 0.94rem; gap: 0.1rem 0.85rem; }
  /* Side-by-side failure cases stack rather than shrink to illegibility */
  .fig-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .demo-question { flex-direction: column; }
  .demo-img { width: 100%; }
  .demo-controls { flex-wrap: wrap; }
  .demo-progress { flex-basis: 100%; order: -1; }
}