/* Single-column field layout. Label on top, description below label,
   input below description. Used everywhere on the site (auth,
   settings, profile). Width is owned by the parent shell — this
   template's job is the vertical stack. */

.form-field {
  display: block;
  margin-bottom: var(--space-5);
}
.form-field:last-child {
  margin-bottom: 0;
}

.form-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}

.form-field-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  font-weight: var(--font-medium);
  color: var(--ink);
  margin: 0;
}

/* Inline status (next to the label): availability + password strength */
.form-field-status {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--font-medium);
  letter-spacing: 0.01em;
}
.form-field-status.is-checking { color: var(--ink-dim); }
.form-field-status.is-ok       { color: var(--green); }
.form-field-status.is-bad      { color: var(--red); }
.form-field-status.is-weak     { color: var(--amber, #d97706); }

.form-field-description {
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
  line-height: 1.45;
}

/* Error state: red outline on the inner input, matches @elements/style's
   .input.is-error treatment. We apply at the parent level so the host
   template doesn't have to thread the class through to every input. */
.form-field.has-error .input,
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--red);
}
.form-field.has-error .input:focus,
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10);
}

.form-field-error {
  margin-top: 0.375rem;
  font-family: var(--font-sans);
  font-size: 0.71875rem;
  color: var(--red);
}