/* === Sticky header + page-head + sidebar — общий механизм ===
   Шапка остаётся вверху при прокрутке. Под ней — «голова страницы» (заголовок раздела,
   описание, статусные блоки). Sidebar — слева под ними. Прокручивается только основной
   контент (сетка карточек). CSS-переменные --rkh-header-h и --rkh-pagehead-h
   устанавливаются из JS (selection.js) после загрузки. */
:root{ --rkh-header-h: 80px; --rkh-pagehead-h: 0px; }

/* «Голова страницы» — h1 + .lead + .notice — обёрнуты в .rkh-page-head через JS.
   Прилипает к низу header'a, образуя непрерывную фиксированную область сверху. */
.rkh-page-head{
  position: sticky;
  top: var(--rkh-header-h, 80px);
  z-index: 90;
  background: var(--bg, #fbf9f4);
  padding: 8px 0 14px;
  margin: 0 !important;
  border-bottom: 1px solid var(--rule, #dcd6cc);
}
.rkh-page-head > h1{ margin: 6px 0 8px !important; }
.rkh-page-head > p.lead,
.rkh-page-head > .lead{ margin: 0 0 6px !important; }
.rkh-page-head > .notice{ margin: 8px 0 0 !important; }
@media (max-width: 900px){
  .rkh-page-head{ position: static; }
}
body > .wrap > header,
.wrap > header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg, #fbf9f4);
  /* Всё расстояние до контента — ВНУТРИ header (через padding),
     иначе margin-bottom создаст просвет, через который виден прокручивающийся контент. */
  margin-bottom: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--rule, #dcd6cc);
}
/* Лёгкая тень ПОД header — выходит на 8px ниже бордюра и затемняет начало контента */
.wrap > header::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0));
  pointer-events:none;
}
/* Sidebar учитывает sticky-шапку И «голову страницы» */
.sidebar{
  top: calc(var(--rkh-header-h, 80px) + var(--rkh-pagehead-h, 0px) + 14px) !important;
  max-height: calc(100vh - var(--rkh-header-h, 80px) - var(--rkh-pagehead-h, 0px) - 28px) !important;
}
/* На узких экранах sticky-шапка может тратить много места — оставим её, но
   sidebar возвращаем в static (он уже не sticky в media query на самих страницах). */
@media (max-width: 900px){
  body > .wrap > header,
  .wrap > header{ position: static; box-shadow: none; }
  .wrap > header::after{ display:none }
}

/* RKh — единая система выбора по всему сайту.
   Применяется на ЛЮБОЙ карточке сайта (cat, pub, art, txt, per, etc.) одинаково.

   Структура:
     <div class="…-card" style="position:relative">
       …содержимое карточки…
       <button class="rkh-cb [on]" data-rkh-id="ID" aria-label="Перенести в Избранное"></button>
       <span class="rkh-tip" aria-hidden="true">Перенести в Избранное</span>
     </div>

   По умолчанию: маленький белый квадратик 16×16 в правом ВЕРХНЕМ углу.
   При hover → бордовая граница + всплывает tooltip.
   При .on → внутри появляется бордовая галочка.
   Кликабельная зона расширена до 30×30 через ::before.
*/

/* Position relative на любой карточке, в которую мы кладём чекбокс */
.card, .pub-card, .cat-card, .person-card, .txt-card, .exh-card, .vid-card, .work-card, .r-card,
.pubs-card, .cat-set-volume, .row-list > li, .persons-list > li{ position:relative; }
/* Небольшой отступ справа, чтобы галочка не наезжала на текст в строковых списках */
.row-list > li{ padding-right:34px; }
.persons-list > li{ padding-right:26px; }

/* === Сам чекбокс === */
.rkh-cb{
  /* Правый НИЖНИЙ угол — под названием, не на изображении.
     Маленькая, бледная «бумага-карандаш» метка, не привлекающая внимание. */
  position:absolute; bottom:5px; right:5px; top:auto; z-index:5;
  width:20px; height:20px; padding:0;
  background:transparent; border:none; cursor:pointer; opacity:.72;
}
.rkh-cb:hover{ opacity:1; }
.rkh-cb.on{ opacity:1; }

