/* Desktop/tablet navigation drawer. Mobile keeps the dedicated bottom navigation. */
#desktopNavToggle,#desktopNavBackdrop{display:none}

@media(min-width:761px){
  .app{display:block!important;min-height:100vh}
  .main{padding-left:26px!important;padding-right:26px!important;width:100%;max-width:none}

  .side{
    display:block!important;
    position:fixed!important;
    z-index:2147482600;
    top:0;left:0;bottom:0;
    width:260px;
    height:100dvh!important;
    padding:24px 16px!important;
    transform:translateX(-104%);
    transition:transform .22s ease;
    box-shadow:18px 0 48px rgba(8,22,37,.18);
    overflow:auto;
  }
  .side.nav-drawer-open{transform:translateX(0)}
  .side .brand{font-size:23px!important;margin:2px 10px 28px!important}
  .side .brand:after{content:none!important}
  .side .nav button{font-size:14px!important;text-align:left!important}
  .side .note{display:block!important;position:static!important;margin:28px 2px 4px}

  #desktopNavToggle{
    display:grid;
    position:fixed;
    z-index:2147482700;
    top:18px;
    left:20px;
    width:46px;
    height:42px;
    place-content:center;
    gap:4px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  #desktopNavToggle span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px}
  #desktopNavToggle:hover{background:#f5f8fb}
  #desktopNavToggle[aria-expanded="true"]{background:#10263d;border-color:#10263d}
  #desktopNavToggle[aria-expanded="true"] span{background:#fff}

  #desktopNavBackdrop{
    position:fixed;
    display:block;
    z-index:2147482550;
    inset:0;
    border:0;
    background:rgba(8,22,37,.45);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s,visibility .2s;
  }
  #desktopNavBackdrop.open{opacity:1;visibility:visible;pointer-events:auto}

  /* Leave room for the nav burger and the existing portfolio-tools burger. */
  .main{padding-top:78px!important}
  .global-toolbar{margin-left:54px;margin-right:54px}
  .top{padding-left:54px;padding-right:54px}

  body.nav-drawer-lock{overflow:hidden}
}

@media(min-width:761px) and (max-width:900px){
  .main{padding-left:18px!important;padding-right:18px!important}
  .global-toolbar,.top{margin-left:0;margin-right:0;padding-left:50px;padding-right:50px}
}