/* ============================================================================
   iTeach Project Page — Stylesheet
   https://irvlutd.github.io/iTeach/

   Theme:    CLAP-inspired dark + amber gold, layered on top of Bulma and the
             shared IRVL royal-theme (`../assets/css/jp-royal-theme.css`).
   Stack:    Bulma 0.9 · FontAwesome · Academicons · Outfit / Noto Sans /
             JetBrains Mono · prefers-color-scheme auto dark/light.
   Owner:    IRVL, UT Dallas
   License:  See repository root.

   Conventions
   -----------
   - Design tokens live in :root (Section 01). Update only there.
   - Colors pulled from tokens, not inline — keeps palette consistent.
   - Components prefixed by role (kpi-, ack-, rc-, mrow-, fs3-, rr-, ds-)
   - !important is used sparingly and only to override Bulma / royal-theme.
   - Mobile-first media queries at the end of each section.

   Table of Contents
   -----------------
   01  Design tokens (palette · fonts · light mode)
   02  Reset, base typography, links, accessibility
   03  Ambient background (aurora gradient + SVG grain)
   04  Layout primitives (body, section spacing, skip-link, focus states)
   05  Navbar (related-research home + dropdown, burger, mobile)
   06  Hero (title, authors, affiliation, action buttons)
   07  Progress sidebar (fixed rail) + pill TOC (narrow screens)
   08  Typography blocks (eyebrow, section-title, sub-title, prose)
   09  Figures (paper-fig, fig-caption, lightbox)
   10  Video (YouTube click-to-play facade)
   11  TL;DR callout
   12  Stats / KPI cards
   13  Pipeline steppers (iTeach loop, real-robot pipeline)
   14  Metric bar cards (Grasping / Pick & Place)
   15  FS3 row (3-column flow)
   16  Dataset snapshot tiles (ds-stats)
   17  Results section containers (result-block, result-grid, outcome-lede)
   18  Code & Data resource grid (rc-*)
   19  SceneReplica table (legacy, optional)
   20  Acknowledgements cards
   21  BibTeX block
   22  Real-robot figure walkthrough
   23  Footer
   ============================================================================ */


/* ============================================================================
   01  Design tokens
   ============================================================================ */
:root {
  --bg-dark: #0a0e14;
  --bg-deeper: #06080c;
  --bg-card: #161b24;
  --accent-primary: #d4a03a;
  --accent-secondary: #c4902a;
  --accent-deep: #8b6f1f;
  --accent-glow: rgba(212, 160, 58, 0.18);
  --text-main: #e6edf3;
  --text-soft: #c4cdd9;
  --text-dim: #b5bdc8;
  --text-faint: #8892a0;
  --glass-bg: rgba(255, 255, 255, 0.025);
  --glass-bg-strong: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-strong: rgba(212, 160, 58, 0.3);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --grain-opacity: 0.03;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-dark: #faf9f7;
    --bg-deeper: #f0eeea;
    --bg-card: #ffffff;
    --accent-primary: #b8860b;
    --accent-secondary: #9a7209;
    --accent-glow: rgba(184, 134, 11, 0.12);
    --text-main: #1a1a1a;
    --text-soft: #4a4a4a;
    --text-dim: #7a7a7a;
    --text-faint: #9a9a9a;
    --glass-bg: rgba(0, 0, 0, 0.025);
    --glass-bg-strong: rgba(0, 0, 0, 0.05);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-strong: rgba(184, 134, 11, 0.35);
    --grain-opacity: 0.015;
  }
}


/* ============================================================================
   02  Reset, base typography, links
   ============================================================================ */
/* Base overrides on Bulma */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 5rem; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent-primary); color: var(--bg-dark) !important;
  padding: 0.6rem 1rem; border-radius: 0 0 8px 0;
  font-family: var(--font-display); font-weight: 600;
  z-index: 9999; text-decoration: none;
}
.skip-link:focus { left: 0; outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* Keyboard focus visible */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-body) !important;
  background: var(--bg-dark) !important;
  color: var(--text-main) !important;
  font-size: 1.06rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
::selection { background: var(--accent-primary); color: var(--bg-dark); }

a, a.href-link { color: var(--accent-primary) !important; text-decoration: none; transition: color 0.2s; font-weight: inherit !important; }
a:hover, a.href-link:hover { color: var(--accent-secondary) !important; text-decoration: none !important; font-weight: inherit !important; }
a.href-link:hover {
  border-bottom: 1px dashed var(--accent-secondary) !important;
}
a.red { color: var(--accent-primary) !important; }
a.red:hover { color: var(--accent-secondary) !important; border-bottom: 1px dashed var(--accent-secondary) !important; }


/* ============================================================================
   03  Ambient background (aurora + grain)
   ============================================================================ */
/* Ambient background layers */
.aurora-container {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(212,160,58,0.10), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(99,102,241,0.04), transparent);
}
.aurora {
  position: absolute; width: 150%; height: 150%;
  top: -25%; left: -25%;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,160,58,0.10) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(196,144,42,0.08) 0%, transparent 45%);
  filter: blur(90px);
  animation: aurora-drift 24s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: scale(1)   translate(0,0)     rotate(0deg); }
  50%  { transform: scale(1.1) translate(2%,3%)   rotate(2deg); }
  100% { transform: scale(1)   translate(-1%,-2%) rotate(-1deg); }
}
.grain-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1000;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Layer content above the bg */
body > nav, body > section, body > footer, body > main { position: relative; z-index: 2; }

