/*
 * GENERATED FILE - do not edit directly.
 * Source: php tools/build-report-ui.php
 * Source order: TOC-menu.css, score-badge.css, overview-cards.css, amenity-card-empty-state.css, poi-cards.css, design-system.css, map-layers-panel.css, commute-planner.css, print-layout.css
 */

/* ===== TOC-menu.css ===== */
:root {
	--toc-accent: #243b60;
	--toc-accent-dark: #4567a5;
	--toc-text: #617FB5;
	--toc-surface: rgba(255, 255, 255, 0.98);
	--toc-border: rgba(36, 50, 74, 0.12);
	--toc-shadow: 0 8px 24px rgba(34, 48, 73, 0.1);
}

.toc-menu {
	position: fixed;
	/* Centre the 44px button within the report's desktop logo/header row. */
	top: 3.25rem;
	left: 1rem;
	z-index: 2000;
	font-family: "Poppins", sans-serif;
}

.toc-menu summary {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	box-sizing: border-box;
	width: 101px;
	min-height: 44px;
	padding: 0 0.45rem;
	border: 1px solid var(--toc-border);
	border-radius: 12px;
	background: var(--toc-surface);
	box-shadow: 0 3px 10px rgba(34, 48, 73, 0.08);
	color: var(--toc-accent-dark);
	cursor: pointer;
	list-style: none;
	user-select: none;
	overflow: hidden;
	transition: width 180ms ease, gap 180ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.toc-menu::details-content {
	opacity: 0;
	transform: translateY(-5px) scale(0.99);
	transform-origin: top left;
	transition:
		opacity 180ms ease,
		transform 180ms ease,
		content-visibility 180ms allow-discrete;
}

.toc-menu[open]::details-content {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@starting-style {
	.toc-menu[open]::details-content {
		opacity: 0;
		transform: translateY(-5px) scale(0.99);
	}
}

.toc-menu summary::-webkit-details-marker { display: none; }
.toc-menu summary:hover { background: #f7f9fd; box-shadow: 0 4px 14px rgba(34, 48, 73, 0.11); }
.toc-menu summary:active { transform: scale(0.98); }
.toc-menu summary:focus-visible { outline: 3px solid rgba(97, 127, 184, 0.3); outline-offset: 3px; }

.toc-menu-icon {
	position: relative;
	display: inline-block;
	width: 19px;
	height: 14px;
}

.toc-menu-icon::before,
.toc-menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 19px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: top 180ms ease, transform 180ms ease;
}

.toc-menu-icon::before { top: 1px; box-shadow: 0 5.5px 0 currentColor, 0 11px 0 currentColor; }
.toc-menu-icon::after { top: 6.5px; opacity: 0; }

.toc-menu-label {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 1;
	transition: opacity 120ms ease;
}

.toc-menu[open] summary { width: 44px; gap: 0; justify-content: center; padding: 0; }
.toc-menu[open] .toc-menu-label { width: 0; opacity: 0; }
.toc-menu[open] .toc-menu-icon::before { top: 6px; box-shadow: none; transform: rotate(45deg); }
.toc-menu[open] .toc-menu-icon::after { top: 6px; opacity: 1; transform: rotate(-45deg); }

.toc-menu .nav-menu {
	display: flex;
	flex-direction: column;
	gap: calc(0.08rem + 3px);
	width: min(320px, calc(100vw - 2rem));
	max-height: calc(100vh - 5.5rem);
	margin-top: 0.65rem;
	padding: 0.65rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--toc-border);
	border-radius: 16px;
	background: var(--toc-surface);
	box-shadow: var(--toc-shadow);
	scrollbar-width: thin;
	scrollbar-color: rgba(97, 127, 184, 0.4) transparent;
	animation: toc-menu-in 180ms ease-out;
}

.toc-menu .nav-menu a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.62rem 0.85rem;
	border-radius: 10px;
	color: var(--toc-text);
	font-size: 0.93rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.toc-item-icon {
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: var(--toc-accent);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 140ms ease, transform 140ms ease;
}

.toc-menu .nav-menu a:hover .toc-item-icon {
	stroke: var(--toc-accent-dark);
	transform: scale(1.06);
}

.toc-menu .nav-menu a:hover { background: #edf2fb; color: var(--toc-accent-dark); transform: translateX(2px); }
.toc-menu .nav-menu a.is-active,
.toc-menu .nav-menu a[aria-current="location"] {
	background: #e7eef9;
	color: var(--toc-accent-dark);
	font-weight: 600;
}

.toc-menu .nav-menu a.is-active .toc-item-icon,
.toc-menu .nav-menu a[aria-current="location"] .toc-item-icon {
	stroke: var(--toc-accent-dark);
}

.toc-menu .nav-menu a:focus-visible { outline: 2px solid var(--toc-accent); outline-offset: -2px; }

@keyframes toc-menu-in {
	from { opacity: 0; transform: translateY(-6px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@media screen and (max-width: 700px) {
	.toc-menu { top: max(0.75rem, env(safe-area-inset-top)); left: max(0.75rem, env(safe-area-inset-left)); }
	.toc-menu summary { min-width: 44px; min-height: 44px; }

	.toc-menu-backdrop {
		position: fixed;
		inset: 0;
		z-index: -1;
		background: rgba(20, 29, 45, 0.42);
		backdrop-filter: blur(2px);
		cursor: default;
		animation: toc-backdrop-in 180ms ease-out;
	}

	.toc-menu .nav-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: min(88vw, 340px);
		height: 100dvh;
		max-height: none;
		margin: 0;
		padding: calc(4.75rem + env(safe-area-inset-top)) 0.75rem calc(1rem + env(safe-area-inset-bottom));
		border: 0;
		border-radius: 0 20px 20px 0;
		box-shadow: 8px 0 24px rgba(20, 29, 45, 0.14);
		animation: toc-drawer-in 220ms ease-out;
	}

	/* Keep the same item spacing and typography as the desktop menu. */
	.toc-menu[open] summary { position: relative; z-index: 1; }

	@keyframes toc-drawer-in {
		from { opacity: 0; transform: translateX(-24px); }
		to { opacity: 1; transform: translateX(0); }
	}

	@keyframes toc-backdrop-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.toc-menu summary,
	.toc-menu .nav-menu,
	.toc-menu .nav-menu a,
	.toc-menu-icon::before,
	.toc-menu-icon::after,
	.toc-menu-label,
	.toc-item-icon { animation: none; transition: none; }
}

/* ===== score-badge.css ===== */
/*
	Modern section score badge.

	Rollback: remove the score-badge.css <link> from app/templates/main.tpl.php.
	The original score rules remain unchanged in style.css, so removing that one
	link restores the previous dark-blue circular badge on every report page.
*/

.score-header:not(.prox) .score {
	--score-gauge-fill: 0%;
	position: relative;
	display: block;
	float: right;
	box-sizing: border-box;
	width: 178px;
	height: 54px;
	margin: 0;
	padding: 0 62px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #617fb5;
}

/* Section label; individual report sections override this text below. */
.score-header:not(.prox) .score::before {
	content: "Section score";
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	padding-right: 10px;
	color: #687386;
	font-size: 10pt;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

/* The former CSS circle is disabled; score-badge.js inserts an SVG donut chart. */
.score-header:not(.prox) .score::after {
	display: none;
}

.score-header .score .score-gauge-chart {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	display: block;
	width: 54px;
	height: 54px;
	overflow: visible;
	pointer-events: none;
	transform: rotate(-90deg);
}

.score-header .score .score-gauge-track,
.score-header .score .score-gauge-value {
	fill: none;
	stroke-width: 7;
}

.score-header .score .score-gauge-track {
	stroke: #dfe6f1;
}

.score-header .score .score-gauge-value {
	stroke: #617fb5;
	stroke-linecap: butt;
}

.score-header .score .numerator,
.score-header .score .denominator {
	position: absolute;
	right: 0;
	z-index: 2;
	float: none;
	box-sizing: border-box;
	width: 54px;
	margin: 0;
	padding: 0 3px;
	color: #4567a5;
	text-align: center;
}

.score-header .score .numerator {
	top: 15px;
	font-size: 10pt;
	font-weight: 900;
	line-height: 18px;
}

.score-header .score .denominator {
	top: 30px;
	font-size: 6pt;
	font-weight: 500;
	line-height: 10px;
}

#toc_amenities .score-header .score::before { content: "Amenity score"; }
#toc_transit .score-header .score::before { content: "Transit score"; }
#toc_schools .score-header .score::before { content: "School score"; }
#toc_health .score-header .score::before { content: "Health score"; }
#toc_crime_area .score-header .score::before { content: "Crime score"; }
#toc_crime_place .score-header .score::before { content: "Crime score"; }
#toc_economy .score-header .score::before { content: "Economy score"; }
#toc_housing .score-header .score::before { content: "Housing score"; }

/* The overview panel already contains the Proximitii Score label, so only its
	/100 badge is converted to the same chart treatment. */
.score-header.prox .score {
	position: relative;
	display: block;
	float: right;
	width: 54px;
	height: 54px;
	margin: -3px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #4567a5;
}

@media screen and (max-width: 520px) {
	.score-header:not(.prox) .score {
		width: 54px;
		padding: 0;
	}

	.score-header:not(.prox) .score::before {
		display: none;
	}
}

@media print {
	.score-header .score .score-gauge-chart {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ===== overview-cards.css ===== */
/*
	Compact Area Overview cards.

	Rollback: remove the overview-cards.css <link> from app/templates/main.tpl.php.
	The original .score-container and .scard rules remain unchanged in style.css.
*/

#toc_overview .score-container {
	display: grid;
	grid-template-columns: repeat(var(--overview-score-columns, 4), minmax(0, 1fr));
	/* Clear style.css's legacy three-row template. Otherwise reports with four
	 * or fewer enabled categories retain two empty 166px rows below the cards. */
	grid-template-rows: none;
	grid-auto-rows: minmax(166px, auto);
	gap: 14px;
	width: 100%;
}

#toc_overview .score-header.prox {
	background-color: #f0f3f8;
}

#toc_overview .scard {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-height: 166px;
	padding: 18px 14px;
	border: none;
	border-radius: 14px;
	background: #f0f3f8;
	box-shadow: 0 3px 10px rgba(40, 58, 88, 0.04);
	color: #354258;
	text-align: center;
}

/* Score tiles are native in-page links so mouse, keyboard and assistive
	technology users all receive the same navigation behaviour. */
#toc_overview a.scard {
	color: #354258;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
	#toc_overview a.scard:hover {
		background-color: #e8eef8;
		box-shadow: none;
	}
}

#toc_overview a.scard:focus-visible {
	background-color: #e8eef8;
	outline: 3px solid rgba(97, 127, 181, 0.3);
	outline-offset: 3px;
	box-shadow: none;
}

#toc_overview a.scard:active {
	background-color: #e3ebf8;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	#toc_overview a.scard {
		transition: none;
	}
}

#toc_overview .scard .score-summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

#toc_overview .scard .score_ico {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	margin: 0;
	object-fit: contain;
}

#toc_overview .scard span.score {
	display: block;
	width: auto;
	margin: 0;
	color: #617fb5;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

#toc_overview .scard span.score sup {
	margin-left: 2px;
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1;
	vertical-align: baseline;
}

/* Prominent ring gauges are added at runtime by score-badge.js. The original
	inline score markup is retained and returns when its documented flag is off. */
