/* ---------------------------------------------------------------
   Voter guide only (public/candidates/). Loaded by that page alone,
   so changes here do not restamp every other page's ?v=.

   The reasoning popups are CSS-only, the same technique as the
   YamaArashi lineage bios and the calendar: a "Reasoning" link points
   at #why-x, :target shows that panel, and the scrim and close link
   point at #closed -- a zero-size position: fixed anchor -- so closing
   does not scroll the page anywhere.

   Honest limitation, as on the other two: :target cannot trap focus
   the way a scripted dialog would. The panel is reachable and
   dismissable by keyboard, but a screen reader can still tab past it.
   --------------------------------------------------------------- */

/* .close-anchor, .why and the .gpop popup styles are in style.css, shared
   with the Harassment page. */

/* --- one column for the whole page -------------------------------- */
/* Every section uses .wrap-wide, and nothing inside is capped at
   --measure, so text, boxes and tables all share the ballot table's left
   and right edges, as on the Palestine page. astone's call, Oct 10 2026. */
#main p, #main li, #main .lede, #main details, #main .question,
#main .record, #main .answers { max-width: none; }

/* --- the ballot table --------------------------------------------- */
.ballot { width: 100%; border-collapse: collapse; font-family: var(--sans);
          font-size: .9375rem; margin: 1rem 0 2rem; }
.ballot th, .ballot td { text-align: left; padding: .55rem .6rem;
                         border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ballot thead th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
                   color: var(--muted); border-bottom: 2px solid var(--text); }
.ballot .ballot-sec th { /* spans all columns */ background: var(--sunk); font-size: .8125rem;
                         letter-spacing: .04em; text-transform: uppercase; color: var(--accent-dk);
                         border-bottom: 1px solid var(--rule); padding-top: .9rem; }
/* Fixed column widths, so switching the comparison group never moves the
   columns: the browser sizes them from these headings, not from whichever
   group's text is showing. */
.ballot { table-layout: fixed; }
.ballot thead th:nth-child(1) { width: 31%; }
.ballot thead th:nth-child(2) { width: 27%; }
.ballot thead th:nth-child(3) { width: 27%; }
.ballot thead th:nth-child(4) { width: 15%; }
.ballot td { overflow-wrap: anywhere; }
.ballot .cmp-col { color: var(--muted); font-size: .875rem; }

/* --- compare with another group (CSS-only, no JS) ------------------- */
/* One radio per choice sits before the table: #cmp-none ("--", checked by
   default) and one per group in COMPARE in build-guide.py. Whichever is
   checked shows its own column cells, heading text and, on a phone, its line
   under our pick. The radios are visually hidden but focusable; their labels
   are the menu entries. Adding a group: add it to COMPARE, then add its key to
   every list of ids below. */
.cmp-r { position: fixed; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; } /* fixed: focusing it never scrolls */
.cmp-bar { font-family: var(--sans); font-size: .875rem; margin: 1rem 0 .25rem; display: none; } /* phones only */

