:root {
	--accent: #d32f2f;
	--black: #111111;
	--gray-0: #f5f5f5;
	--gray-1: #eeeeee;
	--gray-2: #e0e0e0;
	--gray-3: #bdbdbd;
	--gray-4: #9e9e9e;
	--gray-5: #8a8a8a;
	--gray-6: #666666;
	--gray-7: #333333;
	--white: #ffffff;
	--arrow: #9a9a95;
	--button-active: #ebebe8;
	--excluded: #989898;
	--font-mono: "IBM Plex Mono", monospace;
	--font-sans: "Hanken Grotesk", sans-serif;
	--font-serif: "Newsreader", Georgia, serif;
	--inset: 1rem;
	--tile-fallback: #a3a3a0;
	--tile-text: #2e2e2e;
}

@media (max-width: 40rem) {
	:root { --inset: 0.8rem; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
	background: var(--white);
	color: var(--black);
	font-family: var(--font-sans);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--gray-4); text-decoration: none; transition: color 0.15s; }
button { -webkit-tap-highlight-color: transparent; }
.inner { max-width: 56rem; margin: 0 auto; padding: 0 2rem; }

@media (max-width: 56rem) {
	.inner { padding: 0 1rem; }
}

.site-head {
	position: relative;
	background: #f5f5f3;
}
.site-head::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 3px;
	background: radial-gradient(circle at 50% 50%, #c4c4bf 1px, transparent 1.4px) 0 0 / 6px 3px repeat-x;
	pointer-events: none;
}
.site-head-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 3.3rem;
	padding: 0.45rem 0 0.7rem;
}
.wordmark {
	flex: 0 0 auto;
	color: var(--black);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.dropdown { position: relative; display: inline-flex; flex: 0 0 auto; }
.dropdown-button {
	display: inline-flex; align-items: center;
	cursor: pointer;
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
}
.dropdown-arrow {
	margin-left: 0.35rem;
	color: var(--gray-4);
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1;
	transition: color 0.15s, transform 0.15s;
}
.dropdown.open .dropdown-arrow { transform: rotate(180deg); }
.dropdown-list {
	position: absolute; left: 0; top: calc(100% + 0.45rem);
	z-index: 70;
	display: none;
	min-width: 10.5rem;
	background: var(--white);
	border: 1px solid var(--black);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.dropdown.open .dropdown-list { display: block; }
.dropdown-list a {
	display: block;
	padding: 0.5rem 0.8rem;
	border-bottom: 1px solid var(--gray-1);
	color: var(--gray-6);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.dropdown-list a:last-child { border-bottom: none; }
.dropdown-list a.on { color: var(--accent); font-weight: 600; }

.header-nav {
	position: relative;
	display: flex; align-items: center;
}
.header-dropdown { position: static; }
#officeDropdown { position: relative; }
.header-nav-button {
	padding: 0.5rem 0.55rem;
	color: var(--black);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background 0.15s;
	white-space: nowrap;
}
.header-nav-button .dropdown-arrow { margin-left: 0.4rem; color: var(--arrow); }
.header-dropdown.open .header-nav-button { background: var(--button-active); }
.header-nav-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.header-nav-slash {
	padding: 0 0.05rem;
	color: #c2c2bd;
	font-family: var(--font-mono);
	font-size: 0.7rem;
}
.header-nav-list {
	left: auto; right: 0;
	min-width: 11rem;
}
#officeDropdown .header-nav-list { left: 0; right: auto; }

.header-nav-list-states {
	overflow-y: auto;
	width: 34rem;
	max-width: calc(100vw - 2rem);
	max-height: min(72vh, 36rem);
}
.header-nav-list .nationwide-link {
	display: flex; align-items: center; gap: 0.5rem;
	min-height: 2.75rem;
	border-bottom: 1px solid var(--gray-2);
	color: var(--black);
}
.nationwide-link-note {
	margin-left: auto;
	color: var(--gray-4);
	font-size: 0.5rem;
	letter-spacing: 0.12em;
}
.state-columns {
	columns: 3; column-gap: 0;
	padding: 0.35rem 0;
}
.state-columns a {
	break-inside: avoid;
	padding: 0.42rem 0.8rem;
	border-bottom: none;
}

#yearDropdown { position: relative; }
.header-nav-list-years {
	left: 0; right: auto;
	overflow-y: auto;
	max-height: min(64vh, 26rem);
}

.previous-next {
	display: inline-flex; align-items: center;
	margin-left: 0.5rem;
	padding-left: 0.5rem;
}
.previous-next::before {
	content: "";
	width: 1px;
	height: 1rem;
	margin-right: 0.5rem;
	background: #d9d9d5;
}
.previous-next a {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.5rem 0.55rem;
	color: #5c5c57;
	font-family: var(--font-mono);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	transition: background 0.15s, color 0.15s;
}
.previous-next-arrow { color: var(--arrow); font-size: 0.95rem; line-height: 0; }
.previous-next a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 40rem) {
	.site-head:has(.header-nav) {
		position: sticky; top: calc(-0.75rem - 0.72rem * 1.55);
		z-index: 60;
	}
	.site-head-row {
		flex-wrap: wrap; row-gap: 0;
		padding: 0.6rem 0 calc(0.25rem + 2px);
	}
	.wordmark { font-size: 0.72rem; letter-spacing: 0.26em; }
	.header-nav {
		flex: 1 1 100%;
		margin: 0.15rem -0.55rem 0;
	}
	#officeDropdown,
	#yearDropdown { position: static; }
	.header-nav-list,
	#officeDropdown .header-nav-list,
	.header-nav-list-years { left: 0.55rem; right: 0.55rem; min-width: 0; }
	.header-nav-list-states { width: auto; }
	.state-columns { columns: 2; }
}
@media (max-width: 30rem) {
	.previous-next { margin-left: auto; }
	.previous-next a { padding: 0.5rem 0.65rem; }
	.previous-next-year { display: none; }
}
@media (max-width: 23rem) {
	.header-nav-button { padding: 0.5rem 0.4rem; letter-spacing: 0.1em; }
	.previous-next { margin-left: 0.3rem; padding-left: 0; }
	.previous-next::before { margin-right: 0.3rem; margin-left: 0.3rem; }
	.previous-next a { padding: 0.5rem 0.45rem; }
}

.title-block {
	--tb-top: 2.25rem;
	--tb-near: 1.35rem;
	--tb-mid: 1.1rem;
	--tb-far: 1.75rem;
	padding: var(--tb-top) 0 0.9rem;
}

.title-label {
	display: flex; align-items: center; gap: 0.6em;
	margin-bottom: var(--tb-near);
	color: var(--gray-6);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}
.title-label b { color: var(--black); font-weight: 600; }
.title-label::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	margin-left: 0.6em;
	background: var(--gray-2);
}
.title-label-link {
	order: 1;
	margin: calc(-0.31rem - 1px) 0 calc(-0.31rem - 1px) 0.42rem;
	padding: 0.3rem 0.6rem;
	background: var(--white);
	border: 1px solid var(--gray-2);
	color: var(--accent);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	transition: color 0.15s, border-color 0.15s;
}

.title-row {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem 2rem;
}
.title-block h1 {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 2.8vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	text-box: trim-both cap alphabetic;
	text-wrap: balance;
}

.result-bar {
	flex: 0 0 auto;
	width: min(19rem, 100%);
}
.result-labels {
	display: flex; justify-content: space-between; gap: 1rem;
	margin-bottom: 0.4rem;
	color: var(--gray-6);
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.2;
}
.result-labels > span { text-box: trim-both cap alphabetic; }
.result-labels b { color: var(--black); font-weight: 600; }
.result-track {
	display: flex;
	height: 6px;
	background: var(--gray-1);
}
.result-track i { display: block; height: 100%; background: var(--party); }
.result-track .result-rest { background: #d6d6d3; }

.controls-row {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
	margin-top: var(--tb-far);
	border-bottom: 1px solid var(--gray-2);
}
.tab-group { display: inline-flex; gap: 1.5rem; }
.tab-button,
.district-button {
	display: inline-block;
	margin-bottom: -1px;
	padding: 0 0 0.8rem;
	cursor: pointer;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--gray-4);
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-box: trim-both cap alphabetic;
	transition: color 0.15s, border-color 0.15s;
	white-space: nowrap;
}
.tab-button.on,
#pickDist.district-chosen .district-button { border-bottom-color: var(--black); color: var(--black); }
.dropdown.open .district-button { color: var(--black); }
.tab-button:focus-visible,
.district-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dist-pick { align-items: flex-end; }
.dist-pick::before {
	content: "";
	align-self: flex-end;
	width: 1px;
	height: 1rem;
	margin: -0.5rem 1.1rem 0.75rem 0;
	background: var(--gray-2);
}
.district-button .dropdown-arrow { display: inline-block; vertical-align: 0.35em; margin-left: 0.4rem; font-size: 0.65rem; }
.district-label-short { display: none; }

.district-list {
	--district-tile: 2.6rem;
	left: auto; right: 0; top: calc(100% + 0.6rem);
	overflow-y: auto;
	width: max-content;
	min-width: 17rem;
	max-width: calc(100vw - 2rem);
	max-height: min(70vh, 30rem);
	border-color: var(--gray-2);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}
.district-list .all-districts {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 0.8rem 0.9rem 0.8rem 0.85rem;
	border-left: 2px solid transparent;
	color: var(--black);
	font-family: var(--font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.district-list .all-districts.on { border-left-color: var(--gray-4); }
.seat-counts {
	display: flex; gap: 0.8rem;
	color: var(--gray-6);
	font-size: 0.78rem;
	font-weight: 500;
}
.seat-counts i {
	display: inline-block;
	vertical-align: 0.02em;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.35rem;
	background: var(--party);
	border-radius: 2px;
}
.district-grid {
	display: flex; flex-wrap: wrap; gap: 3px;
	max-width: calc(8 * var(--district-tile) + 7 * 3px + 1.8rem);
	padding: 0.9rem;
}
.district-list .district-tile {
	--tile: color-mix(in srgb, var(--party, var(--tile-fallback)) 20%, var(--white));
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
	width: var(--district-tile);
	height: 2.4rem;
	padding: 0;
	background: var(--tile);
	border: none;
	border-radius: 2px;
	color: var(--tile-text);
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.district-list .district-tile.on { background: var(--black); box-shadow: none; color: var(--white); }
.district-list .district-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 40rem) {
	.title-block {
		--tb-top: 1.6rem;
		--tb-near: 1.05rem;
		--tb-mid: 0.9rem;
		--tb-far: 1.3rem;
	}
	.title-row { flex-wrap: wrap; row-gap: var(--tb-mid); }
	.result-bar { flex: 1 1 100%; width: 100%; }
	.result-labels { margin-bottom: 0.6rem; }
	.controls-row { gap: 1.1rem; }
	.tab-button,
	.district-button { font-size: 0.9rem; }
	.district-list { --district-tile: 2.25rem; min-width: 0; }
	.district-grid { max-width: calc(8 * var(--district-tile) + 7 * 3px + 1.5rem); padding: 0.75rem; }
}
@media (max-width: 23rem) {
	.district-label { display: none; }
	.district-label-short { display: inline; }
}

.map-area { position: relative; overflow: hidden; margin-top: -0.9rem; padding-top: 0.9rem; text-align: center; -webkit-user-select: none; user-select: none; }
.map-area svg { max-width: 100%; max-height: 28rem; padding: 0.5rem 0; }
.map-area svg path { cursor: pointer; }

.map-area svg path.map-outline {
	fill: none;
	pointer-events: none;
	stroke: var(--black);
	stroke-linecap: butt;
	stroke-linejoin: round;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

#svg_map path.is-hover:not([data-excluded]) { mask: url(#hover-glow); }
#svg_map path[data-excluded="1"] { cursor: default; fill: var(--excluded); }
#svg_map path.out-of-district { cursor: default; fill: var(--gray-1); }
#svg_map path.has-note { cursor: pointer; }
#svg_map .split-hatch { fill: url(#split-hatch); pointer-events: none; stroke: none; }

.map-caption {
	display: flex; align-items: center; justify-content: center;
	height: 2.1rem;
	border-top: 1px solid var(--gray-2);
	border-bottom: 1px solid var(--gray-2);
	color: var(--gray-6);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.01em;
}
.map-caption > :not([hidden]) ~ :not([hidden])::before { content: "\00B7"; margin: 0 0.6rem; color: var(--gray-2); font-weight: 400; letter-spacing: normal; }
.caption-place {
	color: var(--black);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.caption-leader { color: var(--party); font-weight: 600; }

@media (max-width: 40rem) {
	.map-caption {
		flex-wrap: wrap; row-gap: 0.1rem;
		height: auto;
		min-height: 2.1rem;
		padding: 0.35rem 0;
		font-size: 0.6rem;
	}
	.map-caption > :not([hidden]) ~ :not([hidden])::before { margin: 0 0.3rem; }
}

.scoreboard-label, .section-label {
	color: var(--gray-4);
	font-family: var(--font-mono);
	font-size: 0.55rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.6rem;
	text-transform: uppercase;
}
.section-label { margin-top: 1.5rem; }
.scoreboard-label, .election-notes .section-label { padding-left: var(--inset); }

.scoreboard-head {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	margin-top: 0.75rem;
}
.scoreboard-actions { display: flex; gap: 0.4rem; }
.clear-selection,
.place-details {
	display: none;
	padding: 0.3rem 0.6rem;
	cursor: pointer;
	background: var(--white);
	border: 1px solid var(--gray-2);
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: 0.6rem;
	font-weight: 500;
	line-height: 1.2;
	transition: color 0.15s, border-color 0.15s;
}
.has-selection .clear-selection { display: inline-block; }
.place-details.on { display: inline-block; }

.candidates {
	display: grid; column-gap: 1.5rem;
	grid-template-columns: calc(1.6rem + var(--inset)) minmax(6rem, max-content) minmax(3rem, 1fr) auto auto;
	border-bottom: 1px solid var(--gray-2);
}
.cand {
	position: relative;
	display: grid; align-items: center;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	grid-template-areas: "party name bar perc votes";
	padding: 0.8rem var(--inset);
	background: var(--white);
	transition: background 0.15s;
}
.cand + .cand { border-top: 1px solid var(--gray-2); }
.cand::before {
	content: "";
	align-self: baseline;
	grid-row: 1;
	grid-column: 1;
	width: 0;
	height: calc(0.8rem + 0.5cap);
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 600;
}
.cand-party {
	display: block; align-content: center;
	grid-area: party;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid currentColor;
	color: var(--party, var(--gray-6));
	font-family: var(--font-mono);
	font-size: 0.6rem;
	font-weight: 600;
	text-align: center;
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}
.cand-name {
	align-self: baseline;
	grid-area: name;
	overflow: hidden;
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cand-track { grid-area: bar; overflow: hidden; height: 6px; background: var(--gray-1); }
.cand-bar { height: 100%; background: var(--party, var(--gray-4)); }
.cand-perc {
	align-self: center;
	grid-area: perc;
	font-family: var(--font-mono);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	text-align: right;
	text-box: trim-both cap alphabetic;
	white-space: nowrap;
}
.cand-votes {
	align-self: center;
	grid-area: votes;
	color: var(--gray-4);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-align: right;
	text-box: trim-both cap alphabetic;
	white-space: nowrap;
}
.candidates:has(.cand-points) { grid-template-columns: calc(1.6rem + var(--inset)) minmax(6rem, max-content) minmax(3rem, 1fr) auto auto auto; }
.candidates:has(.cand-points) .cand { grid-template-areas: "party name bar perc votes points"; }
.cand-points {
	position: relative; top: 0.18cap;
	align-self: center;
	grid-area: points;
	color: var(--gray-4);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	line-height: 1;
	text-align: right;
	text-box: trim-both cap alphabetic;
	white-space: nowrap;
}
.cand-points > span:first-child { color: var(--black); font-size: 0.95rem; font-weight: 600; }
.cand-points.no-points { visibility: hidden; }

.cand.cand-hidden { display: none; }
.cand [data-was]::before,
.scoreboard-total [data-was]::before { content: attr(data-was); margin-right: 0.2rem; opacity: 0.4; text-decoration: line-through; }
.cand-perc[data-was]::before { margin-right: 0.3rem; font-size: 0.85em; }

.cand-split { display: none; grid-area: split; }
body:not(:has(.district-chosen)) .cand:has(.sb-part:not([hidden])) {
	row-gap: 0.35rem;
	grid-template-areas:
		"party name bar perc votes"
		". split split split split";
}
body:not(:has(.district-chosen)) .candidates:has(.cand-points) .cand:has(.sb-part:not([hidden])) {
	grid-template-areas:
		"party name bar perc votes points"
		". split split split split split";
}
body:not(:has(.district-chosen)) .cand:has(.sb-part:not([hidden])) .cand-split {
	display: flex; flex-wrap: wrap; gap: 0 1.4rem;
	color: var(--gray-6);
	font-family: var(--font-mono);
	font-size: 0.62rem;
}
.sb-part { padding: 0; cursor: pointer; background: none; border: none; color: inherit; font: inherit; white-space: nowrap; }
.sb-part:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sb-part b {
	margin-right: 0.45rem;
	color: var(--gray-7);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sb-part-name { margin-right: 0.45rem; color: var(--gray-7); }
.sb-part-votes::before { content: "\00B7"; margin: 0 0.4em; color: var(--gray-3); }
.scoreboard-total {
	padding: 0.55rem var(--inset) 0;
	color: var(--gray-4);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	text-align: right;
}
.scoreboard-total > span + span::before { content: "\00B7"; margin: 0 0.6em; color: var(--gray-3); font-weight: 400; }
.place-notes { display: contents; }
.place-notes[hidden] { display: none; }
.place-note {
	display: grid; align-items: baseline;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	padding: 0.6rem var(--inset);
	border-top: 1px dotted var(--gray-2);
}
.candidates.no-votes .place-note:first-child { margin-top: 0.6rem; }
.place-note::before {
	content: "\00B6";
	color: var(--gray-4);
	text-align: center;
}
.place-note::before,
.place-note > span {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	line-height: 1.5;
}
.place-note > span { grid-column: 2 / -1; color: var(--gray-6); }

@media (max-width: 56rem) {
	.candidates {
		column-gap: 1rem;
		grid-template-columns: calc(1.6rem + var(--inset)) minmax(5rem, max-content) minmax(2rem, 1fr) auto auto;
	}
	.candidates:has(.cand-points) { grid-template-columns: calc(1.6rem + var(--inset)) minmax(5rem, max-content) minmax(2rem, 1fr) auto auto auto; }
}
@media (max-width: 40rem) {
	.candidates { column-gap: 0.7rem; grid-template-columns: calc(1.6rem + var(--inset)) 1fr auto; }
	.cand {
		row-gap: 0.4rem;
		grid-template-areas:
			"party name perc"
			"party bar bar"
			"party votes votes";
		padding: 0.85rem var(--inset);
	}
	body:not(:has(.district-chosen)) .cand:has(.sb-part:not([hidden])) {
		grid-template-areas:
			"party name perc"
			"party bar bar"
			"party votes votes"
			"party split split";
	}
	.candidates:has(.cand-points) { grid-template-columns: calc(1.6rem + var(--inset)) auto 1fr auto; }
	.candidates:has(.cand-points) .cand {
		grid-template-areas:
			"party name name perc"
			"party bar bar bar"
			"party votes points .";
	}
	body:not(:has(.district-chosen)) .candidates:has(.cand-points) .cand:has(.sb-part:not([hidden])) {
		grid-template-areas:
			"party name name perc"
			"party bar bar bar"
			"party votes points ."
			"party split split split";
	}
	.cand-points { text-align: left; }
	.cand::before { font-size: 0.95rem; }
	.cand-party { align-self: start; }
	.cand-name { font-size: 0.95rem; }
	.cand-votes { text-align: left; }
	.cand-perc, .cand-votes, .cand-points { top: 0; align-self: baseline; text-box: normal; }
}

.election-notes ul {
	border-top: 1px solid var(--gray-2);
	border-bottom: 1px solid var(--gray-2);
	list-style: none;
}
.election-notes li {
	padding: 0.7rem var(--inset);
	color: var(--gray-7);
	font-size: 0.85rem;
	line-height: 1.5;
}
.election-notes li + li { border-top: 1px solid var(--gray-1); }
.election-notes li a {
	border-bottom: 1px solid var(--gray-3);
	color: var(--black);
	transition: border-color 0.15s;
}

.table-of-results-div {
	overflow-x: auto;
	margin-top: 1.5rem;
	scrollbar-width: none;
}
.table-of-results-div::-webkit-scrollbar { display: none; }
.table-of-results-div table { width: 100%; border-spacing: 0 4px; }
.table-of-results-div table:not([hidden]) ~ table:not([hidden]) { padding-top: 1.75rem; }
.table-of-results-div thead th {
	padding: 0.5rem 0.6rem;
	color: var(--party, var(--gray-4));
	font-family: var(--font-mono);
	font-size: 0.55rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
.table-of-results-div thead th:first-child { padding-left: var(--inset); color: var(--black); }

.dataRow { cursor: pointer; line-height: 1.3; }
.dataRow td {
	padding: 0.45rem 0.6rem;
	background: var(--tint, var(--white));
	border-top: 1px solid var(--gray-1);
	border-bottom: 1px solid var(--gray-1);
	color: var(--gray-6);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.dataRow td:first-child {
	padding-left: calc(var(--inset) - 1px);
	border-left: 1px solid var(--gray-1);
	border-radius: 4px 0 0 4px;
	color: var(--black);
	font-family: var(--font-sans);
	font-weight: 500;
}
.dataRow td:last-child {
	border-radius: 0 4px 4px 0;
	border-right: 1px solid var(--gray-1);
}
.dataRow td.line-secondary { padding-left: calc(var(--inset) + 1.25rem); }
.dataRow:has(.line-secondary) { cursor: default; }
.dataRow td small { font-size: 0.86em; }

.loc-dot {
	vertical-align: middle;
	margin-left: 0.55rem;
	color: transparent;
	font-size: 0.6rem;
	font-weight: 400;
	transition: color 0.15s;
}

.dataRow:first-child td { border-color: var(--gray-2); color: var(--black); font-weight: 600; }
.dataRow:first-child td:first-child { background: var(--gray-0); }
.dataRow:first-child small { color: var(--party, inherit); font-weight: 600; }

.dataRow td.win span { color: var(--black); font-weight: 600; }
.dataRow td.win small { color: var(--party, inherit); font-weight: 600; }

.home-section { margin-top: 2.5rem; }
.home-section:last-child { margin-bottom: 3.5rem; }
.home-label {
	display: flex; align-items: center; gap: 0.6em;
	margin: 0 0 1.25rem;
	color: var(--gray-6);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}
.home-label::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	margin-left: 0.6em;
	background: var(--gray-2);
}

.year-grid {
	display: grid; gap: 3px;
	grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
}
.year-tile {
	--tile: color-mix(in srgb, var(--party, var(--tile-fallback)) 20%, var(--white));
	display: flex; align-items: center; justify-content: center;
	height: 2.6rem;
	background: var(--tile);
	border-radius: 2px;
	color: var(--tile-text);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.year-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.state-list {
	columns: 4; column-gap: 1.5rem;
}
.state-list a {
	display: block;
	break-inside: avoid;
	padding: 0.42rem 0;
	border-bottom: 1px solid var(--gray-1);
	color: var(--gray-7);
	font-family: var(--font-mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 40rem) {
	.home-section { margin-top: 2rem; }
	.year-grid { grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); }
	.year-tile { height: 2.4rem; font-size: 0.78rem; }
	.state-list { columns: 2; column-gap: 1rem; }
}

.election-list { margin-top: 1.5rem; margin-bottom: 3.5rem; }
.election-list section { max-width: 42rem; margin-bottom: 1.4rem; }
.election-list [hidden] { display: none; }

.election-list h2 {
	display: flex; align-items: center; gap: 0.75rem;
	margin-bottom: 0.65rem;
	color: var(--black);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
}
.election-list h2::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--gray-2);
}

.rows {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--gray-1);
	border-radius: 6px;
}
.rows a {
	display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
	margin-top: -1px;
	padding: 0.5rem 0.55rem 0.5rem 0.85rem;
	background: var(--white);
	border-top: 1px solid var(--gray-1);
	color: var(--black);
	font-size: 0.92rem;
	font-weight: 500;
	transition: background 0.15s;
}
.rows a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pill {
	--pale: color-mix(in srgb, var(--party, #8f8f8a) 15%, var(--white));
	--deep: var(--party, #6b6b67);
	display: inline-flex; align-items: stretch;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 999px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}
.pill span {
	display: flex; align-items: center;
	padding: 0.32rem 0.55rem 0.32rem 0.75rem;
	background: var(--pale);
	color: var(--gray-7);
	font-size: 0.78rem;
}
.pill span + span {
	justify-content: center;
	min-width: 3.5rem;
	padding: 0.32rem 0.7rem 0.32rem 0.55rem;
	background: var(--deep);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

@media (max-width: 40rem) {
	.controls-row-filter { overflow-x: auto; margin: calc(var(--tb-far) - 0.4rem) -1rem 0; padding: 0.4rem 1rem 0; scrollbar-width: none; }
	.controls-row-filter .tab-group { gap: 1.1rem; }
}

.about { margin: 2rem 0 4rem; }
.about-sec { margin-bottom: 2.6rem; scroll-margin-top: 1.5rem; }
.about-head {
	display: flex; align-items: center; gap: 0.75rem;
	margin-bottom: 1rem;
	color: var(--black);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}
.about-head::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--gray-2);
}
.about p {
	max-width: 36rem;
	margin-bottom: 0.85rem;
	color: var(--gray-7);
	font-size: 0.98rem;
	line-height: 1.65;
}
.about p:last-child { margin-bottom: 0; }
.about p b { color: var(--black); font-weight: 600; }
.about .key, .about .contact-content { max-width: 36rem; }
.about-sec > * + .key { margin-top: 1.2rem; }
.about .key + p { margin-top: 1rem; }

.about .box {
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--gray-1);
	border-radius: 6px;
}
.about .box-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 2.6rem;
	padding: 0.5rem 0.55rem 0.5rem 0.85rem;
}
.about .box-row + .box-row { border-top: 1px solid var(--gray-1); }

.about .color-bar-box { padding: 0.9rem 0.95rem 1rem; }
.about .color-bar { display: flex; overflow: hidden; height: 0.9rem; border-radius: 3px; }
.about .color-bar i { flex: 1 1 0; }
.about .color-bar + .color-bar { margin-top: 0.35rem; }
.about .color-bar-labels {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	margin-top: 0.4rem;
	color: var(--gray-6);
	font-family: var(--font-mono);
	font-size: 0.68rem;
}
.about .color-bar-labels span:last-child { text-align: right; }

.about .swatch { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; background: var(--party); border-radius: 3px; }
.about .swatch-row { justify-content: flex-start; gap: 0.8rem; }
.about .swatch-row .swatch-name { flex: 0 0 7rem; font-size: 0.92rem; font-weight: 500; }
.about .swatch-row .swatch-note { color: var(--gray-6); font-size: 0.86rem; }
.about .swatch-excluded { --party: var(--excluded); }
.about .swatch-split { background: repeating-linear-gradient(135deg, rgba(107, 107, 107, 0.55) 0 1px, transparent 1px 4px), var(--party); }
.about .swatch-none { --party: var(--gray-1); }

.contact-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.about .contact-content p { margin: 0; }
.about .contact-box { width: fit-content; }
.about .contact-row { padding: 0.5rem 0.9rem; }
.addr-l {
	display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
	color: var(--black);
	font-size: 0.92rem;
	font-weight: 500;
	user-select: all;
}
.contact-at {
	display: inline-flex; align-items: center;
	padding: 0.15rem 0.5rem;
	background: #ececea;
	border-radius: 999px;
	color: var(--gray-7);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.3;
}

@media (max-width: 40rem) {
	.about { margin-top: 1.6rem; }
	.about .box-row { gap: 0.45rem; padding: 0.65rem 0.75rem; }
	.about .swatch-row .swatch-name { flex-basis: 5.5rem; }
}

.source-line {
	padding: 2rem 0 1.5rem;
	color: var(--gray-4);
	font-family: var(--font-mono);
	font-size: 0.6rem;
	text-align: center;
}
.source-line a { border-bottom: 1px solid var(--gray-2); color: var(--gray-6); }
.entire {
	display: flex; flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.above-end { flex: 1 0 auto; }
.the-end { margin-top: 3rem; }
.footer {
	padding: 1rem 0;
	border-top: 1px solid var(--gray-2);
	color: var(--gray-4);
	font-family: var(--font-mono);
	font-size: 0.55rem;
	letter-spacing: 0.1em;
	text-align: center;
}

@media (hover: hover) and (pointer: fine) {
	a:hover { color: var(--black); }
	.dropdown-button:hover .dropdown-arrow { color: var(--black); }
	.dropdown-list a:hover { background: var(--gray-0); color: var(--black); }
	.header-nav-button:hover,
	.previous-next a:hover { background: var(--button-active); color: var(--black); }
	.previous-next a:hover .previous-next-arrow { color: var(--black); }
	.tab-button:hover,
	.district-button:hover { color: var(--black); }
	.tab-button:hover { border-bottom-color: var(--gray-4); }
	.tab-button.on:hover { border-bottom-color: var(--black); }
	.district-list .all-districts:hover { background: #f6f6f4; }
	.district-list .district-tile:hover { background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--black); color: var(--black); }
	.district-list .district-tile.on:hover { background: var(--black); box-shadow: none; color: var(--white); }
	.clear-selection:hover,
	.place-details:hover,
	.title-label-link:hover { border-color: var(--black); color: var(--black); }
	.cand:hover { background: var(--gray-0); }
	.sb-part:hover,
	.sb-part:hover b,
	.sb-part:hover .sb-part-name { color: var(--black); }
	.election-notes li a:hover { border-color: var(--black); }
	.dataRow:not(:has(.line-secondary)):hover td { border-color: var(--gray-2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
	.dataRow td:first-child:hover .loc-dot { color: var(--gray-3); }
	.year-tile:hover { box-shadow: inset 0 0 0 1.5px var(--black); color: var(--black); }
	.state-list a:hover { border-bottom-color: var(--black); color: var(--black); }
	.rows a:hover { background: #f8f8f6; }
	.source-line a:hover { border-bottom-color: var(--black); }
}

.c-b, .cp-b, .cb-b, .col-b { --party: var(--shade-90b); --tint: #f7faff; }
.c-g, .cp-g, .cb-g, .col-g { --party: var(--shade-90g); --tint: #f8fbf6; }
.c-m, .cp-m, .cb-m, .col-m { --party: var(--shade-90m); --tint: #fdf8fd; }
.c-o, .cp-o, .cb-o, .col-o { --party: var(--shade-90o); --tint: #fef9f5; }
.c-p, .cp-p, .cb-p, .col-p { --party: var(--shade-90p); --tint: #faf9ff; }
.c-r, .cp-r, .cb-r, .col-r { --party: var(--shade-90r); --tint: #fff8f7; }
.c-s, .cp-s, .cb-s, .col-s { --party: var(--shade-90s); --tint: #fff8fa; }
.c-t, .cp-t, .cb-t, .col-t { --party: var(--shade-90t); --tint: #f4fcfb; }
.c-y, .cp-y, .cb-y, .col-y { --party: var(--shade-90y); --tint: #fbfaf4; }

:root {
	--shade-00b: #e0ecff;	/* approximate */
	--shade-10b: #ccdfff;	/* approximate */
	--shade-20b: #b7d2ff;	/* approximate */
	--shade-30b: #a4c5fb;
	--shade-40b: #93b8f6;
	--shade-50b: #81abf0;
	--shade-60b: #709eea;
	--shade-70b: #5f91e3;
	--shade-80b: #4e84dd;
	--shade-90b: #3c76d7;

	--shade-00g: #def3d3;
	--shade-10g: #d2ecc4;
	--shade-20g: #c6e5b5;
	--shade-30g: #badfa6;
	--shade-40g: #aed897;
	--shade-50g: #a2d188;
	--shade-60g: #96ca79;
	--shade-70g: #8ac369;
	--shade-80g: #7ebc58;
	--shade-90g: #72b546;

	--shade-00m: #fce1fd;
	--shade-10m: #f5d2f6;
	--shade-20m: #edc4ee;
	--shade-30m: #e5b6e7;
	--shade-40m: #dda7e0;
	--shade-50m: #d599d8;
	--shade-60m: #cd8bd1;
	--shade-70m: #c57dc9;
	--shade-80m: #bd6ec2;
	--shade-90m: #b55fba;

	--shade-00o: #ffe6d0;	/* approximate */
	--shade-10o: #fed9b8;
	--shade-20o: #f9cda5;
	--shade-30o: #f4c191;
	--shade-40o: #eeb57e;
	--shade-50o: #e9a96a;
	--shade-60o: #e49d54;
	--shade-70o: #de913c;
	--shade-80o: #d8851a;
	--shade-90o: #ce7b00;	/* approximate */

	--shade-00p: #eae8ff;	/* approximate */
	--shade-10p: #dcd8ff;	/* approximate */
	--shade-20p: #cec8fc;
	--shade-30p: #c0b9f5;
	--shade-40p: #b3a9ee;
	--shade-50p: #a59ae7;
	--shade-60p: #998be0;
	--shade-70p: #8c7cd8;
	--shade-80p: #806dd0;
	--shade-90p: #745dc8;

	--shade-00r: #ffe4de;	/* approximate */
	--shade-10r: #ffd4ca;	/* approximate */
	--shade-20r: #ffc2b5;
	--shade-30r: #f9b3a4;
	--shade-40r: #f3a493;
	--shade-50r: #ed9582;
	--shade-60r: #e68671;
	--shade-70r: #df7661;
	--shade-80r: #d86750;
	--shade-90r: #d0563e;

	--shade-00s: #ffe3ea;	/* approximate */
	--shade-10s: #ffd1dd;	/* approximate */
	--shade-20s: #fcc0d1;
	--shade-30s: #f6b0c5;
	--shade-40s: #f0a1b9;
	--shade-50s: #e991ad;
	--shade-60s: #e282a1;
	--shade-70s: #da7295;
	--shade-80s: #d3628a;
	--shade-90s: #cb517e;

	--shade-00t: #c8f6f2;
	--shade-10t: #b5f0eb;
	--shade-20t: #a2eae5;
	--shade-30t: #8de4de;
	--shade-40t: #77ded8;
	--shade-50t: #5dd8d1;
	--shade-60t: #3cd2cb;
	--shade-70t: #00cbc4;	/* approximate */
	--shade-80t: #00c2bb;	/* approximate */
	--shade-90t: #00b9b2;	/* approximate */

	--shade-00y: #f3ecc8;
	--shade-10y: #ede4b6;
	--shade-20y: #e7dba4;
	--shade-30y: #e0d392;
	--shade-40y: #dacb7f;
	--shade-50y: #d4c26b;
	--shade-60y: #ceba56;
	--shade-70y: #c8b13c;
	--shade-80y: #c2a915;
	--shade-90y: #b9a000;	/* approximate */
}

@supports (color: oklch(0% 0 0)) {
	:root {
		--shade-00b: oklch(94% 0.048 260);
		--shade-10b: oklch(89.97% 0.060 260);
		--shade-20b: oklch(85.95% 0.072 260);
		--shade-30b: oklch(81.92% 0.085 260);
		--shade-40b: oklch(77.9% 0.098 260);
		--shade-50b: oklch(73.87% 0.110 260);
		--shade-60b: oklch(69.84% 0.122 260);
		--shade-70b: oklch(65.82% 0.135 260);
		--shade-80b: oklch(61.79% 0.148 260);
		--shade-90b: oklch(57.77% 0.160 260);

		--shade-00g: oklch(94% 0.048 135);
		--shade-10g: oklch(91.39% 0.060 135);
		--shade-20g: oklch(88.79% 0.072 135);
		--shade-30g: oklch(86.18% 0.085 135);
		--shade-40g: oklch(83.58% 0.098 135);
		--shade-50g: oklch(80.97% 0.110 135);
		--shade-60g: oklch(78.37% 0.122 135);
		--shade-70g: oklch(75.76% 0.135 135);
		--shade-80g: oklch(73.15% 0.148 135);
		--shade-90g: oklch(70.55% 0.160 135);

		--shade-00m: oklch(94% 0.048 325);
		--shade-10m: oklch(90.44% 0.060 325);
		--shade-20m: oklch(86.88% 0.072 325);
		--shade-30m: oklch(83.32% 0.085 325);
		--shade-40m: oklch(79.76% 0.098 325);
		--shade-50m: oklch(76.2% 0.110 325);
		--shade-60m: oklch(72.64% 0.122 325);
		--shade-70m: oklch(69.07% 0.135 325);
		--shade-80m: oklch(65.51% 0.148 325);
		--shade-90m: oklch(61.95% 0.160 325);

		--shade-00o: oklch(94% 0.048 65);
		--shade-10o: oklch(90.86% 0.060 65);
		--shade-20o: oklch(87.72% 0.072 65);
		--shade-30o: oklch(84.58% 0.085 65);
		--shade-40o: oklch(81.44% 0.098 65);
		--shade-50o: oklch(78.3% 0.110 65);
		--shade-60o: oklch(75.16% 0.122 65);
		--shade-70o: oklch(72.02% 0.135 65);
		--shade-80o: oklch(68.88% 0.148 65);
		--shade-90o: oklch(65.74% 0.160 65);

		--shade-00p: oklch(94% 0.048 290);
		--shade-10p: oklch(89.72% 0.060 290);
		--shade-20p: oklch(85.45% 0.072 290);
		--shade-30p: oklch(81.17% 0.085 290);
		--shade-40p: oklch(76.89% 0.098 290);
		--shade-50p: oklch(72.61% 0.110 290);
		--shade-60p: oklch(68.34% 0.122 290);
		--shade-70p: oklch(64.06% 0.135 290);
		--shade-80p: oklch(59.78% 0.148 290);
		--shade-90p: oklch(55.5% 0.160 290);

		--shade-00r: oklch(94% 0.048 33);
		--shade-10r: oklch(90.3% 0.060 33);
		--shade-20r: oklch(86.61% 0.072 33);
		--shade-30r: oklch(82.91% 0.085 33);
		--shade-40r: oklch(79.21% 0.098 33);
		--shade-50r: oklch(75.52% 0.110 33);
		--shade-60r: oklch(71.82% 0.122 33);
		--shade-70r: oklch(68.12% 0.135 33);
		--shade-80r: oklch(64.43% 0.148 33);
		--shade-90r: oklch(60.73% 0.160 33);

		--shade-00s: oklch(94% 0.048 0);
		--shade-10s: oklch(90.3% 0.060 0);
		--shade-20s: oklch(86.6% 0.072 0);
		--shade-30s: oklch(82.9% 0.085 0);
		--shade-40s: oklch(79.2% 0.098 0);
		--shade-50s: oklch(75.5% 0.110 0);
		--shade-60s: oklch(71.8% 0.122 0);
		--shade-70s: oklch(68.11% 0.135 0);
		--shade-80s: oklch(64.41% 0.148 0);
		--shade-90s: oklch(60.71% 0.160 0);

		--shade-00t: oklch(94% 0.048 190);
		--shade-10t: oklch(91.43% 0.060 190);
		--shade-20t: oklch(88.87% 0.072 190);
		--shade-30t: oklch(86.3% 0.085 190);
		--shade-40t: oklch(83.73% 0.098 190);
		--shade-50t: oklch(81.16% 0.110 190);
		--shade-60t: oklch(78.6% 0.122 190);
		--shade-70t: oklch(76.03% 0.135 190);
		--shade-80t: oklch(73.46% 0.148 190);
		--shade-90t: oklch(70.89% 0.160 190);

		--shade-00y: oklch(94% 0.048 98);
		--shade-10y: oklch(91.42% 0.060 98);
		--shade-20y: oklch(88.84% 0.072 98);
		--shade-30y: oklch(86.26% 0.085 98);
		--shade-40y: oklch(83.68% 0.098 98);
		--shade-50y: oklch(81.1% 0.110 98);
		--shade-60y: oklch(78.52% 0.122 98);
		--shade-70y: oklch(75.94% 0.135 98);
		--shade-80y: oklch(73.36% 0.148 98);
		--shade-90y: oklch(70.78% 0.160 98);
	}
}

#svg_map { fill: #cecece; stroke: #f7f7f7; stroke-width: 0.3; }
#svg_map path { vector-effect: non-scaling-stroke; }