.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-shell:not(.route-ready) .app-footer {
  visibility: hidden;
  pointer-events: none;
}

.app-shell #app-route-mount {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--app-nav-height) - var(--app-footer-min-height));
}

.app-shell #app-route-mount[data-route-height-locked="1"] {
  overflow: hidden;
}

.app-shell .route-view[hidden] {
  display: none !important;
}

.app-shell .route-view.is-entering {
  animation: route-enter 120ms ease;
}

@keyframes route-enter {
  from {
    opacity: 0.96;
  }
  to {
    opacity: 1;
  }
}