/* ==========================================================================
   SAREO-FM project page: brand tokens and page components.
   The shared components (layout, nav, hero, section heads, figures, tabs,
   tables, disclosures, key points, lightbox, BibTeX, footer) are in
   family.css, which this file follows. Brand colours come from the paper's
   figures: ink #1C2738 and the SAREO-FM logo pink #D63370 (learnable semantic
   queries, "SAREO-FM (Ours)"), which is also the "-FM" of the logo.
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #D63370;           /* SAREO-FM pink (logo "-FM" and tagline): display sizes, rules, bars */
  --accent-text: #B8215A;      /* small text, links, white-on-colour fills (6.2:1 on white) */
  --accent-strong: #961545;    /* hover */
  --accent-soft: #FDEFF4;      /* tinted fills */
  --accent-line: #F4B3CB;      /* tinted borders (the logo's light pink) */
  --logo-k: 1;            /* hero logo height factor, written by build_site.py from make_logo.py (wordmark = GeoSET's 54.5 px at 1440) */

  /* tile roles in the comparison strips */
  --tile-input: #8a92a0;
  --tile-ref: #2a303b;
}

/* hero: the logo keeps its aspect ratio if the column is ever narrower than the lockup */
.hero-logo { object-fit: contain; }
/* the title breaks after "Supervision", as in the paper; phones wrap freely */
@media (min-width: 700px) {
  .hero-title { max-width: none; }
  .hero-title .t-line { display: block; }
}
.hero-affil sup { margin-right: 2px; font-weight: 600; }
/* text wordmark (no logo mark yet): the nav and footer show the wordmark alone, also on small phones */
@media (max-width: 420px) { .topnav-brand--text .wordmark { display: inline; } }

/* line breaks: captions, summaries and key-point titles are not <p>, so family.css's
   `p { text-wrap: pretty }` does not reach them */
.figure > figcaption { text-wrap: balance; }
.table-figure > figcaption, .keypoints li { text-wrap: pretty; }
.disclosure > summary, .keypoints b { text-wrap: balance; }

/* ---------- 2. Figures ----------------------------------------------------- */
/* the tall headline figure is narrowed to fit the viewport (never below 640 px) */
.fig-fit .figure-media { max-width: min(100%, max(640px, calc((100vh - 120px) * var(--ar, 1)))); margin-inline: auto; }
@supports (height: 100svh) {
  .fig-fit .figure-media { max-width: min(100%, max(640px, calc((100svh - 120px) * var(--ar, 1)))); }
}
/* Figs. 3 and 4 side by side as in the paper, stacked below 1100 px */
.fig-pair { display: grid; gap: 28px clamp(20px, 2.6vw, 32px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1100px) { .fig-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .fig-pair > .figure { width: min(100%, 900px); margin-inline: auto; } }
.fig-pair-plot .figure-media { padding: 10px 12px 6px; }
.fig-note {
  max-width: 100ch; margin: 18px auto 0; text-align: center; text-wrap: pretty;
  font-size: .875rem; line-height: 1.55; color: var(--muted);
}
.fig-note b { font-weight: 700; color: var(--text); }
/* a text link that opens a figure in the lightbox (no hover badge: that is for image links) */
a.zoom-link {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; white-space: nowrap;
  font-weight: 600; color: var(--accent-text); text-decoration: none;
}
a.zoom-link::after { content: none; }
a.zoom-link .icon { width: 14px; height: 14px; stroke-width: 2; }
a.zoom-link:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---------- 3. Gallery: carousel of tile strips (as ReFlowSET) ----------- */
.carousel { position: relative; }
.carousel-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.carousel-status { min-width: 0; margin: 0; font-size: .875rem; line-height: 1.3; }
.carousel-counter { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.carousel-title { margin-left: 8px; color: var(--muted); }
.carousel-nav { flex: none; display: flex; align-items: center; gap: 6px; }
.carousel-dots { display: flex; align-items: center; margin-right: 4px; }
.carousel-dot {
  width: 20px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.carousel-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--border-strong);
  transition: width .25s var(--ease), background-color .2s;
}
.carousel-dot:hover::before { background: var(--muted); }
.carousel-dot[aria-current="true"] { width: 30px; }
.carousel-dot[aria-current="true"]::before { width: 20px; background: var(--accent); }
.carousel-viewport { overflow: hidden; touch-action: pan-y; margin: -6px; padding: 6px; }
.carousel-track { display: flex; align-items: flex-start; transition: transform .5s var(--ease); }
.carousel.is-dragging .carousel-track { transition: none; }
.carousel-slide { flex: 0 0 100%; min-width: 0; padding: 0 6px; }
.carousel-slide + .carousel-slide { margin-left: 12px; }
.carousel:focus-visible { outline-offset: 8px; border-radius: var(--radius); }
.carousel-hint { margin: 12px 0 0; text-align: center; font-size: .8125rem; color: var(--faint); }
@media (max-width: 480px) {
  .carousel-dots { display: none; }
  .carousel-title { display: block; margin: 2px 0 0; }
}
@media (pointer: coarse) {
  .carousel-dot { position: relative; }
  .carousel-dot::after { content: ""; position: absolute; inset: -10px -3px; }
}

/* ---------- 4. Tile strip ("same scene, every input") --------------------- */
.legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  margin: -6px 0 18px; font-size: .8125rem; color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--bg); }
.legend-swatch--input { border-style: dashed; border-color: var(--tile-input); }
.legend-swatch--ours { border: 2px solid var(--accent); background: var(--accent-soft); }
.legend-swatch--ours-alt { border: 2px solid var(--accent-line); }
.legend-swatch--gt { border: 2px solid var(--tile-ref); }

