/* ══════════════════════════════════════════════════════════════════════
   chrome.css — the mobile drawer covers the viewport, and nothing moves
   behind it.

   THE BUG (owner, 2026-08-26): "hamburger slider on mobile has gaps above
   and below that show page scrolling behind it."

   It is two defects wearing one coat, and both are documented failures the
   repo already has language for:

   (1) THE DRAWER WAS NEVER OPAQUE. _nav.part paints it
       `color-mix(in srgb, var(--sf-bg) 98%, transparent)` — a 2%-transparent
       panel with a 20px backdrop blur. CLAUDE.md's chrome doctrine says the
       bar is opaque precisely because "an ink faded toward transparent walks
       back toward its own ground and composites what scrolls under it, so no
       gate can measure it". A drawer at 98% composites the moving page
       through its whole face; the eye reads the softest areas — the empty
       strips above the links and below them — as gaps.

   (2) 100dvh IS A MOVING TARGET, AND A FIXED PANEL SIZED IN IT LAGS.
       02-mobile.css already replaced 100vh with 100dvh for a real reason (the
       URL bar pushed the footer buttons off-screen). But dvh RESIZES while
       the URL bar animates, and a position:fixed panel repaints a frame
       behind that resize — which opens a literal strip at the bottom edge,
       and at the top on the rubber-band overscroll. Pinning to BOTH insets
       (top:0 + bottom:0) resolves the height from the viewport itself, so
       there is no unit to lag: the panel cannot be shorter than the thing it
       is pinned to.

   (3) body{overflow:hidden} IS NOT A SCROLL LOCK ON iOS. That is why the page
       is scrolling behind at all. Rather than rewrite the shared nav script
       on 25 pages (which other lanes are editing concurrently), the lock is
       done in CSS on the two surfaces a finger can actually land on:
       `touch-action:none` on the open scrim stops a touch-drag that starts
       there from scrolling the document, and `overscroll-behavior:contain`
       stops a scroll that reaches the end of the drawer from chaining into
       the page behind it. The existing overflow:hidden still covers
       Android/desktop; these two cover the case it misses.

   SCOPE: chrome only. No layout, no colour beyond making an existing token
   fully opaque. ══════════════════════════════════════════════════════════ */

/* ── 1. The drawer is pinned to the viewport, not sized in viewport units ──
   `height:auto` is required to release 02-mobile's `height:100dvh !important`
   so the top/bottom insets are what resolve the box. Same specificity (one
   id), later sheet — chrome.css is linked after mobile.css, so this wins. */
#snav-mobile-menu {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;

  /* ── 2. OPAQUE. The whole point. --sf-bg is the correct token (the drawer
     paints from the PAGE ground, not the bar — see _nav.part's own note);
     this only removes the 2% hole in it. The backdrop blur goes with it:
     blurring what you can no longer see through costs a compositor layer on
     the weakest hardware for nothing. */
  background: var(--sf-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  /* A scroll that reaches the end of the drawer stops there instead of
     handing the remaining momentum to the document behind it. */
  overscroll-behavior: contain;
}

/* ── 3. The scrim covers the viewport and swallows touch-drags ──
   inset:0 already pins it; the touch-action is the scroll lock iOS needs.
   Only when OPEN — a closed scrim with touch-action:none would eat taps on
   the page it is invisibly sitting over. */
#snav-mob-overlay {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}
#snav-mob-overlay.open {
  touch-action: none;
  overscroll-behavior: contain;
}

/* ── 4. The cart drawer is the same panel pattern and the same two bugs ──
   It is parked at right:-420px with height:100vh, so it inherits the URL-bar
   problem the mobile drawer just had, and it is the other surface a finger
   lands on while something is open. --sf-elevated is already opaque; only
   the pinning and the scroll chaining need saying. */
#cart-panel {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  overscroll-behavior: contain;
}
#cart-overlay {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}
#cart-overlay.open {
  touch-action: none;
  overscroll-behavior: contain;
}

/* ── 5. The drawer's own column must be able to shrink ──
   The link list is `flex:1` inside a flex column. Without min-height:0 a
   flex child refuses to shrink below its content height, so on a short
   phone (or with the keyboard up over the search field) the footer buttons
   are pushed out of the box instead of the list scrolling. */
#snav-mobile-menu > nav {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}