/* Phone first. Every value comes from tokens.css (docs/design-system/tokens.json). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
}

h1,
h2 {
  font-family: var(--font-display);
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: var(--h1-weight);
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
}

/* Contest titles, candidate and endorser names stay in the body face. */
h3,
h4 {
  font-family: var(--font-sans);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
  font-weight: var(--label-weight);
  margin: 0;
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--teal);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--teal);
  color: var(--on-teal);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 10;
}

.skip:focus {
  top: var(--space-2);
}

.lede {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
}

.muted {
  color: var(--ink-muted);
}

.label {
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Header and footer */

/* The header stays pinned to the top while the page scrolls.
   Phones: a one-line wordmark over the nav, kept short so it doesn't eat the screen.
   Wider: wordmark and nav in one row. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-2) var(--space-4) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* In-page links (#ballot, #register) land below the pinned header. */
html {
  scroll-padding-top: 96px;
}

@media (min-width: 768px) {
  .site-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-10);
  }

  html {
    scroll-padding-top: 88px;
  }
}

.wordmark {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
  font-family: var(--font-display);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
  font-weight: var(--display-weight);
  color: var(--ink);
  text-decoration: none;
}

/* Wider screens: the city sits above the name, as in the design. */
@media (min-width: 768px) {
  .wordmark {
    flex-direction: column;
    font-size: var(--h2-size);
    line-height: var(--h2-line);
  }
}

.site-header ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  font-size: var(--data-size);
  line-height: var(--data-line);
}

/* Phones: smaller links so four fit on one line under the wordmark. */
@media (min-width: 768px) {
  .site-header ul {
    gap: var(--space-4);
    font-size: var(--body-size);
    line-height: var(--body-line);
  }
}

.site-header nav a {
  display: inline-block;
  padding: var(--space-2) 0;
}

.site-footer {
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-4) var(--space-10);
  border-top: 1px solid var(--line);
}

.footer-line {
  font-weight: var(--label-weight);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.site-footer li a {
  display: inline-block;
  padding: var(--space-2) 0;
}

/* Page sections */

.page {
  padding: 0 var(--space-4);
  max-width: 72ch;
}

.section {
  padding: 0 var(--space-4);
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .site-header,
  .page,
  .section,
  .site-footer {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }

  .page {
    max-width: calc(72ch + 2 * var(--space-10));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Positions. Yes / No / no-position colors only ever sit on paper-raised,
   and always come with the word and a shape (rule 7). */

.pos {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-weight: var(--label-weight);
}

.pos-yes {
  color: var(--yes);
}

.pos-no {
  color: var(--no);
}

.pos-none {
  color: var(--neutral-pos);
}

.pos-candidates {
  color: var(--ink);
  font-weight: var(--body-weight);
}

.checked,
.via {
  color: var(--ink-muted);
}

.report {
  display: inline-block;
  font-size: var(--data-size);
  line-height: var(--data-line);
  font-weight: var(--body-weight);
  margin-top: var(--space-1);
}

/* Lean tag and funding note. Neutral ink only: never color-coded by lean. */

.lean-tag {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fund {
  display: inline-block;
}

.fund summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  list-style: none;
  cursor: pointer;
}

.fund summary::-webkit-details-marker {
  display: none;
}

.fund[open] summary {
  background: var(--sand);
  border-color: var(--ink);
}

.fund-pop {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: var(--data-size);
  line-height: var(--data-line);
}

.fund-pop p {
  margin: 0 0 var(--space-1);
}

.fund[open] {
  flex-basis: 100%;
}

/* Charts: one square per group. Counts only. */

.chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--data-size);
  line-height: var(--data-line);
}

.chart p {
  margin: 0;
}

.chart-units,
.units {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1;
  font-weight: var(--label-weight);
}

.unit-yes {
  background: var(--yes);
  color: var(--paper-raised);
}

.unit-no {
  background: var(--no);
  color: var(--paper-raised);
}

.unit-none {
  border: 1px solid var(--neutral-pos);
  color: var(--neutral-pos);
}

.unit-cand {
  background: var(--ink);
  color: var(--paper-raised);
}

.chart-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-weight: var(--label-weight);
  font-variant-numeric: tabular-nums;
}

.chart-name {
  font-weight: var(--label-weight);
}

.chart-name .muted {
  font-weight: var(--body-weight);
}

.chart-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.chart-filtered {
  color: var(--ink-muted);
}

