/* Project-page figures, built in HTML/CSS (Thomas, 2026-09-30: no baked figures, tiles grow on hover).
   Every photo is its own file in static/images/fig/. The page is light by design. */
:root {
  --ink: #1f2937;
  --muted: #6b7280;
  --accent: #ce0e2d;
  --accent-soft: #fdf1f3;
  --accent-line: #f7c9d2;
  --frozen: #e8ecf2;
  --frozen-line: #b8c2d0;
  --arrow: #9aa3af;
  --rule: #e5e7eb;
  --chip: #f3f4f6;
  --gap: 14px;
  --radius: 12px;
}

.fig-section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.fig-title {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-weight: 700; font-size: 1.65rem; color: var(--ink); line-height: 1.2; margin: 0;
  text-wrap: balance;
}
.fig-sub { color: var(--muted); font-size: 1rem; margin: 0.25rem 0 1.1rem; }

/* ---------------- tiles and zoom ---------------- */
.tile-box { position: relative; aspect-ratio: 1 / 1; }
.tile {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
  background: var(--chip);
}
.zoom { cursor: zoom-in; transition: transform 0.22s ease, box-shadow 0.22s ease; position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .zoom:hover, .zoom.is-zoomed {
    transform: scale(1.8); z-index: 30;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
  }
  /* edge tiles grow inwards so the enlarged picture stays on screen */
  .cols > .col:first-of-type .zoom { transform-origin: left center; }
  .cols > .col:last-of-type .zoom { transform-origin: right center; }
  .pipe .node[style="--c:1"] .zoom { transform-origin: left center; }
  .pipe .node[style="--c:13"] .zoom { transform-origin: right center; }
  .pipe .node.map .zoom, .inset .zoom { transform-origin: center top; }
}
@media (prefers-reduced-motion: reduce) { .zoom { transition: none; } }

.tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; pointer-events: none;
}
.chip {
  display: inline-block; font-size: 0.85rem; font-weight: 700; color: var(--ink);
  background: var(--chip); padding: 3px 11px; border-radius: 999px; margin-bottom: 8px;
}
.chip.hot { color: var(--accent); background: #fff; }

/* ---------------- result bands ---------------- */
.band + .band { border-top: 1px solid var(--rule); margin-top: 1.9rem; padding-top: 1.9rem; }
.cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); position: relative; }
.col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.col .tile-box { width: 100%; }
.down { display: block; width: 22px; height: 26px; margin: 6px auto; color: var(--accent); }

/* "add" band: one input, four results grouped on a tinted panel */
.cols.add .panel {
  display: block; grid-column: 2 / 6; grid-row: 1; z-index: 0;
  margin: -12px -12px -12px -12px;
  background: var(--accent-soft); border: 1.5px solid var(--accent-line); border-radius: 16px;
}
.cols.add .col { grid-row: 1; z-index: 1; padding-top: 2px; }
.cols.add .col:nth-of-type(1) { grid-column: 1; }
.cols.add .col:first-of-type { z-index: 3; }            /* keeps the badge above the panel's first tile */
.cols.add .col:hover, .cols.add .col:focus-within { z-index: 20; }  /* an enlarged tile rises over its neighbours */
.cols.add .col:nth-of-type(2) { grid-column: 2; }
.cols.add .col:nth-of-type(3) { grid-column: 3; }
.cols.add .col:nth-of-type(4) { grid-column: 4; }
.cols.add .col:nth-of-type(5) { grid-column: 5; }
.badge {
  position: absolute; top: 50%; right: calc(-1 * (var(--gap) / 2) - 21px); transform: translateY(-50%);
  width: 42px; height: 42px; z-index: 5; pointer-events: none;
}

/* ---------------- pipeline ---------------- */
/* no scroll box: a scroll container would clip tiles that grow on hover. Above 768 px the pipe fits,
   below that it turns vertical (small screens block). */
