/* The menu and page use separate viewport-sized scroll areas. */
.app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.app .sidebar {
  position: relative;
  top: auto;
  align-self: stretch;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #898993 #29292e;
}

.app .main {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #a9a9b2 #f5f5f7;
}

.app .main::-webkit-scrollbar { width: 12px; }
.app .main::-webkit-scrollbar-track { background: #f5f5f7; }
.app .main::-webkit-scrollbar-thumb {
  border: 3px solid #f5f5f7;
  border-radius: 999px;
  background: #a9a9b2;
}
.app .main::-webkit-scrollbar-thumb:hover { background: #858590; }

.app .sidebar::-webkit-scrollbar { width: 12px; }
.app .sidebar::-webkit-scrollbar-track { background: #29292e; }
.app .sidebar::-webkit-scrollbar-thumb {
  border: 3px solid #29292e;
  border-radius: 999px;
  background: #898993;
}
.app .sidebar::-webkit-scrollbar-thumb:hover { background: #b4b4bd; }

@media (max-width: 900px) {
  .app { grid-template-rows: auto minmax(0, 1fr); }
  .app .sidebar {
    position: relative;
    height: min(48dvh, 420px);
    min-height: 260px;
    max-height: 420px;
  }
  .app .main { height: auto; }
}

@media (max-width: 620px) {
  .app .sidebar { height: min(42dvh, 350px); min-height: 230px; }
}

@media print {
  .app, .app .sidebar, .app .main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
  }
}