feat: highlight search matches and document the working UI

apps/desktop/src/style.css

@@ -836,3 +836,48 @@ footer {
   margin-left: 8px;
   color: var(--muted);
 }
+mark[data-match="literal"] {
+  background: #ffebae;
+  color: #31280c;
+  border-radius: 2px;
+  padding: 0 1px;
+  font-weight: 600;
+  box-decoration-break: clone;
+}
+.passage.semantic-passage {
+  background: var(--selected);
+  border-left: 3px solid var(--brand);
+}
+.match-details {
+  margin: 0 20px 12px;
+  color: var(--muted);
+  font-size: 11px;
+}
+.match-details summary {
+  width: fit-content;
+  cursor: pointer;
+}
+.match-details p {
+  margin: 6px 0 0;
+  line-height: 1.5;
+}
+#match-legend {
+  font-size: 10px;
+}
+@media (prefers-color-scheme: dark) {
+  mark[data-match="literal"] {
+    background: #65531e;
+    color: #fff2bd;
+  }
+}
+@media (forced-colors: active) {
+  mark[data-match="literal"] {
+    background: Highlight;
+    color: HighlightText;
+    outline: 1px solid Highlight;
+  }
+  .passage.semantic-passage {
+    background: Canvas;
+    border-color: Highlight;
+  }
+}