/* The heading stays visible; only long foreground content scrolls. */
dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100dvh - 45px);
  overscroll-behavior: contain;
}
.dialog-heading {
  flex: 0 0 auto;
}
.dialog-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dialog-body:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: -1px;
}
.sidebar,
.sidebar nav,
.select-menu {
  overscroll-behavior: contain;
}
/* The fixed body becomes the sticky scroll container. Compensate its viewport
   offset so desktop navigation and the existing branding preview do not jump. */
@media (min-width: 801px) {
  :root[data-overlay-scroll-locked="true"] .sidebar {
    top: var(--overlay-scroll-offset, 0px);
  }
}
:root[data-overlay-scroll-locked="true"] .branding-preview-pane {
  top: calc(24px + var(--overlay-scroll-offset, 0px));
}