Replace sticky search bar with icon-toggle toolbar on mobileHEADmaster

On mobile, the sticky feed toolbar consumed most of the viewport.
Replaced it with a compact icon bar (search + sort) that expands
into mutually exclusive panels. Sort options render as radio-style
buttons generated dynamically from the existing select, which
remains for desktop unchanged.

1 files changed, 112 insertions, 3 deletions

diff --git a/static/styles.css b/static/styles.css
index 3b3cf0d..172abb0 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1904,14 +1904,28 @@ textarea:focus {
   gap: 10px;
 }
 
-.search-row input {
+.toolbar-toggles {
+  display: none;
+}
+
+.feed-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.toolbar-panel-search {
   flex: 1 1 360px;
 }
 
-.search-row select {
+.toolbar-panel-sort {
   flex: 0 0 260px;
 }
 
+.sort-options {
+  display: none;
+}
+
 .diary-feed {
   gap: 24px;
 }
@@ -2404,9 +2418,104 @@ textarea:focus {
   }
 
   .feed-toolbar {
-    top: 10px;
+    position: static;
     margin-bottom: 20px;
+    padding: 0;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .toolbar-toggles {
+    display: flex;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .toolbar-toggle {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
     padding: 12px;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--muted);
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: color 0.15s, background 0.15s;
+  }
+
+  .toolbar-toggle + .toolbar-toggle {
+    border-left: 1px solid var(--line);
+  }
+
+  .toolbar-toggle.is-active {
+    color: var(--accent-strong);
+    background: rgba(194, 170, 122, 0.08);
+  }
+
+  .toolbar-panel {
+    display: none;
+    padding: 12px;
+  }
+
+  .toolbar-panel.is-open {
+    display: block;
+  }
+
+  .sort-options {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-bottom: 10px;
+  }
+
+  .sort-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--muted);
+    font-family: var(--font-sans);
+    font-size: 0.88rem;
+    cursor: pointer;
+    text-align: left;
+    transition: color 0.15s, background 0.15s;
+  }
+
+  .sort-option:hover {
+    background: rgba(194, 170, 122, 0.06);
+  }
+
+  .sort-option.is-active {
+    color: var(--accent-strong);
+    background: rgba(194, 170, 122, 0.1);
+  }
+
+  .sort-option::before {
+    content: "";
+    width: 14px;
+    height: 14px;
+    border: 2px solid var(--faint);
+    border-radius: 50%;
+    flex-shrink: 0;
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+
+  .sort-option.is-active::before {
+    border-color: var(--accent);
+    box-shadow: inset 0 0 0 3px var(--accent);
+  }
+
+  .toolbar-panel-sort .search-row {
+    display: none;
   }
 
   .month-rail {