/* The phone bottom tab bar (radar/tabbar.py; redesign 2026-10-10, IA v2): Dashboard · Bots · Positions · Money.
   Hidden above 760px. Hidden on the old step-by-step bot setup (#bf with .bf-foot) and wherever an element carries
   data-rv-notabs: the setup has its own footer with the primary button and a
   Close, and two bars on top of each other would leave the setup half a screen.
   --rv-tabbar-h is the bar's height on this page (0px when there is none): the page's bottom padding and any fixed
   element of a page (toasts, sticky action bars) sit above it with it. Colours only from rv-tokens.css. */
.rv-tabbar { display: none; }

@media (max-width: 760px) {
  :root { --rv-tabbar-h: 0px; }
  html:has(.rv-tabbar):not(:has(#bf .bf-foot, [data-rv-notabs])) { --rv-tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px)); }

  .rv-tabbar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    box-sizing: border-box; height: var(--rv-tabbar-h); margin: 0;
    padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
    background: var(--rv-bg);
    border-top: 1px solid var(--rv-line);
    font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .01em;
  }
  html:has(#bf .bf-foot, [data-rv-notabs]) .rv-tabbar { display: none; }

  .rv-tabbar .rv-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; height: 56px; padding: 0 2px;
    color: var(--rv-text-3); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .rv-tabbar .rv-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rv-tabbar .rv-tab-ic { flex: none; width: 20px; height: 20px; }
  .rv-tabbar .rv-tab.on { color: var(--rv-text); }
  .rv-tabbar .rv-tab:hover { color: var(--rv-text); text-decoration: none; }
  .rv-tabbar .rv-tab:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -6px; border-radius: 14px; }

  /* nothing hides behind the bar: the page ends above it, and the browser scrolls a focused field clear of it */
  html:has(.rv-tabbar) { scroll-padding-bottom: calc(var(--rv-tabbar-h) + 12px); }
  /* a block after the page's last element, not body padding: the bot setup and the Home keep body at height: 100% with
     the page overflowing it, where padding would sit under the fold instead of after the content */
  html:has(.rv-tabbar) body::after { content: ""; display: block; flex: none; height: var(--rv-tabbar-h); }

  /* the shell's toast sits above the bar */
  html:has(.rv-tabbar) .ws #rv-toast { bottom: calc(var(--rv-tabbar-h) + 12px); }
}

/* the phone-only pieces of docs/design/phone-classes.md, hidden on wider screens (here, not in rv-phone.css: that file
   is linked with a phone-only media query, so a rule for wider screens in it would never apply) */
@media (min-width: 761px) {
  .rv-phone-only { display: none !important; }
  .rv-fold-head { cursor: default; pointer-events: none; }
  .rv-fold-head::after { display: none; }
}