/* Style the FewSOL template-credit pill appended by the shared script. */
#website-template-credits .royal-theme-btn-fewsol {
  color: var(--accent-primary) !important;
  border-bottom: 1px dashed var(--accent-primary) !important;
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0.25rem;
}
#website-template-credits .royal-theme-btn-fewsol:hover {
  color: var(--accent-secondary) !important;
}

/* Recolor the navbar to match the CLAP palette (overrides jp-royal-theme). */
.navbar, .navbar-brand, .navbar-menu, .navbar-tabs,
.navbar-start, .navbar-end {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.navbar {
  min-height: 0 !important;
  padding: 0.9rem 1.5rem 0 !important;
  border: 0 !important;
  margin-bottom: 0 !important;
}
/* Balanced breathing between the navbar and the hero title */
.hero .hero-body.pad-zero,
.hero .hero-body { padding-top: 2.75rem !important; }
.navbar-menu { padding: 0 !important; }
.navbar-start { gap: 0.5rem; }
.navbar-item:not(#related-research-home):not(#related-research) {
  background: transparent !important;
}
#related-research-home,
#related-research {
  background: transparent !important;
  color: var(--text-dim) !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem !important;
  height: 2.1rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.2s, background 0.2s;
}
#related-research-home { padding: 0.45rem 0.7rem !important; }
#related-research-home .icon { height: 100%; display: inline-flex; align-items: center; }
#related-research-home svg { width: 16px; height: 16px; }
#related-research-home:hover,
#related-research:hover {
  background: rgba(212,160,58,0.08) !important;
  color: var(--accent-primary) !important;
}
#related-research-home .icon svg path { fill: var(--text-dim) !important; transition: fill 0.2s; }
#related-research-home:hover .icon svg path { fill: var(--accent-primary) !important; }

/* Bulma's triangle after-element — strip the gray box, tint gold */
#related-research::after {
  background: transparent !important;
  border-color: var(--text-dim) transparent transparent transparent !important;
  border-style: solid !important;
  border-width: 4px 4px 0 4px !important;
  right: 0.6em !important;
  margin-top: -0.3em !important;
  width: 0 !important; height: 0 !important;
  transform: none !important;
  transition: border-color 0.2s;
}
#related-research:hover::after { border-top-color: var(--accent-primary) !important; }
#related-research { padding-right: 1.6rem !important; }

/* Dropdown panel */
#related-research-dropdown {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 0.5rem !important;
  margin-top: 0 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55) !important;
  min-width: 200px;
}
/* Extend the hoverable area of the trigger item downward by 12px so
   the cursor can cross to the dropdown without losing :hover. */
.navbar-item.has-dropdown.is-hoverable { padding-bottom: 12px !important; }
#related-research-dropdown a.navbar-item {
  background: transparent !important;
  color: var(--text-soft) !important;
  font-family: var(--font-display) !important;
  font-size: 0.88rem !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.9rem !important;
}
#related-research-dropdown a.navbar-item:hover {
  background: rgba(212,160,58,0.12) !important;
  color: var(--accent-primary) !important;
}
#related-research-dropdown a.navbar-item center {
  text-align: left; display: block;
}
.navbar-burger { color: var(--accent-primary) !important; background: transparent !important; }


/* ============================================================================
   06  Hero
   ============================================================================ */
/* Hero / title */
.publication-title {
  font-family: var(--font-display) !important;
  color: var(--text-main) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important;
  margin-bottom: 1rem !important;
}
.publication-title i, .publication-title em {
  font-style: italic;
  color: var(--accent-primary);
  text-shadow: 0 0 40px var(--accent-glow);
  font-weight: 700;
}
.publication-title b { color: var(--text-main); font-weight: 700; }
.publication-title .title-sep {
  color: var(--text-dim);
  font-weight: 400;
  font-style: normal;
  margin: 0 0.05em;
  text-shadow: none;
}

.title-line {
  width: 120px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  margin: 0.25rem auto 2rem;
  border-radius: 2px;
}

/* Eyebrow (venue pill) */
.eyebrow {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: linear-gradient(90deg, rgba(212,160,58,0.1), rgba(196,144,42,0.1));
  border: 1px solid rgba(212,160,58,0.3);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 1.25rem;
}

/* Author cards (HRT1 skeleton) */
#author-content { margin-bottom: 1.5rem !important; }
.publication-authors a { color: var(--text-soft) !important; }
.publication-authors a:hover { color: var(--accent-primary) !important; }
.publication-authors .is-size-6 {
  color: var(--text-soft);
  font-family: var(--font-display);
  font-weight: 500;
  display: inline-block;
  transition:
    color        0.3s ease,
    transform    0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    letter-spacing 0.3s ease,
    text-shadow  0.3s ease;
}
.publication-authors a:hover .is-size-6 {
  color: var(--accent-primary) !important;
  transform: translateY(-2px);
  letter-spacing: 0.015em;
  text-shadow: 0 0 16px var(--accent-glow);
}
.publication-authors sup { color: var(--accent-primary); }
.author-image {
  width: 110px !important;
  height: 110px !important;
  max-width: 110px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 0;
  display: inline-block;
  box-shadow:
    0 0 0 2px var(--glass-border),
    0 8px 20px rgba(0, 0, 0, 0.35);
  transition:
    box-shadow 0.3s ease,
    transform  0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter     0.3s ease;
}
a:hover .author-image {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 0 2px var(--accent-primary),
    0 0 0 6px rgba(212, 160, 58, 0.18),
    0 12px 28px rgba(212, 160, 58, 0.22);
  filter: saturate(1.06);
}
.author-meta-info, .affiliation {
  color: var(--text-dim) !important;
  font-size: 0.95rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem !important;
}

