/* ============================================================================
   Оформление гайдов (/help/*). Универсальный набор блоков: страницы гайдов
   собираются ТОЛЬКО из него, своего CSS у конкретного гайда быть не должно.
   Новый гайд = шаблон app/help/<slug>.ejs из этих классов + запись в реестре
   handlers/help.js (см. docs/HELP_GUIDES.md).

   Язык страницы — плоский «страничный», как /about и панель фильтров карточек
   (card-filters.css): Rubik, заливка #F7F5FF, inset-обводка 1px, радиус 16,
   акцент #624CFF. Стеклянные .gm-токены сюда НЕ тащим: они для модалок и меню,
   а гайд — обычная страница в потоке.

   Тема: гайд открывается и из приложения (там тему выбирает пользователь и
   пишет её в localStorage -> body#dark|#light), и по прямой ссылке (там знаем
   только системную). Поэтому тёмные токены объявлены дважды: по body#dark и по
   prefers-color-scheme для всех, кто не выбрал светлую явно.
   ============================================================================ */

body.hg {
    --hg-bg: #FCFBFF;
    --hg-surface: #F7F5FF;
    --hg-raised: #FFFFFF;
    --hg-stroke: #CFD8DF;
    --hg-hairline: rgba(127, 141, 158, 0.22);
    --hg-text: #1A1A1A;
    --hg-soft: #87919E;
    --hg-accent: #624CFF;
    --hg-accent-soft: rgba(98, 76, 255, 0.09);
    --hg-ok: #1C8F45;
    --hg-ok-soft: rgba(28, 143, 69, 0.1);
    --hg-warn: #B25E00;
    --hg-warn-soft: rgba(255, 159, 10, 0.13);
    --hg-danger: #C2374A;
    --hg-danger-soft: rgba(194, 55, 74, 0.1);
    --hg-shadow: 0 18px 44px rgba(30, 20, 60, 0.08);

    margin: 0;
    background: var(--hg-bg);
    color: var(--hg-text);
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
    body.hg:not(#light) {
        --hg-bg: #1E1F21;
        --hg-surface: rgba(255, 255, 255, 0.035);
        --hg-raised: rgba(255, 255, 255, 0.055);
        --hg-stroke: rgba(255, 255, 255, 0.08);
        --hg-hairline: rgba(255, 255, 255, 0.08);
        --hg-text: #F2F2F4;
        --hg-soft: rgba(235, 235, 245, 0.55);
        --hg-accent: #CDBFFF;
        --hg-accent-soft: rgba(160, 130, 255, 0.14);
        --hg-ok: #4ED77B;
        --hg-ok-soft: rgba(78, 215, 123, 0.12);
        --hg-warn: #FFB340;
        --hg-warn-soft: rgba(255, 159, 10, 0.14);
        --hg-danger: #FF7A8A;
        --hg-danger-soft: rgba(255, 122, 138, 0.12);
        --hg-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
    }
}

body.hg#dark {
    --hg-bg: #1E1F21;
    --hg-surface: rgba(255, 255, 255, 0.035);
    --hg-raised: rgba(255, 255, 255, 0.055);
    --hg-stroke: rgba(255, 255, 255, 0.08);
    --hg-hairline: rgba(255, 255, 255, 0.08);
    --hg-text: #F2F2F4;
    --hg-soft: rgba(235, 235, 245, 0.55);
    --hg-accent: #CDBFFF;
    --hg-accent-soft: rgba(160, 130, 255, 0.14);
    --hg-ok: #4ED77B;
    --hg-ok-soft: rgba(78, 215, 123, 0.12);
    --hg-warn: #FFB340;
    --hg-warn-soft: rgba(255, 159, 10, 0.14);
    --hg-danger: #FF7A8A;
    --hg-danger-soft: rgba(255, 122, 138, 0.12);
    --hg-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

body.hg * { box-sizing: border-box; }
body.hg a { color: inherit; }
body.hg :focus-visible {
    outline: 2px solid var(--hg-accent);
    outline-offset: 2px;
    border-radius: 8px;
}

.hg-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 26px 20px 96px;
}

/* --- Шапка -------------------------------------------------------------- */
.hg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 34px;
}
.hg-top__brand { display: inline-flex; align-items: center; text-decoration: none; }
.hg-top__brand img { height: 22px; width: auto; display: block; }
.hg-top__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--hg-soft);
    text-decoration: none;
    transition: color .15s;
}
.hg-top__back:hover { color: var(--hg-text); }

