/* ==========================================================================
   Shared styles of the GeoSET, GeoCR and MotionMaestro project pages.
   This file is identical on the three sites. Each site's style.css sets the
   brand tokens and adds the components that only that page has:
     --accent         brand colour (title accent, wordmark, rules)
     --accent-text    brand colour for small text and white-on-colour fills (>= 4.5:1)
     --accent-strong  link hover
     --accent-soft    tinted fill        --accent-line  tinted border
     --logo-k         hero logo height factor (same wordmark height on every page)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* neutrals */
  --text: #1C2738;          /* headings, strong text (logo ink) */
  --text-2: #2b3240;        /* body copy */
  --muted: #5a6373;         /* secondary copy, captions */
  --faint: #6b7385;         /* tertiary labels (4.8:1 on white) */
  --bg: #ffffff;
  --bg-band: #f5f7fa;       /* alternating section band */
  --bg-sunken: #eceff4;     /* segmented controls, wells */
  --border: #e2e6ec;
  --border-strong: #cad0da;
  --ink: #1C2738;           /* logo ink: dark pill buttons, wordmark */
  --on-accent: #ffffff;
  --ok: #17804d;

  /* shape */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --shadow-m: 0 6px 16px -6px rgba(16, 24, 40, .16), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --shadow-l: 0 24px 60px -16px rgba(9, 13, 22, .45);

  /* measures */
  --w-content: 1080px;      /* default container (BibTeX, hero, footer) */
  --w-wide: 1240px;         /* results, figures, galleries, tables */
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 56px;
  --section-pad: clamp(44px, 6vw, 76px);

  /* type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* logo wordmark face */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-body: 1.0625rem;     /* 17px */
  --lh-body: 1.7;

  --ease: cubic-bezier(.22, .7, .2, 1);
  color-scheme: light;
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) - 1px);   /* sections carry their own top padding */
}
html:has(dialog[open]), html.has-dialog { overflow: hidden; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text-2);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0; color: var(--text); line-height: 1.2; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

b, strong { font-weight: 600; color: var(--text); }
sup { font-size: .68em; line-height: 0; }
code { font-family: var(--font-mono); font-size: .88em; }
.mono { font-family: var(--font-mono); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 18%, #fff); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radius-s);
  background: var(--ink); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }

/* ---------- 3. Layout: containers, sections, bands ----------------------- */
.container {
  width: 100%;
  max-width: calc(var(--w-content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }

/* sections alternate white and banded: headline, band, white, band (Method), white (BibTeX) */
.section { padding-block: var(--section-pad); }
.section--band { background: var(--bg-band); border-block: 1px solid var(--border); }
[id]:not(section):not(main) { scroll-margin-top: 20px; }

.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-gap, clamp(32px, 4.5vw, 52px)); }
.stack--tables { --stack-gap: clamp(28px, 3.5vw, 40px); }

/* ---------- 4. Section heads; headline section under the hero ------------ */
.section-head { max-width: 780px; margin: 0 auto clamp(20px, 3vw, 32px); text-align: center; }
.section-title {
  margin: 0;
  font: 700 clamp(1.55rem, 1.12rem + 1.35vw, 2.2rem)/1.15 var(--font-display);
  letter-spacing: -.012em; color: var(--ink); text-wrap: balance;
}
.lead { max-width: 84ch; margin: 10px auto 0; font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.lead b { font-weight: 600; color: var(--text); }
/* a second head inside one section (a sub-block that shares the section's band) */
.section-head--sub { margin-top: clamp(64px, 8vw, 104px); }
/* the first section: one headline + one gray lead line, then the first result */
.section--headline { padding: clamp(14px, 1.8vw, 22px) 0 clamp(36px, 5vw, 56px); }
.section--headline .section-head { max-width: 960px; margin-bottom: clamp(14px, 2vw, 20px); }
.section--headline .lead { max-width: none; text-wrap: balance; }

/* wordmark text (nav, footer): the logo's face, weight and tracking; the second half in the brand colour */
.wordmark { font-family: var(--font-display); font-weight: 720; letter-spacing: -.012em; line-height: 1; color: var(--ink); }
.wordmark > span { color: var(--accent); }

/* ---------- 5. Top nav (hidden at the top, slides in after the hero) ----- */
.topnav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(170%) blur(12px);
  backdrop-filter: saturate(170%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), visibility 0s linear .32s;
}
.topnav.is-visible {
  transform: none; visibility: visible;
  box-shadow: 0 8px 24px -18px rgba(16, 24, 40, .45);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), visibility 0s;
}
.topnav-inner { height: 100%; display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); }
.topnav-brand {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none;
}
.topnav-brand img { width: auto; height: 28px; flex: none; }
.topnav-brand .wordmark { font-size: 1.25rem; }
.topnav-brand:hover { color: var(--ink); }
.topnav-brand:hover .wordmark { opacity: .8; }
.topnav-links {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: flex-start; gap: 2px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding-block: 4px;
}
/* right-aligned while the links fit; the auto margin collapses to 0 when they overflow,
   so the row scrolls from the first link instead of clipping it (justify-content:flex-end would) */
