/* elections map styles - consolidated into the repo.
   Part A: former external css/style/mapsite.css (map layout, sidebar,
   legend, timeline, by-elections). Part B: former inline <style> block
   from main.php (search, toasts, seat history, lineage, view modes).
   Order preserved from the old load order so the cascade is unchanged. */

/* ---- Part A: map / sidebar / timeline (was mapsite.css) ---- */

/* Seat outlines keep a constant on-screen width instead of scaling with the
   svg-pan-zoom viewport. Each seat's stroke is baked in map units, so zooming
   in (into London and the other dense conurbations especially) multiplied the
   border until it swallowed the fill of the smallest seats. non-scaling-stroke
   renders the outline at its 1:1 (national-view) thickness at every zoom, so
   the party colour stays legible however far you zoom in. Applies to both the
   geographic and equal-size layouts (both are .constpath). */
.constpath {
	vector-effect: non-scaling-stroke;
}

/* dense-cluster hotspots (assets/js/dense-hotspots.js): ring + name/count pill
   over each conurbation at the national view; hover firms the ring up and
   inverts the pill. Hidden on the mobile shell. */
#dense-hotspots .dense-hotspot { cursor: pointer; }
#dense-hotspots .dh-halo { fill: none; stroke: #fff; stroke-width: 3.2; opacity: 0.9; pointer-events: none; }
#dense-hotspots .dh-ring { fill: transparent; stroke: #111; stroke-width: 1.3; stroke-dasharray: 3 2.5; pointer-events: all; }
#dense-hotspots .dh-lead-halo { stroke: #fff; stroke-width: 3; pointer-events: none; }
#dense-hotspots .dh-lead { stroke: #111; stroke-width: 1.2; pointer-events: none; }
#dense-hotspots .dh-pill .dh-bg { fill: #fff; }
#dense-hotspots .dh-pill .dh-edge { fill: none; stroke: #111; stroke-width: 1; }
#dense-hotspots .dh-pill .dh-tab rect { stroke: none; }
#dense-hotspots .dh-pill text { font: 11px Helvetica, Arial, sans-serif; fill: #111; pointer-events: none; }
#dense-hotspots .dh-pill .dh-count { font-weight: bold; }
#dense-hotspots .dense-hotspot:hover .dh-ring { stroke-dasharray: none; stroke-width: 1.8; fill: rgba(255,255,255,0.18); }
#dense-hotspots .dense-hotspot:hover .dh-pill .dh-bg { fill: #111; }
#dense-hotspots .dense-hotspot:hover .dh-pill text { fill: #fff; }
body.mb-on #dense-hotspots { display: none; }

body {

	overflow-y: hidden;

}

h1 {
	
	font-size: 2rem;
	
}

.container {
	
	position: absolute;
	
	max-width: 100%;
	
	height: 100%;
	
	padding: 0px;
	
}

.highest {
	
	
	height: 100%;
	
	float: left;
	
}

.hidden {
	
	display: none;
	
}

#sidebar-col {
	
	border-right: 3px solid black;
	
	background-color: darkslategrey;
	
	z-index: 999;
	
}

#map-col {
	
	border-right: 1px solid black;

	background-color: aliceblue;
	
}

#data-col {
	
	background-color: aliceblue;
	
}

#data-col, #byelections {
	
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	
}

#data-col::-webkit-scrollbar, #byelections::-webkit-scrollbar {
	
	display: none;
	
}

#conloading {
    
    position: absolute;
    
    height: 100%;
    width: 100%;
    
    background: url('https://www.daniel-barnett.co.uk/css/images/loading.gif'), #fff;
    background-repeat: no-repeat;
    background-position: center;
    
    opacity: 0.8;
    
    z-index: 9999;
    
}

path {
	
	cursor: pointer;
	
}

table {
	
	width: 100%;
	
	border-spacing: 0;
	border-collapse: collapse;
	
	font-size: 14px;
	
}

tr > th, tr > td {	
	
	border: 1px solid #a2a9b1;
	
	padding: 0.2em 0.4em;
	
}

th {

	background-color: #eaecf0;
	
}

.central {
	
	text-align: center;
	
}

.left-align {
	
	text-align: left;
	
}

.right-align {
	
	text-align: right;
	
}

