/* ============================================================
   LP LOCAL DIRECTORY — device-frames.css
   Hand-built CSS device shells for investor demo.
   No external dependencies. No images.

   ver 20260523-1843

   Four configs:
     iPhone 16 Pro  portrait  402 × 874
     iPhone 16 Pro  landscape 874 × 402
     iPad Pro 11    portrait  834 × 1210
     iPad Pro 11    landscape 1210 × 834

   Architecture:
     #demo-stage        dark backdrop, centres the frame
     #device-switcher   four-button config selector above frame
     #device-frame      outer shell — bezel, buttons, notch/pill
     #device-screen     exact logical px viewport — app lives here

   All app elements use position: absolute, scoped to #device-screen.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   STAGE — full browser viewport, dark, centres everything
───────────────────────────────────────────────────────────── */
#demo-stage {
  background:      #385988;
  min-height:      100vh;
  width:           -webkit-fill-available;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  padding:         16px 16px 32px;
  box-sizing:      border-box;
  overflow-x:      hidden;
}

/* ─────────────────────────────────────────────────────────────
   DEVICE SWITCHER — compact pill buttons above the frame
───────────────────────────────────────────────────────────── */
#device-switcher {
  display:         flex;
  flex-direction:  row;
  gap:             6px;
  margin-bottom:   12px;
  flex-wrap:       wrap;
  justify-content: center;
}

#device-switcher button {
  background:      #1e1e1e;
  color:           #888;
  border:          1px solid #2e2e2e;
  border-radius:   20px;
  padding:         4px 11px;
  font-size:       11px;
  font-family:     -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  letter-spacing:  0.03em;
  cursor:          pointer;
  transition:      background 0.15s, color 0.15s, border-color 0.15s;
  white-space:     nowrap;
}

#device-switcher button:hover {
  background:      #2a2a2a;
  color:           #ccc;
  border-color:    #444;
}

#device-switcher button.active {
  background:      #f0d800;
  color:           #111;
  border-color:    #f0d800;
  font-weight:     600;
}

/* ─────────────────────────────────────────────────────────────
   DEVICE FRAME — outer shell
   Dimensions set via --frame-w / --frame-h CSS custom props.
   Bezel adds padding around the screen on all sides.
   Phone portrait/landscape: pill Dynamic Island
   iPad: smaller pill
───────────────────────────────────────────────────────────── */
#device-frame {
  position:        relative;
  width:           var(--frame-w, 430px);
  height:          var(--frame-h, 932px);
  background:      linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 60%, #222 100%);
  border-radius:   var(--frame-radius, 54px);
  box-shadow:
    0 0 0 1px #3a3a3a,
    0 0 0 2px #111,
    0 24px 80px rgba(0,0,0,0.7),
    0 8px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.07);
  box-sizing:      border-box;
  flex-shrink:     0;
}

/* Screen area — exact logical px, clips app content */
#device-screen {
  position:        absolute;
  top:             var(--screen-top, 29px);
  left:            var(--screen-left, 14px);
  width:           var(--screen-w, 402px);
  height:          var(--screen-h, 874px);
  background:      #fffef0;
  border-radius:   var(--screen-radius, 44px);
  overflow:        hidden;
}

/* Dynamic Island removed — status bar not implemented.
   !important ensures this wins even if a stale cached version
   of this file is served alongside a newer index.php. */
#device-frame::before,
#device-frame::after { display: none !important; }

/* Belt-and-suspenders for real devices where frame has display:contents */
body.real-device #device-frame::before,
body.real-device #device-frame::after { display: none !important; }

/* Side buttons — power (right) and volume (left) via pseudo on inner el */
/* Rendered as inset box-shadows on two thin absolute divs */
#device-frame .btn-right {
  position:        absolute;
  right:           calc(-1px - var(--btn-thickness));
  top:             var(--btn-right-top);
  width:           var(--btn-thickness);
  height:          var(--btn-right-h);
  background:      #2e2e2e;
  border-radius:   0 3px 3px 0;
  box-shadow:      inset -1px 0 0 #444, inset 0 1px 0 #3a3a3a;
}

#device-frame .btn-left-top,
#device-frame .btn-left-mid,
#device-frame .btn-left-bot {
  position:        absolute;
  left:            calc(-1px - var(--btn-thickness));
  width:           var(--btn-thickness);
  background:      #2e2e2e;
  border-radius:   3px 0 0 3px;
  box-shadow:      inset 1px 0 0 #444, inset 0 1px 0 #3a3a3a;
}

#device-frame .btn-left-top {
  top:             var(--btn-left-top-y);
  height:          var(--btn-left-top-h);
}
#device-frame .btn-left-mid {
  top:             var(--btn-left-mid-y);
  height:          var(--btn-left-mid-h);
}
#device-frame .btn-left-bot {
  top:             var(--btn-left-bot-y);
  height:          var(--btn-left-bot-h);
}

/* Home indicator bar — iPad only (iPhones use swipe affordance in app) */
#device-frame .home-indicator {
  position:        absolute;
  bottom:          var(--home-bottom);
  left:            50%;
  transform:       translateX(-50%);
  width:           var(--home-w, 0);
  height:          4px;
  background:      rgba(255,255,255,0.25);
  border-radius:   2px;
  display:         var(--home-display, none);
}

/* ─────────────────────────────────────────────────────────────
   CONFIG VARIABLES
   Set on #device-frame by device-frame.js via switchDevice(id).
   Defined here as defaults matching iphone-portrait.
───────────────────────────────────────────────────────────── */

