/**
 * Field
 */

.rc-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* --- Label ---------------------------------------------------------- */

.rc-field__label {
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
	color: var(--color-text);
}

.rc-field__label--inline {
	font-weight: var(--weight-regular);
	font-size: var(--text-body);
}

.rc-field__required {
	color: var(--color-error);
	margin-left: 0.15em;
}

.rc-field__fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

.rc-field__fieldset .rc-field__label {
	padding: 0;
	margin-bottom: var(--space-2);
}

/* --- Control -------------------------------------------------------- */

.rc-field__control {
	width: 100%;
	min-height: var(--target-min);
	padding: var(--space-2) var(--space-3);

	font-family: var(--font-body);
	/*
	 * 16px minimum. Anything smaller causes iOS Safari to zoom on focus,
	 * which is disorienting and effectively breaks the layout.
	 */
	font-size: var(--text-body);
	line-height: var(--leading-normal);
	color: var(--color-text);

	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-md);

	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.rc-field__control::placeholder {
	color: var(--color-neutral-400);
}

.rc-field__control:hover {
	border-color: var(--color-neutral-400);
}

.rc-field__control:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 0;
	border-color: var(--color-primary-600);
}

textarea.rc-field__control {
	min-height: auto;
	resize: vertical;
}

select.rc-field__control {
	appearance: none;

	/* Chevron as an inline data URI — no extra request, no icon font. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234E5C69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-3) center;
	padding-right: var(--space-6);
}

/* --- Checkbox and radio --------------------------------------------- */

.rc-field__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.rc-field__option {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

.rc-field__option input {
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	/* Optical alignment with the first line of label text. */
	margin-top: 0.2em;
	accent-color: var(--color-primary-600);
}

.rc-field__option input:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.rc-field__option label {
	font-size: var(--text-body);
	line-height: var(--leading-normal);
	color: var(--color-text);
	cursor: pointer;
}

/* --- Help and error ------------------------------------------------- */

.rc-field__help {
	margin: 0;
	font-size: var(--text-small);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.rc-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-small);
	line-height: var(--leading-normal);
	color: var(--color-error);
}

.rc-field__error .rc-icon {
	flex-shrink: 0;
	margin-top: 0.1em;
}

/*
 * Error state is signalled by border colour AND an icon with text. Colour
 * alone would fail for colour-blind users.
 */
.rc-field--invalid .rc-field__control {
	border-color: var(--color-error);
}

.rc-field--invalid .rc-field__control:focus-visible {
	outline-color: var(--color-error);
}