/* Стили урока «из видео» (шаблон). Вынесены из lab/0608.html, СКОУПЛЕНЫ под .lesson-wrap
   (иначе .topbar/.btn/.pill/.card 0608 столкнулись бы с кабинетным топбаром) и переведены
   на дизайн-токены tolearn: значения 0608-переменных сведены к палитре кабинета (акцент
   и бейджи РОЗОВЫЕ, не зелёно-синие), белые поверхности → var(--mint2) → тёмная тема
   флипается одним токеном (как уже сделано 29.06). Светлая , дефолт, тёмная , класс
   :root.dark (ключ tl_theme, общий с /me/ и /teacher/). См. feedback_lesson_template_not_inline. */

/* ── ТОКЕНЫ урока (имена 0608, значения tolearn). Скоуп .lesson-wrap , не :root,
   чтобы не перебивать токены кабинетного топбара. ── */
/* ── ШКАЛА ВЫСОТ СТРОКИ (Артур 27.08: «Высоты не должны быть дробными»; спека Макса) ──
   Множитель наследуется потомками как ЧИСЛО и пересчитывается на их кегль, поэтому дробь
   расползается: 16 × 1.9 = 30.4 у реплики диалога, 19 × 1.5 = 28.5 у заголовка раздела.
   Высоту строки задаём в пикселях. Шкала объявлена ЗДЕСЬ, потому что этот файл подключают
   и страница урока, и витрина ученика (раскрытая папка домашки); у каждого обращения стоит
   запасное значение, чтобы правило работало и там, где шкалу ещё не объявили.
   Те же имена и значения , в me/index_oneflow.php и teacher/lessons.php. */
:root{--lh-12:12px;--lh-14:14px;--lh-16:16px;--lh-18:18px;--lh-20:20px;--lh-22:22px;--lh-24:24px;--lh-26:26px;--lh-28:28px;--lh-30:30px;--lh-34:34px;--lh-36:36px;--lh-flat:1}

.lesson-wrap{
  --mint:#f9f9f9; --mint2:#ffffff; --ink:#1a1a1a; --muted:#888;
  --line:#e2e2e2; --accent:#cc1fb3; --accent-fill:#cc1fb3; --accent-bd:#f3b9ed; --badge:#fdf3fb; --badge-ink:#c01fae;
  --chip-bd:#d8d8d8; --warn:#b87d2a; --warn-bg:#fff0d4; --red:#e24b4a;
  --input:var(--line); --err:var(--red); /* поля: рамка/ошибка , алиасы ДС 16.07, резолвятся по теме */
  /* ok светлой темы усилен (редизайн упражнений, Артур 10.07: «слабо выделяются зелёным»):
     прежние #f0fdf4/#bbf2cf почти не читались на погасших парах */
  --ok-bg:#e3f7ea; --ok-bd:#5cc57e; --ok-tx:#1e7c40; --bad-bg:#fcebe7; --bad-bd:#e0917f; --bad-tx:#c0392b;
  /* ДС-кнопки (спек Макса 15.07, раскатка 16.07): hover/pressed/focus/disabled , ТОКЕНАМИ; brightness()/opacity вне закона */
  --accent-hover:#d845cb; --accent-pressed:#c232b6; --focus-ring:rgba(238,88,224,.30);
  --surface-disabled:#ededf0; --text-disabled:#a7abb5; --accent-veil:rgba(238,88,224,.06);
  color:var(--ink); font-size:16px; line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root.dark .lesson-wrap{
  --mint:#1b1e27; --mint2:#161922; --ink:#e6e8ee; --muted:#8a93a6;
  --line:#2a2f3a; --accent:#ee58e0; --accent-fill:#cc1fb3; --accent-bd:#7a2f72; --badge:rgba(238,88,224,.12); --badge-ink:#f3a8ea;
  --chip-bd:#3a3f4a; --warn:#fbbf24; --warn-bg:#2a2418; --red:#ff8a8a;
  --ok-bg:rgba(81,207,102,.16); --ok-bd:#4aa869; --ok-tx:#7be58c; --bad-bg:rgba(255,107,107,.14); --bad-bd:#a05050; --bad-tx:#ff8a8a;
  --accent-hover:#d845cb; --accent-pressed:#c232b6; --focus-ring:rgba(238,88,224,.30);
  --surface-disabled:#232734; --text-disabled:#667082; --accent-veil:rgba(238,88,224,.1);
}

/* ── Лайаут: НАТИВНАЯ одна прокрутка страницы (без iframe/100dvh). 2 колонки: урок + Notes. ── */
.lesson-wrap *{box-sizing:border-box}
/* .layout , НЕ свой центрирующий контейнер: заполняет кабинетный .app (иначе двойное
   центрирование .app(1600)⊃.layout(1480) даёт симметричные отступы по бокам, фидбэк Артура).
   Контент выравнивается по .app, как /teacher/lessons. Читающая колонка тянется (flex), Notes 480 справа. */
.lesson-wrap .layout{display:flex;gap:22px;align-items:flex-start}
.lesson-wrap .layout > .wrap{flex:1 1 auto;min-width:0;margin:0;padding:8px 0 110px}
.lesson-wrap .board{flex:0 0 480px;position:sticky;top:88px;align-self:flex-start;padding-top:22px;max-height:calc(100vh - 104px);overflow-y:auto}/* Предел высоты + своя прокрутка (Настя 22.08, спека Макса): прилипшая панель обязана помещаться в экран, иначе низ заметок недостижим. 104 = top 88 + воздух 16. Предел , на sticky-панели, НЕ на textarea (рассинхрон зеркала болда) и НЕ на .board-inner (скроллбар резал бы скругление). *//* 22 = 8 (padding-top .wrap, ужат вдвое с топнавом , Артур 14.07 п.2) + 14 (margin первой .sec): верх Notes = верх первой карточки учителя. Приёмка = замер кромок по матрице роль×режим (класс 53) */
body.student .lesson-wrap .board{padding-top:8px}
body:not(.student) .lesson-wrap .board{max-height:calc(100vh - 173px)}/* у учителя полной страницы низ отдаёт место панели публикации (savebar 69px) , оговорка №1 паса Кости 22.08. НАМЕРЕННО действует и на /me/ (домашка: body без .student) , там низ панели встаёт над фикс-баром «Отправить учителю», пере-гейт 22.08 это подтвердил замером. *//* у ученика первый блок слева , его баннер на верхнем паддинге колонки (8), Notes ровняем по нему */
.lesson-wrap .board-inner{background:var(--mint);border:0;border-radius:14px;padding:18px 18px 16px}/* Артур 15.07-v4: Notes = band --mint без рамки, как секции слева; textarea внутри остаётся --mint2-карточкой  + 05.08 Артур: внутренние отступы Notes == колонке урока , панель 18/18/16 как .sec (feedback_equal_spacing_is_visible_bands) */
.lesson-wrap .board-label{font-size:19px;line-height:var(--lh-28,28px);font-weight:600;color:var(--ink);margin:0 0 8px}/* Артур 15.07-v5: заголовок Notes полноцветный; токен --ink флипает тёмную тему */
.lesson-wrap .board-ta{display:block;width:100%;border:1px solid var(--input);border-radius:10px;padding:12px;font:inherit;font-size:15px;line-height:var(--lh-22,22px);color:var(--ink);background:var(--mint2);resize:none;overflow:hidden;min-height:160px}/* Артур 16.07: контур вернули , поле должно читаться полем (отменяет 15.07-v5 «без рамки») */
.lesson-wrap .board-ta:focus{outline:none;border-color:var(--accent)}/* канон фокуса полей: 1px --accent */
@media(max-width:900px){
  .lesson-wrap .layout{flex-direction:column;gap:0;padding:0}
  .lesson-wrap .layout > .wrap{max-width:880px;margin:0 auto;padding:18px 16px 12px}
  .lesson-wrap .board{position:static;flex:none;width:100%;max-width:880px;margin:0 auto 96px;padding:0 16px;max-height:none;overflow:visible}/* в колонке панель в потоке , предел снят, одна прокрутка страницы честная */
  body:not(.student) .lesson-wrap .board{max-height:none;overflow:visible}/* ролевое правило учителя (0,3,1) иначе перебивает этот сброс (0,2,0) , блокер-1 пере-гейта 22.08 */
}

/* Слова из прошлых уроков , подсказка-чипы у вопросов 7.x. Read-only у ученика:
   тёмный текст + сплошной бордер + белый фон (читаемо, не «выключено», фидбэк Артура 22.06). */
.lesson-wrap .usewords{display:flex;flex-wrap:wrap;gap:7px}
.lesson-wrap .uw-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent-bd);border-radius:999px;padding:5px 12px;font-size:16px;font-weight:500;color:var(--ink);background:var(--mint2);box-shadow:0 1px 2px rgba(43,58,74,.06)}/* 16px: слова = учебный материал, крупнее сервисного текста (Артур 16.07) */
.lesson-wrap .uw-chip .uw-x{appearance:none;-webkit-appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-3px -7px -3px -2px;padding:0;border-radius:50%;color:var(--muted);cursor:pointer;transition:background .12s,color .12s}/* канон-крестик чипса: SVG ghost-круг, тач 24; негативные поля , чтобы не раздуть высоту чипса */
.lesson-wrap .uw-chip .uw-x svg{width:12px;height:12px;display:block;pointer-events:none}
@media(hover:hover){.lesson-wrap .uw-chip .uw-x:hover{color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}}
.lesson-wrap .uw-chip .uw-x:active{background:color-mix(in srgb,var(--red) 18%,transparent)}
.lesson-wrap .uw-chip .uw-x:focus-visible{outline:none;box-shadow:0 0 0 1px var(--accent)}
.lesson-wrap .usewords:empty::after{content:"No words from past lessons yet.";color:var(--muted);font-size:13px}
/* Блок 7 закреплён при скролле страницы (sticky, БЕЗ собственного overflow , список целиком). */
.lesson-wrap .usewords-dock{position:sticky;top:88px;z-index:5;margin:14px 0;box-shadow:0 6px 18px rgba(43,58,74,.06)}/* Артур 16.07: в закрепе едут ТОЛЬКО слова; шапка блока 7 остаётся в потоке */
@media(max-width:900px){ .lesson-wrap .usewords-dock{position:static;box-shadow:none} }

