/* Lingo player — большой тач-плеер под задания «слушай на одном устройстве, пиши на другом».
   Крупные кнопки, толстый ползунок, перемотка ±шаг, A–B повтор фразы, замедление, «с начала»,
   заглушка «Распознать» (WhisperAI). Подключается модулем public/player.js. */
/* --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 (карточка резервирует правую колонку под «сделал»), и на крупном телефоне
     (>420px, где старый media-query отключался) широкие A/B + «распознать» вылезали за край
     (blox27 #2). Container query включает компактный режим всюду, где плеер узкий — и в плавающем
     плеере над PDF тоже. */
  container:lpc / inline-size; }
.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; }
.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; }
.lp-play:active{ transform:scale(.96); }
/* буферизация видна (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); }
.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; }
/* «Распознать» — только иконка 🪄, квадратная кнопка (текст убран, blox24 #11) */
.lp-recog-icon{ padding:9px; min-width:44px; justify-content:center; }
.lp-recog-icon svg{ width:20px; height:20px; }
/* стабильные ширины: смена текста/появление меток не двигает соседние кнопки */
.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; }
}

/* панель распознавания (заглушка WhisperAI) */
.lp-recog-panel{ border:1px dashed var(--lp-line); border-radius:var(--r-md); padding:12px; background:var(--lp-soft);
  color:var(--lp-ink); font-size:var(--fs-sm); line-height:1.5; }
.lp-recog-panel b{ color:var(--lp-accent); }