body {
	font: 100%/1.5 system-ui, sans-serif;
	padding: 1rem;
	max-width: 60rem;
	margin-inline: auto;
}

h1 {
	font-size: 1.5rem;
}

h2 {
	font-size: 1.15rem;
	margin-block-start: 2rem;
}

a {
	color: royalblue;
}

code {
	font-family: ui-monospace, monospace;
	background: color-mix(in oklab, canvastext 8%, canvas);
	padding: 0.1em 0.3em;
	border-radius: 0.25em;
}

table {
	border-collapse: collapse;
	width: 100%;
	margin-block: 1rem;
}

th,
td {
	border: 1px solid color-mix(in oklab, canvastext 20%, canvas);
	padding: 0.4em 0.6em;
	text-align: start;
}

th {
	background: color-mix(in oklab, canvastext 6%, canvas);
	font-size: 0.85rem;
}

/* First column holds the IDL attribute name. */
td:first-child {
	font-family: ui-monospace, monospace;
	font-size: 0.85rem;
	white-space: nowrap;
}

.type {
	white-space: nowrap;
}

/* Pass/fail visuals are driven entirely by data-pass, shared by the table cells
   (.result) and the summary/demo banners (.banner). */
.result {
	text-align: center;
}

:is(.result, .banner)[data-pass="true"] {
	background: color-mix(in oklab, seagreen 25%, canvas);
}

:is(.result, .banner)[data-pass="false"] {
	background: color-mix(in oklab, crimson 25%, canvas);
}

:is(.result, .banner)[data-pass="partial"] {
	background: color-mix(in oklab, goldenrod 30%, canvas);
}

[data-pass="true"]::before {
	content: "✔";
	color: seagreen;
}

[data-pass="false"]::before {
	content: "✘";
	color: crimson;
}

[data-pass="partial"]::before {
	content: "⚠";
	color: darkgoldenrod;
}

[data-pass="na"]::before {
	content: "—";
	color: gray;
}

.banner {
	padding: 0.6em 0.9em;
	border-radius: 0.5em;
	margin-block: 1rem;
}

.banner[data-pass]::before {
	margin-inline-end: 0.4em;
}

#summary {
	font-weight: 700;
}