/* Form fields: label, input/select/textarea, hint and error. */

.form { display: grid; gap: var(--space-2); }
.form__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form__row > .field { flex: 1 1 200px; }
.form__row > .field--short { flex: 0 1 120px; }

.field { display: grid; align-content: start; gap: var(--space-1); margin-block-end: var(--space-3); }

.field__label { font-size: var(--text-sm); font-weight: 600; }

.field__input {
  inline-size: 100%;
  min-block-size: var(--touch);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field__input:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 2px var(--color-focus);
}
.field__input:disabled { background: var(--color-surface-2); color: var(--color-text-muted); }
textarea.field__input { min-block-size: 96px; resize: vertical; }
select.field__input { appearance: auto; }
.field__input[dir="ltr"] { text-align: end; }

.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.field__error { font-size: var(--text-sm); color: var(--color-danger); margin: 0; }
.field--invalid .field__input { border-color: var(--color-danger); }

.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--touch);
  cursor: pointer;
}
.check input { inline-size: 20px; block-size: 20px; accent-color: var(--color-primary); }