/* Explore page — extends the shared tokens in home.css */

.explore-filters {
	padding: 12px 20px 4px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.explore-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.explore-filters__field {
	margin-bottom: 0;
	flex: 1 1 160px;
	min-width: 140px;
}

.explore-filters__field select {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 0.5px solid var(--color-border);
	background: var(--color-surface);
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: var(--color-ink);
	appearance: auto;
}

.explore-filters__field select:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.explore-filters__my-layouts {
	align-self: flex-start;
}

.explore-sentinel {
	height: 1px;
	width: 100%;
}

.explore-loading {
	text-align: center;
	color: var(--color-muted);
	font-size: 0.85rem;
	padding: 16px 0;
}

/* [hidden] vs a competing display declaration — same gotcha documented in
   book.css. Neither #explore-empty nor #explore-loading has one here, so
   the UA stylesheet's [hidden] rule already applies unopposed; no
   override block is needed, unlike book.css's overlays/toast. */

@media (min-width: 640px) {
	.explore-filters {
		padding: 16px 32px 4px;
	}
}