/* Секция Grammar (ИИ-разбор скрипта) , порт лабы proto_grammar_2707 (живой байт 81bcedd4).
   Скоуп .lesson-wrap, токены , из lesson.css; здесь ТОЛЬКО новые классы секции.
   Переиспользовано из lesson.css (НЕ дублировать): .sec/.sec-head/.num/.hint/.card/.addrow/
   .gitem/.gq/.hole/.gopts/.gopt/.ic. Файл линкуется из lesson/index.php только при
   content_json.grammar_ai. */

.lesson-wrap{--accent-fill-hover:#b3179c}

/* Сворачиваемая секция (details поверх обычной .sec) */
.lesson-wrap details.sec > summary{list-style:none;cursor:pointer}
.lesson-wrap details.sec > summary::-webkit-details-marker{display:none}
.lesson-wrap .gr-count{font-size:12.5px;color:var(--muted);font-weight:500;margin-left:2px}
/* Раскрывашка секции = ДС-элемент урока (как details.script): ▸ закрыто / ▾ открыто,
   var(--accent), стоит РЯДОМ со счётчиком через штатный gap , НЕ margin-left:auto
   в пустоту края плашки (улов Артура 27.07, feedback_collapse_control_next_to_carrier) */
/* Треугольники раскрывашки , ASCII-escape (\25B8=▸ \25BE=▾), НЕ raw-глиф: CSS отдаётся без charset,
   raw-юникод в content: декодируется как Latin-1 → моджибейк «â–¸» (баг 06.08, feedback_reuse_ds_icon_not_glyph) */
.lesson-wrap details.sec > summary .gr-tgl::before{content:"\25B8";color:var(--accent);font-weight:600;font-size:15px;line-height:1}
.lesson-wrap details.sec[open] > summary .gr-tgl::before{content:"\25BE"}

/* Карточка пункта */
.lesson-wrap .gr-item{margin:0 0 18px;scroll-margin-top:90px}/* 05.08 v3 (третий заход Артура, feedback_equal_spacing_is_visible_bands): «одинаковые отступы» = ВИДИМЫЕ полосы фона , минт МЕЖДУ карточками (margin 18) == минт СБОКУ от карточки до края секции (padding .sec = 18). Внутренний padding карточки , симметричный 12 из шарёного .card (lesson.css:96), здесь НЕ переопределяем. Прежние «30==30 контента» и «12==12 контента» (вариант C) , отвергнуты Артуром: он сравнивает видимые промежутки, не расчётные инсеты. */
.lesson-wrap .gr-item:last-child{margin-bottom:0}/* низ секции = её padding-bottom 16 ≈ бок 18, как у остальных секций (страховка Кости от толстой нижней полосы 34) */
/* ⛔ Подпункт 6.N , ОДИН ЭТАЖ (Артур 26.08): «визуально не должно быть отдельного этажа, должно
   быть сразу 6.1 Grammar, дальше модальный». В домашке пункт грамматики САМ является секцией,
   поэтому вложенная карточка правила теряет заливку и поля , бейдж типа и содержимое встают
   сразу под заголовком секции. В уроке карточка остаётся: там пунктов в одной секции много. */
/* ⛔ 27.08, слово владельца: «приводи в соответствие кабинета ученика и учителя, должно быть
   как у учителя». Прежде домашка РАЗДЕВАЛА карточку пункта (прозрачный фон, ноль отступов,
   скрытый номер) , и один и тот же пункт грамматики выглядел в двух кабинетах по-разному.
   Теперь вид общий: карточка, отступ и номер берутся из базовых правил, как на странице урока.
   Своим у домашки остаётся только то, что скрыто по роли (ученику не видны ответы). */
/* Номер подпункта «6.N» в шапке карточки на СТРАНИЦЕ УРОКА (Артур 26.08): вид , как у номера
   секции, чтобы страница читалась так же, как домашка ученика. В домашке номер даёт заголовок
   секции, поэтому там этот элемент не рисуется. */
.lesson-wrap .gr-num{color:var(--accent);font-weight:700;font-size:15px;line-height:var(--lh-20,20px);
  margin-right:8px;white-space:nowrap}
/* Зазор между строками , НОЛЬ: у сетки пустой ряд всё равно съедает row-gap, и карточка
   без переключателя языка становилась выше на ровном месте (замер Кости 24.08). Отступ
   строкам даём точечно, тем зонам, что реально переехали вниз. */
.lesson-wrap .gr-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"name lang tools";align-items:center;column-gap:12px;row-gap:0;margin:0 0 8px}
.lesson-wrap .gr-headl{grid-area:name;display:flex;align-items:center;gap:8px;min-width:0}
.lesson-wrap .gr-tools{grid-area:tools;justify-self:end}
.lesson-wrap .gr-name{font-size:17px;font-weight:700;margin:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
/* Ярлык типа , бейдж, не кнопка (ДС-приёмка Артура 27.07); .gr-tag, т.к. .tag занят focus-метками */
.lesson-wrap .gr-tag{display:inline-flex;align-items:center;flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--badge-ink);background:var(--badge);border:0;border-radius:999px;padding:7px 11px}
.lesson-wrap .gr-tools{display:flex;gap:6px;align-items:center}
.lesson-wrap .gr-quote{margin:0 0 10px;padding:10px 12px;background:var(--mint);border-radius:10px;line-height:1.7;color:var(--ink)}
/* Имя спикера в цитате Grammar , как в данных (Millie), НЕ капсить (Артур 01.08, правило блока) */
.lesson-wrap .gr-quote .who{display:inline-block;font-size:12px;font-weight:700;color:var(--muted);margin-right:8px}
.lesson-wrap .gr-quote--extra{margin-top:-4px}
.lesson-wrap .g-hl{background:var(--badge);color:var(--ink);font-weight:600;border-radius:4px;padding:0 3px;box-shadow:inset 0 -2px 0 var(--accent-bd)}
.lesson-wrap a.g-hl{text-decoration:none;cursor:pointer;color:var(--ink)}
@media(hover:hover){.lesson-wrap a.g-hl:hover{box-shadow:inset 0 -2px 0 var(--accent)}}

/* Вопрос-наблюдение = учебный контент, не сервис (16/400/--ink, Артур 27.07) */
.lesson-wrap .gr-ask{margin:0 0 8px;font-size:16px;font-weight:400;line-height:var(--lh-24,24px);color:var(--ink)}
.lesson-wrap .gr-ta{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:var(--mint2);resize:none;overflow:hidden;min-height:42px;display:block}
.lesson-wrap .gr-ta:focus{outline:none;border-color:var(--accent)}
.lesson-wrap .gr-obswrap{position:relative}
/* Read-only вид наблюдения ученика у учителя */
.lesson-wrap .gr-obs-ro{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--mint);min-height:42px}
.lesson-wrap .gr-obs-cap{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.lesson-wrap .gr-obs-text{font-size:16px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.lesson-wrap .gr-obs-text.empty{color:var(--muted);font-size:14px}

/* Эталон: свёрнутый «See the explanation» (кегль = основной текст, min-height 44 , тач) */
.lesson-wrap details.gr-why{margin-top:4px}
.lesson-wrap details.gr-why > summary{list-style:none;cursor:pointer;display:flex;width:100%;align-items:center;gap:6px;font-size:16px;font-weight:400;color:var(--accent);min-height:44px}
.lesson-wrap details.gr-why > summary::-webkit-details-marker{display:none}
/* Шеврон раскрытия , ДС-иконка .lesson-history-arrow (SVG), не unicode-символ (Артур 01.08) */
.lesson-wrap details.gr-why > summary .chev{width:13px;height:13px;display:block;flex:0 0 auto;margin-left:0;transition:transform .15s}
.lesson-wrap details.gr-why[open] > summary .chev{transform:rotate(180deg)}
.lesson-wrap .gr-why-body{padding-top:10px;margin-top:2px}
.lesson-wrap .gr-expl{margin:0 0 8px;line-height:var(--lh-26,26px)}
.lesson-wrap .gr-pair{margin:0 0 8px;padding:8px 11px;background:var(--mint);border-radius:10px;font-size:14.5px;line-height:var(--lh-22,22px)}
.lesson-wrap .gr-pair .alt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--bad-bd)}
/* Примечание под правилом. Было серым и мелким , это честно, пока в нём лежал отчёт
   движка о своей работе («встречается ещё раз в строке 19»). После чистки 25.08 в нём
   остаётся ПРАВИЛО , где форма не работает, что внутри оборота меняется, , а правило
   нельзя подписывать как необязательное: серый у нас значит «читать не обязательно»
   (вердикт Гали). Кегль и цвет , как у текста правила, отступ , как между частями. */
