/* ==========================================================================
   U-Know-DiffPAN 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 globe
   icon: sphere blue #1D5CAB ("U-Know-Diff"), continent green #358A1C ("PAN").
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #1D5CAB;           /* globe blue (wordmark "U-Know-Diff"), 6.6:1 on white */
  --accent-text: #1D5CAB;      /* small text, white-on-colour fills (= --accent here) */
  --accent-strong: #154887;    /* hover */
  --accent-soft: #EEF3FA;      /* tinted fills */
  --accent-line: #BBCFEA;      /* tinted borders */
  --brand-2: #358A1C;          /* globe green (wordmark "PAN") */
  --logo-k: 1;                 /* hero logo height factor: capitals as tall as GeoSET's wordmark */

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

/* wordmark (nav, footer) in the logo's two colours: blue "U-Know-Diff", green "PAN" */
.wordmark { color: var(--accent); }
.wordmark > span { color: var(--brand-2); }
/* hero title: the letters that form the name, in the wordmark's colours (U / Know / Diff blue, PAN green) */
.hero-accent-s { color: var(--brand-2); }

/* hero: the lockup is wide (icon + 14 letters); below ~560 px it follows the column width instead of the
   family's 58 px floor, so it never overflows (the capitals stay GeoSET's size from 740 px up) */
.hero-h1 { --logo-h: min(calc(var(--logo-k, 1) * clamp(min(58px, 15.1cqw), 7vw, 96px)), 13.4cqw); }
.hero-logo { object-fit: contain; }
/* the title is longer than the other family titles: three lines from 700 px up */
@media (min-width: 700px) { .hero-title { max-width: 37ch; } }
/* two affiliations (numbered) on one centred row */
.hero-affil { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; }
.hero-affil sup { margin-right: 2px; font-weight: 600; }

/* ---------- 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; }
}
/* the pair gallery: the carousel controls span the width of the two tiles */
.pair-tabs .carousel { max-width: 960px; margin-inline: auto; }

/* ---------- 3. Tile strip (input and result, 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); }

/* two tiles side by side (the reduced-resolution pairs are 256 px, the full-resolution ones 512 px:
   both are shown at the same size, about 2x and 1x) */
.strip {
  --tile-gap-x: clamp(10px, 2vw, 20px);
  display: grid; gap: 12px var(--tile-gap-x);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.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: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(17, 21, 28, .72) no-repeat center / 16px
    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 {
  padding: 2px 7px; border-radius: var(--radius-pill); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem;
  background: var(--bg-sunken); color: var(--muted);
}
.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 (input vs result) -------------------------- */
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%; }
.cmp-chips:has(.chip:only-child) { display: none; }      /* one method on the left: nothing to pick */
.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 the reduced-resolution tiles and ~1.2x the full-resolution ones, 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 - 250px) * var(--cmp-ar, 1))); }
@supports (height: 100dvh) {
  .cmp-stage { width: min(var(--cmp-w, 400px), 100%, calc((100dvh - 250px) * var(--cmp-ar, 1))); }
}
@media (max-width: 600px) {
  .cmp-body { padding: 16px 14px 18px; }
  .cmp-head { padding: 14px 12px 12px 16px; }
  .cmp-stage { width: min(var(--cmp-w, 400px), 100%, calc((100dvh - 220px) * var(--cmp-ar, 1))); }
}

/* ---------- 5. Paper figures (tabs) --------------------------------------- */
.figure-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 34px); }
/* the uncertainty maps are a nearly square-ish diagram: capped width (the method overview spans the content width,
   like the Method figure on every family page) */
.fig-uncertainty .figure-media { max-width: 980px; margin-inline: auto; }
/* the headline figure is a <picture>: phones get a two-row crop of the same Fig. 1 render */
.figure-media picture { display: block; }

/* ---------- 6. Tables ------------------------------------------------------ */
.results .col-check { text-align: center; color: var(--text); font-weight: 600; }
.results .col-label { text-align: left; font-weight: 500; color: var(--text); }
.results sub, .table-note sub { font-size: .72em; line-height: 0; }
/* Table 4 (efficiency) under the tabs: four rows, so it stays narrow */
.table-solo { max-width: 820px; margin: clamp(30px, 4vw, 44px) auto 0; }
/* Tables 6 and 7 side by side in the ablation disclosure */
.table-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 36px); align-items: start; }
@media (max-width: 900px) { .table-pair { grid-template-columns: minmax(0, 1fr); } }
#table-5 .table-frame, #table-1 .table-frame { max-width: 860px; }
/* Table 8: one table per satellite (tabs) inside the disclosure */
.t8-tabs { margin-top: 14px; }
.t8-tabs .tabs-head { justify-content: flex-start; margin-bottom: 14px; }

/* column-group view toggle (Tables 2, 3, 8): show both 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: 38px; padding-inline: 13px; } }

/* ---------- 7. BibTeX: the title line is long; wrap it instead of scrolling --------------------------------- */
.bibtex pre { white-space: pre-wrap; overflow-wrap: anywhere; }