/* gv-nav: one menu for every page. Fixes the hidden second column on mobile and the 2-row wrap on desktop. */
.nav-links .ng{display:none}
.nav-links .ng-tools{display:contents}
.nav-links a,.nav .logo{white-space:nowrap}

/* desktop: one row, ticks never change widths */
@media(min-width:901px){
.nav-links{flex-wrap:nowrap;gap:clamp(8px,1.05vw,18px)}
.nav-links a .nn{position:relative}
.nav-links a.done .nn:after,.nav-links a.seen .nn:after{content:"";position:absolute;top:-6px;right:-7px;width:7px;height:7px;border-radius:50%;background:var(--green,#1a8a4a);margin:0}
.nav-links a.seen .nn:after{background:var(--violet)}
}

@media(min-width:901px)and (max-width:1100px){.nav-links a{font-size:10px}.nav .logo{font-size:12px;padding-left:12px;padding-right:12px}.nav .cta{padding:0 12px}}

/* mobile: a real, scrollable, grouped menu */
@media(max-width:900px){
html.nav-lock,html.nav-lock body{overflow:hidden}
.nav.open .nav-links{flex-wrap:nowrap;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;padding:0;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}
.nav.open .nav-links>a,.nav.open .nav-links .ng-tools a{white-space:normal}
.nav.open .nav-links>a{padding:12px 16px;min-height:56px;line-height:1.25;border-bottom:2px solid rgba(10,10,10,.14);box-sizing:border-box;width:100%}
.nav.open .nav-links>a[href="/map/"]{background:var(--lime);border:0;border-bottom:var(--bd);box-shadow:none;padding:10px 16px;min-height:52px;font-size:13px;display:flex;align-items:center;justify-content:flex-start;gap:0}
.nav.open .nav-links>a[href="/map/"]:before{content:"";width:12px;height:12px;margin:0 10px 0 0;border:2px solid var(--ink);background:var(--violet);flex:none}
.nav.open .nav-links>a[href="/map/"]:after{margin-left:auto}
.nav.open .nav-links>a[href="/map/"].on{background:var(--lime);box-shadow:inset 5px 0 0 var(--violet)}
.nav.open .nav-links>a[href="/map/"].on:after{content:"YOU ARE HERE";position:absolute;top:0;right:0;left:auto;margin:0;border-width:0 0 2px 2px;padding:4px 7px}
.nav.open .nav-links>*{flex-shrink:0}
.nav.open .nav-links .ng{display:block;position:relative;background:var(--ink);color:var(--lime);font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 16px}
.nav.open .nav-links>a.on{background:#f3efff;box-shadow:inset 5px 0 0 var(--violet)}
.nav.open .nav-links>a.on:after{top:0;right:0;border-width:0 0 2px 2px;padding:4px 7px}
.nav.open .nav-links .ng-tools{display:grid;grid-template-columns:repeat(4,1fr)}
.nav.open .nav-links .ng-tools a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:72px;padding:12px 6px;font-size:11px;letter-spacing:.08em;text-align:center;border:0;border-right:2px solid var(--ink);box-shadow:none;background:var(--white);width:auto}
.nav.open .nav-links .ng-tools a:before{content:"";width:12px;height:12px;margin:0;border:2px solid var(--ink);background:#6ec1ff;flex:none}
.nav.open .nav-links .ng-tools a[href="/cheatsheet/"]:before{background:var(--amber,#ffb44d)}
.nav.open .nav-links .ng-tools a[href="/lab/"]:before{background:var(--pink)}
.nav.open .nav-links .ng-tools a[href="/fix/"]:before{background:#ff8a5b}
.nav.open .nav-links .ng-tools a:after{display:none}
.nav.open .nav-links .ng-tools a:last-child{border-right:0}
.nav.open .nav-links .ng-tools a.on{background:var(--lime)}
.nav.open .nav-links a .nd b{overflow-wrap:anywhere}
.burger{min-height:44px}
}

/* sim: remote panel + graph */
.tl-remote .rurl{font:700 10px/1.3 var(--mono);word-break:break-all;margin:-4px 0 8px;opacity:.7}
.tl-remote .rbr{font:12px/1.5 var(--mono);margin-top:10px}
.tl-remote[hidden]{display:none}
