/**
 * Feature: absorption area and coverage. Removable with the rest of it.
 */

.acoucalc-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin: 18px 0 0;
}

.acoucalc-metric {
	padding: 12px 14px;
	background: var(--ac-canvas);
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius-sm);
}

.acoucalc-metric dt {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ac-ink-soft);
}

.acoucalc-metric dd {
	margin: 4px 0 0;
	font-family: var(--font-500, "Keiner 500", sans-serif);
	font-size: 19px;
	line-height: 1.2;
}

.acoucalc-metric small {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--ac-ink-soft);
}

/*
 * At 150px minimum these fell to one per line, so two figures that belong
 * together became two stacked outlined boxes the width of the screen —
 * indistinguishable from the KPI block above them and from each other. Side
 * by side they read as the pair they are, and with the frames off they stop
 * competing with the headline they annotate.
 */
@media screen and (max-width: 600px) {

	/*
	 * Flattened out to the step body's 16px gutter for the same reason the
	 * core stylesheet does it to the surface list and the derived figures:
	 * a rounded outline here is the third one the reader is looking through
	 * to reach a number, and it is the one carrying the least meaning.
	 */
	.acoucalc-metrics {
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		margin: 16px -16px 0;
		background: var(--ac-line);
		border-width: 1px 0;
		border-style: solid;
		border-color: var(--ac-line);
		border-radius: 0;
		overflow: hidden;
	}

	.acoucalc-metric {
		padding: 14px 16px;
		border: 0;
		border-radius: 0;
	}
}