/* =========================================================
   Routes phone dock - translucent tab bar
   Restyles the SPA's mobile tab bar:
     nav.fixed.inset-x-4 > div > a > span(icon well) > span(selection chip)
   The chip is a framer-motion shared-layout element (layoutId "dock-pill"),
   so it glides between tabs on its own - everything here only paints it.
   ========================================================= */

@media (max-width: 767px) {
  #root nav.fixed.inset-x-4.z-50.md\:hidden {
    /* Opaque enough that page content behind never shows as text, but still
       clearly a translucent material. */
    --rvd-material: rgba(250, 250, 252, 0.88);
    --rvd-hairline: rgba(0, 0, 0, 0.08);
    --rvd-tint: #e2680c;
    --rvd-chip: rgba(255, 122, 26, 0.11);
    --rvd-idle: #6e7280;
    --rvd-pad: 0.4rem;
  }

  /* ---------- Material ---------- */
  #root nav.fixed.inset-x-4.z-50.md\:hidden > div {
    padding: var(--rvd-pad) var(--rvd-pad) 0.3rem;
    border: 0.5px solid var(--rvd-hairline);
    border-radius: 1.4rem;
    background: var(--rvd-material);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
    box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(0, 0, 0, 0.04),
      0 10px 28px -14px rgba(16, 20, 28, 0.28);
  }

  /* ---------- Tabs ---------- */
  #root nav.fixed.inset-x-4.z-50.md\:hidden > div > a {
    gap: 0.2rem;
    padding: 0.1rem 0 0;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 160ms ease;
  }

  #root nav.fixed.inset-x-4.z-50.md\:hidden > div > a:active {
    opacity: 0.5;
  }

  /* ---------- Icon well ---------- */
  #root nav.fixed.inset-x-4.z-50.md\:hidden > div > a > span:first-child {
    width: 3.1rem;
    height: 2rem;
    color: var(--rvd-idle);
    transition: color 220ms ease;
  }

  #root nav.fixed.inset-x-4.z-50.md\:hidden > div > a.active > span:first-child {
    color: var(--rvd-tint);
  }

  /* ---------- Selection chip ---------- */
  #root nav.fixed.inset-x-4.z-50.md\:hidden > div > a > span:first-child > span {
    border-radius: 999px;
    background: var(--rvd-chip);
    box-shadow: none;
  }

  /* ---------- Labels ---------- */
  #root nav.fixed.inset-x-4.z-50.md\:hidden > div > a > span:last-child {
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--rvd-idle);
    transition: color 220ms ease;
  }

  #root nav.fixed.inset-x-4.z-50.md\:hidden > div > a.active > span:last-child {
    font-weight: 600;
    color: var(--rvd-tint);
  }

  /* Any stray link appended outside the capsule (defensive - see
     injectNavLinks in routes-locations.js) must never break the bar. */
  #root nav.fixed.inset-x-4.z-50.md\:hidden > a {
    display: none !important;
  }
}