/* ═══════════════════════════════════════════════════════════════════════════
   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; }

/* ── 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));
}
.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 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: #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;
}
.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: #a5b8da; background: rgba(96, 165, 250, 0.1); border: 1px solid 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%; }
}