#toc_overview .scard span.score.overview-score-gauge {
	position: relative;
	display: flex;
	flex: 0 0 80px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 80px;
	height: 80px;
	overflow: visible;
}

#toc_overview .overview-score-gauge .score-gauge-chart {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 80px;
	height: 80px;
	overflow: visible;
	pointer-events: none;
	transform: rotate(-90deg);
}

#toc_overview .overview-score-gauge .score-gauge-track,
#toc_overview .overview-score-gauge .score-gauge-value {
	fill: none;
	stroke-width: 5;
}

#toc_overview .overview-score-gauge .score-gauge-track {
	stroke: #d9e2ef;
}

#toc_overview .overview-score-gauge .score-gauge-value {
	stroke: #617fb5;
	stroke-linecap: butt;
}

#toc_overview .overview-score-numerator,
#toc_overview .overview-score-denominator {
	position: absolute;
	z-index: 2;
	left: 0;
	box-sizing: border-box;
	width: 80px;
	margin: 0;
	padding: 0 7px;
	color: #4567a5;
	text-align: center;
}

#toc_overview .overview-score-numerator {
	top: 22px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 29px;
}

#toc_overview .overview-score-denominator {
	top: 48px;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 13px;
}

#toc_overview .overview-score-gauge .overview-score-numerator:only-of-type {
	top: 29px;
	font-size: 1.05rem;
	line-height: 22px;
}

#toc_overview .scard span.label {
	display: block;
	width: 100%;
	margin: 0;
	color: #56637a;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
}

@media screen and (max-width: 768px) {
	#toc_overview .score-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}

	#toc_overview .score-container[data-score-card-count="1"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (max-width: 420px) {
	#toc_overview .score-container {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
}

@media print {
	#toc_overview .score-container {
		grid-template-columns: repeat(var(--overview-score-columns, 4), minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: minmax(0, 1fr);
	}

	#toc_overview .scard {
		box-shadow: none;
	}

	#toc_overview a.scard {
		color: #354258;
		text-decoration: none;
	}
}

/* ===== amenity-card-empty-state.css ===== */
/*
	Equal-height amenity cards and visible empty states.

	Rollback:
	1. Remove this stylesheet's <link> from app/templates/main.tpl.php.
	2. Restore the former blank-card markup documented in
	   app/views/category_view.php.
*/

.grid-card-container {
	box-sizing: border-box;
	height: 58px;
	min-height: 58px;
}

.grid-card-container--empty {
	display: grid;
	grid-template-columns: 1fr;
}

.grid-card-container--empty .empty-amenity-message {
	display: flex;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 48px;
	padding: 8px 12px;
	color: #657187;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
}

@media print {
	.grid-card-container,
	.grid-card-container--empty .empty-amenity-message {
		height: 58px;
		min-height: 58px;
	}
}

/* ===== poi-cards.css ===== */
/*
	Modern flat Points of Interest cards.

	Rollback:
	1. Set $use_flat_poi_cards to false in app/templates/poi_page.tpl.php.
	2. Optionally remove this stylesheet's <link> from app/templates/main.tpl.php.
	The original poi-info2.svg renderer remains available in the template.
*/

#toc_poi .poi-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
}

#toc_poi .poi-flat-card {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	box-sizing: border-box;
	min-width: 0;
	min-height: 138px;
	padding: 20px 22px;
	border: none;
	border-radius: 14px;
	background: #f0f3f8;
	color: #354258;
}

#toc_poi .poi-flat-card.is-map-linked {
	cursor: pointer;
	outline: none;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

#toc_poi .poi-flat-card.is-map-linked:hover,
#toc_poi .poi-flat-card.is-map-linked:focus-visible,
#toc_poi .poi-flat-card.is-map-linked.is-highlighted {
	background: #e8eef8;
	box-shadow: none;
}

#toc_poi .poi-flat-card.is-map-linked.is-selected {
	background: #e3ebf8;
	box-shadow: none;
}

#toc_poi .poi-flat-card.is-map-linked.is-highlighted .poi-flat-card__icon {
	border-color: #aebfdd;
	background: #dce7f7;
}

#toc_poi .poi-marker--highlighted {
	outline: none;
	box-shadow: none;
	filter: none;
}

#toc_poi .poi-flat-card__icon {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 58px;
	height: 58px;
	border: 1px solid #d5e0f0;
	border-radius: 12px;
	background: #e7eef9;
}

#toc_poi .poi-flat-card__icon-symbol {
	display: block;
	width: auto;
	height: auto;
	color: #617fb5;
	font-size: 1.8rem;
	line-height: 1;
}

#toc_poi .poi-flat-card__content {
	min-width: 0;
}

#toc_poi .poi-flat-card__name,
#toc_poi .poi-flat-card__category,
#toc_poi .poi-flat-card__location,
#toc_poi .poi-flat-card__type {
	margin: 0;
}

#toc_poi .poi-flat-card__name {
	margin-bottom: 5px;
	color: #354258;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

#toc_poi .poi-flat-card__category {
	margin-bottom: 7px;
	color: #657187;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.35;
}

#toc_poi .poi-flat-card__location,
#toc_poi .poi-flat-card__type {
	color: #6b778c;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.4;
}

@media screen and (max-width: 760px) {
	#toc_poi .poi-card-grid {
		grid-template-columns: 1fr;
	}

	#toc_poi .poi-flat-card {
		min-height: 124px;
		padding: 18px;
	}
}

@media screen and (max-width: 420px) {
	#toc_poi .poi-flat-card {
		grid-template-columns: 50px minmax(0, 1fr);
		gap: 14px;
		padding: 16px;
	}

	#toc_poi .poi-flat-card__icon {
		width: 50px;
		height: 50px;
	}

	#toc_poi .poi-flat-card__icon-symbol {
		font-size: 1.6rem;
	}
}

@media print {
	#toc_poi .poi-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#toc_poi .poi-flat-card {
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	#toc_poi .poi-flat-card.is-map-linked {
		cursor: default;
	}
}

@media (prefers-reduced-motion: reduce) {
	#toc_poi .poi-flat-card.is-map-linked {
		transition: none;
	}
}

/* ===== design-system.css ===== */
/*
 * Local Insights shared design system — 2026-08-23
 *
 * This stylesheet is intentionally loaded after the report's component CSS.
 * It consolidates visual tokens and brings legacy data components into the
 * same flat visual language as the overview, POI and community cards.
 *
 * Rollback: remove the design-system.css link from app/templates/main.tpl.php.
 * No original component rules were deleted or replaced.
 */

:root {
	--li-font-family: "Poppins", sans-serif;
	--li-color-text: #354258;
	--li-color-heading: #4F596A;
	--li-color-muted: #59667a;
	--li-color-accent: #617fb5;
	--li-color-accent-strong: #243b60;
	--li-color-surface: #f0f3f8;
	--li-color-surface-accent: #eaf1ff;
	--li-color-border: #d5e0f0;
	--li-radius-control: 10px;
	--li-radius-card: 14px;
	--li-shadow-card: 0 3px 10px rgba(40, 58, 88, 0.04);
	--li-space-xs: 6px;
	--li-space-sm: 10px;
	--li-space-md: 16px;
	--li-space-lg: 24px;
	--li-space-section: 20px;
}

body {
	font-family: var(--li-font-family);
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--li-color-text);
}

.sheet {
	color: var(--li-color-text);
}

a {
	color: var(--li-color-accent-strong);
}

/* Shared type hierarchy. Heading colour is intentionally enforced here so
 * legacy component selectors cannot introduce inconsistent heading colours. */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--li-color-heading) !important;
}

h2.category {
	margin: 0;
	color: var(--li-color-heading);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

h2.sub-heading {
	margin: 0 0 var(--li-space-md);
	color: var(--li-color-heading);
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

h3.amen-cat-title,
.pretty-list-item-info h3 {
	color: var(--li-color-heading);
	font-weight: 600;
	line-height: 1.35;
}

.section {
	padding: var(--li-space-section) 0;
}

/* Wide report infographics remain fluid on desktop. On phones, their labels
 * must not be compressed with the artwork until they become unreadable. The
 * mobile rules below preserve a legible canvas width and allow touch users to
 * pan across only the graphic. Rollback: remove these wrappers from the five
 * housing/transit/health templates and delete this rule set. */
.report-infographic {
	width: 100%;
}

.report-infographic > svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Reversible housing-type redesign — 2026-09-02.
 * The original housing SVG remains available behind the
 * $use_modern_housing_type_design flag in both housing templates. The largest
 * local category is promoted into the dominant card; the other four retain a
 * balanced 2 x 2 layout. All rules are scoped to the replacement markup so
 * switching the flag off restores the original presentation. */
.report-infographic.report-infographic--housing {
	overflow: visible;
	padding-bottom: 0;
}

.housing-type-summary {
	display: grid;
	grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
	gap: var(--li-space-lg);
	width: 100%;
}

.housing-type-summary__secondary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--li-space-lg);
	min-width: 0;
}

.housing-type-card {
	min-width: 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

.housing-type-card--dominant {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	align-items: center;
	gap: 20px 26px;
	min-height: 288px;
	padding: 26px 32px;
}

.housing-type-card--secondary {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto 8px;
	grid-template-areas:
		"label label"
		"icon value"
		"icon meter";
	align-items: center;
	align-content: center;
	gap: 9px 16px;
	min-height: 132px;
	padding: 18px 20px;
}

.housing-type-card__icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #e1eaf7;
	color: var(--li-color-accent);
	font-size: 1.45rem;
}

.housing-type-card__icon-pair {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0.06em;
	font-size: 0.72em;
}

.housing-type-card--dominant .housing-type-card__icon {
	width: 118px;
	height: 118px;
	font-size: 3.1rem;
}

.housing-type-card__content {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
}

.housing-type-card--secondary .housing-type-card__content {
	display: contents;
}

.housing-type-card__eyebrow {
	margin-bottom: 7px;
	color: var(--li-color-muted);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.housing-type-card__label {
	color: var(--li-color-heading);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.housing-type-card--dominant .housing-type-card__label {
	font-size: 1.24rem;
}

.housing-type-card--secondary .housing-type-card__label {
	grid-area: label;
	white-space: nowrap;
}

.housing-type-card__value {
	margin-top: 4px;
	color: var(--li-color-accent);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.housing-type-card--dominant .housing-type-card__value {
	margin-top: 6px;
	font-size: 3.9rem;
}

.housing-type-card--secondary .housing-type-card__icon {
	grid-area: icon;
}

.housing-type-card--secondary .housing-type-card__value {
	grid-area: value;
	align-self: end;
	margin-top: 0;
}

.housing-type-card__value small {
	margin-left: 1px;
	font-size: 0.56em;
	font-weight: 500;
}

.housing-type-card__meter {
	display: block;
	grid-column: 2;
	width: 100%;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #d8e2f1;
}

.housing-type-card--dominant .housing-type-card__meter {
	grid-column: 1 / -1;
	height: 11px;
}

.housing-type-card--secondary .housing-type-card__meter {
	grid-area: meter;
	align-self: start;
}

.housing-type-card__meter-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--li-color-accent);
}

@media screen and (max-width: 1024px) {
	.housing-type-summary {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--li-space-md);
	}

	.housing-type-summary__secondary {
		gap: var(--li-space-md);
	}

	.housing-type-card--dominant {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 18px 22px;
		min-height: 200px;
		padding: 24px;
	}

	.housing-type-card--dominant .housing-type-card__icon {
		width: 92px;
		height: 92px;
		font-size: 2.45rem;
	}

	.housing-type-card--dominant .housing-type-card__value {
		font-size: 3.2rem;
	}
}

