/* ============================================================================
   word-action.css  ·  ⚖️ Word vs Action — the primary accountability read
   ----------------------------------------------------------------------------
   Styles for the surfaces rendered by word-action.js: the profile section
   (.pdxwa) and the joined word → action → outcome rows (.pdxwa-dot), which also
   appear inside the Connecting the Dots card.

   MOBILE FIRST. Every rule here is written for a ~360px column and only widens
   at 620px, because that is where this section is actually read. Three specific
   things it must not do, all of them lessons the profile spine already paid for:

     • NO LAYOUT SHIFT ON HYDRATION. The section renders synchronously from the
       word ledger and re-renders in place when the voting record warms. Both
       states use the same box, the same number slot and the same tier ladder,
       so the reflow is a text swap and not a jump. .pdxwa-num has a fixed min
       size for exactly this reason — "—" and "82%" occupy one footprint.
     • NO HORIZONTAL OVERFLOW. Quoted word and named bills are long and
       unpredictable. Every text cell is min-width:0 inside its grid track and
       wraps; nothing relies on truncation to fit.
     • ONE TAP TARGET PER ROW, ≥44px. The method disclosure and the "see the
       full read" control are the only interactive elements, and both are full
       width on mobile.

   Colour is carried by --pdxwa-col, set inline from the shared PDXConsistency
   verdict palette, so this file never hardcodes a verdict colour and can never
   drift from the chips elsewhere in the app.
   ========================================================================== */

.pdxwa {
  --pdxwa-col: #9fb4d4;
  contain: layout style;
}
.pdxwa .pdxwa-q {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: none;
  color: #7f97bb;
  margin-top: 0.15rem;
}

/* ── The headline: number + verdict ───────────────────────────────────────── */
/* The first screen has one job: number, verdict, one line, then real issues. The
   spacing below is deliberately tighter than a normal card's — every extra
   sixteenth of an inch here is a row of the reader's screen spent on nothing. */
