/*
 * Miles Mosaic — auth.css
 *
 * Single canonical stylesheet for every pre-authenticated / onboarding
 * surface under /login/* and /login/onboarding-steps/*.
 *
 * Replaces:
 *   - assets/css/login-onboarding.css  (legacy, raw hex literals)
 *   - assets/css/login-register.css    (legacy, raw hex literals)
 *   - the inline <style> blocks formerly in login.php, complete-profile.php,
 *     onboarding.php, verify.php, register-verify.php, password-reset.php,
 *     social-signup-consent.php, confirm-account-link.php
 *
 * Design language: post-login product register (DESIGN.md). The auth flow
 * is a transitional product moment, not a marketing surface — it inherits
 * the dashboard's visual vocabulary so the user sees one continuous brand
 * from /login → /dashboard. Mirrors the `.mm-auth-shell` chrome described
 * in the Login + Onboarding shape brief (2026-05-12).
 *
 * Tokens: every value resolves through `--mm-*` from
 * lib/mm-design-system.css. No raw hex literals. No `--color-*` legacy.
 * No `#FF6F00` / `#003153` legacy brand drift.
 */

/* ============================================================
   Page chrome — .mm-auth-shell body class
   ============================================================ */

body.mm-auth-shell {
  margin: 0;
  background: var(--mm-bg-page);
  color: var(--mm-fg);
  font-family: var(--mm-font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mm-auth-chrome {
  background: var(--mm-bg-surface);
  border-bottom: 1px solid var(--mm-border);
  padding: var(--mm-space-5) var(--mm-space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-auth-chrome__logo {
  display: inline-flex;
  align-items: center;
  height: 28px;
}
.mm-auth-chrome__logo img {
  height: 28px;
  width: auto;
  display: block;
}

.mm-auth-main {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--mm-space-12) var(--mm-space-6);
}

.mm-auth-content {
  width: 100%;
  max-width: 520px;
}

/* Wide-content variant for the loyalty-add surface (welcome.php). */
.mm-auth-content--wide {
  max-width: 1080px;
}

/* Mid-width variant for the history step. */
.mm-auth-content--medium {
  max-width: 720px;
}

.mm-auth-footer {
  padding: var(--mm-space-6);
  text-align: center;
  color: var(--mm-fg-subtle);
  font-size: 12px;
}
.mm-auth-footer a {
  color: var(--mm-fg-muted);
  text-decoration: none;
}
.mm-auth-footer a:hover { text-decoration: underline; }

/* ============================================================
   Signup progress rail — single source of truth
   Replaces the triplicated `.signup-steps` in
   login-onboarding.css, login-register.css, complete-profile.php.
   ============================================================ */

.mm-signup-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mm-space-2);
  margin: 0 auto var(--mm-space-6);
  max-width: 420px;
}
.mm-signup-steps__step {
  flex: 1;
  text-align: center;
  position: relative;
}
.mm-signup-steps__step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 50%;
  width: 100%;
  border-top: 1px solid var(--mm-border);
  z-index: 0;
}
.mm-signup-steps__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--mm-border-strong);
  background: var(--mm-bg-surface);
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 1;
}
.mm-signup-steps__label {
  display: block;
  margin-top: var(--mm-space-2);
  font: 500 12px/1.3 var(--mm-font-body);
  color: var(--mm-fg-subtle);
}
.mm-signup-steps__step.is-completed .mm-signup-steps__dot {
  background: var(--mm-border-strong);
  border-color: var(--mm-border-strong);
}
.mm-signup-steps__step.is-active .mm-signup-steps__dot {
  background: var(--mm-accent);
  border-color: var(--mm-accent);
}
.mm-signup-steps__step.is-active .mm-signup-steps__label {
  color: var(--mm-fg-strong);
  font-weight: 700;
}

/* ============================================================
   Auth card — the focal surface of each step
   ============================================================ */

.mm-auth-card {
  background: var(--mm-bg-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-xl);
  box-shadow: var(--mm-shadow-card);
  padding: var(--mm-space-8);
}

