/* ==========================================================================
   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
   design-base for the .btn family and .label its actions and eyebrow reuse.

   Every value is a token. The panel wears the §7 dialog chrome — Paper, 1px
   Rule, --r-lg, --shadow-3 — so it reads at the same height as every other
   modal on the network.
   ========================================================================== */

.mm-crossing {
    /* <dialog> ships with a UA border, padding and margin. Reset all three
       before the panel's own chrome, or the border draws twice. */
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 0;
    margin: auto;
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-3);
    width: min(30rem, calc(100vw - var(--sp-8)));
    max-width: none;
}

.mm-crossing::backdrop {
    background: color-mix(in oklch, var(--ink) 40%, transparent);
    backdrop-filter: blur(2px);
}

.mm-crossing__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
}

.mm-crossing__eyebrow {
    color: var(--ink-muted);
}

.mm-crossing__title {
    margin: 0;
    font-size: var(--fs-22);
    font-weight: 400;   /* h2 is Regular — Design.md §4.4 */
    line-height: var(--lh-tight);
}

.mm-crossing__body {
    margin: 0;
    color: var(--ink-muted);
    max-width: var(--container-blurb);
}

/* Stacked on narrow screens, side by side once there is room. The primary
   leads in both, because leaving is the action the customer just asked for —
   the dialog states the consequence, it does not argue against it. */
.mm-crossing__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

@media (min-width: 30rem) {
    .mm-crossing__actions {
        flex-direction: row;
    }

    .mm-crossing__actions > * {
        flex: 1 1 0;
    }
}