From ac503cd8acc4eb600f63079a5cddfcf80d7d6bda Mon Sep 17 00:00:00 2001
From: Richard Gibson <richard.gibson@gmail.com>
Date: Sun, 3 May 2026 14:51:45 -0400
Subject: [PATCH 1/2] DRY out the search result ::before styles

---
 css/elements.css                              | 38 ++++++-------------
 .../generated-reference/assets-inline.html    | 38 ++++++-------------
 2 files changed, 24 insertions(+), 52 deletions(-)

diff --git a/css/elements.css b/css/elements.css
index 202c1739..5fe932d9 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -1381,43 +1381,29 @@ a.menu-pane-header-production {
   overflow-y: auto;
 }
 
-li.menu-search-result-clause::before {
-  content: 'clause';
+#menu-search-results li::before {
+  display: none;
   width: 40px;
-  display: inline-block;
   text-align: right;
   padding-right: 1ex;
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-li.menu-search-result-op::before {
-  content: 'op';
-  width: 40px;
+#menu-search-results li.menu-search-result-clause::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'clause';
 }
-
-li.menu-search-result-prod::before {
-  content: 'prod';
-  width: 40px;
+#menu-search-results li.menu-search-result-op::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'op';
 }
-
-li.menu-search-result-term::before {
-  content: 'term';
-  width: 40px;
+#menu-search-results li.menu-search-result-prod::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'prod';
+}
+#menu-search-results li.menu-search-result-term::before {
+  display: inline-block;
+  content: 'term';
 }
 
 #menu-search-results ul {
diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html
index 9f1493f1..630b929c 100644
--- a/test/baselines/generated-reference/assets-inline.html
+++ b/test/baselines/generated-reference/assets-inline.html
@@ -2996,43 +2996,29 @@
   overflow-y: auto;
 }
 
-li.menu-search-result-clause::before {
-  content: 'clause';
+#menu-search-results li::before {
+  display: none;
   width: 40px;
-  display: inline-block;
   text-align: right;
   padding-right: 1ex;
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-li.menu-search-result-op::before {
-  content: 'op';
-  width: 40px;
+#menu-search-results li.menu-search-result-clause::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'clause';
 }
-
-li.menu-search-result-prod::before {
-  content: 'prod';
-  width: 40px;
+#menu-search-results li.menu-search-result-op::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'op';
 }
-
-li.menu-search-result-term::before {
-  content: 'term';
-  width: 40px;
+#menu-search-results li.menu-search-result-prod::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'prod';
+}
+#menu-search-results li.menu-search-result-term::before {
+  display: inline-block;
+  content: 'term';
 }
 
 #menu-search-results ul {

From da6b3c847cca179c3ad2405125ff8498765e4df7 Mon Sep 17 00:00:00 2001
From: Richard Gibson <richard.gibson@gmail.com>
Date: Sun, 3 May 2026 14:51:45 -0400
Subject: [PATCH 2/2] Further simplify search result ::before styles

---
 css/elements.css                              | 18 ++---------
 js/menu.js                                    | 12 ++++----
 .../generated-reference/assets-inline.html    | 30 ++++++-------------
 3 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/css/elements.css b/css/elements.css
index 5fe932d9..c701144f 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -1381,7 +1381,7 @@ a.menu-pane-header-production {
   overflow-y: auto;
 }
 
-#menu-search-results li::before {
+li.menu-search-result::before {
   display: none;
   width: 40px;
   text-align: right;
@@ -1389,21 +1389,9 @@ a.menu-pane-header-production {
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-#menu-search-results li.menu-search-result-clause::before {
+li.menu-search-result[data-kind]::before {
   display: inline-block;
-  content: 'clause';
-}
-#menu-search-results li.menu-search-result-op::before {
-  display: inline-block;
-  content: 'op';
-}
-#menu-search-results li.menu-search-result-prod::before {
-  display: inline-block;
-  content: 'prod';
-}
-#menu-search-results li.menu-search-result-term::before {
-  display: inline-block;
-  content: 'term';
+  content: attr(data-kind);
 }
 
 #menu-search-results ul {
diff --git a/js/menu.js b/js/menu.js
index da5e68c8..ae574f74 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -187,30 +187,30 @@ Search.prototype.displayResults = function (results) {
       let key = result.key;
       let entry = result.entry;
       let id = entry.id;
-      let cssClass = '';
+      let kind = '';
       let text = '';
 
       if (entry.type === 'clause') {
         let number = entry.number ? entry.number + ' ' : '';
         text = number + key;
-        cssClass = 'clause';
+        kind = 'clause';
         id = entry.id;
       } else if (entry.type === 'production') {
         text = key;
-        cssClass = 'prod';
+        kind = 'prod';
         id = entry.id;
       } else if (entry.type === 'op') {
         text = key;
-        cssClass = 'op';
+        kind = 'op';
         id = entry.id || entry.refId;
       } else if (entry.type === 'term') {
         text = key;
-        cssClass = 'term';
+        kind = 'term';
         id = entry.id || entry.refId;
       }
 
       if (text) {
-        html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
+        html += `<li class="menu-search-result"${kind ? ` data-kind="${kind}"` : ''}><a href="${makeLinkToId(id)}">${text}</a></li>`;
       }
     });
 
diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html
index 630b929c..4a3bdd8d 100644
--- a/test/baselines/generated-reference/assets-inline.html
+++ b/test/baselines/generated-reference/assets-inline.html
@@ -271,30 +271,30 @@
       let key = result.key;
       let entry = result.entry;
       let id = entry.id;
-      let cssClass = '';
+      let kind = '';
       let text = '';
 
       if (entry.type === 'clause') {
         let number = entry.number ? entry.number + ' ' : '';
         text = number + key;
-        cssClass = 'clause';
+        kind = 'clause';
         id = entry.id;
       } else if (entry.type === 'production') {
         text = key;
-        cssClass = 'prod';
+        kind = 'prod';
         id = entry.id;
       } else if (entry.type === 'op') {
         text = key;
-        cssClass = 'op';
+        kind = 'op';
         id = entry.id || entry.refId;
       } else if (entry.type === 'term') {
         text = key;
-        cssClass = 'term';
+        kind = 'term';
         id = entry.id || entry.refId;
       }
 
       if (text) {
-        html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
+        html += `<li class="menu-search-result"${kind ? ` data-kind="${kind}"` : ''}><a href="${makeLinkToId(id)}">${text}</a></li>`;
       }
     });
 
@@ -2996,7 +2996,7 @@
   overflow-y: auto;
 }
 
-#menu-search-results li::before {
+li.menu-search-result::before {
   display: none;
   width: 40px;
   text-align: right;
@@ -3004,21 +3004,9 @@
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-#menu-search-results li.menu-search-result-clause::before {
+li.menu-search-result[data-kind]::before {
   display: inline-block;
-  content: 'clause';
-}
-#menu-search-results li.menu-search-result-op::before {
-  display: inline-block;
-  content: 'op';
-}
-#menu-search-results li.menu-search-result-prod::before {
-  display: inline-block;
-  content: 'prod';
-}
-#menu-search-results li.menu-search-result-term::before {
-  display: inline-block;
-  content: 'term';
+  content: attr(data-kind);
 }
 
 #menu-search-results ul {