.DebugHeader {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--SpaceM);
	align-items: start;
}

.DebugFacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--SpaceM);
	margin-top: var(--SpaceL);
}

.DebugFacts div {
	display: grid;
	gap: var(--Space2XS);
	padding: var(--SpaceS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.66);
}

.DebugFacts dt {
	color: var(--ColorMuted);
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
}

.DebugFacts dd {
	color: var(--ColorInk);
	font-weight: 800;
	overflow-wrap: anywhere;
}

.DebugOutput {
	display: grid;
	gap: var(--SpaceS);
	padding: var(--SpaceM);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.72);
}

.DebugOutput pre {
	min-height: 12rem;
	max-height: 28rem;
	overflow: auto;
	padding: var(--SpaceS);
	border: 1px solid color-mix(in srgb, var(--ColorHairline) 78%, var(--ColorInk));
	border-radius: var(--RadiusSmall);
	background: color-mix(in srgb, var(--ColorInk) 94%, white);
	color: #f6fbfb;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.82rem;
	line-height: 1.45;
	white-space: pre-wrap;
}

@media (max-width: 720px) {
	.DebugHeader {
		grid-template-columns: 1fr;
	}
}