/* Keep glass off the sticky host: Safari can retain an opaque scroll-edge
   backdrop after a filtered sticky element pins, even after it scrolls away.
   The inset material paints behind content inside the host's stacking context. */
.rank-strip{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}
/* Position stays native sticky on phones too. A JS scroll/translate loop lags
   behind iOS momentum scrolling; do not use one to emulate pinning. */
.rank-strip::before{
  content:'';position:absolute;inset:1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:rgba(20,17,28,.31);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
}
/* Home Screen: blur real scrolling content behind the system clock. */
.statusbar-glass{display:none;pointer-events:none;}
@media(display-mode:standalone){
  .statusbar-glass{
    display:block;position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
    z-index:39;background:linear-gradient(rgba(20,17,28,.38),rgba(20,17,28,.22));
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    backdrop-filter:blur(16px) saturate(135%);
  }
}
/* Where the pinned tracker stops (batch 2 B, 2026-10-16, Tin: it slid under the Dynamic Island).
   This used to live inside the standalone media query above, which is very likely why it never
   applied on Tin's phone: an iOS Home Screen app launched with apple-mobile-web-app-capable and
   no web manifest usually reports display-mode `browser`, not `standalone` (navigator.standalone
   is what flips), so the tracker kept style.css's top:0 and pinned behind the clock and island.
   Now it is unconditional and keyed on the inset itself: in a browser tab the inset is 0 and the
   tracker still pins flush at top:0 (Tin's 2026-10-11 choice); under a translucent status bar it
   pins at the inset MINUS 8px: the inset (59px on Dynamic Island phones) reaches well past the
   island itself (its bottom is ~48px), and Tin's phone showed a ~15px gap with inset + 4px; he
   asked for "a few pixels below the island" (2026-10-16), so the edge now sits ~3px under it.
   The floor min(inset, 20px) keeps the panel out of an old-style 20px status bar, and both
   terms are 0 in a browser tab. --sa-top exists so a test can stand in for the inset, which
   desktop Chromium cannot emulate (tools/verify-scroll-tracker.cjs feeds it 59px and expects
   51px). Same specificity as style.css's rule and loaded later, so it wins; mobile-native.css's
   focused-field release (position:relative; top:auto) is more specific and still wins while
   typing. */
:root{--sa-top:env(safe-area-inset-top,0px);}
.rank-strip{top:max(calc(var(--sa-top) - 8px), min(var(--sa-top), 20px));}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rank-strip::before{background:var(--panel);}
  .statusbar-glass{background:var(--panel);}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .rank-strip::before{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;}
  .statusbar-glass{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media(forced-colors:active){.statusbar-glass,.rank-strip::before{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none;}}