/* URL-scoped demo presentation only. Engineering mode keeps the full information density. */
body.demo-mode .story-shell {
  justify-content: flex-start;
}

body.demo-mode .detail-card {
  display: none;
}

body.demo-mode .story-card {
  max-height: calc(100vh - 210px);
  overflow: auto;
  scrollbar-width: thin;
}

/* Explore already communicates the interaction affordance in demo mode. Removing the
   secondary hint keeps the center camera clean. */
body.demo-mode .interaction-hint {
  display: none;
}

/* Below a 1000px-tall desktop, keep the demo story above the shared raised Explore lane.
   demo.css loads after layout-fixes.css, so this must preserve—not undo—the shared limit. */
@media (max-height: 999px) and (min-width: 901px) {
  body.demo-mode .story-shell {
    top: 92px;
  }

  body.demo-mode .story-card {
    padding: 20px 22px;
    max-height: calc(100vh - 240px);
  }

  body.demo-mode .story-copy {
    line-height: 1.5;
  }

  body.demo-mode .stats {
    margin-top: 14px;
  }
}

/* demo.css loads after the shared responsive sheet. Preserve the mobile story limit
   exactly so demo mode cannot erode the deliberate story-to-docked-HUD safety gap. */
@media (max-width: 900px) {
  body.demo-mode .story-card {
    max-height: calc(100vh - 212px);
  }
}