/* Publication link buttons — CLAP pill style */
.publication-links .button, .royal-theme-btn {
  background: var(--glass-bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 100px !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 0.55rem 1.1rem !important;
  margin: 0.25rem !important;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
}
.publication-links .button:hover, .royal-theme-btn:hover {
  border-color: var(--glass-border-strong) !important;
  color: var(--accent-primary) !important;
  background: var(--glass-bg-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212,160,58,0.18);
}
.publication-links .button .icon, .royal-theme-btn .icon { color: inherit; }


/* ============================================================================
   08  Typography blocks
   ============================================================================ */
/* Section titles */
.section { padding: 3rem 1.5rem; }
h2.title, .title.is-3 {
  font-family: var(--font-display) !important;
  color: var(--text-main) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
h2.title.is-3.royal-theme, .royal-theme h2, .royal-theme.title {
  color: var(--text-main) !important;
  background: transparent !important;
}
.section-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 0.4rem;
}

.sub-title {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--accent-primary);
  margin: 1.75rem 0 0.6rem;
}

/* Body prose (Bulma content) */
.content, .content p {
  color: var(--text-soft) !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem;
  line-height: 1.75;
}
.content p b { color: var(--text-main); font-weight: 600; }
.content p i, .content p em { color: var(--accent-secondary); font-style: italic; }


/* ============================================================================
   09  Figures (paper-fig, captions)
   ============================================================================ */
/* Figure frame */
.paper-fig {
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass-bg);
  transition: border-color 0.25s, transform 0.25s;
  margin: 1.5rem 0;
}
.paper-fig:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.paper-fig img { display: block; width: 100%; height: auto; }
.paper-fig.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.fig-caption {
  font-size: 0.9rem; color: var(--text-dim);
  line-height: 1.65; margin-top: 0.75rem; padding: 0 0.25rem;
  font-family: var(--font-body);
}
.fig-caption b { color: var(--text-soft); font-weight: 500; }
.fig-caption.centered { text-align: center; }


/* ============================================================================
   11  TL;DR callout
   ============================================================================ */
/* TL;DR */
.tldr {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 14px 14px 0;
  padding: 1.15rem 1.4rem;
  margin: 1.75rem 0;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}
.tldr .tldr-label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
  color: var(--accent-primary); font-weight: 600; margin-right: 0.3rem;
}


/* ============================================================================
   12  Stats tiles
   ============================================================================ */
/* Stats */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin: 2rem 0;
}
.stat {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 1.25rem 0.75rem;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: border-color 0.25s, transform 0.25s;
}
.stat:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.stat .n {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: 2.1rem; line-height: 1;
  color: var(--accent-primary);
  text-shadow: 0 0 30px var(--accent-glow);
}
.stat .l { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.4rem; font-family: var(--font-display); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }


/* ============================================================================
   13  Pipeline stepper
   ============================================================================ */
/* Pipeline */
.pipeline {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem; margin: 2rem 0;
}
.step {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 1.4rem 1.2rem;
  backdrop-filter: blur(10px);
  transition: border-color 0.25s, transform 0.25s;
}
.step:hover { border-color: var(--glass-border-strong); transform: translateY(-3px); }
.step .num {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em;
  color: var(--accent-primary); font-weight: 600; margin-bottom: 0.6rem;
}
.step h4 {
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  color: var(--text-main); margin-bottom: 0.4rem;
}
.step p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; font-family: var(--font-body); }
@media (max-width: 760px) { .pipeline { grid-template-columns: 1fr; } }


/* ============================================================================
   10  Video (YouTube facade)
   ============================================================================ */
/* Video */
.publication-video { max-width: 960px; margin: 0 auto; }
.iframe-container {
  position: relative; padding-top: 56.25%;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: #000;
}
.iframe-container iframe {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; border: 0 !important;
}


/* ============================================================================
   19  Link list (legacy)
   ============================================================================ */
/* Code/Data link list */

/* ============================================================================
   18  Code & Data resource grid
   ============================================================================ */
/* Code & Data — three-column resource grid */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}
.resource-col {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 1rem;
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.resource-col .rc-head {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary);
  padding-bottom: 0.55rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--glass-border);
}
.rc-head .rc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(212,160,58,0.1);
  border: 1px solid rgba(212,160,58,0.3);
  border-radius: 6px;
  font-size: 0.78rem;
}
.rc-chip {
  display: flex; flex-direction: column;
  padding: 0.55rem 0.8rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  text-decoration: none !important;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.rc-chip:hover {
  border-color: var(--glass-border-strong);
  background: rgba(212,160,58,0.06);
  transform: translateY(-1px);
}
.rc-chip .rc-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main) !important;
  line-height: 1.25;
}
.rc-chip .rc-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}
.rc-chip:hover .rc-name { color: var(--accent-primary) !important; }
@media (max-width: 900px) { .resource-grid { grid-template-columns: 1fr; } }

