/* ==========================================================================
   New design language for the map tools. Loaded after /css/map.css (and any
   per-tool style.css), overriding their look while keeping every class and
   ID contract that the shared JS (ui-common.js, tour.js) depends on.
   ========================================================================== */

:root {
	--brand: #ac1a40;
	--brand-dark: #8f1535;
	--ink: #1b1b21;
	--muted: #5c5c68;
	--line: #e7e2e4;
	--bg: #ffffff;
	--bg-soft: #f7f4f5;
	--radius: 16px;
	--radius-sm: 10px;
	--shadow-card: 0 4px 24px rgba(0,0,0,.13);
	--shadow-pop: 0 24px 70px rgba(0,0,0,.30);
}

body { color: var(--ink); }

/* Shared bits */
.eyebrow {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--brand); margin-bottom: 6px;
}
.beta-note {
	background: #fdf6e7; border: 1px solid #f0dfae; border-left: 4px solid #cf8f0e;
	border-radius: var(--radius-sm); padding: 12px 14px; color: #6a5518;
}
.fa-question-circle { color: var(--brand); }

/* ---------- Map controls ---------- */
.maplibregl-ctrl-group {
	border-radius: 12px; overflow: hidden;
	border: 1px solid var(--line); box-shadow: var(--shadow-card);
	background-color: rgba(255,255,255,.92);
}
.maplibregl-ctrl-geocoder {
	border-radius: 12px;
	border: 1px solid var(--line); box-shadow: var(--shadow-card);
	background-color: rgba(255,255,255,.92);
}

/* ---------- Layer panel (rightbox) ---------- */
.rightbox {
	background-color: var(--bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	width: 330px;
	max-width: calc(100vw - 24px);
	top: 70px;
	right: 12px;
	padding: 0 0 8px;
	overflow: hidden auto;
}
.rightbox > b {
	display: block;
	padding: 14px 16px 10px;
	font-size: 16px;
}
.rightbox > b::before {
	content: "Map layers";
	display: block;
	font-size: 12px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--brand); margin-bottom: 2px;
}
.rightbox button.close-button {
	color: var(--muted);
	border-radius: 8px;
	margin: 8px 8px 0 0;
}
.rightbox button.close-button:hover { background: var(--bg-soft); color: var(--ink); }

.rightbox .accordion {
	backdrop-filter: none;
	background-color: var(--bg);
	color: var(--ink);
	border: none;
	border-top: 1px solid var(--line);
	box-shadow: none;
	font-weight: 700;
	font-size: 14px;
	padding: 13px 16px 13px 34px;
	position: relative;
}
.rightbox .accordion::before {
	content: "";
	position: absolute; left: 16px; top: 50%; margin-top: -5px;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--brand);
}
.rightbox .accordion:after {
	color: var(--muted);
	font-size: 22px;
	line-height: 0.7;
}
.rightbox .accordion.active,
.rightbox .accordion:hover {
	background: var(--bg-soft);
	border: none;
	border-top: 1px solid var(--line);
}
.rightbox .panel {
	padding: 2px 16px 14px;
	font-size: 14px;
}
.rightbox .panel select,
.rightbox > p > select,
.rightbox select {
	max-width: 100%;
	padding: 9px 12px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #c3bcbe;
	border-radius: 9px;
	background: #fff;
	color: var(--ink);
	margin: 2px 0;
}
.rightbox .panel select { width: 100%; }
.rightbox select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Boundary layers: the show-names switch sits on its own line under the name */
.rightbox .names-row {
	display: block;
	margin-top: 8px;
	padding-left: 22px;
	font-size: 13px;
	color: var(--muted);
}

/* "Take a quick tour" button (injected by tour.js): centred, tighter spacing */
.rightbox > p:has(> .tour-restart) {
	margin: 6px 12px 10px;
	text-align: center;
}
.rightbox .welcome-tour-button.tour-restart { margin: 0; }

/* ---------- Floating buttons ---------- */
.showrightbox { width: 44px; height: 44px; right: 12px; top: 70px; }
.float_button {
	height: 44px; width: 44px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background-color: var(--bg);
	backdrop-filter: none;
	box-shadow: var(--shadow-card);
	font-size: 16px;
	color: var(--ink);
	cursor: pointer;
}
.float_button:hover { background-color: var(--bg-soft); }

/* ---------- Basemap control ---------- */
#basemapcontrol {
	backdrop-filter: none;
	background-color: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 14px 16px;
}
#basemapcontrol h3 { margin-top: 0; font-size: 15px; }

/* ---------- Welcome splash ---------- */
.welcome-modal {
	/* Hidden until capUi shows it. It is skipped entirely when the page opens
	   straight onto a report (?report= deep link), fixing the splash sitting
	   on top of a deep-linked report. */
	display: none;
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
	padding: 30px 34px;
}
.welcome-modal h1 { font-size: clamp(22px, 4vw, 30px); line-height: 1.15; margin-top: 0; }
.welcome-modal .modal-close { font-size: 26px; color: var(--muted); }
.welcome-modal .modal-close:hover { color: var(--ink); }

/* On phones the splash was losing most of its width to chrome: the 5% side
   margins from map.css, the 34px padding above, and the .modal-body padding
   below all stack up. Tighten all three, but only for the splash: the report
   modals keep their roomier spacing. */
@media (max-width: 600px) {
	.welcome-modal {
		margin-left: 12px;
		margin-right: 12px;
		padding: 16px 16px 20px;
	}
	.welcome-modal .modal-body { padding: 0; }
}

/* ---------- Welcome splash: collapsible notices ---------- */
/* The Land Ownership splash has to carry the Land Registry licence wording,
   the terms of use and five copyright notices. As a run of headings they
   pushed the consent form off the first screen, so they collapse the same way
   as the FAQ items on /about/faq/ (native <details>, no JS). */
.welcome-modal .welcome-details {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 0 16px;
	margin: 8px 0;
}
.welcome-modal .welcome-details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--ink);
	padding: 13px 28px 13px 0;
	list-style: none;
	position: relative;
}
.welcome-modal .welcome-details summary::-webkit-details-marker { display: none; }
.welcome-modal .welcome-details summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 12px;
	line-height: 1;
	color: var(--brand);
	font-size: 20px;
	font-weight: 700;
}
.welcome-modal .welcome-details[open] summary::after { content: '\2212'; }
.welcome-modal .welcome-details[open] summary { border-bottom: 1px solid var(--line); }
.welcome-modal .welcome-details summary:hover { color: var(--brand); }
.welcome-modal .welcome-details summary:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
}
.welcome-modal .welcome-details > :not(summary) {
	font-size: 14px;
	color: var(--muted);
	margin: 12px 0;
}
.welcome-modal .welcome-details > .attribution-note { font-size: 13px; }

/* ---------- Welcome splash: consent form (Land Ownership) ---------- */
.welcome-modal .consent-box {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	margin: 18px 0;
}
.welcome-modal .consent-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}
.welcome-modal .consent-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}
.welcome-modal .consent-field { display: flex; flex-direction: column; gap: 5px; }
.welcome-modal .consent-field label { font-size: 14px; font-weight: 700; }
.welcome-modal .consent-field input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 340px;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid #c9c2c5;
	border-radius: 8px;
}
.welcome-modal .consent-field input[type="text"]:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(172,26,64,.15);
}
/* The whole row is the <label>, so the wording is a click target too rather
   than a 13px checkbox being the only way to tick the box */
.welcome-modal .consent-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.35;
	cursor: pointer;
}
.welcome-modal .consent-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--brand);
	cursor: pointer;
}
.welcome-modal .consent-check a { color: var(--brand); font-weight: 700; }
/* Locked by applyAnalyticsGranted: the cookie banner has already answered
   this, so the row greys out rather than inviting an answer it will ignore */
.welcome-modal .consent-locked-note { display: none; }
.welcome-modal .consent-check.is-locked { color: var(--muted); cursor: default; }
.welcome-modal .consent-check.is-locked input[type="checkbox"] { cursor: default; }
.welcome-modal .consent-check.is-locked .consent-locked-note {
	display: inline;
	font-style: italic;
}
.welcome-modal .consent-submit {
	display: inline-block;
	background: var(--brand);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 20px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.welcome-modal .consent-submit:hover { background: var(--brand-dark); }

/* Returning visitor: welcomeInit adds .consent-known to the box, swapping the
   fields for a one-line confirmation. Doing that in CSS rather than with
   inline styles keeps both states described in one place, and stops the
   labels being left behind when their inputs are hidden. The values are still
   present and still submitted, so the visit is logged as the licence needs. */
.welcome-modal .consent-note { display: none; }
.welcome-modal .consent-box.consent-known .consent-fields,
.welcome-modal .consent-box.consent-known .consent-title { display: none; }
.welcome-modal .consent-box.consent-known .consent-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--ink);
}
/* A plain character, not a Font Awesome icon: the subset in
   /assets/fontawesome/ carries fa-question-circle and nothing else, so
   fa-check-circle would silently render as an empty box */
.welcome-modal .consent-tick {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: #1c7c3f;
	color: #fff;
	font-size: 12px;
	line-height: 1;
}
.welcome-modal .consent-note .consent-name { font-weight: 700; }
.welcome-modal .consent-change {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--brand);
	text-decoration: underline;
	cursor: pointer;
}
.welcome-modal .consent-change:hover { color: var(--brand-dark); }

@media (max-width: 600px) {
	.welcome-modal .consent-box { padding: 14px; }
	.welcome-modal .welcome-details { padding: 0 12px; }
}

/* ---------- Help modal ---------- */
#help_modal {
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
	padding: 26px 30px;
}

