@import "/lib/css/base-bones.css";
@import "/lib/css/fonts/family-ia-writer-quattro.css";

:root {
	--back: light-dark(oklch(0.92 0.05 80), oklch(0.35 0.08 80));
	--soft: light-dark(oklch(0.97 0.02 80), oklch(0.46 0.11 80));
	--text: light-dark(oklch(0.35 0.08 80), oklch(0.97 0.02 80));
	--edge: oklch(0.70 0.16 80);

	--highlight: light-dark(oklch(0.85 0.12 80), oklch(0.57 0.15 80));
}

html {
	font-size: 120%;
}

body {
	font-family: var(--family-ia-writer-quattro, monospace);
	text-align: center;
	color: var(--text);
	background-color: var(--back);
}

a {
	font-weight: 500;
	color: inherit;
}

:is(a, abbr) {
	text-decoration-color: var(--edge);

	&:hover,
	&:focus {
		color: CanvasText;
		background-color: var(--highlight);
	}
}

strong {
	font-weight: 600;
}

h1 {
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	text-wrap: balance;
	color: CanvasText;
}

h2 {
	margin-block: 2rem 1rem;
	font-size: 1.2rem;
	font-weight: 700;
	text-wrap: balance;
}

.benchmark-heading {
	margin-inline: -1rem;
	margin-block: 1rem;
	padding: 1em;
	text-wrap: balance;
	background-color: var(--soft);
	border-block: 2px solid var(--edge);
}

#run-btn {
	margin-block: 1rem;
	padding: 1rem 2rem;
	font-size: 1.2rem;
	font-weight: 600;
	color: inherit;
	background-color: var(--soft);
	border: 2px solid var(--edge);
	border-radius: 999px;
	box-shadow: 0 4px 8px -2px rgb(0 0 0 / 0.1);

	&:hover,
	&:focus {
		color: CanvasText;
		background-color: var(--highlight);
	}
}

#graph {
	width: 100%;
	height: 220px;
	margin-block: 1rem;
	text-align: center;
	border: 1px solid var(--edge);
	border-width: 0 0 1px 1px;
}

table {
	display: none;
	table-layout: fixed;
	margin-inline: auto;
	margin-block: 1rem;
	width: 100%;
	max-width: 55ch;
	margin-inline: auto;
	text-align: end;
	background-color: var(--soft);
}

th,
td {
	padding: 0.3em 0.6em;
	border: 1px solid var(--edge);
}

th {
	text-align: center;
	color: CanvasText;
	background-color: var(--highlight);

	abbr {
		text-decoration-color: var(--text);
	}
}

.tr-benchmark {
	font-weight: 700;
}

.tr-loading {
	text-align: center;
	font-style: italic;
	text-wrap: balance;
}

dt,
dd {
	display: inline;
	margin: 0;
}
dt {
	font-weight: 600;
}

.prose {
	width: 100%;
	max-width: 55ch;
	margin-inline: auto;
	line-height: 1.5;
	text-align: start;
	text-wrap: pretty;
}

[disabled] {
	opacity: 0.7;
}

hr {
	margin-block: 3rem;
	border: 0;
	border-top: 1px solid var(--edge);
}

footer {
	margin-block: 3rem;
	font-size: 0.75rem;
	color: var(--text);
}