.links-list { list-style: none; margin: 1rem 0; padding: 0; }
.links-list li {
  display: grid; grid-template-columns: minmax(160px, max-content) 1fr;
  gap: 1.5rem; padding: 1rem 0;
  border-bottom: 1px solid var(--glass-border);
  align-items: baseline;
}
.links-list li:last-child { border-bottom: 0; }
.links-list .label { font-family: var(--mono); font-size: 0.88rem; }
.links-list .label a { color: var(--accent-primary) !important; }
.links-list .desc { font-size: 0.95rem; color: var(--text-dim); font-family: var(--font-body); }
@media (max-width: 560px) { .links-list li { grid-template-columns: 1fr; gap: 0.25rem; } }


/* ============================================================================
   21  BibTeX block
   ============================================================================ */
/* BibTeX */
.bib-container pre {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 3px solid var(--accent-primary) !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 1.1rem 1.3rem !important;
  color: var(--text-soft) !important;
  font-family: var(--mono) !important;
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
  position: relative;
}
.bib-container pre code { color: var(--text-soft) !important; background: transparent !important; }
#copy-btn {
  position: absolute; top: 0.55rem; right: 0.55rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 6px; padding: 0.35rem 0.7rem;
  color: var(--text-dim); cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  font-family: var(--font-display); font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
#copy-btn .copy-label { display: inline; }
#copy-btn:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.copy-highlight { color: inherit !important; }


/* ============================================================================
   23  Footer
   ============================================================================ */
/* Footer */
.footer {
  background: transparent !important;
  border-top: 1px solid var(--glass-border);
  color: var(--text-faint) !important;
  padding: 2.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.footer a { color: var(--text-dim) !important; }

/* Utility: soft section divider */
.section-divider {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border) 30%, var(--glass-border) 70%, transparent);
  margin: 1rem 0;
}


/* ============================================================================
   07  Progress sidebar + pill TOC
   ============================================================================ */
/* Progress sidebar (lap-vla style) */
.progress-sidebar {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: none;
}
@media (min-width: 1200px) {
  .progress-sidebar {
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .page-nav { display: none !important; }
}
.progress-track {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
}
.progress-line {
  position: absolute;
  left: 7px; top: 22px; bottom: 22px;
  width: 2px;
  background: var(--glass-border);
  z-index: 0;
}
.progress-line-fill {
  position: absolute;
  left: 7px; top: 22px;
  width: 2px; height: 0;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-glow);
  z-index: 1;
  transition: height 0.25s ease;
}
.progress-item {
  position: relative; z-index: 2;
  padding: 8px 0;
}
.progress-item a {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
  padding: 8px 6px 8px 0;  /* WCAG 44px tap target via padding */
  border-radius: 999px;
}
.progress-item a:hover { background: rgba(212,160,58,0.06); }
.progress-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-dark);
  border: 2px solid var(--glass-border);
  transition: all 0.25s ease;
  flex-shrink: 0;
  margin-left: 0;
}
.progress-item.passed .progress-dot {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.progress-item.active .progress-dot {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 5px rgba(212,160,58,0.2), 0 0 12px var(--accent-glow);
}
.progress-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 1;               /* always visible for discoverability */
  transition: color 0.2s ease;
}
.progress-item:hover .progress-label { color: var(--text-main); }
.progress-item.active .progress-label { color: var(--accent-primary); }

/* In-page nav — sticky, translucent (mobile / narrow) */
.page-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 1rem auto 2rem;
  padding: 0.55rem 0.6rem;
  background: rgba(10,14,20,0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  max-width: max-content;
}
@media (prefers-color-scheme: light) {
  .page-nav { background: rgba(250,249,247,0.8); }
}
.page-nav a {
  color: var(--text-dim) !important;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.page-nav a:hover {
  color: var(--accent-primary) !important;
  background: rgba(212,160,58,0.08);
}
.page-nav a.active {
  color: var(--accent-primary) !important;
  background: rgba(212,160,58,0.12);
}
@media (max-width: 560px) {
  .page-nav { border-radius: 14px; }
  .page-nav a { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
}

/* Tighter section rhythm for low-mental-load flow */
.section { padding: 2.5rem 1.5rem; }
.section + .section { padding-top: 2rem; }
h2.title.is-3 { margin-bottom: 1.25rem !important; font-size: 1.75rem !important; }

/* Consistent figure spacing */
.paper-fig { margin-top: 0.5rem; cursor: zoom-in; }


/* ============================================================================
   17  Results section containers
   ============================================================================ */
/* Results section — unified visual rhythm */
.results-sub {
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-dim);
  margin: -0.25rem auto 2rem;
  letter-spacing: 0.01em;
}
.result-block {
  margin: 2.25rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--glass-border);
}
.result-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 1rem; }
.result-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 1.1rem;
}
.result-eyebrow .rb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-glow);
}
.result-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.result-grid .kpi-card { margin: 0; }
.result-grid .result-fig { margin: 0; display: flex; flex-direction: column; }
.result-grid .result-fig .paper-fig { margin: 0; flex: 1; display: flex; align-items: center; }
.result-grid .result-fig .paper-fig img { width: 100%; height: auto; }
.result-grid .result-fig figcaption { margin-top: 0.7rem; }

