/* Main navigation: icon tabs in the header (desktop) and a fixed bottom bar (phone). */
.mn{display:flex; align-items:center;}
.mn-item{position:relative; display:inline-flex; align-items:center; gap:8px; color:var(--navy-soft); text-decoration:none; font:700 14px/1 'Inter',sans-serif; transition:color .15s, background .15s;}
.mn-item svg{width:21px; height:21px; flex:none;}
a.mn-item:hover{color:var(--navy);}
.mn-item.is-on{color:var(--blue);}
.mn-item.is-soon{opacity:.5; cursor:default;}
.mn-item:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
html[lang="ar"] .mn-item,html[lang="ja"] .mn-item{font-family:inherit;}

/* desktop: its own row under the header */
header .nav > .nav-spacer{flex:1;}
.mn-row{position:sticky; top:80px; z-index:59; background:var(--white); border-bottom:1px solid var(--border-soft);}
.mn-row .wrap{display:flex; justify-content:center;}
.mn-top{gap:6px;}
.mn-top .mn-item{padding:15px 22px 13px; border-bottom:3px solid transparent; margin-bottom:-1px; border-radius:0;}
.mn-top .mn-item.is-on{border-bottom-color:var(--blue);}
a.mn-top .mn-item:hover,.mn-top a.mn-item:hover{background:var(--blue-tint);}
.mn-top .mn-soon{font:700 9.5px/1 'JetBrains Mono',monospace; letter-spacing:.4px; text-transform:uppercase; padding:3px 6px; border-radius:999px; background:var(--blue-tint); color:var(--blue-dark);}

/* phone: bottom bar */
.mn-bottom{display:none;}
@media (max-width:720px){
  .mn-row{display:none;}
  .mn-bottom{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; inset-inline:0; bottom:0; z-index:80; background:var(--white); border-top:1px solid var(--border-soft); padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .mn-bottom .mn-item{flex-direction:column; gap:4px; padding:6px 2px; font-size:11px; font-weight:600; border-radius:12px; min-width:0;}
  .mn-bottom .mn-t{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .mn-bottom .mn-item svg{width:24px; height:24px;}
  .mn-bottom .mn-item.is-on::before{content:""; position:absolute; top:-7px; width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--blue);}
  .mn-bottom .mn-soon{display:none;}
  body.has-mn{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .fd-toast{bottom:84px;}
}

/* only the top bar (logo...) hides on scroll down and returns on scroll up (js/navhide.js); the section row stays pinned */
header{transition:transform .28s ease;}
.mn-row{transition:top .28s ease;}
html.nav-instant header,html.nav-instant .mn-row{transition:none;}
html.nav-hidden header{transform:translateY(-100%);}
html.nav-hidden .mn-row{top:0;}