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

templates/Apps/ArmourSheet/style.css

@@ -0,0 +1,131 @@
+.ripcrypt.ArmourSheet > .window-content {
+	--input-height: 1rem;
+	--input-underline: none;
+	--col-gap: 8px;
+	--row-gap: 8px;
+
+	--string-tags-tag-text: var(--header-text);
+	--string-tags-tag-background: var(--header-background);
+	--string-tags-add-text: white;
+	--string-tags-add-background: var(--accent-1);
+	--string-tags-input-text: white;
+	--string-tags-input-background: var(--accent-2);
+
+	--input-text: white;
+	--input-background: var(--accent-2);
+	--button-text: white;
+	--button-background: var(--accent-2);
+
+	--pill-width: 100%;
+	--pill-border-radius: 4px;
+
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	padding: 8px;
+	background: var(--base-background);
+	color: var(--base-text);
+
+	hr {
+		background: var(--accent-1);
+		grid-column: 1 / -1;
+		height: 1px;
+		width: 90%;
+		margin: 0 auto;
+
+		&.vertical {
+			grid-column: unset;
+			height: 100%;
+		}
+	}
+
+	label, .label {
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+
+		padding: 2px 4px;
+		text-transform: uppercase;
+		font-size: var(--font-size-14);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-weight: bold;
+	}
+
+	button, input, select, .value {
+		border-radius: 4px;
+		padding: 2px 4px;
+	}
+	.value {
+		border: 2px solid var(--accent-2);
+	}
+
+	.contents {
+		display: grid;
+		grid-template-columns: 300px 1px 118px;
+		gap: 8px;
+
+		> .contents__left {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+			column-gap: var(--col-gap);
+			row-gap: var(--row-gap);
+		}
+
+		> .contents__right {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+		}
+	}
+
+	.section-pill {
+		background: var(--section-header-background);
+		color: var(--section-header-text);
+		padding: 0 4px;
+		border-radius: 999px;
+		text-align: right;
+	}
+
+	rc-border {
+		grid-column: 1 / -1;
+
+		> .content {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+			column-gap: var(--col-gap);
+			row-gap: var(--row-gap);
+		}
+
+		.label {
+			background: purple;
+		}
+	}
+
+	.center {
+		text-align: center;
+	}
+
+	.compass {
+		--size: 35px;
+		width: var(--size);
+		height: var(--size);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		border: 2px solid var(--accent-1);
+		border-radius: 50%;
+		font-size: 1.1rem;
+		position: relative;
+		background: var(--base-background);
+
+		> .value {
+			background: none;
+			width: 70%;
+			text-align: center;
+			padding: 0;
+		}
+	}
+}