/* Compatibility for the shared horizontal site header. The Experience's
   year-by-year renderer keeps its existing canvas and interaction geometry. */
body.immersive-home {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

body.immersive-home .fh-experience-rail {
  position: absolute;
  z-index: 20;
  top: var(--fh-header-height);
  left: 0;
  width: 188px;
  height: max(560px, calc(100dvh - var(--fh-header-height)));
  padding: 20px 16px;
  overflow-y: auto;
  border-right: 1px solid rgba(198, 154, 72, .28);
  background: linear-gradient(180deg, #061522, #0a2033);
  color: #f5ecd8;
}

body.immersive-home .fh-experience-rail .sidebar-context-wrap {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.immersive-home > main {
  height: max(560px, calc(100dvh - var(--fh-header-height)));
  min-height: 560px;
  margin-left: 188px;
  padding-top: 0;
}

body.immersive-home.year-by-year .map-frame {
  height: 100% !important;
  min-height: 100% !important;
}

body.immersive-home:not(.year-by-year) .map-frame {
  height: 100%;
  min-height: 0;
}

@media (max-width: 1050px) {
  body.immersive-home .fh-experience-rail { display: none; }
  body.immersive-home > main { margin-left: 0; }
}

@media (max-width: 760px) {
  body.immersive-home > main { padding-top: 0; }
  body.immersive-home:not(.year-by-year) .filter-wrap { top: 0; }
  body.immersive-home:not(.year-by-year) .map-section-header { top: 50px !important; }
  body.immersive-home:not(.year-by-year) .map-section { padding-top: 98px !important; }
  body.immersive-home:not(.year-by-year) .map-frame { height: 100%; min-height: 0; }
}