/* =========================================================
   enl-interactive-1-основа.css

   общее для всех заданий: переменные,
   оболочка,
   прогресс,
   карточка,
   кнопки,
   пояснение,
   панель проверки сборки,
   адаптив

   ⚠️ Это ЧАСТЬ оформления интерактивных тренировок. Файлы
   темы нумерованы, и нужны ВСЕ: enl-interactive-1-основа,
   -2-механики, -3-механики. Один без других работать не
   будет — переменные цветов объявлены в первом.

   Делить пришлось потому, что каждый отдельный файл темы
   GetCourse обрезается на 65535 байтах, и обрезает молча.
   ========================================================= */

/* ============================================================
   ЕГЭ Налегке — ИНТЕРАКТИВНЫЕ ТРЕНИРОВКИ, стили
   Версия 1.1 (30.08.2026)

   КУДА: в тему GetCourse, вкладка CSS. Один раз на аккаунт.

   Раньше эти стили лежали на странице урока. Теперь — в теме,
   как у чек-листа и видеоквиза: правка доезжает до всех уроков
   сразу, а не копипастом.

   ══════════════════════════════════════════════════════════
   ПРАВИЛО ИМЁН: ВСЁ В ЭТОМ ФАЙЛЕ НАЧИНАЕТСЯ С enl-interactive
   ══════════════════════════════════════════════════════════

   ⚠️ ПОЧЕМУ НЕ «training». Тренинг — это штатная сущность
   GetCourse, и платформа оперирует ею в своём коде и разметке.
   Рано или поздно нам самим понадобится .enl-training, чтобы
   оформить настоящий тренинг, — и тогда два разных предмета
   стали бы называться одинаково. Интерактивная тренировка
   тренингом не является: это задание внутри урока.
   Поэтому здесь «interactive». Этот абзац — единственное
   место файла, где слово «training» вообще встречается.

       классы       .enl-interactive
                    .enl-interactive__shell
                    .enl-interactive-match__term
                    .enl-interactive-map-drag__zone--hover
       переменные   --enl-interactive-text
                    --enl-interactive-yellow
       анимации     enlInteractiveShake
                    enlInteractiveRoundIn

   Ни одного исключения. Проверяется одним поиском: любое имя
   без «interactive» в этом файле — ошибка.

   ⚠️ ЗАЧЕМ ТАК СТРОГО. Тема грузится на КАЖДОЙ странице
   аккаунта, и всё в ней живёт в одном общем пространстве имён:
   и классы, и переменные, и @keyframes. При этом структурные
   правила чек-листа намеренно не привязаны к его корню —
   значит, на странице тренировки они тоже присутствуют.
   Любое совпадение имени = молчаливое влияние одного виджета
   на другой, которое потом ищется глазами часами.

   Раньше было .enl-match, --enl-text, enlShake. Сегодня они ни
   с чем не пересекались — проверил, пересечений с чек-листом
   ровно ноль, — но занимали слишком общие имена: третий виджет
   с любым таким именем сломал бы оба. Теперь пересечение
   невозможно по построению, а не по везению.

   ⚠️ Переменные объявлены на .enl-interactive и только там.
   В :root не переносить — там они снова станут общими.

   ⚠️ ЦВЕТА НЕ ЗАВИСЯТ ОТ ПРЕДМЕТА. У тренировок нет деления на
   обществознание и историю: класс темы (enl-theme-obsh /
   enl-theme-hist) здесь не нужен и ни на что не влияет.

   ── ЧТО ИСПРАВЛЕНО ПРИ ПЕРЕНОСЕ ─────────────────────────────
   Одна правка по существу, помимо переименования:

   после правила .enl-interactive-memory__card[disabled] стояла
   лишняя закрывающая скобка. Браузер на ней сбивается и
   выбрасывает СЛЕДУЮЩЕЕ правило целиком — это было
   .enl-interactive-memory__card--wrong .enl-interactive-memory__back,
   то есть подсветка неверной пары в «разминке на память».
   Дёрганье карточек при этом работало (оно задаётся другим
   правилом, ниже по файлу), поэтому со стороны выглядело, будто
   ошибка показывается, — просто бледнее, чем задумано. Цвета
   не было вообще: правило не доживало до применения.
   Скобка убрана.
   ============================================================ */

