/* The dialog is the part of the screen the user can see: fixed inset 0 tracks the browser
   toolbar, and its safe-area padding keeps the box from under the home screen app's status bar.
   Cap the box to the dialog, not to the viewport. */
.modal {
    @apply items-center justify-center rounded shadow-lg border-[1px];
    container-type: size;
    padding-top: env(safe-area-inset-top);
}

.modal .modal-box {
    max-height: 100cqh;
}

/* Full-screen sheet on small screens: full width, slides up */
@media (max-width: 767px) {
    .modal > [data-modal-target="contentWrapper"],
    .modal turbo-frame {
        display: contents;
    }

    /* The sheet fills the screen from the top and lives in the page rather than the
       viewport, so a box taller than the visible area is reached by scrolling the page.
       The keyboard, an in-app browser's bars and Safari's toolbar all cover part of the
       fixed viewport without any unit reporting it.
       justify-center shrinks the column to the form's width; a fr column spans the screen */
    .modal {
        position: absolute;
        top: var(--modal-page-top, 0px);
        bottom: auto;
        height: auto;
        min-height: 100%;
        container-type: normal;
        overflow: visible;
        overscroll-behavior: auto;
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    /* daisyUI dims through the dialog itself, which now ends with the sheet; the fixed backdrop keeps the rest of the page dimmed */
    .modal::backdrop {
        display: block;
        background-color: oklch(0% 0 0 / 0.4);
    }

    /* daisyUI locks the page while a modal is open; the sheet is part of the page, so it must keep scrolling */
    :root:has(.modal-open, .modal[open]) {
        overflow: auto;
    }

    /* The page beneath ends with the screen, so the sheet's end is the end of what can be scrolled to */
    :root:has(.modal-open, .modal[open]) body {
        max-height: calc(var(--modal-page-top, 0px) + 100svh);
        overflow: hidden;
    }

    /* Neither the dialog nor the box may contain the scroll, or a swipe over the sheet never reaches the page */
    .modal .modal-box {
        max-height: none;
        overscroll-behavior: auto;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
        overflow-x: hidden;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
        translate: 0 100%;
        transition: translate 0.3s ease-out;
    }

    .modal.modal-open .modal-box,
    .modal[open] .modal-box {
        translate: 0 0;
    }
}