/* ============================================================
   sources-shell.css — "Source Shell" for pages/sources.html
   (see sources-layout-suggestion.md).

   Loaded AFTER series-shell.css and reuses its neutral --ss-*
   tokens. Replaces sources-redesign.css + sources-tabs.css on
   this page only. No gradients, no glow, no purple fills:
   purple is an accent for the active underline, the focus ring
   and the favourite star only.

   Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48px only.
   ============================================================ */

/* ---------- Shell frame ---------- */

.srx-shell {
  max-width: var(--ss-max, 1120px);
  margin: 0 auto;
  padding: var(--ss-16, 16px) var(--ss-16, 16px) var(--ss-48, 48px);
  color: var(--ss-text);
}

/* ---------- Identity strip ---------- */

.srx-identity {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ss-12, 12px);
  flex-wrap: wrap;
  padding: var(--ss-8, 8px) 0 var(--ss-12, 12px);
}
.srx-identity h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ss-text);
  letter-spacing: -0.01em;
}
.srx-identity-meta {
  margin: 0;
  font-size: 13px;
  color: var(--ss-text-muted);
}

/* ---------- Sticky zone: search + options + switcher ---------- */

.srx-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ss-bg);
  border-bottom: 1px solid var(--ss-border);
  padding: var(--ss-8, 8px) 0 0;
  margin-bottom: var(--ss-8, 8px);
}
.srx-searchbar {
  display: flex;
  align-items: center;
  gap: var(--ss-8, 8px);
  padding-bottom: var(--ss-8, 8px);
}
.srx-search {
  position: relative;
  flex: 1;
  min-width: 0;
}
.srx-search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ss-text-muted);
  pointer-events: none;
}
.srx-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ss-12, 12px) 0 34px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius, 8px);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-size: 15px;
  font-family: inherit;
}
.srx-search input::placeholder { color: var(--ss-text-muted); }
.srx-search input:focus-visible,
.srx-search input:focus {
  outline: 2px solid var(--accent, #7c5cff);
  outline-offset: 1px;
  border-color: transparent;
}

/* ---------- One button set ---------- */

.srx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-8, 8px);
  min-height: 44px;
  padding: 0 var(--ss-16, 16px);
  border-radius: var(--ss-radius, 8px);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ss-transition, 120ms ease),
              border-color var(--ss-transition, 120ms ease);
}
.srx-btn i { font-size: 14px; }
.srx-btn:disabled { opacity: .55; cursor: not-allowed; }
.srx-btn-primary {
  background: var(--ss-primary-bg);
  color: var(--ss-primary-fg);
}
.srx-btn-primary:hover:not(:disabled) { background: var(--ss-primary-bg-hover); }
.srx-btn-secondary {
  background: var(--ss-secondary-bg);
  color: var(--ss-secondary-fg);
  border-color: var(--ss-secondary-border);
}
.srx-btn-secondary:hover:not(:disabled) { background: var(--ss-secondary-bg-hover); }
.srx-btn-ghost {
  background: transparent;
  color: var(--ss-ghost-fg);
}
.srx-btn-ghost:hover:not(:disabled) { background: var(--ss-ghost-bg-hover); }
.srx-btn-sm { min-height: 36px; padding: 0 var(--ss-12, 12px); font-size: 13px; }
.srx-btn:focus-visible {
  outline: 2px solid var(--accent, #7c5cff);
  outline-offset: 2px;
}

.srx-options-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent, #7c5cff);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* ---------- Section switcher (text tabs, 2px underline) ---------- */

.srx-shell .srx-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--ss-16, 16px);
  overflow-x: auto;
  scrollbar-width: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}
.srx-shell .srx-tabs::-webkit-scrollbar { display: none; }
.srx-shell .srx-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ss-text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ss-transition, 120ms ease),
              border-color var(--ss-transition, 120ms ease);
}
.srx-shell .srx-tab:hover { color: var(--ss-text); }
.srx-shell .srx-tab.is-active {
  color: var(--ss-text);
  font-weight: 600;
  border-bottom-color: var(--accent, #7c5cff);
}
.srx-shell .srx-tab-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--ss-text-muted);
  background: none;
  padding: 0;
  border: 0;
}
.srx-shell .srx-tab:focus-visible {
  outline: 2px solid var(--accent, #7c5cff);
  outline-offset: -2px;
}

/* ---------- Section panels ---------- */

.srx-shell .srx-panel { display: none; }
.srx-shell .srx-panel.is-active { display: block; }
.srx-section-note {
  margin: 0;
  padding: var(--ss-12, 12px) 0 var(--ss-8, 8px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ss-text-muted);
}
.srx-state-line {
  padding: 0 0 var(--ss-8, 8px);
  font-size: 12px;
  color: var(--ss-text-muted);
}
.srx-notice-bar {
  margin: var(--ss-12, 12px) 0 var(--ss-8, 8px);
  padding: var(--ss-12, 12px);
  background: var(--ss-surface-2);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius, 8px);
  font-size: 13px;
  color: var(--ss-text-muted);
}

/* ---------- Plugin list ---------- */