@font-face {
    font-family: 'Defectica';
    src: url('https://fs.getcourse.ru/fileservice/file/download/a/943938/sc/141/h/5243f0e21e732f6db98bc750ab2e7380.ttf')
         format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'NauryzRedKeds';
    src: url('https://fs.getcourse.ru/fileservice/file/download/a/943938/sc/356/h/c07e766b4ac61f869bff12e47ff9c8ab.ttf')
         format('truetype');
    font-display: swap;
}
/* ⚠️ ЗДЕСЬ БЫЛ @import ДЛЯ RALEWAY — убран, намеренно.

   Две причины.

   1. Raleway уже подключён глобально в настройках аккаунта —
      об этом сказано в шапке CSS чек-листа. Второе подключение
      ничего не добавляет.

   2. Правило @import обязано стоять ПЕРВЫМ в таблице стилей:
      всё, что идёт после других правил, браузер молча
      игнорирует. Этот файл вставляется в тему после стилей
      чек-листа — значит, @import не сработал бы никогда, но
      выглядел бы как работающий. Именно такие строки потом
      объясняют, почему «шрифт вроде подключён, а не грузится».

   @font-face выше остаются: у них такого ограничения нет, и
   Defectica больше нигде в теме не объявлена — без неё
   заголовки тренировки поехали бы на запасной шрифт.        */


/* =========================================================
   00. блок с содержанием тренировки
   =========================================================

   ⚠️ ЗДЕСЬ НЕТ И НЕ ДОЛЖНО БЫТЬ ПРАВИЛА, ПРЯЧУЩЕГО БЛОК ПО
   КЛАССУ. Было — и оно ломало уроки весь день 30.08.2026.

   Как ломало. GetCourse читает содержимое JS-блока как
   разметку: любой кусок текста в коде, похожий на тег,
   становится настоящим элементом внутри блока. Стоило одному
   такому элементу получить класс enl-interactive-data —
   правило из темы прятало его вместе с концом блока и
   кнопками редактора. JS-блок исчезал из конструктора: ни
   выбрать, ни отредактировать, ни удалить. Урок приходилось
   пересоздавать.

   Пока правило существует, эта мина заряжена: любой символ
   «меньше» в коде, случайно оказавшийся рядом с этим именем
   класса, снова спрячет блок.

   Поэтому блок с содержанием прячется ТОЛЬКО своим
   style="display:none" — прямо на теге, в самом блоке урока.
   Он не зависит ни от темы, ни от скриптов, работает с первого
   кадра, и никакой посторонний элемент под него не подпадёт.
   ========================================================= */

/* Панель проверки сборки. Видна только тем, у кого есть права
   на редактирование урока. Ученику не показывается.          */
.enl-interactive-check {
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #161616;
    background: #FBFBF3;
    border: 1px dashed #D9DC6A;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 18px 0;
}
.enl-interactive-check .enl-interactive-check__head {
    font-weight: 700;
    margin: 0 0 8px;
}
.enl-interactive-check__row {
    padding: 4px 0;
}
.enl-interactive-check__row--ok {
    color: #5C6100;
}
.enl-interactive-check__row--no {
    color: #A3283C;
}
/* Кнопка перехода к заданию в панели сборки. Выглядит как
   строка списка, а не как кнопка: панель служебная, лишний
   визуальный шум ей ни к чему.                              */
.enl-interactive-check__jump {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: #161616;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px dashed rgba(22, 22, 22, 0.35);
    cursor: pointer;
}
.enl-interactive-check__jump:hover {
    color: #6E6A16;
    border-bottom-color: #D9DC6A;
}
.enl-interactive-check__jump--current,
.enl-interactive-check__jump--current:hover {
    font-weight: 700;
    color: #161616;
    border-bottom-color: transparent;
    cursor: default;
}

