/*
 * Shared modal viewport contract.
 * Page styles still own each modal's visual design; these rules only keep the
 * active dialog inside the viewport and prevent the document behind it moving.
 */
html.gl-modal-open,
body.gl-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.gl-modal-open {
    position: fixed !important;
    inset-inline: 0;
    width: 100%;
}

.gl-modal-root {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding:
        max(16px, env(safe-area-inset-top, 0px))
        max(16px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px))
        max(16px, env(safe-area-inset-left, 0px)) !important;
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
}

.gl-modal-dialog {
    box-sizing: border-box !important;
    max-height: calc(
        100dvh
        - max(32px, env(safe-area-inset-top, 0px))
        - max(32px, env(safe-area-inset-bottom, 0px))
    ) !important;
    margin: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .gl-modal-root {
        padding:
            max(10px, env(safe-area-inset-top, 0px))
            10px
            max(10px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .gl-modal-dialog {
        max-height: calc(
            100dvh
            - max(20px, env(safe-area-inset-top, 0px))
            - max(20px, env(safe-area-inset-bottom, 0px))
        ) !important;
    }
}

@supports not (height: 100dvh) {
    .gl-modal-root {
        height: 100vh !important;
    }

    .gl-modal-dialog {
        max-height: calc(100vh - 32px) !important;
    }

    @media (max-width: 640px) {
        .gl-modal-dialog {
            max-height: calc(100vh - 20px) !important;
        }
    }
}