Migrate pet state edit form to .support-form class

Most notable change here is extracting the pose option bubbles into a
`data-type="radio-grid"`, and pulling that into the `.support-form`
CSS. My rationale is that, unlike most fields, this field benefits from
being 100%-width, and I don't want to specify that as an override if I
can avoid it, because that's fragile-y.

Instead, I extract this into a generic type of field that
`.support-form` can use (it feels pretty reusable anyway!), and require
the caller to specify how many columns they want as `--num-columns`.

app/assets/stylesheets/application/support-form.sass

@@ -1,3 +1,5 @@
+@import "../partials/clean/constants"
+
 .support-form
 	display: flex
 	flex-direction: column
@@ -11,7 +13,7 @@
 		gap: .75em
 		width: 100%
 
-		li
+		> li
 			display: flex
 			flex-direction: column
 			gap: .25em
@@ -21,6 +23,30 @@
 				display: block
 				font-weight: bold
 
+			&[data-type=radio-grid] // Set the `--num-columns` property to configure!
+				max-width: none
+
+				ul
+					list-style-type: none
+					display: grid
+					grid-template-columns: repeat(var(--num-columns, 1), 1fr)
+					gap: .25em
+
+				label
+					display: flex
+					align-items: center
+					gap: .5em
+					padding: .5em 1em
+					border: 1px solid $soft-border-color
+					border-radius: 1em
+
+					input
+						margin: 0
+
+					&:has(:checked)
+						background: $module-bg-color
+						border-color: $module-border-color
+
 	input[type=text], input[type=url]
 		width: 100%
 		min-width: 10ch
@@ -35,7 +61,7 @@
 			width: 40px
 			height: 40px
 
-	fieldset[data-type=radio]
+	fieldset
 		display: flex
 		flex-direction: column
 		gap: .25em

app/assets/stylesheets/pet_states/edit.sass

@@ -1,25 +1,5 @@
-@import "../partials/clean/constants"
-
 outfit-viewer
 	margin: 0 auto
 
-.pose-options
+.fields li[data-type=radio-grid]
-	list-style-type: none
+	--num-columns: 3
-	display: grid
-	grid-template-columns: 1fr 1fr 1fr
-	gap: .25em
-
-	label
-		display: flex
-		align-items: center
-		gap: .5em
-		padding: .5em 1em
-		border: 1px solid $soft-border-color
-		border-radius: 1em
-
-		input
-			margin: 0
-
-		&:has(:checked)
-			background: $module-bg-color
-			border-color: $module-border-color

app/views/pet_states/edit.html.haml

@@ -17,31 +17,35 @@
 
 = outfit_viewer pet_state: @pet_state
 
-= form_with model: [@pet_type, @pet_state] do |f|
+= form_with model: [@pet_type, @pet_state], class: "support-form" do |f|
 	- if @pet_state.errors.any?
 		%p
 			Could not save:
 			%ul.errors
 				- @pet_state.errors.each do |error|
 					%li= error.full_message
-	%dl
+	%ul.fields
-		%dt Pose
+		%li{"data-type": "radio-grid"}
-		%dd
+			%fieldset
-			%ul.pose-options
+				%legend Pose
-				- pose_options.each do |pose|
+				%ul
-					%li
+					- pose_options.each do |pose|
-						%label
+						%li
-							= f.radio_button :pose, pose
+							%label
-							= pose_name pose
+								= f.radio_button :pose, pose
-		%dt Glitched?
+								= pose_name pose
-		%dd
+		%li
+			= f.label :glitched, "Gliched?"
 			= f.select :glitched, [["✅ Not marked as Glitched", false],
-			["👾 Yes, it's bad news bonko'd", true]]
+				["👾 Yes, it's bad news bonko'd", true]]
-	= f.submit "Save"
+	
+	.actions
+		= f.submit "Save changes"
 
 - content_for :stylesheets do
 	= stylesheet_link_tag "application/breadcrumbs"
 	= stylesheet_link_tag "application/outfit-viewer"
+	= stylesheet_link_tag "application/support-form"
 	= page_stylesheet_link_tag "pet_states/edit"
 
 - content_for :javascripts do