/* Shared public navigation: keep actions distinct at every mobile width. */
.navright {flex-shrink:0}
.navright>a[href="/login"] {display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.mobilelinks[hidden] {display:none!important}
.mobilelinks a[aria-current="page"] {color:var(--accent)}

@media(max-width:780px) {
 .nav {gap:12px}
 .navright {gap:16px}
 .navright>a[href="/login"] {padding:8px 4px}
 .menubtn {min-width:62px;min-height:44px;padding:10px 12px}
 .mobilelinks.open {top:100%;padding:12px;border-radius:0 0 12px 12px;max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
 .mobilelinks a {display:flex;align-items:center;border-radius:7px}
 .mobilelinks a:hover,.mobilelinks a:focus-visible {background:var(--panel)}
 .mobilelinks .btn {margin:8px 0 0;text-align:center}
}

@media(max-width:420px) {
 body>header.shell {padding-left:20px;padding-right:20px}
 body .nav .brand {font-size:18px;gap:6px}
 body .nav .brand .mark {width:26px;height:44px}
 body .nav .navright {font-size:14px;gap:12px}
}