/* UI-04 (R427): блоки секций гидов по SCHEMA C2 (JA-58) — пример, таблицы, проверки, условие Hub Garage, секция условий магазина;
   карточка схемы K2 (R430, R445) — понятная подача с маскотом, техническая схема под раскрытием.
   Подключает inc/guide-progress.php на гидах после guide-figures.css. Цвета — токены hub.css (светлая и тёмная тема). Анимации — только transform/opacity. */
.hg-store .jp-editorial section .hg-guide-example,.hg-store .jp-editorial section .hg-guide-table,.hg-store .jp-editorial section .hg-guide-checks,.hg-store .jp-editorial section .hg-guide-shop{max-width:760px;margin:24px 0 0;box-sizing:border-box}

/* Пример: шаги расчёта или чтения с единицами. */
.hg-store .jp-editorial section .hg-guide-example{padding:16px 18px;border:1px solid var(--hg-line);border-radius:12px;background:var(--hg-white)}
.hg-store .jp-editorial section .hg-guide-example__title{margin:0 0 8px;font-size:13px;font-weight:700;line-height:1.5;color:var(--hg-muted)}
.hg-store .jp-editorial section .hg-guide-example__lines{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.hg-store .jp-editorial section .hg-guide-example__lines li{margin:0;font-size:15px;line-height:1.7;color:var(--hg-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Таблицы: подпись сверху, заголовок строки — первая ячейка; переносы внутри ячеек, без горизонтальной прокрутки страницы. */
.hg-store .jp-editorial section .hg-guide-table table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6;color:var(--hg-ink)}
.hg-store .jp-editorial section .hg-guide-table caption{caption-side:top;margin:0 0 8px;font-size:14px;font-weight:700;line-height:1.5;text-align:left;color:var(--hg-ink)}
.hg-store .jp-editorial section .hg-guide-table th,.hg-store .jp-editorial section .hg-guide-table td{padding:10px 12px;border-bottom:1px solid var(--hg-line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.hg-store .jp-editorial section .hg-guide-table thead th{padding-top:6px;border-bottom:2px solid var(--hg-ink);font-size:12px;font-weight:600;color:var(--hg-muted)}
.hg-store .jp-editorial section .hg-guide-table tbody th{font-weight:700}
.hg-store .jp-editorial section .hg-guide-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--hg-soft) 60%,transparent)}
.hg-store .jp-editorial section .hg-guide-table td,.hg-store .jp-editorial section .hg-guide-table tbody th{font-variant-numeric:tabular-nums}
.hg-store .jp-editorial section .hg-guide-table__note,.hg-store .jp-editorial section .hg-guide-table__source{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--hg-muted)}
.hg-store .jp-editorial section .hg-guide-table__source{font-size:12px}
.hg-guide-table__source a,.hg-k2__credit a,.hg-k2__source a{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.hg-guide-table__source a:hover,.hg-k2__credit a:hover,.hg-k2__source a:hover{color:var(--hg-red)}

/* Проверки: квадрат с галочкой у каждого пункта, порядок пунктов сохранён. */
.hg-store .jp-editorial section .hg-guide-checks{padding:18px 20px;border-radius:12px;background:var(--hg-soft)}
.hg-store .jp-editorial section .hg-guide-checks__title{margin:0 0 6px;font-size:14px;font-weight:700;line-height:1.5;color:var(--hg-ink)}
.hg-store .jp-editorial section .hg-guide-checks__list{margin:0;padding:0;list-style:none}
.hg-store .jp-editorial section .hg-guide-checks__list li{position:relative;margin:8px 0 0;padding-left:30px;font-size:15px;line-height:1.7;color:var(--hg-ink);overflow-wrap:anywhere}
.hg-guide-checks__list li::before{content:"";position:absolute;left:0;top:calc(.85em - 9px);width:18px;height:18px;border:1.5px solid var(--hg-red);border-radius:5px;box-sizing:border-box}
.hg-guide-checks__list li::after{content:"";position:absolute;left:6px;top:calc(.85em - 6px);width:5px;height:9px;border:solid var(--hg-red);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Условие Hub Garage внутри справки: белая карточка с тёмной меткой — отличается от реплики маскота (мягкий фон, красная черта). */
.hg-store .jp-editorial section .hg-guide-shop{padding:16px 18px;border:1px solid var(--hg-line);border-left:3px solid var(--hg-ink);border-radius:4px 12px 12px 4px;background:var(--hg-white)}
.hg-store .jp-editorial section .hg-guide-shop__brand{display:inline-block;margin:0 0 8px;padding:2px 9px;border-radius:999px;background:var(--hg-ink);color:var(--hg-white);font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.06em}
.hg-store .jp-editorial section .hg-guide-shop__title{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.5;color:var(--hg-ink)}
.hg-store .jp-editorial section .hg-guide-shop__text{margin:0;font-size:15px;line-height:1.8;color:var(--hg-ink)}

/* Секция условий магазина (kind=shop): рамка и метка Hub Garage над номером; условие внутри — без второй рамки. */
.hg-store .jp-editorial section.hg-guide-section--shop{margin-top:56px;padding:26px 28px 28px;border:1px solid var(--hg-line);border-radius:16px;background:var(--hg-white)}
.hg-store .jp-editorial section.hg-guide-section--shop::before{content:"Hub Garage" / "";display:inline-block;margin:0 0 12px;padding:2px 10px;border-radius:999px;background:var(--hg-ink);color:var(--hg-white);font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.06em}
.hg-store .jp-editorial section.hg-guide-section--shop .hg-guide-checks{background:var(--hg-paper)}
.hg-store .jp-editorial section.hg-guide-section--shop .hg-guide-shop{padding:16px 0 0;border:0;border-top:1px solid var(--hg-line);border-radius:0;background:none}
.hg-store .jp-editorial section.hg-guide-section--shop .hg-guide-shop__brand{display:none}

/* Карточка схемы K2: слева маскот и реплика, справа выбор параметра, рисунок и итог; под ней пометка и источник, ниже — раскрытие. */
.hg-store .jp-editorial section figure.hg-k2{max-width:960px;margin:28px 0 0;padding:20px;border:1px solid var(--hg-line);border-radius:16px;background:var(--hg-white);color:var(--hg-ink);box-sizing:border-box}
.hg-k2__lesson{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:24px;align-items:start}
.hg-k2__guide{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:start}
.hg-k2__portrait{min-width:0;align-self:end}
.hg-k2__portrait img{display:block;width:110px;height:auto;max-height:310px;object-fit:contain;object-position:center bottom}
.hg-k2__portrait [data-hg-k2-theme=night],html[data-theme=dark] .hg-k2__portrait [data-hg-k2-theme=day]{display:none}
html[data-theme=dark] .hg-k2__portrait [data-hg-k2-theme=night]{display:block}
.hg-k2__speech{min-width:0;padding:14px 16px;border-radius:12px;background:var(--hg-sun)}
/* Фигура карточки в окне — фигура панели оглавления скрыта без сдвига (guide-k2.js ставит атрибут). */
html[data-hg-k2-mascot] .hg-guide__mascot{visibility:hidden}
.hg-store .jp-editorial section .hg-k2__who{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--hg-muted)}
.hg-store .jp-editorial section .hg-k2__headline{margin:0 0 8px;font-size:19px;font-weight:700;line-height:1.4;color:var(--hg-ink);text-wrap:balance}
.hg-store .jp-editorial section .hg-k2__voice{margin:0;font-size:15px;line-height:1.75;color:var(--hg-ink);overflow-wrap:anywhere}
html:lang(ja) .hg-k2__voice,html:lang(ja) .hg-k2__headline{text-wrap:pretty;word-break:auto-phrase}
.hg-k2__stage{min-width:0}
/* Переключатели — только с JS (html.hg-guide-js ставит <head> гида); без JS карточка в исходном состоянии. */
.hg-k2__controls{display:none;flex-wrap:wrap;gap:6px}
html.hg-guide-js .hg-k2__controls{display:flex}
html.hg-guide-js .hg-k2__controls[hidden]{display:none}
.hg-k2__steps{margin:0 0 12px}
.hg-k2__offset{margin:10px 0 0}
.hg-k2__step,.hg-k2__et{min-width:44px;min-height:44px;margin:0;padding:8px 12px;border:1px solid var(--hg-line);border-radius:8px;background:var(--hg-white);color:var(--hg-ink);font:inherit;font-size:16px;font-weight:700;line-height:1.2;cursor:pointer}
.hg-k2__step[aria-pressed=true],.hg-k2__et[aria-pressed=true]{border-color:var(--hg-red);background:var(--hg-red);color:var(--hg-white)}
/* Общий стиль кнопок темы (button:hover/:active — тёмная заливка) не применяется: наведение — тёмная рамка, выбранный — красный. */
.hg-k2 .hg-k2__step:is(:hover,:focus,:active),.hg-k2 .hg-k2__et:is(:hover,:focus,:active){border-color:var(--hg-ink);background:var(--hg-white);color:var(--hg-ink)}
.hg-k2 .hg-k2__step[aria-pressed=true]:is(:hover,:focus,:active),.hg-k2 .hg-k2__et[aria-pressed=true]:is(:hover,:focus,:active){border-color:var(--hg-red);background:var(--hg-red);color:var(--hg-white)}
.hg-k2__step:focus-visible,.hg-k2__et:focus-visible,.hg-k2__details summary:focus-visible{outline:2px solid var(--hg-red);outline-offset:2px}
.hg-k2__art{overflow:hidden;border-radius:10px}
/* wheel-offset: фото машины K2 на белом фоне — рисунок всегда светлая панель (значения = светлые токены темы, SVG K2 не меняется),
   иначе в тёмной теме фото — белый прямоугольник, через край которого проходит подпись «+10 mm». */
.hg-k2[data-hg-k2="wheel-offset"] .hg-k2__art{background:#fff}
.hg-k2[data-hg-k2="wheel-offset"] .hg-k2__art svg.r555-diagram{background:#fff}
.hg-k2[data-hg-k2="wheel-offset"] .hg-k2__art svg.r430-diagram{--r430-bg:#fff;--r430-ink:#181a1d;--r430-muted:#60656a;--r430-soft:#f0f1f2;--r430-accent:#c92720;--r430-line:#dedfe1;color:#181a1d}
.hg-k2__art svg,.hg-k2__tech-art svg{display:block;width:100%;height:auto}
.hg-k2 .beginner-art .focus{transition:opacity .25s ease}
.hg-k2 [data-k2=wheel-left],.hg-k2 [data-k2=wheel-right]{transition:transform .35s var(--hg-ease,ease)}
.hg-store .jp-editorial section .hg-k2__short{margin:12px 0 0;font-size:16px;font-weight:700;line-height:1.55;color:var(--hg-ink)}
html:not(.hg-guide-js) .hg-store .jp-editorial section .hg-k2__short--interactive{display:none}
.hg-store .jp-editorial section .hg-k2__caption{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--hg-line)}
.hg-store .jp-editorial section .hg-k2__caption p{margin:0;font-size:13px;line-height:1.6;color:var(--hg-muted)}
.hg-store .jp-editorial section .hg-k2__caption p+p{margin-top:4px}
.hg-store .jp-editorial section .hg-k2__caption .hg-k2__credit{font-size:12px}
.hg-k2__details{margin:12px 0 0;border-top:1px solid var(--hg-line)}
.hg-k2__details summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;color:var(--hg-ink);font-size:14px;font-weight:700;line-height:1.4;cursor:pointer}
.hg-k2__tech{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;align-items:start;padding:8px 0 4px}
.hg-store .jp-editorial section .hg-k2__legend{display:grid;gap:6px;margin:0;font-size:13px;line-height:1.6;color:var(--hg-ink)}
.hg-k2__legend>div{display:grid;grid-template-columns:minmax(44px,auto) minmax(0,1fr);gap:10px}
.hg-k2__legend dt{font-weight:700;font-variant-numeric:tabular-nums}
.hg-k2__legend dd{margin:0;overflow-wrap:anywhere}
.hg-store .jp-editorial section .hg-k2__tech-caption,.hg-store .jp-editorial section .hg-k2__tech-scope,.hg-store .jp-editorial section .hg-k2__source{margin:12px 0 0;font-size:13px;line-height:1.7;color:var(--hg-ink)}
.hg-store .jp-editorial section .hg-k2__tech-scope,.hg-store .jp-editorial section .hg-k2__source{margin-top:6px;font-size:12px;color:var(--hg-muted)}

@media(max-width:760px){
 .hg-k2__lesson{grid-template-columns:minmax(0,1fr);gap:16px}
 /* Как у K2 на 320: фигура и заголовок рядом, реплика во всю ширину — предмет не уходит ниже первого экрана. */
 .hg-k2__guide{grid-template-columns:82px minmax(0,1fr);gap:8px 10px}
 .hg-k2__portrait{grid-column:1;grid-row:1 / span 2;align-self:center;max-height:210px}
 .hg-k2__portrait img{width:82px;max-width:100%;max-height:210px;transform:none}
 .hg-k2__speech{display:contents}
 .hg-store .jp-editorial section .hg-k2__who{grid-column:2;grid-row:1;align-self:end;margin:0}
 .hg-store .jp-editorial section .hg-k2__headline{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:17px}
 .hg-store .jp-editorial section .hg-k2__voice{grid-column:1 / -1;margin:4px 0 0;padding:12px;border-radius:10px;background:var(--hg-sun)}
 .hg-k2__steps{display:none}
 html.hg-guide-js .hg-k2__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .hg-k2__step{padding:8px 4px}
 .hg-k2__tech{grid-template-columns:minmax(0,1fr)}
 .hg-k2__tech-art{max-width:360px}
}
@media(max-width:680px){
 .hg-store .jp-editorial section figure.hg-k2{padding:14px;border-radius:12px}
 .hg-store .jp-editorial section.hg-guide-section--shop{padding:20px 16px 22px;border-radius:12px}
 .hg-store .jp-editorial section .hg-guide-table th,.hg-store .jp-editorial section .hg-guide-table td{padding:8px}
 .hg-store .jp-editorial section .hg-guide-table table{font-size:13px}
 .hg-store .jp-editorial section .hg-guide-example__lines li,.hg-store .jp-editorial section .hg-guide-checks__list li,.hg-store .jp-editorial section .hg-guide-shop__text{font-size:14px}
 .hg-store .jp-editorial section .hg-guide-checks{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){
 .hg-k2 .beginner-art .focus,.hg-k2 [data-k2=wheel-left],.hg-k2 [data-k2=wheel-right]{transition:none}
}
/* Технические схемы наследуют выбранную палитру сайта, включая ручной дневной режим. */
html[data-theme] .hg-k2 svg.r430-diagram{--r430-accent:var(--hg-red,#c92720)}
/* У старой подсветки размера акцент задан inline; единый токен заменяет только этот цвет. */
html[data-theme] .hg-k2 svg.r430-diagram .focus{--r430-accent:var(--hg-red,#c92720)!important}