/* СГЕНЕРИРОВАНО scripts/docs/api-reference-theme.mjs — не править руками.
   Источники: src/styles/dc-fonts.css, src/styles/tokens/typography.css,
   src/styles/tokens/dimensions.css, src/styles/tokens/colors/primitives.css,
   src/styles/tokens/colors/palettes/aplaut.css.
   Пересобрать: npm run docs:theme */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
}

/* Запасные семьи принадлежат самой роли: `font-family` заменяет унаследованный список
   целиком, поэтому голое `font-family: var(--aplaut-font-sans)` без хвоста внутри токена
   давало ровно одну семью и при недоступном Geist — UA default. Замер, семь мест и
   названное исключение — в `docs/agent-guides/site-authoring/fonts.md:54-99`.

   Комментарий стоит НАД блоком, а значение записано одной строкой: `readTokenBlocks` в
   `scripts/quality/token-catalogue.mjs` требует, чтобы каждая строка тела `:root` была
   ровно одним объявлением. */
:root {
  --aplaut-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --aplaut-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --aplaut-font-weight-normal: 400;
  --aplaut-font-weight-medium: 500;
  --aplaut-font-size-sm: 14px;
  --aplaut-line-height-sm: 20px;
}

:root {
  --aplaut-radius-xs: 2px;
  --aplaut-radius-sm: 6px;
  --aplaut-radius-md: 8px;
  --aplaut-radius-lg: 10px;
  --aplaut-radius-xl: 14px;
  --aplaut-radius-2xl: 18px;
  --aplaut-radius-3xl: 22px;
  --aplaut-radius-4xl: 26px;
  --aplaut-radius-shimmer-surface: 32px;
  --aplaut-spacing-0-5: 2;
  --aplaut-spacing-2: 8;
  --aplaut-spacing-3: 12;
  --aplaut-spacing-4: 16;
  --aplaut-spacing-5: 20;
  --aplaut-spacing-6: 24;
  --aplaut-spacing-11: 44;
  --aplaut-spacing-12: 48;
  --aplaut-border-width-3: 3;
  --aplaut-border-width-page-card: 0;
}

html[data-theme="dark"] {
  --aplaut-border-width-page-card: 1;
}