.mm-auth-card__title {
  margin: 0 0 var(--mm-space-2);
  font: 700 22px/1.2 var(--mm-font-heading);
  letter-spacing: -0.005em;
  color: var(--mm-navy);
  text-align: center;
}
.mm-auth-card__sub {
  margin: 0 0 var(--mm-space-5);
  color: var(--mm-fg-muted);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

/* Banner inside the card — used for global error, info, success, pending. */
.mm-auth-banner {
  margin: 0 0 var(--mm-space-4);
  padding: var(--mm-space-3) var(--mm-space-4);
  border-radius: var(--mm-radius-card);
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
}
.mm-auth-banner--error {
  border-color: var(--mm-danger-bg);
  background: var(--mm-danger-bg);
  color: var(--mm-danger);
}
.mm-auth-banner--warn {
  border-color: var(--mm-warning-bg);
  background: var(--mm-warning-bg);
  color: var(--mm-warning);
}
.mm-auth-banner--success {
  border-color: var(--mm-success-bg);
  background: var(--mm-success-bg);
  color: var(--mm-success);
}
.mm-auth-banner--info {
  border-color: var(--mm-border);
  background: var(--mm-bg-alt);
  color: var(--mm-fg);
}
.mm-auth-banner ul { margin: 0; padding-left: 18px; }
.mm-auth-banner a { color: inherit; text-decoration: underline; }

/* ============================================================
   Auth form fields — single primitive
   Replaces .field-row / .cp-field / .text-input / .cp-input /
   .country-search-input / .search-input / etc.
   ============================================================ */

.mm-auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-1);
  margin-bottom: var(--mm-space-4);
}
.mm-auth-field__label {
  font: 500 13px/1.4 var(--mm-font-body);
  color: var(--mm-fg-muted);
}
.mm-auth-field__label--required::after {
  content: ' *';
  color: var(--mm-danger);
}
.mm-auth-field__optional {
  color: var(--mm-fg-subtle);
  font-weight: 400;
}

.mm-auth-input,
.mm-auth-select {
  width: 100%;
  padding: 12px 14px;
  font: 400 15px/1.4 var(--mm-font-body);
  color: var(--mm-fg-strong);
  background: var(--mm-bg-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-input);
  box-sizing: border-box;
  transition:
    border-color var(--mm-dur) var(--mm-ease),
    box-shadow var(--mm-dur) var(--mm-ease);
}
.mm-auth-input:focus,
.mm-auth-select:focus {
  border-color: var(--mm-navy);
  box-shadow: 0 0 0 3px rgba(26, 43, 76, 0.10);
  /* Critically: NO `outline: none`. The global :focus-visible ring
     (lib/app.css) layers on top of this halo for keyboard users. */
}
.mm-auth-input.is-invalid,
.mm-auth-select.is-invalid {
  border-color: var(--mm-danger);
}
.mm-auth-input::placeholder { color: var(--mm-fg-subtle); }

.mm-auth-field__hint {
  font: 400 12px/1.4 var(--mm-font-body);
  color: var(--mm-fg-subtle);
}
.mm-auth-field__error {
  font: 500 12px/1.4 var(--mm-font-body);
  color: var(--mm-danger);
}

/* Password input with show/hide toggle. */
.mm-auth-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.mm-auth-pw-wrap .mm-auth-input { padding-right: 44px; }
.mm-auth-pw-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mm-fg-subtle);
  padding: 4px;
  display: flex;
  align-items: center;
}
.mm-auth-pw-toggle:hover { color: var(--mm-fg-muted); }

/* Password strength meter. */
.mm-auth-pw-strength-bar {
  height: 4px;
  background: var(--mm-border-subtle);
  border-radius: 2px;
  margin-top: var(--mm-space-1);
  overflow: hidden;
}
.mm-auth-pw-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition:
    width var(--mm-dur) var(--mm-ease),
    background-color var(--mm-dur) var(--mm-ease);
}
.mm-auth-pw-strength-label {
  font: 500 12px/1.4 var(--mm-font-body);
  margin-top: var(--mm-space-1);
  min-height: 1em;
}

/* Verification code field — the over-invested moment of verify.php
   and register-verify.php. JetBrains Mono, large, tabular-nums. */