.strip {
  --tile-min: 140px;          /* smallest tile width */
  --tile-gap-x: 10px;
  display: grid; gap: 12px var(--tile-gap-x);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), calc(33.333% - 7px)), 1fr));
}
.strip[data-cols] {                /* set by main.js: balanced rows, last row centred */
  display: flex; flex-wrap: wrap; justify-content: center;
}
.strip[data-cols] > .tile { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--tile-gap-x)) / var(--cols)); }
.tile {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 7px;
  padding: 5px 5px 7px; border-radius: 11px;
  border: 1px solid transparent;
  transition: background-color .15s, box-shadow .15s;
}
.tile-btn {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; margin: 0;
  background: var(--bg-sunken); border-radius: 7px; overflow: hidden; cursor: zoom-in;
}
.tile-btn img {
  width: 100%; height: 100%; object-fit: cover; image-rendering: auto;
  opacity: 1; transition: opacity .25s, transform .35s var(--ease);
}
.tile-btn img[data-src], .tile-btn img.is-loading { opacity: 0; }
.tile-btn::after {
  content: ""; position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(17, 21, 28, .72) no-repeat center / 15px
    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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M8 8l-4 4 4 4M16 8l4 4-4 4'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .15s;
}
.tile-btn:hover::after, .tile-btn:focus-visible::after { opacity: 1; }
.tile-btn:focus-visible { outline-offset: 2px; }
.tile:hover { background: var(--bg); }
.tile figcaption {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; line-height: 1.2;
}
.tile-m { font-size: .8125rem; font-weight: 600; color: var(--text); text-wrap: balance; }
.tile-v { font-size: .6875rem; font-weight: 500; color: var(--faint); letter-spacing: .01em; }

