/* Race and state views. Owner: the race/state module agent (js/views/race.js, js/views/state.js, js/views/race/**).
   Loaded after app.css, so rules here win ties. Keep new rules under a view prefix (.rv- for race, .sv- for state).
   Moved verbatim from app.css's "race view" section; shared map/chart/legend/seg-toggle rules stayed in app.css. */


.crumbs {
  margin-bottom: 12px;
  font-size: 14px;
}
.race-head {
  margin-bottom: 16px;
}
.head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px 36px;
}
.race-title {
  font-size: 28px;
  font-weight: 750;
  line-height: 1.15;
}
.race-sub {
  margin-top: 4px;
  color: var(--muted);
}
.head-block {
  margin-top: 16px;
}
.head-block h3,
.head-cands h3 {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rate-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.cands {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4.4em;
  align-items: baseline;
  gap: 10px;
}
.cand-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
}
.cand-name > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cand-votes {
  font-weight: 650;
}
.cand-share {
  color: var(--muted);
  text-align: right;
}
.cand-lead .cand-share {
  color: var(--text);
  font-weight: 650;
}
.cand-bar {
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-3);
}
.cand-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--grey);
  transition: width 0.5s ease;
}
.cand-bar i.bar-D {
  background: var(--d-fill);
}
.cand-bar i.bar-R {
  background: var(--r-fill);
}
.cand-bar i.bar-I {
  background: var(--grey);
}
.cand-bar i.bar-L {
  background: var(--grey);
}
.cand-bar i.bar-G {
  background: var(--grey);
}
.cand-total {
  margin-top: 8px;
  font-size: 12.5px;
}
.flag-list {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.flag {
  padding: 8px 12px;
  border-left: 3px solid var(--grey);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
  font-size: 13.5px;
}
.flag-warn {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
}
.notes {
  margin-top: 14px;
  font-size: 13.5px;
}
.notes summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}
.notes ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 20px;
}

.race-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.proj-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin: 4px 0 10px;
}
.proj-figure {
  display: flex;
  flex-direction: column;
}
.m.big {
  font-size: 42px;
  font-weight: 750;
  line-height: 1.05;
}
/* before any vote the figure is the model's starting point: it is labelled by the prior note and the 'baseline expectation' caption, never dimmed with opacity (that took the 36px margin to 2.76:1, WCAG 1.4.3) */
.is-prior .m {
  opacity: 1;
}
.prior-note {
  margin-bottom: 8px;
  font-size: 13px;
}
.proj-band {
  color: var(--muted);
}
.proj-band b {
  color: var(--text);
}
.kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 16px 0 0;
}
.kv > div {
  min-width: 0;
}
.kv dt {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kv dd {
  margin: 2px 0 0;
}
.kv.is-prior dd {
  color: var(--muted);
}

.bandviz {
  position: relative;
  height: 56px;
  margin: 8px 6px 2px;
}
.bv-track {
  position: absolute;
  inset: 16px 0 auto 0;
  display: flex;
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
}
.bv-r {
  flex: 1;
  background: color-mix(in srgb, var(--r-fill) 30%, transparent);
}
.bv-d {
  flex: 1;
  background: color-mix(in srgb, var(--d-fill) 30%, transparent);
}
.bv-band {
  position: absolute;
  top: 12px;
  height: 22px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-fill) 28%, transparent);
}
.bv-zero {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 1px;
  height: 28px;
  background: var(--faint);
}
.bv-proj {
  position: absolute;
  top: 9px;
  width: 4px;
  height: 28px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--accent-fill);
}
.bv-now {
  position: absolute;
  top: 13px;
  height: 20px;
  margin-left: -1px;
  border-left: 2px dashed var(--text);
}
.bv-scale {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}
.bv-key,
.chart-key {
  margin: 4px 0 0;
  font-size: 12px;
}
.chart-key {
  margin: 0 0 6px;
}
.k-proj,
.k-band,
.k-now {
  display: inline-block;
  margin: 0 5px 0 12px;
  vertical-align: -2px;
}
.k-proj:first-child,
.k-band:first-child,
.k-now:first-child {
  margin-left: 0;
}
.k-proj {
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent-fill);
}
.k-band {
  width: 14px;
  height: 10px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent-fill) 28%, transparent);
}
.k-now {
  height: 12px;
  border-left: 2px dashed var(--text);
}