.bold {

	font-weight: bold;
	
}

#cnst_name {

	margin-top: 30px;

}

#cnst-geography {

	margin: 2px 0 6px 0;

	font-size: 12px;
	letter-spacing: 0.02em;

	color: #5a6b7b;

}

#cnst-geography:empty {

	display: none;

}

#results-table {
	
	float: left;
	
}

#results-table-caption {

	background-color: #f2f2f2;

}

/* ---- STV count table ---- */
#stv-note { clear: both; font-size: 12px; color: #666666; font-style: italic; margin: 8px 0; }
#stv-note:empty { margin: 0; }
#stv-count { clear: both; }
.stv-count-title { font-weight: bold; font-size: 13px; margin: 10px 0 4px; }
.stv-count-title .stv-quota { font-weight: normal; color: #666666; font-size: 12px; }
.stv-scroll { overflow-x: auto; }
.stv-count-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.stv-count-table th, .stv-count-table td {
	border: 1px solid #dddddd; padding: 3px 7px; text-align: right; white-space: nowrap;
}
.stv-count-table thead th { background-color: #f2f2f2; text-align: center; }
.stv-count-table th.stv-cand, .stv-count-table td.stv-cand { text-align: left; }
.stv-sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: middle; }
.stv-party { color: #777777; }
.stv-count-table td.stv-elected { font-weight: bold; background-color: #eef7ee; }
.stv-count-table td.stv-excluded { color: #999999; }
.stv-count-table td.stv-empty { color: #cccccc; text-align: center; }
.stv-tag { font-size: 10px; color: #b00000; text-transform: uppercase; }
.stv-count-table tr.stv-nt td { color: #777777; font-style: italic; }

#wikisource {
	
	padding-left: 20px;
	padding-right: 20px;
	
	font-size: 12px;
	
}

.chart {
	
	position: relative;
	float: left;
	
	width: 50%;	
	height: 350px;
	
}

#gainhold {
	
	font-weight: bold;
	font-size: 22px;
	
}

#bchange {
	
	float: left;
	
}

#recentevents {
	
	color: red;
	
}

#currentyear, #byelections, #lastgeneralsmall, #previouselection {

	color: white;
	
}

#currentyear, #lastgeneralsmall, #previouselection {
	
	font-size: 12px;
	
}

#byelections {
	
	height: 80%;
	
	margin-top: 15px;
	
	font-size: 14px;
	
}

#currentgeneral, #nextgeneral, #lastgeneral {
	
	font-weight: bold;
	font-size: 26px;
	
	text-align: center;
	
}

#byelections > a, a.generalelection, a.activeelection {
	
	color: white;
	
}

a.activeelection {
	
	font-weight: bold;
	text-decoration: underline;
	
}

#nextgeneral, a.nextgeneralelection, #lastgeneral, #lastgeneralsmall, #previouselection {
	
	color: grey !important;
	
}
	
/* the 640-tall foreignObject hit-tests its whole rect, so its empty area
   swallowed map clicks - let it pass through, keep the legend box itself live */
#legend-fo {
	pointer-events: none;
}

#legend-box {

	/* lives inside the map svg's foreignObject (#legend-fo, main.php) - its
	   position and width come from the foreignObject's map-pixel x/y/width,
	   so no %-of-column anchoring here (that drifted against the fixed-px
	   map at different browser zooms) */
	width: 100%;

	background-color: rgba(240,248,255,0.8);

	pointer-events: auto;

}

.legend-row {
	
	position: relative;
	float: left;
	
	width: 100%;
	
}

.legend-colour-box {
	
	position: relative;
	float: left;
	
	height: 18px;
	width: 18px;
	
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	
}

#legend-colour-box-top {
	
	border-top: 1px solid black;
	
}

.legend-party-name {
	
	position: relative;
	float: left;
	
	font-size: 12px;
	
	line-height: 18px;
	
	margin-left: 8px;
	
}
	
#date-box {
	
	position: absolute;
	top: 0%;
	
	margin-left: -15px;
	
	height: 50px;
	width: 180px;	
	
	background-color: white;
	
	border-right: 4px solid black;
	border-bottom: 4px solid black;
	
	font-size: 26px;
	
	line-height: 40px;
	
	text-align: center;
	
}

