/* Проигрыватель записанного сеанса digitwm — раздел «Пройти сеанс клавишами»
   на /digitwm/.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ СТРОКИ В digitwm.css. Правила страницы
   раздаются под ключом ?v={assetVersion} с Cache-Control на двенадцать часов,
   и правка уже раздававшегося файла доезжает до читателя только вместе с новым
   ключом — иначе он получает новую разметку под старыми правилами. Это
   DGT-UX-17, и шаг features/steps/digitwm.mjs стережёт digitwm.css отпечатком
   именно поэтому: тронул файл — впиши новый отпечаток рядом с новым ключом.

   Отдельный файл этого правила не отменяет и не обходит. Ключ у этой правки
   всё равно новый: ребро assets-cache-key в docs/sdd/artifact-map.json —
   строгое, и его strict_why говорит прямо, что незначимых правок в static/ не
   бывает. Выигрыш отдельного файла в другом: не приходится переписывать чужой
   отпечаток digitwm.css в тот вечер, когда ту же страницу правят три задачи
   сразу, и разбор правил записи не размазывается по чужому файлу.

   Правило на будущее: правишь digitwm.css — меняй ключ И отпечаток; заводишь
   новую поверхность — заводи ей свой файл, но ключ меняй всё равно. */

.wm-walk {
  border: 1px solid var(--course-line);
  border-radius: var(--digitable-radius-md);
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  max-width: 800px;
  padding: 16px;
}

/* Полоса выделяется рамкой, когда с ней говорят с клавиатуры: без этого
   читатель жмёт h и не понимает, почему ничего не происходит. */
.wm-walk:focus-visible {
  outline: 2px solid var(--course-cyan);
  outline-offset: 2px;
}

.wm-walk__frame {
  border: 1px solid var(--course-line);
  border-radius: var(--digitable-radius-sm);
  display: block;
  height: auto;
  width: 100%;
}

.wm-walk__bar {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wm-walk__key {
  align-items: center;
  background: var(--course-control);
  border: 1px solid var(--course-line);
  border-radius: var(--digitable-radius-sm);
  color: var(--course-text);
  cursor: pointer;
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 9px 6px;
}

.wm-walk__key b {
  color: var(--course-cyan);
  font-family: var(--course-mono);
  font-size: 13px;
}

.wm-walk__key span {
  color: var(--course-muted);
  font-size: 12px;
}

.wm-walk__key:hover:not(:disabled) {
  border-color: var(--course-cyan);
}

/* Погашенная клавиша — это и есть честность проигрывателя: шага, которого нет
   в записи, он не покажет, и говорит об этом до нажатия, а не после. */
.wm-walk__key:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.wm-walk__state {
  color: var(--course-text);
  font-family: var(--course-mono);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
  min-height: 3.2em;
}

.wm-walk__hint,
.wm-walk__note {
  color: var(--course-subtle);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

.wm-walk__note {
  border-left: 2px solid var(--course-line-strong);
  padding-left: 14px;
}

.wm-walk__note b {
  color: var(--course-text);
}

@media (max-width: 700px) {
  .wm-walk__bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}