/* ─────────────────────────────────────────────────────────────────────────────
   district-voice.css — District Voice, on the seat file at /d/<seatKey>
   ─────────────────────────────────────────────────────────────────────────────
   One thing lives in here: the .pdxv* block painted by district-voice.js into the
   top half of the district file's scroller. The file's own panel, letterhead and
   issue-room list are district-file.css's, and the per-issue room panel one
   segment deeper is district-room.css's. No sheet reaches into another's class
   names.

   NOTHING IN HERE SCALES WITH A COUNT. This is the rule the whole sheet is built
   around. An option with four hundred answers and an option with none are the
   same width, the same weight, the same colour and the same size. There is no
   bar, no fill, no track, no ring, no gradient stop and no opacity that a number
   could drive — and there is no rule below whose value comes from a count. A
   proportion drawn as a length reads as a grade, and a neighbour's answer is not
   a grade. The count is set in tabular figures next to the option's own words and
   that is the entire visual treatment it gets.

   NO VERDICT PALETTE, for the reason district-room.css states at greater length:
   the good-green (#4ade80 / #86efac) and every red in this app mean "the record
   came out the way they said it would". This block is neighbours talking, not a
   judgement about anybody, so it takes the app's neutral surfaces and the same
   one cool accent (#7dd3fc) the file and the room take. No party colour appears
   anywhere in this sheet — there is no red/blue axis to draw, because there is no
   party field to draw it from.

   THE READER'S OWN MARK IS AN OUTLINE, NOT A WIN. .is-mine gets a quiet accent
   border so somebody can find their own answer and their own take. It is
   deliberately not a highlight, a badge or a colour that reads as correct.

   TWO FACES, AND ONLY TWO. The question is set in the app's display face
   ('Bebas Neue', falling back to 'Barlow Condensed') at display size — it is the
   loudest thing in the block and the only thing in the block that is allowed to
   be. Every label, kicker and heading around it is set in the condensed kicker
   face at kicker size in slate, because a page where the word "ONE LIVE
   QUESTION" is as bright as the question is a page whose furniture is shouting
   over its content. That is precisely what this seat looked like before: one
   accent-blue uppercase label per block, six of them down the page, each the
   same weight as the sentence under it, so nothing was the page. Only the block's
   own name (.pdxv-kick) keeps the accent, because it is the block's signature
   rather than a label on a part of it.

   ISSUE COLOUR ON A TAKE'S RAIL, AND NOWHERE ELSE. A take's left edge carries
   its issue's colour from PDXIssueColors through inline --pdx-ic* properties, so
   this sheet holds no per-issue rule and cannot disagree with any other surface
   about what colour an issue is. A key that maps to no Core National Issue gets
   no data-ic attribute at all and therefore the neutral rail — deliberately, so
   an unmapped subject is not dressed up as a recognised one. The colour is a
   recognition aid on a subject, never a judgement on a sentence.

   AN EMPTY WELL IS DASHED, AND THAT IS THE WHOLE DEVICE. A solid card with
   nothing in it reads as something that failed to load. An outline in dashes
   reads as a space nobody has filled, which is what zero takes in a seat
   actually is. It holds one sentence, and for a reader who cannot post, the
   server's own sentence about why.

   Loaded non-blocking from index.html (media="print" + onload swap, the same
   arrangement district-file.css and district-room.css use), so an unstyled flash
   is impossible and the sheet costs nothing on first paint.
   ───────────────────────────────────────────────────────────────────────────── */

.pdxv {
  display: block;
}

/* ── THE FRAME ────────────────────────────────────────────────────────────── */
/* The block's own signature, and the one kicker that keeps the accent. */
.pdxv-kick {
  margin: 0;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7dd3fc;
}

/* The required sentence. Printed at full contrast rather than as fine print,
   because it is the block's whole claim about what it is and what it is not. */
.pdxv-frame {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #cbd5e1;
}

/* EVERY OTHER LABEL ON THE BLOCK. Kicker face, kicker size, slate — quiet
   enough that the eye passes over it on the way to the thing it names. It is
   still uppercase and still tracked, so it still reads as a label rather than as
   a sentence; what it no longer does is compete with one. */
.pdxv-blockhd {
  margin: 22px 0 0;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8496ad;
}

.pdxv-blocknote {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #94a3b8;
}

/* Every honest-empty sentence in the block — no takes, no verified neighbours,
   no formal act on this issue. One treatment, because all three are the same
   kind of statement: a fact, printed as a sentence, in place of a feed. */
