/* ============================================================
   mobile.css — mobile shell for /elections (≤ 820px)
   Additive layer: loads after all existing stylesheets and only
   activates inside the media query + body.mb-on (set by mobile.js),
   so desktop rendering is byte-for-byte unchanged.
   Uses the --tl-* / --rd-* tokens with hard fallbacks so it follows
   the existing light/dark theme switch automatically.
   ============================================================ */

@media (max-width: 820px) {

/* ---- kill the 3-column float layout ------------------------ */
body.mb-on .container { display: block; width: 100%; max-width: none; padding: 0; margin: 0; }
body.mb-on .highest { float: none; height: auto; }

/* ---- map column becomes the stage -------------------------- */
body.mb-on #map-col {
	position: fixed; inset: 0;
	width: 100%; height: 100%;
	border-right: none;
	padding-top: 52px;                 /* header bar */
	padding-bottom: calc(56px + 110px); /* tab bar + sheet peek */
	box-sizing: border-box;
	z-index: 1;
}
body.mb-on #ukmap { width: 100%; height: 100%; }

/* ---- sidebar column becomes the timeline drawer ------------- */
body.mb-on #sidebar-col {
	position: fixed; top: 0; bottom: 0; left: 0;
	width: min(330px, 86vw); height: 100%;
	border-right: none;
	box-shadow: 8px 0 32px rgba(0,0,0,.4);
	transform: translateX(-105%);
	transition: transform .25s ease;
	overflow-y: auto;
	z-index: 60;
}
body.mb-on.mb-drawer-open #sidebar-col { transform: translateX(0); }
body.mb-on #mb-scrim {
	position: fixed; inset: 0; background: rgba(13,14,18,.45);
	opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 55;
}
body.mb-on.mb-drawer-open #mb-scrim { opacity: 1; pointer-events: auto; }

/* ---- data column becomes the bottom sheet ------------------- */
body.mb-on #data-col {
	position: fixed; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: calc(100% - 52px);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 24px rgba(0,0,0,.3);
	/* three stops driven by mb-sheet-* classes; transform keeps it cheap */
	transform: translateY(calc(100% - 110px - 56px)); /* peek above tab bar */
	transition: transform .28s cubic-bezier(.4,0,.2,1);
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 40;
	padding-top: 26px; /* room for the grab handle */
	box-sizing: border-box;
}
body.mb-on.mb-sheet-half #data-col { transform: translateY(46%); }
body.mb-on.mb-sheet-full #data-col { transform: translateY(0); z-index: 70; } /* over tab bar */
body.mb-on #mb-sheet-handle {
	position: sticky; top: -26px; margin-top: -26px;
	height: 26px; display: flex; align-items: center; justify-content: center;
	cursor: grab; touch-action: none; z-index: 2;
	background: inherit;
}
body.mb-on #mb-sheet-handle::before {
	content: ""; width: 36px; height: 4px; border-radius: 2px;
	background: var(--rd-hairline, #363b48);
}

/* peek strip content (parliament summary) */
#mb-peek { display: none; }
body.mb-on #mb-peek {
	display: block; padding: 2px 18px 10px;
	font-family: 'Libre Franklin','PT Sans',sans-serif; font-size: 12px;
}
body.mb-on #mb-peek .mb-peek-title {
	font-size: 11px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; opacity: .6; margin-bottom: 4px;
}
body.mb-on #mb-peek #mb-peek-parties {
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	font-size: 11px;
}
body.mb-on #mb-peek .mb-bench { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; max-height: 64px; overflow: hidden; }
body.mb-on #mb-peek .mb-bench-side { flex: 1; display: flex; flex-wrap: wrap; gap: 1px; align-content: flex-start; }
body.mb-on #mb-peek .mb-bench-gutter { width: 1px; align-self: stretch; background: var(--rd-hairline, #363b48); }
body.mb-on #mb-peek .mb-bench-dot { width: 4px; height: 4px; border-radius: 50%; }

/* ---- header bar --------------------------------------------- */
#mb-header { display: none; }
body.mb-on #mb-header {
	display: flex; align-items: center; gap: 12px;
	position: fixed; top: 0; left: 0; right: 0; height: 52px;
	padding: 0 14px; box-sizing: border-box;
	background: var(--tl-bg, darkslategrey); color: var(--tl-fg, #ffffff);
	font-family: 'Libre Franklin','PT Sans',sans-serif;
	z-index: 50;
}
body.mb-on #mb-burger { display: flex; flex-direction: column; gap: 4px; width: 22px; padding: 8px 4px; background: none; border: none; cursor: pointer; }
body.mb-on #mb-burger span { height: 2px; background: currentColor; border-radius: 1px; }
body.mb-on #mb-title { flex: 1; min-width: 0; line-height: 1.1; }
body.mb-on #mb-title b { font-size: 17px; font-weight: 800; }
body.mb-on #mb-title small { display: block; font-size: 10px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mb-on #mb-search-btn { background: none; border: none; color: currentColor; padding: 8px; cursor: pointer; }
/* search expands over the title row; reuses the REAL #constituency-search input */
body.mb-on.mb-search-open #mb-title { display: none; }
body.mb-on #seat-search-box { position: static; width: auto; }
body.mb-on.mb-search-open #seat-search-box { flex: 1; }
body.mb-on #seat-search-box #constituency-search { display: none; width: 100%; }
body.mb-on.mb-search-open #seat-search-box #constituency-search { display: block; }
body.mb-on #reset-view-button { display: none; } /* re-homed as a map pill below */

