/*
 * modal.css — окно поверх экрана. ЕДИНСТВЕННЫЙ адрес всплывающего окна.
 * Подключать после components.css: карточка окна — та же витрина, что везде.
 *
 * Зачем отдельным файлом, а не в components.css: тот упёрся в лимит 300 строк
 * (291 на 17.08.2026), и храповик tests/test_file_limits.py дописывать в него
 * уже не даёт. Это тот же слой ядра, просто по своему адресу.
 *
 * Копий оверлея в проекте было три и все свои: приветствие новичка
 * (.onb-overlay в landing.css), подтверждение удаления в профиле
 * (.modal-overlay в profile.css) и окна Лилы (.leela-modal). Первая сведена
 * сюда 17.08.2026 вместе с попапом «оплачено и не получено»; профиль и Лила
 * ждут своей очереди — строкой в ЗАМЕЧЕНО.md.
 *
 * Правила направления те же: теней нет, рамка 1 px --hair, красок мимо
 * токенов нет. Подложка — чернота, а не второй цвет.
 */

/* Слой окна. Тёмная подложка гасит экран под ним, чтобы окно читалось как
   отдельный предмет, а не как ещё один блок страницы. */
.modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-5);
    background: rgba(0, 0, 0, .72);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.modal--shown { opacity: 1; pointer-events: auto; }

/* Карточка окна — витрина на холсте. Высоту ограничиваем: длинное приветствие
   новичка не должно уезжать за край экрана телефона. */
.modal__card {
    max-width: 420px; width: 100%; max-height: 88vh; overflow-y: auto;
    box-sizing: border-box;
    padding: var(--space-6) clamp(18px, 5vw, 24px);
    border-radius: var(--radius-case);
    background: var(--case);
    border: 1px solid var(--hair);
    color: var(--body);
    font-family: var(--font-body);
}

.modal__title {
    font-family: var(--font-display); font-weight: 400;
    font-size: var(--fs-h2); line-height: var(--lh-tight);
    color: var(--ink);
    margin: 0 0 var(--space-4);
}
.modal__text {
    font-size: var(--fs-base); line-height: var(--lh-body);
    margin: 0 0 var(--space-5);
}

/* Действия окна — столбцом: на телефоне две кнопки в строку ужимаются до
   нечитаемых. Заливка и контур у них системные (.btn / .btn--ghost). */
.modal__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }