/* ============================================================
   Results-desk dark card language (design handoff: results redesign).
   Stage 1: the constituency results card (designs 1b / 2a / 5a / 6a).
   Tokens from design-ref/results-redesign-README.md.
   ============================================================ */

:root {
	--rd-col-bg: #0d0e12;   /* the right-hand column behind the cards */
	--rd-card: #15171d;
	--rd-raised: #1d2029;
	--rd-hairline: #262a34;
	--rd-border: #363b48;
	--rd-text: #e8e6e1;
	--rd-text2: #c9c6bf;
	--rd-muted: #8b8fa0;
	--rd-faint: #5d6270;
	--rd-gain: #6fd08c;
	--rd-loss: #ff8a8a;
	--rd-gauge: #e8c15a;
	--rd-link: #7fb3e8;
}

/* ---- light theme for the right panel ----
   The results-desk cards read every surface/text/accent colour from the
   --rd-* custom properties, so re-declaring them on the column flips the
   whole panel to a light "results desk" without touching any rule below.
   Party colours (donut / row borders) come from JS (rcColour), which is
   made theme-aware separately (assets/js/panel-theme.js re-renders the
   card so it picks the light-appropriate party colours). Design 7a
   ("light desk - refined"): warm paper surfaces rather than the first
   pass's cool blue-grays, cards lifted by a hairline border + soft
   shadow, and the winner row washed in the party colour instead of a
   neutral raised block. */
#data-col.rd-light {
	--rd-col-bg: #e7e4de;
	--rd-card: #fcfbf9;
	--rd-raised: #f2f0ea;
	--rd-hairline: #ece8e1;
	--rd-border: #d9d4cb;
	--rd-text: #24262c;
	--rd-text2: #464a54;
	--rd-muted: #6e7382;
	--rd-faint: #a0a4af;
	--rd-gain: #1e8c50;
	--rd-loss: #c4403f;
	--rd-gauge: #a87f1e;
	--rd-link: #1d63b8;
}

/* 7a: on light ground the cards need physical separation (dark mode gets
   it free from surface lightness). One border + soft shadow per card. */
#data-col.rd-light #results-card,
#data-col.rd-light #stat-panel,
#data-col.rd-light #cabinet-panel,
#data-col.rd-light #seat-history,
#data-col.rd-light #bchange,
#data-col.rd-light #stv-count .stv-card {
	border: 1px solid #dcd7ce;
	box-shadow: 0 1px 2px rgba(30,26,18,0.06), 0 10px 28px rgba(30,26,18,0.07);
}

/* 7a: winner row takes a wash of the party colour (rows carry --pc);
   the neutral raised token stands in where color-mix is unsupported */
#data-col.rd-light .rc-row.rc-winner {
	background: var(--rd-raised);
	background: color-mix(in srgb, var(--pc, var(--rd-border)) 7%, transparent);
}

/* 7a: the result chip gets the same wash of its own (party) colour */
#data-col.rd-light .rc-chip {
	background: color-mix(in srgb, currentColor 6%, transparent);
}

/* 7a: light-appropriate inks for values hardcoded to dark greys */
#data-col.rd-light .rc-swing-notch { background: #b9b3a8; }
#data-col.rd-light .sh-pill-by { border-color: #b9b3a8; }

/* the whole right column takes the themed column background; the last
   not-yet-redesigned panel (by-elections) still sits on a light "sheet" */
#data-col { background-color: var(--rd-col-bg); }

/* light/dark toggle for the right panel (assets/js/panel-theme.js): a small
   pill in the top-right corner of the LEFT sidebar. Absolutely positioned so
   it overlays the corner without taking flow space (nothing is pushed down).
   Styled with the sidebar's own --tl-* tokens so it stays native in both the
   light (darkslategrey) and dark (results-desk) sidebar schemes; the
   left-aligned header keeps the top-right corner clear. */
#sidebar-col { position: relative; }
#panel-theme-toggle {
	position: absolute; top: 12px; right: 12px; z-index: 20;
	padding: 3px 9px;
	font-family: 'Libre Franklin', 'PT Sans', sans-serif; font-size: 10px; font-weight: 700;
	letter-spacing: 0.04em; cursor: pointer; white-space: nowrap;
	color: var(--tl-muted); background: var(--tl-raised);
	border: 1px solid var(--tl-hairline); border-radius: 999px;
}
#panel-theme-toggle:hover { color: var(--tl-text); border-color: var(--tl-muted); }
#panel-theme-toggle .ptt-ico { margin-right: 4px; }
#byelections-panel {
	background: #f6f4ef; border-radius: 12px; padding: 12px; margin: 10px 8px;
}
#stat-back { margin: 10px 8px 0; }
#stat-back a { color: var(--rd-link); }

/* ---- the card shell ---- */
#results-card {
	background: var(--rd-card);
	color: var(--rd-text);
	border-radius: 12px;
	padding: 32px 36px 28px;
	margin: 14px 10px;
	font-family: 'Libre Franklin', 'PT Sans', sans-serif;
}
#results-card * { box-sizing: border-box; }
#results-card .num { font-variant-numeric: tabular-nums; }

/* header */
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.rc-eyebrow {
	font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--rd-muted); margin-bottom: 6px;
}
.rc-title { font-size: 32px; font-weight: 800; margin: 0; line-height: 1.1; color: var(--rd-text); }
.rc-title a.rc-src { font-size: 13px; text-decoration: none; color: var(--rd-link); vertical-align: super; margin-left: 6px; }
.rc-head-right { text-align: right; flex-shrink: 0; }
.rc-chip {
	display: inline-block; border: 1.5px solid; border-radius: 4px;
	padding: 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
	text-transform: uppercase; white-space: nowrap;
}
.rc-chip .rc-chip-plus { color: var(--rd-faint); font-weight: 600; padding: 0 2px; }
.rc-chipsub { font-size: 12px; color: var(--rd-muted); margin-top: 7px; }

/* body */
.rc-body { display: grid; grid-template-columns: 180px 1fr; gap: 32px; margin-top: 26px; }
.rc-many .rc-body, .rc-stv .rc-body, .rc-bloc .rc-body { grid-template-columns: 170px 1fr; }
.rc-left { min-width: 0; }

/* donut */
.rc-donut { width: 100%; max-width: 180px; aspect-ratio: 1; border-radius: 50%; position: relative; }
.rc-donut-hole {
	position: absolute; inset: 26px; border-radius: 50%; background: var(--rd-card);
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.rc-donut-pct { font-size: 28px; font-weight: 800; }
.rc-donut-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rd-muted); margin-top: 2px; padding: 0 12px;
	/* the hole can't grow: clamp any long label to two lines rather than
	   letting it fill the donut (seen on bloc-vote multi-member seats) */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* stacked stats under the donut (2a / 5a / 6a left column) */
.rc-stat { margin-top: 20px; }
.rc-left .rc-fcell { margin-top: 20px; }
.rc-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-muted); }
.rc-stat-value { font-size: 20px; font-weight: 800; margin-top: 2px; }
.rc-stat-sub { font-size: 11px; color: var(--rd-muted); margin-top: 2px; }

/* turnout ring */
.rc-ring-wrap { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.rc-ring { width: 44px; height: 44px; border-radius: 50%; position: relative; flex-shrink: 0; }
.rc-ring-hole {
	position: absolute; inset: 7px; border-radius: 50%; background: var(--rd-card);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 800; color: var(--rd-gauge);
}
.rc-ring-text .rc-stat-label { display: block; }
.rc-ring-text .rc-ring-votes { font-size: 15px; font-weight: 800; }
.rc-ring-text .rc-ring-sub { font-size: 11px; color: var(--rd-muted); }

/* candidate rows */
.rc-cols {
	display: grid; grid-template-columns: 1fr 80px 56px 84px; gap: 10px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--rd-muted); padding: 0 14px 8px;
}
.rc-cols > :nth-child(n+2) { text-align: right; }
.rc-row {
	display: grid; grid-template-columns: 1fr 80px 56px 84px; gap: 10px; align-items: center;
	padding: 9px 14px; border-left: 3px solid var(--pc, var(--rd-border));
	margin-bottom: 6px;
}
.rc-row.rc-winner { background: var(--rd-raised); border-radius: 0 6px 6px 0; }
.rc-row .rc-name { font-size: 14px; color: var(--rd-text); }
.rc-row.rc-winner .rc-name { font-weight: 700; }
.rc-row .rc-name a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--rd-faint); }
.rc-row .rc-name .rc-depnote { font-size: 11px; color: var(--rd-muted); font-weight: 400; }
/* the lost-deposit dagger: a bare marker glossed by the note under the table,
   its meaning available on hover */
.rc-row .rc-name .rc-dep-dagger { cursor: help; }
.rc-dep-legend { margin-top: 10px; }
/* abstention note (winner "did not take seat"): dotted underline signals the
   tooltip that carries the party-vs-individual explanation */