:root {
  --aplaut-primitive-gray-50: #f4f5f7;
  --aplaut-primitive-gray-100: #edeef4;
  --aplaut-primitive-gray-200: #e5e7f1;
  --aplaut-primitive-gray-300: #cacddb;
  --aplaut-primitive-gray-400: #9a9db0;
  --aplaut-primitive-gray-500: #6b6e81;
  --aplaut-primitive-gray-600: #585c6f;
  --aplaut-primitive-gray-700: #3c4055;
  --aplaut-primitive-gray-800: #292c40;
  --aplaut-primitive-gray-900: #1c1f34;
  --aplaut-primitive-gray-950: #050615;
  --aplaut-primitive-blue-50: #f2f5f9;
  --aplaut-primitive-blue-100: #e5efff;
  --aplaut-primitive-blue-200: #dbe9ff;
  --aplaut-primitive-blue-300: #adccff;
  --aplaut-primitive-blue-400: #669dfb;
  --aplaut-primitive-blue-500: #306cd2;
  --aplaut-primitive-blue-600: #0051c9;
  --aplaut-primitive-blue-700: #003b97;
  --aplaut-primitive-blue-800: #002b73;
  --aplaut-primitive-blue-900: #0e203f;
  --aplaut-primitive-blue-950: #00061d;
  --aplaut-primitive-green-50: #e7faf1;
  --aplaut-primitive-green-100: #d9f7e9;
  --aplaut-primitive-green-200: #abf8d5;
  --aplaut-primitive-green-300: #60e0ad;
  --aplaut-primitive-green-400: #1eb282;
  --aplaut-primitive-green-500: #00805b;
  --aplaut-primitive-green-600: #006e4e;
  --aplaut-primitive-green-700: #00553b;
  --aplaut-primitive-green-800: #003c29;
  --aplaut-primitive-green-900: #10261d;
  --aplaut-primitive-green-950: #010a05;
  --aplaut-primitive-orange-50: #fcf3f0;
  --aplaut-primitive-orange-100: #ffe9e1;
  --aplaut-primitive-orange-200: #ffe0d5;
  --aplaut-primitive-orange-300: #ffbca1;
  --aplaut-primitive-orange-400: #ea7b4c;
  --aplaut-primitive-orange-500: #bf4a1c;
  --aplaut-primitive-orange-600: #a43700;
  --aplaut-primitive-orange-700: #791e00;
  --aplaut-primitive-orange-800: #5b1400;
  --aplaut-primitive-orange-900: #38150b;
  --aplaut-primitive-orange-950: #100400;
  --aplaut-primitive-red-50: #faf3f3;
  --aplaut-primitive-red-100: #ffe9e6;
  --aplaut-primitive-red-200: #ffdfdc;
  --aplaut-primitive-red-300: #ffb9b4;
  --aplaut-primitive-red-400: #ed746e;
  --aplaut-primitive-red-500: #c43537;
  --aplaut-primitive-red-600: #af001c;
  --aplaut-primitive-red-700: #7b0010;
  --aplaut-primitive-red-800: #63000b;
  --aplaut-primitive-red-900: #3e0e0e;
  --aplaut-primitive-red-950: #170001;
  --aplaut-primitive-magneta-50: #fbf3f5;
  --aplaut-primitive-magneta-100: #ffe8ed;
  --aplaut-primitive-magneta-200: #ffdee5;
  --aplaut-primitive-magneta-300: #ffb6c9;
  --aplaut-primitive-magneta-400: #e87296;
  --aplaut-primitive-magneta-500: #bf2365;
  --aplaut-primitive-magneta-600: #aa0053;
  --aplaut-primitive-magneta-700: #790039;
  --aplaut-primitive-magneta-800: #60002c;
  --aplaut-primitive-magneta-900: #41041d;
  --aplaut-primitive-magneta-950: #160006;
  --aplaut-primitive-purple-50: #f7f3fa;
  --aplaut-primitive-purple-100: #f6e8ff;
  --aplaut-primitive-purple-200: #f3dfff;
  --aplaut-primitive-purple-300: #e6baff;
  --aplaut-primitive-purple-400: #be80e1;
  --aplaut-primitive-purple-500: #943dbe;
  --aplaut-primitive-purple-600: #8800b8;
  --aplaut-primitive-purple-700: #630087;
  --aplaut-primitive-purple-800: #4a0666;
  --aplaut-primitive-purple-900: #330347;
  --aplaut-primitive-purple-950: #100019;
  --aplaut-primitive-violet-50: #f4f4f9;
  --aplaut-primitive-violet-100: #edecff;
  --aplaut-primitive-violet-200: #e6e5ff;
  --aplaut-primitive-violet-300: #cac7ff;
  --aplaut-primitive-violet-400: #998ef6;
  --aplaut-primitive-violet-500: #6f54dd;
  --aplaut-primitive-violet-600: #6100ea;
  --aplaut-primitive-violet-700: #4416a4;
  --aplaut-primitive-violet-800: #321777;
  --aplaut-primitive-violet-900: #23005f;
  --aplaut-primitive-violet-950: #080023;
  --aplaut-primitive-yellow-50: #fbf6da;
  --aplaut-primitive-yellow-100: #ffeeb8;
  --aplaut-primitive-yellow-200: #ffe5b1;
  --aplaut-primitive-yellow-300: #ffc076;
  --aplaut-primitive-yellow-400: #dd8726;
  --aplaut-primitive-yellow-500: #a25a00;
  --aplaut-primitive-yellow-600: #874800;
  --aplaut-primitive-yellow-700: #623300;
  --aplaut-primitive-yellow-800: #492400;
  --aplaut-primitive-yellow-900: #351a03;
  --aplaut-primitive-yellow-950: #0e0500;
}

