/* IELTS, волна 4а (frontend/ielts-speaking.js): уроки Speaking F41–F48 и интервью F50. Только токены тренажёра — светлая и тёмная
   тема берутся оттуда; остальные классы (ie-q, ie-recbox, ie-meter, ie-prep, ie-notes, rd-why, causes) — из ielts.css.
   Шрифт — роли из tokens.css (аудит Astra 27.10, п. 11). */

/* обзор урока: список шагов */
.sp-steps{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;background:var(--sheet);border:2px solid var(--line);border-radius:16px;overflow:hidden}
.sp-steps li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-top:2px solid var(--line);font:var(--t-ui);color:var(--ink-2);min-height:44px}
.sp-steps li:first-child{border-top:0}
.sp-steps li.done{color:var(--ink-3)}
.sp-steps li.cur{background:var(--inset);color:var(--ink)}
.sp-steps li span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-tnote{margin:4px 0 0;font:var(--t-body);color:var(--ink)}
.sp-tnote .lbl,.sp-mine .lbl,.sp-model .lbl,.sp-check .lbl,.sp-own .lbl,.sp-two .lbl,.sp-when .lbl,.sp-rub .lbl{display:block;font:var(--t-label);color:var(--ink-3);margin:0 0 4px}

/* вопрос после ответа и переформулировка — синяя рамка: это голос экзаменатора, а не карточка */
.ie-q.sp-follow{border-color:var(--pen-line);background:var(--pen-soft)}
.ie-q.sp-noaudio{padding-bottom:16px}
.ie-q.sp-noaudio .ie-say{display:none}

/* моя запись, модель, чек-лист */
.sp-mine{background:var(--inset);border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.sp-mine audio{width:100%;height:40px}
.sp-mine p{margin:0;font:var(--t-body);white-space:pre-wrap}
.sp-model{display:flex;flex-direction:column;gap:6px}
.sp-model.open,.sp-model .lbl ~ p{background:var(--sheet)}
.sp-model p{margin:0;padding:10px 12px;border:2px solid var(--line);border-radius:14px;font:var(--t-body);color:var(--ink)}
.sp-model p.ie-cap{padding:0;border:0;font:var(--t-cap);color:var(--ink-3)}
.sp-model.open{background:none}
.sp-keys{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.sp-keys span{padding:6px 10px;border-radius:12px;background:var(--good-soft);color:var(--good);border:2px solid var(--good-line);font:var(--t-label)}
.sp-over{color:var(--ink-3)!important;text-decoration:line-through;text-decoration-color:var(--bad-line);text-decoration-thickness:1.5px}
.sp-check{display:flex;flex-direction:column;gap:6px}
.sp-ck{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:2px solid var(--line);border-radius:14px;background:var(--sheet);font:var(--t-ui);color:var(--ink-2);text-align:left}
.sp-ck .sp-box{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--line-2);background:var(--sheet)}
.sp-ck.on{border-color:var(--good-line);background:var(--good-soft);color:var(--good)}
.sp-ck.on .sp-box{border-color:var(--good);background:var(--good);position:relative}
.sp-ck.on .sp-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--on-cta);border-width:0 3px 3px 0;transform:rotate(45deg)}
.sp-plan{min-height:140px}

/* забытое слово */
.sp-word{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px 16px;border:2px solid var(--line);border-radius:18px;background:var(--sheet);text-align:center}
.sp-word b{font:var(--t-title);color:var(--ink)}
.sp-word .ie-cap{margin-top:6px}

