@layer components {
  .form { display: grid; gap: var(--space-4); }
  .field { display: grid; gap: 6px; }
  .field__label { font-size: var(--text-sm); font-weight: 600; }
  .field__error { font-size: var(--text-sm); color: var(--danger); }
  .fields-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4) var(--space-3); }
  .field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }

  .input {
    width: 100%;
    min-width: 0;
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-md);

    &:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
    &[aria-invalid="true"] { border-color: var(--danger); }
    &[readonly] { background: var(--surface-sunken); color: var(--ink-muted); }
    &:is(textarea) { padding-block: var(--space-2); resize: vertical; }
  }
}