/* Интерактив курсов. Подключается последним (block assets в base.html) и только
   в рубрике «Курсы». Классы course-* приходят из тела статьи и обязаны прилично
   выглядеть без скрипта; course-ui-* создаёт course.js. Цвета — только токены тем. */

/* ===== Блоки заданий: каркас и вид без скрипта ===== */
.course-quiz, .course-pick, .course-number, .course-template { margin: 24px 0; padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); }
.course-quiz::before, .course-pick::before, .course-number::before, .course-template::before { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft-fg); }
.course-quiz::before { content: "Проверьте себя"; }
.course-pick::before { content: "Задание · отметьте нужное"; }
.course-number::before { content: "Задание · расчёт"; }
.course-template::before { content: "Шаблон"; }
.course-template.course-ui-ready::before { content: "Конструктор текста"; }
.course-quiz > p:not([class]), .course-pick > p:not([class]), .course-number > p:not([class]) { color: var(--fg); font-weight: 600; }
.course-quiz > details, .course-pick > details, .course-number > details { margin-top: 12px; }
.course-ui-ready > details { display: none; }
.blog-body details > summary { cursor: pointer; font-weight: 600; color: var(--accent-soft-fg); }
.blog-body > details { margin: 18px 0; }
.blog-body > details > summary { margin-bottom: 12px; }
.blog-body .course-why, .blog-body .course-hints { margin-top: 10px; }
.course-template > blockquote { margin: 0; }
.course-ask { display: block; margin-top: 4px; font-size: 14px; color: var(--fg-muted); }
.course-ask::before { content: "Как спросить: "; font-weight: 600; }
.course-stages > table[hidden] { display: none; }

