/* LPR 2026 - Election Night Live, second layout (live2.html): number tables, small charts, outcome charts, races by tier. */

:root
{
	--text: #000;
	--muted: #555;
	--panel: #f8f8f8;
	--panel-edge: #50C878;
	--dem: #244999;
	--gop: #D22532;
	--dem-cell: #dce8f7;
	--gop-cell: #f9e1e3;
	--purple: #7030A0;
	--gold: #ffd400;
	--head-h: 36px;		/* card title; the row labels between the cards line up with these heights */
	--name-h: 28px;
	--big-h: 52px;
	--row-h: 44px;
}

* { 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; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 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;
}

/* --- the poll-based projection, a quiet link on the LIVE line (to final.html) */

#Projection { font: 13px Arial, Helvetica, sans-serif; padding-left: 14px; border-left: 1px solid #bbb; }
#Projection, #Projection:link, #Projection:visited { color: var(--dem); text-decoration: none; }
#Projection:hover { text-decoration: underline; }
#ProjTime { color: var(--muted); margin-left: 4px; }

/* --- control cards: DEM and GOP columns, row labels between the two cards */

#Control { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.Chamber { border: 1px solid #333; background: white; transition: box-shadow 0.6s; min-width: 0; }
.Chamber.changed { box-shadow: 0 0 0 4px var(--gold); }
.Chamber h2
{
	margin: 0 0 8px 0; height: var(--head-h); line-height: var(--head-h); font-size: 125%; letter-spacing: 1px; text-transform: uppercase;
	text-align: center; color: white; background: var(--purple); font-family: Arial, Helvetica, sans-serif;
}
.Nums { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9%; padding: 0 5%; }
.Nums .Name { height: var(--name-h); line-height: var(--name-h); text-align: center; color: white; font: bold 18px/var(--name-h) Arial, sans-serif; }
.Nums .Name.dem { background: var(--dem); }
.Nums .Name.gop { background: var(--gop); }
.Cell
{
	position: relative; height: var(--row-h); display: flex; align-items: center; justify-content: center;
	border: 1px solid #333; border-top: 0; font: bold 26px Arial, sans-serif; font-variant-numeric: tabular-nums;
	transition: background-color 1s;
}
.Cell.big { height: var(--big-h); font-size: 32px; }
.Cell.dem { background: var(--dem-cell); color: var(--dem); }
.Cell.gop { background: var(--gop-cell); color: var(--gop); }
.Cell.leader.dem { background: #c4d7f0; }
.Cell.leader.gop { background: #f4c9ce; }
.Cell .Lab { display: none; }
.Arrow { position: absolute; right: 8px; font-size: 16px; opacity: 0; transition: opacity 1.5s; }
.Arrow.on { opacity: 1; animation: arrowIn 0.8s ease-out; }
@keyframes arrowIn { from { transform: scale(1.8); } to { transform: none; } }
.CardNote { text-align: center; font-size: 80%; color: var(--muted); margin: 6px 12px 0 12px; min-height: 1.2em; }

#RowLabels { padding-top: calc(1px + var(--head-h) + 8px + var(--name-h)); font: bold 13px Arial, sans-serif; text-align: center; }
#RowLabels > div:not(#ChartRange) { height: var(--row-h); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #333; }
#RowLabels > div:not(#ChartRange):first-child { height: var(--big-h); }
#ChartRange { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 40px; }
#ChartRange button { margin: 0; width: 70px; }

.Minis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; border-top: 1px solid #999; margin-top: 10px; padding: 6px 10px 10px 4px; }
.MiniTitle { font: bold 13px Arial, sans-serif; text-align: center; margin-bottom: 2px; }
.MiniChart { position: relative; height: 150px; }
.MiniChart svg { display: block; width: 100%; height: 100%; }
.MiniChart .axis { font: 10px Arial, sans-serif; fill: #444; }
.MiniChart .grid { stroke: #ddd; stroke-width: 1; }
.MiniChart .frame { fill: none; stroke: #333; stroke-width: 1; }
.MiniChart .half { stroke: #888; stroke-width: 1; stroke-dasharray: 4 3; }
.MiniChart .dline { fill: none; stroke: var(--dem); stroke-width: 2; }
.MiniChart .rline { fill: none; stroke: var(--gop); stroke-width: 2; }
.MiniChart .hoverline { stroke: black; stroke-width: 1; opacity: 0.4; }
.MiniTip
{
	position: absolute; pointer-events: none; display: none; z-index: 5;
	background: white; border: 1px solid #999; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	padding: 3px 6px; font: 11px Arial, sans-serif; white-space: nowrap;
}
.MiniTip .d { color: var(--dem); font-weight: bold; }
.MiniTip .r { color: var(--gop); font-weight: bold; }

/* --- outcome charts and moves */

.Panel { background: white; border: 1px solid #333; padding: 8px 12px; margin-top: 14px; min-width: 0; }
.PanelHead { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.PanelHead h3 { margin: 0; font-size: 100%; font-weight: normal; }

#Middle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; }

.Dist { position: relative; }
.DistBars { position: relative; display: flex; align-items: flex-end; gap: 1px; height: 170px; border-bottom: 1px solid #333; }
.DistBars .bar { flex: 1; min-width: 0; height: 0; transition: height 1s; }
.DistBars .bar.dem { background: var(--dem); }
.DistBars .bar.gop { background: var(--gop); }
.DistBars .bar.top { outline: 2px solid var(--gold); }
.DistLine { position: absolute; top: 0; bottom: -4px; width: 0; border-left: 2px dashed black; }
.DistLine span { position: absolute; top: 6px; font: bold 10px/1.25 Arial, sans-serif; text-align: center; white-space: nowrap; background: white; padding: 2px 4px; }
.DistTicks { display: flex; gap: 1px; height: 16px; }
.DistTicks div { flex: 1; min-width: 0; display: flex; justify-content: center; overflow: visible; white-space: nowrap; font: 10px Arial, sans-serif; padding-top: 2px; }
.DistTicks .d, .DistNote .d { color: var(--dem); font-weight: bold; }
.DistTicks .r, .DistNote .r { color: var(--gop); font-weight: bold; }
.DistNote { text-align: center; font: 12px Arial, sans-serif; color: var(--muted); margin-top: 6px; min-height: 1.2em; }

#MovesPanel { display: flex; flex-direction: column; }
#MovesList { list-style: none; margin: 0; padding: 0; font: 13px Arial, sans-serif; overflow-y: auto; max-height: 220px; }
#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; } }

/* --- races by tier: safe DEM on top, swing races in the middle, safe GOP at the bottom */

.Tier { border: 1px solid #333; margin-top: 18px; padding: 6px 12px 10px 12px; }
.Tier.dem { border-top: 5px solid var(--dem); }
.Tier.gop { border-top: 5px solid var(--gop); }
.Tier.swing { max-width: 1100px; margin-left: auto; margin-right: auto; border: 2px solid var(--purple); border-top: 5px solid var(--purple); }
.TierHead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.TierHead h3 { margin: 0 0 4px 0; font-size: 100%; }
.Tier.dem h3 { color: var(--dem); }
.Tier.gop h3 { color: var(--gop); }
.Tier.swing h3 { color: var(--purple); }
.TierCount { font: 12px Arial, sans-serif; color: var(--muted); }
.TierNote { font-size: 80%; color: var(--muted); margin-bottom: 4px; }
.TierGrid { display: grid; gap: 4px; margin-top: 4px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.Tier.swing .TierGrid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* swing races get bigger cards: both candidates and a DEM/GOP split bar */
.stile .more { display: none; }
.Tier.swing .stile { padding: 4px 0 0 0; }
.Tier.swing .stile .st { font-size: 24px; }
.Tier.swing .stile .nm { font-size: 12px; }
.Tier.swing .stile .pc { font-size: 15px; margin-bottom: 4px; }
.Tier.swing .stile .more { display: block; background: white; color: #111; padding: 5px 8px 7px 8px; text-align: left; border-top: 1px solid #333; }
.cand { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.cand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand.d b { color: var(--dem); }
.cand.r b { color: var(--gop); }
.split { display: flex; height: 8px; margin-top: 5px; border: 1px solid #333; }
.split div { height: 100%; transition: width 1s; }
.split .sd { background: var(--dem); }
.split .sr { background: var(--gop); }

#HousePanel { margin-top: 18px; }
.HouseHead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.HouseHead h3 { margin: 0; font-size: 100%; }
#HouseGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 3px; }

.stile
{
	position: relative; border: 1px solid #333; text-align: center; padding: 3px 2px 4px 2px; cursor: default;
	font-family: Arial, sans-serif; transition: background-color 1.5s, color 1.5s;
}
.stile .st { display: block; font-size: 18px; font-weight: bold; line-height: 1.1; }
.stile .nm { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stile .pc { display: block; font-size: 13px; font-weight: bold; margin-top: 1px; }

.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; }

.chk { color: var(--gold); font-weight: bold; text-shadow: 0 0 2px #000, 0 0 1px #000; }
.hbox .chk { font-size: 16px; line-height: 16px; }
.stile.settled, .hbox.settled { border: 2px solid black; }
.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; }
}

#Legend { text-align: center; font: 12px Arial, sans-serif; color: var(--muted); margin-top: 10px; }
#Legend .chk { font-size: 15px; }
#Legend .up { color: var(--dem); }
#Legend .down { color: var(--gop); }
#Legend .trd, #Legend .trr { background: white; border: 1px solid #999; font-size: 10px; padding: 0 2px; }
#Legend .trd { color: var(--dem); }
#Legend .trr { color: var(--gop); }

/* trend arrows on the races: a small white chip in the top right corner */
.tr { display: none; position: absolute; top: 1px; right: 1px; z-index: 1; font: bold 9px/10px Arial, sans-serif; padding: 0 1px; background: white; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.tr.on { display: block; }
.tr.D { color: var(--dem); }
.tr.R { color: var(--gop); }
/* House momentum: a ring in the gaining party's color, in the gap between boxes (white inside, so it shows on any box) */
.hbox.trendD, .hbox.trendR { z-index: 1; }
.hbox.trendD { box-shadow: 0 0 0 1px white, 0 0 0 3px var(--dem); }
.hbox.trendR { box-shadow: 0 0 0 1px white, 0 0 0 3px var(--gop); }
#HouseMomentum { font: 13px Arial, sans-serif; margin: 0 0 10px 0; min-height: 1.3em; }
#HouseMomentum .D, #Legend .ringD, #HouseMomentum .ringD { color: var(--dem); font-weight: bold; }
#HouseMomentum .R, #Legend .ringR, #HouseMomentum .ringR { color: var(--gop); font-weight: bold; }
#HouseMomentum .ringD, #HouseMomentum .ringR, #Legend .ringD, #Legend .ringR { padding: 0 3px; border-radius: 2px; }
#HouseMomentum .ringD, #Legend .ringD { box-shadow: 0 0 0 1px white, 0 0 0 3px var(--dem); }
#HouseMomentum .ringR, #Legend .ringR { box-shadow: 0 0 0 1px white, 0 0 0 3px var(--gop); }
.stile .tr { top: 2px; right: 2px; font-size: 11px; line-height: 12px; padding: 0 2px; }
.Tier.swing .stile .tr { top: 4px; right: 4px; font-size: 14px; line-height: 16px; padding: 1px 3px; }
.tt { font-size: 11px; font-weight: bold; margin-top: 3px; min-height: 13px; }
.tt.D { color: var(--dem); }
.tt.R { color: var(--gop); }

/* --- 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: 1100px)
{
	#Middle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	#MovesPanel { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 900px)
{
	#Control, #Middle { grid-template-columns: minmax(0, 1fr); }
	#MovesPanel { grid-row: auto; }
	#Projection { border-left: 0; padding-left: 0; text-align: center; }
	#RowLabels { order: -1; padding-top: 0; }
	#RowLabels > div:not(#ChartRange) { display: none; }
	#ChartRange { flex-direction: row; justify-content: center; margin-top: 0; }
	.Cell .Lab { display: block; position: absolute; top: 2px; left: 5px; font: normal 10px Arial, sans-serif; color: var(--muted); }
	.Cell { font-size: 22px; padding-top: 6px; }
	.Cell.big { font-size: 28px; }
	.nav { width: 100px; font-size: 0.7em; }
	.Tier.swing { max-width: none; }
}

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