/* Form field — Theme 3D
 * Source: docs/superpowers/plans/2026-04-18-app-polish-maximization.md Theme 3D
 *
 * Token-driven labeled input / textarea / submit. Used by the form macros
 * in web/templates/_macros.html. Submit-pending state is set by
 * web/static/js/forms.js (sets disabled + aria-busy + swaps label copy).
 */

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

.form-field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.form-field__required {
  color: var(--danger);
  margin-left: var(--space-1);
  font-weight: var(--weight-semibold);
}

.form-field__input {
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--motion-quick) var(--ease-out),
              box-shadow var(--motion-quick) var(--ease-out);
}

.form-field__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus-primary);
}

.form-field__input--textarea {
  resize: vertical;
  min-height: 4rem;
  font-family: var(--font-sans);
}

.form-field__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

.form-field__error {
  font-size: var(--text-xs);
  color: var(--danger);
  margin: 0;
}

.form-field--error .form-field__input {
  border-color: var(--danger);
}

.form-field--error .form-field__input:focus {
  box-shadow: var(--shadow-focus-danger);
}

/* Submit button pending state.
 * Pairs with .btn / .btn-primary in style.css; only applies pending opacity
 * + cursor without overriding base color/bg so visual stays consistent. */
.form-submit[disabled],
.form-submit[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
}