#map {
	max-width: 768px;
	border: 1px solid #eee;
	width: 100%;
	height: 550px;
}

#filter-controls {
	max-width: 768px;
	border: 1px solid var(--border-color);
	border-bottom: none;
	font-size: 13px;
}

#filter-header {
	padding: 5px 10px;
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--border-color);
}

.filter-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--border-color);
}

.filter-section-label {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.55;
	margin-right: 3px;
	white-space: nowrap;
}

.filter-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 20px;
	border: 1px solid var(--border-color);
	cursor: pointer;
	background: transparent;
	color: inherit;
	user-select: none;
	white-space: nowrap;
	transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.filter-pill:hover {
	border-color: var(--light-true-color);
}

.filter-pill:has(input:checked) {
	background: var(--light-true-background);
	color: var(--light-true-color);
	border-color: var(--light-true-background);
}

.filter-pill-indeterminate {
	background: var(--light-true-background) !important;
	color: var(--light-true-color) !important;
	border-color: var(--light-true-background) !important;
	opacity: 0.5;
}

.filter-pill input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.filter-pill-divider {
	display: inline-block;
	width: 1px;
	height: 20px;
	background: var(--border-color);
	margin: 0 3px;
}