/* Thunderfoot App bars */
.tf-app-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 12px 12px 14px;
  background: #fff;
  color: #1d1d1b;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
  border-top: 4px solid var(--tf-app-color, #1b3a2b);
  font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.tf-app-bar.is-open { transform: none; opacity: 1; }
.tf-app-bar__icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.tf-app-bar__text { flex: 1; min-width: 0; }
.tf-app-bar__text--stack strong, .tf-app-bar__text--stack > span { display: block; }
.tf-app-bar__text--stack > span { color: #55554f; font-size: 13px; margin-top: 2px; }
.tf-app-bar__btn {
  flex: none;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--tf-app-color, #1b3a2b);
  color: #fff;
  font: 600 14px/1 system-ui, -apple-system, sans-serif;
  cursor: pointer;
}
.tf-app-bar__x {
  flex: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: #77776f;
  font-size: 24px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.tf-app-share { display: inline-block; vertical-align: -2px; color: #007aff; }
@media (prefers-color-scheme: dark) {
  .tf-app-bar { background: #1f2421; color: #f1f1ec; }
  .tf-app-bar__text--stack > span { color: #b8b8b0; }
  .tf-app-bar__x { color: #a0a098; }
  .tf-app-bar__btn { box-shadow: 0 0 0 1px rgba(255,255,255,.45); } /* keeps a black button visible on the dark bar */
}
/* Installed app: keep every page locked to the screen width so it can't be
   swiped sideways. Maps, carousels and tables still scroll inside themselves. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  @supports (overflow-x: clip) {
    html, body { overflow-x: clip; } /* clip keeps sticky headers working */
  }
}
.tf-app-standalone, .tf-app-standalone body {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@supports (overflow-x: clip) {
  .tf-app-standalone, .tf-app-standalone body { overflow-x: clip; }
}

/* Hide "get the app" buttons inside the installed app */
.tf-app-standalone [data-tf-install] { display: none !important; }