/* Lingo recorder — «Мои фразы» (After the audio) и диктофон (Read by yourself), blox68 #5.
   Подключается модулем public/recorder.js. Вёрстка продолжает плеер задания (player.css):
   фразы встраиваются ВНУТРЬ его карточки .lp, диктофон сам носит .lp и его кнопки .lp-skip/.lp-play —
   один вид на оба инструмента. Красный здесь — «микрофон живой» (как прежний .recbtn.on шторки сдачи), единственное
   место записи, где красная заливка законна (реестр RED_OK в tools/check.js). */

/* ── кнопка записи ─────────────────────────────────────────────────────────────────────────── */
.rc-recrow{ display:flex; flex-direction:column; gap:6px; }
/* в покое — контур тревожного тона (зовёт, но не кричит); во время записи — заливка --alert-strong,
   белый текст на ней проходит AA. Высота одна в обоих состояниях: кнопка не прыгает (lingo-ui §1). */
.rc-rec{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:60px;
  padding:0 16px; border-radius:var(--r-lg); border:2px solid var(--danger); background:var(--card);
  color:var(--alert-ink); font:inherit; font-size:var(--fs-lg); font-weight:700; cursor:pointer; }
.rc-rec .ic{ width:22px; height:22px; }
.rc-rec:active{ transform:scale(.98); }
.rc-rec.arm{ opacity:.6; }
.rc-rec.on{ background:var(--alert-strong); border-color:var(--alert-strong); color:var(--on-dark); }
.rc-timer{ font-variant-numeric:tabular-nums; font-weight:800; }
@keyframes rc-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.rc-dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:currentColor;
  animation:rc-pulse 1.1s ease-in-out infinite; }
.rc-stop{ display:inline-block; width:14px; height:14px; border-radius:var(--r-2xs); background:currentColor; }
@media (prefers-reduced-motion: reduce){ .rc-dot{ animation:none; } }
/* узкий плеер (контейнер lpc объявлен в player.css) — подпись кнопки мельче, чтобы не ломалась в две строки */
@container lpc (max-width: 300px){ .rc-rec{ font-size:var(--fs-md); gap:8px; padding:0 10px; } }
.rc-hint{ font-size:var(--fs-sm); color:var(--muted); text-align:center; line-height:1.3; }
.rc-hint.on{ color:var(--alert-ink); }
.rc-hint.err{ color:var(--danger-ink); }

/* ── лента «Мои фразы» ─────────────────────────────────────────────────────────────────────── */
.rc-phr{ display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:1px solid var(--line-soft); min-width:0; }
.rc-head{ display:flex; align-items:baseline; gap:8px; }
.rc-head b{ font-size:var(--fs-md); }
.rc-sum{ margin-left:auto; font-size:var(--fs-sm); color:var(--muted); font-variant-numeric:tabular-nums; }
.rc-fold{ align-self:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transform:rotate(180deg); }
.rc-strip{ display:flex; gap:4px; height:48px; min-width:0; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; overscroll-behavior-x:contain; }
.rc-strip::-webkit-scrollbar{ display:none; }
/* ширина отрезка = длина фразы (flex-grow ставит скрипт), но не уже пальца. Не сжимается: когда фраз
   больше, чем влезает, лента листается вбок (карусель), а не распирает плеер (владелец, 24.09) */
/* manipulation: двойной тап по отрезку — «послушать», а не зум страницы на iPhone */
.rc-seg{ touch-action:manipulation; flex:1 0 44px; min-width:44px; padding:0; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; overflow:hidden; font:inherit; cursor:pointer; }
.rc-seg:nth-child(even){ background:var(--accent-tint); }
.rc-seg b{ font-size:var(--fs-md); font-weight:800; }
.rc-seg small{ font-size:var(--fs-2xs); font-weight:600; opacity:.85; font-variant-numeric:tabular-nums; }
.rc-seg.sel{ background:var(--primary); border-color:var(--primary); color:var(--on-dark); }
.rc-seg.live{ background:var(--alert-strong); border-color:var(--alert-strong); color:var(--on-dark); }
.rc-empty{ height:48px; border:2px dashed var(--line-strong); border-radius:var(--r-sm); display:flex;
  align-items:center; justify-content:center; font-size:var(--fs-sm); color:var(--muted); }
