/* Keep primary navigation on one viewport baseline, including iPad portrait.
   View transitions and older Home-specific rules must not move the bar. */
html body main.app-shell section.map-stage > .bottom-nav .bottom-nav-item {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
@media (orientation: portrait) {
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) {
    --bottom-nav-height: max(78px, 3.5rem);
  }
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav {
    height: max(78px, 3.5rem) !important;
    min-height: max(78px, 3.5rem) !important;
  }
  html body main.app-shell section.map-stage > .bottom-nav .bottom-nav-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 19px auto !important;
    min-height: max(50px, 2.8rem) !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 900px) {
  html body .app-shell .map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav,
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav {
    position: fixed !important;
    top: auto !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (min-width: 901px) {
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav {
    position: fixed !important;
    top: auto !important;
    width: min(1160px, calc(100% - 48px)) !important;
    max-width: 1160px !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(22px, env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    translate: none !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }
}