/* The curtain. Its own document: no map, no panels, nothing to see until it
 * is answered. Uses the same UL-blue surface tokens as the map. */
/* Centred on both axes via `margin: auto` on the panel rather than
 * align-items/justify-content. Those centre by distributing free space, and
 * when the panel is TALLER than the viewport they push its top to a negative
 * offset — which cannot be scrolled to, so the top of the form becomes
 * unreachable. Measured at 320x240: panel top at -41px. `margin: auto` on a
 * flex child centres identically but collapses to zero rather than negative,
 * so a too-tall panel scrolls normally instead of being cut off. */
body.gate {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;     /* the visible viewport, not the URL-bar-less one */
  height: auto;           /* the base sheet sets html,body{height:100%} */
  margin: 0; padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(47,102,245,0.28), transparent 70%),
    var(--bg);
  background-attachment: fixed;   /* the wash stays put if the panel scrolls */
}
html:has(body.gate) { height: auto; }
.gate-panel {
  margin: auto;
  width: 100%; max-width: 420px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 40px 34px 34px; box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.gate-eyebrow { margin: 0 0 14px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); }
.gate-panel h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.gate-lede { margin: 0 0 24px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.gate-form { display: flex; gap: 8px; }
.gate-form input {
  flex: 1; min-width: 0; background: rgba(0,0,0,0.28); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; font-size: 14px;
}
.gate-form input::placeholder { color: var(--muted); }
.gate-form input:focus { outline: none; border-color: var(--ul-blue);
  box-shadow: 0 0 0 3px rgba(47,102,245,0.28); }
.gate-form input[aria-invalid="true"] { border-color: #f4436b; }
.gate-form button {
  background: var(--ul-blue); color: #fff; border: 0; border-radius: 8px;
  padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.gate-form button:hover { background: var(--ul-blue-press); }
.gate-error { margin: 14px 0 0; font-size: 12.5px; color: #f4436b; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }