:root {
	--font-mono: 'Geist Mono', monospace;

	--bg: hsl(260, 70%, 99%);
	--panel-bg: var(--bg);
	--surface: hsl(260, 70%, 96%);
	--surface-2: hsl(260, 70%, 94%);
	--border: hsl(260, 22%, 86%);
	--border-light: hsl(260, 22%, 92%);

	--text: #111827;
	--text-muted: #4b5563;
	--text-subtle: #6b7280;

	--accent: hsl(260, 70%, 70%);
	--accent-strong: hsl(260, 60%, 60%);
	--accent-contrast: #ffffff;

	--success: hsl(140, 50%, 50%);
	--success-bg: hsl(140, 60%, 93%);
	--success-text: hsl(140, 50%, 30%);

	--warning-bg: hsl(60, 60%, 93%);
	--warning-text: hsl(60, 60%, 30%);

	--danger: hsl(350, 60%, 60%);
	--danger-bg: hsl(350, 60%, 93%);
	--danger-text: hsl(350, 50%, 30%);

	--radius-sm: 0.5rem;
	--radius-md: 0.625rem;
	--radius-lg: 0.75rem;
	--radius-xl: 0.875rem;

	--shadow-panel: 0 0.5rem 1.5rem rgba(17, 24, 39, 0.12);

	--origin: var(--success);
	--destination: var(--danger);

	--route-accessible: var(--data-0);
	--route-standard: var(--data-10);
	--marker-origin: var(--origin);
	--marker-destination: var(--destination);

	--data-0: hsl(140, 70%, 60%);
	--data-3: hsl(60, 70%, 70%);
	--data-5: hsl(10, 70%, 60%);
	--data-7: hsl(350, 70%, 60%);
	--data-10: hsl(260, 70%, 70%);

	--chart-1: var(--data-0);
	--chart-2: var(--data-3);
	--chart-3: var(--data-5);
	--chart-4: var(--data-7);
	--chart-5: var(--data-10);

	--heatmap-low: var(--data-0);
	--heatmap-mid: var(--data-3);
	--heatmap-high: var(--data-5);
	--heatmap-max: var(--data-7);

	--severity-0: var(--data-0);
	--severity-3: var(--data-3);
	--severity-5: var(--data-5);
	--severity-7: var(--data-7);
	--severity-10: var(--data-10);
	--severity-gradient: linear-gradient(
		to right,
		var(--severity-0),
		var(--severity-3),
		var(--severity-5),
		var(--severity-7),
		var(--severity-10)
	);
	--priority-gradient: linear-gradient(
		to right,
		var(--border),
		var(--accent)
	);

	--slider-gradient: linear-gradient(to right, var(--accent), var(--success));
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: var(--border) transparent;
}

body {
	font-family: var(--font-mono);
	font-weight: 400;
	background: var(--bg);
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
}

button {
	font: inherit;
	background: var(--accent);
	color: var(--text);
	padding: 0.5rem 0.875rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	cursor: pointer;
}

button:hover {
	background: var(--accent-strong);
}

button:active {
	transform: translateY(0.03125rem);
}

button:disabled {
	cursor: not-allowed;
}

button:focus-visible {
	outline: none;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not(
		[type='color']
	),
select,
textarea {
	font: inherit;
	color: var(--text);
	border-radius: var(--radius-sm);
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--border);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-subtle);
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not(
		[type='color']
	):focus,
select:focus,
textarea:focus {
	outline: none;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not(
		[type='color']
	):disabled,
select:disabled,
textarea:disabled {
	color: var(--text-subtle);
	cursor: not-allowed;
}

input[type='checkbox'] {
	accent-color: var(--accent);
}

a {
	color: var(--accent-strong);
	text-decoration: none;
}

a:hover {
	color: var(--accent);
}

.top-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--bg);
	color: var(--text);
	padding: 0 1.25rem;
	height: 3rem;
	flex-shrink: 0;
	z-index: 100;
}

.top-nav .brand {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: -0.0187rem;
}

.brand-logo {
	width: 2rem;
	height: 2rem;
}

