/*
 * Auth group (Brand Book v3): sign in, sign up, account settings, password
 * reset (email + WhatsApp OTP), the WhatsApp credentials handoff and the
 * account-resolution flow after a social login. All of them render in the
 * standalone `auth` layout (no sidebar, no page header): one quiet card,
 * max 440px, centered on the cool ground under the horizontal logo.
 * `au-` is the local prefix, built on the mw-* primitives. The shared
 * language-switcher partial keeps its `auth-lang*` classes (tests select
 * on them); they are styled here.
 */

*, *::before, *::after { box-sizing: border-box; }

/* ── Page ─────────────────────────────────────────────────────────── */
.au-body { margin: 0; padding: 0; background: var(--mc-ground); color: var(--mc-text); font-family: var(--mc-font); -webkit-font-smoothing: antialiased; }
.au { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px 28px; }
.au__inner { width: 100%; max-width: 440px; }
.au__inner--wide { max-width: 520px; }

/* ── Brand ────────────────────────────────────────────────────────── */
.au-brand { text-align: center; margin-bottom: 20px; }
.au-brand__logo { height: 28px; width: auto; display: inline-block; vertical-align: top; }
.au-brand__tagline { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-text-3); }

/* white-label: a mentoring organization's invitation */
.au-org__logo { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: inline-grid; place-items: center; margin-bottom: 10px; background: var(--au-brand, var(--mc-ink)); color: #fff; font-size: 18px; font-weight: 700; }
.au-org__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-org__name { font-size: 17px; font-weight: 700; color: var(--mc-ink); line-height: 1.2; }
.au-org__tagline { font-size: 12.5px; color: var(--mc-text-3); margin-top: 3px; }
.au-org__by { font-size: 13px; color: var(--mc-text-2); margin-top: 8px; }
.au-org__by i { font-size: 12px; color: var(--mc-text-3); margin-right: 4px; }
.au-org__by strong { color: var(--mc-ink); font-weight: 600; }
.au--org .mw-btn--primary { background: var(--au-brand, var(--mc-primary)); }
.au--org .mw-btn--primary:hover { background: var(--au-brand, var(--mc-primary)); filter: brightness(0.92); }

/* ── Language switcher (shared partial, classes kept) ─────────────── */
.au .auth-lang { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 0 0 16px; }
.au .auth-lang__icon { font-size: 11px; color: var(--mc-text-3); margin-right: 4px; }
.au .auth-lang__link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--mc-text-2); text-decoration: none; transition: background var(--mc-fast) var(--mc-ease), color var(--mc-fast) var(--mc-ease); }
.au .auth-lang__link:hover { color: var(--mc-ink); background: var(--mc-ink-soft); text-decoration: none; }
.au .auth-lang__link--current { color: var(--mc-ink); background: var(--mc-ink-soft); }

/* ── Card ─────────────────────────────────────────────────────────── */
.au-card { padding: 28px; }
.au-head { text-align: center; margin-bottom: 20px; }
.au-title { font-size: 20px; font-weight: 700; color: var(--mc-ink); line-height: 1.25; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.au-title i { font-size: 16px; color: var(--mc-text-3); margin-right: 8px; }
.au-title .fa-whatsapp { color: #25D366; }
.au-sub { font-size: 14px; color: var(--mc-text-2); line-height: 1.5; margin: 6px 0 0; }

/* callouts (flash, Devise errors) */
.au-callout__title { font-size: 14px; font-weight: 600; color: var(--mc-ink); margin: 0 0 4px; }
.au-callout__list { margin: 0; padding-left: 18px; font-size: 13.5px; }
.au-callout__list li + li { margin-top: 2px; }

/* ── Sign-in methods (Google / WhatsApp / email) ──────────────────── */
.au-methods { display: grid; gap: 10px; }
.au-methods form, .au-form-block { display: block; margin: 0; width: 100%; }
.au .mw-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.au-method .fa-whatsapp { color: #25D366; font-size: 17px; }
.au-method .fa-envelope, .au-method .fa-chevron-up { color: var(--mc-text-3); }
.au-method--disabled { opacity: 0.5; cursor: not-allowed; }
.au-method--disabled small { font-size: 11px; font-weight: 500; color: var(--mc-text-3); }

/* collapsible email form under the method buttons */
.au-collapse { display: none; }
.au-collapse.open { display: block; }
.au-methods + .au-collapse { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mc-line); }

.au-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 12.5px; font-weight: 500; color: var(--mc-text-3); }
.au-divider::before, .au-divider::after { content: ''; flex: 1; height: 1px; background: var(--mc-line); }

/* ── Forms ────────────────────────────────────────────────────────── */
.au-form { display: grid; gap: 14px; }
.au-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.au-form .mw-help { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.au-form .mw-help > i { font-size: 11px; margin-top: 3px; flex-shrink: 0; }
.au-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mc-text-2); }
.au-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--mc-primary); flex-shrink: 0; cursor: pointer; }
.au-check label { margin: 0; font-weight: 500; cursor: pointer; }
.au-actions { display: grid; gap: 10px; margin-top: 4px; }
.au-actions .mw-btn { width: 100%; }
.au .mw-select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237C8A9C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.mw-input.au-input--code { height: 52px; text-align: center; text-indent: 0.4em; font-family: var(--mc-mono); font-size: 24px; font-weight: 700; letter-spacing: 0.4em; }
.au .password-toggle { color: var(--mc-text-3); }
.au .password-toggle:hover { color: var(--mc-ink); }

