/* Optional: Makes the sample page fill the window. */
html, body {
	margin:		0;
	padding:	0;
}

img.mapsImage {
	width: 	1656px;
	height: 946px;
	position: absolute;
	left: 230px;
	top: 38px;
}

#wards {
	display: none;
}

.sidebarButtons {
	position: absolute;
	left: 38px;
	top: 140px;
}

.sidebarButton {
	display: block;
	width: 138px;
	height: 28px;
	margin-bottom: 12px;
	cursor: pointer;
	touch-action: manipulation;		/* Taps fire at once, no double-tap-zoom wait */
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

@font-face {
	font-family: MontserratBold;
	src: url(../Fonts/Montserrat-Bold.ttf);
}

@font-face {
	font-family: MontserratRegular;
	src: url(../Fonts/Montserrat-Regular.ttf);
}

@font-face {
	font-family: MontserratSemiBold;
	src: url(../Fonts/Montserrat-SemiBold.ttf);
}

/* Stats lines: Univers LT Std Condensed (labels) and Bold Condensed (numbers).
   The overrides give both faces the same fixed ascent/descent on every
   platform, so the baseline sits 0.843em below the top of a line box whose
   line-height equals its font-size. */
@font-face {
	font-family: UniversCondensed;
	src: url(../Fonts/UniversLTStd-Cn.otf) format("opentype");
	ascent-override: 93.6%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: UniversBoldCondensed;
	src: url(../Fonts/UniversLTStd-BoldCn.otf) format("opentype");
	ascent-override: 93.6%;
	descent-override: 25%;
	line-gap-override: 0%;
}

/* LIVE results overlay (mayor and wards). Laid out in the mayor PNG's own
   pixel space (1661x947) and scaled to the 1656x946 box the image is drawn in,
   so the coordinates below match 006-HamiltonMayor-2022.png directly.
   The Ward<N>-3way-LIVE.png images are 1660x948 with the same layout shifted
   1px left and 2px up, so .ward only changes the container's transform.
   With line-height equal to font-size, Montserrat's baseline sits 0.8585em
   below the top of each text box; tops below are (baseline - that offset). */
#liveResults {
	display: none;
	position: absolute;
	left: 230px;
	top: 38px;
	width: 1661px;
	height: 947px;
	transform: scale(0.99699, 0.99894);
	transform-origin: 0 0;
	pointer-events: none;
	color: #e8e8e8;
}

#liveResults.ward {
	transform: scale(0.99759, 0.99789) translate(-1px, -2px);
}

/* The mayor PNG has its title baked in; ward PNGs don't. "Ward N" and
   "Councillor" match Ward<N>-3way-2022.png: Montserrat Bold 48 on baseline
   y=69 and Montserrat Regular 36 on baseline y=111 (mayor coordinates). */
#liveTitle {
	display: none;
	position: absolute;
	left: 770px;
	top: 28px;			/* 69 - 0.8585 * 48 */
	white-space: nowrap;
	font-family: MontserratBold;
	font-size: 48px;
	line-height: 48px;
}

#liveSubtitle {
	display: none;
	position: absolute;
	left: 770px;
	top: 80px;			/* 111 - 0.8585 * 36 */
	white-space: nowrap;
	font-family: MontserratRegular;
	font-size: 36px;
	line-height: 36px;
}

#liveResults.ward #liveTitle,
#liveResults.ward #liveSubtitle {
	display: block;
}

/* The ward design (PDF pp. 3-4) has no Polls / Tabulators line */
#liveResults.ward #liveStats {
	display: none !important;
}

.liveRow {
	position: absolute;
	left: 0;
	width: 1661px;
	height: 182px;
}

.liveRow:nth-child(1) { top: 173px; }
.liveRow:nth-child(2) { top: 371px; }
.liveRow:nth-child(3) { top: 569px; }

.liveRow div {
	position: absolute;
	white-space: nowrap;
}

.liveFirstName, .liveLastName {
	left: 949px;
	max-width: 440px;
	font-size: 48px;
	line-height: 48px;
	transform-origin: 0 0;
}

.liveFirstName {
	top: 40px;
	font-family: MontserratRegular;
}

.liveLastName {
	top: 92px;
	font-family: MontserratSemiBold;
}

.livePercent, .liveVotes {
	right: 48px;		/* 1661 - 1613 */
	text-align: right;
}

.livePercent {
	top: 42px;
	font-family: MontserratBold;
	font-size: 60px;
	line-height: 60px;
}

.liveVotes {
	top: 114px;
	font-family: MontserratRegular;
	font-size: 30px;
	line-height: 30px;
}

/* Status graphics. Winners get the ELECTED (or RE-ELECTED, if incumbent) bar
   across the top of the row plus the checkmark; a non-winning incumbent gets
   the INCUMBENT chip. Bar and checkmark positions come from row 1 of
   006-HamiltonMayor-2022.png; the chip sits below the last name, flush with
   the bottom of the row (YHYV-MUNICIPAL-TOUCHSCREEN-AUG26-2026.pdf, p. 6). */
.liveRow img {
	position: absolute;
	display: none;
}

/* Candidate photo fills the grey placeholder (x=774, 148x182) whatever the
   file's own size: scaled to cover, centred horizontally, top kept. */
.liveHeadshot {
	left: 774px;
	top: 0;
	width: 148px;
	height: 182px;
	object-fit: cover;
	object-position: center top;
}

.liveRow.hasHeadshot .liveHeadshot {
	display: block;
}

.liveBanner {
	left: 922px;
	top: 0;
}

.liveCheck {
	left: 1244px;
	top: 58px;
}

.liveIncumbent {
	left: 937px;
	top: 149px;			/* 182px row - 33px chip */
}

.liveRow.elected .liveBanner,
.liveRow.elected .liveCheck,
.liveRow.incumbent .liveIncumbent {
	display: block;
}

/* Under the bar the names move up 3px and the numbers down 12px, and the
   names must stop short of the checkmark. */
.liveRow.elected .liveFirstName {
	top: 37px;
	max-width: 280px;
}

.liveRow.elected .liveLastName {
	top: 89px;
	max-width: 280px;
}

.liveRow.elected .livePercent { top: 54px; }
.liveRow.elected .liveVotes { top: 126px; }

/* Polls / Tabulators / Turnout / Eligible Voters line. Baseline at y=817 and
   left edge at x=775 in the mayor PNG; labels Condensed, numbers Bold Condensed. */
#liveStats {
	position: absolute;
	left: 775px;
	top: 792px;			/* 817 - 0.843 * 30 */
	max-width: 857px;		/* up to the panel's right edge (x=1632) */
	white-space: nowrap;
	font-family: UniversCondensed;
	font-size: 30px;
	line-height: 30px;
	transform-origin: 0 0;
}

/* "143,375 Ballots Cast" under "Hamilton": same fonts, baseline at y=152. */
#liveBallots {
	position: absolute;
	left: 773px;
	top: 127px;			/* 152 - 0.843 * 30 */
	white-space: nowrap;
	font-family: UniversCondensed;
	font-size: 30px;
	line-height: 30px;
}

#liveStats b, #liveBallots b {
	font-family: UniversBoldCondensed;
	font-weight: normal;
}