/* ─────────────────────────────────────────────────────────────────────────────
   district-file.css — the district file at /d/<districtKey>
   ─────────────────────────────────────────────────────────────────────────────
   One thing lives in here: the .pdxdf* panel painted by district-file.js — its
   header, the seated member's line, and the list of issue rooms. The room panel
   one segment deeper is district-room.css's, and neither sheet reaches into the
   other's class names.

   NO VERDICT PALETTE, for the reason district-room.css states at greater length:
   the good-green (#4ade80 / #86efac) and every red mean "the record came out the
   way they said it would", and this page is a door into a conversation between
   neighbours rather than a judgement about anybody. It takes the app's neutral
   surfaces and the same one cool accent the room takes.

   AND NOTHING IN HERE SCALES WITH HOW BUSY A ROOM IS. A row with four hundred
   answers and a row with none are the same size, the same weight and the same
   colour. There is no bar, no fill, no length and no intensity that a count
   could drive — a proportion drawn as a length reads as a grade.

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

/* ── THE PANEL ────────────────────────────────────────────────────────────── */
.pdxdf {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 14px;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow: hidden;
}

.pdxdf[hidden] { display: none !important; }

.pdxdf-panel {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  background: #0b1220;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.6);
  overflow: hidden;
}

.pdxdf-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.07), rgba(125, 211, 252, 0));
}

.pdxdf-head { flex: 1 1 auto; min-width: 0; }

/* The file's own address, printed where a letterhead prints a file number. */
.pdxdf-kick {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7dd3fc;
}

/* THE DISTRICT'S OWN NAME, in the app's display face. It is the letterhead of a
   place, so it is set like one — large, condensed, near-white — rather than as
   the first of a column of same-sized paragraphs, which is how this page used to
   open. The one thing bigger than it anywhere on a Voice seat is the live
   question, deliberately: the title says where you are, the question is what the
   page is asking you. */
