/* Phone menu: a full-screen sheet with numbered links, the current page marked, and a staggered entrance.
   Shared by every page (the home page uses .mobile-nav, the other pages .site-mnav). */
#mobile-nav.mobile-nav,#mobile-nav.site-mnav{
  position:fixed;inset:0;width:auto;height:auto;z-index:99;
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:calc(96px + env(safe-area-inset-top)) clamp(22px,7vw,40px) calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 90% 55% at 100% 0%,rgba(92,200,255,.14),transparent 60%),
    radial-gradient(ellipse 80% 50% at 0% 100%,rgba(255,181,71,.12),transparent 60%),
    rgba(5,9,19,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:0;transform:none;opacity:0;visibility:hidden;overflow-y:auto;
  transition:opacity .3s ease,visibility 0s linear .3s;counter-reset:mnav;
}
#mobile-nav.site-mnav{z-index:999}
#mobile-nav.mobile-nav.open,#mobile-nav.site-mnav.open{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
#mobile-overlay.mobile-overlay,#mobile-overlay.site-overlay{display:none}

#mobile-nav.mobile-nav a,#mobile-nav.site-mnav a{
  counter-increment:mnav;position:relative;display:flex;align-items:baseline;gap:18px;
  padding:15px 0;border:0;border-bottom:1px solid rgba(170,200,255,.1);
  text-decoration:none;color:rgba(242,246,252,.92);background:none;text-align:left;
  font:700 clamp(26px,7.4vw,34px)/1.15 var(--font);letter-spacing:-.015em;
  opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),color .2s;
}
#mobile-nav.mobile-nav a::before,#mobile-nav.site-mnav a::before{
  content:counter(mnav,decimal-leading-zero);flex:none;width:26px;
  font:600 12px var(--font);letter-spacing:.14em;color:var(--mist,#9FADC4);transform:translateY(-3px);
}
#mobile-nav.mobile-nav a::after,#mobile-nav.site-mnav a::after{
  content:'';margin-left:auto;align-self:center;width:18px;height:11px;flex:none;opacity:.35;transition:opacity .2s,transform .2s;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h17M13 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h17M13 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
#mobile-nav.mobile-nav a:active::after,#mobile-nav.site-mnav a:active::after{opacity:1;transform:translateX(4px)}
#mobile-nav.mobile-nav a[aria-current="page"],#mobile-nav.site-mnav a[aria-current="page"]{color:#FFD07A}
#mobile-nav.mobile-nav a[aria-current="page"]::before,#mobile-nav.site-mnav a[aria-current="page"]::before{color:#FFB547}
#mobile-nav.mobile-nav a[aria-current="page"]::after,#mobile-nav.site-mnav a[aria-current="page"]::after{
  -webkit-mask:none;mask:none;width:8px;height:8px;border-radius:50%;background:#FFB547;opacity:1;box-shadow:0 0 12px rgba(255,181,71,.7)}

#mobile-nav.open a{opacity:1;transform:none}
#mobile-nav.open a:nth-child(1){transition-delay:.04s}
#mobile-nav.open a:nth-child(2){transition-delay:.08s}
#mobile-nav.open a:nth-child(3){transition-delay:.12s}
#mobile-nav.open a:nth-child(4){transition-delay:.16s}
#mobile-nav.open a:nth-child(5){transition-delay:.2s}
#mobile-nav.open a:nth-child(6){transition-delay:.24s}
#mobile-nav.open a:nth-child(7){transition-delay:.28s}

/* the Google sign-in on the home page sits under the list */
#mobile-nav .mobile-login{margin-top:26px;align-self:stretch;padding:14px 18px;border-radius:14px;border:1px solid rgba(242,246,252,.22);background:rgba(255,255,255,.04);font:600 15px var(--font);color:var(--snow,#F2F6FC);opacity:0;transition:opacity .35s ease .3s}
#mobile-nav.open .mobile-login{opacity:1}

/* a small sign-off at the bottom of the sheet */
#mobile-nav::after{content:'KAINAR.SPACE';margin-top:auto;padding-top:30px;font:600 11px var(--font);letter-spacing:.32em;color:rgba(159,173,196,.55)}

@media (prefers-reduced-motion:reduce){#mobile-nav a{transition:none!important;transform:none!important}}
body:has(#mobile-nav.open) #chat-btn,body:has(#mobile-nav.open) #back-top,body:has(#mobile-nav.open) #chat-panel{display:none!important}
