/*
 * The fields of every form of the site, one design (the owner's request of 2026-10-12, WEB-674): the contact form (LCR
 * Core's, layout-contact.css), the sign-in and create-account modal, the account details (WooCommerce), the submission
 * and the artwork's edit window (Utillz), the messages and the comments. Each vendor draws its fields its own way (Utillz
 * 40px and 8px corners, WooCommerce 41px and 6px corners with a border, 15 to 17px type); here they all take the
 * contact form's: the fill gray, no border, `size.field` high, `radius.field` corners, 16px of the body's type, a
 * label above in the label's type, and the pale red dot of a required field. Then the choice fields, which Utillz's
 * select and the Select2 fields (cili/select2.js; WooCommerce's selectWoo has the same markup) draw as every other
 * field: a value chosen in a multiple field is a pill in ink, its remove mark in white; the list opens under the field
 * in white with a hairline, its highlighted row in the fill gray, a chosen one in muted gray, never Select2's blue
 * (WooCommerce's select2.css, which loads after this sheet: every rule here carries `html body`). Black, white and grays
 * only (ADR-0018), and the one pale red of the required dot (`web.signal.required`). A click in a field draws no ring;
 * the keyboard's focus keeps it, on the whole field (WCAG 2.4.7, WEB-622; cili/select2.js marks a pointer's focus).
 * The search forms (the header's and the phone's pills) are another component, layout-frame.css's, and are left out.
 * The sign-in page's buttons are the app's 40-point pills, not the contact form's (assets/css/layout-auth.css; the
 * owner's request of 2026-10-14 that the sign-in be the app's sign-in screen; ADR-0039).
 */

/* ------------------------------------------------------------------------------------------- the fields */

/* The text fields: the contact form's own (layout-contact.css, the same values), Utillz's, WooCommerce's and the comment
   form's. Utillz's `padding-left: 20px !important` under 768px, and the 100% height Heilz gives a text input, are
   answered below. */
html body :is(
	.ulz-form-group:not(.ulz-search-form .ulz-form-group) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select:not(.select2-hidden-accessible)),
	.woocommerce form .form-row :is(input.input-text, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], select:not(.select2-hidden-accessible)),
	.woocommerce-MyAccount-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="search"]):not([type="image"]):not(.select2-search__field)),
	.comment-form :is(input[type="text"], input[type="email"], input[type="url"])
) {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: var(--lcr-size-field);
	min-height: var(--lcr-size-field);
	margin: 0;
	padding: 0 var(--lcr-space-16) !important; /* Heilz's theme.css: `padding-left: 20px !important` under 768px */
	border: 0;
	border-radius: var(--lcr-radius-field);
	background-color: var(--form-background);
	box-shadow: var(--form-boundary, none); /* the sign-in page draws its field's boundary and its invalid ring here (layout-auth.css) */
	color: var(--form); /* Utillz's field text: the ink */
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-web-type-body-font-size);
	font-weight: var(--lcr-web-type-body-font-weight);
	line-height: var(--lcr-web-type-body-line-height);
	transition: none;
}

html body :is(
	.ulz-form-group:not(.ulz-search-form .ulz-form-group) textarea,
	.woocommerce form .form-row textarea,
	.woocommerce-MyAccount-content textarea,
	.comment-form textarea
) {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	min-height: calc(3 * var(--lcr-size-field));
	margin: 0;
	padding: var(--lcr-space-14) var(--lcr-space-16);
	border: 0;
	border-radius: var(--lcr-radius-field);
	background-color: var(--form-background);
	box-shadow: var(--form-boundary, none); /* the sign-in page draws its field's boundary and its invalid ring here (layout-auth.css) */
	color: var(--form); /* Utillz's field text: the ink */
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-web-type-body-font-size);
	font-weight: var(--lcr-web-type-body-font-weight);
	line-height: var(--lcr-web-type-body-line-height);
	resize: vertical;
	transition: none;
}

html body :is(
	.ulz-form-group:not(.ulz-search-form .ulz-form-group) :is(input, textarea),
	.woocommerce form .form-row :is(input, textarea),
	.woocommerce-MyAccount-content :is(input, textarea),
	.comment-form :is(input, textarea)
)::placeholder {
	color: var(--form-placeholder);
	opacity: 1;
}

