/* navigation.css — shared mobile menu for .site-header and the docs sidebar.
   Loaded last on every page. Uses tokens only. Works with navigation.js,
   which adds .nav-ready to <html>; without JS the menu stays open (all
   links visible) so nothing depends on script. */
.menu-toggle { display:none; align-items:center; gap:.5rem; min-height:var(--tap); padding:0 1rem; border:var(--border-ui) solid var(--color-line-ui); border-radius:var(--radius-button); background:transparent; color:var(--color-heading); font:600 1rem/1 var(--font-sans); cursor:pointer; }
.menu-toggle-icon { position:relative; display:inline-block; width:16px; height:2px; background:currentColor; }
.menu-toggle-icon::before, .menu-toggle-icon::after { content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor; }
.menu-toggle-icon::before { top:-5px; }
.menu-toggle-icon::after { top:5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon { background:transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { top:0; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { top:0; transform:rotate(-45deg); }

@media (max-width:860px) {
  .nav-ready .menu-toggle { display:inline-flex; }
  .site-header-inner { flex-wrap:wrap; padding-block:.625rem; }
  .site-nav { width:100%; flex-direction:column; align-items:stretch; gap:0; padding:var(--space-2xs) 0 var(--space-s); }
  .nav-ready .site-nav { display:none; }
  .nav-ready .menu-toggle[aria-expanded="true"] + .site-nav { display:flex; }
  .site-nav a { min-height:var(--tap); padding:0 var(--space-2xs); font-size:1.0625rem; border-bottom:var(--border-hair) solid var(--color-line); border-radius:0; }
  .site-nav .nav-cta { margin:var(--space-s) 0 0; justify-content:center; border-radius:var(--radius-button); border:var(--border-ui) solid var(--color-line-ui); }
  .site-header { max-height:100dvh; overflow-y:auto; }
}

/* Docs: the sidebar collapses into a "Guides" disclosure.
   Matches the existing markup (and generated spec.html):
   <nav><a class="home">…</a><button class="menu-toggle">…</button><div class="guide-links">…</div></nav> */
@media (max-width:900px) {
  .docs .layout > nav { z-index:40; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 var(--space-s); padding:var(--space-2xs) var(--gutter); border-right:0; border-bottom:var(--border-hair) solid var(--color-line); }
  .nav-ready .docs .layout > nav .menu-toggle { display:inline-flex; }
  .docs .guide-links { grid-column:1 / -1; margin-top:var(--space-s); }
  .nav-ready .docs .guide-links { display:none; }
  .nav-ready .docs .menu-toggle[aria-expanded="true"] + .guide-links { display:block; max-height:calc(100dvh - 5rem); overflow-y:auto; padding-bottom:var(--space-m); }
  .docs .guide-links a { min-height:var(--tap); margin-left:0; }
}