/* ─────────────────────────────────────────────────────────────────────────────
   district-room.css — the District Room, and the two blocks that lead into it
   ─────────────────────────────────────────────────────────────────────────────
   Two things live in here and nothing else:

     .pdxdr-mount*   the entry block, painted by district-room.js inside Who
                     Represents Me (a district seat row) and inside the issue
                     file's letterhead. It is a heading, one line and a row of
                     chips — never a card that competes with the record beside it.
     .pdxdr*         the room panel itself: header, composer-or-closed-note, and
                     the post list.

   NO VERDICT PALETTE. The room takes the app's neutral surface colours and one
   cool accent. It deliberately does NOT use the good-green (#4ade80 / #86efac)
   or any red: those are the record's colours — they mean "the record came out the
   way they said it would" — and a neighbour's sentence is not a vindication or an
   indictment of anybody. Nothing in here scales, intensifies or changes colour
   with how much is in the room, because there is nothing in these tables to
   scale with.

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

/* ── THE ENTRY BLOCK ──────────────────────────────────────────────────────── */
.pdxdr-mount {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-left: 3px solid rgba(125, 211, 252, 0.55);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
}

.pdxdr-mount-hd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.pdxdr-mount-sub {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #cbd5e1;
}

.pdxdr-mount-line {
  margin: 5px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #94a3b8;
}

.pdxdr-chips {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* A chip is a real anchor to /d/<district>/<issue>. Styled as an address, not as
   a call to action: no fill that outranks the seat row it sits under. */
.pdxdr-chip {
  display: inline-block;
  padding: 4px 10px;
  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;
}

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

/* ── THE PANEL ────────────────────────────────────────────────────────────── */
.pdxdr {
  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;
}

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

.pdxdr-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;
}

.pdxdr-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));
}

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

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

/* The district's name, and it is the biggest thing in the header. There is no
   politician, no party letter and no score above, beside or below it. */
.pdxdr-title {
  margin: 4px 0 0;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;
  color: #f1f5f9;
}

.pdxdr-chipline { margin: 7px 0 0; }

.pdxdr-issuechip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
  font-size: 0.76rem;
  font-weight: 700;
}

.pdxdr-strap {
  margin: 7px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #94a3b8;
}

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

.pdxdr-x:hover { border-color: rgba(148, 163, 184, 0.5); color: #f1f5f9; }
.pdxdr-x svg { width: 17px; height: 17px; }

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

/* ── COMPOSER, OR THE CLOSED NOTE ─────────────────────────────────────────── */
.pdxdr-composer {
  display: block;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.5);
}

.pdxdr-lbl {
  display: block;
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
}

.pdxdr-ta {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 9px;
  background: #0b1220;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.pdxdr-ta:focus {
  outline: none;
  border-color: rgba(125, 211, 252, 0.6);
}

.pdxdr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}

.pdxdr-send {
  padding: 7px 16px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  border-radius: 9px;
  background: rgba(125, 211, 252, 0.16);
  color: #e0f2fe;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
}

.pdxdr-send:hover:not(:disabled) { background: rgba(125, 211, 252, 0.26); }
.pdxdr-send:disabled { opacity: 0.55; cursor: default; }

/* The one sentence a reader gets when they cannot post. Deliberately quiet: it
   is an explanation, not a wall and not an advertisement for a verification
   product that does not exist yet. */
.pdxdr-closed {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.4);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #cbd5e1;
}

/* ── THE NEIGHBOUR'S WAY IN ────────────────────────────────────────────────
   "Ask to be verified for this district", directly under the closed note. In
   phase 2 this was a thin outline and the reviewer's grant was the filled
   control — which meant the loudest thing on the way into the room was a button
   almost nobody can press. Phase 3 swaps that: THIS is the primary control, it
   is full width so its hit target is the width of the note above it, and it is
   comfortably past the 44px minimum on a phone.

   Still not the verdict palette. The room's one cool accent, the same one the
   composer's Post button wears, because asking to join is an ordinary thing to
   do — not a vindication and not an indictment. */
.pdxdr-ask {
  margin: 0 0 14px;
}

.pdxdr-askbtn {
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid rgba(125, 211, 252, 0.48);
  border-radius: 12px;
  background: rgba(125, 211, 252, 0.18);
  color: #e0f2fe;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.pdxdr-askbtn:hover:not(:disabled) {
  border-color: rgba(125, 211, 252, 0.7);
  background: rgba(125, 211, 252, 0.28);
}

/* ── THE REVIEWER'S FOOTER ─────────────────────────────────────────────────
   The last block in the room, under the posts, behind its own heading. A bigger
   hit target than phase 2 gave it — a reviewer has to be able to press it on a
   phone — but deliberately NOT the filled accent any more: it is a tool for one
   person, not the way in for everybody, and it must not read as the room's call
   to action. Separated from the conversation by a rule rather than by a card, so
   it does not compete with the posts above it. */
