.mobile-topbar{display:none;}

#app-sidebar:focus{outline:none;}

@media(max-width:768px){
  .mobile-topbar{display:flex;align-items:center;gap:10px;position:fixed;top:0;left:0;right:0;height:52px;background:var(--panel);z-index:1100;padding:0 0.75rem;}
  .mnav-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;padding:0;color:var(--side-text);cursor:pointer;}
  .mnav-btn svg{width:20px;height:20px;}
  #mnav-toggle:focus-visible{outline:2px solid var(--side-text);outline-offset:2px;}
  #mnav-toggle[data-focus-quiet]:focus-visible{outline:none;}
  .mtb-wordmark{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:0.08em;font-variant:small-caps;color:var(--side-text);}
  .mtb-wordmark span{color:var(--red);}

  .app .sidebar{display:flex;position:fixed;top:0;left:0;height:100vh;height:100dvh;width:min(280px,82vw);transform:translateX(-100%);visibility:hidden;transition:transform 0.25s ease,visibility 0s linear 0.25s;z-index:1300;overflow-y:auto;}
  html.mnav-open .app .sidebar{transform:none;visibility:visible;transition-delay:0s;}

  .mnav-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:1200;opacity:0;pointer-events:none;transition:opacity 0.25s ease;}
  html.mnav-open .mnav-backdrop{opacity:1;pointer-events:auto;}

  .app .main{padding-top:calc(52px + 1rem);}
  html.mnav-open,html.mnav-open body{overflow:hidden;}
}
@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .app .sidebar,.mnav-backdrop{transition:none;}
}