.field,
.search-field {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
}

.field::placeholder,
.search-field input::placeholder { color: var(--color-text-subtle); }

.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.search-field:focus-within {
  border-color: var(--color-focus);
  background: var(--color-bg-elevated);
}

.search-field svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-linecap: round;
  stroke-width: 1.8;
}

.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}