/* Подсказка у заголовка — один файл на весь сайт.

   Правило: под графиком стоит только график, а всё, что объясняет, живёт под
   знаком вопроса рядом с названием. Стили жили внутри style.css, и «Обзор»
   оставался единственной вкладкой без подсказок: он собирается автономным
   файлом и style.css не подключает, поэтому пояснения там висели абзацем под
   заголовком. Теперь блок отдельным файлом: Jinja-страницы подключают его
   ссылкой (`_base.html`), генератор дашборда вклеивает внутрь себя — как уже
   сделано с токенами, шапкой и панелью карточек.
*/
/* ─── Подсказка у заголовка ──────────────────────────────────────
   Пояснения к графикам жили абзацами под ними. Каждое честное и нужное — но
   вместе они превращали страницу в методичку: на экране больше слов, чем
   цифр, а читают их один раз в жизни. Теперь текст переезжает под знак
   вопроса рядом с заголовком и появляется по наведению.

   Механика на CSS, без скрипта: разметка одна на все вкладки, а «Обзор»
   вклеивается готовым файлом и на JS полагаться не может. Кнопка, а не span:
   подсказка обязана открываться с клавиатуры и по тапу — на телефоне
   :hover не существует, а :focus-visible работает везде. */

/* Весь файл — в слое `legacy`. Смысл: правило вне слоя бьёт правило внутри
   любого слоя, независимо от специфичности и порядка. Пока хоть один наш файл
   оставался вне слоёв, утилиты Tailwind проигрывали ему молча — выглядело бы
   как «Tailwind не работает».

   Внутри слоя всё как раньше: файлы соперничают между собой по прежним
   правилам, порядок подключения тот же. Меняется только одно — утилита теперь
   перебивает старый CSS, потому что слой `utilities` объявлен после `legacy`
   (порядок задан в ozon_margin/tailwind.css).

   Оборачивать надо ВСЕ файлы разом, включая cyberpunk/dashboard.css: он
   вклеивается внутрь собранного «Обзора», и оставшись единственным вне слоёв,
   начал бы выигрывать у всего приложения. */
@layer legacy {
.hint {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  margin-left: 8px;
  padding: 0;
  vertical-align: middle;
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  color: var(--dim);
  background: none;
  border: 1px solid var(--border2);
  border-radius: 50%;
  cursor: help;
  transition: color .15s, border-color .15s;
}
.hint:hover, .hint:focus-visible { color: var(--blue); border-color: var(--blue); }

.hint__body {
  /* Показ и скрытие — через display, а не opacity: на «Анализе» уже живут
     свои правила прозрачности для появления блоков, и подсказка ими гасилась
     даже с инлайн-стилем. display перебить нечем.

     Мягкость возвращает @starting-style: браузер анимирует появление из
     заданного начального состояния, не требуя ни класса, ни скрипта. */
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 60;
  width: max-content;
  max-width: min(420px, 78vw);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--text);
  background: var(--surface1, #0b1220);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  /* Сдвиг вдоль строки выставляет note-hints.js: он меряет коробку
     после показа и возвращает её в окно. CSS сам этого не умеет —
     подсказка не знает, где край экрана. */
  transform: translateX(calc(-50% + var(--hint-shift, 0px)));
  transform-origin: top center;
  pointer-events: none;
  white-space: normal;
}
/* Абзац внутри подсказки. Блочный `span`, а не `<p>`: тело подсказки само
   инлайновое по разметке, и параграф внутри него невалиден — браузеры это
   терпят, но проверять на каждом их обновлении не хочется.

   Длинная подсказка без абзацев читается стеной: у «Сколько маржи съедала
   реклама» их шесть строк — как считается точка, что значит разрыв, чем она
   отличается от соседней панели. Разделить их незачем было нечем. */
.hint__p { display: block; }
.hint__p + .hint__p { margin-top: 9px; }

.hint:hover .hint__body,
.hint:focus .hint__body,
.hint:focus-visible .hint__body,
.hint:focus-within .hint__body {
  display: block;
  animation: hint-in .16s cubic-bezier(.23, 1, .32, 1);
}
/* scale(.96), а не scale(0): в жизни ничто не появляется из ничего. */
@keyframes hint-in {
  from { opacity: 0; transform: translateX(calc(-50% + var(--hint-shift, 0px))) scale(.96); }
  to { opacity: 1; transform: translateX(calc(-50% + var(--hint-shift, 0px))) scale(1); }
}
@media (hover: none), (pointer: coarse) {
  /* На тач подсказка открывается тапом (кнопка получает фокус), а :hover
     здесь только залипал бы после ухода пальца. */
  .hint:hover .hint__body { display: none; }
  .hint:focus .hint__body { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hint:hover .hint__body,
  .hint:focus .hint__body,
  .hint:focus-within .hint__body { animation: none; }
}

/* Знак вопроса внутри заголовка не должен наследовать его капитель и
   разрядку: иначе «?» растягивается и висит выше строки. */
h2 > .hint, h3 > .hint, .rsn-h2 > .hint, .months-chart__title > .hint,
.payback-card__title > .hint {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  vertical-align: middle;
  /* Ровно тот же сдвиг на пиксель, но смещением, а не `transform`: любой
     `transform` делает кнопку своим контекстом наложения, и подсказка внутри
     неё оказывается заперта — `z-index: 60` считается уже не от страницы, а от
     кнопки. Знак вопроса стоит над графиком, подсказка падает вниз на него, и
     график (позиционированный и следующий по порядку) рисовался поверх текста.
     Кнопка и так `position: relative`, так что `top` двигает её даром. */
  top: -1px;
}
}