/*
 * Shared viewport contract for authentication pages.
 * Desktop: login/register must fit the first viewport with no nested scrollbars.
 * Mobile/tablet: the document may scroll naturally, but panels never scroll independently.
 */

@media (min-width: 992px) {
    .login-page,
    .registration-page {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .login-page__container,
    .registration-page__container {
        display: flex;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: auto;
        align-items: center;
        padding-top: .35rem;
        padding-bottom: .35rem;
        overflow: hidden;
    }

    .login-page .login-shell,
    .registration-shell {
        height: min(680px, calc(100dvh - 54px));
        max-height: calc(100dvh - 54px);
        min-height: 0;
        border-radius: 1.45rem;
        box-shadow: 0 24px 70px rgba(15, 35, 52, .13);
    }

    .login-page .login-form-panel,
    .login-page .login-welcome-panel,
    .registration-form-panel,
    .registration-context-panel {
        min-height: 0;
        overflow: hidden !important;
        scrollbar-width: none;
    }

    /* The original decorative circles extended outside the panel and increased scrollHeight.
       The radial gradient already provides depth without creating scrollable overflow. */
    .login-page .login-welcome-panel::before,
    .registration-context-panel::before {
        display: none !important;
        content: none !important;
    }

    .login-page .login-form-panel::-webkit-scrollbar,
    .login-page .login-welcome-panel::-webkit-scrollbar,
    .registration-form-panel::-webkit-scrollbar,
    .registration-context-panel::-webkit-scrollbar {
        display: none;
    }

    /* ---------- Login form ---------- */
    .login-page .login-form-panel {
        padding: 1.35rem 2rem;
    }

    .login-page .login-brand-lockup {
        margin-bottom: .6rem;
    }

    .login-page .login-brand-lockup .login-logo {
        width: 48px;
        height: 48px;
        border-radius: .8rem;
    }

    .login-page .login-auth-header {
        margin-bottom: .75rem;
    }

    .login-page .login-auth-header h1 {
        margin-bottom: .25rem;
        font-size: 1.52rem;
        line-height: 1.4;
    }

    .login-page .login-auth-header > p {
        font-size: .78rem;
        line-height: 1.65;
    }

    .login-page .login-security-note {
        margin-top: .5rem;
        padding: .45rem .62rem;
        font-size: .68rem;
        line-height: 1.5;
    }

    .login-page .login-security-note__icon {
        width: 1.4rem;
        height: 1.4rem;
        flex-basis: 1.4rem;
    }

    .login-page .login-step-label {
        margin-bottom: .65rem;
        padding-bottom: .5rem;
    }

    .login-page .form-control {
        min-height: 43px;
        font-size: .88rem;
    }

    .login-page .auth-primary-action {
        min-height: 43px;
    }

    .login-page .login-register-callout {
        margin-top: .8rem;
        padding-top: .68rem;
    }

    /* ---------- Login context ---------- */
    .login-page .login-welcome-panel {
        padding: 1.1rem 1.5rem;
    }

    .login-page .login-welcome__eyebrow {
        padding: .32rem .62rem;
        font-size: .66rem;
    }

    .login-page .login-welcome__content > h2 {
        margin: .42rem 0 .12rem;
        font-size: 1.55rem;
        line-height: 1.34;
    }

    .login-page .login-welcome__content > p {
        font-size: .7rem;
        line-height: 1.45;
    }

    .login-page .login-journey {
        gap: .4rem;
        margin: .45rem 0 .55rem;
    }

    .login-page .login-journey__item {
        padding: .42rem .5rem;
        border-radius: .68rem;
    }

    .login-page .login-journey__number {
        width: 1.3rem;
        height: 1.3rem;
        margin-bottom: .16rem;
        font-size: .58rem;
    }

    .login-page .login-journey__item strong {
        margin-bottom: .05rem;
        font-size: .62rem;
    }

    .login-page .login-journey__item small {
        font-size: .51rem;
        line-height: 1.3;
    }

    .login-page .login-notices {
        margin-top: auto;
        padding: .66rem;
        border-radius: .85rem;
    }

    .login-page .login-notices__header {
        margin-bottom: .4rem;
    }

    .login-page .login-notices__heading h3 {
        margin-bottom: .08rem;
        font-size: .76rem;
    }

    .login-page .login-notices__heading p {
        font-size: .53rem;
        line-height: 1.35;
    }

    .login-page .login-notices__count {
        padding: .18rem .4rem;
        font-size: .54rem !important;
    }

    .login-page .login-notice-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        max-height: none;
        overflow: visible !important;
        padding: 0;
    }

    .login-page .login-notice-card {
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        gap: .3rem .5rem;
        min-height: 106px;
        padding: .52rem;
        border-radius: .72rem;
    }

    .login-page .login-notice-card__media,
    .login-page .login-notice-card__placeholder {
        width: 54px;
        height: 54px;
        border-radius: .62rem;
    }

    .login-page .login-notice-card__badge {
        padding: .12rem .34rem;
        font-size: .51rem;
    }

    .login-page .login-notice-card__content strong {
        margin-bottom: .08rem;
        font-size: .67rem;
        line-height: 1.4;
    }

    .login-page .login-notice-card__content p {
        font-size: .54rem;
        line-height: 1.4;
        -webkit-line-clamp: 2;
    }

    .login-page .login-notice-card__action {
        padding: .2rem .34rem;
        font-size: .51rem;
    }

    /* ---------- Registration form ---------- */
    .registration-form-panel {
        padding: 1.1rem 1.9rem;
    }

    .registration-form {
        max-width: 500px;
    }

    .registration-brand-lockup {
        margin-bottom: .5rem;
    }

    .registration-brand-lockup img {
        width: 44px;
        height: 44px;
        border-radius: .74rem;
    }

    .registration-brand-copy small {
        font-size: .64rem;
    }

    .registration-brand-copy strong {
        font-size: .82rem;
    }

    .registration-form-header {
        margin-bottom: .48rem;
    }

    .registration-form-header h1 {
        margin-bottom: .14rem;
        font-size: 1.38rem;
        line-height: 1.35;
    }

    .registration-form-header p {
        font-size: .71rem;
        line-height: 1.5;
    }

    .registration-progress {
        gap: .45rem;
        margin: .45rem 0 .58rem;
    }

    .registration-progress::before {
        top: 14px;
    }

    .registration-progress__number {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: .63rem;
    }

    .registration-progress__copy strong {
        font-size: .64rem;
    }

    .registration-progress__copy small {
        font-size: .52rem;
    }

    .registration-panel-title {
        margin-bottom: .48rem;
        padding-bottom: .4rem;
    }

    .registration-page .mb-3 {
        margin-bottom: .52rem !important;
    }

    .registration-page .form-label {
        margin-bottom: .25rem;
        font-size: .7rem;
    }

    .registration-page .form-control {
        min-height: 40px;
        font-size: .84rem;
    }

    .registration-field-hint {
        margin-top: .18rem;
        font-size: .55rem;
        line-height: 1.3;
    }

    .registration-primary-action {
        min-height: 41px;
        font-size: .8rem;
    }

    .registration-mobile-confirmed,
    .registration-otp-summary {
        margin-bottom: .48rem;
        padding: .46rem .64rem;
        font-size: .67rem;
    }

    .registration-fields-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .58rem;
        align-items: start;
    }

    .registration-fields-grid > .mb-3 {
        margin-bottom: .48rem !important;
    }

    .registration-login-link {
        margin-top: .5rem;
        padding-top: .48rem;
    }

    /* ---------- Registration context ---------- */
    .registration-context-panel {
        padding: 1.05rem 1.45rem;
    }

    .registration-context__eyebrow {
        padding: .3rem .58rem;
        font-size: .64rem;
    }

    .registration-context h2 {
        margin: .42rem 0 .16rem;
        font-size: 1.55rem;
        line-height: 1.34;
    }

    .registration-context > p {
        font-size: .7rem;
        line-height: 1.45;
    }

    .registration-guide {
        gap: .34rem;
        margin: .52rem 0;
    }

    .registration-guide__item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: .5rem;
        padding: .44rem .52rem;
        border-radius: .68rem;
    }

    .registration-guide__icon {
        width: 30px;
        height: 30px;
        border-radius: .55rem;
        font-size: .62rem;
    }

    .registration-guide__copy strong {
        margin-bottom: .06rem;
        font-size: .65rem;
    }

    .registration-guide__copy small {
        font-size: .54rem;
        line-height: 1.32;
    }

    .registration-trust-box {
        margin-top: auto;
        padding: .52rem .62rem;
        border-radius: .72rem;
        font-size: .54rem;
        line-height: 1.38;
    }

    .registration-trust-box strong {
        margin-bottom: .08rem;
        font-size: .63rem;
    }

    /* ---------- Shared footer ---------- */
    .login-page .site-footer,
    .registration-page .site-footer {
        min-height: 42px;
        padding: .22rem 0;
        font-size: .66rem;
    }

    .login-page .site-footer .container,
    .registration-page .site-footer .container {
        min-height: 32px;
        gap: .75rem !important;
    }

    .login-page .footer-credit,
    .registration-page .footer-credit {
        font-size: .63rem;
    }

    .login-page .footer-credit img,
    .registration-page .footer-credit img {
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (max-width: 991px) {
    .login-page,
    .registration-page {
        overflow-y: auto;
    }

    .login-page .login-form-panel,
    .login-page .login-welcome-panel,
    .registration-form-panel,
    .registration-context-panel,
    .login-page .login-notice-list {
        overflow: visible !important;
        max-height: none !important;
    }

    .registration-fields-grid {
        display: block;
    }
}