/* ── Блок «что исправить» ──────────────────────────────────
   Панель читают в конструкторе урока, где окно html-блока
   крошечное и строки не нумеруются. Поэтому каждая ошибка
   свёрстана карточкой из четырёх частей, а не одной строкой:
   где · что не так · кусок текста для поиска · что сделать.
   Так глаз находит нужное, не перечитывая всё подряд.       */
.enl-interactive-check__subhead {
    margin: 14px 0 6px;
    font-weight: 700;
    color: #A3283C;
}
.enl-interactive-check__jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 4px 0;
}
.enl-interactive-check__fix {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #FFFFFF;
    border-left: 3px solid #A3283C;
    border-radius: 0 8px 8px 0;
}
.enl-interactive-check__fix-where {
    font-weight: 700;
}
.enl-interactive-check__fix-what {
    margin-top: 2px;
}
/* Якорь для поиска: моноширинный, чтобы отличался от объяснений,
   и выделяемый — его копируют в поиск браузера. */
.enl-interactive-check__fix-line {
    margin-top: 6px;
    padding: 5px 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.4;
    color: #454545;
    background: #F4F4EC;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: all;
}
.enl-interactive-check__fix-do {
    margin-top: 6px;
    color: #5C6100;
}

.enl-interactive-check__fix-breaks {
    margin-top: 6px;
    padding: 4px 8px;
    font-weight: 700;
    color: #A3283C;
    background: rgba(163, 40, 60, 0.08);
    border-radius: 6px;
}

.enl-interactive-check .enl-interactive-check__note {
    margin: 10px 0 0;
    font-size: 12px;
    color: #8A8A8A;
}

/* Тень, летящая за курсором при перетаскивании.

   ⚠️ Она добавляется в конец страницы, ВНЕ корня тренировки, —
   иначе её обрезали бы рамки карточки задания. Значит, до неё
   не достаёт ни одно правило, написанное через .enl-interactive,
   включая box-sizing. Без этой строки копия пункта получалась
   шире оригинала на величину отступов и рамок. */
.enl-interactive-ghost,
.enl-interactive-ghost * {
    box-sizing: border-box;
}


/* =========================================================
   01. переменные и базовые стили
   ========================================================= */
.enl-interactive {
    --enl-interactive-bg: #FDFCF3;
    --enl-interactive-text: #292929;
    --enl-interactive-muted: #77776F;
    --enl-interactive-yellow: #DDDD84;
    --enl-interactive-pink: #FED9DE;
    --enl-interactive-blue: #DBECFF;
    --enl-interactive-red: #B01513;
    --enl-interactive-white: #FFFFFF;
    --enl-interactive-border: rgba(41, 41, 41, 0.11);
    --enl-interactive-shadow: 0 22px 60px rgba(75, 67, 50, 0.12);
    width: 100%;
    max-width: 980px;
    margin: 30px auto;
    padding: 0;
    color: var(--enl-interactive-text);
    font-family: 'Raleway', Arial, sans-serif;
    box-sizing: border-box;

    /* ⚠️ Выделение текста внутри тренировки выключено. Ученик
       ведёт карточку через подписи и заголовки, и браузер по
       дороге красит их синим, а иногда и запускает собственное
       перетаскивание выделенного — тогда наш жест обрывается на
       середине и карточка остаётся приклеенной к курсору. На
       скриншоте Дарьи 31.08.2026 такое выделение видно прямо в
       строке «действие:».

       Тренировка — не текст для чтения глазами и копирования, а
       поле для нажатий: терять здесь нечего. */
    user-select: none;
    -webkit-user-select: none;
}
.enl-interactive *,
.enl-interactive *::before,
.enl-interactive *::after {
    box-sizing: border-box;
}
.enl-interactive button {
    font-family: 'Raleway', Arial, sans-serif;
}


/* =========================================================
   02. оболочка всей тренировки
   ========================================================= */