.lesson-wrap .gr-note{margin:0 0 8px;font-size:16px;color:var(--ink);line-height:1.5}
/* Пометка судьи собранной фразы , вход учителя в отбор (#346, 28.08). Заметнее обычной
   заметки, потому что это не пояснение, а сообщение «здесь я вмешался, посмотри». */
.lesson-wrap .gr-review-note{margin:0 0 8px;padding:8px 11px;background:var(--warn-bg);border:1px solid var(--accent-bd);border-radius:10px;font-size:13.5px;line-height:var(--lh-20,20px);color:var(--ink)}
.lesson-wrap .gr-review-note b{font-weight:600}

.lesson-wrap .gr-rule{border:1px solid var(--accent-bd);border-radius:10px;padding:10px 12px;margin:8px 0 0;background:var(--mint2)}
.lesson-wrap .gr-rule .rl-cap{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--badge-ink);margin:0 0 6px}
.lesson-wrap .gr-rule p{margin:0 0 8px;line-height:1.55;font-size:14.5px}
.lesson-wrap .gr-rule p:last-child{margin-bottom:0}
/* ── Картинка правила (порт 08.08): figure.gr-fig внутри «See the explanation», вариант «× в углу». Заменяет прежний .gr-img. Картинку НЕ инвертируем в тёмной теме (скрин = лист в рамке). ── */
/* Материал преподавателя , вне свёртки, виден сразу (Артур 19.08). Машинный разбор остаётся под кликом. */
.lesson-wrap .gr-teach-mat{margin:0 0 10px}
.lesson-wrap .gr-teach-mat .gr-rule{margin-top:0}
/* Ряд кнопок учителя: align-items:flex-start обязателен , иначе флекс растягивает
   соседнюю кнопку под высоту самой высокой (дефект 19.08, класс 142). */
.lesson-wrap .gr-teach-mat .gr-ruleslot{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:8px}
.lesson-wrap .gr-teach-mat .gr-addrule,.lesson-wrap .gr-teach-mat .gr-matpic{margin-top:0;flex:0 0 auto}
.lesson-wrap .gr-figs{margin-top:10px}
.lesson-wrap .gr-fig{position:relative;width:fit-content;max-width:100%;box-sizing:border-box;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--mint2)}
/* Превью 300 на 300: у преподавателя встречаются картинки в полтора экрана, и целиком
   они выдавливали задания вниз, особенно на телефоне (владелец 25.08). Целиком , по клику,
   лайтбокс как был. object-fit не нужен: ограничиваем ОБА размера, пропорции держит сам
   браузер, поэтому узкая длинная картинка ужимается по высоте, а не режется.
   ⚠ Отменяет решение 19.08 «картинка видна целиком» , оно жило до появления больших
   картинок у Насти. Потолок для узкой полосы (gr-fig--strip) с этим правилом больше не
   работает и оставлен только как страховка для старой разметки. */
.lesson-wrap .gr-fig-img{display:block;width:auto;max-width:300px;height:auto;max-height:300px;border-radius:6px;cursor:zoom-in}
/* Узкая полоса (высота больше двух ширин) , единственный случай с потолком: уменьшаем целиком, не режем */
/* Узкая длинная картинка (высота больше двух ширин) , ровно тот случай, ради которого
   вводили превью: 900 пикселей высоты снова занимали две трети экрана и выдавливали
   задания. Правило СИЛЬНЕЕ общего (три класса против двух), поэтому общий потолок его
   не накрывал , замер Кости 25.08: превью выходило 300 на 900 на ноутбуке и 196 на 588
   на телефоне, и одна и та же картинка выглядела в уроке и в домашке по-разному. */
.lesson-wrap .gr-fig--strip .gr-fig-img{max-height:300px}
.lesson-wrap .gr-fig.is-loading{width:100%;max-width:560px;height:180px;padding:0;border-style:dashed}
.lesson-wrap .gr-fig-sk{width:100%;height:100%;border-radius:6px;background:var(--line);animation:rfpulse 1.4s ease-in-out infinite}
/* × в углу «удалить картинку» , медиа-чип (тёмный скрим + белый ✕ + inner-ring для контраста над любым скрином), НЕ красный; деструктив страхует undo-снекбар. teacher-only. */
.lesson-wrap .gr-fig-x{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(20,22,30,.62);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lesson-wrap .gr-fig-x svg{width:14px;height:14px;display:block}
@media(hover:hover){.lesson-wrap .gr-fig-x:hover{background:rgba(20,22,30,.82)}}
.lesson-wrap .gr-fig-x:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 3px var(--focus-ring)}
body.student .lesson-wrap .gr-fig-x{display:none}
/* кнопка «Добавить картинку»/«Заменить картинку» на строке «See the explanation» , НЕЙТРАЛЬНЫЙ outline (--ink), справа. teacher-only. */
/* лайтбокс просмотра , канон вуали модалок; клик по вуали ЗАКРЫВАЕТ (просмотрщик) + Esc + ×. */
.gr-lightbox{position:fixed;inset:0;z-index:200;display:none;background:rgba(20,22,30,.42);backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
:root.dark .gr-lightbox{background:rgba(8,10,16,.55)}
.gr-lightbox.open{display:block}
/* Полный размер картинки: не ужимаем под экран, даём прокрутку; меньше экрана , по центру */
/* Центрируем через margin:auto, БЕЗ justify/align-center: при картинке шире экрана
   центрирование флексом отрезает её начало от прокрутки, и крестик уезжает за край. */
.gr-lightbox-scroll{position:absolute;inset:0;overflow:auto;display:flex;padding:24px;-webkit-overflow-scrolling:touch;touch-action:manipulation}
.gr-lightbox-fig{position:relative;display:inline-block;line-height:0;margin:auto;flex:0 0 auto}
.gr-lightbox-img{display:block;max-width:none;max-height:none;width:auto;height:auto;border-radius:8px;box-shadow:0 16px 48px rgba(0,0,0,.35);background:#fff}
/* Крестик принадлежит картинке, не экрану: правый верхний угол экрана занят кружком звонка */
.gr-lightbox-x{position:absolute;top:10px;left:10px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(20,22,30,.62);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);cursor:pointer;-webkit-tap-highlight-color:transparent}
.gr-lightbox-x svg{width:16px;height:16px;display:block}
@media(hover:hover){.gr-lightbox-x:hover{background:rgba(20,22,30,.82)}}
.gr-lightbox-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
@media(prefers-reduced-motion:no-preference){.gr-lightbox.open{animation:grlbin .15s ease-out}}
@keyframes grlbin{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lesson-wrap .gr-fig-sk{animation:none}}
.lesson-wrap .gr-addrule,.lesson-wrap .gr-matpic{white-space:nowrap;appearance:none;display:inline-flex;align-items:center;gap:6px;margin-top:8px;border:1px solid var(--line);background:var(--mint2);font:inherit;font-size:12.5px;font-weight:500;line-height:1;color:var(--ink);border-radius:10px;padding:7px 12px 7px 11px;cursor:pointer;min-height:32px;transition:background-color .15s,border-color .15s,color .15s}
.lesson-wrap .gr-addrule svg,.lesson-wrap .gr-matpic svg{width:14px;height:14px;display:block;flex:0 0 auto}
@media(hover:hover){.lesson-wrap .gr-addrule:hover,.lesson-wrap .gr-matpic:hover{background-color:var(--accent-veil)}}
.lesson-wrap .gr-addrule:active,.lesson-wrap .gr-matpic:active{transform:translateY(1px)}
.lesson-wrap .gr-addrule:focus-visible,.lesson-wrap .gr-matpic:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}

/* ── Задание «собери предложение» (19.08). Плитки и слоты , общие классы .word/.gap
   из lesson.css, здесь только раскладка внутри карточки грамматики. ── */
/* Сетку общего .gitem НЕ ломаем (класс 144, Артур 19.08): при display:block из неё
   выпадал крестик удаления учителя и уезжал отдельной строкой под банк. Новые части
   сборки просто получают своё место в той же сетке , во всю ширину, своей строкой. */
.lesson-wrap .gr-drill .gitem.gitem--tiles{position:relative}
/* Волна 2 (аудит Макса 24.08, класс 144): дети ВСЕХ видов размещаются во всю ширину своей
   строкой , иначе авторасстановка сетки .gitem кладёт первый блок в узкую колонку крестика. */
