/* ============================================================
   English from Zero — рабочая область урока
   Две панели: слева теория и текст, справа практика с проверкой.
   Подключается после shell.css: опирается на токены и не спорит
   с компонентами, только задаёт геометрию рабочего экрана.
   ============================================================ */

.lw-host { max-width: none; margin: 0; padding: 0; }

.lw {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h));
  min-height: 520px;
}

/* ---------- Шапка урока ---------- */

.lw-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}

.lw-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-2);
}
.lw-back:hover { background: var(--surface-3); color: var(--text-1); text-decoration: none; }
.lw-back .ph { font-size: 1.15rem; }

.lw-id { min-width: 0; }
.lw-crumbs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-3);
}
.lw-crumbs a { color: var(--text-3); }
.lw-crumbs a:hover { color: var(--accent-ink); }
.lw-title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lw-tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.lw-meter { margin-left: auto; min-width: 180px; flex: 1 1 180px; max-width: 280px; }
.lw-meter-top {
  display: flex; justify-content: space-between; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-3);
  margin-bottom: 6px;
}
.lw-prog { height: 12px; background: rgba(255, 255, 255, .18); }

/* Верный ответ подтверждаем цветом не только у слота, но и у собранных слов. */
.slot.correct .chip.in-slot {
  background: var(--tint-ok);
  border-color: var(--ok);
  color: var(--ok-ink);
}

/* ---------- Две панели ---------- */

.lw-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lw-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.lw-pane + .lw-pane { border-left: 1px solid var(--line); }

/* Высота шапки колонки фиксирована намеренно. Слева в ней стоят вкладки
   (их бокс выше строки текста), справа — только заголовок: с min-height
   левая шапка вырастала до ~63px, правая упиралась в 56px, и колонки
   разъезжались по вертикали на 6px. Фиксированная высота снимает зависимость
   от содержимого, а центрирование строки делает align-items: center. */
.lw-pane-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}

.lw-pane-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px; }

.lw-pane-title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: var(--fs-h3); color: #e7e0ff;
}
.lw-pane-title .ph { color: var(--step-practice); }
.lw-count { margin-left: auto; font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.lw-count b { color: var(--text-1); }

/* ---------- Табы теории ---------- */

.lw-tabs { display: flex; gap: 4px; flex-wrap: nowrap; }
.lw-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  min-height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer;
}
.lw-tab .ph { font-size: 1.05rem; }
.lw-tab:hover { background: var(--surface-2); color: var(--text-1); }
.lw-tab[aria-selected="true"] {
  background: var(--tint-accent);
  border-color: var(--tint-accent-line);
  color: var(--accent-ink);
}

/* Полоса вкладок урока для узкого экрана: на широком её нет, там вкладки
   живут в шапке панели теории, а практика стоит отдельной колонкой. */
.lw-mtabs { display: none; }
.lw-tab-count {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10);
  font-size: .68rem;
  font-weight: 800;
}

.lw-hint { margin: 0 0 var(--s-3); color: var(--text-3); font-size: var(--fs-sm); }
.lw-panel--reading .reading-text { margin-top: var(--s-2); }

/* ---------- Слова карточками ---------- */

.wdeck { display: flex; flex-direction: column; gap: var(--s-3); }

.wdeck-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 214px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(95, 208, 230, .10), rgba(95, 208, 230, .02));
  box-shadow: var(--shadow-sm);
  outline: none;
  touch-action: pan-y;
}
.wdeck-card:focus-visible { border-color: var(--step-words); box-shadow: 0 0 0 3px var(--tint-words); }

