.text-field {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-strong);
}
.text-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.text-field--active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

.text-field__label { color: var(--text-muted); white-space: nowrap; }
.text-field--active .text-field__label { color: inherit; }

.text-field__control { width: 160px; padding: 0; border: 0; background: transparent; color: inherit; }
.text-field__control:focus-visible { outline: none; }
.text-field__control::placeholder { color: var(--text-faint); }