/* Тема документации поверх Material.
   Палитра: ночной индиго в шапке и подвале, фиолетовый акцент для действий, коралловая «точка» —
   только для шагов, логотипа и активной вкладки. Шрифты: Unbounded — заголовки,
   Onest — текст, JetBrains Mono — код. Схемы и справочник API — в diagrams.css.

   Правила вёрстки:
   - отступы только из шкалы --pp-space-*;
   - скругления по роли: s — строчные элементы (код, бейджи, пункты меню),
     m — блоки в потоке текста (код, таблицы, врезки, карточки), l — крупные панели (hero, схемы);
   - рамка у всех блоков одна (--pp-line), тень — только у того, что «парит»: меню, заметки
     на схемах, карточка под курсором. */

:root {
  --pp-ink: #17123f;
  --pp-ink-deep: #0e0b2a;
  --pp-violet: #5a3ff0;
  --pp-violet-strong: #4a2fd8;
  --pp-violet-soft: #ece8ff;
  --pp-coral: #ff7a45;
  --pp-ok: #0f8a5f;
  --pp-ok-soft: #e3f6ee;
  --pp-bad: #c93a3a;
  --pp-bad-soft: #fde8e8;
  --pp-wait: #3563d9;
  --pp-wait-soft: #e6edff;
  --pp-warn: #a8660b;
  --pp-warn-soft: #fdf1dc;
  --pp-muted: #6b6886;
  --pp-muted-soft: #efeef5;
  --pp-line: rgb(23 18 63 / 10%);
  --pp-heading: var(--pp-ink);

  --pp-space-1: 0.25rem;
  --pp-space-2: 0.5rem;
  --pp-space-3: 0.75rem;
  --pp-space-4: 1rem;
  --pp-space-5: 1.5rem;
  --pp-space-6: 2rem;
  --pp-space-7: 3rem;

  --pp-radius-s: 6px;
  --pp-radius-m: 12px;
  --pp-radius-l: 20px;
  --pp-radius-pill: 999px;

  --pp-shadow-card: 0 1px 2px rgb(23 18 63 / 6%), 0 8px 24px -12px rgb(23 18 63 / 18%);
  --pp-shadow-lift: 0 2px 4px rgb(23 18 63 / 8%), 0 18px 40px -16px rgb(74 47 216 / 35%);
  --pp-focus: 0 0 0 2px var(--md-default-bg-color), 0 0 0 4px var(--md-accent-fg-color);

  --pp-font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --pp-text-small: 0.72rem;
  --pp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pp-fast: 160ms;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--pp-ink);
  --md-primary-fg-color--light: #2a2270;
  --md-primary-fg-color--dark: var(--pp-ink-deep);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgb(255 255 255 / 70%);
  --md-accent-fg-color: var(--pp-violet);
  --md-accent-fg-color--transparent: rgb(90 63 240 / 10%);
  --md-typeset-a-color: var(--pp-violet-strong);
  --md-default-bg-color: #ffffff;
  --md-code-bg-color: #f6f5fb;
  --md-typeset-table-color: var(--pp-line);
  --md-footer-bg-color: var(--pp-ink);
  --md-footer-bg-color--dark: var(--pp-ink-deep);
}