/* --- Заголовок гайда ---------------------------------------------------- */
.hg-hero { margin-bottom: 26px; }
.hg-hero__eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--hg-accent-soft);
    color: var(--hg-accent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.hg-hero h1 {
    margin: 0 0 10px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.6px;
}
.hg-hero__lead {
    margin: 0;
    max-width: 58ch;
    font-size: 15px;
    color: var(--hg-soft);
}

/* --- Оглавление --------------------------------------------------------- */
.hg-toc {
    display: flex;
    gap: 6px;
    margin: 0 -20px 30px;
    padding: 0 20px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.hg-toc::-webkit-scrollbar { display: none; }
.hg-toc__item {
    flex: none;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    color: var(--hg-soft);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background-color .15s, box-shadow .15s;
}
.hg-toc__item:hover { color: var(--hg-text); }
.hg-toc__item--active {
    background: var(--hg-accent-soft);
    box-shadow: inset 0 0 0 1px transparent;
    color: var(--hg-accent);
}

/* --- Секция ------------------------------------------------------------- */
.hg-sec { margin-bottom: 44px; scroll-margin-top: 20px; }
.hg-sec__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.3px;
}
.hg-sec__lead {
    margin: 0 0 18px;
    max-width: 60ch;
    color: var(--hg-soft);
}
.hg-sec__lead:last-child { margin-bottom: 0; }

/* --- Базовая поверхность ------------------------------------------------ */
.hg-panel {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
}
.hg-panel + .hg-panel { margin-top: 12px; }
/* ...но только когда панели идут стопкой. В сетке расстояние задаёт gap, а этот
   margin сдвигал бы вторую колонку вниз: блоки вставали вровень по НИЖНЕМУ краю
   и разъезжались по верхнему. */
.hg-two > .hg-panel + .hg-panel { margin-top: 0; }

/* --- Сетка карточек ----------------------------------------------------- */
.hg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 12px;
}
.hg-card {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
}
.hg-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 11px;
    background: var(--hg-accent-soft);
    color: var(--hg-accent);
}
.hg-card h3 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 500;
}
.hg-card p {
    margin: 0;
    font-size: 13.5px;
    color: var(--hg-soft);
}

/* --- Две колонки (роли, сравнение) -------------------------------------- */
.hg-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 620px) {
    .hg-two { grid-template-columns: 1fr; }
}
.hg-role__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hg-hairline);
}
.hg-role__head svg { color: var(--hg-accent); flex: none; }
.hg-role__head b { font-size: 15px; font-weight: 600; }

/* --- Список «заголовок + подпись» --------------------------------------- */
.hg-list { display: flex; flex-direction: column; gap: 14px; }
.hg-list__item { display: flex; gap: 11px; align-items: flex-start; }
.hg-list__mark {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--hg-accent-soft);
    color: var(--hg-accent);
}
.hg-list__mark--ok { background: var(--hg-ok-soft); color: var(--hg-ok); }
.hg-list__mark--warn { background: var(--hg-warn-soft); color: var(--hg-warn); }
.hg-list__body { min-width: 0; }
.hg-list__ttl { display: block; font-size: 14px; font-weight: 500; }
.hg-list__hint { display: block; margin-top: 2px; font-size: 13px; color: var(--hg-soft); }

/* --- Шаги --------------------------------------------------------------- */
.hg-steps {
    counter-reset: hg-step;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}
.hg-steps__item {
    position: relative;
    padding: 0 0 20px 40px;
    counter-increment: hg-step;
}
.hg-steps__item::before {
    content: counter(hg-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hg-accent-soft);
    color: var(--hg-accent);
    font-size: 12.5px;
    font-weight: 500;
}
/* Линия связывает шаги в последовательность, а не в набор абзацев */
.hg-steps__item::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 32px;
    bottom: 6px;
    width: 1px;
    background: var(--hg-hairline);
}
.hg-steps__item:last-child { padding-bottom: 0; }
.hg-steps__item:last-child::after { display: none; }
.hg-steps__ttl { display: block; padding-top: 3px; font-size: 14.5px; font-weight: 500; }
.hg-steps__txt { display: block; margin-top: 3px; font-size: 13.5px; color: var(--hg-soft); }
/* --- Ключ/значение параметра в тексте ----------------------------------- */
/* Раньше правило жило только внутри .hg-steps__txt. Гайдам про поиск и API
   такая плашка нужна в обычном абзаце, в списке и в таблице — поэтому класс
   общий, а не привязанный к одному блоку. */
.hg-key {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--hg-raised);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    color: var(--hg-text);
    font-size: 12.5px;
    white-space: nowrap;
}

