/* ═══════════════════════════════════════════════════════════════════════════
   GOLDJAXE Scribe · help.css — справка по странице (GS-49).

   Отдельным файлом, а не в components.css: справка подключается и на страницах
   вне каркаса (login, trial, отчёт), где components.css тянуть целиком незачем
   — там свой узкий набор стилей.

   Цвета, радиусы, тени и отступы — ТОЛЬКО токенами из tokens.css: тем три
   (светлая, тёмная, ночная), и собственные значения разъедутся с ними на
   первой же смене.

   Развод с помощником по продукту (GS-50, assistant.css). Тот занимает правый
   нижний угол: 44×44 на right/bottom 20px, z-index 900. Справка встаёт ЛЕВЕЕ
   него в тот же ряд — right: 76px (20 + 44 + 12). Правый нижний угол не
   трогаем: туда же разворачивается панель разговора помощника.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Селектор с [data-help-panel-root], а не просто .sc-help. Имя .sc-help уже
   занято в components.css — это инлайн-подсказка под полем формы («Приглашения
   откроются после оплаты» в team.html и подобные). help.css подключается ПОСЛЕ
   components.css, и голый .sc-help с position:fixed переопределял чужой
   компонент: подпись под полем срывалась с места и улетала в правый нижний угол
   экрана, поверх кнопок. Найдено при разборе справки 19.08.2026.

   Переименовать корень целиком было бы чище, но дороже: имя .sc-help__* стоит в
   разметке, в двух файлах стилей и в скрипте. Атрибут разводит компоненты точно
   там, где они сталкиваются, — на корневом элементе; все дочерние .sc-help__*
   уникальны и в подсказке под полем не встречаются. */
.sc-help[data-help-panel-root] {
  position: fixed;
  right: calc(20px + 44px + 12px);
  bottom: 20px;
  /* Тот же этаж, что и у помощника: обе кнопки над содержимым страницы, но
     ниже модалок (1000+) — диалог подтверждения обязан перекрывать их, а не
     наоборот. На единицу ниже помощника, чтобы при любом наложении теней
     порядок был предсказуем, а не зависел от порядка в разметке. */
  z-index: 899;
}

/* ── Кнопка вызова ────────────────────────────────────────────────────────────
   Круг 44px с одной иконкой — тач-цель WCAG 2.5.8 без добавочной зоны нажатия
   и ровно тот же силуэт, что у кнопки помощника рядом. Две соседние кнопки
   разного размера читались бы как разные по важности, хотя они равны. */

.sc-help__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink-2);
  box-shadow: var(--elev-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
/* Золото приходит на наведение, а не лежит в покое: в покое золотая кнопка
   справки спорила бы за внимание с золотой кнопкой помощника — два
   одинаково ярких пятна рядом, и человек выбирает дольше, чем читает. */
.sc-help__open:hover {
  background: var(--c-gold-bg);
  border-color: var(--c-gold);
  color: var(--c-gold);
  box-shadow: var(--elev-3);
}
.sc-help__open:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.sc-help__open[aria-expanded="true"] {
  background: var(--c-gold-bg);
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.sc-help__open svg { width: 20px; height: 20px; flex: none; }

/* ── Панель ───────────────────────────────────────────────────────────────────
   Выезжает от правого края экрана, не от кнопки: текст читают сверху вниз, и
   колонка во всю высоту даёт ему нормальную длину строки. Панель, растущая
   вверх от кнопки (как у помощника), упёрлась бы в потолок на коротком экране.

   Подложки (скрима) намеренно НЕТ. Справка объясняет страницу — значит саму
   страницу должно быть видно и с открытой справкой; затемнение спрятало бы
   ровно то, о чём идёт речь. По той же причине панель не ловит фокус в
   ловушку: работа со страницей продолжается. */

.sc-help__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-left: 1px solid var(--c-line-strong);
  box-shadow: var(--elev-3);
  /* Над своей кнопкой, но по-прежнему ниже модалок. */
  z-index: 901;
  overflow: hidden;
  transform: translateX(0);
  transition: transform .22s ease-out;
}
/* hidden сам по себе перебивается display:flex — снимаем явно. */
.sc-help__panel[hidden] { display: none; }

/* Стартовое положение для въезда: класс снимается в следующем кадре (help.js),
   и панель едет из-за края. Без этого шага она появлялась бы рывком. */
.sc-help__panel.is-entering { transform: translateX(100%); }

.sc-help__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
  flex: none;
}

.sc-help__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
}