/* Hero KPI — polished editorial callout */
.kpi-card-hero {
  display: flex; flex-direction: column;
  padding: 1.5rem 1.35rem;
  gap: 0.55rem;
  position: relative;
  background:
    radial-gradient(120% 60% at 50% -20%, rgba(212,160,58,0.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  overflow: hidden;
}
.kpi-card-hero::before {
  /* thin gold hairline along the top */
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0.5;
}
.kpi-card-hero .kpi-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.kpi-card-hero .kpi-stat {
  display: flex; align-items: baseline;
  gap: 0.6rem;
  margin: 0.2rem 0 0.1rem;
}
.kpi-card-hero .kpi-big {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent-primary);
  text-shadow: 0 0 40px var(--accent-glow);
}
.kpi-card-hero .kpi-big .kpi-x {
  font-size: 0.55em;
  font-weight: 500;
  margin-left: 0.05em;
  opacity: 0.85;
}
.kpi-card-hero .kpi-delta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-primary);
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(212,160,58,0.35);
  border-radius: 999px;
  background: rgba(212,160,58,0.08);
  letter-spacing: 0.04em;
}
.kpi-card-hero .kpi-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: -0.005em;
  margin-top: 0.2rem;
}
.kpi-card-hero .kpi-bar {
  display: flex;
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0 0.25rem;
}
.kpi-card-hero .kpi-ba {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
}
.kpi-card-hero .kpi-ba-l,
.kpi-card-hero .kpi-ba-r {
  display: inline-flex; flex-direction: column;
  line-height: 1.1;
  color: var(--text-faint);
}
.kpi-card-hero .kpi-ba-l em,
.kpi-card-hero .kpi-ba-r em {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.15rem;
}
.kpi-card-hero .kpi-ba-r { align-items: flex-end; color: var(--accent-primary); }
.kpi-card-hero .kpi-ba-r b {
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent-primary);
  text-shadow: 0 0 14px var(--accent-glow);
}
.kpi-card-hero .kpi-ba-arrow {
  color: var(--accent-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  align-self: flex-end;
  line-height: 1;
  opacity: 0.8;
}

/* Figure side: refined frame + caption */
.result-grid .result-fig .paper-fig {
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass-bg);
  transition: border-color 0.25s, transform 0.25s;
}
.result-grid .result-fig .paper-fig:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
}
.result-grid .result-fig figcaption b { color: var(--text-main); font-weight: 600; }

@media (max-width: 900px) {
  .result-grid { grid-template-columns: 1fr; }
  .kpi-card-hero .kpi-big { font-size: 3.2rem; }
}

/* Results — editorial lede above KPIs */
.outcome-lede-wrap {
  max-width: 780px;
  margin: 1rem auto 2rem;
  text-align: center;
  position: relative;
  padding-top: 1.25rem;
}
.outcome-lede-wrap::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0.7;
}
.outcome-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 0.75rem;
}
.outcome-lede {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-soft);
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0;
}
.outcome-lede em {
  font-style: italic;
  color: var(--text-main);
  font-weight: 400;
}
.outcome-lede b {
  color: var(--accent-primary);
  font-weight: 500;
  text-shadow: 0 0 16px var(--accent-glow);
}

/* Results — editorial pull-quote */
.outcome-quote {
  position: relative;
  max-width: 900px;
  margin: 1.5rem auto 2rem;
  padding: 1.75rem 2.25rem;
  background:
    linear-gradient(180deg, rgba(212,160,58,0.04), transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}
.outcome-quote::before, .outcome-quote::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  height: 2px; width: 56px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0.8;
}
.outcome-quote::before { top: 0; }
.outcome-quote::after  { bottom: 0; }
.outcome-quote blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--text-soft);
  text-align: center;
  font-weight: 300;
}
.outcome-quote b { color: var(--text-main); font-weight: 600; }

.oq-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  padding: 0.12rem 0.55rem;
  border: 1px solid rgba(212,160,58,0.35);
  border-radius: 6px;
  background: rgba(212,160,58,0.05);
  vertical-align: baseline;
  margin: 0 0.1rem;
}

.oq-metric {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  margin: 0 0.1rem;
}
.oq-before { color: var(--text-faint); }
.oq-after {
  color: var(--accent-primary);
  text-shadow: 0 0 18px var(--accent-glow);
}
.oq-arrow {
  color: var(--accent-primary);
  font-weight: 700;
  margin: 0 0.15rem;
}
.oq-big {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--accent-primary);
  text-shadow: 0 0 28px var(--accent-glow);
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin: 0 0.15rem;
  vertical-align: -0.1em;
}

@media (max-width: 720px) {
  .outcome-quote { padding: 1.25rem 1.25rem; }
  .outcome-quote blockquote { font-size: 1.05rem; line-height: 1.7; }
  .oq-big { font-size: 1.4rem; }
}

/* Before → after banner */
.ba-banner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  max-width: 920px;
  margin: 1rem auto 2rem;
  padding: 1.5rem 1.25rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}
.ba-side { text-align: center; }
.ba-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}
.ba-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--text-faint);
  letter-spacing: -0.02em;
}
.ba-after .ba-score {
  color: var(--accent-primary);
  text-shadow: 0 0 30px var(--accent-glow);
}
.ba-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 0.35rem;
}
.ba-delta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--accent-primary);
  vertical-align: super;
  margin-left: 0.15rem;
}
.ba-arrow {
  display: flex; align-items: center; flex-direction: column;
  color: var(--accent-primary);
  gap: 0.3rem;
  min-width: 150px;
}
.ba-arrow-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.ba-arrow-line {
  display: block;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}
