/* LPR 2026 - the House page. Colors and fonts follow rsbs_v2.css (the Senate Wizard). */

body { overflow-y: scroll; font-family: Georgia, Arial, Helvetica, serif; }

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

.nav
{
	display: inline-block;
	text-decoration: none;
	width: 144px;
	font-family: Georgia, Arial, Helvetica, sans-serif, serif;
	font-weight: bold;
	font-size: 0.80em;
	text-align: center;
}

.gopBackground { background-color: #D22532; }
.demBackground { background-color: #244999; }
.tieBackground { background-color: gray; }

#HouseTitle { text-align: center; margin: 10px 0 4px 0; }
#HouseTitle .MainTitle { color: #6C3FC1; font-weight: bold; font-style: italic; font-size: 150%; }
#HouseTitle .SubTitle { font-style: italic; }

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

/* --- headline numbers */

#Headline { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 10px 0; }

.NumberBox
{
	display: inline-block;
	min-width: 120px;
	border: 1px solid gray;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	transition: box-shadow 0.6s;
}
.NumberBox > .Title { display: block; text-transform: uppercase; color: white; font-size: 110%; padding: 2px 6px; }
.NumberBox > .NumberDisplay { display: block; font-size: 150%; padding: 2px 6px; }
.NumberBox > .Note { display: block; font-size: 75%; color: #555; padding: 0 6px 3px 6px; }
.NumberBox.changed { box-shadow: 0 0 0 4px #ffd400; }

/* --- seats favored, with the 218 majority line */

#SeatBar { position: relative; max-width: 900px; height: 26px; margin: 6px auto 2px auto; display: flex; border: 1px solid #333; }
#SeatBar > div { height: 100%; transition: width 1s; color: white; font: bold 13px Arial, sans-serif; line-height: 26px; overflow: hidden; }
#SeatBarDem { background: #244999; text-align: left; padding-left: 6px; box-sizing: border-box; }
#SeatBarTie { background: gray; }
#SeatBarGop { background: #D22532; text-align: right; padding-right: 6px; box-sizing: border-box; }
#SeatBarMajority { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed black; left: 50.11%; }
#SeatBarLegend { max-width: 900px; margin: 0 auto; font-size: 80%; text-align: center; color: #333; }

/* --- latest moves */

#Moves { max-width: 900px; margin: 12px auto; border: 1px solid #50C878; background: #f8f8f8; padding: 4px 10px; }
#Moves h3 { margin: 2px 0 4px 0; font-size: 100%; }
#MovesList { list-style: none; margin: 0; padding: 0; font: 13px Arial, sans-serif; max-height: 9.5em; overflow-y: auto; }
#MovesList li { padding: 1px 0; animation: moveIn 0.8s ease-out; }
#MovesList li .when { color: #777; display: inline-block; width: 5.5em; }
#MovesList li .dist { font-weight: bold; display: inline-block; width: 4em; }
#MovesList li.flip { font-weight: bold; }
#MovesList li.flip .tag { background: #ffd400; padding: 0 4px; margin-left: 6px; }
@keyframes moveIn { from { background: #ffd400; } to { background: transparent; } }

/* --- the grid */

#Controls { max-width: 900px; margin: 8px auto; font-size: 90%; text-align: center; }
#Controls button { font-family: Georgia, serif; margin: 0 3px; cursor: pointer; }
#Controls button.active { font-weight: bold; background: #6C3FC1; color: white; border: 1px solid #6C3FC1; }

#HouseGrid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	gap: 5px;
	max-width: 1400px;
	margin: 6px auto;
	padding: 0 8px;
}

.hbox
{
	position: relative;
	border: 1px solid #333;
	height: 46px;
	text-align: center;
	font-family: "Courier New", monospace;
	font-weight: bold;
	cursor: default;
	transition: background-color 1.5s, color 1.5s;
}
.hbox .hd { display: block; font-size: 12px; margin-top: 5px; }
.hbox .hp { display: block; font-size: 13px; margin-top: 3px; }
.hbox.settled { border: 2px solid black; }
.hbox.settled .hp { font-size: 18px; margin-top: 0; }
.hbox.stale { border: 2px dashed #555; }

/* a district that just moved, and a bigger show when the favorite changes */
.hbox.moved { animation: moved 1.6s ease-out; z-index: 2; }
.hbox.flipped { animation: flipped 2.4s ease-out; z-index: 3; }
@keyframes moved
{
	0%   { transform: scale(1.35); box-shadow: 0 0 0 4px #ffd400; }
	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 #ffd400; }
	15%, 45%     { transform: scale(1.2); box-shadow: 0 0 0 2px #ffd400; }
	100%         { transform: scale(1);   box-shadow: 0 0 0 0 transparent; }
}

#DataFeedStatus { display: block; max-width: 900px; margin: 10px auto; text-align: center; font-size: 90%; }

#About { max-width: 900px; margin: 14px auto; border: 1px solid #50C878; background: #f8f8f8; padding: 8px 12px; font-size: 95%; text-align: center; }

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