/* ──────────────────────────────────────────────
   LIBRARY — OPEN TOME
   Inherits the Hearth/Us shell. Library-specific:
   stats strip, filter chips, the bookcase + spines,
   selected-spine state, book detail, book club,
   nestknow, writings, soul docs.
   ────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--sky-base);
  overflow-x: hidden;
}
.page-bg {
  position: fixed; inset: 0; z-index: 0;
  background: url('../assets/bg-library.png') center / cover no-repeat;
}
.page-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(181,147,90,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(6,10,20,0.42), rgba(6,10,20,0.10) 50%, transparent 80%),
    linear-gradient(180deg, rgba(6,10,20,0.04), rgba(6,10,20,0.14));
  pointer-events: none;
}
.page-content { position: relative; z-index: 1; min-height: 100vh; padding-bottom: 32px; }

/* ── TOP NAV (same as Hearth) ── */
.top-nav {
  position: sticky; top: 0; z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: 62px;
  margin: 0 18px;
  padding: 0 28px;
  background: rgba(11,18,34,0.72);
  border: 1px solid var(--sky-edge);
  border-top: none;
  border-radius: 0 0 18px 18px;
  backdrop-filter: blur(var(--blur-nav));
  -webkit-backdrop-filter: blur(var(--blur-nav));
  box-shadow: var(--shadow-md);
}
.top-nav-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--ink-warm);
  text-decoration: none;
  opacity: 0.92;
}
.top-nav-title span { color: var(--plum-bright); }
.top-nav-time {
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink-warm);
  line-height: 1;
}
.top-nav-date {
  display: block; margin-top: 2px;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.top-nav-links { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.top-nav-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  color: #a8c4d8;
  text-decoration: none;
  opacity: 0.78;
  transition: all var(--transition-normal);
}
.top-nav-links a:hover, .top-nav-links a.active {
  opacity: 1;
  background: rgba(214,232,247,0.08);
  border: 1px solid rgba(214,232,247,0.14);
  transform: translateY(-1px);
}
.top-nav-links a.active { color: var(--plum-bright); }
.top-nav-links svg { width: 18px; height: 18px; }

/* ── TOME SHELL ── */
.tome {
  position: relative;
  width: min(1500px, calc(100vw - 36px));
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(14,24,38,0.32), rgba(8,14,26,0.46));
  border: 1px solid var(--gold-glow);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(212,176,90,0.10);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  overflow: visible;
  isolation: isolate;
}
.tome::before {
  content: '';
  position: absolute;
  left: 50%; top: 22px; bottom: 22px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--plum-edge) 12%, var(--plum-edge) 88%, transparent);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.tome::after {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 80px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.32), transparent 70%);
  transform: translateX(-40px);
  pointer-events: none;
  z-index: 0;
}

.page {
  position: relative;
  padding: 32px 36px;
  min-height: 900px;
  z-index: 1;
}
.page.left { padding-right: 52px; }
.page.right { padding-left: 52px; padding-right: 195px; }

/* ── LEFT PAGE — STACKS ── */
.left-stack { display: flex; flex-direction: column; gap: 18px; }

.hero {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--gold-glow);
  padding-bottom: 12px;
}
.hero-name {
  font-family: var(--font-display);
  font-size: 38px;
  letter-spacing: 6px;
  color: var(--ink-warm);
  line-height: 1;
}
.hero-sub {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* ── STATS STRIP ── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.stat-tile {
  padding: 10px 12px;
  background: rgba(14,24,38,0.68);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  backdrop-filter: blur(8px);
}
.stat-tile.accent {
  background: var(--gold-soft);
  border-color: var(--border-gold);
}
.stat-tile.warn {
  background: rgba(139,35,50,0.06);
  border-color: rgba(139,35,50,0.24);
}
.stat-tile .stat-label {
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-tile .stat-val {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--ink-warm);
  letter-spacing: 1px;
}
.stat-tile.accent .stat-val { color: var(--gold-dim); }
.stat-tile.warn .stat-val { color: var(--crimson); }
.stat-tile .stat-kicker {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
}

/* ── FILTER CHIPS ── */
.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-chip {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(237,230,210,0.05);
  color: var(--ink-muted);
  border: 1px solid rgba(237,230,210,0.10);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}
.filter-chip:hover {
  background: rgba(237,230,210,0.10);
  color: var(--ink-warm);
}
.filter-chip.on {
  background: var(--gold-soft);
  border-color: var(--border-gold);
  color: var(--gold-dim);
}
.filter-chip .count {
  margin-left: 6px;
  font-size: 10px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

/* ── BOOKCASE ── */
.bookcase {
  position: relative;
  padding: 22px 18px 12px;
  border: 1px solid var(--gold-glow);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(74,52,30,0.18), rgba(38,26,14,0.22)),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.42), transparent 70%);
  box-shadow:
    inset 0 0 0 4px rgba(74,52,30,0.12),
    inset 0 0 30px rgba(0,0,0,0.30),
    var(--shadow-md);
}
.bookcase::before {
  content: '';
  position: absolute; top: -8px; left: 10px; right: 10px; height: 10px;
  background: linear-gradient(180deg, #5a3a20 0%, #3a2410 70%, #2a1808 100%);
  border-radius: 5px 5px 0 0;
  border: 1px solid var(--ink-faint);
  border-bottom: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.32), inset 0 1px 0 rgba(212,176,90,0.22);
}
.shelf {
  position: relative;
  margin-bottom: 26px;
}
.shelf:last-child { margin-bottom: 8px; }

