/* Library Styles */

/* ============================================
   XPLORE — browse: sticky tabs, then the feed.
   ============================================ */

/* People: the creators shelf in the feed and the people slice in results
   share this one component. */
.xplore-people { width: 100%; max-width: 1120px; min-width: 0; }
.xplore-people-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.xplore-people-heading span { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.xplore-people-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.xplore-people-track::-webkit-scrollbar { display: none; }
.xplore-person {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 104px;
}
.xplore-person-id {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  color: var(--text-primary);
  text-decoration: none;
}
.xplore-person-id:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.xplore-person-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.xplore-person-name {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.xplore-person-id:hover .xplore-person-name { color: var(--brand-primary); }
.xplore-follow-btn {
  padding: 5px 14px;
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text, #fff);
  cursor: pointer;
}
.xplore-follow-btn.is-following { background: none; color: var(--text-secondary); border-color: var(--border); }
.xplore-follow-btn.is-following:hover { color: var(--danger, #E5484D); border-color: var(--danger, #E5484D); }
.xplore-follow-btn:disabled { opacity: 0.6; cursor: default; }

/* Feed slices: shelf rows of cards and people above the masonry */
.xplore-slice { min-width: 0; }
.xplore-slice-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.xplore-slice-title span { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.xplore-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
}
.xplore-row::-webkit-scrollbar { display: none; }
.xplore-row > * { flex: 0 0 clamp(230px, 26vw, 300px); }
.xplore-row > .collection-tag-card { flex-basis: clamp(300px, 40vw, 420px); }
/* Shelf gliims are the same cards as the grid, so they keep the grid's proportions. */
.xplore-row .blog-cover { height: 180px; }
.xplore-row .blog-content { padding: 18px; }
.xplore-row .blog-title { font-size: 18px; margin-bottom: 8px; }
.xplore-row .blog-desc { font-size: 14px; -webkit-line-clamp: 2; margin-bottom: 16px; }

/* Results live on their own page now (views/search.js + search.css); this file
   keeps only the pieces it shares with it: people, slices and rows. */

@media (max-width: 768px) {
  .xplore-person { width: 88px; }
  .xplore-person-avatar { width: 44px; height: 44px; }
  .xplore-row > * { flex-basis: 78vw; }
}

/* Topbar Filter */
#topbar-right-actions .lib-filter-wrapper { position: relative; margin-left: auto; }
#topbar-right-actions .lib-filter-btn { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 12px; width: 38px; height: 38px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
#topbar-right-actions .lib-filter-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.lib-dropdown-menu {
  display: none;
  position: absolute;
  top: 120%; /* Default: Opens downwards */
  right: 0;
  left: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
}
.lib-dropdown-menu.active { display: block; }
.lib-dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.lib-dropdown-item:last-child { border-bottom: none; }
.lib-dropdown-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.lib-dropdown-item.active { color: var(--brand-primary); background: var(--brand-primary-light); font-weight: 600; }

/* ============================================
   MERGED FEED — gliims + shelf in one responsive grid.
   Wide screens: multi-column grid of cards. Mobile: single-column list.
   ============================================ */
.libmerge.hub-layout { max-width: 1500px; padding-top: 16px; }
/* XpLoRe shell cancels .view-container's 2rem padding so the topline sits
   flush with the viewport top and the content edges; the .hub-layout
   child re-applies the inner padding for tabs and feed. */
.xplore-page { margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0; }
@media (max-width: 768px) {
  /* Mobile cancels the container's whole padding (top and sides) the same way
     the desktop rule does — the desktop margins are -2rem each side while the
     mobile container only pads 8px, so leaving the desktop side margins in
     place pushed cards 16px past the viewport edges. The safe-top room moves
     into the tabs' own padding so the camera cut-out still never covers the
     buttons, and only once (previously the leftover + the tabs' own room
     stacked a double gap above the filter pills). */
  .xplore-page { margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-x)) 0; }
  .libmerge.hub-layout { padding-top: 0; padding-left: 16px; padding-right: 16px; }
  .hub-category-tabs { padding-top: calc(8px + var(--safe-top)); }
}
/* True Pinterest masonry: rows are 8px slices and each item spans exactly its
   own height (set by JS), so short tiles pack tight under tall cards instead
   of leaving a row-sized gap. Vertical spacing is baked into each span. */
.library-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 8px;
  column-gap: 24px;
  row-gap: 0;
}
.library-feed .blog-card { margin-bottom: 0; }
/* The loading / empty notice spans the whole feed, not one grid cell */
.library-feed > p { grid-column: 1 / -1; }
/* Tidy card proportions inside narrow grid cells */
.library-feed .blog-cover { height: 180px; }
.library-feed .blog-content { padding: 18px; }
.library-feed .blog-title { font-size: 18px; margin-bottom: 8px; }
.library-feed .blog-desc { font-size: 14px; -webkit-line-clamp: 2; margin-bottom: 16px; }

