/* Shared public navigation. JavaScript enhances the original links in place. */
.nav .site-nav-panel{display:contents}
.nav .site-nav-toggle{display:none}
.landing-page .nav.site-nav-ready .brand{grid-column:2;grid-row:1}
.landing-page .nav.site-nav-ready .nav-left{grid-column:1;grid-row:1}
.landing-page .nav.site-nav-ready .nav-right{grid-column:3;grid-row:1}
.nav .site-nav-toggle:focus-visible,
.nav .site-nav-panel :is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:1100px){
  .nav.site-nav-open ~ [data-dock-play]{visibility:hidden;pointer-events:none}
  /* A failed or disabled script must never hide a destination. A wrapping,
     non-sticky header also leaves room for the page beneath a long link list. */
  .nav:not(.site-nav-ready){position:relative;top:auto}
  .nav:not(.site-nav-ready) .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s2)}
  .nav:not(.site-nav-ready) .wrap>.brand{flex:none;max-width:100%;grid-column:auto;grid-row:auto;justify-self:auto}
  .nav:not(.site-nav-ready) .wrap>ul{display:flex;flex-wrap:wrap;width:100%;margin:0;justify-content:flex-start;gap:4px var(--s2);grid-column:auto;grid-row:auto}
  .nav:not(.site-nav-ready) .wrap>ul>li{display:block}
  .nav:not(.site-nav-ready) .wrap>ul>li.nav-account{display:flex;position:static}

  .nav.site-nav-ready .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s1) var(--s2);padding-block:var(--s1)}
  .nav.site-nav-ready .wrap>.brand{position:relative;grid-column:1;grid-row:1;justify-self:start;justify-content:flex-start;gap:var(--s1);width:auto;max-width:100%;min-width:0;min-height:44px;padding:0}
  .nav.site-nav-ready .brand .logo{width:clamp(112px,32vw,165px);max-width:100%;height:auto}
  .nav.site-nav-ready .brand .beta{position:static;transform:none;margin:0;font-size:9px}
  .nav.site-nav-ready .site-nav-toggle{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-width:88px;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);color:var(--ink);font:600 14px/1.2 var(--mono);cursor:pointer}
  .nav .site-nav-toggle svg{width:18px;height:18px;flex:none}
  .nav .site-nav-toggle:hover{background:var(--bg-3)}
  .nav .site-nav-toggle:active{transform:translateY(1px)}
  .nav .site-nav-toggle[aria-expanded="true"]{border-color:var(--accent);background:var(--bg-3)}
  .nav.site-nav-ready .site-nav-panel{display:block;grid-column:1/-1;grid-row:2;min-width:0;padding:var(--s1);border-top:1px solid var(--line-2);max-height:calc(100vh - 88px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 88px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:var(--s1)}
  .nav.site-nav-ready .site-nav-panel>ul{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;width:100%;margin:0;padding:0;gap:var(--s1)}
  .nav.site-nav-ready .site-nav-panel>ul+ul{margin-top:var(--s1);padding-top:var(--s1);border-top:1px solid var(--line)}
  .nav.site-nav-ready .site-nav-panel>ul>li{display:block;min-width:0}
  .nav.site-nav-ready .site-nav-panel li a{display:flex;align-items:center;justify-content:flex-start;min-width:44px;min-height:44px;padding:8px 12px;border-radius:var(--r);font-size:14px;letter-spacing:.04em}
  .nav.site-nav-ready .site-nav-panel li a:hover{background:var(--bg-2);color:var(--ink)}
  .nav.site-nav-ready .site-nav-panel li a.play:hover{color:var(--accent-ink);background:var(--accent)}
  .nav.site-nav-ready .site-nav-panel>ul>li.nav-account{display:flex;position:static;align-items:center;gap:var(--s1);width:100%}
  .nav.site-nav-ready .site-nav-panel .nav-account [data-account-link]{display:flex;flex:1;max-width:none;min-width:0;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;text-align:left}
}

/* Keep the native hidden state authoritative at either breakpoint. */
.nav.site-nav-ready .site-nav-panel[hidden],
.nav.site-nav-ready .site-nav-toggle[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.nav .site-nav-toggle:active{transform:none}}