/* IELTS, волна 3а: уроки Writing Task 2 (frontend/ielts-writing.js). Только токены тренажёра — светлая и тёмная тема берутся оттуда.
   Вид набора — вариант A (docs/design-rules.md, 25.10): шаги по одному на экран, «Назад» и главная кнопка закреплены внизу;
   на компьютере слева задание и список шагов, справа текущий шаг. Шрифт — роли из tokens.css (аудит Astra 27.10, п. 11). */

/* общее */
.wr-opts{display:flex;flex-wrap:wrap;gap:6px}
.wr-opts.col{flex-direction:column;align-items:stretch}
.wr-opts.col .cause{text-align:left;min-height:44px;font:var(--t-ui)}   /* вариант ответа предложением — как .opt в движке */
.wr-opts .cause.dim,.wr-opts .cause:disabled.dim{opacity:.45}
.rd-why.wr-y{margin:0}   /* без отступа под номер вопроса, как у Reading */
.wr-why1{margin:6px 0 0;font:var(--t-cap);color:var(--ink-2)}
.wr-prompt{flex:none;background:var(--sheet);border:2px solid var(--line);border-radius:18px;padding:10px 14px 12px}
.wr-prompt p{margin:4px 0 0;font:var(--t-body);color:var(--ink)}
.wr-draft{border-style:dashed}
.wr-pmore{display:none;margin-top:4px;min-height:44px;padding:4px 0;background:none;border:0;font:var(--t-ui);color:var(--pen)}
.wr-en{margin:8px 0 0!important;padding:8px 12px;border-radius:12px;background:var(--inset);font:var(--t-body)}
.wr-instr{background:var(--inset);border-radius:14px;padding:8px 14px 10px}
.wr-instr p{margin:2px 0 0;font:var(--t-cap);color:var(--ink-2)}
.wr-off{opacity:.75;cursor:default}
.wr-ok,.wr-bad,.wr-free{flex:none;margin-left:auto;font:var(--t-label);padding:2px 8px;border-radius:99px}
.wr-ok{background:var(--good-soft);color:var(--good)}
.wr-bad{background:var(--bad-soft);color:var(--bad)}
.wr-free{background:var(--inset);color:var(--ink-3)}

/* «Мой алгоритм» */
.wr-algo{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--sheet);border:2px solid var(--line);border-radius:16px}
.wr-algo-f{display:flex;align-items:center;gap:10px}
.wr-algo-f .ie-cap{flex:1;text-align:right}
.wr-algo-ex{margin:0;font:var(--t-body);white-space:pre-wrap}
.wr-memo{cursor:pointer;color:var(--pen);border-color:var(--pen-line)}

/* «Если застрял» */
.wr-case{padding:12px 14px;border-radius:16px;background:var(--inset)}
.wr-case p{margin:2px 0 0;font:var(--t-body);font-weight:600;color:var(--ink)}
.wr-case .lbl{display:block;font:var(--t-label);color:var(--ink-3)}
.wr-copt b{margin-right:4px}

/* набор: колонки, шаги, навигация */
.wr-cols{display:flex;flex-direction:column;gap:12px}
.wr-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.wr-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.wr-steps{display:none;list-style:none;margin:0;padding:0;flex-direction:column;gap:4px}
.wr-steps button{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border:2px solid transparent;border-radius:12px;background:none;font:var(--t-ui);color:var(--ink-2);text-align:left}
.wr-steps button:disabled{color:var(--ink-3);opacity:.6}
.wr-steps li.cur button{border-color:var(--pen-line);background:var(--pen-soft);color:var(--pen)}
.wr-sn{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--inset);font:var(--t-label);font-weight:800;color:var(--ink-2)}
.wr-steps li.done .wr-sn{background:var(--good-soft);color:var(--good)}
.wr-prog{display:flex;align-items:center;justify-content:space-between;gap:10px;font:var(--t-label);color:var(--ink-3)}
.wr-dots{display:flex;gap:5px}
.wr-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.wr-dots i.done{background:var(--good-line)}
.wr-dots i.cur{background:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.wr-q{margin:0;font:var(--t-head);color:var(--ink)}
.wr-w{display:flex;flex-direction:column;gap:10px;min-width:0}
.wr-w .lbl,.wr-rv .lbl,.wr-fix .lbl{display:block;font:var(--t-label);color:var(--ink-3);margin:4px 0 0}
.wr-hints{margin:0}
/* панель «Назад» и главной кнопки — у нижнего края экрана: отступ снизу у ie-screen 24px, поэтому bottom отрицательный */
.wr-nav{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom,0px));z-index:4;display:grid;grid-template-columns:auto 1fr;gap:10px;margin:4px -2px 0;padding:10px 2px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:2px solid var(--line)}
.wr-nav .btn{border-radius:14px;padding:12px 18px}
.wr-nav .btn:disabled{opacity:.45;box-shadow:none}
.wr-recap{padding:8px 12px;border-radius:12px;background:var(--inset)}
.wr-recap p{margin:2px 0 0;font:var(--t-body);color:var(--ink)}

