/* =========================================================
   Publications as a list (2026-10)
   One row per paper: a small looping picture (one idea, no text),
   then title / venue / authors / one plain line / links.
   2026-10-22 rev 2: Abstract and Figure tour taken off the rows (fewer buttons);
   tour.html is kept, unlinked, with its styles at the end of this file.
   ========================================================= */

.page-title .pub-lede{ max-width:none; }
@media (min-width:800px){ .page-title .pub-lede{ white-space:nowrap; } }       /* one line on desktop */
.page-title .pub-hint{ color:var(--dim); font-size:.88rem; font-weight:600; margin-top:8px; }

.pub-sec{ margin:clamp(22px,3.4vw,34px) 0 0; padding:0 0 12px; }
.page-title + .wrap > .pub-sec:first-child{ margin-top:0; }
@media (hover:none){ .page-title .pub-hint{ display:none; } }      /* on touch screens the centred row plays by itself */
.pubs{ display:flex; flex-direction:column; }
.pub{
  display:grid; grid-template-columns:clamp(112px,21vw,216px) minmax(0,1fr);
  grid-template-areas:"thumb body" "thumb more"; grid-template-rows:auto 1fr;
  column-gap:clamp(14px,2.6vw,28px); align-items:start;
  padding:clamp(16px,2.2vw,22px) 0; border-top:1px solid var(--line);
}
.pub-thumb{ grid-area:thumb; }
.pub-body{ grid-area:body; min-width:0; }
.pub-more{ grid-area:more; min-width:0; }
.pubs .pub:last-child{ border-bottom:1px solid var(--line); }

/* the picture: a poster (the result) that plays its loop on hover / when centred on touch screens */
.pub-thumb{
  position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; margin:0;
  border:1px solid var(--line); border-radius:4px; background:#1f1f1f; overflow:hidden;
  transition:border-color .25s;
}
.pub-thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pub.is-on .pub-thumb{ border-color:var(--line-2); }

.pub h3{ font-size:clamp(1rem,1.6vw,1.16rem); font-weight:400; line-height:1.38; }
.pub h3 a{ transition:color .25s; }
.pub h3 a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.pub .venue{ color:var(--faint); font-size:.88rem; margin-top:4px; font-style:italic; }
.pub .who{ color:var(--dim); font-size:.88rem; margin-top:1px; }
.pub .gist{ color:#d8d8d8; font-size:.95rem; margin:8px 0 0; max-width:64ch; }
.pub .tools{ margin-top:12px; gap:6px 5px; }
.pub .tool{ padding:4px 10px; font-size:.82rem; }

@media (max-width:560px){
  .pub{ grid-template-columns:104px minmax(0,1fr); grid-template-areas:"thumb body" "more more"; column-gap:14px; }
  .pub h3{ font-size:.98rem; }
  .pub .gist{ font-size:.9rem; }
  .pub .tools{ margin-top:10px; }
  .pub .bib.open{ margin-top:12px; }
}

/* ---------------------------------------------------------
   tour.html (inside the modal, or on its own)
   --------------------------------------------------------- */
body.tour{ min-height:100vh; display:flex; }
.tour-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(12px,2.4vw,28px); }
.tour-wrap{ width:min(1000px,100%); }
.tour .fig{ margin:0; }
.tour-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; }
.tour-nav .tool[disabled]{ opacity:.35; cursor:default; }
.tour-nav .tool[disabled]:hover{ color:var(--faint); border-color:var(--line); background:transparent; }
.tour-dots{ display:flex; gap:9px; list-style:none; margin:0; padding:0; }
.tour-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-2); background:transparent; transition:background .25s, border-color .25s;
}
.tour-dots button:hover{ border-color:var(--dim); }
.tour-dots button.on{ background:var(--txt); border-color:var(--txt); }
@media (max-width:560px){ .tour-dots{ gap:7px; } .tour-nav{ gap:10px; } }

/* ---------------------------------------------------------
   highlight.html: one animation per contribution, KaTeX for the math
   --------------------------------------------------------- */
.hl-wrap{ width:min(1000px,100%); }
.hl-stage{
  position:relative; width:min(100%, calc(62vh * 16 / 9)); aspect-ratio:16/9; margin:0 auto;
  background:var(--bg-2); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.hl-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hl-ov{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hl-lab{ position:absolute; left:0; top:0; color:rgba(255,255,255,.92); font-size:16px; line-height:1.1; white-space:nowrap; }
.hl-lab.hl-tick{ font-size:13.5px; color:rgba(255,255,255,.72); }   /* text in the highlights: at least 13 px (phones excepted) */
.hl-lab.hl-key{ font-size:13px; color:rgba(255,255,255,.82); }
/* readouts and colour bar of a highlight drawn by a publication-figure renderer (SAEM) */
.hl-stage .hl-read{ position:absolute; top:10px; right:12px; margin:0; min-width:220px; pointer-events:none; }
.hl-stage .hl-read div{ border:0; padding:2px 0; margin:0; font-size:13.5px; gap:12px; }
/* readouts in one line along the top edge, clear of the pictures at any width (BEM) */
.hl-stage .hl-read.hl-row{ display:flex; gap:20px; min-width:0; top:8px; }
.hl-stage .hl-read.hl-row div{ gap:8px; font-size:var(--hl-read-fs, 13px); }   /* set by hl-bem.js from the stage width */
.hl-stage .hl-bar.hl-off{ visibility:hidden; }
.hl-stage .hl-bar{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:210px; margin:0; font-size:13px; pointer-events:none; transition:opacity .3s; }
@media (max-width:560px){ .hl-stage .hl-read{ min-width:0; top:6px; right:8px; } .hl-stage .hl-read div{ font-size:10px; } .hl-stage .hl-bar{ width:120px; bottom:6px; font-size:11px; } }
@media (max-width:560px){ .hl-lab{ font-size:13px; } .hl-lab.hl-tick{ font-size:10.5px; } .hl-lab.hl-key{ font-size:11px; } }
/* the fade between steps (highlight.html adds .hl-fading for 350 ms, then takes it off) */
.hl-stage::after{ content:''; position:absolute; inset:0; z-index:20; background:var(--bg-2); opacity:0; pointer-events:none; transition:opacity .45s ease; }
.hl-stage.hl-fading::after{ opacity:1; transition:opacity .35s ease; }
.hl-cap{ transition:opacity .45s ease; }
.hl-cap.hl-fading{ opacity:0; transition:opacity .35s ease; }
@media (prefers-reduced-motion: reduce){ .hl-stage::after, .hl-cap{ transition:none; } }
.hl-cap{ text-align:center; margin-top:16px; min-height:96px; }
.hl-cap .hl-step{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.hl-cap h4{ font-size:1.1rem; font-weight:400; margin:6px 0 6px; }
.hl-cap p{ color:var(--dim); font-size:1rem; margin:0; }
.hl-cap .katex{ font-size:1.06em; color:var(--txt); }
.hl .tour-nav{ margin-top:10px; }