/* The header's ☰ menu (scripts/layout.ts). Its own file because every page
   needs it and the legal pages don't load site.css; both stylesheets define
   the same colour variables, so this works under either.

   Desktop: The loop and See it working stay in the bar, and the menu holds the
   other pages and the waitlist. Below 760px the bar's text links give way and
   the menu repeats them; below 560px Sign in moves in as well, so the bar is
   just the brand, the main button and the ☰. */

.nav .menu { position:relative; }
.nav .menu > summary { list-style:none; cursor:pointer; display:grid; place-items:center;
  width:40px; height:40px; border-radius:9px; border:1px solid var(--line-2, var(--line)); color:var(--ink); }
.nav .menu > summary::-webkit-details-marker { display:none; }
.nav .menu > summary:hover { border-color:var(--ink); }
.nav .menu > summary:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

/* three bars, drawn; they turn into a cross while open */
.nav .menu .bars, .nav .menu .bars::before, .nav .menu .bars::after {
  display:block; width:18px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .18s ease, opacity .18s ease; }
.nav .menu .bars { position:relative; }
.nav .menu .bars::before, .nav .menu .bars::after { content:""; position:absolute; left:0; }
.nav .menu .bars::before { top:-6px; }
.nav .menu .bars::after { top:6px; }
.nav .menu[open] .bars { background:transparent; }
.nav .menu[open] .bars::before { transform:translateY(6px) rotate(45deg); }
.nav .menu[open] .bars::after { transform:translateY(-6px) rotate(-45deg); }

.nav .menu-panel { position:absolute; right:0; top:calc(100% + 10px); z-index:50; min-width:220px;
  display:flex; flex-direction:column; padding:8px; border-radius:12px;
  background:var(--paper); border:1px solid var(--line); box-shadow:0 18px 40px rgb(0 0 0 / 0.14); }
.nav .links .menu-panel a { padding:10px 12px; border-radius:8px; font-size:15px; color:var(--ink); text-decoration:none; }
.nav .links .menu-panel a:hover { background:var(--wash); color:var(--ink); }
.nav .links .menu-panel a[aria-current="page"] { font-weight:650; color:var(--blue); }

/* repeated only when the bar can't show them */
.nav .links .menu-panel a.m-narrow, .nav .links .menu-panel a.m-phone { display:none; }
@media (max-width:760px) { .nav .links .menu-panel a.m-narrow { display:block; } }
@media (max-width:560px) {
  .nav .links .menu-panel a.m-phone { display:block; }
  .nav .links a.signin { display:none; }
  .nav .menu > summary { width:36px; height:36px; }
}