/* ═══════════════════════════════════════════════════════════════════════════
   MY STANCES  ·  the visitor's own positions on the issues
   ────────────────────────────────────────────────────────────────────────────
   The mirror image of the Stance Library: that surface shows where POLITICIANS
   stand, this is where YOU stand. All markup is injected by my-stances.js into
   #ms-body. Styles deliberately mirror the Stance Library's `.sl-` look (dark
   navy panels, blue primary #60a5fa, gold active) so the two read as siblings.
   Position colors reuse the app's four-state stance vocabulary — green support,
   red oppose, amber mixed. Prefix: `.ms-` (My Stances).
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Header ─────────────────────────────────────────────────────────────── */
.ms-head { text-align: center; margin-bottom: 1.6rem; }
.ms-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 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: #fcd34d;
}
.ms-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;
}
.ms-title span { color: #fcd34d; }
.ms-lede {
  max-width: 46rem; margin: 0 auto; color: #9fb4d4;
  font-family: 'Barlow', sans-serif; font-size: 0.98rem; line-height: 1.6;
}
.ms-lede strong { color: #e7ecf6; }

.ms-status { text-align: center; color: #6f83a6; padding: 2rem 0; font-family: 'Barlow', sans-serif; }

.ms-wrap { font-family: 'Barlow', sans-serif; }

/* ── Account banner ─────────────────────────────────────────────────────── */
.ms-acct {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(13, 21, 38, 0.6); border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 0.7rem; padding: 0.65rem 0.9rem; margin-bottom: 1.1rem;
  color: #a9bdda; font-size: 0.88rem;
}
.ms-acct.is-in { border-color: rgba(74, 222, 128, 0.2); }
.ms-acct-ic { font-size: 1rem; flex: none; }
.ms-acct strong { color: #e7ecf6; }

.ms-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #60a5fa; font: inherit; font-weight: 600; text-decoration: underline;
}
.ms-link:hover { color: #93c5fd; }

/* ── Summary of current stances ─────────────────────────────────────────── */
.ms-summary {
  background: rgba(13, 21, 38, 0.55); border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 1rem; padding: 1.05rem 1.1rem; margin-bottom: 1.1rem;
}
.ms-summary.is-empty { text-align: center; }
.ms-sum-emptytitle { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; letter-spacing: 0.02em; color: #cfe0fb; margin-bottom: 0.35rem; }
.ms-sum-emptybody { color: #90a4c4; font-size: 0.92rem; line-height: 1.55; max-width: 40rem; margin: 0 auto; }
.ms-sum-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.ms-sum-head h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; letter-spacing: 0.03em; text-transform: uppercase; color: #eef4ff; }
.ms-sum-count {
  display: inline-flex; min-width: 1.4rem; justify-content: center; margin-left: 0.35rem;
  background: rgba(250, 204, 21, 0.16); color: #fcd34d; border-radius: 999px;
  padding: 0.05rem 0.5rem; font-size: 0.85rem; font-weight: 700;
}
.ms-sum-clear { font-size: 0.82rem; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  background: rgba(6, 12, 24, 0.7); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px; padding: 0.35rem 0.7rem; color: #d6e2f5; font-size: 0.85rem;
  transition: transform 0.12s, border-color 0.12s;
}
.ms-chip:hover { transform: translateY(-1px); }
.ms-chip.is-support { border-color: rgba(74, 222, 128, 0.45); }
.ms-chip.is-oppose { border-color: rgba(248, 113, 113, 0.45); }
.ms-chip.is-mixed { border-color: rgba(250, 204, 21, 0.45); }
/* A STAR IS A STAR ON A ROW, NOT A SECOND PRODUCT. A high-priority chip used to
   be flooded gold — a whole second colour language sitting beside the issue
   colours and the three side colours, competing with both. The ⭐ glyph says it
   now, and the chip keeps its issue's own wash. */
.ms-chip.is-priority { box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35); }
.ms-chip-prio { color: #fcd34d; }
.ms-chip[data-ic="on"] { background: var(--pdx-ic-wash); border-color: color-mix(in srgb, var(--pdx-ic) 52%, transparent); }
.ms-chip[data-ic="on"] .ms-chip-lbl { color: var(--pdx-ic-ink); }
/* The SIDE still outranks the issue on the chip's border, because the side is
   what the reader said and the colour is only which issue they said it about. */
.ms-chip[data-ic="on"].is-support { border-color: rgba(74, 222, 128, 0.55); }
.ms-chip[data-ic="on"].is-oppose { border-color: rgba(248, 113, 113, 0.55); }
.ms-chip[data-ic="on"].is-mixed { border-color: rgba(250, 204, 21, 0.55); }

/* ── THE "WHAT YOUR STANCES POWER" PANEL IS GONE, AND SO ARE ITS RULES ────
   .ms-powers / .ms-pow-title / .ms-pow-body / .ms-pow-actions / .ms-pow-btn
   dressed a block that named the Alignment Tool, Your Match and Say-vs-Do on
   the one document that may not show a match score, and two of its three
   buttons scrolled to ids this document does not contain. The markup went with
   it; leaving the stylesheet behind would have left the next author a styled
   shape to fill. See renderPowers' absence in my-stances.js. */

/* ── Showcase / public toggle ───────────────────────────────────────────── */
.ms-showcase {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgba(13, 21, 38, 0.55); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem; padding: 0.95rem 1.1rem; margin-bottom: 1.4rem;
}
.ms-showcase.is-on { border-color: rgba(74, 222, 128, 0.28); }
.ms-show-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; letter-spacing: 0.03em; color: #eef4ff; margin-bottom: 0.2rem; }
.ms-show-desc { color: #90a4c4; font-size: 0.86rem; line-height: 1.5; max-width: 46rem; }
.ms-show-note { color: #fcd34d; font-size: 0.8rem; margin-top: 0.35rem; }

.ms-toggle { position: relative; flex: none; display: inline-block; cursor: pointer; }
.ms-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ms-toggle-track {
  display: block; width: 3.1rem; height: 1.7rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.16s, border-color 0.16s;
}
.ms-toggle-thumb {
  position: absolute; top: 0.22rem; left: 0.24rem; width: 1.26rem; height: 1.26rem;
  border-radius: 50%; background: #e7ecf6; transition: transform 0.16s;
}
.ms-toggle input:checked + .ms-toggle-track { background: rgba(74, 222, 128, 0.55); border-color: rgba(74, 222, 128, 0.7); }
.ms-toggle input:checked + .ms-toggle-track .ms-toggle-thumb { transform: translateX(1.38rem); }
.ms-toggle input:disabled + .ms-toggle-track { opacity: 0.4; cursor: not-allowed; }

/* ── Browse ─────────────────────────────────────────────────────────────── */
.ms-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.ms-browse-title { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; letter-spacing: 0.03em; text-transform: uppercase; color: #eef4ff; }
.ms-search {
  display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 12rem; max-width: 20rem;
  background: rgba(6, 12, 24, 0.7); border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 0.7rem; padding: 0.45rem 0.75rem;
}
.ms-search:focus-within { border-color: rgba(96, 165, 250, 0.55); }
.ms-search-ic { opacity: 0.7; }
.ms-search-in { flex: 1; background: transparent; border: 0; outline: none; color: #eaf1ff; font: inherit; font-size: 0.92rem; }
.ms-search-in::placeholder { color: #6f83a6; }

.ms-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.ms-fchip {
  cursor: pointer; background: rgba(6, 12, 24, 0.6); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px; padding: 0.3rem 0.7rem; color: #a9bdda; font: inherit; font-size: 0.82rem;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ms-fchip:hover { border-color: rgba(96, 165, 250, 0.4); color: #cfe0fb; }
/* ── NO GOLD FOCUS PAINT ──────────────────────────────────────────────────
   The selected bundle chip used to be rgba(250, 204, 21, …) — the same gold a
   STARRED issue wears. So "Healthcare is the active filter" and "Healthcare is
   weighted high" were rendered in one colour, and that colour was not
   healthcare's. Selection now deepens the chip's OWN issue colour, which
   PDXIssueColors.skin() has already put on the element as --pdx-ic*, and the
   star keeps the star.

   THERE IS NO PER-ISSUE RULE HERE AND THERE CANNOT BE. Every value below is a
   local custom property set inline by skin(); this stylesheet never learns
   which issue it is painting. A chip whose key did not resolve carries no
   [data-ic] at all and falls through to the steel selected state underneath,
   which is the honest look for "not a core issue". */
.ms-fchip.is-on { background: rgba(148, 163, 184, 0.18); border-color: rgba(148, 163, 184, 0.5); color: #e6edf9; }
.ms-fchip[data-ic="on"] { border-color: color-mix(in srgb, var(--pdx-ic) 34%, transparent); }
.ms-fchip[data-ic="on"]:hover { border-color: color-mix(in srgb, var(--pdx-ic) 62%, transparent); color: #eaf1ff; }
.ms-fchip[data-ic="on"].is-on {
  background: var(--pdx-ic-wash); border-color: var(--pdx-ic);
  color: var(--pdx-ic-ink); font-weight: 600;
}

.ms-groups { display: flex; flex-direction: column; gap: 0.6rem; }
.ms-group { background: rgba(13, 21, 38, 0.5); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0.85rem; overflow: hidden; }
.ms-group-head {
  width: 100%; display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  background: transparent; border: 0; padding: 0.85rem 1rem; color: #dbe6f7; font: inherit;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.02rem; letter-spacing: 0.02em; text-align: left;
}
.ms-group-head:hover { background: rgba(96, 165, 250, 0.06); }
.ms-group-lbl { flex: 1; }
/* The bundle's own colour, resolved through PDXIssueColors.ROLLUP_PARENT for a
   bundle key and through the leaf index for a leaf — one road, skin(). */
.ms-group[data-ic="on"] { border-left: 3px solid color-mix(in srgb, var(--pdx-ic) 58%, transparent); }
.ms-group[data-ic="on"] > .ms-group-head { color: var(--pdx-ic-ink); }
.ms-group[data-ic="on"] > .ms-group-head:hover { background: var(--pdx-ic-wash); }
.ms-group-badge {
  flex: none; background: rgba(250, 204, 21, 0.16); color: #fcd34d; border-radius: 999px;
  padding: 0.05rem 0.5rem; font-size: 0.8rem; font-weight: 700; font-family: 'Barlow', sans-serif;
}
.ms-group-caret { flex: none; color: #6f83a6; transition: transform 0.16s; }
.ms-group.is-open .ms-group-caret { transform: rotate(180deg); }
.ms-group-body { display: none; padding: 0 0.7rem 0.7rem; }
.ms-group.is-open .ms-group-body { display: block; }

.ms-noresult { color: #6f83a6; text-align: center; padding: 1.5rem 0; }

/* ── One issue row ──────────────────────────────────────────────────────── */
.ms-issue {
  background: rgba(6, 12, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid transparent; border-radius: 0.7rem; padding: 0.75rem 0.85rem;
  margin-top: 0.55rem; transition: border-color 0.15s, background 0.4s;
}
.ms-issue.is-active.is-support { border-left-color: #4ade80; }
.ms-issue.is-active.is-oppose { border-left-color: #f87171; }
.ms-issue.is-active.is-mixed { border-left-color: #facc15; }
/* High-priority active row — a stronger, gold-tinged accent so the issues that
   weigh most in matches read as such at a glance. */
.ms-issue.is-priority { box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.2); }
/* The row's own issue colour. The LEFT edge stays the side (green / red /
   amber) on an answered row, because that is the reader's answer; the issue
   shows in the label and the wash, which is the same division the summary chip
   above makes. An inactive row is unwashed — a tint on all 121 rows would be a
   wall of colour saying nothing. */
.ms-issue[data-ic="on"] .ms-issue-lbl { color: var(--pdx-ic-ink); }
.ms-issue[data-ic="on"].is-active { background: var(--pdx-ic-wash); }
.ms-issue-pri {
  display: inline-block; margin-left: 0.5rem; vertical-align: middle;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fcd34d; background: rgba(250, 204, 21, 0.14); border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 999px; padding: 0.05rem 0.45rem;
}
/* Update feedback: a brief gold pulse on the chip/row that just changed. */
@keyframes msFlash {
  0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0); }
}
.ms-flash { animation: msFlash 0.9s ease-out; border-color: rgba(250, 204, 21, 0.7) !important; }
.ms-issue.ms-flash { background: rgba(250, 204, 21, 0.1); }
.ms-issue-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ms-issue-text { flex: 1; min-width: 13rem; }
.ms-issue-lbl { color: #eef4ff; font-weight: 600; font-size: 0.98rem; }
.ms-issue-chip { color: #90a4c4; font-size: 0.85rem; line-height: 1.45; margin-top: 0.15rem; }

.ms-pos-group { display: flex; gap: 0.35rem; flex: none; }
.ms-pos {
  display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  background: rgba(13, 21, 38, 0.8); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.55rem; padding: 0.4rem 0.6rem; color: #9fb4d4; font: inherit; font-size: 0.82rem; font-weight: 600;
  transition: all 0.12s;
}
.ms-pos:hover { color: #e7ecf6; border-color: rgba(255, 255, 255, 0.28); }
.ms-pos-ic { font-size: 0.9rem; }
.ms-pos.is-support.is-on { background: rgba(74, 222, 128, 0.18); border-color: #4ade80; color: #bbf7d0; }
.ms-pos.is-oppose.is-on { background: rgba(248, 113, 113, 0.18); border-color: #f87171; color: #fecaca; }
.ms-pos.is-mixed.is-on { background: rgba(250, 204, 21, 0.18); border-color: #facc15; color: #fde68a; }

/* Active-row controls */
.ms-row-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
/* Weight control. Segmented rather than a <select> because this is the one input
   that decides how hard an issue pulls on every match ranking the visitor sees -
   buried in a dropdown, almost nobody found it. Borrows .ms-pos-group's shape on
   purpose: same row, same idiom, one tap per level. */
.ms-prio { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; color: #90a4c4; font-size: 0.82rem; }
.ms-prio-cap { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.7rem; color: #6f83a6; margin-right: 0.15rem; }
.ms-prio-btn {
  display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer;
  background: rgba(13, 21, 38, 0.8); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem; padding: 0.34rem 0.55rem; min-height: 32px;
  color: #9fb4d4; font: inherit; font-size: 0.78rem; font-weight: 600;
  transition: all 0.12s;
}
.ms-prio-btn:hover { color: #e7ecf6; border-color: rgba(255, 255, 255, 0.28); }
.ms-prio-ic { font-size: 0.9rem; line-height: 1; }
.ms-prio-btn.is-high.is-on { background: rgba(250, 204, 21, 0.18); border-color: #facc15; color: #fde68a; }
.ms-prio-btn.is-medium.is-on { background: rgba(148, 163, 184, 0.18); border-color: rgba(203, 213, 225, 0.6); color: #e2e8f0; }
.ms-prio-btn.is-low.is-on { background: rgba(100, 116, 139, 0.16); border-color: rgba(148, 163, 184, 0.45); color: #b6c4d8; }

/* One-time prompt for people who set directions and never weighted them. Inline
   and dismissible - it must never sit between the visitor and their stances. */
.ms-nudge {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem; border-radius: 0.7rem;
  border: 1px solid rgba(250, 204, 21, 0.3); background: rgba(250, 204, 21, 0.08);
}
.ms-nudge-ic { font-size: 1rem; line-height: 1; }
.ms-nudge-txt { flex: 1; color: #fde68a; font-size: 0.86rem; line-height: 1.45; }
.ms-nudge-x {
  flex: none; cursor: pointer; background: transparent; border: 0; padding: 0.35rem 0.4rem;
  min-width: 34px; min-height: 34px; color: #b9a15a; font: inherit; font-size: 0.9rem; line-height: 1;
}
.ms-nudge-x:hover { color: #fde68a; }

.ms-browse-sub { margin: 0.35rem 0 0; color: #90a4c4; font-size: 0.82rem; line-height: 1.5; max-width: 46rem; }
.ms-browse-sub strong { color: #cfe0fb; font-weight: 600; }
.ms-notebtn {
  cursor: pointer; background: rgba(13, 21, 38, 0.8); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem; padding: 0.3rem 0.6rem; color: #a9bdda; font: inherit; font-size: 0.8rem;
}
.ms-notebtn:hover { color: #cfe0fb; border-color: rgba(96, 165, 250, 0.4); }
.ms-notebtn.has-note { color: #fcd34d; border-color: rgba(250, 204, 21, 0.35); }
.ms-remove {
  margin-left: auto; cursor: pointer; background: transparent; border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 0.5rem; padding: 0.28rem 0.55rem; color: #f87171; font: inherit; font-size: 0.85rem; line-height: 1;
}
.ms-remove:hover { background: rgba(248, 113, 113, 0.14); }

.ms-note-wrap { display: none; margin-top: 0.6rem; }
.ms-note-wrap.is-open { display: block; }
.ms-note {
  width: 100%; min-height: 3.2rem; resize: vertical; box-sizing: border-box;
  background: rgba(13, 21, 38, 0.9); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.55rem;
  color: #eaf1ff; font: inherit; font-size: 0.88rem; padding: 0.5rem 0.65rem;
}
.ms-note:focus { outline: none; border-color: rgba(96, 165, 250, 0.5); }
.ms-note-hint { display: block; color: #6f83a6; font-size: 0.76rem; margin-top: 0.3rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #my-stances { padding: 2.8rem 0.75rem 3.5rem; }
  .ms-issue-main { flex-direction: column; }
  .ms-pos-group { width: 100%; }
  .ms-pos { flex: 1; justify-content: center; min-height: 44px; }
  /* 44px targets: the weight control is the one people miss, so it gets a full
     tap row of its own rather than sharing a line with the note button. */
  .ms-prio { width: 100%; }
  .ms-prio-cap { width: 100%; margin: 0 0 0.15rem; }
  .ms-prio-btn { flex: 1; justify-content: center; min-height: 44px; }
  .ms-nudge-x { min-width: 44px; min-height: 44px; }
  .ms-showcase { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC SHOWCASE  ·  "My Views" card, share link, visitor overlay
   ═══════════════════════════════════════════════════════════════════════════ */

/* Owner preview of the public card, shown under the toggle when public is on. */
.ms-showcase { flex-direction: column; align-items: stretch; }
.ms-show-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ms-views-preview { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed rgba(255, 255, 255, 0.1); }
.ms-views-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.75rem; }
.ms-copy { border-color: rgba(74, 222, 128, 0.4) !important; color: #bbf7d0 !important; }
.ms-copy:hover { background: rgba(74, 222, 128, 0.14) !important; border-color: #4ade80 !important; }
.ms-views-hint { color: #6f83a6; font-size: 0.78rem; }

/* The read-only "My Views" card (shared by owner-preview and visitor overlay). */
.mv-card { background: rgba(6, 12, 24, 0.65); border: 1px solid rgba(96, 165, 250, 0.2); border-radius: 0.9rem; padding: 1.05rem 1.1rem; }
.mv-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.85rem; }
.mv-badge {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.9), rgba(230, 184, 0, 0.9)); color: #0a0f1e;
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif; font-size: 1.5rem; line-height: 1;
  box-shadow: 0 2px 12px rgba(245, 200, 66, 0.25);
}
.mv-headtext { min-width: 0; }
.mv-title { font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif; font-size: 1.5rem; letter-spacing: 0.04em; color: #eef4ff; line-height: 1.05; }
.mv-sub { color: #90a4c4; font-size: 0.82rem; margin-top: 0.15rem; }

/* Neutral at-a-glance stats */
.mv-stats { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.85rem; }
.mv-stat {
  flex: 1 1 0; min-width: 5.5rem; text-align: center;
  background: rgba(13, 21, 38, 0.7); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem; padding: 0.6rem 0.5rem;
}
.mv-stat.is-core { border-color: rgba(96, 165, 250, 0.28); }
.mv-stat.is-prio { border-color: rgba(250, 204, 21, 0.3); }
.mv-stat-n { font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif; font-size: 1.9rem; line-height: 1; color: #eef4ff; }
.mv-stat.is-core .mv-stat-n { color: #93c5fd; }
.mv-stat.is-prio .mv-stat-n { color: #fcd34d; }
.mv-stat-l { font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #90a4c4; margin-top: 0.2rem; }

/* Composition meter */
.mv-meter { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.06); margin-bottom: 0.5rem; }
.mv-seg { display: block; min-width: 3px; }
.mv-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.9rem; }
.mv-leg { display: inline-flex; align-items: center; gap: 0.35rem; color: #9fb4d4; font-size: 0.78rem; }
.mv-leg i { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }
.mv-leg b { color: #e7ecf6; font-weight: 700; }

.mv-groups { display: flex; flex-direction: column; gap: 0.75rem; }
.mv-group { border-left: 3px solid transparent; padding-left: 0.7rem; }
.mv-group.is-support { border-left-color: #4ade80; }
.mv-group.is-oppose { border-left-color: #f87171; }
.mv-group.is-mixed { border-left-color: #facc15; }
.mv-group-head { display: flex; align-items: center; gap: 0.4rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; color: #cfe0fb; margin-bottom: 0.45rem; }
.mv-group.is-support .mv-group-head { color: #bbf7d0; }
.mv-group.is-oppose .mv-group-head { color: #fecaca; }
.mv-group.is-mixed .mv-group-head { color: #fde68a; }
.mv-group-n { background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 0.02rem 0.45rem; font-size: 0.72rem; font-family: 'Barlow', sans-serif; }
.mv-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mv-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(13, 21, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 0.28rem 0.65rem; color: #d6e2f5; font-size: 0.83rem; }
.mv-star { color: #fcd34d; font-size: 0.78rem; }
.mv-empty { color: #6f83a6; font-size: 0.88rem; }

/* Copy toast */
.ms-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(1rem); z-index: 100000; max-width: min(92vw, 34rem); background: #0d1526; border: 1px solid rgba(74, 222, 128, 0.4); color: #eaf1ff; font-family: 'Barlow', sans-serif; font-size: 0.9rem; padding: 0.7rem 1.05rem; border-radius: 0.7rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.ms-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Visitor overlay (opened from a ?views= share link) */
.ms-ov { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 1.2rem; opacity: 0; transition: opacity 0.22s; }
.ms-ov.is-open { opacity: 1; }
.ms-ov-backdrop { position: absolute; inset: 0; background: rgba(3, 7, 16, 0.78); backdrop-filter: blur(3px); }
.ms-ov-panel { position: relative; width: 100%; max-width: 40rem; max-height: 88vh; overflow: auto; background: linear-gradient(180deg, rgba(13, 21, 38, 0.98), rgba(10, 15, 30, 0.99)); border: 1px solid rgba(96, 165, 250, 0.28); border-radius: 1.1rem; padding: 1.3rem 1.3rem 1.1rem; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65); transform: translateY(0.8rem); transition: transform 0.22s; font-family: 'Barlow', sans-serif; }
.ms-ov.is-open .ms-ov-panel { transform: translateY(0); }
.ms-ov-x { position: absolute; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #9fb4d4; cursor: pointer; font-size: 0.95rem; }
.ms-ov-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ms-ov-cta { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ms-ov-cta-txt { color: #a9bdda; font-size: 0.9rem; line-height: 1.5; flex: 1; min-width: 14rem; }
.ms-ov-cta-txt em { color: #fcd34d; font-style: normal; font-weight: 600; }
.ms-ov-cta-btn { cursor: pointer; background: linear-gradient(135deg, #fad96a, #e6b800); color: #0a0f1e; border: 0; border-radius: 0.6rem; padding: 0.55rem 0.95rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.85rem; }
.ms-ov-cta-btn:hover { filter: brightness(1.06); }

/* Quick-link buttons injected into other surfaces */
.align-mystances-link { margin-left: auto; cursor: pointer; background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 0.32); color: #fcd34d; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 0.5rem; transition: background 0.12s, border-color 0.12s; }
.align-mystances-link:hover { background: rgba(250, 204, 21, 0.2); border-color: rgba(250, 204, 21, 0.55); }
.align-ms-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 999px; background: rgba(250, 204, 21, 0.9); color: #0a0f1e; font-size: 0.7rem; font-weight: 800; }
.cmp-guide-link { cursor: pointer; background: rgba(250, 204, 21, 0.12); border: 1px solid rgba(250, 204, 21, 0.35); color: #fcd34d; font: inherit; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 0.4rem; white-space: nowrap; }
.cmp-guide-link:hover { background: rgba(250, 204, 21, 0.22); }

/* ═══════════════════════════════════════════════════════════════════════════
   YOUR STANCE vs THEIR RECORD  ·  profile + comparison integration
   ═══════════════════════════════════════════════════════════════════════════ */

/* The reusable block (profile modals). */
.msvs { font-family: 'Barlow', sans-serif; }
.msvs-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.msvs-head-t { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: #eef4ff; }
.msvs-head-t span { color: #8f9bb3; }
.msvs-tally { display: inline-flex; gap: 0.4rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.82rem; }
.msvs-tally .is-agree { color: #86efac; }
.msvs-tally .is-partial { color: #fde047; }
.msvs-tally .is-differ { color: #fca5a5; }
.msvs-list { display: flex; flex-direction: column; gap: 0.5rem; }
.msvs-row {
  background: rgba(6, 12, 24, 0.5); border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(255, 255, 255, 0.14); border-radius: 0.6rem; padding: 0.55rem 0.7rem;
  transition: transform 0.14s, border-color 0.14s, background 0.14s;
}
.msvs-row:hover { transform: translateX(2px); background: rgba(9, 16, 30, 0.7); }
.msvs-row.is-agree { border-left-color: #4ade80; }
.msvs-row.is-partial { border-left-color: #facc15; }
.msvs-row.is-differ { border-left-color: #f87171; }
.msvs-row.is-priority { box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.16); }
.msvs-issue { color: #e7ecf6; font-weight: 600; font-size: 0.88rem; margin-bottom: 0.4rem; }
.msvs-pri {
  display: inline-block; margin-right: 0.4rem; vertical-align: middle;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fcd34d; background: rgba(250, 204, 21, 0.14); border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 999px; padding: 0.05rem 0.45rem;
}
.msvs-topic { display: block; color: #8298b8; font-weight: 400; font-size: 0.76rem; margin-top: 0.1rem; }
.msvs-cells { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.msvs-side { display: inline-flex; align-items: center; gap: 0.3rem; }
.msvs-side-lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7f93b6; }
.msvs-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; font-size: 0.8rem; font-weight: 700; flex: none;
}
.msvs-arrow.is-agree { background: rgba(74, 222, 128, 0.18); color: #86efac; }
.msvs-arrow.is-partial { background: rgba(250, 204, 21, 0.18); color: #fde047; }
.msvs-arrow.is-differ { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }
.msvs-arrow.is-solo { background: rgba(255, 255, 255, 0.08); color: #9fb4d4; }
.msvs-pill { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.78rem; font-weight: 600; border: 1px solid transparent; }
.msvs-pill.is-support { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.45); color: #bbf7d0; }
.msvs-pill.is-oppose { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.45); color: #fecaca; }
.msvs-pill.is-mixed { background: rgba(250, 204, 21, 0.16); border-color: rgba(250, 204, 21, 0.45); color: #fde68a; }
.msvs-pill.msvs-none { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #9fb4d4; }
.msvs-star { color: #fcd34d; font-size: 0.72rem; }
.msvs-verdict { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 0.45rem; padding: 0.15rem 0.5rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.msvs-verdict.is-agree { background: rgba(74, 222, 128, 0.16); color: #86efac; }
.msvs-verdict.is-partial { background: rgba(250, 204, 21, 0.16); color: #fde047; }
.msvs-verdict.is-differ { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.msvs-verdict.is-solo { background: rgba(255, 255, 255, 0.08); color: #9fb4d4; }
.msvs-foot { margin-top: 0.65rem; color: #8298b8; font-size: 0.78rem; line-height: 1.45; }

/* Compare table "You: 👍 Support" chip in the issue label column. */
.cmp-issue-you { margin-top: 0.3rem; }
.ms-you-chip { display: inline-flex; align-items: center; gap: 0.28rem; border-radius: 999px; padding: 0.12rem 0.5rem; font-size: 0.74rem; font-weight: 700; border: 1px solid transparent; }
.ms-you-chip .ms-you-lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.85; margin-right: 0.12rem; }
.ms-you-chip.is-support { background: rgba(74, 222, 128, 0.15); border-color: rgba(74, 222, 128, 0.5); color: #bbf7d0; }
.ms-you-chip.is-oppose { background: rgba(248, 113, 113, 0.15); border-color: rgba(248, 113, 113, 0.5); color: #fecaca; }
.ms-you-chip.is-mixed { background: rgba(250, 204, 21, 0.15); border-color: rgba(250, 204, 21, 0.5); color: #fde68a; }
.ms-you-star { color: #fcd34d; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHARING  ·  one-tap options + generated-image buttons
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-share { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.ms-share-primary { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ms-sh-btn {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(6, 12, 24, 0.7); border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 0.6rem; padding: 0.5rem 0.85rem; color: #cfe0fb; font: inherit; font-size: 0.86rem; font-weight: 600;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.ms-sh-btn:hover { background: rgba(96, 165, 250, 0.14); border-color: rgba(96, 165, 250, 0.5); transform: translateY(-1px); }
.ms-sh-primary {
  background: linear-gradient(135deg, #fad96a, #e6b800); color: #0a0f1e; border-color: rgba(245, 200, 66, 0.9);
}
.ms-sh-primary:hover { filter: brightness(1.05); background: linear-gradient(135deg, #fad96a, #e6b800); }

.ms-share-nets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ms-sh-ic {
  cursor: pointer; width: 2.35rem; height: 2.35rem; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(6, 12, 24, 0.7); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.55rem;
  color: #e7ecf6; font-size: 1.05rem; line-height: 1; transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.ms-sh-ic:hover { transform: translateY(-1px); }
.ms-sh-x:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.ms-sh-facebook { font-family: Georgia, 'Times New Roman', serif; font-weight: 800; color: #93c5fd; }
.ms-sh-facebook:hover { background: rgba(59, 130, 246, 0.2); border-color: #3b82f6; }
.ms-sh-reddit:hover { background: rgba(255, 69, 0, 0.18); border-color: #ff4500; }
.ms-sh-whatsapp:hover { background: rgba(37, 211, 102, 0.18); border-color: #25d366; }
.ms-sh-bluesky:hover { background: rgba(10, 122, 255, 0.18); border-color: #0a7aff; }
.ms-sh-email:hover { background: rgba(148, 163, 184, 0.2); border-color: #94a3b8; }

/* Share row inside the visitor overlay */
.ms-ov-share { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ── Export / Backup (summary header actions) ───────────────────────────── */
.ms-sum-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ms-sum-exp {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(6, 12, 24, 0.7); border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 0.55rem; padding: 0.3rem 0.65rem; color: #cfe0fb;
  font: inherit; font-size: 0.8rem; font-weight: 600;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.ms-sum-exp:hover { background: rgba(96, 165, 250, 0.14); border-color: rgba(96, 165, 250, 0.5); transform: translateY(-1px); }