@media screen and (max-width: 480px) {
	.housing-type-summary__secondary {
		grid-template-columns: minmax(0, 1fr);
	}

	.housing-type-card--dominant {
		grid-template-columns: 74px minmax(0, 1fr);
		gap: 16px 18px;
		min-height: 180px;
		padding: 20px;
	}

	.housing-type-card--dominant .housing-type-card__icon {
		width: 74px;
		height: 74px;
		font-size: 2rem;
	}

	.housing-type-card--dominant .housing-type-card__label {
		font-size: 1.06rem;
	}

	.housing-type-card--dominant .housing-type-card__value {
		font-size: 2.7rem;
	}

	.housing-type-card--secondary {
		min-height: 112px;
		padding: 17px 18px;
	}
}

@media print {
	.housing-type-summary {
		grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
		gap: 4mm;
	}

	.housing-type-summary__secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4mm;
	}

	.housing-type-card {
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.housing-type-card--dominant {
		grid-template-columns: 18mm minmax(0, 1fr);
		gap: 3mm 4mm;
		min-height: 48mm;
		padding: 4mm;
	}

	.housing-type-card--secondary {
		grid-template-columns: 10mm minmax(0, 1fr);
		gap: 2mm 3mm;
		min-height: 22mm;
		padding: 3mm;
	}

	.housing-type-card__icon {
		width: 10mm;
		height: 10mm;
		font-size: 11pt;
	}

	.housing-type-card--dominant .housing-type-card__icon {
		width: 18mm;
		height: 18mm;
		font-size: 21pt;
	}

	.housing-type-card__eyebrow {
		margin-bottom: 1mm;
		font-size: 6pt;
	}

	.housing-type-card__label {
		font-size: 7pt;
	}

	.housing-type-card--dominant .housing-type-card__label {
		font-size: 9pt;
	}

	.housing-type-card__value {
		margin-top: 0.5mm;
		font-size: 15pt;
	}

	.housing-type-card--dominant .housing-type-card__value {
		margin-top: 1mm;
		font-size: 29pt;
	}

	.housing-type-card__meter {
		height: 1.5mm;
	}

	.housing-type-card--dominant .housing-type-card__meter {
		height: 2mm;
	}
}

/* Reversible commute summary redesign — 2026-09-02.
 * The original transport SVG remains available behind the
 * $use_modern_commute_design flag in both transit templates. These styles are
 * intentionally scoped to the replacement markup so switching the flag off
 * restores the previous presentation without a CSS rollback. */
.report-infographic.report-infographic--transport {
	overflow: visible;
	padding-bottom: 0;
}

.commute-mode-summary {
	display: grid;
	gap: var(--li-space-lg);
	width: 100%;
}

.commute-mode-summary__primary,
.commute-mode-summary__secondary {
	display: grid;
	gap: var(--li-space-lg);
}

.commute-mode-summary__primary {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commute-mode-summary__secondary {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commute-mode-card {
	min-width: 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

.commute-mode-card--primary {
	display: grid;
	grid-template-columns: 64px minmax(118px, auto) minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	min-height: 158px;
	padding: 24px;
}

.commute-mode-card--secondary {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	min-height: 108px;
	padding: 18px;
}

.commute-mode-card__icon {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #e1eaf7;
	color: var(--li-color-accent);
	font-size: 1.35rem;
}

.commute-mode-card--primary .commute-mode-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	font-size: 1.8rem;
}

.commute-mode-card__content {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
}

.commute-mode-card__label {
	color: var(--li-color-heading);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.commute-mode-card--primary .commute-mode-card__label {
	font-size: 1.08rem;
}

.commute-mode-card__value {
	color: var(--li-color-accent);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.commute-mode-card--primary .commute-mode-card__value {
	margin-top: 4px;
	font-size: 2.9rem;
}

.commute-mode-card__value small {
	margin-left: 1px;
	font-size: 0.56em;
	font-weight: 500;
}

.commute-mode-card__note {
	min-width: 0;
	color: var(--li-color-muted);
	font-size: 0.9rem;
	line-height: 1.45;
}

@media screen and (max-width: 768px) {
	.commute-mode-summary,
	.commute-mode-summary__primary,
	.commute-mode-summary__secondary {
		gap: var(--li-space-md);
	}

	.commute-mode-summary__primary {
		grid-template-columns: minmax(0, 1fr);
	}

	.commute-mode-summary__secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.commute-mode-card--primary {
		grid-template-columns: 56px minmax(0, 1fr) minmax(110px, 0.75fr);
		min-height: 132px;
		padding: 20px;
	}

	.commute-mode-card--primary .commute-mode-card__icon {
		width: 56px;
		height: 56px;
		font-size: 1.55rem;
	}

	.commute-mode-card--primary .commute-mode-card__value {
		font-size: 2.5rem;
	}
}

@media screen and (max-width: 480px) {
	.commute-mode-summary__secondary {
		grid-template-columns: minmax(0, 1fr);
	}

	.commute-mode-card--primary {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 12px 16px;
		min-height: 0;
		padding: 18px;
	}

	.commute-mode-card--primary .commute-mode-card__icon {
		width: 52px;
		height: 52px;
		font-size: 1.45rem;
	}

	.commute-mode-card--primary .commute-mode-card__value {
		font-size: 2.2rem;
	}

	.commute-mode-card__note {
		grid-column: 2;
	}

	.commute-mode-card--secondary {
		min-height: 92px;
		padding: 16px 18px;
	}
}

@media print {
	.commute-mode-summary,
	.commute-mode-summary__primary,
	.commute-mode-summary__secondary {
		gap: 4mm;
	}

	.commute-mode-card {
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.commute-mode-card--primary {
		grid-template-columns: 12mm minmax(27mm, auto) minmax(0, 1fr);
		gap: 3mm;
		min-height: 25mm;
		padding: 3.5mm;
	}

	.commute-mode-card--secondary {
		grid-template-columns: 9mm minmax(0, 1fr);
		gap: 2mm;
		min-height: 18mm;
		padding: 3mm;
	}

	.commute-mode-card__icon,
	.commute-mode-card--primary .commute-mode-card__icon {
		width: 9mm;
		height: 9mm;
		border-radius: 3mm;
		font-size: 11pt;
	}

	.commute-mode-card--primary .commute-mode-card__icon {
		width: 12mm;
		height: 12mm;
		font-size: 14pt;
	}

	.commute-mode-card__label,
	.commute-mode-card--primary .commute-mode-card__label {
		font-size: 8pt;
	}

	.commute-mode-card__value {
		font-size: 15pt;
	}

	.commute-mode-card--primary .commute-mode-card__value {
		margin-top: 0;
		font-size: 23pt;
	}

	.commute-mode-card__note {
		font-size: 7pt;
	}
}

/* Temporary Education Level Achieved segmented-card experiment — 2026-08-25.
 * The original SVG renderer remains in both school templates behind the
 * $use_modern_education_design toggle. Set that toggle to false to restore it;
 * these unused styles can then be removed without affecting the old design. */
.education-level-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}

.education-level-card {
	display: grid;
	justify-items: stretch;
	min-width: 0;
	min-height: 188px;
	padding: 18px;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
}

.education-level-card__icon {
	display: inline-grid;
	place-items: center;
	justify-self: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #dce7f8;
	color: var(--li-color-accent);
	font-size: 1.4rem;
}

.education-level-card h3 {
	align-self: end;
	min-width: 0;
	min-height: 2.7em;
	margin: 18px 0 7px;
	color: var(--li-color-heading);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
}

.education-level-card__value {
	display: block;
	margin-bottom: 15px;
	color: var(--li-color-accent);
	font-size: 1.65rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

.education-level-meter {
	--education-level-step: 10%;
	height: 11px;
	overflow: hidden;
	border-radius: 3px;
	background:
		repeating-linear-gradient(90deg, transparent 0 calc(var(--education-level-step) - 3px), var(--li-color-surface) calc(var(--education-level-step) - 3px) var(--education-level-step)),
		linear-gradient(90deg, var(--li-color-accent) 0 var(--education-level-value), #dbe4f1 var(--education-level-value) 100%);
}

/* Leave room for the fixed navigation control when a menu link scrolls to a
 * report section. */
#li_report > section.sheet[id] {
	scroll-margin-top: 82px;
}

/* The MapLibre attribution is drawn along the bottom edge inside each
 * ProxMap. Keep the Leaflet zoom control above that copyright/link strip
 * while preserving its bottom-right placement. */
.leaflet-bottom.leaflet-right .leaflet-control-zoom {
	margin-bottom: 25px;
}

/* Shared optional radius guide for all five report Leaflet maps. It stays
 * deliberately compact so it remains secondary to the map and layer menu. */
.li-map-radius-control {
	box-sizing: border-box;
	width: 240px;
	margin-right: 10px;
	margin-bottom: 7px;
	padding: 6px 8px 5px;
	border: 1px solid rgba(97, 127, 181, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 6px rgba(40, 58, 88, 0.12);
	backdrop-filter: blur(3px);
	color: var(--li-color-text);
	font-family: var(--li-font-family);
}

.li-map-radius-control__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
}

.li-map-radius-control__value {
	color: var(--li-color-muted);
	font: inherit;
	font-size: 11px;
}

/* Leaflet's .leaflet-bottom .leaflet-control rule otherwise wins the margin
 * cascade. The corner-specific selector also clears the independent
 * MapLibre/OpenMapTiles attribution strip beneath Leaflet's controls. */
.leaflet-bottom.leaflet-right .li-map-radius-control {
	margin-bottom: 30px;
}

.li-map-radius-control__range {
	position: relative;
	height: 14px;
}

.li-map-radius-control input[type="range"].li-map-radius-control__slider {
	--li-map-radius-progress: 0%;
	width: 100%;
	height: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	z-index: 2;
}

.li-map-radius-control input[type="range"].li-map-radius-control__slider::-webkit-slider-runnable-track {
	height: 2px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		#7a8799 0 var(--li-map-radius-progress),
		#d8dee8 var(--li-map-radius-progress) 100%
	);
}

.li-map-radius-control input[type="range"].li-map-radius-control__slider::-webkit-slider-thumb {
	width: 12px;
	height: 12px;
	margin-top: -5px;
	border: 2px solid rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	background: #7a8799;
	box-shadow: 0 1px 3px rgba(40, 58, 88, 0.18);
	appearance: none;
	-webkit-appearance: none;
}

.li-map-radius-control input[type="range"].li-map-radius-control__slider::-moz-range-track {
	height: 2px;
	border: 0;
	border-radius: 999px;
	background: #d8dee8;
}

.li-map-radius-control input[type="range"].li-map-radius-control__slider::-moz-range-progress {
	height: 2px;
	border-radius: 999px;
	background: #7a8799;
}

.li-map-radius-control input[type="range"].li-map-radius-control__slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	background: #7a8799;
	box-shadow: 0 1px 3px rgba(40, 58, 88, 0.18);
}

.li-map-radius-control input[type="range"].li-map-radius-control__slider:focus-visible {
	outline: 2px solid rgba(97, 127, 181, 0.55);
	outline-offset: 1px;
}

.li-map-radius-control__ticks {
	position: absolute;
	top: 5px;
	right: 5px;
	left: 5px;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.li-map-radius-control__ticks i {
	display: block;
	width: 1px;
	height: 4px;
	background: rgba(122, 135, 153, 0.3);
}

.li-map-radius-control__labels {
	position: relative;
	height: 11px;
	margin-right: 5px;
	margin-top: -1px;
	margin-left: 5px;
	color: var(--li-color-muted);
	font-size: 9px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
}

.li-map-radius-control__labels span {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	text-align: center;
}

.li-map-radius-control__labels span:first-child {
	left: 0;
	transform: none;
	text-align: left;
}

.li-map-radius-control__labels span:nth-child(2) {
	left: 25%;
}

.li-map-radius-control__labels span:nth-child(3) {
	left: 50%;
}

.li-map-radius-control__labels span:nth-child(4) {
	left: 75%;
}

.li-map-radius-control__labels span:last-child {
	right: 0;
	transform: none;
	text-align: right;
}

@media screen and (max-width: 768px) {
	.li-map-radius-control {
		width: 225px;
		padding-right: 7px;
		padding-left: 7px;
	}
}

@media print {
	.li-map-radius-control {
		display: none !important;
	}
}

/* Leaflet popup refinement: the original content box and typography are
 * increased by exactly five percent. Long amenity names wrap naturally
 * instead of being truncated with an ellipsis. */
.leaflet-popup-content {
	margin: 13.65px 25.2px 13.65px 21px;
	font-size: 1.05em;
}

.leaflet-popup-content .map-popup {
	width: 210px;
}

.leaflet-popup-content .map-popup .pop-name {
	font-size: 10.5pt;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
}

.leaflet-popup-content .map-popup .pop-more,
.leaflet-popup-content .map-popup .pop-tag {
	font-size: 9.45pt;
}

.leaflet-popup-content .map-popup .pop-divider {
	margin: 9.45px 0;
}

.leaflet-popup-content .map-popup .pop-footer {
	font-size: 8.4pt;
}

/* Section headers share one alignment model; score-badge.css still controls
 * the gauge itself and overview-cards.css still controls the overview grid. */
.score-header:not(.prox) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--li-space-md);
	height: auto;
	min-height: 54px;
	margin-bottom: var(--li-space-sm);
}

.score-header:not(.prox) .category {
	float: none;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.3;
}

.score-header:not(.prox) .score {
	flex: 0 0 auto;
}

.score-header.prox {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	align-content: center;
	width: 100%;
	height: auto;
	min-height: clamp(194px, calc(34vw - 80px), 260px);
	gap: 18px;
	padding: 20px 24px 26px;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

#toc_overview .prox-score-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: auto;
}

#toc_overview .prox-score-brand__logo {
	display: block;
	float: none;
	width: clamp(150px, 26.25vw, 297px);
	max-width: calc(100vw - 150px);
	height: auto;
	margin: 0;
	padding: 0;
}

#toc_overview .prox-score-brand__label {
	display: block;
	float: none;
	margin: 0 0 0 2px;
	padding: 0;
	color: var(--li-color-accent);
	font-family: "Arimo", Arial, sans-serif;
	font-size: clamp(1.70625rem, calc(3.75vw + 1.5px), 3.09375rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	/* The SVG canvas includes the map-pin tail below its visible wordmark.
	 * Match the adjacent label to the path-based wordmark's visual baseline. */
	transform: translateY(clamp(-7.5px, -0.6vw, -3px));
}

/* Prominent, centered Proximitii Score treatment (2026-08-25).
 * This intentionally overrides the compact 54px section-score badge without
 * changing the eight /10 gauges below it. Rollback: remove this block and
 * restore the horizontal declarations above for .score-header.prox. */
#toc_overview .score-header.prox .score {
	position: relative;
	display: block;
	float: none;
	width: clamp(88.5px, 11.25vw, 112.5px);
	height: clamp(88.5px, 11.25vw, 112.5px);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#toc_overview .score-header.prox .score .score-gauge-chart {
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

#toc_overview .score-header.prox .score .score-gauge-track,
#toc_overview .score-header.prox .score .score-gauge-value {
	stroke-width: 6;
}

