/* Shared viewport geometry, loaded after page-specific modal styles. */
html:has(.modal-backdrop.active),
html:has(.login-modal-backdrop.active),
html:has(dialog[open]),
html:has(.sheet-layer:not(.hidden)) {
    overflow: hidden;
}

dialog {
    position: fixed;
    inset: 0;
    margin: auto !important;
    height: fit-content;
    box-sizing: border-box;
    max-width: calc(100% - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    top: var(--modal-viewport-top, 0px) !important;
    bottom: var(--modal-viewport-bottom, 0px) !important;
    max-height: calc(var(--modal-viewport-height, 100dvh) - 32px) !important;
}

.modal-backdrop,
.panel-console .modal-backdrop,
#buyConfigModal.modal-backdrop,
#renewConfigModal.modal-backdrop,
.login-modal-backdrop,
.sheet-layer {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    top: var(--modal-viewport-top, 0px);
    bottom: var(--modal-viewport-bottom, 0px);
    padding-top: max(16px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
}

.modal-backdrop > .modal,
.panel-console .modal-backdrop > .modal,
#buyConfigModal > .modal,
#renewConfigModal > .modal,
.login-modal-backdrop > .login-lang-modal,
.sheet-layer > .sheet-panel {
    box-sizing: border-box;
    flex-shrink: 1;
    min-width: 0;
    min-height: 0;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overscroll-behavior: contain;
    border-radius: 8px !important;
    max-height: calc(var(--modal-viewport-height, 100dvh) - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))) !important;
    overflow-y: auto !important;
}

/* Checkout previously scrolled the backdrop; keep long forms inside the viewport. */
#buyConfigModal > .modal,
#renewConfigModal > .modal,
.login-modal-backdrop > .login-lang-modal,
.sheet-layer > .sheet-panel {
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    max-height: calc(var(--modal-viewport-height, 100dvh) - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))) !important;
}

/* Only the fields scroll; the grant action stays outside their scrollport. */
#grantAccessModal > .grant-access-modal,
.panel-console #grantAccessModal > .grant-access-modal {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    max-height: calc(var(--modal-viewport-height, 100dvh) - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))) !important;
}

#grantAccessModal > .grant-access-modal > .grant-access-grid,
.panel-console #grantAccessModal > .grant-access-modal > .grant-access-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px;
}

#grantAccessModal > .grant-access-modal > .modal-header,
#grantAccessModal > .grant-access-modal > .modal-footer {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    #grantAccessModal > .grant-access-modal > .modal-footer .btn {
        min-height: 44px !important;
    }
}

.sheet-panel {
    border-bottom: 1px solid var(--line);
}