.rote-planet-zoom {
  display: block;
  overflow: hidden;
}

.rote-zoom-stage {
  position: absolute;
  inset: 0;
  border-right: 0;
}

/* Mission detail is deliberately a floating card over the enlarged planet.
   The planet remains the primary workspace instead of becoming a left column
   beside a permanent mission rail. */
.rote-zoom-inspector {
  position: absolute;
  top: clamp(78px, 10vh, 112px);
  right: clamp(18px, 3vw, 42px);
  bottom: auto;
  width: clamp(380px, 36vw, 540px);
  max-width: calc(100% - 36px);
  max-height: min(74vh, 780px);
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(97, 217, 238, .3);
  border-radius: 18px;
  box-shadow:
    0 26px 72px rgba(0, 0, 0, .66),
    0 0 0 1px rgba(142, 231, 244, .05) inset,
    0 0 44px rgba(51, 179, 211, .08);
  background: linear-gradient(180deg, rgba(7, 18, 33, .97), rgba(5, 12, 24, .985) 70%);
  backdrop-filter: blur(16px) saturate(1.08);
}

.rote-zoom-inspector::before {
  content: "";
  position: sticky;
  top: -14px;
  z-index: 30;
  display: block;
  height: 3px;
  margin: -14px -14px 10px;
  background: linear-gradient(90deg, transparent, rgba(104, 225, 241, .72), transparent);
  pointer-events: none;
}

.rote-zoom-topbar {
  right: 18px;
}

.rote-zoom-title {
  max-width: min(760px, 68%);
}

@media (max-width: 1080px) {
  .rote-planet-zoom {
    display: block;
    overflow: hidden;
  }

  .rote-zoom-stage {
    position: absolute;
    inset: 0;
    min-height: 0;
    border-bottom: 0;
  }

  /* Tablet becomes a floating bottom sheet rather than a second page row. */
  .rote-zoom-inspector {
    position: absolute;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid rgba(97, 217, 238, .3);
    border-radius: 18px;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .62);
  }

  .rote-zoom-topbar {
    right: 12px;
  }

  .rote-zoom-title {
    max-width: min(680px, 72%);
  }
}

@media (max-width: 560px) {
  .rote-zoom-inspector {
    right: 7px;
    bottom: 7px;
    left: 7px;
    max-height: 54vh;
    border-radius: 15px;
  }

  .rote-zoom-topbar {
    right: 7px;
    left: 7px;
  }

  .rote-zoom-title {
    max-width: calc(100% - 108px);
  }
}