/* Shared dialog presentation that goes with modal-a11y.js and
   modal-viewport-fit.js. Loaded after mobile.css so the phone sheet is sized
   from the visible viewport rather than a fixed share of the layout viewport. */

/* Keyboard focus has to be obvious inside a dialog: it is the only thing the
   user can interact with while one is open. */
.modal :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.modal[tabindex]:focus {
    outline: none;
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    /* --modal-visual-top / --modal-visual-height are published per dialog by
       modal-viewport-fit.js from window.visualViewport, so the sheet sits in
       the part of the screen the on-screen keyboard leaves visible. */
    .modal-overlay {
        --modal-visual-top: 0px;
        --modal-visual-height: 100dvh;
        top: var(--modal-visual-top);
        bottom: auto;
        height: var(--modal-visual-height);
        padding: 12px 0 0;
    }

    .modal:not(.modal-fullscreen) {
        max-height: 100%;
    }

    .modal.modal-fullscreen {
        height: 100%;
        max-height: 100%;
    }

    /* The action row stays reachable while the body scrolls, so the primary
       action never ends up under the keyboard. */
    .modal:not(.modal-fullscreen) .modal-actions {
        position: sticky;
        bottom: 0;
        margin-top: 16px;
        padding: 12px 0 calc(4px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-panel);
        box-shadow: 0 -8px 12px -8px rgba(var(--shadow-rgb), 0.9);
    }
}