/* auth/css/otp.css — five-method sign-in UI (alternate OAuth buttons, email/phone
   section, CAPTCHA mount, two-step code entry). Shared by /auth/ and /auth/account/
   (the OTP flow renders inside a modal there). Custom-select styling hooks the
   shared dropdown.css classes; the country picker is a JS-built select initialised
   by initializeCustomSelects(). */

/* ── alternate OAuth provider buttons ── */
.auth-alt-providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
/* `hidden` must always beat these layout display values (Tailwind utilities layer). */
.auth-alt-providers.hidden,
.auth-divider.hidden,
.auth-otp.hidden { display: none !important; }

.auth-provider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container);
    color: var(--md-on-surface);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.105s ease, transform 0.07s ease;
}
.auth-provider-btn:hover { background: var(--md-surface-container-high); }
.auth-provider-btn:active { transform: scale(.98); }
.auth-provider-btn:disabled { opacity: .6; cursor: default; }
/* Real brand marks (auth/js/provider-logos.js) replaced hand-picked Material glyphs
   here on 2026-09-12 — the same 18px slot /studio/connections/ gives them, so the
   button metrics did not move. GitHub's mark draws in currentColor and inherits the
   button's text colour in both themes; Google's and Microsoft's carry brand fills. */
.auth-provider-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-provider-btn .material-symbols-outlined { font-size: 18px; color: var(--md-on-surface-variant); }
.auth-btn-busy { pointer-events: none; opacity: .6; }

/* Busy affordance for a provider redirect in flight. The button was already disabled,
   but nothing on screen said why: the label stayed put and the only change was 60%
   opacity, which reads as the normal state. An indeterminate ring after the label says a
   redirect is being negotiated, with no percentage to invent — the provider reports no
   progress (user rule 2026-09-21). */
.auth-btn-busy::after {
    content: '';
    width: 15px;
    height: 15px;
    margin-left: 2px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: auth-btn-spin .7s linear infinite;
}
@keyframes auth-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    /* Slowed rather than removed: a static ring still reads as "working", while an
       endlessly rotating one is the classic reduced-motion complaint. */
    .auth-btn-busy::after { animation-duration: 2.4s; }
}

/* ── divider between the provider buttons and the email/phone section ── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
    color: var(--md-on-surface-variant);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--md-outline-variant);
}

/* ── two-step OTP flow (built by js/otp-flow.js) ── */
.auth-otp { margin-bottom: 18px; text-align: left; }
.auth-otp-step.hidden { display: none; }

.auth-otp-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.auth-otp-tab {
    flex: 1;
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid var(--md-outline-variant);
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.105s ease;
}
.auth-otp-tab:hover { background: var(--md-surface-container-high); }
.auth-otp-tab.active {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    border-color: transparent;
}

.auth-field { margin-bottom: 14px; }
.auth-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
    margin: 0 0 6px 2px;
}
.auth-input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: var(--md-shape-md);
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container);
    color: var(--md-on-surface);
    font-size: 15px;
    outline: none;
    transition: border-color 0.105s ease;
}
.auth-input:focus { border-color: var(--md-primary); }

.auth-phone-row { display: flex; gap: 8px; align-items: stretch; }
.auth-country { flex: 0 0 150px; }
.auth-country .custom-select-trigger {
    height: 46px;
    border-radius: var(--md-shape-md);
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container);
    color: var(--md-on-surface);
    font-size: 13px;
    padding: 0 10px;
}
.auth-phone-input { flex: 1 1 auto; min-width: 0; }

.auth-primary-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
    border: none;
    border-radius: 999px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.105s ease, transform 0.07s ease;
}
.auth-primary-btn:hover { filter: brightness(.95); }
.auth-primary-btn:active { transform: scale(.98); }
.auth-primary-btn:disabled { opacity: .6; cursor: default; }

.auth-captcha { margin-top: 12px; }
.auth-captcha.hidden { display: none; }

.auth-otp-status {
    min-height: 18px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--md-on-surface-variant);
}
.auth-otp-status-error { color: var(--md-error, #b3261e); }
.auth-otp-status-busy { color: var(--md-primary); }

.auth-otp-sentto { margin-bottom: 14px; }

.auth-otp-code-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}
.auth-otp-digit {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    border-radius: var(--md-shape-md);
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container);
    color: var(--md-on-surface);
    outline: none;
    transition: border-color 0.105s ease;
}
.auth-otp-digit:focus { border-color: var(--md-primary); }

.auth-otp-resend-row { text-align: center; margin: 6px 0; }
.auth-otp-resend:disabled { opacity: .6; cursor: default; }
.auth-otp-actions { display: flex; justify-content: center; margin-top: 8px; }

/* ── Google Identity Services button (personalized "Continue as …" variant) ──
   When the visitor already has a live Google session, GSI stops rendering plain
   DOM and mounts the button inside a cross-origin iframe (accounts.google.com/gsi/…)
   so it can show the account name, email and avatar. Per CSS Color Adjust a UA only
   keeps an iframe's canvas transparent while the embedding element's used
   color-scheme matches the embedded document's — Google's is light, ours is `dark`
   (css/signal.css: `html.dark { color-scheme: dark }`), so the mismatch made the UA
   paint an opaque WHITE plate behind the pill on every dark page.

   Pinning these mounts to `light` restores the transparent canvas so the card
   surface shows through. The button's own colours are unaffected: they come from
   the GSI `theme` option inside the iframe, which the embedder cannot reach.
   Covers /auth/ (.g_id_signin) and the /auth/account/ link + reauth modals, plus
   One Tap's iframe if it is ever enabled on these pages. */
.g_id_signin,
#gsi-link-slot,
#gsi-reauth-slot,
#credential_picker_container,
iframe[src*="accounts.google.com/gsi/"] {
    color-scheme: light;
}

/* ── reCAPTCHA Enterprise badge — visible on /auth/ only ──
   web/css/shared.css hides `.grecaptcha-badge` globally (`display: none
   !important`). These pages are the one place that must show it (reCAPTCHA
   ToS: badge visible OR notice text). This file loads AFTER shared.css on
   both /auth/ and /auth/account/, and `body` prefix outranks the global
   single-class selector, so other apps keep the badge hidden. */
body .grecaptcha-badge {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 60 !important;
    pointer-events: auto !important;
}

/* Onboarding context line — the OTP step reached from a social redirect. */
.auth-otp-intro {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--md-on-surface-variant);
    text-align: center;
}