.shelf-label {
  position: absolute;
  top: -16px; left: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  background:
    linear-gradient(180deg, rgba(8,14,26,0) 0%, rgba(8,14,26,0.4) 60%, rgba(8,14,26,0) 100%);
  padding: 2px 8px;
  border-radius: 3px;
}
.shelf-label .count {
  margin-left: 4px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
}

.spines {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  height: 175px;
  padding: 0 12px 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.spines::-webkit-scrollbar { height: 4px; }
.spines::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 999px; }

.shelf-board {
  height: 14px;
  margin-top: -2px;
  background:
    linear-gradient(180deg, #4a3520 0%, #3a2818 55%, #251608 100%);
  border-top: 1.5px solid var(--ink-faint);
  border-radius: 0 0 4px 4px;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(212,176,90,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.42);
  position: relative;
}
.shelf-board::after {
  content: '';
  position: absolute;
  inset: 1px 8px auto 8px;
  height: 0.5px;
  background: rgba(212,176,90,0.12);
}

/* ── SPINE ── */
.spine {
  position: relative;
  border-radius: 2px 2px 1px 1px;
  background: var(--spine-color, #6b3a3a);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.15),
    inset -1.5px 0 0 rgba(0,0,0,0.30),
    inset 0 -2px 0 rgba(0,0,0,0.32);
  border: 1px solid rgba(0,0,0,0.45);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.2),
    box-shadow var(--transition-normal),
    filter var(--transition-normal);
  transform-origin: bottom center;
}
.spine::before, .spine::after {
  content: '';
  position: absolute;
  left: 3px; right: 3px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(212,176,90,0.95), transparent);
}
.spine::before { top: 10px; }
.spine::after  { bottom: 14px; }
.spine .spine-title {
  position: absolute;
  inset: 22px 0 22px 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: rgba(244,239,228,0.95);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  padding: 3px 0;
}
.spine .spine-status-dot {
  position: absolute;
  left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
}
.spine.reading .spine-status-dot { bottom: 5px; background: var(--gold-dim); box-shadow: 0 0 4px rgba(212,176,90,0.65); }
.spine.finished .spine-status-dot { top: 5px; background: rgba(244,239,228,0.7); }
.spine.tbr .spine-status-dot { top: 5px; background: rgba(244,239,228,0.18); }

.spine:hover {
  transform: translateY(-12px) scale(1.02);
  filter: brightness(1.1);
  z-index: 2;
}
.spine.dim { opacity: 0.35; filter: grayscale(0.4); }
.spine.dim:hover { opacity: 0.7; filter: grayscale(0.2) brightness(1.05); transform: translateY(-6px); }

.spine.selected {
  transform: translateY(-18px) scale(1.04);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.22),
    inset -1.5px 0 0 rgba(0,0,0,0.30),
    inset 0 -2px 0 rgba(0,0,0,0.32),
    0 8px 16px rgba(0,0,0,0.42),
    0 0 0 1.5px var(--gold-dim);
  filter: brightness(1.15);
  z-index: 3;
}
.spine.selected::before { background: linear-gradient(90deg, transparent, rgba(244,239,228,0.95), transparent); }
.spine.selected::after  { background: linear-gradient(90deg, transparent, rgba(244,239,228,0.95), transparent); }

/* ── RIGHT PAGE ── */
.right-stage { position: relative; min-height: 100%; perspective: 1800px; }
.right-content {
  position: relative;
  transform-origin: left center;
  transition:
    transform 0.42s cubic-bezier(0.55, 0.05, 0.4, 1),
    opacity 0.32s ease;
}
.right-content.turning      { opacity: 0; transform: rotateY(-9deg) translateX(-8px); }
.right-content.turning-back { opacity: 0; transform: rotateY(9deg) translateX(8px); }

