/*
    Оформление документации API поверх базовой темы docs.css.
    Подключается вторым, поэтому переопределяет её точечно.

    Разметка задаётся в docs.md через атрибуты Markdig:
        #### %Раздел% {.sec .i-key}        - заголовок раздела с иконкой
        `GET`{.verb .v-get}                - бейдж HTTP-метода
        `/{culture}/api/path`{.path}       - адрес метода
        `Authorization: Bearer <Token>`{.hdr} - заголовок запроса
        ::: note / ::: warning             - блок-примечание
*/

/*
    Палитра взята из style.css самого сайта, чтобы документация не выглядела
    чужой страницей: синий #3864f0, текст #292a2d, границы #dddddd. Акценты
    методов - тоже фирменные (#9c6a0c, #840e0e, #7091fc, #ff9595), недостающий
    зелёный подобран к ним по насыщенности. Все пары проверены на контраст.
*/
/* Шрифт сайта - тот же, что в style.css, чтобы документация не отличалась
   по типографике от остальных страниц. Файлы лежат в wwwroot/fonts. */
@font-face {
    font-family: "NTSomic";
    src: url("../fonts/NTSomic-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NTSomic";
    src: url("../fonts/NTSomic-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NTSomic";
    src: url("../fonts/NTSomic-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NTSomic";
    src: url("../fonts/NTSomic-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PT-Root-UI";
    src: url("../fonts/PT-Root-UI_Regular.ttf");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "PT-Root-UI";
    src: url("../fonts/PT-Root-UI_Bold.ttf");
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    /* один радиус на все элементы: код, бейджи, блоки, примечания */
    --d-radius: 5px;

    --d-fg: #292a2d;         /* фирменный цвет текста */
    --d-fg-strong: #17181a;
    --d-muted: #6b6c70;
    --d-bg: #ffffff;
    --d-soft: #f6f7fa;
    --d-line: #dddddd;       /* фирменная граница */
    --d-line-soft: #eceef2;
    --d-link: #3864f0;       /* фирменный синий */
    --d-accent: #3864f0;
    --d-accent-soft: #eaeffe;

    --d-get: #0f7a3d;
    --d-get-bg: #e4f4ea;
    --d-post: #2a51d8;
    --d-post-bg: #e8edfe;
    --d-put: #8f6108;        /* фирменный #9c6a0c, затемнён до контраста */
    --d-put-bg: #fdf1da;
    --d-del: #a51414;
    --d-del-bg: #fbe6e6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --d-fg: #dfe1e5;
        --d-fg-strong: #f4f5f7;
        --d-muted: #9a9ca3;
        --d-bg: #1a1b1e;
        --d-soft: #212327;
        --d-line: #35373c;
        --d-line-soft: #2a2c31;
        --d-link: #7091fc;   /* фирменный светлый синий */
        --d-accent: #7091fc;
        --d-accent-soft: #1f2537;

        --d-get: #5ac37f;
        --d-get-bg: #16291d;
        --d-post: #7091fc;
        --d-post-bg: #1b2340;
        --d-put: #e0a54a;
        --d-put-bg: #2f2410;
        --d-del: #ff9595;    /* фирменный */
        --d-del-bg: #341c1c;
    }
}

/* ---------- базовые поверхности ---------- */

html body {
    color: var(--d-fg);
    background-color: var(--d-bg);
    font-family: "NTSomic", "PT-Root-UI", 'Segoe UI', Arial, sans-serif;
}

    html body h1, html body h2, html body h3,
    html body h4, html body h5, html body h6 {
        color: var(--d-fg-strong);
    }

    html body a {
        color: var(--d-link);
    }

    html body code {
        color: var(--d-fg-strong);
        background-color: var(--d-line-soft);
        border-radius: var(--d-radius);
    }

    html body pre {
        background-color: var(--d-soft);
        border: 1px solid var(--d-line-soft);
        border-radius: var(--d-radius);
    }

        html body pre > code {
            color: var(--d-fg);
        }

    /* Плоские таблицы: подложка со скруглением вместо сетки из рамок вокруг
       каждой ячейки. Внутри только горизонтальные разделители. */
    html body table {
        background-color: var(--d-soft);
        border: 1px solid var(--d-line-soft);
        border-radius: var(--d-radius);
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
    }

    html body table td, html body table th {
        border: 0;
        border-bottom: 1px solid var(--d-line-soft);
        padding: 11px 16px;
        background-color: transparent;
    }

        /* На подложке таблицы инлайн-код сливался бы с фоном, поэтому здесь он
           наоборот светлее окружения - и остаётся различимым. */
        html body table td code, html body table th code {
            background-color: var(--d-bg);
            border: 1px solid var(--d-line-soft);
        }

    html body table th {
        color: var(--d-muted);
        font-size: .78em;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--d-line);
        padding-bottom: 9px;
    }

    html body table tbody tr:last-child td {
        border-bottom: 0;
    }

    html body table tbody tr:hover td {
        background-color: var(--d-line-soft);
    }


    html body blockquote {
        color: var(--d-muted);
        background-color: var(--d-soft);
        border-left-color: var(--d-line);
        border-radius: 0 var(--d-radius) var(--d-radius) 0;
    }

    html body hr {
        background-color: var(--d-line);
    }

    /* блоки с подсветкой и kbd в документе сейчас не встречаются,
       но перекрашиваем и их - иначе на тёмном фоне вылезут светлые пятна */
    html body pre[class*="language-"],
    html body :not(pre) > code[class*="language-"] {
        background: var(--d-soft);
    }

    html body kbd {
        color: var(--d-fg-strong);
        background-color: var(--d-line-soft);
        border-color: var(--d-line);
        border-radius: var(--d-radius);
    }

/* ---------- вертикальный ритм ---------- */
/* Раньше отступы расставлялись вручную тегами <br>, из-за чего интервалы
   между методами скакали. Теперь их задаёт сетка заголовков. */

html body h3 {
    margin-bottom: 24px;
}

html body h4 {
    margin-top: 52px;
    margin-bottom: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--d-line-soft);
}

    html body h4:first-of-type {
        margin-top: 24px;
        padding-top: 0;
        border-top: 0;
    }

html body h5 {
    margin-top: 34px;
    margin-bottom: 12px;
    font-size: 1.05em;
}

    html body h4 + h5 {
        margin-top: 20px;
    }

/* ---------- заголовок раздела с иконкой ---------- */

html body h4.sec, html body h3.sec {
    display: flex;
    align-items: center;
    gap: .5em;
}

    /* значок раздела - фирменным синим: он делит страницу на блоки заметнее,
       чем одна только линия сверху */
    html body h4.sec::before, html body h3.sec::before {
        content: "";
        flex: none;
        width: .95em;
        height: .95em;
        background-color: var(--d-accent);
        -webkit-mask: var(--d-icon) center / contain no-repeat;
        mask: var(--d-icon) center / contain no-repeat;
    }

.i-braces {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 3.5c-2 0-2.6 1-2.6 2.6v2.6c0 1.6-.9 2.6-2.4 2.6 1.5 0 2.4 1 2.4 2.6v2.6c0 1.6.6 2.6 2.6 2.6"/><path d="M15.5 3.5c2 0 2.6 1 2.6 2.6v2.6c0 1.6.9 2.6 2.4 2.6-1.5 0-2.4 1-2.4 2.6v2.6c0 1.6-.6 2.6-2.6 2.6"/></svg>');
}

.i-globe {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.2"/><path d="M2.8 12h18.4"/><path d="M12 2.8c2.4 2.5 3.7 5.8 3.7 9.2s-1.3 6.7-3.7 9.2c-2.4-2.5-3.7-5.8-3.7-9.2S9.6 5.3 12 2.8Z"/></svg>');
}

.i-info {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.2"/><path d="M12 11v5.5"/><path d="M12 7.6h.01"/></svg>');
}

.i-alert {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.9 18a2 2 0 0 0 1.7 3h16.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4.5"/><path d="M12 17.2h.01"/></svg>');
}

.i-key {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="4"/><path d="M10.4 12.6 20 3"/><path d="M17 6l2.5 2.5"/><path d="M14.5 8.5 17 11"/></svg>');
}

.i-tree {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3" width="8" height="5.5" rx="1"/><rect x="13.5" y="15.5" width="8" height="5.5" rx="1"/><rect x="13.5" y="7" width="8" height="5.5" rx="1"/><path d="M6.5 8.5v9.75h7"/><path d="M6.5 9.75h7"/></svg>');
}

.i-users {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 5.2a3.5 3.5 0 0 1 0 6.6"/><path d="M18 14.4a6.5 6.5 0 0 1 3.5 5.6"/></svg>');
}

.i-db {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5.5" rx="7.5" ry="3"/><path d="M4.5 5.5v13c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3v-13"/><path d="M4.5 12c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3"/></svg>');
}

.i-doc {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M19 10V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5"/><path d="M8.5 8h7"/><path d="M8.5 12h4"/><circle cx="17" cy="16.5" r="3.2"/><path d="m19.4 18.9 2.1 2.1"/></svg>');
}

.i-layers {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 2.5 8 12 13l9.5-5L12 3Z"/><path d="m2.5 12 9.5 5 9.5-5"/><path d="m2.5 16 9.5 5 9.5-5"/></svg>');
}

.i-screen {
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="19" height="13" rx="2"/><path d="M8.5 20.5h7"/><path d="M12 16.5v4"/></svg>');
}

/* ---------- строка метода: бейдж + адрес ---------- */

/* Базовая тема подставляет вокруг <code> неразрывные пробелы через ::before
   и ::after - для бейджей это лишнее. */
html body code.verb::before, html body code.verb::after,
html body code.path::before, html body code.path::after,
html body code.hdr::before, html body code.hdr::after {
    content: none;
}

html body code.verb {
    display: inline-block;
    font-size: .75em;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    padding: .45em .6em;
    border-radius: var(--d-radius);
    vertical-align: 1px;
}

html body code.v-get {
    color: var(--d-get);
    background-color: var(--d-get-bg);
}

html body code.v-post {
    color: var(--d-post);
    background-color: var(--d-post-bg);
}

html body code.v-put {
    color: var(--d-put);
    background-color: var(--d-put-bg);
}

html body code.v-delete {
    color: var(--d-del);
    background-color: var(--d-del-bg);
}

html body code.path {
    display: inline-block;
    font-size: .92em;
    color: var(--d-fg-strong);
    background-color: var(--d-soft);
    border: 1px solid var(--d-line-soft);
    border-radius: var(--d-radius);
    padding: .3em .5em;
    line-height: 1.3;
}

html body code.hdr {
    font-size: .82em;
    color: var(--d-muted);
    background-color: transparent;
    border: 1px dashed var(--d-line);
    border-radius: var(--d-radius);
    padding: .25em .45em;
}

/* Описание метода раньше шло в одну строку с адресом после тире, поэтому во
   всех переводах начинается со строчной буквы. Теперь это отдельный абзац -
   поднимаем первую букву стилями, не переписывая словари трёх языков. */
html body p.m-desc {
    color: var(--d-muted);
    margin-top: 10px;
}

    html body p.m-desc::first-letter {
        text-transform: uppercase;
    }

/* ---------- признак обязательности параметра ---------- */

/* Раньше здесь стояли эмодзи ✔️ и ❌ внутри <code>, из-за чего значки шли в
   рамке, различались по начертанию между системами, а красный крест читался
   как ошибка - хотя это всего лишь необязательный параметр. Обязательный
   помечаем спокойной зелёной галочкой, необязательный - нейтральным прочерком. */
/* Колонку со значками центрируем стилями, а не разметкой: в этом парсере
   включено emoji-расширение, и оно съедает разделитель выравнивания
   (`|:-:|` превращается в 😐), разваливая таблицу целиком. */
html body table:has(.req) th:last-child,
html body table:has(.req) td:last-child {
    text-align: center;
}

html body .req {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -.2em;
    -webkit-mask: var(--d-icon) center / contain no-repeat;
    mask: var(--d-icon) center / contain no-repeat;
}

html body .req.yes {
    background-color: var(--d-get);
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12.5 9.5 17.5 19.5 6.5"/></svg>');
}

html body .req.no {
    background-color: var(--d-muted);
    opacity: .55;
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M6 12h12"/></svg>');
}

/* ---------- примечания ---------- */

html body .note, html body .warning {
    display: flex;
    gap: .7em;
    margin: 18px 0;
    padding: 12px 14px;
    border-radius: var(--d-radius);
    background-color: var(--d-soft);
    border-left: 3px solid var(--d-line);
}

    html body .note::before, html body .warning::before {
        content: "";
        flex: none;
        width: 18px;
        height: 18px;
        margin-top: 3px;
        background-color: currentColor;
        -webkit-mask: var(--d-icon) center / contain no-repeat;
        mask: var(--d-icon) center / contain no-repeat;
    }

    html body .note > :last-child, html body .warning > :last-child {
        margin-bottom: 0;
    }

html body .note {
    color: var(--d-post);
    border-left-color: var(--d-post);
    background-color: var(--d-post-bg);
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.2"/><path d="M12 11v5.5"/><path d="M12 7.6h.01"/></svg>');
}

html body .warning {
    color: var(--d-put);
    border-left-color: var(--d-put);
    background-color: var(--d-put-bg);
    --d-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.9 18a2 2 0 0 0 1.7 3h16.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4.5"/><path d="M12 17.2h.01"/></svg>');
}

    /* текст примечания читается основным цветом, акцент остаётся у полосы и значка */
    html body .note p, html body .warning p,
    html body .note li, html body .warning li {
        color: var(--d-fg);
    }

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

/* Базовая тема делает таблицу блоком с word-break: keep-all, поэтому та
   растягивается по содержимому и уезжает в горизонтальную прокрутку даже
   когда до ширины колонки не хватает совсем немного. Возвращаем табличную
   модель: ширина по контейнеру, длинные описания переносятся по словам. */
html body table {
    display: table;
    width: 100%;
    table-layout: auto;
    font-size: .95em;
    word-break: normal;
}

    html body table td, html body table th {
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* названия колонок короткие - разрывать их посреди слова незачем */
    html body table th {
        white-space: nowrap;
    }

    /* коды, статусы и имена полей не разрываем - колонка под них и так узкая */
    html body table td code, html body table th code {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

/* На узком экране переносить уже некуда - там прокрутка полезнее сжатия. */
@media screen and (max-width: 700px) {
    html body table {
        display: block;
        overflow-x: auto;
    }
}
