.ui-field {
  display: grid;
  gap: var(--ui-space-2);
  color: var(--ui-text-primary);
}

.ui-field__label,
.ui-legend {
  color: var(--ui-text-brand);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ui-field__required {
  color: var(--ui-color-copper-600);
}

.ui-field__control {
  width: 100%;
  min-height: var(--ui-control-medium);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-md);
  corner-shape: squircle;
  padding: 0.78rem 0.95rem;
  background: color-mix(in srgb, var(--ui-surface-raised) 78%, transparent);
  color: var(--ui-text-primary);
  font: 500 0.98rem/1.4 var(--ui-font-body);
  transition:
    border-color var(--ui-duration-fast) ease,
    box-shadow var(--ui-duration-fast) ease,
    background-color var(--ui-duration-fast) ease;
}

.ui-field__control::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 72%, transparent);
}

.ui-field__control:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ui-action-primary) 34%, transparent);
}

.ui-field__control:focus {
  border-color: color-mix(in srgb, var(--ui-action-primary) 58%, transparent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-color-gold-500) 22%, transparent);
  background: var(--ui-surface-raised);
}

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

select.ui-field__control {
  cursor: pointer;
}

.ui-field__message {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-font-size-xs);
  line-height: 1.45;
}

.ui-field[data-state="error"] .ui-field__control {
  border-color: #a33d3d;
  box-shadow: 0 0 0 3px rgba(163, 61, 61, 0.1);
}

.ui-field[data-state="error"] .ui-field__message {
  color: #8f2626;
}

.ui-field[data-state="success"] .ui-field__control {
  border-color: var(--ui-color-sage-600);
}

.ui-field[data-state="success"] .ui-field__message {
  color: #47613f;
}

.ui-field__control:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ui-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  color: var(--ui-text-primary);
  cursor: pointer;
  line-height: 1.5;
}

.ui-choice input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin: 0.18rem 0 0;
  accent-color: var(--ui-action-primary);
}

.ui-choice small {
  display: block;
  margin-top: var(--ui-space-1);
  color: var(--ui-text-muted);
}

.ui-fieldset {
  display: grid;
  gap: var(--ui-space-3);
  margin: 0;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-lg);
  corner-shape: squircle;
  padding: var(--ui-space-5);
}

.ui-fieldset > legend {
  padding-inline: var(--ui-space-2);
}

.ui-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  padding-top: var(--ui-space-2);
}