/* ============================================================================
   theme-tint.css — «ФАЙЛ ФОРМУЛ ТОНИРОВКИ»
   Единственное место со ВСЕМИ цветовыми формулами позиционной тонировки.

   ⚠️ ПОЧЕМУ ПРАВИЛА, А НЕ :root-ПЕРЕМЕННЫЕ:
   формула oklch(from var(--sampled) …), положенная в :root-переменную, резолвит
   var(--sampled) в контексте :root (где он НЕ задан) → invalid → элемент чернеет.
   Поэтому формулы живут в ПРАВИЛАХ, применяемых прямо к элементам: там --sampled
   наследуется от карточки/бара и резолвится корректно.

   Как работает: цвет выводится из ПРОБЫ фона --sampled в точке элемента:
       --sampled = color-mix(--surface-top ↔ --surface-bottom по --pos)
       --pos ставит js/theme-tint.js: 100 = верх (тёплый) … 0 = низ (прохладный).
   Насыщенность усилена (calc(c * N)) — база почти-белая, иначе перелив не виден.

   Правишь формулу ЗДЕСЬ → меняется везде, где селектор применён.
   РАСКАТКА на новую страницу: добавляй её селекторы в нужные правила ниже
   (+ подключи файл + вызови initPositionTint). --pos/--sampled ставит скрипт.
   Зависит от site.css (--surface-top / --surface-bottom / --fire). Подключать ПОСЛЕ site.css.
   ============================================================================ */

/* ── SETUP: --pos (ставит скрипт) → --sampled (проба фона по позиции) + фон/обводка карточки.
   Раскатка: добавляй сюда селекторы карточек новых страниц. ─────────────────── */
.lb-card, .bm-card, .lastburn-book, .book-card, .author-card {
  --pos: 60;
  --sampled: color-mix(in oklab, var(--surface-top) calc(var(--pos) * 1%), var(--surface-bottom));
  background:   oklch(from var(--sampled) calc(l + (1 - l) * 0.55) calc(c * 2) h) !important;   /* фон карточки — светлый тон пробы */
  border-color: oklch(from var(--sampled) calc(l * 0.82) calc(c * 6) h) !important;             /* обводка карточки */
  transition: box-shadow .18s ease, transform .16s ease !important;                             /* перелив мгновенно; анимируем только hover */
}

/* ── ТЕКСТ КАРТОЧКИ ─────────────────────────────────────────────────────────── */
.lb-title, .lastburn-book-title, .bm-card-book               { color: oklch(from var(--sampled) 0.35 calc(c * 7) h) !important; }   /* заголовок книги */
.bm-card-label                                                { color: oklch(from var(--sampled) 0.44 calc(c * 6) h) !important; }   /* подзаголовок-цитата */
.lb-author, .lastburn-book-meta, .bm-card-author, .bm-card-date { color: oklch(from var(--sampled) 0.54 calc(c * 5) h) !important; } /* автор / дата */

/* ── ПРОГРЕСС-БАР карточки ──────────────────────────────────────────────────── */
.lb-bar  { background: oklch(from var(--sampled) 0.88 calc(c * 3) h) !important; }   /* дорожка */
.lb-fill { background: oklch(from var(--sampled) 0.62 calc(c * 9) h) !important; }   /* заливка */
.lb-pct  { color:      oklch(from var(--sampled) 0.50 calc(c * 6) h) !important; }   /* подпись N/M · % */

/* ── МЕЛКИЕ ЭЛЕМЕНТЫ карточки ───────────────────────────────────────────────── */
.lb-ash, .bm-card-del, .bm-card-share { border-left-color: oklch(from var(--sampled) calc(l * 0.86) calc(c * 3) h) !important; }   /* верт. разделитель перед кнопками */
.bm-card-share { color: oklch(from var(--sampled) 0.58 calc(c * 5) h) !important; }   /* стрелка «поделиться» */
.bm-card-post {   /* пост-бейдж «Post N/M» в рамке */
  color:      oklch(from var(--sampled) 0.46 calc(c * 6) h) !important;              /* текст */
  background:  oklch(from var(--sampled) calc(l * 0.97) calc(c * 4) h / .16) !important; /* фон */
  border: 1px solid oklch(from var(--sampled) calc(l * 0.86) calc(c * 4) h / .55) !important; /* рамка */
}

