/*
 * Чтение вслух: полоса плеера и подсветка читаемого места.
 *
 * Подключается только на материалах, у которых ЕСТЬ запись
 * (layouts/partials/reader-header.html проверяет манифест через fileExists),
 * поэтому на остальных 1086 материалах, на каталоге и на главной этого файла
 * нет вовсе. Оформление живёт отдельно от courses-v2.css по той же причине, что
 * и у видеорежима: удаление возможности должно сводиться к удалению двух файлов.
 *
 * ГЛАВНОЕ ПРАВИЛО, общее с видеорежимом (reader-video-mode.css):
 * ОДНОВРЕМЕННО ПРОКРУЧИВАЕМЫХ КОНТЕЙНЕРОВ НЕ ДОЛЖНО БЫТЬ НИ ОДНОГО.
 * Плеер не добавляет ни одного. В обычном чтении единственная прокрутка — сама
 * страница, полоса приклеена к вьюпорту и не прокручивается. В видеорежиме
 * страница не прокручивается вовсе, а сцена укорачивается на высоту полосы
 * (правило `.reader-video` ниже), поэтому полоса ничего не закрывает и вторая
 * прокрутка не появляется.
 *
 * ДВА ДЕФЕКТА УЗКОЙ ШИРИНЫ, на которых ловили дважды, и что с ними сделано:
 *   1. «панель под overflow: hidden молча срезала нижние строки». Здесь у полосы
 *      нет ни overflow: hidden, ни фиксированной высоты: она переносит органы
 *      управления на вторую строку и растёт. Настоящая высота меряется
 *      ResizeObserver'ом и отдаётся наружу в --reader-audio-height, поэтому
 *      отступ статьи, положение кнопки «следующая глава» и высота сцены всегда
 *      считаются по факту, а не по угаданному числу. Единственное многоточие —
 *      строка «что сейчас читается», и оно объявлено явно (одна строка по
 *      замыслу), а не получилось из обрезки.
 *   2. «элементы при равном делении слипались». Никакого flex: 1 1 33% здесь
 *      нет: у кнопок flex: 1 1 auto, минимальная ширина и настоящий gap, так что
 *      делится остаток, а не подписи.
 */

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

.reader-header__button--audio[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-audio {
  background: var(--course-surface);
  border-top: 1px solid var(--course-line);
  bottom: 0;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 18%);
  display: grid;
  /* minmax(0, 1fr), а не auto. Неявная колонка сетки меряется по max-content
     содержимого, а в полосе лежит строка «что сейчас читается» с white-space:
     nowrap — её max-content равен длине абзаца, и полоса разъезжалась на шесть
     тысяч пикселей при вьюпорте в тысячу четыреста. Видеорежим обжёгся на этом
     же месте (см. комментарий к .reader-video), сценарий «полоса плеера не
     уезжает за край экрана» поймал это здесь. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  left: 0;
  /* Выше сцены видеорежима (190) и выше поиска портала (180), ниже skip-link (200):
     слушать можно и в видеорежиме, значит полоса обязана лежать поверх сцены. */
  z-index: 195;
  position: fixed;
  right: 0;
}

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

/* Общая полоска пройденного по всему материалу — по всей ширине, поверх границы. */
.reader-audio__track {
  background: var(--course-line);
  height: 3px;
  width: 100%;
}

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

.reader-audio__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 10px clamp(14px, 4vw, 40px);
}

