/* Справочный центр Cali-Graf (/help, /updates) — только раскладка. Цвета, шрифты, скругления, тени — токены кита
   (kit.css); элементы — классы кита (u2-brand, u2-search, u2-card, u2-notice, u2-btn, u2-menu, u2-link, u2-prose). */

.hc-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--u-surface-cont); }
/* Под шапкой: колонка раздела (у статьи и раздела) и .hc-scroll — страница с подвалом. На телефоне и планшете
   прокручивается окно, как обычно; на компьютере — экран-приложение (ниже, от 1001px). */
.hc-shell { flex: 1; display: flex; flex-direction: column; }
.hc-scroll { flex: 1; display: flex; flex-direction: column; }
.hc-scroll:focus { outline: none; }                 /* фокус ставит help.js — чтобы листали пробел и PageDown */
.hc-skip { position: absolute; left: -9999px; }
.hc-skip:focus { left: 16px; top: 8px; z-index: 20; padding: 8px 14px; border-radius: var(--u-r-m); background: var(--u-surface); box-shadow: var(--u-shadow-pop); }

/* ---------- шапка ---------- */
.hc-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--u-surface); box-shadow: var(--u-line); }
.hc-top__brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; text-decoration: none; flex: none; }
.hc-top__brand .u2-brand__mark { width: 32px; height: 32px; }
.hc-top__help { margin-left: 4px; padding-left: 12px; box-shadow: inset 1px 0 0 var(--u-outline-variant); font: var(--u-t-title-l); color: var(--u-on-surface-variant); }
.hc-top__search { position: relative; flex: 1 1 auto; max-width: 560px; margin: 0 auto; }
.hc-top__app { flex: none; margin-left: auto; }
/* от 1280px поиск в шапке — по ширине текста статьи и ровно по центру (Армен 05.10): те же колонки, что у .hc-shell,
   поиск в средней колонке с отступами листа (40px) */
@media (min-width: 1280px) {
  .hc-top:has(> .hc-top__search) { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 840px) minmax(220px, 1fr); column-gap: 28px; }
  .hc-top:has(> .hc-top__search) .hc-top__brand { justify-self: start; }
  .hc-top:has(> .hc-top__search) .hc-top__search { max-width: none; margin: 0 40px; }
  .hc-top:has(> .hc-top__search) .hc-top__app { justify-self: end; margin-left: 0; }
}

/* ---------- поиск ---------- */
.hc-search { display: flex; align-items: center; gap: 12px; padding: 0 18px; box-sizing: border-box; }
.hc-search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; font: var(--u-t-body-l); color: var(--u-on-surface); outline: none; }
.hc-search input::-webkit-search-cancel-button { cursor: pointer; }
.hc-search__icon { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--u-on-surface-variant); stroke-width: 2; stroke-linecap: round; }
.hc-search--lg { height: 56px; }
.hc-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15; max-height: 60vh; overflow: auto; }
.hc-suggest__item { flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; }
.hc-suggest__item b { font: var(--u-t-body-l); color: var(--u-on-surface); }
.hc-suggest__item span { font: var(--u-t-body-s); color: var(--u-on-surface-variant); }
.hc-suggest__item.is-active { background: var(--u-hover); }
.hc-suggest__all { font: var(--u-t-label-l); color: var(--u-primary); }

/* ---------- страница ---------- */
.hc-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 24px 56px; box-sizing: border-box; }
.hc-h1 { margin: 8px 0 10px; font: var(--u-t-headline-m); color: var(--u-on-surface); }
.hc-h2 { margin: 36px 0 14px; font: var(--u-t-title-l); color: var(--u-on-surface); }
.hc-h3 { margin: 24px 0 6px; font: var(--u-t-title-m); color: var(--u-on-surface); }
.hc-lead { margin: 0 0 24px; font: var(--u-t-body-l); color: var(--u-on-surface-variant); }
.hc-kicker { margin: 8px 0 0; font: var(--u-t-label-l); color: var(--u-on-surface-variant); }
.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font: var(--u-t-body-s); color: var(--u-on-surface-variant); }

