/* === header.css — обвязка издания: тонкая вуаль сверху, стрелки вместо панели =
 *
 * Третья редакция обвязки, и каждая снимала вес с предыдущей.
 *
 * 1. Стеклянные острова (до e6bad3b): инсет 12px, скругление 20px,
 *    backdrop-filter blur(16px), ЧЕТЫРЕ слоя теней, градиентный блик, рамка,
 *    и внутри каждой кнопки ЕЩЁ ОДИН blur(10px). Последнее стекло в издании.
 * 2. Вуаль (e6bad3b): градиент бумага → прозрачность, ноль блюра и теней.
 *    Стало легче, но полосы остались: 100px сверху и 120px снизу.
 * 3. Стрелки-кружки по краям окна, нижней полосы нет. Заказчица: «слишком
 *    громоздкие сверху и снизу». Повод был числовой: обвязка резервировала
 *    76px сверху и 84px снизу, то есть на телефоне 375×667 — 24 % экрана.
 * 4. Сейчас: полосы по-прежнему нет, но кружки вернулись ВНИЗ и стали крупнее.
 *    Расстановка по бокам отвергнута: «справа, слева они смотрятся не очень»,
 *    и правая кнопка пряталась за полосу прокрутки слайда.
 *
 * ⚠ Элементы .manual-header / .manual-nav ОСТАЮТСЯ, хотя нижний больше не полоса:
 * на них висят классы .chrome--hidden / .nav--hidden, которыми nav.js:95-96 гасит
 * обвязку на обложке. Меняется роль элемента, но не структура разметки.
 *
 * ⚠ Токены --chrome-top / --chrome-bottom НЕ меняются. Клиренс 104px
 * (--ed-space-xl) вымерян под 76px и зашит в девять типов титулов; тронув резерв,
 * пришлось бы перемерять 18 страниц ради невидимого отступа.
 *
 * ⚠ Токены --glass-* в tokens.css не трогаем: они питают виджеты, тост
 * и легаси-карточки слайда 19. Стекло ушло только из обвязки.
 */

/* Тон обводки кнопок. --ed-rule-strong определён на .slide--editorial и до обвязки
   не достаёт, поэтому значение своё — но и НЕ равно ему: у волосяных линеек набора
   28 % чернил, а тут граница интерфейсного элемента, которой WCAG 1.4.11 требует
   контраст ≥ 3. При 28 % замер давал 1.98 — «Назад» терялась ровно так же, как
   она терялась на --glass-border в стеклянной версии. 48 % дают 3.64. */
.manual-header,
.manual-nav {
  --chrome-hairline: color-mix(in srgb, var(--ink) 58%, transparent);
}

/* ── Верхняя вуаль ─────────────────────────────────────────
   Вдвое тоньше прежней: элемент 56px вместо 100, сплошная бумага до 30px
   вместо 48. Остановки в пикселях и привязаны к тому, где стоят глифы:
   низ строки названия ≈23px, то есть внутри сплошной зоны с запасом.
   Побочный выигрыш — на титулах с полноэкранным фото под сплошной бумагой
   теперь 30px кадра вместо 48. */
.manual-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  z-index: 150;                 /* выше .btn-toc (10) и обложки (2), ниже .toast (200) */
  display: flex;
  align-items: flex-start;      /* строка садится в плотную зону, не в центр */
  justify-content: space-between;
  padding: 10px clamp(20px, 5vw, 64px) 0;
  color: var(--ink);
  pointer-events: none;         /* вуаль кликов не ловит */
  background: linear-gradient(
    180deg,
    var(--paper) 0,
    var(--paper) 30px,
    color-mix(in srgb, var(--paper) 55%, transparent) 42px,
    transparent 56px);
  transition: opacity .34s var(--ease-glass), transform .34s var(--ease-glass), visibility .34s;
}
.manual-header > * { pointer-events: auto; }

/* ── Нижняя обвязка: полосы нет ────────────────────────────
   .manual-nav перестал быть панелью и стал прозрачным контейнером
   позиционирования для двух стрелок. Ни фона, ни высоты, ни градиента.
   inset: 0 нужен как система координат для absolute-кнопок; кликов контейнер
   не ловит, кнопки возвращают себе сами. */
.manual-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: none;
  border: 0;
  pointer-events: none;
  transition: opacity .34s var(--ease-glass), transform .34s var(--ease-glass), visibility .34s;
}

/* ── Содержимое верхней строки ─────────────────────────────
   Точка-маркер перед названием снята вместе с уменьшением кегля: на 12px
   она читалась уже не якорем, а соринкой. */
