.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--text-sm); font-weight: 500; }
.field__hint { font-size: var(--text-xs); color: var(--text-tertiary); }
.field__error { font-size: var(--text-xs); color: var(--danger); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-height); padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--text-base);
}
.textarea { padding: var(--space-2) var(--space-3); min-height: 88px; resize: vertical; }
.select {
  appearance: none;
  padding-right: calc(var(--space-3) + 16px + var(--space-2));
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  cursor: pointer;
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline-offset: 0; }
.field--invalid .input, .field--invalid .select, .field--invalid .textarea { border-color: var(--danger); }

.checkbox { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }

.select--auto { width: auto; }
.input--short { width: 7.5rem; }
.row > .field { flex: 1 1 10rem; }
.row > .field:has(.input--short) { flex: 0 0 auto; }
.select--small { width: auto; min-width: 12rem; padding-block: 4px; font-size: var(--text-sm); }
.token { padding: 4px var(--space-2); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-size: var(--text-sm); word-break: break-all; }
.input--date { width: auto; }