.sc-help__close {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-ink-3);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sc-help__close:hover { background: var(--c-surface-3); color: var(--c-ink); }
.sc-help__close:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.sc-help__close svg { width: 16px; height: 16px; }
/* Крестик 28px мелковат для пальца — на сенсорном вводе добираем до 44px
   невидимой зоной, не раздувая рисунок кнопки (приём взят у .help-q). */
@media (pointer: coarse) {
  .sc-help__close { position: relative; }
  .sc-help__close::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
}

.sc-help__body {
  padding: 14px 16px;
  overflow-y: auto;
  /* Прокрутка панели не перелистывает страницу под ней, когда текст кончился. */
  overscroll-behavior: contain;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-ink-2);
}

/* Слой 1 — «зачем эта страница». Остаётся ровно тем, чем был: одно-два коротких
   предложения, читаемых за три секунды. Разбор по элементам идёт НИЖЕ, и
   порядок здесь принципиален — первым экраном человек получает ответ, а не
   оглавление. */
.sc-help__lead {
  margin: 0;
  /* Перевод строки в значении словаря = новый абзац. Один ключ на страницу
     вместо россыпи help.<стр>.body.1/2/3 — см. шапку templates/_help.html. */
  white-space: pre-line;
}

/* ── Слой 2: разбор по элементам ───────────────────────────────────────────── */

.sc-help__items {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--c-line);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-help__item { margin: 0; }

/* Название пункта — кнопка во всю ширину, а не значок сбоку: на телефоне палец
   попадает по строке целиком, и не надо целиться в маленький прицел. */
.sc-help__item-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* 44px тач-цели набираются вертикальными отступами: строка занимает всю
     ширину панели, узкой её не сделать. */
  min-height: 32px;
  padding: 4px 6px;
  margin: 0 -6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
/* Пункт, которому нечего показать (элемента нет на этой странице — скрыт ролью,
   тарифом или состоянием), остаётся ЧИТАЕМЫМ текстом, а не гаснет: объяснение
   верное, просто показывать нечего. Меняется только поведение — не кнопка. */
.sc-help__item-btn:disabled {
  cursor: default;
  color: var(--c-ink);
  opacity: 1;
}
.sc-help__item-btn.is-locatable:hover {
  background: var(--c-gold-bg);
  border-color: var(--c-gold);
  color: var(--c-gold-strong, var(--c-gold));
}
.sc-help__item-btn:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
/* Пункт, чья подсветка сейчас на экране: связь «нажал здесь — горит там»
   должна быть видна, иначе на длинном списке теряешь, что именно показано. */
.sc-help__item-btn.is-active {
  background: var(--c-gold-bg);
  border-color: var(--c-gold);
  color: var(--c-gold-strong, var(--c-gold));
}

.sc-help__item-title { flex: 1 1 auto; }

.sc-help__item-mark {
  flex: none;
  display: inline-flex;
  color: var(--c-gold);
  opacity: .75;
}
.sc-help__item-mark[hidden] { display: none; }
.sc-help__item-mark svg { width: 15px; height: 15px; }

.sc-help__item-text {
  margin: 2px 0 0;
  color: var(--c-ink-2);
  white-space: pre-line;
}

/* ── Телефон ──────────────────────────────────────────────────────────────────
   Панель НЕ на весь экран (в отличие от помощника): требование задачи —
   «не блокирует работу со страницей». Занимает нижние две трети, страница
   сверху остаётся видимой и рабочей, закрыть можно крестиком, Escape или
   касанием вне панели.

   Порог 767px — тот же, на котором маленькие подсказки (.help-pop) переходят
   в свой мобильный режим; заводить рядом второй, свой, значило бы получить
   полосу ширин, где компоненты справки ведут себя по-разному. */

@media (max-width: 767px) {
  .sc-help[data-help-panel-root] {
    /* Отступы НЕ уменьшаем: помощник держит свои 20px на всех ширинах, и
       собственные 12px здесь ставили кнопку справки на 8px ниже соседней —
       вплотную, без зазора между двумя тач-целями. Считаем от того же края:
       20 (отступ помощника) + 44 (его ширина) + 12 (зазор). */
    right: calc(20px + 44px + 12px);
    bottom: 20px;
  }
  .sc-help__panel {
    top: auto;
    left: 0;
    right: 0;
    max-height: 62vh;
    width: auto;
    max-width: none;
    border-left: none;
    border-top: 1px solid var(--c-line-strong);
    transform: translateY(0);
  }
  .sc-help__panel.is-entering { transform: translateY(100%); }
}

