/* MundaApp — the bottom shelf.
 *
 * This lives in its own file, loaded last, under a name of its own. The bar had
 * been styled from mobile-fixes.css, and a phone holding an older page kept
 * asking for that same stylesheet address; whatever the edge had cached under
 * it won, so the bar never changed no matter how many times the app was closed.
 * A new address cannot be answered from an old cache entry.
 */

.tabbar {
  display: flex; align-items: stretch; justify-content: space-between;
  padding: 3px 3px 0;
  border-top: 0;
  background:
    linear-gradient(90deg, #0C6E42 0 25%, #C8102E 25% 50%, #14110E 50% 75%, #DFA03C 75% 100%) 0 0 / 100% 3px no-repeat,
    linear-gradient(180deg, #FFFCF3 0%, #FDF8EC 46%, #F8F1DE 100%);
  box-shadow: 0 -10px 26px -20px rgba(12, 40, 26, .65), inset 0 1px 0 #FFFFFF;
}
.tabbar .tab {
  position: relative;
  flex: 1 1 0; min-width: 0;
  gap: 2px;
  padding: 7px 0 5px;
  color: #63736A;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  justify-content: center;
  height: 100%;
}
.tabbar .tab > span:not(.n) {
  line-height: 1.1; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  position: relative; z-index: 1;
}
.tabbar .tab svg {
  width: 21px; height: 21px;
  stroke-width: 1.8;
  color: #5F6E65;
  position: relative; z-index: 1;
  transition: color .16s ease, transform .16s cubic-bezier(.25, 1, .5, 1);
}
.tabbar .tab.on { color: #0A5334; font-weight: 750; }
.tabbar .tab.on::before {
  content: "";
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 28px;
  border-radius: 11px;
  background: linear-gradient(180deg, #FFFBEF 0%, #FBF1DA 62%, #F5E7C8 100%);
  box-shadow:
    inset 0 0 0 1px #E3C58A,
    inset 0 1px 0 #FFFFFF,
    0 6px 13px -11px rgba(120, 86, 20, .60);
  z-index: 0;
}
.tabbar .tab.on svg {
  color: #0A5334;
  stroke-width: 2.05;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7));
  transform: translateY(-1px);
}
.tabbar .tab.on > span:not(.n) { color: #0A5334; }
.tabbar .tab.on > span:not(.n)::after {
  content: "";
  display: block;
  width: 13px; height: 2px; border-radius: 2px;
  margin: 2px auto 0;
  background: linear-gradient(90deg, #0C6E42, #17A16A);
}
.tabbar .tab:active svg { transform: scale(.94); }
.tabbar .tab .n {
  position: absolute; top: 1px; right: 50%; margin-right: -20px; z-index: 2;
  background: #C8102E; color: #fff;
  font-size: 8.5px; font-weight: 700;
  min-width: 14px; height: 14px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 3px;
  box-shadow: 0 0 0 2px #FFFDF7;
}