/* ============================================================
   NXT Partners Deck - gate pages (login + open the deck)
   Loaded after reset.css and variables.css. Every colour, font,
   size, space, radius and motion value comes from variables.css;
   the few intrinsic one-offs are commented where they appear.
   ============================================================ */

[hidden] {
  display: none !important;
}

html {
  background: var(--deck-bg);
}

.gate-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--deck-bg);
  color: var(--text-on-dark);
  font-family: var(--font-body);
}

.gate {
  width: 100%;
  max-width: 400px; /* one-off: the widest Google sign-in button GSI renders */
}

/* ---------- Logo (the real iframe component, only scaled) ---------- */
.gate-logo {
  width: 240px;  /* one-off: logo box, keeps the lockup's aspect ratio */
  height: 64px; /* one-off: logo box height, see width */
  margin: 0 auto var(--space-8);
  pointer-events: none;
}
.gate-logo iframe {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* ---------- Type ---------- */
.gate-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700; /* the only Space Grotesk weight shipped in assets/fonts */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-align: center;
  margin-bottom: var(--space-2);
}

.gate-lead {
  font-size: var(--fs-md);
  color: var(--text-on-dark-muted);
  text-align: center;
  margin-bottom: var(--space-7);
}
.gate-lead a {
  color: var(--text-on-dark);
  text-decoration: underline;
}

.gate-label,
.gate-field label,
.gate-disclosure,
.gate-foot {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.gate-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--text-on-dark-muted);
  text-align: center;
  margin-bottom: var(--space-3);
}

/* ---------- Alert (one live region for every message) ---------- */
.gate-alert {
  font-size: var(--fs-sm);
  color: var(--text-on-dark);
}
.gate-alert:not(:empty) {
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--red);
  border-left-width: 3px; /* one-off: severity bar */
  border-radius: var(--r-md);
}

/* ---------- Team door: a quiet disclosure below the form ---------- */
.gate-team {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--deck-border);
  text-align: center;
}

.gate-disclosure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.gate-disclosure:hover,
.gate-disclosure[aria-expanded="true"] {
  color: var(--text-on-dark);
}
.gate-disclosure::after {
  content: '';
  width: 7px;  /* one-off: chevron glyph drawn from two borders */
  height: 7px; /* one-off: chevron glyph, see width */
  border-right: 1.5px solid currentColor;  /* one-off: chevron stroke, heavier than a hairline to read at 7px */
  border-bottom: 1.5px solid currentColor; /* one-off: chevron stroke */
  transform: translateY(-2px) rotate(45deg); /* one-off: optical centring of the rotated chevron */
  transition: transform var(--dur-fast) var(--ease-out);
}
.gate-disclosure[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg); /* one-off: optical centring, mirrored */
}

.gate-team-panel {
  margin-top: var(--space-5);
}

.gate-gsi {
  display: flex;
  justify-content: center;
  min-height: 44px; /* one-off: reserves the GSI large button's height so nothing jumps */
}

/* ---------- Primary button ---------- */
/* Resting fill is the darker purple: white on --accent-purple is 4.2:1 and
   fails AA for this text size; white on --accent-purple-hover is 6.7:1. */
.gate-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-control);
  text-transform: uppercase;
  color: var(--text-on-dark);
  background: var(--accent-purple-hover);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.gate-button:hover {
  box-shadow: inset 0 0 0 var(--hairline) var(--text-on-dark);
}
.gate-button:disabled {
  opacity: 0.6; /* one-off: disabled state */
  cursor: default;
  box-shadow: none;
}

/* ---------- Request form ---------- */
.gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.gate-field label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-control);
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-2);
}

.gate-field input {
  width: 100%;
  padding: var(--space-3);
  border: var(--hairline) solid var(--text-on-dark-muted);
  border-radius: var(--r-md);
  background: var(--deck-surface);
  font-family: var(--font-body);
  font-size: 16px; /* one-off: below 16px iOS zooms the page on focus */
  line-height: var(--lh-snug);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gate-field input::placeholder {
  color: var(--text-on-dark-muted);
  opacity: 1; /* one-off: Firefox dims placeholders by default */
}
.gate-field input:hover {
  border-color: var(--text-on-dark);
}

.gate-turnstile {
  display: flex;
  justify-content: center;
  /* No reserved height: the widget is hidden unless Cloudflare needs an interaction. */
}

/* ---------- Inbox confirmation ---------- */
.gate-inbox {
  text-align: center;
}

/* ---------- Footer ---------- */
.gate-foot {
  margin-top: var(--space-8);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-label);
  color: var(--text-on-dark-muted);
  text-align: center;
}

/* ---------- Focus ---------- */
/* 2px ring and 2px offset: the spec'd focus indicator, visible against every gate surface */
:focus-visible {
  outline: 2px solid var(--accent-purple); /* focus ring width */
  outline-offset: 2px; /* focus ring offset */
}
.gate-field input:focus-visible {
  border-color: var(--accent-purple);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }
}