[WV2] Unify common CSS patterns

app/assets/stylesheets/wardrobe/show.css

@@ -273,6 +273,19 @@ select,
   }
 }
 
+/* Progressive enhancement: submit buttons hidden when JS auto-submits */
+@media (scripting: enabled) {
+  .progressive-submit {
+    opacity: 0;
+    animation: fade-in 0.25s forwards;
+    animation-delay: 0.75s;
+  }
+}
+
+:is(species-color-picker, pose-picker-popover):state(auto-loading) .progressive-submit {
+  display: none;
+}
+
 /* ===================================================================
    Page Layout
    Top-level grid: preview on left/top, controls on right/bottom.
@@ -434,30 +447,15 @@ body.wardrobe-v2 {
       }
     }
 
-    /* Submit button: progressive enhancement pattern */
-    /* If JS is disabled, the button is always visible */
-    /* If JS is enabled but slow to load, fade in after 0.75s */
-    /* Once the web component loads, hide the button completely */
     input[type="submit"] {
       padding: 0.5rem 1rem;
       font-size: 1rem;
     }
 
-    /* If JS is enabled, hide the submit button initially with a delay */
     @media (scripting: enabled) {
       input[type="submit"] {
         position: absolute;
         margin-left: 0.5em;
-        opacity: 0;
-        animation: fade-in 0.25s forwards;
-        animation-delay: 0.75s;
-      }
-    }
-
-    /* Once auto-loading is ready, hide the submit button completely */
-    &:state(auto-loading) {
-      input[type="submit"] {
-        display: none;
       }
     }
   }
@@ -551,6 +549,14 @@ pose-picker-popover {
     user-select: none;
   }
 
+  .pose-option input[type="radio"],
+  .style-option input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
   .pose-option {
     display: block;
     cursor: pointer;
@@ -559,13 +565,6 @@ pose-picker-popover {
     height: 60px;
     margin: 0 auto;
 
-    input[type="radio"] {
-      position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
     .pose-thumbnail {
       width: 60px;
       height: 60px;
@@ -629,27 +628,11 @@ pose-picker-popover {
     }
   }
 
-  /* Submit button: progressive enhancement pattern */
   .pose-submit-button {
     margin-top: 1rem;
     width: 100%;
   }
 
-  /* If JS is enabled, hide the submit button initially with a delay */
-  @media (scripting: enabled) {
-    .pose-submit-button {
-      opacity: 0;
-      animation: fade-in 0.25s forwards;
-      animation-delay: 0.75s;
-    }
-  }
-
-  /* Once auto-submit is enabled, hide the submit button completely */
-  &:state(auto-loading) .pose-submit-button,
-  &:state(auto-loading) .style-submit-button {
-    display: none;
-  }
-
   /* Tab panel layout */
   .tab-list {
     display: flex;
@@ -708,13 +691,6 @@ pose-picker-popover {
     display: block;
     cursor: pointer;
 
-    input[type="radio"] {
-      position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
     .style-option-content {
       display: flex;
       align-items: center;
@@ -766,19 +742,10 @@ pose-picker-popover {
     }
   }
 
-  /* Style submit button: same progressive enhancement as pose */
   .style-submit-button {
     margin-top: 1rem;
     width: 100%;
   }
-
-  @media (scripting: enabled) {
-    .style-submit-button {
-      opacity: 0;
-      animation: fade-in 0.25s forwards;
-      animation-delay: 0.75s;
-    }
-  }
 }
 
 /* ===================================================================

app/views/wardrobe/appearance/_pose_picker_form.html.haml

@@ -29,4 +29,4 @@
           = render "appearance/pose_option", pose: "SAD_FEM", pet_state: @available_poses["SAD_FEM"], selected: !@alt_style && @selected_pose == "SAD_FEM"
         %td
           = render "appearance/pose_option", pose: "SICK_FEM", pet_state: @available_poses["SICK_FEM"], selected: !@alt_style && @selected_pose == "SICK_FEM"
-  = submit_tag "Change pose", name: nil, class: "pose-submit-button"
+  = submit_tag "Change pose", name: nil, class: "pose-submit-button progressive-submit"

app/views/wardrobe/appearance/_species_color_picker.html.haml

@@ -9,4 +9,4 @@
       options_from_collection_for_select(@species, "id", "human_name",
         @selected_species&.id),
       "aria-label": "Pet species"
-    = submit_tag "Go", name: nil
+    = submit_tag "Go", name: nil, class: "progressive-submit"

app/views/wardrobe/appearance/_style_picker_form.html.haml

@@ -8,4 +8,4 @@
           .style-option-thumbnail
             %img{src: alt_style.thumbnail_url, alt: "", width: 40, height: 40, loading: "lazy"}
           %span.style-option-name= alt_style.adjective_name
-  = submit_tag "Change style", name: nil, class: "style-submit-button"
+  = submit_tag "Change style", name: nil, class: "style-submit-button progressive-submit"