#full-date-box {
    
    display: none;
    
}

.nexterpos {
	
	position: relative;
	
	bottom: 0px;
	
	margin: auto;
	
	text-align: center;
	
	cursor: pointer;
	
}

.nexterpos:hover {
    
    text-decoration: underline;
    
}

.range-slider {
	
	height: 100%;
	
}

#timeline {
	
	position: relative;
	
	top: 150px;
	left: 50%;
	
	margin-left: -3px;
	
	/*height: calc(100% - 85px);*/
  	
}

input[type=range]{
	
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	
	-webkit-appearance: none;
	
	margin: auto;
	
	background: transparent;
	cursor: pointer;
	width: 100%;

}

input[type=range]::-webkit-slider-runnable-track {
	
	background: #053a5f;
	height: 0.5rem;
	
}

input[type=range]::-moz-range-track {
	
	background: #053a5f;
	height: 0.5rem;
	
}

input[type=range]::-webkit-slider-thumb {
	
	-webkit-appearance: none;
	appearance: none;
	margin-top: -12px;
	background-color: white;
    height: 2rem;
    width: 1rem;  
	
}

input[type="range"]::-moz-range-thumb {
	
	border: none;
	border-radius: 0;
	background-color: white;
	height: 2rem;
	width: 1rem;
	
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
  border: 1px solid #053a5f;
  outline: 3px solid #053a5f;
  outline-offset: 0.125rem;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #053a5f;
  outline: 3px solid #053a5f;
  outline-offset: 0.125rem;     
}

#values-slider {
	
	top: 20px;
	
	margin: auto auto auto 10px;
	/*padding: 16px 0;*/
	
	height: 85%;
	
}

#unopposed {
 
   font-style: italic;
    
}

#party-or-bench {
    
    display: none;
    
}


/* ---- Part B: search, toasts, seat history, lineage, view modes (was inline in main.php) ---- */

/* constituency search + reset view (feature/search) */
#seat-search-box {
	position: relative;
	z-index: 10;
	margin: 4px auto 2px auto;
	text-align: center;
}
#constituency-search {
	width: 230px;
	padding: 3px 8px;
	border: 1px solid #9db8d2;
	border-radius: 4px;
	background-color: rgba(240,248,255,0.8);
	font-size: 14px;
}
#constituency-search:focus {
	background-color: #ffffff;
	border-color: #4d7196;
	outline: none;
}
#reset-view-button {
	margin-left: 6px;
	padding: 3px 8px;
	border: 1px solid #9db8d2;
	border-radius: 4px;
	background-color: rgba(240,248,255,0.8);
	font-size: 13px;
	cursor: pointer;
}
#reset-view-button:hover {
	background-color: #dcebf7;
}
#region-focus-box {
	margin-top: 5px;
	font-size: 13px;
	color: #4d5b6a;
}
#region-focus-box select {
	max-width: 210px;
	margin-left: 3px;
	padding: 2px 4px;
	border: 1px solid #9db8d2;
	border-radius: 4px;
	background-color: rgba(240,248,255,0.8);
	font-size: 13px;
	cursor: pointer;
}
ul.ui-autocomplete {
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 14px;
}
/* unified search: section headers + the person rows' context line.
   The headers are solid slate-blue bands (the search box's own focus blue)
   so they read as labels, not as selectable rows. */
ul.ui-autocomplete .ui-autocomplete-category {
	margin: 0;
	padding: 4px 8px 3px 8px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #ffffff;
	background-color: #4d7196;
	cursor: default;
}
ul.ui-autocomplete .ui-autocomplete-category:not(:first-child) {
	margin-top: 4px;
}
ul.ui-autocomplete .search-sub {
	display: block;
	font-size: 11px;
	color: #6a7686;
}
ul.ui-autocomplete .ui-state-active .search-sub {
	color: inherit;
}

#toast-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10000;
}

#toast-container .toast {
	background-color: aliceblue;
	border: 1px solid #bbbbbb;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	color: #000000;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	margin-top: 8px;
	max-width: 320px;
	padding: 10px 14px;
}

#toast-container .toast-retry {
	font-weight: bold;
	margin-left: 12px;
}

#toast-container .toast-dismiss {
	color: #666666;
	font-weight: bold;
	margin-left: 12px;
	text-decoration: none;
}

