/* Form fields: label above, soft rounded field. .row puts fields side by side. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .field { display: flex; flex-direction: column; gap: var(--space-1); margin-block: var(--space-3); }
  .field--checkbox { flex-direction: row; align-items: center; align-self: end; gap: var(--space-2); }
  .field--grow { flex: 1; min-width: 12rem; }
  .row { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
  .inline-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
  .inline-form .field { margin: 0; }

  label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-soft); }

  input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], input[type=search],
  input[type=file], select, textarea {
    padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--field); color: var(--ink); font-size: var(--text-sm);
  }
  input[type=file] { padding: .35rem .5rem; }
  input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
  input.short { width: 6rem; }
  input.copy-field { width: 100%; max-width: 48rem; font-family: var(--font-mono); font-size: var(--text-xs); }

  fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); margin-block: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-4); }
  legend { padding-inline: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }

  .errors { padding: var(--space-3) var(--space-4); margin-block: var(--space-4); border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--negative) 8%, var(--glass-strong)); border: 1px solid color-mix(in srgb, var(--negative) 30%, transparent); }
  .errors p { margin: 0; font-weight: var(--weight-medium); }
  .errors ul { margin: var(--space-1) 0 0; }
}