/* Lingo player — большой тач-плеер под задания «слушай на одном устройстве, пиши на другом».
   Крупные кнопки, толстый ползунок, перемотка ±шаг, A–B повтор фразы, замедление, «с начала».
   Подключается модулем public/player.js. (Кнопка «Распознать» и её панель сняты в blox64 #7 —
   распознавание речи из продукта убрано совсем.) */
/* --lp-accent is used for fills that carry WHITE glyphs/labels, so it must be a DARK
   step of the ramp — the brand sky (--accent) is far too light to hold white text. */
.lp{ --lp-accent:var(--anchor); --lp-ink:var(--ink); --lp-soft:var(--surface); --lp-line:var(--line);
  display:flex; flex-direction:column; gap:12px; width:100%; max-width:520px;
  background:var(--card); border-radius:var(--r-lg); padding:16px;
  box-shadow:var(--sheet-2); box-sizing:border-box;
  /* компактный режим кнопок зависит от ширины САМОГО плеера, а не вьюпорта: в карточке ДЗ он был
     зажат до ~270px (с blox68 #6 плеер задания живёт в шторке, но довод жив), и на крупном телефоне
     (>420px, где старый media-query отключался) широкие кнопки A/B вылезали за край
     (blox27 #2). Container query включает компактный режим всюду, где плеер узкий — и в плавающем
     плеере над PDF тоже. */
  container:lpc / inline-size;
  /* кольцо «идёт запись» (recorder.css) зажигается плавно, не щелчком */
  transition:box-shadow var(--dur-state) var(--ease-standard); }
.lp *{ box-sizing:border-box; }
.lp [hidden]{ display:none; }   /* иначе .lp-btn{display:inline-flex} перебивает атрибут hidden */
.lp-video{ width:100%; border-radius:var(--r-md); background:#000; max-height:46vh; }
.lp audio{ display:none; }

/* верхняя панель: во весь экран (видео) + закрыть */
.lp-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; }
.lp-close{ width:40px; height:40px; border-radius:50%; border:1px solid var(--lp-line); background:var(--card);
  color:var(--lp-ink); font-size:var(--ic-md); line-height:1; cursor:pointer; display:flex; align-items:center;
  justify-content:center; margin-left:auto; }
.lp-close:active{ background:var(--lp-soft); }

/* строка перемотки */
.lp-scrub{ display:flex; align-items:center; gap:10px; }
/* blox78 #13 — «Продолжить с»: место в файле помнится для пары «ученик + файл» во всех заданиях.
   Зелёный — тон «сделано/хорошо» (ADR lingo-action-color): это не главное действие, а подсказка. */
.lp-resume{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px;
  border-radius:var(--r-sm); border:1px solid var(--ok-line); background:var(--ok-tint);
  color:var(--ok-ink); font:inherit; font-weight:700; text-align:left; cursor:pointer; }
.lp-resume .ic{ flex:none; }
.lp-resume-at{ margin-left:auto; font-weight:500; font-size:.85em; color:var(--muted); }
.lp-time{ font-size:var(--fs-sm); color:var(--muted); min-width:42px; text-align:center; }
/* сам input высотой с «ручку» (зона нажатия ≥24px, G5); дорожка рисуется тоньше внутри.
   min-width:0 — не косметика, а ловушка флексбокса. У флекс-элемента min-width по умолчанию
   auto, а у <input type=range> своя минимальная ширина (~129px в Chrome): при flex:1 он всё
   равно ОТКАЗЫВАЛСЯ сжиматься. Строке нужно было 237px при доступных 192, и лишние 45px
   выдавливали последнего ребёнка — метку общей длительности — за край плеера, где её
   накрывала соседняя карточка: «7:17» читалось как «7:» (найдено правилом G10, 03.09.2026). */
/* outline:none снят у СИСТЕМНОЙ рамки не просто так — она рисуется вокруг всего 26px-высокого
   input'а прямоугольником и режется соседями. Но снять и не дать замену значит потерять фокус
   совсем: с клавиатуры ползунок перемотки становился невидимым, а он один из немногих контролов
   плеера, которым реально пользуются стрелками. Возвращаем НАШЕ кольцо (--ring): оно двуслойное,
   поэтому читается и на бумаге плеера, и на тёмной заливке. */