#toc_overview .score-header.prox .score .numerator,
#toc_overview .score-header.prox .score .denominator {
	right: 0;
	width: 100%;
	padding: 0 8px;
	line-height: 1;
}

#toc_overview .score-header.prox .score .numerator {
	top: 50%;
	font-size: clamp(1.2375rem, 2.325vw, 1.5rem);
	font-weight: 700;
	transform: translateY(-78%);
}

#toc_overview .score-header.prox .score .denominator {
	top: 50%;
	font-size: clamp(0.54rem, 0.9375vw, 0.66rem);
	font-weight: 600;
	transform: translateY(55%);
}

/* Centered vertical Proximitii Score lockup. The print stylesheet retains its
 * compact horizontal treatment so the overview still fits on one page. */
@media screen and (min-width: 421px) {
	#toc_overview .score-header.prox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		height: auto;
		min-height: 230px;
		padding: 26px 24px 28px;
	}

	#toc_overview .prox-score-brand {
		flex: 0 1 auto;
		justify-content: center;
	}

	#toc_overview .prox-score-brand__logo {
		width: clamp(135px, 22.5vw, 255px);
	}

	#toc_overview .prox-score-brand__label {
		font-size: clamp(1.467rem, calc(3.225vw + 1.29px), 2.66rem);
		transform: translateY(clamp(-6.5px, -0.52vw, -2.5px));
	}

	#toc_overview .score-header.prox .score {
		flex: 0 0 clamp(100px, 10vw, 116px);
		width: clamp(100px, 10vw, 116px);
		height: clamp(100px, 10vw, 116px);
		margin-left: 0;
		border-radius: 0;
		background: transparent;
	}

	#toc_overview .score-header.prox .score .score-gauge-chart {
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	#toc_overview .score-header.prox .score .numerator,
	#toc_overview .score-header.prox .score .denominator {
		right: 0;
		width: 100%;
	}

	#toc_overview .score-header.prox .score .numerator {
		font-size: clamp(1.2rem, 2vw, 1.42rem);
	}

	#toc_overview .score-header.prox .score .denominator {
		font-size: clamp(0.56rem, 0.8vw, 0.66rem);
	}
}

/* Give the overall Proximitii Score more emphasis on large screens only.
 * Mobile, tablet, and print retain their existing gauge dimensions. */
@media screen and (min-width: 1025px) {
	#toc_overview .score-header.prox .score {
		flex-basis: clamp(125px, 12.5vw, 145px);
		width: clamp(125px, 12.5vw, 145px);
		height: clamp(125px, 12.5vw, 145px);
	}

	#toc_overview .score-header.prox .score .score-gauge-chart {
		display: block;
		visibility: visible;
		opacity: 1;
	}

	/* Scale the overall value with the enlarged desktop gauge. The eight
	 * category-score gauges intentionally retain their existing typography. */
	#toc_overview .score-header.prox .score .numerator {
		font-size: clamp(2.31rem, 3.7vw, 2.68rem);
	}

	#toc_overview .score-header.prox .score .denominator {
		font-size: clamp(1.09rem, 1.75vw, 1.27rem);
	}
}

/* Compact statistic cards */
.data-icon {
	min-height: 112px;
	padding: 18px;
	border: 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

.data-icon.fixed-height {
	height: 130px;
}

.data-icon .dt-icon {
	width: 26px;
	height: 26px;
	margin-right: 3px;
	color: var(--li-color-accent);
	fill: var(--li-color-accent);
	stroke: var(--li-color-accent);
}

/* Reversible Font Awesome statistic icons.
 * main.tpl.php adds .use-filled-stat-icons when the feature flag is enabled.
 * The original SVG elements remain in every template and reappear immediately
 * when that class is removed. */
.use-filled-stat-icons .data-icon > .dt-icon {
	display: none;
}

.use-filled-stat-icons .data-icon:has(> .dt-icon)::before {
	display: inline-flex;
	float: left;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-right: 3px;
	color: var(--li-color-accent);
	font-family: "Font Awesome 6 Free";
	font-size: 1.3rem;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.use-filled-stat-icons .data-icon:has(use[href$="#dt-pop"])::before { content: "\f0c0"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-density"])::before { content: "\f64f"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-med-age"])::before { content: "\f4fd"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-poverty"])::before { content: "\f81d"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-lang"])::before { content: "\f1ab"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-hh-size"])::before { content: "\e1b0"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-crime-vc"])::before { content: "\f505"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-crime-pc"])::before { content: "\f023"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-crime-tc"])::before { content: "\f24e"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-percap"])::before { content: "\f51e"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-hh-inc"])::before { content: "\f555"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-unemp"])::before { content: "\f503"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-med-price"])::before { content: "\f015"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-med-rent"])::before { content: "\f1ad"; }
.use-filled-stat-icons .data-icon:has(use[href$="#dt-per-hh"])::before { content: "\f500"; }

.data-icon strong {
	padding-left: var(--li-space-xs);
	color: var(--li-color-heading);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
}

.data-icon span.data {
	margin: 9px 0 4px;
	color: var(--li-color-accent);
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.15;
}

.data-icon span.compare {
	color: var(--li-color-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

/* Crime summary cards use a true grid instead of nested framework gutters.
 * This keeps both outer edges aligned with the full-width charts below. */
#toc_crime_area .crime-summary-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	width: 100%;
	margin: 0;
}

#toc_crime_area .crime-summary-grid > .crime-summary-card {
	float: none;
	grid-column: auto !important;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#toc_crime_area .crime-summary-card .data-icon {
	display: flex;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	height: 130px;
	padding: 16px 18px;
}

#toc_crime_area .crime-summary-card .data-icon strong.centered {
	float: none;
	flex: 0 0 100%;
	margin: 0 0 8px;
	padding: 0;
	text-align: center;
}

#toc_crime_area .crime-summary-card .data-icon > span.data {
	flex: 0 0 100%;
	margin: 0 0 4px;
	text-align: center;
}

#toc_crime_area .crime-summary-card .data-icon .panel {
	display: flex;
	float: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 50%;
	flex-direction: column;
	box-sizing: border-box;
	height: 62px;
}

#toc_crime_area .crime-summary-card .data-icon .panel .data,
#toc_crime_area .crime-summary-card .data-icon .panel .compare {
	float: none;
	margin: 0;
	text-align: center;
}

#toc_crime_area .crime-summary-card .data-icon .step {
	box-sizing: border-box;
}

/* Crime Safety Index: keep the existing five colors, labels and selected
 * border while giving each level its own softly rounded segment. */
#toc_crime_area .crime-safety-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	width: 100%;
}

#toc_crime_area .crime-safety-steps .step {
	float: none;
	box-sizing: border-box;
	width: auto;
	height: 30px;
	border-radius: 7px;
	overflow: hidden;
}

/* Community Snapshot rows use explicit grids so their first and last card
 * edges line up with the full-width Age Breakdown chart. */
#toc_community .section .row.community-stat-grid,
#toc_community .section .row.community-comparison-grid {
	display: grid;
	gap: 22px;
	width: 100%;
	margin: 0;
}

#toc_community .community-stat-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

#toc_community .community-comparison-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

