/* Liquid Glass Navbar (light). Pill = frosted glass; the water drop and the glass highlights are drawn by
   components/liquid-navbar.js in a WebGL canvas behind the items. */
.lnav { --fg: #09090b; --fg-soft: rgba(9,9,11,.58);
  position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; isolation: isolate;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-tap-highlight-color: transparent; }
.lnav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(12px) saturate(1.3) brightness(1.06); backdrop-filter: blur(12px) saturate(1.3) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.35), 0 14px 34px -14px rgba(9,9,11,.35), 0 2px 6px rgba(9,9,11,.07); }
.lnav-water { position: absolute; left: -16px; top: -16px; z-index: -1; pointer-events: none; }
.lnav[data-gl="on"] .lnav-drop { display: none; }
.lnav-drop { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 999px; z-index: -1; pointer-events: none; will-change: transform, width;
  background: radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 55%), rgba(255,255,255,.45);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 6px rgba(9,9,11,.08), inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 16px -6px rgba(9,9,11,.3); }
.lnav a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px;
  font: 500 14px/1 var(--sf); letter-spacing: -.01em; color: var(--fg-soft); text-decoration: none; transition: color .25s; }
.lnav a:hover, .lnav a.on { color: var(--fg); }
.lnav a:focus-visible { outline: 2px solid #09090b; outline-offset: 2px; }
.nv-ico { position: relative; display: inline-flex; flex: none; }
.nv-ico svg { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.lnav a.on .nv-ico svg { transform: translateY(-1px) scale(1.08); }
/* Icon moments, played once when an item becomes the drop's target. */
.nv-ico[data-fx="hop"] svg { animation: nv-hop .8s cubic-bezier(.3,1.4,.5,1) both; transform-origin: 50% 100%; }
@keyframes nv-hop { 30% { transform: translateY(-5px) scale(1.04,.96); } 55% { transform: scale(1.12,.88); } 75% { transform: translateY(-2px) scale(.98,1.04); } 100% { transform: translateY(-1px) scale(1.08); } }
.nv-ico[data-fx="spin"] svg { animation: nv-spin 1s cubic-bezier(.2,.75,.25,1) both; }
@keyframes nv-spin { from { transform: perspective(80px) rotateY(0); } to { transform: perspective(80px) rotateY(360deg) translateY(-1px) scale(1.08); } }
.nv-ico[data-fx="dash"] svg { animation: nv-dash 1s cubic-bezier(.55,0,.3,1) both; }
@keyframes nv-dash { 15% { transform: translateX(-3px); } 42% { transform: translateX(26px); opacity: 0; } 43% { transform: translateX(-24px); opacity: 0; } 62% { opacity: 1; } 82% { transform: translateX(2px); } 100% { transform: translateY(-1px) scale(1.08); } }
.nv-ico[data-fx="drop"] svg { animation: nv-drop .95s cubic-bezier(.4,0,.3,1) both; transform-origin: 50% 100%; }
@keyframes nv-drop { 26% { transform: translateY(-12px) scale(.88,1.12); } 46% { transform: translateY(3px) scale(1.28,.7); } 62% { transform: translateY(-3px) scale(.93,1.07); } 80% { transform: scale(1.04,.97); } 100% { transform: translateY(-1px) scale(1.08); } }
.nv-ico[data-fx="drop"]::before, .nv-ico[data-fx="drop"]::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: 0; }
.nv-ico[data-fx="drop"]::before { animation: nv-splash-l .95s ease-out both; }
.nv-ico[data-fx="drop"]::after { animation: nv-splash-r .95s ease-out both; }
@keyframes nv-splash-l { 0%, 44% { opacity: 0; } 50% { opacity: .9; transform: translate(-5px,-6px); } 75%, 100% { opacity: 0; transform: translate(-11px,1px) scale(.4); } }
@keyframes nv-splash-r { 0%, 44% { opacity: 0; } 50% { opacity: .9; transform: translate(5px,-7px); } 75%, 100% { opacity: 0; transform: translate(12px,1px) scale(.4); } }
.nv-ico[data-fx="wave"] svg { animation: nv-wave .9s ease-in-out both; transform-origin: 50% 92%; }
@keyframes nv-wave { 20% { transform: rotate(-15deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } 100% { transform: translateY(-1px) scale(1.08); } }

@media (min-width: 760px) { .lnav-wrap { position: absolute; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); } }
@media (max-width: 759px) {
  .lnav-wrap { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; justify-content: center; pointer-events: none; }
  .lnav { pointer-events: auto; }
  .lnav a { padding: 0 13px; }
  .lnav a span:not(.nv-ico) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nv-ico svg, .nv-ico::before, .nv-ico::after { animation: none !important; transition: none; } }