/* ============================================================
   library.css — компоненты страницы /index.html (Библиотека)

   Структура:
     <header.topbar.topbar--lib>
       <div.topbar__left>
         <div.brand>Margins club</div>
         <nav.breadcrumb><span.breadcrumb__item.is-current>Библиотека</span></nav>
       <div.user-controls>...</div>
     <main.page.page--lib>
       <section.library-screen>
         <p.library-screen__lead>...</p>
         <div.shelf>     ← grid-полка с книгами
           <a.book-spine>  ← обложка (2:3 aspect, серия = одинаковый corner)
         </div>
         <p.library-screen__footnote>...</p>

   Дизайн:
     - Brand + breadcrumb stacked сверху-слева
     - Page имеет padding-left чтобы не перекрывать settings-trigger
     - Книги: 2:3 aspect ratio (как реальная книжная обложка), мин 110px ширина
     - Series accent: первая книга серии получает class .book-spine--series-start
       (corner-fold ornament), остальные той же серии .book-spine--series-cont
   ============================================================ */

/* ===== Topbar (библиотечный режим) =====
   Структура (зеркалит .w → .w__tr из reader):
     ROW 1: [brand]  ━ menu-trigger
     ROW 2: [Библиотека chip]   ← висит ПОД brand как перевод под словом
*/
.topbar--lib {
  display: flex;
  align-items: center;                 /* 2026-05-15 v18: было flex-start, переключено
                                          на center — menu-trigger теперь визуально на
                                          уровне середины brand-stack (user: «позиционирование
                                          ровнее»). Ниточка к breadcrumb chip остаётся
                                          корректной (она absolute-позиционирована). */
  justify-content: flex-start;         /* siblings: stack, menu, ... user-controls справа */
  padding: 18px 24px;
  gap: 14px;                           /* loose coupling brand-stack ↔ menu-trigger */
  background: transparent;
  border: 0;
  /* 2026-05-11 v5: explicit border-bottom — это та линия на которой будут жить bookmark hearts.
     User: "наша полоска закладок — это та линия которая уже есть, разделяющая шапку от текста". */
  border-bottom: 1px solid var(--border-soft);
  position: relative;                  /* для absolute-positioning .bookmarks-panel inside */
}

/* 2026-05-11: topbar__right в reader.html (где живёт page-nav widget + menu trigger)
   — push к правому краю topbar'а через margin-left: auto. */
.topbar--lib .topbar__right {
  margin-left: auto;                   /* push в правый угол */
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar--lib .user-controls {
  margin-left: auto;                   /* user-controls к правому краю */
}

.topbar__brand-stack {
  position: relative;                  /* для абсолютной chip ниже */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.topbar--lib .brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--ink);
}

/* Breadcrumb chip — стилизован 1:1 как .w__tr translation chip из reader.
   Висит ПОД brand'ом (отдельная row). */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb--hanging {
  /* chip уже центруется через align-items: center у brand-stack */
  position: relative;
}

/* Полосочка-ниточка от центра Margins club к центру chip */
.breadcrumb--hanging::before {
  content: "";
  position: absolute;
  bottom: 100%;                        /* начинается над chip */
  left: 50%;                           /* центр chip */
  transform: translateX(-50%);
  width: 1px;
  height: 14px;                        /* длина ниточки (= gap brand → chip) */
  background: var(--border);
  pointer-events: none;
}

.breadcrumb__chip {
  display: inline-flex;
  align-items: center;
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--border-soft) 60%, transparent);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-family: var(--font-body);       /* Lora — как в .w__tr */
  font-size: 13px;
  line-height: 1.3;
  color: var(--translation);           /* тёплый коричневый — как у переводов */
  white-space: nowrap;
}

.breadcrumb__chip + .breadcrumb__chip::before {
  content: "·";
  margin: 0 6px;
  color: var(--ink-faint);
}

/* ===== Library page layout ===== */
.page--lib {
  padding: 12px 24px 48px;            /* симметричный padding, settings теперь inline */
  max-width: 1280px;
  margin: 0 auto;
}

.library-screen__lead {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.library-screen__lead em {
  font-style: italic;
  color: var(--ink);
}

.library-screen__footnote {
  margin-top: 32px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  max-width: 640px;
  line-height: 1.5;
}

/* ===== Shelf — grid книг ===== */
.shelf {
  display: grid;
  /* книги с фиксированной shelf-row: высчитываем колонки по min ширине обложки */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 22px 16px;
  align-items: start;
}

/* Подсказка для крупных экранов: ограничиваем размер карточки чтобы было видно много */
@media (min-width: 900px) {
  .shelf { grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); }
}

/* ===== Book spine — обложка с pixel-art сторонкой ===== */
.book-spine {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: transform 0.12s ease;
}

.book-spine:hover {
  transform: translateY(-2px);
}

/* Cover area — 2:3 aspect ratio, как у настоящих книг */
.book-spine__cover {
  aspect-ratio: 2 / 3;
  background: var(--surface-2);
  border-radius: 4px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 12px 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.book-spine:hover .book-spine__cover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-soft);
}

/* Базовый фон — однотонный (--cover-bg per-book, см. ниже).
   Pixel-art motif рендерится поверх через inline SVG (см. library.js → pixelCoverSVG). */
.book-spine__cover {
  background: var(--cover-bg, var(--surface-2));
}

/* Pixel-art SVG — fills cover полностью, image-rendering pixelated для чётких пикселей */
.book-spine__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  image-rendering: pixelated;          /* Firefox/Chrome */
  image-rendering: crisp-edges;        /* Safari fallback */
  pointer-events: none;
  /* currentColor используется в SVG для углов — задаём через --cover-meta */
  color: var(--cover-meta, var(--ink-faint));
}