#toc_community .community-stat-grid > .community-stat-card,
#toc_community .community-comparison-grid > .community-comparison-column {
	float: none;
	grid-column: auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#toc_community .community-stat-card .data-icon {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	column-gap: 8px;
	align-content: center;
	box-sizing: border-box;
	height: 122px;
}

#toc_community .community-stat-card .data-icon strong {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	min-width: 0;
	padding: 0;
}

#toc_community .community-stat-card .data-icon .dt-icon {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.use-filled-stat-icons #toc_community .community-stat-card .data-icon::before {
	grid-column: 1;
	grid-row: 1;
	float: none;
	margin: 0;
}

#toc_community .community-stat-card .data-icon span.data,
#toc_community .community-stat-card .data-icon span.compare {
	float: none;
	grid-column: 1 / -1;
	width: auto;
}

#toc_community .community-stat-card .data-icon span.data {
	grid-row: 2;
}

#toc_community .community-stat-card .data-icon span.compare {
	grid-row: 3;
}

#toc_community .community-comparison-card {
	grid-template-rows: auto minmax(0, 1fr) auto;
	height: 200px;
}

#toc_community .community-comparison-card .item-4 {
	align-self: end;
	min-height: 22px;
}

/* Keep the Have Kids gauge prominent and separated from both labels at every
 * viewport width, including the two-column tablet/desktop layout. */
#toc_community .community-comparison-card.remove-bottom-row .item-1 {
	margin-bottom: 8px;
}

#toc_community .community-comparison-card.remove-bottom-row .item-4 {
	margin-top: 8px;
}

#toc_community .community-comparison-card.remove-bottom-row .single-chart,
#toc_community .community-comparison-card.remove-bottom-row .circular-chart {
	box-sizing: border-box;
	width: 128px;
	height: 128px;
	max-width: 128px;
}

#toc_community .community-comparison-card.remove-bottom-row .single-chart {
	margin-right: auto;
	margin-left: 0;
}

/* Larger comparison cards */
.one-two-one-grid {
	box-sizing: border-box;
	min-height: 200px;
	padding: 18px;
	border: 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

.one-two-one-grid span.title {
	margin-bottom: var(--li-space-sm);
	color: var(--li-color-heading);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

.one-two-one-grid span.large {
	color: var(--li-color-accent);
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1.05;
}

.one-two-one-grid span.mid {
	color: var(--li-color-muted);
	font-size: 0.9rem;
	font-weight: 500;
}

.one-two-one-grid span.small {
	color: var(--li-color-muted);
	font-size: 0.9rem;
	line-height: 1.45;
}

/* Supporting information should read as secondary content. */
.memo,
.memo-long {
	box-sizing: border-box;
	padding: 16px 18px;
	border: 0;
	border-left: 3px solid var(--li-color-accent);
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	background-image: none;
	box-shadow: var(--li-shadow-card);
	color: var(--li-color-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

/* Chart and table surfaces */
.ct-chart-bar,
.ct-chart-line {
	--li-chart-right-padding: 15px;
	/* Chartist applies these classes to its fixed-height SVG. Keep content-box
	 * sizing so padding does not consume the X-axis label area. Subtract the
	 * right padding from the SVG width so the rendered chart remains exactly as
	 * wide as its parent card. */
	box-sizing: content-box;
	width: calc(100% - var(--li-chart-right-padding)) !important;
	max-width: calc(100% - var(--li-chart-right-padding));
	padding: 10px var(--li-chart-right-padding) 0 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

.ct-label {
	color: #4d596b;
	fill: #4d596b;
	font-family: var(--li-font-family);
	font-size: 11px;
	line-height: 1.25;
}

.ct-label.ct-horizontal {
	color: var(--li-color-text);
	fill: var(--li-color-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

.ct-chart .ct-axis-x .ct-label {
	text-anchor: middle;
}

#chart_zhvi_historical .ct-label.ct-horizontal {
	line-height: 1.1;
	white-space: pre-line;
}

@media screen and (max-width: 420px) {
	#chart_zhvi_historical .ct-line {
		stroke-width: 2px;
	}

	#chart_zhvi_historical .ct-point {
		stroke-width: 5px;
	}
}

.ct-grid {
	stroke: #d7e0ed;
	stroke-dasharray: 2px;
}

.ct-axis-line {
	stroke: #cbd5e3;
	stroke-width: 1px;
	stroke-opacity: 0.72;
	stroke-dasharray: none;
	shape-rendering: crispEdges;
}

.ct-legend {
	color: var(--li-color-muted);
	font-size: 0.9rem;
}

table.printable {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
	overflow: hidden;
}

table.printable thead {
	background: var(--li-color-accent);
}

table.printable th {
	padding: 12px 14px;
	font-size: 0.9rem;
	font-weight: 600;
}

table.printable td {
	padding: 8px 14px;
	color: var(--li-color-text);
	font-size: 0.9rem;
}

table.printable tbody tr {
	border-bottom: 1px solid var(--li-color-border);
	background: transparent;
}

table.printable tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.42);
}

.bar-spark-chart {
	border-radius: 999px;
	background: #dbe5f5;
}

/* Amenity cards, maps and filters now use the same geometry. */
.grid-card-container {
	border-radius: var(--li-radius-control);
	background: var(--li-color-surface);
}

.grid-card {
	text-overflow: ellipsis;
}

h3.amen-cat-title {
	margin: 0 0 var(--li-space-sm);
	font-size: 0.95rem;
}

/* When transit stations are unavailable, their column is reused for two more
 * stops. Preserve desktop row alignment without showing a second heading. */
#toc_transit .transit-heading-spacer {
	visibility: hidden;
}

.location-map,
.hero-location-map {
	border-radius: var(--li-radius-card);
	overflow: hidden;
}

div.scrollmenu {
	padding: 2px 0 8px;
}

div.scrollmenu a {
	margin: 0 4px;
	padding: 9px 14px;
	border: 0;
	border-radius: 15px;
	background: var(--li-color-surface-accent);
	color: var(--li-color-accent-strong);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

div.scrollmenu a:first-child {
	margin-left: 0;
}

div.scrollmenu a:hover,
div.scrollmenu a:focus-visible {
	background: #dde8fa;
	color: #35598f;
}

/* Introduction
 * The agent card remains the primary overlay when enabled. The location card
 * stays prominent in normal document flow, so the layout also works when no
 * agent card is available. */
.intro-sheet {
	--li-intro-inline-gap: 24px;
}

.intro-brand-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	margin-bottom: 20px;
}

.intro-report-logo {
	display: block;
	width: clamp(180px, 25%, 260px);
	height: auto;
	margin: 0;
}

.intro-hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	border-radius: var(--li-radius-card);
	overflow: hidden;
	background: var(--li-color-surface);
}

.intro-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(24, 35, 52, 0.02), rgba(24, 35, 52, 0.12));
	pointer-events: none;
}

#hero-image .hero-img {
	display: block;
	width: 100%;
	height: 380px;
	margin: 0;
	border-radius: 0;
	filter: contrast(82%) saturate(92%);
	object-fit: cover;
}

.intro-agent-card {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 20px;
	box-sizing: border-box;
	width: min(560px, calc(100% - (var(--li-intro-inline-gap) * 2)));
	min-height: 226px;
	padding: 12px;
	border: 0;
	border-radius: var(--li-radius-card);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 10px 28px rgba(28, 41, 62, 0.16);
	color: var(--li-color-text);
	transform: translate(-50%, -50%);
	backdrop-filter: blur(5px);
}

.intro-agent-card__photo,
.intro-agent-card__details {
	min-width: 0;
}

.intro-agent-card .avatar {
	display: block;
	width: 180px;
	height: 202px;
	border-radius: 11px;
	object-fit: cover;
}

.intro-agent-card__details {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	padding: 8px 10px 6px 0;
}

.intro-agent-card__content span,
.intro-agent-card__links span {
	display: block;
	overflow-wrap: anywhere;
}

.intro-agent-card__content {
	font-size: 0.9rem;
	line-height: 1.45;
}

.intro-agent-card__content .card-title {
	margin-bottom: 8px;
	color: var(--li-color-heading);
	font-size: 1.45rem;
	font-weight: 500;
	line-height: 1.2;
}

.intro-agent-card__links {
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid #d5dce7;
	color: var(--li-color-muted);
	font-size: 0.76rem;
	line-height: 1.4;
}

.intro-location-card.location-address {
	position: relative;
	top: auto;
	left: auto;
	z-index: 3;
	display: block;
	box-sizing: border-box;
	width: min(780px, calc(100% - (var(--li-intro-inline-gap) * 2)));
	margin: 0 auto -10px;
	padding: 22px 30px;
	border: 0;
	border-radius: var(--li-radius-card);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 7px 18px rgba(40, 58, 88, 0.1);
	color: var(--li-color-heading);
	transform: translateY(-30px);
}

.intro-location-card.location-address span {
	display: block;
}

.intro-location-card.location-address span.title {
	margin: 0 0 7px;
	color: var(--li-color-accent);
	/* Primary report branding: keep this visibly stronger than the address
	 * and other section headings at every breakpoint. */
	font-size: 3.6rem;
	font-weight: 600;
	line-height: 1.15;
}

.intro-location-card.location-address span.addr {
	margin: 0;
	color: var(--li-color-heading);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.4;
}

.intro-address-line {
	display: flex;
	clear: both;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
}

.intro-address-line .addr {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

#toc_overview .prox-score-radius-lockup {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: -8px;
	color: var(--li-color-heading);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

#toc_overview .prox-score-radius-stem {
	display: block;
	width: 1px;
	height: 15px;
	background: #cad6e7;
}

#toc_overview .prox-score-radius-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 10px rgba(54, 72, 103, 0.08);
	color: var(--li-color-accent);
	font-size: 1rem;
	line-height: 1;
}

#toc_overview .prox-score-radius {
	position: relative;
	display: inline-block;
	padding: 0 0 7px;
	color: var(--li-color-heading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
}

#toc_overview .prox-score-radius::after {
	content: "";
	position: absolute;
	left: 12.5%;
	bottom: 0;
	width: 75%;
	height: 2px;
	background: var(--li-color-accent);
}
.intro-location-card.location-address span.sub-addr {
	margin: 4px 0 0;
	color: #7a8596;
	font-size: 1.2rem;
	line-height: 1.4;
}

.intro-map-card {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	overflow: hidden;
}

.intro-map-card .hero-location-map,
.location-map {
	height: 500px;
}

/* Understanding the Data */
.about-data-layout {
	display: grid;
	gap: 18px;
}

/* Reversible Air Quality status tiles. The original SVG branch remains in
 * health_page.tpl.php and returns when $use_modern_air_quality_tiles is false. */
.air-quality-status-layout {
	display: grid;
	gap: 24px;
	margin-top: 18px;
}

