From 67d81f81ff341db8c2af7eed6868f6e57171d0cf Mon Sep 17 00:00:00 2001
From: IK <ilia.klimentiev@gmail.com>
Date: Fri, 11 Sep 2026 07:45:45 +0700
Subject: [PATCH] fix: keep advanced filters accessible on mobile

---
 apps/web/src/pages/index.astro | 12 +++++-------
 apps/web/src/styles/global.css |  1 +
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/pages/index.astro b/apps/web/src/pages/index.astro
index 26971f2..b7210e7 100644
--- a/apps/web/src/pages/index.astro
+++ b/apps/web/src/pages/index.astro
@@ -78,16 +78,14 @@ const datasetJsonLd = {
   <script>
     const advancedFields = document.querySelectorAll<HTMLElement>(".filter-advanced-field");
     const compactFilters = window.matchMedia("(max-width: 720px)");
-    const syncFilters = (event: MediaQueryList | MediaQueryListEvent) => {
+    const syncFilters = () => {
       advancedFields.forEach(field => {
-        if (event.matches) {
-          field.classList.add("filter-compact-hidden");
-        } else {
-          field.classList.remove("filter-compact-hidden");
-        }
+        // The details element is the responsive disclosure control. Do not
+        // hide its fields with a second JS-only rule.
+        field.classList.remove("filter-compact-hidden");
       });
     };
-    syncFilters(compactFilters);
+    syncFilters();
     compactFilters.addEventListener("change", syncFilters);
   </script>
 </Layout>
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 59679b1..7264b41 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -18,6 +18,7 @@ footer{min-height:118px;background:var(--deep);color:#dbe4df;padding:28px max(32
 @media(max-width:720px){.content-grid,.records-hero,.form-hero,.record-filters,.record-table,.official-note,.report-form,.spot-hero,.periods,.detail-grid{width:calc(100% - 28px)}.topbar{width:100%;padding:13px 14px 0;display:flex;flex-wrap:wrap;height:auto}.topbar .brand{flex:1}.topbar nav{order:2;width:100%;height:46px;overflow-x:auto}.topbar nav a{flex:0 0 auto;font-size:13px}.intro h1,.records-hero h1,.form-hero h1{font-size:55px}.intro{padding:30px 0 25px}.intro h1{font-size:47px;margin:13px 0 12px}.intro-copy>p{font-size:15px;margin:0}.lake-card{display:none}.filters-wrap{position:relative;padding:17px 0}.filters{grid-template-columns:1fr 1fr}.filter-advanced-field{display:none}.filter-compact-hidden{display:none!important}.filter-advanced-fallback{display:block;grid-column:1/-1;border-top:1px solid #ffffff1d;padding-top:10px}.filter-advanced-fallback summary{display:flex;justify-content:space-between;color:#d5dfdc;font-size:12px;cursor:pointer;list-style:none}.filter-advanced-fallback summary::-webkit-details-marker{display:none}.filter-advanced-fallback summary:before{content:"＋";margin-right:7px;color:var(--lime)}.filter-advanced-fallback[open] summary:before{content:"−"}.filter-advanced-fallback summary span{margin-left:auto;color:#9fb0ad}.filter-advanced-fallback .advanced-fields{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px}.filter-advanced-fallback:not([open]) .advanced-fields{display:none!important}.filters button{grid-column:1/-1}.active-filters{min-height:0;overflow-x:auto;padding:10px 14px 0;width:100%;scrollbar-width:none}.active-filters span{flex:0 0 auto}.active-filters a{position:sticky;right:0;padding:6px 10px;background:var(--paper)}.dashboard{padding:28px 0 74px;scroll-margin-top:10px}.spot-card{grid-template-columns:34px 1fr;padding:18px 18px 18px 14px;gap:10px}.spot-stats{grid-column:2;border:0;border-top:1px solid #e2e8e2;padding:13px 0 0;grid-template-columns:repeat(4,1fr)}.card-arrow{display:none}.detail-score{grid-template-columns:105px 1fr}.score-ring{width:100px;height:100px}.principles{grid-template-columns:1fr}.record-filters{display:grid}.record-row{grid-template-columns:1fr 1fr}.record-head{display:none}.record-row>*:nth-child(even){text-align:right}.form-grid,.detail-grid{grid-template-columns:1fr}.spot-hero{padding:28px}.spot-hero h1{font-size:48px}.pin{display:none}footer{grid-template-columns:1fr auto;padding:30px 20px}footer p{grid-column:1/-1;order:3}}
 @media(max-width:720px){.moderation-app{width:calc(100% - 28px)}.moderation-card{grid-template-columns:1fr}.moderation-proof{grid-row:2}.moderation-actions{grid-column:1;display:block}.moderation-actions>div{margin-top:12px}.admin-login{display:block}.admin-login button{width:100%;margin-top:12px}}
 @media(max-width:480px){.filters{grid-template-columns:1fr 1fr}.spot-stats strong{font-size:16px}.topbar nav{gap:4px}.topbar nav a{padding:0 5px}.brand-name{font-size:14px}.brand-name strong{font-size:17px}.moderation-actions>div{display:grid}.moderation-actions button{width:100%}}
+@media(max-width:720px){.filter-advanced-fallback .filter-advanced-field{display:flex!important;align-items:center;gap:6px}.filter-advanced-fallback .filter-compact-hidden{display:flex!important}}
 @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}
 
 /* RF4 field-guide iconography and float activity gauge */