/* ═══════════════════════════════════════════════════════════════════════════
   JUDICIAL RETENTION  ·  styles
   ═══════════════════════════════════════════════════════════════════════════

   Two surfaces share this sheet: the Door 2 retention band under the ballot
   workspace, and the judge file at /p/<pid>.

   The visual job is the same on both, and it is restraint. Everywhere else in
   this product a name in a card sits next to a figure — a match percentage, a
   kept/broken split, a formal-record tier. A retention question has no figure,
   and the surface has to LOOK like it has no figure, or a reader will go
   hunting for the number they have been trained to expect and read the JPEC
   phrase as a grade in its place.

   So: flat rules, no fills, no status colour, no ring, no bar, no chip that
   could be mistaken for a party badge. The one accent is slate — the colour
   the app uses for archival, non-scored material — and it is never green,
   amber or red, because "retain" is a ballot option and not a good outcome.

   The Retain / Do not retain pair is drawn as two INERT ballot boxes. They are
   not buttons and they have no hover, active or selected state, because there
   is nothing to click: the band shows the reader the question that will be on
   their ballot, and the answer is theirs to give at the polls.
   ═══════════════════════════════════════════════════════════════════════════ */

.jr-band {
  max-width: 47rem;
  margin: 1.4rem auto 0;
  padding: 1rem 1.05rem 0.9rem;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.1rem;
  background: rgba(8, 13, 28, 0.5);
}

.jr-band[hidden] { display: none; }

.jr-band--arch { margin-top: 1.6rem; }

/* ── THE HOMEPAGE CARD ────────────────────────────────────────────────────
   The whole footprint judicial retention has on the front page now that the
   rosters live at /courts: an eyebrow, a title, one count sentence and a link.

   IT IS DRAWN AS A CARD AND NOT AS A TILE, and the number in it is set in the
   BODY FACE at BODY SIZE inside a sentence. Every other count on this product
   that got its own display face grew into a figure a reader reads as a grade,
   and this one is a tally of ballot questions — "2 retention questions
   resolved for Davis County" is a fact about a ballot, so it is written the
   way a fact is written. There is deliberately nowhere in these rules to put a
   big gold numeral, a ring, a bar or a status colour, for the same reason the
   header of this sheet gives. */
.jr-band--card { padding-bottom: 1rem; }

.jr-card-t {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #e6eefb;
  margin: 0.1rem 0 0;
}

.jr-card-l {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #9fb4d4;
  margin: 0.35rem 0 0;
  max-width: 40rem;
}

.jr-card-go { margin: 0.75rem 0 0; }

/* A real anchor with a real href, so cmd-click opens a tab — the room is
   another address, not a panel, and the reader is owed the ability to see
   where the link goes. Quiet by default: this is one of two doors on a page
   that has other work to do. */
.jr-card-b {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfe0fb;
  text-decoration: none;
  border: 1px solid rgba(207, 224, 251, 0.26);
  border-radius: 0.55rem;
  padding: 0.4rem 0.8rem;
}

.jr-card-b:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* ── The Door 2 line ──────────────────────────────────────────────────────
   The entire footprint judicial retention has inside the ballot workspace:
   one sentence and a jump. Styled as a quiet rule, not a card, because a card
   here would compete with the seat rail it sits under — and the reason this
   exists at all is that a wall of judges used to sit between the reader's
   seats and their picks. */
.jr-line {
  max-width: 47rem;
  margin: 1.1rem auto 0;
  padding: 0.6rem 0.2rem 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  text-align: center;
}

.jr-line[hidden] { display: none; }

.jr-line-t {
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8296b4;
}

.jr-line-b {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #b9c9e2;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(185, 201, 226, 0.4);
  padding: 0 0 0.05rem;
  min-height: 30px;
  cursor: pointer;
}

.jr-line-b:hover { color: #e6eefb; border-bottom-color: #e6eefb; }

/* ── The room's own header ────────────────────────────────────────────────
   THESE FOUR RULES MOVED WITH THE ROOM. They used to dress #judicial-lane's
   static header on index.html — an eyebrow, a title and one sentence, above
   the retention band and the courts archive. The rosters live at /courts now
   and the lane keeps only the card above, so the header they draw is
   courts.html's own page head and .jl-title is that document's h1. The rules
   are unchanged: the header is intentionally plain, because a room full of
   judges is a place to read and not a scoreboard. */
.jl-inner {
  max-width: 47rem;
  margin: 0 auto;
  text-align: left;
}

.jl-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8296b4;
  margin: 0 0 0.3rem;
}

