/* Long, below-the-fold home sections are painted only when they approach the viewport.
   This changes presentation cost only; calculation/report data is untouched. */
@supports (content-visibility: auto) {
  #atlasMain > .atlas-person-center,
  #atlasMain > .module-group-primary,
  #atlasMain > #advancedAstrologyHome,
  #atlasMain > .atlas-ai-home-entry,
  #atlasMain > #experienceModePanel,
  #atlasMain > .atlas-live-sky-entry,
  #atlasMain > #professionalHomeGateway,
  #atlasMain > #commerceCenter {
    content-visibility: auto;
    contain-intrinsic-size: auto 680px;
  }

  #todayTransitList.is-expanded > .atlas-today-transit-item,
  #weeklyTransitDayPanel.is-open .weekly-event {
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
  }
}

/* Expanded transit areas own their scroll. The document must not scroll-chain behind them. */
#todayTransitList.is-expanded,
#weeklyTransitDayPanel.is-open {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overflow-anchor: none;
  contain: layout paint style;
}

#todayTransitList.is-expanded {
  max-height: min(48vh, 420px);
  padding-right: 4px;
}

#weeklyTransitDayPanel.is-open {
  max-height: min(62vh, 560px);
  padding-right: 4px;
}

#todayTransitList.is-expanded:focus-visible,
#weeklyTransitDayPanel.is-open:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Keep the home layout stable while async text/status values arrive. */
#todayOverview,
#weeklyTransitCard,
.atlas-person-center,
.module-group-primary {
  overflow-anchor: none;
}

/* Isolate expensive list repaints while preserving the existing visual design. */
#todayTransitList,
#weeklyTransitDayPanel,
.weekly-event-list {
  contain: layout paint style;
}

@media (max-width: 900px) {
  #todayTransitList.is-expanded {
    max-height: min(46vh, 390px);
  }
  #weeklyTransitDayPanel.is-open {
    max-height: min(56vh, 500px);
  }
}

@media (max-width: 600px) {
  #todayTransitList.is-expanded {
    max-height: min(44vh, 360px);
  }
  #weeklyTransitDayPanel.is-open {
    max-height: min(52vh, 460px);
  }
}