/* 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;
}

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

    /* justify-center shrinks the column to the form's width; a fr column spans the screen */
    .modal {
        align-items: end;
        grid-template-columns: minmax(0, 1fr);
    }

    .modal .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        border-bottom-left-radius: 0;
        border-bottom-right-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;
    }
}