:root {
	--font-ui: system-ui, Helvetica Neue, Helvetica, Segoe UI, sans-serif
}

body {
	font: 120%/1.5 var(--font-ui);
	width: 90vw;
	max-width: 80em;
	margin: 1em auto;
	padding: 0 2em;
}

input:is(
	:not([type]),
	[type="text"],
	[type="number"]
) {
	font: inherit;
	font-size: 150%;
	width: 100%;
	padding: 0 .2em;
	box-sizing: border-box;
}

#precisionInput {
	width: 3em;
}

.inputs {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 1em;
	margin: 3em 0;
}

	.inputs input {
		display: block;
	}

table {
	width: 100%;
	display: grid;
	grid-template-columns: auto auto auto 1fr;
}

thead, tbody {
	display: contents;
}

[colspan="2"] {
	grid-column-end: span 2;
}

tr {
	display: grid;
	grid-template-columns: subgrid;
	grid-column-end: span 4;
	order: 1;

	thead & {
		order: -999;
	}

	&:nth-child(even) {
		background: hsl(220 10% 50% / 5%);
	}

	&:has(input[name=pin]:checked) {
		background: linear-gradient(oklch(88% 0.2 100 / 10%) 0 100%);
		border-top: 1px solid white;
	}
}

td {
	padding: .3em .5em;
	font-family: Consolas, Monaco, monospace;
}

tbody th {
	text-align: left;
}

.serialization {
	display: flex;

	& a {
		display: flex;
		font: inherit;
		color: inherit;
		text-decoration: none;
		white-space: nowrap;

		&:hover {
			cursor: pointer;
			text-decoration: underline;
		}
	}

	&.out-of-gamut {
		color: hsl(0 90% 38%);
	}

	&.gamut-mapped::after {
		content: "Gamut\amapped";
		display: inline-block;
		font: bold 9px/1 var(--font-ui);
		background: hsl(0 40% 50% / .15);
		text-transform: uppercase;
		white-space: pre-line;
		padding: .4em .6em;
		border-radius: .3em;
		margin: auto 0 auto .5em;
	}

	& button {
		order: 4;
	}
}

#colorOutput {
	position: absolute;
	top: 0; left: 0; right: 0;
	width: 100%;
	height: 2em;
	--red-stripe-stops: transparent calc(50% - .05em), red 0 calc(50% + .05em), transparent 0;
	--error-background: linear-gradient(to bottom right, var(--red-stripe-stops)), linear-gradient(to top right, var(--red-stripe-stops)) gray;
}

button.copy {
	padding: 0;
	border: 0;
	font-size: 100%;
	background: transparent;
	cursor: pointer;
	margin-left: auto;

	&:not(:hover) {
		filter: grayscale() opacity(.6);
	}
}

label.pin {
	cursor: pointer;
	filter: var(--filter-1, ) var(--filter-2, );

	input[type=checkbox] {
		position: absolute;
		margin-left: 2em;
		clip: rect(0 0 0 0);
	}

	&:not(:hover) {
		--filter-1: grayscale();
	}

	&:not(:has(> :checked)) {
		--filter-2: opacity(.4);
	}
}