.rc-row .rc-name .rc-abst { border-bottom: 1px dotted var(--rd-faint); cursor: help; }
.rc-row .rc-party { font-size: 11px; font-weight: 600; margin-top: 1px; }
.rc-row .rc-votes { font-size: 14px; text-align: right; }
.rc-row.rc-winner .rc-votes, .rc-row.rc-winner .rc-pct { font-weight: 700; }
.rc-row .rc-pct { font-size: 14px; text-align: right; }
.rc-row .rc-chg { font-size: 12px; text-align: right; white-space: nowrap; }
.rc-chg .up, .rc-cchg .up { color: var(--rd-gain); }
.rc-chg .down, .rc-cchg .down { color: var(--rd-loss); }
.rc-chg .rc-new, .rc-cchg .rc-new { font-style: italic; color: var(--rd-muted); }
.rc-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.rc-tag.rc-tag-el { color: var(--rd-gain); }
.rc-tag.rc-tag-ex { color: var(--rd-loss); }

/* deposits-lost divider + compact rows (2a) */
.rc-divider {
	display: flex; align-items: center; gap: 10px; margin: 12px 0 8px;
	font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-faint);
}
.rc-divider::before, .rc-divider::after { content: ""; flex: 1; height: 1px; background: var(--rd-hairline); }
.rc-crow {
	display: grid; grid-template-columns: 10px 1fr 76px 52px 70px; gap: 8px; align-items: center;
	padding: 5px 12px; font-size: 12px;
}
.rc-crow .rc-csw { width: 8px; height: 8px; border-radius: 2px; }
.rc-crow .rc-cname { color: var(--rd-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-crow .rc-cname .rc-cparty { color: var(--rd-muted); }
.rc-crow > :nth-child(n+3) { text-align: right; }
.rc-crow .rc-cchg { font-size: 11px; }

/* italic caveat under rows (STV / bloc) */
.rc-caveat { font-style: italic; font-size: 12px; color: var(--rd-muted); margin: 12px 4px 0; line-height: 1.5; }

/* footer strip */
.rc-foot {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px;
	border-top: 1px solid var(--rd-hairline); margin-top: 22px; padding-top: 18px;
}
.rc-foot .rc-fcell { min-width: 0; }
.rc-fcell .rc-stat-label { margin-bottom: 3px; }
.rc-fcell .rc-fbig { font-size: 18px; font-weight: 800; }
.rc-fcell .rc-fsub { font-size: 12px; color: var(--rd-muted); margin-top: 1px; }
.rc-fcell .rc-fsub .up { color: var(--rd-gain); }
.rc-fcell .rc-fsub .down { color: var(--rd-loss); }
.rc-foot .rc-ring-wrap { margin-top: 0; }
.rc-foot-note { font-size: 12px; color: var(--rd-muted); align-self: center; }
.rc-seathist { margin-left: auto; align-self: flex-end; }
.rc-seathist a { color: var(--rd-link); font-size: 12px; font-weight: 700; text-decoration: none; }

/* swingometer */
.rc-foot .rc-fcell.rc-swing { min-width: 170px; }
.rc-swing-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.rc-swing-val { font-size: 13px; font-weight: 800; color: var(--rd-text); }
.rc-swing-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.rc-swing-abbr { font-size: 10px; font-weight: 800; }
.rc-swing-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--rd-hairline); }
.rc-swing-notch {
	position: absolute; width: 2px; height: 12px; background: #3a3f4c;
	left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.rc-swing-fill { position: absolute; left: 50%; top: 0; height: 6px; }
.rc-swing-arrow {
	position: absolute; top: 0; width: 5px; height: 100%;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* STV count section (restyle of #stv-count) */
#stv-count { margin: 0 10px; }
#stv-count .stv-card {
	background: var(--rd-card); color: var(--rd-text); border-radius: 12px;
	padding: 24px 36px; margin-top: 2px; font-family: 'Libre Franklin', 'PT Sans', sans-serif;
}
.stvd-head { display: flex; justify-content: space-between; align-items: baseline; }
.stvd-title { font-size: 18px; font-weight: 800; }
.stvd-meta { font-size: 12px; color: var(--rd-muted); }
.stvd-grid { width: 100%; border-collapse: collapse; margin-top: 12px; }
.stvd-grid th {
	font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--rd-muted); text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--rd-hairline);
}
.stvd-grid th.stvd-cand { text-align: left; }
.stvd-grid td {
	font-size: 12px; color: var(--rd-text2); text-align: right; padding: 8px 10px;
	border-bottom: 1px solid var(--rd-raised); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stvd-grid td.stvd-cand { text-align: left; }
.stvd-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: baseline; }
.stvd-abbr { font-size: 10px; color: var(--rd-muted); margin-left: 5px; }
.stvd-dash { color: var(--rd-faint); }
.stvd-quota {
	font-weight: 800; color: var(--rd-gain); background: rgba(111,208,140,0.12);
	border-radius: 5px; padding: 2px 8px;
}
.stvd-exval { color: var(--rd-muted); }
.stvd-extag { font-size: 9px; font-weight: 800; color: var(--rd-loss); margin-left: 5px; }
.stvd-nt td { font-style: italic; color: var(--rd-muted); }
.stvd-foot { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; color: var(--rd-muted); margin-top: 14px; }
.stvd-foot .stvd-hl { color: var(--rd-gain); font-weight: 700; }
.stvd-foot a { color: var(--rd-link); font-weight: 700; text-decoration: none; }

/* footnote blocks below the card (boundary change / recent events) */
#bchange, #recentevents {
	margin: 10px 10px; font-size: 12px; color: var(--rd-text2);
	font-family: 'Libre Franklin', 'PT Sans', sans-serif;
}
#bchange { background: var(--rd-card); border-radius: 12px; padding: 16px 20px; }
#bchange ul { margin: 6px 0 6px 18px; padding: 0; }
#recentevents { color: var(--rd-muted); font-style: italic; padding: 0 12px; }
.rc-star { color: var(--rd-loss); }

/* seat-history link block (kept, dark) */
#seat-history-toggle { margin: 4px 10px 14px; text-align: right; }
#seat-history-toggle a { color: var(--rd-link); font-size: 12px; font-weight: 700; text-decoration: none; }

/* narrow column fallback (breakpoints are viewport-based; the panel column is
   roughly a third of the viewport, so these fire when the CARD gets tight) */
@media (max-width: 1500px) {
	#results-card { padding: 24px 22px 22px; }
	.rc-body { grid-template-columns: 150px 1fr; gap: 20px; }
}
@media (max-width: 900px) {
	.rc-body { grid-template-columns: 1fr; }
	.rc-donut { margin: 0 auto; }
}

/* ============================================================
   Marginality / Turnout viewers — dark "results desk" card
   (results redesign, designs 4a / 4b). Overrides the light stat-
   panel styling in elections.css; loaded after it so these win.
   ---
   Cabinet viewer — dark "results desk" card (design 4c).
   Overrides the light cabinet styling in elections.css.
   ============================================================ */
#stat-panel, #cabinet-panel {
	background: var(--rd-card);
	color: var(--rd-text);
	border-radius: 12px;
	padding: 24px 26px 22px;
	margin: 14px 10px;
	font-family: 'Libre Franklin', 'PT Sans', sans-serif;
}
#cabinet-panel * { box-sizing: border-box; }

#cabinet-head { padding-bottom: 14px; }
#cabinet-title { font-size: 24px; font-weight: 800; text-align: left; color: var(--rd-text); margin: 0 0 4px 0; line-height: 1.1; }
#cabinet-meta { text-align: left; font-size: 12px; color: var(--rd-muted); margin: 0 0 12px 0; font-variant-numeric: tabular-nums; }

/* inner-cabinet groups (War Cabinet / Other Cabinet ministers) — only drawn
   when a government runs a named inner cabinet with a member in it. Each group
   is its own stacked block: a full-width heading over its OWN column-flowing
   member list (.cab-members), so the sets separate vertically and an inner
   member never balances up into the outer column. */
#cabinet-panel .cab-group-h {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
	color: var(--rd-muted); margin: 0 0 8px; padding-bottom: 5px;
	border-bottom: 1px solid var(--rd-hairline);
}
#cabinet-panel .cab-group { margin-top: 2px; }
#cabinet-panel .cab-group + .cab-group { margin-top: 22px; }   /* clear gap between the two sets */

/* Cabinet / All ministers segmented pill */
#cabinet-panel .cab-modes { text-align: left; margin: 0; display: inline-flex; }
#stat-panel { font-size: 13px; }
#stat-panel * { box-sizing: border-box; }
#stat-panel .num, #stat-panel .stat-fig, #stat-panel .stat-tile-big { font-variant-numeric: tabular-nums; }

#stat-panel-title {
	font-size: 24px; font-weight: 800; text-align: left;
	color: var(--rd-text); margin: 0 0 14px 0; line-height: 1.1;
}

/* "By % / By votes" segmented pill */
#stat-panel .stat-measure { text-align: left; margin: 0 0 12px 0; display: inline-flex; }
#stat-panel .stat-mchip, #cabinet-panel .cab-mchip {
	display: inline-block; padding: 5px 14px; font-size: 12px; font-weight: 600;
	cursor: pointer; white-space: nowrap; color: var(--rd-muted);
	background: transparent; border: 1px solid var(--rd-border);
}
#cabinet-panel .cab-mchip:first-child { border-radius: 999px 0 0 999px; }
#cabinet-panel .cab-mchip:last-child { border-radius: 0 999px 999px 0; border-left: none; }
#cabinet-panel .cab-mchip:hover { color: var(--rd-text2); }
#cabinet-panel .cab-mchip-active { background: var(--rd-text); border-color: var(--rd-text); color: var(--rd-card); }
#cabinet-panel .cab-mchip-active + .cab-mchip { border-left: 1px solid var(--rd-text); }

