/* =============================================================================
   LAMHA — COMPACT AUTH SCALE
   Shared across login, registration and all authentication state pages.
   Keeps the restrained scale already approved for login/register.
   ============================================================================= */

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__topbar {
    height: 72px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__brand {
    gap: 8px;
    font-size: var(--text-base);
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__brand-mark {
    width: 34px;
    height: 34px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__brand-mark img {
    width: 26px;
    height: 26px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__switch {
    min-height: 38px;
    padding-inline: 13px;
    font-size: var(--text-xs);
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__main {
    width: min(100% - 34px, 640px);
    min-height: calc(100svh - 72px);
    padding: 34px 0 55px;
}

.auth-modern-page--login .auth-modern__content {
    width: min(100%, 540px);
}

.auth-modern-page--register .auth-modern__content {
    width: min(100%, 580px);
}

.auth-modern-page--state .auth-modern__content {
    width: min(100%, 540px);
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__hero {
    margin-bottom: 21px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__eyebrow {
    min-height: 31px;
    margin-bottom: 13px;
    padding-inline: 13px;
}

.auth-modern-page--login .auth-modern__title {
    font-size: clamp(30px, 3.6vw, 42px);
}

.auth-modern-page--register .auth-modern__title {
    font-size: clamp(29px, 3.5vw, 40px);
}

.auth-modern-page--state .auth-modern__title {
    font-size: clamp(28px, 3.4vw, 38px);
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .social-auth {
    gap: 13px;
    margin-bottom: 21px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .social-auth__button,
.auth-modern-page--register .social-auth--registration .social-auth__button--primary {
    min-height: 46px;
    font-size: var(--text-sm);
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .social-auth__mark {
    width: 21px;
    height: 21px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-form {
    gap: 13px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .field-label,
:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .form-options,
:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .remember-label,
:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .forgot-link,
:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .terms-label,
:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__footnote {
    font-size: 13px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .field-label {
    margin-bottom: 8px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .field-input {
    height: 48px;
    padding-inline: 21px;
    font-size: var(--text-sm);
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .field-icon-wrap .field-input {
    padding-inline-start: 21px;
    padding-inline-end: 47px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .field-toggle {
    inset-inline-end: 13px;
    width: 31px;
    height: 31px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .field-toggle :is(svg, i) {
    width: 16px;
    height: 16px;
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .btn.auth-modern__primary {
    min-height: 48px;
    font-size: var(--text-sm);
}

:is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__footnote {
    margin-top: 21px;
}

.auth-modern-page--state :is(.auth-state-email, .auth-state-identity, .auth-state-note, .auth-state-details) {
    border-radius: 16px;
}

.auth-modern-page--state .auth-state-note {
    padding: 12px 13px;
    font-size: 13px;
}

.auth-modern-page--state .auth-state-details summary {
    min-height: 44px;
    padding: 10px 13px;
}

/* Google-first progressive auth ------------------------------------------- */
:is(.auth-modern-page--login, .auth-modern-page--register) .auth-choice {
    display: grid;
    gap: 13px;
}

:is(.auth-modern-page--login, .auth-modern-page--register) .auth-choice .social-auth {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

:is(.auth-modern-page--login, .auth-modern-page--register) .social-auth__button--google.social-auth__button--primary {
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, .86);
    background: #fff;
    color: #1f1f1f;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

:is(.auth-modern-page--login, .auth-modern-page--register) .social-auth__button--google.social-auth__button--primary:hover {
    border-color: #fff;
    background: #f8f9fa;
    color: #171717;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.social-auth__google-mark {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: grid;
    place-items: center;
}

.social-auth__google-mark svg {
    display: block;
    width: 18px;
    height: 18px;
}

.auth-email-toggle {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: rgba(15, 19, 22, .54);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-align: center;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.auth-email-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--border-default);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.auth-email-toggle:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 3px;
}

.auth-email-toggle__icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
}

.auth-email-toggle__icon :is(svg, i),
.auth-email-toggle__chevron {
    width: 15px;
    height: 15px;
}

.auth-email-toggle__chevron {
    transition: transform 180ms var(--ease-out);
}

.auth-email-toggle[aria-expanded="true"] .auth-email-toggle__chevron {
    transform: rotate(180deg);
}

.auth-email-panel {
    padding-top: 3px;
    transform-origin: top center;
}

.auth-email-panel[hidden] {
    display: none !important;
}

.auth-email-panel.is-revealing {
    animation: auth-email-reveal 220ms var(--ease-out) both;
}

@keyframes auth-email-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__topbar {
        width: min(100% - 26px, 1320px);
        height: 64px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__brand-mark {
        width: 31px;
        height: 31px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__brand-mark img {
        width: 24px;
        height: 24px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__switch {
        min-height: 36px;
        padding-inline: 13px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__main {
        width: min(100% - 26px, 600px);
        min-height: calc(100svh - 64px);
        padding: 21px 0 34px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__hero {
        margin-bottom: 21px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__eyebrow {
        min-height: 29px;
        margin-bottom: 13px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__title {
        font-size: clamp(27px, 7.4vw, 34px);
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .field-input,
    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .btn.auth-modern__primary {
        min-height: 46px;
        height: 46px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .social-auth__button,
    .auth-modern-page--register .social-auth--registration .social-auth__button--primary {
        min-height: 44px;
    }

    :is(.auth-modern-page--login, .auth-modern-page--register) .social-auth__button--google.social-auth__button--primary,
    :is(.auth-modern-page--login, .auth-modern-page--register) .auth-email-toggle {
        min-height: 46px;
    }
}

@media (max-width: 420px) {
    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__topbar,
    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__main {
        width: calc(100% - 24px);
    }

    :is(.auth-modern-page--login, .auth-modern-page--register, .auth-modern-page--state) .auth-modern__title {
        font-size: clamp(26px, 7.8vw, 32px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-email-panel.is-revealing {
        animation: none;
    }
}