/* F31 разметка задания: роль выбирается сверху, куски задания — нажатием; роль видна цветом и значком */
.wm-pal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wm-role{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 6px;border:2px solid var(--line);border-bottom-width:4px;border-radius:12px;background:var(--sheet);font:var(--t-label);color:var(--ink-2)}
.wm-role.on{border-color:currentColor}
.wm-role.r-t.on{color:var(--pen);background:var(--pen-soft)}
.wm-role.r-l.on{color:var(--mark);background:var(--mark-soft)}
.wm-role.r-q.on{color:var(--ink);background:var(--inset)}
.wm-nw{white-space:nowrap}
.wm-b{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:var(--t-label);background:var(--ink-3);color:var(--paper);vertical-align:2px;margin-right:3px}
.r-t .wm-b{background:var(--pen)}
.r-l .wm-b{background:var(--mark)}
.r-q .wm-b{background:var(--ink-2)}
.wm-text{margin:0;font:var(--t-body);line-height:2.15;color:var(--ink)}   /* исключение: строка 2.15 — куски задания с подложкой и нижней чертой нажимаются */
.wm-ch{padding:3px 4px;border-radius:7px;border-bottom:2px dotted var(--line-2);box-decoration-break:clone;-webkit-box-decoration-break:clone;cursor:default}
.wm-ch[role="button"]{cursor:pointer}
.wm-ch[role="button"]:focus-visible{outline:3px solid var(--pen-line);outline-offset:1px}
.wm-ch.r-t{background:var(--pen-soft);color:var(--pen);border-bottom-color:var(--pen)}
.wm-ch.r-l{background:var(--mark-soft);color:var(--mark);border-bottom:3px solid var(--mark)}
.wm-ch.r-q{background:var(--inset);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink-2);border-bottom-color:transparent}
.wm-ch.bad{outline:2px dashed var(--bad-line);outline-offset:1px}
.wm-sup{font:var(--t-label);color:var(--mark);margin-left:1px}
.wm-notes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.wm-notes li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;font:var(--t-cap);color:var(--ink-2)}
.wm-notes b{color:var(--mark);font-weight:600}
.wm-pos{display:flex;flex-direction:column;gap:6px}
.wm-pos .wr-opts{flex-direction:column;align-items:stretch}
.wm-pos .cause{text-align:left;min-height:44px}

/* F32 тезисы, F33 карточки идей */
.wd-list,.ws-list{display:flex;flex-direction:column;gap:10px}
.wd-th,.ws-card{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;background:var(--sheet);border:2px solid var(--line);border-radius:16px;padding:12px 14px 12px 12px}
.ws-card.ok{border-color:var(--good-line)}
.ws-card.bad{border-color:var(--bad-line)}
.wd-b{display:flex;flex-direction:column;gap:8px;min-width:0}
.wd-b > p{margin:3px 0 0;font:var(--t-body);font-weight:600;color:var(--ink)}
.wd-th .wr-opts{display:grid;grid-template-columns:1fr 1fr}   /* четыре диагноза — двумя рядами, а не столбиком */
.wd-th .cause{min-height:44px;line-height:1.25}
.ws-own{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:2px dashed var(--line);border-radius:16px}
.ws-own p{margin:0;font:var(--t-body)}

