:root {
	--transparency: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill-opacity=".05"><rect width="50" height="50" /><rect x="50" y="50" width="50" height="50" /></svg>')
	0 0 / 20px 20px #f8f8f8;
}

body {
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0;
	font: 100%/1.6 Helvetica Neue, sans-serif;
	background: var(--transparency);
}

main {
	box-sizing: border-box;
	min-height: 100vh;
	padding: 1.5em 2em 3em;
}

	/* The current color fills the whole page behind the floating cards
	   (over the body's transparency checkerboard, so alpha shows through). */
	main::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: var(--color);
	}

.pickers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
	gap: 2em;
	margin-top: 1.5em;

	opacity: 0;

	&:has(color-picker:defined) {
		opacity: 1;
		/* The 0.3s delay lets the `<color-picker>` components settle down. */
		transition: opacity .25s .3s;
	}
}

	.picker {
		/* Each picker is its own separate floating card at a comfortable width;
		   they sit side by side when there's room and wrap when there isn't. */
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 40em;
		max-width: 90vw;
		padding: 1.5em;
		border-radius: .6em;
		background: #fff;
		box-shadow: 0 .15em .6em rgba(0, 0, 0, .3);
	}

	/* Pin toggle + add/remove, in the picker's top-right corner, vertically
	   centered on the space dropdown. The dropdown is narrowed (below) for them. */
	.picker .tools {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: .25rem;
		/* Match the dropdown height so the buttons center on it */
		block-size: 4.5rem;
	}

		.picker .tools button {
			display: flex;
			align-items: center;
			justify-content: center;
			inline-size: 2.5rem;
			block-size: 2.5rem;
			padding: 0;
			border: none;
			border-radius: .3rem;
			background: none;
			color: rgba(0, 0, 0, .4);
			font: 400 1.8rem/1 Helvetica Neue, sans-serif;
			cursor: pointer;
		}

			.picker .tools button:hover {
				background: rgba(0, 0, 0, .08);
			}

			.picker .tools .add:hover {
				color: #000;
			}

			.picker .tools .remove:hover {
				color: #b00;
			}

		/* Pin: faint when unpinned (follows pasted colors), solid when pinned */
		.picker .tools .pin {
			color: rgba(0, 0, 0, .25);
		}

			.picker .tools .pin.pinned {
				color: rgba(0, 0, 0, .7);
			}

			.picker .tools .pin svg {
				display: block;
				inline-size: 1.4rem;
				block-size: 1.4rem;
				fill: currentColor;
			}

color-picker {
	/* Don't allow content to stretch the grid */
	grid-template-columns: min-max(0, 1fr);

	&::part(color-space) {
		box-sizing: content-box;
		/* Leave room for the pin + add + remove buttons */
		inline-size: calc(100% - 9.5rem);
		padding: 0;
		margin: 0;

		border: .1em solid hsl(220 10% 60%);

		font-size: 250%;
		font-weight: 700;

		field-sizing: initial;
	}

	&::part(color-space-base) {
		inline-size: 100%;
		block-size: 100%;
		padding: 0;
		margin: 0;

		font-size: 120%;

		field-sizing: initial;
		text-overflow: ellipsis;
	}

	&::part(sliders),
	&::part(details) {
		grid-column: 1 / -1;
	}

	&::part(channel-slider) {
		text-transform: uppercase;
		font-size: smaller;
		font-weight: bold;
		color: rgb(0 0 0 / .5);
	}

	&::part(swatch) {
		/* We need the gamut badge to be placed absolutely relative to the body, not the color swatch */
		display: contents;
	}

	&::part(swatch-base) {
		display: none;
	}

	&::part(gamut) {
		/* Hide the per-picker badges; a single one is shown below, app-wide. */
		display: none;
	}
}

/* One gamut badge for the whole app, pinned to the page's top-right corner
   (driven by the first picker, which shares the color with all the others). */
.picker:first-child color-picker::part(gamut) {
	display: revert;
	position: fixed;
	top: .4rem;
	right: .4rem;
	z-index: 5;
	font-size: clamp(1rem, 2vw, 1.5rem);
}

.out-of-gamut-warning {
	margin-top: .4em;
	color: #b00;
	font-weight: bold;
	font-size: smaller;
	text-transform: initial;
}

	.out-of-gamut-warning::before {
		content: "⚠️ ";
		filter: invert() hue-rotate(-200deg);
	}