/* body: the region split sits ABOVE the minister list, always stacked, so
   the list gets the full panel width and can flow into 2-3 columns. (A
   side-by-side layout only had room for a single minister column until the
   window was ~2400px wide, because the panel is under half the viewport.)
   The region bars are capped so they don't stretch the full width. */
#cabinet-grid { display: block; }
.cab-left { min-width: 0; max-width: 420px; margin-bottom: 20px; }

/* Commons seats by region bar list */
#cabinet-panel .cab-regions { max-width: none; margin: 0 0 12px 0; }
#cabinet-panel .cab-regions-title {
	text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--rd-muted); margin: 0 0 8px 0;
}
#cabinet-panel .cab-region-row { display: grid; grid-template-columns: 130px 1fr 18px; align-items: center; gap: 8px; margin: 4px 0; }
#cabinet-panel .cab-region-name { flex: none; font-size: 11px; text-align: right; color: var(--rd-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cabinet-panel .cab-region-bar { flex: none; height: 9px; background: var(--rd-hairline); border-radius: 3px; overflow: hidden; }
#cabinet-panel .cab-region-fill { display: block; height: 100%; background: #7d95c9; }
#cabinet-panel .cab-region-n { flex: none; width: 18px; text-align: right; font-size: 11px; font-weight: 700; color: var(--rd-text2); font-variant-numeric: tabular-nums; }
#cabinet-panel .cab-summary { text-align: left; font-size: 11px; color: var(--rd-muted); margin: 10px 0 0 0; }

/* minister list: full panel width now, flowing into as many ~210px columns
   as fit (design 4c shows two at its 920px ref; a normal panel lands on 2-3) */
/* the member list flows into 2-3 columns via .cab-members (per-group when the
   panel is split, or the whole body otherwise). The body itself is a plain
   vertical stack so the groups separate — overriding the old multicol on
   #cabinet-body in elections.css (this rule loads after it). */
#cabinet-body { column-width: auto; column-count: initial; column-gap: normal; }
#cabinet-body .cab-members { column-width: 210px; column-gap: 26px; }
#cabinet-panel .cab-note { text-align: left; font-size: 13px; font-style: italic; color: var(--rd-muted); }
#cabinet-panel .cab-row {
	display: flex; align-items: baseline; gap: 8px;
	padding: 7px 0; border-left: none; border-bottom: 1px solid var(--rd-raised);
	cursor: pointer; break-inside: avoid; -webkit-column-break-inside: avoid;
}
#cabinet-panel .cab-row:hover { background: var(--rd-raised); }
#cabinet-panel .cab-row-attends { opacity: 0.9; }
#cabinet-panel .cab-swatch { flex: 0 0 auto; width: 10px; height: 10px; margin: 0; border: none; border-radius: 2px; position: relative; top: 1px; }
#cabinet-panel .cab-main { min-width: 0; }
#cabinet-panel .cab-name { font-weight: 700; font-size: 13px; color: var(--rd-text); }
#cabinet-panel .cab-party { font-weight: 700; font-size: 9px; letter-spacing: 0.04em; }
#cabinet-panel .cab-attends { font-weight: 400; font-style: italic; font-size: 10px; color: var(--rd-gauge); }
#cabinet-panel .cab-posts { display: block; font-size: 11px; color: var(--rd-text2); margin-top: 1px; }
#cabinet-panel .cab-post { display: block; }
#cabinet-panel .cab-seat { display: block; font-size: 10px; color: var(--rd-muted); margin-top: 1px; }

#stat-panel .stat-mchip:first-child { border-radius: 999px 0 0 999px; }
#stat-panel .stat-mchip:last-child { border-radius: 0 999px 999px 0; border-left: none; }
#stat-panel .stat-mchip:hover { color: var(--rd-text2); }
#stat-panel .stat-mchip-active { background: var(--rd-text); border-color: var(--rd-text); color: var(--rd-card); }
#stat-panel .stat-mchip-active + .stat-mchip { border-left: 1px solid var(--rd-text); }

/* controls: region select + filter input, dark raised fields */
#stat-panel .stat-region { text-align: left; margin: 0 0 8px 0; }
#stat-panel .stat-region label { font-size: 11px; color: var(--rd-muted); display: block; }
#stat-panel .stat-region select {
	width: 100%; margin-top: 4px; padding: 7px 10px; font-size: 12px;
	color: var(--rd-text); background: var(--rd-raised);
	border: 1px solid var(--rd-hairline); border-radius: 8px;
	font-family: inherit;
}
#stat-panel #stat-panel-filter-box { text-align: left; margin: 0 0 12px 0; }
#stat-panel #stat-panel-filter {
	width: 100%; padding: 7px 10px; font-size: 12px;
	color: var(--rd-text); background: var(--rd-raised);
	border: 1px solid var(--rd-hairline); border-radius: 8px;
	font-family: inherit;
}
#stat-panel #stat-panel-filter::placeholder { color: var(--rd-faint); }
#stat-panel #stat-panel-filter:focus { background: var(--rd-raised); border-color: var(--rd-border); outline: none; }

/* party filter chips (4a only) */
#stat-panel .stat-chips { text-align: left; margin: 0 0 14px 0; display: flex; flex-wrap: wrap; gap: 6px; }
#stat-panel .stat-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 11px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
	cursor: pointer; white-space: nowrap; border-radius: 999px;
	color: var(--rd-text2); background: transparent; border: 1px solid var(--rd-border);
}
#stat-panel .stat-chip:hover { color: var(--rd-text); }
#stat-panel .stat-chip-active { background: var(--rd-text); border-color: var(--rd-text); color: var(--rd-card); }
#stat-panel .stat-chip-swatch { width: 8px; height: 8px; border-radius: 2px; border: none; }

/* three headline stat cards */
#stat-panel .stat-tiles { display: flex; gap: 8px; margin: 0 0 16px 0; }
#stat-panel .stat-tile {
	flex: 1 1 0; min-width: 0; text-align: left;
	background: var(--rd-raised); border-radius: 8px;
	border-top: 3px solid var(--rd-border); padding: 9px 11px;
}
#stat-panel .stat-tile-label {
	display: block; font-size: 9px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.08em; color: var(--rd-muted);
}
#stat-panel .stat-tile-big { display: block; font-size: 19px; font-weight: 800; color: var(--rd-text); line-height: 1.25; margin-top: 2px; }
#stat-panel .stat-tile-sub { display: block; font-size: 10px; color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ranked-list section labels + band headers */
#stat-panel .stat-section-title, #stat-panel .stat-band-header {
	position: sticky; top: 0; z-index: 2;
	background: var(--rd-card);
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--rd-muted); border-bottom: 1px solid var(--rd-hairline);
	margin: 16px 0 6px 0; padding: 4px 0;
}
#stat-panel .stat-band-header { cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--rd-text2); }
#stat-panel .stat-band-header:hover { color: var(--rd-text); }
#stat-panel .stat-band-arrow { color: var(--rd-faint); font-size: 10px; }
#stat-panel .stat-band-count { color: var(--rd-faint); font-size: 11px; font-weight: 400; }

/* ranked rows: rank pill · icon · name+bar · value */
#stat-panel .stat-row {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 8px; margin-bottom: 2px;
	border-left: 3px solid var(--rd-border);
	cursor: pointer;
}
#stat-panel .stat-row:hover { background: var(--rd-raised); }
#stat-panel .stat-rank {
	flex: 0 0 auto; width: 24px; height: 20px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 800; color: var(--rd-muted); background: transparent;
	font-variant-numeric: tabular-nums;
}
#stat-panel .stat-rank-medal { color: var(--rd-card); }
#stat-panel .stat-icon { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
#stat-panel .stat-icon svg { width: 24px; height: 24px; }
#stat-panel .stat-row-main { flex: 1 1 auto; min-width: 0; }
#stat-panel .stat-name { display: block; font-size: 13px; font-weight: 600; color: var(--rd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stat-panel .stat-badge { font-size: 10px; font-weight: 400; font-style: italic; color: var(--rd-muted); }
#stat-panel .stat-bar { display: block; height: 4px; margin-top: 4px; background: var(--rd-hairline); border-radius: 2px; overflow: hidden; }
#stat-panel .stat-bar-fill { display: block; height: 100%; border-radius: 2px; }
#stat-panel.stat-sweep .stat-bar-fill { width: 0 !important; transition: none; }
#stat-panel .stat-bar-fill { transition: width 0.5s ease-out; }
#stat-panel .stat-fig { flex: 0 0 auto; width: 56px; text-align: right; font-size: 13px; font-weight: 700; color: var(--rd-text); font-variant-numeric: tabular-nums; }
#stat-panel .stat-note { text-align: left; font-size: 11px; font-style: italic; color: var(--rd-muted); margin: 8px 0 0; }

