/* cards.css — конструктор квизов: экран наборов у учителя и Лу + экран карточек у ребёнка.
   Префикс .qz-. Телефон первым (375px): один столбец, палец 44px, поля 16px (--fs-input — заслон
   от зума iOS, lingo-ui §3). Цвета — только роль-токены; чипы состояния тинтами, сплошного
   зелёного и красного здесь нет (реестры GREEN_OK/RED_OK в tools/check.js). */

.qz{max-width:720px;margin:0 auto;padding-bottom:var(--sp-7)}
.qz [hidden]{display:none}                     /* hidden обязан бить display (lingo-ui §7) */
.qz .btn--sm{min-height:44px}                  /* компактная кнопка остаётся целью для пальца */
.qz-h{margin:0}
.qz-sub{font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.qz-top{margin:var(--sp-3) 0}

/* ---- A · список наборов ------------------------------------------------------------------ */
.qz-rows{display:flex;flex-direction:column;gap:var(--sp-2)}
/* строка набора: рамка и тень в покое говорят «нажимаемо» (lingo-ui §12) */
.qz-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;
  text-align:left;min-height:44px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);padding:var(--sp-3);cursor:pointer;font-family:inherit;color:var(--ink);
  box-shadow:var(--sheet-1)}
.qz-row:active{transform:scale(.99)}
.qz-l{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.qz-name{font-weight:800;font-size:var(--fs-lg);color:var(--ink-strong);overflow-wrap:anywhere}

/* чип состояния озвучки: «озвучен» · «озвучка 34 из 116» · «без звука» */
.qz-chip{flex:0 0 auto;max-width:50%;border-radius:var(--r-pill);padding:4px var(--sp-2);
  font-size:var(--fs-sm);font-weight:700;border:1px solid var(--line);text-align:center}
.qz-chip--ok{background:var(--ok-tint);color:var(--ok-ink);border-color:var(--ok-line)}
.qz-chip--work{background:var(--accent-tint);color:var(--accent-ink);border-color:var(--accent-line)}
.qz-chip--mute{background:transparent;color:var(--muted)}

/* ---- B · набор --------------------------------------------------------------------------- */
.qz-head{margin-bottom:var(--sp-3)}
/* строка озвучки: чип · полоса · «Доозвучить». ВЫСОТА ПОСТОЯННА во всех трёх состояниях —
   полоса и кнопка стоят всегда, иначе строка росла бы посреди генерации и толкала список вниз
   (lingo-ui §1: временное состояние не меняет высоту контейнера). */
.qz-state{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);min-height:44px}
.qz-bar{flex:1 1 auto;height:8px;border-radius:var(--r-pill);background:var(--fill-soft);overflow:hidden}
.qz-bar-i{display:block;height:100%;background:var(--anchor);transition:width .3s}
.qz-tools{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
/* переключатель голоса — пара кнопок, выбранная тёмная (та же роль, что у выбранной вкладки) */
.qz-voices{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qz-voice{min-height:44px;padding:0 var(--sp-3);border:0;background:var(--card);color:var(--ink);
  font-family:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer}
.qz-voice.on{background:var(--primary);color:var(--on-dark)}
.qz-foreign{border:1px solid var(--line);border-radius:var(--r-md);background:var(--fill-soft);
  color:var(--muted-strong);padding:var(--sp-3);font-size:var(--fs-sm);margin-bottom:var(--sp-3)}

/* вставка списка */
.qz-paste{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  padding:var(--sp-3);margin-bottom:var(--sp-4);box-shadow:var(--sheet-1)}
.qz-lbl{display:block;font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-2)}
.qz-ta{width:100%;box-sizing:border-box;font-family:inherit;font-size:var(--fs-input);
  border:1px solid var(--line-mid);border-radius:var(--r-sm);padding:var(--sp-2);
  background:var(--card);color:var(--ink);resize:vertical}
.qz-paste-b{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.qz-skipped{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--alert-ink);
  background:var(--alert-tint);border:1px solid var(--alert-line);border-radius:var(--r-sm);
  padding:var(--sp-2);overflow-wrap:anywhere}
.qz-onerow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.qz-onerow .qz-in{flex:1 1 40%;min-width:0}

/* ---- карточка в редакторе ---------------------------------------------------------------- */
.qz-cards{display:flex;flex-direction:column;gap:var(--sp-2)}
/* две стороны в ряд на широком экране, столбиком на телефоне; корзина держится справа */
.qz-card{display:flex;align-items:flex-start;gap:var(--sp-2);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  padding:var(--sp-3);box-shadow:var(--sheet-1)}
/* стороны в своём боксе, корзина — соседней колонкой: иначе она вставала в конец ПОСЛЕДНЕЙ
   строки переноса, то есть рядом с объяснением, и сужала его поле относительно термина */
.qz-sides{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.qz-sd{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.qz-sdtop{display:flex;align-items:center;gap:var(--sp-2)}
.qz-in{flex:1 1 auto;min-width:0;font-family:inherit;font-size:var(--fs-input);color:var(--ink);
  background:var(--card);border:1px solid var(--line-mid);border-radius:var(--r-sm);
  padding:10px var(--sp-2);min-height:44px;box-sizing:border-box}
.qz-txt{flex:1 1 auto;min-width:0;font-size:var(--fs-input);color:var(--ink);overflow-wrap:anywhere}
.qz-play{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--accent-deep);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-family:inherit}
.qz-play:active{transform:scale(.94)}
/* динамик без записи не притворяется рабочим: он виден, но выключен — так «звука ещё нет»
   читается сразу, а не после тапа в тишину */
.qz-play:disabled{opacity:.35;cursor:default;color:var(--muted)}
.qz-sdimg{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* картинка ОГРАНИЧЕНА по высоте: иначе снимок с телефона занял бы весь экран и утянул бы
   низ списка за край (lingo-ui §3 — растущий ребёнок не двигает родителя) */
.qz-thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.qz-mini{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--sp-2);
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--ink);
  font-size:var(--fs-sm);font-family:inherit;cursor:pointer}
.qz-del{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--muted);cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.qz-imggone{font-size:var(--fs-sm);color:var(--muted)}
@media (hover:hover){.qz-del:hover{color:var(--danger-ink);border-color:var(--danger-ink)}}

/* ---- экран ребёнка: карточки набора (blox64 #3) -------------------------------------------- */
.cp{max-width:560px;margin:0 auto;padding-bottom:var(--sp-7)}
.cp-h{margin:0 0 var(--sp-2)}
.cp-wait{font-size:var(--fs-sm);color:var(--muted);background:var(--fill-soft);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-2);margin-bottom:var(--sp-2)}
.cp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.cp .btn--sm{min-height:44px}
/* САМА КАРТОЧКА. Высота задана и не зависит от длины текста: термином бывает целое предложение,
   и растущая карточка увела бы стрелки листания под нижний край экрана (lingo-ui §3 — растущий
   ребёнок не двигает родителя). Длинный текст прокручивается ВНУТРИ карточки. */
