/* ШАГ «СЛОВА» (WORDS-STEP-V2-23.09, learning_path_spec §5 v4) — стили модуля course-words.js: инструкция, карточки
   предложений с пропуском, итог ввода как в упражнениях (§9.25, без второй попытки), окна «ошибки» / «знаю». */
.cw-instr { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; margin: 12px 0 4px; font-size: 16px; line-height: 1.5; }
.cw-instr small { display: block; margin-top: 6px; font-size: 13px; color: var(--color-text-muted); }
.cw-prog { font-size: 13px; color: var(--color-text-muted); margin: 8px 2px 0; }
.cw-load { font-size: 14px; color: var(--color-text-muted); padding: 12px 4px; }
.cw-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 12px 10px; margin: 10px 0; }
.cw-card .n { position: absolute; left: 10px; top: 10px; font-size: 11px; color: var(--color-text-muted); }
.cw-card .en { font-size: 18px; line-height: 2.1; padding-left: 16px; padding-right: 44px; }
.cw-card .cw-play { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: 15px; display: grid; place-items: center; cursor: pointer; }
.cw-card .cw-play.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.cw-card .ru { font-size: 14px; color: var(--color-text-muted); padding-left: 16px; }
.cw-card .tr { font-size: 14px; margin-top: 4px; padding-left: 16px; }
.cw-card .tr b { font-weight: 700; }
.cw-card .tr.cw-v2 { font-size: 13px; margin-top: 2px; color: var(--color-text-muted); }   /* «вторая форма buy» — мелко под переводом */
.cw-card.cur { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(47, 134, 224, .18); }
/* поле ввода и итог ответа в ленте — стили упражнений (course.css: .xline.hasgap .xin, .xans); своё подчёркивание — только у
   макета Б /proto_words/one.html, где строки движка нет (PO 25.09 §9.32 п.5) */