[hidden] {
  display: none !important;
}

/* Smaller squares in the grid's row headers. */
.grid .unit {
  width: 14px;
  height: 14px;
  font-size: 10px;
}

/* Grid view */

.grid-note {
  margin: 0 0 var(--space-2);
  font-size: var(--data-size);
  line-height: var(--data-line);
  color: var(--ink-muted);
}

.grid-scroll {
  overflow: auto;
  max-height: calc(100vh - 120px); /* room for the pinned header */
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--data-size);
  line-height: var(--data-line);
  font-variant-numeric: tabular-nums;
}

.grid th,
.grid td {
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--paper-raised);
}

.grid td {
  min-width: 10rem;
}

/* No position, or nothing listed: the quieter paper ground, plus words and a dash. */
.grid td.cell-quiet {
  background: var(--paper);
}

.cell-link {
  display: block;
  text-decoration: none;
}

.cell-link .pos {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.grid td .via,
.grid td .checked {
  display: block;
}

.grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 10rem;
  border-bottom: 2px solid var(--ink-muted);
}

.grid-endorser {
  display: block;
  font-weight: var(--label-weight);
}

.grid thead .lean-tag {
  margin-top: var(--space-1);
}

.grid-funding {
  display: block;
  margin-top: var(--space-1);
  font-weight: var(--body-weight);
}

.grid .grid-corner,
.grid .grid-contest {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 14rem;
  max-width: 16rem;
  border-right: 2px solid var(--ink-muted);
}

.grid .grid-corner {
  z-index: 3;
}

.grid .grid-contest {
  font-weight: var(--body-weight);
}

.contest-title {
  display: block;
  font-weight: var(--label-weight);
}

.grid-level th {
  background: var(--paper);
  padding-top: var(--space-4);
}

.grid-level th span {
  position: sticky;
  left: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
}

/* Endorser filter */

.is-off {
  display: none !important;
}

.filter {
  margin-bottom: var(--space-4);
}

.filter-panel {
  background: var(--paper-raised);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-md);
}

.filter-panel summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

.filter-title {
  font-weight: var(--label-weight);
}

.filter-title::before {
  content: '▸ ';
}

.filter-panel[open] .filter-title::before {
  content: '▾ ';
}

.filter-panel summary::-webkit-details-marker {
  display: none;
}

.filter-panel summary {
  list-style: none;
}

.filter-status {
  font-size: var(--data-size);
  line-height: var(--data-line);
  color: var(--ink-muted);
}

.filter-body {
  padding: 0 var(--space-4) var(--space-4);
}

.filter-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.filter-hint,
.filter-note {
  margin: 0;
}

.filter-note {
  margin-top: var(--space-2);
  font-size: var(--data-size);
  line-height: var(--data-line);
  color: var(--ink-muted);
}

.filter-group-label {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--ink-muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: var(--data-size);
  line-height: var(--data-line);
  cursor: pointer;
}

.chip-mark {
  display: none;
}

.chip[aria-pressed='true'] {
  background: var(--sand);
  border-color: var(--ink);
  font-weight: var(--label-weight);
}

.chip[aria-pressed='true'] .chip-mark {
  display: inline;
}

.button-quiet {
  min-height: 44px;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: var(--label-weight);
  text-decoration: underline;
  cursor: pointer;
}

/* Views. Phones always get tiles; the toggle appears from 768px. */

.ballot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

.ballot-bar .checked {
  margin: 0;
  font-size: var(--data-size);
  line-height: var(--data-line);
}

.views {
  display: none;
  gap: var(--space-2);
}

.view-button {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.view-button[aria-pressed='true'] {
  background: var(--sand);
  border-color: var(--ink);
  font-weight: var(--label-weight);
}

.grid-wrap {
  display: none;
}

@media (min-width: 768px) {
  .views:not([hidden]) {
    display: flex;
  }

  [data-view='grid'] .tiles {
    display: none;
  }

  [data-view='grid'] .grid-wrap {
    display: block;
  }
}

/* Tiles view */

.level {
  margin-bottom: var(--space-10);
}

.level-heading {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
  margin-bottom: var(--space-2);
}

.level-intro {
  color: var(--ink-muted);
}

.tile-list {
  display: grid;
  gap: var(--space-6);
}

/* Tiles in a row share one height; the error link sits at the bottom. */
@media (min-width: 768px) {
  .tile-list {
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    align-items: stretch;
  }
}

.tile {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--space-1) var(--space-1) 0 color-mix(in srgb, var(--ink) 15%, transparent);
}

