/* Auth pages — sign-in and magic link verification */

.auth-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-4);
  max-inline-size: 26rem;
  padding: var(--space-6);
  width: 100%;
}

.auth-card__brand {
  text-align: center;
}

.auth-card__name {
  color: var(--neutral-text);
  font-size: var(--text-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.auth-card__tagline {
  color: var(--color-text-subtle);
  font-size: var(--text-label);
  margin-block-start: var(--space-1);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-form .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.auth-form label {
  color: var(--neutral-text);
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
}

.auth-form .btn {
  inline-size: 100%;
  min-block-size: 2.75rem; /* 44px minimum touch target */
  margin-block-start: var(--space-1);
}

.auth-card__mascot {
  font-size: 2.5rem;
  line-height: 1;
  margin-block-end: var(--space-2);
  text-align: center;
}

.auth-card__divider {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin: 0;
}

.auth-card__heading {
  color: var(--color-text);
  font-size: var(--text-subheading);
  font-weight: var(--font-semibold);
}

.auth-form .field__error {
  color: var(--color-negative);
  display: none;
  font-size: var(--text-caption);
  margin-block-start: var(--space-1);
}

.auth-form .input:user-invalid + .field__error {
  display: block;
}

.auth-card__footer {
  color: var(--color-text-subtle);
  font-size: var(--text-caption);
  text-align: center;
}

.auth-card__footer a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* OTP Input Group */

.otp-inputs {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.otp-char {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-heading);
  font-weight: var(--font-bold);
  height: 3rem;
  text-align: center;
  text-transform: uppercase;
  width: 2.75rem;
}

.otp-char:focus {
  border-color: var(--color-link);
  outline: none;
}

.otp-char--error {
  background-color: color-mix(in srgb, var(--color-negative) 8%, white);
  border-color: var(--color-negative);
  color: var(--color-negative);
}

.otp-char:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-50);
}

.otp-inputs--error {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Verification timer */

.verification-timer {
  color: var(--color-text-subtle);
  font-size: var(--text-caption);
  text-align: center;
}

/* When the OTP form inputs are disabled (countdown expired), highlight the timer */
.auth-otp-group:has(input:disabled) .verification-timer {
  color: var(--color-negative);
}

/* Groups OTP form + countdown timer so the countdown controller can target both */

.auth-otp-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Sent/entry screen layout helpers */

.auth-card__sent-to {
  color: var(--color-text-subtle);
  font-size: var(--text-label);
  text-align: center;
}

.auth-card__instruction {
  color: var(--color-text-subtle);
  font-size: var(--text-label);
  text-align: center;
}

.auth-card__resend {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-inline-resend {
  display: inline;
}

/* Screen 5: Success state */

.auth-card__success-heading {
  color: var(--color-positive);
  font-size: var(--text-heading);
  font-weight: var(--font-bold);
  text-align: center;
}

.auth-card__welcome {
  font-size: var(--text-subheading);
  font-weight: var(--font-semibold);
  text-align: center;
}

.auth-card__redirect-hint {
  color: var(--color-text-subtle);
  font-size: var(--text-label);
  text-align: center;
}

.auth-card__progress-bar {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  height: 0.375rem;
  overflow: hidden;
  width: 100%;
}

.auth-card__progress-bar-fill {
  animation: progress-fill 1.5s ease-in-out forwards;
  background-color: var(--color-positive);
  height: 100%;
  width: 0;
}

@keyframes progress-fill {
  from { width: 0; }
  to { width: 100%; }
}

/* Mobile-first: reduce card padding on narrow screens so 6 OTP chars fit */
@media (max-width: 430px) {
  .auth-card {
    padding: var(--space-4);
  }
}