.chapter-label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}
.header-right  { display: flex; align-items: center; gap: 14px; }
.slide-counter {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Полосы прогресса нет: снята по решению заказчицы, счётчик «7 / 20» говорит
   то же самое точнее. nav.js правок не потребовал — запись ширины стоит
   под `if (progressFill)`. */

/* ── Кнопки-стрелки ────────────────────────────────────────
   Те же #btnPrev / #btnNext: их читает nav.js (стрелки клавиатуры) и пишет
   quiz.js (разблокировка на слайде 18). Меняется оформление и место.

   Заливка бумагой обязательна, а не декоративна: на титулах глав кадр идёт
   во всю ширину окна, и стрелка неминуемо оказывается поверх фотографии —
   без подложки глиф над тёмным местом кадра не прочитается. */
.nav-btn {
  position: absolute;
  width: 52px;                  /* заметно крупнее порога цели касания 44px */
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--chrome-hairline);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out;
}
.nav-btn__ico { font-size: 24px; line-height: 1; font-weight: 600; }

/* Обе кнопки внизу. Расстановка по краям окна по вертикальной середине была
   отвергнута заказчицей: «справа, слева они смотрятся не очень», и попадали
   они мимо взгляда — низ экрана привычнее для листания.

   ⚠ Правый отступ считается от ширины полосы прокрутки. У каждого слайда
   своя полоса (`.slide { overflow-y: auto }`), а кнопка лежит в `position: fixed`-
   контейнере и о чужой полосе не знает: при right: 16px замер показывал
   перекрытие на 3px, и кнопка читалась прячущейся за полосу.

   Число НЕ хардкодится: под Windows полоса занимает 15px, на телефоне и в macOS
   она накладная и не занимает ничего. Фиксированные 31px дали бы на экране 375
   правую кнопку на 15px дальше левой, и асимметрия там видна. --scrollbar-w
   ставит `measureScrollbar()` в main.js одноразовым зондом при старте. */
.nav-btn--prev { left: 16px;  bottom: 16px; }
.nav-btn--next { right: calc(16px + var(--scrollbar-w, 0px)); bottom: 16px; }

.nav-btn--next { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-btn:disabled { opacity: .35; cursor: default; }

/* ── Подпись, выезжающая при наведении ─────────────────────
   В кружок «Назад», «Вперёд» и «К результатам» не помещаются, но текст нужен:
   на слайде 17 подпись меняется на «К результатам», и это содержательно.
   Поэтому подпись живёт рядом с кружком и появляется при наведении.

   ⚠ Ради этого пришлось поправить nav.js: setNextLabel() клал в кнопку ГОЛЫЙ
   текстовый узел, который нельзя ни спрятать, ни спозиционировать отдельно
   от стрелки. Теперь текст заворачивается в span.nav-btn__label.

   Появление — прозрачностью и сдвигом, а не ростом ширины кнопки: рост
   кружка в пилюлю анимировал бы layout-свойство и дёргал бы кадры. */
.nav-btn__label {
  position: absolute;
  top: 50%;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--chrome-hairline);
  padding: 5px 11px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease-out, transform .16s ease-out;
}
.nav-btn--prev .nav-btn__label { left: calc(100% + 8px);  transform: translate(-6px, -50%); }
.nav-btn--next .nav-btn__label { right: calc(100% + 8px); transform: translate(6px, -50%); }

@media (hover: hover) and (pointer: fine) {
  .nav-btn:hover:not(:disabled) { border-color: var(--ink); }
  .nav-btn--next:hover:not(:disabled) { border-color: var(--accent); }
  .nav-btn:hover:not(:disabled) .nav-btn__label,
  .nav-btn:focus-visible .nav-btn__label { opacity: 1; transform: translate(0, -50%); }
}
/* Фокус с клавиатуры показывает подпись и там, где наведения не бывает */
.nav-btn:focus-visible .nav-btn__label { opacity: 1; transform: translate(0, -50%); }

.nav-btn:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }

/* ── Скрытие обвязки на обложке ────────────────────────────
   Гасит вуаль и обе стрелки целиком. Не display:none: он дёргал layout рывком. */
.manual-header.chrome--hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-14px); }
.manual-nav.nav--hidden       { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── Узкий экран ───────────────────────────────────────────
   Высоты не трогаем — их держат --chrome-top/--chrome-bottom, общие с резервом
   в base.css. Уменьшается только набор и поля.
   ⚠ responsive.css грузится ПОСЛЕ этого файла; его правила на .manual-header
   и .manual-nav сняты за ненадобностью ещё в e6bad3b. */
@media (max-width: 640px) {
  .manual-header { padding-inline: 16px; }
  .chapter-label { font-size: .72rem; max-width: 52vw; }
  .nav-btn--prev { left: 12px;  bottom: 12px; }
  .nav-btn--next { right: calc(12px + var(--scrollbar-w, 0px)); bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .manual-header, .manual-nav, .nav-btn { transition: opacity .2s; }
  /* Подпись появляется мгновенно, а не проявляется: в режиме пониженной
     подвижности «тише» значит без движения, а не медленнее. Заодно это
     единственный способ проверить показ замером — плавную смену opacity
     панель браузера не проигрывает вовсе, она не производит кадров. */
  .nav-btn__label { transition: none; }
}