@layer molecules {
  .field {
    display: grid;
    gap: var(--space-1);

    .field__label { font-size: var(--text-s); font-weight: 600; color: var(--color-muted); }
    .field__hint { font-size: var(--text-xs); color: var(--color-muted); }
    .field__error { font-size: var(--text-xs); color: var(--color-danger); }

    &.is-invalid :is(.input, .select, .textarea) { border-color: var(--color-danger); }
    &.is-uncertain :is(.input, .select) {
      border-color: var(--color-warning);
      background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
    }
  }
}