/* ═══════════════════════════════════════════════════════════════════════════
   STANCE LIBRARY  ·  issue-first companion to the Evidence Locker
   ────────────────────────────────────────────────────────────────────────────
   Where the Evidence Locker organizes the site by receipt and the Politician
   browser organizes it by person, the Stance Library organizes it by ISSUE.
   Pick a topic and see — in one calm surface — every politician on record, how
   they lean, their sourced one-liner, and the community conversation around it.

   All markup is injected by stance-library.js into #stance-library. These styles
   deliberately mirror the Evidence Locker's `.el-` look (dark navy panels, blue
   primary, gold active, calm borders) so the two libraries read as siblings, and
   they reuse the shared window.PDXStance pill (.pdxis-stance-*) verbatim for the
   four-state stance vocabulary — no bespoke stance colors live here.
   Prefix: `.sl-`  (Stance Library).
   ═══════════════════════════════════════════════════════════════════════════ */

#stance-library {
  padding: 4rem 1rem 5rem;
  background: linear-gradient(180deg, rgba(13, 21, 38, 0.92) 0%, rgba(10, 15, 30, 0.96) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  scroll-margin-top: 80px;
}
.sl-shell { max-width: 80rem; margin: 0 auto; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.sl-head { text-align: center; margin-bottom: 1.75rem; }
.sl-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px; padding: 0.35rem 0.9rem; margin-bottom: 0.85rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: #93c5fd;
}
.sl-title {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: clamp(2.1rem, 6vw, 3.4rem); letter-spacing: 0.04em;
  line-height: 1.02; margin: 0 0 0.55rem; color: #eef4ff;
}
.sl-title span { color: #60a5fa; }
.sl-lede {
  max-width: 46rem; margin: 0 auto; color: #9fb4d4;
  font-family: 'Barlow', sans-serif; font-size: 0.98rem; line-height: 1.6;
}
.sl-lede strong { color: #cfe0fb; }

/* ── Toolbar: search + filter groups ───────────────────────────────────── */
.sl-toolbar {
  background: rgba(13, 21, 38, 0.6); border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 1rem; padding: 1rem 1.05rem 0.7rem; margin-bottom: 1.5rem;
}
.sl-searchbar {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(6, 12, 24, 0.7); border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 0.7rem; padding: 0.55rem 0.85rem; margin-bottom: 0.85rem;
}
.sl-searchbar:focus-within { border-color: rgba(96, 165, 250, 0.55); }
.sl-searchbar svg { flex: none; opacity: 0.7; }
.sl-search {
  flex: 1; background: transparent; border: 0; outline: none;
  color: #eaf1ff; font-family: 'Barlow', sans-serif; font-size: 0.95rem;
}
.sl-search::placeholder { color: #6f83a6; }
.sl-search-clear {
  flex: none; background: transparent; border: 0; cursor: pointer;
  color: #7f93b6; font-size: 1.1rem; line-height: 1; padding: 0 0.15rem;
}
.sl-search-clear:hover { color: #cfe0fb; }

.sl-fgroup { margin-bottom: 0.55rem; }
.sl-fgroup-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #7f93b6;
  margin: 0 0 0.35rem 0.1rem;
}
.sl-chips {
  display: flex; gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto;
  padding-bottom: 0.35rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.sl-chips::-webkit-scrollbar { height: 5px; }
.sl-chips::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, 0.28); border-radius: 4px; }
.sl-chip {
  flex: none; cursor: pointer; white-space: nowrap;
  background: rgba(30, 44, 74, 0.55); border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 999px; padding: 0.38rem 0.85rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem;
  letter-spacing: 0.02em; color: #c4d5f0; transition: all 0.15s ease;
}
.sl-chip:hover { border-color: rgba(96, 165, 250, 0.5); color: #eaf1ff; }
.sl-chip.is-active {
  background: linear-gradient(135deg, #fad96a, #e6b800); border-color: #e6b800;
  color: #1a1206; font-weight: 700;
}
.sl-chip--hot.is-active {
  background: linear-gradient(135deg, #fca5a5, #ef4444); border-color: #ef4444; color: #1a0606;
}
.sl-chip-n { opacity: 0.65; font-size: 0.74rem; margin-left: 0.25rem; }
/* Core National Issue chips carry their issue colour (issue-colors.js): a soft
   tint and a coloured edge at rest, the solid colour when active. `--pdx-ic-ink`
   rather than `--pdx-ic` for the label — the ink variant is the same hue
   lightened only as far as it needs to be to stay legible on the navy, so the
   deeper blues and purples read as text instead of disappearing into it. The
   active state fills with the true brand colour and drops to near-black text,
   which is the same active pattern the gold chips already use. */
.sl-chip--core {
  background: var(--pdx-ic-soft, rgba(30, 44, 74, 0.55));
  border-color: var(--pdx-ic, rgba(96, 165, 250, 0.2));
  color: var(--pdx-ic-ink, #c4d5f0);
}
.sl-chip--core:hover { border-color: var(--pdx-ic, rgba(96, 165, 250, 0.5)); color: #eaf1ff; }
.sl-chip--core.is-active {
  background: var(--pdx-ic, #e6b800);
  border-color: var(--pdx-ic, #e6b800);
  color: #0a0f1e;
}

/* ── Browse grid ───────────────────────────────────────────────────────── */
.sl-status { text-align: center; color: #8ea4c6; font-size: 0.9rem; padding: 2rem 0; }
.sl-grid {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
/* The card's left edge is its issue colour (issue-colors.js) — the same edge
   colour the issue's Word vs Action row and coverage gap carry, so the three
   surfaces read as one issue rather than three unrelated lists. Falls back to
   the original blue when the module has not loaded, and to neutral slate for an
   issue outside the Core National set. */
.sl-card {
  text-align: left; cursor: pointer; position: relative;
  background: linear-gradient(160deg, rgba(18, 28, 48, 0.85), rgba(11, 18, 33, 0.92));
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-left: 3px solid var(--pdx-ic, rgba(96, 165, 250, 0.55));
  border-radius: 0.85rem; padding: 0.95rem 1rem 0.85rem; width: 100%;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sl-card:hover {
  transform: translateY(-2px); border-left-color: var(--pdx-ic, #60a5fa);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.sl-card-top { display: flex; align-items: flex-start; gap: 0.55rem; margin-bottom: 0.55rem; }
.sl-card-ico { font-size: 1.4rem; line-height: 1; flex: none; }
.sl-card-titles { flex: 1; min-width: 0; }
.sl-card-title {
  font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.02rem;
  color: #eef4ff; line-height: 1.2;
}
.sl-card-cat {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: #8ea4c6; margin-top: 0.15rem;
}
.sl-card-hot {
  flex: none; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fca5a5; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 999px; padding: 0.15rem 0.45rem; font-family: 'Barlow Condensed', sans-serif;
}
/* The pill names the Core National Issue by name, so it is the one element on
   the card that most needs to match the rail chip above it. */
.sl-card-core {
  display: inline-block; margin-bottom: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--pdx-ic-ink, #a5b8da);
  background: var(--pdx-ic-soft, rgba(96, 165, 250, 0.1));
  border: 1px solid var(--pdx-ic, rgba(96, 165, 250, 0.22));
  border-radius: 0.4rem; padding: 0.1rem 0.45rem;
}
/* Stance split mini-bar */
.sl-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: rgba(140, 156, 182, 0.15); margin-bottom: 0.5rem; }
.sl-bar-seg { height: 100%; }
.sl-bar-sup { background: #2dd4a4; }
.sl-bar-opp { background: #f8715a; }
.sl-bar-mix { background: #f5c142; }
.sl-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; color: #9fb4d4;
}
.sl-card-count b { color: #eaf1ff; }
.sl-card-go { color: #60a5fa; }

.sl-empty { text-align: center; padding: 3rem 1rem; color: #8ea4c6; }
.sl-empty-ico { font-size: 2rem; margin-bottom: 0.5rem; }
.sl-empty-title { font-weight: 700; color: #cfe0fb; }

/* ── Detail view ───────────────────────────────────────────────────────── */
.sl-detail { animation: sl-fade 0.2s ease; }
@keyframes sl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sl-dhead {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
  justify-content: space-between; margin-bottom: 1.3rem;
  background: linear-gradient(160deg, rgba(18, 28, 48, 0.85), rgba(11, 18, 33, 0.92));
  border: 1px solid rgba(96, 165, 250, 0.16); border-radius: 1rem; padding: 1.2rem 1.25rem;
}
.sl-dhead-main { display: flex; gap: 0.85rem; align-items: flex-start; min-width: 0; }
.sl-dhead-ico { font-size: 2.2rem; line-height: 1; flex: none; }
.sl-dhead-eyebrow {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #7f93b6;
}
.sl-dhead-title {
  font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.5rem;
  color: #eef4ff; line-height: 1.15; margin: 0.1rem 0 0.35rem;
}
.sl-dhead-sub { color: #9fb4d4; font-size: 0.9rem; }
.sl-dhead-sub strong { color: #eaf1ff; }
.sl-dactions { display: flex; flex-direction: column; gap: 0.45rem; flex: none; }
.sl-btn {
  cursor: pointer; border-radius: 0.55rem; padding: 0.5rem 0.85rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; letter-spacing: 0.03em;
  border: 1px solid rgba(96, 165, 250, 0.3); background: rgba(30, 44, 74, 0.5);
  color: #c4d5f0; transition: all 0.15s ease; white-space: nowrap;
}
.sl-btn:hover { border-color: rgba(96, 165, 250, 0.6); color: #eaf1ff; }
.sl-btn--gold { border-color: rgba(230, 184, 0, 0.5); color: #fad96a; }
.sl-btn--gold:hover { background: rgba(230, 184, 0, 0.14); }
.sl-back {
  cursor: pointer; background: transparent; border: 0; color: #93c5fd;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem; letter-spacing: 0.04em;
  padding: 0.2rem 0; margin-bottom: 0.9rem;
}
.sl-back:hover { color: #cfe0fb; }

/* Stance jump-nav */
.sl-jnav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.sl-jchip {
  cursor: pointer; border-radius: 999px; padding: 0.35rem 0.8rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem;
  border: 1px solid rgba(140, 156, 182, 0.3); background: rgba(30, 44, 74, 0.4); color: #c4d5f0;
}
.sl-jchip.is-empty { opacity: 0.4; cursor: default; }
.sl-jchip.is-support { border-color: rgba(45, 212, 164, 0.42); }
.sl-jchip.is-oppose  { border-color: rgba(248, 113, 90, 0.42); }
.sl-jchip.is-mixed   { border-color: rgba(245, 193, 66, 0.42); }
.sl-jn { opacity: 0.7; margin-left: 0.2rem; }

/* Stance bucket sections */
.sl-sec { margin-bottom: 1.4rem; scroll-margin-top: 90px; }
.sl-sec-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.sl-sec-dot { font-size: 0.7rem; }
.sl-sec.is-support .sl-sec-dot { color: #2dd4a4; }
.sl-sec.is-oppose  .sl-sec-dot { color: #f8715a; }
.sl-sec.is-mixed   .sl-sec-dot { color: #f5c142; }
.sl-sec.is-none    .sl-sec-dot { color: #a4b4cc; }
.sl-sec-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: #dbe6fb; font-weight: 700;
}
.sl-sec-n {
  font-size: 0.75rem; color: #8ea4c6; background: rgba(140, 156, 182, 0.14);
  border-radius: 999px; padding: 0.05rem 0.5rem;
}
.sl-polgrid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }

.sl-pol {
  background: linear-gradient(160deg, rgba(18, 28, 48, 0.8), rgba(11, 18, 33, 0.9));
  border: 1px solid rgba(96, 165, 250, 0.14); border-radius: 0.8rem; padding: 0.85rem 0.95rem;
}
.sl-pol-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; }
.sl-pol-photo {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none;
  background: rgba(96, 165, 250, 0.15); border: 1px solid rgba(96, 165, 250, 0.25);
}
.sl-pol-ph-fallback {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 1.1rem;
  background: rgba(96, 165, 250, 0.15); border: 1px solid rgba(96, 165, 250, 0.25);
}
.sl-pol-id { flex: 1; min-width: 0; }
.sl-pol-name { font-family: 'Barlow', sans-serif; font-weight: 700; color: #eef4ff; font-size: 0.98rem; }
.sl-pol-office { font-size: 0.78rem; color: #8ea4c6; }
.sl-pol-sig { margin-bottom: 0.5rem; }
.sl-pol-text {
  color: #c8d6ee; font-family: 'Barlow', sans-serif; font-size: 0.88rem; line-height: 1.5;
  border-left: 2px solid rgba(96, 165, 250, 0.28); padding-left: 0.6rem; margin-bottom: 0.45rem;
}
.sl-pol-text + .sl-pol-text { margin-top: 0.5rem; }
.sl-pol-src { display: block; font-size: 0.76rem; color: #93c5fd; margin-top: 0.2rem; }
.sl-pol-src a { color: #93c5fd; text-decoration: underline; }
.sl-pol-src a:hover { color: #cfe0fb; }
.sl-pol-acts { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.55rem; }
.sl-pol-act {
  cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: 0.76rem;
  border-radius: 0.45rem; padding: 0.32rem 0.6rem; border: 1px solid rgba(96, 165, 250, 0.25);
  background: rgba(30, 44, 74, 0.45); color: #a5b8da;
}
.sl-pol-act:hover { border-color: rgba(96, 165, 250, 0.55); color: #eaf1ff; }

/* Voting-record rollup on a politician card (Phase 4). Filled in async; empty
   for members with no votes on record, so it takes no space until populated. */
.sl-pol-record:empty { display: none; }
.sl-pol-record { margin-top: 0.55rem; }
.sl-rec-line {
  font-family: 'Barlow', sans-serif; font-size: 0.8rem; color: #b9c9e6; line-height: 1.45;
  background: rgba(6, 12, 24, 0.5); border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 0.55rem; padding: 0.4rem 0.6rem; margin-bottom: 0.4rem;
}
.sl-rec-line b { color: #eaf1ff; font-weight: 700; }
.sl-rec-flag {
  display: inline-block; margin-left: 0.35rem; font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: #fca5a5;
  background: rgba(248, 113, 113, 0.14); border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 999px; padding: 0.05rem 0.45rem; white-space: nowrap;
}
.sl-rec-btn { border-color: rgba(127, 180, 255, 0.4); color: #bfdbfe; }
.sl-rec-btn:hover { border-color: rgba(127, 180, 255, 0.7); color: #eaf1ff; }
.sl-pol-party {
  font-size: 0.68rem; font-weight: 700; border-radius: 0.3rem; padding: 0.05rem 0.35rem;
  margin-left: 0.35rem; vertical-align: middle;
}
.sl-pol-party.R { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
.sl-pol-party.D { color: #93c5fd; background: rgba(59, 130, 246, 0.14); }
.sl-pol-party.I, .sl-pol-party.N { color: #d8c7f0; background: rgba(167, 139, 250, 0.14); }

/* Connected-evidence + community blocks */
.sl-block {
  background: rgba(13, 21, 38, 0.55); border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 0.9rem; padding: 1rem 1.1rem; margin-top: 1.3rem;
}
.sl-block-title {
  display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.92rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #dbe6fb; font-weight: 700;
}
.sl-block-note { color: #9fb4d4; font-size: 0.86rem; line-height: 1.55; margin-bottom: 0.7rem; }
.sl-thread {
  display: block; text-align: left; width: 100%; cursor: pointer;
  background: rgba(6, 12, 24, 0.5); border: 1px solid rgba(96, 165, 250, 0.12);
  border-radius: 0.6rem; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
}
.sl-thread:hover { border-color: rgba(96, 165, 250, 0.4); }
.sl-thread-title { color: #eaf1ff; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 0.9rem; }
.sl-thread-meta { color: #8ea4c6; font-size: 0.76rem; margin-top: 0.2rem; }
.sl-block-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #stance-library { padding: 2.5rem 0.75rem 3.5rem; }
  .sl-grid { grid-template-columns: 1fr; }
  .sl-polgrid { grid-template-columns: 1fr; }
  .sl-dhead { flex-direction: column; }
  .sl-dactions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .sl-btn { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADOPT THIS STANCE  ·  quick-add an issue position into My Stances
   ────────────────────────────────────────────────────────────────────────────
   Sits under the issue detail header. Turns "where THEY stand" into "where YOU
   stand" in one tap. Position colors reuse the app's four-state vocabulary.
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-adopt {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(96, 165, 250, 0.05));
  border: 1px solid rgba(250, 204, 21, 0.28); border-radius: 0.9rem;
  padding: 0.9rem 1rem; margin: 0 0 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem;
}
.sl-adopt.is-set { border-color: rgba(74, 222, 128, 0.4); background: linear-gradient(135deg, rgba(74, 222, 128, 0.09), rgba(13, 21, 38, 0.4)); }
.sl-adopt-lead { display: flex; flex-direction: column; gap: 0.1rem; margin-right: 0.35rem; }
.sl-adopt-eyebrow {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fcd34d;
}
.sl-adopt-q { font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; color: #eef4ff; }
.sl-adopt-q em { font-style: normal; color: #fcd34d; }
.sl-adopt-btns { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.sl-adopt-btn {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(13, 21, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.6rem; padding: 0.45rem 0.8rem; color: #cbd9ec;
  font-family: 'Barlow', sans-serif; font-size: 0.9rem; font-weight: 600;
  transition: transform 0.12s, border-color 0.12s, background 0.12s, color 0.12s;
}
.sl-adopt-btn:hover { transform: translateY(-1px); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.sl-adopt-btn.is-support.is-on { background: rgba(74, 222, 128, 0.2); border-color: #4ade80; color: #bbf7d0; }
.sl-adopt-btn.is-oppose.is-on { background: rgba(248, 113, 113, 0.2); border-color: #f87171; color: #fecaca; }
.sl-adopt-btn.is-mixed.is-on { background: rgba(250, 204, 21, 0.2); border-color: #facc15; color: #fde68a; }
.sl-adopt-btn.is-support:hover { border-color: rgba(74, 222, 128, 0.55); }
.sl-adopt-btn.is-oppose:hover { border-color: rgba(248, 113, 113, 0.55); }
.sl-adopt-btn.is-mixed:hover { border-color: rgba(250, 204, 21, 0.55); }
.sl-adopt-status { flex: 1 1 100%; color: #90a4c4; font-family: 'Barlow', sans-serif; font-size: 0.82rem; line-height: 1.45; }
.sl-adopt-status.is-set { color: #a7d8b6; }
.sl-adopt-link {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700;
  color: #60a5fa; text-decoration: underline;
}
.sl-adopt-link:hover { color: #93c5fd; }
@media (max-width: 640px) {
  .sl-adopt-btn { flex: 1; justify-content: center; }
  .sl-adopt-btns { width: 100%; }
}