/* =========================================================
   DZEN HELP — CUSTOM STYLES
   ========================================================= */


/* =========================================================
   STELLA SANS
   ========================================================= */

@font-face {
    font-family: "Stella Sans Text";
    src: url("https://static.dzeninfra.ru/s3/zen-misc/fonts/stella-sans/text-vf.woff2")
        format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   ОСНОВНОЙ ШРИФТ
   ========================================================= */

body,
body * {
    font-family:
        "Stella Sans Text",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   ССЫЛКИ
   ========================================================= */

a:hover {
    text-decoration: none;
}


/* =========================================================
   ПЛАШКИ
   ========================================================= */

/* Внимание — морковный */

.yfm-note.yfm-accent-alert {
    background-color: rgba(255, 83, 23, 0.12);
}


/* Информация — лавандовый Дзен Про */

.yfm-note.yfm-accent-info {
    background-color: rgba(156, 148, 224, 0.14);
}


/* Важно — жёлтый */

.yfm-note.yfm-accent-warning {
    background-color: rgba(246, 189, 60, 0.16);
}


/* Совет — не меняем */


/* =========================================================
   ЗАГОЛОВКИ
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        "Stella Sans Text",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
    font-weight: 700;
}


h1 {
    font-size: 28px;
    line-height: 40px;
    font-weight: 600;
}

h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

h3 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
}

h4 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

h5,
h6 {
    font-size: 14px;
    line-height: 18px;
    font-weight: 300;
}


/* =========================================================
   ЦВЕТ ИКОНОК В ПЛАШКАХ
   ========================================================= */

/* Внимание — #FF5317 */

.yfm .yfm-note.yfm-accent-alert > p:first-child::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FF5317'/%3E%3Crect width='1' height='5' x='7.5' y='6.5' stroke='%23fff' rx='.5'/%3E%3Ccircle cx='8' cy='4' r='1' fill='%23fff'/%3E%3C/svg%3E");
}


/* Информация — #9C94E0 */

.yfm .yfm-note.yfm-accent-info > p:first-child::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%239C94E0'/%3E%3Crect width='1' height='5' x='7.5' y='6.5' stroke='%23fff' rx='.5'/%3E%3Ccircle cx='8' cy='4' r='1' fill='%23fff'/%3E%3C/svg%3E");
}


/* Важно — #F6BD3C */

.yfm .yfm-note.yfm-accent-warning > p:first-child::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23F6BD3C'/%3E%3Crect width='1' height='5' x='7.5' y='6.5' stroke='%23fff' rx='.5'/%3E%3Ccircle cx='8' cy='4' r='1' fill='%23fff'/%3E%3C/svg%3E");
}


/* =========================================================
   CHEVRON — РАСКРЫВАЮЩИЕСЯ БЛОКИ
   ========================================================= */

/* Закрытый блок — стрелка вправо */

.yfm-cut > .yfm-cut-title::before {
    background-image: none;
    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Chevron_Down.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Chevron_Down.svg")
        center / contain no-repeat;

    transform: translateY(-50%) rotate(-90deg);
}


/* Открытый блок — стрелка вниз */

.yfm-cut.open > .yfm-cut-title::before {
    background-image: none;
    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Chevron_Down.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Chevron_Down.svg")
        center / contain no-repeat;

    transform: translateY(-50%);
}


/* =========================================================
   ИНТЕРАКТИВНЫЕ ИКОНКИ
   НАСТРОЙКИ / LIKE / DISLIKE / РЕЖИМ ЧТЕНИЯ
   ========================================================= */


/* =========================================================
   НАСТРОЙКИ
   ========================================================= */

/* Скрываем штатную SVG */

button[aria-label="Настройки"] .g-button__icon svg {
    display: none;
}


/* Наша gear.svg */

button[aria-label="Настройки"] .g-button__icon-inner::after {
    content: "";

    display: block;

    width: 20px;
    height: 20px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/gear.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/gear.svg")
        center / contain no-repeat;

    opacity: 0.75;

    transition: opacity 0.15s ease;
}


/* Hover */

button[aria-label="Настройки"]:hover
.g-button__icon-inner::after {
    opacity: 1;
}


/* Настройки открыты */