/* The Hub is ONE interleaved feed: gliim cards and shelf cover tiles share
   the same grid. Shelf tiles are thumbnail-only (cover + hover title), so a
   book or audiolite never carries text below it like a gliim does. */
.libmerge-feed { display: flex; flex-direction: column; gap: 24px; }

.lib-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 3 / 4;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lib-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); z-index: 2; }
.lib-tile:hover .lib-overlay { opacity: 1; }
/* Audiolites read as square covers; books stay portrait */
.lib-tile.lib-audiolite { aspect-ratio: 1 / 1; }

.lib-thumb { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.lib-thumb-fallback { background: var(--bg-tertiary); }
.lib-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); display: flex; align-items: flex-end; padding: 12px; opacity: 0; transition: opacity 0.2s ease; z-index: 1; }
.lib-overlay h4 { color: white; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

.lib-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lib-play-icon svg { width: 24px; height: 24px; margin-left: 2px; }
.lib-tile:hover .lib-play-icon { background: rgba(0, 0, 0, 0.75); transform: translate(-50%, -50%) scale(1.08); }

.lib-tick-badge, .lib-saved-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.lib-tile-menu-wrap { position: absolute; top: 8px; left: 8px; z-index: 3; }
.lib-tile-menu-btn {
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.lib-tile:hover .lib-tile-menu-btn { opacity: 1; }
.lib-tile-menu-btn:hover { background: rgba(0, 0, 0, 0.8); }
.lib-tile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 130px;
  overflow: hidden;
  z-index: 10;
}
.lib-tile-menu.active { display: block; }
.lib-tile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.lib-tile-menu-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.lib-tile-menu-item.danger { color: #e53e3e; }
.lib-tile-menu-item.danger:hover { background: rgba(229, 62, 62, 0.08); }

/* Minimal Modal & Inline Menu */
/* The composer is tall, so the panel is capped to the viewport and the body
   scrolls inside it. Without the cap the centred panel overflows above and
   below the screen, which hides the top rows, the submit button and the X. */
.lib-modal-content {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 900px);
  margin: auto;
}
.lib-modal-body { padding: 32px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.lib-modal-type { text-transform: uppercase; font-size: 11px; font-weight: 700; color: var(--brand-primary); background: var(--brand-primary-light); padding: 4px 10px; border-radius: 20px; }
.lib-modal-body h2 { margin: 16px 0 8px; font-size: 24px; font-weight: 800; }
.lib-modal-author { color: var(--text-muted); margin-bottom: 24px; font-size: 14px; }
.lib-modal-desc { color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; font-size: 14px; }
.lib-modal-price { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.lib-modal-price strong { font-size: 18px; color: var(--text-primary); }

.lib-action-row { display: flex; gap: 12px; align-items: center; }
.lib-action-btn { flex: 1; }

.lib-modal-menu { position: relative; }
.lib-menu-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  width: 46px;
  height: 46px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.lib-menu-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.lib-menu-dropdown {
  position: absolute;
  bottom: 110%;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  overflow: hidden;
}
.lib-menu-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
.lib-menu-item { padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.lib-menu-item:last-child { border-bottom: none; }
.lib-menu-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.lib-menu-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.lib-menu-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--gradient-primary); color: #fff; font-size: 10px; font-weight: 700; }

/* Ensure Modal Close Button is perfect */
.modal-content .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.modal-content .modal-close:hover { background: rgba(0,0,0,0.8); }

/* Submit-to-Library FAB */
.library-fab-wrapper {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.library-fab-main {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s ease;
}

.library-fab-main:hover { transform: scale(1.05); background: var(--brand-primary-hover); }

/* Mobile */
@media (max-width: 768px) {
  /* Mobile: two-column grid for compact cards (books, logs);
     bundles and regular blog cards span the full width. */
  .library-feed { grid-template-columns: repeat(2, 1fr); column-gap: 12px; }
  .feed-item--gliim { grid-column: 1 / -1; }
  .feed-item--gliim:has(.book-cover-card),
  .feed-item--gliim:has(.audiolite-card:not(.bundle-card)) { grid-column: auto; }
  .lib-tile { aspect-ratio: 3 / 4; }
  .lib-tile.lib-audiolite { aspect-ratio: 3 / 4; }

  /* Mobile Dropup for Filter */
  .lib-dropdown-menu {
    top: auto;
    bottom: 120%; /* Opens upwards */
  }

  /* Keep the FAB clear of the fixed bottom bar, side by side with menu button */
  body .library-fab-wrapper {
    bottom: 24px !important;
    left: calc(50% + 16px) !important;
    right: auto !important;
    transform: none !important;
  }

  /* Touch-friendly close button on modals */
  .modal-content .modal-close { width: 40px; height: 40px; font-size: 20px; }
}

/* Fix Filter SVG stealing clicks */
.lib-filter-btn svg { pointer-events: none; }

/* ============================================
   MERGED LIBRARY — gliims + shelf in one feed
   ============================================ */
.libmerge { position: relative; }

.libmerge-fab-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 240px;
}
.libmerge-fab-menu.active { display: flex; }
.libmerge-fab-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  cursor: pointer;
}
.libmerge-fab-menu button:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.lib-menu-btn svg { pointer-events: none; }

/* Danger color for Delete Item */
.lib-menu-item.danger { color: var(--error); }
.lib-menu-item.danger:hover { background: var(--error-light); color: var(--error); }

/* Author menu item shows a full name — give it room */
.lib-menu-dropdown { min-width: 200px; }

/* ===== Content Viewers ===== */

/* Publication read view (hub-like) */
.lib-reader-modal { max-width: 760px; max-height: 90vh; overflow-y: auto; }
.lib-reader-cover { width: 100%; height: 240px; object-fit: cover; display: block; }
.lib-reader-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.lib-reader-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-tertiary); }
.lib-reader-image, .lib-reader-video { width: 100%; border-radius: 12px; display: block; }
.lib-reader-download { display: inline-flex; }
.lib-reader-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 24px 0; }