#toast-container .toast-errno {
	color: #999999;
	display: block;
	font-size: 11px;
	margin-top: 2px;
}

/* seat history panel (feature/constituency-history) */
#seat-history-toggle { margin-top: 10px; }
#seat-history-chart { width: 100%; height: 300px; }
#seat-history-winners { text-align: center; margin: 5px 0 10px 0; }
.seat-history-winner { display: inline-block; white-space: nowrap; margin: 2px 6px; font-size: 12px; }
.seat-history-chip { display: inline-block; width: 10px; height: 10px; border: 1px solid #666666; vertical-align: baseline; }
#seat-history-note { font-size: 11px; font-style: italic; text-align: center; }
#seat-history-crumbs { text-align: center; font-size: 12px; margin: 4px 0; }
#seat-history-crumbs a { font-weight: bold; }
#seat-history-branches { text-align: center; font-size: 12px; margin: 4px 0 10px 0; }
.seat-branch-chip { display: inline-block; margin: 2px 5px; padding: 2px 8px;
	border: 1px solid #9db8d2; border-radius: 10px;
	background-color: rgba(240,248,255,0.8); cursor: pointer; white-space: nowrap; }
.seat-branch-chip:hover { background-color: #dcebf7; }
#seat-lineage-title { font-weight: bold; margin-top: 8px; }
#seat-lineage-chart { width: 100%; overflow-x: auto; }
#seat-lineage-controls { font-size: 12px; margin: 2px 0 6px 0; }
.lineage-detail-option { display: inline-block; margin: 0 3px; padding: 1px 8px;
	border: 1px solid #9db8d2; border-radius: 10px;
	background-color: rgba(240,248,255,0.8); cursor: pointer; }
.lineage-detail-option:hover { background-color: #dcebf7; }
.lineage-detail-active { background-color: #4d7196; border-color: #4d7196; color: #ffffff; }
.lineage-detail-active:hover { background-color: #4d7196; }

/* map view modes (feature/map-view-modes) */

/* the mode picker + stat legend float over the top-right corner of the
   map (out of the document flow), so they never collide with the date
   box top-left and never push the map down when they appear/grow */
#map-col {
	position: relative;
}

#map-mode-overlay {
	position: absolute;
	top: 6px;
	right: 8px;
	/* above #seat-search-box (z-index 10), whose full-width div was
	   swallowing clicks on the View/Map/Colour radios */
	z-index: 30;
	text-align: right;
}

/* Equal-size cartogram build indicator: the first (uncached) build is a
   several-second synchronous computation that freezes the map, so a centred
   badge is shown over the map while it runs (assets/js/cartogram.js). The pill
   carries its own dark surface + light text so it reads over the map in either
   theme; pointer-events:none so it never swallows a click on the radios. */
#cartogram-loading {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.cg-loading-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 20px;
	background: rgba(20,22,28,0.82);
	color: #f3f2ef;
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}
.cg-spinner {
	width: 15px; height: 15px; flex: none;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.28);
	border-top-color: #f3f2ef;
	animation: cg-spin 0.8s linear infinite;
}
@keyframes cg-spin { to { transform: rotate(360deg); } }

/* Seat spotlight (assets/js/seat-spotlight.js): caption pill at the foot of
   the map while a set of seats is lit up; the × clears it */
#seat-spotlight {
	position: absolute;
	left: 0; right: 0; bottom: 14px;
	z-index: 40;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
#seat-spotlight .cg-loading-pill { pointer-events: auto; max-width: 92%; }
#seat-spotlight .sp-star { color: #f5c542; }
#seat-spotlight .sp-clear { color: #f3f2ef; opacity: 0.7; text-decoration: none; font-size: 17px; line-height: 1; margin-left: 2px; }
#seat-spotlight .sp-clear:hover { opacity: 1; }

/* Dorling layout: the geographic paths stay visible under the circles as a
   flat neutral "shadow" coastline. A CSS rule beats a presentation ATTRIBUTE,
   so the paths' fill/stroke attributes keep carrying the live data that the
   cartogram colour mirror reads for the circles, while the eye sees only the
   flattened land shape. Element opacity (Cabinet dim, region focus) still
   applies on top, which is wanted. */
#map-col.cartogram-shadow .constpath {
	fill: #dce6ef !important;
	stroke: #c6d4e2 !important;
}

