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

/* Пустой якорь под старые ссылки /docs.php#5. Место занимать не должен, но прыгать
   по нему надо в ту же точку, что и по слугу. У справочника API якоря словами были
   всегда, поэтому такого дубля ему не нужно. */
.hm-doc__alias {
    display: block;
    height: 0;
    scroll-margin-top: 84px;
}

/* Ссылка на приложение перед текстом раздела о привязке устройства: код привязки берётся
   из приложения, то есть скачать его нужно раньше, чем начать читать раздел, а сам текст
   об этом не говорит. Справочнику API такой блок не нужен - там приложение ни при чём. */
.hm-doc__get {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--hm-border);
    border-radius: 10px;
    background: var(--hm-brand-wash);
}

/* 260px - ниже этой ширины текст и кнопка перестают помещаться в строку и встают друг
   под друга. Своего брейкпоинта для этого не нужно. */
.hm-doc__get p {
    flex: 1 1 260px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--hm-ink);
}

.hm-doc__get svg {
    width: 17px;
    height: 17px;
    flex: none;
}

/* Иконка интерфейса стоит прямо в строке текста - ей ни рамка, ни блочность не нужны.
   Общий вид картинки в статье задан в ui.css: он же нужен блогу. */
.hm-doc__body img.hm-doc__ico {
    display: inline-block;
    margin: 0 8px 0 0;
    vertical-align: middle;
    border: 0;
    border-radius: 0;
}