.pdxwa-top {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.pdxwa-num {
  flex: 0 0 auto;
  /* Fixed footprint so "Checking…" → "82%" is a text swap, not a reflow. */
  min-width: 5.1rem;
  text-align: center;
  padding: 0.5rem 0.4rem 0.45rem;
  border-radius: 0.8rem;
  background: rgba(8, 13, 26, 0.6);
  border: 1px solid color-mix(in srgb, var(--pdxwa-col) 42%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Fallback for engines without color-mix(): a flat steel hairline reads fine and
   the verdict colour still carries on the number itself. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pdxwa-num { border-color: rgba(148, 163, 184, 0.3); }
}
.pdxwa-num-v {
  font-family: 'Bebas Neue', sans-serif;
  /* The single loudest thing on the card. It was competing with the section
     title and the verdict word for first place; now it wins outright. */
  font-size: 2.5rem;
  line-height: 1;
  color: var(--pdxwa-col);
}
.pdxwa-num-l {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fb4d4;
  margin-top: 0.2rem;
  line-height: 1.25;
}
.pdxwa-say { flex: 1 1 auto; min-width: 0; }
.pdxwa-verdict {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.pdxwa-line {
  margin: 0.22rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #9fb4d4;
}
/* The spotlight-only section: gap list, no read. It carries no number and no
   verdict, so it must not look like a scored panel that failed to load. */
.pdxwa-nowork-line { margin: 0 0 0.5rem; }

/* ── The tier ladder ─────────────────────────────────────────────────────── */
/* Weight is shown in words ("Counts most") rather than as a bare 3 / 2 / 1, so
   the ranking is readable without a legend. The exact multipliers live in the
   method disclosure, where they can be audited. */
.pdxwa-tiers {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
  border-radius: 0.7rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(10, 16, 30, 0.42);
}
.pdxwa-tier {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.pdxwa-tier:first-child { border-top: 0; }
.pdxwa-tier-empty { opacity: 0.62; }
.pdxwa-tier-ico { font-size: 0.9rem; line-height: 1.4; }
.pdxwa-tier-main { min-width: 0; }
.pdxwa-tier-name {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dbe6f6;
}
.pdxwa-tier-w {
  margin-left: 0.4rem;
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  color: #7f97bb;
  text-transform: none;
}
.pdxwa-tier-gloss {
  display: block;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #8ba2c4;
  margin-top: 0.1rem;
}
.pdxwa-tier-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  line-height: 1.1;
  color: #cbd9ec;
  text-align: right;
  white-space: nowrap;
}
.pdxwa-tier-of {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7f97bb;
}
/* The "35 in the tracker, none itemized" bridge, and "N on file, none testable".
   Both are sentences, not counts, so they drop the Bebas display face and wrap. */
.pdxwa-tier-agg {
  display: block;
  max-width: 8.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #9fb4d4;
  white-space: normal;
}

/* ── Coverage line ──────────────────────────────────────────────────────── */
.pdxwa-cov {
  font-size: 0.68rem;
  line-height: 1.5;
  color: #7f97bb;
}
.pdxwa-cov-n { color: #cbd9ec; font-weight: 700; }

/* ── The basis digest ──────────────────────────────────────────────────────
   One line where the tier table and the coverage sentence used to sit, so the
   eye travels from the percentage to the first issue row without crossing two
   dense blocks. The table and the sentence are unchanged; they are now inside
   the wa-basis lid, which sits immediately below this line.

   Wraps rather than scrolls: three short items fit one line on a phone at the
   common counts and fold to two when they don't. A horizontal scroller here
   would be a nested scroll trap inside an already-scrolling modal. */
.pdxwa-basis { margin: 0 0 0.55rem; }
.pdxwa-basis-d {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.85rem;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #7f97bb;
}
.pdxwa-basis-i { display: inline-flex; align-items: baseline; gap: 0.28rem; }
.pdxwa-basis-ico { font-size: 0.78rem; line-height: 1; }
.pdxwa-basis-n { color: #cbd9ec; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   COVERAGE GAPS  ·  rendered by gaps.js (window.PDXGaps.panelHtml)
   ────────────────────────────────────────────────────────────────────────────
   Sits directly under the coverage line: one collapsed row by default, so a
   profile never grows a wall of "missing" before the reader asks for it. The
   whole block is deliberately cooler and quieter than a score surface — a gap
   is our homework, not a finding, and must never read as a verdict colour.
   Mobile first: one control per line, ≥44px tap targets, no horizontal scroll.
   ══════════════════════════════════════════════════════════════════════════ */
.pdxg { margin-top: 0.5rem; }

/* The collapsed line */
.pdxg-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  width: 100%;
  min-height: 2.75rem;              /* ≥44px tap target */
  padding: 0.45rem 0.6rem;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 0.55rem;
  background: rgba(10, 15, 30, 0.35);
  color: #9fb4d4;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pdxg-toggle:hover,
.pdxg-toggle:focus-visible {
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(14, 21, 40, 0.6);
  color: #cbd9ec;
}
.pdxg-toggle-ico { color: #7596c0; flex: 0 0 auto; }
.pdxg-toggle-t { flex: 1 1 8rem; min-width: 0; }
.pdxg-toggle-t b { color: #dbe6f5; font-weight: 700; }
.pdxg-toggle-cta {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7596c0;
}

/* The expanded body */
.pdxg-body { padding-top: 0.5rem; }
.pdxg-note {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  line-height: 1.55;
  color: #7f97bb;
}
.pdxg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }

/* One gap. Issue-linked gaps wear their issue's colour on the spine so a reader
   scanning the list can tell "the healthcare hole" from "the immigration hole"
   at a glance, and so the row matches the Word vs Action row above it and the
   Stance Library card it points at. A gap with no issue behind it — a below-floor
   hold, an unitemized-pledge row — keeps the neutral slate spine, which is the
   same slate issue-colors.js falls back to, so the two never disagree. */
.pdxg-row {
  border-left: 3px solid var(--pdx-ic, rgba(148, 163, 184, 0.4));
  background:
    linear-gradient(90deg, var(--pdx-ic-wash, var(--pdx-ic-soft, transparent)), transparent 62%),
    rgba(10, 15, 30, 0.45);
  border-radius: 0 0.55rem 0.55rem 0;
  padding: 0.55rem 0.6rem;
}
/* A held row is explaining the method, not naming a research target, so it stays
   deliberately uncoloured even when it carries an issue key. */
.pdxg-row-hold {
  --pdx-ic: rgba(148, 163, 184, 0.4);
  --pdx-ic-soft: transparent;
  --pdx-ic-wash: transparent;
  border-left-width: 2px;
}
.pdxg-row-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.3rem;
}
.pdxg-row-label {
  flex: 1 1 10rem;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  color: #dbe6f5;
}
.pdxg-row-tag {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8fb0dc;
  border: 1px solid rgba(143, 176, 220, 0.4);
  border-radius: 0.3rem;
  padding: 0.05rem 0.3rem;
}
.pdxg-row-tag-hold { color: #8ba2c4; border-color: rgba(139, 162, 196, 0.3); }
.pdxg-row-detail {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.55;
  color: #8ba2c4;
}
.pdxg-row-ask {
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #7f97bb;
}
.pdxg-row-ask-k {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7596c0;
  margin-right: 0.25rem;
}

/* Engagement + ask. The engagement row is the shared item-thread control, so we
   only own the layout around it. */
.pdxg-row-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-top: 0.5rem;
}
.pdxg-row-bar .pdx-engage { flex: 1 1 auto; min-width: 0; }
.pdxg-ask-btn {
  flex: 0 0 auto;
  min-height: 2.75rem;              /* ≥44px tap target */
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 0.45rem;
  background: rgba(37, 99, 235, 0.16);
  color: #bfdbfe;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.pdxg-ask-btn:hover,
.pdxg-ask-btn:focus-visible {
  background: rgba(37, 99, 235, 0.3);
  border-color: rgba(147, 197, 253, 0.7);
  color: #eff6ff;
}

/* Explain-only rows: no ask, one link into the method they came from. */
.pdxg-row-hold { border-left-style: dotted; opacity: 0.92; }
.pdxg-method-link {
  margin-top: 0.35rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #7596c0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}
.pdxg-method-link:hover,
.pdxg-method-link:focus-visible { color: #a9c4e8; }

.pdxg-more,
.pdxg-leads-more {
  margin: 0.45rem 0 0;
  font-size: 0.66rem;
  color: #6f88ab;
}
/* "Showing 6 of 14" — sits above the list so the reader learns the list is
   partial before reading it, not after. */
.pdxg-showing {
  margin: 0.35rem 0 0.15rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8aa3c6;
}
.pdxg-holds { margin-top: 0.6rem; }
.pdxg-holds-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7596c0;
  margin-bottom: 0.4rem;
}

/* ── Suggested leads under a gap ─────────────────────────────────────────────
   A lead is a research question, not a receipt. No verdict colour, no strength
   badge, no percentage — an amber, explicitly community-labelled card that can
   never be mistaken for something the Evidence Locker verified. */
.pdxg-leads { margin-top: 0.55rem; display: grid; gap: 0.4rem; }
.pdxg-leads-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b08a4a;
}
.pdxg-lead {
  border: 1px dashed rgba(217, 164, 74, 0.4);
  border-radius: 0.5rem;
  background: rgba(60, 44, 16, 0.28);
  padding: 0.45rem 0.55rem;
}
.pdxg-lead-top { display: flex; flex-wrap: wrap; gap: 0.25rem 0.3rem; margin-bottom: 0.25rem; }
.pdxg-lead-pill,
.pdxg-lead-state {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.54rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 0.3rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid rgba(217, 164, 74, 0.45);
  color: #e8c07d;
}
.pdxg-lead-community { border-color: rgba(148, 163, 184, 0.4); color: #a8bad2; }
.pdxg-lead-state { border-color: rgba(148, 163, 184, 0.35); color: #93a7c2; }
.pdxg-lead-sourced { border-color: rgba(74, 222, 128, 0.4); color: #86efac; }
/* Curator-set research states. Deliberately blue/slate rather than the verdict
   palette: "Answered" means a human looked, not that anything was graded, so it
   must not borrow the green a kept promise uses two panels away. */
.pdxg-lead-checking { border-color: rgba(96, 165, 250, 0.45); color: #93c5fd; }
.pdxg-lead-answered { border-color: rgba(148, 163, 184, 0.5); color: #cbd5e1; }
.pdxg-lead-dead { border-color: rgba(120, 113, 108, 0.45); color: #9a938c; }
/* A settled lead recedes — the open questions above it are the point. */
.pdxg-leadst-answered,
.pdxg-leadst-dead-end { opacity: 0.82; }
.pdxg-lead-head {
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  color: #e6d7bb;
}
.pdxg-lead-meta { margin-top: 0.15rem; font-size: 0.62rem; color: #9d8a68; }
.pdxg-lead-open {
  margin-top: 0.3rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #d9a44a;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.pdxg-lead-open:hover,
.pdxg-lead-open:focus-visible { color: #f0c583; }
/* The narrow-phone pass for these controls lives in app.css, where this codebase
   keeps broad phone layout — see the note at the end of that file. */


/* ── Top issue rows — Said → Did → Verdict → Receipts ───────────────────────
   The spine, on the card that carries the one score. Three rows at most: the
   sharpest tested issues, in the same rank order the Official Record uses. */
.pdxwa-rows { margin-top: 0.55rem; }
.pdxwa-rows-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7596c0;
  margin-bottom: 0.4rem;
}
.pdxwa-rows-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
/* The spine is the ISSUE colour (issue-colors.js), so the same issue reads the
   same here, in the Official Record, in the Stance Library, on a Spotlight card
   and on a coverage gap. `--pdxwa-col` — the verdict colour — is NOT in the
   spine's fallback chain: a row that failed to resolve its issue used to come
   back verdict-green, which is indistinguishable from a deliberate colour and
   made a broken row look like a working one. An unresolved row gets neutral
   slate and says so by omitting .pdxwa-ic.

   4px, not 2px. At 2px on a dark navy panel with a 14% tint the treatment was
   technically present and practically invisible — the reported symptom. The
   tint is now a horizontal wash that concentrates against the spine and clears
   the text well before it gets there, so the colour is legible at a glance
   without costing any contrast on the copy. The verdict keeps its own colour on
   its own label: two colour vocabularies, side by side, meaning different
   things. */
.pdxwa-row {
  border-left: 2px solid var(--pdx-ic, #9fb4d4);
  background: rgba(10, 15, 30, 0.45);
  border-radius: 0 0.55rem 0.55rem 0;
  padding: 0.5rem 0.6rem;
}
.pdxwa-row.pdxwa-ic {
  border-left-width: 4px;
  border-left-color: var(--pdx-ic);
  background:
    linear-gradient(90deg, var(--pdx-ic-wash, var(--pdx-ic-soft, transparent)), transparent 62%),
    rgba(10, 15, 30, 0.45);
}
/* The issue's colour, said once more where the eye actually lands — on the issue
   name. A 4px edge answers "which issue is this row" while scanning the stack;
   the dot answers it while reading the row itself. */
.pdxwa-row-dot {
  display: inline-block;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  margin-right: 0.34rem;
  vertical-align: 0.06em;
  background: var(--pdx-ic, #9fb4d4);
  box-shadow: 0 0 0 2px var(--pdx-ic-soft, transparent);
}
.pdxwa-row-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.pdxwa-row-issue {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: #e8eefc;
  letter-spacing: 0.01em;
}
.pdxwa-row-verdict {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
}
.pdxwa-row-step {
  display: flex;
  gap: 0.45rem;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #9db6d6;
}
.pdxwa-row-step + .pdxwa-row-step { margin-top: 0.15rem; }
.pdxwa-row-k {
  /* Sized for the narrowest phone and left alone from there — "Receipts" is the
     longest key and fits at 3rem, so this needs no width query of its own. */
  flex: 0 0 3rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5f7ea8;
  padding-top: 0.12rem;
}
.pdxwa-row-v { min-width: 0; }
/* Counter-evidence the deciding record set aside. Tinted, not coloured like a
   verdict: it is disclosure on the row, never a second opinion competing with the
   one verdict the row resolved. "Counter" is shorter than "Receipts", so the key
   column above still sizes the whole block and nothing shifts. */
.pdxwa-row-aside .pdxwa-row-v { color: #d8bd85; }
.pdxwa-rows-go {
  margin-top: 0.45rem;
  cursor: pointer;
  width: 100%;
  min-height: 2.5rem;
  background: rgba(159, 219, 208, 0.08);
  border: 1px solid rgba(159, 219, 208, 0.28);
  border-radius: 0.6rem;
  color: #9fdbd0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
}
.pdxwa-rows-go:hover,
.pdxwa-rows-go:focus-visible { background: rgba(159, 219, 208, 0.16); }

/* ── Per-issue consistency outcomes (the merged Say-vs-Do) ───────────────── */
/* One line per issue, four buckets, no percentage of its own. The old 🧾 Say-vs-Do
   section reprinted every receipt inline under every stance, which is where its
   height came from; the receipts live in the Official Record row and the Evidence
   drawer, so this surface only has to say WHICH WAY each issue came out. */
.pdxwa-oc { margin-top: 0.85rem; }
.pdxwa-oc-t {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9fb4d4;
}
.pdxwa-oc-sub {
  font-size: 0.7rem;
  line-height: 1.45;
  color: #7f97b8;
  margin: 0.15rem 0 0.5rem;
}
.pdxwa-oc-grp {
  border-left: 2px solid var(--pdxwa-col, #9fb4d4);
  padding-left: 0.55rem;
  margin-bottom: 0.55rem;
}
.pdxwa-oc-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pdxwa-col, #9fb4d4);
}
.pdxwa-oc-n {
  display: inline-block;
  min-width: 1.05rem;
  text-align: center;
  font-size: 0.78rem;
}
.pdxwa-oc-l { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.pdxwa-oc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  align-items: baseline;
  padding: 0.16rem 0;
  font-size: 0.76rem;
  line-height: 1.35;
}
/* The outcome list is grouped by verdict, so the group heading is already the
   verdict colour. The row inside it is an ISSUE, and gets the issue's colour —
   otherwise the same issue is one colour in the "backed it up" group and another
   in the "mixed" group, which is the opposite of what a shared palette is for. */
.pdxwa-oc-row.pdxwa-ic {
  border-left: 3px solid var(--pdx-ic);
  border-radius: 0 0.3rem 0.3rem 0;
  padding: 0.2rem 0.35rem 0.2rem 0.45rem;
  margin: 0.12rem 0;
  background: linear-gradient(90deg, var(--pdx-ic-wash, transparent), transparent 58%);
}
.pdxwa-oc-issue { color: #dbe6f5; font-weight: 600; }
.pdxwa-oc-meta { color: #6f88ab; font-size: 0.68rem; }

/* ── Method disclosure ──────────────────────────────────────────────────── */
.pdxwa-method { margin-top: 0.6rem; }
.pdxwa-method > summary {
  cursor: pointer;
  display: inline-block;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  line-height: 2.75rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7596c0;
}
.pdxwa-method > summary:hover,
.pdxwa-method > summary:focus-visible { color: #a9c4e8; }
.pdxwa-method-body {
  border-left: 2px solid rgba(148, 163, 184, 0.24);
  padding: 0.1rem 0 0.1rem 0.7rem;
  margin-bottom: 0.2rem;
}
.pdxwa-method-body p {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  line-height: 1.55;
  color: #8ba2c4;
}
.pdxwa-method-body p:last-child { margin-bottom: 0; }
.pdxwa-method-body b { color: #cbd9ec; }

/* ══════════════════════════════════════════════════════════════════════════
   THE JOINED ROWS  ·  they said → they did → so
   Rendered by dotsHtml(). Used on the profile and inside the Connecting the
   Dots card, so these rules must stand alone in either container.
   ══════════════════════════════════════════════════════════════════════════ */
.pdxwa-dots { list-style: none; margin: 0; padding: 0; }
.pdxwa-dot {
  --pdxwa-col: #9fb4d4;
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-left: 3px solid var(--pdxwa-col);
  background: rgba(10, 16, 30, 0.5);
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.55rem;
}
.pdxwa-dot:last-child { margin-bottom: 0; }
.pdxwa-dot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.45rem;
}
.pdxwa-dot-tier {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9fb4d4;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
}
.pdxwa-dot-title {
  flex: 1 1 8rem;
  min-width: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #eef4ff;
}

/* Each step is a labelled row. The label column is narrow and fixed so the three
   steps line up as a visible sequence rather than three loose paragraphs. */
.pdxwa-dot-step {
  display: grid;
  grid-template-columns: 3.9rem 1fr;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}
.pdxwa-dot-step:first-of-type { border-top: 0; padding-top: 0; }
.pdxwa-dot-k {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f88ad;
  padding-top: 0.15rem;
}
.pdxwa-dot-v {
  min-width: 0;
  font-size: 0.73rem;
  line-height: 1.5;
  color: #b9cae3;
  overflow-wrap: break-word;
}
.pdxwa-dot-src {
  color: #7fb4ff;
  font-size: 0.65rem;
  white-space: nowrap;
}
.pdxwa-dot-act-1 {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #cbd9ec;
}
.pdxwa-dot-act-1 + .pdxwa-dot-act-1 { margin-top: 0.15rem; }
.pdxwa-dot-none { color: #7f97bb; font-style: italic; }
.pdxwa-dot-out .pdxwa-dot-v {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}
.pdxwa-dot-j {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f97bb;
}

/* ── What feeds this score ───────────────────────────────────────────────────
   The panel that stops the profile reading as independent score widgets: each
   supporting layer named, counted and one tap away. Rows are buttons, so each
   one clears the 44px tap floor on its own. */
.pdxwa-feeds {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(127, 151, 187, 0.18);
  padding-top: 0.6rem;
}
.pdxwa-feeds-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7f97bb;
  margin-bottom: 0.4rem;
}
.pdxwa-feeds-l { list-style: none; margin: 0; padding: 0; }
.pdxwa-feed-li + .pdxwa-feed-li { margin-top: 0.3rem; }
.pdxwa-feed {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.4rem 0.55rem;
  text-align: left;
  background: rgba(127, 151, 187, 0.07);
  border: 1px solid rgba(127, 151, 187, 0.18);
  border-left: 2px solid var(--pdxwa-col);
  border-radius: 0.5rem;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.pdxwa-feed-ctx { border-left-color: rgba(127, 151, 187, 0.4); }
.pdxwa-feed-ico { font-size: 0.95rem; text-align: center; }
.pdxwa-feed-main { min-width: 0; }
.pdxwa-feed-name {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #dbe6f5;
}
.pdxwa-feed-role {
  display: block;
  font-size: 0.63rem;
  line-height: 1.35;
  color: #7f97bb;
  overflow-wrap: break-word;
}
.pdxwa-feed-n {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9fb4d4;
  text-align: right;
  max-width: 7.5rem;
}
.pdxwa-feed-go { color: #7fb4ff; }
.pdxwa-feeds-foot {
  margin: 0.45rem 0 0;
  font-size: 0.63rem;
  line-height: 1.45;
  color: #7f97bb;
}

/* ── The demoted pledge rate ─────────────────────────────────────────────────
   Promise Follow-Through keeps its percentage, one tap down. Set at body size
   inside a disclosure so it reads as the pledge tier's own working rather than a
   second headline beside the primary ring. Rendered by profiles-full.js. */
.pdx-ft-rate {
  margin-top: 0.55rem;
  border-top: 1px solid rgba(159, 180, 212, 0.14);
  padding-top: 0.4rem;
}
.pdx-ft-rate-sum {
  min-height: 2.75rem;
  line-height: 2.75rem;
  list-style: none;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9fb4d4;
}
.pdx-ft-rate-sum::-webkit-details-marker { display: none; }
.pdx-ft-rate-sum::before { content: '▸ '; color: #7596c0; }
.pdx-ft-rate[open] > .pdx-ft-rate-sum::before { content: '▾ '; }
.pdx-ft-rate-b p {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #9fb4d4;
}
.pdx-ft-rate-how {
  min-height: 2.75rem;
  padding: 0.3rem 0.7rem;
  background: rgba(127, 180, 255, 0.1);
  border: 1px solid rgba(127, 180, 255, 0.3);
  border-radius: 0.55rem;
  color: #7fb4ff;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── The withheld pledge rate ────────────────────────────────────────────────
   Same slot as .pdx-ft-rate above, for records whose kept / broken counts have
   no itemized pledge list behind them. Not a disclosure: there is no number to
   reveal, so nothing here opens. It reads as a stated omission — plain body copy
   in the muted note colour, deliberately without the gold or red the rate colours
   use, because an absent rate is neither a good nor a bad result. The ⓘ explainer
   button stays so the lane is still learnable. Rendered by profiles-full.js. */
.pdx-ft-noRate {
  margin-top: 0.55rem;
  border-top: 1px solid rgba(159, 180, 212, 0.14);
  padding-top: 0.5rem;
}
.pdx-ft-noRate-p {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #9fb4d4;
}

/* The way back up to the score this block feeds. Full-width on a phone because
   it is the last thing in the block and the thumb is already at the bottom. */
.pdx-ft-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  padding: 0.3rem 0.7rem;
  background: rgba(159, 219, 208, 0.08);
  border: 1px solid rgba(159, 219, 208, 0.28);
  border-radius: 0.55rem;
  color: #9fdbd0;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.pdx-ft-primary:hover,
.pdx-ft-primary:focus-visible {
  background: rgba(159, 219, 208, 0.16);
  color: #c9f2ea;
}

/* ── The profile hero ring ───────────────────────────────────────────────────
   The one primary number on a profile. The sub-line reserves its height so the
   post-warm re-render ("Loading the record…" → "7 of 10 tested") swaps text
   without moving the hero, per the no-shift-on-hydration rule above. */
.pdxwa-hero-jump {
  display: block;
  padding: 0;
  margin: 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.pdxwa-hero-jump > .score-ring { position: relative; display: block; }
.pdxwa-hero-in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.pdxwa-hero-v {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  line-height: 1;
}
.pdxwa-hero-cap {
  display: block;
  max-width: 3.4rem;
  margin: 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #7596c0;
}
.pdxwa-hero-cap-wait {
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #f5c842;
  margin-top: 0.22rem;
  text-align: center;
}
.pdxwa-hero-wait { font-size: 1.5rem; line-height: 1; }
.pdxwa-hero-none {
  background: rgba(100, 116, 139, 0.15);
  border: 1px solid rgba(100, 116, 139, 0.3);
}
.pdxwa-hero-none .pdxwa-hero-v { font-size: 1.6rem; }
.pdxwa-hero-sub {
  min-height: 1.7rem;
  max-width: 7.5rem;
  margin: 0.25rem auto 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  color: #7596c0;
  overflow-wrap: break-word;
}
/* THE HERO PLEDGE CHIP IS GONE — see pledgeChipHtml's obituary in word-action.js.
   "🤝 6 kept · 6 broken · 2 pending" no longer renders under the ring on any
   screen, so the ~44px tap target it reserved in the letterhead, and the
   ~2.35rem row it took in the phone grid below, are both returned to the page. */

/* ── Wider screens ──────────────────────────────────────────────────────── */
@media (min-width: 620px) {
  .pdxwa-num { min-width: 6rem; }
  .pdxwa-num-v { font-size: 2.5rem; }
  .pdxwa-verdict { font-size: 1.45rem; }
  .pdxwa-line { font-size: 0.78rem; }
  .pdxwa-tier { grid-template-columns: 1.7rem 1fr auto; padding: 0.6rem 0.75rem; }
  .pdxwa-dot-step { grid-template-columns: 4.6rem 1fr; }
  .pdxwa-dot-v { font-size: 0.78rem; }
  .pdxwa-feed { grid-template-columns: 1.7rem 1fr auto; padding: 0.5rem 0.7rem; }
  .pdxwa-feed-role { font-size: 0.68rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Phone-only narrowings — the two exceptions to mobile-first in this file
   ═══════════════════════════════════════════════════════════════════════════
   Everything above is authored mobile-first: base rules are the small-screen
   rules and the one query above widens. These two passes narrow, which is why
   they sit at the very bottom and why scripts/test-word-action.mjs section 14
   allows max-width queries ONLY for these two component families. The base of
   each layout below is genuinely shared with the 481-619px range, so there is
   nothing to invert — the phone gets a different arrangement of the same parts,
   not a smaller copy of a desktop one.

   They live here rather than in app.css (which owns this codebase's other
   max-width passes) because these are the components this file styles, and both
   selector families beat app.css on specificity rather than on file order —
   necessary, since word-action.css is linked BEFORE app.css. Nothing whose
   specificity ties with an app.css rule may be moved into this file.

   The .profile-hero letterhead grid that gives the score its own full-width row
   stays in app.css for exactly that reason: it collides with
   `.profile-hero { display: flex }` declared in that same file. */

/* ── The hero ring on a phone ────────────────────────────────────────────────
   Same markup, same number, laid out sideways. On a phone the hero header is a
   grid whose third row is full width (see .profile-hero in app.css), so the
   stack that reads top-to-bottom in a narrow desktop column reads left-to-right
   here: the ring on the left, its denominator sub-line beside it. That turns a
   ~150px-tall column that had to be hidden for want of width into a short strip
   that fits under the name.

   The strip is given a panel of its own — not for decoration, but so a reader
   can tell at a glance that the ring and the "7 of 10 tested" line are one read
   rather than two loose figures floating under the office line. Row 2 of column
   2 is still declared: the tracking/pending states render there on a profile
   with no scorable record. The pledge count chip that used to occupy it is
   gone. */
@media (max-width: 480px) {
  .profile-hero-score .pdxwa-hero {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.7rem;
    row-gap: 0.25rem;
    padding: 0.55rem 0.7rem;
    background: rgba(16, 26, 46, 0.55);
    border: 1px solid rgba(159, 180, 212, 0.18);
    border-left: 3px solid rgba(159, 219, 208, 0.5);
    border-radius: 0.75rem;
  }
  /* Whichever of the three possible left-hand tiles rendered — the real ring,
     the "monitoring" dash, or the tracked-but-unresolved hourglass — occupies
     column 1 and spans both rows. */
  .profile-hero-score .pdxwa-hero > .pdxwa-hero-jump,
  .profile-hero-score .pdxwa-hero > .pdxwa-hero-none,
  .profile-hero-score .pdxwa-hero > .profile-score-tracking {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .profile-hero-score .pdxwa-hero > .pdxwa-hero-sub,
  .profile-hero-score .pdxwa-hero > .profile-score-denom {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    max-width: none;
    min-height: 0;
    text-align: left;
    align-self: end;
  }
  .profile-hero-score .pdxwa-hero > .profile-score-pending,
  .profile-hero-score .pdxwa-hero > .profile-score-track-note {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    width: 100%;
    max-width: none;
    align-self: start;
  }
  .profile-hero-score .pdxwa-hero > .profile-score-track-note { max-width: none; text-align: left; }
}

/* ── The pledge lane on a phone ──────────────────────────────────────────────
   Promise Follow-Through was already demoted structurally: its rate lives one
   tap down inside a disclosure, its eyebrow names it as the pledge tier of the
   score above, and it closes with a link back to that score. But the demotion
   was calibrated against a hero ring that a phone never drew — with the ring
   hidden below 480px, this block's 1.1rem Bebas verdict WAS the largest
   judgement on the profile, so the pledge lane read as the headline by default
   rather than by design.

   The ring is back in the letterhead now (see the .pdxwa-hero phone grid above),
   and this pass keeps the hierarchy explicit rather than incidental: the pledge
   verdict is capped a step below the ring's figure, its panel is quieter, and
   nothing in it grows to fill the room the wider layout used to give it. No
   count, chip, bar, disclosure or explainer is touched — the only thing that
   changes is how loud the block is allowed to be. */
@media (max-width: 480px) {
  .pdx-ft-block { padding: 0.75rem 0.8rem !important; }
  /* The eyebrow carries the "tier of Word vs Action" relationship, so it is the
     one line here that gets slightly LOUDER on a small screen, not quieter. */
  .pdx-ft-block .pdx-ft-eyebrow {
    font-size: 0.6rem !important;
    letter-spacing: 0.09em !important;
    line-height: 1.4 !important;
    color: #b0c4de !important;
  }
  /* Capped below the hero ring's percentage. A verdict word, not a headline. */
  .pdx-ft-block .pdx-ft-verdict { font-size: 0.95rem !important; }
  .pdx-ft-block .pdx-ft-sub { font-size: 0.72rem !important; }
  /* The disclosure that holds the pledge-only rate stays a disclosure, and its
     summary stays body-scale — a percentage in a 44px-tall summary row starts
     looking like a control that reports a score. */
  .pdx-ft-rate-sum { font-size: 0.7rem; }
  /* Full-width thumb target for the route back to the one score. */
  .pdx-ft-primary { width: 100%; justify-content: center; min-height: 42px; }
}