/* benchmark.css — minimal styles for the P0 benchmark page. No web fonts. */

:root {
	color-scheme: light;
	--ink: #111;
	--muted: #666;
	--line: #ccc;
	--accent: #0b57d0;
}

* { box-sizing: border-box; }

body {
	font-family: system-ui, sans-serif;
	color: var(--ink);
	background: #fff;
	margin: 0 auto;
	max-width: 72rem;
	padding: 1rem;
	line-height: 1.45;
}

h1 { font-size: 1.35rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; border-bottom: 1px solid var(--line); padding-bottom: 0.2rem; }

.muted { color: var(--muted); }

nav { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

button {
	font: inherit;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--line);
	background: #f6f6f6;
	border-radius: 4px;
	cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.chip {
	display: inline-block;
	font-size: 0.8rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
}

section { margin-bottom: 0.5rem; }

fieldset { border: 1px solid var(--line); border-radius: 4px; margin: 0.5rem 0; display: inline-block; }
fieldset label { display: block; margin: 0.15rem 0; }

label { margin-right: 0.75rem; }
select, input[type="text"] { font: inherit; padding: 0.15rem 0.3rem; }

.cols { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 0.75rem; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; }

.grid { display: grid; gap: 1rem; margin-top: 0.75rem; background: #fff; padding: 0.5rem; }
.code-slot { text-align: center; }
.code-cap { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }
#canvasGrid canvas { image-rendering: pixelated; }

.readout { min-width: 22rem; }

#viewfinder { border: 1px solid var(--line); background: #000; }

.log {
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0.5rem;
	max-height: 14rem;
	overflow-y: auto;
	font-size: 0.85rem;
}
.log p { margin: 0.1rem 0; }

.banner {
	background: #fee2e2;
	border: 1px solid #b91c1c;
	color: #7f1d1d;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	margin: 0.5rem 0;
}

.error { color: #b91c1c; }