/* ============================================================
   Seat history panel — dark "results desk" card (design 3a).
   Vote-share line chart (inline SVG), winner band + year pills,
   and a restyled boundary-lineage Sankey.
   ============================================================ */
#seat-history {
	background: var(--rd-card);
	color: var(--rd-text);
	border-radius: 12px;
	padding: 22px 26px 20px;
	margin: 14px 10px;
	font-family: 'Libre Franklin', 'PT Sans', sans-serif;
}
#seat-history * { box-sizing: border-box; }

/* header: eyebrow + title + hide link */
#seat-history-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
#seat-history-head .sh-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-muted); margin-bottom: 4px; }
#seat-history-head .sh-title { font-size: 26px; font-weight: 800; color: var(--rd-text); line-height: 1.1; }
#seat-history-head .sh-title .sh-range { color: var(--rd-muted); font-weight: 600; font-size: 18px; }
#seat-history-head .sh-hide { color: var(--rd-link); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; }

/* breadcrumbs */
#seat-history-crumbs { font-size: 12px; color: var(--rd-muted); margin-bottom: 12px; }
#seat-history-crumbs a { color: var(--rd-link); text-decoration: none; }

/* section titles shared across the panel */
#seat-history .sh-sec-title { display: block; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rd-muted); }
#seat-history .sh-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }

/* vote-share line chart */
#seat-history-chart { margin: 0 0 20px 0; }
#seat-history .sh-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
#seat-history .sh-legchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--rd-text2); }
#seat-history .sh-legbar { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
#seat-history .sh-linechart { display: block; width: 100%; height: auto; }
#seat-history .sh-grid { stroke: var(--rd-hairline); stroke-width: 1; }
#seat-history .sh-axis { fill: var(--rd-muted); font-size: 10px; font-family: 'Libre Franklin', 'PT Sans', sans-serif; }
#seat-history .sh-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* winner-by-election band + year pills */
#seat-history-winners { margin: 0 0 20px 0; }
#seat-history .sh-band { display: flex; gap: 2px; height: 22px; margin: 6px 0 10px; }
#seat-history .sh-band-seg { display: flex; align-items: center; justify-content: center; border-radius: 4px; overflow: hidden; min-width: 0; }
#seat-history .sh-band-seg:first-child { border-radius: 4px 0 0 4px; }
#seat-history .sh-band-seg:last-child { border-radius: 0 4px 4px 0; }
#seat-history .sh-band-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: #15171d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
#seat-history .sh-pills { display: flex; flex-wrap: wrap; gap: 5px; }
#seat-history .sh-pill {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11px; color: var(--rd-text2); font-variant-numeric: tabular-nums;
	background: var(--rd-raised); border: 1px solid var(--rd-hairline); border-radius: 999px; padding: 2px 9px;
}
#seat-history .sh-pill-by { border-style: dashed; border-color: #4a4f5c; }
#seat-history .sh-pill-sw { width: 8px; height: 8px; border-radius: 2px; }

/* boundary lineage (Sankey) — restyle only */
#seat-lineage-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rd-muted); text-align: left; margin: 6px 0; }
#seat-lineage-controls { text-align: left; font-size: 11px; color: var(--rd-muted); margin-bottom: 8px; }
#seat-history .lineage-detail-option {
	display: inline-block; cursor: pointer; font-size: 11px; padding: 3px 10px; margin-left: 4px;
	color: var(--rd-muted); border: 1px solid var(--rd-border); border-radius: 999px;
}
#seat-history .lineage-detail-active { background: var(--rd-text); border-color: var(--rd-text); color: var(--rd-card); font-weight: 700; }
#seat-lineage-chart { overflow-x: auto; }
#seat-lineage-chart .central { color: var(--rd-muted); }
#seat-history-branches { font-size: 12px; color: var(--rd-text2); margin: 8px 0; }
#seat-history-branches .seat-branch-chip {
	display: inline-block; cursor: pointer; margin: 3px 4px 0 0; padding: 2px 8px;
	background: var(--rd-raised); border: 1px solid var(--rd-hairline); border-radius: 999px; color: var(--rd-text2);
}
#seat-history-branches .seat-history-chip { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: baseline; }
#seat-history-note { font-size: 11px; font-style: italic; color: var(--rd-muted); margin-top: 6px; }

/* the show/hide link when the panel is closed sits on the dark column */
#seat-history-toggle a { color: var(--rd-link); }

/* ============================================================
   Uniform swing projector — map view mode "swing" (assets/js/swing.js).
   Dark results-desk card; token-driven so it flips with the panel theme.
   ============================================================ */
#swing-panel {
	background: var(--rd-card); color: var(--rd-text);
	border-radius: 12px; padding: 22px 24px 20px; margin: 14px 10px;
	font-family: 'Libre Franklin', 'PT Sans', sans-serif;
}
#swing-panel * { box-sizing: border-box; }
#swing-panel .num { font-variant-numeric: tabular-nums; }
#swing-panel .up { color: var(--rd-gain); } #swing-panel .down { color: var(--rd-loss); }
#swing-panel .sw-flat { color: var(--rd-faint); }

.sw-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-muted); }
#sw-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* mode pill */
.sw-modes { display: inline-flex; border: 1px solid var(--rd-border); border-radius: 999px; overflow: hidden; }
.sw-mchip { padding: 5px 13px; font-size: 11px; font-weight: 600; color: var(--rd-muted); cursor: pointer; white-space: nowrap; }
.sw-mchip + .sw-mchip { border-left: 1px solid var(--rd-border); }
.sw-mchip:hover { color: var(--rd-text2); }
.sw-mchip-on { background: var(--rd-text); color: var(--rd-card); }

/* swatch */
.sw-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }

/* two-party controls */
.sw-fromto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-sel { display: inline-flex; align-items: center; gap: 7px; background: var(--rd-raised); border: 1px solid var(--rd-hairline); border-radius: 8px; padding: 6px 10px; }
.sw-sel select { background: transparent; border: none; color: var(--rd-text); font-size: 13px; font-family: inherit; outline: none; cursor: pointer; }
.sw-sel select option { background: var(--rd-raised); color: var(--rd-text); }
.sw-arrow { color: var(--rd-muted); font-size: 13px; }
.sw-swap { margin-left: auto; background: var(--rd-raised); border: 1px solid var(--rd-hairline); border-radius: 8px; color: var(--rd-text2); cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 10px; }
.sw-swap:hover { color: var(--rd-text); border-color: var(--rd-border); }
.sw-bignum { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
#sw-pctbig { font-size: 34px; font-weight: 800; }
.sw-bignum .sw-cap { color: var(--rd-muted); font-size: 12px; }
.sw-bignum > span:not(.sw-cap):not(#sw-pctbig) { font-size: 18px; color: var(--rd-muted); }

/* range slider — the global input[type=range] rule (elections.css) rotates
   ranges 90deg for the old vertical timeline and paints a dark-blue track, so
   fully neutralise it here: un-rotate (both transform + -moz-transform),
   reset the appearance, and restyle the track + thumb pseudo-elements. */
/* NB: scoped under #swing-panel so these beat the global input[type=range]
   rule — an [attribute] selector outranks a bare class, so `.sw-slider` alone
   would lose the transform/track fight and the slider would stay vertical. */
#swing-panel .sw-slider {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 8px; margin: 14px 0 10px;
	transform: none; -moz-transform: none;
	background: transparent; cursor: pointer;
}
#swing-panel .sw-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--rd-hairline); }
#swing-panel .sw-slider::-moz-range-track { height: 8px; border-radius: 4px; background: var(--rd-hairline); }
#swing-panel .sw-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--rd-text); border: 2px solid var(--rd-card); cursor: pointer; }
#swing-panel .sw-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--rd-text); border: 2px solid var(--rd-card); cursor: pointer; }

.sw-stepwrap { display: flex; align-items: center; gap: 10px; }
.sw-stepper { display: inline-flex; align-items: center; border: 1px solid var(--rd-border); border-radius: 8px; overflow: hidden; }
.sw-stepper button { background: var(--rd-raised); color: var(--rd-text); border: none; width: 26px; height: 26px; font-size: 15px; line-height: 1; cursor: pointer; }
.sw-stepper button:hover { background: var(--rd-hairline); }
.sw-stepper .sw-val { min-width: 52px; text-align: center; font-size: 13px; font-weight: 700; padding: 0 6px; }
.sw-stepper-sm button { width: 22px; height: 22px; font-size: 13px; }
.sw-stepper-sm .sw-val { min-width: 42px; font-size: 12px; }
.sw-hint { font-size: 11px; color: var(--rd-faint); }

/* inverse-swing readout ("LAB needs 4.2pt for a majority") */
.sw-inverse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
              margin-top: 12px; padding: 9px 11px; background: var(--rd-raised);
              border: 1px solid var(--rd-hairline); border-radius: 8px; font-size: 12px; }
.sw-inv-lbl { color: var(--rd-text2); font-weight: 700; }
.sw-inv-item { color: var(--rd-muted); white-space: nowrap; }
.sw-inv-what { color: var(--rd-muted); }
.sw-inv-val { color: var(--rd-text); font-weight: 700; text-decoration: none;
              border-bottom: 1px dashed var(--rd-border); cursor: pointer; }