/* ── Method tabs + panels (account resolution) ────────────────────── */
.au-tabs.mw-tabs { margin-bottom: 18px; }
.au-tabs .mw-tab { flex: 1; justify-content: center; }
.au-tabs .mw-tab.active { color: var(--mc-ink); border-bottom-color: var(--mc-primary); }
.au-tabs .mw-tab svg { width: 15px; height: 15px; flex-shrink: 0; }
.au-panel { display: none; }
.au-panel.active { display: block; }

/* the email the social provider returned */
.au-badge-wrap { text-align: center; margin: 4px 0 20px; }
.mw-pill.au-badge { height: auto; min-height: 28px; padding: 5px 12px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; font-size: 13px; font-weight: 500; }
.au-badge svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--mc-text-3); }

/* "can't find my account" support request */
.au-support { margin-top: 18px; }
.au-support .mw-disclosure__body p { margin: 0 0 12px; }

/* ── Secondary links ──────────────────────────────────────────────── */
.au-alt { text-align: center; margin-top: 12px; }
.au-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 10px; border-radius: var(--mc-r-control); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--mc-primary); text-decoration: none; transition: background var(--mc-fast) var(--mc-ease); }
.au-link:hover { background: var(--mc-primary-soft); color: var(--mc-primary); text-decoration: none; }
.au-link i { font-size: 12px; color: var(--mc-text-3); }
.au-link .fa-whatsapp { color: #25D366; font-size: 14px; }
.au-links { display: grid; gap: 2px; justify-items: center; margin-top: 16px; }
.au-links br { display: none; }

/* ── Footer ───────────────────────────────────────────────────────── */
.au-foot { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--mc-text-2); line-height: 1.7; }
.au-foot a { color: var(--mc-primary); font-weight: 600; text-decoration: none; padding: 8px 4px; }
.au-foot a:hover { text-decoration: underline; }
.au-foot__home { margin-top: 4px; font-size: 13px; }
.au-foot__home a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--mc-text-3); font-weight: 500; }
.au-foot__home a:hover { color: var(--mc-text-2); text-decoration: none; }
.au-foot__home i { font-size: 11px; }
.au-powered { text-align: center; margin-top: 20px; font-size: 11.5px; color: var(--mc-text-3); }

/* ── Account settings (registrations/edit) ────────────────────────── */
.au-danger .mw-card__title i { color: var(--mc-danger); }
.au-danger__text { font-size: 14px; color: var(--mc-text-2); line-height: 1.5; margin: 0 0 14px; }
.au-danger form { margin: 0; }

/* ── Layout flash (mc-toast, centered on the auth page) ───────────── */
.mc-toast.au-flash { right: auto; left: 50%; transform: translateX(-50%); width: 480px; min-width: 0; max-width: calc(100% - 32px); }

/* ── Phones ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .au { padding: 24px 12px; justify-content: flex-start; }
  .au-card { padding: 22px 18px; }
  /* 16px keeps iOS from zooming the field; the placeholder can stay smaller so long hints fit */
  .au .mw-input, .au .mw-select { font-size: 16px; height: 44px; }
  .au .mw-textarea { font-size: 16px; }
  .au .mw-input::placeholder, .au .mw-textarea::placeholder { font-size: 14px; }
  .mw-input.au-input--code { height: 52px; font-size: 24px; }
}

@media (max-width: 480px) {
  .mc-toast.au-flash { left: 8px; right: 8px; transform: none; width: auto; max-width: none; }
}