/* The application viewport stays still; only the central workspace scrolls. */
html:has(body > main.main) {
  height: 100%;
  overflow: hidden;
}
body:has(> main.main) {
  height: 100dvh;
  overflow: hidden;
}
body > main.main {
  box-sizing: border-box;
  height: 100dvh;
  min-height: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  
  
  scrollbar-gutter: stable;
}
/* Settings keeps its heading and section navigation outside the content scroll. */
body > main.main.settings-shell {
  overflow: hidden;
  scrollbar-gutter: auto;
}
.settings-shell .settings-window {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.settings-shell .settings-window-header { flex: 0 0 65px; }
.settings-shell .settings-window-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.settings-shell .account-settings-content,
.settings-shell .account-sections {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  
  
}
.settings-shell .account-settings-content { scrollbar-gutter: stable; }
@media (max-width: 720px) {
  .settings-shell .settings-window-header { flex-basis: 56px; }
  .settings-shell .settings-window-body { display: flex; flex-direction: column; }
  .settings-shell .account-sections { flex: 0 0 auto; }
  .settings-shell .account-settings-content { flex: 1 1 0; }
  body:has(> main.main) {
    display: flex;
    flex-direction: column;
  }
  body:has(> main.main) > .sidebar {
    flex: 0 0 auto;
  }
  body > main.main {
    flex: 1 1 0;
    height: 0;
    width: 100%;
    margin: 0;
  }
}