/* ── Обе плавающие кнопки на время открытой справки ────────────────────────────
   Правка 19.08.2026 по замечанию владельца: «кнопка справки улетает выше самой
   справки», «кнопка бота мешает чтению».

   Что было. Кнопка справки поднималась над панелью (bottom: --sc-help-h + 12px)
   — то есть лечился симптом: панель накрывала кнопку, и кнопку отодвигали. На
   длинном тексте панель занимает 62vh, и «над её краем» оказывалось серединой
   экрана: кнопка висела в воздухе далеко от справки, к которой относится, а
   выглядела как элемент страницы под ней.

   Что теперь. Пока панель открыта, кнопки нет вовсе. Кнопка «открыть» на экране,
   где уже открыто, не нужна: закрывают крестиком в шапке панели, Escape или
   касанием мимо. Кнопка помощника уезжает по той же причине — она стоит поверх
   текста справки и мешает читать (assistant.css слушает тот же класс на body).

   visibility, а не display: гасим и уводим за край одним движением, элемент
   сохраняет место в потоке и не дёргает соседей. Скрытое через visibility не
   ловит нажатий и выпадает из обхода клавиатурой — то есть невидимая кнопка не
   остаётся ловушкой для читалки экрана.

   Класс на <body>, а не на корне справки: его читают оба файла стилей, и
   help.css не лезет в чужой компонент (помощника на странице может не быть). */
body.sc-help-is-open .sc-help__open {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .15s, visibility .15s, transform .15s;
}

/* ── Подсветка элемента страницы ───────────────────────────────────────────────
   Второй слой справки: пункт разбора показывает, ГДЕ на странице живёт элемент.
   Затемнение по всей площади, поверх — клон элемента в золотой рамке.

   Затемнение, а НЕ размытие (backdrop-filter). Размытие выглядит эффектнее и
   первым просилось в эту задачу, но на слабых Android оно перерисовывает весь
   экран каждый кадр: открытие подсветки даёт рывок, а прокрутка под ней —
   заметные подтормаживания. Полупрозрачная подложка читается так же однозначно
   («вот это — главное, остальное потом») и не стоит ничего. */

/* Затемнение вынесено ИЗ корня справки в <body> — это делает help.js при показе.
   Иначе оно остаётся потомком .sc-help[data-help-panel-root] (position:fixed,
   z-index:899), а внутри чужого контекста наложения его собственный z-index
   меряется уже не с элементами страницы, а с соседями по корню.

   Одного переноса, однако, МАЛО, и это главный урок этой правки. Подсвечиваемый
   элемент лежит глубоко внутри .app-shell — первого ребёнка <body> с
   z-index:auto. Такой предок слоя не создаёт, но и не даёт потомку всплыть выше
   СЕБЯ: в корневом контексте участвует не элемент со своим 899, а вся оболочка
   целиком, а она стоит в разметке РАНЬШЕ затемнения. Дальше правило простое —
   при равном весе выигрывает тот, кто ниже по документу, то есть подложка.

   Разбор занял несколько заходов ровно потому, что вычисленные стили выглядели
   исправными: getComputedStyle честно показывал у элемента z-index 899 и белый
   фон, а пиксель в центре рамки оставался серым (107,107,107). Числа из
   getComputedStyle описывают элемент, а не то, что нарисовано поверх него.

   Лечится тем, что затемнение и подсвеченный элемент ставятся в ОДИН контекст:
   help.js кладёт подложку внутрь .app-shell (а не в body), и дальше числа
   работают как написано — 897 у подложки против 899 у элемента. Панель справки
   и подпись живут выше, в корневом контексте, и переносом не затронуты. */
/* Затемнение сделано ВЫРЕЗОМ, а не сплошной подложкой поверх страницы.

   Сплошная подложка требует, чтобы подсвеченный элемент был НАД ней, — и вот
   тут начинается то, ради чего написан этот комментарий. Элемент лежит глубоко
   внутри .app-shell; предки до самого <html> не создают ни одного контекста
   наложения (проверено перебором всех свойств: position, z-index, opacity,
   transform, filter, contain, will-change, isolation, mix-blend-mode,
   backdrop-filter — везде значения по умолчанию). По спецификации z-index 899 у
   элемента обязан побеждать 897 у подложки. Он не побеждал: getComputedStyle
   показывал у элемента белый фон и z-index 899, а пиксель в центре рамки
   упрямо оставался серым (107,107,107). Не помогло ни поднятие до 5000, ни
   перенос подложки в body, ни перевод элемента в position:fixed, ни isolation,
   ни снятие анимации — все варианты замерены по картинке, не на глаз.

   Вместо дальнейшей борьбы со слоями — приём, которому слои не нужны вовсе.
   Затемняются ЧЕТЫРЕ ПОЛОСЫ вокруг элемента: сверху, снизу, слева, справа.
   Место самого элемента не накрывается ничем, поэтому он остаётся ровно таким,
   какой есть, и поднимать его никуда не требуется. Полосы считает help.js по
   прямоугольнику элемента.

   Побочная выгода: не нужен и подъём элемента над страницей, то есть подсветка
   больше не может изменить его вид (тень, фон, порядок отрисовки соседей). */
