.modal[open] {
    inline-size: min(90vw, 600px);
    padding: clamp(1.25rem, 4vw, 2rem);
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
    display: grid;
    gap: 1rem;
    color: #1a1a1a;
    background: white;

    & h2 {
        margin: 0;
        font-size: 1.25rem;
    }

    & svg {
        justify-self: center;
        max-inline-size: 100%;
        block-size: auto;
    }

    /* The standard anatomy — heading, body, exit, evenly spaced, whether the dialog carries the
       three parts itself or hands them to a form that fills it. Neither end needs a wrapper:
       alone at the top, the h2 is already the header, and a lone exit button is already the
       footer. How a body arranges its own contents stays the component's business. */
    > form {
        display: grid;
        gap: 1rem;
    }

    /* The gap owns the spacing; nothing inside brings its own vertical margin. */
    p { margin: 0 }
}

/* Generic button look inside modals; layered so any component's own button
   styling (POS product tiles, checkout…) wins regardless of specificity. */
@layer modal-defaults {
    .modal[open] button {
        justify-self: start;
        border: 1px solid gainsboro;
        border-radius: 0.375rem;
        padding: 0.5em 1em;
        background: whitesmoke;
        font-size: 0.875rem;
        cursor: pointer;
        transition: background-color 0.15s;

        &:hover { background: gainsboro; }

        &:focus-visible {
            outline: 2px solid steelblue;
            outline-offset: 2px;
        }
    }
}

.modal::backdrop { background: hsl(0 0% 0% / 0.5) }

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}