.ba-arrow-head {
  font-size: 1.5rem;
  color: var(--accent-primary);
  display: none;  /* only shown on mobile where arrow rotates */
}
@media (max-width: 720px) {
  .ba-banner { grid-template-columns: 1fr; }
  .ba-arrow { flex-direction: row; }
  .ba-arrow-line { display: none; }
  .ba-arrow-head { display: inline; }
}


/* ============================================================================
   12  KPI cards (Results)
   ============================================================================ */
/* Results — KPI tiles (v2: tag + big stat + bar + before→after + note) */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}
.kpi-card {
  background:
    linear-gradient(180deg, rgba(212,160,58,0.05), transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.3rem 1.25rem 1.2rem;
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: border-color 0.25s, transform 0.25s;
  text-align: left;
  position: relative;
}
.kpi-card:hover { border-color: var(--glass-border-strong); transform: translateY(-3px); }

.kpi-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.kpi-headline {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-top: -0.1rem;
}
.kpi-big {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent-primary);
  text-shadow: 0 0 28px var(--accent-glow);
  line-height: 0.95;
}
.kpi-delta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 0.15rem 0.5rem;
  background: rgba(212,160,58,0.08);
  border: 1px solid rgba(212,160,58,0.22);
  border-radius: 999px;
}
.kpi-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: -0.005em;
}

/* Progress-style before→after bar */
.kpi-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  margin: 0.1rem 0 0.15rem;
}
.kpi-bar-seg { display: block; height: 100%; }
.kpi-bar-before { background: var(--text-faint); }
.kpi-bar-after  {
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-glow);
}
.kpi-bar-empty  { background: transparent; }

.kpi-ba {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  display: flex; align-items: baseline; gap: 0.5rem;
}
.kpi-ba .kpi-ba-arrow { color: var(--accent-primary); font-weight: 600; }
.kpi-ba .kpi-ba-hi {
  color: var(--accent-primary);
  font-weight: 600;
  text-shadow: 0 0 12px var(--accent-glow);
}

.kpi-note {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-dim);
  margin-top: auto;
  padding-top: 0.2rem;
}
.kpi-note i { color: var(--text-soft); font-style: italic; }
.kpi-row-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.kpi-row-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-row-solo { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  .kpi-row, .kpi-row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .kpi-row, .kpi-row-2, .kpi-row-3 { grid-template-columns: 1fr; }
}

/* SceneReplica results table — clean, restrained */
.scene-table-wrap { overflow-x: auto; margin: 1rem 0; }
.scene-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.95rem;
}
.scene-table th, .scene-table td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}
.scene-table th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.scene-table th.num, .scene-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.scene-table td { color: var(--text-soft); font-family: var(--font-body); }
.scene-table tbody tr:last-child td { border-bottom: 0; }
.scene-table tr.scene-highlight { background: rgba(212,160,58,0.05); }
.scene-table tr.scene-highlight td { color: var(--text-main); }
.scene-table .delta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-primary);
  margin-left: 0.35rem;
}
.scene-table .rowtype {
  display: block;
  font-family: var(--font-body);
  color: var(--text-soft);
}
.scene-table .rowtag {
  display: inline-block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.scene-table .rowtag.ours {
  color: var(--accent-primary);
  font-weight: 600;
}


/* ============================================================================
   14  Metric bar cards
   ============================================================================ */
/* SceneReplica metric cards — visual bar comparison */
.metric-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.metric-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  backdrop-filter: blur(10px);
}
.metric-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.9rem;
}
.metric-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}
.metric-scale {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}
.metric-rows { display: flex; flex-direction: column; gap: 0.55rem; }
.mrow {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 1.5fr 56px;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.mrow-l {
  color: var(--text-dim);
  line-height: 1.3;
}
.mrow-l em { color: var(--text-faint); font-style: italic; font-size: 0.82em; }
.mrow-l b { color: var(--text-main); font-weight: 600; }
.mrow-l .mrow-sub {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.08rem 0.35rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  vertical-align: 0.05em;
  opacity: 0.7;
}
.mrow:hover .mrow-sub { opacity: 1; color: var(--text-dim); }
.mrow-bar {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
}
.mrow-bar i {
  display: block;
  height: 100%;
  background: var(--text-faint);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mrow-v {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-soft);
  text-align: right;
  white-space: nowrap;
}
.mrow-ours .mrow-bar i {
  background: var(--accent-primary);
  box-shadow: 0 0 14px var(--accent-glow);
}
.mrow-ours .mrow-v {
  color: var(--accent-primary);
  font-weight: 600;
}
.mrow-ours .delta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent-primary);
  padding: 0 0.35rem;
  border: 1px solid rgba(212,160,58,0.35);
  border-radius: 999px;
  margin-left: 0.15rem;
}
@media (max-width: 860px) {
  .metric-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mrow { grid-template-columns: 1fr; }
  .mrow-v { text-align: left; }
}


/* ============================================================================
   22  Real-robot walkthrough caption
   ============================================================================ */
/* Real-robot figure walkthrough — 6 stage labels inline */
.rr-walkthrough {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin: 0.5rem 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-dim);
}
.rr-walkthrough > span {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.rr-walkthrough em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.75rem;
  color: var(--accent-primary);
  letter-spacing: 0.05em;
  text-transform: lowercase;
}


