table {
	width: 100%;
	width: -moz-available;
	width: -webkit-fill-available;
	width: stretch;
	border-spacing: 0;
	border-collapse: collapse;
	margin-bottom: 1rem;
	font-size: 80%;

	.black, .dark {
		color-scheme: dark;
	}

	.pass, .best {
		--color-tint: var(--color-green);
	}

	.fail, .danger {
		--color-tint: var(--color-red);
	}

	.ok {
		--color-tint: color-mix(in oklch, color-mix(in oklch, var(--color-green) 45%, var(--color-red)) 70%, oklch(100% 0% none));
	}
}

tr {
	:where(.black, .dark) & {
		background: canvas;
		color: canvastext;
	}
}

th, td {
	border-block: 1px solid var(--color-gray-40a);
	padding-inline: .5rem;

	> p:only-child {
		display: contents;
	}
}

th {
	padding-block: .2rem;
	font-family: var(--font-sans);
	--tint-amount: 25%;
	text-align: start;

	:where(thead) & {
		border-block-start: none;
		border-block-end: .15em solid var(--color-gray-60a);
	}

	:where(tbody) & {
		/* background: var(--color-gray-5a); */
		vertical-align: top;
	}

	&:has(.divider) {
		/* Text between two columns */
		position: relative;
		white-space: nowrap;
		font-weight: normal;

		.divider {
			position: absolute;
			background: var(--color-gray-95);
			line-height: 1;
			margin-top: .25em;
			font-weight: bold;

			&.before {
				left: -1px;
				transform: translateX(-50%);
			}

			&.after {
				right: 0;
				transform: translateX(50%);
			}
		}
	}

	&:has(.divider.before) {
		padding-inline-start: 1.8em;
	}

	&:has(.divider.after) {
		padding-inline-end: 1.8em;
	}

	small {
		opacity: .6;
		font-weight: normal;
		display: block;
	}
}

td, tbody th {
	padding-block: .4rem;
	font-variant-numeric: tabular-nums;
	vertical-align: top;
}