/* The app's bottom tab bar on phones (Joel, Oct 8, 2026: "it just really needs to feel like an app when you're in your
   phone ... options at the bottom of the phone ... the most common apps"). The same member nav that sits in the header
   on a laptop becomes a fixed bar at the bottom on a phone, the way Instagram, TikTok and Facebook do it. Rules it
   follows, from docs/MOBILE-STANDARDS.md: 3 to 5 tabs, each a full-height tap target at least 44 x 44 (Apple) and
   48 (Google) points, icon over a short label, the current tab filled in, the bar clears the home indicator
   (safe-area-inset-bottom), and content gets bottom padding so nothing hides under it. */
@media (max-width: 700px) {
  nav[aria-label="Member pages"] {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    background: var(--paper, #F7F5F0); border-top: 1.5px solid var(--ink, #151515);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font: 600 12px/1 "Barlow", "Segoe UI", system-ui, sans-serif; letter-spacing: .01em;
  }
  nav[aria-label="Member pages"] a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 60px; padding: 6px 2px 8px; text-decoration: none; color: var(--ink-soft, #4A4640);
    font-size: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  /* The icon sits in a 64 x 32 pill (Material 3's active indicator). Inactive: no pill, grey. Active: yellow pill,
     ink icon, bold ink label. Three cues at once (shape, color, weight) so it reads at a glance for older eyes. */
  nav[aria-label="Member pages"] a::before {
    content: ""; width: 64px; height: 32px; border-radius: 16px; background-color: transparent;
    background-image: var(--tab-icon); background-repeat: no-repeat; background-position: center; background-size: 26px 26px;
  }
  nav[aria-label="Member pages"] a::after { content: attr(data-tab); font-size: 12px; }
  nav[aria-label="Member pages"] a[href="/auctions"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234A4640' d='M3 21h10v-2H3v2zm9.6-16.8L8.4 8.4l7.1 7.1 4.2-4.2-7.1-7.1zM6.3 10.5l-1.4 1.4 7.1 7.1 1.4-1.4-7.1-7.1z'/%3E%3C/svg%3E"); --tab-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23151515' d='M3 21h10v-2H3v2zm9.6-16.8L8.4 8.4l7.1 7.1 4.2-4.2-7.1-7.1zM6.3 10.5l-1.4 1.4 7.1 7.1 1.4-1.4-7.1-7.1z'/%3E%3C/svg%3E"); }
  nav[aria-label="Member pages"] a[href="/auctions"]::after { content: "Auctions"; }
  nav[aria-label="Member pages"] a[href="/lookup"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234A4640' d='M9 3L7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 5.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E"); --tab-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23151515' d='M9 3L7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 5.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E"); }
  nav[aria-label="Member pages"] a[href="/lookup"]::after { content: "Lookup"; }
  nav[aria-label="Member pages"] a[href="/data"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234A4640' d='M4 20h16v2H2V2h2v18zm3-2V10h3v8H7zm5 0V5h3v13h-3zm5 0v-6h3v6h-3z'/%3E%3C/svg%3E"); --tab-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23151515' d='M4 20h16v2H2V2h2v18zm3-2V10h3v8H7zm5 0V5h3v13h-3zm5 0v-6h3v6h-3z'/%3E%3C/svg%3E"); }
  nav[aria-label="Member pages"] a[href="/data"]::after { content: "Data"; }
  /* Watching (B-126, Oct 12): took the Guide tab's place (Joel: "Watching is a key navigation piece"); How it works is in the footer. */
  nav[aria-label="Member pages"] a[href="/watch"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234A4640' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); --tab-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23151515' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); }
  nav[aria-label="Member pages"] a[href="/watch"]::after { content: "Watching"; }
  nav[aria-label="Member pages"] a[href="/account"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234A4640' d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 12c4.4 0 8 2.2 8 5v3H4v-3c0-2.8 3.6-5 8-5z'/%3E%3C/svg%3E"); --tab-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23151515' d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 12c4.4 0 8 2.2 8 5v3H4v-3c0-2.8 3.6-5 8-5z'/%3E%3C/svg%3E"); }
  nav[aria-label="Member pages"] a[href="/account"]::after { content: "Account"; }
  nav[aria-label="Member pages"] a[aria-current="page"] { color: var(--ink, #151515); }
  nav[aria-label="Member pages"] a[aria-current="page"]::before { background-color: var(--accent, #F2C230); background-image: var(--tab-icon-on); box-shadow: 0 0 0 1.5px var(--ink, #151515); }
  nav[aria-label="Member pages"] a[aria-current="page"]::after { font-weight: 700; font-size: 13px; }
  /* Room for the bar under the page, and the things that already sit at the bottom move up above it. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* No overflow-x on body: on iOS Safari that makes fixed bars drop out while scrolling (Joel saw the tab bar vanish, Oct 8). Pages keep nothing wider than the viewport instead. */
  body .fb-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body .fb-panel { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
  body .pickbar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; }
  header .wrap { min-height: 52px; }
}