/* ═══════════════════════════════════════════════════════════════════════════
   PolitiDex — Distributional Impact Ledger ("Who It Affects")  ·  .pdx-il-*
   ────────────────────────────────────────────────────────────────────────────
   Lives inside the Bill-detail panel, so it inherits that dark surface and the
   Barlow type. Palette is deliberately NON-partisan: teal = benefit, amber = cost
   (never red / blue). Direction is always reinforced by an arrow glyph and a text
   label, so meaning never depends on colour alone (colour-blind safe).
   ═══════════════════════════════════════════════════════════════════════════ */

.pdx-il .pdx-il-disclaimer {
  font: 500 .8rem/1.5 "Barlow", sans-serif;
  color: #cdd9ec;
  background: rgba(96, 165, 250, .08);
  border: 1px solid rgba(159, 180, 212, .16);
  border-radius: .6rem;
  padding: .6rem .75rem;
  margin: 0 0 .9rem;
}
.pdx-il .pdx-il-disclaimer strong { color: #fff; font-weight: 700; }

.pdx-il-axislabels {
  display: flex;
  justify-content: space-between;
  font: 700 .68rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7f93b3;
  padding: 0 .1rem .35rem;
}

.pdx-il-grid { display: flex; flex-direction: column; gap: .7rem; }

/* ── one cohort ─────────────────────────────────────────────────────────── */
.pdx-il-cohort {
  border: 1px solid rgba(159, 180, 212, .12);
  border-radius: .7rem;
  padding: .7rem .8rem .8rem;
  background: rgba(255, 255, 255, .02);
}
.pdx-il-chead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pdx-il-cicon { font-size: 1.05rem; line-height: 1; }
.pdx-il-cname {
  font: 700 .95rem/1.15 "Barlow Condensed", sans-serif;
  letter-spacing: .02em; color: #fff; flex: 1 1 auto;
}
.pdx-il-cnet {
  font: 700 .68rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 999px; white-space: nowrap;
}
.pdx-il-cdef {
  font: 500 .76rem/1.45 "Barlow", sans-serif;
  color: #9fb4d4; margin: .3rem 0 .1rem;
}

/* ── impacts list ───────────────────────────────────────────────────────── */
.pdx-il-impacts { list-style: none; margin: .55rem 0 0; padding: 0; }
.pdx-il-impact {
  padding: .55rem 0;
  border-top: 1px solid rgba(159, 180, 212, .1);
}
.pdx-il-impact:first-child { border-top: 0; }

.pdx-il-imeta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.pdx-il-dir {
  font: 700 .72rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: .35rem; white-space: nowrap;
}
.pdx-il-mag { font: 600 .84rem/1.3 "Barlow", sans-serif; color: #eaf1fb; }
.pdx-il-strength {
  font: 700 .64rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: .35rem; margin-left: auto; white-space: nowrap;
  border: 1px solid transparent;
}
.pdx-il-str-strong   { color: #7be0cf; background: rgba(45, 212, 191, .12); border-color: rgba(45, 212, 191, .3); }
.pdx-il-str-moderate { color: #cdd9ec; background: rgba(159, 180, 212, .12); border-color: rgba(159, 180, 212, .28); }
.pdx-il-str-limited  { color: #b9c4d6; background: rgba(159, 180, 212, .06); border-color: rgba(159, 180, 212, .18); border-style: dashed; }

/* ── diverging bar track ────────────────────────────────────────────────── */
.pdx-il-track { position: relative; height: 12px; margin: .1rem 0 .4rem; border-radius: 6px; background: rgba(255, 255, 255, .03); }
.pdx-il-axis0 { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(159, 180, 212, .35); }
.pdx-il-bar { position: absolute; top: 1px; bottom: 1px; border-radius: 5px; max-width: 50%; }
.pdx-il-right  { left: 50%; }
.pdx-il-left   { right: 50%; }
.pdx-il-center { left: 25%; }
.pdx-il-bar-qual { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 4px, transparent 4px 8px); opacity: .9; }

/* palette — teal = benefit, amber = cost, slate = mixed/neutral (never red/blue) */
.pdx-il-dir-benefit { color: #7be0cf; background: rgba(45, 212, 191, .16); }
.pdx-il-bar.pdx-il-dir-benefit { background-color: #2dd4bf; }
.pdx-il-dir-cost    { color: #f6c56b; background: rgba(246, 183, 60, .16); }
.pdx-il-bar.pdx-il-dir-cost { background-color: #f6b73c; }
.pdx-il-dir-mixed   { color: #cdd9ec; background: rgba(159, 180, 212, .16); }
.pdx-il-bar.pdx-il-dir-mixed { background-color: #9fb4d4; }
.pdx-il-dir-neutral { color: #9fb4d4; background: rgba(159, 180, 212, .1); }
.pdx-il-bar.pdx-il-dir-neutral { background-color: #6b7d99; }

.pdx-il-metric { font: 500 .82rem/1.45 "Barlow", sans-serif; color: #cdd9ec; }
.pdx-il-prov {
  font: 600 .68rem/1 "Barlow Condensed", sans-serif; letter-spacing: .03em;
  text-transform: uppercase; color: #93c5fd;
  background: rgba(96, 165, 250, .12); border-radius: .3rem; padding: .12rem .38rem; margin-left: .25rem;
}

/* ── "why this reading" disclosure ──────────────────────────────────────── */
.pdx-il-more { margin-top: .35rem; }
.pdx-il-more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .3rem;
  font: 700 .72rem/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #93c5fd;
}
.pdx-il-more > summary::-webkit-details-marker { display: none; }
.pdx-il-more > summary::before { content: "▸"; transition: transform .15s ease; }
.pdx-il-more[open] > summary::before { transform: rotate(90deg); }
.pdx-il-method, .pdx-il-strnote {
  font: 500 .8rem/1.5 "Barlow", sans-serif; color: #b9c4d6; margin: .4rem 0 .2rem;
}
.pdx-il-strnote { color: #8ea3c2; font-size: .74rem; }
.pdx-il-srcline { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.pdx-il-src {
  font: 700 .74rem/1 "Barlow Condensed", sans-serif; letter-spacing: .03em;
  color: #7be0cf; text-decoration: none;
}
.pdx-il-src:hover { text-decoration: underline; }
.pdx-il-asof { font: 500 .72rem/1 "Barlow", sans-serif; color: #7f93b3; }

@media (max-width: 640px) {
  .pdx-il-strength { margin-left: 0; }
}

/* ── Promise Tracker "Say vs. Do" summary (.pdx-ilp-*) ─────────────────────
   Compact block shown under a tracked promise that names a claimed beneficiary.
   Inherits the profile-modal surface; same non-partisan teal/amber palette. */
.pdx-ilp {
  margin-top: .5rem;
  border: 1px solid rgba(159, 180, 212, .14);
  border-left: 3px solid rgba(96, 165, 250, .5);
  border-radius: .55rem;
  padding: .5rem .6rem;
  background: rgba(96, 165, 250, .05);
}
.pdx-ilp-say { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pdx-ilp-lab, .pdx-ilp-dolab {
  font: 700 .6rem/1.1 "Barlow Condensed", sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: #7f93b3;
}
.pdx-ilp-cohort { font: 600 .8rem/1.2 "Barlow", sans-serif; color: #eaf1fb; }
.pdx-ilp-do {
  margin-top: .4rem; padding-top: .4rem;
  border-top: 1px dashed rgba(159, 180, 212, .16);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font: 500 .78rem/1.4 "Barlow", sans-serif; color: #cdd9ec;
}
.pdx-ilp-loading { color: #7f93b3; font-style: italic; font-size: .74rem; }
.pdx-ilp-none { color: #8ea3c2; font-size: .76rem; }
.pdx-ilp-dir {
  font: 700 .68rem/1 "Barlow Condensed", sans-serif; letter-spacing: .04em;
  text-transform: uppercase; padding: .16rem .42rem; border-radius: .35rem; white-space: nowrap;
}
.pdx-ilp-mag { font-weight: 600; color: #eaf1fb; }
.pdx-ilp-strength {
  font: 700 .6rem/1 "Barlow Condensed", sans-serif; letter-spacing: .05em;
  text-transform: uppercase; padding: .16rem .4rem; border-radius: .3rem;
  border: 1px solid transparent; white-space: nowrap;
}
.pdx-ilp-src {
  font: 700 .7rem/1 "Barlow Condensed", sans-serif; letter-spacing: .03em;
  color: #7be0cf; text-decoration: none;
}
.pdx-ilp-src:hover { text-decoration: underline; }
.pdx-ilp-note {
  margin-top: .4rem; font: 500 .66rem/1.4 "Barlow", sans-serif;
  color: #7f93b3; font-style: italic;
}

/* ── Follow the Money — Side by Side (.pdx-ilx-*) ──────────────────────────
   A profile section pairing the finance signal with a distributional summary. */
.pdx-ilx-disclaimer {
  font: 500 .78rem/1.55 "Barlow", sans-serif; color: #cdd9ec;
  background: rgba(74, 222, 128, .07);
  border: 1px solid rgba(159, 180, 212, .16);
  border-radius: .6rem; padding: .6rem .75rem; margin: 0 0 .85rem;
}
.pdx-ilx-disclaimer strong { color: #fff; font-weight: 700; }
.pdx-ilx-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
}
@media (max-width: 640px) { .pdx-ilx-grid { grid-template-columns: 1fr; } }
.pdx-ilx-col {
  background: rgba(10, 15, 30, .4);
  border: 1px solid rgba(159, 180, 212, .12);
  border-radius: .8rem; padding: .8rem;
}
.pdx-ilx-lab {
  font: 700 .62rem/1 "Barlow Condensed", sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #7f93b3; margin-bottom: .6rem;
}
/* finance recap */
.pdx-ilx-fscore { display: flex; align-items: baseline; gap: .5rem; border-left: 3px solid; padding-left: .55rem; margin-bottom: .6rem; }
.pdx-ilx-fnum { font: 700 1.6rem/1 "Bebas Neue", sans-serif; }
.pdx-ilx-flabel { font: 600 .8rem/1.1 "Barlow", sans-serif; color: #dbe6f6; }
.pdx-ilx-fbar { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; }
.pdx-ilx-fbar-lab { width: 92px; flex-shrink: 0; text-align: right; font: 700 .56rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #7596c0; }
.pdx-ilx-fbar-track { flex: 1; background: rgba(10, 15, 30, .6); border-radius: 4px; height: 11px; overflow: hidden; }
.pdx-ilx-fbar-fill { display: block; height: 100%; border-radius: 4px; }
.pdx-ilx-fbar-pct { width: 32px; flex-shrink: 0; text-align: right; font: 700 .62rem/1 "Barlow Condensed", sans-serif; }
.pdx-ilx-fnote { font: 500 .64rem/1.4 "Barlow", sans-serif; color: #7f93b3; margin-top: .35rem; }
.pdx-ilx-morelink { display: inline-block; margin-top: .5rem; font: 700 .66rem/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #4ade80; text-decoration: none; }
.pdx-ilx-morelink:hover { text-decoration: underline; }
/* distributional column */
.pdx-ilx-empty { font: 500 .78rem/1.5 "Barlow", sans-serif; color: #8ea3c2; font-style: italic; margin: .2rem 0; }
.pdx-ilx-measure { padding: .5rem 0; border-top: 1px solid rgba(159, 180, 212, .1); }
.pdx-ilx-measure:first-child { border-top: 0; padding-top: 0; }
.pdx-ilx-mhead { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
.pdx-ilx-mnum { font: 700 .66rem/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; color: #93c5fd; background: rgba(96, 165, 250, .12); border-radius: .3rem; padding: .12rem .4rem; }
.pdx-ilx-mtitle { font: 600 .8rem/1.25 "Barlow", sans-serif; color: #eaf1fb; }
.pdx-ilx-act { font: 700 .58rem/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #cdd9ec; background: rgba(159, 180, 212, .12); border: 1px solid rgba(159, 180, 212, .22); border-radius: .3rem; padding: .14rem .4rem; margin-left: auto; }
.pdx-ilx-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.pdx-ilx-chip { font: 600 .68rem/1.2 "Barlow", sans-serif; padding: .2rem .45rem; border-radius: 999px; border: 1px solid rgba(159, 180, 212, .18); }
.pdx-ilx-chip b { font-weight: 700; }
.pdx-ilx-mfoot { margin-top: .4rem; }
.pdx-ilx-verify { font: 700 .68rem/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; color: #7be0cf; text-decoration: none; }
.pdx-ilx-verify:hover { text-decoration: underline; }

/* ── Issue-level distributional summary (.pdx-ili-*) ───────────────────────
   Shown in the Stance Library issue detail and Issue Spotlights. */
.pdx-ili {
  margin: .9rem 0;
  border: 1px solid rgba(159, 180, 212, .16);
  border-radius: .8rem;
  padding: .85rem .9rem;
  background: rgba(45, 212, 191, .05);
}
.pdx-ili-head {
  font: 700 .95rem/1.15 "Barlow Condensed", sans-serif;
  letter-spacing: .03em; text-transform: uppercase; color: #fff; margin-bottom: .35rem;
}
.pdx-ili-lead { font: 500 .8rem/1.5 "Barlow", sans-serif; color: #9fb4d4; margin: 0 0 .65rem; }
.pdx-ili-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pdx-ili-chip {
  font: 600 .74rem/1.25 "Barlow", sans-serif;
  padding: .26rem .55rem; border-radius: 999px;
  border: 1px solid rgba(159, 180, 212, .18);
}
.pdx-ili-chip b { font-weight: 700; margin-left: .1rem; }
.pdx-ili-foot { font: 500 .72rem/1.5 "Barlow", sans-serif; color: #8ea3c2; margin-top: .6rem; }
.pdx-ili-note { font: 500 .68rem/1.45 "Barlow", sans-serif; color: #7f93b3; font-style: italic; margin-top: .4rem; }

/* ── Top-level "Who It Affects" overview card (profile) (.pdx-ilo-*) ────────── */
.pdx-ilo {
  margin-bottom: 1.25rem;
  border: 1px solid rgba(45, 212, 191, .3);
  border-radius: .85rem;
  padding: .9rem 1rem;
  background: linear-gradient(135deg, rgba(45, 212, 191, .12) 0%, rgba(10, 15, 30, .4) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 20px rgba(45, 212, 191, .08);
}
.pdx-ilo-head {
  font: 700 1.05rem/1.1 "Bebas Neue", sans-serif; letter-spacing: .04em; color: #fff; margin-bottom: .3rem;
}
.pdx-ilo-lead { font: 500 .78rem/1.5 "Barlow", sans-serif; color: #9fb4d4; margin: 0 0 .65rem; }
.pdx-ilo-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pdx-ilo-chip {
  font: 600 .76rem/1.25 "Barlow", sans-serif;
  padding: .28rem .58rem; border-radius: 999px; border: 1px solid rgba(159, 180, 212, .18);
}
.pdx-ilo-chip b { font-weight: 700; margin-left: .1rem; }
.pdx-ilo-link {
  display: inline-block; margin-top: .65rem; cursor: pointer;
  font: 700 .68rem/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: #7be0cf; background: rgba(45, 212, 191, .1); border: 1px solid rgba(45, 212, 191, .28);
  border-radius: .5rem; padding: .4rem .7rem;
}
.pdx-ilo-link:hover { background: rgba(45, 212, 191, .18); }
.pdx-ilo-note { font: 500 .66rem/1.45 "Barlow", sans-serif; color: #7f93b3; font-style: italic; margin-top: .5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH — mobile ergonomics, visual clarity, and flow.
   Purely additive: refines the surfaces above without changing any markup or the
   class contract. The colour-blind cues (arrow + text label) and the non-partisan
   teal/amber palette are preserved throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Gentle entrance for the cards, most of which are revealed after an async
     fetch. Motion is opt-out via the OS "reduce motion" setting. — */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pdxIlIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  .pdx-il, .pdx-ilo, .pdx-ili, .pdx-ilx[data-il-sxs], .pdx-ilp { animation: pdxIlIn .28s ease both; }
}

/* — Colour-matched borders make the benefit / cost / mixed chips read at a glance
     on every surface (previously they leaned on a faint background tint alone). — */
.pdx-il-cnet.pdx-il-dir-benefit,
.pdx-ilx-chip.pdx-il-dir-benefit,
.pdx-ili-chip.pdx-il-dir-benefit,
.pdx-ilo-chip.pdx-il-dir-benefit { border: 1px solid rgba(45, 212, 191, .42); }
.pdx-il-cnet.pdx-il-dir-cost,
.pdx-ilx-chip.pdx-il-dir-cost,
.pdx-ili-chip.pdx-il-dir-cost,
.pdx-ilo-chip.pdx-il-dir-cost { border: 1px solid rgba(246, 183, 60, .42); }
.pdx-il-cnet.pdx-il-dir-mixed,
.pdx-ilx-chip.pdx-il-dir-mixed,
.pdx-ili-chip.pdx-il-dir-mixed,
.pdx-ilo-chip.pdx-il-dir-mixed,
.pdx-il-cnet.pdx-il-dir-neutral,
.pdx-ilx-chip.pdx-il-dir-neutral,
.pdx-ili-chip.pdx-il-dir-neutral,
.pdx-ilo-chip.pdx-il-dir-neutral { border: 1px solid rgba(159, 180, 212, .32); }

/* — Diverging bar: faint side tint (amber = cost / left, teal = benefit / right)
     reinforces orientation, plus a little depth and a floor so tiny bars stay
     visible. — */
.pdx-il-track {
  background: linear-gradient(90deg, rgba(246, 183, 60, .06) 0 50%, rgba(45, 212, 191, .06) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(159, 180, 212, .06);
}
.pdx-il-bar { box-shadow: 0 1px 2px rgba(0, 0, 0, .25); min-width: 6px; }

/* — Keyboard focus ring on every interactive element. — */
.pdx-il-more > summary:focus-visible,
.pdx-il-src:focus-visible, .pdx-ilp-src:focus-visible, .pdx-ilx-verify:focus-visible,
.pdx-ilx-morelink:focus-visible, .pdx-ilo-link:focus-visible {
  outline: 2px solid rgba(123, 224, 207, .7); outline-offset: 2px; border-radius: .3rem;
}

/* — Desktop hover affordances (skipped on touch, where they only cause sticky
     states). — */
@media (hover: hover) {
  .pdx-il-cohort { transition: border-color .15s ease, background .15s ease; }
  .pdx-il-cohort:hover { border-color: rgba(159, 180, 212, .24); background: rgba(255, 255, 255, .035); }
  .pdx-ilo-chip, .pdx-ili-chip, .pdx-ilx-chip { transition: transform .12s ease; }
  .pdx-ilo-chip:hover, .pdx-ili-chip:hover, .pdx-ilx-chip:hover { transform: translateY(-1px); }
  .pdx-ilo-link { transition: background .15s ease; }
}

/* — The overview card links down to the side-by-side; give that jump some breathing
     room so it doesn't land flush against a sticky modal header. — */
.pdx-ilx[data-il-sxs] { scroll-margin-top: 1rem; }

/* — Side-by-side stacks a little earlier so the finance recap and the vote list
     each get full width on tablets, not two cramped columns. — */
@media (max-width: 720px) { .pdx-ilx-grid { grid-template-columns: 1fr; } }

/* — Phone ergonomics: bigger touch targets and a slightly taller, easier-to-read
     bar. — */
@media (max-width: 640px) {
  .pdx-il-cohort { padding: .65rem .7rem .7rem; }
  .pdx-il-track { height: 14px; }
  .pdx-il-more > summary,
  .pdx-il-src, .pdx-ilp-src, .pdx-ilx-verify {
    min-height: 32px; display: inline-flex; align-items: center;
  }
  .pdx-ilo-link { display: block; width: 100%; text-align: center; min-height: 40px; line-height: 1.7; }
  .pdx-il-imeta { gap: .4rem; }
}
@media (max-width: 480px) {
  .pdx-ilx-fbar-lab { width: 74px; }
  .pdx-il .pdx-il-disclaimer, .pdx-ilx .pdx-ilx-disclaimer { padding: .55rem .65rem; }
  .pdx-ilo-head { font-size: 1rem; }
  .pdx-il-cname { font-size: .9rem; }
  .pdx-ili-chips, .pdx-ilo-chips, .pdx-ilx-chips { gap: .35rem; }
}

/* — Touch devices: a taller bar regardless of viewport width. — */
@media (pointer: coarse) { .pdx-il-track { height: 14px; } }