.cc-map-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 12px 24px;
	color: var(--text);
}

.cc-map-page h1 {
	margin: 0 0 8px;
	font-size: 1.6rem;
}

.cc-map-meta,
.cc-map-empty,
.cc-map-help {
	color: var(--muted);
	margin: 0 0 14px;
	font-size: 0.95rem;
}

.cc-map-help {
	margin-top: 28px;
}

.cc-map-canvas {
	width: 100%;
	height: 520px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg);
}

.cc-map-memberlist {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 24px;
}

.cc-map-memberlist--single {
	columns: 1;
}

.cc-map-memberlist li {
	break-inside: avoid;
	padding: 4px 0;
	border-bottom: 1px solid var(--border);
}

.cc-map-pin {
	background: transparent;
	border: 0;
}

.cc-map-pin__dot {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: var(--surface);
	color: var(--text);
	border-radius: var(--radius-sm);
}

.cc-map-popup__nick {
	color: var(--map-popup-nick);
}

.cc-map-popup__label {
	margin-top: 4px;
	color: var(--muted);
	font-size: 0.9em;
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
	background-color: color-mix(in srgb, var(--map-cluster) 35%, transparent);
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
	background-color: var(--map-cluster);
	color: #fff;
}

@media (max-width: 700px) {
	.cc-map-canvas {
		height: 360px;
	}
	.cc-map-memberlist {
		columns: 1;
	}
}