@layer components {
    .modal {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-elevated);
        color: var(--fg);
        padding: 0;
        box-shadow: var(--shadow-md);
        max-width: 32em;
        width: calc(100% - var(--space-5) * 2);
        /* Override native <dialog>'s overflow:auto so absolutely-
         * positioned children (e.g. an autocomplete popover) can
         * extend past the dialog box instead of being clipped. */
        overflow: visible;
    }
    .modal::backdrop {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
    }

    .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--border-muted);
        font-weight: var(--weight-semibold);
    }
    .modal-title { margin: 0; font-size: var(--text-lg); }

    .modal-body   { padding: var(--space-5); }
    .modal-body > * + * { margin-top: var(--space-4); }
    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-5);
        border-top: 1px solid var(--border-muted);
    }
}