/* BN564 - native app feel. */
html { -webkit-text-size-adjust: 100%; }
a, button, [role="button"], input[type="submit"], label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bn-topbar, .bn-mobile-bottom-single, .bn-sidebar, .bn-mobile-backbar, button, .bn-btn, .btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* pressed feedback */
button, .bn-btn, .btn, .bn432-mini, .bn-mobile-bottom-single a, .bn-quick-btn, .sf-card, .bn-card-soft a.bn-btn { transition: transform .08s ease, opacity .08s ease; }
button:active, .bn-btn:active, .btn:active, .bn432-mini:active, .bn-mobile-bottom-single a:active, .sf-card:active { transform: scale(.97); opacity: .9; }

/* iPhone: 16px fields stop the page zooming in when a field is tapped */
@media (max-width: 980px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* installed app: no rubber-band past the top / bottom */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
}

/* page-to-page transitions (browsers that support them); bars stay put like app tabs */
@view-transition { navigation: auto; }
.bn-topbar { view-transition-name: bn-topbar; }
.bn-mobile-bottom-single { view-transition-name: bn-tabbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* instant tap feedback: top progress bar */
#bn564-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2147483000; background: #1f8a5b; box-shadow: 0 0 6px rgba(31,138,91,.5); opacity: 0; transition: width .25s ease, opacity .2s ease; pointer-events: none; }
#bn564-progress.on { opacity: 1; }

/* pull to refresh (installed app) */
#bn564-ptr { position: fixed; top: 0; left: 50%; z-index: 2147482000; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.18); display: grid; place-items: center; transform: translateY(-50px); opacity: 0; pointer-events: none; }
#bn564-ptr span { width: 18px; height: 18px; border: 2.5px solid #1f8a5b; border-top-color: transparent; border-radius: 50%; }
#bn564-ptr.spin span { animation: bn564spin .7s linear infinite; }
@keyframes bn564spin { to { transform: rotate(360deg); } }