.air-quality-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.air-quality-tile {
	display: grid;
	align-content: start;
	gap: 9px;
	box-sizing: border-box;
	min-width: 0;
	min-height: 142px;
	padding: 18px 20px;
	border: 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

.air-quality-tile__status {
	display: block;
	width: 42px;
	height: 7px;
	border-radius: 999px;
}

.air-quality-tile h3 {
	margin: 0;
	color: var(--li-color-heading);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
}

.air-quality-tile__value {
	display: block;
	color: var(--li-color-accent);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.15;
}

.air-quality-tile__track {
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #dfe5ee;
}

.air-quality-tile__fill {
	display: block;
	width: var(--air-quality-value, 0%);
	height: 100%;
	border-radius: inherit;
}

.air-quality-tone--good {
	background: #1aa838;
}

.air-quality-tone--moderate {
	background: #e2d31a;
}

.air-quality-tone--unhealthy {
	background: #e2a41a;
}

.air-quality-tone--hazardous {
	background: #c63c1c;
}

.air-quality-scale {
	position: relative;
	height: 78px;
	margin: 0 20px;
}

.air-quality-scale__ticks {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	color: var(--li-color-muted);
	font-size: 0.9rem;
	line-height: 1;
}

.air-quality-scale__track {
	position: absolute;
	top: 29px;
	right: 0;
	left: 0;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(to right,
		#1aa838 0 10%,
		#e2d31a 10% 20%,
		#e2a41a 20% 60%,
		#c63c1c 60% 100%);
}

.air-quality-scale__marker {
	position: absolute;
	top: 26px;
	left: var(--air-quality-position, 0%);
	z-index: 2;
	display: block;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #59616d;
	box-shadow: 0 1px 4px rgba(40, 58, 88, 0.18);
	transform: translateX(-50%);
}

.air-quality-scale__value {
	position: absolute;
	top: 47px;
	left: var(--air-quality-position, 0%);
	display: grid;
	justify-items: center;
	color: var(--li-color-muted);
	font-size: 0.76rem;
	line-height: 1.25;
	white-space: nowrap;
	transform: translateX(-50%);
}

.air-quality-scale__value strong {
	color: var(--li-color-text);
	font-size: 1rem;
	font-weight: 600;
}

.about-data-lead {
	box-sizing: border-box;
	margin: 0;
	padding: 20px 22px;
	border-left: 4px solid var(--li-color-accent);
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface-accent);
	color: var(--li-color-text);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.65;
}

.about-data-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.about-data-card,
.about-data-disclaimer {
	box-sizing: border-box;
	border: 0;
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

.about-data-card {
	position: relative;
	min-width: 0;
	padding: 22px;
}

.about-data-card--wide {
	grid-column: 1 / -1;
}

.about-data-card__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 26px;
	margin-bottom: 14px;
	border-radius: 8px;
	background: #e2eaf7;
	color: var(--li-color-accent-strong);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.about-data-card h3,
.about-data-disclaimer h3 {
	margin: 0 0 9px;
	color: var(--li-color-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.about-data-card p,
.about-data-disclaimer p {
	margin: 0;
	color: var(--li-color-muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

.about-data-disclaimer {
	padding: 18px 20px;
	border-left: 3px solid #aebbd0;
	background: #f7f9fc;
}

/* Bring newer components onto the same tokens without changing their layout. */
#toc_overview .scard,
#toc_overview .score-header.prox,
#toc_poi .poi-flat-card,
.pretty-list-item {
	border-radius: var(--li-radius-card);
	background: var(--li-color-surface);
	box-shadow: var(--li-shadow-card);
}

#toc_poi .poi-flat-card,
.pretty-list-item {
	color: var(--li-color-text);
}

.toc-menu .nav-menu a {
	color: var(--li-color-accent-strong);
}

/* Shared screen spacing system — 2026-08-24.
 *
 * Major card grids use 24px on both axes. Compact category lists retain a
 * tighter 10px card-to-card rhythm, with 12px between a category heading and
 * its first card. The overview banner uses 16px before its grid. Independent
 * report subsections use a larger 40px separation so they are not visually
 * absorbed into the location-card system above them. Keeping these rules
 * screen-only preserves the established A4 print measurements.
 *
 * Rollback: remove this @media screen block and the
 * community-continuation-grid classes in the two demo templates. */
@media screen {
	#toc_overview .score-container,
	.pretty-list-wrapper,
	#toc_community .section .row.community-stat-grid,
	#toc_community .section .row.community-comparison-grid,
	#toc_demo .community-continuation-grid {
		gap: var(--li-space-lg);
	}

	#toc_overview .score-header.prox {
		margin-bottom: var(--li-space-md);
	}

	#toc_community > .section {
		margin-top: var(--li-space-lg);
		padding: 0;
	}

	/* Education, air quality, age breakdown, and transport mode are separate
	 * report subsections—not continuations of the map/location-card systems. */
	#li_report .section.report-subsection {
		margin-top: 40px;
		padding-top: 0;
	}

	#toc_demo .community-continuation-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		margin: 0;
	}

	#toc_demo .community-continuation-grid > .col.s4 {
		float: none;
		grid-column: auto;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	.flex-card-layout {
		justify-content: flex-start;
		gap: var(--li-space-lg);
		margin: var(--li-space-lg) 0 0;
	}

	.flex-card-layout .flex-card-layout-sub,
	.flex-card-layout.col-2 .flex-card-layout-sub {
		flex: 1 1 0;
		width: 0;
		min-width: 0;
		gap: var(--li-space-sm);
	}

	.flex-card-layout-sub > h3.amen-cat-title {
		margin: 0 0 2px;
	}
}

/* Category groups wrap from three columns to two below desktop width. Exact
 * flex bases keep the horizontal gutter at 24px instead of allowing
 * justify-content to distribute a different amount of leftover space. */
@media screen and (max-width: 1024px) {
	.education-level-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.flex-card-layout .flex-card-layout-sub,
	.flex-card-layout.col-2 .flex-card-layout-sub {
		flex: 0 0 calc(50% - 12px);
		width: auto;
	}

	/* Amenities is emitted as two three-category rows for desktop and print.
	 * Flatten those rows into one grid at narrower widths so later categories
	 * can occupy open cells created when the original rows wrap. */
	#toc_amenities .amenity-category-layout {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--li-space-lg);
		margin-top: 24px;
	}

	#toc_amenities .amenity-category-layout > .flex-card-layout {
		display: contents !important;
	}

	#toc_amenities .amenity-category-layout .flex-card-layout-sub {
		width: auto;
		min-width: 0;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--li-space-section: 16px;
	}

	h2.category {
		font-size: 1.5rem;
	}

	h2.sub-heading {
		font-size: 1rem;
	}

	.education-level-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.air-quality-tile-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.air-quality-scale {
		margin-right: 10px;
		margin-left: 10px;
	}

	.education-level-card {
		grid-template-columns: 48px minmax(0, 1fr) 52px;
		grid-template-rows: auto auto;
		align-items: center;
		gap: 10px;
		min-height: 0;
		padding: 13px;
	}

	.education-level-card__icon {
		justify-self: start;
	}

	.education-level-card h3,
	.education-level-card__value {
		align-self: center;
		min-height: 0;
		margin: 0;
		text-align: left;
	}

	.education-level-card__value {
		text-align: right;
		font-size: 1.32rem;
	}

	.education-level-meter {
		grid-column: 2 / -1;
	}

	#toc_amenities .amenity-category-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	#toc_demo .community-continuation-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.flex-card-layout .flex-card-layout-sub,
	.flex-card-layout.col-2 .flex-card-layout-sub {
		flex-basis: 100%;
	}

	/* The replacement stop columns stack on mobile, so no alignment spacer is
	 * needed between the second and third stop cards. */
	#toc_transit .transit-heading-spacer {
		display: none;
	}

	.report-infographic {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-inline: contain;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-color: rgba(97, 127, 181, 0.55) transparent;
		scrollbar-width: thin;
	}

	.report-infographic > svg {
		max-width: none;
		min-width: 640px;
	}

	.report-infographic--air-quality > svg {
		min-width: 600px;
	}

	.report-infographic::-webkit-scrollbar {
		height: 5px;
	}

	.report-infographic::-webkit-scrollbar-thumb {
		border-radius: 5px;
		background: rgba(97, 127, 181, 0.55);
	}

	.data-icon {
		min-height: 104px;
		padding: 16px;
	}

	.one-two-one-grid {
		grid-template-columns: minmax(105px, 0.85fr) minmax(0, 1.15fr);
		padding: 16px;
	}

	div.scrollmenu a {
		padding: 8px 12px;
	}

	.ct-label {
		font-size: 10px;
	}

	.ct-label.ct-horizontal {
		letter-spacing: -0.01em;
	}

	#toc_crime_area .crime-summary-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.intro-sheet {
		--li-intro-inline-gap: 14px;
	}

	.intro-brand-link {
		min-height: 58px;
		margin-bottom: 14px;
	}

	.intro-report-logo {
		width: clamp(155px, 38%, 210px);
	}

	#hero-image .hero-img {
		height: 360px;
	}

	.intro-agent-card {
		grid-template-columns: 108px minmax(0, 1fr);
		gap: 14px;
		min-height: 174px;
		padding: 10px;
	}

	.intro-agent-card .avatar {
		width: 108px;
		height: 154px;
		border-radius: 9px;
	}

	.intro-agent-card__details {
		padding: 3px 4px 2px 0;
	}

	.intro-agent-card__content {
		font-size: 0.76rem;
		line-height: 1.4;
	}

	.intro-agent-card__content .card-title {
		margin-bottom: 5px;
		font-size: 1.15rem;
	}

	.intro-agent-card__links {
		margin-top: 6px;
		padding-top: 6px;
		font-size: 0.68rem;
	}

	.intro-location-card.location-address {
		padding: 18px 20px;
		transform: translateY(-22px);
	}

	.intro-location-card.location-address span.title {
		font-size: 2.85rem;
	}

	.intro-location-card.location-address span.addr {
		font-size: 1.3rem;
	}

	.intro-location-card.location-address span.sub-addr {
		font-size: 1.05rem;
	}

	.intro-map-card .hero-location-map,
	.location-map {
		height: 420px;
	}

	.about-data-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-data-card--wide {
		grid-column: auto;
	}

	#li_report > section.sheet[id] {
		scroll-margin-top: 74px;
	}

}

/* Community Snapshot switches from its desktop 3+2 arrangement to one card
 * per row at the report's established tablet/mobile breakpoint. The full
 * selector also overrides the legacy .row/.s4/.s6 declarations in style.css. */
@media screen and (max-width: 769px) {
	#toc_community .section .row.community-stat-grid,
	#toc_community .section .row.community-comparison-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	/* The Have Kids SVG has a square viewBox and otherwise expands to the full
	 * width of its mobile grid track. Keep the gauge at its intended size so it
	 * remains inside the card and cannot overlap the following chart section.
	 * The card deliberately inherits the same responsive columns as Married
	 * Couples so both explanatory labels stay aligned. */
	#toc_community .community-comparison-card.remove-bottom-row {
		grid-template-rows: auto minmax(104px, 1fr) auto;
		height: auto;
		min-height: 200px;
	}

	#toc_community .community-comparison-card.remove-bottom-row .item-1 {
		margin-bottom: 8px;
	}

	#toc_community .community-comparison-card.remove-bottom-row .item-4 {
		margin-top: 8px;
	}

	#toc_community .community-comparison-card.remove-bottom-row .single-chart,
	#toc_community .community-comparison-card.remove-bottom-row .circular-chart {
		box-sizing: border-box;
		width: 128px;
		height: 128px;
		max-width: 128px;
	}

	#toc_community .community-comparison-card.remove-bottom-row .single-chart {
		margin-right: auto;
		margin-left: 0;
	}
}