/* Видимый белый квадратик-чекбокс */
.rkh-cb::before{
  content:""; position:absolute;
  top:50%; left:50%;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  background:transparent;
  border:1px solid var(--rule, #cfc7b6); border-radius:2px;
  transition:border-color 0.15s;
}

/* Галочка внутри квадратика (видна при .on) */
.rkh-cb::after{
  content:""; position:absolute;
  top:50%; left:50%;
  width:7px; height:4px; margin:-3px 0 0 -4px;
  border-left:1.4px solid var(--mute, #8a8073);
  border-bottom:1.4px solid var(--mute, #8a8073);
  transform:rotate(-45deg) translate(1px,-1px);
  opacity:0;
  transition:opacity 0.15s;
}
.rkh-cb:hover::before{ border-color: var(--mute, #8a8073); }
.rkh-cb.on::before{ border-color: var(--mute, #8a8073); }
.rkh-cb.on::after{ opacity: 1; }
.rkh-cb:focus-visible{ outline:none; }
.rkh-cb:focus-visible::before{ outline:1.5px solid var(--accent, #7a3b28); outline-offset:2px; }

/* === Tooltip "Перенести в Избранное" === */
.rkh-tip{
  position:absolute;
  bottom:30px; right:6px; top:auto;
  background:transparent; color:var(--mute, #8a8073);
  font-family:Georgia, serif; font-size:11px; font-weight:normal;
  padding:2px 4px; white-space:nowrap;
  pointer-events:none; z-index:11;
  opacity:0; transform:translateY(-4px);
  transition:opacity 0.15s, transform 0.15s;
}
.rkh-cb:hover ~ .rkh-tip,
.rkh-cb:focus-visible ~ .rkh-tip{ opacity:1; transform:translateY(0); }
/* На touch-устройствах tooltip скрываем — там нет hover */
@media (hover: none){ .rkh-tip{ display:none; } }

/* === Подсветка избранной карточки (опциональная) === */
.rkh-selected{ outline:1px solid rgba(122,59,40,0.32); outline-offset:-1px; }

/* === FAB-кнопка «Избранное» — постоянная плавающая в правом нижнем углу === */
#rkh-cart{
  /* 07.2026: вид как у кнопки «Архивный вид» (.view-toggle) — прозрачный фон,
     светлая рамка, моно-капс. Количество остаётся коричневым (акцент). */
  position:fixed; bottom:20px; right:20px; z-index:1000;
  display:flex; align-items:center; gap:0;
  background:transparent; border:1px solid var(--rule, #dcd6cc); border-radius:4px;
  padding:0; overflow:visible;
  font-family:'IBM Plex Mono', monospace;
  transition:border-color 0.18s, background 0.18s;
}
#rkh-cart:hover{ border-color:var(--accent, #7a3b28); }
#rkh-cart:hover .rkh-cart-go{ color:var(--accent, #7a3b28); }
/* Активное состояние: когда в подборке есть элементы */
#rkh-cart.has-items{
  background:transparent;
  border-color:var(--rule, #dcd6cc);
}

/* Главная ссылка-кнопка (открыть Избранное) */
#rkh-cart .rkh-cart-go{
  display:flex; align-items:center; gap:6px;
  padding:4px 9px;
  text-decoration:none;
  color:var(--mute, #8a8073);
  font-size:11px; font-weight:normal;
  text-transform:uppercase; letter-spacing:.06em;
  border-radius:4px;
  white-space:nowrap;
}
#rkh-cart .rkh-cart-go:hover{ text-decoration:none }
#rkh-cart .rkh-cart-star{ display:none }

/* Счётчик-цифра (отдельный блок, видна всегда) */
#rkh-cart .rkh-cart-cnt{
  display:inline-flex; align-items:center;
  min-width:0; height:auto; padding:0;
  background:transparent; color:var(--accent, #7a3b28);
  border-radius:0;
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  font-size:11px; font-weight:normal;
  transition:transform 0.25s;
}
#rkh-cart:not(.has-items) .rkh-cart-cnt{
  background:transparent; color:var(--accent, #7a3b28);
  border:none;
}

/* Pulse-анимация при изменении количества */
@keyframes rkh-cart-pulse{
  0%{ transform:scale(1) }
  40%{ transform:scale(1.25) }
  100%{ transform:scale(1) }
}
#rkh-cart .rkh-cart-cnt.pulse{
  animation: rkh-cart-pulse 0.45s ease-out;
}

/* Маленький крестик «очистить» — только когда есть элементы */
#rkh-cart .rkh-cart-x{
  background:none; border:none; cursor:pointer;
  font-size:16px; padding:0 8px 0 2px; line-height:1; font-family:inherit;
  color:var(--mute, #8a8073);
  display:none;
}
#rkh-cart.has-items .rkh-cart-x{ display:inline-block }
#rkh-cart .rkh-cart-x:hover{ color:var(--accent, #7a3b28) }

/* На очень узких экранах — компактнее */
@media (max-width:520px){
  #rkh-cart{ bottom:14px; right:14px }
  #rkh-cart .rkh-cart-go{ padding:9px 14px; font-size:13px; gap:7px }
  #rkh-cart .rkh-cart-lbl-full{ display:none }
}

/* Подсказка статуса для screen reader-ов */
#rkh-cart .rkh-cart-sr{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* На страницах selected.html скрываем FAB — мы уже здесь */
body.rkh-on-selected #rkh-cart{ display:none !important }

@media print{ #rkh-cart, .rkh-cb, .rkh-tip{ display:none !important; } }

.rkh-nav-cnt{ color: var(--accent, #7a3b28); font-weight:bold; }


/* === Кнопка «В Избранное» на детальной странице (object_detail.html) === */
.rkh-detail-fav{ margin:2px 0 16px; }
.rkh-fav-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:Georgia, serif; font-size:14px; cursor:pointer;
  padding:8px 16px; border-radius:22px;
  background:#fff; color:var(--ink, #222);
  border:1.5px solid var(--rule, #dcd6cc);
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.rkh-fav-btn:hover{ border-color:var(--accent, #7a3b28); }
.rkh-fav-btn .rkh-fav-star{ font-size:17px; line-height:1; color:var(--accent, #7a3b28); }
.rkh-fav-btn.on{ background:var(--accent, #7a3b28); border-color:var(--accent, #7a3b28); color:#fff; }
.rkh-fav-btn.on .rkh-fav-star{ color:#fff; }
@media print{ .rkh-fav-btn, .rkh-detail-fav{ display:none !important; } }

/* === Квадратик «Избранное» во всплывающих окнах превью (единый для всего архива) === */
.rkh-pv-fav{ display:inline-flex; align-items:center; gap:6px; }
.rkh-pv-fav-box{ position:relative; display:inline-block; width:26px; height:26px; flex:0 0 26px; }
.rkh-pv-fav-box .rkh-cb{ position:static; display:block; width:26px; height:26px; opacity:1; }
.rkh-pv-fav-lbl{ font-family:Georgia, serif; font-size:12px; color:var(--mute,#888); }

/* ═══════════════════════════════════════════════════════════════════════════
   Переоформление плавающей кнопки «Избранное» (запрос пользователя):
   намного меньше, без звёздочки, шрифт как у ссылки «Избранное» в шапке
   (Georgia, акцентный цвет), без коричневой заливки. Цифра — в скобках «(N)».
   ═══════════════════════════════════════════════════════════════════════════ */
/* 07.2026: вид как у кнопки «Архивный вид» (.view-toggle) — моно-капс,
   прозрачный фон, светлая рамка, серый текст. Только количество остаётся
   коричневым (акцент). */
#rkh-cart {
  background: transparent;
  border: 1px solid var(--rule, #dcd6cc);
  border-radius: 4px;
  box-shadow: none;
}
#rkh-cart:hover { border-color: var(--accent, #7a3b28); }
#rkh-cart:hover .rkh-cart-go { color: var(--accent, #7a3b28); }
#rkh-cart.has-items {
  background: transparent;
  border-color: var(--rule, #dcd6cc);
}
/* Слово «Избранное» — серым (как «Архивный вид»); коричневым только цифра. */
#rkh-cart.has-items .rkh-cart-go { color: var(--mute, #8a8073); }
#rkh-cart.has-items .rkh-cart-cnt { color: var(--accent, #7a3b28); }
/* Убрать звёздочку. */
#rkh-cart .rkh-cart-star { display: none; }
/* Ссылка: моно-капс, тот же шрифт/размер/цвет, что у .view-toggle. */
#rkh-cart .rkh-cart-go {
  gap: 5px;
  padding: 4px 9px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: normal;
  color: var(--mute, #8a8073);
}
/* Счётчик «(N)» — коричневым (акцент), тем же моно-шрифтом. */
#rkh-cart .rkh-cart-cnt {
  min-width: 0; height: auto; margin: 0; padding: 0;
  background: none; border: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: normal;
  color: var(--accent, #7a3b28);
}
#rkh-cart .rkh-cart-cnt::before { content: "("; }
#rkh-cart .rkh-cart-cnt::after  { content: ")"; }
#rkh-cart:not(.has-items) .rkh-cart-cnt { display: none; }
/* Крестик «очистить» — серый, мелкий. */
#rkh-cart .rkh-cart-x,
#rkh-cart.has-items .rkh-cart-x { color: var(--mute, #8a8073); font-size: 14px; padding: 0 8px 0 2px; }
#rkh-cart .rkh-cart-x:hover { color: var(--accent, #7a3b28); }

/* Кнопка «В Избранное / В Избранном» на странице работы:
   без звёздочки и без тёмной коричневой заливки в активном состоянии. */
.rkh-fav-btn .rkh-fav-star { display: none; }
.rkh-fav-btn.on {
  background: var(--soft, #f4efe6);
  border-color: var(--accent, #7a3b28);
  color: var(--accent, #7a3b28);
}
.rkh-fav-btn.on .rkh-fav-star { color: var(--accent, #7a3b28); }

/* Рамка кнопки избранного — прямоугольная и нежная (как PDF/Печать).
   Неактив — прозрачный фон; актив — лёгкий фон (выше) + галочка «✓». */
.rkh-fav-btn {
  border-radius: 6px;
  border: 1px solid var(--border, #d8d3c7);
  background: transparent;
}
.rkh-fav-btn.on::before {
  content: "✓";
  font-weight: bold;
  color: var(--accent, #7a3b28);
}