/* ═══════════════════════════════════════════════════════════════════
   ink-ls · Auth (shared)
   Common shell for centered auth panels — Login + DevLogin both extend
   this with their own page-specific overrides.
   ═══════════════════════════════════════════════════════════════════ */

/* Honeypot field — visually hidden, off-screen, non-interactive. Real
   humans never see, focus, or fill this. Bots that scrape the form and
   fill all inputs do. The server treats any non-empty value as a wrong-
   credentials response, indistinguishable from a real bad login.
   Don't use `display:none` or `visibility:hidden` — many bots skip those
   inputs because they recognize them as decoys. The off-screen positioning
   keeps the input in the layout (visible to bots) while invisible to users. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Cloudflare Turnstile widget — full-width inside the auth-box so it
   aligns with the input fields and submit button instead of floating at
   its native 300px in a 320px container. `min-height` reserves the
   widget's vertical space BEFORE Cloudflare's JS finishes loading, so
   the form doesn't jump when the widget pops in. `display:flex` +
   `justify-content:center` is a safety net for the (rare) case Turnstile
   ignores `data-size="flexible"` and falls back to its 300px native size. */
.cf-turnstile {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 65px;
  margin: 14px 0;
}
.cf-turnstile iframe {
  width: 100% !important;
  max-width: 100%;
}

.auth-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.auth-box {
  width: 100%;
  max-width: 320px;
  animation: fadeUp 0.3s ease-out;
}

.auth-heading {
  font-size: 20px;
  font-weight: 300;
  color: var(--fg);
  text-align: center;
}
.auth-heading strong { font-weight: 600; }

@media (max-width: 480px) {
  .auth-box { max-width: 100%; }
}