/* Explicit components only: no generic input/select or plugin selectors. */
.ov-field {
	--ov-field-border: var(--color-border-control);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	min-width: 0;
	width: 100%;
	margin: 0;
	color: var(--color-text-primary);
	font-family: var(--font-ui);
	letter-spacing: 0;
}

.ov-field__label {
	display: block;
	margin: 0;
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-label);
	overflow-wrap: anywhere;
}

.ov-field__frame { position: relative; min-width: 0; }

.ov-field .ov-field__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: var(--height-56);
	margin: 0;
	padding: var(--spacing-12) var(--spacing-16);
	border: var(--focus-width) solid var(--ov-field-border);
	border-radius: var(--radius-16);
	background: var(--color-bg-surface);
	color: var(--color-text-primary);
	box-shadow: none;
	font-family: var(--font-ui);
	font-size: var(--font-size-field);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-field);
	letter-spacing: 0;
	transition: border-color var(--transition-interactive), background-color var(--transition-interactive);
}

.ov-field__control::placeholder { color: var(--color-text-muted); opacity: 1; }
.ov-field textarea.ov-field__control {
	min-height: calc(var(--height-56) * 2 + var(--spacing-32));
	resize: vertical;
}
.ov-field select.ov-field__control { appearance: none; cursor: pointer; }
.ov-field select.ov-field__control:has(option:checked[value=""]) { color: var(--color-text-muted); }
.ov-field select.ov-field__control option { color: var(--color-text-primary); }

.ov-field[data-kind="select"] .ov-field__control,
.ov-field[data-kind="password"] .ov-field__control {
	padding-inline-end: calc(var(--spacing-16) + var(--action-target-min));
}
.ov-field[data-status-icon]:is([data-state="error"], [data-state="valid"]) .ov-field__control {
	padding-inline-end: calc(var(--spacing-16) + var(--spacing-32));
}

.ov-field[data-state="error"] { --ov-field-border: var(--color-feedback-error-ink); }
.ov-field[data-state="valid"] { --ov-field-border: var(--color-feedback-success-ink); }
.ov-field .ov-field__control:focus {
	border-color: var(--color-border-focus);
	outline: none;
	box-shadow: none;
}
.ov-field:has(.ov-field__control:disabled) { opacity: 0.5; }
.ov-field .ov-field__control:disabled { cursor: not-allowed; opacity: 1; }
.ov-field .ov-field__control[readonly] { cursor: text; }
.ov-field[data-kind="select"] .ov-field__control:is(:disabled, [readonly]),
.ov-field textarea.ov-field__control:is(:disabled, [readonly]) { background: var(--color-bg-subtle); }

.ov-field__help,
.ov-field__feedback {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-small);
	overflow-wrap: anywhere;
}
.ov-field[data-state="error"] .ov-field__feedback,
.ov-field__status--error { color: var(--color-feedback-error-ink); }
.ov-field[data-state="valid"] .ov-field__feedback,
.ov-field__status--valid { color: var(--color-feedback-success-ink); }

.ov-field__status,
.ov-field__chevron {
	position: absolute;
	inset-inline-end: var(--spacing-16);
	top: var(--spacing-16);
	pointer-events: none;
}
.ov-field__status { display: none; }
.ov-field[data-state="error"] .ov-field__status--error,
.ov-field[data-state="valid"] .ov-field__status--valid { display: block; }
.ov-field__frame .ov-icon { width: var(--spacing-24); height: var(--spacing-24); }