.sw-inv-val:hover { color: var(--rd-gauge); border-bottom-color: var(--rd-gauge); }
.sw-inv-already { color: var(--rd-gain); font-weight: 700; }
.sw-inv-none { color: var(--rd-faint); }

/* multi-party rows */
#sw-mp { margin-top: 4px; }
.sw-mprow { display: grid; grid-template-columns: 14px 42px 1fr auto; gap: 10px; align-items: center; margin: 8px 0; }
.sw-mpab { font-size: 12px; font-weight: 700; }
.sw-mpbar { position: relative; height: 6px; background: var(--rd-raised); border-radius: 3px; }
.sw-mpbar .sw-mpfl { position: absolute; top: 0; height: 6px; border-radius: 3px; }
.sw-addrow { margin: 10px 0 4px; }
.sw-addrow select { background: var(--rd-raised); border: 1px solid var(--rd-hairline); border-radius: 8px; color: var(--rd-link); font-size: 12px; padding: 5px 9px; font-family: inherit; cursor: pointer; }
.sw-addrow select option { background: var(--rd-raised); color: var(--rd-text); }
.sw-net { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rd-hairline); font-size: 12px; }
.sw-net-lbl { color: var(--rd-muted); }
.sw-net-ok { color: var(--rd-gain); font-weight: 700; }
.sw-net-bad { color: var(--rd-loss); font-weight: 700; }

/* projected result */
#sw-output { margin-top: 6px; }
.sw-projhead { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 2px; }
.sw-flips-n { font-size: 12px; color: var(--rd-text2); }
.sw-flips-n b { color: var(--rd-text); }
.sw-majline { font-size: 12px; color: var(--rd-muted); margin-bottom: 10px; }
.sw-tbar { display: grid; grid-template-columns: 40px 1fr 82px; gap: 10px; align-items: center; margin: 7px 0; }
.sw-tab { font-size: 12px; font-weight: 700; }
.sw-track { height: 16px; background: var(--rd-raised); border-radius: 3px; position: relative; overflow: hidden; }
.sw-track .sw-was { position: absolute; top: 0; height: 100%; background: var(--rd-hairline); }
.sw-track .sw-now { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.sw-tn { font-size: 12px; text-align: right; }
.sw-tn b { color: var(--rd-text); }

.sw-flips { margin-top: 14px; border-top: 1px solid var(--rd-hairline); padding-top: 12px; }
.sw-flip { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--rd-raised); cursor: pointer; }
.sw-flip:hover { background: var(--rd-raised); }
.sw-seatnm { color: var(--rd-text2); }
.sw-chg { font-weight: 700; white-space: nowrap; }
.sw-flip-arrow { color: var(--rd-faint); margin: 0 5px; }
.sw-flip-more { color: var(--rd-faint); font-style: italic; border-bottom: none; cursor: default; }
.sw-flip-more:hover { background: none; }
.sw-noflip { font-size: 12px; color: var(--rd-muted); font-style: italic; }

/* ============================================================
   Proportionality view (assets/js/proportionality.js):
   votes-vs-seats chart card + wasted-votes extras
   ============================================================ */

#stat-panel .stat-tiles-2 { display: grid; grid-template-columns: 1fr 1fr; }
#stat-panel .stat-tile-click { cursor: pointer; }
#stat-panel .stat-tile-click:hover { border-color: var(--rd-border); }

.pv-card {
	background: var(--rd-card); border: 1px solid var(--rd-hairline); border-radius: 10px;
	padding: 12px; margin: 0 0 16px 0;
}
.pv-head { display: flex; justify-content: space-between; gap: 10px;
	font-size: 10px; color: var(--rd-muted); margin-bottom: 8px; }
.pv-row { display: grid; grid-template-columns: 14px 52px 1fr 92px; gap: 8px;
	align-items: center; margin: 9px 0; }
.pv-sw { width: 11px; height: 11px; border-radius: 3px; }
.pv-ab { font-size: 12px; font-weight: 700; color: var(--rd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-b { display: block; height: 8px; border-radius: 4px; position: relative; min-width: 2px; }
.pv-b-votes { opacity: 0.45; }
.pv-b i { position: absolute; left: 100%; margin-left: 5px; top: -3px;
	font-size: 9px; font-style: normal; color: var(--rd-muted); white-space: nowrap; }
.pv-delta { font-size: 12px; font-weight: 700; text-align: right; line-height: 1.2; }
.pv-delta small { display: block; font-weight: 400; font-size: 9px; color: var(--rd-faint); }
.pv-up { color: var(--rd-gain); }
.pv-dn { color: var(--rd-loss); }
.pv-key { display: flex; gap: 16px; font-size: 9.5px; color: var(--rd-muted); margin-top: 10px; }
.pv-k { display: inline-block; width: 14px; height: 7px; border-radius: 3px;
	background: var(--rd-muted); margin-right: 4px; vertical-align: middle; }
.pv-k-votes { opacity: 0.45; }

/* ---- PR counterfactual (assets/js/pr-counterfactual.js, 2.9) ----
   Lives inside the proportionality panel; hemicycles + real->PR table. */

.prcf-show { margin-bottom: 10px; }
/* the mode chips row below the votes-vs-seats chart: view toggle on the left,
   the wasted ranking's By %/By votes chips (when shown) on the right */
.prop-mode-row { display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 6px 10px; margin: 0 0 12px 0; }
.prop-mode-row .stat-measure, .prop-mode-row .prcf-show { margin: 0; }
/* quiet aside, not an amber box: a faint left rule + muted text so the caveat
   reads as fine print and the figures keep the eye */
.prcf-caveat { border-left: 2px solid var(--rd-border); padding: 1px 0 1px 10px;
	font-size: 11px; line-height: 1.5; color: var(--rd-muted); margin: 0 0 12px 0; background: transparent; }
.prcf-thr { font-size: 11px; color: var(--rd-muted); margin: 2px 0 10px 0;
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prcf-excl { font-size: 10px; color: var(--rd-faint); }
.prcf-hemis { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 14px 0; }
.prcf-hemibox { background: var(--rd-card); border: 1px solid var(--rd-hairline);
	border-radius: 10px; padding: 10px 10px 4px; }
.prcf-hemicap { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--rd-muted); margin-bottom: 4px; text-align: center; }
.prcf-hemi { display: block; width: 100%; height: auto; max-height: 220px; }
.prcf-majlbl { font-size: 9.5px; fill: var(--rd-muted); }
.prcf-list { border: 1px solid var(--rd-hairline); border-radius: 10px; overflow: hidden;
	background: var(--rd-card); margin: 0 0 12px 0; }
.prcf-row { display: grid; grid-template-columns: 14px 1fr 52px 84px 40px; gap: 8px;
	align-items: center; padding: 7px 12px; border-top: 1px solid var(--rd-hairline); font-size: 12.5px; }
.prcf-row:first-child { border-top: none; }
.prcf-sw { width: 11px; height: 11px; border-radius: 3px; }
.prcf-ab { font-weight: 700; color: var(--rd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prcf-share { color: var(--rd-muted); font-size: 11.5px; text-align: right; }
.prcf-move { color: var(--rd-text2); text-align: right; white-space: nowrap; }
.prcf-move b { color: var(--rd-text); }
.prcf-delta { text-align: right; font-weight: 700; color: var(--rd-faint); }
.prcf-up { color: var(--rd-gain); }
.prcf-dn { color: var(--rd-loss); }

/* outcome verdict badge + the outcome-change story strip: the majority-vs-hung
   verdict is the headline of the whole view, so it reads as a coloured badge,
   and a CHANGE of outcome class gets its own sentence between tiles and benches */
.prcf-verdict { display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
	font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.prcf-v-maj { color: var(--rd-gain); background: rgba(111,208,140,0.14); border: 1px solid rgba(111,208,140,0.35); }
.prcf-v-hung { color: var(--rd-gauge); background: rgba(232,193,90,0.12); border: 1px solid rgba(232,193,90,0.4); }
.prcf-story { font-size: 13.5px; line-height: 1.45; color: var(--rd-text); margin: 0 0 12px 0;
	padding: 9px 12px; border-radius: 8px; background: var(--rd-card); }
.prcf-story b { font-weight: 800; }
.prcf-story-hung { border-left: 3px solid var(--rd-gauge); }
.prcf-story-hung b { color: var(--rd-gauge); }
.prcf-story-maj { border-left: 3px solid var(--rd-gain); }
.prcf-story-maj b { color: var(--rd-gain); }
/* the historical "who actually governed" line under the FPTP badge */
.prcf-realgov { display: block; font-size: 10.5px; color: var(--rd-muted); margin-top: 5px; line-height: 1.4; }
/* the "+N" tail of a pooled-pact label in the outcome tiles */
#stat-panel .stat-tile-big .prcf-pactplus { font-size: 0.6em; font-weight: 700; color: var(--rd-muted); }

/* coalition builder (2.9b): tappable party rows + the summary bar */
.prcf-tap { cursor: pointer; }
.prcf-tap:hover { background: var(--rd-raised); }
.prcf-row.prcf-sel { background: var(--rd-raised); box-shadow: inset 3px 0 0 var(--rd-gauge); }
/* non-voting parties (abstentionist / Speaker): dimmed, not selectable */
.prcf-row.prcf-nonvote { cursor: default; opacity: 0.55; }
.prcf-row.prcf-nonvote .prcf-ab { font-weight: 600; }
.prcf-nonvote-tag { font-weight: 400; font-size: 10px; color: var(--rd-muted); }
.prcf-coalhint { font-size: 11px; color: var(--rd-faint); margin: 0 0 8px 2px; }
.prcf-coal { background: var(--rd-card); border: 1px solid var(--rd-hairline); border-radius: 10px;
	padding: 10px 12px; margin: 0 0 10px 0; }
.prcf-coalhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.prcf-coalnames { font-weight: 800; font-size: 13px; color: var(--rd-text); }
.prcf-coalclear { font-size: 11px; color: var(--rd-link); text-decoration: none; }
.prcf-coalbar { position: relative; height: 10px; border-radius: 5px; background: var(--rd-raised); overflow: visible; margin-bottom: 6px; }
.prcf-coalfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--rd-loss); opacity: .85; }
.prcf-coalfill.prcf-coalok { background: var(--rd-gain); }
.prcf-coalmaj { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--rd-muted); }
.prcf-coalsub { font-size: 11.5px; color: var(--rd-text2); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prcf-coalreal { color: var(--rd-muted); }

/* ============================================================
   Changes view (assets/js/changes.js): net-change bars, gains-from
   flow, flip rows, and the categorical map legend
   ============================================================ */

.ch-card { background: var(--rd-card); border: 1px solid var(--rd-hairline); border-radius: 10px; padding: 12px; margin: 0 0 14px 0; }
.ch-h4 { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--rd-muted); margin-bottom: 10px; }

/* net seats changed — diverging bars about a centre line */
.ch-net { display: grid; grid-template-columns: 46px 1fr 44px; gap: 9px; align-items: center; margin: 8px 0; font-size: 12px; }
.ch-net-ab { font-weight: 700; color: var(--rd-text); }
.ch-net-track { position: relative; height: 16px; }
.ch-net-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--rd-border); }
.ch-net-bar { position: absolute; top: 2px; height: 12px; border-radius: 3px; min-width: 2px; }
.ch-net-fig { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.ch-up { color: var(--rd-gain); }
.ch-dn { color: var(--rd-loss); }

/* where the gains came from */
.ch-flow { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--rd-text2); padding: 6px 3px; border-bottom: 1px solid var(--rd-hairline); }
.ch-flow:last-child { border-bottom: none; }
.ch-flow-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ch-flow-n { margin-left: auto; font-weight: 700; color: var(--rd-text); font-variant-numeric: tabular-nums; }

