/* V795it — coordinated panel motion for Admin, Exhibitor and Public.
   Portrait opening/closing uses one flex-size movement with no competing shell fade. */
:root{
  --expo-planit-panel-motion-duration:300ms;
  --expo-planit-tab-reveal-duration:180ms;
  --expo-planit-panel-motion-ease:cubic-bezier(.22,.72,.20,1);
}

/* Tab changes remain visible but restrained: one short fade/vertical settle, no scale. */
.workspaceTabsShell > .workspacePanel.workspacePanelActive,
body.publicDirectoryMode #publicDirectoryShell > #keyCard.publicDirectoryPanelActive,
body.publicDirectoryMode #publicDirectoryShell > #standsCard.publicDirectoryPanelActive,
body.publicDirectoryMode #publicDirectoryShell > #websiteLinksCard.publicDirectoryPanelActive,
body.publicDirectoryMode #publicDirectoryShell > #visitorListCard.publicDirectoryPanelActive,
body.touchscreenMode #standsCard.touchscreenPanelActive,
body.touchscreenMode #keyCard.touchscreenPanelActive{
  animation:expoPlanitTabRevealV795it var(--expo-planit-tab-reveal-duration) ease-out both;
}

@keyframes expoPlanitTabRevealV795it{
  from{opacity:.55;transform:translate3d(0,6px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}

/* Portrait phone: Safari can step grid-track animation. Use directly animated flex sizes
   so the plan contracts and the tab shell rises as one continuous movement. */
@media (max-width:720px) and (orientation:portrait){
  body.responsiveWorkspaceV795it:not(.touchscreenMode) main{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    gap:8px!important;
    transition:
      gap var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease),
      height var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease),
      min-height var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease),
      max-height var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease)!important;
  }

  body.responsiveWorkspaceV795it:not(.touchscreenMode) #planCard{
    flex:0 0 calc(50% - 4px)!important;
    width:100%!important;
    height:calc(50% - 4px)!important;
    min-height:0!important;
    max-height:none!important;
    transform:translate3d(0,0,0)!important;
    transition:
      flex-basis var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease),
      height var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease)!important;
    will-change:flex-basis,height;
  }

  body.responsiveWorkspaceV795it:not(.touchscreenMode) #adminWorkspaceShell,
  body.responsiveWorkspaceV795it:not(.touchscreenMode) #viewerWorkspaceShell,
  body.responsiveWorkspaceV795it.publicDirectoryMode:not(.touchscreenMode) #publicDirectoryShell{
    flex:0 0 calc(50% - 4px)!important;
    width:100%!important;
    height:calc(50% - 4px)!important;
    min-height:0!important;
    max-height:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transform-origin:50% 100%!important;
    overflow:hidden!important;
    transition:
      flex-basis var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease),
      height var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease),
      transform var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease),
      visibility 0s linear 0s!important;
    will-change:flex-basis,height,transform;
  }

  body.responsiveWorkspaceV795it.responsiveWorkspacePanelCollapsed:not(.touchscreenMode) main{
    gap:0!important;
  }
  body.responsiveWorkspaceV795it.responsiveWorkspacePanelCollapsed:not(.touchscreenMode) #planCard{
    flex-basis:100%!important;
    height:100%!important;
  }
  body.responsiveWorkspaceV795it.responsiveWorkspacePanelCollapsed:not(.touchscreenMode) #adminWorkspaceShell,
  body.responsiveWorkspaceV795it.responsiveWorkspacePanelCollapsed:not(.touchscreenMode) #viewerWorkspaceShell,
  body.responsiveWorkspaceV795it.responsiveWorkspacePanelCollapsed.publicDirectoryMode:not(.touchscreenMode) #publicDirectoryShell{
    flex-basis:0!important;
    height:0!important;
    min-height:0!important;
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,100%,0)!important;
    transition-delay:0ms,0ms,0ms,var(--expo-planit-panel-motion-duration)!important;
  }

  /* Full-height tab mode is immediate and independent of the split movement. */
  body.responsiveWorkspaceV795it.expoPlanitTabPanelExpandedV795it:not(.touchscreenMode) #adminWorkspaceShell,
  body.responsiveWorkspaceV795it.expoPlanitTabPanelExpandedV795it:not(.touchscreenMode) #viewerWorkspaceShell,
  body.responsiveWorkspaceV795it.expoPlanitTabPanelExpandedV795it.publicDirectoryMode:not(.touchscreenMode) #publicDirectoryShell{
    flex-basis:auto!important;
    transition:none!important;
    will-change:auto!important;
  }
}