/* F34 абзац из плиток */
.wo-built{display:flex;flex-direction:column;gap:6px;min-height:64px;padding:10px;border:2px dashed var(--line-2);border-radius:16px;background:var(--inset);margin:0}
.wo-empty{margin:auto 4px}
.wo-pool{display:flex;flex-direction:column;gap:8px}
.wo-tile{display:flex;align-items:flex-start;gap:8px;width:100%;padding:10px 12px;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;background:var(--sheet);font:var(--t-ui);color:var(--ink);text-align:left}   /* плитка-предложение: как вариант ответа, не 18 px */
.wo-tile:active{transform:translateY(2px)}
.wo-tile.placed{border-color:var(--pen-line);background:var(--pen-soft)}
.wo-k{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--pen);color:var(--paper);font:var(--t-label);font-weight:800}
ol.wo-built{list-style:none;counter-reset:wo;padding:10px}
ol.wo-built li{counter-increment:wo;display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:8px 10px;border-radius:12px;background:var(--sheet);font:var(--t-body)}
ol.wo-built li::before{content:counter(wo);display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--inset);font:var(--t-label);font-weight:800;color:var(--ink-2)}
ol.wo-built li.ok::before{background:var(--good-soft);color:var(--good);content:"✓"}
ol.wo-built li.bad{background:var(--bad-soft)} ol.wo-built li.bad::before{background:var(--bad-soft);color:var(--bad);content:"✗"}
ol.wo-built li small{grid-column:2;font:var(--t-cap);color:var(--ink-3)}
ol.wo-built.key{border-style:solid;border-color:var(--good-line)}

/* F35 развитие довода: звенья цепочки */
.wc-claim{padding:10px 14px;border-radius:16px;background:var(--pen-soft)}
.wc-claim p{margin:2px 0 0;font:var(--t-body);font-weight:600;color:var(--ink)}
.wc-link{display:flex;flex-direction:column;gap:6px}
.wc-opts{display:flex;flex-direction:column;gap:6px}
.wc-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;padding:9px 12px;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;background:var(--sheet);font:var(--t-ui);color:var(--ink);text-align:left}
.wc-opt small{font:var(--t-cap);color:var(--ink-2)}
.wc-opt.on{border-color:var(--pen-line);background:var(--pen-soft)}
.wc-opt.ok{border-color:var(--good-line);background:var(--good-soft)}
.wc-opt.bad{border-color:var(--bad-line);background:var(--bad-soft)}
.wc-opt.dim{opacity:.5;border-bottom-width:2px}

/* F05 две версии рядом */
.wv-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.wv-ver{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:var(--sheet)}
.wv-ver.on{border-color:var(--pen-line)}
.wv-ver.best{border-color:var(--good-line)}
.wv-ver p{margin:0;font:var(--t-body);color:var(--ink)}
.wv-h{display:flex;align-items:center;gap:8px}
.wv-h b{font:var(--t-label);color:var(--ink-2)}
.wv-ver .btn{align-self:flex-start}
@media (min-width: 760px){ .wv-pair{grid-template-columns:1fr 1fr} }

/* F06 клиника, F36 связность: предложения абзаца нажимаются */
.wk-par{margin:0;padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:var(--sheet);font:var(--t-body);line-height:1.95;color:var(--ink)}   /* исключение: строка 1.95 — предложения с номером-кружком нажимаются */
.wk-s{padding:3px 3px;border-radius:7px;border-bottom:2px dotted var(--line-2);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wk-s[role="button"]{cursor:pointer}
.wk-s[role="button"]:focus-visible{outline:3px solid var(--pen-line);outline-offset:1px}
.wk-n{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:4px;border-radius:6px;background:var(--inset);font:var(--t-label);color:var(--ink-2);vertical-align:2px}
.wk-s.on{background:var(--pen-soft);border-bottom-color:var(--pen)}
.wk-s.on .wk-n{background:var(--pen);color:var(--paper)}
.wk-s.ok{background:var(--good-soft);border-bottom-color:var(--good-line)}
.wk-s.ok .wk-n{background:var(--good);color:var(--paper)}
.wk-s.bad{background:var(--bad-soft);border-bottom-color:var(--bad-line)}
.wk-s.bad .wk-n{background:var(--bad);color:var(--paper)}
.wk-s.miss{background:var(--mark-soft);border-bottom:2px dashed var(--mark)}
.wk-s.miss .wk-n{background:var(--mark);color:var(--paper)}

/* свой текст: поля, счёт слов, самопроверка, образец */
.ww-ta{min-height:72px;font:var(--t-body)}
.ww-part{display:flex;flex-direction:column;gap:4px}
.ww-count{margin:0;font:var(--t-label);color:var(--ink-3)}
.ww-count.ok{color:var(--good)}
.ww-checks{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:var(--inset)}
.ww-ck{display:flex;align-items:flex-start;gap:8px;min-height:44px;font:var(--t-body);color:var(--ink-2)}
.ww-ck input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--good-line)}
.ww-mine,.ww-sample{padding:10px 14px;border-radius:14px;font:var(--t-body);color:var(--ink)}
.ww-mine{background:var(--sheet);border:2px solid var(--line)}
.ww-sample{background:var(--good-soft)}
.ww-mine p,.ww-sample p{margin:0 0 6px} .ww-mine p:last-child,.ww-sample p:last-child{margin:0}

