/* ============================================================
   LevioClass · Экран 12 · Читалка
   Требует tokens.css, base.css, components.css.
   Всё, что уже есть в системе (.appbar, .bar, .card, .chip, .btn,
   .section--reader, .t-reader, .t-mono, .dot), переиспользуется;
   здесь только то, чего в системе нет: строки стиха, имя
   говорящего, ремарка, выделенная цитата, нижняя панель.
   ============================================================ */

/* ── Шапка ───────────────────────────────────────────────── */

/* Нижний паддинг меньше стандартного: под шапкой полоса прогресса. */
.reader__appbar { padding-bottom: 10px; }

/* Переключатель размера текста. Хит-таргет 44px. */
.reader__size {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* ── Текст ───────────────────────────────────────────────── */

/* Размер приходит из --fs (три ступени), интерлиньяж — из .t-reader. */
.reader__doc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-wrap: pretty;
}

.reader__block { margin: 0; }

/* Имя персонажа над репликой */
.reader__speaker {
  font-style: italic;
  color: var(--muted);
}

/* Ремарка */
.reader__stage {
  margin: 0;
  font-style: italic;
  color: var(--muted);
  font-size: 0.92em;
}

/* Выделенная цитата. Инлайн переносится по строкам, поэтому
   горизонтальный «паддинг» имитируется тенями по 6px с боков —
   обычный padding-inline на многострочном инлайне рвётся. */
.reader__mark {
  background: var(--accent);
  color: var(--ink);
  padding: 2px 0;
  box-shadow: 6px 0 0 var(--accent), -6px 0 0 var(--accent);
}

/* Источник текста под явлением */
.reader__source {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ── Сноска ──────────────────────────────────────────────── */

.reader__note { border-radius: var(--r-btn); }

/* Чип без действия: цитатника и заметок в стейте пока нет,
   поэтому кнопка не притворяется кнопкой. */
.chip--off {
  border: 1px solid var(--hairline-strong);
  color: var(--muted-2);
  cursor: default;
}

/* ── Нижняя панель ───────────────────────────────────────── */

.reader__foot {
  background: var(--paper-2);
  border-top: 1px solid var(--hairline-2);
  padding: 14px var(--pad-x) 20px;
}

/* Границы текста: дальше листать некуда. */
.reader__foot .btn[disabled] {
  color: var(--muted-2);
  border-color: var(--hairline-2);
  cursor: default;
}

/* ── Загрузка ────────────────────────────────────────────── */

.reader__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reader__skeleton span {
  height: 12px;
  border-radius: 6px;
  background: var(--track);
  animation: reader-pulse 1.4s ease-in-out infinite;
}
.reader__skeleton span:nth-child(2n)  { width: 84%; }
.reader__skeleton span:nth-child(3n)  { width: 72%; }
.reader__skeleton span:nth-child(2)   { animation-delay: 0.1s; }
.reader__skeleton span:nth-child(3)   { animation-delay: 0.2s; }
.reader__skeleton span:nth-child(4)   { animation-delay: 0.3s; }
.reader__skeleton span:nth-child(5)   { animation-delay: 0.4s; }
.reader__skeleton span:nth-child(6)   { animation-delay: 0.5s; }

@keyframes reader-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .reader__skeleton span { animation: none; }
}

/* ── Адаптив ─────────────────────────────────────────────────
   Колонку чтения на широком экране не растягиваем: строка серифа
   в 700px читается заметно хуже короткой. Растёт корпус — колонка
   держит ширину и встаёт по центру.

   Шапка и нижняя панель остаются во всю ширину корпуса (это
   хром, а не текст), но их поля считаются от колонки, чтобы
   кнопки стояли ровно по её краям. max() страхует от
   отрицательных значений, если корпус окажется уже колонки.
   ──────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  :root { --reader-col: 640px; }

  .section--reader {
    max-width: var(--reader-col);
    margin-inline: auto;
  }

  .reader__appbar,
  .reader__foot {
    padding-inline: max(
      var(--pad-x),
      calc((100% - var(--reader-col)) / 2 + var(--pad-x-reader))
    );
  }
}

@media (min-width: 1024px) {
  :root { --reader-col: 660px; }
}