/* ═══════════════════════════════════════════════════════════════════════════
   BALLOT AXES  ·  the multi-issue teaching block (see ballot-axes.js)
   ────────────────────────────────────────────────────────────────────────────
   Styles the shared surface wherever it appears: the profile block (status →
   two columns → one pointer footer), the Stance Library explainer at the top of
   either axis, and the compact "other axis" companion line on an issue-first
   card.

   THREE RULES THIS FILE OBEYS.

   1. COLOUR COMES FROM THE ISSUE, NOT FROM THIS FILE. A column paints from the
      shared per-issue custom properties (--pdx-ic / -soft / -wash / -ink) that
      PDXIssueColors sets inline, which is what makes an issue the same colour
      here as it is on a tree leaf, in a dossier and on the alignment tool. This
      file names no issue and invents no second palette.
   2. THE SLOTS READ LIKE THE TREE'S. Said, 🏛 Record, depth, the early-signal
      horizon, the one percentage and the pattern-only tag are the same
      vocabulary in the same tones as stance-tree.css, because they are the same
      facts from the same row model.
   3. THE STATUS BAND IS QUIET WHEN THE TWO SIDES AGREE AND LOUD WHEN THEY
      SPLIT. A split is the high-value teaching moment — the amber is the site's
      existing "look at this" tone, not a warning about the official.

   Two columns on a wide screen, stacked on a phone with the pair read intact:
   the status band above them is the block's first line and says what the pair is
   doing before either card is read, so the relation survives the stack.
   Prefix: `.bax-`  (BallotAXes).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The profile block ──────────────────────────────────────────────────── */
.bax-sec { margin-bottom: 1.25rem; }
.bax-sec[hidden] { display: none; }
.bax-body { display: block; }

/* RETIRED: `.bax-concept`, `.bax-concept-eyebrow`, `.bax-concept-lead` — the
   pair-agnostic concept strip that used to lead this block. The splitting rule it
   taught is stated where a reader meets it (the multi-issue chip and note on an
   Official Record row, the dossier's own list of every issue a vote counted for,
   and the glossary), so the block now opens on the status band. Nothing renders
   these classes; re-adding a lead here re-buries the finding. */

