/* Оформление длинного документа: вертикальная шкала прочитанного справа
   и печать в конце. Вынесено из doc.php: раньше эти 3,3 КБ ехали внутри
   каждой страницы, теперь качаются один раз и лежат в кеше. */

/* --- Вертикальная шкала прочитанного ------------------------------------ */
.rv {
  position: fixed;
  /* Прижимаем к колонке текста, но не ближе 0.75rem к краю экрана:
     на телефоне колонка шире окна, и без нижней границы шкала уезжала
     за правый край - её просто не было видно. */
  right: max(0.75rem, calc(var(--cj-gutter) - 2.2rem));
  /* Во всю высоту окна, но НЕ впритык: сверху шкала не должна лезть под
     липкую шапку, снизу - под кнопку поиска. Оба числа взяты по их реальным
     размерам: шапка со знаком около 7rem, кнопка 3.5rem плюс отступ. */
  top: 8.2rem;
  /* Низ поднят выше кнопки поиска с запасом: при 6.4rem они формально не
     пересекались, но упирались друг в друга - число процентов приходилось
     ровно на макушку кнопки. Пересечения мало, нужен воздух. */
  bottom: 9.5rem;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.rv[data-on] { opacity: 1; }

/* Пока раскрыто дерево разделов, шкалу убираем: на телефоне слой меню шире
   экрана минус поля, и шкала оказывалась прямо поверх него. */
body:has(.nav[open]) .rv { opacity: 0; }

.rv__track {
  position: relative;
  width: 3px;
  flex: 1 1 auto;      /* вся высота, что осталась от числа снизу */
  min-height: 4rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cj-ink) 12%, transparent);
  overflow: hidden;
}
.rv__fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--cj-accent);
  transition: height 0.12s linear;
}
.rv__num {
  font-family: var(--cj-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--cj-muted);
  font-variant-numeric: tabular-nums;
}
.rv[data-done] .rv__num { color: var(--cj-accent); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv__fill { transition: none; }
}

/* На телефоне колонка текста занимает всю ширину, и шкала с числом шла прямо
   по строкам. Там оставляем только саму полоску, прижатую к краю: она уже
   поля страницы, поэтому текста не касается, а проценты на узком экране
   всё равно читались с трудом. */
@media (max-width: 48rem) {
  /* 8.6rem - это высота шапки на узком экране плюс запас: шкала задевала
     её нижнюю кромку на 3 точки, и проверка столкновений это поймала. */
  .rv { right: 3px; top: 8.6rem; bottom: 8.5rem; }
  .rv__track { width: 2px; }
  .rv__num { display: none; }
}

/* --- Печать в конце документа -------------------------------------------- */
/* На телефоне шкала стоит у правого края, и печать, прижатая туда же, лезет
   прямо на неё. Поэтому справа оставляем место под шкалу, а на широком экране
   шкала далеко за колонкой текста и запас не нужен. */
.seal {
  margin: 2.6em 0 0;
  display: flex;
  justify-content: flex-end;
  padding-right: 3.4rem;
}
@media (min-width: 48rem) { .seal { padding-right: 0; } }
.seal svg {
  width: 8.5rem;
  height: 8.5rem;
  color: var(--cj-accent);
  opacity: 0.85;
  transform: rotate(-8deg);
}
/* Печать проявляется, когда документ дочитан: до этого она стоит бледной,
   как оттиск без нажима. Свойство ставит скрипт, чтобы не врать о прочтении. */
.seal svg { filter: saturate(0.25); transition: filter 0.6s, opacity 0.6s; }
.seal[data-done] svg { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .seal svg { transition: none; } }