.jl-title {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #e6eefb;
  margin: 0;
}

.jl-sub {
  font-family: 'Barlow', sans-serif;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #8296b4;
  margin: 0.5rem 0 0;
  max-width: 42rem;
}

.jr-kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d90ad;
  margin: 0 0 0.3rem;
}

.jr-lead {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #e6eefb;
  margin: 0 0 0.4rem;
}

.jr-note,
.jr-empty,
.jr-missing {
  font-family: 'Barlow', sans-serif;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #8296b4;
  margin: 0.55rem 0 0;
}

/* The "official list is not on file" line. It is a caveat about coverage, so
   it is set apart with a hairline rather than a warning colour — an incomplete
   list is not an alarm. */
.jr-warn {
  font-family: 'Barlow', sans-serif;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #9fb0cb;
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.6rem;
  border-left: 2px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.07);
  border-radius: 0 0.4rem 0.4rem 0;
}

.jr-rows,
.jr-courts,
.jr-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.jr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.jr-office {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d90ad;
  flex: 0 0 100%;
}

/* The unit a seat is retained by, riding the court label: "Statewide" on an
   appellate row, the named judicial district on a trial row. Dimmer and
   un-condensed against the court name so the two read as label and qualifier
   rather than as two labels. */
.jr-unit {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #6d7f9c;
  margin-left: 0.45rem;
}
.jr-unit::before {
  content: '·';
  margin-right: 0.45rem;
  color: #4d5c74;
}

/* Which county the trial-court rows were resolved from, above them. */
.jr-where {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fa2c0;
  margin: 0.15rem 0 0.5rem;
}

/* A disagreement between two official sources, printed on the row it affects.
   Bordered like the warn line because it is one: it tells the reader the page
   declined to resolve something on their behalf. */
.jr-conflict {
  flex: 1 1 100%;
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #9fb0cb;
  margin-top: 0.3rem;
  padding: 0.35rem 0.5rem;
  border-left: 2px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.06);
  border-radius: 0 0.35rem 0.35rem 0;
}

.jr-q {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: #eef4ff;
  flex: 1 1 100%;
}

.jr-who,
.jr-jpec,
.jr-when {
  font-family: 'Barlow', sans-serif;
  font-size: 0.75rem;
  color: #9fb0cb;
}