/* главная справки */
.hc-hero { padding: 24px 0 8px; text-align: center; }
.hc-hero__title { margin: 0 0 20px; font: var(--u-t-headline-l); color: var(--u-on-surface); }
.hc-hero__search { position: relative; max-width: 640px; margin: 0 auto; }
.hc-popular__list, .hc-cats, .hc-news__list, .hc-list, .hc-feed, .hc-cat__list { list-style: none; margin: 0; padding: 0; }
.hc-popular__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hc-popular__item { display: grid; align-content: start; gap: 4px; height: 100%; box-sizing: border-box; padding: 16px 18px; color: inherit; text-decoration: none; }
.hc-popular__item b { font: var(--u-t-title-m); color: var(--u-on-surface); }
.hc-popular__item span { font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.hc-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hc-cat { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.hc-cats > .hc-cat { margin: 0; }      /* отступы между карточками ставит сетка, не правило кита «карточка + карточка» */
.hc-cat__head { display: flex; gap: 14px; color: inherit; text-decoration: none; border-radius: var(--u-r-m); }
.hc-cat__head b { display: block; margin: 2px 0 2px; font: var(--u-t-title-m); color: var(--u-on-surface); }
.hc-cat__head span span { font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.hc-cat__icon { flex: none; width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: var(--u-r-m); background: var(--u-primary-container);
  fill: none; stroke: var(--u-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-cat__icon--lg { width: 56px; height: 56px; padding: 12px; }
.hc-cat__list { display: grid; gap: 6px; padding-left: 54px; font: var(--u-t-body-m); }
.hc-cat__all { margin-left: 54px; font: var(--u-t-label-l); }
.hc-cat__soon { margin: 0 0 0 54px; font: var(--u-t-body-s); color: var(--u-on-surface-variant); }
.hc-news__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hc-news__list { display: grid; gap: 10px; }
.hc-news__list li { display: flex; flex-wrap: wrap; gap: 4px 16px; font: var(--u-t-body-m); }
.hc-news__list time, .hc-feed time { min-width: 128px; font: var(--u-t-label-m); color: var(--u-on-surface-variant); }

/* раздел и статья: колонка раздела слева, лист с текстом справа */
.hc-shell > .hc-side { margin: 32px 24px 0; }           /* телефон и планшет: колонка — над листом */
.hc-side + .hc-scroll > .hc-main { padding-top: 16px; }
.hc-side__cat { padding: 8px 12px; font: var(--u-t-title-m); color: var(--u-on-surface); list-style: none; cursor: default; }
.hc-side__cat::-webkit-details-marker { display: none; }
.hc-side__box ul { list-style: none; display: grid; gap: 2px; margin: 4px 0 0; padding: 0; }
.hc-side__box a { display: block; padding: 8px 12px; border-radius: var(--u-r-m); font: var(--u-t-body-m); color: var(--u-on-surface-variant); text-decoration: none; }
.hc-side__box a:hover { background: var(--u-hover); color: var(--u-on-surface); }
.hc-side__box a[aria-current="page"] { background: var(--u-secondary-container); color: var(--u-on-secondary-container); font-weight: 600; }
.hc-side__all { display: inline-block; margin: 12px 12px 0; font: var(--u-t-label-l); }
/* Компьютер — экран-приложение (Армен 06.10: «меню не должны тянуться — тянется только серединка со статьёй»).
   Окно не прокручивается и не тянется (резинка на маке); шапка и колонка раздела стоят. Прокручивается и тянется
   только .hc-scroll: у статьи и раздела — лист с правым полем до края окна (полоса прокрутки — у края), у остальных
   страниц — всё под шапкой. Колонки листа — общие с шапкой и колонкой раздела (subgrid), поэтому лист не сдвигается.
   1001–1279: колонка 260 и лист вместе по центру; от 1280 — лист ровно по центру, колонка в поле слева (Армен 05.10). */
@media (min-width: 1001px) {
  html { overscroll-behavior: none; }
  .hc-body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .hc-top { position: relative; }
  .hc-shell { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(24px, 1fr) 260px 28px minmax(0, 844px) minmax(24px, 1fr); }
  .hc-scroll { grid-column: 1 / -1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  .hc-shell > .hc-side { grid-column: 2; margin: 0; min-height: 0; overflow-y: auto; overscroll-behavior: none;
    padding: 32px 0 24px; box-sizing: border-box; }
  .hc-side + .hc-scroll { grid-column: 3 / -1; display: grid; grid-template-columns: subgrid; align-content: start; }
  .hc-side + .hc-scroll > .hc-main, .hc-side + .hc-scroll > .hc-foot { grid-column: 2; }
  .hc-side + .hc-scroll > .hc-main { max-width: none; margin: 0; padding: 32px 0 56px; }
  .hc-scroll .hc-prose h2 { scroll-margin-top: 24px; }   /* шапка — вне прокрутки, заголовок встаёт почти к верху */
}
@media (min-width: 1280px) {
  .hc-shell { grid-template-columns: 24px minmax(220px, 1fr) 28px minmax(0, 840px) 28px minmax(220px, 1fr) 24px; }
  .hc-shell > .hc-side { width: min(260px, 100%); justify-self: end; }
}
.hc-content, .hc-narrow { padding: 32px 40px 28px; border-radius: var(--u-r-xl); background: var(--u-surface); box-shadow: var(--u-shadow); }
.hc-narrow { max-width: 840px; margin: 0 auto; }                 /* как лист статьи — поиск в шапке по краям текста */
/* от 1280px одиночный лист (поиск, «Что нового», выпуск, 404) — той же ширины, что лист статьи в сетке .hc-shell:
   ширина страницы минус два поля по 220px и два зазора по 28px (100cqw — ширина .hc-main без отступов) */
@media (min-width: 1280px) {
  .hc-main:has(> .hc-narrow) { max-width: none; container-type: inline-size; }
  .hc-main > .hc-narrow { max-width: min(840px, 100cqw - 496px); }
}
.hc-cathead { display: flex; gap: 16px; align-items: flex-start; margin: 8px 0 8px; }
.hc-cathead .hc-h1 { margin-top: 2px; }
.hc-list__item { display: grid; gap: 4px; padding: 14px 4px; box-shadow: inset 0 -1px 0 var(--u-outline-variant); color: inherit; text-decoration: none; }
.hc-list__item b { font: var(--u-t-title-m); color: var(--u-primary); }
.hc-list__item span { font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.hc-list__item:hover b { text-decoration: underline; }
.hc-list__item .hc-list__cat { font: var(--u-t-label-m); }

/* оглавление и текст статьи */
.hc-toc { margin: 0 0 24px; padding: 14px 18px; border-radius: var(--u-r-l); box-shadow: var(--u-line); }
.hc-toc__t { margin: 0 0 6px; font: var(--u-t-label-l); color: var(--u-on-surface); }
.hc-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font: var(--u-t-body-m); }
.hc-prose { max-width: 720px; }
.hc-prose h2 { scroll-margin-top: 96px; }          /* телефон: под шапкой, которая липнет сверху */
.hc-prose ul, .hc-prose ol:not(.hc-steps) { padding-left: 22px; }
.hc-prose li + li { margin-top: 4px; }
.hc-ui { font-weight: 600; color: var(--u-on-surface); }
.hc-kbd { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: var(--u-r-xs); background: var(--u-surface-low);
  box-shadow: inset 0 0 0 1px var(--u-outline-variant), inset 0 -2px 0 var(--u-outline-variant); font: var(--u-t-label-m); text-align: center; color: var(--u-on-surface); }

/* шаги */
.hc-steps { counter-reset: hc-step; list-style: none; display: grid; gap: 20px; margin: 16px 0 24px; padding: 0; }
.hc-step { counter-increment: hc-step; position: relative; padding-left: 44px; }
.hc-step::before { content: counter(hc-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--u-r-full);
  background: var(--u-primary); color: var(--u-on-primary); font: var(--u-t-label-l); }
.hc-step__t { margin: 2px 0 4px; font: var(--u-t-title-m); color: var(--u-on-surface); }
.hc-step > p { margin: 0 0 8px; }
.hc-step .hc-shot { margin: 12px 0 4px; }

/* плашки, скриншоты, таблицы */
.hc-note { margin: 18px 0; padding: 14px 18px; border-radius: var(--u-r-l); }
.hc-note__t { margin: 0 0 4px; font-weight: 600; }
.hc-note p { margin: 0 0 6px; }
.hc-note > :last-child { margin-bottom: 0; }
.hc-shot { margin: 20px 0; }
.hc-shot img { display: block; width: 100%; height: auto; border-radius: var(--u-r-l); box-shadow: var(--u-line), var(--u-shadow); background: var(--u-img-placeholder); }
.hc-shot figcaption { margin-top: 8px; font: var(--u-t-body-s); color: var(--u-on-surface-variant); }
.hc-table { overflow-x: auto; margin: 16px 0 24px; border-radius: var(--u-r-l); box-shadow: var(--u-line); }
.hc-table table { width: 100%; border-collapse: collapse; font: var(--u-t-body-m); }
.hc-table th, .hc-table td { padding: 12px 14px; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 var(--u-outline-variant); }
.hc-table th { background: var(--u-surface-low); font-weight: 600; color: var(--u-on-surface); }
.hc-table tr:last-child td { box-shadow: none; }

/* ---------- кит статей: блоки из help/templates/_macros.html (витрина — /help/kit) ---------- */
.hc-path { white-space: normal; }
.hc-path__sep { margin: 0 6px; color: var(--u-on-surface-variant); }

.hc-check { margin: 16px 0 24px; padding: 14px 18px; border-radius: var(--u-r-l); background: var(--u-surface-low); }
.hc-check__t { margin: 0 0 8px; font: var(--u-t-title-m); color: var(--u-on-surface); }
.hc-check ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.hc-check li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.hc-check svg { flex: none; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: var(--u-success); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.hc-shot__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hc-shot--phone img { width: auto; max-width: 300px; max-height: 620px; margin: 0 auto; }
.hc-shot--phone figcaption { text-align: center; }
.hc-shot__frame { position: relative; }
.hc-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hc-marks circle { fill: var(--u-primary); stroke: var(--u-on-primary); stroke-width: 3; }
.hc-marks text { fill: var(--u-on-primary); font: 600 20px/1 var(--u-font); text-anchor: middle; }
.hc-legend { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: hc-legend; display: grid; gap: 6px; font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.hc-legend li { counter-increment: hc-legend; display: flex; gap: 10px; align-items: baseline; margin: 0; }
.hc-legend li::before { content: counter(hc-legend); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--u-r-full);
  background: var(--u-primary); color: var(--u-on-primary); font: var(--u-t-label-m); }

.hc-quote { color: var(--u-on-surface); }
.hc-quote::before { content: "“"; } .hc-quote::after { content: "”"; }

.hc-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.hc-choice { padding: 14px 16px; border-radius: var(--u-r-l); box-shadow: var(--u-line); }
.hc-choice__t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.hc-choice p:not(.hc-choice__t) { margin: 0; font: var(--u-t-body-m); }

.hc-faq { margin: 0; box-shadow: inset 0 -1px 0 var(--u-outline-variant); }
.hc-faq summary { padding: 14px 4px; font: var(--u-t-title-m); color: var(--u-on-surface); cursor: pointer; }
.hc-faq__a { padding: 0 4px 14px; }
.hc-faq__a > :last-child { margin-bottom: 0; }

.hc-terms { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 10px 20px; margin: 16px 0 24px; }
.hc-terms dt { font-weight: 600; color: var(--u-on-surface); }
.hc-terms dd { margin: 0; }

.hc-try { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 28px 0; padding: 18px 20px;
  border-radius: var(--u-r-l); background: var(--u-primary-container); color: var(--u-on-secondary-container); }
.hc-try p { margin: 0; font: var(--u-t-title-m); }

/* витрина кита /help/kit: пример и его код рядом */
.hc-kit__item { margin: 0 0 32px; padding-top: 8px; }
.hc-kit__item > h3 { margin: 0 0 4px; }
.hc-kit__when { margin: 0 0 12px; color: var(--u-on-surface-variant); }
.hc-kit__demo { padding: 4px 20px; border-radius: var(--u-r-l); box-shadow: var(--u-line); }
.hc-kit__code { overflow-x: auto; margin: 8px 0 0; padding: 12px 14px; border-radius: var(--u-r-m); background: var(--u-surface-low);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--u-on-surface); white-space: pre; }

/* сверка справки с программой (/kit/help/status) */
.hc-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 20px; }
.hc-stat__i { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--u-r-l); background: var(--u-surface-low); }
.hc-stat__i b { font: var(--u-t-headline-s); color: var(--u-on-surface); }
.hc-stat__i span { font: var(--u-t-body-s); color: var(--u-on-surface-variant); }
.hc-stat__i.is-warn { background: var(--u-warning-container); }
.hc-stat__i.is-bad { background: var(--u-error-container); }
.hc-sync { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hc-sync__i { padding: 14px 16px; border-radius: var(--u-r-l); box-shadow: var(--u-line); }
.hc-sync__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hc-sync__meta, .hc-sync__covers { font: var(--u-t-body-s); color: var(--u-on-surface-variant); }
.hc-sync__covers { margin: 8px 0 0; }
.hc-sync__issues { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font: var(--u-t-body-m); }
.hc-diff { overflow-x: auto; margin: 6px 0 0; padding: 8px 10px; border-radius: var(--u-r-m); background: var(--u-surface-low);
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.hc-diff .is-old { color: var(--u-error); text-decoration: line-through; }
.hc-diff .is-new { color: var(--u-success); }

/* связанные статьи, «помогло ли», дата */
.hc-related { margin-top: 36px; }
.hc-related .hc-h2 { margin-top: 0; }
.hc-related ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font: var(--u-t-body-l); }
.hc-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; padding: 14px 18px; border-radius: var(--u-r-l); background: var(--u-surface-low); }
.hc-fb__q, .hc-fb__thanks { margin: 0; font: var(--u-t-body-l); color: var(--u-on-surface); }
.hc-fb__btns { display: flex; gap: 8px; }
.hc-updated { margin: 16px 0 0; font: var(--u-t-body-s); color: var(--u-on-surface-variant); }

/* лента обновлений */
.hc-feed { display: grid; gap: 4px; }
.hc-feed__item { padding: 18px 0; box-shadow: inset 0 -1px 0 var(--u-outline-variant); }
.hc-feed__item.is-major { margin: 8px 0; padding: 20px 22px; box-shadow: var(--u-line); }   /* рамка карточки, а не линия ленты */
.hc-feed__t { margin: 4px 0 6px; font: var(--u-t-title-l); color: var(--u-on-surface); }
.hc-feed__item p { margin: 0 0 8px; color: var(--u-on-surface-variant); }
.hc-feed__item ul { margin: 0 0 4px; padding-left: 20px; }
.hc-404 { text-align: center; }
.hc-404 form { position: relative; max-width: 520px; margin: 0 auto 20px; }

/* подвал */
.hc-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; padding: 8px 24px 32px; font: var(--u-t-body-s); color: var(--u-on-surface-variant); }

/* ---------- планшет и телефон ---------- */
@media (max-width: 1000px) {
  .hc-popular__list, .hc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-side { padding: 4px 8px; border-radius: var(--u-r-l); background: var(--u-surface); box-shadow: var(--u-shadow); }
  .hc-side__cat { cursor: pointer; list-style: revert; }
}
@media (max-width: 640px) {
  .hc-top { flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px; }
  .hc-top__help { padding-left: 10px; font: var(--u-t-title-m); }
  .hc-top__brand .u2-brand__mark { width: 28px; height: 28px; }
  .hc-top__app { min-height: 36px; padding: 0 14px; }          /* логотип и кнопка — в одну строку, поиск под ними */
  .hc-top__search { order: 3; flex-basis: 100%; max-width: none; }
  .hc-main { padding: 16px 10px 40px; }
  .hc-shell > .hc-side { margin: 16px 10px 0; }
  .hc-side + .hc-scroll > .hc-main { padding-top: 10px; }
  .hc-hero { padding-top: 8px; }
  .hc-hero__title { font: var(--u-t-headline-s); }
  .hc-popular__list, .hc-cats { grid-template-columns: minmax(0, 1fr); }
  .hc-content, .hc-narrow { padding: 22px 18px 20px; }
  .hc-step { padding-left: 38px; }
  .hc-shot__row, .hc-terms { grid-template-columns: minmax(0, 1fr); }
  .hc-terms dd { margin-bottom: 6px; }
}