/* ==========================================================================
   PAN-Crafter 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 icon
   (mars.png): Mars red #E0634B ("PAN"), navy #27536B ("-Crafter").
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #E0634B;           /* Mars red (icon rim, wordmark "PAN"): rules, borders, large text */
  --accent-text: #B8452E;      /* small text and white-on-red fills (5.4:1 on white) */
  --accent-strong: #933520;    /* hover */
  --accent-soft: #FDF2EF;      /* tinted fills */
  --accent-line: #F5CFC6;      /* tinted borders */
  --brand-navy: #27536B;       /* icon disc, wordmark "-Crafter" */
  --logo-k: 1;                 /* hero logo height factor (wordmark = GeoSET wordmark) */

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

/* wordmark (nav, footer): the logo's two colours, red "PAN" + navy "-Crafter" */
.wordmark { color: var(--brand-navy); }
/* 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 the accent phrase, as in the paper: "Learning Modality-Consistent Alignment / for
   PAN-Sharpening" (36ch instead of the family's 30ch; the phrase stays on one line from 640 px up) */
.hero-title { max-width: 36ch; }
@media (min-width: 640px) { .hero-phrase { white-space: nowrap; } }
/* five authors and two numbered affiliations on centred rows */
.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 (GeoSET / 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-controls .carousel-nav { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; }
.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); }

.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] {                /* 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 {
  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 (tile vs PAN-Crafter) ---------------------- */
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; }
.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 ~2.6x the 150 px crops or ~1.25x the 512 px scenes, 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. Paper figures: prev, thumbnail strip, next (SOfA) ---------- */
.hscroll {
  position: relative;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.hscroll::-webkit-scrollbar { display: none; }
.fig-carousel > .carousel-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; }
.fig-carousel > .carousel-nav .thumbs { flex: 0 1 auto; min-width: 0; }
.thumbs { display: flex; gap: 10px; padding: 3px; scroll-padding-inline: 3px; }
.thumb {
  flex: 0 0 150px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 5px 5px 7px; border-radius: var(--radius); text-align: left;
  background: var(--bg); border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s;
  scroll-snap-align: start;
}
.thumb:hover { border-color: var(--border-strong); }
.thumb img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain;
  border-radius: var(--radius-s); background: #fff; border: 1px solid var(--border);
}
.thumb span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 0 3px; font-size: .8rem; line-height: 1.35; color: var(--muted); font-weight: 500;
}
.thumb span b { color: var(--ink); font-weight: 700; margin-right: 2px; }
.thumb[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 640px) {
  .fig-carousel > .carousel-nav .carousel-btn { display: none; }
  .thumb { flex-basis: 136px; }
}
/* slides: large, but never taller than the viewport, so the whole figure can be seen at once */
.fig-carousel .slide[style*="--ar"] .figure-media {
  max-width: min(100%, max(var(--min-w, 760px), calc((100vh - 150px) * var(--ar))));
  margin-inline: auto;
}
@supports (height: 100svh) {
  .fig-carousel .slide[style*="--ar"] .figure-media {
    max-width: min(100%, max(var(--min-w, 760px), calc((100svh - 150px) * var(--ar))));
  }
}

/* ---------- 6. Tables ------------------------------------------------------ */
/* Table 2: dataset groups (GF2, QB) over full-/reduced-resolution sub-groups over the metrics */
.results .sub-group {
  position: relative; padding: 6px 10px 5px;
  font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: .01em;
}
.results .sub-group::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: var(--border-strong);
}
.results thead tr.subgroups th { padding-top: 7px; }
.results .sub-start { border-left: 1px dashed var(--border); }
.results .grp-start.sub-start { border-left: 1px solid var(--border); }
.results sub { font-size: .72em; line-height: 0; }
.table-note sub { font-size: .72em; line-height: 0; }
/* narrower tables stay centred at a readable width */
#table-3, #table-4 { width: 100%; max-width: 900px; margin-inline: auto; }
#table-10 { width: 100%; max-width: 760px; margin-inline: auto; }
/* Table 4: the component check marks */
.results--ablation .col-mark { text-align: center; min-width: 64px; }
.results .mark-ok { color: var(--accent-text); font-weight: 700; }
.results .mark-no { color: var(--faint); }

/* dataset view toggle (Table 2): show both column groups or one (ReFlowSET) */
.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. Print ------------------------------------------------------ */
@media print {
  .topnav, .copy-btn, .fig-carousel .carousel-btn, .skip-link { display: none !important; }
  .section { padding-block: 24px; }
}