.pdxdr-rev {
  margin: 18px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.pdxdr-revhd {
  margin: 0 0 9px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* The subject field. A reviewer types a uid here and the grant sends it — the
   footer is painted in rooms the reviewer can post in too, so the person being
   verified is always written down rather than defaulted to whoever pressed the
   button. Quiet like the rest of the footer: it is a tool, not the way in. */
.pdxdr-revlbl {
  display: block;
  margin: 0 0 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #94a3b8;
}

.pdxdr-revuid {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 9px;
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 9px;
  background: #0b1220;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.85rem;
}

.pdxdr-revuid:focus {
  outline: none;
  border-color: rgba(125, 211, 252, 0.6);
}

.pdxdr-grantbtn {
  appearance: none;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.pdxdr-grantbtn:hover:not(:disabled) {
  border-color: rgba(148, 163, 184, 0.66);
  color: #e2e8f0;
}

.pdxdr-askbtn:disabled,
.pdxdr-grantbtn:disabled { opacity: 0.55; cursor: default; }

/* ── THE ROOM'S ONE POLL ───────────────────────────────────────────────────
   Above the composer, above the posts, and it is three buttons and three
   numbers. What is deliberately absent from this block is most of what a poll
   usually looks like:

     · NO BAR, NO FILL, NO METER. There is no element in here whose width or
       height is set from a result, so nothing can grow with a total. A
       proportion drawn as a length reads as a grade, and neighbours disagreeing
       about a road is not a grade.
     · NO PERCENTAGE. The results are printed as the server's own sentence,
       "N support · N oppose · N mixed", in one monospaced-tabular line.
     · NO WINNING COLOUR. All three poles wear the same neutral. The one that is
       marked is the READER'S OWN answer — an "is-mine" state, not a leader — and
       it is marked with the room's cool accent, never with the record's
       good-green or any red. A room does not tell you which side won. */
.pdxdr-poll {
  margin: 0 0 14px;
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.44);
}

.pdxdr-pollq {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
  color: #e2e8f0;
}

.pdxdr-poles {
  margin: 11px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* One pole. Same size, same weight, same colour as the other two — a poll where
   one option is drawn louder than the others has already answered itself. */
.pdxdr-pole {
  appearance: none;
  flex: 1 1 90px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5e1;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.pdxdr-pole:hover {
  border-color: rgba(148, 163, 184, 0.62);
  color: #e2e8f0;
}

/* THE READER'S OWN ANSWER, and that is all this state means. */
.pdxdr-pole.is-mine {
  border-color: rgba(125, 211, 252, 0.58);
  background: rgba(125, 211, 252, 0.14);
  color: #e0f2fe;
}

/* The results. Three integers and the labels beside them, on one line, in
   tabular figures so the numbers do not jump as they change. */
.pdxdr-pollres {
  margin: 11px 0 0;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
}

/* Why this reader cannot answer, when they cannot. Reading the numbers is open
   either way, and this sentence says so. */
.pdxdr-pollnote {
  margin: 8px 0 0;
  font-size: 0.79rem;
  line-height: 1.5;
  color: #94a3b8;
}

/* What the numbers are, and what they are not. */
.pdxdr-pollfoot {
  margin: 9px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #7d8ea6;
}

/* The sentence under the request: what it is worth, in the room's own words. */
.pdxdr-resnote {
  margin: 7px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #94a3b8;
}

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

/* ── THE POSTS ────────────────────────────────────────────────────────────── */
.pdxdr-posts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Every post looks exactly the same. No post is larger, brighter, pinned or
   tinted because of anything — there is no count in these tables for a style to
   read, and this is where that stays true. */
.pdxdr-post {
  padding: 11px 13px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.44);
}

.pdxdr-postbody {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #e2e8f0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pdxdr-postsrc {
  margin: 7px 0 0;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.pdxdr-postsrc a { color: #93c5fd; }

.pdxdr-postmeta {
  margin: 9px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

/* The badge says one thing: this author is verified in THIS district. It is not
   a rank, not a tier and not a reputation, so it wears the neutral accent rather
   than anything that reads as a grade. */
.pdxdr-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.1);
  color: #bae6fd;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pdxdr-badge--you { border-style: dashed; }

.pdxdr-when {
  font-size: 0.72rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.pdxdr-flag {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  background: none;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.pdxdr-flag:hover:not(:disabled) { border-color: rgba(148, 163, 184, 0.5); color: #e2e8f0; }
.pdxdr-flag:disabled { opacity: 0.6; cursor: default; }

/* ── THE THREE STATES THAT ARE NOT POSTS ──────────────────────────────────── */
/* An empty room, a room still opening, and a room that did not open. Three
   different facts, three different sentences, none of them dressed up as the
   others. */
.pdxdr-empty,
.pdxdr-busy,
.pdxdr-gone {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 11px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #94a3b8;
  text-align: center;
}

.pdxdr-gone { border-style: solid; border-color: rgba(148, 163, 184, 0.34); }

@media (max-width: 560px) {
  .pdxdr { padding: 12px 8px; }
  /* One pole per row rather than three squeezed ones: a 44px target is only a
     target if it is wide enough to hit. */
  .pdxdr-pole { flex: 1 1 100%; }
  .pdxdr-poll { padding: 12px; }
  .pdxdr-panel { max-height: calc(100vh - 24px); border-radius: 12px; }
  .pdxdr-top { padding: 12px 10px 10px 12px; }
  .pdxdr-body { padding: 12px 12px 16px; }
  .pdxdr-title { font-size: 1rem; }
}