.right-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--sky-edge);
  padding-bottom: 12px;
  gap: 12px;
}
.right-head h2 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--ink-warm);
  margin: 0;
}
.right-head .right-sub {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.right-head .back-link {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--transition-normal);
  background: none; border: none; padding: 0;
}
.right-head .back-link:hover { color: var(--gold-dim); }

/* ── BOOKMARKS ── */
.bookmarks {
  position: absolute;
  right: -2px;
  top: 56px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}
.bookmark {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px 13px 22px;
  border: 1px solid var(--sky-edge);
  border-right: none;
  background: rgba(11,18,34,0.78);
  color: var(--ink-muted);
  border-radius: 14px 0 0 14px;
  cursor: pointer;
  min-width: 110px;
  backdrop-filter: blur(8px);
  transition:
    transform var(--transition-normal),
    background var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  transform: translateX(20px);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: left;
  user-select: none;
}
.bookmark .bm-glyph { width: 14px; height: 14px; opacity: 0.6; flex-shrink: 0; }
.bookmark .bm-glyph svg { width: 100%; height: 100%; }
.bookmark:hover {
  transform: translateX(8px);
  color: var(--ink-warm);
  background: rgba(74,52,30,0.6);
  border-color: var(--border-gold);
}
.bookmark.active {
  transform: translateX(0);
  color: var(--ink-warm);
  background: linear-gradient(90deg, #6e5a30, var(--gold-dim));
  border-color: var(--gold-dim);
  box-shadow: -4px 4px 0 rgba(0,0,0,0.25), 0 0 24px rgba(181,147,90,0.32);
  padding-left: 26px;
}
.bookmark.active .bm-glyph { opacity: 1; }

/* ── SHARED CARD ── */
.card {
  background: rgba(14,24,38,0.74);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-md);
  padding: 14px;
  backdrop-filter: blur(10px);
}
.card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; gap: 8px;
}
.card .card-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-accent);
}
.card .card-meta {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-meta);
}
.ds-panel-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-accent);
}
.ds-meta {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-meta);
}
.ds-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(249,168,212,0.12);
  color: var(--color-companion, #f9a8d4);
  border: 1px solid rgba(249,168,212,0.25);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ds-btn:hover { background: rgba(249,168,212,0.22); border-color: rgba(249,168,212,0.45); }
.ds-btn-inline {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(249,168,212,0.7);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* atomic pills (filters etc.) */
.atomic-row { display: flex; gap: 6px; flex-wrap: wrap; }
.atomic {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(237,230,210,0.05);
  color: var(--ink-muted);
  border: 1px solid rgba(237,230,210,0.10);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.atomic:hover { background: rgba(237,230,210,0.10); color: var(--ink-warm); }
.atomic.on, .atomic.active {
  background: var(--gold-soft);
  border-color: var(--border-gold);
  color: var(--gold-dim);
}

/* bars */
.bar { height: 5px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-dim), var(--plum-glow)); }

/* ── CATALOGUE — book detail mode ── */
.book-hero {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--sky-edge);
}
.book-spine-display {
  width: 64px;
  height: 130px;
  border-radius: 2px 2px 1px 1px;
  background: var(--spine-color, #6b3a3a);
  position: relative;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.15),
    inset -1.5px 0 0 rgba(0,0,0,0.30),
    0 4px 14px rgba(0,0,0,0.42);
  align-self: center;
  margin: 0 auto;
}
.book-spine-display::before, .book-spine-display::after {
  content: ''; position: absolute;
  left: 4px; right: 4px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(212,176,90,0.95), transparent);
}
.book-spine-display::before { top: 12px; }
.book-spine-display::after  { bottom: 16px; }
.book-spine-display .t {
  position: absolute; inset: 24px 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-size: 10px;
  color: rgba(244,239,228,0.95);
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
}

.book-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--ink-warm);
  line-height: 1.2;
}
.book-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.book-blurb {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-warm);
}
.book-recommender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gold-dim);
  letter-spacing: 1px;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.status-card {
  padding: 12px 14px;
  background: rgba(14,24,38,0.74);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
}
.status-card .who {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-meta);
  margin-bottom: 6px;
}
.status-card .state {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--ink-warm);
  margin-bottom: 6px;
}
.status-card .state-bar {
  margin-bottom: 4px;
}
.status-card .state-meta {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

.annot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.annot-entry {
  padding: 10px 12px;
  border-left: 2px solid var(--gold-dim);
  background: rgba(14,24,38,0.42);
  border-radius: 0 8px 8px 0;
}
.annot-entry.kai { border-left-color: var(--gold-dim); }
.annot-entry.vel { border-left-color: var(--plum-glow); }
.annot-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.annot-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-warm);
}