#view-mode-box {
	font-family: 'PT Sans', sans-serif;
	font-size: 12px;
	background-color: rgba(240,248,255,0.8);
	border-radius: 4px;
	padding: 2px 6px;
	display: block;
	text-align: left;
	/* sized to the 2-column options grid below (48px label + measured column
	   maxes + gap), so the widest column (Proportionality) never clips; the
	   narrower box also clears the (centred) reset-view button */
	max-width: 240px;
}

/* each control ("View:", "Map:", "Colour:") is a flex row with a fixed-width
   label column, so its options share a common left edge and any that wrap to a
   second line align under the first option rather than under the label */
.vmb-row {
	display: flex;
	align-items: baseline;
}

.vmb-label {
	flex: 0 0 auto;
	width: 48px;
}

/* the options sit in an explicit 2-column grid, so every row of a control
   lines up in tidy columns instead of free-wrapping to a ragged edge */
.vmb-opts {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: start;
	column-gap: 10px;
}

#view-mode-box label {
	display: inline-block;
	margin: 0 0 1px 0;
	font-weight: normal;
	cursor: pointer;
	white-space: nowrap;
}

#view-mode-box input[type=radio] {
	vertical-align: middle;
	margin-right: 2px;
}

#view-mode-label, #view-layout-label, #view-shade-label {
	font-weight: bold;
}

#stat-legend-box {
	font-family: 'PT Sans', sans-serif;
	font-size: 12px;
	background-color: rgba(240,248,255,0.8);
	border-radius: 4px;
	padding: 4px 8px;
	display: inline-block;
	margin-top: 4px;
	text-align: left;
}

#stat-legend-title {
	font-weight: normal;
	color: #111;
	font-size: 13px;
	display: block;
}

#stat-legend-gradient {
	display: block;
	width: 160px;
	height: 12px;
	border: 1px solid #bbbbbb;
}

#stat-legend-labels {
	display: block;
	width: 160px;
}

#stat-legend-min {
	float: left;
}

#stat-legend-max {
	float: right;
}

#stat-legend-nodata {
	display: block;
	clear: both;
}

#stat-legend-nodata-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: rgb(180,180,180);
	border: 1px solid #bbbbbb;
	vertical-align: middle;
	margin-right: 3px;
}

#stat-legend-note {
	display: block;
	font-size: 11px;
	font-style: italic;
}


/* ---- Part C: ranked marginality / turnout panel, v2 (feature/stat-panel) ---- */

#stat-panel {

	padding: 12px 18px 20px 18px;

	font-size: 13px;

}

#stat-panel-title {

	font-weight: bold;
	font-size: 18px;

	text-align: center;

	margin: 6px 0 8px 0;

}

/* headline stat tiles: label / big number / context, party-coloured top edge */
.stat-tiles {

	display: flex;
	gap: 8px;

	margin-bottom: 10px;

}

.stat-tile {

	flex: 1 1 0;
	min-width: 0;

	background-color: rgba(255,255,255,0.75);

	border-top: 3px solid #c9d4de;
	border-radius: 4px;

	padding: 6px 8px;

	text-align: center;

}

.stat-tile-label {

	display: block;

	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;

	color: #7a8794;

}

.stat-tile-big {

	display: block;

	font-size: 20px;
	font-weight: bold;

	color: #1b1b1b;
	font-variant-numeric: tabular-nums;

	line-height: 1.2;

}

.stat-tile-sub {

	display: block;

	font-size: 10px;

	color: #556270;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

}

/* filter box (persistent across body rebuilds) */
#stat-panel-filter-box {

	text-align: center;

	margin-bottom: 4px;

}

#stat-panel-filter {

	width: 100%;

	padding: 4px 10px;

	border: 1px solid #9db8d2;
	border-radius: 4px;

	background-color: rgba(255,255,255,0.75);

	font-size: 13px;

}

#stat-panel-filter:focus {

	background-color: #ffffff;
	border-color: #4d7196;
	outline: none;

}

