/* ============================================================
   Zero-Shot LQR — clean "product/demo page" theme, following the
   layout language of horizonrobotics.github.io/gail/Holo-M/:
   solid-on-scroll nav, centered lockup hero, bordered fact cards,
   abstract + "Full abstract" reveal, pill specs, underline-best
   tables, citation card with copy button. Adapted (no hero video,
   own accent/content) rather than a literal clone.
   ============================================================ */

:root {
  --bg: #fbfbfc;
  --fg: #14161a;
  --muted: #5c6270;
  --line: #e6e7ec;
  --card: #f5f6f9;
  --accent: #2454c9;
  --accent-ink: #ffffff;
  --pos: #1f8a5f;
  --radius: 12px;
  --max: 1080px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nav-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
}
img, video { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
p { color: var(--muted); }
h1, h2, h3, h4 { font-family: var(--font); letter-spacing: -.015em; line-height: 1.15; color: var(--fg); margin: 0 0 .5rem; }
h2 { font-size: 1.9em; margin: 0 0 14px; }
h3 { font-size: 1.15em; margin: 0 0 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { scroll-margin-top: calc(var(--nav-h) + 14px); }

.skip-link { position: absolute; left: -999px; top: 1rem; background: var(--fg); color: #fff; padding: .7rem 1rem; border-radius: 8px; z-index: 30; }
.skip-link:focus { left: 1rem; }

/* ---------- Nav ---------- */
#topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--nav-h); border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease; }
#topnav .navwrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 22px; }
#topnav.solid { background: rgba(251, 251, 252, .88); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: .5em; margin-right: auto; text-decoration: none; font-weight: 700; font-size: 1.08em; color: var(--fg); }
.brand img { height: 24px; width: auto; }
#topnav .nl { color: var(--fg); text-decoration: none; font-weight: 500; font-size: .95em; opacity: .72; }
#topnav .nl:hover { opacity: 1; color: var(--accent); text-decoration: none; }
@media (max-width: 700px) { #topnav .nl { display: none; } }

/* ---------- Hero (centered lockup, no video — static variant) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--nav-h) + 64px) 0 8px; text-align: center; }
/* the montage, simulations only, full width behind the whole header; a light veil keeps the text readable */
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
.hero-veil { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(to bottom, rgba(251,251,252,.40) 0%, rgba(251,251,252,.46) 60%, rgba(251,251,252,.82) 92%, var(--bg) 100%); }
.hero .lockup, .hero h1, .hero .tag, .hero .authors, .hero .affiliations { text-shadow: 0 0 12px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.95); }
.hero .tag, .hero .affiliations { color: #20242e; }
@media (max-width: 700px) { .hero-bg { object-position: center; } }
.hero .lockup { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: 1.6em; letter-spacing: -.02em; color: var(--fg); margin-bottom: 22px; }
.hero .lockup img { height: 1.5em; width: auto; }
.hero .lockup .m { color: var(--accent); }
.hero h1 { font-size: clamp(1.7em, 3.4vw, 2.5em); max-width: 900px; margin: 0 auto 14px; }
.hero .tag { max-width: 700px; margin: 0 auto 10px; font-size: 1.08em; color: var(--muted); }
.hero .authors { max-width: 700px; margin: 0 auto 4px; font-size: 1.03em; }
.hero .authors a { color: var(--fg); font-weight: 600; border-bottom: 1px solid var(--line); }
.hero .authors a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.hero .affiliations { max-width: 700px; margin: 0 auto 26px; font-size: .86em; color: var(--muted); }
.hero .btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.btn { display: inline-flex; align-items: center; gap: .5em; padding: 10px 18px; border-radius: 999px; background: var(--fg); color: #fff; text-decoration: none; font-weight: 600; font-size: .95em; border: 1px solid var(--fg); cursor: pointer; }
.btn:hover { text-decoration: none; background: var(--accent); border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.placeholder { background: transparent; color: var(--muted); border: 1px dashed var(--line); cursor: default; }
.btn.placeholder:hover { text-decoration: none; background: transparent; border-color: var(--line); filter: none; }

.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 920px; margin: 34px auto 0; padding-top: 22px; border-top: 1px solid var(--line); text-align: left; }
.stat-strip .stat b { display: block; font-size: 1.25em; font-weight: 700; margin-bottom: 3px; }
.stat-strip .stat span { display: block; color: var(--muted); font-size: .82em; line-height: 1.35; }

/* ---------- Figures ---------- */
.fig { margin: 0; text-align: center; }
.fig img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fig figcaption { max-width: 820px; margin: 12px auto 0; text-align: left; color: var(--muted); font-size: .92em; }
.fig figcaption .fnum { color: var(--accent); font-weight: 700; font-family: var(--mono); font-size: .85em; margin-right: .4em; }
.hero-fig { margin: 46px 0 0; }

/* ---------- Sections ---------- */
main.wrap section { margin: 64px 0; }
.lead { max-width: 760px; margin: 0 0 14px; color: var(--muted); text-align: justify; text-align-last: left; }

.abstract { max-width: 760px; text-align: justify; margin: 0 0 6px; }
.more { max-width: 760px; margin-top: 6px; color: var(--muted); }
.more summary { cursor: pointer; font-weight: 600; color: var(--fg); font-size: .95em; }
.more summary:hover { color: var(--accent); }
.more p { text-align: justify; font-size: .95em; margin: 10px 0 0; }

/* ---------- Fact / contribution cards ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; }
.fact .num { font-family: var(--mono); font-size: .78em; color: var(--accent); letter-spacing: .06em; margin-bottom: 8px; }
.fact .big { font-size: 1.05em; font-weight: 700; line-height: 1.25; margin-bottom: 6px; }
.fact .small { color: var(--muted); font-size: .9em; line-height: 1.45; }
@media (max-width: 980px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Theorem callout ---------- */
.theorem { margin-top: 26px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; text-align: left; }
.theorem .ttitle { font-weight: 700; font-size: .98em; margin-bottom: 8px; color: var(--accent); display: flex; align-items: center; gap: .5em; }
.theorem p { color: var(--fg); opacity: .85; margin: 0; font-size: .95em; }

/* ---------- Specs pills ---------- */
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.spec { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: .85em; color: var(--fg); background: #fff; font-family: var(--mono); }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gallery .span-2 { grid-column: span 2; }
@media (max-width: 820px) { .gallery { grid-template-columns: 1fr; } .gallery .span-2 { grid-column: span 1; } }

/* ---------- Tables ---------- */
.data-table { margin-top: 30px; }
.data-table .tlabel { color: var(--muted); font-size: .9em; margin: 0 0 10px; text-align: left; }
table.tv { width: 100%; border-collapse: collapse; font-size: .92em; }
table.tv th, table.tv td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: right; }
table.tv th:first-child, table.tv td:first-child { text-align: left; }
table.tv thead th { color: var(--muted); font-weight: 600; font-size: .82em; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--fg); }
table.tv td.ours { font-weight: 700; }
table.tv td.best { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.table-note { color: var(--muted); font-size: .9em; margin-top: 12px; max-width: 760px; }

/* ---------- Citation ---------- */
.cite { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 6px; }
.cite pre { margin: 0; padding: 20px 22px; font-family: var(--mono); font-size: .85em; line-height: 1.65; color: var(--fg); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.cite .copy { position: absolute; top: 12px; right: 12px; font: inherit; font-size: .82em; font-weight: 600; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--fg); cursor: pointer; }
.cite .copy:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Footer ---------- */
footer.wrap { color: var(--muted); font-size: .9em; padding: 30px 24px 60px; border-top: 1px solid var(--line); margin-top: 50px; display: flex; align-items: center; gap: .5em; }
footer.wrap img { height: 18px; width: auto; }
footer.wrap img + img { height: 24px; margin-left: .2em; }

@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-top: calc(var(--nav-h) + 40px); }
}

.hero .affil-logos { display: flex; align-items: center; justify-content: center; gap: 28px; margin: -8px auto 26px; }
.hero .affil-logos img { height: 52px; width: auto; border-radius: 4px; }
@media (max-width: 600px) { .hero .affil-logos img { height: 40px; } }