/* components/webform: one field under another, the label above its help, error and control; a control of the
   touch target's height with a border in the text colour, the danger colour and a thicker border when invalid;
   the error summary and the answer as boxes with a bar at the start (the danger colour, the accent); the focus
   tokens on every control and on the two boxes when the script moves focus to them. */
@layer components {
	.dv-webform {
		margin-block: var(--space-3);
	}

	.dv-webform-section {
		margin: 0 0 var(--space-3);
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-border);
	}

	.dv-webform-section > legend {
		padding-inline: var(--space-1);
		font-weight: bold;
	}

	.dv-webform-field {
		margin-block: var(--space-3);
	}

	.dv-webform-label {
		display: block;
		font-weight: bold;
	}

	.dv-webform-optional {
		font-weight: normal;
	}

	.dv-webform-help,
	.dv-webform-error {
		margin-block: var(--space-1);
	}

	.dv-webform-error {
		font-weight: bold;
		color: var(--color-danger);
	}

	.dv-webform-input {
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: 30em;
		min-block-size: var(--touch-target);
		padding: var(--space-1) var(--space-2);
		font: inherit;
		color: var(--color-text);
		background: var(--color-background);
		border: 2px solid var(--color-text);
		border-radius: var(--radius-panel);
	}

	.dv-webform-input[aria-invalid="true"] {
		border-color: var(--color-danger);
		border-width: 3px;
	}

	.dv-webform-check,
	.dv-webform-radio {
		inline-size: 1.5em;
		block-size: 1.5em;
		margin-inline-end: var(--space-2);
		vertical-align: middle;
		accent-color: var(--color-accent);
	}

	.dv-webform-field--toggle .dv-webform-label,
	.dv-webform-option label {
		display: inline;
	}

	.dv-webform-option {
		display: flex;
		align-items: center;
		min-block-size: var(--touch-target);
	}

	.dv-webform-errors,
	.dv-webform-answer {
		margin-block: var(--space-3);
		padding: var(--space-2) var(--space-3);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-inline-start: 0.3em solid var(--color-danger);
	}

	.dv-webform-answer {
		border-inline-start-color: var(--color-accent);
	}

	.dv-webform-errors-title {
		margin-block: 0 var(--space-2);
		font-weight: bold;
	}

	.dv-webform-input:focus-visible,
	.dv-webform-check:focus-visible,
	.dv-webform-radio:focus-visible,
	.dv-webform-errors:focus,
	.dv-webform-answer:focus {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
		box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-focus-text);
	}

	.dv-webform-actions {
		margin-block: var(--space-3);
	}

	@media (forced-colors: active) {
		.dv-webform-input[aria-invalid="true"],
		.dv-webform-errors {
			border-color: Mark;
		}
	}
}