.mm-auth-code-input {
  display: block;
  margin: 0 auto;
  width: 260px;
  max-width: 100%;
  padding: 14px;
  font: 600 28px/1 var(--mm-font-mono);
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--mm-fg-strong);
  background: var(--mm-bg-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-card);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  transition:
    border-color var(--mm-dur) var(--mm-ease),
    box-shadow var(--mm-dur) var(--mm-ease);
}
.mm-auth-code-input:focus {
  border-color: var(--mm-navy);
  box-shadow: 0 0 0 3px rgba(26, 43, 76, 0.10);
}

/* ============================================================
   Remember-me, policy checkboxes
   ============================================================ */

.mm-auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--mm-space-2);
  margin: 0 0 var(--mm-space-4);
  font: 400 14px/1.5 var(--mm-font-body);
  color: var(--mm-fg);
}
.mm-auth-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--mm-accent);
  cursor: pointer;
}
.mm-auth-checkbox a {
  color: var(--mm-accent);
  text-decoration: none;
}
.mm-auth-checkbox a:hover { text-decoration: underline; }

/* ============================================================
   Action rows — primary + ghost cancel pair
   ============================================================ */

.mm-auth-actions {
  display: flex;
  gap: var(--mm-space-2);
  margin-top: var(--mm-space-5);
}
.mm-auth-actions > .mm-btn { flex: 1; }
.mm-auth-actions--end {
  justify-content: flex-end;
}
.mm-auth-actions--end > .mm-btn { flex: 0 1 auto; min-width: 140px; }

.mm-auth-link-row {
  text-align: center;
  margin-top: var(--mm-space-5);
  font-size: 14px;
  color: var(--mm-fg-muted);
}
.mm-auth-link-row a {
  color: var(--mm-navy);
  font-weight: 600;
  text-decoration: none;
}
.mm-auth-link-row a:hover { text-decoration: underline; }

.mm-auth-inline-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--mm-accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.mm-auth-inline-link:hover { color: var(--mm-accent-600); }

.mm-auth-forgot {
  text-align: right;
  margin-top: var(--mm-space-1);
  font-size: 12px;
}
.mm-auth-forgot a {
  color: var(--mm-fg-muted);
  text-decoration: none;
}
.mm-auth-forgot a:hover {
  color: var(--mm-navy);
  text-decoration: underline;
}

/* ============================================================
   "Or" separator
   ============================================================ */

.mm-auth-sep {
  display: flex;
  align-items: center;
  gap: var(--mm-space-3);
  margin: var(--mm-space-5) 0;
}
.mm-auth-sep__line {
  flex: 1;
  height: 1px;
  background: var(--mm-border);
}
.mm-auth-sep__txt {
  color: var(--mm-fg-subtle);
  font-size: 13px;
  white-space: nowrap;
}

/* ============================================================
   Social-login buttons
   ============================================================ */

