/* The value column needs a floor of its own: a long label reaching for max-content starves
   it, and `overflow-wrap: anywhere` then breaks "26.097 L☉" across three lines. */
.mf-readout {
	display: grid;
	grid-template-columns: minmax(8em, max-content) minmax(7em, 1fr);
	gap: var(--mf-space-1) var(--mf-space-4);
	font-size: var(--mf-font-size-small);
}

.mf-readout-label {
	color: var(--mf-color-text-muted);
	letter-spacing: var(--mf-track-caption);
	text-transform: uppercase;
}

.mf-readout-value {
	color: var(--mf-color-text);
	overflow-wrap: anywhere;
}