/* Theme colors come from the same three palettes as the rest of the app. */
.nav-selection{display:none}
@media(max-width:760px){
 /* Keep both radii equal even when five tabs must fit a 320px screen. */
 :root{--tab-bar-height:63px;--tab-bar-bottom-inset:max(0px,calc(var(--safe-bottom) - 8px));--mobile-nav-height:calc(var(--tab-bar-height) + var(--tab-bar-bottom-inset) + 10px);--tab-bar-radius:min(22px,calc((100vw - 80px - var(--safe-left) - var(--safe-right))/10))}
 body:not(.login-mode):not(.push-onboarding) #mobile-nav.mobile-nav{
  top:auto!important;bottom:var(--tab-bar-bottom-inset)!important;
  left:calc(24px + var(--safe-left));right:calc(24px + var(--safe-right));width:auto!important;
  height:var(--tab-bar-height);min-height:var(--tab-bar-height);margin:0;
  padding:6px 10px!important;gap:0!important;align-items:stretch;
  border:1px solid color-mix(in srgb,var(--line) 80%,#fff 20%);border-radius:var(--tab-bar-radius);
  background:linear-gradient(180deg,#ffffff08,transparent 60%),color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:0 6px 18px #0006;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  isolation:isolate;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transform:translateY(0)!important;transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .18s;
 }
 html.nav-viewport-anchored body:not(.login-mode):not(.push-onboarding) #mobile-nav.mobile-nav{
  top:calc(var(--mobile-nav-viewport-bottom) - var(--tab-bar-height) - var(--tab-bar-bottom-inset))!important;bottom:auto!important;
 }
 body:not(.login-mode):not(.push-onboarding) #mobile-nav.mobile-nav[data-scroll-hidden]{transform:translateY(calc(100% + var(--tab-bar-bottom-inset) + 18px))!important;opacity:0;pointer-events:none}
 #mobile-nav.mobile-nav>button{
  position:relative;z-index:1;flex:1 1 0;min-width:0!important;width:0!important;
  margin:0;padding:2px 0!important;gap:2px;justify-content:center;align-items:center;
  border-radius:var(--tab-bar-radius);background:transparent;color:var(--muted);font-size:10px;line-height:1.3;
 }
 #mobile-nav.mobile-nav>button.active{color:var(--ink)}
 #mobile-nav.mobile-nav:not(.has-tab-selection)>button.active{background:var(--soft)}
 #mobile-nav.mobile-nav>button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
 #mobile-nav .nav-label{display:block;white-space:nowrap;font-weight:500}
 #mobile-nav .nav-icon{width:27px;height:27px;position:relative;display:grid;place-items:center}
 #mobile-nav .nav-icon svg{width:26px;height:26px;stroke-width:1.9}
 #mobile-nav .nav-selection{
  display:block;position:absolute;z-index:0;top:7px;height:47px;border-radius:var(--tab-bar-radius);
  background:linear-gradient(180deg,#eff5ff36,#dce8fc1f 48%,#dce8fc2b);border:1px solid #f1f7ff2b;
  pointer-events:none;
 }
 #mobile-nav .nav-selection[data-moving]{will-change:left,width}
 .scroll-top{bottom:calc(var(--mobile-nav-height) + 10px)}
 .toast{bottom:calc(var(--mobile-nav-height) + 10px)}
}

@media(prefers-reduced-motion:reduce){body:not(.login-mode):not(.push-onboarding) #mobile-nav.mobile-nav{transition:none}}