/**
 * ILM Forms -- form field presentation.
 *
 * Loaded only where a Forms component renders: every field declares this
 * stylesheet as a Core asset, and Core enqueues an asset only for the
 * components a document actually contains. No page without a form field
 * receives a byte of it.
 *
 * A baseline, not a design. Fields inherit the site's typeface, size and
 * colour from wherever they are placed, and draw their boxes in
 * `currentColor`, so a form on a dark section is legible without anybody
 * styling it. Everything an author sets -- the field's outer spacing, width
 * and visibility, and from 1.7.0 its label, control, placeholder, help,
 * options, error and button (`Fields\Parts`) -- compiles through Core to one
 * hashed class per instance, repeated three times, and so outranks every
 * single-class rule here without `!important`.
 *
 * ## Owning the elements it draws (1.7.0)
 *
 * The rules below set every property a surrounding stylesheet commonly sets
 * on these elements and that would otherwise change what a field is:
 * Bootstrap Reboot floats a `<legend>` and gives it a heading size, prose
 * stylesheets give a `<p>` a margin and a line height, and a theme's
 * control baseline gives an `<input>` its own border. A class here beats an
 * element selector anywhere, so a field looks the same in a Builder
 * document, in classic content through `[ilm_form]`, and under a theme that
 * is not ILM's. Nothing is reset wholesale -- no `all: initial` -- so the
 * inherited typeface, size and colour still arrive.
 */

.ilm-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0 0 1rem;
	min-width: 0;
	line-height: 1.4;
}

/* A choice group is a real <fieldset>; take away only its default chrome. */
fieldset.ilm-field {
	border: 0;
	padding: 0;
	margin-inline: 0;
}

.ilm-field__label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
}

/*
 * A group's <legend> is the same label. Reboot and several themes float a
 * bare `legend`, stretch it to the full width and give it a heading's size;
 * a legend here is a label, and says so -- without ceasing to be a legend.
 */
legend.ilm-field__label {
	float: none;
	width: auto;
	max-width: 100%;
	margin-block-end: 0.375rem;
}

.ilm-field__required {
	color: inherit;
	opacity: 0.8;
}

.ilm-field__control {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	box-shadow: none;
}

.ilm-field__control:hover {
	border-color: color-mix(in srgb, currentColor 70%, transparent);
}

/* A select is as tall as the inputs beside it. Its list stays the system's. */
select.ilm-field__control {
	min-height: calc(1.4em + 1rem + 2px);
}

.ilm-field__control::placeholder {
	color: inherit;
	opacity: 0.6;
}

textarea.ilm-field__control {
	resize: vertical;
}

.ilm-field__control--file {
	padding: 0.375rem 0;
	border: 0;
}

.ilm-field__control--file:hover {
	border-color: transparent;
}