/* Landscape/tablet retains the established split geometry, but removes the competing
   opacity timing that caused a closing blink on WebKit. */
@media (min-width:721px) and (max-width:980px),
       (max-width:980px) and (orientation:landscape),
       (min-width:981px) and (max-width:1180px) and (pointer:coarse){
  body.responsiveWorkspaceV795it:not(.touchscreenMode) main{
    transition:
      grid-template-columns var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease),
      gap var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease)!important;
  }
  body.responsiveWorkspaceV795it:not(.touchscreenMode) #adminWorkspaceShell,
  body.responsiveWorkspaceV795it:not(.touchscreenMode) #viewerWorkspaceShell,
  body.responsiveWorkspaceV795it.publicDirectoryMode:not(.touchscreenMode) #publicDirectoryShell{
    opacity:1!important;
    transition:transform var(--expo-planit-panel-motion-duration) var(--expo-planit-panel-motion-ease), visibility 0s linear 0s!important;
  }
  body.responsiveWorkspaceV795it.responsiveWorkspacePanelCollapsed:not(.touchscreenMode) #adminWorkspaceShell,
  body.responsiveWorkspaceV795it.responsiveWorkspacePanelCollapsed:not(.touchscreenMode) #viewerWorkspaceShell,
  body.responsiveWorkspaceV795it.responsiveWorkspacePanelCollapsed.publicDirectoryMode:not(.touchscreenMode) #publicDirectoryShell{
    opacity:1!important;
    transition-delay:0ms,var(--expo-planit-panel-motion-duration)!important;
  }
}

/* Public/Exhibitor information overlay remains lightweight and GPU-friendly. */
.publicInfoOverlay{
  opacity:0;
  transition:opacity 210ms ease-out!important;
}
.publicInfoOverlay .publicInfoDialog{
  opacity:.45;
  transform:translate3d(0,16px,0);
  transform-origin:50% 100%;
  transition:
    transform 240ms var(--expo-planit-panel-motion-ease),
    opacity 190ms ease-out!important;
  will-change:transform,opacity;
}
.publicInfoOverlay.is-open{opacity:1;}
.publicInfoOverlay.is-open .publicInfoDialog{
  opacity:1;
  transform:translate3d(0,0,0);
}
.publicInfoOverlay.is-closing{pointer-events:none!important;}

@media (prefers-reduced-motion:reduce){
  .workspaceTabsShell > .workspacePanel.workspacePanelActive,
  body.publicDirectoryMode #publicDirectoryShell > .publicDirectoryPanelActive,
  body.touchscreenMode #standsCard.touchscreenPanelActive,
  body.touchscreenMode #keyCard.touchscreenPanelActive{
    animation:none!important;
  }
  body.responsiveWorkspaceV795it:not(.touchscreenMode) main,
  body.responsiveWorkspaceV795it:not(.touchscreenMode) #planCard,
  body.responsiveWorkspaceV795it:not(.touchscreenMode) #adminWorkspaceShell,
  body.responsiveWorkspaceV795it:not(.touchscreenMode) #viewerWorkspaceShell,
  body.responsiveWorkspaceV795it.publicDirectoryMode:not(.touchscreenMode) #publicDirectoryShell,
  .publicInfoOverlay,
  .publicInfoOverlay .publicInfoDialog{
    transition:none!important;
    animation:none!important;
  }
}
