/*
 * Form field — every control the field block can draw.
 *
 * Ported from the PHP framework's form-field.css + the field-control and
 * field-message partials. Class names are unchanged; only the tokens moved.
 *
 * TOKENS ARE DECLARED ON THE FIELD, NOT ON :root. A custom property's var()
 * references resolve on the element that declares it, so `--input-bg:
 * var(--…--raised)` written at :root would bake in the page's raised and ignore
 * a `palette--*` section the form sits in. Declared here they resolve against
 * the nearest palette. The border reads the foreground PRESET, not currentColor:
 * the checkbox box sets its own `color` (for the tick), which would bleach its border. A child theme retunes any of them through theme.json:
 * `settings.custom.input.<name>` → the `--wp--custom--input--*` override below.
 */
.form-field {
	--foreground: currentColor;
	--foreground-muted: var(--wp--custom--foreground--muted);
	--primary: var(--wp--preset--color--secondary);
	--primary-foreground: var(--wp--preset--color--bg);
	--primary-subtle: color-mix(in oklch, var(--primary) 14%, transparent);
	--danger: var(--wp--custom--danger);
	--transition-fast: var(--wp--custom--transition--fast);

	--input-bg: var(--wp--custom--input--bg, var(--wp--preset--color--raised));
	--input-radius: var(--wp--custom--input--radius, var(--wp--preset--border-radius--s));
	--input-border-width: var(--wp--custom--input--border-width, var(--wp--custom--border--width));
	--input-border-style: solid;
	--input-border-color: var(--wp--custom--input--border-color, color-mix(in oklch, var(--wp--preset--color--foreground) 30%, transparent));
	--input-hover-border-color: var(--wp--custom--input--hover-border-color, var(--primary));
	--input-hover-glow: var(--wp--custom--input--hover-glow, var(--primary-subtle));
	--input-padding-top: var(--wp--custom--input--padding-block, var(--wp--preset--spacing--xs));
	--input-padding-bottom: var(--input-padding-top);
	--input-padding-inline: var(--wp--custom--input--padding-inline, var(--wp--preset--spacing--s));
	--placeholder-color: var(--wp--custom--foreground--subtle);

	--ring-width: 2px;
	--ring-style: solid;
	--ring-color: var(--primary);
	--ring-offset: 2px;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.form-field__label {
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
}
.form-field__required {
	color: var(--danger);
}
.form-field__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.form-field__icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--foreground-muted);
	display: flex;
	pointer-events: none;
}
.form-field__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}
.form-field--has-icon .form-field__input {
	padding-left: 2.75rem;
}

/* ── Invalid state ─────────────────────────────────── */

/* Set live by the form's view script on blur. The colours are retokenised under
   "Field messages" below. */
.form-field--error .wage-control:hover {
	box-shadow: 0 0 0 4px color-mix(in oklch, var(--danger), transparent 85%);
}

/* Select + date have no ::placeholder — their "empty" text paints in the field colour, too dark.
   Mute it, but only while no real value is chosen (date gets .has-value from the form's view script). */
.form-field__select:has(option[value=""]:checked) {
	color: var(--placeholder-color);
}
.form-field__select option {
	color: var(--foreground);
}
.form-field__input[type="date"]:not(.has-value)::-webkit-datetime-edit {
	color: var(--placeholder-color);
}

/* Chevron as a MASK, so its colour is a token instead of being baked into the
   data URI — the stroke colour below is inert, only the alpha shape is used. */
.form-field__input-wrap:has(.form-field__select)::after {
	content: '';
	position: absolute;
	right: var(--input-padding-inline);
	inline-size: 1rem;
	block-size: 1rem;
	background-color: var(--foreground-muted);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}
.form-field__textarea {
	resize: vertical;
	min-height: 120px;
}

/* Checkbox / tile / toggle — shared hidden native input: visually hidden but in the tab order, drives :checked / :focus-visible
   on its custom sibling. FIRST child of the label so the sibling combinator (~) reaches the box / tile / track. */
.form-field__checkbox-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The check glyph (inline SVG, currentColor) — scales in on :checked (the whole
   tick grows from nothing, rather than stroking on). */
.form-field__check {
	width: 0.9em;
	height: 0.9em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: scale(0);
	transition: transform var(--transition-fast);
}

