big UI update

css/compose.css

@@ -0,0 +1,91 @@
+.composing-section {
+
+	p + #compose, h2 + #compose {
+		margin-top: 2rem;
+	}
+
+	#compose {
+		border: 1px solid var(--neutral-500);
+		border-radius: 5px;
+		padding: var(--compose-field-padding);
+
+		.input-group {
+			display: flex;
+			min-width: 100%;
+
+			input {
+				border: none;
+				border-radius: 0;
+				min-width: unset;
+				flex-grow: 2;
+				border-left: 2px solid transparent;
+			}
+			input:focus {
+				outline: none;
+				border-left: 2px solid blue;
+			}
+		}
+
+
+	}
+
+   .indicator-labels {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      padding-inline: calc(var(--input-padding-inline) + var(--compose-field-padding));
+
+      li {
+         display: flex; 
+         align-items: center;
+         justify-content: center;
+         height: 30px;
+         width: 20px;
+      }
+   }
+
+   .indicators {
+      display: flex;
+      align-items: center;
+      padding-right: var(--input-padding-inline);
+   }
+
+   .indicator{
+      --indicator-diameter: 1.2rem;
+      width: var(--indicator-diameter);
+      height: var(--indicator-diameter);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.bad:before {
+         content: url(../static/ex.svg);
+      }
+
+      &.good:before {
+         content: url(../static/check.svg);
+      }
+
+      &:not(.good, .bad){
+         &:before{
+            content: '';
+            min-height: 4px;
+            aspect-ratio: 1;
+            background-color: var(--ink);
+            border-radius: 50%;
+         }
+      }
+   }
+
+   .legend-item {
+      display: flex;
+      gap: .6rem;
+      align-items: center;
+   }
+
+
+}
+
+
+
+

css/setup.css

@@ -48,3 +48,11 @@ svg {
 :where(:not(:defined)) {
 	display: block;
 }
+
+details summary { 
+	cursor: pointer;
+}
+
+details summary > * {
+	display: inline;
+}