/* ---------- Report modal ---------- */
.modal {
	background-color: var(--bg-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
}
.modal-header {
	/* background-color is set inline by capUi.colourModalHeader to match the
	   area classification; #717e82 from map.css remains the fallback */
	padding: 16px 24px;
}
.modal-header .modal-title {
	font-size: clamp(17px, 2.6vw, 22px);
	line-height: 1.2;
	margin: 6px 0;
	padding-left: 0;
}
.modal-header .modal-close {
	font-size: 26px;
	padding: 2px 4px 0 12px;
}

/* Print + Share buttons in the coloured header: dark translucent pills keep
   white text readable on both light and dark classification colours */
.print-button,
.share-button {
	background-color: rgba(0,0,0,.28);
	border: none;
	border-radius: 100px;
	padding: 8px 16px;
	font-weight: 700;
}
.print-button:hover,
.share-button:hover { background-color: rgba(0,0,0,.45); }
.share-menu {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
}
.share-menu-item { font-family: inherit; }
.share-menu-item:hover { background: var(--bg-soft); }

.modal-body { padding: 18px 24px 28px; }

/* ---------- Report tabs as pills ---------- */
/* .report-page is the <body> class of the standalone report pages
   (/reports/*.html), which reuse the modal's tab markup outside a .modal */
.modal .tab,
.report-page .tab {
	border: none;
	background-color: transparent;
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 2px 0 12px;
	margin-top: 4px;
}
.modal .tab button,
.report-page .tab button {
	float: none;
	flex: 0 0 auto;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
	background-color: var(--bg);
	border: 1px solid var(--line);
	border-radius: 100px;
	padding: 8px 14px;
	white-space: nowrap;
	cursor: pointer;
}
.modal .tab button:hover,
.report-page .tab button:hover {
	background-color: var(--bg);
	color: var(--ink);
	border-color: #cfc7ca;
}
.modal .tab button.active,
.report-page .tab button.active {
	background-color: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.modal .tabcontent,
.report-page .tabcontent {
	border: none;
	padding: 0 2px 8px;
}
.modal .tabcontent > h3,
.report-page .tabcontent > h3 { padding-left: 0; }

/* ---------- Chart rows as cards ---------- */
.chart-wrapper {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 14px;
	border-top: 1px solid var(--line);
	padding: 20px 22px;
	margin: 18px 0;
	box-sizing: border-box;
}
/* The text and chart inside each card are floated; clear them so the card
   grows to the full height of its chart */
.chart-wrapper::after {
	content: "";
	display: table;
	clear: both;
}
.chart-wrapper h4.chart-title { font-size: 17px; margin-bottom: 8px; }

/* Below the desktop breakpoint the floats in map.css collapse and the card
   stacks in source order, putting the description above its chart. Readers scan
   the chart first, so lift it to the top of the card. `not all and (min-width:)`
   is the exact complement of map.css's `min-width: 56.25rem` float rule, so the
   two can never both apply. Flex is only used to reorder: every other child
   keeps its source position, and the float-clearing ::after is dropped because
   it would otherwise become a stray flex item. */
@media not all and (min-width: 56.25rem) {
	.chart-wrapper {
		display: flex;
		flex-direction: column;
	}
	.chart-wrapper::after { content: none; }
	.chart-wrapper > .chart-container,
	.chart-wrapper > .chart-container-wide {
		order: -1;
		margin-bottom: 14px;
	}
}

/* Overview / Policy / Methods sub-tabs inside chart cards */
.chart-description-tab-buttons {
	border: none;
	background-color: transparent;
	gap: 6px;
	padding-bottom: 8px;
}
.chart-description-tab-buttons button {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	background-color: var(--bg-soft);
	border: 1px solid var(--line) !important;
	border-radius: 100px;
	padding: 6px 10px;
	flex: 0 1 auto;
}
.chart-description-tab-buttons button:hover { background-color: var(--bg-soft); color: var(--ink); }
.chart-description-tab-buttons button.active {
	background-color: var(--ink);
	border-color: var(--ink) !important;
	color: #fff;
}
.chart-description-tab-content {
	border: none;
	background-color: var(--bg-soft);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-size: 14px;
}

/* ---------- PBCC overview tab ---------- */
/* The heading and the simplified-categories toggle share one row, keeping the
   toggle clear of the chart below (which floats right at its original 400px) */
.overview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 14px 0 6px;
}
.overview-head h3 { margin: 0; padding-left: 0; }
.overview-mode-toggle { font-size: 14px; margin: 0; }

.grades-explain-button {
	display: inline-block;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--brand);
	background: transparent;
	border: 2px solid var(--brand);
	border-radius: 9px;
	padding: 7px 12px;
	cursor: pointer;
}
.grades-explain-button:hover { background: var(--brand); color: #fff; }
.grades-explain-button:hover .fa-question-circle { color: #fff; }

/* Overview tables */
.overviewtable th,
.overviewtable td {
	border: none;
	border-bottom: 1px solid var(--line);
	padding: 6px 8px;
}
.overviewtable th {
	font-size: 12px;
	color: var(--muted);
	text-align: left;
}
.overviewtable td { text-align: left; }
.overviewtable td:last-child { text-align: right; color: var(--muted); }
/* A row that is the sum of the rows above it, not another category alongside
   them. Set apart so nobody adds it to the others: a rule above, bold, and no
   bottom border - the usual way a table marks a total. */
.overviewtable tr.overviewtotal td {
	border-top: 2px solid var(--line);
	border-bottom: none;
	font-weight: 700;
}
.overviewtable tr.overviewtotal td:last-child { color: inherit; }
.responsive-tables > div {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 16px 18px;
}
.responsive-tables h4 { margin-top: 0; }

/* Data warnings */
.warning {
	background-color: #fdf6e7;
	border: 1px solid #f0dfae;
	border-left: 4px solid #cf8f0e;
	border-radius: var(--radius-sm);
	color: #6a5518;
	padding: 8px 12px;
	margin: 6px 0;
	font-size: 14px;
}

/* Demographics */
.community_photos {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 14px;
}
/* Match the pbcc tool's community photo size (pbcc/style.css); the report
   pages don't load that stylesheet, so without this the images render at
   their natural (larger) size. */
.family_photo {
	width: 70px;
	height: 53px;
}

/* ---------- Grade explainer popup ---------- */
.grades-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1500;
	background: rgba(27,27,33,.55);
	backdrop-filter: blur(3px);
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.grades-popup-card {
	position: relative;
	background: var(--bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
	max-width: 760px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 26px 30px;
}
.grades-popup-card h3 { margin: 0 0 12px; padding-left: 0; }
.grades-popup-card img { width: 100%; max-width: 700px; height: auto; }
.grades-popup-card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.grades-popup-close {
	position: absolute;
	top: 12px; right: 12px;
	width: 36px; height: 36px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--muted);
	font-size: 14px;
	cursor: pointer;
}
.grades-popup-close:hover { background: var(--bg-soft); color: var(--ink); }

/* ---------- Map layer popups ---------- */
/* Applies to every layer popup (EPC, land ownership, INSPIRE, food hygiene),
   which capUi.mapPopups builds from a <template> and tags with .layerpopup.
   MapLibre writes its own inline max-width onto the popup container from the
   Popup's maxWidth option, and an inline style beats any rule here, so the
   card's width is set there (see js/ui-common.js) and not in this file. All
   that is needed here is to relax the fixed 300px floor in map.css so the
   card can still fit across a narrow phone. */
.maplibregl-popup.layerpopup {
	min-width: min(300px, 88vw);
}
.maplibregl-popup.layerpopup .maplibregl-popup-content {
	padding: 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
	overflow: hidden;
}

/* Close button: 36px visible, with a transparent halo taking the tap target to
   ~48px, since the MapLibre default is a ~20px hit area that is hard to hit on
   a touchscreen. */
.maplibregl-popup.layerpopup .maplibregl-popup-close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-size: 18px;
	line-height: 1;
	z-index: 2;
}
.maplibregl-popup.layerpopup .maplibregl-popup-close-button::before {
	content: '';
	position: absolute;
	inset: -6px;
}
.maplibregl-popup.layerpopup .maplibregl-popup-close-button:hover,
.maplibregl-popup.layerpopup .maplibregl-popup-close-button:focus-visible {
	background: var(--bg-soft);
	color: var(--ink);
	outline: none;
}

/* The record scrolls inside the card, so a long popup (a full EPC runs to 20+
   rows) never grows past the map and never carries its close button out of
   reach. The line-height overrides the 10px set in map.css, which made wrapped
   table text overlap. */
.layerpopup .mappopup {
	max-height: min(65vh, 480px);
	overflow-y: auto;
	line-height: 1.4;
}
.layerpopup .mappopup h4 {
	position: sticky;
	top: 0;
	margin: 0;
	padding: 14px 52px 12px 18px;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-size: 15px;
	line-height: 1.35;
	z-index: 1;
}
.layerpopup .mappopup h5 {
	margin: 16px 18px 2px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--brand);
}
.layerpopup .mappopup > p {
	margin: 6px 18px;
	font-size: 13px;
	color: var(--muted);
}
.layerpopup .mappopup table {
	width: calc(100% - 36px);
	margin: 6px 18px 16px;
	border-collapse: collapse;
}
.layerpopup .mappopup th,
.layerpopup .mappopup td {
	padding: 6px 8px;
	font-size: 13px;
}
/* Column headings, where a template supplies a <thead>. The food hygiene popup
   has no heading row, so its first row is correctly left as ordinary data.
   Data rows are matched via tbody, which the HTML parser inserts for us around
   any <tr> that is not in the <thead>. */