/* версии: что убрано и что добавлено (не красным: это не ошибка ученика) */
.wf{margin:0;padding:10px 14px;border:2px solid var(--line);border-radius:14px;background:var(--sheet);font:var(--t-body);line-height:1.7;color:var(--ink)}   /* строка 1.7: вставки с нижней чертой и подложкой */
.wf-ins{background:var(--pen-soft);color:var(--pen);border-bottom:2px solid var(--pen);border-radius:4px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wf-del{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:2px}
.wv-ver:not(.best) .wf-ins{background:var(--mark-soft);color:var(--mark);border-bottom-color:var(--mark)}
.wr-why1 .wf-ins{font:var(--t-label);padding:1px 6px}

/* разбор набора */
.wr-rv{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;border:2px solid var(--line);border-radius:18px;background:var(--sheet)}
.wr-rv .wd-th,.wr-rv .ws-card,.wr-rv .wk-par,.wr-rv .wv-ver,.wr-rv .wf{background:var(--paper)}
.wr-rv-h{display:flex;align-items:center;gap:10px}
.wr-rv-h b{font:var(--t-ui)}
.wr-rv .rd-why{margin:0}
.wr-fix{display:flex;flex-direction:column;gap:8px;padding:10px;border:2px dashed var(--pen-line);border-radius:14px}

/* доработка своего эссе */
.we-find{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:var(--inset)}
.we-find p{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.we-find .lbl{flex-basis:100%;font:var(--t-label);color:var(--ink-3)}
.we-find .cause{font-weight:700}
.we-text{min-height:320px}
.we-diff .wf{margin-top:8px}

/* телефон и компьютер */
#ieLsBody:has(.wr-cols),#ieLsBody:has(.wr-rv){padding-bottom:0}   /* отступ под плавающую «К тексту» Reading здесь не нужен */
@media (max-width: 1099px){
  .wr-prompt.wr-hide-ph{display:none}   /* на шаге разметки само задание — это и есть упражнение */
  .wr-side .wr-prompt.clamp p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}   /* телефон: три строки задания, остальное по кнопке */
  .wr-side .wr-pmore{display:inline-block}
}
@media (min-width: 1100px){
  #ieLesson .wr-cols{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px;align-items:start}
  .wr-side{position:sticky;top:64px;max-height:calc(100vh - 92px);overflow-y:auto}   /* не выше места до низа экрана (отступ 24 px): иначе в конце страницы колонку сдвигало под шапку */
  .wr-steps{display:flex}
  .wr-dots{display:none}
  .wr-nav{position:static;border-top:0;padding-top:4px}
}

/* ——— полное эссе (экран #ieEssay из ielts.js), аудит Astra 27.10, п. 08: на компьютере редактор был ~488×280 ———
   шире 1100 px — контейнер до 1120 px, задание 340 px слева (липкое), редактор от 560 px и от 480 px высоты, текст 17/26 (ielts.css) */
@media (min-width:1100px){
  #ieEssay.screen{max-width:1120px;padding-inline:24px;display:grid;grid-template-columns:340px minmax(560px,1fr);grid-template-rows:auto auto auto auto auto;column-gap:24px;align-content:start}
  #ieEssay .ie-top{grid-column:1 / -1;grid-row:1}
  #ieEssay .ie-task{grid-column:1;grid-row:2 / span 4;position:sticky;top:64px;align-self:start;max-height:calc(100vh - 88px);overflow:auto}
  #ieEssay .ie-begin,#ieEssay .ie-text{grid-column:2;grid-row:2}
  #ieEssay .ie-save{grid-column:2;grid-row:3}
  #ieEssay .ie-pace{grid-column:2;grid-row:4}   /* темп письма (п. 71) — под строкой сохранения */
  #ieEssay #ieSubmit{grid-column:2;grid-row:5;justify-self:end;width:auto;min-width:280px}
  #ieEssay .ie-text{min-height:480px;padding:16px 18px}
}