.mm-social-row {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2);
  align-items: center;
}
.mm-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-space-2);
  width: 100%;
  max-width: 360px;
  min-height: 46px;
  padding: 11px 16px;
  font: 600 14px/1 var(--mm-font-body);
  color: var(--mm-fg-strong);
  background: var(--mm-bg-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-card);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--mm-dur) var(--mm-ease),
    box-shadow var(--mm-dur) var(--mm-ease),
    transform var(--mm-dur-fast) var(--mm-ease);
}
.mm-social-btn:hover {
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow-card);
  transform: translateY(-1px);
}
.mm-social-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-social-btn__ms-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, 8px);
  grid-template-rows: repeat(2, 8px);
  gap: 2px;
}
.mm-social-btn__ms-grid span { width: 8px; height: 8px; display: block; }
.mm-ms-red    { background: #F25022; }
.mm-ms-green  { background: #7FBA00; }
.mm-ms-blue   { background: #00A4EF; }
.mm-ms-yellow { background: #FFB900; }

/* ============================================================
   Connected accounts (login.php for logged-in users)
   ============================================================ */

.mm-connected-accounts {
  margin: var(--mm-space-2) 0 var(--mm-space-5);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-4);
  background: var(--mm-bg-alt);
}
.mm-connected-accounts__title {
  margin: 0 0 var(--mm-space-3);
  font: 600 15px/1.3 var(--mm-font-heading);
  color: var(--mm-fg-muted);
}
.mm-connected-accounts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-2);
  padding: var(--mm-space-2) 0;
  border-top: 1px solid var(--mm-border);
}
.mm-connected-accounts__row:first-of-type { border-top: none; }
.mm-connected-accounts__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mm-connected-accounts__name {
  font: 600 14px/1.4 var(--mm-font-body);
  color: var(--mm-fg-strong);
}
.mm-connected-accounts__status {
  font-size: 12px;
  color: var(--mm-fg-subtle);
}
.mm-connected-accounts__status.is-connected { color: var(--mm-success); }
.mm-connected-accounts__action {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-card);
  background: var(--mm-bg-surface);
  color: var(--mm-fg-strong);
  font: 600 13px/1.4 var(--mm-font-body);
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-connected-accounts__action.is-disconnect {
  color: var(--mm-danger);
  border-color: var(--mm-danger-bg);
}
.mm-connected-accounts__note {
  margin: var(--mm-space-3) 0 0;
  color: var(--mm-fg-subtle);
  font-size: 12px;
}

/* ============================================================
   Welcome (loyalty-add) — programme grid
   ============================================================ */

.mm-prog-search {
  margin: var(--mm-space-5) 0 var(--mm-space-4);
}
.mm-prog-search__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-card);
  background: var(--mm-bg-surface);
  color: var(--mm-fg-strong);
  box-sizing: border-box;
}
.mm-prog-search__input:focus {
  border-color: var(--mm-navy);
  box-shadow: 0 0 0 3px rgba(26, 43, 76, 0.10);
}

.mm-prog-tabs {
  display: flex;
  gap: var(--mm-space-1);
  margin: var(--mm-space-4) 0;
  border-bottom: 2px solid var(--mm-border);
}
.mm-prog-tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font: 600 14px/1.4 var(--mm-font-body);
  color: var(--mm-fg-muted);
  cursor: pointer;
  transition:
    color var(--mm-dur) var(--mm-ease),
    border-color var(--mm-dur) var(--mm-ease);
}
.mm-prog-tab.is-active {
  color: var(--mm-fg-strong);
  border-bottom-color: var(--mm-accent);
}
.mm-prog-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-bg-alt);
  color: var(--mm-fg-muted);
  font: 600 11px/1 var(--mm-font-body);
  padding: 2px 7px;
  border-radius: var(--mm-radius-full);
  margin-left: var(--mm-space-1);
}
.mm-prog-tab.is-active .mm-prog-tab__count {
  background: var(--mm-accent-50);
  color: var(--mm-accent-700);
}

.mm-prog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mm-space-3);
  margin: var(--mm-space-4) 0;
}
@media (min-width: 480px) {
  .mm-prog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .mm-prog-grid { grid-template-columns: repeat(4, 1fr); }
}

.mm-prog-tile {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-4) var(--mm-space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mm-space-2);
  background: var(--mm-bg-surface);
  transition:
    box-shadow var(--mm-dur) var(--mm-ease),
    border-color var(--mm-dur) var(--mm-ease),
    transform var(--mm-dur-fast) var(--mm-ease);
}
.mm-prog-tile:hover {
  box-shadow: var(--mm-shadow-md);
  transform: translateY(-1px);
}
.mm-prog-tile.is-added {
  border-color: var(--mm-accent-tint);
  background: var(--mm-accent-50);
}
.mm-prog-tile.is-adding {
  opacity: 0.7;
  pointer-events: none;
}