.cw-one .xgap input { font: inherit; font-size: 18px; min-width: 3ch; padding: 0 6px; border: 0; border-bottom: 2px solid var(--color-border-strong, #999); background: transparent; color: var(--color-text); outline: none; }
.cw-one .xgap input:focus { border-bottom-color: var(--color-primary); }
/* итог ответа — .xans ok / .xans bad (верное над зачёркнутым) из course.css, свои правила сняты 25.09 */
.cw-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; margin: 14px 0; }
.cw-panel h3 { font-size: 17px; margin: 0 0 4px; }
.cw-panel .lead { font-size: 14px; color: var(--color-text-muted); margin: 0 0 8px; }
.cw-panel ul { list-style: none; margin: 0; padding: 0; }
.cw-panel li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.cw-panel li:last-child { border-bottom: 0; }
.cw-panel li .w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cw-panel li .w b { font-size: 16px; }
.cw-panel li .w small { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-panel li button { font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); cursor: pointer; }
.cw-panel .empty { font-size: 14px; color: var(--color-text-muted); padding: 6px 0; }
.cw-big { display: block; width: 100%; margin-top: 12px; font: inherit; font-size: 16px; font-weight: 700; padding: 13px 16px; border-radius: 12px; border: 0; background: var(--color-primary); color: #fff; cursor: pointer; }
.cw-big.green { background: var(--color-learned, #2f8549); }
.cw-big[disabled] { opacity: .6; cursor: default; }
.cw [hidden] { display: none !important; }
/* шкала уровня (PO 23.09 22:5x): зелёное — знал и выучено, синее — на изучении, из всех слов уровня */
/* ШКАЛА УРОВНЯ — вариант А (SCALE-A8-24.09, PO 25.09 00:1x; макет /proto_words/scale.html): без рамки, одна строка цели + счёт,
   полоса 8 px, подпись «знаешь · учишь · осталось» с цветными точками */
.cw-scale { padding: 2px 2px 0; margin: 12px 0 0; }
.cw-scale-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.cw-scale-top b { font-weight: 700; }
.cw-scale-top .cw-cnt { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.cw-bar { display: flex; height: 8px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: var(--color-mode-track, rgba(0, 0, 0, .08)); }
.cw-bar i { display: block; height: 100%; }
.cw-bar i.g { background: var(--color-learned, #2f8549); }
.cw-bar i.b { background: var(--color-primary, #2f86e0); }
.cw-scale-note { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--color-text-muted); margin-top: 5px; }
.cw-scale-note span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.cw-scale-note .g { color: var(--color-learned, #2f8549); } .cw-scale-note .g::before { background: var(--color-learned, #2f8549); }
.cw-scale-note .b { color: var(--color-primary, #2f86e0); } .cw-scale-note .b::before { background: var(--color-primary, #2f86e0); }
.cw-scale-note .l::before { background: var(--color-mode-track, rgba(0, 0, 0, .15)); }
/* режим «по одному слову»: под предложением две кнопки; после Enter подсвечена подсказка выбора */
.cw-choose { display: flex; gap: 10px; margin-top: 12px; padding-left: 16px; }
.cw-choose button { flex: 1; font: inherit; font-size: 16px; font-weight: 700; padding: 12px 10px; border-radius: 12px; border: 2px solid var(--color-border); background: var(--color-bg); color: var(--color-text); cursor: pointer; }
.cw-choose .cw-k.hint { border-color: var(--color-learned, #2f8549); background: var(--color-learned, #2f8549); color: #fff; }
.cw-choose .cw-l.hint { border-color: var(--color-primary, #2f86e0); background: var(--color-primary, #2f86e0); color: #fff; }
/* ШАГ НА ДВИЖКЕ УПРАЖНЕНИЙ (PO 24.09 22:2x): карточка — пункт .xitem (рамка текущего — .xstep .xitem.xcur из course.css, как у
   упражнений; своя карточка — фон, рамка, отступы — остаётся, у .xcur её перекрывает рамка текущего); предложение — строка движка
   (.xline: контур, бегущее слово, сигнал на пропуске .rt-gap); кнопок ▶ у карточек нет — панель ▶ ◁ ▷ снизу. Инструкция звучит —
   подсвечена; ждёт первого тапа (вход без жеста) — мягкая пульсация (как .xinstr). */
.cw-list.xstep .cw-card.xitem { line-height: 1.45; font-size: 16px; }
.cw-list.xstep .cw-card .en { padding-right: 0; }
.cw-list.xstep .cw-card .en .xline { padding: 1px 2px; }
.cw-instr[role="button"] { cursor: pointer; }
.cw-instr.speaking { background: var(--rt-hl, #ffe39a); color: #1a1a1a; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 45%, transparent); }
.cw-instr.speaking small { color: #4a4a4a; }
.cw-instr.xwait { animation: xwait 1.6s ease-in-out infinite; }
/* режим 'mask' (ПРОТОТИП 25.09, §9.33): слово закрашено (.cw-mask — вид .tr-blur тренировки из components.css), поле ввода — под
   карточкой отдельной строкой, стиль поля тренировки (.tr-input) чуть компактнее; после ответа — .tr-input--ok / --bad */
.cw-card .cw-in { margin: 8px 0 2px 16px; }
.cw-card .cw-in .tr-input { font-size: 16px; padding: 9px 12px; }
/* результат в поле — цветом рамки и текста, без заливки (PO 27.09 07:2x «не закрашивать области в красный и зелёный»);
   .tr-input--ok/--bad из components.css красят фон — в курсе снято, в тренировке ридера как было */
.cw-card .tr-input--ok, .cw-card .tr-input--bad { background: transparent; }
.cw-card .tr-input--ok { color: var(--color-learned, #2f8549); font-weight: 700; }
.cw-card .tr-input--bad { color: var(--color-danger); }
/* плашка стоит на линии текста и внутри контура строки: не фиксированная высота .tr-blur (1.15em + middle — выпирала в прототипе,
   PO 13:0x), а текстовый бокс с пустым символом; после ответа (.cw-open) — то же место, та же min-width, слово по центру → без сдвига */
/* РАЗМЕР ПЛАШКИ (PO 25.09 17:5x, §9.33 п.9): «грани плашки совпадают с контуром — сделать меньше по высоте, внутри контура».
   Числа: строка 18 px, контур .xline.hasgap = 30 px (бокс шрифта 24 + padding 1 + border 2 с каждой стороны), плашка была 24.5 px —
   вровень с боксом шрифта. Теперь плашка = 1em (18 px) по центру строчных букв (vertical-align: middle) → до контура ≈ 6 px сверху и
   снизу, до бокса шрифта ≈ 3 px; ширина по числу букв (maskEl). Раскрытая (.cw-open) — обычный текст на базовой линии */
/* PO 18:1x: зазоры до контура РАВНЫЕ сверху и снизу (было 5/7). Плашка — flex-элемент обёртки .xgap (course.css: inline-flex,
   align-items: baseline), поэтому vertical-align у самой плашки не работает, а по базовой линии она вставала на 1 px выше центра.
   Без чисел шрифта (system-ui: на телефоне Roboto, метрики другие): обёртка на время маски = бокс шрифта (1lh при line-height:
   normal) по верху бокса шрифта (text-top), плашка = бокс − 4 px по центру обёртки → 2 px до бокса шрифта сверху и снизу = 5 px до
   контура на любом шрифте; без lh (старые браузеры) — 1.33em / 1.11em при 18 px. Раскрыто (.xset) — обёртка как у упражнений */
.cw-card .xgap:not(.xset) { height: 1.33em; height: 1lh; line-height: normal; align-items: center; vertical-align: text-top; }
.cw-card .xgap .cw-mask { display: inline-block; line-height: normal; height: 1.11em; height: calc(1lh - 4px); overflow: hidden; padding: 0 2px; text-align: center; box-sizing: border-box; }
.cw-card .xgap .cw-mask.cw-open { background: none; border: 0; padding: 0; min-width: 0; height: auto; line-height: inherit; overflow: visible; }   /* раскрыто — обычное предложение (PO 16:5x) */
/* СИГНАЛ НА ПРОПУСКЕ (PO 25.09 17:3x, §9.33 п.8): оранжевый прямоугольник вокруг плашки (course.css: .xgap.rt-gap--arm — кольцо 2 px,
   .xgap.rt-gap--beep — кольцо растёт до 3 px) появлялся и рос при сигнале, выходя за контур строки → снят; выделение при сигнале —
   вспышка САМОЙ плашки (фон и пунктир теплеют), без изменения размера, внутри контура; после сигнала плашка как была */
.cw-card .xgap.rt-gap--arm, .cw-card .xgap.rt-gap--beep { box-shadow: none !important; animation: none !important; }
.cw-card .xgap.rt-gap--beep .cw-mask { animation: cwMaskBeep .22s ease-in-out 3 alternate; }
@keyframes cwMaskBeep { from { background: color-mix(in srgb, var(--color-primary) 13%, transparent); border-color: var(--color-primary); }
                        to { background: color-mix(in srgb, #E08A1E 45%, transparent); border-color: #E08A1E; } }
/* ФРАЗЫ ПОД СЛОВАМИ (PHRASES-STUDY-19.10, course-words.js buildPhrases): заголовок «Фразы», карточка — перевод сверху, поле на всю
   ширину (фраза длиннее слова), после ответа — фраза по-английски (.xans ok / bad, как у слов); тап по отвеченной — звучит фраза */
.cw-phead { font-size: 13px; font-weight: 600; color: var(--color-text-muted); margin: 18px 2px 2px; text-transform: uppercase; letter-spacing: .04em; }
.cw-phrase .ru { font-size: 16px; color: var(--color-text); padding-top: 2px; }
.cw-phrase .cw-pen { font-size: 18px; line-height: 1.8; padding-left: 16px; margin-top: 4px; }
.cw-phrase .cw-in { margin-right: 4px; }
.cw-phrase .cw-in .tr-input { width: 100%; box-sizing: border-box; }