/* ─────────────────────────────────────────────────────────────────────────────
   me-desk.css — /me, the voter's own file. One document, seven regions.
   ─────────────────────────────────────────────────────────────────────────────
   WHAT THIS SHEET IS FOR. me.html is a DESK, not a product: one document that
   says what this account holds and hands the reader to the tool that does the
   work. So this sheet styles regions and rows and nothing else. There is no
   card grid, no hero, no second navigation bar, no chart.

   WHAT IS DELIBERATELY ABSENT, and each absence is a rule from the brief:

     · NO METER, NO PERCENTAGE, NO GRADE. There is no bar, no fill, no ring and
       no length anywhere in this file, because there is no number on this
       document for a style to read. "2 of 121 set" is a sentence. A voter is
       not a completion rate and this sheet gives a later edit nowhere to put
       one.
     · NO VERDICT PALETTE. your-file.css states the doctrine at length and it
       holds here for the same reason: the good-green and every red in this app
       mean "the record came out the way they said it would". Nothing on this
       page is a verdict on anybody — least of all on the reader — so the
       accent is the one cool blue every neutral surface uses, and Support does
       not get the green.
     · NO PARTY COLOUR ON THE VOTER. A pick's row shows the person's name and
       their face. It does not show a party chip, and there is no .me-party
       class for one to arrive in.
     · NO SECOND NAV. Region f is three text links in a paragraph. It shares the
       .me-jump class with nothing that could become a button bar.
     · NO BOARD ON THIS DOCUMENT. Region g is a SNAPSHOT — the seats this
       account's location resolves, one line each, and one control to /voice,
       which is the hallway that owns them. A plain list of seat names is the
       whole of it: this sheet gives it a tag, a link, a sentence and NO card
       grid, thread shape, avatar row, take, answer or count — see the block
       over .me-voicetag and the one over .me-voiceseats, and district-voice.css,
       which is not loaded here and owns the board itself.

   THE EDITOR IS NOT RESTYLED HERE. Region b's FACE is a snapshot this sheet
   owns — chips carrying the sides the reader chose, and one door. Behind the
   door are your-file.js's own eight rows, painted by your-file.js into a host
   this document supplies, styled by your-file.css. This sheet contributes
   exactly one rule to them — the
   .pdxyf-body--inline modifier below, which un-does the overlay scroller
   because on THIS document the region is the page and the page is the scroller.
   Every other .pdxyf* rule is your-file.css's, unchanged, so the eight rows are
   the same eight rows here as in the panel and a fix to one is a fix to both.

   SELF-SUFFICIENT. app.css is not loaded on this document (see me.html's
   header), so every colour here is a literal and every var() that is read
   carries a literal fallback. Render-blocking on purpose: it is the page.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── THE DESK ─────────────────────────────────────────────────────────────── */
#me-desk {
  max-width: 52rem;
  margin: 0 auto 3.5rem;
  padding: 0 1rem;
}

/* The one letterhead. It names the document and says what it is not, in the
   same two-sentence shape your-file.js's panel head uses. */
.me-head { margin: 0 0 1.25rem; }
.me-kick {
  margin: 0;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7dd3fc;
}
.me-title {
  margin: 0.3rem 0 0;
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: #f1f5f9;
}
.me-lede {
  margin: 0.55rem 0 0;
  max-width: 40rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #9fb4d4;
}

/* ── A REGION ─────────────────────────────────────────────────────────────── */
/* Six of these, stacked. Each one is a fact plus a way into the tool that owns
   it. The heading is small because the region is not a product. */
.me-region {
  margin: 0 0 1.1rem;
  padding: 1rem 1.05rem 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(11, 18, 32, 0.72);
}
.me-region > :first-child { margin-top: 0; }
.me-region > :last-child { margin-bottom: 0; }

/* The section the reader was sent to by ?tab= is marked for one beat so they
   can see where they landed. One outline, no scroll animation of our own. */