button[aria-label="Настройки"][aria-expanded="true"]
.g-button__icon-inner::after {
    opacity: 1;
}


/* =========================================================
   РЕЖИМ ЧТЕНИЯ
   ========================================================= */

/* Скрываем штатную SVG */

button[aria-label="Режим чтения"] .g-button__icon svg {
    display: none;
}


/* Chevron-Expand */

button[aria-label="Режим чтения"] .g-button__icon-inner::after {
    content: "";

    display: block;

    width: 16px;
    height: 16px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Chevron-Expand.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Chevron-Expand.svg")
        center / contain no-repeat;

    opacity: 0.75;

    transition: opacity 0.15s ease;
}


/* Hover */

button[aria-label="Режим чтения"]:hover
.g-button__icon-inner::after {
    opacity: 1;
}


/* =========================================================
   ВЫХОД ИЗ РЕЖИМА ЧТЕНИЯ
   ========================================================= */

/* Скрываем штатную SVG */

button[aria-label="Выйти из режима чтения (Esc)"]
.g-button__icon svg {
    display: none;
}


/* Chevron-Collapse */

button[aria-label="Выйти из режима чтения (Esc)"]
.g-button__icon-inner::after {
    content: "";

    display: block;

    width: 16px;
    height: 16px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Chevron-Collapse.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Chevron-Collapse.svg")
        center / contain no-repeat;

    opacity: 0.75;

    transition: opacity 0.15s ease;
}


/* Hover */

button[aria-label="Выйти из режима чтения (Esc)"]:hover
.g-button__icon-inner::after {
    opacity: 1;
}


/* =========================================================
   КОМПАКТНЫЕ LIKE / DISLIKE
   ========================================================= */

/* Скрываем штатные SVG */

button[aria-label="Статья полезна"] .g-button__icon svg,
button[aria-label="Статья не полезна"] .g-button__icon svg {
    display: none;
}


/* Like */

button[aria-label="Статья полезна"]
.g-button__icon-inner::after {
    content: "";

    display: block;

    width: 16px;
    height: 16px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Like.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Like.svg")
        center / contain no-repeat;

    opacity: 0.75;

    transition: opacity 0.15s ease;
}


/* Dislike */

button[aria-label="Статья не полезна"]
.g-button__icon-inner::after {
    content: "";

    display: block;

    width: 16px;
    height: 16px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Dislike.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Dislike.svg")
        center / contain no-repeat;

    opacity: 0.75;

    transition: opacity 0.15s ease;
}


/* Hover */

button[aria-label="Статья полезна"]:hover
.g-button__icon-inner::after,
button[aria-label="Статья не полезна"]:hover
.g-button__icon-inner::after {
    opacity: 1;
}


/* =========================================================
   БОЛЬШОЙ БЛОК ОБРАТНОЙ СВЯЗИ
   ========================================================= */

/* Скрываем штатные SVG */

.dc-feedback__controls_view_wide
.g-button__icon svg {
    display: none;
}


/* ---------------------------------------------------------
   «ДА» — LIKE
   --------------------------------------------------------- */

.dc-feedback__controls_view_wide
.dc-feedback__control:nth-child(1)
.g-button__icon-inner::after {
    content: "";

    display: block;

    width: 20px;
    height: 20px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Like.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Like.svg")
        center / contain no-repeat;
}


/* ---------------------------------------------------------
   «НЕТ» — DISLIKE
   --------------------------------------------------------- */

.dc-feedback__controls_view_wide
.dc-feedback__control:nth-child(2)
.g-button__icon-inner::after {
    content: "";

    display: block;

    width: 20px;
    height: 20px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Dislike.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Dislike.svg")
        center / contain no-repeat;
}


/* ---------------------------------------------------------
   АКТИВНЫЙ LIKE
   --------------------------------------------------------- */

.dc-feedback__controls_view_wide
.dc-feedback__control:nth-child(1):has(
    svg path[d^="M7.1"]
)
.g-button__icon-inner::after {
    background-color: currentColor;

    -webkit-mask-image: url("../../ru/_images/Like-Filled.svg");
    mask-image: url("../../ru/_images/Like-Filled.svg");
}


/* ---------------------------------------------------------
   АКТИВНЫЙ DISLIKE
   --------------------------------------------------------- */