[data-md-color-scheme="slate"] {
  --md-hue: 250;
  --md-default-bg-color: #0f0d1f;
  --md-primary-fg-color: #141030;
  --md-primary-fg-color--light: #2a2270;
  --md-primary-fg-color--dark: #0b0920;
  --md-primary-bg-color: #f2f0ff;
  --md-accent-fg-color: #a797ff;
  --md-accent-fg-color--transparent: rgb(167 151 255 / 12%);
  --md-typeset-a-color: #a797ff;
  --md-code-bg-color: #17142e;
  --md-typeset-table-color: var(--pp-line);
  --md-footer-bg-color: #141030;
  --md-footer-bg-color--dark: #0b0920;
  --pp-heading: #f2f0ff;
  --pp-violet-soft: rgb(167 151 255 / 12%);
  --pp-ok: #4cd6a0;
  --pp-ok-soft: rgb(76 214 160 / 12%);
  --pp-bad: #ff8a8a;
  --pp-bad-soft: rgb(255 138 138 / 12%);
  --pp-wait: #8fb0ff;
  --pp-wait-soft: rgb(143 176 255 / 12%);
  --pp-warn: #f2b35b;
  --pp-warn-soft: rgb(242 179 91 / 12%);
  --pp-muted: #a7a3c4;
  --pp-muted-soft: rgb(167 163 196 / 12%);
  --pp-line: rgb(242 240 255 / 10%);
  --pp-shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px -12px rgb(0 0 0 / 60%);
  --pp-shadow-lift: 0 2px 4px rgb(0 0 0 / 30%), 0 18px 40px -16px rgb(167 151 255 / 30%);
}

/* ---------- типографика ---------- */

.md-typeset h1 {
  font-family: var(--pp-font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--pp-heading);
  margin: 0 0 var(--pp-space-5);
}

/* Ссылка на заголовок страницы не нужна, а у длинного h1 она уходит на пустую вторую строку. */
.md-typeset h1 .headerlink {
  display: none;
}

.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--pp-heading);
  margin: 2.2em 0 0.64em;
}

/* Раздел сразу под заголовком страницы: отступ как у h1, без двойного зазора. */
.md-typeset h1 + h2 {
  margin-top: 0;
}

.md-typeset h3 {
  font-weight: 600;
  color: var(--pp-heading);
}

.md-header__title {
  font-family: var(--pp-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Вкладки разделов: у активной коралловая черта, а не только яркость текста. */
.md-tabs__link {
  font-weight: 500;
  opacity: 0.75;
}

.md-tabs__item--active .md-tabs__link {
  opacity: 1;
  text-decoration: underline 2px var(--pp-coral);
  text-underline-offset: 0.5rem;
}

.md-typeset code {
  border-radius: var(--pp-radius-s);
}

.md-typeset pre > code {
  border-radius: var(--pp-radius-m);
}

/* ---------- таблицы ---------- */

/* Таблица всегда во всю ширину колонки текста: правые края блоков на странице совпадают.
   Широкая таблица прокручивается внутри своей обёртки. */
.md-typeset__table {
  display: block;
}

/* Material делает таблицу inline-block: строки тогда сжимаются по содержимому и не доходят
   до правой рамки. Внутри обёртки таблица — настоящая table на всю ширину. */
.md-typeset .md-typeset__table table:not([class]) {
  display: table;
  width: 100%;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-m);
  box-shadow: none;
  font-size: var(--pp-text-small);
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  min-width: 0;
  padding: 0.8em 1em;
}

/* Фон шапки не выходит за скруглённые углы таблицы. */
.md-typeset table:not([class]) thead th:first-child {
  border-top-left-radius: calc(var(--pp-radius-m) - 1px);
}

.md-typeset table:not([class]) thead th:last-child {
  border-top-right-radius: calc(var(--pp-radius-m) - 1px);
}

.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  font-weight: 600;
  white-space: nowrap;
}

/* Имена полей и значения в таблицах не рвём посреди слова: таблица прокручивается сама. */
.md-typeset table:not([class]) td code {
  white-space: nowrap;
  word-break: normal;
}

/* ---------- врезки ---------- */

