/* ═══════════════════════════════════════════════════════════════════════════
   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);
}
.sl-shell { max-width: 80rem; margin: 0 auto; }

/* ── Header · ONE LINE ──────────────────────────────────────────────────────
   The eyebrow, the clamp(2.1rem,6vw,3.4rem) display title and the lede that
   stood here were a billboard above a tool the reader had already arrived at.
   What is left is the sentence that names the surface and its destination. */
.sl-line {
  margin: 0 0 1.15rem; display: flex; align-items: baseline; justify-content: center;
  gap: 0.5rem; flex-wrap: wrap; text-align: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.95rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #cfe0f5;
}
.sl-line-go {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: #93c5fd; border-bottom: 1px solid rgba(147, 197, 253, 0.45);
}
.sl-line-go:hover, .sl-line-go:focus-visible { color: #dbeafe; }

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

/* ONE CHIP ROW, NOT THREE LABELLED GROUPS. `.sl-fgroup` / `.sl-fgroup-label`
   framed a Hot Topics row, a Core National Issues row and an All Topics row of
   nineteen categories — three rails of filters above a grid of every leaf. The
   desk has one rail: All issues, the thirteen core bundles, and Hot. */
.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; }
/* Sixteen chips fit on a desk but not on a phone: wrap where there is room,
   keep the swipeable single line where there is not. */
@media (min-width: 768px) {
  .sl-chips { flex-wrap: wrap; overflow-x: visible; }
}
.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; }

/* ── Shelves · the default view ─────────────────────────────────────────────
   ONE SCROLL OF EVERY LEAF WAS THE PROBLEM. The browse view used to be every
   ISSUE_MAP key with a documented stance in a single grid — a hundred-plus
   cards, sorted by coverage, with no structure a reader could skim. The desk
   is a Hot shelf plus one folded <details> per Core National Issue: a heading,
   the issue count, four preview cards, and a control that reveals the rest of
   that bundle. "All issues" is still on the rail; it is now a choice.

   THE SHELF WEARS ITS BUNDLE'S COLOUR, from the same PDXIssueColors table the
   rail chip, the card rail and every bill letterhead read — `--pdx-ic*` inline,
   consumed here, so no hex for a topic is ever written in this file. */
.sl-shelf {
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-left: 3px solid var(--pdx-ic, rgba(96, 165, 250, 0.4));
  border-radius: 0.9rem; margin-bottom: 0.7rem;
  background: rgba(13, 21, 38, 0.45);
}
.sl-shelf[open] { background: rgba(13, 21, 38, 0.62); }
.sl-shelf-sum {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 0.6rem; padding: 0.8rem 1rem; min-height: 48px;
}
.sl-shelf-sum::-webkit-details-marker { display: none; }
.sl-shelf-sum::after {
  content: '▸'; margin-left: auto; flex: none; color: #7f93b6;
  font-size: 0.85rem; transition: transform 0.15s ease;
}
.sl-shelf[open] > .sl-shelf-sum::after { transform: rotate(90deg); }
.sl-shelf-sum:hover { background: rgba(30, 58, 138, 0.14); border-radius: 0.85rem; }
.sl-shelf-sum:focus-visible { outline: 2px solid var(--pdx-ic, #60a5fa); outline-offset: -2px; }
.sl-shelf-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.95rem;
  letter-spacing: 0.05em; color: var(--pdx-ic-ink, #dbe7fb); min-width: 0;
}
/* A COUNT, AND ONLY EVER A COUNT. Coverage, never a grade: how many issues sit
   on this shelf, and on each card how many people are on record. */
.sl-shelf-n {
  flex: none; font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #8ea4c6;
  background: var(--pdx-ic-soft, rgba(96, 165, 250, 0.1));
  border: 1px solid var(--pdx-ic, rgba(96, 165, 250, 0.2));
  border-radius: 999px; padding: 0.12rem 0.5rem;
}
.sl-shelf-body { padding: 0 1rem 1rem; }
.sl-shelf-more {
  cursor: pointer; margin-top: 0.7rem; width: 100%; min-height: 44px;
  background: rgba(30, 44, 74, 0.5); border: 1px dashed var(--pdx-ic, rgba(96, 165, 250, 0.35));
  border-radius: 0.7rem; padding: 0.55rem 0.9rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pdx-ic-ink, #c4d5f0);
}
.sl-shelf-more:hover { color: #eaf1ff; border-style: solid; }
/* The one line above the shelves. Says what the view is; no figure on it. */
.sl-shelf-note {
  font-family: 'Barlow', sans-serif; font-size: 0.86rem; color: #8ea4c6;
  padding: 0 0 0.85rem;
}
.sl-shelf-note b { color: #eaf1ff; }
@media (max-width: 480px) {
  .sl-shelf-sum { padding: 0.7rem 0.75rem; }
  .sl-shelf-body { padding: 0 0.75rem 0.85rem; }
  .sl-shelf-title { font-size: 0.88rem; }
}

.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; }
.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%; }
}