/* flip rows + chip (rows reuse .stat-row for hover/click/icons) */
.ch-fliprow .stat-row-main { min-width: 0; }
.ch-flip { font-size: 11px; font-weight: 700; white-space: nowrap; padding-left: 8px; }
.ch-arrow { color: var(--rd-muted); font-weight: 400; }
.ch-notional { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--rd-gauge);
               border: 1px solid var(--rd-border); border-radius: 7px; padding: 0 5px; margin-left: 5px; }
.ch-tile-note { font-size: 11px; font-weight: 400; color: var(--rd-muted); }

/* Division view: current-division summary + browsable list in the stat panel */
#div-current { margin: 2px 0 14px 0; }
/* keep the four tile figures on one baseline even if a label ("Did not vote")
   wraps to two lines when the panel is narrow */
#div-current .stat-tile { display: flex; flex-direction: column; }
#div-current .stat-tile .stat-tile-big { margin-top: auto; }
#div-current-title { font-size: 18px; font-weight: 800; color: var(--rd-text); line-height: 1.25; margin-bottom: 1px; }
/* official title trailing an informal (popular) heading: smaller and fainter */
.div-title-official { font-size: 13px; font-weight: 600; color: var(--rd-muted); margin-left: 8px; }
#div-current-meta { font-size: 11px; color: var(--rd-muted); margin: 2px 0 10px 0; }
#div-current-result { font-size: 12px; color: var(--rd-text2); margin-top: 8px; font-weight: 600; }
/* optional external reference links (Wikipedia / Hansard) */
#div-current-links { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 16px; }
.div-ext-link { font-size: 12px; font-weight: 700; color: var(--rd-link); text-decoration: none; }
.div-ext-link:hover { text-decoration: underline; }
.div-ext-link::after { content: " \2197"; font-weight: 400; opacity: 0.75; }
.div-list-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rd-muted); margin: 4px 0 6px 0; }
.div-list-row { padding: 8px 9px; border: 1px solid var(--rd-border); border-radius: 6px; margin-bottom: 6px; cursor: pointer; }
.div-list-row:hover { border-color: var(--rd-text2); }
.div-list-on { border-color: var(--rd-text); background: var(--rd-raised, rgba(0,0,0,0.03)); }
.div-list-title { font-size: 12.5px; font-weight: 700; color: var(--rd-text); line-height: 1.25; }
.div-list-title-official { font-size: 11px; font-weight: 600; color: var(--rd-muted); margin-left: 6px; }
.div-list-sub { font-size: 10.5px; color: var(--rd-muted); margin-top: 2px; }
/* teal / orange to match the map buckets (not green/red - a colour-blind fail pair) */
.div-a { color: rgb(0,150,136); font-weight: 700; }
.div-n { color: rgb(230,126,34); font-weight: 700; }
.div-empty { font-size: 12px; color: var(--rd-muted); padding: 10px 4px; line-height: 1.5; }

/* government vs opposition split of the whip (whipped divisions only) */
#div-current-split { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rd-hairline, var(--rd-border)); }
.div-split-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rd-muted); margin-bottom: 5px; }
.div-split-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; margin-bottom: 3px; }
.div-split-lbl { color: var(--rd-text2); font-weight: 600; }
.div-split-nums { font-size: 11px; }

/* categorical map legend (Division vote / Changed hands). This box sits on the
   light map pane (#stat-legend-box has a pale background), OUTSIDE the right
   panel's .rd-light scope - so the --rd-* text tokens resolve to their :root
   (dark-theme, near-white) values here and read as faint grey. Use explicit
   dark text instead so the Aye / No / did-not-vote labels are legible. */
#stat-legend-keys { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.stat-legend-key { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #111; font-weight: 400; }
.stat-legend-key-sw { width: 13px; height: 10px; border-radius: 2px; flex: none; border: 1px solid rgba(0,0,0,0.15); }

/* Division seat hover tooltip (MP + vote). Appended to <body>, so it's also
   outside the .rd-light scope - explicit light-surface colours, not --rd-* */
#div-tooltip { position: fixed; z-index: 4000; pointer-events: auto; max-width: 230px;
	background: #ffffff; color: #24262c; border: 1px solid #d9d4cb;
	border-radius: 7px; box-shadow: 0 6px 22px rgba(0,0,0,0.18); padding: 9px 11px; font-size: 12px; line-height: 1.35; }