/* ── iPhone 16 Pro · Portrait  402 × 874 ── */
#device-frame.iphone-portrait {
  --frame-w:          430px;
  --frame-h:          932px;
  --frame-radius:     54px;
  --screen-w:         402px;
  --screen-h:         874px;
  --screen-top:       29px;
  --screen-left:      14px;
  --screen-radius:    44px;
  /* Dynamic Island */
  --pill-top:         12px;
  --pill-w:           120px;
  --pill-h:           36px;
  --pill-display:     block;
  /* Power button — right side */
  --btn-thickness:    4px;
  --btn-right-top:    180px;
  --btn-right-h:      80px;
  /* Volume + silent — left side */
  --btn-left-top-y:   130px;   /* silent switch */
  --btn-left-top-h:   34px;
  --btn-left-mid-y:   190px;   /* vol up */
  --btn-left-mid-h:   60px;
  --btn-left-bot-y:   268px;   /* vol down */
  --btn-left-bot-h:   60px;
  /* No home indicator on iPhone */
  --home-display:     none;
}

/* ── iPhone 16 Pro · Landscape  874 × 402 ── */
#device-frame.iphone-landscape {
  --frame-w:          932px;
  --frame-h:          430px;
  --frame-radius:     54px;
  --screen-w:         874px;
  --screen-h:         402px;
  --screen-top:       14px;
  --screen-left:      29px;
  --screen-radius:    44px;
  /* Dynamic Island — left side in landscape */
  --pill-display:     none;   /* handled by ::after below */
  /* Power button — now on bottom edge (was right) */
  --btn-thickness:    4px;
  --btn-right-top:    180px;
  --btn-right-h:      80px;
  /* Volume — top edge */
  --btn-left-top-y:   130px;
  --btn-left-top-h:   34px;
  --btn-left-mid-y:   190px;
  --btn-left-mid-h:   60px;
  --btn-left-bot-y:   268px;
  --btn-left-bot-h:   60px;
  --home-display:     none;
}

/* Landscape pill removed */

/* ── iPad Pro 11 · Portrait  834 × 1210 ── */
#device-frame.ipad-portrait {
  --frame-w:          874px;
  --frame-h:          1274px;
  --frame-radius:     24px;
  --screen-w:         834px;
  --screen-h:         1210px;
  --screen-top:       32px;
  --screen-left:      20px;
  --screen-radius:    18px;
  /* Dynamic Island */
  --pill-top:         10px;
  --pill-w:           100px;
  --pill-h:           30px;
  --pill-display:     block;
  /* Power button — top edge (right side in portrait) */
  --btn-thickness:    4px;
  --btn-right-top:    260px;
  --btn-right-h:      60px;
  /* Volume — right side */
  --btn-left-top-y:   340px;
  --btn-left-top-h:   50px;
  --btn-left-mid-y:   404px;
  --btn-left-mid-h:   50px;
  --btn-left-bot-y:   0;
  --btn-left-bot-h:   0;
  /* Home indicator */
  --home-display:     block;
  --home-w:           120px;
  --home-bottom:      8px;
}

/* ── iPad Pro 11 · Landscape  1210 × 834 ── */
#device-frame.ipad-landscape {
  --frame-w:          1274px;
  --frame-h:          874px;
  --frame-radius:     24px;
  --screen-w:         1210px;
  --screen-h:         834px;
  --screen-top:       20px;
  --screen-left:      32px;
  --screen-radius:    18px;
  /* Dynamic Island — top, offset left in landscape */
  --pill-display:     none;
  /* Power — top edge */
  --btn-thickness:    4px;
  --btn-right-top:    180px;
  --btn-right-h:      60px;
  /* Volume */
  --btn-left-top-y:   130px;
  --btn-left-top-h:   50px;
  --btn-left-mid-y:   194px;
  --btn-left-mid-h:   50px;
  --btn-left-bot-y:   0;
  --btn-left-bot-h:   0;
  /* Home indicator */
  --home-display:     block;
  --home-w:           160px;
  --home-bottom:      8px;
}

/* iPad landscape pill removed */

/* ─────────────────────────────────────────────────────────────
   SCALE WRAPPER
   Keeps large frames (iPad landscape = 1274px wide) visible
   on smaller laptop screens without cropping.
   JS sets --frame-scale on #demo-stage.
───────────────────────────────────────────────────────────── */
#frame-scaler {
  transform-origin: top center;
  transform:        scale(var(--frame-scale, 1));
  /* height collapses after scale — JS sets explicit height to compensate */
  transition:       transform 0.25s ease;
}

/* ─────────────────────────────────────────────────────────────
   REAL DEVICE BYPASS
   On an actual mobile device (detected by JS), suppress the
   entire demo stage and run the app full-screen.
───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   REAL DEVICE BYPASS
   body.real-device is added by device-frame.js as early as
   possible (before DOMContentLoaded when body is available).
   Suppresses demo stage, makes device-screen fill the viewport.
   Covers all phones and tablets — any touch device.
───────────────────────────────────────────────────────────── */
body.real-device #demo-stage    { display: none !important; }
body.real-device #frame-scaler  { transform: none !important; height: auto !important; }
body.real-device #device-frame  { all: unset; display: contents; }
body.real-device #device-screen {
  position:      fixed !important;
  inset:         0 !important;
  width:         100% !important;
  height:        100% !important;
  border-radius: 0 !important;
  top:           0 !important;
  left:          0 !important;
  overflow:      hidden !important;
}