.lp-range{ -webkit-appearance:none; appearance:none; flex:1; min-width:0; height:26px;
  background:transparent; outline:none; cursor:pointer; border-radius:var(--r-xs); }
.lp-range:focus-visible{ box-shadow:var(--ring); }
.lp-range::-webkit-slider-runnable-track{ height:12px; border-radius:var(--r-xs); background:var(--lp-soft); }
.lp-range::-moz-range-track{ height:12px; border-radius:var(--r-xs); background:var(--lp-soft); }
.lp-range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  margin-top:-7px; background:var(--lp-accent); border:3px solid var(--card);
  box-shadow:0 1px 4px rgba(var(--sh-rgb),.30); cursor:pointer; }
.lp-range::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:var(--lp-accent);
  border:3px solid var(--card); box-shadow:0 1px 4px rgba(var(--sh-rgb),.30); cursor:pointer; }

/* главный ряд: −шаг, play/pause, +шаг */
.lp-main{ display:flex; align-items:center; justify-content:center; gap:18px; }
.lp-skip{ width:56px; height:56px; border-radius:50%; border:1px solid var(--lp-line); background:var(--card);
  color:var(--lp-ink); font-size:var(--fs-sm); font-weight:800; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1.05; }
.lp-skip small{ font-size:var(--fs-2xs); font-weight:700; color:var(--muted); }
.lp-skip:active{ background:var(--lp-soft); }
/* Знак главной кнопки — НАША фигура ic('play')/ic('pause'), а не типографский символ: ▶ и ⏸ шрифт
   Onest не несёт, и на iPhone пауза уезжала в цветной системный эмодзи (blox51 #7). Размер держится
   СВОЕГО круга (78px), а не лестницы --ic-*: это единственный знак на экране, чей размер задаёт сама
   кнопка (blox51 #3, заход 4) — потому и не em, а пиксели: .ic считает em от размера шрифта, которого
   у кнопки со фигурой внутри больше нет. */
.lp-play{ width:78px; height:78px; border-radius:50%; border:none; background:var(--lp-accent); color:var(--on-dark);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  /* свечение главной кнопки — тоном ТЕНИ схемы, а не зашитым синим числом: на тёплой
     бумаге холодный ореол читался чужим, а в ночной схеме его вовсе не было видно */
  box-shadow:0 6px 16px rgba(var(--sh-rgb),.35); }
/* Знак остаётся КОНТУРНЫМ — как всё семейство icons.svg и как соседние ↺ ↻ на том же ряду.
   Попытка залить его через fill в этом правиле бесполезна: внутри icons.svg лежит собственный
   <style> с `symbol{fill:none;stroke:currentColor;stroke-width:var(--icw,1.75)}`, и он бьёт
   наследование из документа. Менять толщину отсюда можно ТОЛЬКО переменной --icw. */
/* blox52 #3, п.5: у этой фигуры размер задан ПИКСЕЛЯМИ, а не кеглем подписи (её тут нет), поэтому
   общий пол «перо по кеглю» ей не подходит — толщина пишется явно. 2.45px = ровно то, что
   рисовалось прежним общим правилом на 34-пиксельном знаке. */
.lp-play .ic{ width:34px; height:34px; --icw:2.45px; }
/* нажатие — сухо вниз (--dur-press-in), отпускание — с пружиной (--dur-release); под «уменьшить
   движение» токены масштаба = 1, остаётся только смена цвета (ночной редизайн 27.10) */
.lp-play{ transition:transform var(--dur-release) var(--ease-spring), box-shadow var(--dur-state) var(--ease-standard); }
.lp-play:active{ transform:scale(var(--press-scale)); transition-duration:var(--dur-press-in); }
/* буферизация видна (blox52 #17): поток не готов (waiting/stalled) — знак гаснет, по краю кнопки
   идёт кольцо-дуга. Белый полупрозрачный след поверх залитой кнопки — это не «стекло», а та же
   техника, что блик у цветных кнопок. Дуга — var(--on-dark), тем же цветом, что знак. */
.lp-play{ position:relative; }
.lp-play.lp-buffering .ic{ opacity:.35; }
.lp-play.lp-buffering::after{ content:''; position:absolute; inset:7px; border-radius:50%;
  border:3px solid rgba(255,255,255,.30); border-top-color:var(--on-dark);
  animation:lp-spin .9s linear infinite; }
