/* ==========================================================================
   GeoCore-9B 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
   mark: forest green #0C4A32 (the grid disc) and red #C6421B (the square).
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #0C4A32;           /* GeoCore forest green (logo "GeoCore"), 10:1 on white */
  --accent-text: #0C4A32;      /* small text, white-on-colour fills (= --accent here) */
  --accent-strong: #06301F;    /* hover */
  --accent-soft: #ECF4F0;      /* tinted fills */
  --accent-line: #B7D2C4;      /* tinted borders */
  --brand-red: #C6421B;        /* logo square and "-9B" */
  --logo-k: 1;                 /* hero logo height factor (family wordmark height) */

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

/* wordmark text (nav, footer) in the logo's two colours */
.wordmark { color: var(--accent); }
.wordmark > span { color: var(--brand-red); }

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

/* ---------- 2. Headline: zero-shot generation figures -------------------- */
/* tall figures are narrowed so that they fit the viewport (never below 760 px, as the GeoCR teaser) */
.fig-fit .figure-media { max-width: min(100%, max(760px, calc((100vh - 120px) * var(--ar, 1)))); margin-inline: auto; }
@supports (height: 100svh) {
  .fig-fit .figure-media { max-width: min(100%, max(760px, calc((100svh - 120px) * var(--ar, 1)))); }
}
.gen-tabs .tabs-head { margin-bottom: 18px; }
.more-figs { max-width: 1240px; margin: clamp(18px, 2.4vw, 26px) auto 0; }
.more-figs .figure figcaption { margin-top: 10px; }
/* a "More ..." disclosure is as wide as the fitted figure above it (--ar is set on the tab panel) */
.gen-tabs .tabpanel .more-figs { max-width: min(100%, max(760px, calc((100vh - 120px) * var(--ar, 2)))); }
@supports (height: 100svh) {
  .gen-tabs .tabpanel .more-figs { max-width: min(100%, max(760px, calc((100svh - 120px) * var(--ar, 2)))); }
}

/* ---------- 3. Gallery: carousel of tile strips (GeoSET) ----------------- */
.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 ("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); }
/* the forest-green accent is nearly as dark as the reference role, so "ours" uses the tinted fills */
.legend-swatch--ours { border: 2px solid var(--accent); background: var(--accent-line); }
.legend-swatch--gt { border: 2px solid var(--tile-ref); }

.strip {
  --tile-min: 140px;
  --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] { 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-line); color: var(--accent-text); font-weight: 700; font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.gallery-noscript { text-align: center; color: var(--muted); font-size: .9375rem; }

/* ---------- 5. 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-soft); color: 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);
}
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))); }
}

/* ---------- 6. Tables ---------------------------------------------------- */
.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, 1fr) minmax(0, 1.15fr); } }
/* short tables: keep the columns close enough to read across */
#table-1 { width: 100%; max-width: 760px; margin-inline: auto; }
#table-3, #table-5, #table-6 { width: 100%; max-width: 960px; margin-inline: auto; }
.results .na { color: var(--faint); }
/* Table 2 on phones: tighter cells and a wrapping ours label, so (b) shows its SSIM column without scrolling */
@media (max-width: 440px) {
  #table-2 .results th, #table-2 .results td { padding-inline: 5px; }
  #table-2 .results .col-method { padding-left: 8px; }
  #table-2 .results tr.ours td.col-method { white-space: normal; }
}
@media (max-width: 380px) {
  #table-2 .results { font-size: .78rem; }
  #table-2 .results th, #table-2 .results td { padding-inline: 4px; }
  #table-2 .results .col-method { padding-left: 7px; }
}

/* GSA ablation: FID curve next to the matched table (centred against it when side by side) */
.gsa-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 36px); align-items: start; }
@media (min-width: 900px) { .gsa-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
.fid-fig .figure-media { max-width: 520px; margin-inline: auto; }
.fid-fig figcaption { margin-top: 8px; }

/* ---------- 7. BibTeX ---------------------------------------------------- */
/* the long title line wraps on tablets too (family.css wraps at 600 px and below) */
@media (max-width: 860px) { .bibtex pre { white-space: pre-wrap; overflow-wrap: anywhere; } }

/* ---------- 8. Print ----------------------------------------------------- */
@media print {
  .topnav, .copy-btn, .skip-link, .carousel-nav { display: none !important; }
  .section { padding-block: 24px; }
}