.pipe-scroll { padding: 10px 2px 14px; }
.pipe {
  display: grid; align-items: center; column-gap: 0; row-gap: 10px;
  grid-template-columns: 1.25fr 0.42fr 0.72fr 0.42fr 1fr 0.42fr 0.72fr 0.42fr 1fr 0.42fr 0.72fr 0.42fr 1.25fr;
}
.pipe .node, .pipe .cap, .pipe .arrw { grid-column: var(--c); }
.pipe .node { grid-row: 1; display: flex; justify-content: center; }
.pipe .arrw { grid-row: 1; display: flex; align-items: center; }
.pipe .node .tile-box { width: 100%; }
.pipe .node.map .tile-box { width: 88%; }
.pipe .cap { grid-row: 2; text-align: center; align-self: start; }
.pipe .cap b { display: block; font-size: 1rem; color: var(--ink); }
.pipe .cap span { display: block; font-size: 0.84rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.pipe .cap.hot b, .pipe .cap.hot span { color: var(--accent); }
.pipe .arr { width: 100%; height: 22px; color: var(--arrow); }
.pipe .arr.hot { color: var(--accent); }
.block { width: 100%; aspect-ratio: 0.62; }
.block text { font-family: 'Google Sans', 'Noto Sans', sans-serif; font-weight: 700; }
.rfa-box {
  width: 100%; aspect-ratio: 1.15; display: flex; align-items: center; justify-content: center;
  background: #fde8ec; border: 2.4px solid var(--accent); border-radius: 12px;
  color: var(--accent); font-family: 'Google Sans', 'Noto Sans', sans-serif; font-weight: 800; font-size: 1.35rem;
}
.inset { grid-row: 3; grid-column: 6 / 9; display: flex; flex-direction: column; align-items: center; position: relative; }
.inset .tie { width: 2px; height: 16px; background: repeating-linear-gradient(var(--accent) 0 3px, transparent 3px 7px); }
.inset .tile-box { width: 58%; margin-top: 4px; }
.inset-note { grid-row: 3; grid-column: 9 / 14; align-self: center; padding-left: 12px; }
.inset-note b { display: block; color: var(--ink); font-size: 0.95rem; }
.inset-note span { color: var(--muted); font-size: 0.84rem; }

/* ---------------- lightbox (tap / click) ---------------- */
#lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(17, 24, 39, 0.86);
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
#lightbox[hidden] { display: none; }
#lightbox img { max-width: min(92vw, 900px); max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
#lightbox p { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #e5e7eb; font-size: 0.9rem; margin: 0; }

/* ---------------- small screens ---------------- */
@media screen and (max-width: 768px) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols.add .panel, .badge { display: none; }
  .cols.add .col { grid-row: auto !important; grid-column: auto !important; }
  .fig-title { font-size: 1.4rem; }
  /* pipeline turns vertical: steps down the left, captions beside them, arrows point down */
  .pipe-scroll { padding: 4px 0; }
  .pipe { grid-template-columns: 42% 1fr; column-gap: 16px; row-gap: 2px; }
  .pipe .node, .pipe .arrw { grid-column: 1; grid-row: var(--c); }
  .pipe .cap { grid-column: 2; grid-row: var(--c); align-self: center; text-align: left; }
  .pipe .arrw { justify-content: center; height: 34px; }
  .pipe .arr { width: 34px; transform: rotate(90deg); }
  .pipe .node.map .tile-box { width: 80%; }
  .pipe .block { width: 46%; transform: rotate(90deg); margin: -18px 0; }
  .pipe .block text { transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
  .pipe .rfa-box { width: 70%; }
  .inset { grid-column: 1; grid-row: 14; }
  .inset .tie { display: none; }
  .inset .tile-box { width: 60%; margin-top: 14px; }
  .inset-note { grid-column: 2; grid-row: 14; padding-left: 0; padding-top: 14px; }
}