.enl-interactive__shell {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    padding: 34px;
    background: var(--enl-interactive-bg);
    border: 1px solid var(--enl-interactive-border);
    border-radius: 30px;
    box-shadow: var(--enl-interactive-shadow);
}
.enl-interactive__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    /* было 24. Шапка служебная: она называет тренировку и не
       должна занимать экран наравне с самим заданием. */
    margin-bottom: 18px;
}
.enl-interactive__eyebrow {
    /* было 8 */
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--enl-interactive-muted);
}
.enl-interactive__main-title {
    margin: 0;
    font-family: 'Defectica', 'Raleway', sans-serif;
    /* ⚠️ Было clamp(36px, 5vw, 58px) — заголовок съедал верх
       карточки и на телефоне почти всегда ломался на две строки.
       Стало на четверть мельче. Три числа означают: не мельче 28,
       обычно 3.8% ширины окна, не крупнее 44.
       Замерено на стенде: шапка целиком на 1000 px 99 → 77 px,
       на 390 px 159 → 134 px; кегль 50 → 38 и 36 → 28. Вся
       карточка тренировки стала ниже на 22 и 25 px. */
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
}


/* =========================================================
   03. прогресс
   ========================================================= */
/* ⚠️ Было: grid на РОВНО 13 колонок и ширина 214px под них.
   Тринадцать — это число форматов в инструкции, а не число
   заданий в тренировке: в тренировке их бывает пять, а бывает
   двадцать, и форматы могут повторяться. Жёсткая сетка при
   пяти заданиях оставляла пустую полосу, при двадцати —
   выпихивала точки за карточку.
   Стало: строка, которая переносится по месту.              */
.enl-interactive__progress {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 7px;
    flex: 0 1 auto;
    max-width: 214px;
    padding-top: 10px;
}
.enl-interactive__dot {
    flex: 0 0 auto;
}
.enl-interactive__dot {
    width: 10px;
    height: 10px;
    background: rgba(41, 41, 41, 0.12);
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}
.enl-interactive__dot--done {
    background: var(--enl-interactive-yellow);
}
.enl-interactive__dot--current {
    background: var(--enl-interactive-red);
    transform: scale(1.35);
}


/* =========================================================
   04. карточка текущего раунда
   ========================================================= */
.enl-interactive__round {
    position: relative;
    min-height: 465px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--enl-interactive-border);
    border-radius: 26px;
    box-shadow: 0 14px 40px rgba(75, 67, 50, 0.08);
    animation: enlInteractiveRoundIn 0.28s ease;
}
@keyframes enlInteractiveRoundIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.enl-interactive__round-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}
.enl-interactive__round-number,
.enl-interactive__subject {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 999px;
}
.enl-interactive__round-number {
    background: var(--enl-interactive-blue);
}
.enl-interactive__subject {
    background: rgba(221, 221, 132, 0.55);
}
.enl-interactive__title {
    margin: 0 0 10px;
    font-family: 'Defectica', 'Raleway', sans-serif;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 400;
    line-height: 1.05;
}
/* ⚠️ ОТСТУП ПОД СТРОКОЙ «ДЕЙСТВИЕ:» — ОДИН НА ВСЕ ФОРМАТЫ.
   Было 26 px, и в двух форматах строка прилипала к карточкам:
   в «найди соответствия» после удаления подписей столбцов и в
   «найди лишнее», где карточки начинаются сразу. Замечания
   Дарьи 31.08.2026.

   Чинится ЗДЕСЬ, а не отступом у каждой механики. Первая
   попытка добавила margin-top самой механике — и не сработала
   вовсе: соседние вертикальные отступы схлопываются, остаётся
   больший из двух, то есть те же 26 px. Замер показал 26 и до,
   и после правки; глазами я этого не увидел.

   Значение общее, чтобы форматы не разъезжались по мелочи.  */