.md-typeset .admonition,
.md-typeset details:not(.pp-page-actions__more) {
  border-width: 1px;
  border-radius: var(--pp-radius-m);
  box-shadow: none;
  font-size: var(--pp-text-small);
  margin: var(--pp-space-5) 0;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details:not(.pp-page-actions__more) > summary {
  font-weight: 600;
  border-radius: calc(var(--pp-radius-m) - 1px) calc(var(--pp-radius-m) - 1px) 0 0;
}

.md-typeset .admonition > .admonition-title:last-child,
.md-typeset details:not(.pp-page-actions__more):not([open]) > summary {
  border-radius: calc(var(--pp-radius-m) - 1px);
}

/* ---------- кнопки ---------- */

.md-typeset .md-button {
  margin: 0 var(--pp-space-2) var(--pp-space-2) 0;
  padding: 0.55em 1.4em;
  border-radius: var(--pp-radius-pill);
  font-weight: 600;
  transition:
    transform var(--pp-fast) var(--pp-ease),
    box-shadow var(--pp-fast) var(--pp-ease),
    background-color var(--pp-fast) var(--pp-ease);
}

.md-typeset .md-button:not(.md-button--primary) {
  border-color: color-mix(in srgb, var(--pp-violet) 55%, transparent);
  color: var(--pp-violet);
}

[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  border-color: rgb(167 151 255 / 45%);
  color: #cfc5ff;
}

.md-typeset .md-button--primary {
  background: var(--pp-violet);
  border-color: var(--pp-violet);
  color: #fff;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--pp-shadow-lift);
}

.md-typeset .md-button:focus-visible {
  outline: none;
  box-shadow: var(--pp-focus), var(--pp-shadow-lift);
}

.md-typeset .md-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---------- статусы заявки ---------- */

.md-typeset .pp-status {
  display: inline-block;
  padding: 0.1em 0.65em;
  border-radius: var(--pp-radius-pill);
  font-family: var(--md-code-font-family);
  font-size: 0.82em;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--pp-muted-soft);
  color: var(--pp-muted);
}

.md-typeset .pp-status--wait { background: var(--pp-wait-soft); color: var(--pp-wait); }
.md-typeset .pp-status--ok { background: var(--pp-ok-soft); color: var(--pp-ok); }
.md-typeset .pp-status--bad { background: var(--pp-bad-soft); color: var(--pp-bad); }
.md-typeset .pp-status--warn { background: var(--pp-warn-soft); color: var(--pp-warn); }

/* ---------- кнопки действий над страницей ---------- */

/* Отдельная строка над заголовком: кнопки не сжимают h1 и hero. */
.pp-page-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--pp-space-3);
  font-size: 0.64rem;
}

.pp-page-actions__main,
.md-typeset details.pp-page-actions__more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 1.7rem;
  min-height: 0;
  margin: 0;
  padding: 0 0.75em;
  border: 1px solid var(--pp-line);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  transition:
    color var(--pp-fast) var(--pp-ease),
    border-color var(--pp-fast) var(--pp-ease),
    background-color var(--pp-fast) var(--pp-ease);
}

.pp-page-actions__main {
  border-radius: var(--pp-radius-pill) 0 0 var(--pp-radius-pill);
}

/* Сброс оформления Material для <details> внутри статьи: это меню, а не блок-спойлер. */
.md-typeset details.pp-page-actions__more {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: inherit;
  overflow: visible;
}

.md-typeset details.pp-page-actions__more > summary {
  padding: 0 0.55em;
  border-left: 0;
  border-radius: 0 var(--pp-radius-pill) var(--pp-radius-pill) 0;
  list-style: none;
}

.md-typeset details.pp-page-actions__more > summary::-webkit-details-marker {
  display: none;
}

.md-typeset details.pp-page-actions__more > summary::before,
.md-typeset details.pp-page-actions__more > summary::after {
  display: none;
}

.pp-page-actions svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentcolor;
}

.pp-page-actions__main:hover,
.pp-page-actions__main:focus-visible,
.md-typeset details.pp-page-actions__more > summary:hover,
.md-typeset details.pp-page-actions__more > summary:focus-visible {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  background: var(--md-accent-fg-color--transparent);
  outline: none;
}

.pp-page-actions__main:focus-visible,
.md-typeset details.pp-page-actions__more > summary:focus-visible {
  box-shadow: var(--pp-focus);
}