.pdxv-empty {
  margin: 10px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #94a3b8;
}

.pdxv-busy {
  margin: 0;
  font-size: 0.84rem;
  color: #94a3b8;
}

/* ── THE POLL ─────────────────────────────────────────────────────────────── */
/* THE LOUDEST BLOCK ON THE PAGE, and the only one asking for anything. Display
   face, display size, near-white. It scales with the VIEWPORT and with nothing
   else — there is no count, tally, headcount or answer in the world that can
   move this rule by a pixel. */
.pdxv-q {
  margin: 10px 0 0;
  font-family: 'Bebas Neue', 'Barlow Condensed', system-ui, sans-serif;
  font-size: clamp(1.45rem, 5.4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 1.08;
  color: #f0f9ff;
}

/* THREE CARDS, NOT THREE FORM PILLS. The choices were a stack of thin full-width
   rows indistinguishable from the composer's own controls, under a question that
   was the same size as everything else — so the one interactive thing on the
   seat looked like a settings list. They are cards now: they sit side by side
   where there is room, wrap where there is not, and every one of them is the
   same card. EQUAL BY CONSTRUCTION — one grid track each, one min-height, one
   padding, one border, one background — so no arrangement of counts can make one
   choice bigger, brighter or first. */
.pdxv-opts {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
}

/* Every option is the same card whether it can be pressed or not, so a reader
   who cannot answer is looking at the same choices and the same counts as a
   neighbour who can — not at a greyed-out or truncated version of the question.
   The min-height is a CONSTANT: it is what keeps a card whose count is absent
   the same size as a card whose count is printed, which is the one place a
   "print it only when it exists" rule could otherwise leak into a length. */
.pdxv-optrow,
.pdxv-optbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 86px;
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.06);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #e2e8f0;
  text-align: left;
}

