/* ─────────────────────────────────────────────────────────────────────────────
   district-ballot.css — "This seat's ballot", on the district file at /d/<key>
   ─────────────────────────────────────────────────────────────────────────────
   One thing lives in here: the .pdxb* strip painted by district-ballot.js into
   the district file's scroller, between District Voice's question and the issue
   rooms list. The file's own panel and letterhead are district-file.css's, the
   Voice blocks above are district-voice.css's, and the per-issue room panel one
   segment deeper is district-room.css's. No sheet reaches into another's class
   names.

   IT IS A LIST OF DOORS, AND EVERY DOOR IS THE SAME SIZE. Nothing in this sheet
   scales, brightens, thickens or reorders with anything about the person named in
   the row. There is no bar, no fill, no ring, no track, no gradient and no
   opacity a number could drive — and there is no number in this strip for one to
   read. A person with nineteen stance cards and a person with none get the same
   row; the only difference the reader sees is that one of them has a second line
   and the other honestly does not.

   NO VERDICT PALETTE AND NO PARTY COLOUR, for the reason the two sheets beside
   this one state 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
   strip makes no such claim about anybody — it is an address list — so it takes
   the app's neutral surfaces and the same one cool accent (#7dd3fc) the file, the
   room and Voice take. There is no red/blue axis drawn here because there is no
   party field to draw one from.

   THE TWO LINE KINDS LOOK THE SAME WEIGHT ON PURPOSE. `Said:` is their claim and
   the record line is what the acts on file support — the words say which is
   which, and the styling does not rank one above the other. Giving the record
   line a stronger colour would be a grade drawn in CSS.

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

.pdxb {
  display: block;
}

/* ── THE FRAME ────────────────────────────────────────────────────────────── */
.pdxb-kick {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
}

/* The strip's one sentence: what these names are, and what this page still is.
   Printed at reading contrast rather than as fine print, for the same reason
   Voice's frame sentence is — it is the block's whole claim about itself. */
.pdxb-frame {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #cbd5e1;
}

/* ── OFFICES ──────────────────────────────────────────────────────────────── */
.pdxb-offices,
.pdxb-people {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdxb-offices {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.pdxb-office {
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.06);
  padding: 10px 12px;
}

/* The office, not a rank. Same size and same colour for the seat this file is
   and for the statewide office above it, because the order of the offices is an
   address and a heading that grew with importance would make it an argument. */
.pdxb-office-hd {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
}

.pdxb-people {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

/* ── A CARD, AND EVERY CARD IS THE SAME CARD ──────────────────────────────── */
/* Portrait left, identity right. The strip was four headings over sixteen
   indistinguishable lines of text — the same shape as every other paragraph on
   the page — so a reader scanning for "who do I call about this" had to read it
   rather than look at it. A face is the fastest thing a person recognises, and
   this app already has these six faces, so the row shows one.
   EQUAL BY CONSTRUCTION: one padding, one border, one background, one portrait
   size. A person with nineteen stance cards and a person with none get the same
   card; the only difference a reader sees is that one has a second line. */
.pdxb-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.34);
}

/* THE PORTRAIT, AT FORTY-FOUR PIXELS AND NEVER ANY OTHER SIZE. Fixed in both
   axes, so a portrait of any aspect is cropped to the same square instead of
   setting the height of the card, and so a card whose photo did not resolve is
   not a different size from the one beside it. There is no placeholder rule
   here: district-ballot.js prints no <img> at all when the resolver has no URL
   for that person, and the card simply starts at the name. */
.pdxb-face {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  object-fit: cover;
  object-position: center top;
  background: rgba(15, 23, 42, 0.6);
}

/* Name, office, line — stacked beside the portrait rather than wrapping around
   it, so three short strings read as one identity. */
.pdxb-id {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── A ROW ────────────────────────────────────────────────────────────────── */
/* The name is the door. It is the only accented thing in the row, and it is
   accented because it is a link — not because of anything about the person. */
.pdxb-name {
  display: inline-block;
  font-size: 0.94rem;
  font-weight: 600;
  color: #e2e8f0;
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 211, 252, 0.45);
}

a.pdxb-name:hover,
a.pdxb-name:focus-visible {
  color: #7dd3fc;
  border-bottom-color: #7dd3fc;
}

a.pdxb-name:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.7);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The office string is that person's own roster line, printed as context for
   the name beside it and nothing more. */
.pdxb-role {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #94a3b8;
}

/* The one-liner, when the person file already has one. One line of type, no
   chip, no badge, no tier colour — see the header on why both kinds look the
   same weight. */
.pdxb-line {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #cbd5e1;
}

@media (max-width: 520px) {
  .pdxb-office {
    padding: 9px 10px;
  }
  .pdxb-frame {
    font-size: 0.83rem;
  }
  /* The portrait gets smaller on a narrow screen and stays square. It is still
     one constant for every card. */
  .pdxb-face {
    width: 38px;
    height: 38px;
  }
}