/* ---- floating map controls (top-right stack) ----------------- */
#mb-map-controls { display: none; }
body.mb-on #mb-map-controls {
	display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
	position: fixed; top: 64px; right: 12px; z-index: 30;
	font-family: 'Libre Franklin','PT Sans',sans-serif;
}
body.mb-on #mb-map-controls .mb-pill,
body.mb-on #mb-map-controls select.mb-pill {
	font-size: 11px; font-weight: 600;
	background: var(--rd-chip-bg, rgba(255,255,255,.92));
	color: var(--rd-fg, #345);
	border: 1px solid var(--rd-hairline, #b9c8d4);
	border-radius: 999px; padding: 4px 10px;
	appearance: none; -webkit-appearance: none; cursor: pointer;
}
body.mb-on #mb-map-controls select.mb-pill { padding-right: 22px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%23888'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center;
}
/* the desktop radio overlay is hidden on mobile (selects proxy it) */
body.mb-on #view-mode-box { display: none; }
body.mb-on #map-mode-overlay { top: auto; bottom: calc(56px + 100px); right: 8px; }

/* ---- tab bar -------------------------------------------------- */
#mb-tabbar { display: none; }
body.mb-on #mb-tabbar {
	display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 56px;
	background: var(--rd-bg, #15171d);
	border-top: 1px solid var(--rd-hairline, #262a34);
	z-index: 45;
	font-family: 'Libre Franklin','PT Sans',sans-serif;
}
body.mb-on #mb-tabbar button {
	flex: 1; background: none; border: none; cursor: pointer;
	color: var(--rd-fg-dim, #5d6270); font-size: 11px; font-weight: 600;
	padding-top: 10px;
}
body.mb-on #mb-tabbar button .mb-tab-ind {
	display: block; width: 22px; height: 3px; border-radius: 2px;
	margin: 0 auto 7px; background: transparent;
}
body.mb-on #mb-tabbar button.mb-tab-active { color: var(--rd-fg, #e8e6e1); font-weight: 700; }
body.mb-on #mb-tabbar button.mb-tab-active .mb-tab-ind { background: var(--rd-accent, #7fb3e8); }

/* ---- Explore hub ---------------------------------------------- */
#mb-hub { display: none; }
body.mb-on #mb-hub {
	position: fixed; top: 0; left: 0; right: 0; bottom: 56px;
	background: var(--tl-bg, darkslategrey); color: var(--tl-fg, #fff);
	z-index: 44; overflow-y: auto;
	padding: 20px 20px 16px; box-sizing: border-box;
	font-family: 'Libre Franklin','PT Sans',sans-serif;
	display: none;
}
body.mb-on.mb-tab-explore #mb-hub { display: block; }
body.mb-on #mb-hub { z-index: 55; } /* above the map header — the hub owns its own top area */
body.mb-on #mb-hub .mb-hub-year { font-size: 34px; font-weight: 800; line-height: 1; margin-top: 8px; }
body.mb-on #mb-hub .mb-hub-sub { font-size: 12px; opacity: .85; margin: 3px 0 14px; }
body.mb-on #mb-hub .mb-hub-share { position: relative; height: 34px; border-radius: 8px; overflow: hidden; display: flex; margin-bottom: 14px; }
body.mb-on #mb-hub .mb-hub-share-label {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body.mb-on #mb-hub .mb-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.mb-on #mb-hub .mb-hub-card {
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
	border-radius: 12px; padding: 13px 14px; cursor: pointer; text-align: left; color: inherit;
}
body.mb-on #mb-hub .mb-hub-card b { display: block; font-size: 13px; font-weight: 800; }
body.mb-on #mb-hub .mb-hub-card small { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }

/* ---- tap disambiguation chooser -------------------------------- */
#mb-chooser { display: none; }
body.mb-on #mb-chooser {
	display: none; position: fixed; left: 0; right: 0; bottom: 0;
	background: var(--rd-bg, #15171d); color: var(--rd-fg, #e8e6e1);
	border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.35);
	padding: 12px 18px 20px; z-index: 80;
	font-family: 'Libre Franklin','PT Sans',sans-serif;
}
body.mb-on.mb-chooser-open #mb-chooser { display: block; }
body.mb-on #mb-chooser .mb-chooser-title {
	font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	opacity: .6; margin-bottom: 9px;
}
body.mb-on #mb-chooser .mb-chooser-row {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 11px 12px; margin-bottom: 6px; text-align: left;
	background: none; border: none; border-left: 3px solid transparent;
	color: inherit; font-size: 13px; cursor: pointer;
}

/* ---- loupe (press-and-hold magnifier) --------------------------- */
#mb-loupe { display: none; }
body.mb-on #mb-loupe {
	position: fixed; width: 200px; height: 200px; border-radius: 50%;
	border: 3px solid var(--tl-bg, darkslategrey);
	box-shadow: 0 12px 32px rgba(0,0,0,.3);
	overflow: hidden; pointer-events: none; z-index: 90;
	background: aliceblue; display: none;
}
body.mb-on.mb-loupe-on #mb-loupe { display: block; }
body.mb-on #mb-loupe svg { position: absolute; transform-origin: 0 0; }

/* ---- floating playback pill -------------------------------------- */
#mb-pb-pill { display: none; }
body.mb-on.mb-pb-on #mb-pb-pill {
	display: flex; align-items: center; gap: 10px;
	position: fixed; left: 50%; transform: translateX(-50%);
	bottom: calc(56px + 122px); /* above tab bar + sheet peek */
	background: var(--tl-bg, darkslategrey); color: var(--tl-fg, #fff);
	border-radius: 999px; padding: 6px 14px 6px 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,.35);
	font-family: 'Libre Franklin','PT Sans',sans-serif;
	z-index: 48;
}
body.mb-on #mb-pb-pill button {
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
	color: currentColor; border-radius: 50%; width: 30px; height: 30px;
	font-size: 11px; line-height: 1; cursor: pointer;
}
body.mb-on #mb-pb-pill #mb-pb-date {
	font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
	white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
}

/* ---- fixes from device screenshots ------------------------------ */
/* region-focus select was landing in the header over the title; on mobile it
   lives under the header, only while search is open (it narrows the search) */
body.mb-on #region-focus-box { display: none !important; }
body.mb-on.mb-search-open #region-focus-box {
	display: block !important; position: fixed; top: 52px; left: 0; right: 0;
	padding: 8px 14px; box-sizing: border-box;
	background: var(--tl-bg, darkslategrey); z-index: 49;
}
/* the in-map party legend duplicated the peek strip and overflowed the screen */
body.mb-on #legend-fo { display: none; }
/* vertical timeline slider (incl. its big pip labels e.g. “Today”): redundant
   with the playback bar in the drawer */
body.mb-on #slider-parent { display: none !important; }
/* results-desk card: single column + tighter grids for a 390px sheet */
body.mb-on #results-card .rc-body { grid-template-columns: 1fr !important; gap: 16px; margin-top: 16px; }
body.mb-on #results-card .rc-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.mb-on #results-card .rc-donut { width: 110px; max-width: 110px; flex: none; }
body.mb-on #results-card .rc-donut-hole { inset: 16px; }
body.mb-on #results-card .rc-donut-pct { font-size: 19px; }
body.mb-on #results-card .rc-stat, body.mb-on #results-card .rc-left .rc-fcell,
body.mb-on #results-card .rc-ring-wrap { margin-top: 0; }
body.mb-on #results-card .rc-title { font-size: 22px; }
body.mb-on #results-card .rc-cols,
body.mb-on #results-card .rc-row { grid-template-columns: 1fr 62px 42px 52px; gap: 8px; padding-left: 10px; padding-right: 10px; }
body.mb-on #results-card .rc-crow { grid-template-columns: 8px 1fr 56px 38px 46px; gap: 6px; padding-left: 8px; padding-right: 8px; }

/* ---- misc ------------------------------------------------------- */
/* date box: desktop gives it a fixed 180×50 slab; on mobile it's a compact
   pill that hides entirely while empty */
body.mb-on #date-box {
	position: fixed; top: 64px; left: 12px;
	width: auto; height: auto; margin: 0; padding: 4px 12px;
	font-size: 14px; font-weight: 700; line-height: 1.4;
	border: 2px solid black; z-index: 30;
}
body.mb-on #date-box:empty { display: none; }
body.mb-on #full-date-box, body.mb-on #calendar-box { display: none; }
/* the in-map bench svg is mirrored into the sheet peek on mobile; hide the
   original. NOTE: cabinet.js draws its "MPs in the Cabinet" outline inside
   this svg — if you want that visible on mobile, drop this rule instead. */
body.mb-on #svg_id { display: none; }
body.mb-on #conloading { position: fixed; }

} /* end @media */