/*
 * Occupemo Web — Auth Pages Styles
 * Applies to: login.html, signup.html, reset-password.html, auth/callback.html
 */

/* ============================================================
   Auth shell — full-page centered layout
   ============================================================ */
.auth-shell {
  min-height: 100vh; /* fallback for browsers without dvh */
  min-height: 100dvh; /* matches .mkt-page — stays centered under iOS Safari's dynamic toolbar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--screen-pad);
  background-color: var(--color-bg);
}

/* Wordmark above card */
.auth-wordmark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-xl);
  text-decoration: none;
  line-height: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}

.auth-wordmark img {
  height: 36px;
  width: auto;
  display: block;
}

.auth-wordmark:hover {
  text-decoration: none;
  opacity: 0.85;
}

/* Auth card */
.auth-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--color-surface);
  border-radius: var(--radius-xxl);
  padding: var(--space-xxl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  animation: auth-card-in var(--motion-slow) var(--ease-out) both;
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
}

.auth-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
  text-align: center;
}

.auth-card-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-xxl);
}

/* Form groups */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

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

.auth-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* (Inputs are 16px globally now — see .input in styles.css — so no
   page-scoped iOS-zoom override is needed here anymore.) */

/* Error alert — tint/border derive from the error token via color-mix so
   they can't drift from the var(--color-error) text if the palette changes.
   NOT display:none when hidden: the role=alert live region must already be
   exposed in the accessibility tree when text is inserted, or screen readers
   skip the announcement (same principle as the eager toast container in
   ui.js mountAppChrome). Empty + zero padding/border = renders 0-height. */
.auth-error {
  background-color: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  color: var(--color-error-text);
  overflow-wrap: anywhere; /* long server messages / echoed emails must wrap */
}

.auth-error:not(.visible) {
  padding: 0;
  border-width: 0;
}

/* Success state */
.auth-success {
  text-align: center;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.auth-success.visible {
  display: flex;
}

.auth-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success);
  font-size: 24px;
  margin: 0 auto var(--space-sm);
}

.auth-success-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.auth-success-body {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  /* The submitted email is echoed verbatim — long unbroken addresses must
     wrap instead of overflowing the card / forcing horizontal page scroll. */
  overflow-wrap: anywhere;
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: var(--space-sm) 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* Apple button */
.btn-apple {
  background-color: var(--color-text-primary);
  color: var(--color-bg);
  width: 100%;
  gap: var(--space-sm);
  border: none;
}

.btn-apple:hover:not(:disabled) {
  opacity: 0.85;
  color: var(--color-bg);
  text-decoration: none;
}

.btn-apple svg {
  display: inline;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Submit button full-width */
.auth-submit {
  width: 100%;
  margin-top: var(--space-xs);
}

/* Footer links */
.auth-footer {
  text-align: center;
  margin-top: var(--space-xl);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.auth-footer a {
  color: var(--color-accent);
  font-weight: 600;
}

/* Forgot password link row */
.auth-forgot {
  text-align: right;
  font-size: 13px;
  margin-top: calc(-1 * var(--space-sm));
}

/* Spinner for callback page */
.auth-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: auth-spin 0.75s linear infinite;
  margin: 0 auto var(--space-xl);
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* Loading state */
.btn-loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  /* currentColor: the spinner inherits whatever foreground the host button
     uses (on-accent on .btn-primary, bg-color on .btn-apple, …). */
  border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: auth-spin 0.65s linear infinite;
  margin-left: var(--space-sm);
}

/* Responsive */
@media (max-width: 480px) {
  .auth-card {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-xl);
  }
}