.layerpopup .mappopup thead th {
	color: var(--muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.layerpopup .mappopup thead th:last-child {
	text-align: right;	/* Line the heading up with the values, which map.css right-aligns */
}
.layerpopup .mappopup tbody tr:nth-child(even) {
	background: var(--bg-soft);
}

/* ---------- Standalone report pages (/reports/) ---------- */
/* Tool sections and expand buttons are given base styles by the inline
   <style> block each report page carries (lsoa.html, la.html and its
   siblings); the .report-page-scoped rules below win on specificity and
   bring them in line with the new design language. */
.report-page .tool-section {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 18px 22px 20px;
}
.report-page .expand-toggle {
	background: none;
	border: 2px solid var(--brand);
	color: var(--brand);
	border-radius: 100px;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.report-page .expand-toggle:hover { background: var(--brand); color: #fff; }
.report-page #area-map {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

/* Keep the popup out of printed reports */
@media print {
	.grades-popup { display: none !important; }
}

/* Band selector above the accessibility scatter (transport report card). The
   two axes are always a matched pair, so one control drives both. */
.chart-band-select {
	font-size: 14px;
	margin: 10px 0 4px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.chart-band-select label { font-weight: 700; }
.chart-band-select select {
	font-family: inherit;
	font-size: 14px;
	padding: 3px 6px;
}