:root {
  --aplaut-color-page: var(--aplaut-primitive-gray-50);
  --aplaut-color-ink: var(--aplaut-primitive-gray-950);
  --aplaut-color-ink-muted: var(--aplaut-primitive-gray-500);
  --aplaut-color-navigation: var(--aplaut-primitive-gray-700);
  --aplaut-color-panel: var(--aplaut-primitive-gray-50);
  --aplaut-color-border: var(--aplaut-primitive-gray-200);
  --aplaut-color-card: var(--aplaut-primitive-gray-100);
  --aplaut-color-hover: var(--aplaut-primitive-gray-100);
  --aplaut-color-accent: var(--aplaut-primitive-violet-600);
  --aplaut-color-danger-ink: var(--aplaut-primitive-red-600);
}

:root {
  color-scheme: light;
}

html {
  background: var(--aplaut-color-page);
  font-family: var(--aplaut-font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background: var(--aplaut-color-page);
  color: var(--aplaut-color-ink);
  font-family: var(--aplaut-font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Дальше — четыре места, до которых JS-тема ReDoc не дотягивается: у них нет
   ключа в её схеме, и значения зашиты в его styled-components. Селекторы взяты
   семантические (operation-type, react-tabs__tab, token) — это имена самого ReDoc,
   а не хеши сборки, которые меняются при каждом его релизе.

   Контролы не наследуют типографику документа по умолчанию, поэтому кнопки внутри
   панелей брали Arial у UA (fonts.md, раздел про owned form controls). Здесь
   наследование задано явно — только family, чтобы не сносить размеры и вес,
   которые ReDoc выставляет осмысленно. */
#redoc button {
  font-family: inherit;
}

/* Панель JSON рисует значения generic monospace, хотя роль у них ровно та же, что
   у кода в тексте. */
#redoc code,
#redoc .redoc-json,
#redoc .token {
  font-family: var(--aplaut-font-mono);
}

/* Ниже !important, и не по лени. ReDoc — styled-components: он внедряет свои
   правила в документ в рантайме, то есть **после** этого листа, и при равной
   специфичности выигрывает последний. Без !important эти правила
   вычисляются, но не применяются — замерено: чип метода оставался на Verdana и
   3px. Тот же приём и по той же причине уже используется в site-header.css.
   !important стоит ровно на переопределяемых свойствах, не на группе. */

/* Чип HTTP-метода. Их два, и классы у них разные: .operation-type в сайдбаре,
   .http-verb в заголовке операции. Оба — Verdana и 3px вне шкалы. */
#redoc .operation-type,
#redoc .http-verb {
  font-family: inherit !important;
  border-radius: var(--aplaut-radius-xs) !important;
}

/* Заголовок операции: 4px вне шкалы, скруглены только верхние углы. Опознаётся по
   чипу метода внутри — своего семантического класса у самой кнопки нет. */
#redoc button:has(.http-verb) {
  border-radius: var(--aplaut-radius-sm) var(--aplaut-radius-sm) 0 0 !important;
}

/* Панель под заголовком операции — его нижняя половина, те же 4px зеркально. */
#redoc button:has(.http-verb) + div {
  border-radius: 0 0 var(--aplaut-radius-sm) var(--aplaut-radius-sm) !important;
}

/* Контролы: радиус и контракт состояний.

   Через ActionButton эти кнопки не провести — их рисует вендорный бандл в рантайме,
   и своего DOM у нас тут нет. Но «interaction.md» требует одинакового не вида, а
   поведения: hover, нажатие, кольцо на :focus-visible, reduced-motion. Ниже он
   перенесён из action-button.css теми же токенами и теми же величинами.

   Замерено до правки: ни одного авторского правила :focus-visible и :active на
   странице — кольцо рисовал браузер своим дефолтом (оранжевый outline 1px), а
   нажатие не давало отклика вовсе. Плюс «transition: all» на каждом контроле:
   анимируется и то, что никто не называл.

   Радиус контролов — 8px, как у пунктов меню и кнопок шапки сайта
   («menuLinkStyle», «navBtnStyle»). Он численно больше 6px у панели операции, и это
   не противоречие: по «surfaces.md» самостоятельный вложенный control сохраняет
   контракт своей роли и может иметь радиус больше родительского. */
