/* @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.css"); */
@import url("client_modules/bootstrap-icons/font/bootstrap-icons.css");
@import url("client_modules/@inspirejs/core/inspire.css") layer(inspire);
@import url("css/theme/tokens.css") layer(theme);
@import url("css/theme/theme.css") layer(theme);
@import url("css/fonts.css") layer(theme);
@import url("css/theme.css") layer(theme);
@import url("css/utils.css") layer(theme);
@import url("client_modules/color-elements/src/color-slider/color-slider.css") layer(theme);
@import url("css/displays.css");
@import url("css/callouts.css");

@keyframes cover {
	to {
		background-position-x: -200%;
	}
}

:root {
	--p3-red: color(display-p3 1 0 0);
	--p3-green: color(display-p3 0 1 0);
	--p3-blue: color(display-p3 0 0 1);
	--p3-cyan: color(display-p3 0 1 1);
	--p3-magenta: color(display-p3 1 0 1);
	--p3-yellow: color(display-p3 1 1 0);
}

@function --clamp-l(--color <color>, --max-l <number>) returns <color> {
	--avoid-ugly-yellows: if(style(h > 85): max(h, 110), min(h, 85));
	result: oklch(from var(--color) clamp(0, l, var(--max-l)) c var(--avoid-ugly-yellows, h));
}

#intro {
	color-scheme: dark;

	background: linear-gradient(to right in oklch,
		--clamp-l(var(--p3-red), 0.8),
		--clamp-l(var(--p3-yellow), 0.8),
		--clamp-l(var(--p3-green), 0.8),
		--clamp-l(var(--p3-cyan), 0.8),
		--clamp-l(var(--p3-blue), 0.8),
		--clamp-l(var(--p3-magenta), 0.8),
		--clamp-l(var(--p3-red), 0.8)
	) fixed;
	background-size: 200% 100%;
	animation: cover 20s linear infinite;
	overflow: clip;
	justify-content: space-around;

	.content {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		position: relative;
		justify-self: center;
		z-index: 3;
		transition-duration: 1s;

		h1 {
			position: relative;
			font-size: 20vmin;
			line-height: 1;
			letter-spacing: -.02em;
			text-shadow: .03em .03em black;
		}
	}

	.by {
		text-align: center;
		color-scheme: light;
		color: canvastext;
		font-size: 150%;
		background: white;
		align-self: center;
		padding-inline: 3rem;
		padding-block: .5rem 1.5rem;
		box-shadow: .5rem .5rem black;
		corner-shape: bevel;
		border-radius: 3rem / 100% 0 100% 0;

		> a {
			font-weight: bold;
			letter-spacing: -.01em;
		}

		small {
			display: block;
			font-size: 50%;
			font-weight: 500;
		}
	}

	.raining-words {
		code {
			background: none;
			padding: 0;
			font-size: 200%;
			font-weight: bold;
			color: white;

			&.s {
				font-size: 80%;
			}

			&.m {
				font-size: 150%;
			}

			&:not(.s, .m) {
				z-index: 2;
				color: black;
			}

			.token.function {
				color: inherit;
			}

			.token.punctuation {
				color: inherit;
				opacity: .5;
			}
		}
	}
}

footer.slide#end {
	gap: 0;
	padding-top: 1.5rem;

	h2 {
		margin-bottom: 0;
		font-family: var(--font-handwritten);
		color: var(--color-magenta);
	}

	.slides {
		margin: 0 0 1rem 0;
		font-size: var(--font-size-s);

		.bi {
			color: var(--color-yellow);
		}
	}

	.colorjs {
		font-size: var(--font-size-xs);

		a {
			font-weight: bold;
			color: var(--color-cyan);
		}

		ul {
			margin: 0;
			font-size: 80%;
		}
	}

	.info {
		list-style: none;
		flex: 1.5;
		font-weight: 600;
		font-size: var(--font-size-s);

		li {
			white-space: nowrap;
		}
	}

	.bi {
		color: var(--color-magenta);
	}

	.bi-bluesky {
		color: var(--color-blue);
	}

	.bi-mastodon {
		color: var(--color-purple);
	}
}

:where(color-picker) {
	min-width: 70%;
	min-height: 70%;
}

