/**
 * Atlas Labs — Form Elements
 *
 * Implements DESIGN_SYSTEM.md#section-12-input-tokens and the
 * behavioral rule in UI_COMPONENT_SPECIFICATIONS.md#forms. Text
 * inputs, selects, and textareas share one base ruleset since Section
 * 12 specifies identical background/border/radius/height/padding for
 * all three ("Text inputs — As above, default sizing"; "Same base
 * styling" for dropdowns).
 *
 * Known gap: the select's custom chevron is an inline SVG data URI,
 * since CSS custom properties can't be referenced inside one. Its
 * stroke color (#4A4A4A) is `--color-text-secondary` written out by
 * hand — if that token's value ever changes, this data URI needs a
 * matching manual update. Flagged here as the one place in this
 * theme's CSS where a token value is duplicated rather than
 * referenced.
 */

/* ---------------------------------------------------------------
 * Shared base: text inputs, selects, textareas
 *
 * `html body` bump: Kadence styles bare `input[type="search"]` etc.
 * (0,1,1) in stylesheets that load after this one, which beats a
 * single class (0,1,0) and repaints fields white on the dark palette
 * — same Kadence tie-break documented in CLAUDE.md for body/buttons,
 * first hit live on the header search field.
 * ------------------------------------------------------------- */

html body .al-input,
html body .al-select,
html body .al-textarea {
	display: block;
	width: 100%;
	height: 44px;
	padding-inline: var(--space-16);
	padding-block: var(--space-12);
	border-radius: var(--radius-md);
	/* border-secondary (not -primary) at rest: on the dark palette the
	   input boundary is the component's identifying edge and must hold
	   3:1 against the field/page (WCAG 1.4.11); border-primary is now a
	   sub-3:1 hairline reserved for decorative separation. */
	border: var(--border-width-standard) solid var(--color-border-secondary);
	background-color: var(--color-input-background);
	color: var(--color-text-primary);
	font-family: var(--font-family-base);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line-height);
	transition:
		border-color var(--duration-standard) var(--easing-standard),
		background-color var(--duration-standard) var(--easing-standard);
}

.al-textarea {
	height: auto;
	min-height: 96px;
	resize: vertical;
}

html body .al-input::placeholder,
html body .al-textarea::placeholder {
	color: var(--color-text-muted);
}

html body .al-input:hover,
html body .al-select:hover,
html body .al-textarea:hover {
	border-color: var(--color-border-secondary);
}

html body .al-input:focus,
html body .al-select:focus,
html body .al-textarea:focus {
	outline: none;
	border-width: var(--border-width-heavy);
	border-color: var(--color-focus-ring);
	background-color: var(--color-input-background-focus);
	/* The focus border is 1px heavier than the resting border
	   (border-width-heavy vs border-width-standard); compensate the
	   padding so the field's content never shifts on focus. */
	padding-inline: calc(var(--space-16) - (var(--border-width-heavy) - var(--border-width-standard)));
	padding-block: calc(var(--space-12) - (var(--border-width-heavy) - var(--border-width-standard)));
}

html body .al-input:disabled,
html body .al-select:disabled,
html body .al-textarea:disabled {
	background-color: var(--color-input-background-disabled);
	color: var(--color-text-disabled);
	border-color: var(--color-border-disabled);
	cursor: not-allowed;
}

html body .al-input--error,
.al-select--error,
.al-textarea--error {
	border-color: var(--color-error);
}

html body .al-input--success,
.al-select--success,
.al-textarea--success {
	border-color: var(--color-success);
}

/* ---------------------------------------------------------------
 * Select — custom chevron replacing the native control
 * ------------------------------------------------------------- */

.al-select {
	appearance: none;
	padding-right: var(--space-40);
	background-repeat: no-repeat;
	background-position: right var(--space-16) center;
	/* stroke: #C0C0C6 = --color-text-secondary, hand-written — see gap note above. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23C0C0C6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
 * Search input
 * ------------------------------------------------------------- */

.al-search {
	position: relative;
}

.al-search__icon {
	position: absolute;
	top: 50%;
	left: var(--space-16);
	transform: translateY(-50%);
	color: var(--color-text-muted);
	transition: color var(--duration-fast) var(--easing-standard);
}

.al-search:focus-within .al-search__icon {
	color: var(--color-text-primary);
}

html body .al-input--search {
	border-color: transparent;
	background-color: transparent;
	padding-inline-start: var(--space-48);
}

/* Restate the icon inset with the same focus-border compensation as
   the shared :focus rule above, which would otherwise win the cascade
   and collapse this field's icon padding on focus. */
html body .al-input--search:focus {
	padding-inline-start: calc(var(--space-48) - (var(--border-width-heavy) - var(--border-width-standard)));
}

/* Header search approximates the documented "expandable field"
   behavior with a CSS-only width transition rather than JS, per
   header.php's real, server-rendered (not JS-dependent) search form. */
.al-site-header__search .al-input--search {
	width: 160px;
	transition: width var(--duration-standard) var(--easing-standard);
}

.al-site-header__search .al-input--search:focus {
	width: 240px;
}

/* ---------------------------------------------------------------
 * Checkboxes & radio buttons
 * ------------------------------------------------------------- */

.al-checkbox,
.al-radio {
	appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: var(--border-width-standard) solid var(--color-border-secondary);
	background-color: var(--color-input-background);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--easing-standard),
		border-color var(--duration-fast) var(--easing-standard);
}

.al-checkbox {
	border-radius: var(--radius-sm);
}

.al-radio {
	border-radius: var(--radius-full);
}

.al-checkbox:checked,
.al-radio:checked {
	background-color: var(--color-accent-primary);
	border-color: var(--color-accent-primary);
}

.al-checkbox:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 5px;
	height: 9px;
	border: solid var(--color-bg-primary);
	border-width: 0 2px 2px 0;
	transform: translateY(-1px) rotate(45deg);
}

.al-radio:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background-color: var(--color-bg-primary);
}

.al-checkbox:disabled,
.al-radio:disabled {
	background-color: var(--color-surface-disabled);
	border-color: var(--color-border-disabled);
	cursor: not-allowed;
}

/* ---------------------------------------------------------------
 * Field wrapper, labels, and inline messages
 * ------------------------------------------------------------- */

.al-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.al-form-label {
	font-family: var(--font-family-base);
	font-size: var(--type-form-label-size);
	font-weight: var(--type-form-label-weight);
	letter-spacing: var(--type-form-label-letter-spacing);
	line-height: var(--type-form-label-line-height);
	color: var(--color-text-secondary);
}

.al-form-message {
	font-family: var(--font-family-base);
	font-size: var(--type-caption-size);
	line-height: var(--type-caption-line-height);
}

.al-form-message--error {
	color: var(--color-error);
}

.al-form-message--success {
	color: var(--color-success);
}