/* ENG-01: структура guide-страниц — оглавление, прогресс чтения, активная секция, места подсказки и маскота.
   UI-04 (R427): вид flow-index GTYRES «Как купить» (скриншоты владельца 04/05) — номера в кругах, пунктирная связь, активный пункт красный, полоса прогресса.
   Цвета — только токены темы (светлая и тёмная); отступ сверху — от фактической высоты шапки (--hg-sticky-h, hub.js), не фиксированный.
   html.hg-guide-js ставит inline-скрипт в <head> (functions.php): место под блок резервируется до первой отрисовки,
   поэтому вставка оглавления из JS не сдвигает текст. Без JS резерва нет и страница остаётся прежней. */
/* Высота закреплённой шапки: --hg-sticky-header-h, иначе --hg-sticky-h темы (hub.js, UI-02-a). Якоря ниже шапки держит scroll-padding-top hub.css. */
:root{--hg-guide-compact-h:52px;--hg-guide-gap:24px;--hg-guide-aside-w:248px;--hg-guide-col-gap:56px;--hg-guide-header-h:var(--hg-sticky-header-h,var(--hg-sticky-h,0px));--hg-guide-dot:36px;--hg-guide-item-pad:10px}
.jp-editorial>section{scroll-margin-top:calc(var(--hg-sticky-header-h,0px) + var(--hg-guide-gap))}
.jp-editorial>section>h2[tabindex="-1"]:focus{outline:none}
.jp-editorial>section>h2[tabindex="-1"]:focus-visible{outline:3px solid var(--hg-red);outline-offset:4px;border-radius:4px}
/* Номер секции над заголовком — тот же, что в кругу оглавления; виден и без JS. Для чтения с экрана номер не озвучивается. */
.hg-guide-page .jp-editorial{counter-reset:hg-section}
.hg-guide-page .jp-editorial>section:has(>h2){counter-increment:hg-section}
.hg-guide-page .jp-editorial>section>h2::before{content:counter(hg-section,decimal-leading-zero) / "";display:block;margin:0 0 10px;color:var(--hg-red);font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.1em;font-variant-numeric:tabular-nums}

.hg-guide [hidden]{display:none!important}
.hg-guide{--hg-guide-progress:0;--hg-guide-rail:color-mix(in srgb,var(--hg-muted) 55%,transparent);min-width:0;color:var(--hg-ink)}
.hg-guide__nav{min-width:0}
.hg-guide__head{display:flex;align-items:center;gap:8px;min-width:0}
.hg-guide__title{margin:0;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.06em;color:var(--hg-muted)}
.hg-guide__count{flex:0 0 auto;margin-left:auto;font-size:12px;line-height:1.5;color:var(--hg-muted);font-variant-numeric:tabular-nums}
.hg-guide__bar{position:relative;height:2px;background:var(--hg-line);overflow:hidden}
.hg-guide__fill{display:block;width:100%;height:100%;background:var(--hg-red);transform:scaleX(var(--hg-guide-progress));transform-origin:0 50%}
.hg-guide__toggle{display:none}

/* Список: круг с номером, текст пункта; пунктир идёт от круга к следующему кругу при любой высоте пункта. */
.hg-guide__list{position:relative;margin:0;padding:0;list-style:none}
.hg-guide__item{position:relative;margin:0}
.hg-guide__item:not(:last-child)::after{content:"";position:absolute;left:calc(var(--hg-guide-dot) / 2 - .5px);top:calc(var(--hg-guide-item-pad) + var(--hg-guide-dot) + 3px);bottom:calc(3px - var(--hg-guide-item-pad));border-left:1px dashed var(--hg-guide-rail);pointer-events:none}
.hg-guide__link{display:flex;align-items:flex-start;gap:13px;min-height:44px;padding:var(--hg-guide-item-pad) 4px var(--hg-guide-item-pad) 0;border-radius:6px;color:var(--hg-muted);font-size:13px;font-weight:600;line-height:1.5;text-decoration:none;overflow-wrap:anywhere;box-sizing:border-box}
.hg-guide__num{flex:none;display:grid;place-items:center;width:var(--hg-guide-dot);height:var(--hg-guide-dot);border:1px solid var(--hg-line);border-radius:50%;background:var(--hg-white);color:var(--hg-muted);font-size:12px;line-height:1;font-variant-numeric:tabular-nums;box-sizing:border-box}
.hg-guide__label{min-width:0;padding-top:calc((var(--hg-guide-dot) - 1.5em) / 2)}
.hg-guide__item[data-state=visited] .hg-guide__num{color:var(--hg-ink);border-color:var(--hg-guide-rail)}
.hg-guide__link[aria-current]{color:var(--hg-ink)}
.hg-guide__link[aria-current] .hg-guide__num{background:var(--hg-red);border-color:var(--hg-red);color:var(--hg-white)}
.hg-guide__link:hover{color:var(--hg-red)}
.hg-guide a:focus-visible,.hg-guide button:focus-visible{outline:2px solid var(--hg-red);outline-offset:2px}
.hg-guide__hint{margin:16px 0 0;font-size:13px;line-height:1.7;color:var(--hg-ink);overflow-wrap:anywhere}
.hg-guide__hint[data-hg-guide-placeholder]{font-family:ui-monospace,monospace;color:var(--hg-muted)}
/* JA-26: действие раздела под подсказкой; вид — текстовая ссылка с красной чертой, как «Начать разговор» источника. Цель касания 44px. */
.hg-guide__action{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;border-bottom:1px solid var(--hg-red);color:var(--hg-ink);font-size:14px;font-weight:600;line-height:1.5;text-decoration:none;overflow-wrap:anywhere}
.hg-guide__action:hover{color:var(--hg-red-hover)}
.hg-guide__mascot:empty{display:none}

