
/* NOIO Wahl-Live 0.1.0 */

.noio-election-shell {
	box-sizing: border-box;
	width: min(100% - 32px, 1536px) !important;
	max-width: 1536px !important;
	margin: 0 auto !important;
	padding: 0 0 5rem !important;
}

.noio-election-live {
	--el-bg: #06121c;
	--el-card: #0a1a27;
	--el-card2: #0c2130;
	--el-line: #17394c;
	--el-text: #f6fbff;
	--el-muted: #9db3c2;
	--el-cyan: #1fe4ff;
	--el-pink: #ff3ca8;
	--el-yellow: #f8e44e;
	color: var(--el-text);
}

.noio-election-live *,
.noio-election-live *::before,
.noio-election-live *::after {
	box-sizing: border-box;
}

.noio-election-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
	gap: clamp(28px, 5vw, 70px);
	align-items: end;
	padding: clamp(40px, 6vw, 82px) clamp(20px, 4vw, 58px) clamp(34px, 5vw, 60px);
	background:
		radial-gradient(circle at 82% 15%, rgba(255,60,168,.13), transparent 28%),
		radial-gradient(circle at 15% 85%, rgba(31,228,255,.09), transparent 30%),
		linear-gradient(180deg, #071724 0%, #06121c 100%);
	border-bottom: 1px solid var(--el-line);
}

.noio-election-kicker {
	color: var(--el-cyan);
	font-size: .73rem;
	font-weight: 850;
	letter-spacing: .19em;
	text-transform: uppercase;
}

.noio-election-intro h1 {
	margin: .45rem 0 .75rem;
	font-size: clamp(3rem, 7vw, 6.8rem);
	line-height: .88;
	letter-spacing: -.055em;
	color: #fff;
}

.noio-election-lead {
	max-width: 780px;
	margin: 0;
	color: #cad8e1;
	font-size: clamp(1rem, 1.8vw, 1.24rem);
	line-height: 1.65;
}

.noio-election-status {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 20px;
	border: 1px solid var(--el-line);
	border-radius: 14px;
	background: rgba(9,28,42,.86);
	box-shadow: 0 18px 60px rgba(0,0,0,.20);
}

.noio-election-status strong {
	display: block;
	margin-bottom: 4px;
	font-size: .96rem;
	color: #fff;
}

.noio-election-status small {
	display: block;
	color: var(--el-muted);
	line-height: 1.45;
}

.noio-election-dot {
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--el-yellow);
	box-shadow: 0 0 0 5px rgba(248,228,78,.10);
}

.noio-election-status-live .noio-election-dot {
	background: #21f29b;
	box-shadow: 0 0 0 5px rgba(33,242,155,.11), 0 0 22px rgba(33,242,155,.55);
	animation: noio-election-pulse 1.5s infinite;
}

.noio-election-status-final .noio-election-dot {
	background: var(--el-cyan);
	box-shadow: 0 0 0 5px rgba(31,228,255,.12);
}

@keyframes noio-election-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .42; }
}

.noio-election-focus {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	margin: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 58px) 0;
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid rgba(31,228,255,.34);
	border-radius: 16px;
	background:
		linear-gradient(115deg, rgba(31,228,255,.08), transparent 42%),
		linear-gradient(180deg, #0a1d2b, #081721);
	box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.noio-election-focus-tag {
	align-self: stretch;
	display: grid;
	place-items: center;
	border-right: 1px solid rgba(31,228,255,.24);
	color: var(--el-cyan);
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .16em;
	text-align: center;
}

.noio-election-focus h2 {
	margin: 0 0 .45rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.06;
}

.noio-election-focus p {
	margin: 0;
	max-width: 880px;
	color: #b9cad5;
	line-height: 1.6;
}

.noio-election-focus-button,
.noio-election-actions button,
.noio-election-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 15px;
	border: 1px solid rgba(31,228,255,.38);
	border-radius: 9px;
	background: rgba(31,228,255,.07);
	color: #fff;
	font: inherit;
	font-size: .86rem;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.noio-election-focus-button:hover,
.noio-election-actions button:hover,
.noio-election-actions a:hover {
	border-color: var(--el-cyan);
	background: rgba(31,228,255,.14);
	color: var(--el-cyan);
}

.noio-election-groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	padding: clamp(24px, 4vw, 42px) clamp(20px, 4vw, 58px);
}