.sc-help__spot {
  position: fixed;
  inset: 0;
  /* Сам контейнер невидим и ничего не ловит — работают только полосы внутри. */
  pointer-events: none;
  z-index: 897;
  animation: sc-help-spot-in .16s ease-out;
}

/* Полоса затемнения. Координаты каждой ставит help.js. */
.sc-help__spot-band {
  position: fixed;
  background: rgba(0, 0, 0, .58);
  /* Ловит нажатия: касание мимо подсвеченного элемента гасит подсветку. */
  pointer-events: auto;
}
.sc-help__spot[hidden] { display: none; }

@keyframes sc-help-spot-in { from { opacity: 0; } to { opacity: 1; } }

/* Подсвеченный элемент поднимается НАД затемнением. Приём и вид взяты у
   онбординга (.onb-spot в components.css): класс вешается на сам элемент,
   relative + z-index поднимают его, не трогая раскладку.

   Подложка обязательна — та же причина, что записана у .onb-spot: без неё
   тёмный элемент на затемнённом фоне остаётся тёмным, и «поднятым» его не
   видно. Под элемент кладётся фон страницы, обводка идёт золотом. */
/* Рамка вокруг подсвеченного элемента. z-index здесь НЕТ намеренно: элемент
   никуда не поднимается — затемнение его и не накрывает (вырез из четырёх
   полос, см. .sc-help__spot). Осталась одна забота — обвести. */
.sc-help-spot {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--c-gold-bg), 0 0 0 2px var(--c-gold);
}
/* Подкладывать фон под элемент (как делает .onb-spot) здесь НЕ нужно: тот
   поднимается над сплошной подложкой и без своего фона просвечивал бы ею, а
   наш элемент не накрыт ничем и сохраняет собственный вид. */

/* Название подсвеченного пункта над рамкой: рамка без подписи оставляет вопрос
   «и что это». Центрируется по элементу сдвигом на половину своей ширины —
   ширину знает только браузер, поэтому translate, а не расчёт в JS. */
.sc-help__spot-label {
  position: fixed;
  /* Выше подсвеченного элемента (899): метка стоит вплотную над ним и при
     равных слоях уходила бы под него краем. Ниже панели справки (901) —
     список пунктов остаётся главным. */
  z-index: 900;
  transform: translate(-50%, -100%);
  max-width: min(280px, calc(100vw - 32px));
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--c-gold);
  color: #1a1400;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  box-shadow: var(--elev-2);
}
/* Элемент у верхней кромки экрана: подпись уходит под него, иначе её срезает. */
.sc-help__spot-label.is-below { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .sc-help__spot { animation: none; }
}

/* Экран короче панели (телефон в альбомной ориентации): доля высоты меньше,
   иначе от страницы не остаётся ничего. */
@media (max-width: 767px) and (max-height: 480px) {
  .sc-help__panel { max-height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-help__panel { transition: none; }
  .sc-help__open { transition: none; }
}

/* ═══ Панель вкладок под кнопкой справки (GS-138) ═══════════════════════════
   🔴 КАНОН П10: справка ушла строкой в шторку «Ещё», и вторая точка входа
   плавающей кнопкой на телефоне стала лишней. Решение владельца 27.08.2026:
   «интерфейс стал интуитивным, справка в такой нужде уже не стоит — мы рискуем
   поместить кнопку, которую никто не нажимает, и закрыть ей часть экрана».

   Скрываем ТОЛЬКО кнопку вызова: сама панель справки, её затемнение и подсветка
   элементов работают как прежде — их открывает строка в «Ещё».

   Замер 27.08.2026 (390×844) показал и вторую беду: кнопка стояла на bottom:20px
   и физически перекрывала вкладку «Поиск». Две плавающие кнопки рядом — почти
   всегда признак, что одна лишняя; здесь лишней оказалась именно эта. */
@media (max-width: 1023px){
  .app-shell.has-tabs ~ .sc-help[data-help-panel-root] .sc-help__open,
  body:has(.app-shell.has-tabs) .sc-help[data-help-panel-root] .sc-help__open{
    display: none;
  }
}