/* --- Таблица ------------------------------------------------------------ */
/* Узкие экраны: таблица едет вбок внутри своей обёртки, страница не
   разъезжается по горизонтали. */
.hg-table {
    margin-top: 12px;
    overflow-x: auto;
    border-radius: 16px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    -webkit-overflow-scrolling: touch;
}
.hg-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.hg-table th,
.hg-table td {
    padding: 11px 16px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.hg-table td:last-child,
.hg-table th:last-child { white-space: normal; }
.hg-table thead th {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--hg-soft);
}
.hg-table tbody tr { border-top: 1px solid var(--hg-hairline); }
.hg-table tbody td:first-child { font-weight: 500; }

/* --- Вложенная схема (кейс → бокс → пак → треки) ------------------------- */
/* Устройство бокса — это вложенность, и текстом она читается плохо: «в кейсе
   48 боксов, в боксе 30 паков, в паке 6 треков» приходится держать в голове.
   Блок рисует ту же вложенность как вложенность. */
.hg-tree { margin-top: 12px; }
.hg-tree__level {
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
}
.hg-tree__level .hg-tree__level {
    margin-top: 12px;
    background: var(--hg-raised);
}
.hg-tree__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hg-tree__label { font-size: 14.5px; font-weight: 500; }
.hg-tree__meta { font-size: 13px; color: var(--hg-soft); }
.hg-tree__tracks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hg-tree__track { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hg-tree__count {
    flex: none;
    min-width: 30px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--hg-soft);
    font-variant-numeric: tabular-nums;
}
.hg-tree__or { font-size: 12px; color: var(--hg-soft); }
/* Подпись трека уезжает на свою строку: чипы слотов и пояснение к ним
   не должны бороться за одну строку на телефоне. */
.hg-tree__cap {
    flex-basis: 100%;
    padding-left: 38px;
    font-size: 12.5px;
    color: var(--hg-soft);
}
.hg-slot {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--hg-bg);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    font-size: 12.5px;
    white-space: nowrap;
}
.hg-slot--hi {
    background: var(--hg-accent-soft);
    box-shadow: inset 0 0 0 1px transparent;
    color: var(--hg-accent);
    font-weight: 500;
}

/* --- Выноска ------------------------------------------------------------ */
.hg-note {
    display: flex;
    gap: 11px;
    padding: 14px 16px;
    margin-top: 12px;
    border-radius: 14px;
    background: var(--hg-accent-soft);
    font-size: 13.5px;
}
.hg-note svg { flex: none; margin-top: 2px; color: var(--hg-accent); }
.hg-note p { margin: 0; }
.hg-note b { font-weight: 500; }
.hg-note--warn { background: var(--hg-warn-soft); }
.hg-note--warn svg { color: var(--hg-warn); }
.hg-note--ok { background: var(--hg-ok-soft); }
.hg-note--ok svg { color: var(--hg-ok); }

/* --- Переключатель вариантов (платформы, устройства) -------------------- */
.hg-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    overflow-x: auto;
    scrollbar-width: none;
}
.hg-tabs::-webkit-scrollbar { display: none; }
.hg-tabs__btn {
    flex: 1;
    min-width: max-content;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--hg-soft);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.hg-tabs__btn:hover { color: var(--hg-text); }
.hg-tabs__btn--active {
    background: var(--hg-raised);
    box-shadow: 0 1px 3px rgba(20, 15, 45, .08);
    color: var(--hg-text);
    font-weight: 500;
}
body.hg#dark .hg-tabs__btn--active { box-shadow: inset 0 0 0 1px var(--hg-stroke); }
.hg-tabpanel[hidden] { display: none; }

