/* ===========================================================================
   profile-spine.css — the reading order of a politician profile, made visible.

   Loaded non-blocking (media="print" onload="this.media='all'") because the
   profile modal is never the first paint: six blocking stylesheets is the
   budget the index test enforces, and this file is only needed once a profile
   is opened.

   Three things live here and nothing else:

     1. .pdxsp-rail   — the numbered stage marker. It states the question the
                        stage answers, so a reader scrolling on a phone always
                        knows which of the seven questions they are inside.
     2. .pdxsp-dw     — the full-record drawers, plus the .dd-free modifier that
                        lifts app.css's 2400px max-height cap. That cap is right
                        for a short deep-dive and silently clips a full voting
                        record, which is a worse failure than no drawer at all.
     3. .pdxbr        — the brief: the first screen under the letterhead.
     4. .pdxfpi-flat  — the one closed control the flat formal list lives behind,
                        under the topic tree. The tree is the index; this is its
                        alternate view, and it is chrome-sized until it is opened.

   Mobile-first throughout: the base rules ARE the phone layout, and the only
   media query widens things for tablets and up. Every interactive element is
   sized for a thumb at the narrowest width, and nothing here animates height
   on a container that can hold thousands of pixels of record.
   =========================================================================== */

/* ── Stage rails ──────────────────────────────────────────────────────────── */

/* The rail is a label, not a control — it carries no tap target and no shadow,
   so it reads as a divider the eye can skip once it has been learned. */
.pdxsp-rail {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin: 1.6rem 0 0.7rem;
  padding: 0 0 0.45rem;
  border-bottom: 1px solid rgba(245, 200, 66, 0.16);
  scroll-margin-top: 4.5rem;
}

.pdxsp-rail-n {
  flex-shrink: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #0a0f1e;
  background: rgba(245, 200, 66, 0.85);
  border-radius: 999px;
  min-width: 1.15rem;
  padding: 0.15rem 0.35rem;
  text-align: center;
}

.pdxsp-rail-lbl {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #f5c842;
  line-height: 1.15;
}

/* The question is the point of the rail. On a phone it drops to its own line
   rather than truncating — a half-shown question is worse than a wrapped one. */
.pdxsp-rail-ask {
  flex: 1 1 100%;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #7596c0;
  line-height: 1.35;
  margin-top: 0.1rem;
}

/* A stage is a grouping box only. It deliberately has no background: the
   sections inside already carry their own surfaces, and nesting a panel in a
   panel is how the old profile started to read as visual noise. */
.pdxsp-stage { display: block; }

/* ── Full-record drawers ──────────────────────────────────────────────────── */

/* Lifts app.css's `.dd-body.dd-open { max-height: 2400px }` cap for content
   whose height is unbounded, and drops the transition with it. Animating a
   multi-thousand-pixel reveal on a phone is exactly the kind of long layout
   animation the stability pass removed elsewhere, so the reveal is instant. */
.dd-body.dd-free { transition: none; }
.dd-body.dd-free.dd-open { max-height: none; overflow: visible; }

.modal-section.pdxsp-dw { margin-bottom: 0.7rem; }

/* A slightly heavier lid than an ordinary deep-dive toggle, because these are
   the "show me everything" doors and should read as the end of the profile
   rather than as more sections. */
.pdxsp-dw-btn {
  border-color: rgba(159, 180, 212, 0.22) !important;
  min-height: 3rem;
}

.pdxsp-dw-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
  text-align: left;
}

.pdxsp-dw-ico { font-size: 0.95rem; line-height: 1; flex-shrink: 0; }

.pdxsp-dw-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.07em;
  color: #cbd9ec;
  line-height: 1.2;
}

.pdxsp-dw-meta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7596c0;
  background: rgba(159, 180, 212, 0.12);
  border: 1px solid rgba(159, 180, 212, 0.2);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

/* Says what is inside before the reader commits to opening it. */
.pdxsp-dw-sub {
  font-size: 0.72rem;
  line-height: 1.55;
  color: #7596c0;
  margin: 0 0 0.75rem;
}

.pdxsp-dw-inner { padding: 0.85rem 0.7rem 0.4rem; }

/* ── The brief ────────────────────────────────────────────────────────────── */