.topnav-links > a:first-child { margin-left: auto; }
.topnav-links::-webkit-scrollbar { display: none; }
.topnav-links a {
  flex: none; padding: 8px 12px; border-radius: var(--radius-pill);
  font: 500 .875rem/1 var(--font-sans); color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.topnav-links a:hover { color: var(--text); background: var(--bg-sunken); }
.topnav-links a.is-active { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* a row that has to scroll (more links than room) fades at its edges (class set by family.js) */
.topnav-links.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
  padding-inline: 8px 28px;
}
.topnav-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; font: 600 .8125rem/1 var(--font-sans); text-decoration: none;
}
.topnav-cta:hover { background: var(--accent-text); color: #fff; }

@media (max-width: 820px) {
  :root { --nav-h: 52px; }
  .topnav-cta { display: none; }
  .topnav-links {
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
    padding-inline: 8px 28px;
  }
  .topnav-links a { padding: 8px 11px; font-size: .8125rem; background: var(--bg-sunken); }
  .topnav-links a + a { margin-left: 4px; }
}
/* small phones: the icon alone carries the brand (the link keeps its aria-label) */
@media (max-width: 420px) { .topnav-brand .wordmark { display: none; } }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  padding: clamp(28px, 4vw, 48px) 0 clamp(8px, 1.2vw, 14px);
  text-align: center;
  background:
    radial-gradient(1100px 420px at 50% -120px, color-mix(in srgb, var(--accent) 9%, #fff), transparent 72%),
    var(--bg);
}
.hero-h1 {
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.6vw, 18px);
  margin: 0; line-height: 1; container-type: inline-size;
  /* the logo height is GeoSET's (58-96 px) times --logo-k, so every wordmark has the same cap height;
     below 416 px the widest logo (MotionMaestro) would overflow, so all three shrink together */
  --logo-h: calc(var(--logo-k, 1) * clamp(min(58px, 15.1cqw), 7vw, 96px));
}
.hero-logo { display: block; width: auto; max-width: 100%; height: var(--logo-h); }
.hero-title {
  display: block; max-width: 30ch;
  font: 700 clamp(1.45rem, 1.02rem + 1.55vw, 2.3rem)/1.16 var(--font-display);
  letter-spacing: -.012em; color: var(--ink); text-wrap: balance;
}
.hero-accent { color: var(--accent); }
@media (max-width: 380px) { .hero-title { font-size: 1.3rem; } }
.hero-authors {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  margin: clamp(14px, 1.8vw, 20px) 0 0; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); font-weight: 500;
}
.hero-authors a { color: var(--accent-text); text-decoration: none; }
.hero-authors a:hover { color: var(--accent-strong); text-decoration: underline; }
.hero-authors sup { margin-left: 2px; color: var(--muted); font-weight: 600; }
.hero-affil { margin: 6px 0 0; font-size: .975rem; color: var(--muted); }
.hero-notes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px;
  margin: 6px 0 0; font-size: .875rem; color: var(--faint);
}
.hero-notes .mono { font-family: var(--font-mono); font-size: .8125rem; }
.hero-notes a { color: inherit; text-decoration: none; }
.hero-notes a:hover { color: var(--accent-text); text-decoration: underline; }
.hero-notes .mail { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
.venue-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: clamp(12px, 1.5vw, 16px) 0 0; padding: 5px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  font: 600 .875rem/1.2 var(--font-sans); color: var(--accent-text); letter-spacing: .01em;
}
.venue-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.btn-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: clamp(14px, 1.8vw, 20px);
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px 0 15px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--ink); color: #fff;
  font: 600 .9375rem/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  transition: background-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.btn:hover { background: var(--accent-text); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-m); }
