/*
 * Текстовый видеорежим читалки.
 *
 * Подключается только на страницах материалов (layouts/partials/reader-header.html),
 * поэтому на каталоге, главной и Workbench этого файла нет вовсе.
 *
 * Оформление намеренно живёт отдельно от courses-v2.css: режим — надстройка над
 * читалкой, и его удаление должно сводиться к удалению двух файлов.
 *
 * Тело сцены несёт класс `.reader-content`, поэтому типографика статьи
 * (заголовки, код, таблицы, списки) достаётся ему из courses-v2.css даром.
 * Настоящий текст статьи прячется точечным селектором `> .reader-article > *`,
 * чтобы не задеть клон внутри сцены.
 */

/* ---------- кнопка режима в шапке читалки ---------- */

.reader-header__button--video[aria-expanded='true'] {
  background: color-mix(in srgb, var(--course-cyan) 16%, var(--course-surface));
  border-color: var(--course-cyan);
  color: var(--course-text);
}

/* ---------- компоновка читалки под сценой ---------- */

.reader-layout.is-video-mode {
  grid-template-columns: minmax(0, 1100px);
  max-width: 1100px;
}

.reader-layout.is-video-mode > .reader-sidebar,
.reader-layout.is-video-mode > .reader-panel-backdrop {
  display: none;
}

/* Статья остаётся в DOM целиком — она просто не показывается, пока идёт сцена. */
.reader-layout.is-video-mode > .reader-article > *:not(.reader-video) {
  display: none;
}

.reader-layout.is-video-mode > .reader-article {
  background: transparent;
  border: 0;
  width: 100%;
}

/* ---------- сцена ---------- */

.reader-video {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  display: flex;
  flex-direction: column;
  /* Один сегмент на экран. Высота ЖЁСТКАЯ, а не минимальная: иначе сцена
     растёт под содержимое сегмента и «один экран» превращается в ту же
     портянку, только в рамке. Сцена целиком помещается в первый экран за
     вычетом липкой шапки читалки и отступов `.reader-main`; ниже остаётся
     подвал портала, поэтому страница по-прежнему прокручивается — но органы
     управления видны сразу, без единого прокрута. */
  height: clamp(380px, calc(100vh - 150px), 760px);
  overflow: hidden;
}

.reader-video[hidden] {
  display: none;
}