.pdxdf-title {
  margin: 5px 0 0;
  font-family: 'Bebas Neue', 'Barlow Condensed', system-ui, sans-serif;
  font-size: clamp(1.4rem, 4.8vw, 1.85rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.1;
  color: #f0f9ff;
}

/* WHERE THAT IS, IN THE ROSTER'S OWN WORDS. "District 68" names a box; this line
   names the ground. It is QUOTED, not composed: district-file.js reads the
   parenthetical out of the seated member's roster row and prints it, so this
   rule dresses a string the app already published and there is no geography in
   this stylesheet or in that module to invent. A seat whose roster row carries no
   parenthetical prints no line here at all, and the letterhead simply closes up. */
.pdxdf-place {
  margin: 3px 0 0;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #94a3b8;
}

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

.pdxdf-x {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5e1;
  cursor: pointer;
}

.pdxdf-x svg { width: 16px; height: 16px; }

.pdxdf-x:hover,
.pdxdf-x:focus-visible {
  border-color: rgba(125, 211, 252, 0.5);
  color: #e0f2fe;
}

.pdxdf-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

/* ── THE SEATED MEMBER ────────────────────────────────────────────────────── */
/* A label, a name that is a link, and the office. There is no chip in here for a
   party letter to go in and no slot for a number, because neither is on this
   page — see the header of district-file.js. It sits INSIDE .pdxdf-head, under
   the district's own title and above the one line, because who holds the seat is
   a fact about the district in the same way the label is — so it does not scroll
   away with the list and it is not repainted when the rooms arrive. The top
   margin is its own: the header block has no padding between its lines. */
.pdxdf-seat {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 3px solid rgba(125, 211, 252, 0.5);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
}

/* THE FACE, AT FORTY PIXELS AND NEVER LARGER. Fixed both ways, so the row is the
   same height whether the photo resolved or not and a portrait of any aspect is
   cropped to the same square rather than stretching the letterhead. flex: 0 0
   auto because this is the one thing in the row that must not shrink. */
.pdxdf-seat-face {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  object-fit: cover;
  object-position: center top;
  background: rgba(15, 23, 42, 0.6);
}

/* Label, name, office — stacked, so the row reads as one identity rather than as
   three fragments wrapping against each other. */
.pdxdf-seat-id {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pdxdf-seat-hd {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8496ad;
}

.pdxdf-seat-link {
  font-size: 0.94rem;
  font-weight: 700;
  color: #e0f2fe;
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 211, 252, 0.4);
}

.pdxdf-seat-link:hover,
.pdxdf-seat-link:focus-visible {
  color: #f0f9ff;
  border-bottom-color: rgba(125, 211, 252, 0.85);
}

.pdxdf-seat-office,
.pdxdf-seat-muted {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #94a3b8;
}

/* An unresolved seat has no face and no name to stack, so it stays the one-line
   row it always was. */
.pdxdf-seat--none {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
}

/* ── THE LIST OF ROOMS ────────────────────────────────────────────────────── */
/* The list is the first thing in the scrolling body now that the seat is on the
   letterhead, so its heading drops the leading gap it needed when it followed
   the seat block. */
/* The rooms heading sits flush at the top of whichever container holds it: the
   scroller directly on a boot where district-voice.js has not loaded, and the
   .pdxdf-rooms container when District Voice or the ballot strip is above it. */
.pdxdf-body > .pdxdf-listhd:first-child,
.pdxdf-rooms > .pdxdf-listhd:first-child { margin-top: 0; }

/* The three parts of the scroller. District Voice paints into the first, the
   seat's ballot strip into the second, the issue rooms into the third, and the
   rules between them say out loud where one block ends and the next begins.
   EVERY SEPARATOR IS THE SAME HAIRLINE, and every one of them is keyed on
   :not(:empty) — a boot where district-voice.js or district-ballot.js did not
   load, or a district neither module has anything to say about, leaves an empty
   div here, and an empty div must not spend a rule, a border or a gap. That is
   what keeps a rooms-only file byte-identical to the file that shipped before
   either module existed. The last rule is the general sibling, so a file with
   Voice and no ballot strip still gets exactly one line above its rooms. */
.pdxdf-voice:not(:empty) + .pdxdf-ballot:not(:empty),
.pdxdf-ballot:not(:empty) + .pdxdf-rooms,
.pdxdf-voice:not(:empty) ~ .pdxdf-rooms {
  margin-top: 18px;
  padding-top: 4px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

/* THE SECTION'S NAME, AND IT IS FURNITURE. Kicker face, kicker size, slate. It
   was accent blue at the same weight as the sentence under it, which is how a
   page of six such labels ended up with nothing on it louder than its own
   headings. Labels name things; they do not compete with them. */
.pdxdf-listhd {
  margin: 18px 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;
}

.pdxdf-listnote {
  margin: 5px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #94a3b8;
}

.pdxdf-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Every row is the same row. Nothing here reads a count. The left rail carries
   the issue's colour, at the SAME WIDTH on every row — it says which subject,
   never how much of anything. A key the mapping module cannot place keeps the
   neutral rail below, because an unrecognised subject should not be dressed up
   as a recognised one. */
.pdxdf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 3px solid rgba(148, 163, 184, 0.22);
  border-radius: 0 10px 10px 0;
  background: rgba(15, 23, 42, 0.34);
}

/* Set by district-file.js only when PDXIssueColors resolved the key. */
.pdxdf-row[data-ic="on"] {
  border-left-color: var(--pdx-ic);
}

.pdxdf-issuechip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.08);
  color: #bae6fd;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.pdxdf-row[data-ic="on"] .pdxdf-issuechip {
  border-color: var(--pdx-ic-wash);
  background: var(--pdx-ic-soft);
  color: var(--pdx-ic-ink);
}