/* ⚠️ ДВА КЛАССА В СЕЛЕКТОРЕ — НЕ КРАСОТА, А НЕОБХОДИМОСТЬ.

   Тема GetCourse содержит правило

       .block-set p { margin: 0; }

   и его вес (один класс + один тег) больше, чем у нашего
   одноклассового селектора. Тренировка лежит внутри .block-set,
   значит все наши отступы у тегов p глушились в ноль — на живом
   уроке 349767222 замерено: в файле 52 px, на экране 0.

   Именно поэтому «карточки прилипали к строке действия»: дело
   было не в маленьком отступе, а в том, что его не было вовсе,
   и прежние 38 px тоже никогда не работали на боевом.

   Предок .enl-interactive добавляет второй класс, и наш вес
   становится выше. Тот же приём ниже для двух строк панели —
   это все три места, где мы задаём тегу p ненулевой отступ. */
.enl-interactive .enl-interactive__instruction {
    max-width: 720px;
    /* ⚠️ Единственная точка, которая задаёт зазор между
       действием и содержимым задания — во всех тринадцати
       механиках. Замерено: до правки 38 px везде, ни одна
       механика своего верхнего отступа не добавляет.
       Было 38, стало 52: карточки прилипали к строке действия,
       и глаз читал их как продолжение фразы. */
    margin: 0 0 38px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--enl-interactive-muted);
}


/* =========================================================
   05. общие кнопки и обратная связь
   ========================================================= */
.enl-interactive__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 26px;
}
.enl-interactive__button {
    min-height: 46px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.enl-interactive__button:hover {
    transform: translateY(-2px);
}
.enl-interactive__button--next {
    min-width: 150px;
    color: #FFFFFF;
    background: var(--enl-interactive-red);
    box-shadow: 0 8px 20px rgba(176, 21, 19, 0.19);
}
.enl-interactive__button--back {
    color: var(--enl-interactive-text);
    background: var(--enl-interactive-blue);
}
.enl-interactive__button[disabled] {
    opacity: 0.35;
    cursor: default;
    transform: none;
}
.enl-interactive__feedback {
    margin-top: 18px;
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.45;
    background: rgba(221, 221, 132, 0.38);
    border-radius: 14px;
}


/* =========================================================
   20. заглушка будущих механик
   ========================================================= */
.enl-interactive-placeholder {
    padding: 28px;
    background: rgba(253, 252, 243, 0.72);
    border: 1px dashed rgba(41, 41, 41, 0.22);
    border-radius: 20px;
}
.enl-interactive-placeholder__type {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--enl-interactive-red);
}
.enl-interactive-placeholder__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}


/* =========================================================
   30. финальный экран
   ========================================================= */
.enl-interactive__finish {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
}
.enl-interactive__finish-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    font-size: 30px;
    background: var(--enl-interactive-yellow);
    border-radius: 50%;
}
.enl-interactive__finish h2 {
    margin: 0 0 12px;
    font-family: 'Defectica', 'Raleway', sans-serif;
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 400;
}
.enl-interactive__finish p {
    max-width: 560px;
    margin: 0 0 24px;
    line-height: 1.55;
    color: var(--enl-interactive-muted);
}


/* =========================================================
   90. адаптив
   ========================================================= */
@media (max-width: 720px) {
    .enl-interactive {
        margin: 18px auto;
    }
    .enl-interactive__shell {
        min-height: 0;
        padding: 20px 15px;
        border-radius: 22px;
    }
    .enl-interactive__top {
        display: block;
    }
    .enl-interactive__progress {
        max-width: none;
        margin-top: 18px;
    }
    .enl-interactive__round {
        min-height: 0;
        padding: 22px 17px;
        border-radius: 20px;
    }
    /* На телефоне зазор меньше: экран короткий, и 52 px
       выталкивали бы первую карточку за пределы первого
       экрана. Было 38 и там, стало 40 — прибавка есть, но
       умеренная. */
    .enl-interactive .enl-interactive__instruction {
        margin-bottom: 40px;
    }
    .enl-interactive-match {
        grid-template-columns: 1fr;
    }
    .enl-interactive-memory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .enl-interactive-memory__card {
        height: 120px;
        min-height: 120px;
    }
    .enl-interactive-memory__back {
        padding: 12px;
        font-size: 13px;
    }
    .enl-interactive__footer {
        align-items: stretch;
    }
    .enl-interactive__button {
        flex: 1;
    }
}