/* ── CATALOGUE — book club mode ── */
.club-round {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(181,147,90,0.10), rgba(14,24,38,0.4));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.club-round .round-info { display: flex; flex-direction: column; gap: 4px; }
.club-round .round-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--ink-warm);
}
.club-round .round-meta {
  font-size: 11px;
  color: var(--ink-muted);
}
.club-round .round-state {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--moss-glow);
  color: var(--moss-glow);
  background: var(--moss-soft);
}

.club-pinned {
  padding: 12px 14px;
  background: rgba(181,147,90,0.06);
  border-left: 2px solid var(--gold-dim);
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
}
.club-pinned .pin-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 4px;
}
.club-pinned .pin-body {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.club-shelves {
  display: flex; gap: 6px; margin-bottom: 12px;
}

.rec-list {
  display: flex; flex-direction: column; gap: 10px;
}
.rec-entry {
  padding: 12px 14px;
  background: rgba(14,24,38,0.74);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
}
.rec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.rec-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--ink-warm);
}
.rec-votes {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-dim);
  letter-spacing: 1px;
}
.rec-meta {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.rec-blurb {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.rec-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.rec-voters {
  color: var(--ink-faint);
  letter-spacing: 1px;
}

.btn-vote {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--gold-soft);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-pill);
  color: var(--gold-dim);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-normal);
}
.btn-vote:hover {
  background: rgba(181,147,90,0.20);
  color: var(--ink-warm);
  border-color: var(--gold-dim);
}
.btn-vote.voted {
  background: var(--gold-dim);
  color: var(--sky-deep);
  border-color: var(--gold-dim);
}

