/* Atlas page: the flow figures (src/vignettes/atlas/*) and the hero's first light.
 * Scoped to .page-atlas; loaded after site.css. Text in figures is DOM in ink colours; series
 * colours appear only as swatches. */

/* ---------------------------------------------------------------- spectrum: the table at a glance */
.page-atlas .vig--spectrum { height: 480px; margin: 0 0 var(--space-6); pointer-events: auto; touch-action: pan-y; }
.page-atlas .spec__ui { position: absolute; inset: 0; pointer-events: none; }
.page-atlas .spec__legend { position: absolute; left: 0; top: 0; right: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); line-height: 1.3; color: var(--color-ink); }
.page-atlas .spec__key { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.page-atlas .spec__note { color: var(--color-muted); }
.page-atlas .kk { position: relative; flex: none; width: 13px; height: 13px; border-radius: 50%; }
.page-atlas .kk--ok { background: radial-gradient(circle, oklch(97% 0.03 85) 0 22%, var(--color-accent) 42%, oklch(83% 0.145 78 / 0) 72%); }
.page-atlas .kk--review { box-shadow: inset 0 0 0 2px var(--color-alert); }
.page-atlas .kk--review::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--color-accent); }
.page-atlas .kk--gap { box-shadow: inset 0 0 0 2px var(--color-alert); }
.page-atlas .spec__name, .page-atlas .spec__n { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; transition: opacity 700ms var(--ease-out); }
.page-atlas .spec__name { font-size: var(--text-sm); line-height: 1.3; color: var(--color-ink); text-wrap: balance; }
.page-atlas .spec__name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.page-atlas .spec__n { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.page-atlas .spec__ui.is-on .spec__name, .page-atlas .spec__ui.is-on .spec__n { opacity: 1; }
.page-atlas .spec__tip { position: absolute; left: 0; top: 0; z-index: 2; max-width: 260px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-glass); border: 1px solid var(--color-rule-soft); box-shadow: var(--e1); font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink); pointer-events: none; }
.page-atlas .spec__tip b { display: block; margin-bottom: 4px; font: 500 var(--text-xs)/1.2 var(--font-mono); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--color-ink); }
.page-atlas .spec__tip[hidden] { display: none; }
@media (max-width: 760px) {
  .page-atlas .vig--spectrum { height: 400px; margin-bottom: var(--space-5); }
  .page-atlas .spec__legend { gap: var(--space-2) var(--space-4); font-size: var(--text-xs); }
  .page-atlas .spec__note { flex-basis: 100%; }
  .page-atlas .spec__name { font-size: var(--text-xs); }
}

/* ---------------------------------------------------------------- keep: the deliverables and their form */
.page-atlas .keep__body { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-7); align-items: center; }
.page-atlas .keep__list { grid-template-columns: minmax(0, 1fr); }
.page-atlas .keep__list li { position: relative; padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5); cursor: default; border-radius: var(--radius-sm); }
.page-atlas .keep__list li::before { content: ""; position: absolute; left: 0; top: var(--space-5); bottom: var(--space-5); width: 2px; border-radius: 2px; background: var(--color-accent); transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-out); }
.page-atlas .keep__list li.is-on::before { transform: scaleY(1); }
.page-atlas .keep__list b { transition: color var(--dur-base) var(--ease-out); }
.page-atlas .keep__list li.is-on b { color: var(--color-accent-hi); }
.page-atlas .keep__list li:focus-visible { outline-offset: -2px; }
.page-atlas .vig--keep { height: clamp(440px, 40vw, 600px); }
@media (max-width: 900px) {
  .page-atlas .keep__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .page-atlas .vig--keep { order: -1; height: min(96vw, 400px); margin: 0 calc(-1 * var(--gutter)); }
}
.no-vig .page-atlas .keep__body { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) { .no-vig .page-atlas .keep__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- text scrolled out of its own scroll box (table rows, panel items):
   clipped there already; marked so it reads as hidden to measuring tools too (src/pages/atlas.js clipWatch) */
.page-atlas .facts tbody tr { transition: opacity 240ms var(--ease-out); }
.page-atlas .is-clipped { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .page-atlas .facts tbody tr { transition: none; } }

/* ---------------------------------------------------------------- hero: the poster hands over slowly while the map assembles */
.page-atlas.gl-ready .stage .poster { transition: opacity 1400ms var(--ease-out) 120ms; }

/* ---------------------------------------------------------------- hero panel: on phones the tab strip is a horizontal scroller inside a
   flex column, so it shrank to 8 px tall (measured 390x844) and the five view tabs could not be seen or tapped. Hold its height. */
.page-atlas .surface__tabs { flex-shrink: 0; }

/* ?nogl / no WebGL2: the shared rule in site.css hides this too; kept as a page-local guard,
   otherwise it leaves an empty 400-600 px hole beside / above the list */
.no-vig .page-atlas .vig--keep { display: none; }