:root {
	--font-mono: Consolas, Inconsolata, Monaco, monospace;
}

body {
	font: 100%/1.5 system-ui;
	max-width: 84em;
	margin: 1em auto;
	padding-inline: 1em;

	@media (width > 70em) {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0em 2em;

		> header,
		.color {
			grid-column: 1 / -1;
		}

		.color {
			display: grid;
			grid-template-columns: subgrid;
			gap: inherit;
		}

		.gamut-mapped {
			grid-column: 2 / -1;
		}
	}
}

body > header {
	text-align: center;
	margin-bottom: 2em;

	h1 {
		font-size: calc(200% + 2vh + 2vw);
		margin-bottom: 0;
		line-height: 1.1;
	}
}

h2 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 150%;
}

input {
	font: inherit;
}

color-swatch input {
	padding: .15em .3em .1em;
	border: 1px solid hsl(220 10% 78%);
	border-radius: .25em;
	font-family: var(--font-mono);

	&:invalid {
		background-color: hsl(0 60% 95%);
		border-color: hsl(0 60% 80%);
	}
}

dl.swatches {
	display: grid;
	gap: 1.5em;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	margin: 0;
	margin-top: .5rem;

	> div {
		position: relative;
		display: grid;
		grid-template-rows: subgrid;
		grid-row-end: span 2;
		gap: .5em;

		&[data-ranking="1"],
		&[data-ranking="2"],
		&[data-ranking="3"] {
			& > dt::before {
				content: var(--award);
				position: absolute;
				top: 0;
				right: 0;
				font-size: 200%;
			}
		}

		&[data-ranking="1"] {
			--award: "🥇";
		}

		&[data-ranking="2"] {
			--award: "🥈";
		}

		&[data-ranking="3"] {
			--award: "🥉";
		}
	}

	.description {
		display: block;
		font-size: 70%;
		color: hsl(220 10% 50%);
		text-wrap: balance;
	}

	dt {
		margin-top: auto;
	}

	dd {
		margin: 0;
	}

	color-swatch {
		width: 100%;
	}

	input {
		width: 100%;
		min-width: 25ch;
	}

	[data-method="scale"] input {
		min-width: 33ch;
	}
}

details.space-coords {
	font-size: 70%;
	margin-top: 1em;

	> summary {
		margin-bottom: .2rem;
		font-size: .8rem;
		text-transform: uppercase;
		font-weight: 520;
		color: hsl(220 10% 40%);
	}
}

dl.space-coords {
	display: grid;
	grid-template-columns: auto repeat(3, auto);
	border-block: 1px solid hsl(220 10% 90%);
	margin: 0;

	> div {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: subgrid;
		border-block: 1px solid hsl(220 10% 90%);
		padding-block: .3em;

		&:not(:first-child) {
			border-top: none;
		}

		> dt {
			text-transform: uppercase;
			font-weight: 520;
			color: hsl(220 10% 40%);
		}
	}

	dd {
		display: contents;
	}

	dl.coords {
		grid-column: 2 / span 3;
		display: grid;
		grid-template-columns: subgrid;
	}
}

dl.deltas,
dl.coords {
	display: flex;
	gap: .1em;
	margin: 0;
	align-items: baseline;

	&:has(> div) {
		gap: .4em;
	}

	> div {
		display: flex;
		gap: .2em;
	}

	.delta-e {
		background: hsl(220 10% 50% / .08);
		border: 1px solid hsl(220 10% 50% / 10%);
		padding: 0 .3em;
		border-radius: .2em;
	}

	dt {
		font-weight: 300;
		color: hsl(220 10% 50%);
		mix-blend-mode: multiply;

		~ dt {
			margin-left: .5em;
		}
	}

	dd {
		font-weight: bold;
		margin: 0;
	}
}

dl.deltas {
	border-top: 1px solid hsl(220 10% 80%);
	padding-top: .4em;
	margin-top: .8em;
	font-size: 90%;

	dd {
		&.negative,
		&.positive {
			color: var(--color-red-40, hsl(0 60% 30%));
		}

		&.positive {
			&::before {
				content: "+";
			}
		}

		&.min {
			color: var(--color-green-50, hsl(70 100% 32%));
		}

		&.zero {
			color: var(--color-green-40, hsl(85 100% 28%));
		}
	}
}

.rendering {
	.swatches > div > dt {
		margin-top: 1.1em;
	}
}

.gamut-mapped {
	color-swatch {
		font-size: 90%;
	}

	.deltas {
		justify-content: space-between;
	}
}

article.color {
	position: relative;
	margin-bottom: 1rem;

	&:not(:first-child) {
		margin-top: 3rem;
	}
}

button {
	display: flex;
	align-items: center;
	padding: .3em .7em;
	font: inherit;
	background: hsl(220 10% 94%);
	border: none;
	border-radius: .25em;
	cursor: pointer;
	transform-origin: bottom;
	transition: .1s;
	width: max-content;

	&:hover {
		background: hsl(220 10% 90%)
	}

	&:active {
		scale: .9;
	}

	svg {
		height: 1em;
		margin-right: .3em;
		opacity: .4;
	}
}

.controls {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: .3em;
}