/* Shared responsive navigation enhancement. Keep aligned with UI-PROTOCOL.md. */
.topnav .in{position:relative;}
.topnav .navmenu{
  display:none!important;
  width:44px;height:44px;flex:0 0 44px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink2);
  box-shadow:0 10px 24px rgba(124,92,255,.12);
  cursor:pointer;touch-action:manipulation;
  -webkit-appearance:none;appearance:none;
}
.topnav .navmenu span{
  width:18px;height:2px;border-radius:99px;background:currentColor;
  transition:transform .18s ease,opacity .18s ease;
}
.topnav .navmenu:hover,.topnav .navmenu:focus-visible{color:var(--ink);border-color:var(--line2);}
.topnav .navmenu:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;}
.topnav .navmenu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.topnav .navmenu[aria-expanded="true"] span:nth-child(2){opacity:0;}
.topnav .navmenu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:920px){
  body .topnav .navmenu{display:inline-flex!important;}
  body .topnav .navlinks{
    display:none!important;position:absolute!important;
    top:calc(100% + 8px);left:14px;right:14px;z-index:130;
    flex-direction:column!important;align-items:stretch!important;gap:4px!important;
    padding:8px!important;border:1px solid var(--line)!important;border-radius:14px!important;
    background:var(--card)!important;
    box-shadow:0 18px 44px rgba(124,92,255,.18)!important;
  }
  body .topnav.nav-open .navlinks{display:flex!important;}
  body .topnav .navlinks a{
    display:block!important;padding:12px 14px!important;border-radius:10px!important;
    color:var(--ink2)!important;font-size:15px!important;line-height:1.25!important;
  }
  body .topnav .navlinks a:hover,body .topnav .navlinks a:focus-visible{
    background:var(--card2)!important;color:var(--ink)!important;
  }
  body .topnav .navlinks a:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px;}
}

@media(max-width:760px){
  body .topnav .navmenu,body .topnav .navcta{height:44px;min-height:44px;}
}

@media(max-width:420px){
  body .topnav .in{padding:8px 10px!important;gap:6px!important;}
  body .topnav button.brand{min-width:0!important;}
  body .topnav .brandword{font-size:13px!important;}
  body .topnav .navmenu{width:44px;height:44px;flex-basis:44px;}
  body .topnav .navcta{padding:10px!important;font-size:12px!important;}
  body .topnav .navlinks{left:10px;right:10px;}
}

@media print{.topnav .navmenu{display:none!important;}}