/* ==========================================================================
   GeoCR project page: brand tokens and page components.
   The shared components (layout, nav, hero, section heads, figures, tabs,
   chip pickers, tables, disclosures, key points, lightbox, BibTeX, footer)
   are in family.css, which this file follows. Brand colours come from the
   logo package: ink #1C2738, GeoCR teal #0E9294, plate tint #98D8D2.
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #0E9294;           /* GeoCR teal (logo "CR"): rules, borders, large text, icons */
  --accent-text: #0B7476;      /* small text and white-on-teal fills (5.6:1 on white) */
  --accent-strong: #095F61;    /* hover */
  --accent-soft: #EEF7F7;      /* tinted fills */
  --accent-line: #BCE0DF;      /* tinted borders (close to the logo plate tint #98D8D2) */
  --logo-k: 1.122;             /* hero logo height factor (GeoCR wordmark = GeoSET wordmark) */

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

/* ---------- 2. Gallery: carousel of tile strips -------------------------- */
.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; }
}

/* ---------- 3. Tile strip ("all methods, same scene") -------------------- */
.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--gt { border: 2px solid var(--tile-ref); }
@media (max-width: 480px) {   /* phones: 2 + 2 instead of 3 + 1 */
  .legend { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; }
}

.strip {
  --tile-min: 140px;          /* smallest tile width; ~0.75x the native tile size */
  --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)); }
/* never upscale a tile past its native size (--tile-max = native width + 12 px padding and border, set by
   build_site.py); the balanced rows stay centred */
.strip[data-cols] > .tile { max-width: var(--tile-max, none); }
/* tablets: four columns (e.g. 4 + 3) instead of 3 + 3 + 1; !important beats the inline per-dataset value */
@media (min-width: 640px) and (max-width: 820px) { .strip { --tile-min: 150px !important; } }
.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;
}
.gallery-noscript { text-align: center; color: var(--muted); font-size: .9375rem; }

/* ---------- 4. Compare dialog (tile vs reference) ------------------------ */
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 */
dialog.cmp { width: min(max(560px, 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))); }
}
@media (pointer: coarse) {    /* touch: method chips and the close button as large as the page's other controls */
  .chip { height: 40px; padding: 0 13px; }
  .icon-btn { width: 44px; height: 44px; }
}

/* ---------- 5. Gallery: configuration picker (Native / RGB-only rows) ---- */
.cfg-picker { display: grid; gap: 8px; }
.cfg-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 12px; }
.cfg-row + .cfg-row { border-top: 1px solid var(--border); padding-top: 8px; }
.cfg-label { padding-left: 6px; font: 700 .6875rem/1.25 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) {
  .cfg-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cfg-label { padding-left: 2px; }
}

/* ---------- 6. Headline teaser --------------------------------------------- */
/* large, but never taller than the viewport, so the whole figure can be seen at once */
.teaser .figure-media { max-width: min(100%, max(760px, calc((100vh - 120px) * 1.3222))); margin-inline: auto; }
@supports (height: 100svh) {
  .teaser .figure-media { max-width: min(100%, max(760px, calc((100svh - 120px) * 1.3222))); }
}

/* ---------- 7. Paper figures: coverage graphs, figure pairs ---------------- */
.coverage { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.coverage-graphs, .figure-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
}
.coverage-graphs { gap: clamp(12px, 1.6vw, 20px); align-items: stretch; }   /* equal card heights: only (b) has the axis title */
.figure-pair { gap: clamp(20px, 2.6vw, 32px); }
@media (max-width: 760px) { .figure-pair { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 700px) { .coverage-graphs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 8. Quantitative: radar next to the main tables ----------------- */
.bench {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.radar-fig figcaption { margin-top: 8px; font-size: .8125rem; line-height: 1.5; }
.bench .tabs-head { justify-content: flex-start; margin-bottom: 16px; }
@media (max-width: 1180px) {   /* below this the tables would scroll next to the chart */
  .bench { grid-template-columns: minmax(0, 1fr); }
  .bench .radar-fig { width: 100%; max-width: 380px; margin-inline: auto; }
  .bench .tabs-head { justify-content: center; }
}

/* ---------- 9. Tables: GeoCR sub-tables ------------------------------------ */
.subtable + .subtable { margin-top: 18px; }
.subtable-title { font-size: .875rem; font-weight: 600; color: var(--text); }
.subtable .table-meta { margin-bottom: 8px; }
.table-figure .table-note { margin-top: 8px; }
/* 4-column ablation tables (6, 7): do not spread three values over the full width */
.table-figure--compact .table-meta, .table-figure--compact .table-frame { max-width: 560px; }
/* Table 5 (10 columns) fits at tablet width with slightly tighter cells */
@media (max-width: 820px) { #tab-stem-gain .results :is(th, td) { padding-inline: 8px; } }