/* Shared form controls: fields, labels, help text and input surfaces. */
.ui-field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.ui-field__label {
  font-weight: 700;
  color: var(--text);
}

.ui-field__help {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.ui-field__errors,
.field-errors {
  color: var(--error-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.ui-form-control {
  width: 100%;
  min-width: 0;
  min-height: 2.625rem;
  padding: 0.625rem 0.875rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.ui-form-control::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, white 28%);
  opacity: 1;
}

.ui-form-control:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.125rem;
}

.ui-form-control[readonly] {
  background: var(--disabled-bg);
  color: var(--muted);
}

.ui-form-control--search {
  flex: 1 1 17.5rem;
  min-width: 13.75rem;
}

.ui-form-control--mono {
  font: 500 0.875rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

textarea.ui-form-control {
  min-height: 7.5rem;
  resize: vertical;
}

textarea.ui-form-control.ui-form-control--mono {
  min-height: 17.5rem;
}

@media (max-width: 56.25rem) {
  .ui-form-control--search {
    width: 100%;
    min-width: 0;
  }
}