.noio-election-group {
	min-width: 0;
	padding: 15px;
	border: 1px solid var(--el-line);
	border-radius: 14px;
	background: var(--el-card);
}

.noio-election-group-main {
	background: linear-gradient(180deg, #102334, #0a1925);
}

.noio-election-group.is-focus {
	border-color: rgba(31,228,255,.48);
	box-shadow: inset 0 0 0 1px rgba(31,228,255,.08);
}

.noio-election-group-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
	margin-bottom: 11px;
	padding: 0 2px;
}

.noio-election-group-head span {
	color: var(--el-cyan);
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .12em;
}

.noio-election-group-head strong {
	color: #fff;
	font-size: .88rem;
}

.noio-election-place-list {
	display: grid;
	gap: 7px;
}

.noio-election-place {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: #07141e;
	color: #edf8ff;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.noio-election-place:hover {
	transform: translateY(-1px);
	border-color: rgba(31,228,255,.30);
	background: #0a1c29;
}

.noio-election-place.is-active {
	border-color: var(--el-cyan);
	background: rgba(31,228,255,.10);
	box-shadow: inset 3px 0 0 var(--el-cyan);
}

.noio-election-place span,
.noio-election-place small {
	display: block;
}

.noio-election-place span {
	font-size: .89rem;
	font-weight: 780;
}

.noio-election-place small {
	margin-top: 2px;
	color: #8199a9;
	font-size: .69rem;
	line-height: 1.25;
}

.noio-election-view {
	scroll-margin-top: 130px;
	margin: 0 clamp(20px, 4vw, 58px);
	overflow: hidden;
	border: 1px solid var(--el-line);
	border-radius: 18px;
	background: #05101a;
	box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

.noio-election-view-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 21px 24px;
	border-bottom: 1px solid var(--el-line);
	background: linear-gradient(180deg, #0b1c29, #081722);
}

.noio-election-view-head h2 {
	margin: .2rem 0 .4rem;
	color: #fff;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.noio-election-updated {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
	color: #8ca5b5;
	font-size: .73rem;
}

.noio-election-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #21f29b;
	box-shadow: 0 0 12px rgba(33,242,155,.65);
}

.noio-election-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.noio-election-frame-wrap {
	position: relative;
	min-height: 820px;
	background: #fff;
}

#noio-election-frame {
	display: block;
	width: 100%;
	height: min(1120px, 77vh);
	min-height: 820px;
	border: 0;
	background: #fff;
}

.noio-election-frame-loading {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	justify-content: center;
	background: rgba(5,16,26,.94);
	color: #dcecf5;
	transition: opacity .18s ease, visibility .18s ease;
}

.noio-election-frame-loading span {
	width: 34px;
	height: 34px;
	border: 3px solid rgba(31,228,255,.20);
	border-top-color: var(--el-cyan);
	border-radius: 50%;
	animation: noio-election-spin .8s linear infinite;
}

.noio-election-frame-loading.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@keyframes noio-election-spin {
	to { transform: rotate(360deg); }
}

.noio-election-frame-help {
	margin: 0;
	padding: 13px 20px 16px;
	border-top: 1px solid var(--el-line);
	color: #7f98a8;
	font-size: .74rem;
	line-height: 1.5;
}

.noio-election-notes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 58px);
}

.noio-election-notes > div {
	padding: 20px;
	border: 1px solid var(--el-line);
	border-radius: 12px;
	background: #081722;
}

.noio-election-notes h3 {
	margin: 0 0 .55rem;
	color: #fff;
	font-size: 1rem;
}

.noio-election-notes p {
	margin: 0;
	color: #91a8b7;
	font-size: .84rem;
	line-height: 1.58;
}

