/* Phase 14 — Onboarding & auth utility classes.
   Replaces inline styles from persona.html, plans.html, profile.html,
   success.html, mfa/setup.html, mfa/verify.html. Append to public.css or
   load as a separate stylesheet — uses the --color-* token namespace so it
   stays in lockstep with tokens.css. */

/* ---------- Auth-card width / alignment variants ---------- */
.auth-card--wide {
  max-width: 540px;
}
.auth-card--center {
  max-width: 480px;
  text-align: center;
}
/* When the form itself IS the centered card (mfa branches) */
.auth-card--center-form {
  text-align: center;
}

/* ---------- Auth-card sub: tight vs default + bold inline highlight ---------- */
.auth-card__sub--tight { margin-bottom: 0; }
.auth-card__sub-strong { color: var(--color-text); font-weight: 600; }

/* ---------- Auth-error spacing variants ---------- */
.auth-error--spaced { margin-top: 16px; text-align: left; }

/* ---------- Auth-form-note alignment / spacing variants ---------- */
.auth-form-note--center { text-align: center; }
.auth-form-note--left { text-align: left; }
.auth-form-note--mt-0 { margin-top: 0; margin-bottom: 14px; }
.auth-form-note--mt-sm { margin-top: 10px; }

/* ---------- Block buttons (full-width primary CTA in auth cards) ---------- */
.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}
.btn--mt-lg { margin-top: 24px; }

/* ---------- Persona option cards (onboarding/persona.html) ---------- */
.persona-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 8px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, var(--radius, 4px));
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color 120ms ease, background 120ms ease;
}

.persona-option:hover {
  border-color: var(--color-text-muted);
}

.persona-option:has(input:checked) {
  border-color: var(--color-navy, var(--color-text));
  background: var(--color-bg);
}

.persona-option input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-navy, var(--color-text));
}

.persona-option__body { flex: 1; }

.persona-option__label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 14px;
}

.persona-option__tagline {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* ---------- Plan option cards (onboarding/plans.html) ---------- */
.plan-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  margin: 8px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, var(--radius, 4px));
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color 120ms ease;
}

.plan-option--selected,
.plan-option:has(input:checked) {
  border-color: var(--color-navy, var(--color-text));
  border-width: 2px;
  padding: 15px 17px; /* compensate for thicker border */
}

.plan-option input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-navy, var(--color-text));
}

.plan-option__body { flex: 1; }

.plan-option__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.plan-option__name {
  font-weight: 700;
  color: var(--color-text);
  font-size: 15px;
}

.plan-option__price {
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 600;
  color: var(--color-text);
  font-size: 18px;
}

.plan-option__features {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ---------- Profile summary (onboarding/profile.html) ---------- */
.profile-summary {
  margin: 20px 0 0;
  padding: 16px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider, var(--color-border));
  border-radius: var(--radius, 4px);
}

.profile-summary__row {
  margin: 0 0 12px;
}
.profile-summary__row:last-child { margin-bottom: 0; }

.profile-summary__key {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 0;
}

.profile-summary__val {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin: 2px 0 0;
}

/* ---------- Success glyph (onboarding/success.html) ---------- */
.success-glyph {
  font-size: 2.5rem;
  margin-bottom: 12px;
  color: var(--color-positive, var(--color-text));
  line-height: 1;
}