/* sticky section + band headers (stick within #data-col's scroll) */
.stat-section-title,
.stat-band-header {

	position: sticky;
	top: 0;
	z-index: 2;

	background-color: aliceblue;

	font-weight: bold;
	font-size: 13px;

	color: #333333;

	border-bottom: 1px solid #c9d4de;

	margin: 14px 0 6px 0;
	padding: 3px 0;

}

.stat-band-header {

	cursor: pointer;

	margin: 8px 0 4px 0;

}

.stat-band-header:hover {

	color: #000000;

}

.stat-band-arrow {

	display: inline-block;

	width: 14px;

	font-size: 10px;
	color: #7a8794;

}

.stat-band-count {

	float: right;

	background-color: rgba(0,0,0,0.07);
	border-radius: 9px;

	padding: 0 8px;

	font-weight: normal;
	font-size: 11px;

	color: #556270;

}

/* one row: rank | icon | (name over bar) | figure; left edge = winner colour */
.stat-row {

	display: flex;
	align-items: center;

	padding: 3px 4px;
	margin-bottom: 2px;

	border-left: 4px solid transparent;
	border-radius: 0 4px 4px 0;

	cursor: pointer;

	transition: background-color 0.12s ease;

}

.stat-row:hover {

	background-color: #dcebf7;

}

/* podium: each section's top three, slightly larger */
.stat-podium {

	padding: 6px 4px;

}

.stat-podium .stat-name {

	font-size: 14px;
	font-weight: bold;

}

.stat-rank {

	flex: 0 0 34px;

	color: #7a8794;
	font-size: 11px;

	text-align: right;
	padding-right: 8px;

}

/* filled rank medallion (pill, so three-digit ranks fit) */
.stat-rank-medal {

	flex: 0 0 34px;

	border-radius: 10px;

	margin-right: 8px;
	padding: 1px 0;

	color: #ffffff;
	text-shadow: 0 0 2px rgba(0,0,0,0.55);

	font-size: 11px;
	font-weight: bold;

	text-align: center;

}

.stat-icon {

	flex: 0 0 24px;
	height: 22px;

	margin-right: 8px;

	border: 1px solid transparent;
	border-radius: 3px;

	transition: transform 0.15s ease;

}

.stat-row:hover .stat-icon {

	transform: scale(1.35);

}

.stat-icon svg {

	width: 20px;
	height: 20px;

	display: block;

	margin: 0 auto;

}

.stat-row-main {

	flex: 1 1 auto;
	min-width: 0;

}

.stat-name {

	display: block;

	color: #1b1b1b;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	line-height: 1.25;

}

.stat-badge {

	font-size: 10px;
	font-style: italic;

	color: #7a8794;

}

/* thin bar, rounded data end, recessive track; fill colour = winning party;
   the sweep class holds fills at zero for one frame so the width transition
   animates them in on first paint */
.stat-bar {

	display: block;

	height: 8px;

	margin-top: 2px;

	background-color: rgba(0,0,0,0.06);
	border-radius: 4px;

	overflow: hidden;

}

.stat-bar-fill {

	display: block;

	height: 100%;

	border-radius: 0 4px 4px 0;

	transition: width 0.6s ease;

}

.stat-sweep .stat-bar-fill {

	width: 0 !important;

}

.stat-fig {

	flex: 0 0 52px;

	text-align: right;

	color: #1b1b1b;
	font-variant-numeric: tabular-nums;

	padding-left: 8px;

}

.stat-note {

	text-align: center;

	font-size: 11px;
	font-style: italic;
	color: #7a8794;

	margin-top: 10px;

}

/* "Back to rankings" atop the constituency panel while a stat view is active */
#stat-back {

	padding: 8px 0 0 12px;

	font-size: 13px;

}

/* party picker chips (stat panel, marginality view) */
.stat-chips {

	text-align: center;

	margin: 0 0 8px 0;

	line-height: 2;

}

.stat-chip {

	display: inline-block;

	margin: 0 3px;
	padding: 1px 10px;

	border: 1px solid #9db8d2;
	border-radius: 11px;

	background-color: rgba(240,248,255,0.8);

	font-size: 12px;

	cursor: pointer;

	white-space: nowrap;

}

.stat-chip:hover {

	background-color: #dcebf7;

}

.stat-chip-active {

	background-color: #4d7196;
	border-color: #4d7196;

	color: #ffffff;

}