.noio-election-notes a {
	color: var(--el-cyan);
	text-decoration: none;
}

.noio-election-notes a:hover {
	text-decoration: underline;
}

@media (max-width: 1050px) {
	.noio-election-intro {
		grid-template-columns: 1fr;
	}
	.noio-election-focus {
		grid-template-columns: 1fr;
	}
	.noio-election-focus-tag {
		display: block;
		border-right: 0;
	}
	.noio-election-focus-button {
		justify-self: start;
	}
	.noio-election-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.noio-election-view-head {
		align-items: flex-start;
		flex-direction: column;
	}
	.noio-election-actions {
		justify-content: flex-start;
	}
}

@media (max-width: 720px) {
	.noio-election-groups,
	.noio-election-notes {
		grid-template-columns: 1fr;
	}
	.noio-election-intro,
	.noio-election-groups,
	.noio-election-notes {
		padding-left: 16px;
		padding-right: 16px;
	}
	.noio-election-focus,
	.noio-election-view {
		margin-left: 16px;
		margin-right: 16px;
	}
	.noio-election-actions {
		width: 100%;
	}
	.noio-election-actions button,
	.noio-election-actions a {
		flex: 1 1 auto;
	}
	.noio-election-frame-wrap,
	#noio-election-frame {
		min-height: 760px;
		height: 760px;
	}
}
/* NOIO results snapshot, 15 September 2026. Scoped to the election page. */
.noio-results-summary{margin:24px 0 38px;line-height:1.65}
.noio-results-summary section{scroll-margin-top:110px;margin-block:30px}
.noio-results-summary h2{font-size:clamp(1.35rem,3vw,2rem);line-height:1.2;margin:0 0 18px}
.noio-results-summary h3{font-size:1.2rem;margin:0 0 12px}
.noio-results-nav{display:flex;gap:10px;flex-wrap:wrap}
.noio-results-nav a{border:1px solid #397582;border-radius:24px;padding:8px 16px;text-decoration:none;color:#8beaf7}
.noio-results-summary a{color:#8beaf7;text-underline-offset:3px}
.noio-runoff-panel{padding:clamp(18px,4vw,30px);border:1px solid #427d88;border-radius:18px;background:linear-gradient(125deg,#112b33,#181b32)}
.noio-result-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.noio-result-cards article{padding:20px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff20}
.noio-result-cards strong{font-size:1.15rem;color:#fff}
.noio-result-meta{font-size:.85rem;color:#b7c4d1;overflow-wrap:anywhere}
.noio-result-warning{padding:16px 18px;border-left:3px solid #efd575;background:#efd5750c;color:#eee6ca}
.noio-result-detail,.noio-result-area{margin:12px 0;padding:16px 20px;border:1px solid #ffffff26;border-radius:12px;background:#ffffff03}
.noio-result-area>summary{font-size:1.15rem}
.noio-result-detail>summary,.noio-result-area>summary{font-weight:650;cursor:pointer;line-height:1.5}
.noio-result-detail[open]>summary,.noio-result-area[open]>summary{margin-bottom:15px}
.noio-result-scroll{max-width:100%;overflow:auto;margin-block:14px}
.noio-result-scroll table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
.noio-result-scroll th,.noio-result-scroll td{text-align:left;padding:10px 12px;border-bottom:1px solid #ffffff20;vertical-align:top}
.noio-result-scroll thead{background:#ffffff08}
.noio-result-scroll td{white-space:nowrap}
.noio-result-scroll th{min-width:100px}
.noio-results-summary summary:focus-visible,.noio-results-summary a:focus-visible,.noio-result-scroll:focus-visible{outline:2px solid #8beaf7;outline-offset:4px}
.noio-election-status-results .noio-election-dot{background:#8beaf7;animation:none}
.noio-election-updated .noio-election-pulse{animation:none}
@media(max-width:640px){.noio-result-cards{grid-template-columns:1fr}.noio-result-detail,.noio-result-area{padding:12px}.noio-result-scroll th,.noio-result-scroll td{padding:8px}.noio-results-nav{gap:6px}}