.brand-text {
	display: inline-flex;
	align-items: baseline;
	gap: 0.125rem;
}

.github-link {
	text-decoration: none;
}

.nav-tabs {
	display: flex;
	gap: 0.25rem;
}

.nav-tab {
	padding: 0.375rem 1rem;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-subtle);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 400;
	font-family: var(--font-mono);
}

.nav-tab:hover {
	background: var(--surface-2);
	color: var(--text-muted);
}

.nav-tab.active {
	background: var(--accent);
	color: var(--accent-contrast);
}

.content {
	display: flex;
	flex: 1;
	overflow: hidden;
	padding: 0;
	gap: 0;
	background: var(--bg);
}

.left-panel {
	width: 27.5rem;
	flex-shrink: 0;
	background: var(--panel-bg);
	border-radius: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.left-panel::-webkit-scrollbar {
	width: 0.375rem;
}

.left-panel::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 0.1875rem;
}

.panel-section {
	padding: 1rem 1.25rem;
	position: relative;
}

.panel-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 1.25rem;
	right: 1.25rem;
	height: 1px;
	background: var(--border-light);
}
.panel-section:last-child {
}

.panel-section h3 {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.0312rem;
}

.view-content {
	display: none;
}

.view-content.active {
	display: block;
	width: 100%;
}

.is-hidden {
	display: none;
}

.map-container {
	flex: 1;
	border-radius: var(--radius-xl);
	overflow: hidden;
	position: relative;
	margin: 0rem 0.75rem 0.75rem 0;
	box-shadow: var(--shadow-1);
	background: var(--bg);
	border: 1px solid var(--border);
}

#map {
	width: 100%;
	height: 100%;
}

.map-overlay {
	position: absolute;
	z-index: 800;
	background: var(--panel-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-panel);
	border: 1px solid var(--border);
	padding: 0.625rem 0.875rem;
	font-size: 0.75rem;
	color: var(--text-muted);
}

.legend-stack {
	position: absolute;
	z-index: 800;
	bottom: 1rem;
	left: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.legend-stack .map-overlay {
	position: static;
}

.map-overlay.layer-toggles {
	top: 1rem;
	right: 1rem;
}

.legend-title {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--text);
}

.legend-row {
	display: flex;
	align-items: center;
}

.legend-min,
.legend-max {
	font-size: 0.6875rem;
	color: var(--text-subtle);
}

.legend-min {
	margin-right: 0.25rem;
}

.legend-max {
	margin-left: 0.25rem;
}

.legend-bar {
	width: 7.5rem;
	height: 0.75rem;
	border-radius: 0.1875rem;
	background: var(--severity-gradient);
}

.legend-bar-priority {
	background: var(--priority-gradient);
}

.popup-card {
	min-width: 11.25rem;
	color: var(--text-muted);
}

.popup-title {
	margin: 0 0 0.375rem 0;
	color: var(--text);
}

.popup-divider {
	margin-top: 0.375rem;
	padding-top: 0.375rem;
}

.layer-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	cursor: pointer;
	user-select: none;
}

.layer-toggle input[type='checkbox'] {
	accent-color: var(--accent);
}

.layer-toggle label {
	cursor: pointer;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.filter-group {
	margin-bottom: 0.875rem;
}

.filter-group label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--text-muted);
	margin-bottom: 0.375rem;
}

.checkbox-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.375rem;
}

.checkbox-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	color: var(--text-muted);
	cursor: pointer;
}

.checkbox-item input {
	accent-color: var(--accent);
}

.severity-range {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.severity-range input[type='range'] {
	flex: 1;
	padding: 0;
}

.severity-range span {
	font-size: 0.75rem;
	color: var(--text-subtle);
	min-width: 1.5rem;
	text-align: center;
}

.toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.toggle-label {
	margin-bottom: 0;
}

.toggle-switch {
	position: relative;
	width: 2.5rem;
	height: 1.375rem;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--border);
	border-radius: 0.6875rem;
}

