feat: Add content for quest view

- New faction selection
- New detail structure
- Refactor behavior for deselecting elements
- Add events

source/style/modules/game/_tfw.scss

@@ -30,7 +30,8 @@
 		font-weight: bold;
 	}
 
-	.subtle {
+	.subtle,
+	hgroup p {
 		@extend .txt_smaller;
 
 		color: hippie.$color_darkest;
@@ -45,10 +46,13 @@
 		position: relative;
 		overflow: hidden;
 
+		h2, span {
+			color: white;
+		}
+
 		*:not(canvas, img) {
 			z-index: map.get(hippie.$z-indexes, "content-bottom");
 			position: relative;
-			color: white;
 		}
 
 		canvas, img {
@@ -86,11 +90,23 @@
 			gap: hippie.$space_double;
 			min-height: 0;
 
-			& > div:last-child {
-				flex: 2;
+			nav {
+				flex: 1;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
+
+				input:not([type="checkbox"], [type="range"]) {
+					@extend .input_io;
+				}
+
+				select {
+					@extend .io_select;
+				}
 			}
 
-			& > div:nth-child(2) {
+			& > div {
 				flex: 4;
 				display: flex;
 				flex-flow: column nowrap;
@@ -108,19 +124,15 @@
 				}
 			}
 
-			nav {
-				flex: 1;
-				display: flex;
-				flex-flow: column nowrap;
-				gap: hippie.$space_basic;
-				min-height: 0;
+			aside {
+				flex: 2;
 
-				input:not([type="checkbox"], [type="range"]) {
-					@extend .input_io;
+				.background {
+					border-bottom: 1px solid hippie.basic_color(echo);
 				}
 
-				select {
-					@extend .io_select;
+				& > div {
+					display: none;
 				}
 			}
 
@@ -134,7 +146,6 @@
 				}
 
 				td {
-					height: 4em;
 					vertical-align: top;
 
 					span {
@@ -143,12 +154,24 @@
 						color: white;
 					}
 
-					&:last-child {
+					&.subtle {
 						text-align: center;
 						vertical-align: middle;
 					}
 				}
 
+				&#questSelection {
+					display: none;
+				}
+
+				&[data-type="faction"] td {
+					height: 6em;
+				}
+
+				&[data-type="quest"] td {
+					height: 4em;
+				}
+
 				.l {
 					width: 30%;
 				}
@@ -157,7 +180,11 @@
 					width: 50%;
 				}
 
-				.t, .s {
+				.g {
+					width: 40%;
+				}
+
+				.t, .s, .c, .f {
 					width: 20%;
 				}
 			}
@@ -173,10 +200,6 @@
 		}
 	}
 
-	.quest {
-		opacity: 0;
-	}
-
 	footer *:not(button[data-action="back"]) {
 		display: none;
 	}