#not-as-pictured {
	display: grid;
	grid: 1fr / 1fr;
	align-items: center;
	justify-items: center;
	background: var(--color-cyan);

	img {
		grid-area: 1 / 1;
		/* position: absolute;
		top: calc(2em * sibling-index());
		left: calc(2em * sibling-index()); */
		margin: 1em;
		box-shadow: .1em .1em 1em rgba(0,0,0,.8);
		max-width: 80%;

		&:nth-child(odd) {
			rotate: 2deg;

		}

		&:nth-child(even) {
			rotate: -1deg;

		}

		&:nth-child(3n + 3) {
			justify-self: end;
		}

		&:nth-child(3n + 2) {
			justify-self: start;
		}

		&:nth-child(5n + 3) {
			align-self: end;
		}

		&:nth-child(5n + 4) {
			align-self: start;
		}
	}
}

.displays.slide {
	background: var(--color-neutral-95);

	.flex {
		--color-displayed: color(var(--rgb-space, srgb) var(--r) var(--g) var(--b));
		--color-displayed-r: color(var(--rgb-space, srgb) var(--r) 0 0);
		--color-displayed-g: color(var(--rgb-space, srgb) 0 var(--g) 0);
		--color-displayed-b: color(var(--rgb-space, srgb) 0 0 var(--b));
	}

	.display {
		--color: var(--color-displayed);
		--subpixel-r: color-mix(in srgb, var(--_red) calc(var(--r, 1) * 100%), black);
		--subpixel-g: color-mix(in srgb, var(--_green) calc(var(--g, 1) * 100%), black);
		--subpixel-b: color-mix(in srgb, var(--_blue) calc(var(--b, 1) * 100%), black);
	}

	label:has(> .color-slider) {
		flex: 1;
	}

	.color-slider {
		--slider-gradient: linear-gradient(to right, black, var(--max-color));
		--slider-height: .5em;
		--slider-thumb-height: 1em;
		--color: white;

		&[name="r"] {
			--color: color(display-p3 var(--r) 0 0);
		}
		&[name="g"] {
			--color: color(display-p3 0 var(--g) 0);
		}
		&[name="b"] {
			--color: color(display-p3 0 0 var(--b));
		}
	}

	label {
		/* font-size: var(--font-size-s); */
		text-transform: uppercase;
		font-weight: bold;
		color: oklch(from var(--max-color) clamp(0, l, 0.6) calc(c * .7) h);
		--max-color: var(--color-neutral);

		&.r {
			--max-color: var(--p3-red);
		}
		&.g {
			--max-color: var(--p3-green);
		}
		&.b {
			--max-color: var(--p3-blue);
		}
	}
}

.slide:has(> .browser:only-child) {
	padding: 0;
}

.slide > .browser:first-child:has( + details.notes:last-child) {
	width: 90%;
	height: 100%;
}

#device-rgb-2 {
	.display {
		--color: color(display-p3 1 0 0.4);
		--count: 8;
		--display-img: linear-gradient(to right in srgb,
			var(--_red) calc(100% / var(--count)),
			var(--_yellow) 0 calc(100% / var(--count) * 2),
			var(--_green) 0 calc(100% / var(--count) * 3),
			var(--_cyan) 0 calc(100% / var(--count) * 4),
			var(--_blue) 0 calc(100% / var(--count) * 5),
			var(--_magenta) 0 calc(100% / var(--count) * 6),
			var(--_gray) 0 calc(100% / var(--count) * 7),
			var(--white, white) 0
		);
	}
}

#standardized-rgb,
#standardized-rgb-2 {
	.display {
		--color: color(display-p3 1 0 0.4);

		&.mba2013 {
			--color: var(--_magenta);
		}

		img {
			/* height: 2em; */
			width: 5rem;
			/* aspect-ratio: 1.65964566; */
		}
	}

	thead tr:first-child {
		th {
			background: none;
			border: none;
		}

		figure {
			padding: 0;
			color: canvastext;
			font-weight: bold;

			small {
				display: block;
				color: var(--color-neutral);
				font-weight: 500;
			}
		}
	}

	td, thead th {
		text-align: center;
	}

	:where(&) td {
		font-weight: 500;
	}

	.delayed.future {
		&, * {
			border: none;
		}
	}
}

.scales.slide {
	color-scale {
		position: relative;

		&::part(swatch) {
			flex: 1;
		}

		&::part(swatch-label) {
			text-align: center;
			font-size: 50%;
			font-family: var(--font-monospace);
		}

		.distances {
			position: absolute;
			inset-inline: calc(50% / var(--num-colors));
			inset-block-start: 1.5em;
			display: flex;
			text-shadow: 0 1h white;
			font-weight: 600;
			font-size: 80%;

			> .distance {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: canvastext;
				gap: .2em;


				--arrow-thickness: .12em;
				--arrow-y: 52%;

				&::before,
				&::after {
					flex: 1;
					background: linear-gradient(to bottom, transparent calc(var(--arrow-y) - var(--arrow-thickness)/2), currentColor 0 calc(var(--arrow-y) + var(--arrow-thickness)/2), transparent 0) no-repeat;
					background-size: calc(100% - .2em) 100%;
				}

				&::before {
					content: "←";
					/* background-color: yellow; */
					background-position: right;
				}

				&::after {
					content: "→";
					/* background-color: cyan; */
					text-align: end;
					background-position: left;
				}

				> div {
					display: flex;
					flex-flow: column;

					> span {
						display: flex;
						flex-flow: row;
						gap: .3em;

						&::before {
							opacity: .6;
						}
					}

					.coords-d::before {
						content: "d:"
					}

					.deltae::before {
						content: "ΔE:"
					}
				}
			}
		}
	}
}