.toggle-slider::before {
	content: '';
	position: absolute;
	height: 1rem;
	width: 1rem;
	left: 0.1875rem;
	bottom: 0.1875rem;
	background: var(--accent-contrast);
	border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
	background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
	transform: translateX(1.125rem);
}

.click-mode-buttons {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.click-mode-btn {
	flex: 1;
	padding: 0.625rem;
	background: var(--accent);
	color: var(--accent-contrast);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 400;
	text-align: center;
}

.click-mode-btn:hover {
	background: var(--accent-strong);
}

.click-mode-btn.origin {
	background: var(--origin);
	color: var(--accent-contrast);
}

.click-mode-btn.origin:hover {
	background: hsl(140, 70%, 40%);
}

.click-mode-btn.destination {
	background: var(--destination);
	color: var(--accent-contrast);
}

.click-mode-btn.destination:hover {
	background: hsl(350, 70%, 45%);
}

.click-mode-btn.active.origin {
	background: hsl(140, 70%, 35%);
}

.click-mode-btn.active.destination {
	background: hsl(350, 70%, 40%);
}

.input-group {
	margin-bottom: 0.625rem;
}

.input-group label {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--text-muted);
	margin-bottom: 0.25rem;
}

.input-row {
	display: flex;
	gap: 0.5rem;
	width: 100%;
}

.input-row input {
	flex: 1;
	min-width: 0;
	width: 100%;
	font-size: 0.8125rem;
	background: var(--surface);
}

.input-row input:focus {
	background: var(--panel-bg);
}

.slider-group {
	margin: 1rem 0;
}

.slider-group > label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.slider-container {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.slider {
	flex: 1;
}

input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	height: 0.375rem;
	border-radius: 0.1875rem;
	background: var(--surface-2);
	outline: none;
}

input[type='range']::-webkit-slider-runnable-track {
	height: 0.375rem;
	border-radius: 0.1875rem;
	background: var(--surface-2);
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--bg);
	border: 0.125rem solid var(--accent-strong);
	cursor: pointer;
	margin-top: -0.375rem;
}

input[type='range']::-moz-range-track {
	height: 0.375rem;
	border-radius: 0.1875rem;
	background: var(--surface-2);
}

input[type='range']::-moz-range-thumb {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--bg);
	border: 0.125rem solid var(--accent-strong);
	cursor: pointer;
}

input[type='range']::-moz-range-progress {
	height: 0.375rem;
	border-radius: 0.1875rem;
	background: var(--accent-strong);
}

.slider {
	background: var(--slider-gradient);
}

.slider::-webkit-slider-runnable-track {
	background: var(--slider-gradient);
}

.slider::-moz-range-track {
	background: var(--slider-gradient);
}

.slider-value {
	font-size: 0.75rem;
	color: var(--text-subtle);
	font-weight: 400;
	min-width: 5.625rem;
	text-align: right;
}

.slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.625rem;
	color: var(--text-subtle);
	margin-top: 0.5rem;
}

.route-actions {
	display: flex;
	gap: 0.25rem;
}

.btn-primary {
	flex: 1;
	padding: 0.375rem 1rem;
	background: var(--accent);
	color: var(--accent-contrast);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 400;
}

.btn-primary:hover {
	background: var(--accent-strong);
}

.btn-primary:disabled {
	cursor: not-allowed;
}

.btn-secondary {
	padding: 0.375rem 1rem;
	background: transparent;
	color: var(--text-subtle);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 400;
}

.btn-secondary:hover {
	background: var(--surface-2);
	color: var(--text-muted);
}

.status-message {
	margin-top: 0.625rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	font-size: 0.75rem;
	text-align: center;
}

.status-message.loading {
	background: var(--warning-bg);
	color: var(--warning-text);
}

.status-message.success {
	background: var(--success-bg);
	color: var(--success-text);
}

.status-message.error {
	background: var(--danger-bg);
	color: var(--danger-text);
}

