html.development-embedded .topbar,
html.development-embedded .mobile-nav,
html.development-embedded .desktop-header,
html.development-embedded .mobile-header-backdrop,
html.development-embedded .notification-widget,
html.development-embedded .site-footer {
  display: none !important;
}

html.development-embedded .ranch-sidebar-backdrop {
  display: none !important;
}

html.development-embedded,
html.development-embedded body {
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
}

html.development-embedded .page-shell {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html.development-embedded .main-content {
  width: 100% !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px !important;
}

html.development-embedded body.desktop-shell-active .main-content {
  padding: 24px !important;
}

html.development-embedded .main-content::before {
  display: none !important;
}

/* Standalone pasture pages reserve space for learning-site chrome with fixed insets.
   In development the outer shell owns that chrome and the scene stays in normal flow.
   Outrank the standalone gallery shell so its height:auto cannot collapse this scene. */
html.development-embedded body:is(.ranch-page, .ranch-gallery-page) .main-content,
html.development-embedded
  body.ranch-gallery-page:not(.auth-page-body)
  .main-content.ranch-community-main {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 760px !important;
  max-width: none !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  html.development-embedded .main-content {
    padding: 16px !important;
  }

  html.development-embedded body:is(.ranch-page, .ranch-gallery-page) .main-content,
  html.development-embedded
    body.ranch-gallery-page:not(.auth-page-body)
    .main-content.ranch-community-main {
    height: 640px !important;
    padding: 0 !important;
  }
}