.pp-page-actions__main--done {
  color: var(--pp-ok);
  border-color: var(--pp-ok);
}

.pp-page-actions__more[open] > summary svg {
  transform: rotate(180deg);
}

.pp-page-actions__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--pp-space-2));
  min-width: 13rem;
  margin: 0;
  padding: var(--pp-space-1);
  list-style: none;
  background: var(--md-default-bg-color);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-m);
  box-shadow: var(--pp-shadow-lift);
  animation: pp-menu-in var(--pp-fast) var(--pp-ease);
}

.pp-page-actions__menu a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.6em;
  border-radius: var(--pp-radius-s);
  color: var(--md-default-fg-color);
}

.pp-page-actions__menu a:hover,
.pp-page-actions__menu a:focus-visible {
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  outline: none;
}

@keyframes pp-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---------- главная ---------- */

.md-typeset .pp-hero {
  clear: both;
  position: relative;
  margin: 0 0 var(--pp-space-7);
  padding: var(--pp-space-7) var(--pp-space-6) var(--pp-space-6);
  border-radius: var(--pp-radius-l);
  color: #f5f3ff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(255 122 69 / 28%) 0%, transparent 45%),
    radial-gradient(90% 120% at 0% 100%, rgb(90 63 240 / 65%) 0%, transparent 60%),
    linear-gradient(135deg, #17123f 0%, #221a5c 100%);
  overflow: hidden;
  isolation: isolate;
}

/* На тёмном фоне страницы край панели почти пропадает: тонкая светлая кромка. */
[data-md-color-scheme="slate"] .md-typeset .pp-hero {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
}

/* Сетка-«миллиметровка»: тонкая фактура, чтобы блок не выглядел плоской заливкой. */
.md-typeset .pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
}

.md-typeset .pp-hero h1 {
  color: #fff;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  max-width: 34rem;
  margin: 0 0 var(--pp-space-4);
}

.md-typeset .pp-hero p {
  max-width: 36rem;
  margin: 0 0 var(--pp-space-5);
  font-size: 0.9rem;
  color: rgb(245 243 255 / 82%);
}

.md-typeset .pp-hero p:last-child {
  margin-bottom: 0;
}

.md-typeset .pp-hero .pp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--pp-space-4);
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(245 243 255 / 75%);
}

.md-typeset .pp-hero .pp-eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pp-coral);
  box-shadow: 0 0 0 4px rgb(255 122 69 / 25%);
}

.md-typeset .pp-hero .md-button {
  margin: 0 var(--pp-space-3) 0 0;
  color: #fff;
  border-color: rgb(255 255 255 / 40%);
}

.md-typeset .pp-hero .md-button--primary {
  background: #fff;
  border-color: #fff;
  color: var(--pp-ink);
}

.md-typeset .pp-hero .md-button:focus-visible {
  box-shadow: 0 0 0 2px var(--pp-ink), 0 0 0 4px #fff;
}

/* Пять шагов интеграции: на широком экране — полоса с линией между шагами,
   на узком — вертикальная шкала с номером слева. */
.md-typeset ol.pp-steps {
  --pp-steps-gap: var(--pp-space-5);
  --pp-steps-dot: 1.7rem;
  counter-reset: pp-step;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--pp-steps-gap);
  margin: var(--pp-space-5) 0 var(--pp-space-6);
  padding: 0;
  list-style: none;
}

.md-typeset ol.pp-steps > li {
  counter-increment: pp-step;
  position: relative;
  margin: 0;
  padding: calc(var(--pp-steps-dot) + var(--pp-space-3)) 0 0;
  font-size: var(--pp-text-small);
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
}

.md-typeset ol.pp-steps > li::before {
  content: counter(pp-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--pp-steps-dot);
  height: var(--pp-steps-dot);
  border-radius: 50%;
  background: var(--md-default-bg-color);
  border: 2px solid var(--pp-coral);
  color: var(--pp-coral);
  font-family: var(--pp-font-display);
  font-size: 0.7rem;
  font-weight: 600;
}

