/* v2.63.3: keep account identity and Logout fixed while the links scroll. */
.account-popup {
    height: min(720px, calc(100vh - 104px)) !important;
    height: var(--account-popup-height, min(720px, calc(100dvh - 104px))) !important;
    max-height: var(--account-popup-height, min(720px, calc(100dvh - 104px))) !important;
    overflow: hidden !important;
}

.account-popup.show,
.account-popup.active,
.account-popup.open {
    display: flex !important;
    flex-direction: column;
}

.account-popup-profile,
.account-popup > .account-popup-divider,
.account-popup-logout-form {
    flex: 0 0 auto;
}

.account-popup-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
    scrollbar-color: #8d2746 #211b26;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.account-popup-menu:focus-visible {
    outline: 2px solid #ff6f8d;
    outline-offset: -2px;
}

.account-popup-menu::-webkit-scrollbar {
    width: 8px;
}

.account-popup-menu::-webkit-scrollbar-track {
    background: #211b26;
}

.account-popup-menu::-webkit-scrollbar-thumb {
    border: 2px solid #211b26;
    border-radius: 999px;
    background: #8d2746;
}

@media (max-width: 900px) {
    body > .account-popup.ghp-mobile-popup-portal {
        bottom: auto !important;
        height: var(--account-popup-height, calc(100dvh - 152px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
        max-height: var(--account-popup-height, calc(100dvh - 152px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: contain;
        touch-action: pan-y;
        scrollbar-gutter: stable;
    }

    /*
     * mobile-production.css intentionally promotes popups to a body portal,
     * but its generic open state is block-level. The account surface must stay
     * a flex column so the identity and Logout controls remain visible while
     * the navigation between them owns the scroll gesture.
     */
    body > .account-popup.ghp-mobile-popup-portal:is(.show, .active, .open) {
        display: flex !important;
        flex-direction: column !important;
    }

    body > .account-popup.ghp-mobile-popup-portal .account-popup-menu {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: 14px;
        overscroll-behavior-y: contain;
        scroll-padding-block: 10px 18px;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 520px) {
    body > .account-popup.ghp-mobile-popup-portal {
        height: var(--account-popup-height, calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
        max-height: var(--account-popup-height, calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
    }
}