@media screen and (max-width: 420px) {
	/* Keep the same centered hierarchy on narrow phones. */
	#toc_overview .score-header.prox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		height: auto;
		min-height: 205px;
		padding: 22px 14px 24px;
	}

	#toc_overview .prox-score-brand {
		flex: 0 1 auto;
		justify-content: center;
	}

	#toc_overview .prox-score-brand__logo {
		width: clamp(105px, 32vw, 132px);
		max-width: none;
	}

	#toc_overview .prox-score-brand__label {
		font-size: clamp(1.2rem, 5.5vw, 1.45rem);
		transform: translateY(clamp(-3px, -0.6vw, -2px));
	}

	#toc_overview .score-header.prox .score {
		flex: 0 0 100px;
		width: 100px;
		height: 100px;
		margin: 0;
	}

	.score-header:not(.prox) {
		align-items: center;
	}

	.data-icon span.data {
		font-size: 1.6rem;
	}

	.one-two-one-grid {
		grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr);
	}

	.intro-agent-card {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 11px;
	}

	.intro-agent-card .avatar {
		width: 88px;
		height: 132px;
	}

	.intro-agent-card__content {
		font-size: 0.7rem;
	}

	.intro-agent-card__content .card-title {
		font-size: 1.02rem;
	}

	.ct-label {
		font-size: 9px;
	}

	.about-data-lead,
	.about-data-card,
	.about-data-disclaimer {
		padding: 16px;
	}
}

