Move some of the new design language CSS into a common location

styles/global/design-v2.scss

@@ -0,0 +1,55 @@
+.item--custom,
+.actor--mob {
+	input {
+		border: 2px solid black;
+		background: none;
+		box-shadow: none;
+
+		&.left { text-align: left; }
+		&.center { text-align: center; }
+		&.right { text-align: right; }
+
+		&:focus {
+			transform: scale(102%);
+		}
+	}
+
+	label.masked-input.masked-input {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		transition: all ease-in-out 50ms;
+
+		&:focus-within {
+			transform: scale(102%);
+		}
+
+		> input {
+			border: none;
+			background: none;
+			border-radius: 0;
+			border: none;
+			&:focus, &:focus-visible {
+				box-shadow: none;
+			}
+		}
+	}
+
+	label.masked-textarea.masked-textarea {
+		display: flex;
+		flex-direction: column;
+		transition: all ease-in-out 50ms;
+
+		&:focus-within {
+			transform: scale(102%);
+		}
+
+		textarea {
+			flex-grow: 1;
+			resize: none;
+			border: none;
+			box-shadow: none;
+			background: none;
+		}
+	}
+}

styles/root.scss

@@ -6,6 +6,7 @@
 
 @use "./global/icons.scss";
 @use "./global/buttons.scss";
+@use "./global/design-v2.scss";
 
 @use "./dialog/DiceList.scss";
 

styles/sheets/actor/mob/mob.scss

@@ -34,55 +34,10 @@
 		}
 	}
 
-	label.mask-input {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		transition: all ease-in-out 50ms;
-
-		&:focus-within {
-			transform: scale(102%);
-		}
-
-		input {
-			text-align: right;
-			border: none;
-			background: none;
-			border-radius: 0;
-			border-bottom: 1px solid black;
-			&:focus, &:focus-visible {
-				box-shadow: none;
-			}
-		}
-
-		input.left {
-			text-align: left;
-		}
-	}
-
 	.wide {
 		grid-column: span 2;
 	}
 
-	.mask-textarea {
-		display: flex;
-		flex-direction: column;
-		transition: all ease-in-out 50ms;
-
-		&:focus-within {
-			transform: scale(102%);
-		}
-
-		textarea {
-			flex-grow: 1;
-			resize: none;
-			border: none;
-			box-shadow: none;
-			background: none;
-		}
-	}
-
-
 // Area-specific stylings
 
 	.name {

templates/actors/mobs/main.hbs

@@ -6,23 +6,25 @@
 		name="name"
 		value="{{actor.name}}"
 	>
-	<label class="initiative mask-input">
+	<label class="initiative masked-input">
 		Initiative:
 		<input
 			type="number"
+			class="right"
 			name="system.initiative"
 			value="{{system.initiative}}"
 		>
 	</label>
-	<label class="bytes mask-input">
+	<label class="bytes masked-input">
 		Bytes:
 		<input
 			type="number"
+			class="right"
 			name="system.bytes"
 			value="{{system.bytes}}"
 		>
 	</label>
-	<label class="immune wide mask-input">
+	<label class="immune wide masked-input">
 		Drops:
 		<input
 			type="text"
@@ -31,23 +33,25 @@
 			value="{{system.drops}}"
 		>
 	</label>
-	<label class="bonus mask-input">
+	<label class="bonus masked-input">
 		Bonus:
 		<input
 			type="number"
+			class="right"
 			name="system.bonus"
 			value="{{system.bonus}}"
 		>
 	</label>
-	<label class="morale mask-input">
+	<label class="morale masked-input">
 		Morale:
 		<input
 			type="number"
+			class="right"
 			name="system.morale"
 			value="{{system.morale}}"
 		>
 	</label>
-	<label class="weak wide mask-input">
+	<label class="weak wide masked-input">
 		Weak:
 		<input
 			type="text"
@@ -56,7 +60,7 @@
 			value="{{system.weak}}"
 		>
 	</label>
-	<label class="immune wide mask-input">
+	<label class="immune wide masked-input">
 		Immune:
 		<input
 			type="text"
@@ -82,13 +86,13 @@
 		<div style="flex-grow: 1"></div>
 		<button class="confirm edit-dice">Edit</button>
 	</div>
-	<label class="description mask-textarea">
+	<label class="description masked-textarea">
 		Description:
 		<textarea
 			name="system.description"
 		>{{system.description}}</textarea>
 	</label>
-	<label class="stunts mask-textarea">
+	<label class="stunts masked-textarea">
 		Stunts:
 		<textarea
 			name="system.stunts"