/* 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(--accent-solid); --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:#fff; border:1px solid var(--lp-line); border-radius:var(--r-lg); padding:16px;
  box-shadow:var(--sh-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:12px; 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:#fff;
  color:var(--lp-ink); font-size:18px; 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-variant-numeric:tabular-nums; font-size:13px; color:var(--muted); min-width:42px; text-align:center; }
/* сам input высотой с «ручку» (зона нажатия ≥24px, G5); дорожка рисуется тоньше внутри */
.lp-range{ -webkit-appearance:none; appearance:none; flex:1; height:26px;
  background:transparent; outline:none; cursor:pointer; }
.lp-range::-webkit-slider-runnable-track{ height:12px; border-radius:6px; background:var(--lp-soft); }
.lp-range::-moz-range-track{ height:12px; border-radius:6px; 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 #fff;
  box-shadow:0 1px 4px rgba(73,54,87,.30); cursor:pointer; }
.lp-range::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:var(--lp-accent);
  border:3px solid #fff; box-shadow:0 1px 4px rgba(73,54,87,.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:#fff;
  color:var(--lp-ink); font-size:14px; 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:10px; font-weight:700; color:var(--muted); }
.lp-skip:active{ background:var(--lp-soft); }
.lp-play{ width:78px; height:78px; border-radius:50%; border:none; background:var(--lp-accent); color:#fff;
  font-size:34px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(44,127,184,.35); }
.lp-play:active{ transform:scale(.96); }

/* нижний ряд инструментов — таблетки */
.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:#fff;
  color:var(--lp-ink); font:inherit; font-size:14px; font-weight:700; padding:9px 14px; border-radius:12px;
  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:12px; font-variant-numeric:tabular-nums; 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:12px; padding:12px; background:var(--lp-soft);
  color:var(--lp-ink); font-size:14px; line-height:1.5; }
.lp-recog-panel b{ color:var(--lp-accent); }