/*
 * components/forms.css — Form field components (Session 5: UI Lab).
 *
 * Paired with templates/components/forms.html and
 * static/js/components/forms.js. Token-driven (D5). Inline validation
 * states (valid/error) follow plan §7.3 (non-color-only: text + icon).
 */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  max-width: 30rem;
}

.field label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
}

.field__req {
  color: var(--color-danger-fg);
}

.field input[type="text"],
.field input[type="url"],
.field input[type="email"],
.field input[type="password"],
.field input[type="search"],
.field select {
  padding: var(--space-2) var(--space-3);
  border: var(--border-1);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-md);
  background: var(--color-surface);
  color: var(--color-fg);
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.field--error input,
.field--error select {
  border-color: var(--color-danger-fg);
}

.field__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field__hint {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}

.field__valid {
  font-size: var(--fs-sm);
  color: var(--color-success-fg);
  font-weight: var(--fw-semibold);
}

.field__error {
  font-size: var(--fs-sm);
  color: var(--color-danger-fg);
  font-weight: var(--fw-semibold);
}

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.field--check label {
  font-weight: var(--fw-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.field--check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .field input,
  .field select {
    transition: none;
  }
}