/*
 * Стили учебного роадмапа (/roadmap/, DGT-ROADMAP).
 *
 * Подключается из самого макета (layouts/roadmap/list.html), а не из
 * partials/head.html — тем же приёмом, что /career/, /requests/ и каталог
 * курсов: страница одна, и платить за её стили на всех остальных незачем.
 *
 * ПАЛИТРА НЕ СВОЯ. Все цвета — псевдонимы портальных --course-*, ровно как у
 * банка заданий (css/learn.css) и книги о коммуникации. Вторая палитра рядом
 * означала бы второе место, где чинить контраст, и первое, где разойтись с
 * замером scripts/check-contrast.mjs. Запасные значения оставлены: если
 * courses-v2.css не доехал, карта обязана остаться читаемой, а не белой на
 * белом.
 *
 * ВНЕШНИХ РЕСУРСОВ НЕТ НИ ОДНОГО: ни шрифтов, ни картинок по http. Страница
 * открывается офлайн ровно так же, как онлайн.
 *
 * САМА КАРТА НЕ ЗАВИСИТ ОТ JAVASCRIPT НИ ОДНИМ ПРАВИЛОМ. Раскрытие трека — это
 * <details>/<summary> браузера; если бы состояние держал скрипт, читатель без
 * него увидел бы карту, у которой не открывается ни один трек. От скрипта
 * зависят ровно две вещи — вид кнопки «забрать себе» и весь режим хода, — и обе
 * честно: без скрипта на странице нет ни одной из них, они приезжают с hidden.
 */

