From 13f36344a7e23e6100829060826e760f36ad8f69 Mon Sep 17 00:00:00 2001
From: Daniel Ellison <daniel@syrinx.net>
Date: Thu, 23 Jul 2026 09:14:51 -0400
Subject: [PATCH] Organize lexicon search filters

---
 site/explore.html | 37 ++++++++++++++++++++++++-------
 site/style.css    | 56 +++++++++++++++++++++++++++++++++--------------
 2 files changed, 69 insertions(+), 24 deletions(-)

diff --git a/site/explore.html b/site/explore.html
index 0d6c0a00..c38965d6 100644
--- a/site/explore.html
+++ b/site/explore.html
@@ -20,11 +20,12 @@ <h1 class="mark"><a href="index.html" style="color:inherit;text-decoration:none"
     <input id="q" type="search" aria-label="search query" placeholder="search the lexicon&hellip;" autocomplete="off" autofocus>
   </div>
 
-  <div class="filters">
-    <label class="search-field" for="f-field"><span>search in</span>
+  <div class="search-controls">
+    <label class="search-field" for="f-field">
+      <span>search in</span>
       <select id="f-field">
         <option value="all">all fields</option>
-        <option value="word">Phi word</option>
+        <option value="word">phi word</option>
         <option value="registered-compounds">registered compounds</option>
         <option value="gloss">gloss</option>
         <option value="pronunciation">pronunciation</option>
@@ -35,11 +36,31 @@ <h1 class="mark"><a href="index.html" style="color:inherit;text-decoration:none"
         <option value="usage_and_examples">usage and examples</option>
       </select>
     </label>
-    <select id="f-pos"><option value="">any part of speech</option></select>
-    <select id="f-domain"><option value="">any semantic domain</option></select>
-    <select id="f-module"><option value="">any module</option><option value="base-vocabulary">base vocabulary</option></select>
-    <select id="f-pillar"><option value="">any pillar</option></select>
-    <button id="clear" type="button" title="clear search and filters">clear</button>
+
+    <div class="filters" role="group" aria-labelledby="filter-label">
+      <div class="filter-heading">
+        <span id="filter-label">filter by</span>
+        <button id="clear" type="button" title="clear search and filters">clear</button>
+      </div>
+      <div class="filter-grid">
+        <label class="filter-field" for="f-pos">
+          <span>part of speech</span>
+          <select id="f-pos"><option value="">any</option></select>
+        </label>
+        <label class="filter-field" for="f-domain">
+          <span>semantic domain</span>
+          <select id="f-domain"><option value="">any</option></select>
+        </label>
+        <label class="filter-field" for="f-module">
+          <span>module</span>
+          <select id="f-module"><option value="">any</option><option value="base-vocabulary">base vocabulary</option></select>
+        </label>
+        <label class="filter-field" for="f-pillar">
+          <span>pillar</span>
+          <select id="f-pillar"><option value="">any</option></select>
+        </label>
+      </div>
+    </div>
   </div>
 
   <p id="status" class="status" aria-live="polite" aria-atomic="true"></p>
diff --git a/site/style.css b/site/style.css
index ed3f18ef..307514ec 100644
--- a/site/style.css
+++ b/site/style.css
@@ -98,22 +98,24 @@ main { max-width: 44rem; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
 .searchbar input:focus { border-color: var(--sage); }
 .searchbar input::placeholder { color: var(--muted); opacity: .7; }
 
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .5rem;
+.search-controls {
   margin-top: .6rem;
-  align-items: center;
 }
 .search-field {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 16rem;
+  gap: .4rem;
   align-items: center;
-  gap: .35rem;
+  justify-content: start;
+}
+.search-field > span,
+.filter-heading > span,
+.filter-field > span {
   color: var(--muted);
-  font-size: .85rem;
-  white-space: nowrap;
+  font-size: .78rem;
 }
-.filters select, .filters button {
+.search-controls select,
+.search-controls button {
   font: inherit;
   font-size: .85rem;
   color: var(--ink);
@@ -122,9 +124,31 @@ main { max-width: 44rem; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
   border-radius: 2px;
   padding: .3rem .55rem;
 }
-.filters select:focus, .filters button:hover { border-color: var(--sage); outline: none; }
-.filters select:disabled { color: var(--muted); cursor: not-allowed; opacity: .5; }
-.filters button { color: var(--muted); cursor: pointer; margin-left: auto; }
+.search-controls select:focus,
+.search-controls button:hover { border-color: var(--sage); outline: none; }
+.search-controls select:focus-visible,
+.search-controls button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
+.search-controls select:disabled { color: var(--muted); cursor: not-allowed; }
+.filters { margin-top: 1rem; }
+.filter-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: .35rem;
+}
+.filter-heading button { color: var(--muted); cursor: pointer; }
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: .55rem .75rem;
+}
+.filter-field {
+  display: grid;
+  gap: .15rem;
+  min-width: 0;
+}
+.filter-field select { width: 100%; min-width: 0; }
+.filter-field:has(select:disabled) { opacity: .5; }
 
 .status { color: var(--muted); font-size: .85rem; text-align: center; min-height: 1.2em; margin: 1.4rem 0 .8rem; }
 
@@ -254,9 +278,9 @@ footer {
 footer a { color: var(--sage); }
 
 @media (max-width: 560px) {
-  .search-field { width: 100%; }
-  .search-field select { min-width: 0; flex: 1; }
-  .filters > select { max-width: 100%; }
+  .search-field { grid-template-columns: 1fr; gap: .15rem; }
+  .search-field select { width: 100%; min-width: 0; }
+  .filter-grid { grid-template-columns: 1fr; }
   .pagination { gap: .15rem; }
   .page-button, .page-current { width: 1.75rem; height: 1.9rem; }
   .page-ellipsis { width: .85rem; }