/* ===== Варианты и отметки ===== */
.blog-body .course-ui-options, .blog-body .course-checklist.course-ui-ready { list-style: none; padding-left: 0; gap: 8px; }
.course-ui-option { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; line-height: 1.5; }
.course-ui-option:hover { border-color: var(--border-strong); }
.course-ui-option > input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.course-ui-option:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-glow); }
.course-ui-option:has(input:disabled) { cursor: default; }
li.course-ui-right > .course-ui-option { border-color: var(--ok-border); background: var(--ok-tint); }
li.course-ui-wrong > .course-ui-option { border-color: var(--red); }
.course-ui-note { display: block; margin: 6px 2px 0 44px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.course-ui-note:empty { display: none; }

/* ===== Ответ, разбор, строки действий ===== */
.blog-body .course-ui-feedback { margin: 12px 0 0; font-size: 15px; line-height: 1.55; }
/* Пустую область ответа не прячем display:none: скринридер объявляет только
   области role=status, которые уже были в дереве доступности. Пустой абзац и так нулевой высоты. */
.course-ui-feedback:empty { margin: 0; }
.blog-body .course-ui-feedback.is-ok { color: var(--green); }
.blog-body .course-ui-feedback.is-bad { color: var(--red); }
.course-ui-explain { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.blog-body .course-ui-explain p, .blog-body .course-ui-explain li { font-size: 15px; }
.blog-body .course-ui-explain p:last-child { margin-bottom: 0; }
.course-ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.course-ui-input { width: 170px; font-family: var(--font-mono); }
/* Решённое поле только для чтения не должно выглядеть редактируемым. */
.course-ui-input[readonly] { background: transparent; border-style: dashed; }
.course-ui-unit { font-size: 15px; color: var(--fg-2); }
.blog-body .course-ui-count { margin: 18px 0 8px; font-size: 14px; font-family: var(--font-mono); color: var(--fg-muted); }
.course-ui-output { margin-top: 12px; padding: 14px 18px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.course-ui-output[hidden] { display: none; }
.blog-body .course-ui-hint { margin: 10px 0 0; font-size: 13px; color: var(--fg-muted); }
.blog-body a.btn { text-decoration: none; }
.blog-body a.btn-primary { color: var(--accent-fg); }
.blog-body a.btn-ghost { color: var(--fg); }

/* ===== Конструктор текста ===== */
.course-ui-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
/* Поля — общего размера .input (17 px): Safari на iOS приближает страницу при фокусе на поле мельче 16 px. */
/* Подпись — к верху ячейки, поле — к низу: иначе при подписи в две строки поля одной строки сетки расходятся. */
.course-ui-field { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--fg-muted); }
/* Фон цитаты — --accent-tint, поэтому пустое поле выделено рамкой и фоном панели, а не оттенком. */
.course-ui-slot { padding: 0 3px; border: 1px dashed var(--accent-soft-fg); border-radius: 4px; color: var(--accent-soft-fg); background: var(--panel); overflow-wrap: anywhere; }
.course-ui-slot.is-filled { padding: 0; border: 0; color: var(--fg); background: none; font-weight: 600; }

/* ===== Переключатель этапов ===== */
.course-ui-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.course-ui-tab { font: inherit; font-size: 14px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--fg-2); cursor: pointer; }
.course-ui-tab[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--fg); }
.blog-body .course-ui-leader { margin: 14px 0 10px; font-size: 15px; color: var(--fg); }
.blog-body .course-ui-rank { list-style: none; margin: 0; padding: 0; gap: 8px; counter-reset: place; }
.course-ui-rank li { counter-increment: place; display: grid; grid-template-columns: 28px 1fr auto; column-gap: 12px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.course-ui-rank li::before { content: counter(place); font-family: var(--font-mono); color: var(--fg-muted); }
.course-ui-rank li.is-leader { border-color: var(--ok-border); background: var(--ok-tint); }
.course-ui-rank span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
.course-ui-rank em { grid-column: 2 / -1; font-style: normal; font-size: 13px; color: var(--fg-muted); }

/* ===== Конец урока, прогресс, возврат, финал ===== */
.course-ui-lesson-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 32px 0 8px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.course-ui-lesson-end.is-done { border-color: var(--ok-border); background: var(--ok-tint); }
.course-ui-lesson-end [hidden], .course-ui-progress [hidden], .course-ui-final[hidden] { display: none; }
.blog-body .course-ui-tasks, .blog-body .course-ui-status { margin: 0; font-size: 14px; font-family: var(--font-mono); color: var(--fg-muted); }
.blog-body .course-ui-status { color: var(--fg); font-weight: 600; }
.course-ui-tasks:empty { display: none; }
.course-ui-undo, .course-ui-reset { font: inherit; font-size: 13px; padding: 0; border: 0; background: none; color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.course-ui-progress { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.course-ui-progress-text { margin: 0 0 8px; font-family: var(--font-mono); color: var(--fg); }
.course-ui-bar { height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.course-ui-bar > span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .3s; }
.course-ui-continue { display: inline-block; margin-top: 10px; color: var(--accent-soft-fg); text-decoration: underline; text-underline-offset: 2px; }
.course-ui-progress .course-ui-reset { display: block; margin-top: 8px; }
/* Липкое оглавление вместе с панелью прогресса бывает выше экрана (восемь уроков и «Практика»). */
/* Поле слева: ссылки оглавления сдвинуты на −12 px, и прокрутка обрезала бы кольцо фокуса. */
@media (min-width: 821px) { .toc-box { max-height: calc(100vh - 100px); overflow-y: auto; padding-left: 12px; margin-left: -12px; } }
/* Отступом, а не пробелом: на тач-экранах ссылка оглавления — flex, и ведущий пробел схлопывается. */
a.course-ui-done::after { content: "✓"; margin-left: .3em; color: var(--green); }
.course-ui-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--accent-soft); border-radius: 10px; background: var(--accent-tint); font-size: 15px; color: var(--fg); }
.course-ui-resume .course-ui-undo { margin-left: auto; }
.course-ui-final { margin: 28px 0; padding: 24px; border: 1px solid var(--ok-border); border-radius: 12px; background: var(--ok-tint); scroll-margin-top: 88px; }
.blog-body .course-ui-final h3 { margin: 0 0 10px; }
.blog-body .course-ui-stats { margin: 0; color: var(--fg); }

/* ===== Тач, узкий экран, движение ===== */
@media (pointer: coarse) {
  .course-ui-option { min-height: 44px; align-items: center; }
  .course-ui-option > input { margin-top: 0; }
  .course-ui-tab, .course-ui-undo, .course-ui-reset, .blog-body .btn-sm { min-height: 44px; }
  .course-ui-undo, .course-ui-reset { display: inline-flex; align-items: center; }
  .course-ui-next, .course-ui-continue, .course-ui-resume-link { display: inline-flex; align-items: center; min-height: 44px; }
  /* Отступами, а не flex: у summary с display:flex пропадает треугольник раскрытия. */
  .blog-body details > summary { padding: 11px 0; }
}
@media (max-width: 520px) {
  .course-quiz, .course-pick, .course-number, .course-template, .course-ui-final { padding: 16px; }
  /* Общий .btn не переносит строки: длинная подпись вылезала бы за край узкого экрана. */
  .course-ui-row .btn, .course-ui-output .btn { white-space: normal; text-align: center; max-width: 100%; }
  .course-ui-note { margin-left: 0; }
  /* Единица остаётся рядом с полем, а не уезжает на строку к кнопке. */
  .course-ui-input { width: auto; flex: 1 1 8em; min-width: 0; }
  .course-ui-rank li { grid-template-columns: 24px 1fr; }
  .course-ui-rank span { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .course-ui-bar > span { transition: none; } }