/* ── ГРУПП-ЗАГОЛОВКИ (📖 By Book / ✍ By Author) — ставят свой --sampled по --pos ── */
.bm-group-hdr {
  --sampled: color-mix(in oklab, var(--surface-top) calc(var(--pos, 60) * 1%), var(--surface-bottom));
  color: oklch(from var(--sampled) 0.50 calc(c * 5) h) !important;
}

/* ── НАВЕДЕНИЕ на карточку: подъём + свечение в цвете позиции + усиление рамки ──
   (.book-card НЕ включён: у него свой hover translateY(-4px) в разметке страницы;
    .author-card включён — его собственный hover = только фон, а setup-!important его гасит.) */
.lb-card:hover, .bm-card:hover, .lastburn-book:hover, .author-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px oklch(from var(--sampled) 0.60 calc(c * 8) h / .30);
  border-color: oklch(from var(--sampled) calc(l * 0.68) calc(c * 11) h) !important;
}

/* ── ПОД-БАР (бар сортировки/фильтров/поиска; фикс. верх; ДОЛЖЕН быть тише заголовка) ─────────── */
.sort-bar, .filter-bar, .search-bar {
  --sampled: var(--surface-top);   /* фикс. верх блока → проба = верх градиента */
  background: oklch(from var(--sampled) 0.988 calc(c * 0.85) h) !important;   /* фон бара — светлее/глуше заголовка */
  border-bottom-color: oklch(from var(--sampled) 0.90 calc(c * 3) h) !important;   /* нижняя линия */
}

/* ── ДРОПДАУН сортировки (спокойные тона; открытый — светлый с тёмным текстом) ── */
.dd-trigger {
  background:   oklch(from var(--sampled) 0.96 calc(c * 2) h) !important;   /* фон */
  border-color: oklch(from var(--sampled) 0.84 calc(c * 4) h) !important;   /* рамка */
  color:        oklch(from var(--sampled) 0.46 calc(c * 4) h) !important;   /* текст (и пункты — ниже) */
}
.dd-wrap.open .dd-trigger {   /* открытый триггер */
  background:   oklch(from var(--sampled) 0.89 calc(c * 4) h) !important;
  border-color: oklch(from var(--sampled) 0.80 calc(c * 5) h) !important;
  color:        oklch(from var(--sampled) 0.42 calc(c * 5) h) !important;
}
.dd-panel       { background: oklch(from var(--sampled) 0.985 calc(c * 1.5) h) !important; border-color: oklch(from var(--sampled) 0.82 calc(c * 4) h) !important; }  /* панель */
.dd-item        { color: oklch(from var(--sampled) 0.46 calc(c * 4) h) !important; }   /* пункт: текст */
.dd-item:hover  { background: oklch(from var(--sampled) 0.93 calc(c * 3) h) !important; }   /* пункт: hover */
.dd-item.active { background: oklch(from var(--sampled) 0.90 calc(c * 3) h) !important; color: oklch(from var(--sampled) 0.40 calc(c * 5) h) !important; }   /* пункт: активный */
.dd-chevron     { color: oklch(from var(--sampled) 0.54 calc(c * 4) h) !important; }   /* шеврон ▾ */

/* ── СЧЁТЧИК-БЕЙДЖ «N bookmarks» (в верхнем баре; мягкий) ────────────────────── */
.block-bar-count {
  --sampled: var(--surface-top);
  background: oklch(from var(--sampled) 0.94 calc(c * 3) h) !important;   /* фон */
  color:      oklch(from var(--sampled) 0.48 calc(c * 4) h) !important;   /* текст */
}

/* ── ЗАГОЛОВОК среднего блока (в ВЕРХНЕМ баре; фикс. верх → проба = тёплый конец) ── */
.block-bar-title {
  --sampled: var(--surface-top);
  color: oklch(from var(--sampled) 0.42 calc(c * 4) h) !important;   /* тёмный тёплый заголовок блока */
}

