/* Стили урока «из видео» (шаблон). Вынесены из 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;width:300px;max-width:42vw;z-index:30;box-shadow:0 12px 36px rgba(0,0,0,.34);border-radius:12px;overflow:hidden;background:#000}
.lesson-wrap .video-dock .dock-x{display:none}
.lesson-wrap .video-dock.mini .dock-x{display:flex;position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;z-index:31}
@media(max-width:900px){ .lesson-wrap .video-dock.mini{position:static;width:100%;max-width:none;box-shadow:none;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%);width:72px;height:72px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;align-items:center;justify-content:center;padding:0;z-index:2;transition:background .15s,transform .15s}
.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{background:rgba(0,0,0,.72);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{width:30px;height:30px}
.lesson-wrap .video-dock .vplay .ic-play{margin-left:4px}/* оптический центр треугольника */

/* Слим-статус урока (бренд несёт кабинетный топбар → собственный бренд/пилл урока скрыты) */
.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);border-radius:16px;padding:18px 18px 16px;margin:14px 0}
.lesson-wrap .sec-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.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);font-weight:700}/* Артур 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{font-size:19px;margin:0;font-weight:700;line-height:var(--lh-28,28px)}
.lesson-wrap .sec .hint{color:var(--muted);font-size:13.5px;line-height:var(--lh-20,20px);margin:2px 0 10px}
.lesson-wrap .card{background:var(--mint2);border:0;border-radius:12px;padding:12px 12px}/* Артур 15.07-v2: карточка залита поверхностью (белый в светлой), без обводки */
.lesson-wrap video,.lesson-wrap .video-ph{width:100%;aspect-ratio:16/9;max-height:60vh;object-fit:contain;border-radius:12px;background:#000;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{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.lesson-wrap .bank-sticky{position:sticky;top:88px;z-index:5;background:var(--mint2);padding:12px 0;margin:-12px 0 8px;box-shadow:0 10px 12px -12px rgba(0,0,0,.18)}
@media(max-width:900px){ .lesson-wrap .bank-sticky{top:0} }
.lesson-wrap .word{border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 0 var(--line);background:var(--mint2);padding:7px 14px;font-size:16px;font-weight:500;color:var(--ink);cursor:grab;user-select:none;transition:border-color .12s, opacity .15s}/* кегль 16 = чтение (Артур 24.07; интерактив не крупнее текста , соблюдён равенством) */
.lesson-wrap .word:hover{border-color:var(--accent-bd)}
.lesson-wrap .word.sel{border-color:var(--accent);background:var(--badge)}
.lesson-wrap .word:active{cursor:grabbing}
.lesson-wrap .word.drag{opacity:.5}
.lesson-wrap .word.used{border-style:dashed;box-shadow:none;background:var(--mint);color:transparent;pointer-events:none}
.lesson-wrap .word.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}
@keyframes tlshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.lesson-wrap .line{margin:12px 0;font-size:16px;line-height:var(--lh-34,34px)}
/* диалог упр.4: who справа-выравнен + реплика-«пузырь» (зона приёма) */
.lesson-wrap .dlg .line{display:flex;gap:6px;align-items:baseline;margin:0 0 14px;font-size:16px;line-height:var(--lh-30,30px)}/* Артур 15.07-v2: роль↔цитата ближе; кегль 16 , Артур 24.07 */
.lesson-wrap .who{color:var(--muted);font-weight:600;margin-right:4px}
.lesson-wrap .dlg .who{flex:0 0 74px;text-align:right;margin:0;white-space:nowrap}/* 05.08 Артур: fallback-лейбл «Speaker A» (2 слова) не переносить на 2 строки; 74px держит выравнивание бабблов, широкий лейбл чуть выступает влево , приемлемо (артефакт неатрибутированной диаризации) */
.lesson-wrap .bubble{flex:1;min-width:0;background:var(--mint);border:0;border-radius:14px;padding:12px 18px}/* Артур 15.07-v2: без рамки */
:root.dark .lesson-wrap .bubble{background:rgba(255,255,255,.03)}
.lesson-wrap select.who-edit{font:inherit;font-weight:400;color:var(--ink);margin-right:4px;border:1px dashed var(--line);border-radius:6px;padding:1px 24px 1px 8px;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;margin:0;max-width:120px}
/* Рычаг 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;gap:12px;max-width:min(560px,92vw);padding:10px 12px 10px 16px;background:var(--mint2);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);font-size:14px;line-height:1.4}
.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;border:0;border-radius:8px;background:var(--accent-fill);color:#fff;font:inherit;font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;white-space:nowrap}
.lesson-wrap .who-bulk-x{flex:0 0 auto;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.lesson-wrap .gap{display:inline-block;min-width:110px;border:0;border-bottom:2.5px solid var(--chip-bd);border-radius:0;padding:1px 10px;margin:0 3px;background:transparent;text-align:center;color:var(--muted);vertical-align:baseline;cursor:pointer;transition:border-color .12s, background .12s}
.lesson-wrap .gap.empty::before{content:none}
/* ⛔ Пустой слот , МИШЕНЬ, в которую целятся пальцем и мышью, а не подчёркивание: у него
   своя высота, иначе он живёт полоской в 4 пикселя и попасть в него нельзя (замер Кости
   07.09; тот же класс ловил владелец 25.08). Класс `placing`/`dragging` движок вешает на
   САМО задание (.gitem), поэтому подсветка ниже адресована и ему, а не только карточке. */