.roadmap-page {
  --roadmap-text: var(--course-text, #f5f7fa);
  --roadmap-muted: var(--course-muted, #9baab8);
  --roadmap-panel: var(--course-surface, #071018);
  --roadmap-panel-raised: var(--course-surface-raised, #0b1620);
  --roadmap-line: var(--course-line, #15566a);
  --roadmap-accent: var(--course-cyan, #00e5e5);
  --roadmap-radius: var(--course-radius, 14px);
  --roadmap-radius-sm: var(--digitable-radius-sm, 10px);
}

.roadmap-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.roadmap-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Кнопка «забрать себе» и число рядом с ней.

   Своей палитры здесь тоже нет: цвет — тот же --roadmap-accent, которым
   нарисованы стрелки связей, а подложка ответа — та же --roadmap-panel-raised,
   что у карточек треков. Второй набор цветов означал бы второе место, где
   чинить контраст.

   ПУСТОЙ УЗЕЛ ЧИСЛА НЕ ДОЛЖЕН НИЧЕГО ПЕЧАТАТЬ. У .content-stat есть ::before —
   точка-маркер перед числом, и на странице материала она стоит рядом с датой,
   где число всегда есть. Здесь узел остаётся пустым у всякого, кому сводка не
   доехала (и у всех, пока карту не забрали ни разу), а одинокая точка читается
   как сор в вёрстке. */
.roadmap-copy {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.roadmap-copy .content-stat:empty {
  display: none;
}

.roadmap-copy__button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--roadmap-accent);
  border-radius: var(--roadmap-radius-sm);
  color: var(--roadmap-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 7px 14px;
}

.roadmap-copy__button:hover,
.roadmap-copy__button:focus-visible {
  background: var(--roadmap-panel-raised);
}

/* Ответ кнопки держится несколько секунд и меняет только рамку: смена цвета
   текста на зелёный или красный осталась бы единственным признаком для того,
   кто цвета не различает, — а подпись меняется и так. */
.roadmap-copy__button[data-roadmap-copy-state="done"] {
  background: var(--roadmap-panel-raised);
}

.roadmap-copy__button[data-roadmap-copy-state="failed"] {
  border-style: dashed;
}

/* Кнопка новеллы у каждой ступени и место, куда рантайм площадки вставляет
   свой кадр.

   ПАЛИТРЫ ЗДЕСЬ ТОЖЕ НЕТ СВОЕЙ: те же --roadmap-accent и --roadmap-line, что у
   «забрать себе» и у карточек треков, — иначе появилось бы третье место, где
   чинить контраст (scripts/check-contrast.mjs ходит по /roadmap/ с 5 сентября).

   ГЕОМЕТРИЮ КАДРА ЗАДАЁТ НЕ ЭТОТ ФАЙЛ. Рантайм площадки вставляет свой стиль
   для .dvn-embed-host--mounted (16/9, минимальная высота, рамка) при первом
   монтировании; здесь только отступы и запрет вылезать за ширину карточки.
   Две высоты в двух файлах разошлись бы в первый же день. */
.roadmap-stage__novel {
  margin: 0 0 12px;
}

.roadmap-novel__button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--roadmap-accent);
  border-radius: var(--roadmap-radius-sm);
  color: var(--roadmap-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 7px 14px;
}

.roadmap-novel__button:hover,
.roadmap-novel__button:focus-visible {
  background: var(--roadmap-panel-raised);
}

.roadmap-novel__embed {
  margin: 0 0 16px;
  max-width: 100%;
}

/* Пока кадра нет, места он не занимает. Правило нужно потому, что стиль
   площадки с таким же запретом появляется только вместе с первым кадром. */
.roadmap-novel__embed[hidden] {
  display: none;
}

/* Четыре числа карты. Они не украшение: спека прямо запрещает обещать «время
   прохождения», и вместо часов рядом с картой стоит то, что можно пересчитать
   прогоном, — счёт ступеней, треков, глав и названных руками связей. */
.roadmap-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
}

.roadmap-counts > div {
  border: 1px solid var(--roadmap-line);
  border-radius: var(--roadmap-radius);
  background: var(--roadmap-panel);
  padding: 14px 16px;
}

.roadmap-counts dt {
  color: var(--roadmap-muted);
  font-size: 0.86rem;
  margin: 0 0 6px;
}

.roadmap-counts dd {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
}

.roadmap-note {
  margin: 0;
  max-width: 72ch;
  line-height: 1.6;
}

.roadmap-note--muted {
  color: var(--roadmap-muted);
  font-size: 0.92rem;
}

/* ─────────────────────────────────────────────────────────── ступени и треки */

.roadmap-stages,
.roadmap-tracks,
.roadmap-chapters__list,
.roadmap-track__links,
.roadmap-manual__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.roadmap-stages {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.roadmap-stage {
  border: 1px solid var(--roadmap-line);
  border-radius: var(--roadmap-radius);
  background: var(--roadmap-panel);
  padding: 20px;
}

.roadmap-stage__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 1.35rem;
}

.roadmap-stage__number {
  color: var(--roadmap-accent);
  font-family: var(--course-mono, ui-monospace, monospace);
  font-size: 0.95rem;
}

.roadmap-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.roadmap-track {
  border: 1px solid var(--roadmap-line);
  border-radius: var(--roadmap-radius-sm);
  background: var(--roadmap-panel-raised);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roadmap-track__title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

/* «Сделать свой» у трека. Рамкой, а не заливкой, и мельче соседней «забрать
   себе»: та стоит одна на всю карту, а этих семьдесят — по одной в каждой
   карточке трека, и заливка превратила бы страницу в поле кнопок.

   РАМКА АКЦЕНТОМ, А НЕ ЛИНИЕЙ КАРТОЧКИ, И ЭТО ЗАМЕР. Сперва здесь стоял
   --roadmap-line, чтобы кнопка была тише: на подложке карточки трека это
   1,36 : 1 в тёмной теме и 1,31 : 1 в светлой (посчитано формулой самого
   scripts/check-contrast.mjs). Граница органа управления — единственное, чем он
   опознаётся как орган, и такой её видно только тем, кто и так знает, что она
   там есть. Акцент даёт 11,05 и 5,07 — те же числа, что у подписи, и тот же
   цвет, которым обведена соседняя кнопка. Тише кнопка осталась кеглем, а не
   невидимостью. */
.roadmap-track__board {
  appearance: none;
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--roadmap-accent);
  border-radius: var(--roadmap-radius-sm);
  color: var(--roadmap-accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  padding: 4px 10px;
}

.roadmap-track__board:hover,
.roadmap-track__board:focus-visible {
  background: var(--roadmap-panel);
}

/* Отказ по длине: кнопка становится неактивной и говорит числами. Признак —
   не цвет: тому, кто цвета не различает, остаётся подпись и сама неактивность. */
.roadmap-track__board:disabled {
  border-style: dashed;
  color: var(--roadmap-muted);
  cursor: default;
}

/* Связи у карточки трека. Слово «сначала»/«дальше» стоит перед ссылкой, а не
   вместо неё: стрелка без направления читается в обе стороны. */
.roadmap-track__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
}

.roadmap-link span {
  color: var(--roadmap-muted);
}

.roadmap-chapters > summary {
  cursor: pointer;
  color: var(--roadmap-muted);
  font-size: 0.9rem;
}

.roadmap-chapters__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.roadmap-chapter {
  display: flex;
  gap: 8px;
}

.roadmap-chapter > span {
  color: var(--roadmap-muted);
  font-family: var(--course-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  flex: 0 0 auto;
  padding-top: 1px;
}

/* ──────────────────────────────────────────────── стрелки, названные руками */

.roadmap-manual {
  border: 1px solid var(--roadmap-line);
  border-radius: var(--roadmap-radius);
  background: var(--roadmap-panel);
  padding: 20px;
}

.roadmap-manual h2 {
  margin-top: 0;
}

.roadmap-manual__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.roadmap-manual__item {
  border-top: 1px solid var(--roadmap-line);
  padding-top: 14px;
}

.roadmap-manual__pair {
  margin: 0 0 6px;
  font-weight: 600;
}

.roadmap-manual__arrow {
  color: var(--roadmap-accent);
  padding: 0 4px;
}

.roadmap-manual__why {
  margin: 0 0 6px;
  max-width: 78ch;
  line-height: 1.6;
}

.roadmap-manual__source {
  margin: 0;
  color: var(--roadmap-muted);
  font-size: 0.86rem;
}

.roadmap-manual__source code {
  font-family: var(--course-mono, ui-monospace, monospace);
  font-size: 0.86rem;
}

@media (max-width: 640px) {
  .roadmap-stage {
    padding: 16px 14px;
  }

  .roadmap-tracks {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────────────────────────────────────────── ход по карте

   Режим проигрывания (спека, «Четыре режима», режим 1; разметка и разбор — в
   layouts/roadmap/list.html и static/js/roadmap-play.js).

   КАРТУ ЦЕЛИКОМ ПРЯЧЕТ ЭТО ПРАВИЛО, А НЕ СКРИПТ. Признак ставит скрипт на
   оболочку страницы одним словом, а какие узлы при этом уходят — знает CSS: тот
   же приём, которым режимы Архитектора прячут свои панели
   ([data-architect-mode="retro"] … { display: none }). Список узлов в скрипте
   пришлось бы держать в согласии с разметкой руками.

   Прячется РОВНО стопка ступеней. Шапка, четыре числа и оговорки остаются: они
   про карту в целом и на ходу не мешают, а связи, названные руками, — это
   короткая таблица, из которой видно, откуда взялись стрелки хода. */
[data-roadmap-play-mode="on"] .roadmap-stages {
  display: none;
}

/* hidden обязан побеждать display: flex. Правило браузера [hidden]{display:none}
   слабее правила по классу, и без этой строки панель приезжала бы читателю без
   JavaScript пустой рамкой — то самое обещание, которого некому держать. */
.roadmap-play[hidden],
.roadmap-play__start[hidden],
.roadmap-play__open [data-roadmap-step="link"][hidden] {
  display: none;
}

.roadmap-play {
  border: 1px solid var(--roadmap-accent);
  border-radius: var(--roadmap-radius);
  background: var(--roadmap-panel);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roadmap-play__where,
.roadmap-play__count,
.roadmap-play__ends,
.roadmap-play__open,
.roadmap-play__note {
  margin: 0;
  max-width: 72ch;
  line-height: 1.5;
}

.roadmap-play__where span:first-child,
.roadmap-play__ends span:first-child,
.roadmap-play__open span:first-child {
  color: var(--roadmap-muted);
}

.roadmap-play__where,
.roadmap-play__count {
  color: var(--roadmap-muted);
  font-size: 0.9rem;
}

.roadmap-play__title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
}

.roadmap-play__note {
  color: var(--roadmap-muted);
  font-size: 0.86rem;
}

.roadmap-play__nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.roadmap-play__progress {
  color: var(--roadmap-muted);
  font-family: var(--course-mono, ui-monospace, monospace);
  font-size: 0.9rem;
}

.roadmap-play__start,
.roadmap-play__step,
.roadmap-play__stop {
  appearance: none;
  background: transparent;
  border: 1px solid var(--roadmap-accent);
  border-radius: var(--roadmap-radius-sm);
  color: var(--roadmap-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 7px 14px;
}

.roadmap-play__stop {
  align-self: flex-start;
  border-color: var(--roadmap-line);
  color: var(--roadmap-muted);
  font-weight: 400;
}

.roadmap-play__start:hover,
.roadmap-play__start:focus-visible,
.roadmap-play__step:hover,
.roadmap-play__step:focus-visible,
.roadmap-play__stop:hover,
.roadmap-play__stop:focus-visible {
  background: var(--roadmap-panel-raised);
}

/* Край хода назван и цветом, и состоянием кнопки: одного цвета не хватило бы
   тому, кто их не различает, а disabled слышен вспомогательной технике. */
.roadmap-play__step[disabled] {
  border-color: var(--roadmap-line);
  color: var(--roadmap-muted);
  cursor: default;
}