/* ─── Pagination — shared component styles ────────────────────────────────────
   Single source of truth for component CSS.
   Values: site/tokens.css (--ds-neutral-fill · --ds-text-invert · --ds-text-neutral-ghost
           · --ds-nba-20 · --ds-nba-ghost-pressed · --ds-disabled-fill · --ds-disabled-text
           · --ds-text-tertiary)
   Primary consumers: site/preview/pagination.html + src/components/Pagination/Pagination.tsx
   Naming: ds-pgn prefix
   States: data-attributes only
     data-size='md|sm'      — коллекция переменных «❖ Pagination», режимы MD и SM
     data-mobile            — Figma ось Mobile=On: колонка вместо ряда
     data-selected          — текущая страница
     data-disabled          — страница недоступна

   ГРАУНД-ТРУС, снят Plugin API 2026-08-31 с набора Pagination 1159:27908.
   Вариантов ТРИ, а осей две (Mobile × Select Range) — четвёртой ячейки
   «Mobile=On, Select Range=On» в макете НЕТ, и это не пропуск с моей стороны:
   на узком экране строка диапазона не помещается (спека § Поведение и адаптивность).

   РАЗМЕРЫ — из коллекции «❖ Pagination», два режима:
                        MD    SM
     высота ячейки      40    32     Width-Height/dim-500 · dim-400
     мин. ширина        40    32     та же переменная
     padding L-R / T-B   8     6     Padding/pad-100 · pad-75
     скругление         12     8     Radius/rad-150 · rad-100
     разрядка номеров   16    12     Gap/gap-200 · gap-150
     номер: размер/интерлиньяж 16-20 · 14-16   ↔ Control/Label/L1 · L2
     диапазон:          16-20 · 14-16          ↔ Field/Body/Body 1 · Body 2

   ЦВЕТА ячейки номера — набор «.Parts / Page» (1097:18358), 6 ячеек. Все шесть
   стоят на токенах, которые в системе УЖЕ есть: те же имена Figma реализует
   кнопка Ghost/Neutral, и второй раз их заводить не нужно.
     покой        Text/Neutral-Blue/Ghost/Default   → --ds-text-neutral-ghost
     наведение    Fill/Neutral-Blue/Ghost/Hover     → --ds-nba-20
     нажатие      Fill/Neutral-Blue/Ghost/Pressed   → --ds-nba-ghost-pressed
     выбрана      Fill/Neutral-Blue/Solid/Default   → --ds-neutral-fill
     текст выбранной Text/Neutral-Blue/Solid/Default → --ds-text-invert
     выключена    Text/Disable/Neutral (Blue)       → --ds-disabled-text
     выключена+выбрана Fill/Disable/Neutral (Blue)  → --ds-disabled-fill
   Наведение и нажатие в светлой моде дают ОДИН hex (#aeb5bd) и различаются только
   прозрачностью — поэтому взяты ролевые токены, а не ступени лесенки: у
   --ds-nba-ghost-pressed 0.40 во всех четырёх модах, у номерной ступени --ds-nba-40
   в тёмных 0.60. Тот же разбор уже записан в button.css:364.

   РАЗРЯДКА МЕЖДУ ГРУППАМИ — 31 в макете, и это единственное число, которое я НЕ
   смог подтвердить: у корневого фрейма itemSpacing=31 НЕ привязан ни к какой
   переменной (проверено boundVariables), 31 не лежит на сетке 4px, а переменная
   Gap из коллекции равна 16 и стоит внутри ряда номеров. Здесь взято 32 —
   ближайшее значение сетки, calc(comp-unit × 8). Разница в 1px названа владельцу
   вопросом, а не молча зашита: если 31 намеренно, поменяю на него.
   ───────────────────────────────────────────────────────────────────────────── */

.ds-pgn {
  /* Размерности одного режима. Переключает их data-size, а не медиазапрос:
     режим — свойство компонента, не экрана (ADR-007). */
  --_pg-h:     calc(var(--ds-comp-unit) * 10);   /* MD 40 */
  --_pg-pad:   calc(var(--ds-comp-unit) * 2);    /* MD 8  */
  --_pg-r:     var(--ds-radius-lg);              /* MD 12 = rad-150 */
  --_pg-gap:   calc(var(--ds-comp-unit) * 4);    /* MD 16 = gap-200 */
  --_pg-fs:    var(--ds-text-md);                /* MD 16 */
  --_pg-lh:    calc(var(--ds-comp-unit) * 5);    /* MD 20 */
  /* см. шапку: в макете 31 без привязки, здесь ближайшее значение сетки */
  --_pg-gap-groups: calc(var(--ds-comp-unit) * 8);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--_pg-gap-groups);
  color: var(--ds-text-neutral-ghost);
}

.ds-pgn[data-size='sm'] {
  --_pg-h:   calc(var(--ds-comp-unit) * 8);      /* SM 32 */
  --_pg-pad: calc(var(--ds-comp-unit) * 1.5);    /* SM 6  */
  --_pg-r:   var(--ds-radius-md);                /* SM 8 = rad-100 */
  --_pg-gap: calc(var(--ds-comp-unit) * 3);      /* SM 12 = gap-150 */
  --_pg-fs:  var(--ds-text-base);                /* SM 14 */
  --_pg-lh:  calc(var(--ds-comp-unit) * 4);      /* SM 16 */
}

