/* Mobile UI v31 — bottom navigation bar:
   Swap Rounds out of the fixed bottom bar in favour of Maps. Rounds stays
   reachable from the ••• More sheet (App.jsx mirrors it inside .nav-more as
   .nav-more-only, which mobile-v3.js reads to build that sheet). */
@media (max-width: 760px) {
  .topbar > nav > a.nav-primary-only { display: none !important; }

  /* mobile-v8 places bar items by :nth-of-type; with Rounds hidden that math
     is off, so pin the three visible destinations explicitly. */
  .topbar > nav > a[href="/sites"] { grid-column: 1 !important; }
  .topbar > nav > a[href="/maps"] { grid-column: 2 !important; }
  .topbar > nav > a[href="/cases"] { grid-column: 3 !important; }

  /* mobile-v7 only defines mask icons for Sites / Rounds / Cases — give Maps
     its own (folded-map glyph) so the tab isn't a blank block. */
  .topbar > nav > a[href="/maps"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 3l-.16.03L15 5.1 9 3 3.62 4.81c-.23.07-.42.25-.42.49V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.38-1.81c.23-.07.42-.25.42-.49V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 3l-.16.03L15 5.1 9 3 3.62 4.81c-.23.07-.42.25-.42.49V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.38-1.81c.23-.07.42-.25.42-.49V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z'/%3E%3C/svg%3E") !important;
  }

  /* Aggregate "awaiting review" count on the ••• More button (mobile-v3.js
     sets data-badge from the Rounds/Motion badges inside .nav-more). */
  .topbar > nav > .mobile-v3-more-button { position: relative !important; }
  .topbar > nav > .mobile-v3-more-button[data-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: 3px;
    left: calc(50% + 3px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 999px;
    background: #2878b5;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }
  .mobile-v3-more-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2878b5;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
  }
}