fix(web): lift the jump sheet above the bottom tab bar

On mobile the last item in "Jump to section" was painted over by the fixed
bottom tab bar and could not be tapped. Reported as nearby schools missing
from the menu; it was there, underneath the bar.

The sticky nav sets `position: sticky` with `z-index: 10`, which makes it a
stacking context. The sheet's own `z-index: 1600` therefore orders it only
inside that context — against the tab bar (z-index 1000) the nav's 10 is what
counts, so the bar wins. Verified on staging: every menu item returns itself
from elementFromPoint except the last, which returns the tab bar.

Latent rather than new. With five sections the list stopped just above the bar;
"Nearby schools" made six, and the sixth is the first to reach it. Any section
added later would have done the same.

Lifted only while the sheet is open, and only to 1100 — above the bar, below
the comparison toast (2000), the fullscreen map (5000) and the info popover
(9999). The backdrop rises with it, so tapping over the bar now dismisses the
sheet instead of navigating away.

The journey asks what a thumb asks: for each item, whether it is the topmost
element at its own centre. A bounding-box check cannot see this — the item is
in the viewport and the right size, just underneath something. Confirmed to
fail against current staging, naming "Nearby schools", before the fix.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

nextjs-app/components/school/SchoolDetailShell.module.css

@@ -270,11 +270,23 @@
     position: sticky;
     top: 64px; /* global header height on desktop */
     z-index: 10;
+    /* `position: sticky` with a z-index makes this a stacking context, so the
+       jump sheet's own z-index only orders it INSIDE here. Against the fixed
+       bottom tab bar (Navigation.module.css, z-index 1000) what counts is this
+       value — which is why the sheet's last item was painted over, and
+       untappable, once the list grew long enough to reach the bar. Lifted only
+       while the sheet is open, and only to 1100: below the comparison toast
+       (2000), the fullscreen map (5000) and the info popover (9999). */
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-top: none;
     border-radius: 0 0 10px 10px;
     padding: 0.5rem 0.75rem;
+}
+
+
+.sectionNavSheetOpen {
+    z-index: 1100;
     margin-bottom: 1rem;
     box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.04);
     display: flex;

nextjs-app/components/school/SchoolDetailShell.tsx

@@ -344,7 +344,10 @@ export function SchoolDetailShell({
       </header>
 
       {/* Sticky Section Navigation — docks under the global header */}
-      <nav className={styles.sectionNav} aria-label="Page sections">
+      <nav
+        className={`${styles.sectionNav}${sectionsOpen ? ` ${styles.sectionNavSheetOpen}` : ''}`}
+        aria-label="Page sections"
+      >
         <button onClick={scrollToTop} className={styles.sectionNavBack} aria-label="Back to top">
           <span aria-hidden="true">↑</span>
           <span className={styles.sectionNavBackLabel}>Top</span>