/* The square box that holds the check — used standalone (single consent) and
   inside a tile (group option). Its colour drives the check via currentColor. */
.form-field__checkbox-box {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	display: grid;
	place-items: center;
	background: var(--input-bg);
	border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
	border-radius: var(--wp--preset--border-radius--s);
	color: var(--primary-foreground);
	transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* ── Single consent checkbox (type: 'checkbox') ──────── */
.form-field__checkbox {
	display: flex;
	align-items: flex-start; /* box tracks the FIRST line, not the block centre */
	gap: 0.6em;
	cursor: pointer;
}
/* Centre the box on the first text line at ANY label size: box (1.25em) and line (1lh) both scale
   with the inherited font-size, so this offset stays correct at body size or --font-size-s. */
.form-field__checkbox .form-field__checkbox-box {
	margin-top: calc((1lh - 1.25em) / 2);
}
.form-field__checkbox:hover .form-field__checkbox-box {
	border-color: var(--input-hover-border-color);
	box-shadow: 0 0 0 4px var(--input-hover-glow);
}
.form-field__checkbox-input:checked ~ .form-field__checkbox-box {
	background: var(--primary);
	border-color: var(--primary);
	transform: scale(1.05);
}
.form-field__checkbox-input:checked ~ .form-field__checkbox-box .form-field__check {
	transform: scale(1);
}
.form-field__checkbox-input:focus-visible ~ .form-field__checkbox-box {
	outline: var(--ring-width) var(--ring-style) var(--ring-color);
	outline-offset: var(--ring-offset);
}
.form-field__checkbox a {
	color: currentColor;
	text-decoration: underline;
}

/* Checkbox group as selectable tiles (type: 'checkboxes'). Each option is a bordered tile matching input metrics;
   checked fills --primary-subtle with a primary border + box. auto-fit adapts the column count to width + option count. */
.form-field__checkboxes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.6rem;
}
.form-field__tile {
	position: relative;
	cursor: pointer;
}
.form-field__tile-inner {
	display: flex;
	align-items: center;
	gap: 0.6em;
	/* same padding tokens as text inputs → a tile is exactly input height */
	padding: var(--input-padding-top) var(--input-padding-inline) var(--input-padding-bottom);
	background: var(--input-bg);
	border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
	border-radius: var(--input-radius);
	transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field__tile-label {
	font-size: var(--wp--preset--font-size--small);
}
.form-field__tile:hover .form-field__tile-inner {
	border-color: var(--input-hover-border-color);
	box-shadow: 0 0 0 4px var(--input-hover-glow);
}
.form-field__checkbox-input:checked ~ .form-field__tile-inner {
	background: var(--primary-subtle);
	border-color: var(--primary);
	box-shadow: inset 0 0 0 1px var(--primary);
}
.form-field__checkbox-input:checked ~ .form-field__tile-inner .form-field__checkbox-box {
	background: var(--primary);
	border-color: var(--primary);
	transform: scale(1.05);
}
.form-field__checkbox-input:checked ~ .form-field__tile-inner .form-field__check {
	transform: scale(1);
}
.form-field__checkbox-input:focus-visible ~ .form-field__tile-inner {
	outline: var(--ring-width) var(--ring-style) var(--ring-color);
	outline-offset: var(--ring-offset);
}

/* ── Toggle switch (type: 'toggle') — single on/off control ──────────────── */
.form-field__toggle {
	display: flex;
	align-items: flex-start; /* track tracks the first line, like the checkbox box */
	gap: 0.6em;
	cursor: pointer;
}
/* em-based so the switch scales with its label and the first-line offset (1lh)
   stays correct at any font-size — same approach as the checkbox box. */
.form-field__toggle-track {
	flex-shrink: 0;
	position: relative;
	width: 2.6em;
	height: 1.5em;
	margin-top: calc((1lh - 1.5em) / 2);
	background: var(--wp--preset--color--inset);
	border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
	border-radius: var(--wp--preset--border-radius--circle);
	transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field__toggle-thumb {
	position: absolute;
	top: 50%;
	left: 0.18em;
	transform: translateY(-50%);
	width: 1.05em;
	height: 1.05em;
	border-radius: var(--wp--preset--border-radius--circle);
	background: var(--wp--preset--color--raised);
	box-shadow: 0 1px 3px color-mix(in oklch, var(--wp--preset--color--base) 35%, transparent);
	transition: left var(--transition-fast), background var(--transition-fast);
}
.form-field__toggle:hover .form-field__toggle-track {
	border-color: var(--input-hover-border-color);
	box-shadow: 0 0 0 4px var(--input-hover-glow);
}
.form-field__checkbox-input:checked ~ .form-field__toggle-track {
	background: var(--primary);
	border-color: var(--primary);
}
.form-field__checkbox-input:checked ~ .form-field__toggle-track .form-field__toggle-thumb {
	left: calc(100% - 1.23em);
	background: var(--primary-foreground);
}
.form-field__checkbox-input:focus-visible ~ .form-field__toggle-track {
	outline: var(--ring-width) var(--ring-style) var(--ring-color);
	outline-offset: var(--ring-offset);
}
.form-field__toggle a {
	color: currentColor;
	text-decoration: underline;
}

.form-field__help {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--foreground-muted);
	margin: 0;
}

/* ── Invalid state (after interaction) ──────── */
.form-field__input:user-invalid,
.form-field__textarea:user-invalid,
.form-field__select:user-invalid {
	border-color: var(--danger);
}
.form-field__input:user-invalid:focus-visible,
.form-field__textarea:user-invalid:focus-visible,
.form-field__select:user-invalid:focus-visible {
	outline-color: var(--danger);
}


/* ── The control box ───────────────────────────────── */

.wage-control {
	box-sizing: border-box;
	width: 100%;
	padding: var(--input-padding-top) var(--input-padding-inline) var(--input-padding-bottom);
	border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
	border-radius: var(--input-radius);
	background-color: var(--input-bg);
	color: var(--foreground);
	font: inherit;
	line-height: 1.5;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wage-control::placeholder::placeholder {
	color: var(--placeholder-color);
}

/* Hover — the soft glow every control shares (see the --input-hover-* tokens). */
.wage-control:hover:hover {
	border-color: var(--input-hover-border-color);
	box-shadow: 0 0 0 4px var(--input-hover-glow);
}

/* Focus — the sharp accessibility ring, distinct from the soft hover glow. Browsers
   match :focus-visible on a focused text input however it was focused. */
.wage-control:focus-visible:focus-visible {
	border-color: var(--input-hover-border-color);
	box-shadow: none;
	outline: var(--ring-width) var(--ring-style) var(--ring-color);
	outline-offset: var(--ring-offset);
}

select.wage-control {
	appearance: none;
	padding-right: calc(var(--input-padding-inline) + 1.5rem);
}

/* ── Field messages ────────────────────────────────── */

.field-message {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xxs);
	margin-top: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* .form-field is a flex column with its own gap; the margin would double-count it. */
.form-field > .field-message {
	margin-top: 0;
}

/* Stacked messages (an error plus a hint) read as one block, so only the first
   clears the control. */
.field-message + .field-message {
	margin-top: 0;
}

/* 1em square, nudged by half the line's leading so it optically centres on the FIRST
   line and stays put when the text wraps. Colour rides currentColor. */
.field-message__icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	margin-top: 0.2em;
}

.field-message__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Advisory: quieter than the field's own text, and never blocks a submit. */
.field-message--hint {
	color: var(--foreground-muted);
}

/* Blocking: the same red as the invalid control it sits under. */
.field-message--error {
	color: var(--danger);
}

/* Invalid state: the wrapper is retokenised, so every control inside follows. */
.form-field--error {
	--input-border-color: var(--danger);
	--input-hover-border-color: var(--danger);
	--ring-color: var(--danger);
}

/* And stated outright: retokenising alone doesn't reach a control whose border was
   already computed from the default token. */
.form-field--error .wage-control {
	border-color: var(--danger);
}

/* Editor only: stands in for a field with nothing to draw (hidden, or unnamed). */
.form-field__editor-note {
	margin: 0;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	border: 1px dashed color-mix(in oklch, currentColor 30%, transparent);
	border-radius: var(--wp--preset--border-radius--s);
	font-size: var(--wp--preset--font-size--small);
}