/* Audiolite player */
.lib-audio-modal { max-width: 420px; text-align: center; }
.lib-audio-art { width: 180px; height: 180px; border-radius: 16px; margin: 0 auto 16px; background-size: cover; background-position: center; }
.lib-audio-art-fallback { background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: white; }
.lib-audio-art-fallback svg { width: 48px; height: 48px; }
.lib-audio-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.lib-audio-author { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }

.lib-eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 28px; margin-bottom: 20px; }
.lib-eq span { width: 4px; height: 8px; border-radius: 2px; background: var(--brand-primary); opacity: 0.35; }
.lib-eq.playing span { animation: lib-eq-bounce 0.9s ease-in-out infinite; opacity: 1; }
.lib-eq.playing span:nth-child(1) { animation-delay: 0s; }
.lib-eq.playing span:nth-child(2) { animation-delay: 0.15s; }
.lib-eq.playing span:nth-child(3) { animation-delay: 0.3s; }
.lib-eq.playing span:nth-child(4) { animation-delay: 0.45s; }
.lib-eq.playing span:nth-child(5) { animation-delay: 0.6s; }
@keyframes lib-eq-bounce { 0%, 100% { height: 8px; } 50% { height: 26px; } }

.lib-audio-player { display: flex; align-items: center; gap: 12px; }
.lib-audio-play { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-primary); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s ease, background 0.2s ease; }
.lib-audio-play:hover { transform: scale(1.05); background: var(--brand-primary-hover); }
.lib-audio-play:disabled { opacity: 0.4; cursor: not-allowed; }
.lib-audio-play svg { width: 20px; height: 20px; }
.lib-audio-timeline { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.lib-audio-timeline input[type="range"] { flex: 1; accent-color: var(--brand-primary); min-width: 0; }
.lib-audio-speed { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); font-size: 12px; font-weight: 700; padding: 8px 10px; cursor: pointer; flex-shrink: 0; }
.lib-audio-speed:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* Submission composer */
.lib-composer-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