.pdxv-optbtn {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pdxv-optbtn:hover,
.pdxv-optbtn:focus-visible {
  border-color: rgba(125, 211, 252, 0.55);
  background: rgba(125, 211, 252, 0.09);
  outline: none;
}

/* The reader's own answer, found rather than celebrated. */
.pdxv-opt.is-mine > .pdxv-optrow,
.pdxv-opt.is-mine > .pdxv-optbtn {
  border-color: rgba(125, 211, 252, 0.6);
}

.pdxv-optlabel {
  flex: 1 1 auto;
  min-width: 0;
}

/* THE COUNT, AND IT IS A CHIP WITH AN INTEGER IN IT. Tabular figures so a
   column of them lines up, one fixed padding and one fixed size: the chip does
   not grow, lengthen, brighten or bold as the number climbs, and a card with a
   four-hundred in it is the same card as a card with a one. This is what the
   brief's "count bar" is built as, deliberately: a bar is a proportion drawn as
   a length, and there is no denominator in this file to draw one against.
   A count of nothing gets no chip at all — see pollHtml(). */
.pdxv-optcount {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 2px 9px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #bae6fd;
}

/* The tally sentence, the neighbour headcount, and — when there is neither — the
   one sentence that replaces both. All three are the same quiet line, because
   all three are the same kind of statement about the question above them. */
.pdxv-countline,
.pdxv-neighbors,
.pdxv-pollempty {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #94a3b8;
}

.pdxv-neighbors {
  margin-top: 4px;
}

/* ── THE TAKES ────────────────────────────────────────────────────────────── */
/* Newest first, and every take the same size. No score column, no vote arrows,
   no reply affordance and no author block — there is nothing on a take to press. */
.pdxv-takes {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* THE RAIL IS THE SUBJECT. Three pixels on the left edge, carrying this take's
   issue colour, so a column of neighbours' sentences reads as a column of
   subjects at a glance instead of as a stack of identical grey boxes. The rail
   is the SAME WIDTH on every take — it says which issue, never how much of
   anything. */
.pdxv-take {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 3px solid rgba(148, 163, 184, 0.3);
  border-radius: 0 10px 10px 0;
  background: rgba(148, 163, 184, 0.05);
}

/* Set only when PDXIssueColors resolved the key to a Core National Issue. An
   unmapped key keeps the neutral rail above. */
.pdxv-take[data-ic="on"] {
  border-left-color: var(--pdx-ic);
  background: var(--pdx-ic-wash);
}

.pdxv-take.is-mine {
  border-color: rgba(125, 211, 252, 0.45);
  border-left-color: rgba(125, 211, 252, 0.45);
}

.pdxv-take.is-mine[data-ic="on"] {
  border-left-color: var(--pdx-ic);
}

.pdxv-takeissue {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8496ad;
}

.pdxv-take[data-ic="on"] .pdxv-takeissue {
  color: var(--pdx-ic-ink);
}

.pdxv-takebody {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #e2e8f0;
  overflow-wrap: anywhere;
}

/* NO TAKES IN THIS SEAT YET. A dashed outline rather than a card, because a
   solid empty card reads as something that failed to load while an unfilled
   outline reads as what this actually is: a space nobody has written in. It
   holds the one sentence that says so, and — for a reader who cannot post — the
   server's own sentence about why, folded into the same outline so the page
   shows one empty state here rather than two stacked ones. */
.pdxv-well {
  margin: 12px 0 0;
  padding: 16px 14px;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  border-radius: 12px;
  background: transparent;
}

.pdxv-well > .pdxv-empty {
  margin: 0;
}

.pdxv-well > .pdxv-closed {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.82rem;
  color: #94a3b8;
}

/* ── THE COMPOSER ─────────────────────────────────────────────────────────── */
.pdxv-composer {
  margin-top: 4px;
}

.pdxv-clabel {
  display: block;
  margin: 10px 0 4px;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8496ad;
}

.pdxv-select,
.pdxv-body {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 9px;
  background: rgba(2, 6, 23, 0.5);
  font: inherit;
  font-size: 0.88rem;
  color: #e2e8f0;
}

.pdxv-body {
  margin-top: 8px;
  min-height: 82px;
  line-height: 1.5;
  resize: vertical;
}

.pdxv-select:focus-visible,
.pdxv-body:focus-visible {
  border-color: rgba(125, 211, 252, 0.55);
  outline: none;
}

.pdxv-crow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.pdxv-send {
  padding: 8px 16px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  border-radius: 9px;
  background: rgba(125, 211, 252, 0.12);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7dd3fc;
  cursor: pointer;
}

.pdxv-send:hover,
.pdxv-send:focus-visible {
  background: rgba(125, 211, 252, 0.2);
  outline: none;
}

.pdxv-count {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
}

.pdxv-say {
  margin: 8px 0 0;
  min-height: 1em;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* THE CLOSED NOTE. The server's own sentence about why this reader cannot post,
   printed plainly. Not an error, not a warning colour, and not louder than the
   takes it sits under — being told why is part of reading the page, and reading
   is open to everybody. */
.pdxv-closed {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-left: 2px solid rgba(125, 211, 252, 0.4);
  border-radius: 0 9px 9px 0;
  background: rgba(148, 163, 184, 0.05);
  font-size: 0.83rem;
  line-height: 1.55;
  color: #cbd5e1;
}

/* ── THE RECORD STRIP ─────────────────────────────────────────────────────── */
/* THE STRIP IS TWO DIFFERENT THINGS AND LOOKS LIKE IT. When the seated member
   has a formal act on the live question's issue, it is a block with a heading
   and a door: bill number, title, date, a link to the public record. When they
   do not, it is one quiet line under the question — an aside, demoted, not a
   peer section with its own heading and its own empty state. The page used to
   print the second case at exactly the weight of the first, which is how a
   sentence meaning "nothing happened" ended up looking like a section. */
.pdxv-weeklink {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.05);
  color: #e2e8f0;
  text-decoration: none;
}

.pdxv-weeklink:hover,
.pdxv-weeklink:focus-visible {
  border-color: rgba(125, 211, 252, 0.45);
  outline: none;
}

.pdxv-weekid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* THE BILL'S OWN NAME. Tabular figures, because a bill number is a citation and
   a reader checking it against another page should be able to scan the digits. */
.pdxv-weeknum {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: #7dd3fc;
}

.pdxv-weektitle {
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.pdxv-weekdate {
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
}

/* THE QUIET CASE. No card, no heading, no border — a kicker and a sentence on
   one line, set small and slate, sitting close under the question it is an aside
   to. Nothing about it invites a reader to treat it as a section. */
.pdxv-week--quiet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}

.pdxv-weekkick {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}

.pdxv-weekline {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #94a3b8;
}

@media (max-width: 520px) {
  .pdxv-optrow,
  .pdxv-optbtn { min-height: 78px; padding: 12px; }
  .pdxv-crow { flex-direction: column; align-items: stretch; }
  .pdxv-send { width: 100%; }
  .pdxv-count { text-align: right; }
}