/* Справочник API (api.php): только то, чего нет у руководства.
   Раскладка, оглавление, якоря и типографика статьи общие с docs.php и лежат в ui.css. */

/* ============ сброс кода ============ */
/* main.css от Bootstrap даёт голому <code> розовый текст #c7254e на светло-сером #f9f2f4
   и nowrap. Цвета захардкожены, поэтому в тёмной теме это светлая плашка поверх страницы,
   а не текст. Своих <code> на странице много - сбрасываем разом.

   :where() держит специфичность на (0,1,0): хватает, чтобы перебить голый селектор code
   (0,0,1), и мало, чтобы зацепить .hm-api__url и .hm-api__pn ниже - те выигрывают
   порядком, а не весом. Тот же приём, что у сброса отступов в ui.css. */
.hm-doc__body :where(code) {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    white-space: normal;
}

/* ============ адрес метода ============ */
.hm-api__ep {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 4px;
    padding: 11px 14px;
    border: 1px solid var(--hm-border);
    border-radius: 9px;
    background: var(--hm-surface-2);
}

/* Заливка фирменным - значит, текст берём из --hm-on-brand: в тёмной теме синий светлее
   фона, и белая надпись на нём не читается. */
.hm-api__verb {
    flex: none;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--hm-brand);
    color: var(--hm-on-brand);
    font-family: var(--hm-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}

/* Адрес длинный и на узком экране не влезает. Перенос по любому символу, а не скролл:
   боковая прокрутка ради одной строки - плохой обмен. */
.hm-api__url {
    font-family: var(--hm-mono);
    font-size: 13.5px;
    color: var(--hm-ink);
    word-break: break-all;
}

/* ============ подпись блока ============ */
/* Селектор с .hm-doc__body не для красоты: подпись - это <p>, а в ui.css стоит
   `.hm-doc__body p { margin: 0 0 14px }` со специфичностью (0,1,1). Голый .hm-api__lbl
   даёт (0,1,0) и молча проигрывает - отступы просто не применятся. Пара классов даёт
   (0,2,0) и выигрывает честно, без !important. Так же ниже у .hm-api__warn и .hm-api__wh. */
.hm-doc__body .hm-api__lbl {
    margin: 24px 0 10px;
    font-family: var(--hm-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hm-ink-3);
}

/* ============ параметры ============ */
/* Две колонки на всю таблицу, а не на строку: имена выстраиваются друг под друга,
   и список параметров читается сверху вниз одним движением.

   max-content по имени: колонка ровно по самому длинному (date_last_active), остальное
   отдано описанию. Отступы у dl/dd задаём явно - их ставит main.css от Bootstrap. */
.hm-api__params {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 18px;
    margin: 0 0 14px;
}

.hm-api__params dt {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-weight: 400;
    line-height: 1.7;
}

.hm-api__params dd {
    margin: 0;
    line-height: 1.7;
    color: var(--hm-ink-2);
}

.hm-api__pn {
    font-family: var(--hm-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--hm-ink);
}

.hm-api__req {
    flex: none;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--hm-border-strong);
    font-size: 10.5px;
    line-height: 1.5;
    text-transform: lowercase;
    color: var(--hm-ink-3);
    white-space: nowrap;
}

/* ============ блок кода ============ */
/* position: relative - система координат для кнопки копирования, её ставит docpage.js. */
.hm-code {
    position: relative;
    margin: 0 0 14px;
    border: 1px solid var(--hm-border);
    border-radius: 9px;
    background: var(--hm-surface-2);
}

.hm-code pre {
    margin: 0;
    padding: 14px 16px;
    /* Место под кнопку: без него она ложится на первую строку кода. */
    padding-right: 96px;
    border: 0;
    border-radius: 9px;
    background: none;
}

/* pre-wrap, а не pre: адрес GET-запроса с токеном и параметрами длиннее колонки, и при
   pre он уезжал бы под горизонтальную прокрутку - то есть главное в примере пришлось бы
   доматывать. pre-wrap переносит только то, что не влезло, отступы PHP при этом целы.

   overflow-wrap: anywhere нужен отдельно: без него строка без пробелов (а адрес - именно
   такая) не переносится вообще и всё равно вылезает за край.

   Прокрутки здесь поэтому нет никакой, и overflow не трогаем: он включил бы и вертикальную
   тоже - по спецификации, если одна ось не visible, вторая из visible становится auto. */
.hm-code code {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--hm-mono);
    font-size: 13px;
    line-height: 1.65;
    color: var(--hm-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Кнопку ставит скрипт: без clipboard в разметке она была бы кнопкой, которая ничего
   не делает. Держится за край, чтобы не уезжать вместе с прокруткой кода. */
.hm-code__copy {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 9px;
    border: 1px solid var(--hm-border-strong);
    border-radius: 6px;
    background: var(--hm-surface);
    font-family: var(--hm-font);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--hm-ink-2);
    cursor: pointer;
    opacity: 0;
}

.hm-code:hover .hm-code__copy,
.hm-code__copy:focus-visible {
    opacity: 1;
}

.hm-code__copy:hover {
    border-color: var(--hm-brand);
    color: var(--hm-brand);
}

.hm-code__copy:focus-visible {
    outline: 2px solid var(--hm-brand);
    outline-offset: 2px;
}

.hm-code__copy.is-copied {
    opacity: 1;
    border-color: var(--hm-signal);
    color: var(--hm-signal);
}

/* Наведения нет - показываем всегда: на телефоне кнопку иначе не достать. */
@media (hover: none) {
    .hm-code__copy { opacity: 1; }
}

/* ============ предупреждение ============ */
/* Плашка про «только за сегодня»: единственное место, где справочник может подвести
   молча - метод отработает, но вернёт не то, чего ждали. */
.hm-doc__body .hm-api__warn {
    margin: 0 0 14px;
    padding: 11px 14px;
    border-left: 3px solid var(--hm-brand);
    border-radius: 0 8px 8px 0;
    background: var(--hm-brand-wash);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--hm-ink);
}

/* ============ отсылка к вебхуку ============ */
.hm-doc__body .hm-api__wh {
    margin: 16px 0 0;
    font-size: 14.5px;
    color: var(--hm-ink-2);
}

@media (max-width: 620px) {
    /* Имя параметра над описанием: на узком экране двум колонкам не разойтись -
       описание сжимается в лапшу по два слова в строке. */
    .hm-api__params {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .hm-api__params dd {
        margin-bottom: 10px;
    }
    /* Кнопка копирования на телефоне видна всегда (hover: none), поэтому место под неё
       резервируем сверху. Справа - наоборот, возвращаем: 96px на узком экране заметно
       сжимают код, а кнопка туда больше не лезет. */
    .hm-code pre {
        padding-top: 40px;
        padding-right: 16px;
    }
    .hm-code__copy {
        top: 6px;
        right: 6px;
    }
}