.tile-title {
  margin-bottom: 0;
}

/* The tile's title and chart stick just below the pinned site header
   (77px tall) while the endorser list scrolls past, then leave with the tile. */
.tile-head {
  position: sticky;
  top: 77px;
  z-index: 5;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
  padding: var(--space-4) var(--space-4) var(--space-2);
  background: var(--paper-raised);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid var(--line);
}

/* While the head is stuck, the tile's body scrolls behind it in the same
   color, which would fill its rounded top corners. These two corner pieces
   paint the page color outside each curve, so the stuck head keeps its
   rounded top (and it matches the tile's own corners when not stuck). */
.tile-head::before,
.tile-head::after {
  content: '';
  position: absolute;
  top: 0;
  width: var(--radius-md);
  height: var(--radius-md);
  pointer-events: none;
}

.tile-head::before {
  left: 0;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--radius-md) - 0.5px), var(--paper) var(--radius-md));
}

.tile-head::after {
  right: 0;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--radius-md) - 0.5px), var(--paper) var(--radius-md));
}

.tile-head + .tile-positions {
  margin-top: 0;
  border-top: 0;
}

.tile-positions {
  margin-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.tile-positions li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.tile-endorser {
  font-weight: var(--label-weight);
}

.tile-positions .pos {
  justify-self: end;
  text-align: right;
}

.tile-positions .pos-candidates {
  grid-column: 1 / -1;
  justify-self: start;
  text-align: left;
}

.row-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--data-size);
  line-height: var(--data-line);
}

.tile-empty {
  margin: var(--space-4) 0 0;
  color: var(--ink-muted);
}

.tile .report {
  margin-top: auto;
  padding-top: var(--space-4);
}

/* Pier */

.pier {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
}

.pier-teal {
  fill: var(--teal);
}

.pier-coral {
  fill: var(--coral);
}

.pier-sand {
  fill: var(--sand);
}

.pier-paper {
  fill: var(--paper);
}

.pier-ink {
  fill: var(--ink);
}

.pier-shadow {
  flood-color: var(--ink);
  flood-opacity: 0.18;
}

.pier-lines path,
.pier-smile {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.pier-lines path {
  stroke-opacity: 0.35;
}

/* Hero: the cut-paper banner, with the headline in its empty framed area.
   Phones get the tall illustration, wider screens the wide one. */

.hero {
  margin-top: var(--space-6);
}

.hero-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  aspect-ratio: 725 / 1300;
  padding: 12% 10% 0;
  border-radius: var(--radius-md);
  background: var(--sand) center / cover no-repeat;
  color: var(--ink);
}

/* Each city's hero image comes from /hero.css, made from its admin settings. */

.hero-banner h1,
.hero-banner p {
  margin: 0;
}

/* Phones: smaller type so the text fits the frame above the bridge. */
.hero-banner h1 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
}

.hero-banner .lede {
  font-size: var(--body-size);
  line-height: var(--body-line);
}

@media (min-width: 768px) {
  .hero-banner {
    aspect-ratio: 1600 / 678;
    padding: 0 0 0 7%;
    justify-content: center;
  }


  .hero-banner h1 {
    max-width: 40%;
    font-size: var(--h1-size);
    line-height: var(--h1-line);
  }

  .hero-banner .lede {
    max-width: 36%;
    font-size: var(--body-lg-size);
    line-height: var(--body-lg-line);
  }

}

@media (min-width: 1440px) {
  .hero-banner h1 {
    font-size: var(--display-size);
    line-height: var(--display-line);
    font-weight: var(--display-weight);
  }
}

/* The illustration is light in both themes, so its text stays dark.
   In dark mode --paper is the dark ground color. */
@media (prefers-color-scheme: dark) {
  .hero-banner {
    color: var(--paper);
  }
}

/* Pier's welcome on About and the 404. */

.welcome {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-4);
  align-items: center;
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.welcome p {
  margin: 0;
}

@media (min-width: 768px) {
  .welcome {
    grid-template-columns: 180px 1fr;
  }
}

/* Text pages */

.prose h2 {
  margin-top: var(--space-10);
}

.prose .welcome {
  margin-bottom: var(--space-6);
}

.bullets {
  list-style: disc;
  padding-left: var(--space-6);
}

