/**
 * Structure only.
 *
 * Typography, colour, borders and spacing are left to the Bricks style
 * controls on the element, which generate their own CSS. Anything set here
 * that Bricks also exposes would have to be fought with !important, so this
 * file sticks to layout mechanics that have no control equivalent.
 */

/* Flex rather than grid: the parts are optional — heading, footnote and the
   "too few results" notice come and go — and explicit grid rows break as soon
   as one of them is absent. Wrapping flex items place themselves correctly
   whichever subset is present. */
.lonestatistik {
	--lonestat-form-width: 20rem;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-m, 1.5rem);
}

.lonestatistik__heading,
.lonestatistik__footnote,
.lonestatistik__notice {
	flex: 0 0 100%;
}

.lonestatistik__heading {
	order: 0;
}

.lonestatistik__footnote,
.lonestatistik__notice {
	order: 3;
}

.lonestatistik--layout-left .lonestatistik__form,
.lonestatistik--layout-right .lonestatistik__form {
	flex: 0 0 var(--lonestat-form-width);
	max-width: 100%;
}

.lonestatistik--layout-left .lonestatistik__results,
.lonestatistik--layout-right .lonestatistik__results {
	flex: 1 1 0;
}

.lonestatistik--layout-left .lonestatistik__form {
	order: 1;
}

.lonestatistik--layout-left .lonestatistik__results {
	order: 2;
}

/* Visual order only — the form stays first in the DOM for keyboard and
   screen-reader order. */
.lonestatistik--layout-right .lonestatistik__form {
	order: 2;
}

.lonestatistik--layout-right .lonestatistik__results {
	order: 1;
}

.lonestatistik--layout-top .lonestatistik__form,
.lonestatistik--layout-top .lonestatistik__results {
	flex: 0 0 100%;
}

.lonestatistik--layout-top .lonestatistik__form {
	order: 1;
}

.lonestatistik--layout-top .lonestatistik__results {
	order: 2;
}

@media (max-width: 767px) {
	.lonestatistik .lonestatistik__form,
	.lonestatistik .lonestatistik__results {
		flex: 0 0 100%;
	}

	.lonestatistik--layout-right .lonestatistik__form {
		order: 1;
	}

	.lonestatistik--layout-right .lonestatistik__results {
		order: 2;
	}
}

.lonestatistik__form {
	display: grid;
	gap: var(--space-2xs, 0.75rem);
	align-content: start;
}

.lonestatistik__field {
	display: grid;
	gap: 0.25em;
}

.lonestatistik__select {
	width: 100%;
	max-width: 100%;
}

.lonestatistik__results {
	display: grid;
	gap: var(--space-s, 1rem);
	align-content: start;
	min-width: 0;
}

.lonestatistik__figures {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25em 1.5em;
	margin: 0;
}

.lonestatistik__figures dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.lonestatistik__subheading,
.lonestatistik__basis,
.lonestatistik__hint,
.lonestatistik__footnote {
	margin: 0;
}

.lonestatistik__notice {
	padding: 0.75em 1em;
	border: 1px dashed currentColor;
	opacity: 0.65;
	font-size: 0.9em;
}