/* BN567 - native app shell on phones: tab bar, compact frosted nav bar with back chevron, system font. */
@media (max-width: 900px) {
  body.bn567 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, Roboto, "Segoe UI", Arial, sans-serif !important; }
  body.bn567 h1, body.bn567 h2, body.bn567 h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, Roboto, "Segoe UI", Arial, sans-serif !important; letter-spacing: -0.02em; }

  /* nav bar */
  body.bn567 .bn-topbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9100 !important; min-height: 50px !important; height: auto !important; padding: calc(3px + env(safe-area-inset-top, 0px)) 8px 3px !important; background: rgba(255,255,255,.82) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid rgba(60,60,67,.29) !important; box-shadow: none !important; gap: 4px !important; display: flex !important; align-items: center !important; }
  body.bn567 .bn-main { padding-top: calc(54px + env(safe-area-inset-top, 0px)) !important; }
  body.bn567 .bn-topbar .bn-top-actions { justify-content: flex-end !important; display: flex !important; align-items: center; }
  body.bn567 .bn-topbar .bn-notify-btn { border: 0 !important; background: none !important; box-shadow: none !important; width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; font-size: 20px; }
  body.bn567 button, body.bn567 input, body.bn567 select, body.bn567 textarea, body.bn567 .bn-btn, body.bn567 .btn, body.bn567 a.bn432-mini { font-family: inherit !important; }
  body.bn567 button, body.bn567 .bn-btn, body.bn567 .btn, body.bn567 .bn432-mini { font-weight: 600 !important; }
  body.bn567 .bn-topbar .bn-mobile-menu-btn { display: none !important; }
  body.bn567 .bn-topbar .bn-title-area { position: absolute !important; left: 64px; right: 64px; top: 0; bottom: 0; display: flex !important; align-items: center; justify-content: center; pointer-events: none; }
  body.bn567 .bn-topbar .bn-title-area .bn-page-title { font-size: 17px !important; font-weight: 600 !important; text-align: center; opacity: var(--bn567-title, 1); transition: opacity .15s; }
  body.bn567 .bn-topbar .bn-breadcrumb { display: none !important; }
  body.bn567 .bn-topbar .bn-top-actions { margin-left: auto !important; }
  body.bn567 .bn-mobile-backbar { display: none !important; }
  .bn567-back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: #1f8a5b; font: inherit; font-size: 17px; padding: 8px 6px; min-height: 44px; cursor: pointer; z-index: 1; }
  .bn567-back svg { width: 13px; height: 21px; }

  /* tab bar */
  body.bn567 .bn-mobile-bottom-single:not(.bn567-tabs) { display: none !important; }
  .bn567-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9200; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background: rgba(250,250,250,.86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid rgba(60,60,67,.29); view-transition-name: bn-tabbar; }
  .bn567-tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #8e8e93; text-decoration: none; font-size: 10.5px; font-weight: 500; padding: 2px 0; min-height: 46px; -webkit-tap-highlight-color: transparent; }
  .bn567-tabs a svg { width: 26px; height: 26px; }
  .bn567-tabs a.on { color: #1f8a5b; }
  .bn567-tabs a.add { justify-content: flex-end; }
  .bn567-tabs a.add span.plus { width: 48px; height: 48px; margin-top: -18px; border-radius: 50%; background: #1f8a5b; color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(31,138,91,.4); }
  .bn567-tabs a.add span.plus svg { width: 26px; height: 26px; }
  .bn567-tabs a:active { opacity: .6; transform: none; }
  body.bn567 { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  body.bn567.bn-sidebar-open .bn567-tabs { visibility: hidden; }
}
@media (min-width: 901px) { .bn567-tabs, .bn567-back { display: none !important; } }

/* the tab bar carries the old bar's class (so the older script leaves it alone); these rules win over the old bar's styling */
@media (max-width: 900px) {
  html body nav.bn-mobile-bottom-single.bn567-tabs { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 0 !important; align-items: end !important; padding: 6px 4px calc(4px + env(safe-area-inset-bottom, 0px)) !important; background: rgba(250,250,250,.86) !important; border: 0 !important; border-top: .5px solid rgba(60,60,67,.29) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(20px) !important; z-index: 9200 !important; }
  html body nav.bn-mobile-bottom-single.bn567-tabs > a,
  html body nav.bn-mobile-bottom-single.bn567-tabs > a:nth-child(n),
  html body nav.bn-mobile-bottom-single.bn567-tabs > a[aria-current] { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; gap: 2px !important; min-height: 46px !important; background: none !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; width: auto !important; height: auto !important; color: #8e8e93 !important; font-size: 10.5px !important; font-weight: 500 !important; text-decoration: none !important; text-shadow: none !important; outline: 0 !important; }
  html body nav.bn-mobile-bottom-single.bn567-tabs > a.on { color: #1f8a5b !important; }
  html body nav.bn-mobile-bottom-single.bn567-tabs > a::before,
  html body nav.bn-mobile-bottom-single.bn567-tabs > a::after { content: none !important; display: none !important; }
  html body nav.bn-mobile-bottom-single.bn567-tabs > a svg { width: 26px !important; height: 26px !important; }
  html body nav.bn-mobile-bottom-single.bn567-tabs > a span.plus { width: 48px !important; height: 48px !important; margin-top: -18px !important; border-radius: 50% !important; background: #1f8a5b !important; color: #fff !important; display: grid !important; place-items: center !important; box-shadow: 0 4px 12px rgba(31,138,91,.4) !important; }
  html body.bn567.bn-sidebar-open nav.bn567-tabs { visibility: hidden !important; }
}