.btn:active { transform: none; }
.btn .icon { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .btn-row { gap: 8px; }
  .btn { height: 40px; padding: 0 14px 0 12px; font-size: .875rem; gap: 7px; }
  .hero-notes { flex-direction: column; }
}

/* abstract: a toggle under the hero buttons (closed by default) */
.abstract-toggle { max-width: 820px; margin: clamp(14px, 1.8vw, 18px) auto 0; }
.abstract-toggle > summary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--bg);
  font: 600 .9375rem/1 var(--font-display); letter-spacing: .005em; color: var(--ink);
  cursor: pointer; list-style: none; user-select: none;
  transition: color .15s, border-color .15s, background-color .15s;
}
.abstract-toggle > summary::-webkit-details-marker { display: none; }
.abstract-toggle > summary:hover { border-color: var(--accent-text); color: var(--accent-text); }
.abstract-toggle > summary .icon { width: 17px; height: 17px; stroke-width: 2.2; transition: transform .25s var(--ease); }
.abstract-toggle[open] > summary { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.abstract-toggle[open] > summary .icon { transform: rotate(180deg); }
.abstract-panel { overflow: hidden; }
.abstract {
  margin-top: 14px; padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.6vw, 26px);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-band);
  text-align: left; font-size: 1rem; line-height: 1.7; color: var(--text-2);
}
.abstract p { margin: 0 0 .8em; }
@media (pointer: coarse) { .abstract-toggle > summary { height: 44px; } }

/* ---------- 7. Pending links (arXiv placeholder or data-soon) -------------- */
/* A link whose href still holds the arXiv placeholder, or that carries a data-soon
   attribute (a paper that is not public yet), is shown as "soon" by these attribute
   selectors alone, with or without JavaScript; family.js adds the "Coming soon" tip
   and blocks navigation. Once the real arXiv ID replaces the placeholder (or the
   data-soon attribute is removed and a real href set), the links are live. */
a[href*="/XXXX.XXXX"], a[data-soon] { position: relative; cursor: not-allowed; }
.btn[href*="/XXXX.XXXX"], .btn[data-soon] { background: #565d6b; color: rgba(255, 255, 255, .9); }
.btn[href*="/XXXX.XXXX"]:hover, .btn[href*="/XXXX.XXXX"]:active,
.btn[data-soon]:hover, .btn[data-soon]:active { background: #565d6b; color: #fff; transform: none; box-shadow: none; }
.btn[href*="/XXXX.XXXX"]::after, .btn[data-soon]::after {
  content: "soon"; content: "soon" / "";
  margin-left: 2px; padding: 3px 7px 3px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .88);
  font-size: .6875rem; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
}
.topnav-cta[href*="/XXXX.XXXX"], .topnav-cta[href*="/XXXX.XXXX"]:hover,
.topnav-cta[data-soon], .topnav-cta[data-soon]:hover { background: #3a404b; }
.footer a[href*="/XXXX.XXXX"], .footer a[data-soon] { text-decoration: none; color: var(--faint); }
.pending-tip {
  position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 30;
  transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: 7px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-m);
  font: 600 .75rem/1.2 var(--font-sans); letter-spacing: .01em; white-space: nowrap; text-transform: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s, transform .15s var(--ease), visibility 0s linear .15s;
}
.pending-tip::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--ink);
}
.topnav .pending-tip { bottom: auto; top: calc(100% + 9px); transform: translate(-50%, -4px); }
.topnav .pending-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
a.is-pending:hover .pending-tip, a.is-pending:focus-visible .pending-tip, a.is-pending.is-tip-open .pending-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .15s, transform .15s var(--ease), visibility 0s;
}
.footer .pending-tip { left: 0; transform: translate(0, 4px); }
.footer a.is-pending:hover .pending-tip, .footer a.is-pending:focus-visible .pending-tip,
.footer a.is-pending.is-tip-open .pending-tip { transform: none; }
.footer .pending-tip::after { left: 14px; margin-left: 0; }