.div-tip-mp { font-weight: 800; font-size: 13px; color: #1a1c22; }
.div-tip-rebel { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.05em; color: #fff; background: rgb(230,126,34); border-radius: 3px; padding: 1px 4px; vertical-align: middle; }
.div-tip-cnst { color: #6e7382; font-size: 11px; margin-top: 1px; }
/* a rebelling minister's office, and the stronger gold badge that marks them */
.div-tip-post { color: #8a6d16; font-size: 11px; font-weight: 700; margin-top: 2px; }
.div-tip-minreb { color: #2a1e00; background: #ffcf3f; border: 1px solid #b9860b; }
.div-tip-vote { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-weight: 700; color: #33373f; }
.div-tip-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,0.15); }
.div-tip-link { margin-top: 6px; font-size: 11px; font-weight: 700; color: #1d63b8; }

/* "ministers rebelled" callout (whipped divisions): the headline of the vote.
   Sits in the right panel, so it uses the --rd-* tokens like the whip split. */
#div-min-rebels { margin-top: 12px; padding: 9px 10px; border-radius: 7px;
	border: 1px solid #d8a92a; background: rgba(255,207,63,0.10); }
.div-min-rebels-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
	color: #a97e12; margin-bottom: 6px; }
.div-min-rebel-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px;
	padding: 4px 4px; border-radius: 5px; cursor: pointer; }
.div-min-rebel-row:hover { background: rgba(255,207,63,0.18); }
.div-min-rebel-name { font-size: 12.5px; font-weight: 700; color: var(--rd-text); }
.div-min-rebel-post { font-size: 11px; color: var(--rd-muted); }
.div-min-rebel-dir { font-size: 11px; font-weight: 700; margin-left: auto; }
.div-min-rebels-hint { font-size: 10.5px; color: var(--rd-muted); margin-top: 6px; font-style: italic; }

/* legend swatch for the ministerial-rebel halo: a gold ring, not a filled block */
.div-legend-minhalo { background: transparent; border: 2px solid #ffcf3f;
	box-shadow: 0 0 0 1px #3a2a00; border-radius: 50%; }

/* the pulsing glow on the map halo (division-minister-halos, drawn in SVG).
   Animates the soft outer ring; the crisp gold ring underneath stays put.
   Honour reduced-motion by holding it steady. */
@keyframes divMinPulse {
	0%   { opacity: 0.60; stroke-width: 5; }
	50%  { opacity: 0.12; stroke-width: 9.5; }
	100% { opacity: 0.60; stroke-width: 5; }
}
.div-min-halo-glow { animation: divMinPulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.div-min-halo-glow { animation: none; opacity: 0.5; }
}

/* Changes: loading + error state (shown while /changes fetches) */
.ch-loading { display: flex; align-items: center; gap: 10px; padding: 22px 6px; color: var(--rd-muted); font-size: 13px; }
.ch-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%;
	border: 2px solid var(--rd-hairline); border-top-color: var(--rd-gauge);
	animation: ch-spin 0.8s linear infinite; }
@keyframes ch-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Records overlay (assets/js/records.js, roadmap 2.4)
   A centred modal over the whole app; it floats at body level so it keeps the
   dark :root --rd-* tokens even when the results column is in light mode.
   ============================================================ */
.rec-overlay {
	position: fixed; inset: 0; z-index: 4000;
	display: none; align-items: center; justify-content: center;
	background: rgba(6,7,10,0.62);
	font-family: "Libre Franklin", "PT Sans", sans-serif;
	padding: 24px;
}
.rec-modal {
	width: min(920px, 96vw); max-height: 88vh; overflow-y: auto;
	background: var(--rd-card); color: var(--rd-text);
	border: 1px solid var(--rd-border); border-radius: 14px;
	box-shadow: 0 24px 70px rgba(0,0,0,0.55);
	padding: 20px 22px 14px 22px;
}
.rec-head { display: flex; align-items: baseline; gap: 12px; }
.rec-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.rec-sub { color: var(--rd-muted); font-size: 12px; flex: 1 1 auto; }
.rec-x { color: var(--rd-muted); text-decoration: none; font-size: 22px; line-height: 1; padding: 0 4px; }
.rec-x:hover { color: var(--rd-text); }

.rec-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 14px 0 4px 0; }
.rec-toggle { display: inline-flex; border: 1px solid var(--rd-border); border-radius: 8px; overflow: hidden; }
.rec-tg { background: transparent; color: var(--rd-text2); border: none; padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.rec-tg + .rec-tg { border-left: 1px solid var(--rd-border); }
.rec-tg.on { background: var(--rd-raised); color: var(--rd-text); font-weight: 700; }
.rec-tg:hover:not(.on) { background: color-mix(in srgb, var(--rd-raised) 55%, transparent); }
.rec-controls-hint { color: var(--rd-faint); font-size: 11.5px; flex: 1 1 auto; }
.rec-region select {
	background: var(--rd-raised); color: var(--rd-text); font-family: inherit; font-size: 12.5px;
	border: 1px solid var(--rd-border); border-radius: 8px; padding: 6px 8px;
}

.rec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px 0; }
.rec-chip {
	background: transparent; color: var(--rd-text2); font-family: inherit; font-size: 12.5px;
	border: 1px solid var(--rd-border); border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.rec-chip:hover:not(.on) { background: color-mix(in srgb, var(--rd-raised) 55%, transparent); color: var(--rd-text); }
.rec-chip.on { background: var(--rd-link); border-color: var(--rd-link); color: #0d0e12; font-weight: 700; }
/* label dividing the seat-record chips from the individual-record chips */
.rec-chip-sep { align-self: center; color: var(--rd-faint); font-size: 11px; text-transform: uppercase;
	letter-spacing: 0.04em; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--rd-border); }

.rec-rows { margin-top: 10px; }
.rec-row {
	display: grid; grid-template-columns: 26px 1fr auto auto auto; align-items: center; gap: 12px;
	padding: 12px 8px; border-top: 1px solid var(--rd-hairline);
}
.rec-row:first-child { border-top: none; }
.rec-row-link { cursor: pointer; border-radius: 8px; }
.rec-row-link:hover { background: var(--rd-raised); }
.rec-rank { color: var(--rd-faint); font-size: 13px; text-align: center; }
.rec-main { min-width: 0; }
.rec-rtitle { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rec-sw { width: 11px; height: 11px; border-radius: 2px; flex: none; display: inline-block; }
.rec-rdetail { color: var(--rd-muted); font-size: 12px; margin-top: 2px; }
.rec-badge { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; white-space: nowrap; }
.rec-badge-mm { background: color-mix(in srgb, var(--rd-gauge) 22%, transparent); color: var(--rd-gauge); }
.rec-badge-un { background: color-mix(in srgb, var(--rd-loss) 20%, transparent); color: var(--rd-loss); }
.rec-val { text-align: right; white-space: nowrap; }
.rec-vmain { font-size: 17px; font-weight: 800; }
.rec-vunit { font-size: 11px; font-weight: 600; color: var(--rd-muted); }
.rec-vsub { font-size: 11px; color: var(--rd-faint); margin-top: 1px; }
.rec-elct-chip { background: var(--rd-raised); border: 1px solid var(--rd-border); color: var(--rd-text2);
	font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.rec-open { white-space: nowrap; }
.rec-view { color: var(--rd-link); font-size: 12px; text-decoration: none; }
.rec-view:hover { text-decoration: underline; }
.rec-row-error { color: var(--rd-muted); }
.rec-empty { color: var(--rd-muted); font-size: 13px; padding: 26px 6px; text-align: center; }

.rec-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rd-hairline);
	color: var(--rd-faint); font-size: 11px; }

/* light-mode overlay: the modal is body-level so it can't inherit
   #data-col.rd-light; records.js adds .rec-light when window.$rdPanelTheme is
   "light", and these re-declare the same --rd-* tokens the panel's light mode
   uses, so the whole overlay flips with the rest of the site. */
.rec-modal.rec-light {
	--rd-card: #fcfbf9;
	--rd-raised: #f2f0ea;
	--rd-hairline: #ece8e1;
	--rd-border: #d9d4cb;
	--rd-text: #24262c;
	--rd-text2: #464a54;
	--rd-muted: #6e7382;
	--rd-faint: #a0a4af;
	--rd-gain: #1e8c50;
	--rd-loss: #c4403f;
	--rd-gauge: #a87f1e;
	--rd-link: #1d63b8;
}
.rec-modal.rec-light .rec-chip.on { color: #ffffff; }

/* ---- All-Time Stats hub (2.15): the records modal widened, with a left rail
   of views and a main pane; Records renders into the pane unchanged ---- */
.rec-modal.ats-modal {
	width: min(1140px, 96vw); padding: 0; overflow: hidden;
	display: grid; grid-template-columns: 196px 1fr;
}
.ats-rail { background: var(--rd-raised); border-right: 1px solid var(--rd-hairline);
	padding: 18px 0 14px; display: flex; flex-direction: column; box-sizing: border-box; }
.ats-brand { padding: 0 16px 12px; }
.ats-brand .t { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.ats-brand .s { font-size: 11px; color: var(--rd-muted); margin-top: 2px; line-height: 1.35; }
.ats-group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rd-faint); padding: 12px 16px 5px; }
.ats-item { display: block; padding: 8px 14px 8px 13px; font-size: 13px; color: var(--rd-text2);
	border-left: 3px solid transparent; text-decoration: none; }
.ats-item:hover { background: color-mix(in srgb, var(--rd-card) 55%, transparent); color: var(--rd-text); }
.ats-item.on { border-left-color: var(--rd-link); color: var(--rd-text); font-weight: 700;
	background: color-mix(in srgb, var(--rd-card) 70%, transparent); }
.ats-spacer { flex: 1; }
.ats-foot { padding: 10px 16px 0; font-size: 10.5px; color: var(--rd-faint); border-top: 1px solid var(--rd-hairline); margin-top: 8px; }
.ats-foot code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; }
.ats-main { padding: 20px 22px 14px 22px; min-width: 0; max-height: 88vh; overflow-y: auto; }
@media (max-width: 720px) {
	.rec-modal.ats-modal { grid-template-columns: 1fr; }
	.ats-rail { border-right: none; border-bottom: 1px solid var(--rd-hairline); padding-bottom: 8px; }
	.ats-spacer, .ats-foot { display: none; }
}

/* government composition timeline (2.15b) */
.gct-wrap { position: relative; margin-top: 12px; }
.gct-wrap svg { display: block; width: 100%; height: auto; font-family: inherit; }
.gct-sp { cursor: pointer; }
.gct-sp:hover { filter: brightness(1.15); }
.gct-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--rd-text2); margin: 10px 0 2px; }
.gct-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.gct-legend .sw { width: 14px; height: 9px; border-radius: 2px; display: inline-block; }
.gct-legend .sw.hatch { background: repeating-linear-gradient(135deg, var(--rd-muted) 0 2px, transparent 2px 5px); border: 1px solid var(--rd-faint); }
.gct-tip { position: absolute; pointer-events: none; display: none; z-index: 5; max-width: 270px;
	background: var(--rd-raised); color: var(--rd-text); border: 1px solid var(--rd-border); border-radius: 8px;
	padding: 8px 10px; font-size: 12px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.gct-tip b { font-weight: 700; }
.gct-tip .m { color: var(--rd-muted); }

/* working majorities (2.15c): gallery of per-parliament tiles + compare panel.
   Every colour is a --rd-* token so the view flips with the panel theme. */
.wm-focus { position: relative; border: 1px solid var(--rd-border); border-radius: 10px; background: var(--rd-raised);
	padding: 10px 12px 8px; margin: 12px 0 14px; }
.wm-focus-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--rd-muted); }
.wm-focus-head b { color: var(--rd-text); font-weight: 700; }
.wm-spacer { flex: 1; }
.wm-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rd-border); border-radius: 999px;
	padding: 2px 8px 2px 6px; font-size: 11.5px; color: var(--rd-text2); background: var(--rd-card); white-space: nowrap; }
