/* Compact menu whenever the horizontal link row is hidden (max-width 960px).
   Applies to every phone/OS/browser in that range, not a single device. */
.nav-toggle{
  display:none;
  margin-left:auto;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--line2);
  background:var(--surface);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  display:block;
  width:16px;
  height:1px;
  background:var(--text);
  transition:transform .15s,opacity .15s;
}

@media (max-width:960px){
  .nav-toggle{display:inline-flex;z-index:2}
  nav{z-index:200;overflow:visible}
  .nav-links{
    display:none;
    position:fixed;
    top:80px;
    left:0;
    right:0;
    z-index:201;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center;
    gap:2px;
    margin:0;
    padding:8px 12px 10px;
    background:var(--bg);
    border-bottom:1px solid var(--line2);
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{display:none}
  nav.nav-open .nav-links{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    height:44px !important;
    max-height:44px !important;
    min-height:44px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  .nav-links li{border:none;flex:0 0 auto}
  .nav-links a{
    display:block;
    padding:8px 10px;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    letter-spacing:0.04em;
    white-space:nowrap;
    color:var(--muted);
  }
  .nav-links a:hover,
  .nav-links a:active{color:var(--text)}
  nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
  nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}