.stat-chip-swatch {

	display: inline-block;

	width: 9px;
	height: 9px;

	margin-right: 5px;

	border: 1px solid rgba(0,0,0,0.25);
	border-radius: 2px;

	vertical-align: baseline;

}

/* measure toggle (percentage vs vote counts), a compact segmented pair
   under the panel title - present in both marginality and turnout views */
.stat-measure {

	text-align: center;

	margin: 0 0 8px 0;

}

.stat-mchip {

	display: inline-block;

	padding: 2px 12px;

	border: 1px solid #9db8d2;

	background-color: rgba(240,248,255,0.8);

	font-size: 12px;

	cursor: pointer;

	white-space: nowrap;

}

.stat-mchip:first-child {

	border-radius: 11px 0 0 11px;

}

.stat-mchip:last-child {

	border-left: none;

	border-radius: 0 11px 11px 0;

}

.stat-mchip:hover {

	background-color: #dcebf7;

}

.stat-mchip-active {

	background-color: #4d7196;
	border-color: #4d7196;

	color: #ffffff;

}

/* keep the divider crisp when the left chip is the active (dark) one */
.stat-mchip-active + .stat-mchip {

	border-left: 1px solid #4d7196;

}

/* region scope dropdown (stat panel, both views) */
.stat-region {

	text-align: center;

	margin: 0 0 8px 0;

	font-size: 12px;

}

.stat-region label {

	color: #4d5b6a;

}

.stat-region select {

	max-width: 190px;

	margin-left: 4px;
	padding: 1px 4px;

	border: 1px solid #9db8d2;
	border-radius: 6px;

	background-color: rgba(240,248,255,0.8);

	font-size: 12px;

	cursor: pointer;

}

/* ---- Cabinet viewer (assets/js/cabinet.js) ---- */

#cabinet-panel {

	padding: 4px 8px 12px 8px;

}

#cabinet-head {

	padding-bottom: 6px;

}

#cabinet-title {

	font-weight: bold;
	font-size: 18px;

	text-align: center;

	margin: 6px 0 2px 0;

}

#cabinet-span {

	text-align: center;

	font-size: 11px;
	color: #8792a0;

	margin: 0 0 3px 0;

}

/* ---- timeline playback bar ---- */
#playback-bar {
	font-family: 'PT Sans', sans-serif;
	background-color: rgba(240,248,255,0.92);
	border-radius: 6px;
	padding: 6px 8px;
	max-width: 440px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);
	/* absolute overlay in the top-centre so it never consumes vertical flow and
	   pushes the map off the bottom of the screen; sits above the top controls */
	position: absolute;
	top: 62px;
	left: 50%;
	transform: translateX(-50%);
	width: 440px;
	z-index: 100;   /* above the search box / region dropdown (z-index 10-30) */
}

.pb-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pb-btn {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background-color: #2f4b7c;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.pb-btn:hover { background-color: #24395f; }

/* horizontal scrubber - override the global input[type=range] rule (which
   rotates ranges 90deg for the old vertical timeline) and give it a bordered
   track so its edges read clearly */
#pb-scrub {
	flex: 1 1 auto;
	min-width: 90px;
	height: 16px;
	margin: 0 4px 0 0;
	cursor: pointer;
	transform: none;
	-moz-transform: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}
#pb-scrub::-webkit-slider-runnable-track {
	height: 8px;
	background: #e6edf6;
	border: 1px solid #2f4b7c;
	border-radius: 4px;
}
#pb-scrub::-moz-range-track {
	height: 8px;
	background: #e6edf6;
	border: 1px solid #2f4b7c;
	border-radius: 4px;
}
#pb-scrub::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -5px;
	height: 16px;
	width: 10px;
	border-radius: 3px;
	background: #2f4b7c;
	border: 1px solid #16233b;
}
#pb-scrub::-moz-range-thumb {
	height: 16px;
	width: 10px;
	border-radius: 3px;
	background: #2f4b7c;
	border: 1px solid #16233b;
}

