/* ============================================================================
   Components - Forms (inputs + field wrapper)
   system/components/forms.css

   Two layers:

   1. Plain element styling - input, textarea, select inside .gm get sensible
      defaults. No class needed.

   2. .gm-field - a wrapper that composes a label + control + hint/error.
      Use this whenever you have a label-bearing form field.

   See sibling forms.md.
   ============================================================================ */

/* ----------------------------------------------------------------------
   Element-level styling - applies to bare inputs inside .gm
   ---------------------------------------------------------------------- */
.gm input[type="text"],
.gm input[type="password"],
.gm input[type="email"],
.gm input[type="number"],
.gm input[type="search"],
.gm input[type="tel"],
.gm input[type="url"],
.gm textarea,
.gm select {
  width: 100%;
  min-height: 44px;
  padding: var(--gm-space-3) var(--gm-space-4);
  font-family: var(--gm-font-sans);
  font-size: var(--gm-fs-base);
  background: var(--gm-bg-sunken);
  border: 1px solid var(--gm-border-default);
  border-radius: var(--gm-radius-md);
  color: var(--gm-text-primary);
  outline: none;
  transition: border-color var(--gm-duration-fast) var(--gm-ease-out);
}
.gm input::placeholder,
.gm textarea::placeholder {
  color: var(--gm-text-muted);
}
.gm input:focus,
.gm textarea:focus,
.gm select:focus {
  border-color: var(--gm-accent);
}
.gm input:disabled,
.gm textarea:disabled,
.gm select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------
   .gm-field - label + control + hint/error wrapper
   ---------------------------------------------------------------------- */
.gm .gm-field {
  display: flex;
  flex-direction: column;
  gap: var(--gm-space-2);
}

.gm .gm-field-label {
  font-size: var(--gm-fs-sm);
  font-weight: 500;
  color: var(--gm-text-secondary);
  letter-spacing: 0.01em;
}

.gm .gm-field-required::after {
  content: " *";
  color: var(--gm-danger);
}

.gm .gm-field-hint {
  font-size: var(--gm-fs-xs);
  color: var(--gm-text-muted);
  line-height: var(--gm-lh-base);
}

.gm .gm-field-error {
  font-size: var(--gm-fs-xs);
  color: var(--gm-danger);
  line-height: var(--gm-lh-base);
}

/* Invalid state on the input itself */
.gm .gm-field-invalid input,
.gm .gm-field-invalid textarea,
.gm .gm-field-invalid select {
  border-color: var(--gm-danger);
}