Make a unique ArmourSheet so that it can have a better UX for indicating protection locations

templates/css/elements/input.css

@@ -21,6 +21,7 @@
 			all: revert-layer;
 			--checkbox-checked-color: var(--accent-3);
 			--checkbox-background-color: var(--accent-2);
+			--checkbox-checkmark-color: black;
 		}
 
 		&::placeholder {

templates/css/main.css

@@ -1,4 +1,4 @@
-@layer resets, themes, elements, components, apps, exceptions;
+@layer resets, themes, elements, partials, apps, exceptions;
 
 /* Resets */
 @import url("./resets/inputs.css") layer(resets);
@@ -19,6 +19,9 @@
 @import url("./elements/string-tags.css") layer(elements);
 @import url("./elements/table.css") layer(elements);
 
+/* Partials */
+@import url("./partials/item-header.css") layer(partials);
+
 /* Applications */
 @import url("../Apps/apps.css") layer(apps);
 

templates/css/partials/item-header.css

@@ -0,0 +1,11 @@
+.item-header {
+	.name-row {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) min-content 50px;
+		gap: 4px;
+
+		.quantity {
+			text-align: center;
+		}
+	}
+}