/**
 * Документация партнёрского API.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ОБЩИЙ БАНДЛ
 * Страница одна. Код, блоки ручек и переключатель языков примеров больше
 * нигде не встречаются, а весят прилично.
 *
 * ПОЧЕМУ ПОВЕРХ legal.css
 * Каркас (колонка с оглавлением, ширина строки, заголовки разделов) у
 * документа ровно тот же, что у правил пользования, и второй такой каркас
 * означал бы две разные ширины строки на соседних страницах. Здесь только
 * то, чего в правилах нет: код, ручки, параметры.
 *
 * Все цвета берутся из переменных .lg — значит, тёмная тема получается сама.
 */

/* ------------------------------------------------------------- ширина */

/*
 * Документация тянется во всю ширину, как остальные страницы кабинета.
 *
 * ПОЧЕМУ ПРИШЛОСЬ ПЕРЕБИВАТЬ
 * Каркас взят у правовых страниц, а там колонка в 1100 пикселей по центру:
 * договор читают подряд сверху вниз, и длинная строка ему мешает. Здесь
 * читают не подряд - ищут ручку, сверяют json, копируют пример, - и на
 * широком мониторе документ, ужатый в середину с пустыми полями по краям,
 * выглядит чужим среди страниц кабинета, которые ширину занимают целиком.
 *
 * ДЛИНУ СТРОКИ ПРИ ЭТОМ ДЕРЖИТ САМ ТЕКСТ
 * Ограничение переехало с колонки на абзацы: у сплошного текста остаётся
 * читаемая мера, а код, таблицы и карточки ручек получают всю ширину -
 * им она и нужна, это ровно то, ради чего сюда приходят.
 */
.lg--api .lg__wrap { max-width: none; margin: 0; }
.lg--api .lg__doc { max-width: none; }

.lg--api .lg__lead,
.lg--api .lg-sec > p,
.lg--api .lg-list,
.lg--api .lg-dots,
.lg--api .lg-defs,
.lg--api .lg-note,
.lg--api .api-steps { max-width: 86ch; }

/* У карточки ручки своя мера: внутри и текст, и таблица параметров, и
   растягивать её на два монитора незачем - строка «нужна запись» уехала бы
   от самой ручки на полэкрана. */
.lg--api .api-ep { max-width: 1180px; }
.lg--api .api-code { max-width: 1180px; }
.lg--api .lg-tw { max-width: 1180px; }
.lg--api .api-grid { max-width: 1180px; }

/* ------------------------------------------------------------ подсказка */

.api-lead {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}

.api-lead__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    border: 2px solid var(--line);
    color: var(--ink) !important;
}

.api-lead__btn:hover { border-color: var(--sun); }

.api-lead__btn--main {
    background: var(--sun);
    border-color: var(--sun-edge);
    color: #2E2118 !important;
}

.api-lead__btn--main:hover { background: var(--sun-edge); }

/* ------------------------------------------------------------------ код */

.api-code {
    position: relative;
    margin: 14px 0 18px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--tint);
    overflow: hidden;
}

.api-code__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px 8px 15px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--soft);
}

.api-code__copy {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--soft);
    border-radius: 8px;
    padding: 4px 10px;
    font: inherit;
    font-size: 11.5px;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.api-code__copy:hover { color: var(--ink); border-color: var(--sun); }
.api-code__copy.is-done { color: var(--mint-ink); border-color: var(--mint-ink); }

.api-code pre {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.8px;
    line-height: 1.65;
    color: var(--ink);
    tab-size: 4;
}

/*
 * Подсветки синтаксиса нет намеренно: примеры короткие, а highlight.js весит
 * больше, чем вся эта страница. Читаемость даёт моноширинный шрифт и воздух.
 *
 * ЛОВУШКА hidden
 * У браузерного правила [hidden]{display:none} нулевая специфичность, и
 * любой display из класса его перебивает. Панель примера на другом языке
 * тогда остаётся видимой навсегда. Уже ловились на этом в арене и в админке.
 */
[hidden] { display: none !important; }

/* ------------------------------------------------- переключатель языков */

.api-tabs {
    display: flex;
    gap: 6px;
    margin: 18px 0 0;
    flex-wrap: wrap;
}

.api-tabs__b {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--soft);
    border-radius: 9px;
    padding: 6px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.api-tabs__b:hover { color: var(--ink); }

.api-tabs__b.is-on {
    background: var(--sun-soft);
    border-color: var(--sun);
    color: var(--ink);
}

/* --------------------------------------------------------------- ручки */

.api-ep {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--paper);
    overflow: hidden;
}

.api-ep__top {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    flex-wrap: wrap;
}

.api-ep__m {
    flex-shrink: 0;
    min-width: 58px;
    text-align: center;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .05em;
    background: var(--mint-soft);
    color: var(--mint-ink);
}

.api-ep__m--post,
.api-ep__m--patch { background: var(--sun-soft); color: var(--sun-edge); }
.api-ep__m--delete { background: color-mix(in srgb, var(--coral) 14%, transparent); color: var(--coral); }

.api-ep__p {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    word-break: break-all;
}

.api-ep__w {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--sun-edge);
    white-space: nowrap;
}

.api-ep__body {
    padding: 0 15px 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--soft);
}

.api-ep__body b { color: var(--ink); }

/* ---------------------------------------------------------- параметры */

.api-par {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13.5px;
}

.api-par th,
.api-par td {
    padding: 7px 10px 7px 0;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

.api-par thead th {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--soft);
    border-bottom: 1px solid var(--line);
}

.api-par tbody tr + tr td { border-top: 1px solid var(--line); }

.api-par code,
.api-ep__body code,
.lg-sec p code,
.lg-list code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 5px;
}

.api-par__req { color: var(--coral); font-weight: 800; font-size: 11.5px; }

/* ------------------------------------------------------------- карточки */

.api-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.api-card {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--paper);
}

.api-card__t {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
}

.api-card__x {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--soft);
}

.api-card__n {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: 900;
    color: var(--sun-edge);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- шаги */

.api-steps { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: step; }

.api-steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 46px;
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.6;
}

.api-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sun);
    color: #2E2118;
    font-size: 14px;
    font-weight: 900;
}

.api-steps b { display: block; color: var(--ink); }

/* ---------------------------------------------------------------- узко */

@media (max-width: 640px) {
    .api-ep__w { margin-left: 0; width: 100%; }
    .api-code pre { font-size: 12px; }
}