.lesson-wrap .gr-drill .gitem--tiles > .gbank,
.lesson-wrap .gr-drill .gitem--tiles > .gr-hint,
.lesson-wrap .gr-drill .gitem > .gm-rows,
.lesson-wrap .gr-drill .gitem > .gm-board,
.lesson-wrap .gr-drill .gitem--gap > .gbank,
.lesson-wrap .gr-drill .gitem--gap > .gr-hint,
.lesson-wrap .gr-drill .gitem--rw > .gr-hint,
.lesson-wrap .gr-drill .gitem > .grw-row,
.lesson-wrap .gr-drill .gitem > .grw-ans,
.lesson-wrap .gr-drill .gitem > .grw-sample{grid-column:1/-1}
.lesson-wrap .gr-drill .gitem--tiles .gq,
.lesson-wrap .gr-drill .gitem--gap .gq{line-height:var(--lh-34,34px)}
.lesson-wrap .gitem--tiles .gap,
.lesson-wrap .gitem--gap .gap{min-width:64px;vertical-align:baseline}
.lesson-wrap .gitem--tiles .gap.active,
.lesson-wrap .gitem--gap .gap.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
/* ⚠ Пустой слот , мишень ВСЕГДА, а не только после выбора плитки (жалоба владельца 25.08).
   Было: 64×4, тонкая полоска; человек, который сразу тащит слово , самый обычный жест , не
   видел, куда его нести, и механика читалась как сломанная. Теперь слот с самого начала
   выглядит местом, куда кладут: приглушённая рамка и высота вровень с плиткой банка. */
.lesson-wrap .gitem--tiles .gap:not(.filled),
.lesson-wrap .gitem--gap .gap:not(.filled){display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:2px 10px;border:2px dashed var(--line);border-radius:10px;
  background:var(--mint2);vertical-align:middle;transition:border-color .12s,background .12s}
/* Плитка взята , мишени наливаются акцентом (и при клике, и при перетаскивании). */
.lesson-wrap .gitem--tiles.placing .gap:not(.filled),
.lesson-wrap .gitem--gap.placing .gap:not(.filled){border-color:var(--accent-bd);background:var(--badge);padding:10px;min-width:96px}
/* Плитку несут прямо над этим слотом , он единственный подсвечен, чтобы промах был виден
   до того, как человек отпустит палец. */
.lesson-wrap .gitem--tiles .gap.dragover,
.lesson-wrap .gitem--gap .gap.dragover{border-color:var(--accent);background:var(--accent-veil);box-shadow:0 0 0 3px var(--focus-ring)}
/* Схваченная плитка: приподнята и следует за пальцем, место в банке не схлопывается
   (иначе банк прыгает под рукой и промахи растут). */
/* ⚠ Селектор БЕЗ вложенности: клон летит в <body>, вне .lesson-wrap и вне .gbank , правило
   с предками до него не достаёт. Позиция и pointer-events заданы инлайном в движке, здесь
   только вид. */
.word.dragging{opacity:.92;box-shadow:0 6px 16px rgba(0,0,0,.18);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}
/* Зазор «предложение → плитки» = как у задания-выбора (Артур 19.08 вечером). Считаем
   ВИДИМЫЙ воздух, а не отступ в коде: line-height:2.1 кладёт под строкой ещё 8.8px
   половины интервала, поэтому по коробке здесь 9, а не 14 как у выбора. Итог одинаков:
   18px от букв до кнопок в обоих видах задания. */
.lesson-wrap .gr-drill .gitem--tiles > .gq,
.lesson-wrap .gr-drill .gitem--gap > .gq{margin-bottom:9px}
.lesson-wrap .gbank{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
/* ⚠ `touch-action:none` , на САМОЙ плитке, а не на летящей копии. Браузер решает «прокрутка
   или жест» В МОМЕНТ НАЖАТИЯ, когда копии ещё нет: с `auto` он забирал жест себе и присылал
   `pointercancel`, то есть пальцем перетаскивание не работало ВООБЩЕ (замер Кости на 390:
   pointercancel на каждом жесте, ноль заполненных слотов). Механику делали ради телефона ,
   тем обиднее было проверить её только мышью. */
.lesson-wrap .gbank .word{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.lesson-wrap .gbank .word.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .gbank .word.used{opacity:.35;pointer-events:none}
.lesson-wrap .gitem--tiles .gr-hint,
.lesson-wrap .gitem--gap .gr-hint,
.lesson-wrap .gitem--rw .gr-hint{margin:8px 0 0;font-size:14px;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{font-weight:600;color:var(--ink);font-size:16px}
.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{min-height:36px;display:inline-flex;align-items:center}
  /* Мишень пустого слота , 44 по высоте, как принято для пальца: до этого была 24,
     вдвое ниже соседних плиток (замер Кости 20.08 на 390). С 25.08 столько же и в покое:
     пальцем целятся до того, как что-то выбрано, а не после. */
  .lesson-wrap .gitem--tiles .gap:not(.filled),
  .lesson-wrap .gitem--gap .gap:not(.filled){min-height:44px}
}

/* Доза: обвязка (сами .gitem/.gopt/.hole , стили lesson.css) */
.lesson-wrap .gr-drill{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.lesson-wrap .gr-drill .dr-cap{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
/* Цифры дозы , канон .qn из lesson.css (color:var(--ink)/#1a1a1a, 400); НЕ переопределять серым (рецидив, Артур 01.08 «снова»). Только отступ. */
.lesson-wrap .gr-drill .gq .qn{margin-right:5px}
/* Зелёный правильного ответа дозы Grammar , #0eb644 (Артур 06.08), ярче общего --ok-bd #5cc57e.
   Скоуп ТОЛЬКО на .gr-drill: попадает в обводку/тень кнопки .gopt.ok и цвет ответа .hole.ok, НЕ трогает
   зелёный матчей/пропусков (--ok-bd остаётся #5cc57e у них). Тёмная тема сохраняет свой #4aa869. */
.lesson-wrap .gr-drill{--ok-bd:#0eb644}
:root.dark .lesson-wrap .gr-drill{--ok-bd:#4aa869}

/* Правка учителем: поля с подписями + коммит галочкой */
.lesson-wrap .gr-edit-form{display:none;margin:0 0 8px}
.lesson-wrap .gr-item.editing .gr-edit-form{display:block}
.lesson-wrap .gr-item.editing .gr-name{display:none}
.lesson-wrap .ed-field{display:block;margin:0 0 10px}
.lesson-wrap .ed-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 4px}
.lesson-wrap .gr-edit-form .gr-ta{margin:0}
.lesson-wrap .ed-span{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:var(--mint2);display:block}
.lesson-wrap .ed-span:focus{outline:none;border-color:var(--accent)}
.lesson-wrap .ed-hint{margin:-4px 0 10px;font-size:12.5px;line-height:1.45}
.lesson-wrap .ed-hint[hidden]{display:none}
.lesson-wrap .ed-quote-warn{color:var(--warn)}
.lesson-wrap .ed-span-warn{color:var(--muted)}
.lesson-wrap .ed-preview{margin:0 0 10px;padding:9px 11px;background:var(--mint);border:1px solid var(--line);border-radius:10px}
.lesson-wrap .ed-plabel{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.lesson-wrap .ed-preview-q{line-height:1.7;color:var(--ink)}
.lesson-wrap .ed-row{display:flex;gap:8px}
.lesson-wrap .ed-ok,.lesson-wrap .ed-cancel{appearance:none;border-radius:10px;padding:7px 14px;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.lesson-wrap .ed-ok{border:1px solid var(--accent-fill);background:var(--accent-fill);color:#fff}
.lesson-wrap .ed-cancel{border:1px solid var(--line);background:var(--mint2);color:var(--muted)}
@media(hover:hover){.lesson-wrap .ed-ok:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}
.lesson-wrap .ed-cancel:hover{background:var(--accent-veil);color:var(--ink)}}
.lesson-wrap .ed-ok:active,.lesson-wrap .ed-cancel:active{transform:translateY(1px)}
.lesson-wrap .ed-ok:focus-visible,.lesson-wrap .ed-cancel:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}

/* Скрипт с подсветкой (слой учителя): .sline/.who , стили lesson.css */

/* Волна-подсветка при переходе из скрипта */
@keyframes grflash{0%{box-shadow:0 0 0 0 var(--focus-ring)}60%{box-shadow:0 0 0 8px rgba(238,88,224,0)}100%{box-shadow:none}}
.lesson-wrap .card.flash{animation:grflash 1.2s ease-out 1;border-radius:10px}
@media (prefers-reduced-motion: reduce){.lesson-wrap .card.flash{animation:none}}

/* Primary-кнопка секции (accent-fill, ДС-проход 27.07) */
.lesson-wrap .btnp{appearance:none;border:1px solid var(--accent-fill);background:var(--accent-fill);color:#fff;border-radius:10px;padding:9px 14px;font-size:14px;font-weight:500;cursor:pointer;flex:0 0 auto;transition:background .15s}
@media(hover:hover){.lesson-wrap .btnp:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}}
.lesson-wrap .btnp:active{transform:translateY(1px)}
.lesson-wrap .btnp:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .btnp[disabled]{background:var(--surface-disabled);border-color:var(--surface-disabled);color:var(--text-disabled);cursor:default}

/* «+ add» учителя: развилки под полем ввода */
.lesson-wrap .add-feedback{margin:8px 0 0;padding:12px 14px;background:var(--mint2);border:1px solid var(--line);border-radius:12px}
.lesson-wrap .af-q{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink)}
.lesson-wrap .af-q b{font-weight:700}
.lesson-wrap .af-actions{display:flex;flex-wrap:wrap;gap:8px}
.lesson-wrap .af-secondary{appearance:none;border:1px solid var(--line);background:var(--mint2);color:var(--muted);border-radius:10px;padding:8px 14px;font-size:13.5px;font-weight:500;cursor:pointer;min-height:40px;transition:background .15s,color .15s}
@media(hover:hover){.lesson-wrap .af-secondary:hover{background:var(--accent-veil);color:var(--ink)}}
.lesson-wrap .af-secondary:active{transform:translateY(1px)}
.lesson-wrap .af-secondary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}

/* Каркас-заготовка достройки ИИ (пульс shadcn) */
.lesson-wrap .sk{display:inline-block;vertical-align:middle;border-radius:6px;background:var(--line);animation:sk-pulse-skel 1.5s ease-in-out infinite}
.lesson-wrap .sk-title{height:18px;width:58%}
.lesson-wrap .sk-line{display:block;height:13px;width:100%;margin:5px 0}
.lesson-wrap .sk-line.sk-short{width:68%}
@keyframes sk-pulse-skel{0%,100%{opacity:1}50%{opacity:.5}}
/* Тихая строка-статус (не кнопка): черновик / достройка / ошибка / опубликовано */
.lesson-wrap .gr-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:0 0 8px}
.lesson-wrap .gr-status-dot{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:0 0 auto}
.lesson-wrap .is-building .gr-status-dot{animation:sk-pulse 1s ease-in-out infinite}
@keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.lesson-wrap .gr-status--error{color:var(--bad-tx)}
.lesson-wrap .gr-status--error .gr-status-dot{background:var(--bad-bd);animation:none}
.lesson-wrap .gr-pubnote{color:var(--ok-tx)}
.lesson-wrap .gr-pubnote .gr-status-dot{background:var(--ok-bd)}
.lesson-wrap .gr-publish{margin-top:10px}
@media (prefers-reduced-motion: reduce){
  .lesson-wrap .sk{animation:none}
  .lesson-wrap .is-building .gr-status-dot{animation:none}
}

/* Подписанный тумблер отработки (оба состояния словами, Артур 27.07) */
.lesson-wrap .gr-train{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--mint2);font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);border-radius:999px;padding:0 12px 0 11px;min-height:28px;line-height:1.2;cursor:pointer;flex:0 0 auto;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.lesson-wrap .gr-train svg{width:14px;height:14px;display:block;flex:0 0 auto;pointer-events:none}
@media(hover:hover){
  .lesson-wrap .gr-train:not([aria-pressed="true"]):hover{background-color:var(--accent-veil)}
  .lesson-wrap .gr-train[aria-pressed="true"]:hover{border-color:var(--accent)}
}
.lesson-wrap .gr-train:active{transform:translateY(1px)}
.lesson-wrap .gr-train[aria-pressed="true"]{background:var(--badge);color:var(--badge-ink);border-color:var(--accent-bd)}
.lesson-wrap .gr-train:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}

/* Поблочная указка «Показать ученику» (05.08): близнец .ptr-btn урока, но в шапке карточки
   слева от Add/Remove practice; живёт в теле карточки (клик работает , не в отравленном summary). */
.lesson-wrap .gr-ptr{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:28px;padding:0 12px 0 11px;border:1px solid var(--line);border-radius:8px;background:var(--mint2);font:inherit;font-size:12.5px;font-weight:500;line-height:1;color:var(--ink);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,color .15s}
.lesson-wrap .gr-ptr svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;display:block}
.lesson-wrap .gr-ptr .ptr-ico,.lesson-wrap .gr-ptr .ptr-ack{display:inline-flex;align-items:center}
.lesson-wrap .gr-ptr .ptr-ack{display:none}
@media(hover:hover){.lesson-wrap .gr-ptr:not(.is-ack):not(.is-hint):hover{background-color:var(--accent-veil)}}
.lesson-wrap .gr-ptr:active{transform:translateY(1px)}
.lesson-wrap .gr-ptr:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .gr-ptr.is-ack{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx)}
.lesson-wrap .gr-ptr.is-ack .ptr-ico{display:none}
.lesson-wrap .gr-ptr.is-ack .ptr-ack{display:inline-flex}
.lesson-wrap .gr-ptr .ptr-hint{display:none}
/* Подсказка «сработает на уроке»: надпись контрола не серая (правило 19.08), фон и рамка прежние */
.lesson-wrap .gr-ptr.is-hint{padding:0 12px;background:var(--mint);border-color:var(--line);color:var(--ink)}
.lesson-wrap .gr-ptr.is-hint .ptr-ico,.lesson-wrap .gr-ptr.is-hint .ptr-ack,.lesson-wrap .gr-ptr.is-hint .ptr-lbl{display:none}
.lesson-wrap .gr-ptr.is-hint .ptr-hint{display:inline-flex;align-items:center}
body.student .lesson-wrap .gr-ptr{display:none}

