/* Справка «?» и «Первые шаги» (BETA-D-229): стили модулей help-panel.js и
   first-steps.js. Только токены тем. Золото: заливка акцента — лишь у главной
   кнопки (.pf-btn--primary, инверсный текст); «сейчас здесь» и «выбрано» —
   подложка surface-selected + черта акцента (docs/standards/ui.md). */

/* ---- панель ---- */
.pf-hp {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--pf-color-surface-raised);
  border-left: 1px solid var(--pf-color-border-medium);
  color: var(--pf-color-text-primary);
  font-family: var(--pf-typography-body-family);
  font-size: var(--pf-typography-body-small-size);
  box-shadow: -12px 0 32px var(--pf-overlay-scrim);
}
/* Широкий режим — для всех разделов (слово владельца 2026-09-20): в компактной
   панели не разглядеть снимки экрана. Переключатель — в шапке, выбор помнится. */
.pf-hp--big { width: min(1180px, 100vw); }
/* Стол остаётся виден и работает: страница уступает панели место справа.
   Широкая панель ложится поверх стола: уступить 1180px обычному экрану нечем. */
body.pf-help-open #pf-root { margin-right: min(400px, 100vw); }

.pf-hp__head {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  padding: var(--pf-space-sm) var(--pf-space-md);
  border-bottom: 1px solid var(--pf-color-border-subtle);
}
.pf-hp__head-title { flex: 1; margin: 0; font-size: var(--pf-typography-body-size); font-weight: 600; }
.pf-hp__icon {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: var(--pf-color-text-secondary);
  font-size: 15px;
  cursor: pointer;
}
.pf-hp__icon:hover, .pf-hp__icon:focus-visible { border-color: var(--pf-color-border-medium); color: var(--pf-color-text-primary); }
/* переключатель «Шире / Компактно» */
.pf-hp__mode {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: var(--pf-color-text-secondary);
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  cursor: pointer;
}
.pf-hp__mode:hover, .pf-hp__mode:focus-visible { border-color: var(--pf-color-border-strong, var(--pf-color-border-medium)); color: var(--pf-color-text-primary); }
/* на узком экране широкой панели взяться неоткуда — переключатель не нужен */
@media (max-width: 760px) { .pf-hp__mode { display: none; } }
.pf-hp__body { flex: 1; overflow-y: auto; padding: var(--pf-space-md); display: grid; gap: var(--pf-space-md); align-content: start; }

.pf-hp__search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-canvas);
  color: var(--pf-color-text-primary);
  font: inherit;
}
.pf-hp__search:focus-visible { outline: 2px solid var(--pf-color-border-focus); outline-offset: 1px; }
#pf-help-results { display: grid; gap: var(--pf-space-md); }

.pf-hp__sec-title {
  margin: 0 0 var(--pf-space-xs);
  font-size: var(--pf-typography-caption-size);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-color-text-muted);
}
.pf-hp__list { display: grid; gap: 2px; }
.pf-hp__muted { margin: 0; color: var(--pf-color-text-muted); }
.pf-hp__small { font-size: var(--pf-typography-caption-size); }

.pf-hp__item, .pf-hp__art, .pf-hp__link, .pf-hp__chap {
  display: grid;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: var(--pf-color-text-primary);
  font: inherit;
  cursor: pointer;
}
.pf-hp__item:hover, .pf-hp__art:hover, .pf-hp__link:hover, .pf-hp__chap:hover,
.pf-hp__item:focus-visible, .pf-hp__art:focus-visible, .pf-hp__link:focus-visible, .pf-hp__chap:focus-visible {
  border-color: var(--pf-color-border-medium);
}
.pf-hp__item { grid-template-columns: 92px 1fr; gap: 10px; align-items: center; padding: 6px; }
.pf-hp__thumb {
  position: relative;
  height: 52px;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-sunken) center / cover no-repeat;
}
.pf-hp__thumb::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--pf-color-text-accent);
}
.pf-hp__thumb-time {
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 1;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--pf-color-surface-canvas);
  color: var(--pf-color-text-primary);
  font-size: 11px;
}
.pf-hp__item-text b { display: block; font-weight: 600; line-height: 1.3; }
.pf-hp__item-text small { color: var(--pf-color-text-muted); }
.pf-hp__art { grid-template-columns: 16px 1fr; gap: 8px; padding: 5px 6px; }
.pf-hp__art-mark { color: var(--pf-color-text-muted); }
.pf-hp__links { display: grid; gap: 2px; padding-top: var(--pf-space-sm); border-top: 1px solid var(--pf-color-border-subtle); }
.pf-hp__link { display: block; padding: 5px 6px; color: var(--pf-color-text-secondary); }