/* ── ССЫЛКА в НИЖНЕМ баре (фикс. низ → проба = прохладный конец градиента) ─────── */
.back-link       { --sampled: var(--surface-bottom); color: oklch(from var(--sampled) 0.48 calc(c * 5) h) !important; }   /* прохладная ссылка */
.back-link:hover { color: oklch(from var(--sampled) 0.40 calc(c * 7) h) !important; }   /* наведение — темнее/насыщеннее */

/* ── СКРОЛЛБАР — ГРАДИЕНТНЫЙ ПОЛЗУНОК (webkit), «по формуле» от фона: тёплый верх → прохладный низ.
   Владелец выбрал ГРАДИЕНТ (не нативный сплошной). Градиент умеет ТОЛЬКО ::-webkit-*.
   ⚠️⚠️ НЕ ЗАДАВАТЬ на .bm-scroll стандартные `scrollbar-width` и `scrollbar-color`:
     современный Chrome их понимает и, увидев любое из них, ПЕРЕКЛЮЧАЕТСЯ на системный скроллбар
     и ИГНОРИРУЕТ весь ::-webkit-scrollbar → градиент пропадает, остаётся простой системный бар.
     (Это дважды ломало нам ползунок: сперва scrollbar-color, потом scrollbar-width:thin «для FF».)
     Плата: в Firefox ползунок будет системным (там кастом-градиент всё равно невозможен) — ок.
   ⚠️ И НЕ добавлять border + background-clip на ползунок — тоже роняет отрисовку в дефолт.
   ✔ var(--surface-*) в псевдо-скроллбаре Chrome ЧИТАЕТ — формула настоящая, как у карточек
     (единый источник, «2 базовых цвета»). Светлый (L≈.90, тонкий 5px — владелец просил светлее и тоньше).
   iOS/Safari игнорируют любой кастом-скроллбар (системный оверлей) — десктоп-улучшение. ── */
.bm-scroll::-webkit-scrollbar { width: 5px; }   /* тонкий, как в каталоге (НЕ scrollbar-width — webkit не отключает) */
.bm-scroll::-webkit-scrollbar-track { background: oklch(from var(--surface-top) 0.97 calc(c * 2) h / .45); }   /* еле заметная дорожка — фон не темним */
.bm-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    oklch(from var(--surface-top)    0.90 calc(c * 3) h) 0%,      /* верх ползунка — ТЁПЛЫЙ конец фона (светлее прежнего) */
    oklch(from var(--surface-bottom) 0.90 calc(c * 3) h) 100%);   /* низ  ползунка — ПРОХЛАДНЫЙ конец фона */
  border-radius: 3px;
}
.bm-scroll::-webkit-scrollbar-thumb:hover {   /* наведение — чуть плотнее тон, всё ещё светло */
  background: linear-gradient(180deg,
    oklch(from var(--surface-top)    0.83 calc(c * 4) h) 0%,
    oklch(from var(--surface-bottom) 0.83 calc(c * 4) h) 100%);
}

/* ── LAST BURN — ЕДИНСТВЕННОЕ место с ОГНЁМ (--fire); фикс., не по позиции ─────── */
.lastburn-head, .lastburn-head:hover { background: color-mix(in oklab, var(--surface-top) 95%, var(--fire)) !important; }   /* шапка секции */
.lastburn-section { border-color: color-mix(in oklab, var(--surface-top) 82%, var(--fire)) !important; }                    /* рамка секции */
.lastburn-head    { border-bottom-color: color-mix(in oklab, var(--surface-top) 84%, var(--fire)) !important; }             /* нижняя линия шапки */
.lastburn-badge   { color: oklch(from var(--burn-accent) 0.985 c h) !important; }   /* текст бейджа «N» — near-white ПО ФОРМУЛЕ от burn-accent (чуть тёплый), не чистый #fff */
.bookmarks-badge  { color: oklch(from var(--card-line-2) 0.985 c h) !important; }   /* текст бейджа BOOKMARKS — near-white по формуле от нейтрального card-line-2 */