/* Э0 (T-19): <dialog> sp.modal. Размеры, цвета, радиусы - токены specialty_v2. Подложка - из цвета текста с прозрачностью. */
.sp-modal {
    box-sizing: border-box;
    margin: auto; /* E1: легаси-CSS (specialty_new/main.css: *{margin:0}) обнуляет UA-margin:auto у dialog, окно прижималось влево-вверх */
    width: min(560px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100dvh - 2 * var(--space-4));
    padding: var(--space-6);
    overflow: auto;
    color: var(--text-black);
    background: var(--bg-white);
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-4);
    overscroll-behavior: contain;
}

.sp-modal::backdrop {
    background: color-mix(in srgb, var(--text-black) 40%, transparent);
}

.sp-modal[open] {
    animation: sp-modal-in var(--motion-fast, 160ms) ease-out;
}

@keyframes sp-modal-in {
    from {
        opacity: 0;
        transform: translateY(var(--space-2));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 639px) {
    .sp-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        margin: auto 0 0;
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-modal[open] {
        animation: none;
    }
}