/* The same floating navigation in every section. */
:root {
  --navigation-height: 69px;
  --navigation-bottom: max(17px, env(safe-area-inset-bottom, 0px));
  --navigation-space: calc(var(--navigation-height) + var(--navigation-bottom) + 26px);
}

body .app-shell > .bottom-bar {
  position: fixed;
  bottom: var(--navigation-bottom);
  left: 50%;
  transform: translateX(-50%);
  width: 540px;
  max-width: calc(100% - 28px);
  height: var(--navigation-height);
  margin: 0;
  padding: 5px 8px;
  border: 1px solid #fffef2;
  border-radius: 40px;
  background: #fffcdfeb;
  color: #57666a;
  box-shadow: 0 8px 35px #866b4238;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  z-index: 10;
}

.app-shell > .bottom-bar nav {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  gap: 0;
}

.bottom-bar nav .nav-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 6px;
  gap: 4px;
  border: 0;
  border-radius: 30px;
  background: transparent;
  color: #8e9688;
  touch-action: manipulation;
}

.bottom-bar nav .nav-item span { font-size: 9px; white-space: nowrap; }
.bottom-bar nav .nav-item svg { width: 22px; height: 22px; }
.bottom-bar nav .nav-item:hover { background: #f1deb952; }
.bottom-bar nav .nav-item.active { background: #f1deb9a8; color: #c59244; }
.bottom-bar nav .nav-item.active::before { display: none; }
.bottom-bar nav .nav-item:focus-visible { outline-color: #a77734; outline-offset: -2px; }
.app-shell > .bottom-bar .save-status { display: none; }

.app-shell > .workspace { padding-bottom: var(--navigation-space); }
.app-shell > .walk-page,
.app-shell > .shopping-page,
.app-shell > .health-page,
.app-shell > .tracker-page,
.app-shell > .account-page { padding-bottom: max(122px, var(--navigation-space)); }
.toast { bottom: calc(var(--navigation-height) + var(--navigation-bottom) + 12px); }

@media (max-width: 850px) {
  :root { --navigation-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .bottom-bar nav .nav-item { padding: 6px 2px; }
}

@media (max-width: 430px) {
  :root { --navigation-height: 65px; }
  .bottom-bar nav .nav-item { border-radius: 27px; }
  .bottom-bar nav .nav-item span { font-size: 8px; }
  .bottom-bar nav .nav-item svg { width: 21px; height: 21px; }
}

@media (max-width: 360px) {
  body .app-shell > .bottom-bar {
    max-width: calc(100% - 16px);
    padding-inline: 4px;
  }
  .bottom-bar nav .nav-item:first-child { flex-grow: 1.15; }
}