/* Figma Mobile=On: колонка, разрядка 16, снизу ряд кнопок. Ось компонента,
   а не брейкпоинт — собирающий экран решает сам, когда её включить. */
.ds-pgn[data-mobile] {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--ds-comp-unit) * 4);
}

/* ── Группы: левая (навигация) и правая (диапазон) ─────────────────────────── */
/* Figma Select Range=On: корень делится на Left и Right с разрядкой 8. */
.ds-pgn-group {
  display: flex;
  align-items: center;
  gap: var(--_pg-gap-groups);
}
.ds-pgn-group[data-part='range'] {
  gap: var(--_pg-gap);   /* Figma Right.itemSpacing = 16 = та же Gap */
}
/* ── Ряд номеров ───────────────────────────────────────────────────────────── */
.ds-pgn-pages {
  display: flex;
  align-items: center;
  gap: var(--_pg-gap);
}

/* ── Ячейка номера ─────────────────────────────────────────────────────────── */
.ds-pgn-page {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--_pg-h);        /* Figma Pages/Min width = Pages/Height */
  height: var(--_pg-h);
  padding: var(--_pg-pad);
  border: 0;
  border-radius: var(--_pg-r);

  background: transparent;
  color: var(--ds-text-neutral-ghost);

  /* Добавлено 2026-09-11: hover и active меняют здесь фон (--ds-nba-20 и
     --ds-nba-ghost-pressed), а перехода в файле не было ни одного — фон переключался рывком.
     Только цветовые свойства: раскладку не трогаем, это правило страниц с 200+ строками. */
  transition: background-color var(--ds-dur-1) var(--ds-ease),
              color            var(--ds-dur-1) var(--ds-ease);

  font-family: inherit;
  font-size: var(--_pg-fs);
  font-weight: 500;               /* Figma Inter Medium */
  line-height: var(--_pg-lh);
  /* Цифры разной ширины дёргали бы ряд при переходе 9 → 10. */
  font-variant-numeric: tabular-nums;

  cursor: pointer;
}

/* Наведение и нажатие — только у доступной невыбранной ячейки. Спека § Стандартное
   состояние: «выбранный пункт не реагирует на наведение, курсор не превращается
   в указатель». */
.ds-pgn-page:hover:not([data-selected]):not([data-disabled]),
.ds-pgn-page[data-hovered]:not([data-selected]):not([data-disabled]) {
  background: var(--ds-nba-20);
}
.ds-pgn-page:active:not([data-selected]):not([data-disabled]),
.ds-pgn-page[data-pressed]:not([data-selected]):not([data-disabled]) {
  background: var(--ds-nba-ghost-pressed);
}

.ds-pgn-page[data-selected] {
  background: var(--ds-neutral-fill);
  color: var(--ds-text-invert);
  cursor: default;
}

.ds-pgn-page[data-disabled] {
  color: var(--ds-disabled-text);
  cursor: default;
}
.ds-pgn-page[data-selected][data-disabled] {
  background: var(--ds-disabled-fill);
}

/* --ds-focus-ring раскрывается в СПИСОК ТЕНЕЙ («0 0 0 1px …, 0 0 0 3px …»), а не в
   значение обводки. Здесь стояло `outline: var(--ds-focus-ring)` — синтаксически
   недопустимо, браузер выбрасывал объявление целиком, и кольца не было видно ни на
   одной из 21 кнопки страницы. Глазами это неотличимо от «фокус не сработал».
   Остальные 16 мест в site/css применяют токен через box-shadow; здесь был
   единственный на репозиторий выбивающийся случай. Поймано tools/audit-focus-coverage. */
.ds-pgn-page:focus-visible,
.ds-pgn-page[data-focus-visible] {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* ── Поле быстрого перехода ────────────────────────────────────────────────── */
/* Своих размеров и цветов здесь нет: внутри лежит настоящий Input
   (Figma «Field / LabelOut-Text»), оформление берётся из input.css.
   Задана только ширина — в макете фрейм Page_Number ровно 120. */
.ds-pgn-jump {
  flex: 0 0 auto;
  width: calc(var(--ds-comp-unit) * 30);
}

/* ── Правая группа: «1–20 из 250» и выбор размера страницы ─────────────────── */
/* Оба текста группы — «1–20 из 250» и подпись «Показать» — в макете Static/Text/Neutral-Blue/
   Tertiary (1159:10900, 1159:10901): #6B7175 · LI #D0D7DE · D #ACB3BB · DI #5B6063, то есть
   --ds-text-tertiary во всех четырёх модах (снято API и резолвером 2026-09-22). До этого здесь
   стоял --ds-text-neutral-ghost — цвет номеров страниц (кнопки Ghost), перенесённый сюда при
   сборке без основания в макете: в светлой теме почти чёрный вместо серого. */
.ds-pgn-range-text {
  font-size: var(--_pg-fs);
  line-height: var(--_pg-lh);
  color: var(--ds-text-tertiary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Мобильный подвал: две кнопки «Назад» и «Вперёд» ───────────────────────── */
/* Figma Footer: HORIZONTAL, разрядка 16, две кнопки. Сами кнопки — инстансы
   Button, поэтому здесь только раскладка. */
.ds-pgn-footer {
  display: flex;
  align-items: center;
  gap: var(--_pg-gap);
}
.ds-pgn-footer > * {
  flex: 1 1 0;
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   Обязателен везде, где есть движение, без исключений. */
@media (prefers-reduced-motion: reduce) {
  .ds-pgn-page {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}