.wdeck-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 22px; }
.wdeck-tools { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.wdeck-pos {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--tint-words);
  color: var(--step-words);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wdeck-num { color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; }

.wdeck-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); }
.wdeck-en { font-family: var(--font-en); font-size: 2rem; font-weight: 600; line-height: 1.15; color: #cff3fb; }
.wdeck-forms { font-size: var(--fs-sm); color: var(--text-3); }
.wdeck-ru { margin-top: var(--s-1); font-size: 1.15rem; color: var(--text-1); }
.wdeck-ex {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-family: var(--font-en);
  font-size: .95rem;
  color: var(--text-2);
}
.wdeck-ex i { font-family: var(--font-sans); font-style: normal; font-size: .84rem; color: var(--text-3); }

.wdeck-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
.wdeck-btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-1);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.wdeck-btn .ph { font-size: 1.15rem; }
.wdeck-btn:hover:not(:disabled) { border-color: var(--step-words); color: var(--step-words); }
.wdeck-btn:disabled { opacity: .4; cursor: default; }

.wdeck-meter { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.wdeck-count { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.wdeck-bar {
  width: 100%;
  max-width: 220px;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
}
.wdeck-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--step-words);
  transition: width .18s;
}

/* Озвучка слова: голос даёт браузер, поэтому кнопки может и не быть —
   если синтеза речи или голосов нет, js её вовсе не рисует. */
.wdeck-say {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--step-words);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.wdeck-say:hover { background: var(--surface-3); border-color: var(--step-words); }
.wdeck-say .ph { font-size: 1.15rem; }
/* Голоса ещё не пришли от браузера: кнопка ждёт за кадром. */
.wdeck-say[hidden] { display: none; }

/* ---------- Сетка слов урока ---------- */

.wdeck-words { display: flex; flex-direction: column; gap: var(--s-2); }
.wdeck-progress { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.wdeck-progress b { color: var(--text-1); }

.wdeck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2); }

/* Чип — кнопка: с клавиатуры список листается, как и колода. Ширина и высота
   не меньше --tap, поэтому чипы остаются удобными на телефоне. */
.wchip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-4);      /* ещё не открывали — приглушено */
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.wchip:hover { border-color: var(--line-strong); color: var(--text-2); }
.wchip.seen { border-color: var(--line-strong); color: var(--text-1); }
.wchip.current { border-color: var(--step-words); background: var(--tint-words); color: var(--step-words); }

.wchip-text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.wchip-en { font-family: var(--font-en); font-weight: 600; overflow-wrap: anywhere; }
.wchip-ru { color: var(--text-4); font-size: var(--fs-xs); }
.wchip-ru::before { content: "·"; }
.wchip.seen .wchip-ru { color: var(--text-3); }
.wchip-mark { color: var(--ok); }

/* ---------- Практика ---------- */

.lw-taskbar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.lw-step {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
}
.lw-step .ph { font-size: .95rem; }
.lw-step:hover { border-color: var(--accent); color: var(--text-1); }
.lw-step.current { border-color: var(--step-practice); background: var(--tint-practice); color: var(--gold-ink); }
.lw-step.done { border-color: var(--tint-ok-line); background: var(--tint-ok); color: var(--ok); }

.lw-task-card { margin: 0; }
.lw-task-card .exercise-actions { margin-top: var(--s-3); }

/* Плашка с итогами урока идёт сразу за карточкой задания. Без отступа они
   слипались в один блок: у карточки margin нет, у плашки тоже не было. */
.complete-banner { margin-top: var(--s-3); }

/* Свайп между заданиями (js: bindTaskSwipe). Состояние — в data-атрибуте,
   потому что это не роль элемента, а мгновенная фаза жеста. */
.lw-task[data-swipe="next"] { animation: lw-swipe-next .15s ease-in; }
.lw-task[data-swipe="prev"] { animation: lw-swipe-prev .15s ease-in; }

@keyframes lw-swipe-next {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-32px); }
}
@keyframes lw-swipe-prev {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(32px); }
}

/* При отключённых анимациях жест срабатывает сразу, без подсказки движением. */
@media (prefers-reduced-motion: reduce) {
  .lw-task[data-swipe] { animation: none; }
}