/* Show only the checked choice's column cells and heading text. */
.ballot .cmp-col, .cmp-btn [class^="c-"], .cmp-btn [class^="b-"] { display: none; }
#cmp-none:checked ~ .ballot .cmp-col.c-none,
#cmp-dsa:checked ~ .ballot .cmp-col.c-dsa,
#cmp-labor:checked ~ .ballot .cmp-col.c-labor,
#cmp-prog:checked ~ .ballot .cmp-col.c-prog,
#cmp-wfp:checked ~ .ballot .cmp-col.c-wfp,
#cmp-dem:checked ~ .ballot .cmp-col.c-dem,
#cmp-rmpjc:checked ~ .ballot .cmp-col.c-rmpjc { display: table-cell; }
#cmp-none:checked ~ .ballot .cmp-btn .c-none,
#cmp-dsa:checked ~ .ballot .cmp-btn .c-dsa,
#cmp-labor:checked ~ .ballot .cmp-btn .c-labor,
#cmp-prog:checked ~ .ballot .cmp-btn .c-prog,
#cmp-wfp:checked ~ .ballot .cmp-btn .c-wfp,
#cmp-dem:checked ~ .ballot .cmp-btn .c-dem,
#cmp-rmpjc:checked ~ .ballot .cmp-btn .c-rmpjc,
#cmp-none:checked ~ .cmp-bar .cmp-btn .b-none,
#cmp-dsa:checked ~ .cmp-bar .cmp-btn .b-dsa,
#cmp-labor:checked ~ .cmp-bar .cmp-btn .b-labor,
#cmp-prog:checked ~ .cmp-bar .cmp-btn .b-prog,
#cmp-wfp:checked ~ .cmp-bar .cmp-btn .b-wfp,
#cmp-rmpjc:checked ~ .cmp-bar .cmp-btn .b-rmpjc,
#cmp-dem:checked ~ .cmp-bar .cmp-btn .b-dem { display: inline; }
#cmp-none:checked ~ .ballot .cmp-menu label[for="cmp-none"],
#cmp-dsa:checked ~ .ballot .cmp-menu label[for="cmp-dsa"],
#cmp-labor:checked ~ .ballot .cmp-menu label[for="cmp-labor"],
#cmp-prog:checked ~ .ballot .cmp-menu label[for="cmp-prog"],
#cmp-wfp:checked ~ .ballot .cmp-menu label[for="cmp-wfp"],
#cmp-dem:checked ~ .ballot .cmp-menu label[for="cmp-dem"],
#cmp-none:checked ~ .cmp-bar .cmp-menu label[for="cmp-none"],
#cmp-dsa:checked ~ .cmp-bar .cmp-menu label[for="cmp-dsa"],
#cmp-labor:checked ~ .cmp-bar .cmp-menu label[for="cmp-labor"],
#cmp-prog:checked ~ .cmp-bar .cmp-menu label[for="cmp-prog"],
#cmp-wfp:checked ~ .cmp-bar .cmp-menu label[for="cmp-wfp"],
#cmp-dem:checked ~ .cmp-bar .cmp-menu label[for="cmp-dem"] { font-weight: 700; color: var(--accent-dk); }
.cmp-r:focus-visible ~ .ballot .cmp-btn,
.cmp-r:focus-visible ~ .cmp-bar .cmp-btn { outline: 2px solid var(--accent-dk); outline-offset: 2px; }

/* The menu: opens on hover or focus; picking an entry moves focus to its
   radio, which closes it. */
.cmp-dd { position: relative; display: inline-block; }
.cmp-btn {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--accent-dk);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: .2rem .5rem; cursor: pointer;
}
.cmp-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 5; min-width: 100%;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15); text-transform: none; letter-spacing: 0;
}
.cmp-dd:hover .cmp-menu, .cmp-dd:focus-within .cmp-menu { display: block; }
.cmp-menu label { display: block; padding: .4rem .7rem; cursor: pointer; white-space: nowrap;
                  font-size: .875rem; color: var(--text); }
.cmp-menu label:hover { background: var(--sunk); }
.ballot .pick { font-weight: 700; }
.ballot .pick-yes    { color: var(--green); }
.ballot .pick-no     { color: var(--accent); }
.ballot .pick-choice { color: var(--text); font-style: italic; font-weight: 600; }
.ballot .pick-none   { color: var(--muted); font-weight: 400; }
.ballot .why-cell { width: 1%; white-space: nowrap; text-align: right; }

/* On a phone, four columns do not fit: the compared group's pick moves
   under ours. */
