/* r72.7.2i stickyhdr (Reme r64, option A). One opaque backdrop behind the sticky header stack, plus auto-hide on phones.
   1) Bleed: .nav.solid was 86% + blur and the all.html .ap-bar 92% + blur, and all.html never set .solid at all, so cards showed
      through the logo row, the search, the chips and the count/sort line (worse where backdrop-filter is off). Every sticky top
      layer is now an opaque var(--bg); the nav's colour also extends above its own top (status-bar area / rubber-band) so
      nothing scrolls into view up there. Text is never placed under the status bar: nav padding includes safe-area-inset-top.
   2) Auto-hide (js/hdr.js sets html.hdr-auto on phones): scroll down hides the logo row (and on All, the search + chips);
      any scroll up brings them back; the slim '326 picks / Sort' line stays pinned at the safe-area top. Transform/opacity
      only (no layout change, CLS 0), 200 ms, instant with reduced motion. */
.nav.solid{background:var(--bg,#0b0b0c);-webkit-backdrop-filter:none;backdrop-filter:none}
html.t-editorial .nav.solid,html .t-editorial .nav.solid{background:rgb(245,242,236)}
html .tp-page .nav.solid{background:var(--tp-bg,var(--bg,#0b0b0c))}
.nav.solid::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:320px;background:inherit;pointer-events:none}
.ap-bar{background:var(--bg,#0b0b0c);-webkit-backdrop-filter:none;backdrop-filter:none}
.ap-bar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:6px;background:inherit;pointer-events:none} /* covers the 2px seam under the nav */
@media (max-width:760px){
  html:has(>body>main:is(#all,#br,#hh,#plan)) #nav{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  html:has(>body>main#all){--nav-h:calc(60px + env(safe-area-inset-top,0px))}
}
html.hdr-auto #nav{transition:transform .2s ease,background .35s,box-shadow .35s}
html.hdr-auto.hdr-hide #nav{transform:translate3d(0,calc(-100% - 6px),0)}
html.hdr-auto .ap-bar{transition:transform .2s ease}
html.hdr-auto.hdr-hide .ap-bar{transform:translate3d(0,calc(-1 * var(--hdr-shift,0px)),0)}
html.hdr-auto .ap-bar>.ap-search,html.hdr-auto .ap-bar>.ap-chips{transition:opacity .15s ease,visibility 0s}
html.hdr-auto.hdr-hide .ap-bar>.ap-search,html.hdr-auto.hdr-hide .ap-bar>.ap-chips{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s .2s}
@media (prefers-reduced-motion:reduce){
  html.hdr-auto #nav,html.hdr-auto .ap-bar,html.hdr-auto .ap-bar>.ap-search,html.hdr-auto .ap-bar>.ap-chips,
  html.hdr-auto.hdr-hide .ap-bar>.ap-search,html.hdr-auto.hdr-hide .ap-bar>.ap-chips{transition:none}
}
/* status-bar cap: while the header is hidden, keep an opaque strip under the iOS status bar (0px where there is no notch) */
html.hdr-auto body::after{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--bg,#0b0b0c);z-index:49;pointer-events:none}
/* r72.7.2j: Leaflet/MapLibre panes carry z-index 400-1000; with no stacking context on the map they rose above the fixed nav (z 50)
   and showed through the header on Happy hours at 320px. Contain them inside the map. */
.leaflet-container{isolation:isolate}