/* A field's other states stay the same: the keyboard's ring is the frame's outline (layout-frame.css), a click draws none. */
html body :is(
	.ulz-form-group:not(.ulz-search-form .ulz-form-group) :is(input, textarea, select),
	.woocommerce form .form-row :is(input, textarea, select)
):is(:hover, :focus, :active) {
	background-color: var(--form-background);
	box-shadow: none;
}

/* WooCommerce's own select is a bare select, which has no pseudo-element: its chevron is the tokens' two diagonal lines
   of the ink (as the listings filter's, layout-account.css), where Utillz's select has `.ulz-select::after`. */
html body .woocommerce form .form-row select:not(.select2-hidden-accessible) {
	padding-right: var(--lcr-space-40) !important;
	appearance: none;
	background:
		linear-gradient(to bottom left, transparent calc(50% - var(--lcr-size-hairline)), var(--lcr-color-ink) calc(50% - var(--lcr-size-hairline)), var(--lcr-color-ink) calc(50% + var(--lcr-size-hairline)), transparent calc(50% + var(--lcr-size-hairline)))
			no-repeat right calc(var(--lcr-space-16) + var(--lcr-space-8)) center / var(--lcr-space-8) var(--lcr-space-8),
		linear-gradient(to bottom right, transparent calc(50% - var(--lcr-size-hairline)), var(--lcr-color-ink) calc(50% - var(--lcr-size-hairline)), var(--lcr-color-ink) calc(50% + var(--lcr-size-hairline)), transparent calc(50% + var(--lcr-size-hairline)))
			no-repeat right var(--lcr-space-16) center / var(--lcr-space-8) var(--lcr-space-8),
		var(--form-background);
}

/* Utillz's select has its chevron after the field, on the field's right edge: room for it. */
html body .ulz-form-group:not(.ulz-search-form .ulz-form-group) .ulz-select select {
	padding-right: var(--lcr-space-40) !important;
}

/* A box to tick: the ink, as Utillz's own. */
html body .woocommerce form .form-row input[type="checkbox"],
html body .woocommerce form .form-row input[type="radio"],
html body .comment-form input[type="checkbox"] {
	accent-color: var(--lcr-color-ink);
}

/* ------------------------------------------------------------------------------------------- the labels */

/* A field's label above it, in the label's type and the ink: Utillz's 17px bold, WooCommerce's small gray. */
html body :is(
	.ulz-form-group:not(.ulz-search-form .ulz-form-group) > .ulz-heading > label,
	.woocommerce form .form-row > label,
	.woocommerce-MyAccount-content :is(.cili-verification, .cili-account-deletion) label:not(.cili-account-deletion-confirm-row label),
	.comment-form label
) {
	display: block;
	margin: 0 0 var(--lcr-space-8);
	color: var(--lcr-color-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	letter-spacing: var(--lcr-type-label-letter-spacing);
	line-height: var(--lcr-type-label-line-height);
}

/* What a field's title adds under it ("Select the primary subjects in your painting"): small, in the muted gray, not the
   field's own type. */
html body .ulz-form-group:not(.ulz-search-form .ulz-form-group) > .ulz-heading > p {
	margin: calc(-1 * var(--lcr-space-4)) 0 var(--lcr-space-8);
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
}

/* WooCommerce's rows: the contact form's gap between two fields, `space.20`, whatever Heilz gives a row. */
html body .woocommerce form .form-row {
	margin: 0 0 var(--lcr-space-20);
	padding: 0;
}

/* ------------------------------------------------------------------------------------------- the required mark */

/*
 * The mark of a required field, the same on every form: a dot after its label, in the pale red of `web.signal.required`,
 * the interface's one colour (the owner's request of 2026-10-12). Utillz draws it as an `<i>`, WooCommerce as a
 * `<span class="required">` with an asterisk, the edit window as a span with an asterisk, the contact form as the
 * label's `::after`: the asterisks are not shown, the dot is.
 */
html body :is(.ulz-heading label .ulz-required, .woocommerce form .form-row .required, .cili-edit-label .cili-edit-required) {
	display: inline-block;
	width: var(--lcr-space-8);
	height: var(--lcr-space-8);
	margin: 0 0 0 var(--lcr-space-6);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-web-signal-required);
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	vertical-align: middle;
}