.mm-prog-tile__logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: var(--mm-radius-card);
}
.mm-prog-tile__logo-placeholder {
  width: 52px;
  height: 52px;
  background: var(--mm-bg-alt);
  border-radius: var(--mm-radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 18px/1 var(--mm-font-heading);
  color: var(--mm-fg-subtle);
}
.mm-prog-tile__name {
  font: 600 13px/1.3 var(--mm-font-body);
  color: var(--mm-fg-strong);
}
.mm-prog-tile__chain {
  font: 400 12px/1.3 var(--mm-font-body);
  color: var(--mm-fg-subtle);
}
.mm-prog-tile__add {
  margin-top: var(--mm-space-1);
  padding: 6px 14px;
  background: var(--mm-accent);
  color: #fff;
  border: none;
  border-radius: var(--mm-radius-full);
  font: 600 13px/1 var(--mm-font-body);
  cursor: pointer;
  width: 100%;
  transition: background var(--mm-dur) var(--mm-ease);
}
.mm-prog-tile__add:hover { background: var(--mm-accent-600); }
.mm-prog-tile__added {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--mm-success);
  font: 600 13px/1 var(--mm-font-body);
  padding: 6px 0;
}
.mm-prog-tile.is-added .mm-prog-tile__added { display: flex; }
.mm-prog-tile.is-added .mm-prog-tile__add { display: none; }

.mm-prog-form {
  display: none;
  flex-direction: column;
  gap: var(--mm-space-1);
  width: 100%;
  margin-top: var(--mm-space-1);
}
.mm-prog-form.is-open { display: flex; }
.mm-prog-form.is-open + .mm-prog-tile__add { display: none; }
.mm-prog-form input,
.mm-prog-form select {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-card);
  padding: 7px 9px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  background: var(--mm-bg-surface);
  color: var(--mm-fg-strong);
}
.mm-prog-form input:focus,
.mm-prog-form select:focus {
  border-color: var(--mm-accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}
.mm-prog-form__btns {
  display: flex;
  gap: var(--mm-space-1);
  align-items: stretch;
}
.mm-prog-form__save {
  flex: 1.4;
  padding: 6px;
  background: var(--mm-accent);
  color: #fff;
  border: none;
  border-radius: var(--mm-radius-card);
  font: 600 13px/1 var(--mm-font-body);
  cursor: pointer;
  min-height: 32px;
}
.mm-prog-form__save:hover { background: var(--mm-accent-600); }
.mm-prog-form__cancel {
  flex: 1;
  padding: 6px 10px;
  background: var(--mm-bg-surface);
  color: var(--mm-navy);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-card);
  font: 600 13px/1 var(--mm-font-body);
  min-height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mm-welcome-empty {
  display: none;
  text-align: center;
  color: var(--mm-fg-subtle);
  padding: var(--mm-space-8) 0;
}

.mm-welcome-progress {
  background: var(--mm-success-bg);
  border: 1px solid var(--mm-success-bg);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-4);
  text-align: center;
  margin-top: var(--mm-space-4);
}
.mm-welcome-progress__count {
  font: 600 14px/1.4 var(--mm-font-body);
  color: var(--mm-success);
  margin-bottom: var(--mm-space-1);
}
.mm-welcome-progress__hint {
  font-size: 13px;
  color: var(--mm-fg-muted);
  margin: 0;
}

.mm-welcome-finish {
  margin-top: var(--mm-space-5);
  text-align: center;
}
.mm-welcome-skip {
  margin-top: var(--mm-space-5);
  text-align: center;
}