/* ============================================================================
   13  Real-robot pipeline stepper
   ============================================================================ */
/* Real-robot pipeline stepper */
.rr-pipeline {
  list-style: none; padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5rem;             /* gap is 2.5rem · connector uses ~1.5rem of it, leaves clear breathing on both sides */
  align-items: stretch;
  counter-reset: rr;
  position: relative;
}
.rr-pipeline li {
  position: relative;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.85rem 0.9rem;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s, background 0.25s;
}
/* Gold underline bar — grows on hover to make the bottom edge unmistakable.
   Note: we can't use overflow:hidden here because the connector arrow
   (li+li::before) lives outside the card. Rounding the bar manually keeps
   it visually flush with the card's bottom corners. */
.rr-pipeline li::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px;      /* sit inside the 1px border */
  bottom: 0;
  height: 0;
  background: var(--accent-primary);
  border-radius: 0 0 11px 11px;
  box-shadow: 0 0 14px var(--accent-glow);
  transition: height 0.25s ease;
  pointer-events: none;
}
.rr-pipeline li:hover {
  border-color: rgba(212, 160, 58, 0.5);
  background: var(--glass-bg-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(212, 160, 58, 0.22);
}
.rr-pipeline li:hover::after { height: 3px; }

/* Connector: a thin gold hairline spanning the gap, with an arrow head.
   Rendered as two layered pseudo-elements on each non-first card. */
/* Connector — single inline SVG masked arrow (thin stroked line + open
   chevron tip). Rendered via CSS mask so the colour follows the accent
   palette. Vector, so it stays crisp on any DPI. */
.rr-pipeline li + li::before {
  /* Gap = 2.5rem, arrow width = 1.6rem → 0.45rem buffer each side (centered). */
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 0.45rem);
  width: 1.6rem;
  height: 10px;
  transform: translateY(-50%);
  background: var(--accent-primary);
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' preserveAspectRatio='xMidYMid meet'><path d='M0 5 H27 M22 1 L27 5 L22 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / contain no-repeat;
          mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' preserveAspectRatio='xMidYMid meet'><path d='M0 5 H27 M22 1 L27 5 L22 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / contain no-repeat;
  opacity: 0.8;
  filter: drop-shadow(0 0 5px var(--accent-glow));
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 1;
}
/* subtle motion on hover — the line leans forward */
.rr-pipeline li + li:hover::before,
.rr-pipeline li:hover + li::before {
  opacity: 1;
  transform: translate(2px, -50%);
}
.rr-pipeline .rr-n {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--accent-primary);
  font-weight: 600;
}
.rr-pipeline .rr-t {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-soft);
}
.rr-pipeline li.rr-hi {
  background:
    linear-gradient(180deg, rgba(212,160,58,0.12), rgba(212,160,58,0.04));
  border-color: rgba(212,160,58,0.45);
  box-shadow: 0 0 0 1px rgba(212,160,58,0.08) inset;
}
.rr-pipeline li.rr-hi:hover {
  background:
    linear-gradient(180deg, rgba(212,160,58,0.18), rgba(212,160,58,0.06));
  border-color: var(--accent-primary);
  box-shadow: 0 6px 22px rgba(212,160,58,0.22), 0 0 0 1px rgba(212,160,58,0.15) inset;
}
.rr-pipeline li.rr-hi .rr-t { color: var(--text-main); font-weight: 600; }
@media (max-width: 900px) {
  .rr-pipeline { grid-template-columns: 1fr 1fr; }
  .rr-pipeline li + li::before { display: none; }
}
@media (max-width: 480px) { .rr-pipeline { grid-template-columns: 1fr; } }


/* ============================================================================
   16  Dataset snapshot tiles
   ============================================================================ */
/* Dataset snapshot — stat tiles + split explainers */
.ds-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin: 0.75rem 0 1.25rem;
}
.ds-stat {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1rem 1rem 0.9rem;
  backdrop-filter: blur(10px);
}
.ds-stat .ds-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.05;
  color: var(--accent-primary);
  letter-spacing: -0.02em;
  text-shadow: 0 0 22px var(--accent-glow);
}
.ds-stat .ds-l {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main);
  margin-top: 0.2rem;
}
.ds-stat .ds-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-top: 0.25rem;
}
@media (max-width: 860px) { .ds-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ds-stats { grid-template-columns: 1fr; } }

.ds-splits {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.ds-split {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 12px 12px 0;
  padding: 0.85rem 1.1rem;
}
.ds-split-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 0.25rem;
}
.ds-split-body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.5;
}
@media (max-width: 720px) { .ds-splits { grid-template-columns: 1fr; } }


/* ============================================================================
   20  Acknowledgements
   ============================================================================ */
