@media (max-width: 640px) {
  body.mobile-drawer-open { overflow: hidden; }
  .mobile-drawer-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: rgb(22 27 21 / 48%);
  }
  #app-view > #portal-sidebar.menu-open {
    position: fixed;
    inset: env(safe-area-inset-top, 0px) auto 0 0;
    z-index: 810;
    box-sizing: border-box;
    width: min(360px, 88vw);
    height: auto;
    max-height: none;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: 4px;
    padding-top: 12px;
    overflow: auto;
    overscroll-behavior: contain;
    background: #e9e5dc;
    box-shadow: 5px 0 24px rgb(22 27 21 / 18%);
    animation: portal-drawer-enter 180ms ease-out both;
  }
  #app-view > #portal-sidebar.menu-open > .mobile-menu-toggle { display: none; }
  #app-view > #portal-sidebar.menu-open > a { margin-bottom: 6px; }
  #app-view > #portal-sidebar.menu-open > .nav-item {
    grid-column: 1 / -1;
    min-height: 42px;
    margin-block: 0;
    padding-block: 7px;
  }
  #app-view > #portal-sidebar.menu-open > .sidebar-bottom {
    gap: 8px 10px;
    padding-top: 10px;
  }
  #portal-sidebar.menu-open .sidebar-bottom > button { margin-right: 0; }
  @keyframes portal-drawer-enter {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    #app-view > #portal-sidebar.menu-open { animation: none; }
  }
}