@media(max-width:999px){
 /* Компактная полоса: в потоке под заголовком статьи, при чтении закреплена под шапкой внутри статьи (после статьи уходит вместе с ней).
    Колонки и фиксированного слоя нет — ширина чтения не меняется; список раскрывается поверх текста только по нажатию. */
 html.hg-guide-js .jp-editorial:not(.hg-guide-on)>.jp-page-heading::after{content:"";display:block;height:var(--hg-guide-compact-h)}
 .jp-editorial.hg-guide-on>section{scroll-margin-top:calc(var(--hg-guide-compact-h) + 12px)}
 .hg-guide{position:sticky;z-index:30;top:var(--hg-guide-header-h);height:var(--hg-guide-compact-h);box-sizing:border-box;--hg-guide-dot:32px;--hg-guide-item-pad:8px}
 .hg-guide__panel,.hg-guide__nav{position:relative;height:100%}
 .hg-guide__nav{display:flex;flex-direction:column}
 .hg-guide__head{flex:1 1 auto;background:var(--hg-paper);box-shadow:0 0 0 100vmax var(--hg-paper);clip-path:inset(0 -100vmax)}
 .hg-guide__bar{flex:none;box-shadow:0 1px 0 var(--hg-line)}
 .hg-guide__title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .hg-guide__count{display:none}
 .hg-guide__toggle{flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--hg-ink);font:inherit;font-size:14px;font-weight:600;line-height:1.4;text-align:left;cursor:pointer}
 /* Общий стиль кнопок темы (button:hover/:active — тёмная заливка) к полосе не применяется. */
 .hg-guide .hg-guide__toggle:is(:hover,:focus,:active){background:none;color:var(--hg-ink)}
 .hg-guide .hg-guide__toggle:focus-visible{outline-offset:-2px}
 /* Полоса закреплена ровно под шапкой, а scroll-padding-top темы — шапка + 12px: без поправки фокус на кнопке докручивает страницу. */
 .hg-guide__toggle{scroll-margin-top:-12px}
 .hg-guide__badge{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hg-red);color:var(--hg-white);font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
 .hg-guide__current{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .hg-guide__total{flex:none;color:var(--hg-muted);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
 .hg-guide__toggle-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .hg-guide__chevron{flex:none;width:9px;height:9px;margin:-4px 6px 0 auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--hg-ease,ease)}
 .hg-guide[data-hg-guide-open=true] .hg-guide__chevron{margin-top:4px;transform:rotate(225deg)}
 .hg-guide__list{display:none;position:absolute;z-index:1;top:100%;left:0;right:0;max-height:calc(100svh - var(--hg-guide-header-h) - var(--hg-guide-compact-h) - var(--hg-bottom-stack,0px) - 16px);margin-top:1px;padding:6px 14px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--hg-line);border-radius:0 0 12px 12px;background:var(--hg-white);box-shadow:var(--hg-shadow);box-sizing:border-box}
 .hg-guide[data-hg-guide-open=true] .hg-guide__list{display:block}
 .hg-guide__link{font-size:14px}
 /* Подсказка и действие раздела на узком экране — в потоке статьи (реплика маскота после секции). */
 .hg-guide__hint,.hg-guide__action,.hg-guide__mascot{display:none!important}
}
@media(min-width:1000px){
 /* Колонка оглавления резервируется отступом содержимого (обычный блочный поток, без grid: lazy-картинки не меняют раскладку).
    Сам блок — абсолютная колонка от низа заголовка (--hg-guide-top ставит JS) до конца статьи, панель внутри закреплена под шапкой. */
 html.hg-guide-js .hg-store .jp-editorial{position:relative;max-width:calc(960px + var(--hg-guide-aside-w) + var(--hg-guide-col-gap))}
 html.hg-guide-js .hg-store .jp-editorial>:not(.jp-page-heading):not(.hg-guide){margin-left:calc(var(--hg-guide-aside-w) + var(--hg-guide-col-gap))}
 .hg-store .jp-editorial>.hg-guide{position:absolute;top:var(--hg-guide-top,0px);bottom:0;left:0;width:var(--hg-guide-aside-w)}
 .hg-guide__panel{position:sticky;top:calc(var(--hg-guide-header-h) + var(--hg-guide-gap));max-height:calc(100vh - var(--hg-guide-header-h) - 2 * var(--hg-guide-gap));overflow:auto;overscroll-behavior:contain;padding:2px 4px 4px 2px;box-sizing:border-box}
 .hg-guide__head{margin-bottom:12px}
 .hg-guide__bar{margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){
 .hg-guide__chevron{transition:none}
}