.ox-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.ox-form-field__label {
  color: var(--fg2);
  font-size: var(--ox-t-xs);
  font-weight: 550;
}

.ox-form-control {
  width: 100%;
  min-height: var(--hit);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--rad-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

textarea.ox-form-control {
  min-height: 76px;
  padding-block: var(--sp-2);
  line-height: 1.5;
  resize: vertical;
}

.ox-form-control:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ox-form-control[aria-invalid="true"] {
  border-color: var(--err);
}

.ox-form-control:disabled,
.ox-form-control[readonly] {
  cursor: not-allowed;
  opacity: .55;
}

.ox-form-field__hint,
.ox-form-field__error {
  min-height: 1em;
  font-size: var(--ox-t-2xs);
}

.ox-form-field__hint { color: var(--fg2); }
.ox-form-field__error { color: var(--err); }

               
               
             
               
          
.ox-form-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}

.ox-form-field--checkbox .ox-form-control { order: 0; }
.ox-form-field--checkbox .ox-form-field__label { order: 1; }
.ox-form-field--checkbox .ox-form-field__hint { order: 2; }
.ox-form-field--checkbox .ox-form-field__error { order: 3; }

input[type="checkbox"].ox-form-control {
  flex: none;
  width: auto;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}