.ov-field__toggle {
	position: absolute;
	inset-inline-end: calc(var(--spacing-12) / 2);
	top: calc(var(--spacing-12) / 2);
	display: grid;
	place-items: center;
	width: var(--action-target-min);
	height: var(--action-target-min);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-8);
	background: transparent;
	color: var(--color-text-primary);
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--transition-interactive);
}
@media (hover: hover) {
	.ov-field__toggle:hover:not(:disabled) { background: var(--color-bg-subtle); }
}
.ov-field__toggle:focus-visible,
.ov-options__input:focus-visible {
	outline: var(--focus-width) solid var(--color-border-focus);
	outline-offset: var(--focus-offset);
}
.ov-field__toggle:focus:not(:focus-visible) { outline: none; }
.ov-field__toggle:disabled {
	background: transparent;
	cursor: not-allowed;
	opacity: 1 !important;
}

.ov-options {
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-primary);
	font-family: var(--font-ui);
	letter-spacing: 0;
}
.ov-options__title {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--spacing-8);
	padding: 0;
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-h4);
	overflow-wrap: anywhere;
}
.ov-options__choices {
	display: grid;
	gap: var(--spacing-12);
	min-width: 0;
	margin: var(--spacing-12) 0 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.ov-options__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-12);
	min-height: var(--action-target-min);
	margin: 0;
	padding: var(--spacing-4) var(--spacing-8);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	cursor: pointer;
}
.ov-options__option > span { min-width: 0; overflow-wrap: anywhere; }
.ov-options .ov-options__input {
	flex: none;
	width: var(--spacing-24);
	height: var(--spacing-24);
	margin: 0;
	appearance: none;
	border: var(--focus-width) solid var(--color-border-control);
	border-radius: var(--radius-8);
	background: var(--color-bg-surface);
	cursor: inherit;
}
.ov-options .ov-options__input[type="radio"] { border-radius: var(--radius-full); }
.ov-options .ov-options__input:checked {
	border-color: var(--color-bg-action-primary);
	background: var(--color-bg-action-primary);
}
.ov-options .ov-options__input[type="radio"]:checked {
	border-width: calc(var(--spacing-12) / 2);
	background: var(--color-text-primary);
}
.ov-options__check {
	position: absolute;
	inset-inline-start: calc(var(--spacing-8) + var(--focus-width));
	display: none;
	color: var(--color-text-primary);
	pointer-events: none;
}
.ov-options__check .ov-icon { width: var(--spacing-20); height: var(--spacing-20); }
.ov-options__input:checked + .ov-options__check { display: block; }
.ov-options:disabled { opacity: 0.5; }
.ov-options:disabled .ov-field { opacity: 1; }
.ov-options__option:has(:disabled) { cursor: not-allowed; }
.ov-options__empty {
	margin: var(--spacing-8) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-body-md);
	line-height: var(--line-height-body-md);
}
.ov-options__loading {
	display: grid;
	gap: var(--spacing-16);
	padding: var(--spacing-24) var(--spacing-8);
}
.ov-options__loading > [aria-hidden] {
	display: block;
	height: var(--spacing-20);
	border-radius: var(--radius-8);
	background: var(--color-bg-subtle);
}
.ov-options__loading > [aria-hidden]:last-child { width: 65%; }
.ov-options__apply { margin-top: var(--spacing-12); }
.ov-options__apply .ov-button { width: 100%; }
.ov-options__apply :is(.ov-button__content, .ov-button__progress) {
	width: 100%;
	justify-content: space-between;
	text-align: start;
}
.ov-field [hidden],
.ov-options [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ov-field .ov-field__control,
	.ov-field__toggle { transition: none; }
}
@media (forced-colors: active) {
	.ov-options .ov-options__input {
		appearance: auto;
		border: revert;
		background: revert;
	}
	.ov-options__input:checked + .ov-options__check { display: none; }
	.ov-field .ov-field__control { border-color: CanvasText; }
	.ov-field .ov-field__control:focus {
		outline: var(--focus-width) solid Highlight;
		outline-offset: var(--focus-offset);
	}
	.ov-field:has(.ov-field__control:disabled),
	.ov-options:disabled { opacity: 1; }
	.ov-field .ov-field__control:disabled { color: GrayText; border-color: GrayText; }
}