/* ---- единица: статья и ролик ---- */
.pf-hp__title { margin: 0; font-size: var(--pf-typography-heading3-size); font-weight: 600; line-height: 1.3; }
.pf-hp__lead { margin: 0; color: var(--pf-color-text-secondary); }
.pf-hp__steps { margin: 0; padding-left: 22px; display: grid; gap: var(--pf-space-sm); line-height: 1.5; }
/* статья-понятие: разделы с абзацами вместо шагов */
.pf-hp__concept-head { margin: var(--pf-space-sm) 0 0; font-size: inherit; font-weight: 600; color: var(--pf-color-text-primary); }
.pf-hp__concept-text { margin: 0; line-height: 1.55; }
.pf-hp__ui { font-weight: 600; }
.pf-hp__row { display: flex; flex-wrap: wrap; gap: var(--pf-space-xs); align-items: center; }
.pf-hp__btn { font-size: var(--pf-typography-caption-size); }
.pf-hp__btn--video::before { content: "▶ "; font-size: 9px; color: var(--pf-color-text-accent); }
.pf-hp__stale {
  margin: 0;
  padding: 6px 10px;
  border: 1px dashed var(--pf-color-border-medium);
  border-radius: var(--pf-radius-sm);
  color: var(--pf-color-text-secondary);
  font-size: var(--pf-typography-caption-size);
}
.pf-hp__video-grid { display: grid; gap: var(--pf-space-md); }
.pf-hp--big .pf-hp__video-grid { grid-template-columns: 1fr 300px; align-items: start; }
/* широкая панель: текст — читаемой колонкой, снимки — во всю ширину, перечни —
   в несколько колонок */
.pf-hp--big .pf-hp__body { padding: var(--pf-space-lg); }
.pf-hp--big .pf-hp__lead,
.pf-hp--big .pf-hp__concept-text,
.pf-hp--big .pf-hp__stale { max-width: 78ch; }
.pf-hp--big .pf-hp__steps { font-size: var(--pf-typography-body-size); }
.pf-hp--big .pf-hp__steps > li { max-width: 78ch; }
.pf-hp--big .pf-hp__steps > li:has(.pf-hp__shot) { max-width: none; }
.pf-hp--big .pf-hp__list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--pf-space-xs) var(--pf-space-md); }
.pf-hp__video-main { display: grid; gap: var(--pf-space-sm); min-width: 0; }
.pf-hp__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-sunken);
}
.pf-hp__chapters { display: grid; gap: 2px; align-content: start; }
.pf-hp__chap { grid-template-columns: 44px 1fr; gap: 8px; padding: 7px 10px; color: var(--pf-color-text-secondary); }
.pf-hp__chap-t { color: var(--pf-color-text-muted); font-variant-numeric: tabular-nums; }
.pf-hp__chap--on {
  background: var(--pf-color-surface-selected);
  color: var(--pf-color-text-primary);
  box-shadow: inset 3px 0 0 var(--pf-color-text-accent);
}

/* ---- кнопка «?» в шапке ---- */
.pf-help-top {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  font-weight: 600;
}
.pf-help-top[aria-pressed="true"] {
  background: var(--pf-color-surface-selected);
  border-color: var(--pf-color-text-accent);
  color: var(--pf-color-text-primary);
}

/* ---- «Первые шаги» ---- */
.pf-fs {
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-raised);
  overflow: hidden;
  font-size: var(--pf-typography-body-small-size);
}
.pf-fs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-sm);
  padding: var(--pf-space-sm) var(--pf-space-md);
  border-bottom: 1px solid var(--pf-color-border-subtle);
}
.pf-fs__title { margin: 0; font-size: var(--pf-typography-body-size); font-weight: 600; }
.pf-fs__lead, .pf-fs__count { color: var(--pf-color-text-secondary); font-size: var(--pf-typography-caption-size); }
.pf-fs__spacer { flex: 1; }
.pf-fs__bar { width: 160px; height: 6px; border-radius: 3px; background: var(--pf-color-surface-sunken); overflow: hidden; }
.pf-fs__bar i { display: block; height: 100%; background: var(--pf-color-text-accent); }
.pf-fs__hide { font-size: var(--pf-typography-caption-size); }
.pf-fs__list { margin: 0; padding: 0; list-style: none; }
.pf-fs__step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--pf-space-sm);
  align-items: center;
  padding: 10px var(--pf-space-md);
  border-bottom: 1px solid var(--pf-color-border-subtle);
}
.pf-fs__step:last-child { border-bottom: 0; }
/* Состояния различаются формой, не только цветом: сделано — галочка в
   сплошном кружке; сейчас — подложка + черта + пунктирный кружок; впереди —
   тонкий кружок; по желанию — точечный кружок с «+». */
