Own all form styling in components; remove form CSS from input.css

Form controls were styled "at a distance": Django renders bare
<input>/<select>/<textarea>/<label>, so input.css reached in with ID-scoped
#add-form descendant rules plus a global form *:disabled rule and .errorlist.
The #add-form ID specificity forced state rules to climb, needed
:not([data-search-select-search]) carve-outs, and broke on markup changes — it
surfaced as the add_purchase Name/related_game fields not reading as disabled.

Components now own all form styling via utilities on the elements themselves:

- PrimitiveWidgetsMixin stamps INPUT/SELECT/TEXTAREA_CLASS (incl. disabled:
  variants) onto native widgets by type, skipping SearchSelect (self-styled)
  and checkboxes.
- New FormFields(form, *, extras=...) renders label + control + errors + row
  layout with their own classes (replaces form.as_div()); the <form> owns its
  flex layout. extras appends a node into a named field's row (session
  timestamp buttons).
- AddForm/purchase/session render via FormFields; login too — a new
  LoginForm(PrimitiveWidgetsMixin, AuthenticationForm) styles its inputs and
  auth.py renders it via FormFields + a StyledButton (was as_table).
- input.css loses the entire #add-form block, the global :disabled rule, and
  .errorlist. State (disabled:) now lives on the element — no specificity wars,
  no carve-outs, robust to markup edits.

Tests: error rendering uses the component class (not .errorlist); add-form
labels/inputs carry their own classes; e2e login fixtures click the Login
button by text (submit is now a <button>); Name disabled cursor asserted.
CLAUDE.md documents the no-styling-at-a-distance + FormFields conventions.

513 passed; lint/format/ts-check clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

common/input.css

@@ -127,19 +127,9 @@
   }
 }
 
-/* Standalone form controls get a distinct disabled surface. The SearchSelect's
-   inner search box is excluded: it's a composite widget that owns its disabled
-   look on the wrapper (has-[:disabled] in _CONTAINER_CLASS), so painting the
-   inner input here would render a nested box inside the wrapper. */
-form input:disabled:not([data-search-select-search]),
-select:disabled,
-textarea:disabled {
-  @apply cursor-not-allowed bg-neutral-secondary-strong text-fg-disabled;
-}
-
-.errorlist {
-  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
-}
+/* Form controls (incl. disabled state) and form-field markup (labels, errors,
+   rows) are styled by utilities on the elements themselves — see
+   PrimitiveWidgetsMixin and FormFields. No form styling lives here. */
 
 #button-container button {
   @apply mx-1;
@@ -181,51 +171,6 @@ textarea:disabled {
     padding-left: 1em;
 }
 
-#add-form {
-  label + select, input, textarea {
-    @apply mt-1;
-  }
-  form {
-    @apply flex flex-col gap-3;
-  }
-
-  .form-row-button-group {
-    display: flex;
-    flex-direction: row;
-    @apply gap-0 p-0;
-    button {
-      @apply mr-0;
-      &:first-child {
-        @apply rounded-e-none;
-      }
-      &:nth-child(2) {
-        @apply rounded-none;
-      }
-      &:last-child {
-        @apply rounded-s-none;
-      }
-    }
-  }
-  label {
-    @apply mb-2.5 text-sm font-medium text-heading;
-  }
-  input:not([type="checkbox"]):not([data-search-select-search]) {
-    @apply mb-3 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body;
-  }
-  select {
-    @apply w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body;
-  }
-  textarea {
-    @apply bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body;
-  }
-  :has(> label + input[type="checkbox"]) {
-    @apply mt-3; /* needed because compared to all other form elements checkbox and its label are on the same row */
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-}
-
 @layer utilities {
   .toast-container {
     @apply fixed z-50 flex flex-col items-end bottom-0 right-0 p-4;