/* =========================================================
   ZEER · Auth page (login / register / recovery)
   Inherits color/font variables from style.css
   ========================================================= */

[data-page="auth"],
[data-page="auth"] body {
  height: 100dvh;
  overflow: hidden;
}
[data-page="auth"] .nav,
[data-page="auth"] .nav-overlay,
[data-page="auth"] .skip-link,
[data-page="auth"] .scroll-progress,
[data-page="auth"] .to-top,
[data-page="auth"] .foot {
  display: none !important;
}

/* Centered glass panel */
.auth {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* Logo */
.auth__mark {
  width: 56px;
  height: 56px;
  margin-bottom: 2rem;
  filter: drop-shadow(0 0 24px rgba(34, 241, 255, 0.18));
}
.auth__mark video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tab toggle */
.auth__tabs {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  border: 1px solid rgba(245, 241, 255, 0.10);
  border-radius: 999px;
  overflow: hidden;
}
.auth__tab {
  padding: 0.6rem 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition:
    color 0.35s var(--ease-out),
    background-color 0.35s var(--ease-out);
}
.auth__tab.is-active {
  color: var(--ink);
  background: rgba(245, 241, 255, 0.06);
}
.auth__tab:hover:not(.is-active) {
  color: var(--ink);
}

/* Forms */
.auth__form {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.auth__form[hidden] { display: none; }

.auth__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.auth__label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.auth__input {
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: rgba(245, 241, 255, 0.025);
  border: 1px solid rgba(245, 241, 255, 0.12);
  border-radius: 4px;
  outline: none;
  transition:
    border-color 0.4s var(--ease-out),
    background-color 0.4s var(--ease-out);
}
.auth__input::placeholder {
  color: rgba(245, 241, 255, 0.28);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.88em;
}
.auth__input:focus {
  border-color: rgba(245, 241, 255, 0.32);
  background-color: rgba(245, 241, 255, 0.04);
}

/* Error shake on the panel */
.auth.is-error .auth__input:invalid {
  border-color: rgba(255, 80, 110, 0.55);
  animation: authShake 0.4s ease;
}
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* reCAPTCHA widget — centered, strip iframe border */
.auth__captcha {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
  line-height: 0;
}
.auth__captcha iframe {
  border: 0 !important;
}

/* Submit button */
.auth__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.95rem 1.4rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(34, 241, 255, 0.10);
  border: 1px solid rgba(34, 241, 255, 0.28);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background-color 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}
.auth__submit:hover {
  background: rgba(34, 241, 255, 0.18);
}
.auth__submit:active {
  transform: scale(0.98);
}
.auth__submit-arrow {
  transition: transform 0.4s var(--ease-out);
}
.auth__submit:hover .auth__submit-arrow {
  transform: translateX(3px);
}

/* Text links */
.auth__link {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  text-align: center;
  transition: color 0.3s var(--ease-out);
}
.auth__link:hover { color: var(--ink); }

.auth__hint {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--ink-dim);
  font-variation-settings: "wght" 420, "SOFT" 60, "opsz" 72;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Status */
.auth__status {
  min-height: 1.3rem;
  margin-top: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
}
.auth__status.is-error { color: #ff506e; }
.auth__status.is-success { color: var(--chr-cyan); }

/* Back link */
.auth__back {
  margin-top: 2rem;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.auth__back:hover { color: var(--ink); }

/* Mobile */
@media (max-width: 480px) {
  .auth__form { max-width: 100%; }
  .auth__mark { width: 44px; height: 44px; margin-bottom: 1.5rem; }
  .auth__tabs { margin-bottom: 1.5rem; }
  .auth__tab { padding: 0.55rem 1rem; font-size: 0.66rem; }
}