.grs-explorer,
.grs-explorer *,
.grs-explorer *::before,
.grs-explorer *::after {
	box-sizing: border-box;
}

.grs-explorer__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin-bottom: 1.25em;
}

.grs-explorer__state-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: #eef4fb;
	border-radius: 999px;
	padding: 0.35em 0.5em 0.35em 0.9em;
	font-size: 0.9em;
}

.grs-explorer__clear-state {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 999px;
	padding: 0.2em 0.7em;
	cursor: pointer;
	font-size: 0.85em;
}

/* Map always stacks above the list, at every screen size — not side by
   side, so the map is consistently the first thing a visitor sees. */
.grs-explorer__layout {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.grs-explorer__map .grs-map__canvas {
	cursor: pointer;
}

.grs-explorer__hint {
	margin: 0.5em 0 0;
	font-size: 0.85em;
	color: #666;
	text-align: center;
}

@media (max-width: 600px) {
	.grs-explorer__controls {
		flex-direction: column;
		align-items: flex-start;
	}

	.grs-explorer__year-select {
		width: 100%;
	}
}