/* ============================================================
   Browse page — layout & visual redesign
   Scoped to .browse-page so nothing else on the site is affected.
   ============================================================ */

.browse-page {
  --bp-gap: clamp(0.75rem, 1.6vw, 1.25rem);
  --bp-radius: 16px;
  --bp-line: color-mix(in oklab, var(--border, #2a2a36) 90%, transparent);
  --bp-surface: color-mix(in oklab, var(--bg-card, #14141c) 96%, transparent);
  --bp-elev: var(--bg-elev, #0f0f17);
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

/* ---------------- Browse bar (flat hero) ----------------
   Deliberately flat: no gradient washes, no glow layer. The search
   field is the single visual anchor; everything else is muted so the
   grid starts as high on the page as possible. */

.bp-bar {
  position: relative;
  padding: 0 0 var(--bp-gap);
  margin-bottom: var(--bp-gap);
  border-bottom: 1px solid var(--bp-line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bp-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.bp-bar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.bp-bar-row:empty { display: none; }

.bp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent, #7c5cff) 80%, white);
  background: color-mix(in oklab, var(--accent, #7c5cff) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent, #7c5cff) 32%, transparent);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.bp-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}


/* ---------------- Search ---------------- */

.bp-search {
  position: relative;
  width: 100%;
}

.bp-search input {
  width: 100%;
  height: 52px;
  padding: 0 3.25rem;
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--bp-elev);
  border: 1px solid var(--bp-line);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}


.bp-search input::placeholder { color: color-mix(in oklab, var(--text-muted) 90%, transparent); }

.bp-search input:focus {
  outline: none;
  border-color: var(--accent, #7c5cff);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #7c5cff) 18%, transparent);
}


.bp-search .bp-search-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.bp-search .bp-search-clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.bp-search.has-value .bp-search-clear { display: inline-flex; }
.bp-search .bp-search-clear:hover {
  background: color-mix(in oklab, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}

.bp-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.bp-hero-stats b { color: var(--text-primary); font-weight: 700; }


/* ---------------- Category rail ---------------- */

.bp-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0.6rem;
}

.bp-section-label h2 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bp-rail-wrap { position: relative; }

.bp-rail {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.15rem 0.15rem 0.6rem;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.bp-rail::-webkit-scrollbar { display: none; }

.bp-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--bp-line);
  background: var(--bp-surface);
  color: var(--text-secondary, var(--text-muted));
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.bp-chip:hover {
  color: var(--text-primary);
  border-color: color-mix(in oklab, var(--accent, #7c5cff) 45%, transparent);
  transform: translateY(-1px);
}

.bp-chip .bp-chip-count {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.65;
}

.bp-chip[aria-pressed="true"] {
  background: var(--accent, #7c5cff);
  border-color: var(--accent, #7c5cff);
  color: #fff;
}

.bp-chip[aria-pressed="true"] .bp-chip-count { opacity: 0.85; }

/* ---------------- Sticky control bar ---------------- */

.bp-controls {
  position: sticky;
  top: var(--header-height, 64px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem;
  margin: 0.25rem 0 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--bp-line);
  background: color-mix(in oklab, var(--bg-card, #14141c) 88%, transparent);
  backdrop-filter: blur(14px);
}

.bp-segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: var(--bp-elev);
  border: 1px solid var(--bp-line);
}

.bp-segment button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.bp-segment button:hover { color: var(--text-primary); }

.bp-segment button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent, #7c5cff) 22%, transparent);
  color: var(--text-primary);
}

.bp-controls select {
  height: 40px;
  padding: 0 0.75rem;
  border-radius: 10px;
  background: var(--bp-elev);
  border: 1px solid var(--bp-line);
  color: var(--text-primary);
  font-size: 0.875rem;
  max-width: 190px;
}

.bp-controls select:focus {
  outline: none;
  border-color: var(--accent, #7c5cff);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #7c5cff) 20%, transparent);
}

.bp-controls .bp-spacer { flex: 1 1 auto; }

.bp-view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bp-elev); border: 1px solid var(--bp-line); }
.bp-view-toggle button {
  width: 34px; height: 32px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-muted);
}
.bp-view-toggle button[aria-pressed="true"] { background: color-mix(in oklab, var(--accent, #7c5cff) 22%, transparent); color: var(--text-primary); }

/* ---------------- Active filters ---------------- */

.bp-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.bp-active:empty { display: none; }

.bp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.4rem 0.35rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 999px;
  color: var(--text-primary);
  background: color-mix(in oklab, var(--accent, #7c5cff) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent, #7c5cff) 34%, transparent);
}

.bp-tag span { opacity: 0.7; font-weight: 600; }
.bp-tag button {
  border: 0; cursor: pointer; line-height: 1;
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in oklab, var(--text-primary) 10%, transparent);
  color: inherit; font-size: 0.7rem;
}
.bp-tag button:hover { background: color-mix(in oklab, var(--text-primary) 20%, transparent); }

.bp-clear-all {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 0.8125rem; font-weight: 600;
  padding: 0.35rem 0.55rem; border-radius: 8px;
}
.bp-clear-all:hover { color: var(--text-primary); background: color-mix(in oklab, var(--text-primary) 7%, transparent); }

/* ---------------- Results header ---------------- */

.bp-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.bp-results-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.bp-count { font-size: 0.85rem; color: var(--text-muted); }

/* ---------------- Grid ---------------- */

.bp-grid {
  display: grid;
  gap: var(--bp-gap);
  grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 15vw, 185px), 1fr));
}

.bp-grid .series-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--bp-surface);
  border: 1px solid color-mix(in oklab, var(--border, #2a2a36) 70%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

.bp-grid .series-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent, #7c5cff) 50%, transparent);
  box-shadow: 0 22px 38px -24px rgba(0, 0, 0, .75);
}

.bp-grid .series-card-image {
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--bp-elev);
  overflow: hidden;
}

.bp-grid .series-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}

.bp-grid .series-card-image img.loaded { opacity: 1; }
.bp-grid .series-card:hover .series-card-image img { transform: scale(1.045); }

/* Compact list view */
.bp-grid.is-list { grid-template-columns: 1fr; }
@media (min-width: 900px) { .bp-grid.is-list { grid-template-columns: 1fr 1fr; } }

.bp-grid.is-list .series-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: stretch;
  contain-intrinsic-size: 110px;
}
.bp-grid.is-list .series-card-image { aspect-ratio: 2 / 3; height: 100%; }
.bp-grid.is-list .series-card-info { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; justify-content: center; }
.bp-grid.is-list .series-card:hover { transform: none; }

/* ---------------- Skeletons / states ---------------- */

.bp-skel {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border, #2a2a36) 70%, transparent);
  background: var(--bp-surface);
}
.bp-skel-img { aspect-ratio: 2 / 3; }
.bp-skel-body { padding: 0.7rem 0.8rem; display: grid; gap: 0.5rem; }
.bp-shimmer {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--text-primary) 5%, transparent) 25%,
    color-mix(in oklab, var(--text-primary) 11%, transparent) 37%,
    color-mix(in oklab, var(--text-primary) 5%, transparent) 63%);
  background-size: 400% 100%;
  animation: bp-shimmer 1.35s ease infinite;
  border-radius: 6px;
}
@keyframes bp-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .bp-shimmer { animation: none; } }

.bp-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(2.5rem, 8vw, 4.5rem) 1rem;
  border: 1px dashed var(--bp-line);
  border-radius: var(--bp-radius);
  background: color-mix(in oklab, var(--bg-card, #14141c) 60%, transparent);
}
.bp-empty i { font-size: 1.8rem; color: var(--text-muted); margin-bottom: 0.75rem; display: block; }
.bp-empty h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--text-primary); }
.bp-empty p { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.9rem; }

.bp-sentinel { min-height: 1px; padding: 1.25rem 0; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ---------------- Mobile ---------------- */

@media (max-width: 640px) {
  .bp-bar { padding-bottom: 0.9rem; gap: 0.7rem; }
  .bp-title { font-size: 1.25rem; }

  .bp-search input { height: 48px; font-size: 0.95rem; padding: 0 2.9rem; }
  .bp-controls { padding: 0.5rem; gap: 0.45rem; border-radius: 12px; }
  .bp-controls select { flex: 1 1 45%; max-width: none; height: 38px; }
  .bp-segment { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .bp-segment::-webkit-scrollbar { display: none; }
  .bp-segment button { flex: 0 0 auto; }
  .bp-spacer { display: none; }
  .bp-grid { gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

/* ============================================================
   BROWSE — SOURCE-PLUGIN CATALOG MODE (Suggestion #1, steps 2–5)
   Only additive: none of the rules above are overridden. These
   styles cover the virtualized batches, the source/cache notice,
   the background-crawl chip and the load-more / back-to-top
   affordances used when Browse renders a Source Plugin catalog.
   ============================================================ */

/* A batch is transparent to the grid layout until it is collapsed,
   at which point it becomes a full-width spacer of the exact height
   the recycled cards occupied (no scroll jump). */
.bp-batch { display: contents; }
.bp-batch.is-collapsed {
  display: block;
  grid-column: 1 / -1;
}

/* Thin top progress bar for "warm revalidate" — never a full-page
   spinner over content the user can already see. */
body.bp-loading::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 999;
  background: linear-gradient(90deg, transparent, var(--primary, #6c5ce7), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: bpTopBar 1.1s ease-in-out infinite;
}
@keyframes bpTopBar {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

.bp-source-note {
  margin-top: var(--space-sm, .75rem);
  font-size: .85rem;
  color: var(--text-secondary, #9aa0b5);
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.bp-source-note.is-warn { color: var(--warning, #e0a458); }
.bp-source-note[hidden] { display: none; }

.bp-crawl-chip {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 60;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .78rem;
  background: var(--bg-elevated, rgba(20, 20, 30, .92));
  color: var(--text-secondary, #c8cbd9);
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.bp-crawl-chip[hidden] { display: none; }

.bp-more-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-md, 1rem) 0 var(--space-xl, 2rem);
}
.bp-load-more[hidden] { display: none; }

.bp-to-top {
  position: fixed;
  right: 1rem;
  bottom: 4.5rem;
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(255, 255, 255, .1));
  background: var(--bg-elevated, rgba(20, 20, 30, .92));
  color: var(--text-primary, #fff);
  cursor: pointer;
}
.bp-to-top[hidden] { display: none; }

.bp-empty-actions {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .75rem;
}

/* Source rows are slim (title / cover / status), so their card keeps the
   same shape as a library card minus the chapter pill. */
.bp-src-badge {
  font-size: .7rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: var(--bg-hover, rgba(255, 255, 255, .07));
  color: var(--text-secondary, #9aa0b5);
}
.bp-grid .bp-src-card .series-card-row:empty { display: none; }

/* Controls whose data the slim source index cannot support are hidden via
   the [hidden] attribute; these rules beat the layout display values. */
.bp-segment[hidden],
.bp-rail-wrap[hidden],
.bp-section-label[hidden],
.bp-hero-stats span[hidden],
#bpCreatorFilter[hidden] { display: none !important; }

/* ---- Catalog mode switch (Imported / Comics / Novels) ---- */
.bp-mode-switch {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  flex: 0 0 auto;
}
.bp-mode-switch[hidden] { display: none; }
.bp-mode-switch .bp-segment { max-width: 100%; }
.bp-mode-switch .bp-segment button i { margin-right: .35rem; }
.bp-mode-switch .bp-segment button[hidden] { display: none; }

/* ---------- Source selector (Source Browser) ----------
   Lets users and guests switch between the Source Plugins of the ACTIVE
   section only — comic plugins under Comics, novel plugins under Novels.
   Reuses the .bp-rail / .bp-chip vocabulary of the genre rail so the two
   filter strips look and behave identically. */
.bp-source-picker {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 100%;
}
.bp-source-picker[hidden] { display: none; }

.bp-source-picker-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.bp-source-picker .bp-rail {
  flex: 1 1 auto;
  min-width: 0;
}
.bp-source-picker .bp-chip { white-space: nowrap; }
@media (max-width: 640px) {
  .bp-source-picker { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .bp-source-picker .bp-rail { width: 100%; }
}

/* ------------------------------------------------------------------
   Source Plugin release badges inside the Browse source rail.
   The badge markup itself comes from js/source-release.js (shared with
   Source.html and Global-Search.html) — only the fit is styled here.
   ------------------------------------------------------------------ */
.bp-source-picker .bp-chip .src-badge {
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 6px;
  vertical-align: middle;
}
.bp-source-picker .bp-chip.is-locked { opacity: 0.85; }
.bp-source-picker .bp-chip.is-locked:hover { opacity: 1; }