.ballot .cmp-m { display: none; }
@media (max-width: 40rem) {
  .ballot .cmp-col.cmp-col, .ballot .cmp-head { display: none !important; }
  .cmp-bar { display: block; margin-bottom: .5rem; position: relative; }
  /* Anchor the phone menu to the bar, not the small button, so it never
     runs off the right edge. */
  .cmp-bar .cmp-dd { position: static; }
  .cmp-bar .cmp-menu { left: 0; right: auto; max-width: 100%; }
  .cmp-bar .cmp-menu label { white-space: normal; }
  .ballot td { overflow-wrap: normal; }
  .cmp-bar .cmp-btn { text-transform: none; letter-spacing: 0; }
  #cmp-dsa:checked ~ .ballot .cmp-m.c-dsa,
  #cmp-labor:checked ~ .ballot .cmp-m.c-labor,
  #cmp-prog:checked ~ .ballot .cmp-m.c-prog,
  #cmp-wfp:checked ~ .ballot .cmp-m.c-wfp,
  #cmp-dem:checked ~ .ballot .cmp-m.c-dem,
  #cmp-rmpjc:checked ~ .ballot .cmp-m.c-rmpjc {
    display: block; margin-top: .15rem; font-size: .8125rem;
    font-weight: 400; font-style: normal; color: var(--muted); }
  .ballot { table-layout: auto; }
  .ballot thead th:nth-child(n) { width: auto; }
  .ballot th, .ballot td { padding: .5rem .35rem; }
  .why { padding: .25rem .5rem; }
}

@media print {
  .gpop, .why-cell, .why, .cmp-bar { display: none !important; }
}

/* --- evidence screenshots ------------------------------------------ */
/* "See the text" on a point opens its screenshot as a native [popover],
   layered over the reasoning panel. Same look as the Harassment page's
   claims sheet; Escape or a click outside closes it back to the panel. */
.gev-open {
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--accent-dk); background: var(--surface);
  border: 1px solid var(--accent-dk); border-radius: 3px;
  padding: .1rem .5rem; cursor: pointer;
}
.gev-open:hover { background: var(--alert-bg); }
.gev-open:focus-visible,
.gev-x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gev {
  width: fit-content;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  margin: auto;
  padding: .75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .25);
}
.gev::backdrop { background: rgba(36, 33, 29, .55); }
.gev-x {
  display: block; margin: 0 0 .6rem auto;
  font: inherit; font-family: var(--sans); font-size: .875rem; font-weight: 600;
  color: var(--accent-dk); background: var(--surface);
  border: 1px solid var(--accent-dk); border-radius: 3px;
  padding: .35rem .75rem; cursor: pointer;
}
/* Side by side, each screenshot as tall as the window allows so a whole
   phone screen reads at once. Too narrow for two -- a phone -- and they
   wrap to a column, read by scrolling. */
.gev-imgs { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.gev-imgs img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
}
/* A fixed height rather than a cap, so screenshots of different
   resolutions come out the same size next to each other. */
@media (min-width: 40rem) {
  .gev-imgs img { width: auto; height: calc(100vh - 8rem); }
}

/* A message reproduced as text in the same popover. Capped at a reading
   measure, since fit-content would otherwise run it the width of the window. */
.gev-letter { max-width: 38rem; padding: 0 .5rem .5rem; font-family: var(--sans); }
.gev-letter h5 { margin: 0 0 .3rem; font-size: 1rem; }
.gev-note { margin: 0 0 .9rem; font-size: .8125rem; color: var(--muted); }
.gev-letter blockquote {
  margin: 0; padding-left: 1rem; border-left: 3px solid var(--rule);
  font-size: .9375rem;
}
.gev-letter blockquote p { margin: 0 0 .8rem; max-width: none; }
/* Below screenshots, the letter carries the exchange on: set apart, centred. */
.gev-imgs + .gev-letter { margin: 1.5rem auto 0; }

/* Words in a sentence that open a popover: a button, but styled as the link
   it reads as, so the sentence is not broken up by a pill. */
.gev-inline {
  font: inherit; color: var(--accent-dk); background: none; border: 0;
  padding: 0; text-decoration: underline; cursor: pointer;
}
.gev-inline:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* "— X replied:" between the messages of an exchange. */
.gev-letter blockquote .gev-from {
  margin: 1.2rem 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--muted);
}