/*
 * The signed-out auth family: /signup/, /signup/check-email/, /password-reset/,
 * /password-reset/confirm/, /password-reset/card/, /learn/login/, /onboarding/
 * and the /creator/verify/ gate. Loaded by those pages only (design QA r2/r3).
 *
 * One card, one column width, one CTA height, so the four doors read as one
 * product rather than four. Colours are --color-* tokens, never Bootstrap custom properties.
 */

/* ── Shell: the card sits centred in the space between header and footer ── */
.auth-shell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}
@media (min-width: 576px) {
  .auth-shell { padding-block: var(--space-8); }
}
.auth-shell--centred {
  /* A single-task page (enter a code, ask for a reset) is short; centring it
     stops it reading as a page that stopped rendering half way down. */
  align-items: center;
  min-height: calc(100dvh - 240px);
}

/* ── The card ─────────────────────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
  padding: var(--space-6) var(--space-5);
}
@media (min-width: 576px) {
  .auth-card { padding: var(--space-8); }
}
.auth-card .form-control,
.auth-card .form-select { width: 100%; }
/* `.auth-form` is the same form spec for an auth form that does NOT sit in a
   card: /onboarding/, /creator/verify/ (design QA r3). Every rule below that is
   about a FIELD or a BUTTON is written for both, so the two cannot drift. */

/* …except inside an input-group, where Bootstrap's flex sizing must win or the
   addon ("Send code") wraps under its field (r3 regression R1). */
:is(.auth-card, .auth-form) .input-group > .form-control,
:is(.auth-card, .auth-form) .input-group > .form-select { width: 1%; flex: 1 1 auto; min-width: 0; }
:is(.auth-card, .auth-form) .input-group > .btn { min-height: 48px; }
:is(.auth-card, .auth-form) .input-group > .form-control { min-height: 48px; }
:is(.auth-card, .auth-form) .input-group > .btn-outline-secondary {
  /* A button, not a unit label fused to the field: its own primary-ink edge on white (r4). */
  border-color: var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 600;
}
:is(.auth-card, .auth-form) .input-group > .btn-outline-secondary:hover,
:is(.auth-card, .auth-form) .input-group > .btn-outline-secondary:focus-visible {
  background: var(--color-surface-sunken);
  color: var(--color-primary-hover);
}
/* A resting field border that clears 3:1 against the surface (r3 G6/CCO#13). */
:is(.auth-card, .auth-form) .form-control { border-color: var(--color-border-input); }
/* ...which out-ranked tokens.css's focus border, so a focused field showed only a faint halo. */
:is(.auth-card, .auth-form) .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(123, 95, 95, .35);
}

/* One label weight on every auth form, the shared OTP control's included. */
:is(.auth-card, .auth-form) .form-label,
:is(.auth-card, .auth-form) .int-otp-label { font-weight: 600; }

/* The one-time code is the step's primary control: field height, larger digits.
   Inside an input-group the shared 12ch cap would leave the addon wider than the
   field, so there it takes the row like any other grouped input. */
:is(.auth-card, .auth-form) .int-otp-code {
  min-height: 48px;
  font-size: 1.375rem;
  max-width: 14ch;
}
:is(.auth-card, .auth-form) .input-group > .int-otp-code { max-width: none; }
/* A waiting Resend is information ("Resend code (59)"), so it keeps 4.5:1 ink;
   only the pointer says it is not live yet. */
:is(.auth-card, .auth-form) .int-otp-resend[disabled] {
  opacity: 1;
  color: var(--color-muted-fg);
}
/* The dev/qa test-number note: Inter tabular digits, never a monospace face. */
:is(.auth-card, .auth-form) [data-phone-test-hint] code {
  font-family: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── Brand-tinted page icon ───────────────────────────────────────────── */
.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-primary);
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--space-4);
}
.auth-icon .bi { font-size: 36px; }

/* ── One CTA height across every auth card ────────────────────────────── */
:is(.auth-card, .auth-form) .btn-auth-cta {
  min-height: 48px;
  font-size: var(--font-size-base);
  font-weight: 600;
}

/* ── Divider with hairlines ───────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-muted-fg);
  font-size: var(--font-size-sm);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

/* ── Footer links of a card, under a hairline ─────────────────────────── */
.auth-card-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
}

/* ── Brand note: the alpha expectation, given a form of its own ───────── */
.auth-note {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--color-fg);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-5);
}

/* ── Consent / checkbox rows: the label is the hit area ───────────────── */
:is(.auth-card, .auth-form) .form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-left: 0;
  font-size: .875rem;
  color: var(--color-muted-fg);
}
/* One 20px box at every width, aligned to the FIRST line of a multi-line label. */
:is(.auth-card, .auth-form) .form-check .form-check-input {
  float: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: .05rem 0 0;
  flex: 0 0 auto;
}
:is(.auth-card, .auth-form) .form-check .form-check-label a { white-space: nowrap; }
/* A row that also holds its own .invalid-feedback: the message takes a line of
   its own under the label rather than squeezing in beside it. */
:is(.auth-card, .auth-form) .form-check { flex-wrap: wrap; }
:is(.auth-card, .auth-form) .form-check .form-check-label { flex: 1 1 0; min-width: 0; }
:is(.auth-card, .auth-form) .form-check .invalid-feedback { flex-basis: 100%; }
@media (max-width: 575.98px) {
  /* 44px through the row's own height, never by centring the box against the label. */
  :is(.auth-card, .auth-form) .form-check { min-height: 44px; padding-block: var(--space-1); }
  :is(.auth-card, .auth-form) .btn { min-height: 44px; }
  :is(.auth-card, .auth-form) .auth-text-link { display: inline-block; padding-block: var(--space-3); }
}

/* ── Escape links under a step (Use a backup code / Use a different account):
   two DIFFERENT actions, so each is its own 44px row, never two stacked lines. */
.auth-step-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
}
.auth-step-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.auth-step-links .auth-step-link-secondary { color: var(--color-muted-fg); }
.auth-step-links .auth-step-link-primary { font-weight: 500; }

/* ── Google button: neutral border, the "G" mark, the CTA height ─────── */
:is(.auth-card, .auth-form) .btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong, var(--color-border));
  font-weight: 500;
}
:is(.auth-card, .auth-form) .btn-google:hover,
:is(.auth-card, .auth-form) .btn-google:focus-visible {
  background: var(--color-surface-sunken);
  color: var(--color-fg);
}
:is(.auth-card, .auth-form) .btn-google .google-g { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── Label row with a right-aligned link (Forgot password?) ───────────── */
.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

/* ── Optional fields read as optional ─────────────────────────────────── */
.auth-optional { color: var(--color-muted-fg); font-weight: 400; }

/* ── A status icon (a failure page): amber, from the icon set, never an emoji ── */
.auth-icon--warning {
  background: var(--color-warning-surface);
  color: var(--color-warning);
}