/* Demo link — the calmer replacement for the orange-stripe gradient banner. */
.mm-welcome-demo-link {
  margin: var(--mm-space-5) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--mm-fg-muted);
}
.mm-welcome-demo-link a,
.mm-welcome-demo-link button {
  background: none;
  border: none;
  padding: 0;
  color: var(--mm-navy);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.mm-welcome-demo-link a:hover,
.mm-welcome-demo-link button:hover {
  color: var(--mm-accent-600);
}

/* ============================================================
   Onboarding step content (used by onboarding-steps/*.php)
   ============================================================ */

.mm-onb-step h2 {
  margin: 0 0 var(--mm-space-3);
  font: 700 24px/1.3 var(--mm-font-heading);
  letter-spacing: -0.005em;
  color: var(--mm-fg-strong);
}
.mm-onb-step p {
  margin: 0 0 var(--mm-space-5);
  color: var(--mm-fg-muted);
  font-size: 15px;
  line-height: 1.6;
}

.mm-onb-progress {
  margin: 0 0 var(--mm-space-6);
}
.mm-onb-progress__count {
  font: 500 12px/1.3 var(--mm-font-body);
  color: var(--mm-fg-muted);
  margin: 0 0 var(--mm-space-2);
}
.mm-onb-progress__bar {
  height: 4px;
  background: var(--mm-border);
  border-radius: var(--mm-radius-full);
  overflow: hidden;
}
.mm-onb-progress__fill {
  height: 100%;
  background: var(--mm-accent);
  border-radius: var(--mm-radius-full);
  transition: width var(--mm-dur-slow, 320ms) var(--mm-ease);
}

.mm-onb-footer {
  margin-top: var(--mm-space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mm-space-3);
}
.mm-onb-back,
.mm-onb-skip {
  font: 500 14px/1.4 var(--mm-font-body);
  color: var(--mm-fg-muted);
  text-decoration: none;
}
.mm-onb-back:hover,
.mm-onb-skip:hover { color: var(--mm-navy); }
.mm-onb-skip { margin-left: auto; }

/* History step — primary CTA + alternates */
.mm-onb-primary-cta {
  display: block;
  margin-top: var(--mm-space-5);
  text-align: center;
}
.mm-onb-alternates {
  margin: var(--mm-space-5) 0 0;
  padding: var(--mm-space-3) 0 0;
  border-top: 1px solid var(--mm-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2);
  font: 400 14px/1.5 var(--mm-font-body);
  color: var(--mm-fg-muted);
  text-align: center;
}
.mm-onb-alternates a,
.mm-onb-alternates button {
  background: none;
  border: none;
  padding: 0;
  color: var(--mm-navy);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.mm-onb-alternates a:hover,
.mm-onb-alternates button:hover { color: var(--mm-accent-600); }

/* Done step */
.mm-onb-done {
  text-align: center;
  padding: var(--mm-space-10) 0;
}
.mm-onb-done__icon {
  font-size: 48px;
  color: var(--mm-success);
  margin-bottom: var(--mm-space-4);
}
.mm-onb-done h2 {
  margin: 0 0 var(--mm-space-3);
}
.mm-onb-done p {
  margin-bottom: var(--mm-space-6);
}

/* ============================================================
   confirm-account-link.php — method choice card
   ============================================================ */

.mm-link-card {
  background: var(--mm-bg-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-xl);
  box-shadow: var(--mm-shadow-card);
  padding: var(--mm-space-8);
}
.mm-link-kicker {
  margin: 0 0 var(--mm-space-3);
  font: 600 11px/1.3 var(--mm-font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mm-fg-subtle);
}
.mm-link-title {
  margin: 0 0 var(--mm-space-3);
  font: 700 28px/1.15 var(--mm-font-heading);
  letter-spacing: -0.01em;
  color: var(--mm-navy);
}
.mm-link-body {
  margin: 0 0 var(--mm-space-4);
  color: var(--mm-fg-muted);
  line-height: 1.65;
  font-size: 15px;
}
.mm-link-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mm-space-3);
  margin: 0 0 var(--mm-space-6);
  padding: var(--mm-space-4);
  border-radius: var(--mm-radius-lg);
  background: var(--mm-bg-alt);
  border: 1px solid var(--mm-border);
}
.mm-link-summary__label {
  display: block;
  margin-bottom: var(--mm-space-1);
  font: 600 11px/1.3 var(--mm-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-fg-subtle);
}
.mm-link-summary__value {
  font: 600 14px/1.4 var(--mm-font-body);
  color: var(--mm-fg-strong);
  word-break: break-word;
}
.mm-link-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mm-space-4);
  margin-top: var(--mm-space-6);
}
.mm-link-method {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-5);
  background: var(--mm-bg-surface);
}
.mm-link-method h2 {
  margin: 0 0 var(--mm-space-2);
  font: 700 18px/1.3 var(--mm-font-heading);
  color: var(--mm-navy);
}
.mm-link-method p {
  margin: 0 0 var(--mm-space-4);
  color: var(--mm-fg-muted);
  line-height: 1.6;
  font-size: 14px;
}
.mm-link-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-3);
  margin-top: var(--mm-space-6);
  padding-top: var(--mm-space-5);
  border-top: 1px solid var(--mm-border);
}
.mm-link-note {
  margin-top: var(--mm-space-4);
  color: var(--mm-fg-subtle);
  font-size: 13px;
  line-height: 1.55;
}

