.mobile-header,.menu-overlay,.menu-close{display:none}

@media(max-width:900px){
  .mobile-header{position:sticky;top:0;z-index:30;height:4rem;padding:.65rem 1rem;display:flex;align-items:center;gap:1rem;background:#0e1115;border-bottom:1px solid var(--line);box-shadow:0 8px 24px #0005}
  .mobile-brand{display:flex;align-items:center;gap:.65rem}.mobile-brand .brand-mark{width:2.25rem;height:2.25rem}
  .menu-toggle{width:2.5rem;height:2.5rem;padding:.55rem;display:grid;align-content:center;gap:.28rem;background:transparent;border:1px solid var(--line)}
  .menu-toggle:hover{background:var(--panel2)}
  .menu-toggle span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
  body.menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu-open .menu-toggle span:nth-child(2){opacity:0}
  body.menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #vault-sidebar{position:fixed;inset:0 auto 0 0;z-index:50;width:min(310px,86vw);height:100dvh;padding:1.25rem;display:flex;flex-direction:column;align-items:stretch;gap:0;border-right:1px solid var(--line);border-bottom:0;transform:translateX(-105%);transition:transform .25s ease;box-shadow:18px 0 45px #0009}
  #vault-sidebar.menu-open{transform:translateX(0)}
  #vault-sidebar .brand{width:100%}
  .menu-close{display:grid;place-items:center;margin-left:auto;width:2.35rem;height:2.35rem;padding:0;background:transparent;color:var(--text);border:1px solid var(--line);font-size:1.5rem;font-weight:400}
  .menu-close:hover{background:var(--panel2)}
  #vault-sidebar nav{display:block;width:auto;margin-top:1.5rem;padding:0;overflow-x:hidden;overflow-y:auto}
  #vault-sidebar nav>button,#vault-sidebar .category-navigation button{width:100%;display:flex;white-space:normal}
  #vault-sidebar .nav-section-heading{display:block}
  #vault-sidebar .category-navigation{display:grid;gap:.15rem}
  #vault-sidebar .aside-footer{margin-top:auto;padding-top:1rem}
  #vault-sidebar .aside-footer button{width:100%;font-size:inherit}
  .menu-overlay{position:fixed;inset:0;z-index:40;width:100%;height:100%;padding:0;border-radius:0;background:#050607b8;backdrop-filter:blur(2px)}
  .menu-overlay:hover{background:#050607b8}
  body.menu-open .menu-overlay{display:block}
  body.menu-open{overflow:hidden}
}