@keyframes lp-spin{ to{ transform:rotate(360deg); } }
/* «уменьшенное движение»: кольцо остаётся (признак «идёт загрузка» важнее украшения), но не крутится */
@media (prefers-reduced-motion:reduce){ .lp-play.lp-buffering::after{ animation:none; } }

/* нижний ряд инструментов — таблетки */
.lp-tools{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }

/* маркер сегмента ВНУТРИ кнопки A/B — маленький, высоту кнопки не меняет */
.lp-abmark{ display:inline-flex; align-items:center; width:26px; height:7px; }
.lp-abmark .lp-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.lp-abmark .lp-dash{ flex:1; height:0; border-top:2px dashed currentColor; }
/* «тающий» пунктир: у A уходит вправо от точки, у B приходит слева к точке */
.lp-abmark-a .lp-dash{ -webkit-mask:linear-gradient(to right,#000,transparent); mask:linear-gradient(to right,#000,transparent); }
.lp-abmark-b .lp-dash{ -webkit-mask:linear-gradient(to left,#000,transparent); mask:linear-gradient(to left,#000,transparent); }
.lp-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--lp-line); background:var(--card);
  color:var(--lp-ink); font:inherit; font-size:var(--fs-sm); font-weight:700; padding:9px 14px; border-radius:var(--r-md);
  cursor:pointer; min-height:40px; }
.lp-btn:active{ background:var(--lp-soft); }
/* таблетки и круглые ±5: отклик на палец и плавная смена «включено» (0.75×, A, B) */
.lp-btn, .lp-skip, .lp-close{ transition:transform var(--dur-release) var(--ease-spring),
  background-color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard),
  color var(--dur-state) var(--ease-standard); }
.lp-btn:active{ transform:scale(var(--press-scale)); transition-duration:var(--dur-press-in); }
.lp-skip:active, .lp-close:active{ transform:scale(var(--press-scale-sm)); transition-duration:var(--dur-press-in); }
@media (hover:hover){
  .lp-btn:not(.on):hover, .lp-skip:hover, .lp-close:hover{ border-color:var(--line-strong); }
}
.lp-btn:focus-visible, .lp-skip:focus-visible, .lp-close:focus-visible, .lp-play:focus-visible,
.lp-resume:focus-visible{ outline:none; box-shadow:var(--ring); }
/* ▶ ⇄ ⏸ — знак меняется не скачком: новая фигура проявляется из чуть меньшей (диктофон это
   у себя выключает — recorder.css: его знак перерисовывается и при перемотке пальцем) */
@keyframes lp-glyph{ from{ opacity:0; transform:scale(.7); } }
.lp-play .ic{ animation:lp-glyph var(--dur-state) var(--ease-enter); }
.lp-btn.on{ background:var(--lp-accent); color:var(--on-dark); border-color:var(--lp-accent); }
/* строка A–B: держим пару на ОДНОЙ строке (blox24 #11) */
.lp-tools-ab{ flex-wrap:nowrap; }
/* стабильные ширины: смена текста/появление меток не двигает соседние кнопки */
.lp-speed{ min-width:66px; justify-content:center; }
.lp-a, .lp-b{ min-width:72px; justify-content:center; }
.lp-ab-t{ font-size:var(--fs-xs); min-width:30px; text-align:center; }
/* A и B — один неразрывный блок: перенос строки не может оторвать B от A (blox11 #2) */
.lp-abgrp{ display:inline-flex; flex-wrap:nowrap; align-items:center; gap:8px; }

/* узкий плеер: ужимаем таблетки, чтобы пара A–B помещалась в одну строку без
   переполнения (blox11 #2, blox24 #11, blox27 #2). Порог по ширине ПЛЕЕРА (container), а не экрана:
   в карточке ДЗ плеер узкий на любом телефоне. .lp сам себе контейнером быть не может, поэтому его
   собственный padding правим обычным @media, а всё внутреннее — @container. */
@media (max-width:420px){ .lp{ padding:12px; } }
@container lpc (max-width:400px){
  .lp-tools{ gap:6px; }
  .lp-abgrp{ gap:6px; }
  .lp-btn{ padding:9px 10px; gap:4px; }
  .lp-a, .lp-b{ min-width:52px; }    /* узкие, но ≥44px тач-цель (blox24 #11) */
  .lp-abmark{ display:none; }        /* декоративный пунктир — в узком плеере место дороже */
  .lp-ab-t{ min-width:0; }
  .lp-ab-t:empty{ display:none; }
}

/* .lp-abfull — полная пара A/B даже в узком плеере. Ставит экран таска на «Аудио» диктоплеера In
   headphones (blox74 #3): на ПК он стоит в половине колонки (~350px), и @container выше ужимал A/B до
   голых букв, хотя у After the audio на той же ширине экрана они полные. На телефоне (<700px) оба
   плеера ужаты одинаково, поэтому порог — по экрану */
@media (min-width:700px){
  .lp-abfull .lp-a, .lp-abfull .lp-b{ min-width:72px; }
  .lp-abfull .lp-abmark{ display:inline-flex; }
  .lp-abfull .lp-ab-t{ min-width:30px; }
  .lp-abfull .lp-ab-t:empty{ display:inline; }
}

/* МИНИ-РАСКЛАДКА над страницей учебника (blox68 #7; ночной редизайн 27.10 — «плееры над сканом
   минимальны по высоте»). Класс ставит сам плеер (mountPlayer opts.mini, его зовёт плашка core.js) и
   переносит узлы: ряд 1 = ▶ · время · ползунок · время · 0.75×, ряд 2 (.lp-main) = ↺ ↻ «С начала».
   A–B и «Скачать» над учебником не рисуются вовсе (владелец, 27.10) — на экране таска они на месте.
   Своей рамки нет — рамку даёт плашка (.pdf-fplayer). Высоту экономим рядами и отступами, не пальцем:
   каждая кнопка — не меньше 44px. */
.lp.lp-mini{ gap:8px; padding:0; box-shadow:none; background:none; border-radius:0; }
.lp-mini .lp-scrub{ gap:6px; min-height:48px; }
.lp-mini .lp-time{ min-width:0; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.lp-mini .lp-play{ width:48px; height:48px; flex:0 0 auto; box-shadow:0 3px 8px rgba(var(--sh-rgb),.28); }
.lp-mini .lp-play .ic{ width:24px; height:24px; --icw:2.3px; }
.lp-mini .lp-play.lp-buffering::after{ inset:4px; border-width:2px; }
.lp-mini .lp-speed{ flex:0 0 auto; min-width:52px; min-height:44px; padding:0 8px; }
.lp-mini .lp-main{ justify-content:flex-start; gap:8px; }
.lp-mini .lp-skip{ width:44px; height:44px; flex:0 0 auto; }
.lp-mini .lp-replay{ min-height:44px; padding:0 12px; }
.lp-mini .lp-tools{ display:none; }
/* запись на той же плашке забирает второй ряд: ↺ ↻ «С начала» тогда прячет плашка (core.js, hidden) */

/* ═══ ПЕРЕРИСОВКА B (агент 5) — плеер в языке B: плоская белая плашка без тени, кнопки серые без
   рамки, «играть» и бегунок — цвета ГРУППЫ (--group: заливка под белым значком; бегунок —
   --group-ink, который ночью светлый и виден на тёмной бумаге). Только вид: разметка, кнопки,
   их порядок и вся логика воспроизведения (play внутри тапа, dropPlayer) не тронуты. ═══ */
.lp{ --lp-accent:var(--group); --lp-soft:var(--btn-2-bg); box-shadow:none; border-radius:var(--r-card); }
.lp-range::-webkit-slider-thumb{ background:var(--group-ink); box-shadow:none; }
.lp-range::-moz-range-thumb{ background:var(--group-ink); box-shadow:none; }
.lp-play{ box-shadow:none; }
.lp-skip, .lp-btn, .lp-close{ border-color:transparent; background:var(--btn-2-bg); }
.lp-btn{ border-radius:var(--r-btn); font-weight:600; min-height:44px; }
.lp-skip:active, .lp-btn:active, .lp-close:active{ background:var(--btn-2-bg-hover); }
@media (hover:hover){
  .lp-btn:not(.on):hover, .lp-skip:hover, .lp-close:hover{ border-color:transparent; background:var(--btn-2-bg-hover); }
}
.lp-btn.on{ background:var(--group); border-color:var(--group); color:var(--on-group); }
.lp-resume{ border:0; border-radius:var(--r-btn); background:var(--ok-tint); }
.lp-mini .lp-play{ box-shadow:none; }