.srx-shell .srx-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--ss-border);
}
@media (min-width: 720px) {
  .srx-shell .srx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ss-24, 24px); }
}
@media (min-width: 1040px) {
  .srx-shell .srx-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* One row = one plugin. The wrapper keeps its legacy class so the
   existing category-filter / sort helpers keep finding it. */
.srx-shell .sh-source-card-wrap {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: var(--ss-4, 4px);
  min-height: 56px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ss-border);
  border-radius: 0;
  box-shadow: none;
  flex-direction: row !important;
  transform: none;
}
.srx-shell .sh-source-card-wrap > .srx-status-dot { display: none; }

.srx-shell .sh-source-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ss-12, 12px);
  min-height: 56px;
  padding: var(--ss-8, 8px) var(--ss-8, 8px);
  background: none;
  border: 0;
  border-radius: var(--ss-radius, 8px);
  box-shadow: none;
  text-decoration: none;
  color: var(--ss-text);
  transition: background var(--ss-transition, 120ms ease);
}
.srx-shell .sh-source-card:hover {
  background: var(--ss-surface-2);
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
.srx-shell .sh-source-card:focus-visible {
  outline: 2px solid var(--accent, #7c5cff);
  outline-offset: -2px;
}
.srx-shell .sh-source-logo {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--ss-surface-2);
  border: 1px solid var(--ss-border);
  color: var(--ss-text-muted);
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}
.srx-row-main { flex: 1; min-width: 0; display: block; }
.srx-shell .sh-source-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ss-text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.srx-row-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ss-text-muted);
  text-align: left;
}
.srx-row-sub .src-badges,
.srx-row-sub .src-badge {
  display: inline-flex;
  margin: 0;
  font-size: 11px;
}
.srx-row-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ss-ongoing);
}
.srx-row-dot.is-slow { background: var(--ss-hiatus); }
.srx-row-dot.is-down { background: var(--ss-completed); }
.srx-shell .sh-source-views {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ss-text-muted);
  padding: 0;
  margin: 0;
}
.srx-row-chev {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ss-text-muted);
}

/* Favourite star — the one place accent colour is used on a control. */
.srx-shell .srx-fav-btn {
  position: static;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--ss-radius, 8px);
  color: var(--ss-text-muted);
  font-size: 15px;
  cursor: pointer;
  opacity: 1;
  box-shadow: none;
}
.srx-shell .srx-fav-btn:hover { background: var(--ss-surface-2); color: var(--ss-text); }
.srx-shell .srx-fav-btn.is-fav { color: var(--accent, #7c5cff); }
.srx-shell .srx-fav-btn:focus-visible {
  outline: 2px solid var(--accent, #7c5cff);
  outline-offset: -2px;
}

/* Staff-only row extras stay out of the reading rhythm. */
.srx-row-admin {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss-4, 4px);
  padding: 0 0 var(--ss-8, 8px) 44px;
  font-size: 12px;
  color: var(--ss-text-muted);
}
.srx-shell .sh-source-card-wrap:has(.srx-row-admin) { flex-wrap: wrap; }

/* ---------- Empty states ---------- */

.srx-shell .srx-empty,
.srx-shell .sh-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ss-12, 12px);
  padding: var(--ss-32, 32px) 0;
  background: none;
  border: 0;
  color: var(--ss-text-muted);
  font-size: 14px;
  text-align: left;
}
.srx-shell .srx-empty .srx-empty-t,
.srx-shell .sh-empty h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-text);
}
.srx-shell .srx-empty p,
.srx-shell .sh-empty p { margin: 0; }
.srx-shell .srx-empty i.fa-plug-circle-xmark { display: none; }

/* ---------- Options panel (overlay + sheet) ---------- */

.srx-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ss-transition, 120ms ease), visibility var(--ss-transition, 120ms ease);
}
.srx-overlay.is-open { opacity: 1; visibility: visible; }

.srx-options-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--ss-bg);
  border-left: 1px solid var(--ss-border);
  color: var(--ss-text);
  transform: translateX(100%);
  transition: transform var(--ss-transition, 120ms ease);
}
.srx-options-panel.is-open { transform: translateX(0); }
.srx-options-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-8, 8px);
  padding: var(--ss-16, 16px);
  border-bottom: 1px solid var(--ss-border);
}
.srx-options-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.srx-options-body {
  flex: 1;
  overflow: auto;
  padding: var(--ss-8, 8px) var(--ss-16, 16px) var(--ss-32, 32px);
  -webkit-overflow-scrolling: touch;
}
.srx-opt-section { padding: var(--ss-16, 16px) 0; border-bottom: 1px solid var(--ss-border); }
.srx-opt-section:last-child { border-bottom: 0; }
.srx-opt-title {
  margin: 0 0 var(--ss-8, 8px);
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-text);
}
.srx-opt-hint { margin: 0 0 var(--ss-8, 8px); font-size: 12px; color: var(--ss-text-muted); line-height: 1.5; }
.srx-opt-actions { display: flex; flex-wrap: wrap; gap: var(--ss-8, 8px); }
.srx-opt-actions .srx-btn { flex: 1 1 auto; }
.srx-handle { display: none; }

