/* ==========================================================================
   GeoSET 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 logo
   package: ink #1C2738, GeoSET blue #1B6FCB, plate tint #9DC8F1.
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #1B6FCB;           /* GeoSET blue (logo "SET"), 5.0:1 on white */
  --accent-text: #1B6FCB;      /* small text, white-on-colour fills (= --accent here) */
  --accent-strong: #1558A3;    /* hover */
  --accent-soft: #EEF5FD;      /* tinted fills */
  --accent-line: #B9D5F4;      /* tinted borders (between white and the plate tint #9DC8F1) */
  --logo-k: 1;                 /* hero logo height factor (family wordmark height) */

  /* 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; white-space: nowrap; }
.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); }
/* 20 dots + prev/next need ~520px beside the counter: below 720px the counter and buttons carry the navigation */
@media (max-width: 720px) { .carousel-dots { display: none; } }
@media (max-width: 480px) { .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); }

.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)); }
.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))); }
}

/* ---------- 5. Headline: Fig. 1, with Fig. 5 in a disclosure below it ----- */
.more-figs { margin-top: clamp(18px, 2.4vw, 26px); }
.more-figs .figure figcaption { margin-top: 10px; }

/* centred two-line leads: even lines instead of a long line and a short tail */
.section-head .lead { text-wrap: balance; }

/* ---------- 6. Quantitative: radar next to the main tables (as on GeoCR) --- */
.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; }
}

/* ---------- 7. Tables: GeoSET variants ----------------------------------- */
/* the two GeoSET rows use the radar's colours: LoRA #e6852e, full FT #c82d45 */
.results tr.ours--lora { --ours-bg: #fff5eb; --ours-bg-hover: #ffecd9; --ours-bar: #e6852e; --ours-ink: #93500f; }
.results tr.ours--ft { --ours-bg: #fdf0f2; --ours-bg-hover: #fbe2e6; --ours-bar: #c82d45; --ours-ink: #9e1f33; }
.table-subcap { margin: 0 0 8px; font: 600 .875rem/1.4 var(--font-sans); color: var(--text); }
.table-pair { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 4px; }
@media (min-width: 960px) { .table-pair { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
/* Table 1 has six short columns: keep them close enough to read across */
#table-1 { width: 100%; max-width: 920px; margin-inline: auto; }

/* dataset view toggle (Tables 2, 3, 8): show both column groups or one */
.view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--bg-sunken); }
.view-toggle button {
  appearance: none; border: 0; cursor: pointer; padding: 6px 11px; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); font: 600 .75rem/1 var(--font-sans); white-space: nowrap;
}
.view-toggle button:hover { color: var(--text); }
.view-toggle button[aria-pressed="true"] { background: var(--bg); color: var(--accent-text); box-shadow: var(--shadow-s); }
.view-toggle-label { margin-right: 6px; font-size: .75rem; font-weight: 600; color: var(--faint); }
.view-toggle-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.results.show-g1 .g2, .results.show-g2 .g1 { display: none; }
.results.show-g1 .grp-start.g1 { border-left-color: transparent; }
.results.show-g2 .grp-start.g2 { border-left-color: transparent; }
@media (pointer: coarse) { .view-toggle button { min-height: 40px; padding-inline: 13px; } }

/* ---------- BibTeX: prior-work entry (C-DiffSET) under the paper's own entry */
.bibtex + .bibtex { margin-top: 16px; }
.bibtex-label { margin-right: auto; font: 600 .8125rem/1.35 var(--font-sans); color: var(--muted); }
.bibtex-label a { color: var(--accent-text); text-decoration: none; }
.bibtex-label a:hover { text-decoration: underline; }
.bibtex--prior pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Larger hit areas on coarse pointers (compare dialog, BibTeX link) */
@media (pointer: coarse) {
  .chip { height: 40px; padding: 0 14px; }
  .icon-btn { width: 44px; height: 44px; }
  .bibtex-label a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}