@media print {
	body {
		font-size: 10pt;
		line-height: 1.4;
	}

	.toc-menu,
	.modal {
		display: none !important;
	}

	div.scrollmenu {
		display: none !important;
	}

	.data-icon,
	.one-two-one-grid,
	.memo,
	.memo-long,
	.ct-chart-bar,
	.ct-chart-line,
	table.printable,
	#toc_overview .scard,
	#toc_overview .score-header.prox,
	#toc_poi .poi-flat-card,
	.pretty-list-item {
		box-shadow: none;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.air-quality-status-layout,
	.air-quality-tile,
	.air-quality-scale {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.air-quality-tile {
		min-height: 30mm;
		padding: 4mm;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.ct-chart-bar,
	.ct-chart-line {
		--li-chart-right-padding: 8px;
		padding-top: 6px;
	}

	.intro-brand-link {
		min-height: 16mm;
		margin-bottom: 4mm;
	}

	.intro-report-logo {
		width: 48mm;
	}

	#hero-image .hero-img {
		height: 72mm;
	}

	.intro-agent-card {
		grid-template-columns: 32mm minmax(0, 1fr);
		gap: 4mm;
		width: 105mm;
		min-height: 48mm;
		padding: 3mm;
		box-shadow: 0 3mm 7mm rgba(28, 41, 62, 0.14);
		backdrop-filter: none;
	}

	.intro-agent-card .avatar {
		width: 32mm;
		height: 42mm;
	}

	.intro-agent-card__details {
		padding: 1mm 1mm 0 0;
	}

	.intro-agent-card__content {
		font-size: 7.5pt;
		line-height: 1.35;
	}

	.intro-agent-card__content .card-title {
		font-size: 13pt;
	}

	.intro-agent-card__links {
		font-size: 6.5pt;
	}

	.intro-location-card.location-address {
		width: 125mm;
		margin-bottom: -3mm;
		padding: 4mm 6mm;
		box-shadow: 0 2mm 5mm rgba(40, 58, 88, 0.08);
		transform: translateY(-7mm);
	}

	.intro-location-card.location-address span.title {
		font-size: 33.5pt;
		font-weight: 600;
	}

	.intro-location-card.location-address span.addr {
		font-size: 14pt;
	}

	.intro-location-card.location-address span.sub-addr {
		font-size: 11pt;
	}

	.intro-map-card .hero-location-map,
	.location-map {
		height: 380px !important;
	}

	.about-data-lead,
	.about-data-card,
	.about-data-disclaimer {
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.about-data-layout {
		gap: 4mm;
	}

	.about-data-grid {
		gap: 4mm;
	}

	.about-data-lead,
	.about-data-card {
		padding: 5mm;
	}

	.about-data-disclaimer {
		padding: 4mm 5mm;
	}

	.about-data-card p,
	.about-data-disclaimer p {
		font-size: 7.5pt;
		line-height: 1.5;
	}

	.about-data-lead {
		font-size: 11.25pt;
		line-height: 1.5;
	}
}

/* ===== map-layers-panel.css ===== */
/*
 * Shared map layers panel for Amenities, Transit, Schools and Health & Safety.
 *
 * Rollback: set map_layers_panel_enabled to false in map-layers-panel.js.
 * Because every rule is scoped to classes added by that module, the original
 * pills and original map sizing return without reconstructing any HTML or CSS.
 */

.map-card--layers {
	position: relative;
	overflow: hidden;
	border-radius: var(--li-radius-card);
}

.map-layers-panel {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 900;
	box-sizing: border-box;
	width: 218px;
	max-height: calc(100% - 32px);
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(35, 55, 86, 0.07);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	overflow: hidden auto;
	transition: width 220ms ease, box-shadow 220ms ease;
}

.map-layers-panel.is-collapsed {
	width: 52px;
	box-shadow: 0 2px 8px rgba(35, 55, 86, 0.07);
}

.map-layers-toggle,
.map-layers-panel div.scrollmenu a.map-layer-option {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 32px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #243b60;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 140ms ease, color 140ms ease;
}

.map-layers-toggle {
	justify-content: space-between;
	padding: 0 8px;
	font-size: 0.9rem;
	font-weight: 600;
}

.map-layers-toggle__main {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 10px;
}

.map-layers-toggle__main > .fa-layer-group,
.map-layer-icon {
	flex: 0 0 20px;
	width: 20px;
	color: #617fb5;
	font-size: 0.92rem;
	text-align: center;
}

.map-layers-toggle__chevron {
	flex: 0 0 auto;
	margin-left: 6px;
	color: #75849a;
	font-size: 0.72rem;
	transition: transform 220ms ease;
}

.map-layers-panel.is-collapsed .map-layers-toggle__chevron {
	display: none;
}

.map-layers-panel div.scrollmenu.map-layers-options {
	display: grid;
	gap: 2px;
	padding: 4px 0 0;
	overflow: visible;
	white-space: normal;
}

.map-layers-panel div.scrollmenu a.map-layer-option {
	gap: 10px;
	min-height: 40px;
	padding: 4px 8px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	white-space: nowrap;
}

.map-layers-panel div.scrollmenu a.map-layer-option:hover,
.map-layers-panel div.scrollmenu a.map-layer-option:focus-visible,
.map-layers-toggle:hover,
.map-layers-toggle:focus-visible {
	background: rgba(97, 127, 181, 0.09);
	color: #243b60;
}

.map-layers-panel div.scrollmenu a.map-layer-option:focus,
.map-layers-toggle:focus {
	outline: 0;
}

.map-layers-panel div.scrollmenu a.map-layer-option:focus-visible,
.map-layers-toggle:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(97, 127, 181, 0.45);
}

.map-layers-panel div.scrollmenu a.map-layer-option.is-active {
	background: #eaf1ff;
	color: #243b60;
}

.map-layers-panel div.scrollmenu a.map-layer-option.is-active .map-layer-icon {
	color: #617fb5;
}

.map-layers-panel div.scrollmenu a.map-layer-option.is-active:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(97, 127, 181, 0.45);
}

.map-layers-panel div.scrollmenu a.map-layer-option.is-disabled,
.map-layers-panel div.scrollmenu a.map-layer-option.is-disabled:hover,
.map-layers-panel div.scrollmenu a.map-layer-option.is-disabled:focus {
	background: transparent;
	color: #8e9bae;
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.map-layers-panel div.scrollmenu a.map-layer-option.is-disabled .map-layer-icon {
	color: #8e9bae;
}

.map-layer-label {
	min-width: 0;
	opacity: 1;
	transform: translateX(0);
	transition: opacity 140ms ease 70ms, transform 180ms ease 40ms;
}

.map-layers-panel.is-collapsed .map-layer-label {
	width: 0;
	opacity: 0;
	transform: translateX(-6px);
	overflow: hidden;
	transition-delay: 0ms;
}

.map-layers-panel.is-collapsed .map-layers-toggle,
.map-layers-panel.is-collapsed div.scrollmenu a.map-layer-option {
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
}

/* The hidden label remains a flex item. Remove its former label gap so each
 * collapsed icon is mathematically centered within the rail. */
.map-layers-panel.is-collapsed .map-layers-toggle__main,
.map-layers-panel.is-collapsed div.scrollmenu a.map-layer-option {
	gap: 0;
}

/* Marker positioning remains owned by Leaflet's inline transform. A short,
 * staggered opacity animation adds feedback without shifting pin coordinates. */
.leaflet-marker-icon.amenity-marker-icon.map-marker--entering {
	animation: li-map-marker-enter 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: var(--map-marker-enter-delay, 0ms);
	will-change: opacity;
}

@keyframes li-map-marker-enter {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.leaflet-marker-icon.amenity-marker-icon.map-marker--entering {
		/* Keep useful layer-change feedback without spatial movement or a
		 * stagger when the operating system requests reduced motion. */
		animation-duration: 160ms;
		animation-delay: 0ms;
	}
}

@media screen and (max-width: 768px) {
	/* Touching the mobile toggle can leave both :hover and :focus active.
	 * Keep the header visually neutral; the open panel itself communicates
	 * state, while desktop retains its normal hover feedback. */
	.map-layers-toggle:hover,
	.map-layers-toggle:focus,
	.map-layers-toggle:focus-visible,
	.map-layers-toggle:active {
		background: transparent;
		color: #243b60;
		box-shadow: none;
	}

	.map-layers-panel {
		top: 12px;
		left: 12px;
		width: 218px;
		max-width: calc(100% - 24px);
		max-height: calc(100% - 24px);
	}

	/* Mobile closed state: a discoverable 44px label bar rather than an icon
	 * rail. It keeps the menu name visible without covering the map vertically. */
	.map-layers-panel.is-collapsed {
		width: 218px;
		max-width: calc(100% - 24px);
		max-height: 44px;
		padding: 6px;
		overflow: hidden;
	}

	.map-layers-panel.is-collapsed .map-layers-toggle {
		justify-content: flex-start;
		width: 100%;
		height: 32px;
		margin: 0;
		padding: 0 8px;
	}

	.map-layers-panel.is-collapsed .map-layers-toggle__main {
		gap: 10px;
	}

	.map-layers-panel.is-collapsed .map-layers-toggle .map-layer-label {
		width: auto;
		opacity: 1;
		transform: none;
		overflow: visible;
	}

	.map-layers-panel.is-collapsed div.scrollmenu.map-layers-options {
		display: none;
	}
}

@media print {
	.map-layers-panel {
		display: none !important;
	}
}

/* ===== commute-planner.css ===== */
/* Reusable commute planner. The UI depends only on the adapter contract in
 * commute-planner.js; provider-specific map behavior belongs in an adapter. */
.li-commute-host {
	position: relative;
}

.li-commute-planner,
.li-commute-planner * {
	box-sizing: border-box;
}

.li-commute-planner {
	--commute-accent: #617fb5;
	--commute-accent-strong: #526fa6;
	--commute-ink: #273957;
	--commute-muted: #66748a;
	--commute-surface: #fff;
	--commute-soft: #eef2f8;
	--commute-border: #d7e0ed;
	font-family: var(--li-font-family, "Poppins", sans-serif);
}

.li-commute-trigger {
	position: absolute;
	right: 16px;
	bottom: 28px;
	z-index: 508;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 42px;
	max-width: calc(100% - 32px);
	padding: 9px 15px;
	border: 1px solid rgba(82, 111, 166, 0.2);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 5px 18px rgba(35, 53, 82, 0.18);
	color: var(--commute-ink);
	outline: 0;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	user-select: none;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.li-commute-trigger:hover {
	border-color: rgba(82, 111, 166, 0.34);
	background: #f3f6fb;
	box-shadow: 0 6px 20px rgba(35, 53, 82, 0.2);
	color: var(--commute-accent-strong);
}

.li-commute-trigger:focus {
	outline: 0;
}

.li-commute-trigger:focus-visible {
	border-color: var(--commute-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(97, 127, 181, 0.28), 0 5px 18px rgba(35, 53, 82, 0.18);
	color: var(--commute-ink);
}

.li-commute-trigger[aria-expanded="true"],
.li-commute-trigger[aria-expanded="true"]:hover,
.li-commute-trigger[aria-expanded="true"]:focus-visible {
	border-color: var(--commute-accent-strong);
	background: var(--commute-accent-strong);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 7px 22px rgba(35, 53, 82, 0.24);
	color: #fff;
}

.li-commute-trigger:active {
	background: #e6edf8;
	box-shadow: 0 3px 11px rgba(35, 53, 82, 0.18);
	transform: translateY(1px);
}

.li-commute-trigger[aria-expanded="true"]:active {
	background: #496493;
}

.li-commute-trigger__icon,
.li-commute-trigger__icon svg {
	display: block;
	width: 19px;
	height: 19px;
}

.li-commute-trigger__label {
	display: block;
	transform: translateY(1px);
}

.li-commute-trigger svg,
.li-commute-panel svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.li-commute-panel {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 510;
	width: min(340px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	padding: 14px;
	border: 1px solid rgba(82, 111, 166, 0.15);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 10px 32px rgba(35, 53, 82, 0.2);
	color: var(--commute-ink);
	overflow-y: auto;
	animation: li-commute-panel-in 180ms ease-out;
}

.li-commute-panel[hidden] {
	display: none;
}

.li-commute-panel__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 1px 0 10px;
}

.li-commute-panel__header h2 {
	margin: 0;
	color: var(--commute-ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.li-commute-panel__header p {
	margin: 2px 0 0;
	color: var(--commute-muted);
	font-size: 0.67rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.li-commute-close {
	display: grid;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 6px;
	place-items: center;
	border: 1px solid var(--commute-border);
	border-radius: 8px;
	background: #fff;
	color: var(--commute-muted);
	cursor: pointer;
}

.li-commute-close:hover,
.li-commute-close:focus-visible {
	background: var(--commute-soft);
	color: var(--commute-ink);
}

.li-commute-close svg {
	width: 16px;
	height: 16px;
}

.li-commute-form {
	margin: 9px 0 10px;
}

.li-commute-search {
	position: relative;
}

.li-commute-destination {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) 32px;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 3px 4px 3px 11px;
	border: 1px solid var(--commute-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(35, 53, 82, 0.05);
}

.li-commute-destination:focus-within {
	border-color: var(--commute-accent);
	box-shadow: 0 0 0 3px rgba(97, 127, 181, 0.16);
}

.li-commute-destination__icon,
.li-commute-destination__icon svg {
	display: block;
	width: 17px;
	height: 17px;
	color: var(--commute-muted);
}

.li-commute-destination input {
	min-width: 0;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--commute-ink);
	font: inherit;
	font-size: 0.76rem !important;
}

.li-commute-destination input::placeholder {
	color: #8a96a8;
}

.li-commute-destination button {
	display: grid;
	width: 32px;
	height: 32px;
	padding: 7px;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: var(--commute-accent);
	color: #fff;
	cursor: pointer;
}

.li-commute-destination button:hover,
.li-commute-destination button:focus-visible {
	background: var(--commute-accent-strong);
}

.li-commute-destination button svg {
	width: 17px;
	height: 17px;
}

.li-commute-suggestions {
	position: relative;
	z-index: 2;
	max-height: 174px;
	margin: 5px 0 0;
	padding: 4px;
	border: 1px solid var(--commute-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(35, 53, 82, 0.15);
	list-style: none;
	overflow-y: auto;
}

.li-commute-suggestions[hidden] {
	display: none;
}

.li-commute-suggestions [role="option"] {
	margin: 0;
	padding: 8px 9px;
	border-radius: 7px;
	color: var(--commute-ink);
	font-size: 0.7rem;
	line-height: 1.4;
	cursor: pointer;
}

.li-commute-suggestions [role="option"]:hover,
.li-commute-suggestions [role="option"][aria-selected="true"] {
	background: var(--commute-soft);
	color: var(--commute-accent-strong);
}

.li-commute-suggestions__notice {
	margin: 0;
	padding: 8px 9px;
	color: var(--commute-muted);
	font-size: 12px;
	line-height: 1.4;
}

.li-commute-suggestions[data-state="error"] .li-commute-suggestions__notice {
	color: #b04444;
}

.li-commute-suggestions__attribution {
	margin: 3px 5px 1px;
	padding-top: 5px;
	border-top: 1px solid var(--commute-border);
	color: var(--commute-muted);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-align: right;
}

.li-commute-modes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;
	padding: 4px;
	border-radius: 10px;
	background: var(--commute-soft);
}

.li-commute-modes button {
	display: flex;
	min-width: 0;
	min-height: 44px;
	padding: 5px 2px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 3px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--commute-muted);
	font: inherit;
	font-size: 0.62rem;
	font-weight: 600;
	cursor: pointer;
}

.li-commute-modes button span,
.li-commute-modes button svg {
	display: block;
	width: 16px;
	height: 16px;
}

.li-commute-modes button:hover,
.li-commute-modes button:focus-visible {
	color: var(--commute-ink);
}

.li-commute-modes button[aria-pressed="true"] {
	border-color: rgba(82, 111, 166, 0.18);
	background: #fff;
	box-shadow: 0 2px 7px rgba(35, 53, 82, 0.1);
	color: var(--commute-accent-strong);
}

.li-commute-status {
	margin: 11px 2px 0;
	color: var(--commute-muted);
	font-size: 0.68rem;
	line-height: 1.45;
}

.li-commute-status.is-error {
	color: #b33a45;
}

.li-commute-result {
	margin-top: 11px;
	padding: 12px;
	border: 1px solid #cfdaea;
	border-radius: 11px;
	background: #f8faff;
}

.li-commute-result[hidden] {
	display: none;
}

.li-commute-result__topline,
.li-commute-result__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.li-commute-result__duration {
	color: var(--commute-accent-strong);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}

.li-commute-result__mode,
.li-commute-result__distance {
	color: var(--commute-muted);
	font-size: 0.67rem;
	font-weight: 600;
}

.li-commute-result__address {
	margin: 10px 0;
	padding-top: 9px;
	border-top: 1px solid var(--commute-border);
	color: var(--commute-ink);
	font-size: 0.69rem;
	font-weight: 500;
	line-height: 1.45;
}

.li-commute-clear {
	padding: 3px 0;
	border: 0;
	background: transparent;
	color: var(--commute-accent-strong);
	font: inherit;
	font-size: 0.65rem;
	font-weight: 700;
	cursor: pointer;
}

.li-commute-clear:hover,
.li-commute-clear:focus-visible {
	text-decoration: underline;
}

.li-commute-planner.is-loading .li-commute-destination button {
	cursor: wait;
	opacity: 0.65;
}

.intro-sheet.li-commute-active > .pano-thumb-wrapper {
	opacity: 0;
	pointer-events: none;
}

.li-commute-destination-marker {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 8px;
	background: var(--commute-accent-strong, #526fa6);
	box-shadow: 0 3px 9px rgba(35, 53, 82, 0.3);
	color: #fff;
	transform: rotate(-45deg);
}

.li-commute-destination-marker svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
	transform: rotate(45deg);
}

@keyframes li-commute-panel-in {
	from { opacity: 0; transform: translateX(-8px); }
	to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 700px) {
	.li-commute-panel {
		top: auto;
		right: 10px;
		bottom: 10px;
		left: 10px;
		width: auto;
		max-height: min(72%, 390px);
		animation-name: li-commute-sheet-in;
	}

	.li-commute-trigger {
		right: 10px;
		bottom: 26px;
	}

	@keyframes li-commute-sheet-in {
		from { opacity: 0; transform: translateY(8px); }
		to { opacity: 1; transform: translateY(0); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.li-commute-panel,
	.li-commute-trigger {
		animation: none;
		transition: none;
	}
}

@media print {
	.li-commute-planner {
		display: none !important;
	}
}

/* ===== print-layout.css ===== */
/*
 * Print layout correction — 2026-08-22
 *
 * paper.css gives body.A4 a fixed 210mm width, while style.css gives the
 * printed A4 page 10mm margins. The printable area is therefore only 190mm.
 * Keeping a 210mm body inside that area can make the browser scale or clip the
 * report asymmetrically, leaving substantially more whitespace on the right.
 *
 * These rules are deliberately kept in a separate stylesheet and loaded last.
 * They affect print only. To restore the former behavior, remove the
 * print-layout.css link from main.tpl.php (the file can remain in place).
 */

/* Use the print page margin for the repeating logo. Unlike a fixed HTML
 * footer, a margin box can be disabled specifically on the first page. */
@page {
	@bottom-center {
		content: "";
		background-image: url("logo.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 28mm auto;
	}
}

@page :first {
	@bottom-center {
		content: none;
		background-image: none;
	}
}

@media print {
	html,
	body,
	body.A4 {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Replaced by the @bottom-center page-margin box above. */
	body > footer {
		display: none !important;
	}

	/* Fill the printable area defined by @page instead of using screen widths. */
	#li_report,
	body.A4 .sheet {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* A viewport width is a screen concept and can widen a printed page. */
	.location-map {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* The overview page has sufficient vertical room to preserve the centered,
	 * stacked Proximitii Score hierarchy in print. */
	#toc_overview .score-header.prox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2.5mm;
		height: auto;
		min-height: 0;
		padding: 5mm 4mm 6mm;
	}

	#toc_overview .prox-score-brand {
		flex: 0 0 auto;
		justify-content: center;
	}

	#toc_overview .prox-score-brand__logo {
		width: 42mm;
		max-width: none;
	}

	#toc_overview .prox-score-brand__label {
		font-size: 20pt;
		transform: translateY(-2mm);
	}

	#toc_overview .score-header.prox .score {
		/* The printed overall score is intentionally about 50% larger than the
		 * 80px category gauges, preserving the same visual hierarchy as screen. */
		flex: 0 0 32mm;
		width: 32mm;
		height: 32mm;
		margin: 0;
	}

	#toc_overview .score-header.prox .score .numerator {
		font-size: 2.22rem;
	}

	#toc_overview .score-header.prox .score .denominator {
		font-size: 1.05rem;
	}

	/* paper.css forces a page break after every sheet. Cancel the break on the
	 * final report section so Chrome does not append a completely blank page. */
	#li_report > section.sheet:last-of-type {
		break-after: auto !important;
		page-break-after: auto !important;
	}
}