Unify disabled appearance across all form controls

Disabled controls looked inconsistent: the SearchSelect faded (opacity-50)
while native inputs used a solid strong surface. Standardize on the faded look
(opacity-50) the user preferred, via shared constants so every form element
matches:

- DISABLED_CONTROL_CLASS (disabled:opacity-50 disabled:cursor-not-allowed) on
  the control — native inputs/select/textarea via PrimitiveWidgetsMixin, plus
  the Checkbox component (previously had no disabled style).
- DISABLED_WITHIN_CLASS (has-[:disabled]: wrapper variant) for composite
  controls like SearchSelect whose disabled state lives on an inner element.

e2e asserts a disabled SearchSelect and the Name input fade identically
(opacity 0.5) and return to 1 when enabled. CLAUDE.md documents the shared
disabled constants.

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

games/forms.py

@@ -4,6 +4,7 @@ from django.db import transaction
 
 from common.components import (
     DEFAULT_PREFETCH,
+    DISABLED_CONTROL_CLASS,
     SearchSelect,
     SearchSelectOption,
     render,
@@ -28,12 +29,9 @@ autofocus_input_widget = forms.TextInput(attrs={"autofocus": "autofocus"})
 
 # Form controls self-style: these utility strings live on the elements (applied
 # by PrimitiveWidgetsMixin), so there is no form styling in input.css and no
-# selector reaching in to style them. The disabled: variants put state on the
-# element too — no specificity wars, robust to markup changes.
-_DISABLED_CONTROL = (
-    "disabled:bg-neutral-secondary-strong disabled:text-fg-disabled "
-    "disabled:cursor-not-allowed"
-)
+# selector reaching in to style them. The disabled appearance is the shared
+# DISABLED_CONTROL_CLASS so every form element looks the same disabled.
+_DISABLED_CONTROL = DISABLED_CONTROL_CLASS
 INPUT_CLASS = (
     "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 "

games/static/base.css

@@ -3438,14 +3438,9 @@
       cursor: not-allowed;
     }
   }
-  .disabled\:bg-neutral-secondary-strong {
+  .disabled\:opacity-50 {
     &:disabled {
-      background-color: var(--color-neutral-secondary-strong);
-    }
-  }
-  .disabled\:text-fg-disabled {
-    &:disabled {
-      color: var(--color-fg-disabled);
+      opacity: 50%;
     }
   }
   .has-\[\:disabled\]\:cursor-not-allowed {