/* Compact mobile nav — overlay menu on phones, desktop unchanged */
@media (max-width: 720px){
  :root{ --nav-h: 56px; }
  .nav{ padding: 8px 14px; height: var(--nav-h); }
  /* display handled in styles.css */
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    max-height: calc(100vh - var(--nav-h) - env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(0,0,0,0.20);
    padding: 12px; gap: 8px; flex-direction: column;
    z-index: 999; transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .menu a{ display:block; padding: 14px 12px; border-radius: 10px; font-weight:600; }
  .nav .nav-toggle{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:10px; font-weight:700; cursor:pointer; }
  .nav .nav-toggle:active{ transform: translateY(1px); }
  :root.is-menu-open body{ overflow: hidden; }
  :root.is-menu-open .menu{ display:flex !important; transform:none; opacity:1; pointer-events:auto; }
  .menu-backdrop{ display:none; }
  :root.is-menu-open .menu-backdrop{ display:block; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; background:rgba(0,0,0,0.35); z-index:998; }
}