.examples {
	margin-top: 0.75rem;
	padding: 0.625rem;
	background: var(--surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.examples p {
	margin: 0.25rem 0;
	font-size: 0.75rem;
	color: var(--text-subtle);
}

.examples a {
	cursor: pointer;
	font-weight: 400;
}

.examples a:hover {
	text-decoration: underline;
}

.route-stats-row {
	display: flex;
	gap: 0.625rem;
	margin-bottom: 0.625rem;
}

.route-stats {
	flex: 1;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.route-stats h4 {
	margin: 0 0 0.5rem 0;
	font-size: 0.825rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text);
}

.route-stats .color-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.route-dot-accessible {
	background: var(--route-accessible);
}

.route-dot-standard {
	background: var(--route-standard);
}

.route-stats p {
	margin: 0.1875rem 0;
	font-size: 0.75rem;
	color: var(--text-muted);
}

.route-path {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.comparison {
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.comparison h4 {
	margin: 0 0 0.375rem 0;
	font-size: 0.8125rem;
	color: var(--text);
}

.comparison p {
	margin: 0.25rem 0;
	font-size: 0.75rem;
	color: var(--text-muted);
}

.analytics-content {
	max-width: 56rem;
	width: 100%;
	padding: 1.5rem 2rem 4rem;
	margin: auto;
}

.analytics-content h2 {
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--text);
	margin-bottom: 0.5rem;
	letter-spacing: -0.01rem;
}

.analytics-intro {
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin-bottom: 1.5rem;
}

.chart-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.chart-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1rem 1.25rem;
}

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

.chart-card h4 {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--text);
	margin-bottom: 0.75rem;
}

.chart-card canvas {
	width: 100% !important;
}

.chart-caption {
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--text-subtle);
	margin-top: 0.625rem;
}

.table-scroll {
	overflow-x: auto;
	max-height: 22rem;
	overflow-y: auto;
}

.analytics-error {
	text-align: center;
	padding: 1.875rem;
	color: var(--danger);
}

.analytics-error-subtext {
	font-size: 0.75rem;
	color: var(--text-subtle);
	margin-top: 0.5rem;
}

.analytics-loading {
	text-align: center;
	padding: 2.5rem 1.25rem;
	color: var(--text-subtle);
}

.analytics-loading .spinner {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: 0 auto 0.75rem;
	background: conic-gradient(from 0deg, var(--accent), rgba(0, 0, 0, 0));
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 0.1875rem),
		#000 0
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 0.1875rem),
		#000 0
	);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.severity-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.6875rem;
}

.severity-table th,
.severity-table td {
	padding: 0.25rem 0.1875rem;
	text-align: center;
}

.severity-table th {
	color: var(--text-subtle);
	font-weight: 400;
	position: sticky;
	top: 0;
	background: var(--panel-bg);
}

.severity-table td:first-child {
	text-align: left;
	font-weight: 400;
	color: var(--text-muted);
	white-space: nowrap;
	max-width: 5rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.severity-cell {
	color: var(--accent-contrast);
	font-weight: 400;
}

.severity-cell--empty {
	background: var(--surface);
	color: var(--border);
	font-weight: 400;
}

.section-desc {
	font-size: 0.75rem;
	color: var(--text-subtle);
	margin-bottom: 0.75rem;
}

.priorities-list-wrapper {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.priorities-list {
	max-height: 24.5rem;
	overflow-y: auto;
}

.priorities-list::-webkit-scrollbar {
	width: 0.375rem;
}

.priorities-list::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 0.1875rem;
}

.priority-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem;

	cursor: pointer;
	font-size: 0.75rem;
}

.priority-item:hover {
	background: var(--surface);
}

.priority-rank {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 400;
}