.gradient {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	color: white;
	-webkit-text-stroke: .15em black;
	stroke-linejoin: round;
	stroke-linecap: round;
	text-shadow: .07em .08em black;
	paint-order: stroke fill;
	background: var(--gradient, linear-gradient(var(--params, to right), var(--stops, white, black)));
	border-radius: 0;

	:where(&) {
		height: 5em;
		align-self: stretch;
	}
}

#humans-colors {
	.quotes {
		max-width: 70vw;

		> * {
			text-wrap: balance;
		}

		q {
			font-style: italic;
		}

		> :last-child:is(.displayed, .current:has(.current)) q {
			color: var(--color-neutral);
			text-decoration: line-through;
		}
	}

	.swatch {
		code {
			font-size: 70%;
			padding: 0;
			background: none;
			font-weight: bold;
		}
	}
}

.callout-demos {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5em 2em;


	> div {
		display: grid;
		grid-template-columns: subgrid;
		grid-column-end: span 2;
		gap: .5em 1em;
		align-items: start;

		.callout {
			min-width: 25vw;
		}
	}
}

.palette {
	& table, table& {
		tbody {
			.swatch {
				display: flex;
			}

			thead th {
				font-weight: 700;
			}

			tbody th {
				padding: 0;
			}

			/* Each row owns its tint scale, so both the swatches and the
			   callout demo in that row consume the same --color-N tokens. */
			tr {
				--color-90: oklch(from var(--color) var(--l-90) c h);
				--color-80: oklch(from var(--color) var(--l-80) c h);
				--color-70: oklch(from var(--color) var(--l-70) c h);
				--color-60: oklch(from var(--color) var(--l-60) c h);
				--color-50: oklch(from var(--color) var(--l-50) c h);
				--color-40: oklch(from var(--color) var(--l-40) c h);
				--color-30: oklch(from var(--color) var(--l-30) c h);
				--color-20: oklch(from var(--color) var(--l-20) c h);
				--color-10: oklch(from var(--color) var(--l-10) c h);
			}

			td {
				padding-block: 0;
				padding-inline: .3em;

				.swatch {
					--color: var(--tint);
				}
			}

			td:nth-of-type(1) { --tint: var(--color-90); }
			td:nth-of-type(2) { --tint: var(--color-80); }
			td:nth-of-type(3) { --tint: var(--color-70); }
			td:nth-of-type(4) { --tint: var(--color-60); }
			td:nth-of-type(5) { --tint: var(--color-50); }
			td:nth-of-type(6) { --tint: var(--color-40); }
			td:nth-of-type(7) { --tint: var(--color-30); }
			td:nth-of-type(8) { --tint: var(--color-20); }
			td:nth-of-type(9) { --tint: var(--color-10); }

			.callout {
				padding-block: .5em;
				font-size: 50%;
			}

				> i {
					grid-row: 1;
				}
		}
	}
}

/*
 * color-mix() variant of the palette: instead of varying lightness at constant
 * chroma, each tint is the key color naively mixed with white (lighter columns)
 * or black (darker columns). Mixing toward white/black desaturates as it
 * lightens/darkens — exactly the "washed out" problem the slide demonstrates.
 */
.color-mix {
	& table, table& {
		/* Override only the row's tint scale; the swatch ↔ column mapping
		   and the callout demo are inherited from .palette unchanged. */
		tbody tr {
			--color-90: color-mix(in oklab, white 85%, var(--color));
			--color-80: color-mix(in oklab, white 65%, var(--color));
			--color-70: color-mix(in oklab, white 45%, var(--color));
			--color-60: color-mix(in oklab, white 22%, var(--color));
			--color-50: var(--color);
			--color-40: color-mix(in oklab, black 22%, var(--color));
			--color-30: color-mix(in oklab, black 45%, var(--color));
			--color-20: color-mix(in oklab, black 65%, var(--color));
			--color-10: color-mix(in oklab, black 85%, var(--color));
		}
	}
}