/* смысловое ударение */
.sp-phrase{padding:14px 16px;border:2px solid var(--line);border-radius:18px;background:var(--sheet);font:var(--t-title);color:var(--ink)}
.sp-var{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:2px solid var(--line);border-radius:16px;background:var(--sheet)}
.sp-var.cur{border-color:var(--bad-line)}
.sp-var p{margin:0;padding-right:48px;font:var(--t-tile);color:var(--ink-2)}
.sp-var p b{color:var(--ink);font-weight:800;background:var(--mark-soft);padding:0 4px;border-radius:6px}
.sp-var small{font:var(--t-label);color:var(--mark)}
.sp-var .ie-say{position:absolute;right:10px;top:8px;bottom:auto}
.sp-var-btns{display:flex;gap:8px;align-items:center;min-height:40px}
.sp-var audio{width:100%;height:40px}
.sp-var .ie-recbox{margin-top:4px}

/* повтор за голосом: голос и я рядом */
.sp-own{padding:10px 12px;border:2px dashed var(--line-2);border-radius:16px;background:var(--inset)}
.sp-own p{margin:0;font:var(--t-body);color:var(--ink)}
.sp-own .sp-mine{margin-top:8px}

/* сценарий решений */
.sp-opts .cause{flex:1 1 100%;min-height:48px;font:var(--t-ui)}

/* интервью */
.sp-when{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:2px solid var(--mark);border-radius:18px;background:var(--mark-soft)}
.sp-when b{font:var(--t-title);color:var(--mark)}
.sp-when small{font:var(--t-cap);color:var(--ink-3)}
.sp-when p{margin:4px 0 0;font:var(--t-body);color:var(--ink)}
.sp-when .btn{margin-top:6px}
.sp-rub{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--sheet);border:2px solid var(--line);border-radius:16px}
.sp-rub .wk-h em{font:var(--t-label);font-style:normal;color:var(--ink-3)}
.sp-rub p{margin:0;display:grid;grid-template-columns:118px 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--line);font:var(--t-body);color:var(--ink)}
.sp-rub p span{font:var(--t-label);color:var(--ink-3)}

/* компьютер: шаг не растягивается на всю ширину */
@media (min-width:900px){
  #ieSpk .ie-body{max-width:720px;width:100%;margin-inline:auto}
}
/* «Объяснение» урока Speaking — две части со значками слева и справа, как у остальных уроков IELTS (п. 45, вариант А, ielts-co.js):
   экран и тело — шире, тогда .co-wrap от 860 px раскладывает разделы в две колонки. Speaking оставался в одну колонку 720 px (сверка 03.11) */
@media (min-width:1100px){
  #ieSpk.screen:has(.co-html.co2){max-width:1120px}
  #ieSpk .ie-body:has(.co-html.co2){max-width:none}
}

/* разбор сценария решений и чек-лист — без отступа под номер вопроса, который есть у rd-why в уроках Reading */
#ieSpk .rd-why{margin-left:0}

/* повтор за голосом: на телефоне голос и моя запись друг под другом, строка «Голос · Слушать» в одну линию */
.sp-two{display:flex;flex-direction:column;gap:8px}
.sp-voice{display:flex;align-items:center;gap:10px}
.sp-voice .lbl{margin:0}
.sp-voice .ls-at{margin:0}

/* ——— Speaking блока 1 (экран #ieSpeak из ielts.js), аудит Astra 27.10, п. 09: ясная граница записи и отправки ———
   вводный экран: два способа начать — как на экзамене (ответ уходит сразу после «Готово») и тренировка (прослушать, отправить кнопкой) */
.sp-begin{gap:12px}
.sp-way{display:flex;flex-direction:column;gap:6px}
.sp-way .ie-cap{margin:0 2px}
.sp-auto{margin:-4px 2px 0;text-align:center}   /* под «Готово»: что случится с ответом */
/* тренировка: своя запись перед отправкой */
.sp-review{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:var(--sheet)}
.sp-review .lbl{display:block;font:var(--t-label);color:var(--ink-3)}
.sp-review audio{width:100%;height:40px}
.sp-review .ie-cap{margin:0}
/* ошибка отправки: какие ответы не приняты */
.sp-bad{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font:var(--t-body);color:var(--ink)}
.ie-up.warn{color:var(--mark)}