/*
 * Modal dialogs (native <dialog> opened with showModal()), site-wide.
 *
 * A modal dialog makes the rest of the page inert for clicks and focus, but not for scrolling: the page used to scroll
 * behind it at the end of the dialog's own scrolling, over its header or the backdrop, with the keyboard and by touch.
 * While any dialog is open, assets/js/modal-scroll.js sets .modal-scroll-locked on <html>, which fixes the page where it
 * is; closing the last dialog removes the class and the page is exactly where it was. overscroll-behavior also keeps
 * scrolling inside a dialog from chaining out to the page, and from pulling to refresh on phones.
 */

html.modal-scroll-locked,
html.modal-scroll-locked body {
    overflow: hidden;
}

/* The scrollbar's width, measured when the lock was applied, so the page does not shift sideways when it disappears. */
html.modal-scroll-locked {
    padding-right: var(--modal-scrollbar-gap, 0);
}

dialog,
dialog [class*="modal-body"] {
    overscroll-behavior: contain;
}

/*
 * A dialog with a header and a scrolling body gives the body the height that is left, so there is a single scroll area
 * even on short screens (a phone held sideways), instead of the body and the dialog both scrolling.
 */
dialog[open]:has(> [class*="-modal-body"]) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

dialog > [class*="-modal-body"] {
    flex: 1 1 auto;
    min-height: 0;
}

dialog:has(> [class*="-modal-body"]) > :not([class*="-modal-body"]) {
    flex: none;
}