.pdxbr {
  display: block;
  background: linear-gradient(160deg, rgba(245, 200, 66, 0.06), rgba(10, 15, 30, 0.55));
  border: 1px solid rgba(245, 200, 66, 0.2);
  border-radius: 0.9rem;
  padding: 0.9rem 0.8rem;
  margin: 0 0 1.25rem;
}

/* One column on a phone: two 160px columns side by side would truncate both
   the issue labels and the tension headline, which are the two things the
   first screen exists to state.
   Closed, each column is now one row (see .pdxbr-fold), so the gap between them
   is a row gap rather than a block gap. */
.pdxbr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

/* ── The brief's two blocks, folded ───────────────────────────────────────── */
/* Both used to render open above the Word-vs-Action graph: three issue buttons
   with a sentence of rationale each, and a tension card with a badge, headline,
   paragraph and control. Closed, each is a labelled row with a gist — enough to
   know whether it is worth the screen — and one tap opens it. See fold() in
   profile-spine.js for why the gist can only ever repeat the body. */
.pdxbr-fold {
  border: 1px solid rgba(245, 200, 66, 0.16);
  border-radius: 0.6rem;
  background: rgba(10, 15, 30, 0.32);
}
.pdxbr-fold-s {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  min-height: 2.75rem;      /* ≥44px tap target on mobile */
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  list-style: none;
}
.pdxbr-fold-s::-webkit-details-marker { display: none; }
.pdxbr-fold-s .pdxbr-col-lbl { margin-bottom: 0; flex: 0 0 auto; }
/* The gist: the same words the body prints, at chip length. It wraps rather
   than truncating — three issue labels on a narrow phone is two lines, and two
   legible lines beat one clipped one. */
.pdxbr-fold-g {
  flex: 1 1 8rem;
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #cbd9ec;
  overflow-wrap: break-word;
}
/* The affordance, drawn here because display:flex on a <summary> drops the
   browser's own triangle in some engines and keeps it in others. */
.pdxbr-fold-x {
  flex: 0 0 auto;
  margin-left: auto;
  width: 0.7rem;
  color: #9a8a55;
  font-size: 0.7rem;
  line-height: 1;
}
.pdxbr-fold-x::before { content: '▸'; }
.pdxbr-fold[open] .pdxbr-fold-x::before { content: '▾'; }
.pdxbr-fold-s:hover .pdxbr-fold-g,
.pdxbr-fold-s:focus-visible .pdxbr-fold-g { color: #f5e7b8; }
.pdxbr-fold[open] > .pdxbr-fold-s .pdxbr-fold-g { display: none; }
.pdxbr-fold > .pdxbr-col { padding: 0 0.6rem 0.6rem; }

.pdxbr-col { min-width: 0; }

.pdxbr-col-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a8a55;
  margin-bottom: 0.45rem;
}

/* Signature issues. Each is a tap into that issue's own view, so each is a
   real button at a thumb-sized height even when its label is one short word. */
.pdxbr-sigs { display: flex; flex-direction: column; gap: 0.4rem; }

.pdxbr-sig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  min-height: 2.75rem;
  text-align: left;
  cursor: pointer;
  background: rgba(10, 15, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(245, 200, 66, 0.55);
  border-radius: 0.6rem;
  padding: 0.5rem 0.6rem;
  transition: border-color 0.18s, background 0.18s;
}

.pdxbr-sig:hover,
.pdxbr-sig:focus-visible {
  border-color: rgba(245, 200, 66, 0.4);
  background: rgba(245, 200, 66, 0.07);
}

.pdxbr-sig-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1.25;
}

.pdxbr-sig-why {
  font-size: 0.66rem;
  line-height: 1.4;
  color: #7596c0;
}

.pdxbr-none {
  font-size: 0.72rem;
  line-height: 1.55;
  color: #7596c0;
  margin: 0;
}

/* WHY THIS FILE IS EMPTY. Deliberately the quietest block in the brief stage:
   slate, no accent colour, no icon, no chip. It is a statement about PolitiDex's
   own coverage, and anything louder would read as a finding about the person —
   which is the exact misreading it exists to prevent. */
.pdxsp-emptywhy {
  background: rgba(10, 15, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(148, 163, 184, 0.45);
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  margin: 0 0 1rem;
}

.pdxsp-emptywhy-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #7596c0;
  margin-bottom: 0.25rem;
}

.pdxsp-emptywhy-p {
  font-size: 0.76rem;
  line-height: 1.55;
  color: #cbd9ec;
  margin: 0;
}

