/* Стили подсказки .album-tip (shared/tooltip.js) — ТРЕТЬЯ точка потребления (01.09).
   Первые две — style.css (Мастерская) и генератор albums-section.css (витрина лендинга,
   класс собирается по префиксу `album-`, см. комментарий в shared/tooltip.js). fotokniga-club.html
   и fotokniga-kabinet.html не грузят ни тот, ни другой файл — тот же довод, что у тоста
   в fotokniga-kabinet.html (комментарий там около строки 366): тащить 568 КБ albums-section.css
   или 13 784 строки style.css ради трёх подсказок в шапке — плохой обмен, а третья инлайновая
   копия в каждой странице разошлась бы с первыми двумя ещё быстрее, чем сам style.css.

   Значения ОБЯЗАНЫ дословно совпадать со style.css (.album-tip / .album-tip--visible /
   .album-tip::after / @media reduce) — расхождение стережёт
   test/frontend-invariants.test.mjs.

   ЕДИНСТВЕННАЯ сознательная правка — фолбэки переменных. club/kabinet не подключают tokens.css,
   поэтому var(--sans), var(--r-sm), var(--dark) не разрешатся и сработает второй аргумент
   var(). Дефолт style.css там — 'Inter' и голый var(--r-sm) без фолбэка: для страниц,
   набранных Golos, это неверный шрифт и нулевой радиус. Здесь фолбэки прописаны явно —
   значения взяты из tokens.css (--sans, --r-sm: 8px, --dark: #221510). */

.album-tip {
  position: fixed;
  transform: translate(-50%, -100%);
  background: var(--dark, #221510);
  border-radius: var(--r-sm, 8px);
  box-shadow: 0 2px 8px rgba(28,20,16,.18);
  padding: 5px 8px;
  font-family: var(--sans, 'Golos', sans-serif);
  font-size: 12px;
  line-height: 1.35;
  color: #ffffff;
  white-space: normal;
  width: max-content;
  max-width: min(240px, calc(100vw - 24px));
  /* 10050 — выше модалок (пикер 10030, окна бонусного блока 10040), ниже онбординга
     (10060+). Было 10001: подсказка рисовалась ПОД открытой модалкой и на погашенных
     кнопках пикера её не видел никто (замер 20.09). Близнец style.css:13984. */
  z-index: 10050;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
.album-tip--visible { opacity: 1; visibility: visible; }
.album-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--dark, #221510);
}
/* Переворот вниз — для шапки: у верха экрана места сверху нет, плашка встаёт под кнопку,
   хвостик разворачивается вверх. Класс ставит place() в shared/tooltip.js.
   Значения обязаны совпадать со style.css (там же и albums-section.css, машинная копия). */
.album-tip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--dark, #221510);
}
/* Копия правила из style.css (03.09): плашка справа от иконки рельса, хвостик влево. */
.album-tip--right::after {
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: var(--dark, #221510);
}
@media (prefers-reduced-motion: reduce) {
  .album-tip { transition: none; }
}