/* ─── Version Gate styling ───────────────────────────────────────────────────
   Self-contained on purpose — not coupled to any version's css/variables.css,
   since each version's theme is independent and will drift over time. Mobile-
   first: this page is meant to be opened standalone on a phone from a shared
   link, not inside the desktop .phone frame the app itself uses. */

:root {
  --gate-bg: #eef1f7;
  --gate-card: #ffffff;
  --gate-text: #172033;
  --gate-muted: #667085;
  --gate-line: #d9dee8;
  --gate-accent: #315efb;
  --gate-danger: #b42318;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gate-bg: #111318;
    --gate-card: #1e2128;
    --gate-text: #e3e6ef;
    --gate-muted: #8b95a8;
    --gate-line: #343844;
    --gate-accent: #4f76fc;
    --gate-danger: #f04438;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--gate-bg);
  color: var(--gate-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.gate-wrap {
  width: 100%;
  max-width: 360px;
}

.gate-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: var(--gate-card);
  border: 1px solid var(--gate-line);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .12);
  text-align: center;
}

.gate-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gate-muted);
}

.gate-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 850;
}

.gate-input {
  width: 100%;
  font-size: 20px;
  letter-spacing: 6px;
  text-align: center;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--gate-line);
  background: var(--gate-bg);
  color: var(--gate-text);
}

.gate-input:focus {
  outline: 2px solid var(--gate-accent);
  outline-offset: 1px;
}

.gate-error {
  margin: -4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--gate-danger);
}

.gate-btn {
  border: 1px solid var(--gate-line);
  border-radius: 14px;
  padding: 14px;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
  background: var(--gate-bg);
  color: var(--gate-text);
}

/* "recording" on a version whose build loads a usability tracker. The gate is
   the last screen before a tester is inside the app, so it is the last honest
   place to say so — and they cannot switch it off, which is exactly why it has
   to be stated rather than assumed. */
.gate-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  background: var(--gate-accent);
  color: #fff;
}

.gate-btn:hover { filter: brightness(0.97); }
.gate-btn:active { filter: brightness(0.93); }

.gate-btn-primary {
  background: var(--gate-accent);
  color: #fff;
  border-color: var(--gate-accent);
}

.gate-btn-primary:hover { filter: brightness(1.06); }

/* Mobile-style scroll indicators (thin rounded thumb, no track/arrows) */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .28); border-radius: 99px; }
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(16, 24, 40, .28) transparent; }
}