/* --- Вопрос-ответ ------------------------------------------------------- */
.hg-faq { border-radius: 16px; background: var(--hg-surface); box-shadow: inset 0 0 0 1px var(--hg-stroke); }
.hg-faq__item { border-bottom: 1px solid var(--hg-hairline); }
.hg-faq__item:last-child { border-bottom: 0; }
.hg-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.hg-faq__item summary::-webkit-details-marker { display: none; }
.hg-faq__item summary::after {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-right: 1.6px solid var(--hg-soft);
    border-bottom: 1.6px solid var(--hg-soft);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.hg-faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.hg-faq__body {
    padding: 0 18px 16px;
    font-size: 13.5px;
    color: var(--hg-soft);
}
.hg-faq__body p { margin: 0 0 8px; }
.hg-faq__body p:last-child { margin-bottom: 0; }

/* --- Кнопки ------------------------------------------------------------- */
.hg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    color: var(--hg-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s, background-color .15s, transform .15s cubic-bezier(.16, 1, .3, 1);
}
.hg-btn:active { transform: scale(.985); }
.hg-btn--primary {
    background: var(--hg-accent);
    box-shadow: none;
    color: #fff;
}
body.hg#dark .hg-btn--primary { color: #221B3D; }
@media (prefers-color-scheme: dark) {
    body.hg:not(#light) .hg-btn--primary { color: #221B3D; }
}
.hg-btn[disabled] { opacity: .45; cursor: default; }
.hg-btn[hidden] { display: none; }

/* --- Живое состояние (текущее разрешение, установка и т.п.) -------------- */
.hg-state {
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--hg-raised);
    box-shadow: inset 0 0 0 1px var(--hg-stroke), var(--hg-shadow);
    margin-bottom: 30px;
}
.hg-state__head { display: flex; align-items: center; gap: 10px; }
.hg-state__dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hg-soft);
    box-shadow: 0 0 0 4px var(--hg-hairline);
}
.hg-state--ok .hg-state__dot { background: var(--hg-ok); box-shadow: 0 0 0 4px var(--hg-ok-soft); }
.hg-state--warn .hg-state__dot { background: var(--hg-warn); box-shadow: 0 0 0 4px var(--hg-warn-soft); }
.hg-state--off .hg-state__dot { background: var(--hg-danger); box-shadow: 0 0 0 4px var(--hg-danger-soft); }
.hg-state__ttl { font-size: 15px; font-weight: 500; }
.hg-state__hint {
    margin: 8px 0 0;
    padding-left: 19px;
    font-size: 13.5px;
    color: var(--hg-soft);
}
.hg-state__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding-left: 19px; }
.hg-state__actions:empty { display: none; }

/* --- Финальный блок ----------------------------------------------------- */
.hg-cta {
    padding: 24px;
    border-radius: 18px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    text-align: center;
}
.hg-cta h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.hg-cta p { margin: 0 auto 18px; max-width: 46ch; color: var(--hg-soft); }
.hg-cta .hg-actions { justify-content: center; }

/* --- Поиск по гайдам ---------------------------------------------------- */
/* Живёт только на списке /help. Фильтрация — на клиенте (/js/help.js):
   гайдов почти два десятка, и человеку с конкретным вопросом быстрее набрать
   «цены», чем читать заголовки разделов. */
.hg-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
}
.hg-search:focus-within {
    background: var(--hg-raised);
    box-shadow: inset 0 0 0 1px var(--hg-accent);
}
.hg-search:focus-within .hg-search__ic { color: var(--hg-accent); }
body.hg .hg-search__input:focus-visible,
body.hg .hg-search__input:focus { outline: none; box-shadow: none; }
.hg-search__ic { flex: none; color: var(--hg-soft); transition: color .15s; }
.hg-search__input {
    flex: 1;
    min-width: 0;
    padding: 13px 0;
    border: 0;
    background: none;
    color: var(--hg-text);
    font: inherit;
    font-size: 14.5px;
    outline: none;
}
.hg-search__input::placeholder { color: var(--hg-soft); }
/* Крестик очистки у type="search" в вебките нарисован тёмным по тёмному */
.hg-search__input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); cursor: pointer; }
.hg-search__empty {
    margin: -8px 0 26px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    color: var(--hg-soft);
    font-size: 13.5px;
}
.hg-search__empty[hidden] { display: none; }

/* --- Подвал: соседние гайды --------------------------------------------- */
.hg-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hg-hairline); }
.hg-foot__ttl { margin: 0 0 12px; font-size: 13px; color: var(--hg-soft); }
.hg-foot__links { display: flex; flex-direction: column; gap: 8px; }
.hg-foot__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 14px;
    background: var(--hg-surface);
    box-shadow: inset 0 0 0 1px var(--hg-stroke);
    text-decoration: none;
    transition: background-color .15s;
}
.hg-foot__link[hidden], .hg-foot__links[hidden] { display: none; }
.hg-foot__link svg { flex: none; color: var(--hg-accent); }
.hg-foot__link b { display: block; font-size: 14px; font-weight: 500; }
.hg-foot__link span { display: block; margin-top: 1px; font-size: 13px; color: var(--hg-soft); }

@media (max-width: 480px) {
    .hg-wrap { padding: 20px 16px 72px; }
    .hg-hero h1 { font-size: 26px; }
    .hg-toc { margin: 0 -16px 26px; padding: 0 16px 2px; }
}