.pb-speeds { flex: 0 0 auto; display: flex; gap: 2px; }
.pb-speed {
	border: 1px solid #c3ccd8;
	background: #fff;
	color: #33475b;
	font-size: 10px;
	border-radius: 3px;
	padding: 2px 4px;
	cursor: pointer;
	line-height: 1;
}
.pb-speed-active { background: #2f4b7c; color: #fff; border-color: #2f4b7c; }

.pb-readout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 5px;
	min-height: 16px;
}
#pb-caption { font-size: 12px; color: #33475b; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pb-tally { flex: 0 0 auto; display: flex; gap: 5px; }
.pb-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: bold; color: #33475b; }
.pb-chip-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; border: 0.5px solid rgba(0,0,0,0.3); }

/* seat-flip pulse: a brief bright ring so the eye catches each change */
@keyframes pbPulse {
	0%   { stroke: #ffffff; stroke-width: 3.5; stroke-opacity: 1; }
	55%  { stroke: #ffdf3d; stroke-width: 2.2; stroke-opacity: 0.95; }
	100% { stroke: #ffdf3d; stroke-width: 0; stroke-opacity: 0; }
}
.pb-pulse { animation: pbPulse 0.7s ease-out; }

#cabinet-pm {

	text-align: center;

	font-size: 13px;
	color: #4d5b6a;

	margin-bottom: 6px;

}

.cab-modes {

	text-align: center;

	margin: 0 0 8px 0;

}

.cab-mchip {

	display: inline-block;

	padding: 2px 12px;

	border: 1px solid #9db8d2;

	background-color: rgba(240,248,255,0.8);

	font-size: 12px;

	cursor: pointer;

	white-space: nowrap;

}

.cab-mchip:first-child {

	border-radius: 11px 0 0 11px;

}

.cab-mchip:last-child {

	border-left: none;

	border-radius: 0 11px 11px 0;

}

.cab-mchip-active {

	background-color: #4d7196;
	border-color: #4d7196;

	color: #ffffff;

}

.cab-mchip-active + .cab-mchip {

	border-left: 1px solid #4d7196;

}

.cab-summary {

	text-align: center;

	font-size: 12px;
	color: #5a6b7b;

	margin-bottom: 8px;

}

.cab-regions {

	max-width: 440px;

	margin: 0 auto 8px auto;

}

.cab-regions-title {

	text-align: center;

	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;

	color: #7a8794;

	margin-bottom: 4px;

}

.cab-region-row {

	display: flex;
	align-items: center;

	margin: 2px 0;

}

.cab-region-name {

	flex: 0 0 150px;

	font-size: 11px;
	color: #33414f;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

}

.cab-region-bar {

	flex: 1 1 auto;

	height: 9px;

	background-color: rgba(77,113,150,0.12);
	border-radius: 2px;

	overflow: hidden;

}

.cab-region-fill {

	display: block;

	height: 100%;

	background-color: #4d7196;

}

.cab-region-n {

	flex: 0 0 auto;

	width: 22px;

	text-align: right;

	font-size: 11px;
	color: #4d5b6a;

	font-variant-numeric: tabular-nums;

}

/* member list flows into as many ~230px columns as the width allows */
#cabinet-body {

	column-width: 230px;
	column-gap: 16px;

}

.cab-note {

	text-align: center;

	font-size: 13px;
	font-style: italic;

	color: #5a6b7b;

}

.cab-row {

	display: flex;
	align-items: center;

	padding: 4px 6px;

	border-left: 4px solid #c9d4de;

	cursor: pointer;

	-webkit-column-break-inside: avoid;
	break-inside: avoid;

}

.cab-row:hover {

	background-color: rgba(240,248,255,0.7);

}

.cab-row-attends {

	opacity: 0.85;

}

.cab-swatch {

	flex: 0 0 auto;

	width: 12px;
	height: 12px;

	margin-right: 8px;

	border: 1px solid rgba(0,0,0,0.25);
	border-radius: 2px;

}

.cab-main {

	min-width: 0;

}

.cab-name {

	font-weight: bold;
	font-size: 13px;

}

.cab-party {

	font-weight: normal;

	font-size: 11px;
	color: #6b7885;

}

.cab-attends {

	font-weight: normal;
	font-style: italic;

	font-size: 11px;
	color: #7a4d4d;

}

.cab-posts {

	display: block;

	font-size: 12px;
	color: #33414f;

}

.cab-post {

	display: block;

}

.cab-seat {

	display: block;

	font-size: 11px;
	color: #7a8794;

}