/* components/meeting-list: per group a heading and its meetings as plain native checkboxes, one under the other,
   each with its label beside it (Tim, 2026-10-15: "simpeler en minder foutgevoelig"). The checkbox is the
   browser's own, in the accent colour (accent-color) at 1.25em of the text, so forced colours, zoom and every
   screen reader get what they know; a row is at least the touch target high and its label ticks the box too, so
   the whole row is the target. Focus is the kit's outline round the box; an invalid checkbox gets an outline in
   the danger colour. */
@layer components {
	.dv-meeting-list {
		margin-block: var(--space-3);
	}

	.dv-meeting-list-hint,
	.dv-meeting-list-error,
	.dv-meeting-list-status {
		margin-block: var(--space-2);
	}

	.dv-meeting-list-error,
	.dv-meeting-list-status {
		font-weight: bold;
		color: var(--color-danger);
	}

	.dv-meeting-list-status:empty {
		display: none;
	}

	/* A group is a fieldset only for the ear: no frame, the legend a plain heading. */
	.dv-meeting-list-group {
		min-inline-size: 0;
		margin: var(--space-3) 0 0;
		padding: 0;
		border: 0;
	}

	.dv-meeting-list-group > legend {
		padding: 0;
	}

	.dv-meeting-list-heading {
		margin-block: 0 var(--space-1);
	}

	.dv-meeting-list-options {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dv-meeting-list-options > li {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-block-size: var(--touch-target);
	}

	.dv-meeting-list-toggle {
		flex: none;
		inline-size: 1.25em;
		block-size: 1.25em;
		margin: 0;
		accent-color: var(--color-accent);
		cursor: pointer;
	}

	.dv-meeting-list-toggle:focus-visible {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
	}

	.dv-meeting-list-toggle[aria-invalid="true"]:not(:focus-visible) {
		outline: 2px solid var(--color-danger);
		outline-offset: 2px;
	}

	.dv-meeting-list-label {
		flex: 1;
		padding-block: var(--space-1);
		cursor: pointer;
	}

	/* The list's own heading (a subheading of the form, as its sections have), the line under it ending in the
	   maximum, "(maximaal 4)". */
	.dv-meeting-list-title {
		margin-block: var(--space-3) var(--space-2);
	}

	/* Where the list is wide enough a group is one row (Tim, 2026-10-15: "links de headings rechts de 4
	   selectievakjes, zo wordt het compacter"): the heading on the left, its checkboxes on the right, in as many
	   columns as fit. Measured on the list's own width (a container query), not the screen's, so it holds in any
	   column; narrower, as on a phone, the heading stands above its checkboxes. The legend is floated, the one way
	   a legend takes part in the fieldset's layout; the list beside it is a grid, so it stays clear of the float. */
	.dv-meeting-list {
		container-type: inline-size;
	}

	@container (inline-size >= 36rem) {
		.dv-meeting-list-group {
			display: flow-root;
			margin-block-start: var(--space-2);
			padding-block-start: var(--space-2);
			border-block-start: 1px solid var(--color-border);
		}

		.dv-meeting-list-group > legend {
			float: inline-start;
			box-sizing: border-box;
			inline-size: 12em;
			max-inline-size: 35%;
			padding-inline-end: var(--space-3);
		}

		.dv-meeting-list-heading {
			margin-block: var(--space-1) 0;
		}

		.dv-meeting-list-options {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr));
			column-gap: var(--space-3);
		}
	}
}