/* live-frame: the client's live prototype in a desktop browser or a phone (client tokens only; the
   device chrome is neutral hardware, like the photography) */
.lf{ position:absolute; inset:0; overflow:clip; }
.lf-stand{ position:absolute; left:var(--vx); width:var(--vw); top:0; bottom:0; transition:left .7s var(--ease), width .7s var(--ease); }
.lf-area{ position:absolute; left:var(--fl, 50px); right:33px; top:60px; bottom:calc(33px + 40px * var(--ui, 1) + 28px); display:grid; place-items:center; }
.lf-device{ grid-area:1 / 1; opacity:0; scale:.985; pointer-events:none; transition:opacity .5s var(--ease), scale .7s cubic-bezier(0.32, 0.72, 0, 1); }
.lf-device.is-on{ opacity:1; scale:1; pointer-events:auto; }
.lf-screen{ position:relative; overflow:clip; background:#000; }
.lf-screen iframe{ position:absolute; top:0; left:0; border:0; transform-origin:0 0; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); background:#fff; }
.lf-screen iframe.is-on{ opacity:1; pointer-events:auto; }
.mini .lf-screen iframe{ pointer-events:none; }

/* the browser: fills the area, with a quiet toolbar */
.lf-browser{ width:100%; height:100%; display:flex; flex-direction:column; border-radius:14px; overflow:clip; background:#fff;
  box-shadow:0 34px 60px -34px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06); }
.lf-bar{ flex:none; height:38px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 14px; background:#ececf1; }
.lf-dots{ display:flex; gap:7px; }
.lf-dots i{ width:11px; height:11px; border-radius:99px; background:#d1d1da; }
.lf-url{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:320px; height:26px; padding:0 16px; border-radius:8px; background:#fff;
  font:500 12px/1 var(--c-body); color:#50505a; }
.lf-url svg{ width:11px; height:11px; color:#8e8e9a; }
.lf-url b{ font-weight:500; }
.lf-browser .lf-screen{ flex:1; }

/* the phone: as tall as the area, its width from the screen's ratio (set by the module as --pw) */
.lf-phone{ height:100%; width:var(--pw, 300px); }
.lf-bezel{ position:relative; height:100%; padding:12px; border-radius:calc(var(--pw, 300px) * .165); background:#0d0d0f;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.5), inset 0 0 0 1.5px #2a2a30; }
.lf-phone .lf-screen{ height:100%; border-radius:calc(var(--pw, 300px) * .13); }
.lf-island{ position:absolute; top:calc(12px + var(--pw, 300px) * .03); left:50%; width:28%; height:calc(var(--pw, 300px) * .085); translate:-50% 0; border-radius:99px; background:#000; pointer-events:none; }

@media (prefers-reduced-motion: reduce){ .lf-device{ scale:1; } }

/* flow mode: a row of live phones, the selected one large in the centre, its neighbours waiting.
   The module places each phone (--x, --s) and only shows the ones that fit whole. */
.lf--flow .lf-area{ display:block; }
.lf--flow .lf-device{ position:absolute; left:50%; top:0; height:100%; grid-area:auto;
  translate:calc(-50% + var(--x, 0px)) 0; scale:var(--s, .8); opacity:0; pointer-events:none;
  transition:translate .8s cubic-bezier(0.32, 0.72, 0, 1), scale .8s cubic-bezier(0.32, 0.72, 0, 1), opacity .5s var(--ease); }
.lf--flow .lf-device.is-far{ opacity:.25; pointer-events:auto; cursor:pointer; }
.lf--flow .lf-device.is-near{ opacity:.55; pointer-events:auto; cursor:pointer; }
.lf--flow .lf-device.is-near iframe, .lf--flow .lf-device.is-far iframe{ pointer-events:none; }
.lf--flow .lf-device.is-on{ opacity:1; z-index:1; pointer-events:auto; }
@media (hover:hover){ .lf--flow .lf-device.is-near:hover, .lf--flow .lf-device.is-far:hover{ opacity:.8; } }
@media (prefers-reduced-motion: reduce){ .lf--flow .lf-device{ transition:opacity .2s; } }

/* row mode: every phone live and whole, side by side, each labelled underneath */
.lf--row .lf-device, .lf--row .lf-device.is-on{ opacity:1; pointer-events:auto; cursor:auto; }
.lf--row .lf-device iframe{ pointer-events:auto; }
.lf-cap{ position:absolute; left:0; right:0; top:calc(100% + 14px); margin:0; text-align:center; font:600 15px/1.2 var(--c-body); color:var(--stage-fg); }