/* Video01 — оформление плеера Plyr. Подключается только на странице просмотра, после plyr.css.
 * Plyr не навязывает свои цвета: он берёт их из переменных --plyr-* и подставляет запасные
 * значения. Поэтому тема задаётся одним блоком переменных на контейнере .player. */

.player {
  --plyr-color-main: var(--accent-ink);   /* полоса прогресса, наведение, галочки в меню */
  --plyr-font-family: inherit;
  --plyr-control-spacing: 12px;
  --plyr-control-icon-size: 20px;
  --plyr-range-thumb-height: 14px;
  --plyr-video-background: #0B0D18;
  --plyr-video-controls-background: linear-gradient(rgba(11, 13, 24, 0), rgba(11, 13, 24, .78));
  --plyr-menu-background: rgba(255, 255, 255, .97);
  --plyr-menu-radius: var(--r-field);
}

.player .plyr { border-radius: inherit; }

/* Палец на телефоне: зона нажатия у каждой кнопки и строки меню ≥ 44px */
.player .plyr__control { min-width: 44px; min-height: 44px; }
.player .plyr__control--overlaid { min-width: 68px; min-height: 68px; padding: 20px; }
/* Иконка внутри увеличенной кнопки: у Plyr svg — блочный элемент, от min-width он липнет к левому
 * краю (иконки уезжали на ~3.6px влево). Авто-отступы возвращают её в центр. */
.player .plyr__control svg { margin-left: auto; margin-right: auto; }

.player .plyr__menu__container [role="menuitemradio"] { min-height: 44px; }
/* Центр точки внутри кружка у пункта меню (качество): Plyr ставит точку жёстким `left: 12px` —
 * это расчёт под его `--plyr-control-spacing: 10px`, а у нас 12px, поэтому кружок стоит на 8.4px
 * от края и точка уезжала на 1.4px влево от его центра. Считаем от кружка: padding-left (spacing×.7)
 * + (16 − 6) / 2. */
.player .plyr__menu__container .plyr__control[role="menuitemradio"]:after {
  left: calc(var(--plyr-control-spacing, 10px) * .7 + 5px);
}
.player .plyr__time { font-variant-numeric: tabular-nums; }

/* Шестерёнка на телефоне переезжает в правый верхний угол кадра (переносит её player.js — как на
 * YouTube); на компьютере она остаётся в нижней строке после громкости. В нижней строке на телефоне
 * она отнимала место у полосы перемотки, а строка не влезала в экран и полоса сжималась в ноль:
 * перемотать ролик было нечем. */
.player .plyr { position: relative; }
.player .player__settings {
  position: absolute; top: 8px; right: 8px; margin: 0; z-index: 4;
  transition: opacity .4s ease-in-out;
  /* цвет кнопок Plyr задаёт строка управления (.plyr--video .plyr__controls => #fff), а перенесённая
   * шестерёнка её уже не наследует — без этого она рисовалась цветом текста страницы и пропадала
   * на тёмном кадре */
  color: var(--plyr-video-control-color, #fff);
}
/* подсказку у угловой кнопки не показываем: над кадром её срезает overflow .plyr--video */
.player .player__settings .plyr__tooltip { display: none; }
/* прячется вместе со строкой управления, а не висит над кадром */
.player .plyr--hide-controls .player__settings { opacity: 0; pointer-events: none; }
/* Пока открыто меню настроек, кадр перестаёт обрезать содержимое: на телефоне меню раскрывается из
 * верхнего угла вниз, а кадр низкий (при ширине 390 — 219px), и нижние строки качества (720p/480p/360p)
 * срезал `overflow: hidden` у `.player`. Класс `player--menu-open` вешает player.js по классу Plyr.
 * Там же плеер поднимается над соседними блоками: меню уходит ниже кадра, а кнопка «Поделиться»
 * (.video-page__head) рисуется в потоке ПОСЛЕ плеера и перекрывала нижние строки качества —
 * плеер с `z-index: auto` проигрывал ей в порядке отрисовки. 25 > 20 (z-index меню «Поделиться»). */
.player.player--menu-open { overflow: visible; z-index: 25; }

/* Меню Plyr раскрывается вверх (bottom: 100%) — из верхнего угла оно ушло бы за кадр,
 * поэтому здесь разворачиваем его вниз и переворачиваем стрелку-указатель. */
.player .player__settings .plyr__menu__container {
  bottom: auto; top: 100%; margin-bottom: 0; margin-top: 10px;
}
.player .player__settings .plyr__menu__container:after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--plyr-menu-background);
}

/* Узкий экран: громкость из строки управления убирается — иначе она выдавливает полосу перемотки
 * (на телефоне звук регулируют кнопки телефона, на компьютере — ползунок в узком окне мешал). */
@media (max-width: 760px) {
  .player .plyr__volume { display: none; }
}

/* Телефон: пока ролик играет, по центру кадра появляется большая кнопка «Пауза» — она видна вместе
 * со строкой управления (тап по кадру) и уходит вместе с ней, пауза ставится нажатием на неё.
 * Plyr свою большую кнопку во время игры прячет (`.plyr--playing …`) — здесь включаем её обратно,
 * но только на телефоне: на компьютере, как на YouTube, во время игры кнопки в центре нет.
 * `.player--touch` вешает player.js на корень плеера на тач-устройстве. */
.player--touch .plyr--playing .plyr__control--overlaid { opacity: .9; visibility: visible; }
.player--touch .plyr--playing.plyr--hide-controls .plyr__control--overlaid { opacity: 0; visibility: hidden; }
/* У Plyr иконка большой кнопки сдвинута на 2px вправо (`left: 2px`) — это оптическая компенсация для
 * треугольника Play. У значка паузы (два столбика) сдвиг виден глазом, поэтому для него снимаем
 * (класс `is-pause` вешает player.js вместе с подменой значка). */
.player .plyr__control--overlaid.is-pause svg { left: 0; }

/* Сообщение плеера (ошибка, ожидание) — по центру кадра, поверх кнопок */
.player__note {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  margin: 0; z-index: 4; max-width: calc(100% - var(--s6)); text-align: center;
  color: #fff; font-size: 15px; line-height: 1.5;
  background: rgba(11, 13, 24, .82); padding: var(--s3) var(--s4); border-radius: var(--r-field);
}