refactor(trip): declutter filter bar — move Stats/Cycling to panel toggles

Filter bar now has one job: content type (All/Journal/Stories) + sort icon (↑/↓).
Stats and Cycling move to a lean text-button row below the bar with a
rotating ▾ caret — CSS handles expand/collapse state via .is-active,
no JS changes needed for the caret animation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr

themes/intotheeast/css/style.css

@@ -959,6 +959,38 @@ body::after {
     background: var(--color-accent-light);
 }
 
+.trip-panel-toggles {
+    display: flex;
+    gap: var(--space-5);
+    margin-top: var(--space-3);
+}
+
+.trip-panel-toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    transition: color 0.15s;
+}
+
+.trip-panel-toggle:hover { color: var(--color-ink); }
+.trip-panel-toggle.is-active { color: var(--color-accent); }
+
+.trip-panel-caret {
+    display: inline-block;
+    font-size: 0.75em;
+    transition: transform 0.2s ease;
+}
+
+.trip-panel-toggle.is-active .trip-panel-caret { transform: rotate(180deg); }
+
 @media (max-width: 768px) {
     .home-layout { display: flex; flex-direction: column; }
     .home-map-col { position: static; height: 40vh; align-self: stretch; }

themes/intotheeast/templates/trip.html.twig

@@ -127,13 +127,13 @@
                     <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
                     <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
                 </div>
-                <div class="trip-filter-group">
+                <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
-                    <button class="trip-stats-btn" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats</button>
+            </div>
-                    {% if has_gpx %}
+            <div class="trip-panel-toggles">
-                    <button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
+                <button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
-                    {% endif %}
+                {% if has_gpx %}
-                    <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
+                <button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
-                </div>
+                {% endif %}
             </div>
         </div>
 
@@ -339,7 +339,7 @@ setTimeout(function () { tripMap.resize(); }, 100);
         ascending = !ascending;
         var entries = Array.from(feed.querySelectorAll('[data-type]'));
         entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); });
-        sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
+        sortBtn.textContent = ascending ? '↑' : '↓';
         sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
         sortBtn.classList.toggle('is-active', !ascending);
     });