/* «В домашку» на грамматическом пункте (05.08, фаза 1) , на месте бывшего тумблера practice;
   пилюля как .gr-train, is-on = розовая (--badge), чек из ДС показан ТОЛЬКО в состоянии «В домашке». */
.lesson-wrap .gr-hwa{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:28px;padding:0 12px;border:1px solid var(--line);background:var(--mint2);font:inherit;font-size:12.5px;font-weight:500;line-height:1;color:var(--ink);border-radius:8px;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,color .15s}
.lesson-wrap .gr-hwa .gr-hwa-ic{display:none;align-items:center}
.lesson-wrap .gr-hwa .gr-hwa-ic svg{width:14px;height:14px;stroke-width:1.2;display:block;flex:0 0 auto}
@media(hover:hover){
  .lesson-wrap .gr-hwa:not(.is-on):not(:disabled):hover{background-color:var(--accent-veil)}
  .lesson-wrap .gr-hwa.is-on:not(:disabled):hover{border-color:var(--accent)}
}
.lesson-wrap .gr-hwa:active:not(:disabled){transform:translateY(1px)}
.lesson-wrap .gr-hwa:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .gr-hwa:disabled{cursor:wait;opacity:.7}
.lesson-wrap .gr-hwa.is-on{padding:0 12px 0 11px;background:var(--badge);border-color:var(--accent-bd);color:var(--badge-ink)}
.lesson-wrap .gr-hwa.is-on .gr-hwa-ic{display:inline-flex}

@media(max-width:640px){
  /* ⚠ ВТОРОЕ место потолка узкой полосы, легко пропустить: правку 25.08 внесли только в
     широкий случай, а здесь оставалось 70vh, и на телефоне картинка снова занимала
     две трети экрана (196 на 588 при ширине 390) , ровно там, где владелец и жаловался.
     Замер потолка делать НА УЗКОМ окне тоже, широкое его не показывает. */
  .lesson-wrap .gr-fig--strip .gr-fig-img{max-height:300px}
  .lesson-wrap .gr-fig-x{width:40px;height:40px}
  .lesson-wrap .gr-tools{justify-content:flex-end;flex-wrap:wrap}
  .lesson-wrap .gr-train{min-height:28px}
  .gr-lightbox-scroll{padding:12px}
  .gr-lightbox-x{top:8px;left:8px;width:44px;height:44px}
}

/* ── Вариант G , КАНОН всех уроков (пилот L17 промоутнут, Артур 06.08). Скоуп .gr-g17 на СЕКЦИИ #graiSec (PHP ставит класс всегда). ──
   Блок цитаты , без фона + серый бордер --line (Артур 31.07). Счётчик .gr-count и треугольник .gr-tgl
   скрыты, секция всегда раскрыта. Жаргон .gr-name скрыт; спикер .who отдельной строкой.
   Оборот .g-hl , имитация ПРОЗРАЧНОГО МАРКЕРА «от руки» (HB/T2): SVG-волна, translucent --accent (тема-зависимо),
   overshoot по высоте 142%, box-decoration-break:clone (перенос), вес 700, без подчёркивания. */