/* === Анимации pixel-art === */

/* Twinkle звёзд — 3 разных фазы для естественности */
@keyframes coverTwinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

.book-spine__art .cover-twinkle {
  animation: coverTwinkle 3s ease-in-out infinite;
}

.book-spine__art .cover-twinkle.s1 { animation-duration: 3s;   animation-delay: 0s;   }
.book-spine__art .cover-twinkle.s2 { animation-duration: 2.4s; animation-delay: 0.6s; }
.book-spine__art .cover-twinkle.s3 { animation-duration: 4s;   animation-delay: 1.2s; }

/* Pulse — для свечения вокруг центрального мотива */
@keyframes coverPulse {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.42; transform: scale(1.08); }
}

.book-spine__art .cover-pulse {
  animation: coverPulse 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Flame tip — у Spark кончик пламени дёргается */
@keyframes coverFlame {
  0%, 100% { transform: translateY(0)    scaleY(1);   opacity: 1; }
  50%      { transform: translateY(-1px) scaleY(1.4); opacity: 0.85; }
}

.book-spine__art .cover-flame {
  animation: coverFlame 0.9s ease-in-out infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
}

/* Уважаем prefers-reduced-motion — отключаем все анимации */
@media (prefers-reduced-motion: reduce) {
  .book-spine__art .cover-twinkle,
  .book-spine__art .cover-pulse,
  .book-spine__art .cover-flame {
    animation: none;
  }
}

/* Series ribbon: angled triangle in top-right corner, цвет общий для серии */
.book-spine__cover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent var(--series-color, var(--accent)) transparent transparent;
  z-index: 2;
}

.book-spine__num {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cover-meta, var(--ink-faint));
  font-weight: 500;
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
}

.book-spine__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cover-title, var(--ink));
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 var(--surface);
}

/* Прогресс-бар под cover */
.book-spine__progress {
  margin-top: 8px;
  height: 2px;
  background: var(--surface-2);
  border-radius: 1px;
  overflow: hidden;
}

.book-spine__progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.book-spine__progress-label {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  line-height: 1.2;
}

/* ===== Series colour palettes ===== */
/* Kindred's Curse — каждая книга своя обложка-tone, но series-color общий */
.book-spine[data-series="kindreds-curse"] {
  --series-color: #a04330;       /* терракота как accent */
}

/* Единая canonical green palette для всех книг серии (Spark/Glow/Heat).
   Различение между книгами — через illustration внутри SVG, не через bg-цвет.
   Раньше каждая книга имела свой hex (forest/purple/brown) — теперь cohesive. */
.book-spine[data-book="spark"],
.book-spine[data-book="glow"],
.book-spine[data-book="heat"] {
  --cover-bg:     #2a4a3a;        /* лесной зелёный — близко к canonical --accent */
  --cover-tone-1: #1f3a2c;
  --cover-tone-2: #2a4a3a;
  --cover-title:  #f3eee5;        /* кремовый title как у пилотных linen-страниц */
  --cover-meta:   #c8bda3;        /* warm muted для "КНИГА N" label */
}

/* ===== Multilang-demo covers — отличаются от kindreds-curse визуально =====
   Каждый язык несёт свой tone (отражает культурный стиль скриптa). Series-ribbon
   убран (он привязан к kindreds-curse концепции), вместо него — крупный native
   script display в центре. Language badge в top-left corner. */
.book-spine[data-series="multilang-demo"] .book-spine__cover::after {
  display: none;                   /* убираем series-ribbon (kindreds-curse-specific) */
}

.book-spine[data-lang="zh"] { --cover-bg: #2a3a4a; --cover-title: #e8e4d9; --cover-meta: #9bb0c8; }  /* indigo, как тушь */
.book-spine[data-lang="fr"] { --cover-bg: #4a3a4a; --cover-title: #f3eee5; --cover-meta: #d0b8c0; }  /* виноградный */
.book-spine[data-lang="es"] { --cover-bg: #4a3a2a; --cover-title: #f3eee5; --cover-meta: #d4b878; }  /* терракотовый */
.book-spine[data-lang="hi"] { --cover-bg: #4a2a3a; --cover-title: #f3eee5; --cover-meta: #e0a098; }  /* шафран-roza */
.book-spine[data-lang="he"] { --cover-bg: #2a3a3a; --cover-title: #f3eee5; --cover-meta: #b8c8b0; }  /* оливковый */
.book-spine[data-lang="ar"] { --cover-bg: #3a3a2a; --cover-title: #f3eee5; --cover-meta: #d4c088; }  /* охра-пустыня */

/* Native script — крупно по центру cover (вместо pixel art) */
.book-spine__native {
  font-family: var(--font-display, serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--cover-title, var(--ink));
  text-align: center;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.01em;
}

/* English-only Latin title — мельче когда native script сверху */
.book-spine__name--small {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.85;
  text-align: center;
  margin-top: 4px;
}

/* Language badge — top-left corner. Низ-приоритетный визуально (small + muted) */
.book-spine__lang-badge {
  position: absolute;
  top: 6px; left: 6px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cover-meta, var(--ink-faint));
  background: color-mix(in oklab, var(--cover-bg, var(--surface)) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--cover-meta, var(--ink-faint)) 40%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  z-index: 3;
  pointer-events: none;
}

/* Mobile: меньшая полка, чуть мельче */
@media (max-width: 600px) {
  .topbar--lib { padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .page--lib { padding: 8px 16px 32px; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px 12px; }
  .book-spine__cover { padding: 10px 8px; }
  .book-spine__name { font-size: 12px; }
  .topbar--lib .brand { font-size: 18px; }
}