/* The results page's own (results.html, js/resultspage.js; the owner's pick of mock-election-night): the top with
   where the count is, the tabs and search, the races and propositions, and the side column (the sources, the thread,
   how the count goes). Also the result marks other pages use: .rs-chip, .rs-face, .rs-bar (Orbit, person, position
   and measure pages: js/resultsmarks.js). */

.rs-main { width: min(100% - 32px, 1240px); margin: 14px auto 60px; color: #1e1a67; }
.rs-small-h { margin: 0 0 10px; color: #6b6890; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* the top: the place, the moment, how much is counted */
.rs-hero { position: relative; padding: 26px 28px 22px; border-radius: 28px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 0% 100%, rgba(0, 34, 255, .55), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(255, 0, 0, .45), transparent 55%), linear-gradient(160deg, #21167c, #120b4a);
  box-shadow: 0 20px 50px rgba(21, 14, 94, .3); }
.rs-main[data-state="counted"] .rs-hero { background: radial-gradient(120% 140% at 0% 100%, rgba(0, 34, 255, .35), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(255, 0, 0, .3), transparent 55%), linear-gradient(160deg, #3a2bb0, #21167c); }
.rs-main[data-state="official"] .rs-hero { background: radial-gradient(120% 140% at 0% 100%, rgba(150, 125, 252, .6), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(240, 180, 241, .55), transparent 55%), linear-gradient(160deg, #3a2bb0, #21167c); }
.rs-hero-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rs-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.rs-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 0 rgba(255, 77, 109, .7); animation: rs-pulse 1.6s infinite; }
.rs-live.is-still i { background: #8fe3b9; animation: none; }
@keyframes rs-pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 77, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); } }
@media (prefers-reduced-motion: reduce) { .rs-live i { animation: none; } }
.rs-place { font-weight: 700; opacity: .85; }
.rs-hero h1 { margin: 10px 0 4px; color: #fff; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.05; }
.rs-sub { margin: 0 0 16px; opacity: .88; font-size: 15px; }
/* how fresh the numbers are (the owner's pick of mock-results-fresh; js/resultsdata.js freshness): a dot, green fresh,
   amber no new numbers for a while, grey count finished; a line under the subtitle (on the dark top, the same look in
   light and dark), and at the start of Home's results card note (js/results.js). Dark mode's: tools/dark_hand.css */
.rf-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; }
.rf-dot.is-fresh { background: #0a7d4f; }
.rf-dot.is-quiet { background: #e8a400; }
.rf-dot.is-done { background: #9a97b8; }
.rs-sub:has(+ .rf-fresh:not([hidden])) { margin-bottom: 4px; }
.rf-fresh { margin: 0 0 16px; opacity: .88; font-size: 14px; line-height: 1.45; }
.rf-fresh .rf-dot.is-fresh { background: #8fe3b9; }
.rf-fresh .rf-dot.is-quiet { background: #ffc44d; }
.rf-fresh .rf-dot.is-done { background: #c9c6e6; }
.rs-progress { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.rs-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6f86ff, #c39cfa, #ff7a8a); transition: width .6s ease; }
.rs-count { margin: 8px 0 0; font-weight: 800; }
.rs-count:empty { display: none; }
.rs-how { max-width: 780px; margin: 6px 0 0; opacity: .88; font-size: 14px; line-height: 1.45; }
.rs-how a { color: #fff; font-weight: 700; }

/* the tabs and the search */
.rs-tools { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; }
.rs-tabs { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rs-tabs button { flex: none; border: 0; padding: 9px 15px; border-radius: 999px; background: #fff; color: #1e1a67; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(38, 27, 143, .08); }
.rs-tabs button small { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #efedfd; font-size: 12px; }
.rs-tabs button small:empty { display: none; }
.rs-tabs button[aria-selected="true"] { background: #21167c; color: #fff; }
.rs-tabs button[aria-selected="true"] small { background: rgba(255, 255, 255, .2); }
.rs-search { display: flex; align-items: center; gap: 8px; flex: 0 1 340px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(38, 27, 143, .08); }
.rs-search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; color: #1e1a67; font: inherit; outline: none; }

/* the page: results on the left, the side column on the right */
.rs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; margin-top: 16px; align-items: start; }
.rs-grid[hidden], .rs-tools[hidden] { display: none; }
.rs-list { min-width: 0; }
.rs-side { display: grid; gap: 14px; position: sticky; top: 14px; }
.rs-card { display: block; padding: 16px 18px; border-radius: 22px; background: #fff; color: #1e1a67; text-decoration: none; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.rs-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 0; border-top: 1px solid #f0eefb; }
.rs-src:first-of-type { padding-top: 0; border-top: 0; }
.rs-src b { font-size: 14px; }
.rs-src small { grid-column: 1; color: #6b6890; font-size: 12px; line-height: 1.35; }
.rs-src span { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 3px 9px; border-radius: 999px; background: #e7f6ee; color: #0a7d4f; font-weight: 800; font-size: 12px; white-space: nowrap; }
.rs-src.is-wait span { background: #fff1d6; color: #7a5200; }
.rs-srcnote { margin: 8px 0 0; color: #6b6890; font-size: 12px; line-height: 1.4; }
.rs-linkcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.rs-linkcard > span:first-child { font-size: 24px; }
.rs-linkcard b { display: block; }
.rs-linkcard small { display: block; color: #6b6890; font-size: 13px; line-height: 1.35; }
.rs-timeline ol { display: grid; margin: 0; padding: 0; list-style: none; }
.rs-timeline li { position: relative; display: grid; gap: 1px; padding: 0 0 12px 24px; color: #8a86b0; font-size: 13px; line-height: 1.35; }
.rs-timeline li::before { content: ''; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #dcd7fb; }
.rs-timeline li::after { content: ''; position: absolute; left: 8px; top: 16px; bottom: 0; width: 2px; background: #ece9fd; }
.rs-timeline li:last-child::after { display: none; }
.rs-timeline li.is-done, .rs-timeline li.is-now { color: #1e1a67; }
.rs-timeline li.is-done::before { background: #967dfc; }
.rs-timeline li.is-now::before { left: 1px; top: 1px; width: 16px; height: 16px; background: #fff; box-shadow: inset 0 0 0 4px #4232d4; }
.rs-share { justify-self: start; padding: 10px 16px; border: 0; border-radius: 999px; background: #d3cdfb; color: #150e5e; font: inherit; font-weight: 700; cursor: pointer; }

/* your ballot's line, the kinds, nothing here */
.rs-yourline { margin: 0 0 12px; padding: 10px 16px; border-radius: 16px; background: #fff; color: #1e1a67; font-size: 14px; }
.rs-group { display: table; margin: 22px 0 10px; padding: 4px 14px; border-radius: 999px; background: #fff; color: #1e1a67; font-size: 15px; }
.rs-group:first-child { margin-top: 0; }
.rs-group small { margin-left: 4px; color: #6b6890; font-weight: 700; }
.rs-empty { margin: 0; padding: 16px 18px; border-radius: 18px; background: #fff; color: #4a4675; line-height: 1.5; }
.rs-empty a, .rs-linkbtn { color: #4232d4; font-weight: 700; }
.rs-linkbtn { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.rs-showmore { display: block; margin-top: 12px; padding: 9px 16px; border: 0; border-radius: 999px; background: #d3cdfb; color: #150e5e; font: inherit; font-weight: 700; cursor: pointer; }

/* a race */
.rs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.rs-race { display: grid; gap: 4px; align-content: start; padding: 16px 18px 12px; border-radius: 22px; background: #fff; color: #1e1a67; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.rs-race header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.rs-race h3 { flex: 1 0 100%; margin: 0; font-size: 18px; line-height: 1.2; }
.rs-race h3 small { color: #6b6890; font-size: 13px; }
.rs-tag { padding: 2px 9px; border-radius: 999px; background: #efedfd; font-size: 12px; font-weight: 700; }
.rs-tag.is-q { background: #fff6e0; color: #6b4a00; }
.rs-cand { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "face who nums" "face bar bar"; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid #f3f1fd; }
.rs-race header + .rs-cand { border-top: 0; }
.rs-cand .rs-face { grid-area: face; align-self: start; }
.rs-who { grid-area: who; min-width: 0; }
.rs-who b { display: block; font-size: 15px; line-height: 1.3; }
.rs-who a { color: inherit; text-decoration: none; }
.rs-who a:hover { text-decoration: underline; }
.rs-who small { color: #6b6890; font-size: 12px; }
.rs-mine { padding: 0 6px; border-radius: 999px; background: #f3eeff; color: #5b3fd6; font-style: normal; font-weight: 800; }
.rs-nums { grid-area: nums; text-align: right; }
.rs-nums b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.rs-nums small { color: #6b6890; font-size: 12px; font-variant-numeric: tabular-nums; }
.rs-cand .rs-bar { grid-area: bar; }
.rs-cand:not(.is-top) .rs-bar i { opacity: .38; }
.rs-cand:not(.is-top) .rs-who b { font-weight: 600; }
.rs-more { justify-self: start; padding: 2px 0; border: 0; background: none; color: #6b6890; font: inherit; font-size: 13px; cursor: pointer; }
.rs-race footer { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 4px; padding-top: 10px; border-top: 1px dashed #e4e0fb; color: #4a4675; font-size: 13px; line-height: 1.4; }
.rs-race footer > span { flex: 1 1 200px; }
.rs-race footer > span:empty { display: none; }
.rs-race footer a { color: #4232d4; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rs-follow { padding: 4px 12px; border: 0; border-radius: 999px; background: #d3cdfb; color: #150e5e; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.rs-follow:disabled { background: #21167c; color: #fff; cursor: default; }
.rs-race.is-compact { padding: 12px 14px 10px; }
.rs-race.is-compact h3 { font-size: 16px; }
.rs-race.is-compact .rs-cand { padding: 5px 0; }

/* a proposition */
.rs-measure header .rs-chip { margin-left: auto; }
.rs-msub { margin: 0 0 8px; color: #4a4675; font-size: 14px; line-height: 1.4; }
.rs-split { position: relative; height: 14px; border-radius: 999px; background: #f4c7cc; overflow: hidden; }
.rs-split i { display: block; height: 100%; background: #2f9e6e; transition: width .6s ease; }
.rs-half { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #fff; }
.rs-splitlab { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: #6b6890; font-size: 12px; font-variant-numeric: tabular-nums; }
.rs-splitlab b { color: #1e1a67; font-size: 14px; }

/* the marks, here and on other pages: a status chip, a face in its party's ring, a bar */
.rs-chip { display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.4; vertical-align: 1px; white-space: nowrap; }
.rs-chip.is-leading, .rs-chip.is-passing { background: #ece9fd; color: #3a2bb0; }
.rs-chip.is-winning { background: #dff3ea; color: #0a7d4f; }
.rs-chip.is-won, .rs-chip.is-passed { background: #0a7d4f; color: #fff; }
.rs-chip.is-failed { background: #fde7e8; color: #c0262d; }
.rs-chip.is-failing { background: #fdf0f0; color: #a3252b; }
.rs-chip.is-close { background: #fff1d6; color: #7a5200; }
.rs-chip.is-runoff, .rs-chip.is-runoff-likely { background: #e9e6ff; color: #3a2bb0; }
.rs-chip.is-unopposed { background: #efedfd; color: #4a4675; }
.rs-face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #ece9fd; box-shadow: 0 0 0 2.5px #8a2be2; }
.rs-face.is-democrat { box-shadow: 0 0 0 2.5px #0022ff; }
.rs-face.is-republican { box-shadow: 0 0 0 2.5px #ff0000; }
.rs-face.is-libertarian { box-shadow: 0 0 0 2.5px #e8b400; }
.rs-face.is-green { box-shadow: 0 0 0 2.5px #2f9e6e; }
.rs-face img { width: 100%; height: 100%; object-fit: cover; }
.rs-face span { color: #4a4675; font-weight: 800; font-size: 14px; }
.rs-bar { display: block; height: 7px; border-radius: 999px; background: #f1effa; overflow: hidden; }
.rs-bar i { display: block; height: 100%; border-radius: 999px; background: #b6aef0; transition: width .6s ease; }
.rs-bar i.is-democrat { background: #0022ff; }
.rs-bar i.is-republican { background: #ff0000; }
.rs-bar i.is-libertarian { background: #e8b400; }
.rs-bar i.is-green { background: #2f9e6e; }

/* phones: one column, the side column after the results */
@media (max-width: 900px) {
  .rs-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-side { position: static; }
}
@media (max-width: 560px) {
  .rs-main { width: min(100% - 24px, 1240px); }
  .rs-hero { padding: 20px 18px 18px; border-radius: 22px; }
  .rs-search { flex: 1 1 100%; }
  .rs-race { padding: 14px 14px 10px; border-radius: 20px; }
  .rs-who b { font-size: 14px; }
  .rs-nums b { font-size: 16px; }
}

/* a person's page: how their race went, and "-elect" (js/resultsmarks.js) */
.rs-pstrip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 10px 0 0; padding: 10px 14px; border-radius: 16px; background: #f4f2fb; color: #1e1a67; }
.rs-pstrip.is-win { background: #e3f5ec; }
.rs-pstrip.is-mid { background: #f1efff; }
.rs-pstrip b { display: block; font-size: 15px; }
.rs-pstrip small { color: #4a4675; font-size: 13px; }
.rs-pstrip > a { color: #4232d4; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
.rs-pico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; font-weight: 900; }
.rs-pico.is-win { background: #0a7d4f; color: #fff; }
.rs-pico.is-close { background: #e8a400; color: #fff; }
.rs-elect { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 8px 0 0; padding: 10px 14px; border-radius: 16px; background: linear-gradient(110deg, #eef0ff, #fdeef5); color: #1e1a67; }
.rs-elect b { display: block; font-size: 15px; }
.rs-elect small { color: #4a4675; font-size: 13px; }

/* a position's page: now and next, the race */
.rs-postile { color: #1e1a67; }
.rs-postile .pos-h small { color: #6b6890; font-weight: 600; }
.rs-handoff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 4px 0 12px; text-align: center; }
.rs-handoff > a { display: grid; justify-items: center; gap: 3px; padding: 12px 6px; border-radius: 18px; background: #f7f5ff; color: inherit; text-decoration: none; }
.rs-handoff > a.is-next { background: linear-gradient(160deg, #eef0ff, #fdeef5); box-shadow: inset 0 0 0 2px #dcd5fd; }
.rs-handoff > a:only-child { grid-column: 1 / -1; }
.rs-handoff .rs-face { width: 54px; height: 54px; }
.rs-handoff b { font-size: 14px; }
.rs-handoff small { color: #6b6890; font-size: 12px; line-height: 1.3; }
.rs-arrow { color: #967dfc; font-size: 22px; font-weight: 900; }
.rs-mini { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 54px; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.rs-mini a { color: inherit; }
.rs-mini > b { text-align: right; font-variant-numeric: tabular-nums; }
.rs-mini.is-dim { color: #6b6890; }
.rs-mini.is-dim .rs-bar i { opacity: .4; }
.rs-tilenote { margin: 10px 0 0; color: #6b6890; font-size: 13px; }
.rs-tilenote a { color: #4232d4; font-weight: 700; }

/* the propositions: a stamp on a card; one proposition's result and what happens next */
.rs-mstamp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 6px 0 4px; }
.rs-mstamp .rs-chip { margin: 0; }
.rs-mstamp .rs-split { height: 8px; }
.rs-mstamp small { grid-column: 1 / -1; color: #6b6890; font-size: 12px; }
.rs-next { margin: 14px 0; padding: 18px 20px; border-radius: 22px; background: #fff; color: #1e1a67; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); scroll-margin-top: 80px; }
.rs-next h2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 20px; }
.rs-next h2 .rs-chip { margin: 0; }
.rs-road { margin: 14px 0 4px; padding: 0; list-style: none; }
.rs-road li { position: relative; display: grid; gap: 1px; padding: 0 0 12px 26px; color: #4a4675; font-size: 14px; line-height: 1.45; }
.rs-road li::before { content: ''; position: absolute; left: 4px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #dcd7fb; }
.rs-road li::after { content: ''; position: absolute; left: 8px; top: 17px; bottom: 0; width: 2px; background: #ece9fd; }
.rs-road li:last-child::after { display: none; }
.rs-road li b { color: #1e1a67; }
.rs-road li.is-done::before { background: #0a7d4f; }
.rs-road li.is-now::before { left: 1px; top: 2px; width: 16px; height: 16px; background: #fff; box-shadow: inset 0 0 0 4px #4232d4; }
.rs-nextno { margin: 12px 0 0; color: #4a4675; font-size: 15px; line-height: 1.5; }
.rs-meet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 10px 0 0; padding: 10px 14px; border-radius: 16px; background: #f7f5ff; }
.rs-meet > span:first-child { font-size: 22px; }
.rs-meet b { display: block; font-size: 14px; }
.rs-meet small { color: #4a4675; font-size: 13px; }
.rs-meet a { color: #4232d4; }

/* Orbit: a badge on an officeholder who was on the ballot; faded when they didn't win */
a.circle .rs-rib { position: absolute; right: 2%; bottom: 2%; z-index: 2; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; background: #0a7d4f; color: #fff; font-style: normal; font-weight: 900; font-size: 11px; line-height: 1; pointer-events: none; }
a.circle .rs-rib.is-leading { background: #4232d4; }
a.circle .rs-rib.is-close { background: #e8a400; }
a.circle .rs-rib.is-runoff, a.circle .rs-rib.is-runoff-likely { background: linear-gradient(90deg, #6f86ff, #e86a9a); font-size: 10px; }
a.circle.rs-ran { opacity: .5; filter: grayscale(.7); }

/* the Vote page's runoff (js/runoff.js) */
.ro-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 14px 0; color: #1e1a67; }
.ro-card.is-none { grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 18px; border-radius: 22px; background: #fff; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.ro-card.is-none b { display: block; font-size: 17px; }
.ro-card.is-none p { margin: 4px 0 0; color: #4a4675; font-size: 14px; line-height: 1.45; }
.ro-card a { color: #4232d4; font-weight: 700; }
.ro-ico { font-size: 28px; line-height: 1; }
.ro-hero { display: grid; align-content: start; gap: 2px; padding: 20px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 140% at 0% 100%, rgba(0, 34, 255, .5), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(255, 0, 0, .4), transparent 55%), linear-gradient(160deg, #21167c, #120b4a); }
.ro-kicker { margin-bottom: 6px; color: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ro-days { font-size: 18px; font-weight: 700; }
.ro-days b { font-size: 46px; line-height: 1; }
.ro-hero p { margin: 10px 0 0; opacity: .9; font-size: 14px; }
.ro-steps { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.ro-steps li { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .12); font-size: 14px; }
.ro-steps i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-style: normal; font-weight: 800; font-size: 12px; }
.ro-steps li.is-done i { background: #8fe3b9; color: #0b4d31; }
.ro-ballot { padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.ro-small-h { margin: 0 0 10px; color: #6b6890; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ro-race + .ro-race { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #e4e0fb; }
.ro-title { display: block; margin-bottom: 10px; font-size: 17px; }
.ro-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.ro-vs > div { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: #f7f5ff; text-align: center; }
.ro-vs .rs-face { width: 54px; height: 54px; }
.ro-vs a { color: inherit; text-decoration: none; }
.ro-vs a b { font-size: 15px; line-height: 1.2; }
.ro-vs small { color: #6b6890; font-size: 12px; }
.ro-x { color: #8a86b0; font-weight: 900; }
.ro-pick { margin-top: 4px; padding: 6px 14px; border: 0; border-radius: 999px; background: #d3cdfb; color: #150e5e; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.ro-pick.is-on { background: #21167c; color: #fff; }
.ro-note { margin: 12px 0 0; padding: 8px 12px; border-radius: 12px; background: #fff6e0; color: #5a4100; font-size: 13px; }
.ro-compare { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 999px; background: #d3cdfb; color: #150e5e !important; text-decoration: none; }
@media (max-width: 760px) { .ro-card { grid-template-columns: minmax(0, 1fr); } }

/* Home (js/homeafter.js): the results banner, new officials, this week, first 100 days */
.hb-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 0 0 14px; }
.hb-banner { flex: 1 1 320px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 22px; color: #fff; text-decoration: none;
  background: linear-gradient(100deg, #1b2bd6, #5b3fd6 45%, #d63a6b); box-shadow: 0 12px 30px rgba(21, 14, 94, .25); }
.hb-banner.is-counted { background: linear-gradient(100deg, #3a2bb0, #5b3fd6 55%, #b13a8a); }
.hb-banner.is-official { background: linear-gradient(100deg, #4b33c9, #8d5be0 60%, #c86ab8); }
.hb-live { display: inline-flex; flex: none; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hb-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d6d; animation: rs-pulse 1.6s infinite; }
.hb-live.is-still i { background: #8fe3b9; animation: none; }
@media (prefers-reduced-motion: reduce) { .hb-live i { animation: none; } }
.hb-words { flex: 1; min-width: 0; display: grid; }
.hb-words b { color: #fff; font-size: 17px; }
.hb-words small { color: #fff; opacity: .88; font-size: 13px; }
.hb-go { flex: none; padding: 7px 14px; border-radius: 999px; background: #fff; color: #21167c; font-weight: 800; font-size: 14px; }
.hb-thread { display: flex; align-items: center; padding: 10px 16px; border-radius: 22px; background: #fff; color: #21167c; font-weight: 800; text-decoration: none; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
@media (max-width: 560px) { .hb-go { display: none; } .hb-thread { flex: 1 1 100%; justify-content: center; } }
.hb-h { margin: 0 0 8px; color: #1e1a67; font-size: 20px; }
.hb-one { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #f0eefb; }
.hb-h + .hb-one { border-top: 0; }
.hb-one .rs-face { width: 44px; height: 44px; }
.hb-one a { color: inherit; text-decoration: none; }
.hb-one b { display: block; color: #1e1a67; font-size: 15px; }
.hb-one small { color: #4a4675; font-size: 13px; line-height: 1.35; }
.hb-one.is-same { grid-template-columns: 44px minmax(0, 1fr); }
.hb-same { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #efedfd; color: #6b6890; font-size: 20px; font-weight: 900; }
.hb-meet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: #f7f5ff; }
.hb-meet b { display: block; color: #1e1a67; font-size: 14px; }
.hb-meet small { color: #4a4675; font-size: 13px; }
.hb-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hb-btn { padding: 8px 14px; border-radius: 999px; background: #d3cdfb; color: #150e5e; font-weight: 700; font-size: 14px; text-decoration: none; }
.hb-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; color: inherit; text-decoration: none; }
.hb-row > span:first-child { font-size: 20px; text-align: center; }
.hb-row .rs-face { width: 30px; height: 30px; }
.hb-row b { display: block; color: #1e1a67; font-size: 14px; }
.hb-row small { color: #6b6890; font-size: 12px; }
.hb-row:hover b { text-decoration: underline; }
.hb-quiet { margin: 0; color: #4a4675; font-size: 14px; line-height: 1.45; }
.hb-quiet a { color: #4232d4; font-weight: 700; }
.hb-days { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: #efedfd; overflow: hidden; }
.hb-days i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #967dfc, #f0b4f1); }
.hb-nextnote { display: block; opacity: .9; font-size: 13px; line-height: 1.4; }

/* the results page's 🗺️ By precinct (js/precinctmap.js) */
.pm-wait { color: #6b6890; }
.pm-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pm-pick select { max-width: 100%; padding: 9px 14px; border: 0; border-radius: 999px; background: #d3cdfb; color: #150e5e; font: inherit; font-weight: 700; }
.pm-key { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #4a4675; font-size: 13px; }
.pm-key i { display: inline-block; width: 14px; height: 14px; margin-left: 6px; border-radius: 4px; }
.pm-wrap { position: relative; }
.pm-map { height: min(68vh, 620px); border-radius: 22px; overflow: hidden; background: #eef0f3; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.pm-card { position: absolute; right: 10px; top: 10px; z-index: 2; min-width: 190px; max-width: 240px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .96); color: #1e1a67; font-size: 13px; box-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10); }
.pm-card > b { display: block; font-size: 14px; }
.pm-card > small { display: block; margin-bottom: 4px; color: #6b6890; font-size: 12px; }
.pm-card div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
@media (max-width: 560px) { .pm-card { position: static; max-width: none; margin-top: 10px; } .pm-map { height: 60vh; } }
.pm-note { margin: 10px 0 0; color: #6b6890; font-size: 12px; line-height: 1.45; }
.pm-list { margin-top: 12px; padding: 12px 16px; border-radius: 18px; background: #fff; }
.pm-list summary { color: #4232d4; font-weight: 700; cursor: pointer; }
.pm-list ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.pm-list li { display: flex; justify-content: space-between; gap: 8px; }