.priority-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.priority-neighborhood {
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.priority-detail {
	color: var(--text-subtle);
	font-size: 0.6875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.priority-impact {
	flex-shrink: 0;
	color: var(--text-muted);
	font-size: 0.6875rem;
}

.map-click-cursor {
	cursor: crosshair !important;
}

.map-container .leaflet-popup-content-wrapper {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--text-muted);
	background: var(--panel-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-panel);
}

.map-container .leaflet-popup-content {
	margin: 0.75rem 0.875rem;
	line-height: 1.5;
}

.map-container .leaflet-popup-tip {
	background: var(--panel-bg);
	border: 1px solid var(--border);
	border-top: none;
	border-left: none;
}

.map-container .leaflet-popup-close-button {
	color: var(--text-subtle);
	font-size: 1.125rem;
}

.map-container .leaflet-popup-close-button:hover {
	color: var(--text);
}

.map-container .leaflet-control-zoom {
	box-shadow: var(--shadow-panel);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: none;
}

.map-container .leaflet-control-zoom a {
	width: 2.125rem;
	height: 2.125rem;
	line-height: 2.125rem;
	font-size: 1rem;
	color: var(--text-muted);
	background: var(--panel-bg);
}

.custom-marker {
	--marker-color: var(--accent);
}

.custom-marker--origin {
	--marker-color: var(--marker-origin);
}

.custom-marker--destination {
	--marker-color: var(--marker-destination);
}

.custom-marker .marker-dot {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--marker-color);
	box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.3);
}

.leaflet-control-layers {
	display: none !important;
}

.stats-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.stat-box {
	flex: 1;
	text-align: center;
	padding: 0.625rem 0.375rem;
	background: var(--surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.stat-box .value {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--text);
}

.stat-box .label {
	font-size: 0.625rem;
	color: var(--text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.0187rem;
	margin-top: 0.125rem;
}

.backend-error {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--panel-bg);
	padding: 1.875rem;
	border-radius: var(--radius-xl);
	border: 1px solid var(--border);
	box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.2);
	max-width: 26.25rem;
	z-index: 10000;
}

.backend-error-title {
	margin: 0 0 0.75rem 0;
	color: var(--danger);
}

.backend-error-text {
	margin: 0.5rem 0;
	color: var(--text-muted);
}

.backend-error-command {
	background: var(--surface-2);
	padding: 0.625rem;
	border-radius: var(--radius-sm);
	font-size: 0.8125rem;
}

.backend-error-hint {
	margin: 0.5rem 0;
	font-size: 0.8125rem;
	color: var(--text-subtle);
}

.content.panel-full .map-container,
.content.panel-full .legend-stack,
.content.panel-full .layer-toggles {
	display: none;
}

.content.panel-full .left-panel {
	width: 100%;
	display: flex;
	justify-content: center;
}

.about-content {
	max-width: 48rem;
	width: 100%;
	padding: 1.5rem 2rem 4rem;
	margin: auto;
}

.about-section {
	margin-bottom: 1.75rem;
}

.about-section h2 {
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--text);
	margin-bottom: 0.75rem;
	letter-spacing: -0.01rem;
}

.about-section h3 {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.0312rem;
	margin-bottom: 0.625rem;
}

.about-section p {
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin-bottom: 0.625rem;
}

.about-formula {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--text);
	text-align: center;
}

.about-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.75rem;
	margin: 0.75rem 0;
}

.about-table th,
.about-table td {
	padding: 0.4375rem 0.625rem;
	text-align: left;
	border-bottom: 1px solid var(--border-light);
}

.about-table th {
	color: var(--text-subtle);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.0187rem;
	font-size: 0.6875rem;
}

.about-table td {
	color: var(--text-muted);
}

.about-table td:first-child {
	font-weight: 400;
	color: var(--text);
}

.about-list {
	list-style: none;
	padding: 0;
}

.about-list li {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--text-muted);
	padding: 0.3125rem 0 0.3125rem 1rem;
	position: relative;
}

.about-list li::before {
	content: '–';
	position: absolute;
	left: 0;
	color: var(--text-subtle);
}

.about-cta {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--accent);
	color: var(--accent-contrast);
	border: 1px solid var(--accent-strong);
	border-radius: var(--radius-md);
	font-size: 0.8125rem;
	cursor: pointer;
}

.about-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.about-cta-row .about-cta {
	margin-top: 0;
}

.about-cta:hover {
	background: var(--accent-strong);
	color: var(--accent-contrast);
}