.needs-sentence {
  margin: 4px 0 6px;
  font-size: 21px;
  line-height: 1.4;
}
.needs-share {
  font-size: 1.12em;
}
.needs-share.is-out {
  color: var(--warn);
}
.needs-detail {
  font-size: 13.5px;
}
.needs-final,
.needs-expect {
  font-size: 16px;
}
.meter2 {
  position: relative;
  height: 88px;
  margin: 8px 4px 0;
}
.m2-track {
  position: absolute;
  inset: 32px 0 auto 0;
  height: 10px;
  border-radius: 5px;
  background: var(--surface-3);
}
.m2-half {
  position: absolute;
  left: 50%;
  top: -5px;
  bottom: -5px;
  width: 1px;
  background: var(--faint);
}
.m2-mark {
  position: absolute;
  top: 26px;
  width: 3px;
  height: 22px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--text);
}
.m2-mark span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.m2-need span {
  bottom: 100%;
  margin-bottom: 4px;
}
.m2-expect {
  background: var(--accent-fill);
}
.m2-expect span {
  top: 100%;
  margin-top: 4px;
  color: var(--accent);
}
.m2-mark.is-left span {
  left: 0;
  transform: none;
}
.m2-mark.is-right span {
  left: auto;
  right: 0;
  transform: none;
}
.m2-scale {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}
.subhead {
  margin: 14px 0 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.where {
  margin: 0;
  padding: 0;
  list-style: none;
}
.where li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.where-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.race-viz {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
}
.chart-card {
  display: flex;
  flex-direction: column;
}
.chart-card > .empty {
  margin: auto 0;
}
.counties {
  padding-bottom: 8px;
}
.county-table .c-cname {
  min-width: 150px;
}
.row-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.chev {
  width: 1em;
  color: var(--muted);
}
.county-row {
  cursor: pointer;
}
.county-row:hover td,
.county-row.is-open td {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.county-detail td {
  padding: 10px 14px 14px 38px;
  background: var(--surface-2);
}
.cd-votes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 6px;
}
.cd-cand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.cd-facts {
  font-size: 12.5px;
}
.done-mark {
  color: var(--ok);
  font-weight: 700;
}


@media (max-width: 980px) {
  .head-grid,
  .race-panels,
  .race-viz {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .race-title {
    font-size: 23px;
  }
  .m.big {
    font-size: 36px;
  }
  .needs-sentence {
    font-size: 18px;
  }
  /* Fixed layout: five visible columns that always add up to the screen, never wider. */
  .county-table {
    table-layout: fixed;
    font-size: 13.5px;
  }
  .county-table th,
  .county-table td {
    padding: 8px 4px;
  }
  .county-table th {
    font-size: 10.5px;
    letter-spacing: 0.02em;
  }
  .county-table .cc-name {
    width: 30%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .county-table .cc-pct {
    width: 17%;
  }
  .county-table .cc-now {
    width: 17%;
    padding-right: 10px;
  }
  .county-table .cc-swing {
    width: 15%;
  }
  .county-table .cc-out {
    width: 21%;
  }
  .county-table .row-toggle {
    gap: 4px;
  }
  .county-table .chev {
    width: 0.8em;
    flex: none;
  }
  .county-detail td {
    padding: 10px 10px 14px;
  }
}

/* ===========================================================================================================
   Race page, second generation (prefix .rv-). Dark theme only; colours from the :root variables in app.css or
   from js/core/colors.js (anything that depends on a margin or a probability).
   =========================================================================================================== */

/* ---- hero: needle + projection + what the trailer needs ---- */
.rv-hero {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.rv-needle {
  display: flex;
  flex-direction: column;
}
.rv-gauge-holder {
  min-height: 60px;
}
.rv-fg {
  text-align: center;
}
.rv-fg-dial {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}
.rv-dial {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.rv-dial-hand {
  stroke: var(--text);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.rv-dial-hub {
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 1.2;
}
.rv-dial-mid {
  stroke: var(--bg);
  stroke-width: 1.2;
}
.rv-fg-end {
  position: absolute;
  bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.rv-fg-r {
  left: 8%;
}
.rv-fg-d {
  right: 8%;
}
.rv-fg-read {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}
.rv-fg-read b {
  font-size: 30px;
  font-weight: 750;
  line-height: 1.1;
}
.rv-fg-read[data-side='D'] b {
  color: var(--d);
}
.rv-fg-read[data-side='R'] b {
  color: var(--r);
}
.rv-fg-sub {
  margin-top: 4px;
  font-size: 12.5px;
}

/* the small static needle on cards and table rows */
.rv-mini {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.1;
}
.rv-mini .rv-dial {
  width: 58px;
}
.rv-mini-md .rv-dial {
  width: 84px;
}
.rv-mini-val {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rv-mini[data-side='D'] .rv-mini-val {
  color: var(--d);
}
.rv-mini[data-side='R'] .rv-mini-val {
  color: var(--r);
}
/* a baseline-only estimate keeps full-contrast text (WCAG 1.4.3); 'weak' is shown by a dotted underline plus the title and a screen-reader '(baseline only)' */
.rv-mini.is-weak .rv-mini-val {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.rv-odds {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.rv-odds > div {
  min-width: 0;
}
.rv-odds dt {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rv-odds dd {
  margin: 1px 0 0;
}

/* ---- tabs ---- */
.rv-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.rv-tabs [role='tab'] {
  position: relative;
  margin-bottom: -1px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: none;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
}
.rv-tabs [role='tab']:hover {
  color: var(--text);
}
.rv-tabs [role='tab'][aria-selected='true'] {
  border-color: var(--line);
  background: var(--bg);
  color: var(--text);
  box-shadow: inset 0 2px 0 var(--accent);
}
[role='tabpanel'][hidden] {
  display: none;
}

/* ---- map ---- */
.rv-layerbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rv-pick select {
  min-height: 32px;
  padding: 3px 8px;
  font-size: 13px;
}
.rv-pick select.is-active {
  border-color: var(--accent);
}
.rv-map-wrap {
  position: relative;
  min-height: 160px;
}
.rv-map {
  touch-action: pan-y;
}
.rv-map .rv-feats path {
  stroke: var(--bg);
  stroke-width: 0.9px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.rv-map .rv-feats path.is-off {
  fill: none;
  stroke: var(--line-soft);
  cursor: default;
}
.rv-map .rv-feats path.is-hl {
  stroke: var(--map-ink);
  stroke-width: 2.2px;
}
.rv-map .rv-outline {
  stroke: var(--text);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.rv-labels text {
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(13, 17, 23, 0.55);
  stroke-width: 2px;
  stroke-linejoin: round;
}
.rv-zoomctl {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  display: grid;
  gap: 4px;
}
.rv-zoomctl button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.rv-zoomctl button:hover {
  background: var(--surface-3);
}
.rv-zoomhint {
  margin-top: 4px;
  font-size: 11.5px;
}
.rv-map-msg {
  padding: 24px 0;
}

/* ---- county table with benchmarks ---- */
.rv-bsum {
  margin-bottom: 10px;
  font-size: 13.5px;
}
.rv-bsum-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-bsum-list li {
  padding: 7px 12px;
  border-left: 3px solid var(--grey);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
}
.rv-bsum-note {
  margin-top: 6px;
  font-size: 12px;
}
.rv-ct-tools {
  align-items: center;
}
.rv-bopts {
  margin: 0 0 10px;
  font-size: 13.5px;
}
.rv-bopts summary {
  display: inline-block;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}
.rv-bopts-body {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 20px;
  margin-top: 8px;
}
.rv-bopts-help {
  flex-basis: 100%;
  max-width: 78ch;
  font-size: 12.5px;
}
.rv-ct .col-tie,
.rv-ct .col-2nd {
  white-space: nowrap;
}
.rv-ct .is-dim {
  opacity: 0.55;
}
.rv-bw {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  cursor: help;
  vertical-align: 1px;
}
.rv-bw-tip {
  border-color: var(--tossup);
  color: var(--spend);
}
.rv-bw-bwe {
  border-color: var(--ok);
  color: var(--ok);
}
.rv-bw-warn {
  border-color: var(--warn);
  color: var(--warn);
}
.rv-bw-part {
  border-color: var(--line);
  color: var(--muted);
}
.rv-pace {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.rv-pace-on {
  border-color: var(--d);
  color: var(--d);
}
.rv-pace-behind {
  border-color: var(--r);
  color: var(--r);
}
.rv-pace-even {
  color: var(--muted);
}
.rv-early {
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
}
.rv-cd-bench {
  display: grid;
  gap: 3px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.rv-ct-more {
  padding: 10px 0 4px;
  text-align: center;
}
.rv-ct-compact .rv-bsum-note,
.rv-ct-compact .col-counted,
.rv-ct-compact .col-base,
.rv-ct-compact .col-2nd,
.rv-ct-compact .col-pace {
  display: none;
}

/* ---- alerts for this race ---- */
.rv-alerts {
  margin-top: 16px;
}

/* ---- history tab ---- */
.rv-hist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.rv-hist-msg {
  padding: 24px 0;
  text-align: center;
}
.rv-hct .rv-hc-pick {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rv-hct .rv-hc-pick:hover b {
  text-decoration: underline;
}
.rv-hcrow.is-sel td {
  background: color-mix(in srgb, var(--accent-fill) 8%, transparent);
}
.rv-hcrow.is-sel td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.rv-hc-sep td {
  padding-top: 14px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-hc-cand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.rv-hist-notes {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
}
.rv-hist-notes p {
  margin: 0;
}
.rv-lines {
  padding: 8px 12px;
  border-left: 3px solid var(--grey);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
}
.rv-lines.is-changed,
.rv-lines.is-old {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
}
.rv-cnote {
  font-size: 12.5px;
}
.rv-hm {
  min-width: 0;
}
.rv-hm .rv-pick select {
  max-width: 100%;
}
.rv-hist-table .is-out td {
  opacity: 0.6;
}
.rv-cycle {
  display: block;
  width: 100%;
  height: auto;
}
.rv-cz-d {
  fill: color-mix(in srgb, var(--d-fill) 7%, transparent);
}
.rv-cz-r {
  fill: color-mix(in srgb, var(--r-fill) 7%, transparent);
}
.rv-cz-grid {
  stroke: var(--line-soft);
}
.rv-cz-grid.is-zero {
  stroke: var(--faint);
  stroke-dasharray: 3 3;
}
.rv-cz-tick {
  fill: var(--muted);
  font-size: 11px;
}
.rv-cz-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}
.rv-cz-office {
  stroke: var(--text);
}
.rv-cz-pres {
  stroke: var(--muted);
  stroke-dasharray: 5 4;
}
.rv-cz-link {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 2 3;
}
.rv-cz-band {
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
}
.rv-cz-pt {
  stroke: var(--bg);
  stroke-width: 1.5;
}
.rv-cz-pt.is-D {
  fill: var(--d-fill);
}
.rv-cz-pt.is-R {
  fill: var(--r-fill);
}
.rv-cz-pt.is-even {
  fill: var(--mid);
}
.rv-cz-pt-pres {
  fill: var(--bg) !important;
  stroke-width: 2.2;
}
.rv-cz-pt-pres.is-D {
  stroke: var(--d-fill);
}
.rv-cz-pt-pres.is-R {
  stroke: var(--r-fill);
}
.rv-cz-pt-pres.is-even {
  stroke: var(--mid);
}
.rv-cz-pt-now {
  stroke: var(--accent);
  stroke-width: 2.4;
}
.rv-cz-val {
  fill: var(--text);
  font-size: 11.5px;
  font-weight: 650;
}
.rv-cz-val-pres {
  fill: var(--muted);
}
.rv-cycle-key {
  margin: 4px 0 0;
  font-size: 12px;
}
.rv-k {
  display: inline-block;
  width: 16px;
  margin: 0 5px 0 12px;
  vertical-align: 3px;
}
.rv-cycle-key .rv-k:first-child {
  margin-left: 0;
}
.rv-k-office {
  border-top: 2px solid var(--text);
}
.rv-k-pres {
  border-top: 2px dashed var(--muted);
}
.rv-k-now {
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
}
.rv-pres-note {
  margin-top: 8px;
  font-size: 12.5px;
}

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .rv-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .rv-needle {
    grid-column: 1 / -1;
  }
  .rv-needle .rv-fg {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 6px 24px;
    text-align: left;
  }
  .rv-needle .rv-fg-read {
    align-items: flex-start;
  }
  .rv-ct .col-base,
  .rv-ct .col-counted {
    display: none;
  }
}
@media (max-width: 980px) {
  .rv-hist-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .rv-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .rv-needle .rv-fg {
    display: block;
    text-align: center;
  }
  .rv-needle .rv-fg-read {
    align-items: center;
  }
  .rv-tabs [role='tab'] {
    flex: 1 1 0;
    padding-inline: 8px;
    text-align: center;
  }
  .rv-ct[data-target='tie'] .col-2nd,
  .rv-ct[data-target='second'] .col-tie {
    display: none;
  }
  .county-table.rv-ct .cc-pct {
    width: 14%;
  }
  .county-table.rv-ct .cc-now {
    width: 19%;
  }
  .county-table.rv-ct .col-tie,
  .county-table.rv-ct .col-2nd {
    width: 19%;
    padding-inline: 4px;
  }
  .county-table.rv-ct .cc-name {
    width: 29%;
  }
  .rv-bw {
    margin-left: 3px;
    padding: 0 4px;
  }
  .rv-ct-tools .seg-toggle {
    flex: 1 1 auto;
  }
  .rv-ct-tools .seg-toggle button {
    flex: 1 1 auto;
  }
  .rv-hist-table,
  .rv-pres-table,
  .rv-hct {
    font-size: 13.5px;
  }
  .rv-hist-table th,
  .rv-hist-table td,
  .rv-pres-table th,
  .rv-pres-table td,
  .rv-hct th,
  .rv-hct td {
    padding: 8px 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .county-map path {
    transition: none;
  }
}


/* ---- failover signals on the county table: text badges "Lower count held" and "Lower than manual" (never colour alone) ---------------- */
.rv-fo {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--warn);
  border-radius: 4px;
  color: var(--warn);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 16px;
  white-space: nowrap;
}
.rv-fo-conflict {
  border-style: dashed;
}
.rv-fo-sum {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  font-size: 13px;
}
.rv-fo-sum .rv-fo {
  margin-left: 0;
}
.rv-fo-detail {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--warn);
  font-size: 13px;
}
.rv-fo-detail p {
  margin: 0 0 4px;
}

/* the one-sentence summary under the race title (panels.js raceHeadline) */
.race-headline { font-size: var(--text-md, 15px); line-height: 1.45; margin: 6px 0 10px; max-width: 70ch; }
.race-title .st-icon-lg { color: var(--muted); }