/* Publication article view (blocks) */
.lib-article { display: flex; flex-direction: column; gap: 14px; }
.lib-article-file { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.lib-article-file svg { width: 18px; height: 18px; color: var(--brand-primary); flex-shrink: 0; }
.lib-article-file:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* In-page feed view toggle (grid/list) — sits above the posts, right-aligned,
   deliberately NOT in the top/bottom bar. */
.feed-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.feed-view-toggle { display: inline-flex; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; }
.fvt-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); width: 32px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.fvt-btn:hover { color: var(--text-primary); }
.fvt-btn.active { background: var(--surface); color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.fvt-btn svg { pointer-events: none; }

/* List view: one column, natural row heights (JS clears the masonry spans). */
.library-feed.feed-list { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 24px; column-gap: 0; }
.library-feed.feed-list .feed-item--gliim { grid-column: auto; }

@media (max-width: 768px) {
  .lib-audio-art { width: 140px; height: 140px; }
}

/* ---- Three-kind chooser (Bundle / Book / Audiolite) ---- */
.kind-chooser { max-width: 560px; }
.kind-options { display: flex; flex-direction: column; gap: 12px; }
.kind-option {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "ico name" "ico desc";
  column-gap: 14px;
  align-items: center;
  text-align: left;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.kind-option:hover { border-color: var(--brand-primary); transform: translateY(-1px); }
.kind-ico { grid-area: ico; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--brand-primary); }
.kind-name { grid-area: name; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.kind-desc { grid-area: desc; font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* ---- Book / Audiolite submission form ---- */
.lib-submission-form { max-width: 560px; }

/* Audiolite chapter rows in the composer */
.chapter-row { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.chapter-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.chapter-row-head .chapter-title { flex: 1; }
.chapter-remove { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; flex-shrink: 0; }
.chapter-remove:hover { color: var(--error); background: var(--surface); }

/* Audiolite player: now-playing chapter + chapter list */
.lib-audio-chapter { font-size: 13px; font-weight: 600; color: var(--brand-primary); margin: -14px 0 16px; min-height: 18px; }
.lib-audio-chapters { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; text-align: left; }
.lib-chapter { display: flex; align-items: center; gap: 10px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.lib-chapter:hover { border-color: var(--brand-primary); }
.lib-chapter.active { border-color: var(--brand-primary); background: var(--surface); }
.lib-chapter-n { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.lib-chapter.active .lib-chapter-n { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.lib-chapter-title { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-chapter.active .lib-chapter-title { color: var(--text-primary); font-weight: 600; }

@media (max-width: 480px) {
  .kind-option { grid-template-columns: auto 1fr; grid-template-areas: "ico name" "desc desc"; }
}

/* Collections grid (XpLoRe Collections tab) */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 8px 0;
}
.collection-tag-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  padding: 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.collection-tag-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.collection-tag-cover {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  object-fit: cover;
}
.collection-tag-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
}
.collection-tag-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.collection-tag-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.collection-tag-avatars {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.collection-tag-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface);
  margin-left: -6px;
}
.collection-tag-avatar:first-child {
  margin-left: 0;
}
.collection-tag-avatar-fallback {
  background: var(--gradient-primary);
}
.collection-tag-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.collection-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.collection-stat svg {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .collections-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .collection-tag-info {
    padding: 12px;
  }
  .collection-tag-cover {
    width: 100px;
    height: 120px;
  }
  .collection-tag-name {
    font-size: 14px;
  }
  .collection-tag-avatar {
    width: 20px;
    height: 20px;
  }
  .collection-tag-stats {
    gap: 10px;
  }
  .collection-stat {
    font-size: 11px;
  }
}

/* ============================================
   AUDIOLITE CARD AUTHOR NAME CONTRAST
   Theme-aware author name color for audiolite cards
   ============================================ */
.audiolite-cover-card .blog-author span {
  color: #fff;
}
[data-theme="light"] .audiolite-cover-card .blog-author span {
  color: #000;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
[data-theme="dark"] .audiolite-cover-card .blog-author span {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ============================================
   STICKY FILTER TABS
   Category tabs stick to top when scrolling
   ============================================ */
/* The sticky header band holds the category tabs and the cohort strip as two
   rows of one surface: tabs always lead (they carry the safe-top room for the
   camera cut-out) and the strip sits under them; both stay fixed while
   scrolling. */
.hub-top-band {
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--bg-tertiary);
  margin: 0 -16px 16px -16px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hub-category-tabs {
  padding: calc(12px + var(--safe-top)) 0 12px;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0;
}

/* ------------------------------- cohort strip ------------------------------
   Operations' live co-hort drive: "2/9 Full Stack Media Architecture". Tapping
   records interest and hands the member to Support in Ping. */
.cohort-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cohort-strip[hidden] { display: none; }
.cohort-strip-count {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--brand-primary);
  background: var(--brand-primary-light);
  padding: 3px 10px;
  border-radius: 20px;
}
.cohort-strip-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cohort-strip-chevron { flex-shrink: 0; color: var(--text-muted); }

/* --------------------------------- xploring ring ---------------------------
   The followed creators, laid out as a second tab row of faces. Same geometry
   as .hub-category-tab so the two rows read as one family. */
.xplore-ring {
  display: flex;
  gap: 8px;
  margin: 0 -16px 16px -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.xplore-ring::-webkit-scrollbar { display: none; }
.xplore-ring[hidden] { display: none; }

.xplore-ring-person {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.xplore-ring-person:hover { background: var(--bg-tertiary); }
.xplore-ring-person.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.xplore-ring-face { position: relative; flex-shrink: 0; }
.xplore-ring-avatar {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-tertiary);
}
.xplore-ring-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Count of gliims from this creator that I have not opened yet. Same red as
   the alert dot, but it carries the number so the row can be triaged. */
.xplore-ring-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--error);
  border: 2px solid var(--bg-secondary);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.xplore-ring-person.is-active .xplore-ring-count { border-color: var(--brand-primary); }