/* Zubok & Partners — переключатель вариантов и гарнитур
   Требует variants/shared/tokens.css и variants/shared/base.css, подключённых раньше.
   Разметку вставляет variants/shared/switcher.js; страницы вариантов не размечают ничего.

   Слой поверх любого варианта, поэтому он подчиняется тем же правилам, что и страница:
   заливок нет, теней нет, всё значения — из токенов. Единственное отступление —
   скругление: пилюля и свёрнутая точка. Решение записано ниже. */

.zp-switch {
  /* Радиус. В системе он равен 2 px и принадлежит рамке презентации, а не макету.
     Переключатель — не часть макета: это инструмент поверх страницы, и форма должна
     сообщать «я не отсюда». Поэтому здесь скругление 8 px — заметное, но сдержанное:
     капсулы (999 px) нет, чтобы полоса не превратилась в розничный чип. Свёрнутая точка
     круглая: точка и есть круг, другой формы у неё не бывает. Больше нигде на страницах
     эти значения не появляются. */
  --switch-radius: var(--s-2);
  --switch-dot: var(--s-6);
  --switch-mark: var(--s-3);

  /* Панель в сравнении гарнитур не участвует: пока страница переключает
     --font-display и --font-text, инструмент обязан остаться тем же. Иначе он
     прыгал бы шириной под курсором, а на 375 перестал бы помещаться в экран.
     Стеки повторяют значения токенов v0.2 намеренно — читать их через
     var(--font-*) здесь нельзя, это ровно те переменные, которые подменяются. */
  --switch-display: "Playfair Display", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --switch-text: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  position: fixed;
  z-index: 200;                 /* выше шапки (100) и панели меню (90), ниже skip-link (300) */
  inset-block-end: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  inset-inline: 0;
  display: flex;
  justify-content: center;
  padding-inline: var(--margin);
  pointer-events: none;         /* полоса во всю ширину не должна ловить клики мимо пилюли */
}

.zp-switch > * { pointer-events: auto; }

/* ═══ Место под панель ═════════════════════════════════════════════════
   Панель приклеена к низу экрана и стоит там всю прокрутку — значит, документ
   обязан кончаться на её высоту раньше, иначе последняя строка футера уезжает
   под неё, а вместе с ней и всё, что человек до неё домотал. Автосворачивания
   больше нет, и место под панель — это то, чем оно заменено.

   Высоту ставит скрипт из фактических размеров панели (--switch-reserve):
   рядов в ней два, на узком экране состав ужимается, при свёрнутой точке она
   вчетверо ниже — константа врала бы во всех трёх случаях. Без скрипта
   переменной нет, и подстановка даёт 0: страница остаётся ровно такой,
   какой была.

   Поле достаётся футеру, а не body: у body фон --ink-800, у футера --ink-900,
   и полоса другого тона под футером читалась бы швом. */

.zp-footer { padding-block-end: var(--switch-reserve, 0px); }

/* ═══ Пилюля ═══════════════════════════════════════════════════════════
   Два ряда, разделённых волосяной линией: сверху варианты, снизу гарнитуры. */

.zp-switch__bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-inline-size: 100%;
  /* Поле по вертикали живёт здесь, по горизонтали — на рядах: только так линия
     между рядами дотягивается до рамки и читается разделителем, а не
     подчёркиванием. Заодно оно отводит подчёркивание активного сегмента
     нижнего ряда от рамки — иначе внизу шли бы две волосяные линии
     в четырёх пикселях друг от друга. */
  padding-block: var(--s-1);
  border: var(--border) solid var(--hairline-card);
  border-radius: var(--switch-radius);
}

.zp-switch__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-3);
}

.zp-switch__row--fonts {
  border-block-start: var(--border) solid var(--hairline-dark);
}

/* Знак и крестик держат углы панели, оба списка стоят по её середине:
   ряды разной ширины, и без этого второй ряд оказался бы центрирован,
   а первый прижат к знаку. */
.zp-switch__nav { flex: 1 1 auto; min-inline-size: 0; }

/* Подложка живёт в псевдоэлементе — тем же приёмом, что и в .zp-header:
   backdrop-filter на самом элементе делает его containing block для fixed-потомков. */
.zp-switch__bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-color: color-mix(in srgb, var(--ink-900) 92%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
}

/* Знак Z слева. Маска, а не картинка: цвет остаётся токеном. */
.zp-switch__mark {
  flex: none;
  inline-size: var(--switch-mark);
  aspect-ratio: var(--mark-aspect);
  background-color: var(--brass-500);
  -webkit-mask: var(--mark-z) no-repeat center / contain;
  mask: var(--mark-z) no-repeat center / contain;
}

.zp-switch__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Четыре уровня даются краской, а не кеглем: буква — латунь, название — вторичный текст,
   активный сегмент — светлая латунь и линия под ней. Сегмент бывает и ссылкой
   (вариант — это другая страница), и кнопкой (гарнитура меняется на месте);
   выглядят и ведут себя они одинаково, поэтому обнуление кнопки стоит здесь. */