.pf-fs__n {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: 50%;
  color: var(--pf-color-text-secondary);
  font-size: 12px;
}
.pf-fs__step--done .pf-fs__n { border-width: 2px; color: var(--pf-color-text-primary); }
.pf-fs__step--done .pf-fs__t { color: var(--pf-color-text-secondary); }
.pf-fs__step--now { background: var(--pf-color-surface-selected); box-shadow: inset 3px 0 0 var(--pf-color-text-accent); }
.pf-fs__step--now .pf-fs__n { border: 1px dashed var(--pf-color-text-accent); color: var(--pf-color-text-primary); }
.pf-fs__step--opt .pf-fs__n { border-style: dotted; }
.pf-fs__opt { color: var(--pf-color-text-muted); }
.pf-fs__d { color: var(--pf-color-text-muted); font-size: var(--pf-typography-caption-size); }
.pf-fs__step--now .pf-fs__d { color: var(--pf-color-text-secondary); }
.pf-fs__acts { display: flex; flex-wrap: wrap; gap: var(--pf-space-xs); align-items: center; justify-content: flex-end; }
.pf-fs__video { font-size: var(--pf-typography-caption-size); }
.pf-fs__video::before { content: "▶ "; font-size: 9px; color: var(--pf-color-text-accent); }
.pf-fs__done-body { padding: var(--pf-space-md); color: var(--pf-color-text-secondary); display: grid; gap: var(--pf-space-sm); }
.pf-fs__done-body p { margin: 0; }
.pf-fs__done-body .pf-fs__acts { justify-content: flex-start; }
.pf-fs--compact .pf-fs__bar { width: 90px; }
.pf-fs--compact .pf-fs__step { padding: 7px var(--pf-space-sm); grid-template-columns: 24px 1fr auto; }
.pf-fs--compact .pf-fs__head { padding: var(--pf-space-xs) var(--pf-space-sm); }

.pf-fs-pill { cursor: pointer; border-color: var(--pf-color-text-accent); background: var(--pf-color-surface-selected); color: var(--pf-color-text-primary); }
.pf-fs-pop {
  position: fixed;
  right: var(--pf-space-md);
  bottom: 36px;
  z-index: 59;
  width: min(380px, calc(100vw - 2 * var(--pf-space-md)));
  box-shadow: 0 12px 34px var(--pf-overlay-scrim);
}
body.pf-help-open .pf-fs-pop { right: calc(min(400px, 100vw) + var(--pf-space-md)); }

/* ---- портал: карточка «Первые шаги» над модулями ---- */
.pf-mods-wrap { display: grid; gap: var(--pf-space-lg); }
.pf-mods__steps:empty { display: none; }

/* Снимок к шагу статьи: вырезка экрана с обведённым местом (npm run help:shots). */
.pf-hp__shot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--pf-space-xs);
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-sm);
}

/* «Показать на экране» (help-tour.js): рамка вокруг настоящей кнопки и пузырёк шага. */
.pf-ht__ring {
  box-sizing: border-box; /* рамка вплотную к кнопке: внутри неё затемнения нет, щель светилась бы */
  position: fixed;
  z-index: 70;
  pointer-events: none;
  border: 3px solid var(--pf-color-border-focus);
  border-radius: 10px;
  /* Затемнение слабее модального: стол под показом остаётся читаемым. */
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--pf-overlay-scrim) 45%, transparent);
  transition: left 0.15s, top 0.15s, width 0.15s, height 0.15s;
}
.pf-ht__bubble {
  position: fixed;
  z-index: 71;
  width: min(340px, calc(100vw - 24px));
  display: grid;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-md);
  background: var(--pf-color-surface-raised);
  color: var(--pf-color-text-primary);
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-md);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--pf-overlay-scrim) 50%, transparent);
}
.pf-ht__count { margin: 0; color: var(--pf-color-text-secondary); font-size: var(--pf-typography-caption-size); }
.pf-ht__text { margin: 0; line-height: 1.5; }
.pf-ht__missing { margin: 0; color: var(--pf-color-text-secondary); font-size: var(--pf-typography-caption-size); }
.pf-ht__row { display: flex; justify-content: flex-end; gap: var(--pf-space-xs); }
.pf-ht__btn { font-size: var(--pf-typography-caption-size); }

/* «?» у заголовка панели: открывает статью об этом разделе. */
.pf-hp-mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: var(--pf-space-xs);
  padding: 0;
  vertical-align: middle;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: 50%;
  background: transparent;
  color: var(--pf-color-text-secondary);
  font: 600 12px/1 var(--pf-typography-body-family);
  cursor: pointer;
}
.pf-hp-mark:hover { color: var(--pf-color-text-accent); border-color: var(--pf-color-border-focus); }

/* Карточка первого захода в раздел (help-intro.js): полоса наверху центра, не окно. */
/* Перенос — по ширине самой карточки, не окна: центр стола узок и на широком экране,
   и текст рядом с кнопками сжимался в столбик по слову (292-я). */
.pf-hi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-sm) var(--pf-space-md);
  align-items: center;
  padding: var(--pf-space-sm) var(--pf-space-md);
  border: 1px solid var(--pf-color-border-medium);
  border-left: 3px solid var(--pf-color-text-accent);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-selected);
  color: var(--pf-color-text-primary);
  font-size: var(--pf-typography-body-small-size);
}
/* 18rem — строка в 5–6 слов: уже неё текст не читается, кнопки уходят под него. */
.pf-hi__text { flex: 1 1 18rem; min-width: 0; }
.pf-hi__acts { display: flex; flex-wrap: wrap; gap: var(--pf-space-xs); margin-left: auto; }
.pf-hi__learn { font-size: var(--pf-typography-caption-size); }