/* ============================================================
   browse-shell.css — "Browse Shell" for pages/browse.html
   Implements browse-layout-suggestion.md.

   Loaded AFTER css/main.css, css/series-shell.css (the --ss-* token
   source) and css/global-search.css (gs-btn / gs-panel / gs-selbar
   reuse), so it only supersedes Browse's own page-local look.

   Five zones:
     bs-identity     h1 + one quiet stat line
     bs-controlzone  sticky: search + Options, catalog tabs + source
     bs-resultshead  scope + count + active filter chips
     bs-results      ONE grid
     bs-panel        every secondary filter (reuses .gs-panel)

   Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48px only.
   Transitions: 120ms ease. No new colour, no gradient.
   ============================================================ */

/* ---------- Shell frame ---------- */
.bs-shell {
  max-width: var(--ss-max, 1120px);
  margin: 0 auto;
  padding: 0 var(--ss-16, 16px) var(--ss-48, 48px);
  color: var(--ss-text);
}
.bs-shell *,
.bs-shell *::before,
.bs-shell *::after { box-sizing: border-box; }

/* ---------- Zone 1: identity strip ---------- */
.bs-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 24px 0 12px;
}
.bs-h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ss-text);
}
.bs-stats {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--ss-text-muted);
}
.bs-stats b { font-weight: 600; color: var(--ss-text); }
.bs-stats > span[hidden] { display: none; }

/* ---------- Zone 2: sticky control zone ---------- */
.bs-controlzone {
  position: sticky;
  top: var(--fr-h, var(--header-height, 64px));
  z-index: 20;
  background: var(--ss-bg);
  border-bottom: 1px solid var(--ss-border);
  padding-bottom: 12px;
}

.bs-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 8px 0 12px;
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius, 8px);
}
.bs-searchbar:focus-within { border-color: var(--ss-border-strong); }
.bs-searchbar-icon { font-size: 16px; color: var(--ss-text-muted); }
.bs-searchbar input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ss-text);
  font-family: inherit;
  font-size: 14px;
}
.bs-searchbar input[type="search"]::-webkit-search-cancel-button { display: none; }
.bs-searchbar input[type="search"]::placeholder { color: var(--ss-text-muted); }

/* Clear (x) only once there is something to clear */
.bs-search-clear {
  flex: 0 0 auto;
  width: 36px;
  min-height: 36px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ss-radius, 8px);
  background: transparent;
  color: var(--ss-ghost-fg);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.bs-search-clear:hover { background: var(--ss-ghost-bg-hover); }
.bs-searchbar.has-value .bs-search-clear { display: inline-flex; }

.bs-options-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ss-primary-bg);
  color: var(--ss-primary-fg);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.bs-options-count[hidden] { display: none; }

/* Catalog row: destination controls only (tabs + source) */
/* Stacked on purpose: the category tabs (Imported | Comics | Novels) always
   own their own full-width row, and the Source Picker sits BELOW them. When
   both shared one flex row the source rail squeezed / overlapped the tabs on
   narrow viewports, making Imported unreachable once plugins loaded. */
.bs-catalogrow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 0 0;
}
.bs-catalogrow:empty { display: none; }

.bs-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
  order: 1;          /* category navigation stays on top */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bs-tabs::-webkit-scrollbar { display: none; }
.bs-tabs[hidden] { display: none; }
.bs-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bs-tab[hidden] { display: none; }
.bs-tab:hover { background: var(--ss-surface-2); }
.bs-tab[aria-pressed="true"] {
  background: var(--ss-primary-bg);
  border-color: var(--ss-primary-bg);
  color: var(--ss-primary-fg);
}

.bs-source {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  order: 2;          /* always after the category tabs */
}
.bs-source[hidden] { display: none; }
.bs-source-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ss-text-muted);
  white-space: nowrap;
}
.bs-sourcerail {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bs-sourcerail::-webkit-scrollbar { display: none; }
.bs-sourcerail .bp-chip,
.bs-sourcerail .bs-sourcechip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bs-sourcerail .bp-chip:hover { background: var(--ss-surface-2); }
.bs-sourcerail .bp-chip[aria-pressed="true"] {
  background: var(--ss-primary-bg);
  border-color: var(--ss-primary-bg);
  color: var(--ss-primary-fg);
}
.bs-sourcerail .bp-chip.is-locked { opacity: .7; }

.bs-sourcenote {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ss-text-muted);
}
.bs-sourcenote[hidden] { display: none; }
.bs-sourcenote.is-warn { color: var(--ss-hiatus, #d97706); }
.bs-sourcenote i { margin-right: 4px; }

/* ---------- Zone 3: results head ---------- */
.bs-resultshead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 24px 0 12px;
}
.bs-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}
.bs-resultshead h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ss-text);
}
.bs-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-text-muted);
}
.bs-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface);
  color: var(--ss-text-muted);
  font-family: inherit;
  font-size: 12px;
}
.bs-chip b { font-weight: 500; color: var(--ss-text); }
.bs-chip button {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ss-ghost-fg);
  font-size: 11px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.bs-chip button:hover { background: var(--ss-ghost-bg-hover); }