/* PiP мини-видео (только ученик): то же <video>, в углу когда секция видео ушла вверх */
.lesson-wrap .video-dock{position:relative}
.lesson-wrap .video-dock video{width:100%;display:block}
.lesson-wrap .video-dock.mini{position:fixed;right:16px;bottom:16px;--tl-lesson-media-1-width:300px;width:var(--tl-lesson-media-1-width);max-width:42vw;z-index:30;--tl-lesson-media-2-box-shadow:0 12px 36px rgba(0,0,0,.34);box-shadow:var(--tl-lesson-media-2-box-shadow);--tl-lesson-media-3-border-radius:12px;border-radius:var(--tl-lesson-media-3-border-radius);overflow:hidden;--tl-lesson-media-4-background:#000;background:var(--tl-lesson-media-4-background)}
.lesson-wrap .video-dock .dock-x{display:none}
.lesson-wrap .video-dock.mini .dock-x{display:flex;position:absolute;top:6px;right:6px;--tl-lesson-media-5-width:24px;width:var(--tl-lesson-media-5-width);--tl-lesson-media-6-height:24px;height:var(--tl-lesson-media-6-height);--tl-lesson-media-7-border-radius:50%;border-radius:var(--tl-lesson-media-7-border-radius);--tl-lesson-media-8-background:rgba(0,0,0,.6);background:var(--tl-lesson-media-8-background);--tl-lesson-media-9-color:#fff;color:var(--tl-lesson-media-9-color);align-items:center;justify-content:center;cursor:pointer;--tl-lesson-media-10-font-size:15px;font-size:var(--tl-lesson-media-10-font-size);--tl-lesson-media-11-line-height:1;line-height:var(--tl-lesson-media-11-line-height);z-index:31}
@media(max-width:900px){ .lesson-wrap .video-dock.mini{position:static;width:100%;max-width:none;--tl-lesson-media-12-box-shadow:none;box-shadow:var(--tl-lesson-media-12-box-shadow);border-radius:0} .lesson-wrap .video-dock.mini .dock-x{display:none} }
/* Запуск видео , крупной кнопкой в центре (нативный Play в нижнем левом углу ученик ищет; Артур 22.08).
   Видна на паузе и до старта (класс vd-paused ставит setupVideoPlay), при воспроизведении и в мини-доке скрыта. */
.lesson-wrap .video-dock .vplay{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);--tl-lesson-media-13-width:72px;width:var(--tl-lesson-media-13-width);--tl-lesson-media-14-height:72px;height:var(--tl-lesson-media-14-height);--tl-lesson-media-15-border-radius:50%;border-radius:var(--tl-lesson-media-15-border-radius);--tl-lesson-media-16-border:0;border:var(--tl-lesson-media-16-border);--tl-lesson-media-17-background:rgba(0,0,0,.55);background:var(--tl-lesson-media-17-background);--tl-lesson-media-18-color:#fff;color:var(--tl-lesson-media-18-color);cursor:pointer;align-items:center;justify-content:center;--tl-lesson-media-19-padding:0;padding:var(--tl-lesson-media-19-padding);z-index:2;--tl-lesson-media-20-transition:background .15s,transform .15s;transition:var(--tl-lesson-media-20-transition)}
.lesson-wrap .video-dock.vd-paused .vplay{display:flex}
@media(hover:hover){.lesson-wrap .video-dock:not(.vd-paused):hover .vplay{display:flex}}/* игра: Pause по наведению в том же месте (Артур 22.08); на тач не липнет */
.lesson-wrap .video-dock .vplay .ic-pause{display:none}
.lesson-wrap .video-dock:not(.vd-paused) .vplay .ic-play{display:none}
.lesson-wrap .video-dock:not(.vd-paused) .vplay .ic-pause{display:block}
.lesson-wrap .video-dock.mini .vplay{display:none}
.lesson-wrap .video-dock .vplay:hover{--tl-lesson-media-21-background:rgba(0,0,0,.72);background:var(--tl-lesson-media-21-background);transform:translate(-50%,-50%) scale(1.06)}
.lesson-wrap .video-dock .vplay:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lesson-wrap .video-dock .vplay svg{--tl-lesson-media-22-width:30px;width:var(--tl-lesson-media-22-width);--tl-lesson-media-23-height:30px;height:var(--tl-lesson-media-23-height)}
.lesson-wrap .video-dock .vplay .ic-play{--tl-lesson-media-24-margin-left:4px;margin-left:var(--tl-lesson-media-24-margin-left)}/* оптический центр треугольника */

/* Слим-статус урока (бренд несёт кабинетный топбар → собственный бренд/пилл урока скрыты) */
.lesson-wrap .topbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 14px}
.lesson-wrap .topbar .brand{display:none}
.lesson-wrap #rolePill{display:none}
.lesson-wrap .lsync{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.lesson-wrap .lsync .d{width:8px;height:8px;border-radius:50%;background:#cdd;transition:background .2s}
.lesson-wrap .lsync.ok .d{background:var(--accent-fill)}.lesson-wrap .lsync.off .d{background:#cbb}.lesson-wrap .lsync.err .d{background:var(--red)}
.lesson-wrap .pill{font-size:12px;padding:4px 10px;border-radius:999px;white-space:nowrap}

body.student .lesson-wrap .teacher-only{display:none !important}

.lesson-wrap .sec{background:var(--mint);--tl-lesson-section-1-border-radius:16px;border-radius:var(--tl-lesson-section-1-border-radius);--tl-lesson-section-2-padding:18px 18px 16px;padding:var(--tl-lesson-section-2-padding);--tl-lesson-section-3-margin:14px 0;margin:var(--tl-lesson-section-3-margin)}
.lesson-wrap .sec-head{display:flex;align-items:center;--tl-lesson-section-4-gap:10px;gap:var(--tl-lesson-section-4-gap);--tl-lesson-section-5-margin-bottom:6px;margin-bottom:var(--tl-lesson-section-5-margin-bottom)}
/* Shared subsection heading: the homework 3.1/3.2 content starts 16px below it. */
.lesson-wrap .hw-sub-head{display:flex;align-items:baseline;gap:8px;margin:0 0 16px}
.lesson-wrap .hw-sub-num{color:var(--accent);font-weight:700;font-size:15px;line-height:var(--lh-20,20px)}
.lesson-wrap .hw-sub-name{margin:0;font-size:17px;font-weight:700;line-height:var(--lh-20,20px)}
.lesson-wrap .num{background:var(--badge);color:var(--accent);font-weight:700;font-size:19px;line-height:var(--lh-28,28px);padding:2px 9px;border-radius:8px}/* Артур 15.07-v3: номер = кегль заголовка (19px), цвет как +add (--accent) */
.lesson-wrap .num.star{background:var(--warn-bg);color:var(--warn)}
/* «What to focus on» (только учитель) , приглушённый нейтральный фон. */
.lesson-wrap .sec.teacher-only{background:var(--mint)}/* Артур 15.07-v2: focus как обычная секция (без своей заливки/рамки) */
/* (убрано .sec.teacher-only .card{--mint}: focus-карточка теперь --mint2/белая, как все, чтобы п.7 совпадал с focus , Артур 15.07-v2) */
.lesson-wrap .sec.teacher-only h2{color:var(--ink);--tl-lesson-section-6-font-weight:700;font-weight:var(--tl-lesson-section-6-font-weight)}/* Артур 15.07-v2: заголовок focus как у других (чёрный/белый, 700) */
.lesson-wrap .sec.teacher-only .num.star{background:var(--badge);color:var(--accent)}/* Артур 15.07-v3: ★-бейдж в тонах пилюли/номеров (розовый фон, --accent иконка) */
.lesson-wrap .sec h2{--tl-lesson-section-7-font-size:19px;font-size:var(--tl-lesson-section-7-font-size);--tl-lesson-section-8-margin:0;margin:var(--tl-lesson-section-8-margin);--tl-lesson-section-9-font-weight:700;font-weight:var(--tl-lesson-section-9-font-weight);line-height:var(--lh-28,28px)}
.lesson-wrap .sec .hint{color:var(--muted);--tl-lesson-section-10-font-size:13.5px;font-size:var(--tl-lesson-section-10-font-size);line-height:var(--lh-20,20px);--tl-lesson-section-11-margin:2px 0 10px;margin:var(--tl-lesson-section-11-margin)}
.lesson-wrap .card{background:var(--mint2);--tl-lesson-card-1-border:0;border:var(--tl-lesson-card-1-border);--tl-lesson-card-2-border-radius:12px;border-radius:var(--tl-lesson-card-2-border-radius);--tl-lesson-card-3-padding:12px 12px;padding:var(--tl-lesson-card-3-padding)}/* Артур 15.07-v2: карточка залита поверхностью (белый в светлой), без обводки */
.lesson-wrap video,.lesson-wrap .video-ph{width:100%;aspect-ratio:16/9;max-height:60vh;object-fit:contain;--tl-lesson-media-25-border-radius:12px;border-radius:var(--tl-lesson-media-25-border-radius);--tl-lesson-media-26-background:#000;background:var(--tl-lesson-media-26-background);display:block}
.lesson-wrap ul.q{margin:6px 0 0;padding:0;list-style:none}
.lesson-wrap ul.q li{position:relative;padding:9px 12px;border-bottom:1px solid var(--line);font-size:16px}/* единый кегль контент-текста 16 (Артур 24.07; было 18) */
.lesson-wrap ul.q.editable li{padding-right:92px}
.lesson-wrap ul.q li:last-child{border-bottom:0}
.lesson-wrap ul.q li[contenteditable]{outline:none}
.lesson-wrap ul.q li.done{background:var(--ok-bg)}
.lesson-wrap .item-tools{position:absolute;right:8px;top:7px;display:flex;gap:4px;opacity:.85}
.lesson-wrap .ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 auto;cursor:pointer;border:1px solid var(--line);background:var(--mint2);border-radius:50%;color:var(--muted);transition:border-color .12s,color .12s;user-select:none}/* икон-кнопка урока: круглый бордер (намеренное отступление Артура) + моно-SVG */
.lesson-wrap .ic:hover{border-color:var(--accent);color:var(--accent)}
.lesson-wrap .ic svg{width:14px;height:14px}
.lesson-wrap .ic.on{background:var(--accent-fill);color:#fff;border-color:var(--accent)}
.lesson-wrap .focus b{color:var(--ink)}
.lesson-wrap .focus .why{color:var(--muted);font-size:13.5px;line-height:var(--lh-20,20px)}
.lesson-wrap .tag{font-size:11px;line-height:var(--lh-16,16px);border:1px solid var(--accent-bd);color:var(--accent);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.lesson-wrap .tag-novid{border-color:var(--bad-bd);color:var(--warn)}
/* ── банк слов + слоты пропусков: дизайн-язык прототипа v3 (Duolingo word-bank).
   Таблетки с нижним «ободком»; использованная НЕ удаляется , остаётся пунктирная «ямка»
   (.used). Слот , линия в тексте; при переносе (drag ИЛИ выбранное тапом слово, классы
   .card.dragging/.placing) свободные слоты раскрываются пунктирными площадками , зона
   приёма = вся строка/пузырь, целиться не нужно (Артур 10.07, два захода). ── */
.lesson-wrap .bank,.lesson-wrap .gbank{display:flex;flex-wrap:wrap;--tl-answer-common-1-gap:8px;gap:var(--tl-answer-common-1-gap)}
.lesson-wrap .bank{--tl-answer-common-2-margin:0 0 16px;margin:var(--tl-answer-common-2-margin)}
.lesson-wrap .gbank{--tl-answer-common-3-margin-top:0;margin-top:var(--tl-answer-common-3-margin-top)}
.lesson-wrap .bank-sticky{position:sticky;top:88px;z-index:5;background:var(--mint2);--tl-answer-common-4-padding:12px 0;padding:var(--tl-answer-common-4-padding);--tl-answer-common-5-margin:-12px 0 8px;margin:var(--tl-answer-common-5-margin);--tl-answer-common-6-box-shadow:0 10px 12px -12px rgba(0,0,0,.18);box-shadow:var(--tl-answer-common-6-box-shadow)}
@media(max-width:900px){ .lesson-wrap .bank-sticky{top:0} }
/* Один компонент ответа: исходный CSS Vocabulary, recall the word используется
   также банком слов, слотами и выданным первым словом. Ниже — только механика. */
.lesson-wrap .gopt,
.lesson-wrap .word,
.lesson-wrap .gap,
.lesson-wrap .stq .stq-first{display:inline-flex;align-items:center;justify-content:center;text-align:center;max-width:100%;white-space:normal;background:var(--mint2);border:1px solid var(--line);--tl-answer-common-7-border-radius:10px;border-radius:var(--tl-answer-common-7-border-radius);box-shadow:0 1px 0 var(--line);padding:var(--answer-padding-y) var(--answer-padding-x);--tl-answer-common-8-font-size:16px;font-size:var(--tl-answer-common-8-font-size);--tl-answer-common-9-font-weight:400;font-weight:var(--tl-answer-common-9-font-weight);line-height:var(--lh-24,24px);color:var(--ink);cursor:pointer;user-select:none;--tl-answer-common-10-transition:border-color .12s, background .12s, transform .05s, opacity .25s;transition:var(--tl-answer-common-10-transition)}
.lesson-wrap .word{cursor:grab}
.lesson-wrap .word:hover{border-color:var(--accent-bd)}
.lesson-wrap .word.sel{border-color:var(--accent);background:var(--badge);box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .word:active{cursor:grabbing}
.lesson-wrap .word.drag{--tl-answer-common-11-opacity:.5;opacity:var(--tl-answer-common-11-opacity)}
.lesson-wrap .word.used{border-style:dashed;--tl-answer-common-12-box-shadow:none;box-shadow:var(--tl-answer-common-12-box-shadow);background:var(--mint);--tl-answer-common-13-color:transparent;color:var(--tl-answer-common-13-color);--tl-answer-common-14-opacity:.35;opacity:var(--tl-answer-common-14-opacity);pointer-events:none}
@keyframes tlshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.lesson-wrap .line{--tl-lesson-speaker-1-margin:12px 0;margin:var(--tl-lesson-speaker-1-margin);--tl-lesson-speaker-2-font-size:16px;font-size:var(--tl-lesson-speaker-2-font-size);line-height:var(--lh-34,34px)}
/* диалог упр.4: who справа-выравнен + реплика-«пузырь» (зона приёма) */
.lesson-wrap .dlg .line{display:flex;--tl-lesson-speaker-3-gap:6px;gap:var(--tl-lesson-speaker-3-gap);align-items:baseline;--tl-lesson-speaker-4-margin:0 0 14px;margin:var(--tl-lesson-speaker-4-margin);--tl-lesson-speaker-5-font-size:16px;font-size:var(--tl-lesson-speaker-5-font-size);line-height:var(--lh-30,30px)}/* Артур 15.07-v2: роль↔цитата ближе; кегль 16 , Артур 24.07 */
.lesson-wrap .who{color:var(--muted);--tl-lesson-speaker-6-font-weight:600;font-weight:var(--tl-lesson-speaker-6-font-weight);--tl-lesson-speaker-7-margin-right:4px;margin-right:var(--tl-lesson-speaker-7-margin-right)}
.lesson-wrap .dlg .who{flex:0 0 74px;text-align:right;--tl-lesson-speaker-8-margin:0;margin:var(--tl-lesson-speaker-8-margin);white-space:nowrap}/* 05.08 Артур: fallback-лейбл «Speaker A» (2 слова) не переносить на 2 строки; 74px держит выравнивание бабблов, широкий лейбл чуть выступает влево , приемлемо (артефакт неатрибутированной диаризации) */
.lesson-wrap .bubble{flex:1;min-width:0;background:var(--mint);--tl-lesson-speaker-9-border:0;border:var(--tl-lesson-speaker-9-border);--tl-lesson-speaker-10-border-radius:14px;border-radius:var(--tl-lesson-speaker-10-border-radius);--tl-lesson-speaker-11-padding:12px 18px;padding:var(--tl-lesson-speaker-11-padding)}/* Артур 15.07-v2: без рамки */
:root.dark .lesson-wrap .bubble{--tl-lesson-speaker-12-background:rgba(255,255,255,.03);background:var(--tl-lesson-speaker-12-background)}
.lesson-wrap select.who-edit{font:inherit;--tl-speaker-select-base-font-weight:400;font-weight:var(--tl-speaker-select-base-font-weight);color:var(--ink);--tl-speaker-select-base-margin-right:4px;margin-right:var(--tl-speaker-select-base-margin-right);border:1px dashed var(--line);--tl-speaker-select-base-border-radius:6px;border-radius:var(--tl-speaker-select-base-border-radius);--tl-speaker-select-base-padding:1px 24px 1px 8px;padding:var(--tl-speaker-select-base-padding);background-color:var(--mint2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.5l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;-webkit-appearance:none;appearance:none;cursor:pointer}/* Артур 15.07-v3: кастомная стрелка , зазор справа 8px = текст слева 8px (симметрия) */
.lesson-wrap .dlg select.who-edit{flex:0 0 auto;--tl-lesson-speaker-13-margin:0;margin:var(--tl-lesson-speaker-13-margin);--tl-lesson-speaker-14-max-width:120px;max-width:var(--tl-lesson-speaker-14-max-width)}
/* Рычаг B (05.08): снекбар «переименовать весь кластер спикера» после точечной правки who , theme-safe surface, фикс снизу-центр, survive renderTr (сосед #trLines) */
.lesson-wrap .who-bulk{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:130;display:flex;align-items:center;--tl-lesson-speaker-15-gap:12px;gap:var(--tl-lesson-speaker-15-gap);max-width:min(560px,92vw);--tl-lesson-speaker-16-padding:10px 12px 10px 16px;padding:var(--tl-lesson-speaker-16-padding);background:var(--mint2);color:var(--ink);border:1px solid var(--line);--tl-lesson-speaker-17-border-radius:12px;border-radius:var(--tl-lesson-speaker-17-border-radius);--tl-lesson-speaker-18-box-shadow:0 14px 40px rgba(0,0,0,.18);box-shadow:var(--tl-lesson-speaker-18-box-shadow);--tl-lesson-speaker-19-font-size:14px;font-size:var(--tl-lesson-speaker-19-font-size);--tl-lesson-speaker-20-line-height:1.4;line-height:var(--tl-lesson-speaker-20-line-height)}
.lesson-wrap .who-bulk[hidden]{display:none}
.lesson-wrap .who-bulk-txt{flex:1 1 auto;min-width:0}
.lesson-wrap .who-bulk-yes{flex:0 0 auto;--tl-lesson-speaker-21-border:0;border:var(--tl-lesson-speaker-21-border);--tl-lesson-speaker-22-border-radius:8px;border-radius:var(--tl-lesson-speaker-22-border-radius);background:var(--accent-fill);--tl-lesson-speaker-23-color:#fff;color:var(--tl-lesson-speaker-23-color);font:inherit;--tl-lesson-speaker-24-font-size:13px;font-size:var(--tl-lesson-speaker-24-font-size);--tl-lesson-speaker-25-font-weight:600;font-weight:var(--tl-lesson-speaker-25-font-weight);--tl-lesson-speaker-26-padding:7px 14px;padding:var(--tl-lesson-speaker-26-padding);cursor:pointer;white-space:nowrap}
.lesson-wrap .who-bulk-x{flex:0 0 auto;--tl-lesson-speaker-27-border:0;border:var(--tl-lesson-speaker-27-border);--tl-lesson-speaker-28-background:transparent;background:var(--tl-lesson-speaker-28-background);color:var(--muted);--tl-lesson-speaker-29-font-size:20px;font-size:var(--tl-lesson-speaker-29-font-size);--tl-lesson-speaker-30-line-height:1;line-height:var(--tl-lesson-speaker-30-line-height);cursor:pointer;--tl-lesson-speaker-31-padding:0 4px;padding:var(--tl-lesson-speaker-31-padding)}
/* Общий слот: размер варианта .gopt (42px/48px), неизменная геометрия во всех состояниях.
   Невидимый ответ заранее резервирует ширину, чтобы заполнение не двигало строку. */
.lesson-wrap{--answer-build-slot-width:68px;--answer-slot-height:42px;--answer-padding-y:8px;--answer-padding-x:14px}
@media(max-width:640px){.lesson-wrap{--answer-slot-height:48px;--answer-padding-y:11px;--answer-padding-x:16px}}
.lesson-wrap .gap{flex:0 0 auto;box-sizing:border-box;height:var(--answer-slot-height);min-width:var(--answer-token-min-width,0);max-width:none;--tl-answer-common-15-margin:0 3px;margin:var(--tl-answer-common-15-margin);vertical-align:middle;white-space:nowrap}
.lesson-wrap .gap:not(.filled){min-height:42px;min-width:0;width:var(--answer-token-empty-width,auto);border:1px dashed var(--chip-bd);--tl-answer-common-16-background:transparent;background:var(--tl-answer-common-16-background);--tl-answer-common-17-box-shadow:none;box-shadow:var(--tl-answer-common-17-box-shadow);touch-action:none}
.lesson-wrap .gap:not(.filled)::before{content:"\200B" attr(data-ans);visibility:hidden}
.lesson-wrap .gbank .word,.lesson-wrap .bank .word{touch-action:none}   /* жест ведём мы: без этого браузер забирает касание прокрутке ещё до порога сдвига */
/* Слово выбрано или его несут , места, куда его можно положить, наливаются акцентом. */
.lesson-wrap .card.dragging .gap:not(.filled),.lesson-wrap .card.placing .gap:not(.filled),.lesson-wrap .hw-ex-bare.dragging .gap:not(.filled),.lesson-wrap .hw-ex-bare.placing .gap:not(.filled),.lesson-wrap .gitem.dragging .gap:not(.filled),.lesson-wrap .gitem.placing .gap:not(.filled){border-color:var(--accent-bd);background:var(--badge)}
/* Место под пальцем или курсором и место, выбранное первым («сначала место, потом слово») , ярче
   соседних и с кольцом фокуса. Кольцо , тень, в габарит не входит. Заливка та же, что у мест «можно
   положить» и у выбранного слова (.word.sel), отличие несут рамка --accent и кольцо. Контейнеры
   перечислены ради веса: правило обязано перебить подсветку выше. */
.lesson-wrap :is(.card,.hw-ex-bare,.gitem) .gap.dragover:not(.filled),.lesson-wrap :is(.card,.hw-ex-bare,.gitem) .gap.active:not(.filled){border-color:var(--accent);background:var(--badge);box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .gap.filled{cursor:grab}
.lesson-wrap .gap.filled::before{content:none}
/* Build tiles never reveal answer length. State-only changes keep geometry fixed;
   a confirmed long token may naturally grow, while short tokens retain the minimum. */
.lesson-wrap .gitem--tiles{--answer-token-min-width:var(--answer-build-slot-width);--answer-token-empty-width:var(--answer-build-slot-width)}
.lesson-wrap .gitem--tiles .gap:not(.filled)::before{content:none}
:root{--reader-prose-font:-apple-system-body,ui-sans-serif,-apple-system,system-ui,'Segoe UI',Helvetica,'Apple Color Emoji',Arial,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}
.lesson-wrap.hw-context-item{color:var(--ink);--context-muted:#777;--answer-padding-y:8px;--answer-padding-x:14px;container-type:inline-size;min-width:0;margin:0;padding:0;background:transparent;border:0;border-radius:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:16px;font-weight:400;line-height:24px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:anywhere}
:root.dark .lesson-wrap.hw-context-item{--context-muted:#a8b0c0}
.hw-context-item p{font-family:var(--reader-prose-font);margin:0 0 16px}.hw-context-item p:last-child{margin-bottom:0}
/* One readonly item is a shared native variant; it never needs grammar/feature CSS. */
.lesson-wrap.hw-context-item .ctx-answer{height:auto;min-height:42px;max-width:100%;white-space:normal;margin:0;vertical-align:middle;cursor:default;user-select:text;transition:none}
.lesson-wrap.hw-context-item .ctx-answer.ctx-first{background:var(--mint);border-color:var(--line);box-shadow:none;color:var(--ink)}
.lesson-wrap.hw-context-item .ctx-answer.ctx-inline{margin:2px 3px}
.lesson-wrap.hw-context-item .ctx-answer.is-hinted{border-style:dashed}
.hw-context-item .ctx-line{line-height:24px}
.hw-context-item .ctx-tokens{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:3px;margin:-3px}
.hw-context-item .ctx-pair{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,2fr);gap:12px}
.lesson-wrap.hw-context-item .tile{min-width:0;--tl-answer-match-1-padding:8px 14px;padding:var(--tl-answer-match-1-padding);white-space:normal;overflow-wrap:anywhere;cursor:default;--tl-answer-match-2-transition:none;transition:var(--tl-answer-match-2-transition);pointer-events:none}
.hw-context-item .ctx-choice{line-height:24px}.hw-context-item .ctx-legacy-choice{line-height:30px}
.hw-context-item .ctx-hole{color:var(--ok-bd);font-weight:600}
.hw-context-item .ctx-grammar-pair{gap:10px;align-items:start}
.lesson-wrap.hw-context-item .ctx-grammar-pair .tile{--tl-answer-match-3-line-height:22px;line-height:var(--tl-answer-match-3-line-height);--tl-answer-match-4-padding:8px 14px;padding:var(--tl-answer-match-4-padding);min-height:0}
.lesson-wrap.hw-context-item .ctx-grammar-pair .term{font-weight:600}
.hw-context-item .ctx-dialogue{display:flex;gap:6px;align-items:baseline}
.hw-context-item .ctx-who{flex:0 0 74px;text-align:right;color:var(--muted);font-weight:600}
.hw-context-item .ctx-bubble{flex:1;min-width:0;background:var(--mint);border-radius:14px;padding:12px 18px;line-height:30px}
.hw-context-item .ctx-rewrite-row{display:flex;align-items:flex-start;gap:8px;margin-top:10px;flex-wrap:wrap}
.hw-context-item .ctx-rewrite-start{font-size:16px;font-weight:600;white-space:nowrap}
.hw-context-item .ctx-rewrite{flex:1;min-width:min(180px,100%);border:1px solid var(--ok-bd);border-radius:10px;background:var(--ok-bg);color:var(--ok-tx);padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:24px}
.hw-context-item .ctx-note{font-size:13px;line-height:20px;margin:10px 0 0!important;color:var(--context-muted)}
/* 558px usable content equals the approved 600px window minus its border/padding. */
@container(max-width:558px){.hw-context-item .ctx-pair{grid-template-columns:minmax(0,1fr)}.lesson-wrap.hw-context-item .tile{--tl-answer-match-5-min-height:44px;min-height:var(--tl-answer-match-5-min-height);--tl-answer-match-6-padding:11px 16px;padding:var(--tl-answer-match-6-padding)}.lesson-wrap.hw-context-item .ctx-answer:not(.ctx-first){min-height:44px}.hw-context-item .ctx-dialogue{display:block}.hw-context-item .ctx-who{display:block;text-align:left;margin-bottom:6px}}
/* верный ответ фиксируется и лочится (канон v9: переиграть нельзя, как в прототипе) */
.lesson-wrap .gap.filled.ok{pointer-events:none}
.lesson-wrap .switcher{display:inline-flex;border:1px solid var(--line);--tl-domain-toggle-group-border-radius:999px;border-radius:var(--tl-domain-toggle-group-border-radius);overflow:hidden;background:var(--mint2)}
.lesson-wrap .switcher button{--tl-domain-toggle-button-border:0;border:var(--tl-domain-toggle-button-border);background:var(--mint2);color:var(--muted);font:inherit;--tl-domain-toggle-button-font-size:12.5px;font-size:var(--tl-domain-toggle-button-font-size);--tl-domain-toggle-button-padding:5px 12px;padding:var(--tl-domain-toggle-button-padding);cursor:pointer}
.lesson-wrap .switcher button.active{background:var(--accent-fill);--tl-domain-toggle-selected-color:#fff;color:var(--tl-domain-toggle-selected-color)}
.lesson-wrap .qtext{padding:1px 3px}
.lesson-wrap .qedit{border:1px solid var(--input);border-radius:10px;padding:6px 10px;font:inherit;font-size:15px;width:70%;max-width:520px}/* покой нейтральный (--accent-bd читался как «уже активно»); фокус красит в --accent */
.lesson-wrap .qok{margin-left:8px}
.lesson-wrap details.script{background:var(--mint2);border:1px solid var(--line);border-radius:12px;padding:0 14px;margin-top:12px}
.lesson-wrap details.script summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none;outline:none}
.lesson-wrap details.script summary::-webkit-details-marker{display:none}
.lesson-wrap details.script summary::before{content:"\25B8\A0";color:var(--accent)}/* \25B8=▸ +nbsp; ASCII-escape, НЕ raw-глиф (CSS без charset → Latin-1 моджибейк «â–¸», баг 06.08) */
.lesson-wrap details.script[open] summary::before{content:"\25BE\A0"}/* \25BE=▾ */
.lesson-wrap .script .sline{padding:6px 0;border-bottom:1px solid var(--line);line-height:1.45;font-size:16px}/* единый кегль контент-текста 16 (Артур 24.07; было 18) */
.lesson-wrap .script .sline:last-child{border-bottom:0;padding-bottom:12px}
.lesson-wrap .script ::selection{background:var(--accent-bd)}
.lesson-wrap .addrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:flex-start}/* БАГ-3 гейта 22.07: дефолтный stretch раздувал сосед-поле, taGrow мерил растянутую высоту */
.lesson-wrap .addrow input,.lesson-wrap .addrow textarea{flex:1 1 180px;border:1px solid var(--input);border-radius:10px;padding:7px 10px;font-size:14px;line-height:var(--lh-20,20px);background:var(--mint2);color:var(--ink)}
.lesson-wrap .addrow input::placeholder,.lesson-wrap .addrow textarea::placeholder{color:var(--muted)}
.lesson-wrap .addrow input:focus,.lesson-wrap .addrow textarea:focus,.lesson-wrap .fedit:focus,.lesson-wrap .qedit:focus,.lesson-wrap select.who-edit:focus{outline:none;border-color:var(--accent)}/* канон фокуса: 1px фирменным, как .nl-input/.hw-input/.search по платформе; раньше поля были без фокус-стиля , браузер рисовал синий дефолт (скрин Артура 15.07) */
.lesson-wrap .btn{display:inline-flex;align-items:center;justify-content:center;--tl-lesson-action-base-gap:8px;gap:var(--tl-lesson-action-base-gap);--tl-lesson-action-base-height:32px;height:var(--tl-lesson-action-base-height);border:1px solid var(--line);background:var(--mint2);--tl-lesson-action-base-border-radius:10px;border-radius:var(--tl-lesson-action-base-border-radius);--tl-lesson-action-base-padding:0 12px;padding:var(--tl-lesson-action-base-padding);--tl-lesson-action-base-font-size:13px;font-size:var(--tl-lesson-action-base-font-size);--tl-lesson-action-base-font-weight:500;font-weight:var(--tl-lesson-action-base-font-weight);--tl-lesson-action-base-line-height:1;line-height:var(--tl-lesson-action-base-line-height);white-space:nowrap;--tl-lesson-action-base-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:var(--tl-lesson-action-base-box-shadow);cursor:pointer;color:var(--ink)}/* анатомия shadcn sm (порт 16.07): 13px<15px упражнений<18px текста , лестница цела */
/* ДС-состояния (Макс 15.07): hover , токеном и только под hover:hover (тач не залипает); pressed , свой
   токен + 1px вниз БЕЗ scale; фокус , :focus-visible кольцом --focus-ring (у ПОЛЕЙ канон другой , 1px
   --accent, строка выше; осознанное разделение); disabled , токенами, НЕ opacity. */
@media(hover:hover){.lesson-wrap .btn:hover:not([aria-disabled]):not(:disabled){background:var(--accent-veil)}}/* канон-ховер outline 16.07 (Макс по вопросу Артура): вуаль фоном, рамка неизменна , порозовение рамки слепнет на accent-outline подвидах */
.lesson-wrap .btn:active:not([aria-disabled]):not(:disabled){border-color:var(--accent-bd);background:var(--badge);transform:translateY(1px)}
.lesson-wrap .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .btn[aria-disabled]:not(.is-loading),.lesson-wrap .btn:disabled:not(.is-loading){color:var(--text-disabled);cursor:not-allowed}
.lesson-wrap .btn.primary{background:var(--accent-fill);--tl-lesson-action-primary-color:#fff;color:var(--tl-lesson-action-primary-color);border-color:var(--accent)}
@media(hover:hover){.lesson-wrap .btn.primary:hover:not([aria-disabled]):not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}}
.lesson-wrap .btn.primary:active:not([aria-disabled]):not(:disabled){background:var(--accent-pressed);border-color:var(--accent-pressed);transform:translateY(1px)}
.lesson-wrap .btn.primary[aria-disabled]:not(.is-loading),.lesson-wrap .btn.primary:disabled:not(.is-loading){background:var(--surface-disabled);border-color:var(--surface-disabled);color:var(--text-disabled)}/* :not(.is-loading) ОБЯЗАТЕЛЕН: савбар лежит ВНУТРИ .lesson-wrap, без него серый disabled перекрывает loading-вид pubBtn */
.lesson-wrap .sechead-tools{margin-left:auto;display:flex;gap:6px}
.lesson-wrap .note{font-size:12.5px;color:var(--muted);margin-top:8px;font-style:italic}

/* savebar (учитель): фиксированная панель публикации, dirty-кнопка */
.savebar{position:fixed;left:0;right:0;bottom:0;background:var(--mint2,#fff);border-top:1px solid var(--line,#e2e2e2);backdrop-filter:blur(6px);padding:12px 16px;display:flex;align-items:center;gap:14px;justify-content:center;z-index:120}
.savebar .pubNote{font-size:13px;color:var(--muted,#888)}
.savebar .btn{display:inline-flex;align-items:center;justify-content:center;--tl-form-action-base-gap:8px;gap:var(--tl-form-action-base-gap);--tl-form-action-base-height:36px;height:var(--tl-form-action-base-height);border:1px solid var(--line,#e2e2e2);background:var(--mint2,#fff);--tl-form-action-base-border-radius:10px;border-radius:var(--tl-form-action-base-border-radius);--tl-form-action-base-padding:0 16px;padding:var(--tl-form-action-base-padding);--tl-form-action-base-font-size:14px;font-size:var(--tl-form-action-base-font-size);--tl-form-action-base-font-weight:500;font-weight:var(--tl-form-action-base-font-weight);--tl-form-action-base-line-height:1;line-height:var(--tl-form-action-base-line-height);white-space:nowrap;--tl-form-action-base-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:var(--tl-form-action-base-box-shadow);cursor:pointer;color:var(--ink,#1a1a1a)}/* анатомия shadcn default: савбар = самое тяжёлое действие страницы */
.savebar .btn.primary{background:var(--accent-fill,#cc1fb3);--tl-form-action-primary-color:#fff;color:var(--tl-form-action-primary-color);border-color:var(--accent,#ee58e0)}
/* ДС-состояния савбара (16.07). Савбар живёт вне .lesson-wrap , токены с фолбэками, тьма , явным правилом ниже. */
@media(hover:hover){.savebar .btn.primary:hover:not([aria-disabled]){background:var(--accent-hover,#d845cb);border-color:var(--accent-hover,#d845cb)}}
.savebar .btn.primary:active:not([aria-disabled]){background:var(--accent-pressed,#c232b6);border-color:var(--accent-pressed,#c232b6);transform:translateY(1px)}
.savebar .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring,rgba(238,88,224,.30))}
.savebar .btn.primary[aria-disabled]:not(.is-loading){background:var(--surface-disabled,#ededf0);border-color:var(--surface-disabled,#ededf0);color:var(--text-disabled,#a7abb5);cursor:not-allowed}
:root.dark .savebar .btn.primary[aria-disabled]:not(.is-loading){--tl-form-action-dark-disabled-background:#232734;background:var(--tl-form-action-dark-disabled-background);--tl-form-action-dark-disabled-border-color:#232734;border-color:var(--tl-form-action-dark-disabled-border-color);--tl-form-action-dark-disabled-color:#667082;color:var(--tl-form-action-dark-disabled-color)}
/* loading (pubSaving в lesson.js): цвета default + спиннер, клики отрезаны */
.savebar .btn.is-loading{pointer-events:none}
.savebar .btn .spin{display:inline-block;--tl-form-action-spinner-width:13px;width:var(--tl-form-action-spinner-width);--tl-form-action-spinner-height:13px;height:var(--tl-form-action-spinner-height);--tl-form-action-spinner-border-radius:50%;border-radius:var(--tl-form-action-spinner-border-radius);border:2px solid currentColor;--tl-form-action-spinner-border-top-color:transparent;border-top-color:var(--tl-form-action-spinner-border-top-color);animation:tlspin .7s linear infinite;flex:0 0 auto}/* flex-кнопка: центрирование и gap вместо vertical-align/margin */
@keyframes tlspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.savebar .btn .spin{animation:none}}
:root.dark .savebar{background:#161922;border-color:#2a2f3a}
:root.dark .savebar .pubNote{color:#8a93a6}

/* ── match (упр.1) + recall/grammar (упр.5/6): дизайн-язык прототипа v3 (10.07).
   Тайлы-карточки с нижним «ободком»; match = грид пар слово|значение, tap-tap, верная
   пара зеленеет и гаснет (.done, opacity .62); прежние mdef/mslot/mword-стили заменены
   вместе с рендером. Розовый 1px-бордер опций (Артур 01.07) поглощён tap-состоянием
   .tile (hover/sel в фирменном цвете). ── */
.lesson-wrap .match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 20px;align-items:stretch}
.lesson-wrap .match>.tile{min-width:0;overflow-wrap:anywhere}
.lesson-wrap .tile{display:flex;align-items:center;justify-content:flex-start;text-align:left;background:var(--mint2);border:1px solid var(--line);--tl-answer-match-7-border-radius:10px;border-radius:var(--tl-answer-match-7-border-radius);box-shadow:0 1px 0 var(--line);--tl-answer-match-8-padding:8px 14px;padding:var(--tl-answer-match-8-padding);--tl-answer-match-9-font-size:16px;font-size:var(--tl-answer-match-9-font-size);color:var(--ink);cursor:pointer;--tl-answer-match-10-transition:border-color .12s, background .12s, transform .05s, opacity .25s;transition:var(--tl-answer-match-10-transition)}/* кегль 16 (Артур 24.07); ряд кнопок вариантов. 05.08 Артур: user-select:none СНЯТ , фразы/определения = учебный контент, копирование разрешено (tap-механика от выделения не страдает), feedback_learning_text_selectable_and_behavior_ports */
.lesson-wrap .tile:hover{border-color:var(--accent-bd)}
.lesson-wrap .tile:active{transform:translateY(1px);box-shadow:0 1px 0 var(--line)}
.lesson-wrap .tile.sel{border-color:var(--accent);background:var(--badge);box-shadow:0 1px 0 var(--accent-bd)}
.lesson-wrap .tile.ok{border-color:var(--ok-bd);background:var(--ok-bg);color:var(--ok-tx);box-shadow:0 1px 0 var(--ok-bd)}
.lesson-wrap .tile.done{--tl-answer-match-11-opacity:1;opacity:var(--tl-answer-match-11-opacity);pointer-events:none}/* Артур 15.07-v3: решённая пара матча , полный зелёный (как кнопки п.2), не выцветает; лок сохранён */
.lesson-wrap .tile.bad{border-color:var(--bad-bd);background:var(--bad-bg);color:var(--bad-tx);box-shadow:0 1px 0 var(--bad-bd);animation:tlshake .35s}
.lesson-wrap .tile.term{--tl-answer-match-12-font-weight:700;font-weight:var(--tl-answer-match-12-font-weight)}
/* recall/grammar: все задания сразу, разделители между ними; вопрос крупный без подложки */
.lesson-wrap .gitem{padding:14px 0;margin:0}
/* Артур 15.07-v4: разделитель между вопросами пунктов 5/6 убран (без border-top; вопросы разносит padding:14px) */
.lesson-wrap .gitem:first-child{padding-top:6px}
.lesson-wrap .gq{font-size:16px;line-height:var(--lh-24,24px);font-weight:400;margin:0 0 14px}/* Артур 15.07: основной текст пунктов 5/6 не жирный; кегль 16 , Артур 24.07 */
.lesson-wrap .gq .qn{color:var(--ink);font-weight:400;margin-right:8px}/* Артур 15.07-v2: номера п.5/6 не жирные, ink (белый/чёрный) */
.lesson-wrap .gq.gram{font-weight:400;line-height:var(--lh-30,30px)}
/* Сборка предложения использует общий рецепт .gap; состояния меняют только цвета. */
.lesson-wrap .stq .stq-line{display:flex;flex-wrap:wrap;align-items:center;--tl-answer-build-1-gap:8px;gap:var(--tl-answer-build-1-gap);--tl-answer-build-2-padding:3px;padding:var(--tl-answer-build-2-padding);--tl-answer-build-3-margin:-3px -3px 11px;margin:var(--tl-answer-build-3-margin);overflow-x:auto}/* место для донорской тени и кольца фокуса; позиции слов и банка сохраняются */
.lesson-wrap .gitem.stq .stq-line .gap{--tl-answer-common-18-margin:0;margin:var(--tl-answer-common-18-margin)}
.lesson-wrap .stq.placing .gap:not(.filled):not(.next),.lesson-wrap .stq.dragging .gap:not(.filled):not(.next){border-color:var(--chip-bd);--tl-answer-common-19-background:transparent;background:var(--tl-answer-common-19-background);--tl-answer-common-20-box-shadow:none;box-shadow:var(--tl-answer-common-20-box-shadow)}
.lesson-wrap .stq.placing .gap.next,.lesson-wrap .stq.dragging .gap.next{border-color:var(--accent-bd);background:var(--badge)}
.lesson-wrap .stq.dragging .gap.next.dragover{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .stq .stq-first{flex:0 0 auto;box-sizing:border-box;height:var(--answer-slot-height);background:var(--mint);--tl-answer-build-4-box-shadow:none;box-shadow:var(--tl-answer-build-4-box-shadow);cursor:default}
.lesson-wrap .gq .hole{display:inline-block;min-width:110px;border-bottom:2.5px solid var(--accent-bd);color:var(--muted);text-align:center;font-weight:500}
.lesson-wrap .gq .hole.ok{border:0;border-radius:0;background:transparent;color:var(--ok-bd);font-weight:600;padding:0;min-width:0}/* ответ в предложении , простым зелёным текстом; цвет = ОБВОДКА зелёной кнопки --ok-bd (Артур 15.07: совпадение с кнопкой), не текстовый --ok-tx; пилюля одна, на кнопке (лаба 14.07) */
.lesson-wrap .gopts{display:flex;flex-wrap:wrap;--tl-answer-match-13-gap:8px;gap:var(--tl-answer-match-13-gap)}/* по содержимому, не 1fr-лопаты (спека Макса 14.07) */
.lesson-wrap .gopt:hover{border-color:var(--accent-bd)}
.lesson-wrap .gopt.ok,
.lesson-wrap .gap.filled.ok{border-color:var(--ok-bd);background:var(--ok-bg);color:var(--ok-tx);box-shadow:0 1px 0 var(--ok-bd)}
.lesson-wrap .gopt.bad,
.lesson-wrap .word.bad,
.lesson-wrap .gap.bad{border-color:var(--bad-bd);background:var(--bad-bg);color:var(--bad-tx);box-shadow:0 1px 0 var(--bad-bd);animation:tlshake .35s}
.lesson-wrap .gopt.done{--tl-answer-common-21-opacity:.62;opacity:var(--tl-answer-common-21-opacity);pointer-events:none;--tl-answer-common-22-box-shadow:none;box-shadow:var(--tl-answer-common-22-box-shadow)}
/* Тач-мишени ≤640 , блок стоит НИЖЕ базовых правил .word/.gopt, иначе при равной специфичности
   позднее базовое правило гасит медиа-паддинг (класс 47; ловля Кости на этом же гейте) */
@media(max-width:640px){.lesson-wrap .word{--tl-answer-common-23-min-height:44px;min-height:var(--tl-answer-common-23-min-height);display:inline-flex;align-items:center}.lesson-wrap .gopt{--tl-answer-common-24-min-height:44px;min-height:var(--tl-answer-common-24-min-height)}.lesson-wrap .tile{--tl-answer-match-14-min-height:44px;min-height:var(--tl-answer-match-14-min-height);--tl-answer-match-15-padding:11px 16px;padding:var(--tl-answer-match-15-padding)}.lesson-wrap .gap:not(.filled){--tl-answer-common-25-min-height:44px;min-height:var(--tl-answer-common-25-min-height)}/* мишень не мельче плитки, которую в неё несут */.lesson-wrap .bank,.lesson-wrap .gopts{--tl-answer-common-26-gap:10px;gap:var(--tl-answer-common-26-gap)}}

/* Длинный оборот прокручивается внутри текстовой колонки, имя остаётся на месте. */
.lesson-wrap .hw-gap-lines:not(.dlg) .line,.lesson-wrap .hw-gap-lines .bubble,
.lesson-wrap #vocabLines .line,.lesson-wrap #trLines .bubble,
.lesson-wrap .gitem--tiles .gq,.lesson-wrap .gitem--gap .gq{overflow-x:auto}
/* Прокрутка не должна срезать общий нижний край блока ответа. */
.lesson-wrap .hw-gap-lines:not(.dlg) .line,
.lesson-wrap #vocabLines .line{--tl-lesson-speaker-32-padding:3px;padding:var(--tl-lesson-speaker-32-padding);--tl-lesson-speaker-33-margin:9px -3px;margin:var(--tl-lesson-speaker-33-margin)}
.lesson-wrap .gitem--tiles:not(.stq) .gq,
.lesson-wrap .gitem--gap .gq{--tl-answer-build-5-padding:3px;padding:var(--tl-answer-build-5-padding);--tl-answer-build-6-margin-left:-3px;margin-left:var(--tl-answer-build-6-margin-left);--tl-answer-build-7-margin-right:-3px;margin-right:var(--tl-answer-build-7-margin-right)}

/* authBanner (не вошёл) , свой инлайн-стиль в скелете; на тёмной перекрасим */
:root.dark .lesson-wrap #authBanner{background:#2a1818;border-color:#5a2a2a;color:#ffb4b4}

/* ── Виртуальная указка (15.07): кнопка «Показать ученику» (учитель, live) + подсветка
   секции у ученика. Кнопка , ТИХАЯ ВТОРИЧНАЯ (не основное действие , без фирменного
   цвета, Артур 15.07), иконка , вектор (не эмодзи). Подсветка , мягкое glow-кольцо +
   ОДНА пульс-волна (повтор ping читается как тревога , не применять, Макс 15.07).
   Пилюля «кто показывает»: аватар-инициал ведущий, имя мельче и мьютом (Артур 15.07). ── */
/* Рецепт кнопок уровня секции = рецепт тех же кнопок в карточке Grammar (.gr-ptr/.gr-hwa,
   принят Артуром 19.08): надпись --ink, наведение , только вуаль, рамка не дёргается.
   Высота 28 НЕ меняется: вертикальный padding уходит в 0, но min-height держит прежнюю.
   Правка 20.08 , по всем секциям сразу, а не только там, где показан скрин. */
.lesson-wrap .ptr-btn{margin-left:auto;display:inline-flex;align-items:center;--tl-lesson-small-action-1-gap:6px;gap:var(--tl-lesson-small-action-1-gap);--tl-lesson-small-action-2-min-height:28px;min-height:var(--tl-lesson-small-action-2-min-height);--tl-lesson-small-action-3-font-size:12.5px;font-size:var(--tl-lesson-small-action-3-font-size);--tl-lesson-small-action-4-font-weight:500;font-weight:var(--tl-lesson-small-action-4-font-weight);line-height:var(--lh-16,16px);white-space:nowrap;color:var(--ink);background:var(--mint2);border:1px solid var(--line);--tl-lesson-small-action-5-border-radius:8px;border-radius:var(--tl-lesson-small-action-5-border-radius);--tl-lesson-small-action-6-padding:0 12px 0 11px;padding:var(--tl-lesson-small-action-6-padding);cursor:pointer;-webkit-tap-highlight-color:transparent;--tl-lesson-small-action-7-transition:background .12s ease,border-color .12s ease,color .12s ease;transition:var(--tl-lesson-small-action-7-transition)}
@media(hover:hover){.lesson-wrap .ptr-btn:not(.is-ack):not(.is-hint):hover{background-color:var(--accent-veil)}}
.lesson-wrap .ptr-btn:active{transform:translateY(1px)}
.lesson-wrap .ptr-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}/* канон-кольцо ДС 16.07 (2px chip-bd , до появления --focus-ring) */
.lesson-wrap .ptr-btn svg{--tl-lesson-small-action-8-width:14px;width:var(--tl-lesson-small-action-8-width);--tl-lesson-small-action-9-height:14px;height:var(--tl-lesson-small-action-9-height);flex:0 0 auto;stroke:currentColor;--tl-lesson-small-action-10-opacity:.85;opacity:var(--tl-lesson-small-action-10-opacity)}
.lesson-wrap .ptr-btn .ptr-ico,.lesson-wrap .ptr-btn .ptr-ack{display:inline-flex;align-items:center}
.lesson-wrap .ptr-btn .ptr-ack{display:none}
/* локальный ack «клик сработал» (~1с, не блокирует повторные) , НЕ статус доставки (Витя 15.07) */
.lesson-wrap .ptr-btn.is-ack{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx)}
.lesson-wrap .ptr-btn.is-ack .ptr-ico{display:none}
.lesson-wrap .ptr-btn.is-ack .ptr-ack{display:inline-flex}
body.student .lesson-wrap .ptr-btn{display:none}
/* подсветка у ученика: обнимающее кольцо-свечение, вход → покой ~2с → плавный уход.
   position:relative транзиентен (2.7с): на sticky-секции 7 на это время гасит sticky , допустимо */
.lesson-wrap .ptr-target{position:relative;z-index:4;animation:ptrGlow 2600ms cubic-bezier(.22,.61,.36,1) forwards}
@keyframes ptrGlow{
  0%{box-shadow:0 0 0 0 rgba(238,88,224,0),0 0 0 0 rgba(238,88,224,0)}
  13%{box-shadow:0 0 0 2px rgba(238,88,224,.55),0 12px 40px -10px rgba(238,88,224,.45)}
  78%{box-shadow:0 0 0 2px rgba(238,88,224,.50),0 12px 40px -10px rgba(238,88,224,.38)}
  100%{box-shadow:0 0 0 0 rgba(238,88,224,0),0 0 0 0 rgba(238,88,224,0)}
}
.lesson-wrap .ptr-target::after{content:"";position:absolute;inset:-4px;--tl-lesson-small-action-11-border-radius:20px;border-radius:var(--tl-lesson-small-action-11-border-radius);--tl-lesson-small-action-12-border:2px solid rgba(238,88,224,.5);border:var(--tl-lesson-small-action-12-border);pointer-events:none;--tl-lesson-small-action-13-opacity:0;opacity:var(--tl-lesson-small-action-13-opacity);animation:ptrPulse 1400ms cubic-bezier(.16,.84,.44,1) 120ms forwards}
@keyframes ptrPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.02);opacity:0}}
@media (prefers-reduced-motion:reduce){.lesson-wrap .ptr-target::after{display:none}}
:root.dark .lesson-wrap .ptr-target{animation-name:ptrGlowDark}
@keyframes ptrGlowDark{
  0%{box-shadow:0 0 0 0 rgba(238,88,224,0),0 0 0 0 rgba(238,88,224,0)}
  13%{box-shadow:0 0 0 2px rgba(238,88,224,.70),0 14px 46px -10px rgba(238,88,224,.60)}
  78%{box-shadow:0 0 0 2px rgba(238,88,224,.62),0 14px 46px -10px rgba(238,88,224,.50)}
  100%{box-shadow:0 0 0 0 rgba(238,88,224,0),0 0 0 0 rgba(238,88,224,0)}
}
.lesson-wrap .ptr-badge{position:absolute;top:-14px;left:16px;z-index:6;display:inline-flex;align-items:center;--tl-lesson-small-action-14-gap:7px;gap:var(--tl-lesson-small-action-14-gap);--tl-lesson-small-action-15-height:28px;height:var(--tl-lesson-small-action-15-height);--tl-lesson-small-action-16-padding:3px 12px 3px 3px;padding:var(--tl-lesson-small-action-16-padding);--tl-lesson-small-action-17-border-radius:999px;border-radius:var(--tl-lesson-small-action-17-border-radius);background:var(--mint2);border:1px solid var(--line);--tl-lesson-small-action-18-box-shadow:0 6px 16px -6px rgba(238,88,224,.55),0 1px 3px rgba(0,0,0,.14);box-shadow:var(--tl-lesson-small-action-18-box-shadow);--tl-lesson-small-action-19-font-weight:600;font-weight:var(--tl-lesson-small-action-19-font-weight);--tl-lesson-small-action-20-font-size:12px;font-size:var(--tl-lesson-small-action-20-font-size);--tl-lesson-small-action-21-line-height:1;line-height:var(--tl-lesson-small-action-21-line-height);color:var(--ink);white-space:nowrap;animation:ptrBadgeIn 320ms cubic-bezier(.22,.61,.36,1) both}
.lesson-wrap .ptr-badge-ava{--tl-lesson-small-action-22-width:22px;width:var(--tl-lesson-small-action-22-width);--tl-lesson-small-action-23-height:22px;height:var(--tl-lesson-small-action-23-height);flex:0 0 22px;--tl-lesson-small-action-24-border-radius:50%;border-radius:var(--tl-lesson-small-action-24-border-radius);background:var(--accent-fill);--tl-lesson-small-action-25-color:#fff;color:var(--tl-lesson-small-action-25-color);display:flex;align-items:center;justify-content:center;--tl-lesson-small-action-26-font-size:11px;font-size:var(--tl-lesson-small-action-26-font-size);--tl-lesson-small-action-27-font-weight:700;font-weight:var(--tl-lesson-small-action-27-font-weight);letter-spacing:.2px}
.lesson-wrap .ptr-badge-name{--tl-lesson-small-action-28-font-size:11px;font-size:var(--tl-lesson-small-action-28-font-size);--tl-lesson-small-action-29-font-weight:500;font-weight:var(--tl-lesson-small-action-29-font-weight);color:var(--muted);--tl-lesson-small-action-30-padding-right:2px;padding-right:var(--tl-lesson-small-action-30-padding-right)}
@keyframes ptrBadgeIn{0%{opacity:0;transform:translateY(-6px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
/* подсказка-состояние «пустого» клика (Артур 15.07-v2: кнопки видны всегда; вне живого
   урока клик обучает , условие бытовыми словами, текст Карины; нейтрально, НЕ зелёный ack) */
.lesson-wrap .ptr-btn .ptr-hint{display:none}
.lesson-wrap .ptr-btn.is-hint{background:var(--mint);border-color:var(--line);color:var(--muted)}
.lesson-wrap .ptr-btn.is-hint .ptr-ico,.lesson-wrap .ptr-btn.is-hint .ptr-ack,.lesson-wrap .ptr-btn.is-hint .ptr-lbl{display:none}
.lesson-wrap .ptr-btn.is-hint .ptr-hint{display:inline-flex;align-items:center}

/* ── «В домашку» на пункте (этап 1 домашки из урока, 16.07): переключатель-запись в lesson_homework.
   Вид , близнец указки (.ptr-btn); .is-on = розовая пилюля (назначено). Ученику не рендерится (гейт
   в JS по роли) + страховка display:none. БЕЗ margin-left:auto , встаёт правее указки, вплотную. ── */
.lesson-wrap .hwa-btn{display:inline-flex;align-items:center;--tl-lesson-small-action-31-gap:6px;gap:var(--tl-lesson-small-action-31-gap);--tl-lesson-small-action-32-min-height:28px;min-height:var(--tl-lesson-small-action-32-min-height);--tl-lesson-small-action-33-font-size:12.5px;font-size:var(--tl-lesson-small-action-33-font-size);--tl-lesson-small-action-34-font-weight:500;font-weight:var(--tl-lesson-small-action-34-font-weight);line-height:var(--lh-16,16px);white-space:nowrap;color:var(--ink);background:var(--mint2);border:1px solid var(--line);--tl-lesson-small-action-35-border-radius:8px;border-radius:var(--tl-lesson-small-action-35-border-radius);--tl-lesson-small-action-36-padding:0 12px;padding:var(--tl-lesson-small-action-36-padding);cursor:pointer;-webkit-tap-highlight-color:transparent;--tl-lesson-small-action-37-transition:background .12s ease,border-color .12s ease,color .12s ease;transition:var(--tl-lesson-small-action-37-transition)}
@media(hover:hover){
  .lesson-wrap .hwa-btn:not(.is-on):not(:disabled):hover{background-color:var(--accent-veil)}
  .lesson-wrap .hwa-btn.is-on:not(:disabled):hover{border-color:var(--accent)}
}
.lesson-wrap .hwa-btn:active:not(:disabled){transform:translateY(1px)}
.lesson-wrap .hwa-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .hwa-btn:disabled{color:var(--text-disabled);cursor:wait}
.lesson-wrap .hwa-btn.is-on{--tl-lesson-small-action-38-padding:0 12px 0 11px;padding:var(--tl-lesson-small-action-38-padding);background:var(--badge);border-color:var(--accent-bd);color:var(--badge-ink)}
/* 05.08: чек из ДС (как у .gr-hwa грамматики) вместо юникод-галочки; виден только в is-on «В домашке» */
.lesson-wrap .hwa-btn .hwa-ic{display:none;align-items:center}
.lesson-wrap .hwa-btn .hwa-ic svg{--tl-lesson-small-action-39-width:13px;width:var(--tl-lesson-small-action-39-width);--tl-lesson-small-action-40-height:13px;height:var(--tl-lesson-small-action-40-height);display:block;flex:0 0 auto}
.lesson-wrap .hwa-btn.is-on .hwa-ic{display:inline-flex}
body.student .lesson-wrap .hwa-btn{display:none}

/* Авто-растущие поля addrow + карандаш-правка focus (Артур 22.07): вставленное из
   другого источника пояснение видно целиком, однострочная обрезка запрещена. */
.lesson-wrap .addrow textarea{resize:none;overflow:hidden;min-height:34px;line-height:1.35;font-family:inherit;display:block;box-sizing:border-box}
.lesson-wrap .focus .why{white-space:pre-wrap;overflow-wrap:break-word}
.lesson-wrap ul.q.editable li.f-editing{display:flex;flex-direction:column;gap:6px;padding-right:12px}
.lesson-wrap .fedit{width:100%;border:1px solid var(--input);border-radius:10px;padding:7px 10px;font-size:14px;background:var(--mint2);color:var(--ink);resize:none;overflow:hidden;min-height:34px;line-height:1.35;font-family:inherit;box-sizing:border-box}
.lesson-wrap .fedit::placeholder{color:var(--muted)}
.lesson-wrap .fedit:focus{outline:none;border-color:var(--accent)}
.lesson-wrap .fedit-row{display:flex;gap:8px}
.lesson-wrap .fedit.f-err{border-color:#e33;animation:fshake .3s}
@keyframes fshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Болд в Notes (Артур 22.07): зеркало-оверлей поверх textarea. Текст зеркала посимвольно
   идентичен value (сентинелы U+2060/U+FEFF нулевой ширины НЕ вырезаются) , переносы строк
   совпадают по построению. Жирный , width-preserving (advance глифа не меняется, каретка
   не дрейфует на переносах). Fail-open: без .nb-on textarea остаётся обычной читаемой. */
.lesson-wrap .board-ta-wrap{position:relative}
.lesson-wrap .board-mirror{display:none;position:absolute;inset:0;z-index:0;pointer-events:none;border:1px solid transparent;border-radius:10px;padding:12px;font:inherit;font-size:15px;line-height:var(--lh-22,22px);color:var(--ink);background:var(--mint2);white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;overflow:hidden}
.lesson-wrap .board-ta-wrap.nb-on .board-mirror{display:block}
.lesson-wrap .board-ta-wrap.nb-on .board-ta{position:relative;z-index:1;color:transparent;caret-color:var(--ink);background:transparent}
.lesson-wrap .board-ta-wrap.nb-on .board-ta::placeholder{color:var(--muted)}
/* НАСТОЯЩИЙ болд (решение Артура 22.07 после калибровки v1-v4: имитации отклонены,
   «нужно сделать вариант 4»). font-weight:700; жирный шире регуляра, а textarea меряет
   всё регуляром , ширину куска компенсирует JS (nbCompensate в lesson.js): canvas-замер
   w400 vs w700 → отрицательный letter-spacing на <b>, суммарная ширина куска = метрике
   textarea, переносы в паритете, остаточный дрейф внутри куска субпиксельный. */
.lesson-wrap .board-mirror b{font-weight:700}

/* ── Индикатор присутствия в Notes (вариант а, спека Макса; go Артура 28.07): слой-сиблинг
   над textarea + замерный клон с метриками зеркала; каретка партнёра = акцент, статична;
   флажок имени живёт на активности; вуаль , чужая вставка в зоне конфликта. ── */
.lesson-wrap .board-cur{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:10px}
.lesson-wrap .board-meas{position:absolute;inset:0;z-index:-1;visibility:hidden;pointer-events:none;border:1px solid transparent;border-radius:10px;padding:12px;font:inherit;font-size:15px;line-height:var(--lh-22,22px);white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;overflow:hidden}
.lesson-wrap .np-bar{position:absolute;left:0;top:0;width:2px;border-radius:1px;background:var(--accent);transition:transform 90ms ease-out,opacity 400ms}
.lesson-wrap .np-bar.np-idle{opacity:.45}
.lesson-wrap .np-flag{position:absolute;background:var(--accent-fill);color:#fff;font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.2px;padding:2px 6px 3px;border-radius:4px 4px 4px 0;white-space:nowrap;opacity:0;transform:translateY(2px);transition:opacity 120ms,transform 120ms}
.lesson-wrap .np-flag.on{opacity:1;transform:translateY(0)}
.lesson-wrap .np-flag.off{opacity:0;transition:opacity 200ms}
.lesson-wrap .np-flag.np-below{border-radius:0 4px 4px 4px}
.lesson-wrap .np-veil{position:absolute;background:var(--accent-veil);border-radius:3px;pointer-events:none;transition:opacity 1.2s ease-out;opacity:1}
.lesson-wrap .np-veil.fade{opacity:0}
@media (prefers-reduced-motion: reduce){.lesson-wrap .np-bar{transition:opacity 400ms}.lesson-wrap .np-flag{transition:none}}

/* Shared tile drag and hint states: used by native Build, Grammar and retention. */
/* Геометрия всех слотов задаётся в lesson.css; здесь только подсказка. */
/* Схваченная плитка: приподнята и следует за пальцем, место в банке не схлопывается
   (иначе банк прыгает под рукой и промахи растут). */
/* ⚠ Селектор БЕЗ вложенности: клон летит в <body>, вне .lesson-wrap и вне .gbank , правило
   с предками до него не достаёт. Позиция и pointer-events заданы инлайном в движке, здесь
   только вид. */
.word.dragging{--tl-answer-common-27-opacity:.92;opacity:var(--tl-answer-common-27-opacity);--tl-answer-common-28-box-shadow:0 6px 16px rgba(0,0,0,.18);box-shadow:var(--tl-answer-common-28-box-shadow);border-color:var(--accent);touch-action:none}
.lesson-wrap .gbank .word.ghost{visibility:hidden}
.lesson-wrap .gitem--tiles.dragging,
.lesson-wrap .gitem--gap.dragging{cursor:grabbing}
/* Общая раскладка банка слов находится в lesson.css, в том числе без Grammar. */
/* ⚠ `touch-action:none` , на САМОЙ плитке, а не на летящей копии. Браузер решает «прокрутка
   или жест» В МОМЕНТ НАЖАТИЯ, когда копии ещё нет: с `auto` он забирал жест себе и присылал
   `pointercancel`, то есть пальцем перетаскивание не работало ВООБЩЕ (замер Кости на 390:
   pointercancel на каждом жесте, ноль заполненных слотов). Механику делали ради телефона ,
   тем обиднее было проверить её только мышью. */
.lesson-wrap .gbank .word{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.lesson-wrap .gitem--tiles .gr-hint,
.lesson-wrap .gitem--gap .gr-hint,
.lesson-wrap .gitem--rw .gr-hint{--tl-answer-build-8-margin:8px 0 0;margin:var(--tl-answer-build-8-margin);--tl-answer-build-9-font-size:14px;font-size:var(--tl-answer-build-9-font-size);color:var(--muted)}
/* Подставленная подсказкой фраза и раскрытый ответ , учебный текст: канон 16/--ink,
   как «Образец» рядом (в лабе-эталоне выделены, при порте вся строка была 13px мьютом) */
.lesson-wrap .gitem--tiles .gr-hint b,.lesson-wrap .gitem--gap .gr-hint b,.lesson-wrap .gitem--rw .gr-hint b{--tl-answer-build-10-font-weight:600;font-weight:var(--tl-answer-build-10-font-weight);color:var(--ink);--tl-answer-build-11-font-size:16px;font-size:var(--tl-answer-build-11-font-size)}
.lesson-wrap .gitem--tiles .gap.is-hinted,
.lesson-wrap .gitem--gap .gap.is-hinted{border-style:dashed}
@media(max-width:640px){
  .lesson-wrap .gbank .word{--tl-answer-common-29-min-height:36px;min-height:var(--tl-answer-common-29-min-height);display:inline-flex;align-items:center}
  /* Мишень пустого слота , 44 по высоте для пальца (замер Кости 20.08 на 390): с 24.09 задаётся
     общим правилом lesson.css для всех заданий, здесь своего нет. */
}

/* Readonly matching context: completed association, independent of exercise state. */
.lesson-wrap.hw-context-item .ctx-pair>.tile{--tl-answer-match-16-padding:12px 16px;padding:var(--tl-answer-match-16-padding);border:1px solid var(--line);--tl-answer-match-17-border-radius:10px;border-radius:var(--tl-answer-match-17-border-radius);background:var(--mint2);color:var(--ink);--tl-answer-match-18-box-shadow:none;box-shadow:var(--tl-answer-match-18-box-shadow);--tl-answer-match-19-font-weight:400;font-weight:var(--tl-answer-match-19-font-weight);display:flex;align-items:center}
.lesson-wrap.hw-context-item .ctx-pair>.term{font-weight:700}