/* /assets/styles-panels-portrait.css
   Portrait-only: panels are detached from the scene and become normal page content.
*/

@media (orientation: portrait) and (max-width: 980px) {
  main.page {
    display: flex;
    flex-direction: column;
  }

  .topAtmos {
    order: -2;
  }

  /* Detached panels become regular flow content (outside the scene and topAtmos) */
  .panelHost.isDetached {
    position: static;
    inset: auto;
    z-index: auto;

    width: min(var(--sceneMaxW), 92vw);
    margin: 14px auto 18px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    order: -1;
  }

  .panelHost.isDetached.isOpen {
    opacity: 1;
    pointer-events: auto;
  }

  /* Stack panes, let them size naturally (no squishing) */
  .panelHost.isDetached .paneGrid {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible !important;
  }

  /* Ensure panes expand with content */
  .panelHost.isDetached .pane {
    min-height: auto;
    overflow: visible;
    transform: translateY(10px) scale(0.992);
  }

  .panelHost.isDetached.isOpen .pane {
    transform: translateY(0) scale(1);
  }

  /* Absolutely no inner scrolling in portrait detached mode */
  .panelHost.isDetached .paneBody {
    overflow: visible !important;
    min-height: auto;
  }

  /* Morph shell is an in-scene overlay; hide in portrait detached mode */
  .morphShell {
    display: none;
  }
}