/* LPR 2026 - Election Night Live. The look follows the House page (house.css) and the Senate Wizard (rsbs_v2.css). */

:root
{
	--text: #000;
	--muted: #555;
	--panel: #f8f8f8;
	--panel-edge: #50C878;
	--dem: #244999;
	--gop: #D22532;
	--purple: #6C3FC1;
	--gold: #ffd400;
	--sen-line: #6C3FC1;
	--house-line: #1f9a55;
}

* { box-sizing: border-box; }

body
{
	margin: 0;
	background: #ffffff;
	color: var(--text);
	font-family: Georgia, Arial, Helvetica, serif;
	overflow-y: scroll;
}

a:visited, a:link { color: #993300; text-decoration: none; }
a:hover { color: #cc0000; }

button { font-family: Georgia, serif; font-size: 13px; cursor: pointer; margin-left: 3px; }
button.active { font-weight: bold; background: var(--purple); color: white; border: 1px solid var(--purple); }

main { max-width: 1500px; margin: 0 auto; padding: 0 16px 24px 16px; }

/* --- navigation, title */

#TopNav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; padding: 4px 16px; }
#TopNav img { display: block; margin-right: 20px; }
.nav
{
	display: inline-block; width: 124px;
	font-family: Georgia, Arial, Helvetica, sans-serif, serif;
	font-weight: bold; font-size: 0.80em; text-align: center;
}

#TopBar { text-align: center; margin: 8px 16px 4px 16px; }
#TopTitle .MainTitle { color: var(--purple); font-weight: bold; font-style: italic; font-size: 150%; }
#TopTitle .SubTitle { font-style: italic; }
#LiveRow { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 6px; }
#LiveBadge
{
	display: flex; align-items: center; gap: 7px;
	font: bold 13px Arial, sans-serif; letter-spacing: 2px;
	padding: 3px 9px; border: 2px solid var(--gop); color: var(--gop); background: white;
}
#LiveDot { width: 10px; height: 10px; border-radius: 50%; background: var(--gop); animation: pulse 1.4s infinite; }
#LiveBadge.paused { border-color: #888; color: #888; }
#LiveBadge.paused #LiveDot { background: #888; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(210,37,50,0.7); } 70% { box-shadow: 0 0 0 8px rgba(210,37,50,0); } 100% { box-shadow: 0 0 0 0 rgba(210,37,50,0); } }
#Clock { font: bold 16px "Courier New", monospace; }

#DemoBanner
{
	display: none;
	margin: 8px auto; max-width: 900px; padding: 6px;
	text-align: center; font-weight: bold;
	background: #ffff00; border: 2px dashed #993300;
}

/* --- panels */

.Panel { background: var(--panel); border: 1px solid var(--panel-edge); padding: 8px 12px; margin-top: 14px; }
.PanelHead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.PanelHead h3 { margin: 0; font-size: 100%; }
.PanelNote { font-size: 80%; color: var(--muted); }

/* --- control cards, the House page's number boxes made bigger */

#Control { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.Chamber { border: 1px solid gray; background: white; padding: 0 0 10px 0; transition: box-shadow 0.6s; }
.Chamber.changed { box-shadow: 0 0 0 4px var(--gold); }
.Chamber h2
{
	margin: 0 0 8px 0; padding: 3px 0; font-size: 110%; letter-spacing: 3px; text-transform: uppercase;
	text-align: center; color: white; background: var(--purple); font-family: Arial, Helvetica, sans-serif;
}
.Odds { display: flex; gap: 10px; padding: 0 12px; }
.Party { flex: 1; text-align: center; border: 1px solid gray; }
.Party .Name { font: bold 110% Arial, sans-serif; color: white; padding: 2px 0; text-transform: uppercase; }
.Party.dem .Name { background: var(--dem); }
.Party.gop .Name { background: var(--gop); }
.Party .Pct { font: bold 40px Arial, sans-serif; padding: 2px 0 4px 0; font-variant-numeric: tabular-nums; transition: background-color 1s; }
.Party.dem .Pct { color: var(--dem); }
.Party.gop .Pct { color: var(--gop); }
.Party.dem.leader .Pct { background: #e3e9f6; }	/* the side ahead gets a light tint of its color */
.Party.gop.leader .Pct { background: #f9e1e3; }
.OddsNote { text-align: center; font-size: 85%; color: var(--muted); margin: 5px 12px 8px 12px; }
.SeatBar { position: relative; display: flex; height: 24px; margin: 0 12px; border: 1px solid #333; }
.SeatBar > div:not(.Majority) { height: 100%; transition: width 1s; color: white; font: bold 12px Arial, sans-serif; line-height: 22px; overflow: hidden; white-space: nowrap; }
.SeatBar .dem { background: var(--dem); padding-left: 6px; }
.SeatBar .tie { background: gray; }
.SeatBar .gop { background: var(--gop); text-align: right; padding-right: 6px; }
.SeatBar .Majority { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed black; }
.SeatNote { text-align: center; font-size: 80%; color: #333; margin: 6px 12px 0 12px; min-height: 1.2em; }

/* --- chart and moves */

#Middle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
#Chart { position: relative; height: 260px; background: white; }
#Chart svg { display: block; width: 100%; height: 100%; }
#Chart .axis { font: 11px Arial, sans-serif; fill: #444; }
#Chart .grid { stroke: #e2e2e2; stroke-width: 1; }
#Chart .half { stroke: #888; stroke-width: 1; stroke-dasharray: 4 4; }
#Chart .sen { fill: none; stroke: var(--sen-line); stroke-width: 2.5; }
#Chart .house { fill: none; stroke: var(--house-line); stroke-width: 2.5; }
#Chart .endlabel { font: bold 12px Arial, sans-serif; }
#Chart .hoverline { stroke: black; stroke-width: 1; opacity: 0.4; }
#ChartTip
{
	position: absolute; pointer-events: none; display: none;
	background: white; border: 1px solid #999; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	padding: 4px 7px; font: 12px Arial, sans-serif; white-space: nowrap;
}
#ChartLegend { text-align: center; font: 12px Arial, sans-serif; color: var(--muted); margin-top: 4px; }
#ChartLegend span { margin: 0 10px; }
#ChartLegend span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 5px; vertical-align: middle; }
#ChartLegend .sen::before { background: var(--sen-line); }
#ChartLegend .house::before { background: var(--house-line); }

#MovesPanel { display: flex; flex-direction: column; }
#MovesList { list-style: none; margin: 0; padding: 0; font: 13px Arial, sans-serif; overflow-y: auto; max-height: 290px; }
#MovesList li { padding: 2px 0; border-bottom: 1px solid #e6e6e6; animation: moveIn 1.2s ease-out; }
#MovesList .when { color: #777; display: inline-block; width: 4.6em; }
#MovesList .chip { display: inline-block; font-size: 10px; letter-spacing: 1px; padding: 0 4px; margin-right: 5px; background: #ddd; color: #333; }
#MovesList .chip.sen { background: var(--purple); color: white; }
#MovesList .race { font-weight: bold; margin-right: 5px; }
#MovesList .side.D { color: var(--dem); font-weight: bold; }
#MovesList .side.R { color: var(--gop); font-weight: bold; }
#MovesList .who { color: var(--muted); }
#MovesList .tag { white-space: nowrap; background: var(--gold); font-weight: bold; font-size: 11px; padding: 0 4px; margin-left: 6px; }
#MovesEmpty { color: #777; font-size: 85%; padding: 4px 0; }
@keyframes moveIn { from { background: var(--gold); } to { background: transparent; } }

/* --- Senate tiles and House boxes */

#SenateGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.stile
{
	position: relative; border: 1px solid #333; text-align: center; padding: 5px 2px 6px 2px; cursor: default;
	font-family: Arial, sans-serif; transition: background-color 1.5s, color 1.5s;
}
.stile .st { display: block; font-size: 22px; font-weight: bold; line-height: 1.1; }
.stile .nm { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stile .pc { display: block; font-size: 15px; font-weight: bold; margin-top: 2px; }

#HouseGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 3px; }
.hbox
{
	position: relative; border: 1px solid #333; height: 36px;
	text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; cursor: default;
	transition: background-color 1.5s, color 1.5s;
}
.hbox .hd { display: block; font-size: 10px; margin-top: 3px; }
.hbox .hp { display: block; font-size: 12px; margin-top: 1px; }

.stile.settled, .hbox.settled { border: 2px solid black; }
.hbox.settled .hp { font-size: 15px; margin-top: 0; }
.stile.stale, .hbox.stale { border: 2px dashed #555; }

/* something just moved, and a bigger show when the favorite changes or the race is called */
.moved { animation: moved 1.6s ease-out; z-index: 2; }
.flipped { animation: flipped 2.4s ease-out; z-index: 3; }
@keyframes moved
{
	0%   { transform: scale(1.35); box-shadow: 0 0 0 4px var(--gold); }
	100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}
@keyframes flipped
{
	0%, 30%, 60% { transform: scale(1.6); box-shadow: 0 0 0 6px var(--gold); }
	15%, 45%     { transform: scale(1.2); box-shadow: 0 0 0 2px var(--gold); }
	100%         { transform: scale(1);   box-shadow: 0 0 0 0 transparent; }
}

/* --- big news */

#Toasts { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast
{
	font: bold 22px Arial, sans-serif; letter-spacing: 1px; color: white;
	padding: 10px 22px; border: 3px solid var(--gold);
	box-shadow: 0 6px 24px rgba(0,0,0,0.35); animation: toastIn 0.5s ease-out;
	text-align: center; max-width: 90vw;
}
.toast.D { background: var(--dem); }
.toast.R { background: var(--gop); }
.toast .small { display: block; font-size: 13px; font-weight: normal; letter-spacing: 0; margin-top: 2px; }
.toast.out { opacity: 0; transition: opacity 0.6s; }
@keyframes toastIn { from { transform: translateY(-20px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }

#DataFeedStatus { text-align: center; font-size: 90%; margin-top: 14px; }
#About { max-width: 900px; margin: 14px auto 0 auto; border: 1px solid var(--panel-edge); background: var(--panel); padding: 8px 12px; font-size: 95%; text-align: center; }

@media (max-width: 900px)
{
	#Control, #Middle { grid-template-columns: minmax(0, 1fr); }
	.Party .Pct { font-size: 32px; }
	.nav { width: 100px; font-size: 0.7em; }
	#Chart { height: 220px; }
}

@media (prefers-reduced-motion: reduce)
{
	.stile, .hbox, .moved, .flipped, #MovesList li, #LiveDot, .toast { animation: none; transition: none; }
}