/* ═══════════════════════════════════════════════════════════════════════
   СТРАНИЦА КУРСА И УЧЕБНЫЙ ПЛАН.
   Перенос макета design-drafts/v4-02-kurs.html.

   Из макета не перенесено: ярлыки «откуда цифра» (.src, .legend) и блок
   выбора значка тестов (.icons) — это было служебное оформление черновика.
   Выбранный значок теста (карандаш и лист) стоит в разметке.

   Общие токены, шапка, кнопки, чипы и полосы — css/pages.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ ШАПКА КУРСА ═══
   Сводка на всю ширину, а не колонкой справа: колонка кончалась бы
   на середине экрана, а план тянется до края — рядом полтора экрана пустоты. */
.chead{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--rad) + 6px);
  box-shadow:var(--shadow);padding:clamp(20px,1.7vw,32px);margin-bottom:clamp(18px,1.6vw,28px)}
.chead h1{font-size:var(--h-pg);max-width:22ch}
.chead .sub{margin-top:10px;color:var(--muted);font-size:clamp(14.5px,0.23vw + 12px,16.5px);max-width:60ch}
.crow{display:flex;align-items:flex-end;gap:clamp(18px,2vw,40px);flex-wrap:wrap;
  margin-top:clamp(20px,1.6vw,30px);padding-top:clamp(18px,1.4vw,26px);border-top:1px solid var(--line-2)}
.cstat{display:flex;gap:clamp(20px,2.4vw,46px);flex-wrap:wrap}
.cstat div b{display:block;font-family:Rubik,sans-serif;font-weight:600;
  font-size:clamp(22px,0.94vw + 10px,30px);line-height:1.05;letter-spacing:-.03em}
.cstat div span{display:block;font-size:13.5px;color:var(--muted);margin-top:5px}
.cstat .acc b{color:var(--accent)}
.chead .go{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.chead .go small{font-size:13px;color:var(--muted);text-align:right}
.pbar{margin-top:clamp(16px,1.3vw,24px)}
.pbar .l{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);margin-bottom:8px}
.pbar .l b{color:var(--ink);font-weight:600}

/* Полоса доп-заданий стоит рядом с курсовой и обязана от неё отличаться:
   две одинаковые полосы подряд читаются как одна разбитая надвое. Отличие
   даёт заливка — «Работа над ошибками» это не часть программы курса,
   и её процент в проценты курса не входит (WHY #62). Меньше и тоньше:
   строка вспомогательная. */
.pbar--extra{margin-top:12px}
.pbar--extra .l{font-size:12.5px}
.pbar--extra .prog{height:6px}
.pbar--extra .prog i{background:var(--gold)}

/* Родная кнопка записи LearnPress: разметку печатает плагин (её же скрипт
   и обрабатывает), поэтому здесь только оформление под наши кнопки.

   `text-transform:none` обязателен. У плагина в своей таблице стоит
   `.learnpress-page .lp-button{text-transform:capitalize}`, и в разметке
   «Начать курс» браузер рисовал как «Начать Курс» — рядом с карточкой
   каталога, где та же надпись со строчной буквы. Текст при этом верный,
   правка нужна именно в стилях. */
.chead .go form.enroll-course{margin:0}
.chead .go .lp-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--btn-h);padding:0 clamp(18px,1.3vw,28px);border-radius:calc(var(--rad) - 4px);
  font-family:"Golos Text",sans-serif;font-weight:600;font-size:var(--btn-f);line-height:1;
  text-transform:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  background:var(--accent);color:#fff;box-shadow:0 10px 22px -12px rgba(31,79,163,.75);
  transition:transform .18s ease,background-color .18s}
.chead .go .lp-button:hover{background:#173F86;transform:translateY(-2px)}

/* Закрытый курс: вместо кнопки записи — объяснение (WHY #55). Тот же язык,
   что у замка дрипа ниже (.lockban): золотистая плашка с замком, без красного —
   это не ошибка, а порядок школы. */
.chead .go .clocked{display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:calc(var(--rad) - 5px);
  background:var(--gold-soft);border:1px solid var(--gold-line);color:#6B4E14;font-size:14px}
.chead .go .clocked svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chead .go .clocked b{font-weight:600}

/* ═══ УЧЕБНЫЙ ПЛАН ═══ */
.plan-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(12px,1vw,18px)}
.plan-h h2{font-size:var(--h-sec)}
.plan-h .tog{font-size:14px;color:var(--accent);font-weight:500;cursor:pointer;
  background:none;border:0;padding:0;font-family:inherit}
.plan-h .tog:hover{text-decoration:underline}
.plan{display:grid;gap:clamp(9px,0.7vw,13px)}

.sec{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--rad) + 2px);
  overflow:hidden;transition:border-color .18s}
