/* A band of a form. A heading is told apart by weight, not by size. */
.mf-section {
	--mf-section-label-width: 9rem;

	/* The rows answer to the band's width, not the viewport's: a section in a docked
	   pane is narrow whatever the screen is doing. */
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-3);
	padding-block: var(--mf-space-4);

	/* `display` above beats the [hidden] default, so absence is restated here. */
	&[hidden] {
		display: none;
	}
}

.mf-section-title {
	display: flex;
	align-items: center;
	gap: var(--mf-space-2);
	margin: 0;
	color: var(--mf-color-text);
	font-size: var(--mf-font-size-tiny);
	font-weight: var(--mf-font-weight-strong);
	letter-spacing: var(--mf-track-heading);
	text-transform: uppercase;

	/* Out to the edge: the heading opens a band, it is not a caption. */
	&::after {
		content: "";
		flex: 1 1 auto;
		border-top: var(--mf-border);
	}

	[data-mf-rule="none"] > &::after {
		display: none;
	}
}

.mf-section-index {
	color: var(--mf-color-accent);
}

.mf-section-row {
	display: grid;
	/* The caption never takes more than a third of the band; the control is the row's
	   subject. minmax(0, …) on the control column, or a long offer pushes the row
	   past the panel edge instead of ellipsising inside it. */
	grid-template-columns: min(var(--mf-section-label-width), 35%) minmax(0, 1fr);
	gap: var(--mf-space-3);
	align-items: center;

	/* `display` above beats the [hidden] default, so absence is restated here — a
	   row a form gates off must leave no gap where it stood. */
	&[hidden] {
		display: none;
	}

	/* Full width, so a short offer does not leave a stub where its neighbours reach
	   the edge. */
	& > .mf-picker {
		width: 100%;
	}
}

/* The caption brightens with its row, so pointing at — or tabbing into — either one
   says which control the caption belongs to. */
.mf-section-label {
	color: var(--mf-color-text-muted);
	font-size: var(--mf-font-size-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--mf-transition-fast);
}

.mf-section-row:hover .mf-section-label,
.mf-section-row:focus-within .mf-section-label {
	color: var(--mf-color-text);
}

/* Too narrow to stand side by side: the caption takes the line above its control,
   and the pairing rests on distance alone — tight above, the band's gap below. */
@container (width < 26rem) {
	.mf-section-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mf-space-1);
		padding-block-end: var(--mf-space-2);
	}
}