/* css/pages/auth.css — split layout for auth.html. Mobile-first; single
   column under 768px (brand panel hidden, mobile logo shown instead), a
   two-pane split from 768px, with more generous panel padding from 1024px.
   Tokens only. */

::selection { background: var(--color-primary); color: var(--color-surface); }

.cs-auth {
  min-height: 100vh;
  background: var(--color-bg);
}

/* Two shared-component fixes, scoped to this page's markup only:
   1. .cs-field__error sets display:flex, which (being an author rule)
      always wins over the [hidden] user-agent rule at equal specificity,
      so a hidden error span was rendering anyway. Restore [hidden].
   2. The style guide's loading-button example never toggles .cs-btn__spinner
      at runtime, so components.css never needed a default-hidden state for
      it; this page does, since the spinner markup is present up front and
      only .cs-btn--loading is toggled by JS. */
#email-error[hidden] { display: none; }
.cs-btn__spinner { display: none; }

/* ===== Brand panel (desktop only) ===== */
.cs-auth__brand-panel {
  display: none;
}

.cs-auth__logo {
  align-self: flex-start;
}
.cs-auth__logo .cs-header__logo-ink,
.cs-auth__logo .cs-header__logo-brand {
  color: var(--color-surface);
}

.cs-auth__brand-copy {
  max-width: 40ch;
}
.cs-auth__brand-title {
  color: var(--color-surface);
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.cs-auth__brand-subtitle {
  color: var(--color-border);
  margin: 0;
  max-width: 38ch;
}

.cs-auth__testimonial {
  margin: 0;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.cs-auth__testimonial blockquote {
  margin: 0 0 var(--space-4);
}
.cs-auth__testimonial p {
  color: var(--color-surface);
  font-size: var(--font-size-lg);
  margin: 0;
  max-width: 42ch;
}
.cs-auth__testimonial figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cs-auth__testimonial-who {
  display: flex;
  flex-direction: column;
}
.cs-auth__testimonial-name { color: var(--color-surface); font-weight: 600; font-size: var(--font-size-sm); }
.cs-auth__testimonial-role { color: var(--color-border); font-size: var(--font-size-xs); }

/* ===== Form panel ===== */
.cs-auth__form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-8) var(--space-4);
}

.cs-auth__form-panel-inner {
  width: 100%;
  max-width: 400px;
}

.cs-auth__mobile-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.cs-auth__card {
  padding: var(--space-8);
}

.cs-auth__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}
.cs-auth__subtitle {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.cs-auth__google-btn,
.cs-auth__submit-btn {
  width: 100%;
}

.cs-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.cs-auth__divider::before,
.cs-auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

#magic-link-form .cs-field { margin-bottom: var(--space-6); }

.cs-auth__legal {
  margin-top: var(--space-6);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* ===== Success state ===== */
.cs-auth__success {
  text-align: center;
}
.cs-auth__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.cs-auth__success .cs-auth__subtitle { margin-bottom: var(--space-6); }
.cs-auth__success #auth-success-email {
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.cs-auth__success-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cs-auth__success-actions .cs-btn { width: 100%; }

/* Fixed-width digits so the countdown label doesn't jitter the button as
   the second digit's glyph width changes each tick (same reasoning as the
   landing page's stat counters). */
#resend-btn { font-variant-numeric: tabular-nums; }

/* A single, orchestrated reveal when the card swaps between the sign-in
   form and the "check your inbox" state — not a per-element hover effect. */
.cs-auth__state {
  animation: cs-auth-state-in var(--transition-slow) ease-out both;
}
@keyframes cs-auth-state-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Split layout from 768px ===== */
@media (min-width: 768px) {
  .cs-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cs-auth__brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-12);
    min-height: 100vh;
    padding: var(--space-12) var(--space-8);
    background: var(--color-ink);
  }

  .cs-auth__mobile-logo { display: none; }

  .cs-auth__form-panel { padding: var(--space-12) var(--space-8); }
}

@media (min-width: 1024px) {
  .cs-auth { grid-template-columns: 1.05fr 1fr; }
  .cs-auth__brand-panel { padding: var(--space-16) var(--space-12); }
  .cs-auth__form-panel { padding: var(--space-16) var(--space-12); }
  .cs-auth__brand-title { font-size: var(--font-size-4xl); }
}

@media (min-width: 1280px) {
  .cs-auth { grid-template-columns: 1.15fr 1fr; }
}

.cs-auth__state[hidden] { display: none; }