/* ============================================================================
   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;
}
/* ── The denominator, under the metric caption ────────────────────────────── */
/* HOW MANY TESTS THE BIG NUMBER IS OVER. It sits inside the number block, not
   beside it in the prose, because a percentage and its denominator are one fact
   and a reader who scans only the loud part has to leave with both halves.

   Set one notch smaller than the metric caption above it and in the same steel,
   so it reads as the caption's second line rather than as a competing label — and
   NOT dimmed further than that. This is the line that stops "100%" being read as
   a strong record when it is three tested issues; styling it as fine print would
   undo the entire reason it exists.

   Printed whenever a percentage is. There is no thin-score variant, no threshold
   and no hidden state: see the note over testedOf() in word-action.js. */
.pdxwa-num-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fb4d4;
  margin-top: 0.22rem;
  line-height: 1.2;
  white-space: nowrap;
}

.pdxwa-say { flex: 1 1 auto; min-width: 0; }

/* Which record the big number is over. Last line of the number block, on its own
   hairline row: it qualifies the metric caption above it rather than continuing
   it, and the rule is what makes that legible without a second colour.

   It used to be set at 0.42rem in #6f86a8 — the qualifier that decides what the
   loudest number on the page even MEANS, printed at a size a phone renders as
   texture. It is now the same size and colour as the metric caption it qualifies,
   because on a profile carrying two scopes the span is not a footnote.

   Executive lane only; nothing else here is term-scoped, so nothing else prints a
   scope. */
.pdxwa-num-scope {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fb4d4;
  margin-top: 0.3rem;
  padding-top: 0.26rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  line-height: 1.2;
}

/* ── The current-term slice ──────────────────────────────────────────────── */
/* SECONDARY IS A LAYOUT DECISION, NOT A DISCLAIMER. This strip is one line tall,
   sits below the verdict block rather than beside it, and prints its percentage
   at well under half the main numeral's size in the body face — not the display
   face the headline number uses. A reader scanning the card meets the all-time
   number, the verdict and one sentence before this exists. The colour bar on the
   left is the slice's own verdict colour, which is the only thing here allowed to
   differ loudly from the score above.

   SECONDARY IS NOT THE SAME AS SMALL, though, and this strip had drifted into the
   second thing: 0.66rem of relation text over a 0.62rem note in #6f86a8, i.e. the
   two lines that explain why there are two numbers were the quietest text in the
   panel. Everything here is a step up now — and the strip still cannot be mistaken
   for the score, because the thing that makes it secondary is where it sits and
   what face it is set in, not whether a reader can read it. */
.pdxwa-slice {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.55rem 0.5rem 0.6rem;
  border-radius: 0.55rem;
  background: rgba(8, 13, 26, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-left: 3px solid color-mix(in srgb, var(--pdxwa-col) 55%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pdxwa-slice { border-left-color: rgba(148, 163, 184, 0.45); }
  .pdxwa-slice-tie { color: rgba(148, 163, 184, 0.7); }
}
/* The hang-off glyph. It carries the containment relationship at a glance — this
   row belongs to the number above it — which is why it is centred on the strip's
   own figure rather than sitting on the shared baseline. */
.pdxwa-slice-tie {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.72rem;
  line-height: 1;
  color: color-mix(in srgb, var(--pdxwa-col) 72%, transparent);
}
.pdxwa-slice-k {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0c4de;
  flex: 0 0 auto;
}
.pdxwa-slice-v {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pdxwa-col);
  flex: 0 0 auto;
}
.pdxwa-slice-n {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #a4b8d6;
}
/* The sentence that stops the two numbers being read as rivals. Its own line so
   it survives the wrap on a narrow card instead of trailing off the count. */
.pdxwa-slice-note {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #8ea4c4;
}
.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; }
/* The heading the basis lid's label used to carry. It gave that label up when the
   three separate disclosures collapsed into one, so the block says its own name
   again — same typography as the feed map's heading, because inside the fold the
   two are peers. */
.pdxwa-basis-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;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE TWO CLOSED CONTROLS AT THE FOOT OF THE SECTION
   ────────────────────────────────────────────────────────────────────────────
   ⚖️ Word vs Action is the last thing between a reader and 🌳 All Issues by
   Topic. Everything that is not the score argument now sits behind one of two
   lids — the score's own issue index, and the machinery behind the number — and
   both are closed on arrival. These wrappers exist only to give the .pdxsp-lid
   the spine mints inside them a little air; the lid chrome itself is styled in
   profile-spine's stylesheet, so nothing here re-describes a control. */
.pdxwa-idxlid { margin-top: 0.65rem; }
.pdxwa-how { margin-top: 0.45rem; }

/* ══════════════════════════════════════════════════════════════════════════
   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. */
/* The three sharpest rows, collapsed. See topRowsHtml for why: open, they were
   a phone screen of prose sitting under the list a reader had just filtered. */
.pdxwa-rows { margin-top: 0.55rem; }
.pdxwa-rows-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  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-h:hover,
.pdxwa-rows-h:focus-visible { color: #a9c4e8; }
/* display:flex on a <summary> drops the browser's own triangle in Chrome and
   keeps it in Firefox, so the marker is suppressed in both and drawn here —
   one affordance, in the same place, either way. */
.pdxwa-rows-h { list-style: none; }
.pdxwa-rows-h::-webkit-details-marker { display: none; }
.pdxwa-rows-h::before {
  content: '▸';
  font-size: 0.7rem;
  line-height: 1;
  color: #5f7ea8;
}
.pdxwa-rows[open] > .pdxwa-rows-h::before { content: '▾'; }
/* How much is behind the fold, before it is opened. A disclosure that does not
   say what it holds is a disclosure nobody opens. */
.pdxwa-rows-c {
  margin-left: auto;
  letter-spacing: 0.05em;
  color: #6f88ab;
}
.pdxwa-rows-body { padding-top: 0.1rem; }
.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); }

/* ── The issue index — four result buckets, one switcher ─────────────────── */
/* 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 issue dossier one tap below each row,
   so this surface only has to say WHICH WAY each issue came out.

   MOBILE IS THE BASE. On a phone the switcher is the layout: a full-width row of
   counted chips, and exactly one bucket panel on screen under it. The widening
   query at 620px shows every panel at once as distinct lists, and the selection
   stops filtering and becomes emphasis. Same markup either way — the JS only ever
   moves `.is-on`, so a resize cannot lose a reader's place. */
/* scroll-margin-top is what makes "tap a count, land on the list" true rather
   than nearly true. The strip's controls scroll this block into view, and the
   modal has a sticky header sitting over the top of its own scroller — without
   a margin the first bucket heading arrives underneath that header and the
   reader sees rows with no indication of which bucket they belong to. */
.pdxwa-oc { margin-top: 0.85rem; scroll-margin-top: 4.5rem; }
.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;
}

/* The bucket switcher. Deliberately NOT a select: a dropdown hides three of the
   four counts behind a tap, which is the same partial reveal the old fold did.
   Chips wrap rather than scroll sideways — a horizontally scrolling strip on a
   360px screen puts the fourth bucket off-screen with nothing saying it is
   there, and the fourth bucket is the coverage pile a reader most needs to see
   the size of. */
.pdxwa-oc-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
}
.pdxwa-oc-tab {
  flex: 1 1 8.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--pdxwa-col, #9fb4d4);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.03);
  color: #b7c9e2;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pdxwa-oc-tab-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--pdxwa-col, #9fb4d4);
  min-width: 1.1rem;
  text-align: center;
}
.pdxwa-oc-tab-l {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: break-word;
}
/* The selected bucket is filled, not merely outlined. An outline-only selected
   state on a row of outlined chips is a difference a reader has to look for. */