.pdxsp-emptywhy-p b {
  color: #dbe6f7;
}

.pdxsp-emptywhy-foot {
  font-size: 0.68rem;
  line-height: 1.5;
  color: #7596c0;
  margin: 0.4rem 0 0;
}

/* The tension card. Colour carries the KIND of tension, never a judgement of
   the person: amber for a scored gap between the two feeds, red for a flagged
   flashpoint, slate for "nothing contradicts itself", which is a finding and
   is styled as calmly as it reads. */
.pdxbr-tension {
  background: rgba(10, 15, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(159, 180, 212, 0.5);
  border-radius: 0.65rem;
  padding: 0.6rem 0.7rem;
}

.pdxbr-tension-gap { border-left-color: rgba(245, 200, 66, 0.7); }
.pdxbr-tension-flag,
.pdxbr-tension-receipt { border-left-color: rgba(248, 113, 113, 0.7); }
.pdxbr-tension-clear { border-left-color: rgba(120, 140, 170, 0.55); }

.pdxbr-t-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.pdxbr-t-ico {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  color: #9fb4d4;
}

.pdxbr-t-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e3c97a;
  background: rgba(245, 200, 66, 0.12);
  border: 1px solid rgba(245, 200, 66, 0.34);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

.pdxbr-tension-clear .pdxbr-t-badge {
  color: #9fb4d4;
  background: rgba(120, 140, 170, 0.12);
  border-color: rgba(120, 140, 170, 0.34);
}

.pdxbr-t-issue {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #c4b5fd;
}

/* The issue named in the brief takes the ISSUE colour — the same one the row for
   it carries in Word vs Action further down the page, and the same one it has on a
   bill and on /issue/<key>. Chip strength here is the letterhead's: soft fill,
   full-strength border, ink text. `data-ic` is absent when the key did not resolve,
   so an uncategorised flashpoint keeps the neutral lilac label it always had. */
.pdxbr-t-issue[data-ic] {
  color: var(--pdx-ic-ink, #c4b5fd);
  background: var(--pdx-ic-soft, transparent);
  border: 1px solid var(--pdx-ic, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.pdxbr-t-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 0.3rem;
}

.pdxbr-t-line {
  font-size: 0.7rem;
  line-height: 1.55;
  color: #c7d4e8;
  margin: 0;
}

.pdxbr-t-act {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.5rem;
  margin-top: 0.5rem;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #f5c842;
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid rgba(245, 200, 66, 0.34);
  border-radius: 0.55rem;
  padding: 0.35rem 0.7rem;
}

.pdxbr-t-act:hover,
.pdxbr-t-act:focus-visible { background: rgba(245, 200, 66, 0.18); }

/* "Share or inspect next" — the one row that answers the fourth question of
   the first screen. The share control is share-anywhere.js's own, so nothing
   here restyles it beyond giving it the full width of the row. */
.pdxbr-next {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(245, 200, 66, 0.16);
}

.pdxbr-next-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a8a55;
  margin-bottom: 0.45rem;
}

.pdxbr-next-share { margin-bottom: 0.55rem; }

.pdxbr-jumps { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pdxbr-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.5rem;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fc6e8;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 0.55rem;
  padding: 0.35rem 0.65rem;
}

.pdxbr-jump:hover,
.pdxbr-jump:focus-visible { background: rgba(96, 165, 250, 0.2); }

/* ── Lids: progressive disclosure inside an always-open section ───────────── */

/* A lid is not a drawer. A drawer is a destination — a card you decide to enter.
   A lid is a fold in a section you are already reading, so it borrows the drawer
   plumbing (.dd-toggle-btn / .dd-body / .dd-inner, toggleDD, aria-expanded) and
   then undoes the card: no filled panel, no boxed inner, just a rule across the
   column with a label sitting on it. If these overrides ever fail to load, the
   worst outcome is a lid that looks like a drawer, which still opens. */

.pdxsp-lid { margin-top: 0.85rem; }

.pdxsp-lid-btn {
  justify-content: center;
  gap: 0.45rem;
  /* 44px, not 40. A lid is a full-width control a reader hits repeatedly while
     scanning, and 2.5rem left it a hair under every published minimum. */
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(30, 53, 96, 0.28);
  border: 1px dashed rgba(159, 180, 212, 0.28);
  border-radius: 0.6rem;
}

.pdxsp-lid-btn:hover,
.pdxsp-lid-btn:focus-visible {
  background: rgba(30, 53, 96, 0.5);
  border-color: rgba(159, 180, 212, 0.45);
}

/* The drawer rule squares off the bottom corners to weld the button to the card
   below it. There is no card below a lid, so keep it a standalone control. */
.pdxsp-lid-btn.dd-active {
  border-radius: 0.6rem;
  border-style: dashed;
  background: rgba(30, 53, 96, 0.45);
}

.pdxsp-lid-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9fc6e8;
  text-align: center;
}

.pdxsp-lid-inner {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  padding-top: 0.7rem;
}

/* ── Tablet and up ────────────────────────────────────────────────────────── */

@media (min-width: 641px) {
  /* The rail's question fits beside its label once there is room for it. */
  .pdxsp-rail-ask { flex: 0 1 auto; margin-top: 0; }
  .pdxsp-rail-ask::before { content: '— '; }

  /* Two columns: "what defines them" next to "where the tension is", which is
     how the two halves of the first screen are meant to be read together.
     Both still fold — a desktop first screen is not free either — but the two
     rows sit side by side rather than stacked. */
  .pdxbr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0.6rem; align-items: start; }
  .pdxbr { padding: 1.1rem 1.05rem; }
  .pdxsp-dw-inner { padding: 1rem 0.9rem 0.5rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pdxbr-sig,
  .pdxbr-t-act,
  .pdxbr-jump,
  .pdxsp-lid-btn { transition: none; }
}

/* ── The flat formal list, collapsed ─────────────────────────────────────────

   🌳 All Issues by Topic is the gateway: every leaf carries a RECORD pattern
   chip and opens the same dossier. The flat atlas — one row per issue on the
   formal record — used to mount OPEN above it, so a member with a deep ledger
   put fifty-odd rows between the summary at the top of the page and the surface
   built to be browsed. It is the same list; it is now one summary line until a
   reader asks for it.

   Sized as a control, not as a section: the whole closed cost is a 44px row.
   The disclosure is native <details>, so there is no state to re-arm and a
   screen reader announces it as one expandable thing. */

/* 🚂 THE PACKAGE ROLL-UP, WHEN IT RIDES ABOVE THE ATLAS RATHER THAN INSIDE IT.

   The index prints this line under its own lede; on the profile face the index
   is closed by default, so the face lifts the line out and prints it here. The
   two are one block — the note, then the list it is a note about — so the
   roll-up takes the section gap and the atlas beneath it takes almost none.
   Everything about how the line LOOKS is in consistency.js beside the row tag it
   aggregates; this only places it. */

.pdxvru-solo > .pdxvru { margin-top: 0; }
.pdxvru-solo + .pdxfpi-flat { margin-top: 0.5rem; padding-top: 0; border-top: none; }

.pdxfpi-flat {
  border: 1px solid rgba(159, 180, 212, 0.22);
  border-radius: 0.6rem;
  background: rgba(14, 24, 44, 0.45);
  padding: 0;
  overflow: hidden;
}

.pdxfpi-flat-s {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  min-height: 44px;
  padding: 0.72rem 0.85rem;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.pdxfpi-flat-s::-webkit-details-marker { display: none; }

.pdxfpi-flat-s:hover,
.pdxfpi-flat-s:focus-visible {
  background: rgba(30, 53, 96, 0.4);
}

.pdxfpi-flat-t {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9fc6e8;
}

/* The count is the reason to open it or leave it shut, so it is never truncated
   away on a narrow phone — it wraps onto its own line, below the label and the
   Show/Hide cue rather than between them. */
.pdxfpi-flat-n {
  order: 3;
  font-size: 0.68rem;
  color: #7f97b8;
  flex: 1 1 100%;
}

.pdxfpi-flat-s::after {
  content: 'Show';
  order: 2;
  margin-left: auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7fb4ff;
}

.pdxfpi-flat[open] > .pdxfpi-flat-s::after { content: 'Hide'; }

.pdxfpi-flat[open] > .pdxfpi-flat-s {
  border-bottom: 1px solid rgba(159, 180, 212, 0.18);
}

.pdxfpi-flat-b { padding: 0.85rem; }

@media (min-width: 641px) {
  .pdxfpi-flat-n { order: 1; flex: 0 1 auto; }
}