/* ═══════════════════════════════════════════════════════════════════════════
   BALLOT AXES  ·  the two-axis elections read (see ballot-axes.js)
   ────────────────────────────────────────────────────────────────────────────
   Styles the shared two-axis surface wherever it appears: the profile section,
   the Stance Library explainer at the top of either axis, and the compact
   "other axis" companion line on an issue-first card.

   Deliberately borrows the app's existing dark-navy panel language and reuses
   the shared window.PDXStance pill (.pdxis-stance-*) for direction, so no new
   stance colours are introduced here. The one accent this file does own is the
   split highlight — amber, the same "look at this" tone the say-vs-do
   contradiction flag uses — because a split across the two axes is the finding
   a reader should see first, not a warning about the official.
   Prefix: `.bax-`  (BallotAXes).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Profile section ────────────────────────────────────────────────────── */
.bax-section .modal-section-sub { margin-bottom: 0.9rem; }

.bax-verdict {
  display: flex; flex-direction: column; gap: 0.3rem;
  border-radius: 0.75rem; padding: 0.7rem 0.85rem; margin-bottom: 0.9rem;
  background: rgba(10, 15, 30, 0.55); border: 1px solid rgba(255, 255, 255, 0.08);
}
.bax-verdict.is-split { background: rgba(245, 200, 66, 0.09); border-color: rgba(245, 200, 66, 0.34); }
.bax-verdict.is-paired { background: rgba(74, 222, 128, 0.07); border-color: rgba(74, 222, 128, 0.26); }
/* One axis on record: deliberately the quietest of the three. A coverage gap is
   not a finding, so it must not read like the split does. */
.bax-verdict.is-one { background: rgba(10, 15, 30, 0.4); border-style: dashed; }
.bax-verdict-tag {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9fb4d4;
}
.bax-verdict.is-split .bax-verdict-tag { color: #f5c842; }
.bax-verdict.is-paired .bax-verdict-tag { color: #4ade80; }
.bax-verdict-txt { font-size: 0.8rem; line-height: 1.6; color: #c7d7ef; }

.bax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 640px) { .bax-grid { grid-template-columns: 1fr; } }

.bax-row {
  background: rgba(13, 21, 38, 0.7); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.8rem; padding: 0.8rem 0.85rem;
}
.bax-row.bax-security { border-left: 3px solid rgba(96, 165, 250, 0.55); }
.bax-row.bax-access { border-left: 3px solid rgba(167, 139, 250, 0.55); }
.bax-row.is-gap { border-style: dashed; opacity: 0.85; }
.bax-row-head { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
.bax-row-ico { font-size: 1.05rem; line-height: 1.2; flex-shrink: 0; }
.bax-row-titles { min-width: 0; }
.bax-row-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.02em; color: #eaf1ff; line-height: 1.2;
}
.bax-row-q { font-size: 0.7rem; color: #8fa6c6; line-height: 1.4; margin-top: 0.1rem; }
.bax-row-read { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.bax-row-dir { font-size: 0.74rem; color: #b9cae3; }
.bax-row-topic { font-size: 0.8rem; font-weight: 700; color: #dbe7f8; margin-bottom: 0.2rem; }
.bax-row-text { font-size: 0.78rem; line-height: 1.6; color: #b9cae3; }
.bax-row-src { font-size: 0.7rem; color: #8fa6c6; margin-top: 0.4rem; }
.bax-row-src a { color: #93c5fd; text-decoration: none; }
.bax-row-src a:hover { text-decoration: underline; }
.bax-row-gap { font-size: 0.76rem; line-height: 1.55; color: #93a7c4; font-style: italic; }

.bax-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.bax-btn {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: #cfe0f8; background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3); border-radius: 0.65rem;
  padding: 0.45rem 0.8rem; cursor: pointer;
}
.bax-btn:hover { background: rgba(96, 165, 250, 0.2); color: #fff; }

/* Fallback direction pill, used only if window.PDXStance is unavailable. */
.bax-pill {
  display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 0.15rem 0.55rem;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); color: #dbe7f8;
}
.bax-pill.is-support { background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.34); color: #86efac; }
.bax-pill.is-oppose { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.34); color: #fca5a5; }
.bax-pill.is-mixed { background: rgba(245, 200, 66, 0.14); border-color: rgba(245, 200, 66, 0.34); color: #fcd34d; }

/* ── Explainer (Stance Library, top of either axis) ─────────────────────── */
.bax-explainer {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.09) 0%, rgba(10, 15, 30, 0.45) 100%);
  border: 1px solid rgba(96, 165, 250, 0.26); border-radius: 0.95rem;
  padding: 0.95rem 1rem; margin: 0 0 1.1rem;
}
.bax-explainer-head { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; }
.bax-explainer-eyebrow {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #93c5fd;
}
.bax-explainer-lead { font-size: 0.82rem; line-height: 1.65; color: #c7d7ef; }
.bax-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 640px) { .bax-tiles { grid-template-columns: 1fr; } }
.bax-tile {
  display: block; width: 100%; text-align: left;
  background: rgba(13, 21, 38, 0.72); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.8rem; padding: 0.75rem 0.8rem; color: inherit; font: inherit;
}
.bax-tile.is-link { cursor: pointer; }
.bax-tile.is-link:hover { border-color: rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.1); }
.bax-tile.is-here { border-color: rgba(245, 200, 66, 0.4); background: rgba(245, 200, 66, 0.07); }
.bax-tile-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; }
.bax-tile-ico { font-size: 1rem; }
.bax-tile-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.88rem; letter-spacing: 0.02em; color: #eaf1ff;
}
.bax-tile-here {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #f5c842;
  background: rgba(245, 200, 66, 0.14); border: 1px solid rgba(245, 200, 66, 0.32);
  border-radius: 999px; padding: 0.1rem 0.45rem;
}
.bax-tile-q { font-size: 0.76rem; color: #b9cae3; line-height: 1.5; margin-bottom: 0.3rem; }
.bax-tile-covers { font-size: 0.72rem; color: #8fa6c6; line-height: 1.5; }
.bax-tile-dir { font-size: 0.72rem; color: #93c5fd; line-height: 1.5; margin-top: 0.35rem; }
.bax-tile-go {
  display: inline-block; margin-top: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #93c5fd;
}
.bax-explainer-foot {
  font-size: 0.75rem; line-height: 1.6; color: #9fb4d4;
  margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Companion line (issue-first cards) ─────────────────────────────────── */
.bax-companion {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
  font-size: 0.74rem; color: #b9cae3; line-height: 1.5;
  background: rgba(10, 15, 30, 0.5); border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.6rem; padding: 0.4rem 0.55rem; margin: 0.5rem 0 0;
}
.bax-companion.is-split { background: rgba(245, 200, 66, 0.09); border-color: rgba(245, 200, 66, 0.3); }
.bax-companion.is-gap { border-style: dashed; color: #8fa6c6; }
.bax-companion-tag {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #f5c842;
  background: rgba(245, 200, 66, 0.16); border: 1px solid rgba(245, 200, 66, 0.34);
  border-radius: 999px; padding: 0.1rem 0.4rem;
}
.bax-companion-dir { color: #cfe0f8; }
.bax-companion-topic { color: #8fa6c6; font-style: italic; }
.bax-companion-gap { font-style: italic; }

/* ── Comparison-table row hint ───────────────────────────────────────────────
   One line under the two facet rows in the head-to-head table, where the same
   word ("Supports") points in opposite directions from one row to the next. */
.bax-tablehint {
  margin-top: 0.3rem; font-size: 0.68rem; line-height: 1.45;
  color: #93c5fd; font-style: normal;
}