/* Shell layout: the thin, stable frame. Rarely changes — churn lives in cards/tokens. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--card-bg);        /* the hue flood; body carries data-hue (set by state machine) */
  color: var(--card-fg);
  font-family: var(--font-body);
  overflow: hidden;                 /* one card fills the viewport */
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 100;
  background: var(--paper); color: var(--ink);
  padding: 0.5rem 0.9rem; border-radius: 8px; text-decoration: none;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: 0.5rem; }

/* ---- progress: segmented bar of steps ---- */
.progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 30; padding: 0.6rem var(--pad) 0; }
.progress__track { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.progress__seg {
  flex: 1; height: 4px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 25%, transparent);
  color: var(--paper);
}
.progress__seg[aria-current="step"] { background: currentColor; }
.progress__seg[data-done="true"]   { background: color-mix(in srgb, currentColor 70%, transparent); }

/* ---- stage + cards ---- */
.stage { position: relative; height: 100%; outline: none; }
.cards { position: absolute; inset: 0; z-index: 2; }   /* above the map plane (z-index 1) */

.cards > * {                          /* every card fills the stage, stacked, TRANSPARENT */
  position: absolute; inset: 0;
  display: none;
  padding: calc(var(--pad) + 1.5rem) var(--pad) calc(var(--pad) + 3.5rem);
  color: var(--card-fg);
  container-type: size;
  overflow: hidden;                   /* hard guarantee: content never escapes the viewport */
}
.cards > [active] { display: grid; }

/* the hue flood crossfades card-to-card via the body tracking the active hue */
body { transition: background-color var(--dur) var(--ease-out); }

/* optional floating content panel (rounded, sits over the map).
   Always a DARK glass surface → force light text regardless of the flood's on-color, or a
   light-flood hue (gold/bone) would render dark text on the dark panel. */
.panel {
  place-self: center;
  color: var(--paper);
  container-type: inline-size;        /* big numbers size to the panel, not the viewport */
  /* DEFINITE width — a centered panel is shrink-to-fit, and overflow-wrap:anywhere would
     otherwise collapse its min-content to ~1 character (sliver). */
  inline-size: min(38ch, 100%); max-height: 100%;   /* 100% respects the card padding; 92vw did not (overflowed on phones) */
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-fg) 18%, transparent);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

/* phones: dock ALL panels to the bottom so the background map stays visible above them.
   Also slim the panels and lift+zoom the map plane so the visible band above the panel
   actually shows the districts (mobile's #insight2/#insight3 panels are ~440-500px tall). */
@media (max-width: 700px) {
  .panel {
    place-self: end center;
    padding: clamp(0.9rem, 3.5vw, 1.4rem);      /* less panel padding → shorter panel */
    padding-block-end: max(0.9rem, env(safe-area-inset-bottom) + 3.6rem);   /* clear the fixed nav */
  }
  condition-map { inset: 0 -12% 0 -12%; }       /* widen the plane → city reads bigger in the band */
  .map-tilt { inset: -35% -12% -12% -12%; }     /* extra top bleed for the lift */
}

/* ---- controls ---- */
.controls {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 30;
  display: flex; gap: 0.75rem; justify-content: center; align-items: center;
  padding: 0.75rem; padding-block-end: max(0.75rem, env(safe-area-inset-bottom));
}
.btn {
  font: 600 0.95rem var(--font-body);
  color: var(--paper); background: color-mix(in srgb, var(--ink) 60%, transparent);
  border: 1px solid var(--hairline); border-radius: var(--chip-radius);
  padding: 0.5rem 1rem; cursor: pointer; min-width: 44px; min-height: 44px;   /* AA target size */
  backdrop-filter: blur(6px);
}
.btn:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }
.btn:focus-visible { outline: 3px solid var(--cool); outline-offset: 2px; }

/* prev/next: circles with an SVG chevron dead-center — SVG geometry is font-independent, so
   flex centering is exact (no font-metric nudging). */
.btn--arrow {
  border-radius: 999px;
  width: 44px; height: 44px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.btn__chev { width: 22px; height: 22px; display: block; }   /* block inside flex → no baseline offset */
.btn[disabled] {
  opacity: 0.35; cursor: default; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}
.btn[disabled]:hover { background: color-mix(in srgb, var(--ink) 40%, transparent); }

/* clear, visible focus everywhere */
:focus-visible { outline: 3px solid var(--cool); outline-offset: 2px; }

/* ---- reduced motion: no crossfade, no card transitions ---- */
@media (prefers-reduced-motion: reduce) {
  body, .cards > * { transition: none !important; }
}