/* Sort + chips inside the panel */
.srx-options-panel .srx-sort,
.srx-options-panel .srx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-8, 8px);
  background: none;
  border: 0;
  padding: 0;
}
.srx-options-panel .srx-sort button,
.srx-options-panel .srx-chip {
  min-height: 36px;
  padding: 0 var(--ss-12, 12px);
  border-radius: var(--ss-radius-chip, 6px);
  border: 1px solid var(--ss-border);
  background: var(--ss-surface);
  color: var(--ss-text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.srx-options-panel .srx-sort button.active,
.srx-options-panel .srx-chip.active {
  background: var(--ss-surface-2);
  border-color: var(--ss-border-strong);
  color: var(--ss-text);
  font-weight: 600;
}

/* Rails / suggested / staff blocks docked in the panel */
.srx-options-panel .srx-rail {
  display: flex;
  flex-direction: column;
  gap: var(--ss-4, 4px);
  overflow: visible;
}
.srx-options-panel .srx-scard,
.srx-options-panel .srx-featured {
  display: flex;
  align-items: center;
  gap: var(--ss-8, 8px);
  min-height: 44px;
  padding: var(--ss-8, 8px);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ss-border);
  border-radius: 0;
  box-shadow: none;
  color: var(--ss-text);
  text-decoration: none;
  font-size: 13px;
  width: auto;
  min-width: 0;
}
.srx-options-panel .srx-scard:hover,
.srx-options-panel .srx-featured:hover { background: var(--ss-surface-2); transform: none; }
.srx-options-panel .srx-scard-logo,
.srx-options-panel .srx-featured-logo {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--ss-surface-2);
  border: 1px solid var(--ss-border);
  font-size: 11px; font-weight: 600; color: var(--ss-text-muted);
}
.srx-options-panel .srx-scard-name,
.srx-options-panel .srx-featured-name { font-size: 13px; font-weight: 600; }
.srx-options-panel .srx-scard-meta,
.srx-options-panel .srx-featured-meta,
.srx-options-panel .srx-featured-eyebrow { font-size: 11px; color: var(--ss-text-muted); }
.srx-options-panel .srx-scard-rank,
.srx-options-panel .srx-scard-badge,
.srx-options-panel .srx-featured-badge,
.srx-options-panel .srx-featured-cta { font-size: 11px; color: var(--ss-text-muted); }
.srx-options-panel .sh-suggested-grid {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
}
.srx-options-panel .sh-source-card-wrap {
  display: flex;
  align-items: center;
  gap: var(--ss-8, 8px);
  border-bottom: 1px solid var(--ss-border);
  background: none;
  box-shadow: none;
  flex-wrap: wrap;
}
.srx-options-panel .sh-source-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--ss-8, 8px);
  min-height: 44px;
  padding: var(--ss-8, 8px);
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ss-text);
  text-decoration: none;
}
.srx-options-panel .sh-source-name { font-size: 13px; font-weight: 600; text-align: left; }
.srx-options-panel .sh-source-views { font-size: 11px; color: var(--ss-text-muted); }
.srx-options-panel .srel-panel {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.srx-options-panel .srel-head { flex-direction: column; align-items: flex-start; gap: var(--ss-8, 8px); }
.srx-options-panel .srel-head h2 { font-size: 13px; }
.srx-options-panel input[type="search"],
.srx-options-panel select,
.srx-options-panel .form-input {
  min-height: 40px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius, 8px);
  background: var(--ss-surface);
  color: var(--ss-text);
  font-family: inherit;
  font-size: 13px;
  padding: 0 var(--ss-8, 8px);
}

/* Mobile: bottom sheet with a drag handle (Reader Settings pattern) */
@media (max-width: 719px) {
  .srx-options-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    border-left: 0;
    border-top: 1px solid var(--ss-border);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .srx-options-panel.is-open { transform: translateY(0); }
  .srx-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: var(--ss-8, 8px) auto 0;
    border-radius: 999px;
    background: var(--ss-border-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .srx-options-panel, .srx-overlay { transition: none; }
}

/* Body scroll lock while the sheet is open */
body.srx-panel-open { overflow: hidden; }

/* Utility: legacy sheets set display on these classes, so [hidden]
   needs to win here (the count badge and the panel/overlay). */
.srx-shell [hidden],
.srx-options-panel[hidden],
.srx-options-overlay[hidden] { display: none !important; }

/* Rows inherit centred text from the old card styles. */
.srx-shell .sh-source-card,
.srx-shell .sh-source-card-wrap { text-align: left; }

/* source-hub.css lays these out as centred column cards; the Shell
   needs a single horizontal row, so the direction is pinned here. */
.srx-shell .sh-source-card {
  flex-direction: row !important;
  align-items: center;
  text-align: left;
}
.srx-shell .sh-source-logo {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--ss-radius, 8px);
  font-size: 12px;
  font-weight: 600;
}
.srx-shell .sh-source-views {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ss-text-muted);
}