.reader-video__header {
  align-items: center;
  border-bottom: 1px solid var(--course-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}

.reader-video__identity {
  min-width: 0;
}

.reader-video__kicker {
  color: var(--course-cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.reader-video__name {
  color: var(--course-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-video__head-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.reader-video__meta {
  color: var(--course-muted);
  font-family: var(--course-mono);
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- слайд ---------- */

.reader-video__stage {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.reader-video__slate {
  border-bottom: 1px solid var(--course-line);
  padding: 18px 36px 14px;
}

.reader-video__position {
  align-items: baseline;
  color: var(--course-muted);
  display: flex;
  font-family: var(--course-mono);
  font-size: 11.5px;
  gap: 12px;
  margin: 0;
}

.reader-video__position span + span {
  color: var(--course-cyan);
}

.reader-video__title {
  color: var(--course-text);
  font-size: 21px;
  font-weight: 720;
  line-height: 1.3;
  margin: 6px 0 0;
}

/*
 * Прокрутка тела — запасной выход, а не режим работы. Нарезчик держит сегмент в
 * 400 словах, но одна таблица на сорок строк не режется без вранья, и терять её
 * хвост нельзя. Прокрутка замкнута на сцену: `overscroll-behavior: contain`
 * не даёт ей утащить за собой страницу.
 */
.reader-video__body.reader-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 36px 26px;
  /* Нужно нарезчику: `offsetTop` дочерних блоков должен считаться от сцены,
     а не от статьи, иначе измерительная нарезка меряет не то (см. fitToStage). */
  position: relative;
}

/* ---------- таймлайн ---------- */

.reader-video__timeline {
  border-top: 1px solid var(--course-line);
  display: flex;
  gap: 2px;
  /* Засечек бывает под сотню: они сжимаются, но наружу не вылезают никогда —
     горизонтальной прокрутки у страницы читалки не появляется. */
  overflow: hidden;
  padding: 0 12px;
}

.reader-video__tick {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  /* Цель нажатия по высоте — 36 px, как требует раздел про клавиатуру в SDD.
     Ширина пропорциональна длительности сегмента и сжимается под число
     сегментов: на длинной статье таймлайн честно читается как полоса прогресса. */
  flex: 1 1 0;
  height: 36px;
  min-width: 0;
  padding: 0;
}

.reader-video__tick-track {
  background: var(--course-line-strong);
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
  width: 100%;
}

.reader-video__tick-fill {
  background: var(--course-cyan);
  display: block;
  height: 100%;
  width: var(--reader-video-fill, 0%);
}

.reader-video__tick.is-done .reader-video__tick-fill {
  width: 100%;
}

.reader-video__tick:hover .reader-video__tick-track,
.reader-video__tick:focus-visible .reader-video__tick-track {
  background: color-mix(in srgb, var(--course-cyan) 45%, var(--course-line-strong));
}

.reader-video__tick.is-current .reader-video__tick-track {
  height: 9px;
}

/* ---------- органы управления ---------- */

.reader-video__controls {
  align-items: center;
  border-top: 1px solid var(--course-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}

.reader-video__transport,
.reader-video__speed {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reader-video__button {
  align-items: center;
  background: var(--course-control);
  border: 1px solid var(--course-line);
  border-radius: 8px;
  color: var(--course-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  gap: 6px;
  justify-content: center;
  min-height: 40px;
  min-width: 44px;
  padding: 0 14px;
}

.reader-video__button:hover,
.reader-video__button:focus-visible {
  border-color: var(--course-cyan);
  color: var(--course-cyan);
}

.reader-video__button--primary {
  background: color-mix(in srgb, var(--course-cyan) 14%, var(--course-control));
  border-color: color-mix(in srgb, var(--course-cyan) 45%, var(--course-line));
  min-width: 96px;
}

.reader-video__speed-option {
  background: transparent;
  border: 1px solid var(--course-line);
  border-radius: 8px;
  color: var(--course-muted);
  cursor: pointer;
  font: inherit;
  font-family: var(--course-mono);
  font-size: 11px;
  min-height: 36px;
  min-width: 48px;
  padding: 0 8px;
}

.reader-video__speed-option:hover,
.reader-video__speed-option:focus-visible {
  border-color: var(--course-line-strong);
  color: var(--course-text);
}

.reader-video__speed-option.is-active {
  background: color-mix(in srgb, var(--course-cyan) 16%, var(--course-surface));
  border-color: var(--course-cyan);
  color: var(--course-text);
}

.reader-video__hint {
  border-top: 1px solid var(--course-line);
  color: var(--course-subtle);
  font-size: 11px;
  margin: 0;
  padding: 9px 16px;
}

/* ---------- узкие экраны ---------- */

@media (max-width: 899px) {
  .reader-video {
    height: clamp(340px, calc(100vh - 104px), 700px);
  }

  .reader-video__slate {
    padding: 14px 18px 12px;
  }

  .reader-video__body.reader-content {
    padding: 16px 18px 20px;
  }

  .reader-video__controls {
    justify-content: center;
  }

  .reader-video__transport {
    width: 100%;
  }

  .reader-video__transport .reader-video__button {
    flex: 1 1 30%;
  }

  .reader-video__meta,
  .reader-video__hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .reader-video__title {
    font-size: 18px;
  }

  .reader-video__speed-option {
    flex: 1 1 auto;
    min-width: 40px;
  }
}

/* ---------- уважение к настройкам и печати ---------- */

@media (prefers-reduced-motion: reduce) {
  .reader-video,
  .reader-video * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* На печать уходит статья, а не плеер: PDF из сцены — это один абзац. */
@media print {
  .reader-video {
    display: none !important;
  }

  .reader-layout.is-video-mode > .reader-article > *,
  .reader-layout.is-video-mode > .reader-sidebar {
    display: revert !important;
  }
}