.sec:hover{border-color:#C9D6E7}
.sec > input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.sech{display:flex;align-items:center;gap:clamp(12px,1vw,18px);cursor:pointer;
  padding:clamp(13px,1vw,18px) var(--pad-c);transition:background-color .16s}
.sech:hover{background:var(--surface-3)}
.sec > input:focus-visible ~ .sech{outline:2px solid var(--accent);outline-offset:-2px}
.sn{width:clamp(34px,0.78vw + 24px,42px);height:clamp(34px,0.78vw + 24px,42px);flex:none;
  border-radius:calc(var(--rad) - 4px);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  font-family:Rubik,sans-serif;font-weight:700;font-size:clamp(14px,0.23vw + 11px,16.5px)}
.sn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sec--done .sn{background:var(--ok-soft);color:var(--ok)}
.sec--lock .sn,.sec--empty .sn{background:var(--surface-2);color:var(--faint)}
/* Доп-блок (WHY #62) номера темы не имеет — вместо цифры значок «по кругу»,
   и цвет золотой: тот же, каким подписана его полоса в шапке курса. Пустой
   кружок здесь не годится, он читался бы как недоделка. */
.sn--extra{background:var(--gold-soft,#FBF0DA);color:var(--gold,#A9761B)}
.sec--done .sn--extra{background:var(--ok-soft);color:var(--ok)}
.sti{flex:1;min-width:0}
.sti b{display:block;font-family:Rubik,sans-serif;font-weight:600;
  font-size:clamp(15px,0.31vw + 11px,17.5px);line-height:1.3}
.sti .m{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px;
  font-size:13px;color:var(--muted)}
.sti .m i{font-style:normal}
.sti .m .dot{width:3px;height:3px;border-radius:50%;background:#C3D0E2;display:inline-block}
.sbar{width:clamp(72px,7vw,116px);flex:none}
.sbar .prog{height:6px}
.sbar em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:6px;text-align:right}
.chev{width:20px;height:20px;flex:none;color:var(--faint);
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease}
.sec > input:checked ~ .sech .chev{transform:rotate(180deg)}
.secb{display:none;border-top:1px solid var(--line-2);background:var(--surface-3)}
.sec > input:checked ~ .secb{display:block}

.it{display:flex;align-items:center;gap:clamp(11px,0.9vw,15px);
  padding:clamp(11px,0.8vw,15px) var(--pad-c) clamp(11px,0.8vw,15px) clamp(56px,4.4vw,78px);
  border-bottom:1px solid var(--line-2);transition:background-color .16s}
.it:last-child{border-bottom:0}
.it:hover{background:#fff}
.ico{width:22px;height:22px;flex:none;color:var(--accent);opacity:.78;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.itt{flex:1;min-width:0}
.itt b{display:block;font-weight:500;font-size:clamp(14px,0.23vw + 11px,15.5px);line-height:1.35}
/* «> span», а не «.itt span»: внутри подписи могут оказаться вложенные
   элементы, и общий селектор растянул бы их в блок на всю ширину строки
   (грабли, описанные в reports/design-data-checklist-2026-07-28.md). */
.itt > span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.itg{display:flex;align-items:center;gap:10px;flex:none}
.tick{width:21px;height:21px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:none}
.tick svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.it--cur{background:var(--accent-soft)!important;box-shadow:inset 3px 0 0 var(--accent)}
.it--cur .itt b{color:var(--accent);font-weight:600}

.sec--lock{background:#FAFCFE}
.sec--lock .sti b{color:var(--muted);font-weight:500}
.lockban{display:flex;align-items:center;gap:10px;margin:0 var(--pad-c) clamp(13px,1vw,18px);
  padding:11px 15px;border-radius:calc(var(--rad) - 5px);
  background:var(--gold-soft);border:1px solid var(--gold-line);color:#6B4E14;font-size:14px}
.lockban svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lockban b{font-weight:600}
.it--lock .itt b{font-weight:400;color:var(--muted)}
.it--lock .ico{color:var(--faint)}
/* тема без содержимого — так тоже бывает, пока её наполняют */
.emptyrow{padding:clamp(14px,1vw,18px) var(--pad-c) clamp(14px,1vw,18px) clamp(56px,4.4vw,78px);
  font-size:14px;color:var(--muted);font-style:italic}

@media(max-width:860px){
  .chead .go{margin-left:0;align-items:stretch;width:100%}
  .chead .go .btn,.chead .go .lp-button{width:100%}
  .chead .go small{text-align:left}
  .chead .go .clocked{justify-content:flex-start}
  .sbar{display:none}
}
@media(max-width:560px){
  .cstat{gap:18px 26px}
  .it,.emptyrow{padding-left:clamp(18px,5vw,30px)}
}

/* ═══ Сброс своего прогресса (виден только преподавателю) ═══
   Намеренно тихий блок: это служебное действие, а не то, ради чего
   открывают страницу курса. Красной кнопки нет — сбрасывается свой
   прогресс, а не чужие данные. */
.creset{margin-top:clamp(14px,1.1vw,20px);padding-top:clamp(12px,1vw,18px);
  border-top:1px solid var(--line)}
.creset .ok{margin:0 0 10px;padding:9px 13px;border-radius:calc(var(--rad) - 6px);
  background:var(--ok-soft);color:var(--ok);font-size:13.5px}
.creset form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.creset button{height:34px;padding:0 15px;border-radius:calc(var(--rad) - 7px);
  font-family:"Golos Text",sans-serif;font-weight:600;font-size:13px;line-height:1;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line);
  cursor:pointer;transition:color .18s,border-color .18s,background-color .18s}
.creset button:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.creset small{font-size:12.5px;color:var(--muted)}