.cp-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);height:min(52vh,340px);overflow:auto;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  box-shadow:var(--sheet-1);padding:var(--sp-5) var(--sp-4) 64px}
.cp-card:active{transform:scale(.995)}
/* перевёрнутая сторона отличается фоном: видно, что карточка повернулась, даже если текст похож */
.cp-card.flipped{background:var(--fill-soft)}
.cp-side{position:absolute;top:var(--sp-2);left:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
.cp-text{font-size:var(--fs-xl);font-weight:800;color:var(--ink-strong);text-align:center;
  overflow-wrap:anywhere;line-height:1.25}
.cp-img{max-width:100%;max-height:150px;object-fit:contain;border-radius:var(--r-sm)}
/* динамик — в углу карточки, но НЕ поверх текста: под него отведён нижний отступ карточки */
.cp-say{position:absolute;bottom:var(--sp-3);right:var(--sp-3);width:56px;height:56px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  color:var(--accent-deep);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cp-say:disabled{opacity:.35;cursor:default;color:var(--muted)}
.cp-nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-3)}
.cp-arrow{width:56px;height:56px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--ink);font-size:var(--ic-lg);font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:var(--sheet-1)}
.cp-arrow:active{transform:scale(.94)}
.cp-count{font-size:var(--fs-lg);font-weight:700;color:var(--muted-strong);min-width:6ch;text-align:center}