/* Member dashboard on phones (27 Oct 2026): the bottom tab bar and the top
   buttons drew their icons from text characters (⌂ ★ ▷ ✦ ⌕ ＋), which looked
   dated. Drawn icons replace them, the current tab gets a soft pill instead
   of a lime block, and the top buttons share one shape. CSS only: the markup
   comes from the pinned dashboard files and stays as it is. Added last by
   member-next/page.php, so these rules win. */

#xp-mobile-nav, .xp-topbar {
  --nav-ink: #173e34;
  --nav-muted: #6b7c72;
  --nav-soft: #eef3e7;
  --nav-pill: #dff49d;
  --i-home: url("/member-next/icons/nav-home.svg?v=1");
  --i-showcase: url("/member-next/icons/nav-showcase.svg?v=1");
  --i-watch: url("/member-next/icons/nav-watch.svg?v=1");
  --i-studio: url("/member-next/icons/nav-studio.svg?v=1");
  --i-calls: url("/member-next/icons/nav-calls.svg?v=1");
  --i-people: url("/member-next/icons/nav-people.svg?v=1");
  --i-search: url("/member-next/icons/nav-search.svg?v=1");
  --i-inbox: url("/member-next/icons/nav-inbox.svg?v=1");
  --i-plus: url("/member-next/icons/nav-plus.svg?v=1");
}

@media (max-width: 900px) {
  /* ---- Bottom tab bar ---------------------------------------------------- */
  #xp-mobile-nav {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    border-top: 1px solid rgba(23, 62, 52, .08);
    box-shadow: 0 -8px 28px rgba(23, 62, 52, .07);
  }
  #xp-mobile-nav > a {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    min-width: 58px;
    padding: 3px 4px 2px;
    border-radius: 0;
    background: transparent !important;
    color: var(--nav-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, transform .12s ease;
  }
  #xp-mobile-nav > a:active { transform: scale(.94); }
  #xp-mobile-nav > a[aria-current],
  #xp-mobile-nav > a[data-cm-menu][aria-expanded="true"] { color: var(--nav-ink); }
  /* The pill behind the current tab's icon. */
  #xp-mobile-nav > a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 58px;
    height: 30px;
    border-radius: 999px;
    background: var(--nav-pill);
    opacity: 0;
    transform: translateX(-50%) scale(.55);
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.2);
  }
  #xp-mobile-nav > a[aria-current]::before,
  #xp-mobile-nav > a[data-cm-menu][aria-expanded="true"]::before { opacity: 1; transform: translateX(-50%) scale(1); }
  /* Drawn icons in place of the text characters. */
  #xp-mobile-nav > a > span:first-child:not(.cm-burger) {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin-top: 3px;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent;
    background: var(--nav-muted);
    -webkit-mask: var(--i, none) center / 24px 24px no-repeat;
    mask: var(--i, none) center / 24px 24px no-repeat;
    transition: background-color .2s ease;
  }
  #xp-mobile-nav > a[aria-current] > span:first-child { background: var(--nav-ink); }
  #xp-mobile-nav > a[href$="#home"] { --i: var(--i-home); }
  #xp-mobile-nav > a[href*="showcase"] { --i: var(--i-showcase); }
  #xp-mobile-nav > a[href$="#watch"] { --i: var(--i-watch); }
  #xp-mobile-nav > a[href$="#studio"] { --i: var(--i-studio); }
  /* 29 Oct 2026: Calls and People replace Watch and More (Menu is at the top). */
  #xp-mobile-nav > a[href$="#opportunities"] { --i: var(--i-calls); }
  #xp-mobile-nav > a[href$="#discover"] { --i: var(--i-people); }
  /* Menu keeps its two lines, drawn to match. */
  #xp-mobile-nav > a[data-cm-menu] { min-height: 0; }
  #xp-mobile-nav > a[data-cm-menu] > .cm-burger {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin: 3px 0 0;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  #xp-mobile-nav > a[data-cm-menu] > .cm-burger i { width: 18px; height: 2px; border-radius: 2px; }
  #xp-mobile-nav > a[data-cm-menu] > .cm-burger i:last-child { width: 12px; align-self: center; transform: translateX(-3px); }
  @media (prefers-reduced-motion: reduce) {
    #xp-mobile-nav > a, #xp-mobile-nav > a::before { transition: none; }
  }

  /* ---- Top buttons: search, messages, create, menu ------------------------ */
  .xp-topbar .xp-search-trigger,
  .xp-topbar .xp-shell-inbox,
  .xp-topbar .xp-primary {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, transform .12s ease;
  }
  .xp-topbar .xp-search-trigger:active,
  .xp-topbar .xp-shell-inbox:active,
  .xp-topbar .xp-primary:active { transform: scale(.94); }
  .xp-topbar .xp-search-trigger { background: transparent; color: var(--nav-ink); }
  .xp-topbar .xp-search-trigger > span:first-child {
    width: 22px;
    height: 22px;
    font-size: 0 !important;
    color: transparent;
    background: var(--nav-ink);
    -webkit-mask: var(--i-search) center / 22px 22px no-repeat;
    mask: var(--i-search) center / 22px 22px no-repeat;
  }
  .xp-topbar .xp-shell-inbox { background: var(--nav-soft) !important; color: var(--nav-ink); }
  .xp-topbar .xp-shell-inbox:hover { background: var(--nav-pill) !important; }
  .xp-topbar .xp-shell-inbox > svg { display: none; }
  .xp-topbar .xp-shell-inbox::before {
    content: "";
    width: 22px;
    height: 22px;
    background: var(--nav-ink);
    -webkit-mask: var(--i-inbox) center / 22px 22px no-repeat;
    mask: var(--i-inbox) center / 22px 22px no-repeat;
  }
  .xp-topbar .xp-shell-inbox [data-shell-badge] {
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d6336c;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    box-shadow: 0 0 0 2px #fff;
  }
  /* Create: a crisp plus on CastMe pink, with the text kept for screen readers. */
  .xp-topbar .xp-primary {
    position: relative;
    font-size: 0 !important;
    color: transparent !important;
    background: var(--castme-pink, #f2bcd7) !important;
    box-shadow: inset 0 0 0 1px rgba(23, 62, 52, .08);
  }
  .xp-topbar .xp-primary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .xp-topbar .xp-primary::before {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--nav-ink);
    -webkit-mask: var(--i-plus) center / 20px 20px no-repeat;
    mask: var(--i-plus) center / 20px 20px no-repeat;
  }
  .xp-topbar .cm-menu-trigger { min-height: 40px; height: 40px; border-radius: 12px; }
}