/* ==========================================================================
   Crossing dialog — "that site has its own basket".
   Markup + behaviour: Theme/inc/journey-scope.php.

   Its own sheet rather than more of footer.css, for the reason cookie-consent
   has one: it is network-wide furniture that can appear on any page, and it
   hangs off <dialog> rather than off any one region's layout. Depends on
   core-controls for the .btn family its actions reuse.

   The panel is `.core-modal-panel` and its header / body / footer are the
   shared modal rhythm (core-modal.css, Design.md §7.10 — efficiency #568), so
   it reads as the same kind of thing as every other dialog on the network.
   This sheet owns only the <dialog> reset, its width and the scrim, which
   `.core-modal-scrim` cannot reach because it is a ::backdrop.
   ========================================================================== */

.mm-crossing {
    /* <dialog> ships with a UA border, padding and margin; the panel class
       redraws the border, so only padding and margin need resetting. */
    padding: 0;
    margin: auto;
    color: var(--ink);
    width: min(30rem, calc(100vw - var(--sp-8)));
    max-width: none;
}

.mm-crossing::backdrop {
    background: var(--scrim);
    backdrop-filter: blur(2px);
}

.mm-crossing__body {
    margin: 0;
    color: var(--ink-muted);
    max-width: var(--container-blurb-cap);   /* inside the dialog, not the page container */
}

/* Stacked on narrow screens with the primary on top; a right-aligned row,
   primary last, once there is room — the footer grammar of every dialog. */
.mm-crossing__actions {
    flex-direction: column-reverse;
}

@media (width >= 480px) {
    .mm-crossing__actions {
        flex-direction: row;
    }
}