/**
 * <MockScene /> styles.
 *
 * Free-form positioning surface. Each item in the items[] prop renders
 * inside a `.sceneItem` wrapper that's absolutely positioned via
 * inline style (`left`, `top`, `z-index`). The scene itself is a
 * transparent stage; layout is up to the caller.
 *
 * No background, no padding, no rotation. The mocks themselves carry
 * their own borders and shadows so they read as panels lifted off
 * the surrounding card.
 */

.am.scene { display: contents; }

.am .sceneFrame {
  position: relative;
  /* Width and height come from inline style on the rendered element
     so the caller decides the canvas size per scene. */
}

.am .sceneItem {
  position: absolute;
  /* `left`, `top`, and optionally `z-index` are set inline by the
     component from the item's x/y/z values. */
}

/* Widgets inside a scene drop their LaunchPad-style cobalt-900 dashboard
   chrome. WidgetMock by default frames its tile in dark cobalt to
   simulate "this widget is sitting on a LaunchPad board"; that read is
   useful in widget-mock.html (the kit context) but inside a scene the
   surrounding card already provides context, and the dark frame just
   reads as a heavy border. So inside .sceneItem the .wmFrame becomes
   white-on-white with a soft shadow, matching the SidebarMock chrome. */
.am .sceneItem .wmFrame {
  background: white;
  border: 1px solid var(--c-cobalt-100);
  padding: 12px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.1);
}