/* ── 1. The status band — this politician, on this pair, and the LEAD ───── */
.bax-status {
  display: flex; flex-direction: column; gap: 0.28rem;
  border-radius: 0.75rem; padding: 0.65rem 0.8rem; margin-bottom: 0.75rem;
  background: rgba(10, 15, 30, 0.5); border: 1px solid rgba(255, 255, 255, 0.08);
}
.bax-status-tag {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9fb4d4;
}
.bax-status-txt { font-size: 0.79rem; line-height: 1.6; color: #c7d7ef; }
/* QUIET WHEN THEY AGREE. Same direction is a true reading, not a finding to
   flag, and a green banner on it would make agreement look like a score. */
.bax-status.is-same { border-color: rgba(74, 222, 128, 0.22); }
.bax-status.is-same .bax-status-tag { color: #86efac; }
/* LOUD WHEN THEY SPLIT — the moment the lesson is actually visible. */
.bax-status.is-split {
  background: rgba(245, 200, 66, 0.09); border-color: rgba(245, 200, 66, 0.36);
}
.bax-status.is-split .bax-status-tag { color: #f5c842; }
/* The three honest shortfalls: mixed on one side, one side only, nothing to
   compare. All dashed and quiet — a coverage gap is not a finding. */
.bax-status.is-unsettled, .bax-status.is-one, .bax-status.is-thin {
  border-style: dashed; background: rgba(10, 15, 30, 0.38);
}
.bax-status.tone-quiet .bax-status-txt { color: #b9cae3; }
.bax-status.tone-loud .bax-status-txt { color: #e7d9b0; }

/* ── 2. The two columns ─────────────────────────────────────────────────────
   Side by side where there is room; stacked on a phone in the pair's declared
   order (`order` rather than a grid position, so the stack cannot scramble). */
.bax-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 640px) { .bax-cols { grid-template-columns: 1fr; } }
.bax-col.bax-security { order: 1; }
.bax-col.bax-access { order: 2; }

.bax-col {
  display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
  background: var(--pdx-ic-soft, rgba(13, 21, 38, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--pdx-ic, #94a3b8);
  border-radius: 0.8rem; padding: 0.75rem 0.8rem;
}
.bax-col-head { display: flex; align-items: baseline; gap: 0.4rem; }
.bax-col-ico { font-size: 1rem; line-height: 1.1; flex: 0 0 auto; }
.bax-col-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.92rem; letter-spacing: 0.02em; color: #eaf1ff; line-height: 1.2;
}
/* What this claim asks — one line, and the only prose the column carries. */
.bax-col-q { margin: 0; font-size: 0.72rem; line-height: 1.45; color: #8fa6c6; }

/* The slots, in the tree's vocabulary and the tree's tones. */
.bax-col-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; font-size: 0.74rem; }
.bax-said { color: #b9cbe6; }
.bax-said b { font-weight: 700; color: #8fa6c6; }
.bax-said.s-support { color: #86efac; }
.bax-said.s-oppose { color: #fca5a5; }
.bax-said.s-mixed { color: #fbe08a; }
.bax-said.s-none { color: #8fa6c6; font-style: italic; }
.bax-rec { color: #b9cbe6; }
.bax-rec b { font-weight: 700; color: #8fa6c6; }
.bax-rec.tone-support { color: #86efac; }
.bax-rec.tone-oppose { color: #fca5a5; }
.bax-rec.tone-mixed { color: #fbe08a; }
.bax-rec.tone-muted { color: #8fa6c6; }
/* A scored slot paints from the verdict Direction Match already resolved — the
   word in the slot is its word, so the colour is its colour, handed in as a
   custom property rather than restated here. */
.bax-rec.tone-verdict { color: var(--bax-rc, #b9cbe6); }
.bax-rec.st-scored b { color: var(--bax-rc, #8fa6c6); opacity: 0.8; }
/* Three unscored states, at the same readable contrast as a scored slot. The slate
   and the italic mark them; the .82 opacity that used to be here dimmed them, and a
   record on file is not a disabled control. Same change as stance-tree.css. */
.bax-rec.st-onfile, .bax-rec.st-pending, .bax-rec.st-none {
  color: #8fa6c6; font-style: italic;
}
.bax-depth { font-style: normal; opacity: 0.8; }
.bax-early { font-style: italic; font-size: 0.68rem; color: #9fb4d4; }
/* THE ONE PERCENTAGE A COLUMN MAY CARRY: the Direction Match result for that
   single issue, where there is one. There is no pair percentage anywhere. */
.bax-pct {
  font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 0.04rem 0.3rem; border-radius: 4px;
  color: var(--bax-rc, #cfe0f5); background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
/* Pattern-only: a record read with no stated position behind it, and not
   counted in Direction Match. Dashed, in the tree's own tag treatment. */
.bax-tag {
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.03em;
  padding: 0.06rem 0.36rem; border-radius: 4px; white-space: nowrap;
  color: #cbd5e1; background: rgba(148, 163, 184, 0.14);
  border: 1px dashed rgba(148, 163, 184, 0.5);
}
/* What "supports" means on THIS axis — the sentence that stops two adjacent
   columns from reading as one dial. */
.bax-col-dir { margin: 0; font-size: 0.71rem; line-height: 1.45; color: #93c5fd; }
/* One orientation clause: the stance card's topic, never its prose. */
.bax-col-clause {
  margin: 0; font-size: 0.72rem; line-height: 1.4; color: #9fb4d4; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* THE DOOR. One control per column, and it opens the issue's existing dossier. */
.bax-col-go {
  margin-top: auto; align-self: flex-start;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.73rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pdx-ic-ink, #cfe0f8); background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 0.6rem;
  padding: 0.4rem 0.7rem; cursor: pointer;
}
.bax-col-go:hover { background: var(--pdx-ic-wash, rgba(96, 165, 250, 0.18)); color: #fff; }
.bax-col-go:focus-visible { outline: 2px solid var(--pdx-ic, #7dd3fc); outline-offset: 2px; }
/* The door failing is said out loud, in the column, rather than swallowed. */
.bax-fail { margin: 0.35rem 0 0; font-size: 0.72rem; line-height: 1.5; color: #fca5a5; }

/* ── 3. The footer — one line, pointing out of the block at the dossier ─── */
.bax-foot {
  margin: 0.7rem 0 0; padding-top: 0.6rem; font-size: 0.73rem; line-height: 1.6;
  color: #9fb4d4; border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Fallback direction pill, used by the companion line 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;
}