/* Shared auth-page styles -- login / signup / forgot / reset.
   Centered card layout + form classes (migrated from the old landing modal).
   Buttons come from components.css (.btn / .btn-primary); tokens only. */

.auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: var(--bg-base);
}

.auth-wordmark {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  padding: var(--space-2xl);
}

.auth-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-lg) 0;
}

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

.auth-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.auth-label input {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  padding: var(--space-sm-md) var(--space-md);
  width: 100%;
  transition: border-color var(--transition-fast);
}

.auth-label input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.auth-label input::placeholder {
  color: var(--text-muted);
}

.auth-switch {
  margin-top: var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.auth-switch a {
  color: var(--text-accent);
}

.auth-error {
  background: var(--bg-surface);
  border-left: 2px solid var(--text-negative);
  color: var(--text-negative);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  padding: var(--space-sm) var(--space-sm-md);
  margin-bottom: var(--space-md);
}

.auth-verified {
  background: var(--bg-surface);
  border-left: 2px solid var(--accent-2);
  color: var(--accent-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  padding: var(--space-sm) var(--space-sm-md);
  margin-bottom: var(--space-md);
}

.auth-message-text {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-lg) 0;
}

.auth-message a {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-accent);
}