.bs-clear-all {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ss-ghost-fg);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.bs-clear-all:hover { background: var(--ss-ghost-bg-hover); }

/* ---------- Zone 4: results ---------- */
/* One measure, one card size. The list layout keeps its own rules. */
.bs-results:not(.is-list) {
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 720px) {
  .bs-results:not(.is-list) { gap: 16px; }
}
@media (max-width: 760px) {
  .bs-results:not(.is-list) { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
@media (max-width: 400px) {
  .bs-results:not(.is-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bs-sentinel {
  min-height: 1px;
  padding: 16px 0;
  text-align: center;
  font-size: 12px;
  color: var(--ss-text-muted);
}
.bs-more {
  display: flex;
  justify-content: center;
  padding: 8px 0 24px;
}
.bs-more .gs-btn[hidden] { display: none; }

/* ---------- Zone 5: Browse options panel ---------- */
/* Structure and behaviour come from .gs-panel in global-search.css;
   only the genre grid and the sticky footer are Browse-specific. */
.bs-genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.bs-genre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--ss-radius-chip, 6px);
  border: 1px solid var(--ss-border);
  background: var(--ss-bg);
  color: var(--ss-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bs-genre:hover { background: var(--ss-surface-2); }
.bs-genre[aria-pressed="true"] {
  background: var(--ss-primary-bg);
  border-color: var(--ss-primary-bg);
  color: var(--ss-primary-fg);
}
.bs-genre-count { font-size: 11px; opacity: .75; }
.bs-genre-hint { margin: 0 0 8px; font-size: 12px; color: var(--ss-text-muted); }

/* Status: one wrapping row of neutral chips (44px targets) */
.bs-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-seg[hidden] { display: none; }
.bs-seg button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--ss-border);
  background: var(--ss-bg);
  color: var(--ss-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bs-seg button:hover { background: var(--ss-surface-2); }
.bs-seg button[aria-pressed="true"] {
  background: var(--ss-primary-bg);
  border-color: var(--ss-primary-bg);
  color: var(--ss-primary-fg);
}

/* Layout (grid / list) segmented control */
.bs-view {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--ss-secondary-border);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
}
.bs-view button {
  width: 48px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--ss-secondary-bg);
  color: var(--ss-secondary-fg);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.bs-view button + button { border-left: 1px solid var(--ss-secondary-border); }
.bs-view button[aria-pressed="true"] {
  background: var(--ss-primary-bg);
  color: var(--ss-primary-fg);
}

.bs-panel-foot {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ss-border);
  background: var(--ss-surface);
}

/* The panel select inherits .gs-select; keep native selects readable
   inside the sheet on narrow phones. */
.bs-panel .gs-select { max-width: 60%; }

/* ---------- Empty / error state inside the results frame ---------- */
.bs-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed var(--ss-border);
  border-radius: var(--ss-radius, 8px);
  background: var(--ss-surface);
  color: var(--ss-text-muted);
}
.bs-empty i { font-size: 20px; }
.bs-empty h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ss-text); }
.bs-empty p { margin: 0; font-size: 13px; }
.bs-empty small { opacity: .8; }
.bs-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
}

/* ---------- Skeleton card at the FINAL card height ---------- */
.bs-skel {
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface);
}
.bs-skel-img { aspect-ratio: 2 / 3; }
.bs-skel-body { padding: 8px 12px 12px; display: grid; gap: 8px; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .bs-identity { padding: 16px 0 8px; }
  .bs-source-label { display: none; }
  /* Source rail scrolls horizontally on its own line, never over the tabs */
  .bs-source { padding-top: 2px; }
  .bs-source-select { max-width: 140px; }
}
@media (max-width: 719px) {
  .bs-shell { padding-bottom: 96px; }
}