/* ==========================================================================
   C-DiffSET 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:
   ink #1C2738 ("-DiffSET") and the amber of the orange-slice icon (#FFC000),
   deepened to #D67900 for the "C" of the wordmark and the title accent.
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #D67900;           /* C-DiffSET amber (wordmark "C", title accent, rules), 3.2:1 on white: large text only */
  --accent-text: #A35C00;      /* small text, white-on-colour fills, 5.1:1 on white */
  --accent-strong: #7F4700;    /* hover */
  --accent-soft: #FFF6E5;      /* tinted fills */
  --accent-line: #F1D3A1;      /* tinted borders */
  --brand-icon: #FFC000;       /* the icon's own colour */
  --logo-k: 1;                 /* hero logo height factor: wordmark cap height = GeoSET's (54 px at 1440) */

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

/* hero: the logo image keeps its aspect ratio if the column is ever narrower than the lockup */
.hero-logo { object-fit: contain; }
/* the title breaks as on the old page and before "with" as in the tex \title: "Leveraging Latent Diffusion /
   for SAR-to-EO Image Translation / with Confidence-Guided Reliable Object Generation" (the longest line fits
   from 700 px up); below 700 px it wraps freely (balanced) */
@media (min-width: 700px) {
  .hero-title { max-width: none; }
  .hero-title .t-line { display: block; }
}
/* three 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; }
}


/* ---------- 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; }
/* hyphenated names stay whole (main.js); on narrow phones the name is set a little smaller so that the
   longest one ("Uni-ControlNet") fits the ~85-100 px tiles of the three-column strip */
@media (max-width: 400px) { .tile-m { font-size: .75rem; } }
@media (max-width: 340px) { .tile-m { font-size: .6875rem; } }

.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. Paper figures (tabs) ------------------------------------------ */
.figure-tabs .tabs-head { margin-bottom: 20px; }
/* two figures side by side; the column widths are the image aspect ratios, so both share one height */
.figure-pair { display: grid; align-items: start; gap: clamp(20px, 2.6vw, 32px); grid-template-columns: var(--pair, 1fr 1fr); }
.figure-pair > .figure { min-width: 0; }
@media (max-width: 760px) { .figure-pair { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
/* tall figures are narrowed so that they fit the viewport (never below 640 px) */
.fig-fit .figure-media { max-width: min(100%, max(640px, calc((100vh - 170px) * var(--ar, 1)))); margin-inline: auto; }
@supports (height: 100svh) {
  .fig-fit .figure-media { max-width: min(100%, max(640px, calc((100svh - 170px) * var(--ar, 1)))); }
}
.figure-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 34px); }
/* the line charts of Fig. 9 sit on white without a frame */
.figure-media--chart { padding: clamp(8px, 1.4vw, 16px) clamp(8px, 1.6vw, 20px); }
/* a note line under the samples gallery (where the images come from) */
.gallery-note { max-width: 100ch; margin: 8px auto 0; text-align: center; font-size: .8125rem; color: var(--faint); }

/* ---------- 6. Tables ------------------------------------------------------ */
/* Tables 2, 3, 7 and 8 are narrow: centred, not stretched to the full width */
#table-2, #table-7 { width: 100%; max-width: 860px; margin-inline: auto; }
#table-3, #table-8 { width: 100%; }
#table-8 { max-width: 760px; margin-inline: auto; }
/* Tables 3 and 8: the two configuration columns ("Pretrained LDM", "Loss function") share one style */
.results .col-check { text-align: center; color: var(--text); font-weight: 600; }
.results tr.ours td.col-check:first-child { box-shadow: inset 3px 0 0 var(--ours-bar); }
.results sup { font-size: .72em; line-height: 0; margin-left: 1px; color: var(--muted); }
.stack--tables > .table-figure + .table-figure { margin-top: 0; }

/* dataset view toggle (Table 1): 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: 38px; padding-inline: 13px; } }

/* ---------- 7. BibTeX: the long title line wraps instead of scrolling (as the same entry on ReFlowSET) */
.bibtex pre { white-space: pre-wrap; overflow-wrap: anywhere; }