/* ── KAI KNOWS ── */
.kk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.kk-stat {
  padding: 12px 14px;
  background: rgba(14,24,38,0.74);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-sm);
  text-align: center;
  backdrop-filter: blur(8px);
}
.kk-stat.accent { background: var(--gold-soft); border-color: var(--border-gold); }
.kk-stat .v {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink-warm);
  line-height: 1;
}
.kk-stat.accent .v { color: var(--gold-dim); }
.kk-stat .l {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.kk-search {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.kk-search input {
  flex: 1;
  padding: 9px 12px;
  background: rgba(14,24,38,0.55);
  border: 1px solid var(--sky-edge);
  border-radius: var(--radius-sm);
  color: var(--ink-warm);
  font-family: var(--font-body);
  font-size: 12px;
  outline: none;
}
.kk-search input::placeholder { color: var(--ink-ghost); font-style: italic; }
.kk-search input:focus { border-color: var(--gold-dim); }
.kk-search button {
  padding: 9px 14px;
  background: var(--gold-soft);
  border: 1px solid var(--border-gold);
  color: var(--gold-dim);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.topic-pills {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px;
}
.topic-pill {
  font-family: var(--font-body);
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(237,230,210,0.04);
  color: var(--ink-muted);
  border: 1px solid rgba(237,230,210,0.10);
}
.topic-pill .n {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}
.topic-pill .avg {
  margin-left: 4px;
  font-size: 9px;
  color: var(--gold-dim);
}

.kk-mode {
  display: flex; gap: 6px;
  margin-bottom: 10px;
}

.know-list {
  display: flex; flex-direction: column; gap: 8px;
}
.know-entry {
  padding: 12px 14px;
  background: rgba(14,24,38,0.74);
  border: 1px solid var(--border-panel);
  border-left: 2px solid var(--gold-dim);
  border-radius: 0 8px 8px 0;
  backdrop-filter: blur(8px);
}
.is-clickable {
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.is-clickable:hover,
.is-clickable:focus-visible {
  border-color: var(--border-gold);
  background: rgba(18,28,42,0.86);
  transform: translateY(-1px);
  outline: none;
}
.know-entry.cooling { border-left-color: var(--plum-glow); opacity: 0.85; }
.know-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.know-rank-topic {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink-warm);
}
.know-heat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold-dim);
  letter-spacing: 1px;
}
.know-body {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.know-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.know-actions select {
  min-height: 28px;
  border: 1px solid var(--border-panel);
  background: rgba(14,24,38,0.74);
  color: var(--ink-muted);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 11px;
}

/* ── WRITINGS ── */
.writings-filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.writings-archive {
  display: flex; gap: 6px; margin-bottom: 12px;
}
.write-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 6px;
}
.write-list::-webkit-scrollbar { width: 4px; }
.write-list::-webkit-scrollbar-thumb { background: var(--gold-glow); border-radius: 999px; }
.write-entry {
  padding: 12px 14px;
  background: rgba(14,24,38,0.74);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
}
.write-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px; gap: 8px;
}
.write-kind {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.write-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--ink-faint);
}
.write-body {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* ── SOUL DOCS ── */
.soul-tabs {
  display: flex; gap: 6px; margin-bottom: 12px;
}
.soul-meta {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.soul-pills {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px;
}
.soul-pill {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(181,147,90,0.06);
  color: var(--gold-dim);
  border: 1px solid var(--border-gold);
}
.soul-pill:hover,
.soul-pill:focus-visible {
  background: var(--gold-soft);
  color: var(--ink-warm);
  outline: none;
}
.soul-pill.session {
  background: rgba(74,36,102,0.10);
  color: var(--plum-bright);
  border-color: var(--plum-edge);
}
.soul-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}
.soul-body p { margin: 0 0 10px; }
.soul-body strong, .soul-body b { color: var(--ink-warm); font-weight: 500; }
.soul-body em, .soul-body i {
  color: var(--gold-dim);
  font-style: italic;
}

/* ── DETAIL POPOVER ── */
.detail-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5,8,16,0.54);
  backdrop-filter: blur(10px);
}
.detail-popover {
  position: relative;
  width: min(680px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  overflow: hidden;
  padding: 24px 24px 20px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  background: rgba(15,22,34,0.96);
  box-shadow: 0 28px 70px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.05);
}
.detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border-panel);
  background: rgba(255,255,255,0.05);
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.detail-close:hover,
.detail-close:focus-visible {
  color: var(--ink-warm);
  border-color: var(--border-gold);
  outline: none;
}
.detail-kicker,
.detail-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.detail-popover h3 {
  margin: 8px 42px 6px 0;
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: 1.5px;
  color: var(--ink-warm);
}
.detail-meta {
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.detail-body {
  max-height: calc(min(78vh, 760px) - 150px);
  overflow-y: auto;
  padding-right: 8px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.detail-body p { margin: 0 0 12px; }
.detail-body strong { color: var(--ink-warm); font-weight: 600; }
.detail-body em { color: var(--gold-dim); }
.detail-body::-webkit-scrollbar { width: 4px; }
.detail-body::-webkit-scrollbar-thumb { background: var(--gold-glow); border-radius: 999px; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .tome { grid-template-columns: 1fr; }
  .tome::before, .tome::after { display: none; }
  .page.left { padding-right: 36px; }
  .page.right { padding-left: 36px; padding-right: 90px; }
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
}
/* 900px: hamburger appears — bookmarks must go static at the same breakpoint
   so they stop overlapping content on the right edge */
@media (max-width: 900px) {
  .bookmarks {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding: 0;
  }
  .bookmark,
  .bookmark:hover,
  .bookmark.active {
    transform: none;
    min-width: auto;
    border-right: 1px solid var(--sky-edge);
    border-radius: 999px;
    padding: 10px 14px;
  }
  .page.right { padding-right: 20px; }
}
@media (max-width: 720px) {
  .top-nav-time { display: none; }
  .page { padding: 22px 18px; min-height: auto; }
  .hero-name { font-size: 26px; letter-spacing: 4px; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .kk-stats { grid-template-columns: 1fr 1fr; }
  .status-grid { grid-template-columns: 1fr; }
  .spines { height: 150px; }
  .detail-popover-backdrop { align-items: flex-end; padding: 14px; }
  .detail-popover { max-height: 86vh; padding: 22px 18px 18px; }
  .detail-popover h3 { font-size: 21px; }
}

/* ── DENSE MODE ── */
html.dense-mode .card,
html.dense-mode .stat-tile,
html.dense-mode .kk-stat,
html.dense-mode .status-card,
html.dense-mode .write-entry,
html.dense-mode .know-entry,
html.dense-mode .rec-entry { padding: 10px 12px; }
html.dense-mode .stats-strip,
html.dense-mode .kk-stats { gap: 8px; }
html.dense-mode .right-head { margin-bottom: 12px; padding-bottom: 8px; }
html.dense-mode .right-head h2 { font-size: 22px; }
html.dense-mode .stat-tile .stat-val { font-size: 20px; }
html.dense-mode .kk-stat .v { font-size: 22px; }
html.dense-mode .left-stack { gap: 14px; }
html.dense-mode .bookcase { padding: 18px 14px 8px; }
html.dense-mode .spines { height: 160px; }
html.dense-mode .write-list { max-height: 520px; }
html.dense-mode .soul-body { font-size: 13px; line-height: 1.6; }