/* forms.css — form field + link-button primitives.
   Extracted from menus-modals.css (2026-08-08) so the standalone auth pages can
   reuse them without pulling in 28 KB of app-modal CSS. Loaded by BOTH index.html
   and auth/*.html — edit here only, never re-copy.
   Spec: docs/superpowers/specs/2026-08-08-dedicated-auth-pages-design.md */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}

.field-input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: var(--fs-base);
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* .field-input is a fixed 38px row; a textarea has to grow instead.
   menus-modals.css declared this twice (the later duplicate won on `padding`);
   merged here to the values that were actually computing, so nothing shifts. */
textarea.field-input {
  height: auto;
  min-height: 62px;
  padding: 8px 12px;
  resize: vertical;
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.45;
}

select.field-input {
  cursor: pointer;
}

.field-input::placeholder {
  color: var(--faint);
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-error {
  font-size: var(--fs-sm);
  color: var(--danger);
}

.field-notice {
  font-size: var(--fs-sm);
  color: var(--accent-text);
}

.link-btn {
  font-size: var(--fs-sm);
  color: var(--accent-text);
  text-align: center;
  padding: 4px;
}

.link-btn:hover {
  text-decoration: underline;
}