.dc-feedback__controls_view_wide
.dc-feedback__control:nth-child(2):has(
    svg path[d^="M8.9"]
)
.g-button__icon-inner::after {
    background-color: currentColor;

    -webkit-mask-image: url("../../ru/_images/Dislike-Filled.svg");
    mask-image: url("../../ru/_images/Dislike-Filled.svg");
}


/* =========================================================
   НАСТРОЙКИ — МОРКОВНЫЙ SWITCH
   ========================================================= */

.dc-settings-control__popup
.g-switch.g-switch_checked
.g-switch__indicator::before {
    background-color: #FF5317;
}


/* =========================================================
   НАСТРОЙКИ — АКТИВНЫЙ РАЗМЕР ТЕКСТА
   ========================================================= */

.dc-settings-control__text-size-button-icon_active {
    color: #FF5317;
}


/* =========================================================
   КЛИКАБЕЛЬНЫЕ ЗАГОЛОВКИ НА ГЛАВНОЙ
   ========================================================= */

.dc-doc-leading-page__links-title
.dc-doc-leading-page__links-link {
    color: #202022;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    text-decoration: none;
}


.dc-doc-leading-page__links-title
.dc-doc-leading-page__links-link:hover {
    color: #8A8A8A;
    text-decoration: none;
}


/* Тёмная тема */

.g-root_theme_dark
.dc-doc-leading-page__links-title
.dc-doc-leading-page__links-link {
    color: #FFFFFF;
}


.g-root_theme_dark
.dc-doc-leading-page__links-title
.dc-doc-leading-page__links-link:hover {
    color: #B5B5B5;
}


/* =========================================================
   СТРЕЛКИ НАВИГАЦИИ
   ========================================================= */

/* Предыдущая — Arrow-Left */

.dc-nav-toc-panel__control_left
.dc-nav-toc-panel__link
> svg {
    display: none;
}


.dc-nav-toc-panel__control_left
.dc-nav-toc-panel__link::before {
    content: "";

    display: block;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Arrow-Left.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Arrow-Left.svg")
        center / contain no-repeat;
}


/* Следующая — Arrow-Left, повёрнутая на 180° */

.dc-nav-toc-panel__control_right
.dc-nav-toc-panel__link
> svg {
    display: none;
}


.dc-nav-toc-panel__control_right
.dc-nav-toc-panel__link::after {
    content: "";

    display: block;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/Arrow-Left.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/Arrow-Left.svg")
        center / contain no-repeat;

    transform: rotate(180deg);
}


/* =========================================================
   ЛОГОТИП — ТЁМНАЯ ТЕМА
   ========================================================= */

.g-root_theme_dark .pc-logo__icon {
    content: url("https://s3.dzeninfra.ru/zen-misc/images/logo_dark.svg");
}


/* =========================================================
   БОКОВОЕ МЕНЮ — ПОДСВЕТКА
   ========================================================= */

/* Hover */

.dc-nav-toc-panel__link:hover {
    background-color: #F2F2F2;
}


/* ---------------------------------------------------------
   ВЫБРАННЫЙ РАЗВОРАЧИВАЕМЫЙ ПУНКТ
   --------------------------------------------------------- */

/* Светлая тема */

.dc-toc-item__wrapper.dc-toc-item__text_active {
    --g-color-base-selection: #F2F2F2;
}


/* Тёмная тема */

