@layer components {
  .form { display: grid; gap: var(--space-4); }
  .field { display: grid; gap: var(--space-1); }
  .field label, .field legend { font-weight: 600; }
  .field-row { display: grid; gap: var(--space-3); }
  @media (min-width: 40rem) {
    .field-row { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  }

  input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], select {
    width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface);
  }
  input:focus-visible, select:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; }

  .hint { color: var(--color-muted); }

  .checkbox, .choice { display: flex; gap: var(--space-2); align-items: flex-start; }
  .checkbox input, .choice input { margin-block-start: 0.3rem; inline-size: 1.1rem; block-size: 1.1rem; }

  .choice-group { display: grid; gap: var(--space-2); }
  fieldset.choice-group { border: 0; padding: 0; margin: 0; }
  .choice { padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); cursor: pointer; }
  .choice:has(input:checked) { border-color: var(--color-brand); }
  .choice span { display: grid; }
  .choice small { color: var(--color-muted); }

  .input-money { display: flex; align-items: center; gap: var(--space-2); }

  .form-errors { padding: var(--space-3); border-radius: var(--radius); background: var(--color-danger-bg); color: var(--color-danger); }
  .form-errors ul { padding-inline-start: var(--space-6); }
  [aria-invalid="true"] { border-color: var(--color-danger); }

  .field--short { max-inline-size: 8rem; }

  textarea, input[type=date], input[type=file] {
    width: 100%; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); color: inherit;
  }
  input[type=date] { min-height: var(--tap); }
}