.lesson-wrap .gap:not(.filled){min-height:26px;line-height:24px;touch-action:none}
.lesson-wrap .gbank .word,.lesson-wrap .bank .word{touch-action:none}   /* жест ведём мы: без этого браузер забирает касание прокрутке ещё до порога сдвига */
.lesson-wrap .gap.active,.lesson-wrap .gap.dragover{border-color:var(--accent);background:var(--badge);border-radius:8px 8px 0 0}
.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:2px dashed var(--accent-bd);border-radius:10px;padding:2px 10px;min-width:130px;background:var(--badge)}/* .hw-ex-bare , контейнер движка внутри подпункта блока домашки: карточкой служит обёртка, поэтому класса .card на нём нет, а подсветка слотов при перетаскивании нужна та же (06.09) */
.lesson-wrap .card.dragging .gap.dragover,.lesson-wrap .card.placing .gap.dragover,.lesson-wrap .hw-ex-bare.dragging .gap.dragover,.lesson-wrap .hw-ex-bare.placing .gap.dragover,.lesson-wrap .gitem.dragging .gap.dragover,.lesson-wrap .gitem.placing .gap.dragover{border-style:solid;border-color:var(--accent)}
.lesson-wrap .gap.filled{border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 0 var(--line);background:var(--mint2);color:var(--ink);font-weight:500;font-size:16px;padding:2px 14px;min-width:0;cursor:grab}/* min-width:0 , заполненный пропуск обжимает текст на 14px (пустой .gap держит слот 110px), Артур 15.07 *//* компакт 14.07, класс 54: заполненный пропуск , тот же размерный ряд, что .word/.gopt */
.lesson-wrap .gap.filled::before{content:none}
/* верный ответ фиксируется и лочится (канон v9: переиграть нельзя, как в прототипе) */
.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);pointer-events:none}
.lesson-wrap .gap.filled.bad{border-color:var(--bad-bd);background:var(--bad-bg);color:var(--bad-tx);box-shadow:0 1px 0 var(--bad-bd)}
.lesson-wrap .gap.bad{border-color:var(--bad-bd);background:var(--bad-bg);animation:tlshake .35s}
.lesson-wrap .switcher{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--mint2)}
.lesson-wrap .switcher button{border:0;background:var(--mint2);color:var(--muted);font:inherit;font-size:12.5px;padding:5px 12px;cursor:pointer}
.lesson-wrap .switcher button.active{background:var(--accent-fill);color:#fff}
.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;gap:8px;height:32px;border:1px solid var(--line);background:var(--mint2);border-radius:10px;padding:0 12px;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.05);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);color:#fff;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;gap:8px;height:36px;border:1px solid var(--line,#e2e2e2);background:var(--mint2,#fff);border-radius:10px;padding:0 16px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:pointer;color:var(--ink,#1a1a1a)}/* анатомия shadcn default: савбар = самое тяжёлое действие страницы */
.savebar .btn.primary{background:var(--accent-fill,#cc1fb3);color:#fff;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){background:#232734;border-color:#232734;color:#667082}
/* loading (pubSaving в lesson.js): цвета default + спиннер, клики отрезаны */
.savebar .btn.is-loading{pointer-events:none}
.savebar .btn .spin{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;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:1fr 1fr;gap:12px 20px;align-items:stretch}
.lesson-wrap .tile{display:flex;align-items:center;justify-content:flex-start;text-align:left;background:var(--mint2);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 0 var(--line);padding:8px 14px;font-size:16px;color:var(--ink);cursor:pointer;transition:border-color .12s, background .12s, transform .05s, opacity .25s}/* кегль 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{opacity:1;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{font-weight:700}
/* 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)}
/* «Составьте предложение» (07.09). Разметка донорская , карточка сборки из урока
   (.gitem--tiles: слоты .gap, банк .gbank), поэтому своих правил почти нет. Отличие одно:
   строка сборки состоит ТОЛЬКО из слов и слотов, а в уроке вокруг них есть текст, ,
   значит нужен перенос по словам и ровный шаг между слотами. */
.lesson-wrap .stq .stq-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.lesson-wrap .stq .stq-line .gap{margin:0;min-width:130px}   /* ширина сразу конечная: иначе слоты прыгают 110→130 под пальцем в момент броска */
/* ⛔ Подсвечен ОДИН слот , тот, который примет слово. Класть можно только по порядку
   (движок кладёт в первый незаполненный), а подсветка всех пустых была бы обещанием,
   которого он не держит: бросок в дальний слот всё равно уедет в ближний (улов Кости 07.09). */
.lesson-wrap .stq.placing .gap:not(.filled),.lesson-wrap .stq.dragging .gap:not(.filled){border:0;border-bottom:2.5px solid var(--chip-bd);border-radius:0;padding:1px 10px;background:transparent}
.lesson-wrap .stq.placing .gap.next,.lesson-wrap .stq.dragging .gap.next{border:2px dashed var(--accent-bd);border-radius:10px;padding:2px 10px;background:var(--badge)}
.lesson-wrap .stq.dragging .gap.next.dragover{border-style:solid;border-color:var(--accent)}
/* Выданное слово , донор .gap.filled, приглушённый: оно не мишень и не ответ ученика. */
.lesson-wrap .stq .stq-first{border:1px solid var(--line);border-radius:10px;background:var(--mint);color:var(--muted);font-size:16px;font-weight:500;padding:2px 14px;min-height:26px;display:inline-flex;align-items:center;user-select:none}
@media(max-width:640px){.lesson-wrap .stq .stq-first{min-height:44px}}
.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;gap:8px}/* по содержимому, не 1fr-лопаты (спека Макса 14.07) */
.lesson-wrap .gopt{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);border-radius:10px;box-shadow:0 1px 0 var(--line);padding:8px 14px;font-size:16px;color:var(--ink);cursor:pointer;user-select:none;transition:border-color .12s, background .12s, transform .05s, opacity .25s}/* кегль 16 , Артур 24.07 */
.lesson-wrap .gopt:hover{border-color:var(--accent-bd)}
.lesson-wrap .gopt.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{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{opacity:.62;pointer-events:none;box-shadow:none}
/* Тач-мишени ≤640 , блок стоит НИЖЕ базовых правил .word/.gopt, иначе при равной специфичности
   позднее базовое правило гасит медиа-паддинг (класс 47; ловля Кости на этом же гейте) */
@media(max-width:640px){.lesson-wrap .word{min-height:44px;padding:10px 14px;display:inline-flex;align-items:center}.lesson-wrap .gopt,.lesson-wrap .tile{min-height:44px;padding:11px 16px}.lesson-wrap .gap:not(.filled){min-height:44px;line-height:42px}/* мишень не мельче плитки, которую в неё несут (замер Кости 07.09: было 4px против 44) */.lesson-wrap .bank,.lesson-wrap .gopts{gap:10px}}

/* 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;gap:6px;min-height:28px;font-size:12.5px;font-weight:500;line-height:var(--lh-16,16px);white-space:nowrap;color:var(--ink);background:var(--mint2);border:1px solid var(--line);border-radius:8px;padding:0 12px 0 11px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s ease,border-color .12s ease,color .12s ease}
@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{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;opacity:.85}
.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;border-radius:20px;border:2px solid rgba(238,88,224,.5);pointer-events:none;opacity:0;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;gap:7px;height:28px;padding:3px 12px 3px 3px;border-radius:999px;background:var(--mint2);border:1px solid var(--line);box-shadow:0 6px 16px -6px rgba(238,88,224,.55),0 1px 3px rgba(0,0,0,.14);font-weight:600;font-size:12px;line-height:1;color:var(--ink);white-space:nowrap;animation:ptrBadgeIn 320ms cubic-bezier(.22,.61,.36,1) both}
.lesson-wrap .ptr-badge-ava{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--accent-fill);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.2px}
.lesson-wrap .ptr-badge-name{font-size:11px;font-weight:500;color:var(--muted);padding-right:2px}
@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;gap:6px;min-height:28px;font-size:12.5px;font-weight:500;line-height:var(--lh-16,16px);white-space:nowrap;color:var(--ink);background:var(--mint2);border:1px solid var(--line);border-radius:8px;padding:0 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s ease,border-color .12s ease,color .12s ease}
@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{padding:0 12px 0 11px;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{width:13px;height:13px;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}}