#hue-filter {
	display: flex;
	align-items: center;
	gap: .5em 1em;
	flex-wrap: wrap;
	margin-block: 1em;
	font-size: 110%;
}

#hue-filter .slider-label {
	display: flex;
	align-items: center;
	gap: .5em;
	flex: 1 1 20em;
}

#hue-filter channel-slider {
	flex: 1;
	min-width: 12em;
}

#hue-filter input[type="number"] {
	width: 5em;
	padding: .2em .4em;
	font: inherit;
}

#hue-filter #match-count {
	color: hsl(220 10% 48%);
	font-style: italic;
}

#axis-region {
	margin-block: 1em;
	border: 1px solid hsl(220 10% 50% / .4);
	border-radius: .3em;
	padding: 0 1em;
}

#axis-region[open] {
	padding-block: .5em 1em;
}

#axis-region summary {
	margin-inline: -1em;
	padding: .5em 1em;
	font-weight: bold;
	cursor: pointer;
}

#axis-filter {
	display: flex;
	align-items: center;
	gap: .5em 1.5em;
	flex-wrap: wrap;
}

#axis-filter label {
	display: flex;
	align-items: center;
	gap: .4em;
}

#axis-filter .axis-name {
	min-width: 5em;
	font-weight: bold;
}

#axis-filter input[type="number"] {
	width: 6em;
	padding: .2em .4em;
	font: inherit;
}

/* Hide filtered-out scales in the chart without affecting axis layout */
color-chart color-scale.filtered-out {
	visibility: hidden;
}

/* Hide filtered-out rows in the scales table entirely */
#scales tr.filtered-out {
	display: none;
}

#scales th small {
	display: block;
	color: hsl(220 10% 48%);
	font-weight: normal;
	font-style: italic;
}

/* Keep the scale strips compact so the full table stays manageable */
#scales color-scale::part(color-swatch) {
	font-size: 70%;
}