.lesson-wrap .gr-g17 .gr-name{display:none}
.lesson-wrap .gr-g17 .gr-count{display:none}
.lesson-wrap .gr-g17 .gr-tgl{display:none}
.lesson-wrap details.sec.gr-g17 > summary{pointer-events:none;cursor:default}
.lesson-wrap .gr-g17 .gr-quote{position:relative;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20preserveAspectRatio%3D%27none%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20rx%3D%2712%27%20ry%3D%2712%27%20fill%3D%27none%27%20stroke%3D%27%23D300B3%27%20stroke-width%3D%276%27%20stroke-dasharray%3D%279%209%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:0;border-radius:12px;padding:13px 15px;line-height:29px;font-size:18px;color:var(--ink)}
/* ── Рамка цитаты: почему тут точные числа, а не множители ───────────────────
   Рамка рисуется не border, а картинкой: SVG-прямоугольник растягивается на блок.
   Обводка SVG центрируется НА КОНТУРЕ, контур совпадает с краем картинки, поэтому
   наружная половина всегда срезается , при stroke-width 3 ученик видел 1,5 пикселя
   вместо заданных трёх. Просим двойную толщину: внутрь ложится ровно 3, наружное
   срезается одинаково со всех сторон.
   Второе: межстрочный был задан МНОЖИТЕЛЕМ (1.6 от 18px = 28,8), из-за чего высота
   блока выходила дробной (79,98) и остаток линии ложился на пиксельную сетку сверху
   и снизу по-разному: на 1440 нижняя линия рисовалась ОДНОЙ строкой пикселей против
   двух сверху , это и увидел владелец 25.08. Держим целые числа: 29 и 19 дают
   целую высоту 80 и тот же ритм (было 28,8 и 19,2).
   Замер на обычном экране (плотность 1), ширины 1440/1280/900/640: линия 3/3 строки,
   перекос 26% → 5%. Меняешь эти числа , перемерь, а не «поправь на глаз».
   ⚠ КАК МЕРИТЬ, иначе получишь другое число и решишь, что сломал: снимок области ВОКРУГ
   блока с запасом (снимок самого элемента режется по целым пикселям и съедает низ линии),
   пиксели в canvas, «чернильность» строки = сумма по (260 - расстояние до цвета D300B3) / 260
   для пикселей ближе 260; полосой считаем строки выше четверти пика. На жёстком пороге
   остаточная разница верх-низ читается как 12% (0,34 пикселя) , это НЕ регресс: суть
   починки в утолщении линии с одного насыщенного ряда до трёх, а не в идеальном нуле.
   Проба: tools/qa/quote_border.mjs. ── */
.lesson-wrap .gr-g17 .gr-quote .who{display:block;margin:0 0 6px;line-height:19px}
.lesson-wrap .gr-g17 .g-hl,.lesson-wrap .grc-node .g-hl{color:var(--ink);font-weight:700;text-decoration:none;box-shadow:none;padding-inline:.16em;margin-inline:-.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-position:center;background-size:100% 142%;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20300%2036%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M3%2C24%20C1%2C11%206%2C5%2017%2C6%20C70%2C3%20130%2C9%20185%2C5%20C235%2C2%20282%2C7%20296%2C6%20C299%2C13%20297%2C24%20294%2C30%20C245%2C34%20185%2C28%20128%2C31%20C78%2C33%2030%2C29%2011%2C32%20C4%2C33%203%2C30%203%2C24%20Z%27%20fill%3D%27rgba%28204%2C31%2C179%2C0.20%29%27/%3E%3C/svg%3E")}
:root.dark .lesson-wrap .gr-g17 .g-hl,:root.dark .lesson-wrap .grc-node .g-hl{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20300%2036%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M3%2C24%20C1%2C11%206%2C5%2017%2C6%20C70%2C3%20130%2C9%20185%2C5%20C235%2C2%20282%2C7%20296%2C6%20C299%2C13%20297%2C24%20294%2C30%20C245%2C34%20185%2C28%20128%2C31%20C78%2C33%2030%2C29%2011%2C32%20C4%2C33%203%2C30%203%2C24%20Z%27%20fill%3D%27rgba%28238%2C88%2C224%2C0.28%29%27/%3E%3C/svg%3E")}
/* L17: доза без заголовка «Practise it» и без пунктирного разделителя (Артур 01.08) */
.lesson-wrap .gr-g17 .gr-drill{border-top:0;padding-top:0;margin-top:14px}
.lesson-wrap .gr-g17 .gr-drill .dr-cap{display:none}
/* L17: «See the explanation» вплотную под вопросом , без отступа (Артур 01.08) */
.lesson-wrap .gr-g17 .gr-ask{margin-bottom:2px}
.lesson-wrap .gr-g17 details.gr-why{margin-top:0;margin-bottom:16px}
.lesson-wrap .gr-g17 details.gr-why > summary{min-height:0;padding:0}
/* «Show the script» , раскрывашка скрипта под input блока Grammar, стиль как «See the explanation» (Артур 01.08) */
.lesson-wrap details.gr-script-why{margin-top:12px}
.lesson-wrap .gr-g17 details.gr-script-why{margin-top:12px;margin-bottom:0}
.lesson-wrap .gr-script-why .gr-script-hint{margin:8px 0}
.lesson-wrap .gr-script-why #graiScript{margin-top:0}

/* Переключатель языка объяснений EN|RU (обе роли) , донор shadcn Toggle Group, наши токены (Артур 01.08).
   Появляется только если у пункта есть RU-поля; формы (цитата/alt/доза) остаются английскими. */
/* Сегмент EN|RU , по центру шапки первой карточки блока (Артур 01.08) */
.lesson-wrap .gr-head{position:relative}
.lesson-wrap .gr-langseg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}
@media(max-width:640px){.lesson-wrap .gr-langseg{justify-self:center}}
.lesson-wrap .tl-seg{display:inline-flex;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;overflow:hidden;background:var(--mint2)}
.lesson-wrap .tl-seg-i{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;padding:6px 14px;min-height:28px;cursor:pointer}
.lesson-wrap .tl-seg-i.on{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);border-radius:999px}
@media(hover:hover){.lesson-wrap .tl-seg-i:not(.on):hover{color:var(--ink)}}
.lesson-wrap .tl-seg-i:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
/* язык объяснений: EN по умолчанию, .gr-ru-on показывает RU */
.lesson-wrap .grl-ru{display:none}
.lesson-wrap .gr-ru-on .grl-dual{display:none}
.lesson-wrap .gr-ru-on .grl-ru{display:inline}