/* Acknowledgements — sponsor grid */
.ack-eyebrow {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 1.5rem 0 1.25rem;
}
.ack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  margin: 0;
}
.ack-row {
  max-width: 820px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 0.4rem;
}
.ack-item {
  display: flex; align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: border-color 0.25s, background 0.25s;
}
.ack-item:hover { border-color: var(--glass-border-strong); background: var(--glass-bg-strong); }
.ack-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-main);
  min-width: 72px;
}
.ack-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-glow);
  flex-shrink: 0;
}
.ack-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-soft);
  flex: 1;
  line-height: 1.4;
}
.ack-grant {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent-primary);
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(212,160,58,0.3);
  border-radius: 999px;
  background: rgba(212,160,58,0.06);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .ack-item { flex-wrap: wrap; gap: 0.4rem 0.7rem; }
  .ack-desc { flex: 1 1 100%; }
}
.ack-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 1.35rem 1.25rem 1.1rem;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: border-color 0.25s, transform 0.25s;
}
.ack-card:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
}
.ack-card .ack-org {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-main);
  margin-bottom: 0.3rem;
}
.ack-card .ack-prog {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.45;
  margin: 0;
}
.ack-card .ack-id {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent-primary);
  padding: 0.22rem 0.6rem;
  border: 1px solid rgba(212,160,58,0.3);
  border-radius: 999px;
  background: rgba(212,160,58,0.06);
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}
.ack-thanks {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-soft);
  margin: 2rem auto 0;
  max-width: 720px;
  font-style: italic;
}
@media (max-width: 760px) {
  .ack-grid { grid-template-columns: 1fr; }
}


/* ============================================================================
   15  FS3 single-row flow
   ============================================================================ */
/* FS3 single-row flow — 3 equal columns that NEVER overflow the
   container. Images are scaled to fit their column, never cropped. */
.fs3-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: 1rem;
  row-gap: 0;
  margin: 1.25rem 0 0;
  width: 100%;
}
.fs3-step {
  margin: 0;
  display: contents;
}
.fs3-step > .fs3-head  { grid-row: 1; align-self: end; margin-bottom: 0.5rem; min-width: 0; }
.fs3-step > .paper-fig { grid-row: 2; align-self: center; min-width: 0; width: 100%; }
.fs3-step > figcaption { grid-row: 3; margin-top: 0.6rem; align-self: start; min-width: 0; }
.fs3-step .fs3-head {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.5rem;
}
.fs3-step .fs3-num {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent-primary);
  background: rgba(212,160,58,0.08);
  border: 1px solid rgba(212,160,58,0.3);
  border-radius: 5px;
  padding: 0.18rem 0.45rem;
  flex: 0 0 auto;
}
.fs3-step .fs3-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs3-step .paper-fig {
  margin: 0;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 220px;        /* uniform rendered height for all three */
}
.fs3-step .paper-fig img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;         /* contain within the 220px box, no crop */
  object-fit: contain;
}
.fs3-step figcaption {
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 340px;
}

/* Stack vertically on narrow screens (keeps readability) */
@media (max-width: 900px) {
  .fs3-flow {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-rows: none;
    row-gap: 1.5rem;
  }
  .fs3-step { display: flex; flex-direction: column; }
  .fs3-step .paper-fig img { height: auto; width: 100%; }
  .fs3-step figcaption { max-width: 100%; }
}
.fig-caption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-dim); }

/* YouTube facade — click-to-play, avoids loading 500kB on first paint */
.yt-facade {
  position: relative;
  padding-top: 56.25%;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: #000;
  cursor: pointer;
}
.yt-facade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.yt-facade::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 78px; height: 78px;
  transform: translate(-50%, -50%);
  background: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(212,160,58,0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.yt-facade::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent var(--bg-dark);
  z-index: 2;
}
.yt-facade:hover::after,
.yt-facade:focus-visible::after {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 10px rgba(212,160,58,0.15);
}
.yt-facade:has(iframe)::before,
.yt-facade:has(iframe)::after,
.yt-facade.is-playing::before,
.yt-facade.is-playing::after { content: none; }
.yt-facade:has(iframe),
.yt-facade.is-playing { cursor: default; }

/* Lightbox for figures */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(8,10,14,0.92);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: var(--text-main); font-size: 1.4rem; line-height: 1;
  width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* ============================================================================
   Site footer — quiet divider + brand + meta line (mirrors clap-theme.css)
   ============================================================================ */
.site-footer {
  background: transparent !important;
  padding: 2rem 1.5rem 2.5rem !important;
  color: var(--text-faint) !important;
}
.site-footer .footer-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border) 20%, var(--glass-border) 80%, transparent);
  margin: 0 auto 1.25rem;
  max-width: 680px;
}
.site-footer .footer-row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 0.6rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.site-footer .footer-brand {
  color: var(--accent-primary);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.site-footer .footer-sep { color: var(--accent-primary); opacity: 0.5; font-weight: 700; }
.site-footer .footer-meta a { color: var(--text-soft) !important; }
.site-footer .footer-meta a:hover { color: var(--accent-primary) !important; }
.site-footer .royal-theme-btn-fewsol { display: none !important; }
@media (max-width: 600px) {
  .site-footer .footer-row { flex-direction: column; gap: 0.4rem; }
  .site-footer .footer-sep { display: none; }
}

/* ============================================================================
   Venue / conference acceptance pill (mirrors clap-theme.css)
   ============================================================================ */
.venue-line {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 1.4rem auto 0.25rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1.15rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-main);
  letter-spacing: 0.005em;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.venue-line em {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-soft);
  font-weight: 400;
}
.venue-line b {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-primary);
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(212, 160, 58, 0.4);
  border-radius: 999px;
  background: rgba(212, 160, 58, 0.08);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.venue-line .venue-dot { color: var(--accent-primary); opacity: 0.7; }