/* Layout for layers drawn by design-runtime.js. Positions come from inline custom values set by the
   runtime; this file only decides containers and which device is shown.
   The breakpoint below must equal MOBILE_MAX_WIDTH in app/services/design_constants.py. */

/* Background: --dbg-d-* (PC) and --dbg-m-* (iPhone) come from /design.css and the runtime. */
:root {
  --design-bg-color: var(--dbg-d-color, #ffffff);
  --design-bg-image: var(--dbg-d-image, none);
  --design-bg-opacity: var(--dbg-d-opacity, 1);
}
body.participant-body { background: var(--design-bg-color); }
body.participant-body::before { background-image: var(--design-bg-image); opacity: var(--design-bg-opacity); }

.design-plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-x: clip;
  pointer-events: none;
}
.design-plane-back { z-index: 1; }
.design-plane-front { z-index: 4; }

.dl {
  position: absolute;
  display: block;
  box-sizing: border-box;
  max-width: none;
  height: auto;
  margin: 0;
  pointer-events: none;
  user-select: none;
}
.dl-fixed { position: fixed; }
.illustration-slot > .dl { position: absolute; }
.dl-text { white-space: pre-wrap; overflow-wrap: break-word; paint-order: stroke fill; }
.dl[data-hidden] { visibility: hidden; }
.dl-placeholder { aspect-ratio: 1; }

/* Exactly one device is visible at any width: PC by default, iPhone at or below the breakpoint. */
.dl[data-device="mobile"] { display: none; }
@media (max-width: 720px) {
  :root {
    --design-bg-color: var(--dbg-m-color, #ffffff);
    --design-bg-image: var(--dbg-m-image, none);
    --design-bg-opacity: var(--dbg-m-opacity, 1);
  }
  .dl[data-device="desktop"] { display: none; }
  .dl[data-device="mobile"] { display: block; }
}