/* Подсказка у курсора — вид плашки. Движок один на весь сайт (static/tip.js),
   подключён в `_base.html`, поэтому и стили лежат отдельно от кита: страницам
   с одной таблицей 92 килобайта примитивов графиков ни к чему.

   Вид повторяет подсказку Chart.js один в один
   (`chart-theme.js`): фон, рамка, скругление, отступ, метка-квадрат 8×8,
   заголовок жирным, итог под чертой приглушённым. В проекте два движка
   графиков, и по наведённой точке различать их пользователю незачем.
   Меняешь здесь — поменяй и там. */

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

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

   Оборачивать надо ВСЕ файлы разом, включая cyberpunk/dashboard.css: он
   вклеивается внутрь собранного «Обзора», и оставшись единственным вне слоёв,
   начал бы выигрывать у всего приложения. */
@layer legacy {
.lk-tip {
  position: fixed; z-index: 40; pointer-events: none;
  /* 340, а не 280: подсказку теперь показывают не только графики, но и шапки
     таблиц, где строка — предложение, а не «имя — число». На 280 такое
     предложение уходило на четыре строки. */
  max-width: 340px;
  padding: var(--tip-pad);
  border: 1px solid var(--tip-border);
  border-radius: var(--r-sm);
  background: var(--tip-bg);
  box-shadow: var(--shadow);
  font-size: var(--tip-fs); line-height: var(--tip-lh);
  color: var(--text);
}

/* Появляется мягко — как подсказка под «?» (`hint.css`), и тем же приёмом:
   анимация на появлении, а не переход между состояниями. Плашка возникала
   мгновенно и на плотной таблице читалась как вспышка — курсор идёт по
   строкам, и рядом с числами что-то дёргается на каждое движение.

   Именно анимация: плашку прячут атрибутом `hidden`, то есть `display: none`,
   а он не переходит ни во что. Перекрывать `hidden` своим `display` пробовал —
   переход не запускался вовсе. Анимация же играет заново каждый раз, когда
   правило снова начинает применяться.

   Гаснет мгновенно и это правильно: курсор уже на соседней строке, и уходящая
   плашка догоняла бы его призраком. Длительность короче, чем у `.hint`: та
   всплывает по наведению на значок, а эта следует за курсором и обязана
   поспевать. */
.lk-tip:not([hidden]) { animation: tip-in .12s cubic-bezier(.23, 1, .32, 1); }

@keyframes tip-in {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lk-tip:not([hidden]) { animation: none; }
}
.lk-tip__head { margin-bottom: 4px; font-weight: 700; color: var(--text); }
/* Строка переносится, а не вылезает из плашки. При `nowrap` длинная строка
   рисовалась поверх страницы за границей коробки — у шапки таблицы продаж
   («в месяце — итог ÷ итог, а не среднее строк…») это было видно особенно
   ясно, но так же молча вылезали и длинные имена товаров в графиках. */
.lk-tip__row {
  display: flex; align-items: center; gap: 6px;
  /* `break-word`, а не `anywhere`: второй ломает и расчёт собственной ширины
     плашки — она схлопывается по самому длинному слову вместо max-width. */
  white-space: normal; overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
/* Метка есть только у строк, которым передан цвет: у Chart.js её тоже нет
   там, где величина не из ряда. */
.lk-tip__row[style]::before {
  content: ''; flex: 0 0 8px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--tip);
}
.lk-tip__gap { height: 8px; }
.lk-tip__row--total {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px solid var(--border); color: var(--dim);
}
}