.ilm-field__control--file::file-selector-button {
	margin-inline-end: 0.75rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ilm-field__options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.ilm-field__options--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

/*
 * An option: the native control, then its words, aligned on the first line.
 * The control keeps the browser's own size and shape -- its hit area is the
 * whole label -- and only its colour is authorable (`accent-color`).
 */
.ilm-field__option {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.ilm-field__option input {
	flex: 0 0 auto;
	margin: 0.2em 0 0;
}

.ilm-field__option-label {
	min-width: 0;
}

.ilm-field__help {
	margin: 0;
	font-size: 0.875em;
	line-height: 1.4;
	opacity: 0.85;
}

/* A Submit Button sits at the start of its row unless its field says otherwise. */
.ilm-field--submit {
	align-items: flex-start;
}

.ilm-field__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.625rem 1.25rem;
	border: 2px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.ilm-field__submit:hover:not(:disabled) {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

/*
 * Outlined in the surrounding text colour rather than filled: a filled button
 * needs a second colour for its label, and any colour chosen here is wrong on
 * somebody's dark section. An author who wants a filled button styles it with
 * the design settings or a class.
 */

.ilm-field--full .ilm-field__submit {
	align-self: stretch;
}

/*
 * Keyboard focus is always visible, whatever the theme does to outlines and
 * whatever an author sets: a focus design can add a border colour, a
 * background or a ring, and there is no setting that removes this outline.
 */
.ilm-field__control:focus-visible,
.ilm-field__option input:focus-visible,
.ilm-field__submit:focus-visible,
.ilm-field__control--file:focus-visible::file-selector-button {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Words for assistive technology that sighted readers get from the asterisk. */
.ilm-field__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The form an embed draws around a published form (1.5.0). A boundary, not a
 * design: it adds nothing to the fields' own spacing, and a page's layout
 * decides its width.
 */
.ilm-form {
	display: block;
	min-width: 0;
	margin: 0;
}

/*
 * A field whose conditional rules do not hold for the form's initial values
 * (1.5.0). Hidden from sight and from assistive technology until the browser
 * client (1.6.0) shows it; the server judges every submission regardless.
 */
.ilm-field.ilm-field--inactive {
	display: none;
}

/*
 * Conditional content (1.17.0): shown or hidden by a form's answers, and
 * otherwise invisible to layout -- its children are laid out as if it were
 * not there. `hidden` is the browser client's switch, set by the server for
 * the first paint; it must win over `display: contents`.
 */
.ilm-form-content {
	display: contents;
}

.ilm-form-content[hidden] {
	display: none;
}

/*
 * A Field Group (1.21.0): a real <fieldset> around its fields, with its
 * title as the <legend>. Its default chrome goes, as a choice group's does;
 * its fields keep their own spacing, so a group's fields sit exactly as
 * they would outside it.
 */
.ilm-form-group {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	line-height: 1.4;
}

.ilm-form-group__title {
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0 0 0.375rem;
	padding: 0;
	font-size: 1.0625em;
	font-weight: 700;
	line-height: inherit;
}

.ilm-form-group__description,
.ilm-form-group__instructions,
.ilm-form-group__progress {
	margin: 0 0 0.75rem;
	font-size: 0.875em;
	line-height: 1.4;
	opacity: 0.85;
}

.ilm-form-group__progress {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.ilm-form-group__progress[hidden] {
	display: none;
}

/* A group whose rule is not met: a rule beside it, not colour alone. */
.ilm-form-group--invalid {
	padding-inline-start: 0.75rem;
	border-inline-start: 3px solid currentColor;
}

/*
 * The editor's lines -- "Drag fields here" and the rule in words -- are in
 * the markup of both editor frames and drawn only in the editing one, the
 * canvas (`body.ilm-canvas`). A page never has them at all.
 */
.ilm-form-group__empty,
.ilm-form-group__summary {
	display: none;
}

.ilm-canvas .ilm-form-group__empty {
	display: block;
	margin: 0;
	padding: 1rem;
	border: 1px dashed rgba(56, 88, 233, 0.5);
	border-radius: 2px;
	background: rgba(56, 88, 233, 0.04);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.8125rem;
	text-align: center;
	color: #1e1e1e;
}

.ilm-canvas .ilm-form-group__summary {
	display: block;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.75rem;
	color: #3858e9;
}

/*
 * A Submit Button the browser client has not taken over (1.5.0) -- it stays
 * disabled if the client never arrives -- or one waiting for an answer.
 * Dimmed and marked by the cursor, so it never looks like a button that
 * will do something.
 */
.ilm-field__submit:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/*
 * Sending (1.7.0): the button stays dimmed and shows a small turning ring
 * beside its words. The words "Sending…" are announced by the client's
 * status region, which is what assistive technology reads; this is the same
 * news for everybody else. It does not turn for a reader who asked for less
 * motion -- the ring is drawn and stays still.
 */
.ilm-form[aria-busy="true"] .ilm-field__submit:disabled {
	cursor: progress;
}

.ilm-form[aria-busy="true"] .ilm-field__submit:disabled::after {
	content: "";
	flex: 0 0 auto;
	width: 0.9em;
	height: 0.9em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: ilm-form-busy 0.8s linear infinite;
}

@keyframes ilm-form-busy {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ilm-form[aria-busy="true"] .ilm-field__submit:disabled::after {
		animation: none;
	}
}

/*
 * What the browser client adds (1.6.0; presented from 1.7.0). Legible in the
 * surrounding colour like everything above, and marked by words, weight, a
 * bar and a heavier border rather than by a hue alone -- a red chosen here
 * would be unreadable on somebody's dark section. An author who wants a
 * colour sets one: the field's Error message part, and the placed form's
 * Messages.
 */

/* A problem with one field, under it, named by its aria-describedby. */
.ilm-field__error {
	margin: 0;
	padding-inline-start: 0.5rem;
	border-inline-start: 3px solid currentColor;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.4;
}

.ilm-field__control[aria-invalid="true"] {
	border-width: 2px;
	border-color: currentColor;
}

fieldset.ilm-field:has(input[aria-invalid="true"]) .ilm-field__options {
	padding-inline-start: 0.5rem;
	border-inline-start: 3px solid currentColor;
}

/* The form's own message: a success, or what stopped it being sent. */
.ilm-form__message {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-inline-start: 4px solid currentColor;
	border-radius: 2px;
	background: color-mix(in srgb, currentColor 6%, transparent);
	line-height: 1.4;
}

.ilm-form__message--error {
	border-inline-start-style: double;
	border-inline-start-width: 6px;
}

.ilm-form__message[hidden] {
	display: none;
}

.ilm-form__message:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ilm-form__message p {
	margin: 0;
	font-weight: 600;
}

.ilm-form__message ul {
	margin: 0.5rem 0 0;
	padding-inline-start: 1.25rem;
	list-style: disc;
}

.ilm-form__message li {
	margin: 0;
}

/*
 * The honeypot: out of sight and, through `inert` and `aria-hidden` on the
 * element itself, out of reach of keyboards and assistive technology. Not a
 * security boundary -- the server refuses what it carries.
 */
.ilm-form__trap {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}