/* The message box of a conversation (Utillz's modal, `Send Message`): a field as the others, its send icon inside on the right. */
html body .ulz-conversation-input .ulz-message-footer textarea {
	box-sizing: border-box;
	min-height: var(--lcr-size-field);
	padding: var(--lcr-space-12) var(--lcr-space-48) var(--lcr-space-12) var(--lcr-space-16);
	border: 0;
	border-radius: var(--lcr-radius-field);
	background-color: var(--form-background);
	box-shadow: none;
	color: var(--lcr-color-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-web-type-body-font-size);
	line-height: var(--lcr-web-type-body-line-height);
}

html body .ulz-conversation-input .ulz-message-footer textarea::placeholder {
	color: var(--form-placeholder);
	opacity: 1;
}

/* ------------------------------------------------------------------------------------------- the forms' buttons */

/* A form's send button: the contact form's pill (layout-contact.css), `size.cta` high, in the label's type. */
html body :is(
	.woocommerce form .woocommerce-Button,
	.woocommerce form button[type="submit"]:not(.lcr-contact-send),
	.woocommerce form input[type="submit"],
	.cili-verification .button,
	.cili-account-deletion .button,
	.comment-form input[type="submit"]
) {
	box-sizing: border-box;
	min-height: var(--lcr-size-cta);
	padding: 0 var(--lcr-space-24);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-web-type-label-line-height);
}

/* ------------------------------------------------------------------------------------------- Utillz's select */

/* Its chevron, drawn from the tokens: Utillz's is a Font Awesome glyph, which no longer loads (cili/layout.php). */
html body .ulz-select::after {
	content: "";
	box-sizing: border-box;
	width: var(--lcr-space-8);
	height: var(--lcr-space-8);
	margin-top: calc(-1 * var(--lcr-space-6));
	border-right: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	border-bottom: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	transform: rotate(45deg);
	font-size: 0;
}

/* ------------------------------------------------------------------------------------------- Select2: the field */

/* The field's box holds its open list (cili/select2.js, `dropdownParent`), placed from it. */
html body .ulz-select2 {
	position: relative;
}

html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple {
	box-sizing: border-box;
	min-height: var(--lcr-size-field);
	border: 0;
	border-radius: var(--form-radius);
	background-color: var(--form-background);
	box-shadow: none;
	color: var(--lcr-color-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-web-type-body-font-size);
}

html body .select2-container--default.select2-container--open .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--multiple,
html body .select2-container--default.select2-container--focus .select2-selection--multiple {
	border: 0;
}

/* A single field: its value on one line, as Utillz's select shows it, with the same chevron. */
html body .select2-container--default .select2-selection--single {
	height: var(--lcr-size-field);
}

html body .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 var(--lcr-space-40) 0 var(--lcr-space-16);
	line-height: var(--lcr-size-field);
	color: var(--lcr-color-ink);
}

html body .select2-container--default .select2-selection--single .select2-selection__placeholder,
html body .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
	color: var(--form-placeholder);
	opacity: 1;
}

/* Its chevron: Heilz hides Select2's arrow and draws a Font Awesome glyph after the value, which no longer loads
   (cili/layout.php); the same place gets the tokens' chevron, turned when the list is open. */
html body .select2-container .select2-selection--single .select2-selection__rendered::after {
	content: "";
	box-sizing: border-box;
	right: var(--lcr-space-16);
	width: var(--lcr-space-8);
	height: var(--lcr-space-8);
	margin-top: calc(-1 * var(--lcr-space-6));
	border-right: calc(2 * var(--lcr-size-hairline)) solid var(--lcr-color-ink);
	border-bottom: calc(2 * var(--lcr-size-hairline)) solid var(--lcr-color-ink);
	transform: rotate(45deg);
	font-size: 0;
	line-height: 0;
}

html body .select2-container.select2-container--open .select2-selection--single .select2-selection__rendered::after {
	margin-top: calc(-2 * var(--lcr-size-hairline));
	transform: rotate(225deg);
}