.pdxwa-oc-tab.is-on {
  background: color-mix(in srgb, var(--pdxwa-col, #9fb4d4) 18%, transparent);
  box-shadow: inset 0 0 0 1px var(--pdxwa-col, #9fb4d4);
  color: #eaf2ff;
}
.pdxwa-oc-tab:hover,
.pdxwa-oc-tab:focus-visible {
  background: color-mix(in srgb, var(--pdxwa-col, #9fb4d4) 26%, transparent);
}
/* Coverage is not a result. The thin bucket keeps its count, its chip and its
   tap target, and gives up the border weight — it should never be the loudest
   thing in a row of findings. */
.pdxwa-oc-tab-2nd { border-style: dashed; opacity: 0.82; }
/* A bucket at zero. It keeps its chip, its count, its colour and its full tap
   target — hiding it is what made "Contradicted" disappear from clean records —
   and gives up saturation, so a row of chips still reads worst-first and a zero
   never out-shouts a finding. Not disabled: the panel behind it has an answer in
   it ("None. No issue in this index landed here"), and that answer is the point. */
.pdxwa-oc-tab.is-zero {
  opacity: 0.6;
  border-style: dashed;
  background: transparent;
}
.pdxwa-oc-tab.is-zero.is-on { opacity: 1; }
.pdxwa-oc-tab.is-zero .pdxwa-oc-tab-n { color: #7f97b8; }
.pdxwa-oc-tab.is-zero.is-on .pdxwa-oc-tab-n { color: var(--pdxwa-col, #9fb4d4); }

.pdxwa-oc-panels { display: block; }
/* ONE BUCKET AT A TIME, AT EVERY WIDTH. The strip above is the navigator, so the
   index shows the list the reader asked for and nothing else — four stacked
   lists under a control that names one is the split-panel noise this replaced. */
.pdxwa-oc-grp {
  display: none;
  border-left: 2px solid var(--pdxwa-col, #9fb4d4);
  padding-left: 0.55rem;
  margin-bottom: 0.55rem;
  min-width: 0;
}
.pdxwa-oc-grp.is-on { display: block; }
/* The opt-in flat view: every bucket in one stack, for a reader who wants the
   whole record in one scroll. Off by default, reversible by the same control,
   and it never hides the selection — the chip a reader picked stays marked, so
   leaving flat mode returns them to the bucket they were in. */
.pdxwa-oc.is-flat .pdxwa-oc-grp { display: block; }
.pdxwa-oc-grp-2nd { border-left-style: dashed; }
/* An empty bucket's panel. Drawn quieter than a list of rows, because it is the
   absence of rows — but present, and phrased, because "none" is the answer. */
.pdxwa-oc-grp.is-zero { border-left-style: dotted; opacity: 0.85; }
.pdxwa-oc-empty {
  font-size: 0.7rem;
  line-height: 1.5;
  color: #7f97b8;
  margin: 0.25rem 0 0.1rem;
  overflow-wrap: break-word;
}
.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-hsub {
  font-size: 0.66rem;
  line-height: 1.45;
  color: #7f97b8;
  margin: 0.05rem 0 0.15rem;
  overflow-wrap: break-word;
}
.pdxwa-oc-n {
  display: inline-block;
  min-width: 1.05rem;
  text-align: center;
  font-size: 0.78rem;
}
/* The flat-view switch, under the list it changes. One control, two sentences:
   the label always says what the next tap DOES, rather than naming a mode and
   leaving a reader to work out which one they are in. */
.pdxwa-oc-allw { margin: 0.5rem 0 0; }
.pdxwa-oc-all {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  padding: 0.3rem 0.6rem;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 0.45rem;
  background: none;
  color: #7596c0;
  font: inherit;
  font-size: 0.66rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.pdxwa-oc-all:hover,
.pdxwa-oc-all:focus-visible { color: #a9c4e8; border-color: rgba(148, 163, 184, 0.6); }
.pdxwa-oc-all-b { display: none; }
.pdxwa-oc.is-flat .pdxwa-oc-all-a { display: none; }
.pdxwa-oc.is-flat .pdxwa-oc-all-b { display: inline; }
/* The denominator, once, at the foot — never as a second percentage. */
.pdxwa-oc-foot {
  font-size: 0.66rem;
  line-height: 1.5;
  color: #6f88ab;
  margin: 0.35rem 0 0;
}
.pdxwa-oc-l { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.pdxwa-oc-li { margin: 0; }
/* THE ROW IS THE BUTTON. Full width, ≥44px tall, and the whole line is the tap
   target — not the chevron at the end of it. */
.pdxwa-oc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  padding: 0.3rem 0.35rem;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.35;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0.3rem;
  text-align: left;
  cursor: pointer;
}
.pdxwa-oc-row:hover,
.pdxwa-oc-row:focus-visible { background: rgba(255, 255, 255, 0.05); }
.pdxwa-oc-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
}
/* The outcome list is grouped by verdict, so the bucket 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" bucket and another
   in the "mixed" bucket, which is the opposite of what a shared palette is for.
   This same colour is what the dossier header repeats when the row is tapped.

   MOBILE-FIRST, AND THE PHONE GETS THE LOUDER VERSION. These values are the
   phone's; the widening query below steps them back. On a phone one bucket is on
   screen at a time and the rows in it all carry the same outcome cue, so the ONLY
   thing distinguishing one row from the next at a glance is the issue — and a
   3px hairline against a dark panel is not a glance-level signal at arm's length
   in daylight. A 4px spine with the wash carried further across the row makes the
   issue the thing the eye lands on while scrolling a full bucket, which is the
   scan this list is for. On a wider screen the row is one of several visible at
   once with real whitespace around it, so the same emphasis reads as decoration;
   it goes back to a hairline there. Nothing new is invented for either width —
   it is the same two properties, from the same --pdx-ic, at two strengths. */
.pdxwa-oc-row.pdxwa-ic {
  border-left: 4px solid var(--pdx-ic);
  border-radius: 0 0.3rem 0.3rem 0;
  padding: 0.3rem 0.35rem 0.3rem 0.5rem;
  margin: 0.12rem 0;
  background: linear-gradient(90deg, var(--pdx-ic-wash, transparent), transparent 74%);
}
/* The result, in the bucket's own word, on the row. Small and outlined: it is a
   restatement of the panel the row sits in, not a second judgement of it. */
.pdxwa-oc-cue {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.1rem 0.34rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
}
/* ── The result group: the bucket's word and the issue's figure, as one unit ──
   The cue gives the DIRECTION of the finding, the percentage gives its DEGREE,
   and neither is safe to read without the other. Held in one inline-flex so they
   cannot wrap apart onto separate lines, and so on a wide screen the pair moves
   into the result column together rather than the word going one way and the
   number the other. */
.pdxwa-oc-res {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0 0.3rem;
  white-space: nowrap;
}
/* ── THE PER-ISSUE FIGURE, SIZED SO IT CANNOT BE THE PROFILE'S SCORE ──────────
   There is one headline percentage on a profile and it is the pooled Direction
   Match a screen above this, drawn at display size in a block of its own. This is
   a different number about a different denominator — one issue, not the ledger —
   and every property here exists to keep those two apart at a glance:

     · SMALLER THAN THE ROW'S OWN TITLE. 0.68rem against the issue name's 0.76rem,
       inside a row that is itself 0.76rem inside a section whose headline number
       is several times that. A reader scanning for "the number" cannot land here
       by accident.
     · ALWAYS CARRYING ITS SCOPE. The label beneath the digits reads "this issue",
       so the figure is never an unqualified percentage. It is set in the same
       block, not a tooltip, because a tooltip does not exist on a phone.
     · TINTED, NOT FILLED. It takes the row's own verdict colour at low alpha. The
       headline is a solid, high-contrast number; this is a quiet chip that reads
       as an attribute of the row it sits in.

   No background bar, no ring, no arrow — anything that made this look measured
   rather than reported would start it competing with the thing it qualifies. */
.pdxwa-oc-pct {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 5.4rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.28rem;
  background: color-mix(in srgb, var(--pdxwa-col, #9fb4d4) 12%, transparent);
  line-height: 1.05;
}
.pdxwa-oc-pct-v {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;      /* under the issue title's 0.76rem, deliberately */
  letter-spacing: 0.01em;
  color: var(--pdxwa-col, #9fb4d4);
}
/* The lane and the scope, always present, never abbreviated away. This label is
   the whole reason the figure is allowed on the row face at all — and since the
   row now carries an outside-the-score tally underneath, it also has to say which
   of the two signals the number is. It wraps to two short lines rather than
   truncating: a clipped "Direction Ma…" is a label that has stopped working. */
.pdxwa-oc-pct-l {
  font-size: 0.46rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7f96b6;
  text-align: center;
  text-wrap: balance;
}
.pdxwa-oc-go { flex: 0 0 auto; color: #6f88ab; font-size: 0.9rem; line-height: 1; }
.pdxwa-oc-said { color: #a9bdd8; overflow-wrap: break-word; min-width: 0; }
.pdxwa-oc-issue { color: #dbe6f5; font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.pdxwa-oc-meta { color: #6f88ab; font-size: 0.68rem; }

/* ── The outside-the-score lane, beside the formal result ──────────────────
   A SECOND CONTROL, NOT A SECOND ROW. It sits under the row it belongs to, in
   the same <li>, indented to the issue's own colour rule and drawn in the
   quieter of the two weights — related to the formal row, distinct from it, and
   never mistakable for the verdict chrome above it. The dotted left edge is the
   whole visual argument: the formal row's rule is solid because it carries the
   result, this one is dotted because it carries context.
   No colour from the verdict palette reaches it. A public tally that turned red
   under a Contradicted row would be read as part of that verdict — which is
   exactly the merge the two lanes exist to prevent.
   AND THE COUNTS ARE NOT DRAWN LIKE A FIGURE. They used to be the brightest text
   on the line (#c6d4ec), one line under a tinted percentage chip, in a list where
   the eye is hunting for numbers. A receipt count rendered as emphatically as a
   scored result is the blend the lane exists to prevent, so the tally now sits at
   the lane's own weight and the dashed boundary tag is the only outlined thing on
   the line. */
.pdxwa-oc-pub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.34rem;
  width: 100%;
  min-height: 2.2rem;          /* still a real tap target, quieter than the row */
  margin: -0.1rem 0 0.22rem;
  padding: 0.26rem 0.3rem 0.26rem 0.4rem;
  font: inherit;
  font-size: 0.66rem;
  line-height: 1.35;
  color: #8fa2c0;
  background: none;
  border: 0;
  border-left: 2px dotted rgba(147, 166, 196, 0.45);
  border-radius: 0 0.3rem 0.3rem 0;
  text-align: left;
  cursor: pointer;
}
.pdxwa-oc-pub:hover,
.pdxwa-oc-pub:focus-visible {
  background: rgba(147, 166, 196, 0.09);
  border-left-color: rgba(147, 166, 196, 0.8);
}
.pdxwa-oc-pub-k {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9c9e4;
  white-space: nowrap;
}
/* What the lane IS, after what it is not. Lower case and quiet: a second run of
   condensed caps beside the key would read as a second key rather than as the
   qualifier on the first one. */
.pdxwa-oc-pub-sub {
  flex: 0 0 auto;
  font-size: 0.6rem;
  color: #7f93b4;
}
.pdxwa-oc-pub-t { flex: 1 1 100%; min-width: 0; font-weight: 400; color: #9fb1cc; overflow-wrap: break-word; }
/* Nothing on file yet is a real answer and it is drawn as one: italic and quiet,
   so it reads as an absence rather than as a finding, and still legible enough
   that a reader knows the line loaded. */
.pdxwa-oc-pub-0 .pdxwa-oc-pub-t { font-style: italic; color: #8fa2c0; }
/* The wall, on every row. Short here because the sentence is at the foot; a row
   is allowed to be deep-linked to on its own, so the disclosure cannot live
   only in the paragraph a reader may never scroll to. */
.pdxwa-oc-pub-tag {
  flex: 0 0 auto;
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  color: #7f93b4;
  padding: 0.02rem 0.28rem;
  border: 1px dashed rgba(147, 166, 196, 0.4);
  border-radius: 999px;
  white-space: nowrap;
}
.pdxwa-oc-pub-go { flex: 0 0 auto; color: #6f88ab; font-size: 0.8rem; line-height: 1; }
/* The coverage count, once, under the denominator it shares. Same size as the
   foot it follows, because it is the same kind of sentence. */
.pdxwa-oc-pubfoot {
  font-size: 0.66rem;
  line-height: 1.5;
  color: #6f88ab;
  margin: 0.3rem 0 0;
}
.pdxwa-oc-pubfoot b { color: #a9bdd8; font-weight: 600; }
/* Which surface is the map. Sits between the index's own denominator and the
   outside-the-score wall, quieter than both — it is a signpost, not a finding. */
.pdxwa-oc-map {
  font-size: 0.66rem;
  line-height: 1.5;
  color: #7f97bb;
  margin: 0.3rem 0 0;
}

/* ── Method note ────────────────────────────────────────────────────────────
   No longer a <details> of its own: the basis, the sample rows, the coverage
   ask, the feed map and this note all sit inside ONE fold now, and a disclosure
   inside a disclosure is a second tap for a reader who already said yes. The
   heading keeps the summary's typography so nothing about the block's rhythm
   changed — it simply does not open or close any more. */
.pdxwa-method { margin-top: 0.6rem; }
.pdxwa-method-h,
.pdxwa-method > summary {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7596c0;
  margin-bottom: 0.35rem;
}
.pdxwa-method > summary {
  cursor: pointer;
  display: inline-block;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  line-height: 2.75rem;
}
.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 SEARCH CHIP  ·  the issue index's result, on an All-Seeing Eye row
   Sized and spaced to match .svd-eye-badge and .pdx-cov-badge exactly — the
   three are alternatives for the same slot on the same row, and a chip that
   changes shape depending on which one answered would read as a different
   kind of thing rather than the same slot with a different word in it. The
   colour is the bucket's own, carried in as --pdxwa-col, so the word and the
   colour a reader meets in search are the ones waiting on the profile.
   ══════════════════════════════════════════════════════════════════════════ */
.pdxwa-eye-badge {
  --pdxwa-col: #9fb4d4;
  display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.4rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.6rem;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.4rem;
  border-radius: 0.35rem; white-space: nowrap; vertical-align: middle;
  color: var(--pdxwa-col);
  background: color-mix(in srgb, var(--pdxwa-col) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pdxwa-col) 42%, transparent);
}
/* Browsers without color-mix() keep the word and the text colour and lose only
   the tint — the chip is still legible and still the bucket's colour. */
@supports not (background: color-mix(in srgb, #000 14%, transparent)) {
  .pdxwa-eye-badge {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.34);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   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.4rem; }
/* Why the document belongs under this issue, in normal English, under the citation
   that names it. Body type rather than the condensed face the citation uses — this is
   a sentence to read, not a label to scan. */
.pdxwa-dot-why {
  display: block;
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0;
  line-height: 1.5;
  color: #9db2d2;
  margin-top: 0.1rem;
}
.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 shape hero ───────────────────────────────────────────────────────
   What a deep formal record LOOKS like, in the slot that used to hold a ring or
   an em-dash. It is a letterhead block, not a tile: the layout rules that make
   it full-width live in app.css beside the rest of .profile-hero, and what this
   file owns is the component itself.

   Nothing in here is sized like a verdict. The largest type in the block is the
   heading, the counts inside the depth line are bolded body text, and the one
   percentage anywhere near it — Direction Match, demoted to the foot — is drawn
   in a 52px ring against the old hero's 80px. That ordering is the entire point
   of the pass, so it is expressed in type scale and not only in DOM order. */
.pdxwa-shape,
/* ── 🏛 The record brief ─────────────────────────────────────────────────────
   The same letterhead below the depth gate, in fewer lines. It shares every
   inner class with the block above — depth, group headings, rows, the thin
   line, the route-out, the demoted Direction Match — so there is exactly one
   set of type scales for "what the formal record looks like" and the short form
   cannot drift louder than the long one. The only thing this selector adds is
   the wrapper, and the only thing the wrapper does is take the width. */
.pdxwa-brief {
  width: 100%;
  min-width: 0;
  text-align: left;
}
/* Nothing on file, or nothing readable: one refused sentence and the demoted
   match block under it. No border, no fill, no badge — an absence should not be
   dressed as a finding. */
.pdxwa-brief-empty .pdxwa-shape-none,
.pdxwa-brief-thin .pdxwa-shape-none { margin-bottom: 0.55rem; }
.pdxwa-shape-hd {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #9fb4d4;
  margin-bottom: 0.35rem;
}
/* Depth. The first line a reader meets, and the one that has to survive being
   read alone: three counts, no rate, no adjective. It is ONE line — the census,
   whichever lane wrote it, sits between the heading and the first pattern row and
   the rows are what the letterhead is for. */
.pdxwa-shape-depth {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #b9cae3;
  overflow-wrap: break-word;
}
.pdxwa-shape-depth b { color: #fff; font-weight: 700; }
/* The exec lane's inventory — what is on file, in the lane's own counted phrases.
   It is an inline run at the end of the volume clause rather than a paragraph
   under it: quieter than the clause it breaks down, because it is a breakdown of
   that sentence and not a second claim, but on the same line, because two stacked
   census blocks pushed the first pattern row off a phone's first screen. It wraps
   with the clause; it is never a second block. */
.pdxwa-shape-inv {
  font-size: 0.94em;
  color: #8fa6c4;
  overflow-wrap: break-word;
}
.pdxwa-shape-grp { margin-bottom: 0.7rem; }
.pdxwa-shape-grp-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #7596c0;
  margin-bottom: 0.3rem;
}
.pdxwa-shape-list { list-style: none; margin: 0; padding: 0; }
/* The word-first letterhead's row list. Same reset, deliberately not the same
   class: .pdxwa-shape-list is the marker that says the top of the file named a
   FORMAL pattern, and this list names none. See saidBriefHtml(). */
.pdxwa-said-list { list-style: none; margin: 0; padding: 0; }
/* Issue name and its tier chip on one row where there is width, stacked where
   there is not — the chip carries the counts and the lane marker, so it must
   never be truncated to keep the row on one line. */
.pdxwa-shape-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(159, 180, 212, 0.1);
}
.pdxwa-shape-row:first-child { border-top: 0; }
/* ── THE ISSUE, ON THE RAIL ───────────────────────────────────────────────────
   The one colour vocabulary, on the last rows that named an issue without wearing
   it. `--pdx-ic` arrives inline from issue-colors.js via word-action.js's
   issueTintAttr(), so every hex in this treatment is the same hex /issue/<key>,
   the Digital Library filter and that topic's chip on a bill letterhead take —
   there is no colour authored here.

   4px and a wash, matching .pdxwa-row rather than inventing a third strength. The
   note over that rule is the reason: at 2px on dark navy under a 14% tint the
   treatment was present and invisible, so the tint is a horizontal gradient that
   concentrates against the rail and clears out well before the text, which buys a
   glance-level signal at no cost to the copy's contrast.

   THE ATTRIBUTE, NOT A CLASS, AND ONLY WHEN THE KEY RESOLVED. `[data-ic]` is the
   spelling the letterhead chip and every chip surface after it settled on, and
   word-action.js emits it only for a key that landed on a real Core National
   Issue. A row whose key stopped resolving carries no attribute and keeps the
   plain hairline — an unresolved row must not be one typo away from looking like a
   deliberate slate one.

   WHAT IT DOES NOT TOUCH. The tier chip in .pdxwa-shape-bar paints itself from
   _stPatternHtml()'s tone table (supports green, opposes red, ran-both-ways
   amber) and the ⓘ in .pdxis-key paints itself from issue-scope.js. Neither
   consumes --pdx-ic, so the direction and the glossary keep their own meanings
   while the row keeps its issue — which is why this is a rail and a wash and not a
   text colour. */
.pdxwa-shape-row[data-ic] {
  border-left: 4px solid var(--pdx-ic);
  padding-left: 0.5rem;
  background: linear-gradient(
    90deg,
    var(--pdx-ic-wash, var(--pdx-ic-soft, transparent)),
    transparent 66%
  );
}
.pdxwa-shape-iss {
  flex: 1 1 8rem;
  min-width: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #dbe6f5;
  line-height: 1.25;
  overflow-wrap: break-word;
}
/* ── THE ROW AS A DOOR ───────────────────────────────────────────────────────
   The title and the pattern bar are one tap target onto the issue's Official
   Record dossier, so they share one container and that container — not the row,
   which also holds the key control — is what carries the 2.75rem thumb height.
   The row itself stays a plain flex line so a rendering without a pid/key pair
   still lays out as the labelled fact it always was. */
.pdxwa-shape-door {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  min-height: 2.75rem;
  padding: 0.2rem 0.35rem;
  margin-left: -0.35rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.pdxwa-shape-door:hover,
.pdxwa-shape-door:focus-within {
  background: rgba(127, 180, 255, 0.09);
}
/* ── THE ISSUE FILE, THIRD ON THE ROW AND QUIETEST ───────────────────────────
   A small named link to /i/<key>, sitting outside .pdxwa-shape-door beside the ⓘ.
   It is deliberately the least prominent thing on the line: the row's primary tap
   is this person's record on this issue, and a second destination that competes
   for the eye would make the reader choose before they have read anything. Small
   caps, no tint, no --pdx-ic — like the ⓘ it is a control about the key, not a
   state of it. On a narrow row it wraps to its own line rather than squeezing the
   pattern bar, because the bar carries the counts. */
.pdxwa-shape-file {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7f96b6;
  text-decoration: none;
  touch-action: manipulation;
}
.pdxwa-shape-file:hover,
.pdxwa-shape-file:focus-visible {
  color: #9fdbff;
  text-decoration: underline;
}
.pdxwa-shape-file:focus-visible {
  outline: 2px solid rgba(127, 180, 255, 0.7);
  outline-offset: 2px;
  border-radius: 5px;
}
/* Same type as the inert name it replaced — a door that changes the row's
   typography reads as a new kind of claim rather than the same fact, tappable. */
.pdxwa-shape-lbl {
  flex: 1 1 8rem;
  min-width: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #dbe6f5;
  line-height: 1.25;
  overflow-wrap: break-word;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
}
.pdxwa-shape-lbl:hover,
.pdxwa-shape-lbl:focus-visible { color: #9fdbff; }
.pdxwa-shape-go { color: #7fb4ff; font-size: 0.86rem; line-height: 1; }
.pdxwa-shape-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  min-width: 0;
}
/* The two-sided tally, where the tier chip did not already carry it. Same words,
   same separator and near enough the same size as the chip's own count span, so
   a split row and a one-sided row read as one sentence pattern. */
.pdxwa-shape-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: #a8bfdd;
  opacity: 0.9;
  white-space: nowrap;
}
.pdxwa-shape-n-off { color: #7596c0; font-style: italic; white-space: normal; }
.pdxwa-shape-more,
.pdxwa-shape-none,
.pdxwa-shape-thin {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #7596c0;
  overflow-wrap: break-word;
}
.pdxwa-shape-thin { margin: 0 0 0.75rem; }
.pdxwa-shape-thin b { color: #b9cae3; font-weight: 700; }
/* ── What the file is, under what it shows ───────────────────────────────────
   The slice line sits below the pattern list and above the route out, in the
   same muted grey as the thin count beside it: it is a note about the documents
   the list came from, not a fourth finding competing with the chips. No colour,
   no weight, no border — a rule or a tint here would make it a banner, and a
   banner reading "not a career score" beside three one-sided chips is a verdict
   about the record rather than a description of the file. */
.pdxwa-shape-slice {
  margin: 0.15rem 0 0.75rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #7596c0;
  font-style: italic;
  overflow-wrap: break-word;
}
.pdxwa-shape-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.75rem;
  background: rgba(159, 180, 212, 0.08);
  border: 1px solid rgba(159, 180, 212, 0.22);
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb4d4;
}

/* ── Direction Match, demoted ────────────────────────────────────────────────
   Same read, same floors, same figure — a rule above it, smaller type, and a
   heading that is the question rather than the noun. Where it cannot publish,
   the gap sentence occupies this space instead of a dash. */
.pdxwa-shape-dm {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(159, 180, 212, 0.16);
}
.pdxwa-shape-dm-hd {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #7596c0;
  margin-bottom: 0.35rem;
}
.pdxwa-shape-dm-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.pdxwa-shape-dm-ring { position: relative; flex-shrink: 0; display: block; line-height: 0; }
.pdxwa-shape-dm-v {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  /* Capped well under the shape heading's optical weight and under the 1.4rem
     the primary ring used, so the demotion is legible without reading the DOM. */
  font-size: 0.92rem;
  line-height: 1;
}
.pdxwa-shape-dm-txt { min-width: 0; }
.pdxwa-shape-dm-lb,
.pdxwa-shape-dm-sub {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.pdxwa-shape-dm-lb { font-size: 0.66rem; color: #b9cae3; }
.pdxwa-shape-dm-sub { font-size: 0.58rem; color: #7596c0; }
.pdxwa-shape-dm-gap {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #b9cae3;
  overflow-wrap: break-word;
}
.pdxwa-shape-dm-note,
.pdxwa-shape-wall {
  margin: 0.4rem 0 0;
  font-size: 0.66rem;
  line-height: 1.5;
  color: #6f88ac;
  overflow-wrap: break-word;
}
.pdxwa-shape-wall { margin-top: 0.65rem; }

/* ── The first-byte record, printed as the record it is ────────────────────── */
/* The rows the edge wrote into this document's header, mounted inside the brief
   while the roll-call engine is still arriving — briefSeedHtml() in
   word-action.js, and see the wall over it for the four things it refuses to
   dress them as. They reuse the brief's own row furniture (.pdxwa-shape-row,
   -iss, -bar, -n) because they carry the brief's own three facts; the ONE new
   thing is the pattern label, and it is deliberately NOT .pdxst-pat. That chip is
   the characterisation engine's claim, painted from its green/red/amber tone
   table, and a row the engine has not read yet must not borrow its colours: a
   reader who learns "amber means ran both ways" would be reading a verdict off a
   line that is only a repetition. House grey, uppercase, quiet — the same weight
   as the tally beside it. */
.pdxwa-seed-pat {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c3d4ec;
  white-space: nowrap;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* Where the rows came from, and that they are about to be replaced. Sized and
   coloured as the brief's other disclosures (.pdxwa-shape-wall), because it is
   one: the rows above it are real and provisional at the same time, and the only
   dishonest version of this block is the one that does not say so. */
.pdxwa-seed-note {
  margin: 0.5rem 0 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #7596c0;
  overflow-wrap: break-word;
}

/* ── ✒️ The SAID brief — word first, where the formal lane is empty ──────────
   THE BLOCK. On a file with no readable formal act and at least one cited
   position, the identity zone leads with what they said. See the wall over
   saidBriefHtml() in word-action.js for the rule and its four refusals; what
   this stylesheet has to hold up is one of them.

   IT REUSES THE BRIEF'S FURNITURE ON PURPOSE. .pdxwa-shape-row, -door, -lbl,
   -go, -bar, -list, -more, -all, the issue colour rail and the two siblings
   outside the door are all the record brief's, unchanged, because the whole
   point is that these rows are the SAME VISUAL SYSTEM as Strongest patterns and
   Ran both ways one rung up. A second row treatment for the word lane would
   read as a second, lesser kind of row — which is exactly the demotion this
   pass exists to undo.

   THE ONE NEW THING IS THE SIDE WORD, and it is deliberately NOT .pdxst-pat.
   That chip is the characterisation engine's own claim, painted from its
   green/red/amber tone table, and this row has not been characterised by
   anything: a reader who has learned that green means "the record ran this way"
   would be reading a verdict off a sentence that is only a quotation. So it
   takes .pdxwa-seed-pat's treatment — house grey, uppercase, quiet, the same
   weight as the tally it sits where — for the same reason that block does, and
   Supports / Opposes / Mixed all render identically. The direction is a word,
   not a colour. */
.pdxwa-said-pat {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c3d4ec;
  white-space: nowrap;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
/* WHICH LANE THIS ROW IS IN, IN ONE WORD. It reads SAID and it can never read
   RECORD or PATTERN — the letterhead writes the literal and there is no tone
   table behind it. Quieter than the side word beside it, because it is a label
   for the row's lane and not a fact about the issue: it says where the sentence
   came from, the way a byline does. */
.pdxwa-said-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7596c0;
  white-space: nowrap;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(159, 180, 212, 0.2);
}
/* The eyebrow. The record brief's own heading type — same family, size,
   tracking, colour and spacing — because it occupies the same slot and a louder
   one would stage the word lane as the more important of the two rather than as
   the one this file happens to hold. It is longer than "The formal record", so
   it is allowed to wrap rather than being nowrap'd into an ellipsis: the clause
   after the dash is the half that says the record is not missing. */
.pdxwa-said-hd {
  white-space: normal;
  overflow-wrap: break-word;
}
/* The honest line, under the rows and above the route out. Sized and coloured as
   the brief's other disclosures (.pdxwa-shape-wall, .pdxwa-seed-note), because
   it is one — and with no rule, no fill and no badge, for the reason the empty
   brief has none: an absence must not be dressed as a finding. */
.pdxwa-said-note {
  margin: 0.5rem 0 0.6rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #7596c0;
  overflow-wrap: break-word;
}
/* The route out is .pdxwa-shape-all, unchanged — same size, same tap target,
   same quiet chrome as "Explore all N issues by topic". The extra class exists
   so this destination can be found from a test and a stylesheet without
   scraping the label, and it adds nothing to the paint. */
.pdxwa-said-all { margin-bottom: 0; }

/* 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. */

/* ── What the percentage means, and what it does not claim ────────────────── */
/* Full width, directly under the number, above everything else on the card. The
   placement is the whole point: this text exists for the reader who never opens
   a drawer, and that reader is exactly the one who reads a large green figure as
   a report card. Sized between the number and the body copy — big enough that it
   is not read as a footnote, small enough that it never competes with the numeral
   it qualifies. */
.pdxwa-means {
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid rgba(159, 219, 208, 0.45);
  border-radius: 0 0.5rem 0.5rem 0;
  background: rgba(10, 15, 30, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.pdxwa-means-k {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5f7ea8;
}
.pdxwa-means-v {
  font-size: 0.74rem;
  line-height: 1.5;
  color: #cfdcf0;
}
/* The non-claim on its own line, dimmer than the claim above it. Dimmer, not
   hidden: it is the sentence that stops three wrong readings, and a reader who
   skims the first line and stops should still catch its shape. */
.pdxwa-means-not {
  display: block;
  margin-top: 0.22rem;
  color: #8fa8c8;
}

/* ── The shape behind the average ─────────────────────────────────────────── */
/* A mean cannot say whether it came from a record that agrees with itself
   everywhere or one pulling apart. This strip says it in counts — never in a
   second percentage, which a reader would subtract from the first. */
.pdxwa-comp {
  margin-top: 0.6rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(120, 150, 190, 0.2);
  border-radius: 0.55rem;
  background: rgba(10, 15, 30, 0.4);
}
.pdxwa-comp-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a9c2e2;
}
.pdxwa-comp-sub {
  margin-left: auto;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: #6f88ab;
}
/* Segments are sized by flex-grow off the counts, so the bar is drawn from the
   same integers printed beneath it and cannot drift from them. No fixed height
   anywhere in this file — the rule is em-based so it scales with the reader's
   text size rather than pinning a pixel row.
   Each segment is now a button into its bucket's list. The bar itself stays out
   of the accessibility tree: the counts below are the same four controls, named
   and reachable by keyboard, so exposing both would make a reader tab through
   the same four destinations twice. */
.pdxwa-comp-bar {
  display: flex;
  gap: 2px;
  margin: 0.4rem 0 0.35rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
/* THE BAR IS A ROW OF BUTTONS, SO IT IS SIZED LIKE ONE. It used to be drawn at
   0.3rem of vertical padding — about ten device pixels — which is a fine
   hairline chart and an unhittable control. A thumb aiming at the middle of a
   10px band misses it more often than not, and the miss is silent: nothing
   moves, so the strip reads as decoration and the reader stops trying. The
   phone therefore gets a full 44px band, which is both the platform minimum
   and, at this width, a better picture of the proportions than the hairline
   was. Wider screens slim it back down (see the min-width query) because a
   mouse does not need the band and the desktop card has less room to spend. */
.pdxwa-comp-seg {
  display: block;
  min-width: 1.5rem;        /* a one-issue slice still has to be hittable */
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  padding: 0;               /* no inline padding, or a button's default side
                               padding would widen every slice off its own count */
  border: 0;
  font: inherit;
  opacity: 0.72;
  cursor: pointer;
  touch-action: manipulation;   /* no 300ms double-tap-zoom delay on the graph */
  transition: opacity 0.15s ease;
}
.pdxwa-comp-seg:hover { opacity: 0.95; }
/* The open bucket's slice, lit. This is the only thing in the picture that says
   which list is below it, so it is a brightness difference rather than a border
   a 6px-tall slice could not show. */
.pdxwa-comp-seg.is-on { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.pdxwa-comp-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.2rem;
}
.pdxwa-comp-i {
  display: flex;
  min-width: 0;
}
/* Zero is listed, not hidden — see .pdxwa-oc-tab.is-zero. Dimmed so the legend
   still reads as a picture of what IS on file, and still tappable, because the
   list behind a zero says "none" and that is an answer. */
.pdxwa-comp-i.is-zero { opacity: 0.6; }
.pdxwa-comp-i.is-zero:focus-within,
.pdxwa-comp-i.is-zero:hover { opacity: 1; }
/* THE COUNT IS THE DOOR. Each total is a real button with a real tap target —
   the strip stopped being a picture of the record the moment it became the way
   into it. */
.pdxwa-comp-b {
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  padding: 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pdxwa-comp-b:hover,
.pdxwa-comp-b:focus-visible {
  background: color-mix(in srgb, var(--pdxwa-col, #9fb4d4) 14%, transparent);
  border-color: color-mix(in srgb, var(--pdxwa-col, #9fb4d4) 45%, transparent);
}
.pdxwa-comp-b.is-on {
  background: color-mix(in srgb, var(--pdxwa-col, #9fb4d4) 18%, transparent);
  border-color: var(--pdxwa-col, #9fb4d4);
}
.pdxwa-comp-b.is-on .pdxwa-comp-lbl { color: #eaf2ff; }
/* Without color-mix() the selected count keeps its border and loses only the
   tint — which state is open is still legible. */
@supports not (background: color-mix(in srgb, #000 14%, transparent)) {
  .pdxwa-comp-b:hover,
  .pdxwa-comp-b:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: rgba(159, 180, 212, 0.5); }
  .pdxwa-comp-b.is-on { background: rgba(255, 255, 255, 0.09); }
}
.pdxwa-comp-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  color: var(--pdxwa-col, #9fb4d4);
}
.pdxwa-comp-i.is-zero .pdxwa-comp-n { color: #7f97b8; }
.pdxwa-comp-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fa8c8;
}
/* The instruction, once, under the controls it describes. Quiet: a reader who
   has already tapped one does not need it repeated at finding weight. */
.pdxwa-comp-hint {
  margin: 0.3rem 0 0;
  font-size: 0.62rem;
  line-height: 1.45;
  color: #6f88ab;
}
.pdxwa-comp-note {
  margin: 0.4rem 0 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #9db6d6;
}
/* The clarifier that stops the strip and the percentage looking like an
   arithmetic error. Quieter than the finding above it, and never hidden. */
.pdxwa-comp-fine { color: #6f88ab; font-size: 0.64rem; }

/* ── What the shape means, AFTER the list it describes ────────────────────── */
/* These two paragraphs used to close the strip. On a phone that put roughly
   four lines of prose between a control and the list it opens, so a tap moved
   a destination the reader could not see. They now render immediately below
   the index: the same words, read by someone who has already arrived. */
.pdxwa-shapenote {
  margin-top: 0.55rem;
  padding-left: 0.6rem;
  border-left: 2px solid rgba(120, 150, 190, 0.28);
}
.pdxwa-shapenote .pdxwa-comp-note:first-child { margin-top: 0; }

/* ── The formal tally, beside the headline number ─────────────────────────── */
/* The same four integers as the bar, printed where the percentage is, because
   the percentage alone cannot say whether it came from a record that agrees
   with itself. This is NOT a second score: there is no percentage in it, no
   total is blended, and the public lane contributes nothing — it is the shape
   of the private record, stated as counts, with each count a door into that
   bucket's list below. */
.pdxwa-tally { margin-top: 0.55rem; }
.pdxwa-tally-k {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f88ab;
}
.pdxwa-tally-l {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.pdxwa-tally-i { display: flex; min-width: 0; flex: 1 1 6.5rem; }
/* Zero is printed, not dropped — "nothing contradicted" is a finding, and the
   list behind it says so in words. */
.pdxwa-tally-i.is-zero { opacity: 0.62; }
.pdxwa-tally-i.is-zero:hover,
.pdxwa-tally-i.is-zero:focus-within { opacity: 1; }
.pdxwa-tally-b {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 0.35rem;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(120, 150, 190, 0.24);
  border-left: 3px solid var(--pdxwa-col, #9fb4d4);
  border-radius: 0.45rem;
  background: rgba(10, 15, 30, 0.4);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pdxwa-tally-b:hover,
.pdxwa-tally-b:focus-visible {
  background: color-mix(in srgb, var(--pdxwa-col, #9fb4d4) 14%, transparent);
}
.pdxwa-tally-b.is-on {
  background: color-mix(in srgb, var(--pdxwa-col, #9fb4d4) 20%, transparent);
  border-color: var(--pdxwa-col, #9fb4d4);
}
@supports not (background: color-mix(in srgb, #000 14%, transparent)) {
  .pdxwa-tally-b:hover,
  .pdxwa-tally-b:focus-visible { background: rgba(255, 255, 255, 0.06); }
  .pdxwa-tally-b.is-on { background: rgba(255, 255, 255, 0.1); border-color: var(--pdxwa-col, #9fb4d4); }
}
.pdxwa-tally-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--pdxwa-col, #9fb4d4);
}
.pdxwa-tally-i.is-zero .pdxwa-tally-n { color: #7f97b8; }
.pdxwa-tally-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fa8c8;
  overflow-wrap: break-word;
  min-width: 0;
}
.pdxwa-tally-b.is-on .pdxwa-tally-lbl { color: #eaf2ff; }

/* ── The same tally, mounted in the letterhead ────────────────────────────── */
/* The block above sits inside §1, under the section's own headline. This is the
   copy that sits in the page header, directly beneath the photo / name / ring
   letterhead, so the shape reaches the reader at the same glance as the score on
   BOTH layouts rather than only on the phone (where §1 is the next screen).

   It is a full-width sibling of .profile-hero, not a child of it: the letterhead
   is a flex row on a desktop and a two-column grid with a full-width score row
   on a phone, and a fourth child would be crushed beside the ring on one and
   orphaned on the other. As a strip under the block, both layouts get the same
   thing and the counts keep their 44px targets on the narrow one.

   Every rule here is layout. The counts, colours, states and tap targets are the
   shared .pdxwa-tally-* component above, which is the visual half of the same
   guarantee the renderer makes: one builder, one set of numbers. */
.pdxwa-htally-host { margin: -0.95rem 0 1.2rem; }
/* No shape yet — no rule, no padding, no gap. The host is emitted empty on a
   cold record so the warm repaint has somewhere to land; until then it must not
   occupy a single pixel of the header. */
.pdxwa-htally-host:empty { display: none; margin: 0; }
.pdxwa-htally {
  margin-top: 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(120, 150, 190, 0.18);
}

/* The other lane, one line, counts only. It sits under the four formal counts
   and has to read as a different KIND of thing from them: no bucket colour, no
   button chrome, no tap affordance, and the boundary tag carried in the line
   rather than left to a tooltip. See headerPublicHtml() in word-action.js for
   the four rules it renders under. */
.pdxwa-hpub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  margin: 0.45rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(120, 150, 190, 0.16);
  font-size: 0.7rem;
  line-height: 1.45;
  color: #93a9c8;
}
.pdxwa-hpub-k {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f88ab;
}
.pdxwa-hpub-v { color: #c3d4ea; }
/* Quieter than the counts it qualifies, and never coloured: a tag that read as a
   verdict would be doing the exact thing it exists to deny. */
.pdxwa-hpub-tag {
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: #7f97b8;
  border: 1px solid rgba(120, 150, 190, 0.22);
  border-radius: 0.3rem;
  padding: 0.05rem 0.32rem;
  white-space: nowrap;
}

/* ── The tail of the header stack: how much record, over what span ──────────── */
/* Two lines under the four counts, closing the summary the letterhead makes: the
   ring is the figure, the tally is the shape it came out of, and this is the size
   of the file behind both plus the span it covers. See headerStackHtml() in
   word-action.js for what each line is allowed to say.

   EVERYTHING HERE IS QUIETER THAN THE COUNTS ABOVE IT, deliberately. These lines
   are context on a figure, not findings of their own: no colour keyed to a value,
   no numeral set larger than the surrounding words, no panel of their own to make
   them look like a second block. They are also display-only — no tap target, no
   hover state, nothing that offers a trip the four counts above do not already
   offer — so a reader's eye passes over them on the way to the shape.

   Same host discipline as the tally: emitted on every profile so the warm repaint
   has somewhere to land, and worth zero pixels until it holds something. */
.pdxwa-hstack-host { margin: -0.9rem 0 1.2rem; }
.pdxwa-hstack-host:empty { display: none; margin: 0; }

/* ── The letterhead chip ───────────────────────────────────────────────────
   The compact form of this score, mounted among the status pills in the identity
   block (.profile-meta in app.css). It deliberately borrows its metrics from
   .profile-status-monitoring next to it rather than from anything in this file:
   a chip that out-weighed the badges around it would be a second headline beside
   a name, and the ring above is already the headline. The only concession to
   emphasis is the numeral, one step larger and carrying the verdict colour, so
   the figure is legible at a glance without the chip itself shouting.

   It is a button because it goes somewhere — down to ⚖️ Word vs Action. The
   coarse-pointer rule gives it a real thumb target without changing how it reads
   sideways.

   The host is emitted on every profile, warm or cold, so the figure has somewhere
   to arrive when the roll-call record lands. Empty, it must be worth nothing at
   all — .profile-meta is a flex row with a gap, and an empty inline box there is a
   visible hole between two badges. */
.pdxwa-cbadge-host { display: contents; }
.pdxwa-cbadge-host:empty { display: none; }
.pdxwa-cbadge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 0.16rem 0.55rem;
  background: rgba(159, 180, 212, 0.1);
  border: 1px solid rgba(159, 180, 212, 0.3);
  color: #9fb4d4;
  line-height: 1.15; white-space: nowrap; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pdxwa-cbadge:hover {
  background: rgba(159, 180, 212, 0.18);
  border-color: rgba(159, 180, 212, 0.5);
}
.pdxwa-cbadge:focus-visible { outline: 2px solid rgba(96, 165, 250, 0.8); outline-offset: 2px; }
.pdxwa-cbadge-pct { font-size: 0.74rem; letter-spacing: 0.02em; }
.pdxwa-cbadge-sep { opacity: 0.45; }
/* The denominator that travels with the figure. Quieter than the verdict word it
   sits beside and much quieter than the numeral, because it is what SIZES the
   percentage rather than a second finding about it. */
.pdxwa-cbadge-den { opacity: 0.72; font-weight: 600; letter-spacing: 0.05em; }
@media (hover: none), (pointer: coarse) {
  .pdxwa-cbadge { min-height: 1.9rem; padding: 0.22rem 0.6rem; }
}
.pdxwa-hstack {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(120, 150, 190, 0.14);
}
/* The volume line. Icon in its own column so a wrapped sentence stays aligned
   under itself rather than running back under the glyph. */
.pdxwa-hdepth {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: #a9bfdd;
}
.pdxwa-hdepth-ico { flex-shrink: 0; }
.pdxwa-hdepth-t { min-width: 0; }
/* The scope note, tied to the figure above it by the same glyph the card's slice
   strip uses. It carries no number, so it is set a step quieter again. */
.pdxwa-hscope {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.2rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.64rem;
  line-height: 1.35;
  color: #8298b8;
}
.pdxwa-hscope-tie { flex-shrink: 0; color: #6f88ab; }
.pdxwa-hscope-t { min-width: 0; }

/* ── Friction: contested standing, thin evidence ──────────────────────────── */
/* The spine keeps the ISSUE's colour — that vocabulary is load-bearing across
   the whole card and recolouring it here would break the one thing it promises.
   What changes is the stroke. A row whose supporting action is blocked, struck
   down, overridden or under an unresolved challenge is drawn dotted; a row
   resting on a single sourced item is drawn dashed. Scanning a stack, the
   unbroken lines are the unbroken records. */
.pdxwa-row-x { border-left-style: dotted; }
.pdxwa-row-thin { border-left-style: dashed; }
.pdxwa-row-x.pdxwa-row-thin { border-left-style: dotted; }
.pdxwa-row-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: -0.1rem 0 0.3rem;
}
.pdxwa-row-flag,
.pdxwa-oc-flag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.1rem 0.34rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
/* Amber, the tint this card already uses for set-aside counter-evidence, and
   a warmer stroke for contested standing. Neither competes with the verdict
   palette: these are qualifications on a verdict, not verdicts. */
.pdxwa-row-flag-thin,
.pdxwa-oc-flag-thin { color: #d8bd85; }
.pdxwa-row-flag-x,
.pdxwa-oc-flag-x { color: #e3a08a; }
/* ONE DOCUMENT UNDER THE FINDING. Same amber as the thin chip, because it is the
   same KIND of statement — a limit on how much is under a verdict, not a change to
   the verdict — and because it stands in for that chip wherever both would apply.
   It is deliberately not dimmed relative to it: the rows this appears on are the
   ones whose item count makes them look deepest, and a marker a reader's eye skips
   is the same as no marker. */
.pdxwa-row-flag-one,
.pdxwa-oc-flag-one { color: #d8bd85; }
/* Axis B in words, on the row it qualifies. Tinted like the counter line for
   the same reason: disclosure on the row, never a second verdict. */
.pdxwa-row-standing .pdxwa-row-v { color: #e3a08a; }
/* One-line scale, inside the outcome groups. The flag sits after the meta so a
   long issue label wraps before the qualification does. The stroke change is
   scoped to rows that actually carry an issue spine — an unresolved key has no
   border to restyle, and there the chip is the whole signal. */
.pdxwa-oc-flag { margin-left: 0.34rem; }
.pdxwa-oc-row.pdxwa-ic.pdxwa-oc-row-x { border-left-style: dotted; }
.pdxwa-oc-row.pdxwa-ic.pdxwa-oc-row-thin { border-left-style: dashed; }
.pdxwa-oc-row.pdxwa-ic.pdxwa-oc-row-x.pdxwa-oc-row-thin { border-left-style: dotted; }

/* ── Wider screens ──────────────────────────────────────────────────────── */
@media (min-width: 620px) {
  .pdxwa-num { min-width: 6rem; }
  .pdxwa-num-v { font-size: 2.5rem; }
  .pdxwa-num-scope { font-size: 0.52rem; }
  .pdxwa-num-n { font-size: 0.55rem; }
  .pdxwa-verdict { font-size: 1.45rem; }
  .pdxwa-line { font-size: 0.78rem; }
  /* Room to breathe, not a size jump: the phone already reads this strip at a
     legible size, so the wide layout gains padding and a little leading rather
     than a bigger figure the small screen went without. */
  .pdxwa-slice { padding: 0.5rem 0.65rem 0.55rem 0.7rem; }
  .pdxwa-slice-n { font-size: 0.72rem; }
  .pdxwa-slice-note { font-size: 0.7rem; }
  .pdxwa-tier { grid-template-columns: 1.7rem 1fr auto; padding: 0.6rem 0.75rem; }
  /* The public tally, given room rather than a size jump. On a phone the counts
     take their own line so the lane key and the disclosure tag are not squeezed
     into two words each; with width to spare all three sit on one line, which is
     the compact shape this treatment was drawn for. */
  .pdxwa-oc-pub { font-size: 0.68rem; padding: 0.24rem 0.35rem 0.24rem 0.45rem; }
  .pdxwa-oc-pub-t { flex: 1 1 auto; }
  .pdxwa-oc-pub-tag { font-size: 0.58rem; }
  .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; }
  /* THE INDEX, WIDE. Width buys a calmer read, not more lists. This used to
     become a two-column board of four panels, which made a reader compare
     columns to find one issue and turned the selected chip into a hint rather
     than a filter. The wide layout now shows the same single focused list the
     phone shows — capped to a reading measure so a 1400px window does not
     stretch one issue title across the whole screen — and spends the extra room
     on alignment instead: the result cue in a column of its own, so a stack of
     rows reads down the verdicts as cleanly as it reads across one row. */
  .pdxwa-oc-panels { display: block; max-width: 46rem; }
  .pdxwa-oc-grp { margin-bottom: 0; }
  .pdxwa-oc-grp.is-on {
    border-left-width: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 62%);
  }
  /* Flat mode still stacks, and each bucket keeps a gap so the four lists do
     not read as one long list with headings in it. */
  .pdxwa-oc.is-flat .pdxwa-oc-grp { margin-bottom: 0.7rem; }
  .pdxwa-oc-row { flex-wrap: nowrap; gap: 0 0.6rem; }
  /* The issue spine, back to a hairline. See the base rule for why the phone
     gets the louder one. */
  .pdxwa-oc-row.pdxwa-ic {
    border-left-width: 3px;
    padding-left: 0.45rem;
    background: linear-gradient(90deg, var(--pdx-ic-wash, transparent), transparent 58%);
  }
  /* The result column, wide. The group is what gets the width now, not the cue
     alone — otherwise the word aligns down the stack and the figure beside it
     does not, which is worse than no column at all. */
  .pdxwa-oc-res { min-width: 8.4rem; justify-content: flex-end; }
  .pdxwa-oc-cue { min-width: 5.6rem; text-align: center; }
  .pdxwa-oc-tab { flex: 0 1 auto; min-height: 2.4rem; }
  /* The strip is the navigator on desktop too, so its counts stay full-size tap
     targets and gain the room to sit on one line. */
  .pdxwa-comp-l { gap: 0.15rem 0.35rem; }
  /* The bar goes back to a band. A mouse hits a 14px slice without trouble, and
     the desktop card would rather spend the other 30px on the list. */
  .pdxwa-comp-seg { min-height: 0.9rem; min-width: 0.6rem; }
  .pdxwa-comp-bar { border-radius: 999px; }
  /* The counts sit on one row beside the number rather than in a block. */
  .pdxwa-tally-i { flex: 0 1 auto; }
  .pdxwa-tally-n { font-size: 1.1rem; }
  /* The letterhead copy has the whole modal width to work with and one job —
     being read at a glance — so its counts divide that width evenly rather than
     shrink-wrapping their labels and leaving a ragged tail.

     THE BASIS IS NOT ZERO. At `flex: 1 1 0` five buckets each got a fifth of a
     phone-width modal, which is narrower than the word "Contradicted" and put
     every label on two or three lines. A real basis lets the row break into two
     tidy lines instead of five squeezed columns, and still divides evenly
     whenever the width is there. */
  .pdxwa-htally .pdxwa-tally-i { flex: 1 1 4.2rem; }
  /* The stack's tail gains leading, not size: it is context on the figure above
     and has to stay quieter than the counts it follows on every layout. */
  .pdxwa-hdepth { font-size: 0.72rem; }
  .pdxwa-hscope { 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.

   That panel is no longer drawn here. It is drawn one level up, on
   .profile-hero-score in app.css, so the eyebrow that names the score and the
   summary rows mounted after the letterhead can sit inside the same card as the
   ring instead of beside an empty half of it. All this file still owns is the
   placement of the hero's own children inside that card, which is why the hero
   box itself becomes `display: contents`: the ring, its denominator line and
   the tracking states are promoted into the card's grid as direct items. Row 3
   is still declared — the tracking/pending sentences 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: contents;
  }
  /* …except the shape hero, which is not a ring with a caption beside it — it is
     one block that wants the whole card. Promoting its children into the card's
     two-column grid would deal the depth line, the pattern rows and the demoted
     ring into separate cells. One grid item, full width. */
  .profile-hero-score .pdxwa-hero.is-shape {
    display: block;
  }
  /* 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 the eyebrow and the denominator beside it. */
  .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;
    align-self: center;
  }
  /* Row 2 of column 2, directly under the eyebrow the card is titled with. */
  .profile-hero-score .pdxwa-hero > .pdxwa-hero-sub,
  .profile-hero-score .pdxwa-hero > .profile-score-denom {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    max-width: none;
    min-height: 0;
    text-align: left;
    align-self: start;
  }
  .profile-hero-score .pdxwa-hero > .profile-score-pending,
  .profile-hero-score .pdxwa-hero > .profile-score-track-note {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0.15rem 0 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; }
}