/*
 * Emersion UI — modal primitives baseline (Alert / Confirm / Input).
 *
 * Contract:
 *  - Self-sufficient: a modal must be readable, centered and dismissible with
 *    ONLY this file + the functional layer/window classes (z-index stacking is
 *    JS-managed by the shared layer-manager). Acceptance: blank page + this
 *    file = usable modal with a visible, clickable OK.
 *  - Everything lives in @layer em-ui, so ANY unlayered runtime/project
 *    stylesheet overrides it without specificity games, regardless of load
 *    order. Theming API = the --em-modal-* custom properties; full rule
 *    overrides are the escalation path, not the default.
 *  - No utility classes, no icon-font classes, no runtime button classes in
 *    here or in the canonical templates — those belong to the host design
 *    system and may not exist in a given runtime.
 */
@layer em-ui {

    .em-modal {
        /* ── theming API ─────────────────────────────── */
        --em-modal-bg: #ffffff;
        --em-modal-fg: #21252b;
        --em-modal-border: #c8c8c8;
        --em-modal-radius: 6px;
        --em-modal-shadow: 0 12px 40px rgba(0, 0, 0, .28);
        --em-modal-header-bg: #f2f2f2;
        --em-modal-header-fg: #21252b;
        --em-modal-danger: #b02a37;
        --em-modal-btn-bg: #2f6fed;
        --em-modal-btn-fg: #ffffff;
        --em-modal-btn-2-bg: #e7e7e7;
        --em-modal-btn-2-fg: #21252b;
        /* ────────────────────────────────────────────── */

        display: flex;
        flex-direction: column;
        width: min(34rem, calc(100vw - 2rem));
        overflow: hidden;
        background: var(--em-modal-bg);
        color: var(--em-modal-fg);
        border: 1px solid var(--em-modal-border);
        border-radius: var(--em-modal-radius);
        box-shadow: var(--em-modal-shadow);
    }

    .em-modal--sm { width: min(26rem, calc(100vw - 2rem)); }
    .em-modal--lg { width: min(48rem, calc(100vw - 2rem)); }

    .em-modal__header {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .75rem;
        background: var(--em-modal-header-bg);
        color: var(--em-modal-header-fg);
        border-bottom: 1px solid var(--em-modal-border);
    }

    .em-modal__icon {
        display: inline-flex;
        width: 1.25rem;
        height: 1.25rem;
        flex: 0 0 auto;
    }
    .em-modal__icon svg { width: 100%; height: 100%; fill: currentColor; }
    .em-modal__icon--danger { color: var(--em-modal-danger); }

    .em-modal__title {
        font-weight: 600;
        margin-right: auto;
    }

    .em-modal__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        flex: 0 0 auto;
        color: inherit;
        text-decoration: none;
        border-radius: 4px;
        opacity: .65;
    }
    .em-modal__close:hover { opacity: 1; }
    .em-modal__close svg { width: .8rem; height: .8rem; fill: currentColor; }

    .em-modal__body { padding: 1rem .75rem; }
    .em-modal__message { text-align: center; }

    .em-modal__footer {
        display: flex;
        justify-content: flex-end;
        gap: .5rem;
        padding: .5rem .75rem;
        border-top: 1px solid var(--em-modal-border);
    }

    .em-modal__btn {
        display: inline-block;
        padding: .45rem 1.1rem;
        background: var(--em-modal-btn-2-bg);
        color: var(--em-modal-btn-2-fg);
        border: 0;
        border-radius: 4px;
        font: inherit;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }
    .em-modal__btn:hover { filter: brightness(.95); }
    .em-modal__btn--primary { background: var(--em-modal-btn-bg); color: var(--em-modal-btn-fg); }
    .em-modal__btn--danger { background: var(--em-modal-danger); color: #ffffff; }
}