.tech-status {
	display: inline-flex;
	align-self: center;
	padding: .35em .5em;
	border-radius: .25em;
	color: white;
	text-transform: uppercase;
	font: 800 calc(.5rem + .15em)/1 var(--font-sans);
	letter-spacing: normal;
	background: var(--color, var(--color-gray-medium));
	white-space: nowrap;
}

:root {
	--color-baseline: color-mix(in oklab, oklch(0 .3 150) 40%, var(--color-green));
	--color-shipped: color-mix(in oklab, oklch(0 .3 150) 20%, var(--color-green));
	--color-flagged: var(--color-green);
	--color-specced: color-mix(in oklab, var(--color-green) 60%, var(--color-yellow));
	--color-resolution: color-mix(in oklab, var(--color-green) 40%, var(--color-yellow));
	--color-proposal: var(--color-cyan);
	--color-superseded: var(--color-gray-60);
	--color-other: var(--color-gray-50);
}

.shipped-baseline {
	--color: var(--color-baseline);
}
.shipped { --color: var(--color-shipped); }
.shipped-flagged,
.shipped.flag {
	--color: var(--color-flagged);
}
.specced { --color: var(--color-specced); }
.resolution { --color: var(--color-resolution); }
.proposal { --color: var(--color-proposal); }
.superseded { --color: var(--color-superseded) }
.other { --color: var(--color-other); }

.status-legend {
	td {
		vertical-align: top;
	}

	details {
		font-size: 80%;
		color: var(--color-gray-40);
		font-family: var(--font-sans);

		summary {
			font-weight: 500;
		}

		ul {
			padding-inline-start: 1em;
			font-size: 85%;
			font-weight: 500;
			color: var(--color-gray-30);

			a:not(:hover) {
				color: inherit;
			}
		}

		code {
			background: transparent;
			font-size: 110%;
			color: var(--color-gray-20);
		}
	}
}

time-line {
	dt:nth-child(n + 3 of dt.shipped:not(.flag)),
	dd:nth-child(n + 3 of dd.shipped:not(.flag)) {
		--color: var(--color-baseline);
	}

	dt, dd {
		--_color: var(--color, var(--color-gray-50));
	}

	dt:hover,
	dt:hover + dd,
	dd:hover,
	dt:has(+ dd:hover) {
		--hover-color: color-mix(in oklab, var(--_color) 0%, oklab(none none none / 15%));
	}

	dt {
		&.chrome,
		&.firefox,
		&.safari {
			&::before {
				content: var(--icon);
				color: var(--browser-color);
				display: inline-block;
				vertical-align: -.1em;
				font: var(--icon-font);
				font-size: 85%;
				margin-right: .25em;
			}
		}
	}
}

.chrome {
	--browser-color: var(--color-green);
	--icon: var(--icon-chrome);
}

.firefox {
	--browser-color: var(--color-orange);
	--icon: var(--icon-firefox);
}

.safari {
	--browser-color: var(--color-cyan);
	--icon: var(--icon-safari);
}

span.flag {
	display: inline-block;
	vertical-align: -0.3em;
	margin-left: -1.3em;
	font: var(--icon-font);
	font-size: 60%;

	&::before {
		content: var(--icon-flag);
		font-weight: 900;
	}
}

.tech {
	h2, h3 {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: .25em;

		&:has(+ .meta) {
			margin-block-end: .4em;
		}
	}
}

.progress {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	margin-block: 1em;
	background: var(--color-gray-95);
	padding: .8em 1em;
	border-radius: .2em;

	&::before {
		content: "Timeline";
		position: absolute;
		left: 50%;
		top: -.8em;
		transform: translateX(-50%);
		background: linear-gradient(to bottom, var(--color-gray-90), var(--color-gray-95));
		padding: .4em .6em;
		border-radius: .2em;
		color: var(--color-gray-60);
		text-transform: uppercase;
		font: 600 75%/1 var(--font-sans);
		letter-spacing: normal;
	}

	.to {
		--_arrow-thickness: var(--arrow-thickness, .1em);
		--_arrow-head-length: var(--arrow-head-length, .6em);

		flex: 1;
		display: flex;
		gap: .2em;
		align-items: center;

		&.y {
			color: color-mix(in oklab, var(--color-red) 80%, canvastext);
		}

		&.d,
		&.w {
			color: color-mix(in oklab, var(--color-green) 80%, canvastext);
		}

		.interval {
			display: flex;
			align-items: baseline;
			gap: .05em;

			.value {
				font-weight: bold;
			}

			.unit {
				font-style: italic;
			}
		}

		&::before,
		&::after {
			content: "";
			background: var(--color-gray-70);
			height: .7em;
			flex: 1;

		}

		&::before {
			height: var(--_arrow-thickness);
		}

		&::after {
			clip-path: polygon(
				0 calc(50% - var(--_arrow-thickness) / 2), 0 calc(50% + var(--_arrow-thickness) / 2),
				calc(100% - var(--_arrow-head-length)) calc(50% + var(--_arrow-thickness) / 2), calc(100% - var(--_arrow-head-length)) 100%,
				100% 50%,
				calc(100% - var(--_arrow-head-length)) 0, calc(100% - var(--_arrow-head-length)) calc(50% - var(--_arrow-thickness) / 2),
				0 calc(50% - var(--_arrow-thickness) / 2)
			);
		}
	}
}

.description {
	margin-block: 1em;
	font-style: italic;
}