.rc-sel:empty{ display:none; }
.rc-sel{ display:flex; flex-direction:column; gap:8px; }
.rc-sel.rc-dim{ opacity:.4; pointer-events:none; }
.rc-pvbar.off{ visibility:hidden; }
.rc-pvbar{ height:6px; border-radius:var(--r-2xs); background:var(--surface); overflow:hidden; }
.rc-pvbar i{ display:block; height:100%; background:var(--primary); }
/* ряд кнопок фразы (владелец, 24.09): слева ▶ над «Перезаписать», справа корзина — квадрат высотой в
   обе строки. Пока фраза не выбрана, все три бледно-серые (.idle) и не нажимаются. */
.rc-selrow{ display:grid; grid-template-columns:1fr auto; grid-template-rows:46px 46px; gap:6px; }
.rc-sb{ flex:1 1 0; min-width:0; min-height:46px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font:inherit; font-size:var(--fs-md); font-weight:700; display:flex; align-items:center;
  justify-content:center; gap:6px; cursor:pointer; padding:0 10px; }
.rc-sb .ic{ width:18px; height:18px; }
.rc-sb.rc-pv{ grid-area:1 / 1; background:var(--card); border:2px solid var(--ok-solid); color:var(--ok-solid); }
.rc-sb.rc-pv .ic{ width:24px; height:24px; --icw:2.4px; }
.rc-sb.rc-rr{ grid-area:2 / 1; background:var(--alert-tint); border-color:var(--alert-line); color:var(--alert-ink); }
.rc-sb.rc-del{ grid-area:1 / 2 / 3 / 3; width:98px; padding:0; background:var(--card); color:var(--muted); }
.rc-sb.rc-del .ic{ width:30px; height:30px; --icw:2.4px; }
.rc-sel.idle .rc-sb{ background:var(--surface); border-color:var(--line-soft); color:var(--line-strong); cursor:default; }
.rc-send{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }
.rc-send .ic{ width:18px; height:18px; }

/* свёрнутая лента над учебником: тонкая полоска-миниатюра + «3 фразы ⌃» */
.rc-mini{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 2px; border:none;
  background:none; font:inherit; cursor:pointer; color:var(--primary); }
.rc-minibar{ flex:1; display:flex; gap:3px; height:10px; }
.rc-minibar i{ flex:1 1 0; border-radius:var(--r-2xs); background:var(--accent-line); }
.rc-minibar i.live{ background:var(--alert); }
.rc-minilbl{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-sm); font-weight:700; white-space:nowrap; }
.rc-minilbl .ic{ width:14px; height:14px; transform:rotate(180deg); }
.rc-compact.rc-phr{ gap:8px; padding-top:8px; }
.rc-compact .rc-strip{ height:44px; }

/* blox69 #2 — НОУТБУК: шторка «After the audio» не помещалась и прокручивалась внутри себя.
   Окно браузера ноутбука ~650px в высоту, а шторка в 520px шириной складывала плеер и «Мои фразы»
   в один столбец ~620px. На широком экране места вбок много, а вверх нет — поэтому шторка
   становится шире, и «Мои фразы» встают второй колонкой рядом с плеером: высота = бо́льшая из
   двух колонок (~320px), а не их сумма. Узлы те же, меняется только сетка, поэтому обработчики
   плеера и записи не трогаются. Строк сетки заведомо больше, чем узлов плеера (span 12): пустые
   строки нулевой высоты, поэтому зазор между рядами даёт margin, а не row-gap. */
@media (min-width:900px){
  .hwpsheet:has(.lp > .rc-phr){max-width:880px}
  .hwpsheet .lp:has(> .rc-phr){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:28px;row-gap:0;align-items:start}
  .hwpsheet .lp:has(> .rc-phr) > :not(.rc-phr){grid-column:1;margin-bottom:12px}
  .hwpsheet .lp:has(> .rc-phr) > .rc-phr{grid-column:2;grid-row:1 / span 12;
    padding-top:0;border-top:none;padding-left:24px;border-left:1px solid var(--line-soft)}
}