/* ============================================================
   Country search dropdown (complete-profile.php)
   ============================================================ */

.mm-country-search {
  position: relative;
}
.mm-country-search__list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mm-bg-surface);
  border: 1px solid var(--mm-border);
  border-top: none;
  border-radius: 0 0 var(--mm-radius-card) var(--mm-radius-card);
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;
  box-shadow: var(--mm-shadow-md);
}
.mm-country-search__list li {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--mm-fg-strong);
}
.mm-country-search__list li:hover,
.mm-country-search__list li.is-focused {
  background: var(--mm-bg-alt);
  color: var(--mm-navy);
}
.mm-country-search__list li.no-results {
  color: var(--mm-fg-subtle);
  cursor: default;
  font-style: italic;
}

/* ============================================================
   Auth-doc page hero — tighter than the dashboard variant
   The shared .dash-page-header is sized for full-width product
   surfaces; on the narrow 560px auth column it reads as too tall.
   Scope overrides to .mm-auth-doc only.
   ============================================================ */

.mm-auth-doc .dash-page-header {
  padding: 16px 24px 14px;
  margin-bottom: 16px;
}
.mm-auth-doc .dash-page-header__eyebrow { margin: 0 0 4px; }
.mm-auth-doc .dash-page-header__title { font-size: 20px; margin: 0 0 2px; }
.mm-auth-doc .dash-page-header__sub { font-size: 12px; }

/* ============================================================
   Mobile breakpoints
   ============================================================ */

@media (max-width: 768px) {
  .mm-auth-main {
    padding: var(--mm-space-6) var(--mm-space-4);
  }
  .mm-auth-card { padding: var(--mm-space-6) var(--mm-space-5); }
}

@media (max-width: 480px) {
  .mm-auth-chrome { padding: var(--mm-space-4); }
  .mm-auth-main {
    padding: var(--mm-space-4);
    align-items: stretch;
  }
  .mm-auth-content { max-width: none; }
  .mm-auth-card {
    padding: var(--mm-space-5) var(--mm-space-4);
    border-radius: var(--mm-radius-lg);
  }
  .mm-signup-steps { gap: var(--mm-space-1); }
  .mm-signup-steps__label { font-size: 11px; line-height: 1.2; }
  .mm-auth-input,
  .mm-auth-select {
    /* Keep font-size 16px+ to suppress iOS Safari auto-zoom on focus. */
    font-size: 16px;
  }
  .mm-auth-actions { flex-direction: column-reverse; }
  .mm-auth-actions > .mm-btn { width: 100%; }
  .mm-social-btn { max-width: 100%; }
}

/* ============================================================
   Welcome bridge moment — audit-r3 P0-3-14 close
   The signup-success → product handoff. Cormorant italic 52px
   navy band; the screenshot moment.
   ============================================================ */
.mm-bridge {
  margin: 0 0 36px;
  padding: clamp(64px, 9vw, 96px) clamp(20px, 4vw, 40px) clamp(48px, 7vw, 64px);
  background: linear-gradient(180deg, var(--mm-navy-deep, #050C1C) 0%, var(--mm-navy, #0E1F3B) 100%);
  color: #FFFFFF;
  border-radius: var(--mm-radius-xl, 18px);
  text-align: center;
}
.mm-bridge__inner { max-width: 720px; margin: 0 auto; }
.mm-bridge__eyebrow {
  display: inline-block;
  font-family: var(--mm-font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 20px;
}
.mm-bridge__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(40px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0 0 18px;
  text-wrap: balance;
}
.mm-bridge__title i {
  font-style: italic;
  color: var(--mm-orange-soft, #FFAA66);
}
.mm-bridge__lede {
  font-family: var(--mm-font-body, Inter, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto;
  max-width: 560px;
}
@media (max-width: 720px) {
  .mm-bridge { padding: clamp(48px, 11vw, 64px) 20px 40px; border-radius: var(--mm-radius-lg, 14px); }
  .mm-bridge__title { font-size: clamp(32px, 8vw, 40px); }
  .mm-bridge__lede { font-size: 16px; }
}