/* Shared dialog shell: keep rounded edges, titles and actions outside the scroller.
   View-specific styles still own widths, colors, spacing and artwork. */
html[data-theme] #dialog.growth-dialog {
  --dialog-scroll-thumb: #c7c7c7;
  height: fit-content;
  min-height: 0;
  overflow: hidden;
}

html[data-theme="dark"] #dialog.growth-dialog {
  --dialog-scroll-thumb: #555;
}

html[data-theme] #dialog.growth-dialog[open] {
  display: flex;
  flex-direction: column;
}

html[data-theme] #dialog.growth-dialog > #dialogContent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
}

html[data-theme] #dialog.growth-dialog > #dialogContent > :is(
  .dialog-head, .dialog-actions, .xc-library-footer,
  .pc-return-top, .pc-return-footer,
  .account-footer, .account-ledger-top, .account-ledger-paging
) {
  position: relative;
  top: auto;
  bottom: auto;
  flex: 0 0 auto;
}

html[data-theme] #dialog.growth-dialog > #dialogContent > :is(
  .dialog-body, .account-body, .account-ledger-body,
  .annual-body, .pc-return-body, .pc-unopened
),
html[data-theme] #dialog.growth-dialog .travel-information {
  flex: 0 1 auto;
  min-height: 0;
  margin: 4px 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dialog-scroll-thumb) transparent;
  scrollbar-gutter: stable;
  scroll-padding-block: 20px;
}

/* The scenic travel header and its actions use the same three-part layout. */
html[data-theme] #dialog.growth-dialog .travel-experience {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

html[data-theme] #dialog.growth-dialog .travel-visual {
  flex: 0 0 auto;
  max-height: 42dvh;
}

html[data-theme] #dialog.growth-dialog .travel-information {
  padding-bottom: 20px;
}

html[data-theme] #dialog.growth-dialog .travel-experience-actions {
  flex: 0 0 auto;
  margin: 0 28px;
  padding: 22px 0 24px;
}

@media (max-width: 600px) {
  html[data-theme] #dialog.growth-dialog .travel-experience-actions {
    margin-inline: 20px;
    padding-block: 18px 20px;
  }
}