/* ============================================================================
   CYNOSURE LOGIN — cynos.dev/login
   Agnostic-OTP login: ONE email field -> ONE agnostic code field.
   OLED-black + cyan, Cynosure wordmark, Turnstile container, generic errors.
   NO passwords, NO credential-paste fields (pre-fill-is-contract).
   ========================================================================== */

.login-wrap {
  position: relative; z-index: var(--z-content);
  /* ITEM 2: lock the centering box to the viewport so the login fits one screen
     and never scrolls on mobile. 100dvh tracks the dynamic (toolbar-aware) height;
     100vh is the fallback for engines without dvh. */
  height: 100vh;
  height: 100dvh;
  display: grid; place-items: center;
  padding: 28px 20px;
  overflow: hidden;
}

/* ITEM 2: pin the whole login PAGE to the viewport — no mobile scroll.
   base.css sets `body { min-height: 100vh }`; on mobile that LARGE viewport is
   taller than the visible area when the browser toolbars are shown, which forces
   the page to scroll. This stylesheet is linked ONLY by login.html, so pinning
   html/body to the dynamic viewport height (100dvh; 100vh fallback), cancelling
   that min-height, and hiding overflow locks the login to exactly one screen
   without affecting the hub (which links hub.css, not this file). */
html, body {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Pixel-art canvas (scripts/starfield.js) styling now lives in base.css
   (`.cynos-bg canvas.cynos-stars`) as shared substrate — both the login page and
   the hub mount the same canvas, so the rule is defined once in the shared base.
   On the login page the canvas OWNS the whole celestial treatment: crisp pixel-art
   stars across the sky and an animated pixel-art sea along the bottom. */

/* LOGIN-ONLY substrate override (this stylesheet is linked only by login.html,
   and after base.css, so this wins by source order and is perfectly scoped —
   the shared hub `.cynos-bg` is untouched). Collapse the shared substrate to
   pure black so the soft CSS star-bloom AND the static horizon gradient are gone;
   the pixel canvas above paints the crisp stars + animated pixel waves instead. */
.cynos-bg { background: var(--black); }

.login-card {
  width: 100%; max-width: 400px;
  background:
    radial-gradient(140% 70% at 50% 0%, rgba(34,211,238,0.05), transparent 60%),
    var(--raise-2);
  border: 1px solid var(--vfd-border);
  border-radius: var(--r-lg);
  box-shadow: var(--vfd-glow), 0 24px 80px -28px rgba(0,0,0,0.9);
  padding: 30px 28px 26px;
}

.login-card .wordmark { margin: 0 auto 22px; justify-content: center; }

.login-head { text-align: center; margin-bottom: 22px; }
.login-head h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .01em; color: var(--fg); }
.login-head p {
  margin: 7px 0 0; font-size: 12.5px; color: var(--fg-faint);
  font-family: var(--font-mono); line-height: 1.5;
}

/* a step is shown/hidden via the .hidden attribute */
.step { display: flex; flex-direction: column; gap: 14px; }
.step[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-faint);
}
.field input {
  width: 100%;
  background: var(--raise-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-family: var(--font-ui); font-size: 15px;
  padding: 13px 14px; outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder { color: var(--fg-ghost); }
.field input:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent-dim); }

/* the agnostic code field — monospace, spaced digits */
.field input.code-input {
  font-family: var(--font-mono);
  font-size: 22px; letter-spacing: 0.5em; text-align: center; padding-left: 0.5em;
}

.field .hint {
  font-size: 11.5px; color: var(--fg-faint); line-height: 1.45;
}
.field .who-chip {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-bright);
}

/* Turnstile widget container (managed/invisible). Sitekey is a placeholder the
   backend/config fills (TD-4). On local/dev with no Cloudflare it simply does
   not render; the BE enforces siteverify in production. */
.turnstile-slot {
  display: flex; justify-content: center; min-height: 0;
  /* graceful collapse once verification passes: fade first, then fold height.
     overflow:hidden + max-height lets the Continue button rise smoothly. */
  overflow: hidden;
  max-height: 120px; opacity: 1;
  transition: opacity .35s ease, max-height .45s ease .2s, margin .45s ease .2s, transform .35s ease;
}
.turnstile-slot.is-verified {
  opacity: 0; max-height: 0; margin: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .turnstile-slot { transition: opacity .12s linear; }
}
.cf-turnstile { margin: 0 auto; }

.btn-primary {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 16px;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: 14px; font-weight: 800; letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 0 22px -8px var(--accent-glow);
  transition: filter .12s ease, box-shadow .12s ease;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 26px -6px var(--accent-glow); }
.btn-primary:disabled { opacity: .55; cursor: progress; }
.btn-primary .spin { display: none; }
.btn-primary.busy .spin { display: inline-grid; place-items: center; }
.btn-primary.busy .label { opacity: .85; }
.btn-primary .spin svg { width: 15px; height: 15px; }

.btn-ghost {
  width: 100%; padding: 10px; margin-top: 2px;
  background: transparent; border: none; color: var(--fg-faint);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; cursor: pointer;
}
.btn-ghost:hover { color: var(--fg-dim); }

/* generic error — never enumerates (same copy whether account/code/factor) */
.login-error {
  display: none;
  align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bad-bg); border: 1px solid rgba(251,113,133,0.28);
  color: #f6c0c8; font-size: 12.5px; line-height: 1.45;
}
.login-error.show { display: flex; }
.login-error svg { width: 15px; height: 15px; color: var(--bad); flex: none; margin-top: 1px; }