/* ── диктофон ──────────────────────────────────────────────────────────────────────────────── */
.rc-dict{ gap:14px; }
.rc-clock{ display:flex; align-items:baseline; justify-content:center; gap:6px; font-variant-numeric:tabular-nums; }
.rc-clock .rc-dot{ display:none; align-self:center; color:var(--danger); }
.rc-dict.rc-live .rc-clock .rc-dot{ display:inline-block; }
.rc-pos{ font-size:var(--fs-4xl); font-weight:800; line-height:1.1; }
.rc-dict.rc-live .rc-pos{ color:var(--alert-ink); }
.rc-len{ font-size:var(--fs-md); color:var(--muted); }
/* дорожка = полоса перемотки. pan-y — вертикальную прокрутку страницы оставляем браузеру,
   горизонталь (протяжка пальцем) наша (lingo-ui §4) */
.rc-wave{ position:relative; height:56px; display:flex; align-items:center; gap:2px; cursor:pointer;
  touch-action:pan-y; border-radius:var(--r-xs); outline:none; }
.rc-wave:focus-visible{ box-shadow:var(--ring); }
.rc-bar{ flex:1 1 0; min-width:2px; height:4px; border-radius:var(--r-2xs); background:var(--accent-line); pointer-events:none; }
.rc-bar.past{ background:var(--primary); }
.rc-bar.fut{ background:var(--line-soft); }
.rc-bar.doom{ background:var(--alert-line); }       /* «запишется заново» — бледный тревожный тон */
.rc-bar.rec{ background:var(--danger); }
.rc-cursor{ position:absolute; top:0; bottom:0; width:3px; margin-left:-1.5px; border-radius:var(--r-2xs);
  background:var(--ink-strong); pointer-events:none; }
.rc-dict.rc-live .rc-cursor{ background:var(--danger); }
.rc-foot{ display:flex; flex-direction:column; gap:10px; }

/* над учебником диктофон компактный: время мельче, запись в ряду кнопок, «Учителю» рядом с подсказкой */
.rc-dict.rc-compact{ gap:8px; padding:0; box-shadow:none; background:none; }
.rc-compact .rc-clock{ justify-content:flex-start; }
.rc-compact .rc-pos{ font-size:var(--fs-lg); }
.rc-compact .rc-wave{ height:40px; }
.rc-dict .rc-ctl{ gap:10px; }
.rc-compact .rc-back{ width:48px; height:48px; flex:0 0 auto; }
.rc-compact .rc-play{ width:60px; height:60px; flex:0 0 auto; }
.rc-compact .rc-recslot{ flex:1; min-width:0; }
.rc-compact .rc-rec{ min-height:52px; font-size:var(--fs-md); padding:0 10px; }
.rc-compact .rc-foot{ flex-direction:row; align-items:center; justify-content:space-between; }
.rc-compact .rc-foot .rc-hint{ text-align:left; font-size:var(--fs-xs); }
.rc-compact .rc-send{ width:auto; flex:0 0 auto; }

/* ── мини-плеер над учебником (blox68 #7) ─────────────────────────────────────────────────────
   Плашка над страницей обязана оставлять страницу видимой: один ряд A B ▶ 0.75×, под ним узкая
   запись у левого края и полоска фраз справа от неё. Раскрытая лента уходит под этот ряд во всю
   ширину. Ряд самого плеера (.lp-mini) описан в player.css — это его классы. */
.rc-duo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.rc-duo .rc-tip{ display:none; }
.rc-duo .rc-recrow{ flex:0 0 auto; }
.rc-duo .rc-rec{ width:auto; min-height:44px; min-width:112px; padding:0 14px; font-size:var(--fs-md); gap:8px; border-radius:var(--r-pill); }
.rc-duo .rc-rec .ic{ width:18px; height:18px; }
.rc-duo .rc-phr{ flex:1 1 0; min-width:0; padding-top:0; border-top:none; }
.rc-duo .rc-phr.rc-open{ flex-basis:100%; padding-top:8px; border-top:1px solid var(--line-soft); }
.rc-duo .rc-hint.err{ text-align:left; font-size:var(--fs-xs); }