/*
 * Modals.
 *
 * Phase 1 ships no modal in its HTML: the one interactive confirmation pattern in the foundation layer
 * is a plain page with a form, because a full page cannot be defeated by a blocked script tag. This
 * stylesheet exists because the JavaScript module does, and a future feature must not invent its own
 * rules for focus, scrolling and focus-trap styling on arrival.
 *
 * The accessibility contract lives here, not in the markup:
 *
 *   * the dialog carries `role="dialog"` and `aria-modal="true"` (set by js/core/modal.js);
 *   * focus moves into the dialog on open and back to the trigger on close;
 *   * Escape closes it, and the close button is always visible — a modal that can only be dismissed by
 *     the mouse is a trap, which is exactly the word for it.
 */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--layer-overlay);

    /* Centers the panel without `inset` hacks: the panel is the only child, and the grid places it. */
    display: grid;
    place-items: center;
    padding: var(--space-4);
    overflow-y: auto;

    /* Dark enough to separate the layer, light enough that the page behind stays faintly readable — a
       reader should never wonder whether the site froze. The tint lives on this container rather than a
       separate backdrop element, so `js/core/modal.js` has exactly one element to show and hide. */
    background-color: rgba(22, 33, 43, 0.45);
}

.modal__panel {
    width: 100%;
    max-width: 32rem;
    max-height: 100%;
    overflow-y: auto;

    background-color: var(--colour-surface-raised);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    padding: var(--space-5);
}

.modal__title {
    margin-top: 0;
    font-size: var(--text-xl);
}

.modal__body {
    margin-top: var(--space-3);
}

.modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* The close control. `js/core/modal.js` inserts it with its translated label, because no script in this
   application carries a hard-coded string. */
.modal__close {
    float: inline-end;
    margin-inline-start: var(--space-3);
}

/*
 * The page behind an open modal must not scroll: two scrollbars fight, and on touch a swipe that meant
 * to dismiss becomes a scroll of the background. `inert` is set on the main content by the module; this
 * rule is the visual half.
 */
body.modal-open {
    overflow: hidden;
}