@property --offset {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

#why {
	h2 {
		font-size: var(--font-size-4xl);
		translate: calc(-4 * var(--offset)) calc(-4 * var(--offset));
		text-shadow:
			var(--offset) var(--offset) 0 var(--color-red),
			calc(var(--offset) * 2) calc(var(--offset) * 2) 0 var(--color-orange),
			calc(var(--offset) * 3) calc(var(--offset) * 3) 0 var(--color-yellow),
			calc(var(--offset) * 4) calc(var(--offset) * 4) 0 var(--color-green),
			calc(var(--offset) * 5) calc(var(--offset) * 5) 0 var(--color-cyan),
			calc(var(--offset) * 6) calc(var(--offset) * 6) 0 var(--color-blue),
			calc(var(--offset) * 7) calc(var(--offset) * 7) 0 var(--color-indigo),
			calc(var(--offset) * 8) calc(var(--offset) * 8) 0 var(--color-purple),
			calc(var(--offset) * 9) calc(var(--offset) * 9) 0 var(--color-magenta)
			;
		/* transition: 1s; */
		animation: offset 1s both infinite alternate;
	}

	&:target > h2 {
		/* --offset: .05em; */
	}
}

@keyframes offset {
	to {
		--offset: .05em;
	}
}

.property.token.has-color,
.property.token.has-image {
	position: relative;

	&::before {
		content: "";
		position: absolute;
		right: 100%;
		margin-right: .8em;
		width: var(--swatch-width, 2lh);
		height: 1lh;
		background-image: var(--computed-image);
		background-color: var(--computed-color);

		@supports (corner-shape: bevel) {
			border-radius: 0 .5em .5em 0 / 50%;
			corner-shape: bevel;
			margin-right: .3em;
		}

	}
}

.hsl-gm {
	padding-top: 2lh;
	align-items: end;

	header {
		position: absolute;
		inset: 1em;
		inset-block-end: auto;
		display: flex;
		gap: 2em;
		align-items: center;
	}

	.callout {
		font-size: 70%;
		flex: 1;

		--color-70: oklch(from color-mix(in oklch, var(--color), var(--color-90) 50%) var(--l-70) c h);
		--color-30: oklch(from var(--color) var(--l-30) c h);
		border-width: 0px;
	}

	pre {
		font-size: 75%;
		line-height: 2;
		max-width: 80vw;

		/* n = 2 */
		&:has(code:nth-of-type(5)) {
			font-size: 70%;
			line-height: 1.8;
			transition: .2s;
			transition-property: font-size, line-height;
		}

		/* n = 3 */
		&:has(code:nth-of-type(6)) {
			font-size: 60%;
			line-height: 1.7;
		}

		/* n = 4 */
		&:has(code:nth-of-type(7)) {
			font-size: 50%;
			line-height: 1.6;
		}

		/* n = 5 */
		&:has(code:nth-of-type(8)) {
			font-size: 40%;
			line-height: 1.5;
		}

		&:has(code:nth-of-type(9)) {
			font-size: 30%;
		}
	}

	.pre-container:has(pre > code:nth-of-type(9)) {
		column-count: 2;
	}

}

.stepper {
	display: flex;
	gap: .3em;
	align-items: center;

	button {
		line-height: 1;
	}

	strong {
		font-weight: 900;
	}
}

.space-picker {
	> label {
		border-radius: var(--radius-s);
		padding: .2em .5em;

		input {
			position: absolute;
			opacity: 0;
		}

		&:has(:checked) {
			border: 2px solid var(--color-blue);
			background: var(--color-blue-90);

		}
	}
}

.show-images.slide {
	/* h2 {
		position: absolute;
		top: 1rem;
		left: 1rem;2
	} */
	--swatch-width: 6lh;

	.pickers {
		order: 2;
	}

	label.flex {
		display: flex;
		flex-direction: column;
		align-self: stretch;
		font-size: 1rem;
	}

	pre {
		align-self: end;
		margin-left: var(--swatch-width);
	}

	color-picker {
		font-size: .5rem;
		/* height: 5em; */
		margin-bottom: 1rem;
		min-height: 0;

		&::part(channel-slider) {
			flex: 1;
		}

		&::part(swatch),
		&::part(color-space),
		&::part(spinner),
		&::part(channel-info) {
			display: none;
		}
	}
}

.fromto-swatches {
	justify-content: center;

	.arrow {
		font-size: 3rem;
		flex: none;
	}

	color-swatch {
		flex: 1;
		contain: initial;
		container-type: initial;
		font-family: var(--font-monospace);

		&::part(swatch) {
			width: 100%;
		}
	}
}