.reader-audio__transport,
.reader-audio__aside {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * Строка «что сейчас читается».
 *
 * min-width: 0 обязателен: у флекс-элемента минимальный размер по умолчанию —
 * его содержимое, и длинный абзац выталкивал бы кнопки за край экрана. Ровно на
 * этом видеорежим уже обжигался с заголовком материала.
 */
.reader-audio__now {
  align-items: baseline;
  display: flex;
  flex: 1 1 220px;
  gap: 10px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.reader-audio__counter {
  color: var(--course-cyan);
  flex: 0 0 auto;
  font-family: var(--course-mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Одна строка по замыслу: цитата читаемого места, а не второй экран текста. */
.reader-audio__quote {
  color: var(--course-muted);
  font-size: 12.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.reader-audio__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;
  /* Остаток делится между кнопками, а подписи не сжимаются: auto вместо доли. */
  flex: 0 1 auto;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  gap: 6px;
  justify-content: center;
  /* 40 и 44 — нижняя граница уверенного попадания пальцем. */
  min-height: 40px;
  min-width: 44px;
  padding: 0 14px;
  white-space: nowrap;
}

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

.reader-audio__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.reader-audio__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: 124px;
}

.reader-audio__speed {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reader-audio__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-audio__speed-option:hover,
.reader-audio__speed-option:focus-visible {
  border-color: var(--course-line-strong);
  color: var(--course-text);
}

.reader-audio__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-audio__speed-cycle {
  display: none;
  font-family: var(--course-mono);
  min-width: 56px;
}

/*
 * Сообщение полосы. Здесь живёт всё, что плеер обязан сказать словами:
 * «озвучено 8 фрагментов из 12», «этот абзац не озвучен», «запись не
 * открылась». Молчащего плеера не бывает, поэтому строка не прячется под
 * многоточие и переносится на столько строк, сколько нужно.
 */
.reader-audio__notice {
  border-top: 1px solid var(--course-line);
  color: var(--course-amber, var(--course-muted));
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0;
  padding: 8px clamp(14px, 4vw, 40px);
}

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

/* ---------- место для полосы ---------- */

/*
 * Полоса приклеена к вьюпорту, поэтому всё, что живёт у нижнего края, обязано
 * подвинуться — иначе она закроет последние строки статьи и кнопку перехода к
 * следующей главе. Высоту ставит скрипт по фактическому замеру.
 */
html.is-reader-audio .reader-layout {
  padding-bottom: var(--reader-audio-height, 0px);
}

html.is-reader-audio .reader-next-fab {
  bottom: calc(16px + var(--reader-audio-height, 0px));
}

/*
 * Сцена видеорежима укорачивается ровно на высоту полосы.
 *
 * Это единственное место, где два режима видят друг друга в CSS, и оно
 * намеренно живёт здесь, а не в reader-video-mode.css: видеорежим существует и
 * без чтения вслух, а чтение вслух обязано вписаться в него, не ломая его
 * правил. Сцена меряет свою высоту сама и режет по ней текст, поэтому скрипт
 * после показа и скрытия полосы просит её пересчитать нарезку (событие resize).
 */
html.is-reader-audio .reader-video {
  bottom: var(--reader-audio-height, 0px);
}

/* ---------- подсветка читаемого места ---------- */

/*
 * Подсветка сделана фоном и тенью, а не рамкой и отступами: рамка сдвинула бы
 * раскладку, а сдвиг раскладки посреди чтения — это скачок текста под глазами.
 * Заливка внутри подсветки показывает, докуда дочитан абзац;
 * --reader-audio-progress ставит скрипт на корень документа.
 */
.reader-content .reader-audio-now,
.reader-video__body .reader-audio-now {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--course-cyan) 20%, transparent) var(--reader-audio-progress, 0%),
    color-mix(in srgb, var(--course-cyan) 8%, transparent) var(--reader-audio-progress, 0%)
  );
  border-radius: 6px;
  box-shadow:
    inset 3px 0 0 var(--course-cyan),
    0 0 0 8px color-mix(in srgb, var(--course-cyan) 8%, transparent);
  scroll-margin-block: 96px;
}

/* Абзац без записи: помечен, пока плеер открыт, и молча не пропадает. */
html.is-reader-audio .reader-content [data-reader-audio='silent'] {
  box-shadow: inset 2px 0 0 var(--course-line-strong);
}

/* Пока плеер открыт, клик по абзацу — команда «читай отсюда». */
html.is-reader-audio .reader-content > * {
  cursor: pointer;
}

html.is-reader-audio .reader-content pre,
html.is-reader-audio .reader-content table,
html.is-reader-audio .reader-content figure {
  cursor: auto;
}

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

/*
 * На 390 px в одну строку не влезают ни пять кнопок скорости, ни подпись выхода.
 * Ничего при этом не выбрасывается: скорости сворачиваются в одну кнопку
 * перебора (нажатие — следующая скорость), выход остаётся кнопкой с подписью, а
 * органы управления переносятся на свою строку целиком.
 */
@media (max-width: 720px) {
  .reader-audio__row {
    gap: 8px;
    padding: 8px 14px;
  }

  .reader-audio__speed {
    display: none;
  }

  .reader-audio__speed-cycle {
    display: inline-flex;
  }

  .reader-audio__transport {
    order: 2;
    width: 100%;
  }

  .reader-audio__transport .reader-audio__button {
    /* Остаток делится, подписи — нет: min-width держит «Читать вслух» целой. */
    flex: 1 1 auto;
    min-width: 88px;
  }

  .reader-audio__now {
    flex: 1 1 100%;
    order: 0;
  }

  .reader-audio__aside {
    order: 1;
  }

  .reader-audio__quote {
    display: none;
  }
}

@media (max-width: 420px) {
  .reader-audio__button--close {
    /* Подпись выхода на самой узкой ширине не влезает рядом со скоростью и
       временем — но кнопка остаётся: без неё плеер закрывался бы только из
       шапки, а до шапки надо ещё доскроллить. */
    min-width: 44px;
    padding: 0 10px;
  }
}

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

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

/* На печать уходит статья: полосе плеера и подсветке в PDF делать нечего. */
@media print {
  .reader-audio {
    display: none !important;
  }

  html.is-reader-audio .reader-layout {
    padding-bottom: 0 !important;
  }

  .reader-content .reader-audio-now {
    background-image: none !important;
    box-shadow: none !important;
  }
}