/* A multiple field: its chosen values as pills, then the text being typed, on as many lines as they need. */
html body .select2-container--default .select2-selection--multiple {
	padding: var(--lcr-space-6) var(--lcr-space-40) var(--lcr-space-6) var(--lcr-space-8);
	cursor: text;
}

html body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lcr-space-6);
	padding: 0;
	margin: 0;
}

html body .select2-container--default .select2-selection--multiple .select2-selection__choice {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-6);
	float: none;
	margin: 0;
	padding: var(--lcr-space-4) var(--lcr-space-12);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
	font-size: var(--lcr-type-body-font-size);
	font-weight: 600;
	line-height: var(--lcr-type-body-line-height);
}

html body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	order: 1;
	margin: 0;
	color: var(--lcr-color-on-ink);
	font-size: var(--lcr-type-body-large-font-size);
	font-weight: 400;
	line-height: 1;
	opacity: 0.7;
}

html body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: var(--lcr-color-on-ink);
	opacity: 1;
}

/* The text being typed: in the field, the field's own type and ink, so a member sees what they write. */
html body .select2-container--default .select2-selection--multiple .select2-search--inline {
	flex: 1 1 var(--lcr-space-48);
	float: none;
}

html body .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
	min-width: 100%;
	height: calc(var(--lcr-size-control) - 2 * var(--lcr-space-6));
	margin: 0;
	padding: 0 var(--lcr-space-8);
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--lcr-color-ink);
	font: inherit;
	line-height: calc(var(--lcr-size-control) - 2 * var(--lcr-space-6));
}

/* The clear mark of a field that has a value: on the field's right, centred, in ink. */
html body .select2-container--default .select2-selection--multiple .select2-selection__clear,
html body .select2-container--default .select2-selection--single .select2-selection__clear {
	position: absolute;
	top: 50%;
	right: var(--lcr-space-16);
	float: none;
	margin: 0;
	transform: translateY(-50%);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-body-large-font-size);
	font-weight: 400;
	line-height: 1;
	opacity: 1; /* Heilz's theme.css: `opacity: .5` */
}

html body .select2-container--default .select2-selection--single .select2-selection__clear {
	right: var(--lcr-space-40);
}

/* The ring: none after a click or a tap; the keyboard's, on the whole field, rounded as the field, never on the inner
   text box alone. */
html body .select2-container .select2-search__field {
	outline-style: none !important; /* the frame's `:focus-visible` ring, drawn on the field below */
}

html body .select2-container:not(.lcr-pointer-focus) .select2-selection--multiple:has(.select2-search__field:focus-visible) {
	outline-style: solid !important; /* the frame's ring (layout-frame.css), on the field */
}

html body .select2-container.lcr-pointer-focus .select2-selection {
	outline-style: none !important; /* a pointer's focus */
}

/* ------------------------------------------------------------------------------------------- Select2: the list */

html body .select2-container--default .select2-dropdown {
	margin-top: var(--lcr-space-4);
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-thumb);
	background-color: var(--lcr-color-background);
	overflow: hidden;
}

html body .select2-container--default .select2-dropdown--above {
	margin-top: 0;
	margin-bottom: var(--lcr-space-4);
}

html body .select2-container--default .select2-search--dropdown {
	padding: var(--lcr-space-8);
}

html body .select2-container--default .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-16);
	border: 0;
	border-radius: var(--form-radius);
	background-color: var(--form-background);
	color: var(--lcr-color-ink);
	font: inherit;
}

html body .select2-container--default .select2-results > .select2-results__options {
	max-height: 280px;
}

html body .select2-container--default .select2-results__option {
	padding: var(--lcr-space-10) var(--lcr-space-16);
	color: var(--lcr-color-ink);
	line-height: var(--lcr-type-body-large-line-height);
}

html body .select2-container--default .select2-results__option[aria-selected=true] {
	background-color: transparent;
	color: var(--lcr-color-muted);
}

html body .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
}

/* "Please enter 3 or more characters", "Searching…", "No results found". */
html body .select2-container--default .select2-results__message {
	color: var(--lcr-color-muted);
}