.zp-switch__seg {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-block-end: var(--border) solid transparent;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  color: var(--text-lo);
  font-family: var(--switch-text);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

.zp-switch__letter {
  color: var(--brass-500);
  font-family: var(--switch-display);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  transition: color var(--dur-hover) var(--ease);
}

.zp-switch__seg:hover { color: var(--brass-400); }
.zp-switch__seg:hover .zp-switch__letter { color: var(--brass-400); }

.zp-switch__seg[aria-current] {
  border-block-end-color: var(--brass-500);
  color: var(--brass-400);
  cursor: default;
}

.zp-switch__seg[aria-current] .zp-switch__letter { color: var(--brass-400); }

/* Ключ пары — две буквы, а не одна: он же остаётся единственной подписью
   на узком экране, и «P», «C», «A» там путались бы с буквами вариантов. */
.zp-switch__row--fonts .zp-switch__letter { font-size: var(--fs-label); }

/* ═══ Крестик и точка ══════════════════════════════════════════════════
   Обе иконки прочерчены линиями, а не набраны знаком юникода:
   тот же приём, что и у гамбургера в base.css. */

.zp-switch__hide {
  position: relative;
  flex: none;
  inline-size: var(--s-5);
  block-size: var(--s-5);
  padding: 0;
  border: 0;
  border-inline-start: var(--border) solid var(--hairline-dark);
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
}

.zp-switch__hide::before,
.zp-switch__hide::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--s-3);
  block-size: var(--border);
  background-color: var(--brass-500);
  transition: background-color var(--dur-hover) var(--ease);
}

.zp-switch__hide::before { translate: -40% -50%; rotate: 45deg; }
.zp-switch__hide::after  { translate: -40% -50%; rotate: -45deg; }

.zp-switch__hide:hover::before,
.zp-switch__hide:hover::after { background-color: var(--brass-400); }

/* Точка стоит в поле страницы у внешнего края, а не по центру: развёрнутая
   полоса центрирована по замыслу, но убранный инструмент не должен занимать
   середину экрана. margin-inline-start: auto съедает весь свободный ход при
   justify-content: center — точка уходит к краю, полоса остаётся по центру.
   Отрицательное поле с торца выводит её из поля переключателя (оно повторяет
   поле контейнера) обратно к кромке экрана: от 1024 точка целиком помещается
   в поле страницы и не накрывает ни одного элемента колонки. */
.zp-switch__show {
  position: relative;
  display: grid;
  place-items: center;
  margin-inline-start: auto;
  margin-inline-end: calc((var(--margin) - var(--s-2)) * -1);
  inline-size: var(--switch-dot);
  block-size: var(--switch-dot);
  padding: 0;
  border: var(--border) solid var(--hairline-card);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
}

/* Буква вместо знака Z: свёрнутый инструмент продолжает отвечать «где я». */
.zp-switch__show .zp-switch__letter { font-size: var(--fs-body); }

.zp-switch__show::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-color: color-mix(in srgb, var(--ink-900) 92%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
}

.zp-switch__show:hover { border-color: var(--brass-500); }
.zp-switch__show:hover .zp-switch__letter { color: var(--brass-400); }

/* ═══ Пары гарнитур ════════════════════════════════════════════════════
   Переключаются ровно две переменные — и больше ничего. Кегли, интерлиньяж,
   разрядка, отступы и цвета остаются на месте: сравниваются гарнитуры,
   а не три разных макета.

   :root[data-switch-fonts=…] весит больше голого :root в tokens.css,
   поэтому !important не нужен ни здесь, ни в вариантах — ни один вариантный
   файл эти токены не переопределяет, они читаются через var().

   У каждой пары полный локальный фолбэк, как у токенов v0.2: без сети
   страница остаётся вёрсткой, просто набранной ближайшим системным шрифтом.
   Файлы альтернативных гарнитур подтягивает скрипт при первом выборе —
   страница по умолчанию не тащит шесть семейств. */

:root[data-switch-fonts="ca"] {
  --font-display: "Libre Caslon Display", "Big Caslon", "Hoefler Text", Baskerville, "Times New Roman", Georgia, serif;
  --font-text: Archivo, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
}

:root[data-switch-fonts="al"] {
  --font-display: Archivo, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: Literata, "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
}

/* ═══ Узкий экран ══════════════════════════════════════════════════════
   Ни три названия вариантов, ни три названия пар капслоком с разрядкой 0.16em
   не помещаются в 375 ни при какой ужимке отступов. Ужимается не типографика —
   ужимается состав, и одним и тем же приёмом в обоих рядах: знак Z уходит
   (он украшение), а из названий остаётся название текущего — человеку нужно
   знать, где он стоит, а не как называются два соседа. Ключ (A B C и PI CA AL)
   остаётся у всех: это и есть цель нажатия.
   Крестик остаётся: на телефоне клавиши H нет, и это единственный способ
   убрать пилюлю с экрана. */

@media (max-width: 767px) {
  .zp-switch {
    inset-block-end: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--s-3);
  }

  .zp-switch__row {
    gap: var(--s-2);
    padding-inline: var(--s-2);
  }

  .zp-switch__row > .zp-switch__mark { display: none; }

  /* На телефоне поля страницы 20 px, а точка 32: выводить её в поле некуда,
     и она встаёт по общему полю переключателя. */
  .zp-switch__show { margin-inline-end: 0; }

  /* Поля по горизонтали шире кегля: у сегментов B и C от текста остаётся одна
     буква, и без этого запаса цель нажатия ушла бы под 24 px. */
  .zp-switch__seg {
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
  }

  /* Тот же рецепт, что у .zp-sr-only, но классом его не поставить:
     решение зависит от ширины окна, а не от разметки. Названия соседей
     пропадают с экрана и остаются в доступном дереве. */
  .zp-switch__seg:not([aria-current]) .zp-switch__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ═══ Печать ═══════════════════════════════════════════════════════════ */

@media print {
  .zp-switch { display: none; }
  .zp-footer { padding-block-end: 0; }   /* резерв под панель на бумаге не нужен */
}