.g-root_theme_dark
.dc-toc-item__wrapper.dc-toc-item__text_active {
    --g-color-base-selection: rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------------------
   ВЫБРАННЫЙ ОБЫЧНЫЙ ПУНКТ
   --------------------------------------------------------- */

/* Светлая тема */

.dc-toc__list-item
> .dc-toc-item__link[aria-current="true"] {
    --g-color-base-selection: #F2F2F2;
}


/* Тёмная тема */

.g-root_theme_dark
.dc-toc__list-item
> .dc-toc-item__link[aria-current="true"] {
    --g-color-base-selection: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   БОКОВОЕ МЕНЮ — CHEVRON
   ========================================================= */

/* ---------------------------------------------------------
   Разворачиваемые пункты верхнего уровня
   --------------------------------------------------------- */

/* Убираем штатную иконку */

.dc-toc-item__arrow .dc-toc-item__icon {
    display: none;
}


/* Закрытый — Chevron Right */

.dc-toc-item__arrow .g-button__icon-inner::after {
    content: "";

    display: block;

    width: 16px;
    height: 16px;

    background-color: currentColor;

    -webkit-mask: url("../../ru/_images/chevron_right.svg")
        center / contain no-repeat;
    mask: url("../../ru/_images/chevron_right.svg")
        center / contain no-repeat;
}


/* Открытый — Chevron Down */

.dc-toc__list-item_opened
> .dc-toc-item__wrapper
> .dc-toc-item__arrow
.g-button__icon-inner::after {
    -webkit-mask-image: url("../../ru/_images/Chevron-Down.svg");
    mask-image: url("../../ru/_images/Chevron-Down.svg");
}


/* ---------------------------------------------------------
   Вложенные разворачиваемые пункты
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Общий стиль Chevron
   --------------------------------------------------------- */

.dc-toc-item__text-block[aria-expanded]
> .dc-toc-item__icon {
    display: block;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    background-color: currentColor;

    transform: none;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


/* Убираем штатную SVG-графику */

.dc-toc-item__text-block[aria-expanded]
> .dc-toc-item__icon path {
    display: none;
}


/* ---------------------------------------------------------
   Закрытый — Chevron Right
   --------------------------------------------------------- */

.dc-toc-item__text-block[aria-expanded="false"]
> .dc-toc-item__icon {
    -webkit-mask-image: url("../../ru/_images/chevron_right.svg");
    mask-image: url("../../ru/_images/chevron_right.svg");
}


/* ---------------------------------------------------------
   Открытый — Chevron Down
   --------------------------------------------------------- */

.dc-toc-item__text-block[aria-expanded="true"]
> .dc-toc-item__icon {
    -webkit-mask-image: url("../../ru/_images/Chevron-Down.svg");
    mask-image: url("../../ru/_images/Chevron-Down.svg");
}

/* =========================================================
   ТАБЫ — ФИНАЛЬНЫЕ СОСТОЯНИЯ
   ========================================================= */

/* Обычный */

.dc-doc-page .yfm .yfm-tab {
    color: #202022;
}


/* Hover — любой таб */

.dc-doc-page .yfm .yfm-tab:hover {
    color: #7A280A ;
}


/* Активный — чёрный + морковное подчёркивание */

.dc-doc-page .yfm .yfm-tab.active {
    color: #202022;
    border-bottom-color: #FF5317 ;
}


/* Активный + hover — морковный текст */

.dc-doc-page .yfm .yfm-tab.active:hover {
    color: #7A280A ;
}


/* =========================================================
   ТЁМНАЯ ТЕМА
   ========================================================= */

/* Обычный и выбранный — белый */

.g-root_theme_dark .dc-doc-page .yfm .yfm-tab,
.g-root_theme_dark .dc-doc-page .yfm .yfm-tab.active {
    color: #FFFFFF;
}


/* Hover — тёмный морковный */

.g-root_theme_dark .dc-doc-page .yfm .yfm-tab:hover,
.g-root_theme_dark .dc-doc-page .yfm .yfm-tab.active:hover {
    color: #FF7A4D ;
}


/* Подчёркивание выбранного — морковное */

.g-root_theme_dark .dc-doc-page .yfm .yfm-tab.active {
    border-bottom-color: #FF5317 ;
}

/* =========================================================
   ЦИТАТЫ — МОРКОВНАЯ ПОЛОСКА
   ========================================================= */

.dc-doc-page .yfm blockquote {
    border-left-color: #FF5317;
}
/* =========================================================
   НИЖНЯЯ НАВИГАЦИЯ — БЕЗ ПОДСВЕТКИ
   ========================================================= */

.dc-nav-toc-panel__control,
.dc-nav-toc-panel__control:hover,
.dc-nav-toc-panel__control:focus,
.dc-nav-toc-panel__control:active,
.dc-nav-toc-panel__link,
.dc-nav-toc-panel__link:hover,
.dc-nav-toc-panel__link:focus,
.dc-nav-toc-panel__link:active {
    background-color: transparent !important;
}