.tile--input { border: 1px dashed var(--border-strong); }
.tile--input .tile-v, .tile--gt .tile-v {
  padding: 2px 7px; border-radius: var(--radius-pill); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem;
}
.tile--input .tile-v { background: var(--bg-sunken); color: var(--muted); }
.tile--gt { border-color: var(--tile-ref); box-shadow: 0 0 0 1px var(--tile-ref); }
.tile--gt .tile-v { background: var(--tile-ref); color: #fff; }
.tile--ours { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tile--ours:hover { background: color-mix(in srgb, var(--accent) 10%, #fff); }
.tile--ours .tile-m { color: var(--accent-text); }
.tile--ours .tile-v {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent-text); color: var(--on-accent); font-weight: 700; font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase;
}
/* SAREO-FM with one modality only: our model, but not the headline (fused) result */
.tile--ours-alt { border-color: var(--accent-line); }
.tile--ours-alt .tile-m { color: var(--accent-text); }
.tile--ours-alt .tile-v {
  padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--accent-line);
  color: var(--accent-text); font-weight: 700; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
}
.tile--baseline .tile-v { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ---------- 5. Compare dialog (tile vs ground truth) ---------------------- */
dialog.cmp {
  width: min(720px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; border: 0; border-radius: var(--radius-l);
  background: var(--bg); color: var(--text-2); box-shadow: var(--shadow-l);
  overflow: auto; overscroll-behavior: contain;
}
dialog.cmp::backdrop { background: rgba(10, 12, 16, .7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cmp-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 14px 14px 22px; border-bottom: 1px solid var(--border);
}
.cmp-kicker { margin: 0; font: 700 .6875rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cmp-title { margin: 5px 0 0; font: 600 1.0625rem/1.3 var(--font-sans); color: var(--text); }
.cmp-title .vs { margin: 0 2px; font-weight: 500; color: var(--faint); }
.icon-btn {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer;
}
.icon-btn:hover { border-color: var(--border-strong); background: var(--bg-band); }
.icon-btn .icon { width: 18px; height: 18px; stroke-width: 2; }
.cmp-body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 22px 22px; }
.cmp-stage {
  position: relative; width: min(var(--cmp-w, 400px), 100%); aspect-ratio: var(--cmp-ar, 1);
  border-radius: 8px; overflow: hidden; background: var(--bg-sunken);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px var(--border);
}
.cmp-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; image-rendering: auto; pointer-events: none; -webkit-user-drag: none;
}
.cmp-img--a { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); pointer-events: none;
}
.cmp-knob {
  position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.cmp-knob .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.cmp-range:focus-visible ~ .cmp-stage .cmp-knob { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmp-label {
  position: absolute; top: 8px; max-width: calc(50% - 12px);
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: rgba(14, 17, 23, .74); color: #fff;
  font: 600 .75rem/1.25 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.cmp-label--a { left: 8px; }
.cmp-label--b { right: 8px; }
.cmp-label.is-ours { background: var(--accent-text); }
.cmp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
.chip {
  flex: none; height: 30px; padding: 0 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-2);
  font: 500 .8125rem/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--ours { border-color: var(--accent-line); color: var(--accent-text); font-weight: 600; }
.chip--ours[aria-pressed="true"] { background: var(--accent-text); border-color: var(--accent-text); color: var(--on-accent); }
.cmp-hint { margin: 0; font-size: .8125rem; color: var(--faint); text-align: center; }
kbd {
  display: inline-block; min-width: 20px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px;
  font: 600 .6875rem/1.4 var(--font-sans); color: var(--muted); background: var(--bg);
}
/* sized for 2x native tiles, capped by the viewport; 640 px keeps the six chips on one or two rows */
dialog.cmp { width: min(max(640px, calc(var(--cmp-w, 400px) + 48px)), calc(100% - 24px)); }
.cmp-stage { width: min(var(--cmp-w, 400px), 100%, calc((100vh - 300px) * var(--cmp-ar, 1))); }
@supports (height: 100dvh) {
  .cmp-stage { width: min(var(--cmp-w, 400px), 100%, calc((100dvh - 300px) * var(--cmp-ar, 1))); }
}
@media (max-width: 600px) {
  .cmp-body { padding: 16px 14px 18px; }
  .cmp-head { padding: 14px 12px 12px 16px; }
  .cmp-chips {
    flex-wrap: nowrap; justify-content: flex-start; width: 100%;
    overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
  }
  .cmp-stage { width: min(var(--cmp-w, 400px), 100%, calc((100dvh - 250px) * var(--cmp-ar, 1))); }
}
.gallery-noscript { text-align: center; color: var(--muted); font-size: .9375rem; }

/* ---------- 6. Tables ------------------------------------------------------ */
/* mean +- standard deviation: the deviation is smaller and lighter, and never takes the bold/underline mark */
.results .pm { display: inline-block; margin-left: 2px; font-size: .8em; font-weight: 500; color: var(--muted); }
.results .best .pm { color: var(--muted); }
/* the three feature readouts (mod, sem, both), in table rows, heads and captions */
.feat { font-family: var(--font-mono); font-size: .86em; font-weight: 500; letter-spacing: -.01em; }
.results th .feat { font-weight: 600; }
.results .col-text, .results td.col-text { text-align: left; font-variant-numeric: normal; }
.results td.col-text { color: var(--text-2); }
.results td.col-name { text-align: left; font-weight: 500; color: var(--text); font-variant-numeric: normal; }
/* Table 3: the input column carries the row bar, the method name carries our colour */
.results tr.ours td.col-name { color: var(--ours-ink); font-weight: 700; }
#table-3-t tr.ours td.col-method { color: var(--text); font-weight: 600; }
/* tables with few columns keep their numbers close enough to read across */
.table-figure--eo-transfer, .table-figure--multimodal, .table-figure--ablation, .table-figure--sar-fewshot {
  width: 100%; margin-inline: auto;
}
.table-figure--eo-transfer { max-width: 1080px; }
.table-figure--multimodal { max-width: 820px; }
.table-figure--ablation { max-width: 880px; }
.table-figure--sar-fewshot { max-width: 1080px; margin-inline: 0; }
/* Tables 10-12: the architecture table next to the lifecycle and readout tables on wide screens */
.table-pair { display: grid; gap: clamp(28px, 3.5vw, 40px) 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .table-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* short tables keep their columns together */
.table-figure--token-counts { max-width: 760px; }
.table-figure--readout-dims { max-width: 520px; }
/* math in tables and captions: script L and its sub/superscripts do not stretch the line */
.results sub, .results sup, .table-figure figcaption sub, .table-figure figcaption sup { line-height: 0; }
.results sub, .table-figure figcaption sub { font-size: .72em; }
figcaption i, .table-note i, .results i { margin-right: .04em; }
/* a subscript and a superscript on one symbol (the pixel losses): stacked, superscript on top */
/* (a grid: its baseline is the superscript's row, raised; the subscript sits one row below; the text keeps the tex order) */
.subsup { display: inline-grid; justify-items: start; vertical-align: .44em; margin-left: .03em; font-size: .7em; }
span.subsup > sup, span.subsup > sub { grid-column: 1; position: static; vertical-align: baseline; font-size: 1em; line-height: .92; }
span.subsup > sup { grid-row: 1; }
span.subsup > sub { grid-row: 2; }

/* ---------- 7. BibTeX ------------------------------------------------------- */
/* the long title line wraps at every width, as on the sibling pages */
.bibtex pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Method key points: no single short word left on a last line ---- */
.keypoints li { text-wrap: pretty; }