.mkb-ds-field {
	display: grid;
	gap: var(--mkb-space-2);
}

.mkb-ds-label {
	color: var(--mkb-color-ink);
	font-size: var(--mkb-text-sm);
	font-weight: 650;
}

.mkb-ds-input,
.mkb-ds-select,
.mkb-ds-textarea {
	width: 100%;
	min-height: 50px;
	padding: 0.8rem 1rem;
	border: 1px solid var(--mkb-color-border);
	border-radius: var(--mkb-radius-md);
	background: var(--mkb-color-surface);
	color: var(--mkb-color-ink);
	font: inherit;
	transition: border-color var(--mkb-transition), box-shadow var(--mkb-transition);
}

.mkb-ds-textarea {
	min-height: 140px;
	resize: vertical;
}

.mkb-ds-input::placeholder,
.mkb-ds-textarea::placeholder {
	color: var(--mkb-color-subtle);
}

.mkb-ds-input:focus,
.mkb-ds-select:focus,
.mkb-ds-textarea:focus {
	border-color: var(--mkb-color-primary);
	outline: none;
	box-shadow: var(--mkb-focus-ring);
}

.mkb-ds-help,
.mkb-ds-error {
	margin: 0;
	font-size: var(--mkb-text-xs);
	line-height: 1.5;
}

.mkb-ds-help {
	color: var(--mkb-color-subtle);
}

.mkb-ds-error {
	color: var(--mkb-color-danger);
}

.mkb-ds-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--mkb-space-3);
	padding: var(--mkb-space-2);
	border: 1px solid var(--mkb-color-border);
	border-radius: calc(var(--mkb-radius-md) + 4px);
	background: var(--mkb-color-surface);
	box-shadow: var(--mkb-shadow-sm);
}

.mkb-ds-search .mkb-ds-input {
	border: 0;
	box-shadow: none;
}