/* ── Композер добавления упражнения (учитель): вход + карточка + строки-варианты (нативное радио) ── */
.lesson-wrap .rf-empty{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.lesson-wrap .rf-add{display:inline-flex;align-items:center;gap:8px;margin-top:12px;appearance:none;border:1px solid var(--accent);background:var(--mint2);color:var(--accent);border-radius:10px;padding:0 16px;font:inherit;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;min-height:36px;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.lesson-wrap .rf-add svg{width:15px;height:15px;flex:0 0 auto}
@media(hover:hover){.lesson-wrap .rf-add:hover{background:var(--accent-veil)}}
.lesson-wrap .rf-add:active{background:var(--badge);transform:translateY(1px)}
.lesson-wrap .rf-add:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
@media(max-width:640px){.lesson-wrap .rf-add{min-height:44px}}
.lesson-wrap .rf-card{display:none;margin-top:10px;padding:14px;background:var(--mint2);border:1px solid var(--line);border-radius:12px}
.lesson-wrap .rf-card.open{display:block}
.lesson-wrap .rf-title{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 12px}
/* ── ИИ-композер (порт лабы, нативно на токенах ДС; аудит Макса 06.08) ── */
.lesson-wrap .rf-chead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.lesson-wrap .rf-chead .rf-title{margin:0}
.lesson-wrap .rf-chead-x{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 4px;border-radius:8px}
@media(hover:hover){.lesson-wrap .rf-chead-x:hover{color:var(--ink)}}
.lesson-wrap .rf-chead-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
/* Черновик-карточки батча (N-упражнения; N задаётся словами в запросе, степпер убран 10.08) */
.lesson-wrap .rf-draft{border-color:var(--accent-bd)}
.lesson-wrap .rf-soft{margin:2px 0 10px;padding:7px 11px;font-size:12.5px;line-height:1.4;color:var(--warn);border-left:2px solid var(--warn);border-radius:0 6px 6px 0}
.lesson-wrap .rf-draft-x{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 4px;border-radius:8px}
@media(hover:hover){.lesson-wrap .rf-draft-x:hover{color:var(--bad-tx,#c0392b)}}
.lesson-wrap .rf-draft-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
/* поле-запрос к ИИ: контейнер с рамкой, кнопка Generate внутри поля */
.lesson-wrap .rf-aifield{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--mint2);padding:12px 12px 48px;transition:border-color .12s}
.lesson-wrap .rf-aifield:focus-within{border-color:var(--accent)}
.lesson-wrap .rf-ai{display:block;width:100%;border:0;background:transparent;outline:none;resize:none;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);min-height:48px;max-height:200px;overflow-y:auto;padding:0}
.lesson-wrap .rf-ai::placeholder{color:var(--muted)}
.lesson-wrap .rf-gen{position:absolute;right:8px;bottom:8px;height:32px;appearance:none;border:1px solid var(--accent-fill);background:var(--accent-fill);color:#fff;font:inherit;font-size:13px;font-weight:500;line-height:1;padding:0 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s}
.lesson-wrap .rf-gen svg{width:14px;height:14px;flex:0 0 auto}
@media(hover:hover){.lesson-wrap .rf-gen:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}}
.lesson-wrap .rf-gen:active{transform:translateY(1px)}
.lesson-wrap .rf-gen:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .rf-gen[disabled]{background:var(--surface-disabled);border-color:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.lesson-wrap .rf-genlb{white-space:nowrap}
.lesson-wrap .rf-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:rfspin .7s linear infinite;flex:0 0 auto}
@keyframes rfspin{to{transform:rotate(360deg)}}
@media(max-width:480px){.lesson-wrap .rf-genlb{display:none}.lesson-wrap .rf-gen{padding:0;width:32px;justify-content:center}}
.lesson-wrap .rf-manual-link{display:inline-block;appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:500;cursor:pointer;padding:9px 2px 0;text-decoration:underline;text-underline-offset:2px}
.lesson-wrap .rf-manual-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring);border-radius:4px}
.lesson-wrap .rf-generr{margin:0}
.lesson-wrap .rf-err{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0 0;font-size:13.5px;color:var(--bad-tx);background:var(--bad-bg);border:1px solid var(--bad-bd);border-radius:10px;padding:9px 12px}
.lesson-wrap .rf-tryagain{appearance:none;border:1px solid var(--accent);background:var(--badge);color:var(--accent);border-radius:8px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.lesson-wrap .rf-form[hidden]{display:none}
.lesson-wrap .rf-form{margin-top:12px;animation:rffade .17s ease-in}
@keyframes rffade{from{opacity:.35}to{opacity:1}}
/* скелет раскрытия , shadcn animate-pulse (не свип), фон-мут токеном */
.lesson-wrap .rf-skel{border-radius:8px;background:var(--line);animation:rfpulse 1.4s ease-in-out infinite}
@keyframes rfpulse{0%,100%{opacity:1}50%{opacity:.5}}
/* варианты: строка = пилюля-label; нативное radio скрыто (a11y), верный = подсветка --ok-* (как .gopt.ok ученика) */
.lesson-wrap .rf-opts{display:flex;flex-direction:column;gap:8px}
.lesson-wrap .rf-opt-row{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;background:var(--mint2);padding:9px 12px;cursor:pointer;transition:border-color .12s,background .12s}
.lesson-wrap .rf-opt-row:has(.rf-radio:focus-visible){box-shadow:0 0 0 3px var(--focus-ring)}
.lesson-wrap .rf-opt-row.correct{border-color:var(--ok-bd);background:var(--ok-bg)}
.lesson-wrap .rf-opt-row.correct .rf-opt{color:var(--ok-tx);font-weight:600}
.lesson-wrap .rf-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lesson-wrap .rf-opt{flex:1 1 auto;font:inherit;font-size:16px;padding:0;border:0;background:transparent;color:var(--ink);outline:none}
.lesson-wrap .rf-opt::placeholder{color:var(--muted)}
.lesson-wrap .rf-corr-ic{width:11px;height:11px;flex:0 0 auto}/* чек-иконка (переиспользуется кнопкой «В домашке» .gr-hwa-ic) */
.lesson-wrap .rf-warn{color:var(--bad-tx)}
.lesson-wrap .rf-card .ed-row{margin-top:14px}
.lesson-wrap .gr-ta::placeholder{color:var(--muted)}
/* Удаление дрилл-упражнения (учитель): крестик ДС напротив предложения. Grid , крестик в своей колонке справа от .gq, .gopts во всю ширину ниже; у ученика (нет .gr-del) col2 схлопывается в 0, раскладка не меняется. Спека Макса. */
.lesson-wrap .gr-drill .gitem{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start}
.lesson-wrap .gr-drill .gitem > .gq{grid-column:1;grid-row:1}
.lesson-wrap .gr-drill .gitem > .gopts{grid-column:1/-1;grid-row:2}
.lesson-wrap .gr-drill .gitem > .gr-del{grid-column:2;grid-row:1;align-self:start;margin-top:-2px}
.lesson-wrap .gr-del{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--mint2);color:var(--muted);cursor:pointer;line-height:1;transition:border-color .12s,color .12s,background .12s}/* форма = икон-кнопка урока .ic (круглый бордер, канон Артура lesson.css:105); hover , деструктив --bad-* */
.lesson-wrap .gr-del svg{display:block}
@media(hover:hover){.lesson-wrap .gr-del:hover{border-color:var(--bad-bd);background:var(--bad-bg);color:var(--bad-tx)}}
.lesson-wrap .gr-del:active{transform:translateY(1px)}
.lesson-wrap .gr-del:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
@media(max-width:640px){.lesson-wrap .gr-drill .gitem > .gr-del{width:40px;height:40px;margin-top:-8px}}
/* снекбар удаления с undo (без модалки , деструктив с отменой, не трение) */
.gr-snack{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:140;display:inline-flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);background:#22242c;color:#fff;border-radius:10px;padding:10px 10px 10px 16px;font-size:14px;line-height:1.3;box-shadow:0 8px 28px rgba(0,0,0,.28);animation:gsnackin .16s ease-out}
@keyframes gsnackin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.gr-snack-undo{appearance:none;border:0;background:transparent;color:#ee58e0;font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:5px 10px;border-radius:7px}
@media(hover:hover){.gr-snack-undo:hover{background:rgba(255,255,255,.1)}}
.gr-snack-undo:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(238,88,224,.4)}

/* Зелёной точки под верным вариантом у учителя БОЛЬШЕ НЕТ (Артур 19.08 вечером: «удали»).
   Верный ответ учитель и так знает и видит в редакторе дозы , метка ничего не меняла в
   его действиях, а ученический контрол выглядел как контрол с состоянием.
   Правило на будущее: память feedback_mark_only_what_role_cannot_know. */

/* ── Попап-конструктор «Собрать упражнения» (пакет 23.08, спека Макса) ──
   Канон модалок: вуаль, карточка r18 --panel, тень, шапка 19/700 без разделителя,
   крестик ghost-круг; вуаль-клик = встряска; z 120 , НИЖЕ окна звонка (200).
   Всё токенами урока, ни одного нового цвета. */
body.grc-lock{overflow:hidden}
/* Разбор Артура 24.08: верх прибит (окно растёт только вниз, плитки не ездят, п.9), ширина 960 (п.5) */
.grc-veil{position:fixed;inset:0;z-index:120;background:var(--veil-bg,rgba(15,18,20,.45));backdrop-filter:var(--veil-filter,blur(2px));display:flex;align-items:flex-start;justify-content:center;padding:48px 20px 24px}
.grc-card{width:min(960px,100%);max-height:calc(100vh - 72px);display:flex;flex-direction:column;background:var(--panel,var(--bg,#fff));border-radius:18px;box-shadow:0 16px 48px rgba(0,0,0,.16);animation:grcIn .18s ease-out}
/* .lesson-wrap на карточке даёт токены и правила движка внутри модалки; его раскладку глушим */
.grc-card.lesson-wrap{margin:0;padding:0}
@keyframes grcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.grc-shake{animation:grcShake .3s}
@keyframes grcShake{0%,100%{transform:none}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.grc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 8px}
.grc-title{font-size:19px;font-weight:700;color:var(--ink)}
.grc-node{font-size:13px;color:var(--muted);margin-top:3px}
.grc-x{flex:none;appearance:none;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.grc-x svg{width:16px;height:16px}
.grc-x:hover{background:var(--accent-veil,var(--mint));color:var(--ink)}
.grc-x:active{transform:translateY(1px)}
.grc-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.grc-body{padding:8px 20px 16px;overflow-y:auto;flex:1}
.grc-field{margin-top:4px}
/* Статус живёт ПОД плитками, слот постоянный , появление текста ничего не толкает (п.7) */
.grc-status{font-size:14px;color:var(--muted);margin:12px 0 0;min-height:22px}
/* Заголовок над полем запроса , пара к «Выберите вид задания» (канон Карины, лаба-эталон) */
.grc-askhead{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 10px}
/* Зона выбора , мятная плашка с рамкой, карточки внутри белые (лаба-эталон f22) */
.grc-sug:not(:empty){margin:14px 0 0;padding:14px 16px;border-radius:12px;background:var(--mint);border:1px solid var(--line)}
.grc-sughead{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 10px}
.grc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
/* Заголовок прибит к верху карточки, описание идёт сразу под ним , расстояние между ними
   одно и то же у всех карточек ряда (Артур 24.08 вечер: резерв под самый длинный заголовок
   выбивал пустую полосу у коротких названий, «отступы должны быть как на третьем скрине»).
   Низ карточек может не совпадать , выравниваем верхние кромки, а не хвосты за счёт воздуха. */
.grc-tcard{position:relative;display:grid;grid-template-rows:auto 1fr;row-gap:5px;align-content:start;text-align:left;appearance:none;font:inherit;box-sizing:border-box;min-height:88px;background:var(--bg,#fff);border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;transition:border-color .12s}
.grc-tcard:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.grc-tcard.sel{border-color:var(--accent)}   /* ровно 1px , точное слово Артура (лаба 23.08), не «усиливать» */
@media(hover:hover){.grc-tcard:hover{border-color:var(--accent)}}
.grc-tb{display:block;font-size:14px;line-height:1.25;font-weight:700;color:var(--ink);align-self:start}
.grc-tcard:first-child .grc-tb{padding-right:72px}   /* место под «советую» , только у первой карточки */
.grc-tw{display:block;font-size:13px;color:var(--muted);align-self:start}
.grc-badge{position:absolute;top:10px;right:10px;font-size:11.5px;font-weight:600;color:var(--badge-ink);background:var(--badge);border:0;border-radius:999px;padding:3px 9px}
.grc-skel{height:88px;border-radius:12px;background:var(--line);animation:grcPulse 1.4s ease-in-out infinite}
.grc-skel--wide{height:56px;margin-top:14px}
@media (prefers-reduced-motion: reduce){.grc-skel{animation:grcFade 1.4s ease-in-out infinite}}
@keyframes grcPulse{0%,100%{opacity:.45}50%{opacity:.8}}
@keyframes grcFade{0%,100%{opacity:.5}50%{opacity:.65}}
/* Честная строка о недоборе сборки (канон Карины 24.08) , серым над заданиями */
.grc-note{font-size:13.5px;color:var(--muted);margin:14px 0 0}
.grc-ibox{position:relative;padding:6px 34px 6px 0}
/* Крестик удаления , лесон-икон канон .gr-del: круг 28, деструктив на hover (разбор 24.08, п.6) */
.grc-ix{position:absolute;right:0;top:var(--grc-ix-top,8px);display:inline-flex;align-items:center;justify-content:center;appearance:none;width:28px;height:28px;border:1px solid var(--line);background:var(--mint2);color:var(--muted);border-radius:50%;line-height:1;cursor:pointer;padding:0;transition:border-color .12s,color .12s,background .12s}
@media(hover:hover){.grc-ix:hover{border-color:var(--bad-bd);background:var(--bad-bg);color:var(--bad-tx)}}
.grc-ix:active{transform:translateY(1px)}
.grc-ix:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
/* Крестик пары , на оси ПЕРВОЙ СТРОКИ её плиток, а не по центру двухстрочной ситуации:
   6 отступа коробки + 14 отступа задания + рамка и отступ плитки , половина крестика. */
.grc-ibox--match{--grc-ix-top:26px}
.grc-err{font-size:14px;color:var(--bad-tx);margin-top:14px}
.grc-retry{appearance:none;font:inherit;font-size:13px;font-weight:500;color:var(--ink);background:var(--mint2);border:1px solid var(--line);border-radius:8px;height:32px;padding:0 12px;margin-left:8px;cursor:pointer}
.grc-foot{display:flex;gap:10px;justify-content:flex-end;padding:12px 20px 16px;border-top:1px solid var(--line)}
/* Класс-гоча «hidden против display»: display:flex перебивал атрибут hidden, из-за этого
   «Добавить» была видна с порога рядом с «Собрать» (разбор Артура 24.08, п.4) */
.grc-foot[hidden]{display:none}
.grc-addall{appearance:none;font:inherit;font-size:14px;font-weight:600;border-radius:10px;height:36px;padding:0 16px;cursor:pointer;box-sizing:border-box;color:#fff;background:var(--accent-fill,var(--accent));border:0}
.grc-addall:hover{background:var(--accent-fill-hover,var(--accent))}
.grc-addall:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
@media (max-width: 640px){
  .grc-veil{padding:0}
  .grc-card{width:100%;max-height:100vh;border-radius:0}
  .grc-cards{grid-template-columns:1fr}
  .grc-foot{flex-direction:column-reverse}
  .grc-addall{width:100%;min-height:44px}
}

/* ── Волна 2 (24.08): три новых вида задания , пары, текст с пропусками, переформулировка.
   Всё токенами урока, размерный ряд контролов , как .word/.gopt (16px, radius 10). ── */
/* Пары: учительские строки-связки */
.gr-g17 .gm-rows{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.gr-g17 .gm-row{position:relative;display:flex;align-items:baseline;gap:10px;padding:8px 34px 8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--mint2);font-size:16px}
.gr-g17 .gm-row .gm-p{font-weight:600;color:var(--ink)}
.gr-g17 .gm-row .gm-arr{color:var(--muted);flex:none}
.gr-g17 .gm-row .gm-s{color:var(--ink)}
.gr-g17 .gm-row.done{border-color:var(--ok-bd);background:var(--ok-bg)}
.gr-g17 .gm-row .gr-del{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
/* Пары: доска ученика. Плитки растянуты колонкой (роль ряда .tile, не .gopt) , потому
   горизонталь 14 как у вариантов, чтобы заголовок блока рядов не врал (аудит Макса 24.08). */
.gr-g17 .gm-board{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;align-items:start}
.gr-g17 .gm-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.gr-g17 .gm-l,.gr-g17 .gm-r{appearance:none;font:inherit;font-size:16px;line-height:var(--lh-22,22px);text-align:left;color:var(--ink);background:var(--mint2);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 0 var(--line);padding:8px 14px;cursor:pointer;min-width:0}
.gr-g17 .gm-l{font-weight:600}
.gr-g17 .gm-l.sel,.gr-g17 .gm-r.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 1px 0 var(--line)}
.gr-g17 .gm-l.done,.gr-g17 .gm-r.done{border-color:var(--ok-bd);background:var(--ok-bg);color:var(--ok-tx);box-shadow:0 1px 0 var(--ok-bd);cursor:default}
.gr-g17 .gm-l.bad,.gr-g17 .gm-r.bad{border-color:var(--bad-bd);background:var(--bad-bg);color:var(--bad-tx);box-shadow:0 1px 0 var(--bad-bd)}
.gr-g17 .gm-l:focus-visible,.gr-g17 .gm-r:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
@media (max-width:640px){ .gr-g17 .gm-board{grid-template-columns:1fr} }
/* Текст с пропусками: строки просторнее, чтобы пропуски не слипались */
.gr-g17 .gr-gaptext{line-height:var(--lh-34,34px)}
/* Переформулировка: заданное начало + поле + «Проверить» одной высоты (канон).
   Фокус ПОЛЯ , рамка --accent без кольца (канон полей 15.07); кольца только у кнопок. */
.gr-g17 .grw-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.gr-g17 .grw-start{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.gr-g17 .grw-ghost{color:var(--muted);font-size:16px}
.gr-g17 .grw-in{flex:1;min-width:180px;height:40px;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:var(--mint2);border:1px solid var(--line);border-radius:10px;padding:0 12px}
.gr-g17 .grw-in::placeholder{color:var(--muted)}
.gr-g17 .grw-in:focus{outline:none;border-color:var(--accent)}
.gr-g17 .grw-in.bad{border-color:var(--bad-bd);background:var(--bad-bg);color:var(--bad-tx)}
.gr-g17 .grw-in.okin{border-color:var(--ok-bd);background:var(--ok-bg);color:var(--ok-tx)}
.gr-g17 .grw-check{appearance:none;font:inherit;font-size:14px;font-weight:500;height:40px;box-sizing:border-box;padding:0 16px;color:var(--ink);background:var(--mint2);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:pointer;flex:none}
.gr-g17 .grw-check:active{transform:translateY(1px)}
.gr-g17 .grw-check[disabled]{background:var(--surface-disabled);color:var(--text-disabled);cursor:default}
.gr-g17 .grw-check:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
/* Раскрыватель ответа (черновик учителя и кнопка-спасение ученика) , вторичная sm-кнопка */
.gr-g17 .grw-ans{margin-top:8px}
.gr-g17 .gr-showans{appearance:none;font:inherit;font-size:13px;line-height:var(--lh-20,20px);font-weight:500;color:var(--ink);background:var(--mint2);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.05);height:32px;padding:0 12px;cursor:pointer}
.gr-g17 .gr-showans:active{transform:translateY(1px)}
.gr-g17 .gr-showans:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
/* hover , только на устройствах с курсором (правило ДС): на таче залипший hover
   читался бы как ложное «выбрано» рядом с .sel */
@media(hover:hover){
  .gr-g17 .gm-l:hover:not(.done):not(.sel),.gr-g17 .gm-r:hover:not(.done):not(.sel){border-color:var(--accent-bd,var(--accent))}
  .gr-g17 .grw-check:hover:not([disabled]){background:var(--accent-veil,var(--mint))}
  .gr-g17 .gr-showans:hover{background:var(--accent-veil,var(--mint))}
}
.gr-g17 .grw-anstext{font-size:16px;color:var(--ok-tx);margin-top:2px}
/* Образец: лейбл мьютом, сама фраза , учебный контент, 16/--ink (канон 11.08) */
.gr-g17 .grw-sample{font-size:14px;color:var(--muted);margin:8px 0 0}
.gr-g17 .grw-sample .grw-sample-tx{font-size:16px;color:var(--ink)}
.gr-g17 .gitem--rw.is-done .grw-start,.gr-g17 .gitem--rw.done .grw-start{color:var(--ok-tx)}
/* Тач ≤640: контролы новых видов , 44 по высоте (токен-ряд 14.07) */
@media(max-width:640px){
  .gr-g17 .gm-l,.gr-g17 .gm-r,.gr-g17 .gr-showans{min-height:44px}
  .gr-g17 .grw-in,.gr-g17 .grw-check{height:44px}
}
/* ── Правило целиком: три части внутри раскрывашки «Посмотреть объяснение» (спека Макса
   24.08). Своей рамки и фона нет , это типографика внутри уже существующего блока;
   мера строки 72ch, иначе на широкой колонке урока строка уходит за 130 знаков. Мера
   висит на САМОМ блоке правила, а не на теле раскрывашки: на теле она сужала текст у всех
   карточек, включая те, где правила нет, и оставляла внутри карточки два разных правых
   края (замер Кости 24.08: 846 против 726, каждой карточке +25..46 высоты). ── */
/* ── Две колонки: слева подпись части, справа пояснение (правка Артура 24.08) ──
   Было: подпись строкой над текстом, и три части читались одним полотном , глаз не
   отделял «когда так говорят» от «как строится». Теперь подпись стоит слева своей
   колонкой, пояснения выстраиваются в общий левый край, и части видны сразу.
   Подпись того же размера, что текст (16px), жирность 700 остаётся , так просил
   владелец. Межстрочный делаем одинаковым с текстом (1.5), иначе первая строка подписи
   не встаёт на одну линию с первой строкой пояснения.
   Мера строки 72ch переезжает с блока на САМО пояснение: иначе левая колонка съедала бы
   часть меры и текст сужался против нынешнего. ── */
.lesson-wrap .gr-rulefull{margin-top:14px;max-width:none}
.lesson-wrap .gr-rp{display:grid;grid-template-columns:176px minmax(0,1fr);column-gap:20px;align-items:start}
.lesson-wrap .gr-rp + .gr-rp{margin-top:14px}
.lesson-wrap .gr-rp-lb{font-size:16px;font-weight:700;line-height:1.5;color:var(--ink);margin:0}
.lesson-wrap .gr-rp-tx{font-size:16px;line-height:1.5;color:var(--ink);margin:0;white-space:pre-line;max-width:72ch}
.lesson-wrap .gr-rp-tx b{font-weight:600}
/* Пара внутри части про соседа: строка-пример под текстом, свой абзац у неё снят.
   ⚠ Пара , третий ребёнок части, и в двухколоночной сетке она сама уходит под ПОДПИСЬ,
   сжимаясь до 176 пикселей (поймано глазами, замер этого не показывал). Держим её в
   колонке пояснения.
   ⚠⚠ Порядок строк здесь несущий: обе записи про колонку пары одинаковой силы, поэтому
   побеждает та, что НИЖЕ. Пока эта строка стояла после узкого блока, на телефоне пара
   уезжала во вторую колонку, левая схлопывалась в ноль и подпись печаталась поверх
   текста (находка Кости 24.08). Широкий случай объявляем ДО узкого, узкий его перебивает. */
.lesson-wrap .gr-pair--in{margin:8px 0 0}
.lesson-wrap .gr-rp > .gr-pair--in{grid-column:2}
/* Порог складывания , по ЗАМЕРУ, а не на глаз: колонка урока сужается вместе с окном, и
   левая колонка подписи отъедает 196 пикселей. На 1280 пояснению остаётся 490 (читаемо),
   на 1024 уже 234, на 901 , 111 знаков в строку, это не текст, а лапша. Поэтому ниже
   1200 возвращаем подпись над пояснением. */
@media(max-width:1199px){
  .lesson-wrap .gr-rp{grid-template-columns:minmax(0,1fr);column-gap:0}
  .lesson-wrap .gr-rp-lb{margin:0 0 3px}
  .lesson-wrap .gr-rp > .gr-pair--in{grid-column:1}
}
.lesson-wrap .gr-rulefull + .gr-note{margin-top:12px}
@media(max-width:640px){.lesson-wrap .gr-rulefull + .gr-note{margin-top:14px}}
@media(max-width:640px){
  .lesson-wrap .gr-rp-tx{max-width:none}
}

/* Переключатель языка стоял абсолютным центром шапки и наезжал на ряд инструментов
   учителя: ряд растёт вправо, центр стоит на месте, и на ноутбучной ширине они
   пересекались. Имя правила тут ни при чём , в шапке оно скрыто (.gr-g17 .gr-name),
   слева стоит только ярлык типа (уточнение Кости 24.08, прежний комментарий врал).
   Ставим переключатель в поток сетки. */
.lesson-wrap .gr-langseg{position:static;transform:none;left:auto;top:auto;grid-area:lang;justify-self:center;margin:0}
/* Ниже широкого экрана три зоны в одну строку не сходятся и начинают наезжать друг на
   друга (замер Кости 24.08: сходятся примерно от 1400). Складываем заранее: имя и
   инструменты в строку, переключатель , своей строкой по центру. */
@media(max-width:1399px){
  .lesson-wrap .gr-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name tools" "lang lang"}
  .lesson-wrap .gr-langseg{justify-self:center;margin-top:6px}
}
/* Ещё уже имя и инструменты в одну строку тоже не сходятся (замер: наезд ярлыка на
   инструменты с 1024 и ниже) , раскладываем шапку в три строки. */
@media(max-width:1100px){
  .lesson-wrap .gr-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "lang" "tools"}
  .lesson-wrap .gr-tools{justify-self:end;margin-top:6px}
}
/* Складывать шапку нужно только там, где есть ряд инструментов, то есть у учителя.
   Всем остальным возвращаем три зоны в одну строку , карточка ниже на 31 пиксель.
   ⚠ ПОЧЕМУ НЕ body.student: класс роли живёт на теле ТОЛЬКО на странице урока. В
   домашке ученика (/me/) и в проверке домашки (/teacher/student/) тело без класса,
   и правило туда не доезжало , шапка оставалась в две строки, 59 против 28 на 1366
   (замер Кости 24.08). Причём до правки высоты там было 26, то есть регресс уезжал
   ученику. Класс дефекта: условие по роли повешено на признак, которого нет на всех
   страницах-потребителях. Блок стоит НИЖЕ обоих складывающих медиа намеренно: @media
   веса не добавляет, и порядок здесь решает наравне со специфичностью. */
@media(min-width:641px) and (max-width:1399px){
  body:not(.teacher) .lesson-wrap .gr-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"name lang tools"}
  body:not(.teacher) .lesson-wrap .gr-langseg{margin-top:0}
  body:not(.teacher) .lesson-wrap .gr-tools{justify-self:end;margin-top:0}
}

/* Сноска про пары в черновике попапа , вес и размер лабы-эталона */
.grc-mnote{font-size:14px;color:var(--ink);margin:0 0 8px}
/* ── Раунд 2 разбора Артура 24.08: возвращаем вид лабы-эталона f22 ── */
/* Пары в черновике , две ровные колонки (в лабе .mrow/.mcell), номер вне жирной фразы */
.grc-draft .gitem--match .gm-row{display:grid;grid-template-columns:auto 1fr 1fr;align-items:start;gap:8px;padding:0;border:0;background:transparent;margin:0}
/* Номер , на линии первой строки плитки (её рамка 1 + отступ 9) */
.grc-draft .gitem--match .gm-row .qn{padding-top:10px}
.grc-draft .gitem--match .gm-p,.grc-draft .gitem--match .gm-s{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;background:var(--mint2);min-width:0}
.grc-draft .gitem--match .gm-p{font-weight:600;color:var(--ink)}
.grc-draft .gitem--match .gm-s{color:var(--ink)}
/* Текст с пропусками в черновике , размер и ритм лабы (селектор .gr-drill сюда не достаёт) */
.grc-draft .gr-gaptext{font-size:15px;line-height:var(--lh-30,30px)}
.grc-draft .gitem--gap .gbank,.grc-draft .gitem--tiles .gbank{margin-top:8px}