5x night item 8: mobile/a11y pass — fix real 390px overflow (crcp nav-wrap, map topbar-wrap, index scenario-seg wrap; map/index overflow-x guard); prefers-reduced-motion on deals gradient anim; aria-labels on density slider + modal close. All 3 strong gates still PASS (no desktop regression)

7f52ab6f7d9490206c0108203e1595741ffd16b0 · 2026-06-29 00:09:46 -0700 · Steve
Files touched

M public/crcp.html
M public/deals.html
M public/index.html
M public/map.html
Diff

commit 7f52ab6f7d9490206c0108203e1595741ffd16b0
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jun 29 00:09:46 2026 -0700

    5x night item 8: mobile/a11y pass — fix real 390px overflow (crcp nav-wrap, map topbar-wrap, index scenario-seg wrap; map/index overflow-x guard); prefers-reduced-motion on deals gradient anim; aria-labels on density slider + modal close. All 3 strong gates still PASS (no desktop regression)
---
 public/crcp.html  | 11 +++++++++--
 public/deals.html |  6 ++++++
 public/index.html |  7 ++++++-
 public/map.html   |  4 +++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/public/crcp.html b/public/crcp.html
index edd3f16..55cebed 100644
--- a/public/crcp.html
+++ b/public/crcp.html
@@ -35,6 +35,13 @@
   .tile.gold .v{color:var(--gold);} .tile.active .v{color:var(--active);} .tile.draft .v{color:var(--draft);} .tile.staged .v{color:var(--staged);}
   .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
   @media(max-width:880px){.cols{grid-template-columns:1fr;}}
+  /* mobile: header + nav wrap instead of overflowing the viewport */
+  @media(max-width:760px){
+    header{flex-wrap:wrap;}
+    header .nav{flex-wrap:wrap;gap:10px 12px;width:100%;}
+    .wrap{padding:14px;}
+    #modal{width:96vw;padding:16px;}
+  }
   .panel{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:16px;}
   .panel h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold);display:flex;justify-content:space-between;cursor:pointer;user-select:none;}
   .panel h3 .c{color:var(--muted);font-weight:400;}
@@ -76,7 +83,7 @@
   <span class="live"><span class="pulse"></span><span id="livetxt">live</span></span>
   <nav class="nav">
     <a href="/">Properties</a><a href="/map.html">Map</a><a href="/deals.html">Deals</a><a href="/brokers.html">Mind-map</a><a href="/graphics.html">Graphics</a><a href="/condos.html">Condos</a>
-    <span class="denslider" title="chip / tile density">⊞ <input type="range" id="dens" min="120" max="300" value="150"></span>
+    <span class="denslider" title="chip / tile density">⊞ <input type="range" id="dens" min="120" max="300" value="150" aria-label="Tile density"></span>
     <button class="expandall" id="expandall">Expand all ▾</button>
   </nav>
 </header>
@@ -106,7 +113,7 @@
     </div>
   </div>
 </div>
-<div id="ov"><div id="modal"><button class="x" onclick="document.getElementById('ov').classList.remove('on')">✕</button><div id="mbody"></div></div></div>
+<div id="ov"><div id="modal"><button class="x" aria-label="Close" onclick="document.getElementById('ov').classList.remove('on')">✕</button><div id="mbody"></div></div></div>
 <script>
 const $=s=>document.querySelector(s);
 const money=n=>n?'$'+Number(n).toLocaleString():'—';
diff --git a/public/deals.html b/public/deals.html
index 7ca9514..b73a3e4 100644
--- a/public/deals.html
+++ b/public/deals.html
@@ -72,6 +72,12 @@
   .seg-toggle{display:inline-flex;background:var(--glass);border:1px solid var(--glassb);border-radius:13px;overflow:hidden;backdrop-filter:blur(14px);}
   .seg-toggle button{background:none;border:0;color:var(--muted);font-size:12px;padding:7px 12px;cursor:pointer;transition:.2s;}
   .seg-toggle button.on{background:linear-gradient(90deg,rgba(233,196,106,.28),rgba(45,212,191,.2));color:#fff;}
+  /* a11y: respect reduced-motion — kill the drifting gradient + card rise for motion-sensitive users */
+  @media(prefers-reduced-motion:reduce){
+    body::before{animation:none;}
+    .glass{animation:none;opacity:1;transform:none;}
+    .ctrl-btn.spin .ico{animation:none;}
+  }
 </style>
 </head>
 <body>
diff --git a/public/index.html b/public/index.html
index f2670dd..5fd7994 100644
--- a/public/index.html
+++ b/public/index.html
@@ -53,7 +53,12 @@
   .bar .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
   .grid { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:16px; padding:18px 20px 30px; }
   @media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr);} }
-  @media (max-width:620px){ .grid{ grid-template-columns:1fr;} }
+  @media (max-width:620px){ .grid{ grid-template-columns:1fr;}
+    header{ flex-wrap:wrap; gap:10px; }              /* let the scenario seg-control drop to its own row instead of overflowing */
+    header .spacer{ margin-left:0; width:100%; }
+    .bar{ top:auto; }
+    body{ overflow-x:hidden; }                        /* belt+braces: no horizontal scroll on phones */
+  }
   .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; position:relative; transition:box-shadow .2s,border-color .2s; }
   .card.uc { opacity:.62; }
   .card.flash { border-color:var(--blue); box-shadow:0 0 0 3px rgba(88,166,255,.35); }
diff --git a/public/map.html b/public/map.html
index aaa5f20..98a3d23 100644
--- a/public/map.html
+++ b/public/map.html
@@ -8,12 +8,14 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
 <style>
   :root{--bg:#0a0d13;--panel:#11151d;--line:#222936;--fg:#e8ecf2;--muted:#8a93a3;--gold:#c8a24b;}
-  *{box-sizing:border-box;} html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.4 -apple-system,Segoe UI,Roboto,sans-serif;}
+  *{box-sizing:border-box;} html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font:14px/1.4 -apple-system,Segoe UI,Roboto,sans-serif;}
   #map{position:absolute;inset:0;}
   .topbar{position:absolute;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:14px;
     padding:9px 14px;background:rgba(10,13,19,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(6px);}
   .topbar b{color:var(--gold);} .topbar .nav{margin-left:auto;display:flex;gap:13px;}
   .topbar .nav a{color:var(--muted);text-decoration:none;font-size:13px;} .topbar .nav a:hover{color:var(--gold);}
+  /* mobile: wrap the topbar so nav links don't clip off-screen */
+  @media(max-width:620px){ .topbar{flex-wrap:wrap;gap:6px 12px;} .topbar .nav{margin-left:0;flex-wrap:wrap;gap:10px;width:100%;} }
   #count{font-size:12px;color:var(--muted);}
   .legend{position:absolute;bottom:18px;left:14px;z-index:1000;background:rgba(10,13,19,.92);border:1px solid var(--line);
     border-radius:10px;padding:10px 12px;font-size:12px;max-width:200px;backdrop-filter:blur(6px);}
← e121e47 auto-save: 2026-06-28T23:47:35 (1 files) — data/map-points.j · back to Commercialrealestate · 5x night-log: item 8 done; primary queue essentially complet ec4d78b →