.jr-role,
.jr-tail { color: #71839f; }

/* Inert. No cursor, no hover, no selected state — see the header. */
.jr-yn {
  display: inline-flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.jr-box {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
  color: #8fa2c0;
  padding: 0.16rem 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.3rem;
  background: transparent;
}

.jr-court {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.jr-court-l {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a9bad6;
}

.jr-court-n {
  font-family: 'Barlow', sans-serif;
  font-size: 0.73rem;
  line-height: 1.45;
  color: #8296b4;
}

/* An unmapped court is dimmer than one with rows, and that is the only visual
   difference between them. It is not marked with a warning. */
.jr-court--unmapped .jr-court-l { color: #8296b4; }

/* ── THE ARCHIVE FILTER ───────────────────────────────────────────────────
   A CHIP IS A FILTER, NOT A VERDICT. These are the only pressable controls on
   this sheet, and they are drawn deliberately unlike the Retain / Do not retain
   pair above them: a chip is a small outlined pill that reads as a view
   control, the inert ballot boxes are squares that read as a printed ballot,
   and a reader must never mistake one for the other.

   THE PRESSED CHIP IS BRIGHTER INK AND A FILLED BACKGROUND — not a colour. No
   green, no amber, no crimson: slate again, because "District Court" being the
   selected view is not a good or a bad outcome, and a party-coloured chip on a
   page about judges is the exact misreading this whole sheet is built to avoid.

   THE HIDING IS DONE HERE, AND THAT IS ON PURPOSE. judicial-ballot.js prints
   the whole archive every time and marks each group and each row with the court
   and district it belongs to; which of them a reader is looking at is one
   attribute on the root. So the filter works before any script has run, the
   printed pressed-state always matches the visible list, and a repaint on a
   settle timer cannot quietly widen the view back out. There is one rule per
   court and one per division rather than a clever selector, because CSS cannot
   compare two attributes and a reader of this file should not have to wonder
   whether it can. */

.jr-fchips,
.jr-fjds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0.55rem 0 0;
}

.jr-fjds { margin-top: 0.4rem; }

.jr-fjds-l {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8296b4;
  margin-right: 0.15rem;
}

.jr-fchip {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a9bad6;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.24rem 0.6rem;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.jr-fchip:hover {
  color: #e8f0fb;
  border-color: rgba(255, 255, 255, 0.26);
}

.jr-fchip[aria-pressed="true"] {
  color: #0d1420;
  background: #cfdcf0;
  border-color: #cfdcf0;
}

.jr-fchip:focus-visible {
  outline: 2px solid rgba(207, 224, 251, 0.75);
  outline-offset: 2px;
}

/* The count is a fact about the archive, so it is dimmer than the label and
   never the other way round: the name of the court is what a reader is
   choosing, the number is only how long that list is. */
.jr-fn {
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #71839f;
  margin-left: 0.32rem;
}

.jr-fchip[aria-pressed="true"] .jr-fn { color: #3c4c66; }

.jr-fnote {
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #8296b4;
  margin: 0.45rem 0 0;
}

/* One rule per court. */
.jr-archive[data-ct="supreme"] .jr-group:not([data-ct="supreme"]),
.jr-archive[data-ct="appeals"] .jr-group:not([data-ct="appeals"]),
.jr-archive[data-ct="district"] .jr-group:not([data-ct="district"]),
.jr-archive[data-ct="juvenile"] .jr-group:not([data-ct="juvenile"]),
.jr-archive[data-ct="justice"] .jr-group:not([data-ct="justice"]) { display: none; }

/* One rule per geographical division. A statewide row carries no data-jd and
   is left alone by these — it is already out of view, because a division can
   only be selected while a trial court is. */
.jr-archive[data-jd="1"] .jr-li[data-jd]:not([data-jd="1"]),
.jr-archive[data-jd="2"] .jr-li[data-jd]:not([data-jd="2"]),
.jr-archive[data-jd="3"] .jr-li[data-jd]:not([data-jd="3"]),
.jr-archive[data-jd="4"] .jr-li[data-jd]:not([data-jd="4"]),
.jr-archive[data-jd="5"] .jr-li[data-jd]:not([data-jd="5"]),
.jr-archive[data-jd="6"] .jr-li[data-jd]:not([data-jd="6"]),
.jr-archive[data-jd="7"] .jr-li[data-jd]:not([data-jd="7"]),
.jr-archive[data-jd="8"] .jr-li[data-jd]:not([data-jd="8"]) { display: none; }

.jr-group { margin-top: 0.9rem; }

.jr-group-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a9bad6;
  margin: 0 0 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.jr-term {
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #71839f;
  text-transform: none;
}

.jr-li {
  padding: 0.3rem 0;
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  color: #cfdcf0;
}

.jr-plink { color: #cfe0fb; text-decoration: none; border-bottom: 1px solid rgba(207, 224, 251, 0.28); }
.jr-plink:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }

/* ── The judge file ──────────────────────────────────────────────────────── */

.jf { text-align: left; }

.jf-head {
  padding-bottom: 0.85rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.jf-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8fa2c0;
  margin: 0 0 0.3rem;
}

/* THE ELECTION HERO IS NOT THE DEFAULT.
   Thirty-two of the judges on this roster are on the filed 2026 list; ninety-
   three sit and are not on it, and one has left the court. All three keep a
   letterhead, and only the first is allowed to look like a ballot: the live
   eyebrow gets the brighter ink and a rule under it in the same tone, and the
   other two are held at the muted weight the rest of the file uses. The
   difference is deliberately small and deliberately real — the words already
   say which is which, and this stops a reader who is skimming from reading a
   sitting judge's file as a November question. No colour anywhere in here
   scores a judge; brightness is about whether a ballot is live, and there is
   no direction in which it could be read as approval. */
.jf-eyebrow--onSlate { color: #cfe0fb; }
.jf-head--onSlate { border-bottom-color: rgba(207, 224, 251, 0.2); }
.jf-eyebrow--offSlate,
.jf-eyebrow--former { color: #7d90ad; letter-spacing: 0.15em; }
.jf-head--former .jf-name { color: #dfe8f5; }

/* The letterhead is the office and the name. There is deliberately no slot
   here for a figure, a ring or a tier badge. */
.jf-name {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
}

.jf-sub {
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  color: #9fb0cb;
  margin: 0.25rem 0 0;
}

.jf-wall {
  font-family: 'Barlow', sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #7d90ad;
  margin: 0.55rem 0 0;
}

.jf-block { margin-top: 1.1rem; }

.jf-h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a9bad6;
  margin: 0 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.jf-ico { font-size: 0.9rem; }

.jf-stat {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  color: #eef4ff;
  margin: 0;
}

/* The locked phrases. Weight and letter-spacing only — no colour that could
   read as a verdict, in either direction. */
.jf-locked {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #dce8fb;
}

.jf-q {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  color: #cfdcf0;
  margin: 0.3rem 0 0;
}

.jf-note,
.jf-empty,
.jf-src {
  font-family: 'Barlow', sans-serif;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #8296b4;
  margin: 0.4rem 0 0;
}

.jf-empty { color: #93a6c2; }

.jf-a { color: #cfe0fb; text-decoration: underline; text-underline-offset: 2px; }

.jf-scores {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.jf-scores li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  color: #9fb0cb;
}

.jf-scores li b { color: #dce8fb; }

.jf-rows,
.jf-pub {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}

.jf-rows li,
.jf-pub li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  padding: 0.42rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Barlow', sans-serif;
  font-size: 0.79rem;
  line-height: 1.45;
  color: #cfdcf0;
}

.jf-when {
  flex: 0 0 8.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7d90ad;
}

.jf-what { flex: 1 1 12rem; }

/* The court strip. Same block furniture, but framed and inset so it reads as a
   note pinned beside the file rather than another chapter of it: the rows
   inside belong to the court, and every judge on that court sees the same ones.
   The lede sits above the list because the rule has to arrive before the
   quotes, not after a reader has already assigned them to a name. */
.jf-court-strip {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.05);
  padding: 0.75rem 0.85rem;
}

.jf-court-strip .jf-h2 { color: #b6c6dd; }

/* Keyed off the strip rather than a class of its own, so the paragraph stays a
   plain .jf-note — that class is the file's marker for a sentence that NEGATES a
   claim rather than making one, and the retention tests read it as such. */
.jf-court-strip .jf-note:first-of-type { margin-top: 0; }

/* Two official sources disagreeing, on the seat it affects. Same treatment as
   the band's conflict line, because it is the same statement. */
.jf-conflict {
  font-family: 'Barlow', sans-serif;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #9fb0cb;
  margin: 0.5rem 0 0;
  padding: 0.4rem 0.55rem;
  border-left: 2px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.06);
  border-radius: 0 0.35rem 0.35rem 0;
}

.jf-plink { color: #cfe0fb; text-decoration: none; border-bottom: 1px solid rgba(207, 224, 251, 0.28); }
.jf-plink:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }

/* A judge file has no team pick and no evidence submission: both act on a
   roster record with a score, and a retention seat has neither. The footer is
   hidden by the mark judge-file.js sets on the panel, so the next non-judge
   file that opens gets it back by having the mark removed. */
#modal-panel[data-pdx-judge] #modal-footer { display: none; }
#modal-panel[data-pdx-judge] #modal-share-btn { display: inline-flex; }

@media (max-width: 640px) {
  .jr-band { margin-left: 0.6rem; margin-right: 0.6rem; padding: 0.85rem 0.8rem; }
  .jr-line { margin-left: 0.6rem; margin-right: 0.6rem; }
  .jl-inner { padding: 0 0.6rem; }
  .jl-title { font-size: 1.6rem; }
  .jf-name { font-size: 1.45rem; }
  .jf-when { flex: 0 0 100%; }
}