/* mobile-header.css — shared phone layout for the site header.
   Loaded by every page; desktop (700px and wider) is untouched.
   Row 1: smaller logo · store badge for this phone · bell · account
   Row 2: nav buttons, swipeable sideways if they don't all fit
   The page tags <html> with ua-ios / ua-android so only the matching
   store badge shows (see the small script next to this file's <link>). */
@media (max-width: 700px) {
  header {
    height: auto; padding: 8px 12px; row-gap: 8px; column-gap: 8px;
    grid-template-columns: auto 1fr; grid-template-areas: "logo right" "nav nav";
  }
  header .logo-img { grid-area: logo; }
  header .logo-img img { height: 44px !important; }
  header .nav-right { grid-area: right; gap: 8px; min-width: 0; justify-content: flex-end; }
  header .main-nav {
    grid-area: nav; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  header .main-nav::-webkit-scrollbar { display: none; }
  header .nav-pill { flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 6px 11px; }
  header .nav-right a[href*="apps.apple.com"], header .nav-right a[href*="play.google.com"] { display: none !important; }
  html.ua-ios header .nav-right a[href*="apps.apple.com"],
  html.ua-android header .nav-right a[href*="play.google.com"] { display: inline-flex !important; }
  header .nav-right a[href*="apps.apple.com"] img, header .nav-right a[href*="play.google.com"] img { height: 30px !important; }
  header .nav-right .nav-btn { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 12px; }
}