.me-region.is-target {
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.22);
}

.me-rhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.55rem;
}
.me-rtitle {
  margin: 0;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #cbd5e1;
}
/* The count sentence. Text, never a meter — see the header. */
.me-rcount {
  flex: 0 0 auto;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #7f95ad;
  white-space: nowrap;
}
.me-rline {
  margin: 0 0 0.7rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #94a3b8;
}

/* ── THE HONEST EMPTY ─────────────────────────────────────────────────────── */
/* Every region has one and they all read the same way: what is not here, and
   what the reader can do about it. Never a placeholder that looks like data. */
.me-empty {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #8fa3bf;
  background: rgba(15, 23, 42, 0.35);
}

/* ── REGION a · WHO THIS IS ───────────────────────────────────────────────── */
.me-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.me-avatar {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(224, 39, 63, 0.45);
  background: rgba(224, 39, 63, 0.18);
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  color: #fff;
  overflow: hidden;
}
.me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.me-idtext { min-width: 0; }
.me-name {
  display: block;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-mail {
  display: block;
  font-size: 0.76rem;
  color: #7f95ad;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Where they vote, as a fact. Not a badge, not a chip — one line of prose with
   the place in it, because it is the input two other regions read. */
.me-where {
  margin: 0.75rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #9fb4d4;
}
.me-where strong { color: #e2e8f0; font-weight: 600; }

/* EVERY DISTRICT, ONE ROW EACH. A voter is in a U.S. House district AND a State
   Senate district AND a State House district AND a county AND a municipality,
   so this is a definition list: the level is the term, the district is the
   definition. Label above value on a phone, side by side once there is room.

   THE MISSING ROWS LOOK MISSING AND ARE STILL HERE. "not on file" and "needs a
   district map" are both dimmed and italic — the same treatment every other
   absence on this page gets — because a row we cannot fill is a fact about our
   coverage, not a blank to be tidied away. They are two different facts and the
   markup says which is which in words; one dimmed treatment is right for both,
   because the reader's next move is the same either way. It is NOT red: there is
   nothing wrong with a reader whose State Senate district we do not draw. */
.me-dists {
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem 0.9rem;
}
.me-dist {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}
.me-distlb {
  flex: 0 0 8.5rem;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa3bf;
}
.me-distv {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #e2e8f0;
}
.me-dist--none .me-distv {
  color: #8fa3bf;
  font-style: italic;
}

@media (min-width: 40rem) {
  .me-dists { grid-template-columns: 1fr 1fr; }
}

/* THE ONE WAY OUT. Quiet on purpose: ending a session is not the thing a reader
   came to this page to do, and a chip louder than the account's own name would
   read as the page's main verb. Sits at the end of the identity row and takes
   the same outline shape "Work seat" takes — one border, no fill, no red. Red
   here would be a verdict palette on the one control that is only ever the
   reader's own choice. */
.me-signout {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.5rem;
  background: transparent;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb4d4;
  cursor: pointer;
}
.me-signout:hover, .me-signout:focus-visible {
  border-color: rgba(125, 211, 252, 0.5);
  color: #e0f2fe;
}

/* ── REGION b · THE SNAPSHOT, AND THE EDITOR'S HOST UNDER IT ──────────────── */
/* WHAT CHANGED. This region used to BE the editor: eight rows and thirty-two
   controls, painted the same way for a reader with eight answers and a reader
   with none. It is a snapshot now — the sides this reader actually chose, as
   chips — and the editor mounts into the host below it when the one door is
   used. The editor's own sheet (your-file.css) still styles the editor; nothing
   below restyles a single .pdxyf* rule.

   A CHIP IS A LABEL, NOT A CONTROL, and the shapes say so: no hover lift, no
   pressed state, no cursor:pointer, no aria-pressed anywhere for one to arrive
   in. The only control in the region is .me-door.

   THE COLOUR IS THE ISSUE'S, AND IT IS THE ONLY COLOUR HERE. [data-ic] is the
   gate issue-colors.js sets, and the four --pdx-ic* properties ride inline on
   the chip exactly as they do on a bill letterhead's topic chips. A key that
   resolves to no Core National Issue carries NO attribute, so it keeps the
   unthemed steel below — which is the honest outcome and the reason the base
   rule is a full rule rather than a fallback. NO SIDE HAS A COLOUR: Support is
   not green and Oppose is not red, because a position is not a verdict and this
   sheet gives a later edit nowhere to make it one. */
.me-pchips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.me-pchip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.09);
  font-size: 0.78rem;
  line-height: 1.3;
  color: #cbd5e1;
}
.me-pchip[data-ic] {
  border-color: var(--pdx-ic, rgba(148, 163, 184, 0.24));
  background: var(--pdx-ic-soft, rgba(148, 163, 184, 0.09));
}
.me-pchip[data-ic] .me-pchip-l { color: var(--pdx-ic-ink, #cbd5e1); }
.me-pchip-l { font-weight: 600; }
/* The side the reader chose, set apart from the issue by weight and case rather
   than by a colour — see the block above. */
.me-pchip-s {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa3bf;
  white-space: nowrap;
}
/* NO STARTER CHIP RULE LIVES HERE ANY MORE. There used to be a .me-pchip--start
   that drew a dashed, side-less chip in this same row. Every chip in .me-pchips
   means "a side this reader holds", so a dashed one under the sentence "Nothing
   on file yet." said both things at once. The empty state is words and a door
   now; see regionPositions() in me-desk.js. */

/* THE ONE DOOR. */
.me-pgo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.85rem 0 0;
}
/* THE DOOR IS AN ANCHOR NOW, so it says so: no underline, laid out as a block
   so the padding is real, and never shorter than a thumb. It used to be a
   <button> that mounted an editor below the snapshot; it is a link to
   /my-stances, which is the one place a position is set. */
.me-door {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  padding: 0.42rem 0.8rem;
  border: 1px solid rgba(125, 211, 252, 0.42);
  border-radius: 0.5rem;
  background: rgba(56, 130, 246, 0.14);
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #dbeafe;
  cursor: pointer;
}
.me-door:hover, .me-door:focus-visible {
  border-color: rgba(147, 197, 253, 0.7);
  color: #f0f9ff;
}
/* "N more" — the leftover the face did not print. A count in words beside the
   door, never a badge on it and never a ratio. */
.me-pmore {
  font-size: 0.76rem;
  color: #7f95ad;
}

/* THE ONE RULE THIS SHEET CONTRIBUTES TO THE EDITOR. .pdxyf-body is the single
   scroller inside a fixed overlay, and it is bounded by that overlay's height.
   There is no overlay here and no bounded height, so an inner scroller would be
   a box that never scrolls sitting inside a page that does. It grows instead
   and the document scroller carries it. */
.pdxyf-body--inline {
  flex: none;
  min-height: 0;
  padding: 0;
  overflow: visible;
  touch-action: auto;
  -webkit-overflow-scrolling: auto;
}

/* ── REGION c · STARRED ───────────────────────────────────────────────────── */
/* A list of issue names the reader flagged to count harder. The star is the
   whole visual: no weight printed, no multiplier, no ordering number. */
.me-stars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.me-star {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(245, 215, 122, 0.32);
  border-radius: 999px;
  background: rgba(245, 215, 122, 0.08);
  font-size: 0.8rem;
  color: #e8dcb4;
}
.me-starico { font-size: 0.75rem; }

/* ── REGION d · THE BALLOT SNAPSHOT ───────────────────────────────────────── */
/* One line per seat. Office, then WHO HOLDS IT NOW, then the reader's own pick
   underneath when they have made one, then the way to work it. No progress bar:
   the count is in the region head as a sentence.

   THE INCUMBENT IS THE ROW'S SUBJECT and reads at full strength; the pick sits
   under it, smaller, behind its own "Your pick:" label. That order is the whole
   point of the region — the seat is held by somebody today whether or not this
   reader has decided anything — and the type sizes say so without a heading. */
.me-seats {
  margin: 0;
  padding: 0;
  list-style: none;
}
.me-seat {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.me-seat:first-child { border-top: 0; padding-top: 0; }
.me-seatico {
  flex: 0 0 auto;
  width: 1.6rem;
  text-align: center;
  font-size: 1rem;
}
.me-face {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(30, 53, 96, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #9fb4d4;
}
.me-face img { width: 100%; height: 100%; object-fit: cover; }
.me-seattext { flex: 1 1 auto; min-width: 0; }
.me-office {
  display: block;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa3bf;
}
/* The officeholder. Wraps rather than truncates when a seat has two of them
   (both U.S. Senate seats are one ballot seat), because a truncated second
   senator is a name we half-printed. */
.me-holds {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #e2e8f0;
  min-width: 0;
}
.me-holds a { color: #bfdbfe; text-decoration: none; }
.me-holds a:hover, .me-holds a:focus-visible { text-decoration: underline; }
/* "No officeholder on file" and "we do not resolve this seat" are the same kind
   of sentence — something we do not have — so they read the same way, and
   neither is red. */
.me-holds--none { color: #8fa3bf; font-style: italic; }
/* A WAIT IS NOT AN ABSENCE, AND IT MUST NOT LOOK LIKE ONE. "Still loading
   seats…" is printed while the roster this document resolves seats from is
   still in flight, and the row repaints into a name the moment it lands — so it
   is dimmer than a name and dimmer still than the honest empty, which is a
   claim we are standing behind. No spinner and no pulse: the block repaints
   once, and an animation on six rows would read as six separate things
   happening. */
.me-holds--wait { color: #6f8099; font-style: italic; }
.me-holdsep { color: #8fa3bf; }
.me-pick {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #bcd0ea;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-pick a { color: #bfdbfe; text-decoration: none; }
.me-pick a:hover, .me-pick a:focus-visible { text-decoration: underline; }
.me-picklb {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa3bf;
}
/* Kept: older cached paints of this document may still carry a .me-pick--none
   node, and a rule that vanishes under them would leave a bare-white "No pick"
   reading as a name. */
.me-pick--none { color: #8fa3bf; }
.me-work {
  flex: 0 0 auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.5rem;
  background: transparent;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb4d4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.me-work:hover, .me-work:focus-visible {
  border-color: rgba(125, 211, 252, 0.5);
  color: #e0f2fe;
}

/* ── REGION e · SAVED EVIDENCE ────────────────────────────────────────────── */
.me-saved {
  margin: 0;
  padding: 0;
  list-style: none;
}
.me-card {
  padding: 0.6rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 0.88rem;
  line-height: 1.45;
}
.me-card:first-child { border-top: 0; padding-top: 0; }
.me-card a { color: #bfdbfe; text-decoration: none; }
.me-card a:hover, .me-card a:focus-visible { text-decoration: underline; }
.me-cardsub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  color: #7f95ad;
}
/* THE THREE GROUP HEADINGS — Receipts, Issues & Spotlights, Politicians you
   follow. Region e absorbed the homepage's four-tab workspace, and a heading is
   what replaced the tab: it is a label over a list, not a control, so there is
   no active state, no border, no pill and nothing to click. The count beside it
   is a plain number in the same muted colour as the label, deliberately NOT the
   gold the region count uses — a group of three saved receipts is not an
   achievement and this gives a later edit nowhere to treat it as one. */
.me-gtitle {
  margin: 1.1rem 0 0.35rem;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fa3bf;
}
.me-gtitle:first-of-type { margin-top: 0.2rem; }
.me-gcount {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7f95ad;
}

/* ── REGION f · THE JUMPS ─────────────────────────────────────────────────── */
/* Text links in a sentence. Not a button bar, not a second nav — see the
   header. */
.me-jump {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #9fb4d4;
}
.me-jump a { color: #f5d77a; }

/* A jump inside a region head or a region body, styled like the prose it sits
   in rather than like a control. */
.me-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #bfdbfe;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.me-link:hover, .me-link:focus-visible { color: #e0f2fe; }

/* ── REGION g · DISTRICT VOICE ────────────────────────────────────────────── */
/* THREE RULES FOR A SLOT, NOT A BOARD. This region is a standing line and one
   control, so it gets a tag, a link and a plain sentence — and deliberately no
   list, no card grid, no thread shape and no avatar row. There is nothing here
   for the board's contents to leak into, which is the point: a shape that could
   hold a feed is a shape somebody will eventually put a feed in.

   THE TAG IS NOT A VERDICT PALETTE AND NOT A SCORE. It is the same cool blue
   every neutral surface on this document uses, at the same weight as a region
   count, because "verified resident" is a FACT about where somebody lives and
   not a grade on them. There is no green here for it to read as approval, no
   red for its absence, and no width, fill or length anywhere in the block for a
   later edit to turn into a meter. The unverified and signed-out standings get
   no tag at all rather than a greyed-out one: a dimmed badge still says "badge",
   and this document must not imply a board that a reader does not have. */
.me-voicetag {
  flex: 0 0 auto;
  padding: 0.16rem 0.45rem;
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: 0.4rem;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7dd3fc;
  white-space: nowrap;
}
/* The one control. An anchor in every standing that has a destination, styled
   like region d's "Work this seat" because it is the same kind of thing: a trip
   to the surface that owns the work. */
.me-voicecta {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.5rem;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb4d4;
  text-decoration: none;
}
.me-voicecta:hover, .me-voicecta:focus-visible {
  border-color: rgba(125, 211, 252, 0.5);
  color: #e0f2fe;
}
/* ── THE SEATS ON FILE ──────────────────────────────────────────────────────
   A LIST, MARKED UP AS ONE, because six seats is a list of six things and a
   screen reader is owed the count before the first item. This is the SNAPSHOT
   of what /voice lists in full: chamber and district on the left, whether a
   board is on hand on the right, and nothing else per row. No person link, no
   door, no card — duplicating the hallway here is how two documents start
   telling one reader two things about the same seat.

   AND THERE IS NOTHING HERE A COUNT COULD LAND IN. No width, no fill, no track,
   no length, no cell grid. The only state a row carries is which of two words
   prints in .me-voicestate, and neither of them is a number. A row in this block
   must never be able to become a meter of how busy somebody's district is. */
.me-voiceseats {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.me-voiceseat {
  margin: 0;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #cbd5e1;
}
.me-voiceseat:first-child { border-top: 0; }
/* "board on hand" / "board not on hand". A PHRASE, styled as one — quieter than
   the seat it describes, no border, no chrome, nothing that could be pressed and
   no colour that reads as approval or its absence. A board we have not built is
   not a board that is coming, so the words are the same either way and only the
   "not" moves. */
.me-voicestate {
  font-size: 0.78rem;
  color: #8fa3bf;
  white-space: nowrap;
}

/* ── THE FOOT ─────────────────────────────────────────────────────────────── */
/* What this document is not, said once, at the bottom, where the reader has
   finished reading it. */
.me-foot {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 0.78rem;
  line-height: 1.6;
  color: #7f95ad;
}

@media (max-width: 32rem) {
  .me-id { flex-wrap: wrap; }
  .me-signout { margin-left: 0; }
  .me-seat { flex-wrap: wrap; }
  .me-work { margin-left: auto; }
  .me-rhead { flex-wrap: wrap; }
}