/* ── FAMILIES, AND THE QUIET ROOMS BEHIND ONE DOOR ────────────────────────── */
/* The family heading is a rule with a word on it, not a section title: it marks
   where one subject gives way to the next in a list whose order it did not
   change. Kicker face, kicker size, so it separates without shouting. */
.pdxdf-fam {
  margin: 16px 0 0;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8496ad;
}

.pdxdf-fam + .pdxdf-list { margin-top: 8px; }

/* ONE CONTROL FOR EVERY DOOR NOBODY HAS WALKED THROUGH YET. A <details>, so the
   fold opens without JavaScript and tells a screen reader its own state. Closed
   it is a single quiet line; open it is the same rows at the same size as the
   rooms above, because folding them was about what there is to read, not about
   them mattering less. */
.pdxdf-fold {
  margin: 16px 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.pdxdf-foldhd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px 2px;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
  cursor: pointer;
  list-style: none;
}

.pdxdf-foldhd::-webkit-details-marker { display: none; }

.pdxdf-foldhd:hover,
.pdxdf-foldhd:focus-visible {
  color: #cbd5e1;
  outline: none;
}

/* A caret the reader can see turn, drawn from the fold's own state and from
   nothing else. */
.pdxdf-foldhd::after {
  content: '▾';
  font-size: 0.7rem;
  color: #64748b;
}

.pdxdf-fold[open] > .pdxdf-foldhd::after { content: '▴'; }

/* HOW MANY DOORS ARE BEHIND IT. An integer in a fixed chip: a reader deciding
   whether to open the fold deserves to know whether it is one room or nine. The
   chip does not grow, brighten or lengthen with the number, and the number is a
   count of ISSUES — there is nothing it is a proportion of. */
.pdxdf-foldn {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 1.6em;
  padding: 1px 7px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #94a3b8;
}

.pdxdf-fold[open] > .pdxdf-fam:first-of-type,
.pdxdf-fold[open] > .pdxdf-list:first-of-type { margin-top: 10px; }

/* Three integers, printed as a sentence. Not a bar, not a fill, not a ratio. */
.pdxdf-counts {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
}

/* The way in, and it is a real anchor to the room's address. */
.pdxdf-open {
  flex: 0 0 auto;
  padding: 4px 11px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.08);
  color: #bae6fd;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.pdxdf-open:hover,
.pdxdf-open:focus-visible {
  border-color: rgba(125, 211, 252, 0.62);
  background: rgba(125, 211, 252, 0.16);
  color: #e0f2fe;
}

.pdxdf-empty {
  margin: 10px 0 0;
  font-size: 0.84rem;
  color: #94a3b8;
}

@media (max-width: 560px) {
  .pdxdf { padding: 0; }
  .pdxdf-panel {
    width: 100%;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }
  .pdxdf-open { width: 100%; text-align: center; }
}

/* ── THE WAY IN, ON THE SEAT ROW ──────────────────────────────────────────────
   These two rules style a control district-room.js paints: "District rooms →" at
   the foot of the seat mount inside Who Represents Me. They live HERE, in the
   file's own stylesheet, rather than in district-room.css, and that is deliberate
   in both directions.

   The control only EXISTS when this module is loaded - district-room.js builds
   its href by asking PDXDistrictFile.path(), and paints nothing at all when the
   answer is empty - so the rules that dress it should arrive with the module that
   makes it possible, not with the module that draws it. A device holding the
   room's stylesheet but not this pair therefore has no unstyled control on the
   seat row: it has no control. Nothing in district-room.css changed.

   Styled as an address and not as a call to action, for the reason .pdxdr-chip
   gives: it sits under a seat row that outranks it. It is a quieter thing than a
   room chip, because it leads to a list of them. */
.pdxdr-mount-file {
  margin: 8px 0 0;
}

.pdxdr-filelink {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #7dd3fc;
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 211, 252, 0.32);
}

.pdxdr-filelink:hover,
.pdxdr-filelink:focus-visible {
  color: #e0f2fe;
  border-bottom-color: rgba(125, 211, 252, 0.7);
}