.lw-complete { margin-top: var(--s-3); }
.lw-complete.hidden { display: none; }

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
  /* Урок на узком экране — не две панели друг под другом, а одна область:
     теория и практика переключаются вкладками сверху. */
  .lw { height: auto; min-height: 0; }

  .lw-body { display: block; grid-template-columns: none; }
  .lw-pane { display: none; }
  .lw-body[data-mobile-tab="theory"] .lw-pane--theory,
  .lw-body[data-mobile-tab="practice"] .lw-pane--practice { display: flex; }

  .lw-pane + .lw-pane { border-left: 0; border-top: 0; }
  .lw-pane-scroll { overflow: visible; }

  /* Полоса вкладок: единственная навигация по уроку, всегда под рукой. */
  .lw-mtabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-1);
    position: sticky;
    top: var(--lw-sticky-top, var(--topbar-h));
    z-index: 6;
  }
  /* Вкладки делят ширину поровну, поэтому «Практика» всегда на виду. */
  .lw-mtabs .lw-tab {
    justify-content: center;
    min-width: 0;
    padding: 9px 6px;
    font-size: .84rem;
    white-space: nowrap;
  }
  .lw-mtabs .lw-tab .ph { display: none; }

  /* Вкладки уже наверху — в шапках панелей они лишние. */
  .lw-pane--theory .lw-pane-head,
  .lw-pane--practice .lw-pane-head { display: none; }
}

/* Шапка приложения в режиме урока: разрешаем перенос. Без этого на средних
   ширинах она становится шире вьюпорта и уводит весь экран урока вправо. */
body.lesson-mode .topbar { flex-wrap: wrap; row-gap: 8px; }

@media (max-width: 860px) {
  body.lesson-mode .brand-name { display: none; }
}

@media (max-width: 720px) {
  .lw-bar { padding: 10px 14px; gap: var(--s-2); }
  .lw-crumbs { display: none; }
  .lw-title { white-space: normal; font-size: var(--fs-h3); }
  .lw-meter { margin-left: 0; max-width: none; }
  .lw-mtabs { padding: 8px 12px; }
  .lw-pane-scroll { padding: 14px; }

  /* Панель действий задания закреплена над нижней навигацией: «Проверить» и
     «Дальше» всегда под большим пальцем. sticky, а не fixed — панель остаётся
     в потоке карточки, поэтому ничего не прячется за ней насовсем. */
  .lw-task-card .exercise-actions {
    position: sticky;
    bottom: calc(var(--mobbar-h, 62px) + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    /* Во всю ширину карточки: за краями панели контент не должен проезжать. */
    margin-left: calc(var(--s-4) * -1);
    margin-right: calc(var(--s-4) * -1);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--line);
    background: var(--surface-1);
  }

  /* Клавиатура открыта: нижняя навигация скрыта за ней, панель встаёт над
     клавиатурой (высоту клавиатуры кладёт в --kb js: applyKbInset). */
  html[data-kb="1"] .lw-task-card .exercise-actions {
    bottom: calc(var(--kb, 0px) + var(--s-2));
  }
}

@media (max-width: 380px) {
  /* Очень узкие экраны: поджимаем вкладки, чтобы все четыре влезали в ряд. */
  .lw-mtabs { padding: 8px 6px; gap: 2px; }
  .lw-mtabs .lw-tab { padding: 9px 4px; font-size: .78rem; }
  .lw-mtabs .lw-tab-count { display: none; }
}

@media print {
  .lw { height: auto; }
  .lw-body { grid-template-columns: 1fr; }
  .lw-pane-scroll { overflow: visible; }
  /* Кнопки проверки на бумаге не нужны — их и так скрывает tokens.css,
     но закреплённая панель занимала бы место полосой. */
  .lw-task-card .exercise-actions { display: none; }
  /* Колода печатается карточкой слова: навигация, сетка и озвучка — экранные. */
  .wdeck-nav, .wdeck-words, .wdeck-say { display: none; }
}