/* auth — page styles. Tokens and shared components only (see docs/DESIGN.md). */
@layer pages {
  /* ── The pages the email links open (confirm, reset password): the logo and one card, centred ── */
  .auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6);
    padding: var(--sp-10) var(--page-pad); animation: page-in var(--t-slow) var(--ease); }
  .auth-hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
  .auth-hero .brand-mark { height: 96px; margin-bottom: var(--sp-2); }
  .auth-hero h1 { display: flex; margin-bottom: var(--sp-2); }
  .auth-hero h1 .brand-wordmark { height: 34px; }

  .auth-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--sp-4); box-shadow: var(--shadow-3), var(--highlight); }
  /* Opened from an invite link: who invited you, above the sign-up form. */
  .auth-invited { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
    background: var(--brand-soft); border: 1px solid var(--brand-border); }
  .auth-invited .flag { width: 36px; height: 24px; flex: none; }
  .auth-invited div { display: flex; flex-direction: column; min-width: 0; }
  .auth-invited small { color: var(--text-2); font-size: var(--fs-sm); }
  .auth-intro { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
  .auth-card > .btn.block { margin-top: var(--sp-2); }

  @media (max-width: 560px) {
    .auth-wrap { justify-content: flex-start; gap: var(--sp-5); padding-top: var(--sp-8); }
    .auth-hero .brand-mark { height: 72px; }
    .auth-hero h1 .brand-wordmark { height: 26px; }
  }

  /* Email confirmation: the "check your inbox" card and the page the link opens. */
  .verify-card .empty { padding: var(--sp-6) var(--sp-2); }
  /* "Back to sign in" under a form. */
  .auth-back { text-align: center; }
  /* "Forgot password?" under the password field, at its right edge. */
  .auth-card .auth-forgot { align-self: flex-end; }
}