#redoc .react-tabs__tab-list > li,
#redoc button:not(:has(.http-verb)),
#redoc a[href] {
  border-radius: var(--aplaut-radius-md) !important;
}

button,
a[href],
li[data-item-id] label,
#redoc .react-tabs__tab-list > li {
  transition-property: background-color, color, scale;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Нажатие — только у настоящих кнопок. Пункты меню и ссылки на сайте не
   масштабируются, и придумывать им отклик, которого нет в контракте, нельзя. */
#redoc button:active {
  scale: 0.96;
}

#redoc button:focus-visible,
#redoc a[href]:focus-visible,
#redoc li[data-item-id]:focus-visible {
  outline: calc(var(--aplaut-border-width-3) * 1px) solid var(--aplaut-color-ink);
  outline-offset: calc(var(--aplaut-spacing-0-5) * 1px);
}

/* Пункт меню. Радиус тот же, что у пункта меню сайта; активный пункт получает
   роль подсветки вместо затемнения, которое ReDoc считает сам и которого в палитре
   нет. Хук — класс active на самой метке, он у ReDoc семантический. */
#redoc li[data-item-id] label {
  border-radius: var(--aplaut-radius-md);
}

#redoc li[data-item-id] label:hover {
  background-color: var(--aplaut-color-hover);
}

#redoc li[data-item-id] label.active {
  background-color: var(--aplaut-color-hover) !important;
}

/* Каретка группы приходит с чёрной заливкой мимо всякой роли. currentColor
   привязывает её к краске пункта — и к акценту, когда пункт активен. */
#redoc li[data-item-id] label svg {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  button,
  a[href],
  li[data-item-id] label,
  #redoc .react-tabs__tab-list > li {
    transition-duration: 0ms;
  }

  #redoc button:active {
    scale: 1;
  }
}

/* Таблицы: 3px вне шкалы у таблиц параметров и схем.

   «border-collapse» здесь не косметика: при «collapse» браузер скругление таблицы не
   рисует вовсе, а markdown-таблицы из описаний спек ReDoc отдаёт именно с ним и со
   своим «overflow: auto». Замерено: до этой правки радиус стоял в computed-стиле и не
   рисовался ни на одном пикселе. «separate» с нулевым расстоянием между ячейками
   геометрию не меняет, а скругление возвращает. */
#redoc table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--aplaut-radius-sm) !important;
  overflow: hidden !important;
}

/* Блок кода в тексте описаний приходил вовсе без скругления. */
#redoc pre {
  border-radius: var(--aplaut-radius-sm) !important;
}

/* Код в тексте: 2px совпадает со шкалой случайно, а не потому, что взят из неё. */
#redoc code {
  border-radius: var(--aplaut-radius-xs) !important;
}

/* Логотип. Селектор — по адресу картинки, а не по классу: класс у неё
   styled-components'ный, то есть деталь сборки ReDoc, а адрес задаём мы сами, в
   x-logo.url каждой спеки.

   Размер. Без ограничения ReDoc растягивает логотип на всю ширину сайдбара —
   260x67, вдвое выше, чем он живёт в шапке сайта, и он перевешивает всё меню под
   собой. Собственный ключ темы logo.maxHeight не годится: ReDoc подставляет его и
   в width, и в height, и растр 1048x256 схлопывается в квадрат 32x32 с
   object-fit: fill. Поэтому высота задаётся здесь, а ширина считается от неё.
   32px — не подобранное число, а измеренная высота блока .logo-brand в шапке
   сайта (124x32 в баре 96px). */
img[src$="/assets/brand/aplaut-logo.png"] {
  width: auto !important;
  height: 32px !important;
  max-width: 100% !important;
  box-sizing: content-box;
}

a:has(> img[src$="/assets/brand/aplaut-logo.png"]) {
  display: block;
  padding: calc(var(--aplaut-spacing-4) * 1px);
}


/* Бейдж «API docs by Redocly». Селектор по href ссылки по той же причине: класс
   обёртки — хеш сборки. Поиск скрывать нечем и незачем — страницы
   инициализируются с disableSearch. */
#redoc div:has(> a[href^="https://redocly.com/redoc"]) {
  display: none;
}