.wm-chip .x { color: var(--rd-faint); text-decoration: none; margin-left: 2px; }
.wm-chip .x:hover { color: var(--rd-text); }
.wm-focus-empty { color: var(--rd-faint); font-size: 12px; padding: 18px 0; text-align: center; }
.wm-focus svg { display: block; width: 100%; height: auto; font-family: inherit; }
.wm-tip { position: absolute; pointer-events: none; display: none; z-index: 5; background: var(--rd-card); color: var(--rd-text);
	border: 1px solid var(--rd-border); border-radius: 8px; padding: 7px 9px; font-size: 12px; line-height: 1.4;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.wm-tip .m { color: var(--rd-muted); }
.wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.wm-tile { border: 1px solid var(--rd-hairline); border-radius: 8px; background: var(--rd-card); padding: 8px 9px 6px;
	cursor: pointer; position: relative; transition: border-color .12s; }
.wm-tile:hover { border-color: var(--rd-border); background: color-mix(in srgb, var(--rd-raised) 55%, transparent); }
.wm-tile.sel { border-color: var(--rd-link); box-shadow: inset 0 0 0 1px var(--rd-link); }
.wm-tile.dip { border-left: 3px solid var(--rd-loss); }
.wm-th { display: flex; align-items: baseline; gap: 6px; }
.wm-th .yrs { font-weight: 800; font-size: 13px; color: var(--rd-text); }
.wm-th .pm { color: var(--rd-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.wm-th .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.wm-tile svg { display: block; width: 100%; height: 64px; margin-top: 4px; }
.wm-tf { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--rd-muted); margin-top: 2px; }
.wm-tf b { color: var(--rd-text2); font-weight: 700; }
.wm-tf .neg b { color: var(--rd-loss); }
.wm-tf .pos b { color: var(--rd-gain); }
.wm-clip { position: absolute; top: 27px; right: 9px; font-size: 9.5px; line-height: 14px; color: var(--rd-muted);
	background: color-mix(in srgb, var(--rd-card) 82%, transparent); border: 1px solid var(--rd-hairline); border-radius: 4px;
	padding: 0 4px; z-index: 1; white-space: nowrap; }
.wm-tick { position: absolute; top: 6px; right: 7px; width: 14px; height: 14px; border: 1px solid var(--rd-border); border-radius: 3px; background: var(--rd-card); }
.wm-tile.sel .wm-tick { background: var(--rd-link); border-color: var(--rd-link); }
.wm-tile.sel .wm-tick::after { content: "\2713"; color: var(--rd-card); font-size: 10px; font-weight: 800; position: absolute; left: 2px; top: -1px; }

/* All-Time Stats: per-election aggregate charts (eras-views.js) - one time-axis
   chart per view, a strip of headline extremes above it, an optional legend,
   and a hover tooltip that snaps to the nearest election. */
.er-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 4px; font-size: 12px; color: var(--rd-muted); }
.er-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.er-stat .l { color: var(--rd-faint); }
.er-stat b { color: var(--rd-text); font-size: 15px; font-weight: 800; }
.er-stat .y { color: var(--rd-text2); }
.er-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 2px; font-size: 12px; color: var(--rd-text2); }
.er-lg { display: inline-flex; align-items: center; gap: 6px; color: var(--rd-text2); text-decoration: none; white-space: nowrap; }
a.er-lg:hover { color: var(--rd-text); text-decoration: underline; }
.er-lg.off { color: var(--rd-faint); text-decoration: line-through; }
.er-lg.off svg { opacity: 0.3; }
.er-lg .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px var(--rd-border); }
.er-chart { position: relative; border: 1px solid var(--rd-border); border-radius: 10px; background: var(--rd-raised); padding: 8px 6px 4px; margin-top: 8px; }
.er-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.er-tip { position: absolute; pointer-events: none; display: none; z-index: 5; background: var(--rd-card); color: var(--rd-text);
	border: 1px solid var(--rd-border); border-radius: 8px; padding: 7px 9px; font-size: 12px; line-height: 1.45; max-width: 300px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.rec-light .er-tip { box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.er-tip .h { font-weight: 800; margin-bottom: 2px; }
.er-tip .m { color: var(--rd-muted); font-weight: 400; }
.er-tip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.er-hover { color: var(--rd-faint); }

/* By-election scoreboard (bye-scoreboard.js): bars + the per-parliament list */
.bs-bar:hover rect { filter: brightness(1.15); }
.bs-list { margin-top: 10px; }
.bs-empty { color: var(--rd-faint); font-size: 12px; padding: 12px 2px; }
.bs-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--rd-text); padding: 4px 2px 6px; }
.bs-head .m { color: var(--rd-muted); }
.bs-head .x { margin-left: auto; color: var(--rd-muted); font-size: 12px; text-decoration: none; }
.bs-head .x:hover { color: var(--rd-text); text-decoration: underline; }
.bs-head .sw, .bs-table .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.bs-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--rd-text2); }
.bs-table th { text-align: left; font-weight: 600; color: var(--rd-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-bottom: 1px solid var(--rd-border); }
.bs-table td { padding: 5px 8px; border-bottom: 1px solid var(--rd-hairline); white-space: nowrap; }
.bs-table td.d { color: var(--rd-muted); }
.bs-table td.s { color: var(--rd-text); font-weight: 600; }
.bs-table td.arr { color: var(--rd-faint); padding: 5px 2px; }
.bs-table td.c { color: var(--rd-muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.bs-table td.k { font-weight: 700; }
.bs-table tr.loss td.k { color: var(--rd-loss); }
.bs-table tr.gain td.k { color: var(--rd-gain); }
.bs-table tr.hold td.k { color: var(--rd-text2); }
.bs-table tr.opp td.k { color: var(--rd-faint); font-weight: 400; }
.bs-table td.v { text-align: right; }
.bs-table td.v a { color: var(--rd-link); text-decoration: none; font-size: 11.5px; }
.bs-table td.v a:hover { text-decoration: underline; }

/* Votes that changed history (switchers.js): the seat table under an open row */
.sv-seats { padding: 0 8px 12px 46px; }
.sv-none .rec-rtitle { color: var(--rd-muted); font-weight: 600; }
.rec-row.sv-open { background: var(--rd-raised); border-radius: 8px 8px 0 0; }
.sv-seats .bs-table td { white-space: normal; }
.sv-seats .bs-table th.v { text-align: right; }
.sv-seats .rec-sw { width: 9px; height: 9px; margin-right: 5px; vertical-align: 0; }

/* Defections river (defections-river.js) */
.dr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 12px; }
.dr-chips .l { color: var(--rd-faint); margin-right: 2px; }
.dr-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rd-border); border-radius: 999px; padding: 2px 9px 2px 7px;
	color: var(--rd-text2); text-decoration: none; white-space: nowrap; }
.dr-chip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.dr-chip .n { color: var(--rd-muted); }
.dr-chip:hover { border-color: var(--rd-text2); color: var(--rd-text); }
.dr-chip.on { background: var(--rd-raised); border-color: var(--rd-link); color: var(--rd-text); box-shadow: inset 0 0 0 1px var(--rd-link); }
.dr-chip.clr { border-style: dashed; color: var(--rd-muted); }
.dr-dot { cursor: pointer; }
.dr-dot:hover { stroke: var(--rd-text); stroke-width: 1.5; }
.dr-callout { paint-order: stroke; stroke: var(--rd-raised); stroke-width: 3px; }

/* Records launcher, docked at the foot of the (dark) left sidebar, below the
   playback bar and set off by a separator - deliberately outside the timeline
   controls because Records reaches across every election, not the current one. */
#records-dock {
	/* #sidebar-col is a flex column; the playback bar is order:10 and the
	   "next election" endpoint (#nextbigthing) is appended after this dock in
	   the DOM. Give the dock a higher order than both so it always lands at the
	   very bottom - below the playback controls and outside the GE->GE span. */
	order: 20; flex-shrink: 0;
	margin: 14px 10px 8px 10px; padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,0.14); text-align: center;
}
#records-open-button {
	width: 100%; cursor: pointer;
	font-family: "Libre Franklin", "PT Sans", sans-serif;
	font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
	color: #eef0f3; background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; padding: 9px 10px;
}
#records-open-button:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.42); }

@media (max-width: 620px) {
	.rec-row { grid-template-columns: 22px 1fr auto; }
	.rec-elct, .rec-open { display: none; }
}