/* ---------- 8. Figures, zoom affordance, captions ------------------------ */
.figure-media {
  position: relative; display: block;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.figure-media img { width: 100%; }
.figure-media--plain { border: 0; border-radius: 0; background: transparent; }
/* captions: "<b>Title.</b> one line" */
.figure figcaption {
  max-width: 118ch; margin: 14px auto 0;
  font-size: .9063rem; line-height: 1.6; color: var(--muted); text-align: center;
}
.figure figcaption b { font-weight: 600; color: var(--text); }
.fig-label { color: var(--text); font-weight: 600; }

a.zoom { cursor: zoom-in; }
a.zoom::after {
  content: ""; position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(17, 21, 28, .72) no-repeat center / 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.9);
  transition: opacity .18s, transform .18s var(--ease);
}
a.zoom:hover::after, a.zoom:focus-visible::after { opacity: 1; transform: none; }
/* touch screens: nothing over the image; the caption row says it can be enlarged */
@media (hover: none) {
  a.zoom::after { display: none; }
  .figure:has(a.zoom) > figcaption::before { content: "Tap to enlarge \00b7\00a0"; font-weight: 600; color: var(--accent-text); }
}

/* ---------- 9. Lightbox (images; video pages reuse the chrome) ----------- */
dialog.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgba(10, 12, 16, .97); color: #e8ecf2;
}
dialog.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
dialog.lightbox::backdrop { background: rgba(10, 12, 16, .85); }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; }
.lb-title { min-width: 0; margin: 0; font-size: .875rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-width: 36px; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06); color: #fff;
  font: 600 .8125rem/1 var(--font-sans); text-decoration: none; cursor: pointer;
}
.lb-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.lb-btn[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.lb-btn[disabled] { opacity: .4; cursor: default; }
.lb-btn--icon { padding: 0; }
.lightbox :focus-visible { outline-color: #fff; }
.lb-stage { position: relative; display: flex; overflow: auto; padding: 4px 16px 8px; overscroll-behavior: contain; }
.lb-img {
  margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto;
  background: #fff; border-radius: 6px; cursor: zoom-in;
  user-select: none; -webkit-user-drag: none;
}
.lb-stage.is-actual { padding: 0; cursor: grab; }
.lb-stage.is-actual .lb-img { max-width: none; max-height: none; border-radius: 0; cursor: grab; }
.lb-stage.is-panning, .lb-stage.is-panning .lb-img { cursor: grabbing; }
.lb-stage.is-fit-only .lb-img { cursor: default; }
.lb-caption {
  width: 100%; max-width: 112ch; max-height: 24vh; margin: 0 auto; overflow: auto;
  padding: 10px 20px 18px; font-size: .875rem; line-height: 1.55; color: #c1c8d4;
}
.lb-caption .fig-label, .lb-caption b { color: #fff; }
.lb-caption:empty { display: none; }
@media (max-width: 600px) { .lb-btn-text { display: none; } .lb-btn { padding: 0 10px; } }

/* ---------- 10. Tabs (one row) and chip pickers (several rows) ----------- */
.tabs-head { display: flex; justify-content: center; margin-bottom: 22px; }
.tablist {
  display: inline-flex; gap: 4px; max-width: 100%; padding: 4px;
  border-radius: var(--radius-pill); background: var(--bg-sunken);
  overflow-x: auto; scrollbar-width: none;
}
.tablist::-webkit-scrollbar { display: none; }
.tab {
  flex: none; appearance: none; border: 0; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted);
  font: 600 .875rem/1 var(--font-sans); white-space: nowrap;
  transition: color .15s, background-color .15s, box-shadow .15s, border-color .15s;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--bg); color: var(--accent-text); box-shadow: var(--shadow-s); }
.tab:focus-visible { outline-offset: 1px; }
.tabpanel:focus-visible { outline-offset: 6px; border-radius: var(--radius); }
.tab small { margin-left: 6px; font-weight: 500; color: var(--faint); }
.tab[aria-selected="true"] small { color: var(--muted); }
@media (max-width: 560px) {
  .tab { line-height: 1.2; }
  .tab small { display: block; margin: 3px 0 0; font-size: .6875rem; }
}
/* a tab row that scrolls fades at the edge that has more tabs (classes set by the page scripts) */
.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* chip picker: a card of pill buttons in one or more rows (the selected one filled) */
.chip-picker {
  max-width: 1000px; margin: 0 auto 26px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--bg); box-shadow: var(--shadow-s);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tab.tab--chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 13px;
  border: 1px solid var(--border); background: var(--bg-band); color: var(--text-2);
  font-size: .8438rem; line-height: 1.2;
}
.tab.tab--chip:hover { border-color: var(--border-strong); color: var(--text); }
.tab.tab--chip[aria-selected="true"] { background: var(--accent-text); border-color: var(--accent-text); color: var(--on-accent); box-shadow: var(--shadow-s); }
.tab--chip .tab-sub { font-weight: 500; color: var(--muted); }
.tab--chip[aria-selected="true"] .tab-sub { color: rgba(255, 255, 255, .82); }
@media (max-width: 720px) {
  .chip-picker { padding: 10px; }
  .chip-row {                     /* phones: one scrolling row per picker row */
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: -10px; padding: 2px 28px 2px 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row .tab--chip { flex: none; position: relative; padding: 0 11px; font-size: .8125rem; }
}

/* ---------- 11. Carousel buttons ----------------------------------------- */
.carousel-btn {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.carousel-btn:hover { border-color: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-s); }
.carousel-btn .icon, .carousel-btn svg { width: 18px; height: 18px; stroke-width: 2.2; }

/* ---------- 12. Results tables ------------------------------------------- */
.table-figure { margin: 0; }
.table-figure > figcaption {
  max-width: 100ch; margin: 0 0 10px;
  font-size: .9063rem; line-height: 1.55; color: var(--muted);
}
/* the row above a table: legend on the left, scroll hint on the right */
.table-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-bottom: 10px; font-size: .8125rem; color: var(--muted);
}
.table-meta--hint { margin-bottom: 0; }
.table-meta--hint.can-scroll { margin-bottom: 10px; }
.table-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.table-legend .best, .table-legend .second { color: var(--text); }
.table-legend .best { font-weight: 700; }
.table-hint { display: none; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-text); }
.table-meta.can-scroll .table-hint { display: inline-flex; }