/* Линия от номера к следующему шагу */
.md-typeset ol.pp-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--pp-steps-dot) / 2 - 1px);
  left: calc(var(--pp-steps-dot) + var(--pp-space-2));
  right: calc(var(--pp-space-2) - var(--pp-steps-gap));
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--pp-coral), color-mix(in srgb, var(--pp-coral) 15%, transparent));
}

.md-typeset ol.pp-steps > li strong {
  display: block;
  margin-bottom: var(--pp-space-1);
  font-size: 0.8rem;
  color: var(--pp-heading);
}

.md-typeset ol.pp-steps code {
  white-space: nowrap;
}

/* Карточки */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  padding: var(--pp-space-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-m);
  box-shadow: none;
  transition:
    transform var(--pp-fast) var(--pp-ease),
    box-shadow var(--pp-fast) var(--pp-ease),
    border-color var(--pp-fast) var(--pp-ease);
}

.md-typeset .grid.cards > ul > li > hr {
  margin: var(--pp-space-3) 0;
}

.md-typeset .grid.cards > ul > li > p {
  margin: 0;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  transform: translateY(-2px);
  border-color: var(--md-accent-fg-color);
  box-shadow: var(--pp-shadow-lift);
}

.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .lg {
  color: var(--md-accent-fg-color);
}

/* Бенто: две главные карточки по половине ряда, остальные четыре — ровным рядом по четверти.
   В Material список карточек — display: contents, сетка задаётся на самом .grid. */
.md-typeset .grid.cards.pp-bento {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--pp-space-3);
}

.md-typeset .grid.cards.pp-bento > ul > li {
  grid-column: span 3;
}

.md-typeset .grid.cards.pp-bento > ul > li:nth-child(-n + 2) {
  grid-column: span 6;
  background: linear-gradient(160deg, var(--pp-violet-soft), transparent 70%);
}

/* ---------- адаптивность ---------- */

@media screen and (max-width: 76.1875em) {
  .md-typeset ol.pp-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pp-space-4);
    max-width: 34rem;
  }

  .md-typeset ol.pp-steps > li {
    min-height: var(--pp-steps-dot);
    padding: 0.2rem 0 0 calc(var(--pp-steps-dot) + var(--pp-space-3));
  }

  .md-typeset ol.pp-steps > li:not(:last-child)::after {
    top: calc(var(--pp-steps-dot) + var(--pp-space-1));
    bottom: calc(var(--pp-space-1) - var(--pp-space-4));
    left: calc(var(--pp-steps-dot) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--pp-coral), color-mix(in srgb, var(--pp-coral) 15%, transparent));
  }

  .md-typeset .grid.cards.pp-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md-typeset .grid.cards.pp-bento > ul > li,
  .md-typeset .grid.cards.pp-bento > ul > li:nth-child(-n + 2) {
    grid-column: auto;
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .pp-hero {
    margin-bottom: var(--pp-space-6);
    padding: var(--pp-space-6) var(--pp-space-5) var(--pp-space-5);
  }

  .md-typeset .pp-hero .md-button {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--pp-space-3);
  }

  .md-typeset .pp-hero .md-button:last-child {
    margin-bottom: 0;
  }

  .md-typeset .grid.cards.pp-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    padding: 0.65em 0.75em;
  }

  .pp-page-actions__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .md-button,
  .md-typeset .grid.cards > ul > li,
  .pp-page-actions__main,
  .md-typeset details.pp-page-actions__more > summary,
  .pp-page-actions__menu {
    transition: none;
    animation: none;
  }

  .md-typeset .md-button:hover,
  .md-typeset .md-button:focus-visible,
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid.cards > ul > li:focus-within {
    transform: none;
  }
}