.bullets li {
  margin-bottom: var(--space-2);
}

/* Deadline banner. coral holds only on-coral text at 18px bold or larger. */

.deadline-banner {
  background: var(--coral);
  color: var(--on-coral);
  padding: var(--space-2) var(--space-4);
}

.deadline-banner p {
  margin: 0;
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
  font-weight: var(--label-weight);
}

.deadline-banner a {
  color: var(--on-coral);
}

@media (min-width: 768px) {
  .deadline-banner {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
}

/* Register */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--teal);
  color: var(--on-teal);
  font-weight: var(--label-weight);
  text-decoration: none;
}

.button:hover {
  text-decoration: underline;
}

.button-secondary {
  background: var(--paper-raised);
  color: var(--teal);
  border: 1px solid var(--ink-muted);
}

.deadlines {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.deadlines li {
  display: grid;
  gap: var(--space-1);
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.deadline-label {
  font-weight: var(--label-weight);
}

.deadline-date {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
}

.unverified {
  color: var(--ink-muted);
  font-style: italic;
}

@media (min-width: 768px) {
  .deadlines {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}

/* Policy tables and open placeholders */

.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.policy-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--data-size);
  line-height: var(--data-line);
}

.policy-table th,
.policy-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.policy-table thead th {
  border-bottom: 2px solid var(--ink-muted);
}

/* Bracketed questions for counsel stay visible until resolved. */
.placeholder {
  background: var(--sand);
  color: var(--ink);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}

/* Opt-in session recording: the one-time question and the privacy page control.
   Both are added by analytics.js, so they never show without it. */
.consent {
  position: fixed;
  inset: auto var(--space-4) var(--space-4) var(--space-4);
  z-index: 20;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
}

.consent p {
  margin: 0 0 var(--space-4);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

button.button {
  border: 0;
  font: inherit;
  font-weight: var(--label-weight);
  cursor: pointer;
}

button.button-secondary {
  border: 1px solid var(--ink-muted);
}

.recording-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.recording-setting p {
  margin: 0;
}

/* My ballot: the voter's own picks, one compact row under each contest.
   The selected chip is sand, like the filter chips: never teal, coral, or the
   yes/no position colors (rule 8). */

.pick {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.pick-set,
.pick-justice {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* The label sits on the same line as the chips. */
.pick-legend {
  float: left;
  padding: 0;
  margin: 0 var(--space-2) var(--space-2) 0;
  font-size: var(--data-size);
  line-height: 36px;
}

.pick-ranks,
.pick-justice,
.pick-writein {
  clear: both;
}

.pick-heading {
  font-weight: var(--label-weight);
}

.pick-hint {
  color: var(--ink-muted);
}

.pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: var(--data-size);
  line-height: var(--data-line);
  cursor: pointer;
}

.pick-chip:has(input:checked),
.pick-chip[aria-pressed='true'] {
  background: var(--sand);
  border-color: var(--ink);
  font-weight: var(--label-weight);
}

.pick-chip:has(input:focus-visible) {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.pick-chip-quiet {
  border-style: dashed;
}

.pick-mark {
  font-weight: var(--label-weight);
}

.mb-pick .pick-mark {
  margin-right: 0.25em;
}

.pick-justice {
  margin-top: var(--space-2);
}

.pick-justice legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-size: var(--data-size);
  line-height: var(--data-line);
}

.pick-ranks {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.pick-rank,
.pick-writein,
.mb-share-field {
  display: grid;
  gap: var(--space-1);
  font-size: var(--data-size);
  line-height: var(--data-line);
}

/* Rank labels share one column so the menus line up. */
.pick-ranks {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.pick-rank {
  display: contents;
}

.pick-rank[hidden],
.pick-writein[hidden] {
  display: none;
}

.pick-rank select,
.pick-writein input,
.mb-share-field input {
  min-height: 36px;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: var(--body-size);
}

.mb-share-field input {
  min-height: 44px;
}

.pick-writein {
  margin-top: var(--space-2);
}

.pick-status {
  min-height: var(--data-line);
  margin: var(--space-2) 0 0;
  font-size: var(--data-size);
  line-height: var(--data-line);
  color: var(--ink-muted);
}

/* In a tile, the pick sits at the bottom with the error link, so picks line
   up across a row of tiles. */
.tile .tile-positions {
  margin-bottom: var(--space-4);
}

.tile .pick:not([hidden]) {
  margin-top: auto;
}

.tile .pick:not([hidden]) ~ .report {
  margin-top: 0;
}

/* The grid's contest column is narrow; the pick opens below the title. */
.grid-contest .pick {
  font-weight: var(--body-weight);
  text-align: left;
}

.my-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}

.my-bar-text {
  margin: 0;
  flex: 1 1 16rem;
}

.my-bar-meter {
  width: 100%;
  height: 12px;
  accent-color: var(--ink);
}

@media (min-width: 768px) {
  .my-bar-meter {
    width: 12rem;
  }
}

/* The My ballot page */

.my-ballot .actions {
  align-items: center;
}

.my-ballot button.button {
  border: 0;
  font: inherit;
  font-weight: var(--label-weight);
  cursor: pointer;
}

.my-ballot button.button-secondary {
  border: 1px solid var(--ink-muted);
}

.mb-progress {
  margin-bottom: var(--space-4);
}

.mb-progress p {
  margin-bottom: var(--space-2);
}

.mb-shared,
.mb-share {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  border: 1px solid var(--ink-muted);
}

.mb-share .button {
  margin-top: var(--space-4);
}

.mb-finish {
  margin-bottom: var(--space-6);
}

.mb-level {
  margin-top: var(--space-6);
}

.mb-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.mb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.mb-title {
  font-size: var(--body-size);
  line-height: var(--body-line);
}

/* Contest on the left; the pick on the right with "Change" under it. */
.mb-title {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.mb-pick {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 50vw;
  text-align: right;
}

.mb-edit {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: inline-block;
  min-height: 24px;
}

.mb-row.is-unmarked .mb-pick,
.mb-row.is-skipped .mb-pick {
  color: var(--ink-muted);
}

.mb-sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media print {
  .site-header nav,
  .deadline-banner,
  .skip,
  .site-footer ul,
  .mb-actions,
  .mb-share,
  .mb-shared,
  .mb-device,
  .mb-districts,
  .mb-edit,
  .mb-progress,
  .mb-finish,
  .mb-row.is-skipped {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.3;
  }

  .site-header {
    position: static;
    border: 0;
    padding: 0;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .my-ballot h1 {
    font-size: 18pt;
    line-height: 1.2;
    margin-bottom: 0;
  }

  .my-ballot .lede {
    font-size: 11pt;
    margin-bottom: 8pt;
  }

  .my-ballot h2 {
    font-size: 13pt;
    line-height: 1.2;
    margin: 8pt 0 2pt;
  }

  .mb-level {
    margin: 0;
  }

  .mb-levels {
    columns: 2;
    column-gap: 24pt;
  }

  .mb-row {
    display: block;
    padding: 3pt 0;
    break-inside: avoid;
  }

  .mb-title {
    font-size: 11pt;
    line-height: 1.3;
  }

  .site-footer {
    margin-top: 12pt;
    padding: 6pt 0 0;
  }
}

/* Contest descriptions, word for word from the voter pamphlet. */
.contest-desc {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--data-size);
  line-height: var(--data-line);
  font-weight: var(--body-weight);
  color: var(--ink-muted);
}

.contest-desc-label {
  font-weight: var(--label-weight);
}

.contest-guides {
  margin: 0 0 var(--space-2);
  font-size: var(--data-size);
  line-height: var(--data-line);
  color: var(--ink-muted);
}

.grid-contest .contest-guides {
  text-align: left;
  font-weight: var(--body-weight);
}

.grid-contest .contest-desc {
  text-align: left;
}

.desc-source {
  margin: calc(-1 * var(--space-4)) 0 var(--space-6);
  font-size: var(--data-size);
  line-height: var(--data-line);
  color: var(--ink-muted);
}

/* Editors' review screen (src/admin). Wide tables scroll inside their box, not the page. */
.admin-source {
  margin-block: var(--space-6);
}

.admin-changes {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.admin-changes th,
.admin-changes td {
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}

/* City lists on the admin home: fit the page, no sideways scroll. On narrow
   screens each city becomes a stacked card with labeled values. */
.admin-cities {
  width: 100%;
  border-collapse: collapse;
}

.admin-cities th,
.admin-cities td {
  padding: var(--space-2);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

.admin-cities .admin-address {
  display: block;
  font-weight: normal;
  font-size: var(--data-size);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.admin-cities td {
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .admin-cities thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-cities,
  .admin-cities tbody,
  .admin-cities tr,
  .admin-cities th,
  .admin-cities td {
    display: block;
  }

  .admin-cities tr {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
  }

  .admin-cities th,
  .admin-cities td {
    padding: 0 0 var(--space-1);
    border: 0;
  }

  .admin-cities td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
  }
}

.admin-message {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--sand);
}

.admin-source h4 a,
.admin-source h3 a {
  overflow-wrap: anywhere;
}

.admin-fix input,
.admin-fix select {
  max-width: 100%;
  font: inherit;
  padding: var(--space-1) var(--space-2);
}

.admin-preview-note {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--sand);
  color: var(--ink);
  text-align: center;
}

/* Admin tabs, city page and hero previews. */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.admin-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.admin-tabs a[aria-current="page"] {
  border-bottom-color: var(--teal);
  font-weight: var(--label-weight);
}

.admin-count {
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--sand);
}

.admin-inline {
  display: inline;
}

/* One tab per ballot on Agent updates. */
.admin-subtabs {
  margin-top: 0;
  font-size: var(--label-size);
}

.admin-subtabs a {
  min-height: 44px;
  padding-inline: var(--space-3);
}

/* The confirm step before approving a whole ballot. */
.admin-confirm {
  margin-block: var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--teal);
  border-radius: var(--radius-md);
}

.admin-confirm h3 {
  margin-top: 0;
}

/* Pages checked by hand fold up to one line each. */
.admin-hand summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
}

.admin-hand summary h4 {
  display: inline;
  margin: 0;
}

.admin-hand[open] summary {
  margin-bottom: var(--space-2);
}

.admin-ballot {
  margin-block: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.admin-heroes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

.admin-hero {
  margin: 0;
  max-width: 100%;
}

.admin-hero-wide {
  flex: 1 1 360px;
}

.admin-hero-tall {
  flex: 0 1 180px;
}

.admin-hero img,
.admin-hero-crop,
.admin-hero-empty {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--sand);
}

.admin-hero-wide img,
.admin-hero-wide .admin-hero-crop,
.admin-hero-wide .admin-hero-empty {
  aspect-ratio: 1600 / 678;
}

.admin-hero-tall img,
.admin-hero-tall .admin-hero-crop,
.admin-hero-tall .admin-hero-empty {
  aspect-ratio: 725 / 1300;
}

.admin-hero-empty {
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}

.admin-form textarea {
  width: 100%;
  max-width: 40rem;
  font: inherit;
}

/* voterguide.guru: the directory of cities and its map. */
.hub-hero h1 {
  max-width: 22ch;
}

.hub {
  display: grid;
  gap: var(--space-6);
}

/* Each county's cities in three columns, two on narrow phones. */
.hub-cities {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--space-6);
}

@media (min-width: 600px) {
  .hub-cities {
    columns: 3;
  }
}

.hub-cities li {
  break-inside: avoid;
}

.hub-cities li {
  margin-block: var(--space-2);
}

.hub-cities a {
  display: inline-block;
  min-height: 44px;
  padding-block: var(--space-2);
  font-weight: var(--label-weight);
}

.hub-map {
  margin: 0;
}

.hub-map svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}

.hub-counties path {
  fill: var(--sand);
  stroke: var(--line);
  stroke-width: 1;
}

.hub-city path {
  fill: var(--teal);
  stroke: var(--paper);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.hub-city:hover path,
.hub-city:focus path {
  fill: var(--ink);
}

.hub-city:focus {
  outline: none;
}

.hub-city:focus-visible path {
  stroke: var(--ink);
  stroke-width: 3;
}

.hub-labels text,
.hub-hover-label {
  fill: var(--ink);
  font-size: 15px;
  font-weight: var(--label-weight);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Unlabeled cities: their name appears on hover or focus (public/app.js). */
.hub-hover-label {
  opacity: 0;
  transition: opacity 0.12s ease-out;
}

.hub-hover-label.is-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hub-hover-label {
    transition: none;
  }
}

/* A new hero image being cropped (public/admin.js): drag or arrow keys. */
.admin-hero-crop {
  cursor: grab;
  touch-action: none;
  outline: 2px dashed var(--teal);
  outline-offset: 2px;
}

.admin-hero-crop:active {
  cursor: grabbing;
}

.admin-hero-crop:focus-visible {
  outline: 3px solid var(--ink);
}