.table-frame {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--shadow-s);
}
.table-frame::after {             /* right-edge fade: "more columns this way" */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; z-index: 3;
  border-radius: 0 var(--radius) var(--radius) 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(20, 28, 45, .1));
  opacity: 0; transition: opacity .2s;
}
.table-frame.can-scroll:not(.at-end)::after { opacity: 1; }
.table-scroll { overflow-x: auto; border-radius: inherit; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-scroll:focus-visible { outline-offset: 2px; }

.results {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .875rem; line-height: 1.3; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.results th, .results td { padding: 9px 11px; text-align: center; vertical-align: middle; }
.results thead th { background: var(--bg); color: var(--text); font-weight: 600; }
.results thead tr:first-child th { padding-top: 12px; }
.results .col-group { position: relative; font-size: .8125rem; letter-spacing: .02em; padding-bottom: 7px; }
.results .col-group > span {        /* keeps the dataset name in view while scrolling */
  display: inline-block; position: sticky;
  left: calc(var(--sticky-w, 0px) + 10px); right: 10px;
}
.results .col-group::after {        /* cmidrule */
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--accent);
}
.results .metric { font-size: .78rem; font-weight: 600; color: var(--muted); border-bottom: 1.5px solid var(--text); padding-top: 8px; }
.results .sub { font-size: .78rem; font-weight: 600; color: var(--muted); border-bottom: 1.5px solid var(--text); }
.results .arrow { margin-left: 1px; color: var(--faint); font-weight: 500; }
.results .th-note { font-weight: 500; color: var(--muted); font-size: .92em; }
.results thead th[rowspan] { border-bottom: 1.5px solid var(--text); vertical-align: bottom; }
.results thead tr:only-child th, .results thead tr:last-child th { border-bottom: 1.5px solid var(--text); }
.results thead tr:only-child th { vertical-align: bottom; }
.results thead tr:first-child th.col-method:empty { border-bottom: 0; }
.results tbody td { border-bottom: 1px solid var(--border); color: var(--text-2); }
.results tbody tr:last-child td { border-bottom: 0; }
.results tbody:not(:last-child) tr:last-child td { border-bottom: 1.5px solid var(--border-strong); }
.results .col-method { text-align: left; }
.results td.col-method { font-weight: 500; color: var(--text); }
.results .col-venue { color: var(--faint); font-size: .78rem; text-align: left; }
.results .grp-start { border-left: 1px solid var(--border); }
.results .grp-major { border-left: 1.5px solid var(--border-strong); }
.results .na { color: var(--faint); }
.results code { font-size: .82em; color: var(--muted); }

.results .best { font-weight: 700; color: var(--text); }
.results .second, .table-legend .second {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}

.results tbody tr:not(.group):hover td { background: var(--bg-band); }
.results tr.group td {
  padding: 7px 12px; background: var(--bg-band); color: var(--muted);
  font-size: .78rem; font-style: italic; text-align: left;
}
.results tr.group .group-label { position: sticky; left: 12px; }
.results tr.total td { font-weight: 600; color: var(--text); border-top: 1.5px solid var(--text); background: var(--bg-band); }
/* our rows: tinted, with a bar on the method cell (a page may give a variant its own colours) */
.results tr.ours { --ours-bg: var(--accent-soft); --ours-bg-hover: color-mix(in srgb, var(--accent) 10%, #fff); --ours-bar: var(--accent); --ours-ink: var(--accent-text); }
.results tr.ours td { background: var(--ours-bg); }
.results tr.ours:hover td { background: var(--ours-bg-hover); }
.results tr.ours td.col-method { color: var(--ours-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--ours-bar); }
.results tr.ours td.col-method b { color: inherit; font-weight: inherit; }

/* sticky first column */
.results .col-method { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.results thead .col-method { z-index: 2; }
.results tr.total td.col-method { background: var(--bg-band); }
.table-frame.is-scrolled .results .col-method { box-shadow: 1px 0 0 var(--border), 8px 0 10px -8px rgba(20, 28, 45, .22); }
.table-frame.is-scrolled .results tr.ours td.col-method {
  box-shadow: inset 3px 0 0 var(--ours-bar), 1px 0 0 var(--border), 8px 0 10px -8px rgba(20, 28, 45, .22);
}

/* variants: text tables, right-aligned numbers, compact spacing */
.results--num-right td:not(.col-method), .results--num-right thead th:not(.col-method) { text-align: right; }
.results--text td:not(.col-method), .results--text thead th:not(.col-method) { text-align: left; white-space: nowrap; }
.results--text.results--numlast th:last-child, .results--text.results--numlast td:last-child { text-align: right; }
.results--compact th, .results--compact td { padding-inline: 14px; }
/* tabular figures only where numbers line up; Inter's tnum widens hyphens in names ("SARLO-80") */
.results .col-method, .results .col-venue, .results tr.group td, .results thead th,
.results--text td { font-variant-numeric: normal; }
.results td.num { font-variant-numeric: tabular-nums lining-nums; }
.results td.num .neg { font-variant-numeric: lining-nums; }   /* printed hyphen at its normal width */

.table-note { max-width: 100ch; margin: 10px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--faint); }
.table-note .best { font-weight: 700; color: var(--text); }
.table-note .second { color: var(--text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .results { font-size: .8125rem; }
  .results th, .results td { padding: 8px 8px; }
  .results .col-venue { font-size: .72rem; }
}

/* ---------- 13. Disclosures (<details class="disclosure">) --------------- */
.disclosures { margin-top: clamp(28px, 3.5vw, 40px); }
.disclosure {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--shadow-s);
}
.disclosure + .disclosure { margin-top: 12px; }
.disclosure > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  cursor: pointer; list-style: none; border-radius: var(--radius);
  font: 600 1.0625rem/1.35 var(--font-display); letter-spacing: -.005em; color: var(--text);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: ""; flex: none; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease);
}
.disclosure[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.disclosure > summary:hover { background: var(--bg-band); }
.disclosure > summary:focus-visible { outline-offset: 2px; }
.disclosure[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.summary-sub { font: 400 .9375rem/1.35 var(--font-sans); letter-spacing: 0; color: var(--muted); }
.summary-sub::before { content: "\00b7\00a0"; }
.disclosure-panel { overflow: hidden; }
.disclosure-body { padding: 18px 18px 20px; }
/* phones: the table numbers go under the title; the chevron stays at the right */
@media (max-width: 560px) {
  .disclosure > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 14px; }
  .summary-sub { grid-column: 1; grid-row: 2; font-size: .875rem; }
  .summary-sub::before { content: none; }
  .disclosure > summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .disclosure-body { padding: 14px 14px 16px; }
}

/* ---------- 14. Method key points ---------------------------------------- */
.keypoints {
  list-style: none; margin: clamp(18px, 2.6vw, 28px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(18px, 2.6vw, 32px);
}
.keypoints li {
  padding-top: 12px; border-top: 2px solid var(--accent-line);
  font-size: .9375rem; line-height: 1.55; color: var(--text-2);
}
.keypoints b { display: block; font-weight: 600; color: var(--ink); }
.kp-num {
  display: block; margin-bottom: 6px;
  font: 700 .75rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}
@media (max-width: 760px) { .keypoints { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 15. BibTeX --------------------------------------------------- */
.bibtex {
  max-width: 880px; margin: 0 auto; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--shadow-s);
}
.bibtex-head {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 9px 10px 9px 18px; border-bottom: 1px solid var(--border); background: var(--bg-band);
}
.bibtex pre {
  margin: 0; padding: 18px 20px 20px; overflow-x: auto;
  font: 400 .8438rem/1.7 var(--font-mono); color: var(--text); tab-size: 2;
}
.bibtex pre code { font-family: inherit; font-size: inherit; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-s); border: 1px solid var(--border-strong); background: var(--bg);
  font: 600 .8125rem/1 var(--font-sans); color: var(--text); cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.copy-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }
.copy-btn .icon { width: 15px; height: 15px; }
.copy-btn .icon-done { display: none; }
.copy-btn.is-copied { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, #fff); }
.copy-btn.is-copied .icon-copy { display: none; }
.copy-btn.is-copied .icon-done { display: block; }
@media (max-width: 600px) {
  .bibtex pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px 16px 18px; font-size: .8125rem; }
}

/* ---------- 16. Footer --------------------------------------------------- */
.footer { padding: 28px 0 36px; border-top: 1px solid var(--border); background: var(--bg); font-size: .875rem; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer-meta { margin: 0; }
.footer-brand { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; color: var(--ink); }
.footer-brand img { width: auto; height: 22px; flex: none; }
.footer-brand .wordmark { font-size: 1.0625rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--accent-text); text-decoration: underline; }

/* ---------- 16b. Research line (links across the lab's series) ---------- */
/* A band right above the footer: the papers of one research line in order, arrows between
   stages, parallel papers of one stage side by side, the current page highlighted. */
.lineage { padding: 26px 0 28px; border-top: 1px solid var(--border); background: var(--bg-band); }
.lineage-head {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px;
  margin: 0 0 14px; font: 500 .8125rem/1.3 var(--font-sans); color: var(--muted);
}
.lineage-title { font: 700 .9375rem/1.3 var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.lineage-list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0;
  margin: 0; padding: 0; list-style: none;
}
.lineage-stage { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.lineage-stage + .lineage-stage::before {
  content: "\2192"; content: "\2192" / "";
  margin: 0 9px; font: 400 1rem/1 var(--font-sans); color: var(--faint);
}
.lineage-item {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 12px 6px; border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg); text-decoration: none; color: var(--text);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.lineage-name { font: 650 .8438rem/1.2 var(--font-display); color: var(--ink); white-space: nowrap; }
.lineage-venue { font: 500 .6875rem/1.2 var(--font-sans); color: var(--muted); white-space: nowrap; }
a.lineage-item:hover { border-color: var(--accent-line); box-shadow: var(--shadow-s); }
a.lineage-item:hover .lineage-name { color: var(--accent-text); }
a.lineage-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lineage-item.is-current { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.lineage-item.is-current .lineage-name { color: var(--accent-text); }
/* narrow screens: the row would wrap and leave an arrow at the start of a line, so the line runs top to bottom */
@media (max-width: 760px) {
  .lineage { padding: 22px 0 24px; }
  .lineage-list { flex-direction: column; gap: 0; }
  .lineage-stage { flex-direction: row; }
  .lineage-stage + .lineage-stage { flex-direction: column; }
  .lineage-stage + .lineage-stage::before { content: "\2193"; content: "\2193" / ""; margin: 3px 0; font-size: .875rem; line-height: 1; }
  .lineage-stage + .lineage-stage:has(> .lineage-item + .lineage-item) { flex-direction: row; flex-wrap: wrap; }
  .lineage-stage + .lineage-stage:has(> .lineage-item + .lineage-item)::before { flex-basis: 100%; text-align: center; }
  .lineage-item { padding: 6px 10px 5px; }
  .lineage-name { font-size: .8125rem; }
}

/* the same line as a compact menu at the top right of the hero ("More research") */
.lineage-menu { position: absolute; top: 12px; right: var(--gutter); z-index: 40; text-align: left; }
.lineage-menu-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  font: 600 .8125rem/1 var(--font-sans); color: var(--text-2); cursor: pointer; list-style: none;
  -webkit-user-select: none; user-select: none; transition: border-color .15s, color .15s;
}
.lineage-menu-btn::-webkit-details-marker { display: none; }
.lineage-menu-btn svg { width: 15px; height: 15px; transition: transform .15s var(--ease); }
.lineage-menu[open] .lineage-menu-btn svg { transform: rotate(180deg); }
.lineage-menu-btn:hover, .lineage-menu[open] .lineage-menu-btn { border-color: var(--accent-line); color: var(--accent-text); }
.lineage-menu-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lineage-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 272px; max-width: calc(100vw - 2 * var(--gutter));
  padding: 12px 10px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--shadow-m);
}
.lineage-menu-head { margin: 0 6px 8px; font: 500 .75rem/1.3 var(--font-sans); color: var(--muted); }
.lineage-menu-head b { margin-right: 6px; font: 700 .8438rem/1.3 var(--font-display); color: var(--ink); }
.lineage-menu-list { position: relative; margin: 0; padding: 0 0 0 14px; list-style: none; }
.lineage-menu-list::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 1px; background: var(--border-strong); }
.lineage-menu-stage + .lineage-menu-stage { margin-top: 3px; }
.lineage-menu-item {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 8px; border-radius: var(--radius-s); text-decoration: none; color: var(--text);
}
.lineage-menu-item::before {
  content: ""; position: absolute; left: -8px; top: calc(50% - 4px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--border-strong); box-sizing: border-box;
}
.lineage-menu-item.is-current::before { border-color: var(--accent); background: var(--accent); }
.lineage-menu-item .lineage-name { font-size: .875rem; }
a.lineage-menu-item:hover { background: var(--bg-band); }
a.lineage-menu-item:hover .lineage-name { color: var(--accent-text); }
a.lineage-menu-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.lineage-menu-item.is-current { background: var(--accent-soft); }
.lineage-menu-item.is-current .lineage-name { color: var(--accent-text); }
@media (max-width: 899px) {
  .lineage-menu { position: relative; top: auto; right: auto; display: flex; justify-content: flex-end; margin: -12px var(--gutter) 10px; }
  .lineage-menu-btn { height: 30px; font-size: .78rem; }
}
@media print { .lineage-menu { display: none; } }

/* ---------- 17. Touch input ---------------------------------------------- */
/* pointer vs touch wording in hints */
.hint-touch { display: none; }
@media (hover: none) {
  .hint-touch { display: inline; }
  .hint-pointer { display: none; }
}
/* larger hit areas on coarse pointers */
@media (pointer: coarse) {
  .topnav-links a { padding-block: 12px; }
  .footer-links { gap: 0 6px; }
  .footer-links a { display: inline-block; padding: 10px 6px; }
  .copy-btn { height: 40px; padding-inline: 14px; }
  .tab { min-height: 44px; }
  .tab.tab--chip { min-height: 44px; }
  .carousel-btn { width: 44px; height: 44px; }
}

/* ---------- 18. Motion preferences --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}