/* ── Shared Form Primitives ────────────────────────────── */
.eg-form-field {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--eg-spacing-xs);
}

.eg-form-label {
	font-size: var(--eg-font-caption);
	color: var(--eg-palette-text-secondary);
	font-weight: 500;
}

.eg-form-input {
	background: var(--eg-palette-surface-accent);
	border: 1px solid var(--eg-palette-divider-light);
	border-radius: var(--eg-radius-md);
	color: var(--eg-palette-text-primary);
	font-size: var(--eg-font-body);
	font-family: inherit;
	padding: var(--eg-spacing-sm) var(--eg-spacing-md);
	min-height: var(--eg-touch-min);
	outline: none;
	transition:
		border-color var(--eg-transition-fast),
		box-shadow var(--eg-transition-fast);
}

.eg-form-input:focus {
	border-color: var(--eg-palette-primary);
	box-shadow: 0 0 0 2px rgba(var(--eg-color-primary-rgb), 0.25);
}

.eg-form-input-invalid {
	border-color: var(--eg-palette-error) !important;
}

.eg-form-error {
	font-size: var(--eg-font-caption);
	color: var(--eg-palette-error);
}

.eg-form-hint {
	font-size: var(--eg-font-caption);
	color: var(--eg-palette-text-secondary);
}

.eg-form-textarea {
	resize: vertical;
	min-height: 80px;
}

.eg-form-select {
	appearance: auto;
	cursor: pointer;
}

.eg-required {
	color: var(--eg-palette-error);
}

.eg-form-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eg-spacing-sm);
}

.eg-form-chip {
	background: var(--eg-palette-surface-accent);
	border: 1px solid var(--eg-palette-divider-light);
	border-radius: var(--eg-radius-pill);
	color: var(--eg-palette-text-secondary);
	padding: var(--eg-spacing-xs) var(--eg-spacing-sm);
	font-size: var(--eg-font-caption);
	cursor: pointer;
	transition: all var(--eg-transition-fast);
	min-height: 32px;
}

.eg-form-chip-selected {
	background: var(--eg-palette-primary);
	color: #fff;
	border-color: var(--eg-palette-primary);
}

/* ── Checkbox / Toggle row ─────────────────────────────── */
.eg-form-toggle-row {
	display: flex;
	align-items: center;
	gap: var(--eg-spacing-sm);
	min-height: var(--eg-touch-min);
}

.eg-form-checkbox {
	width: 20px;
	height: 20px;
	accent-color: var(--eg-palette-primary);
	cursor: pointer;
	flex-shrink: 0;
}

.eg-form-toggle-label {
	font-size: var(--eg-font-body);
	color: var(--eg-palette-text-primary);
	cursor: pointer;
	user-select: none;
}