/* ─────────────────────────────────────────────────────────────────────────
 * wf-mobile · device-frame.css
 * High-fidelity device chrome: iPhone 17 Pro, Pixel 9 Pro, iPad Pro.
 * All in CSS — no images. Drop into any wireframe to wrap a screen.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  --wf-stage-bg-1: #fbf7f2;
  --wf-stage-bg-2: #efe6dc;
  --wf-stage-ink:  #1c1917;
}

/* Stage — fills viewport exactly, no page scroll. Device auto-scales to fit. */
html, body { height: 100%; overflow: hidden; margin: 0; }
.wf-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0;
  background:
    radial-gradient(1200px 600px at 20% -10%, #ffffff, transparent 70%),
    radial-gradient(900px 500px at 100% 100%, #f1e5d6 0%, transparent 60%),
    linear-gradient(180deg, var(--wf-stage-bg-1), var(--wf-stage-bg-2));
  overflow: hidden;
}

/* Scale wrapper — JS sets natural width/height + scale.
 * transform-origin top-left so the wrapper's own layout box matches the
 * post-scale visual size (otherwise grid centering uses unscaled bounds and
 * the device drifts off-screen on small viewports). */
.wf-fit-outer {
  position: relative;
  /* JS sets explicit width + height = natural * scale */
}
.wf-fit {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  gap: 56px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  transform-origin: 0 0;
  transform: scale(var(--wf-scale, 1));
  transition: transform .25s var(--ease-ios, ease);
}
.wf-stage::before {
  /* subtle film grain */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .6;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.wf-stage[data-wallpaper="plain"]    { background: #f5f5f4; }
.wf-stage[data-wallpaper="white"]    { background: #ffffff; }
.wf-stage[data-wallpaper="sand"]     { background: linear-gradient(180deg,#f7eddc,#e9d8be); }
.wf-stage[data-wallpaper="sunset"]   { background: linear-gradient(180deg,#fff1d6 0%,#ffd2a8 45%,#ffb7b0 100%); }
.wf-stage[data-wallpaper="grid"]     {
  background:
    linear-gradient(#0000000a 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,#0000000a 1px, transparent 1px) 0 0/24px 24px,
    #fafaf9;
}

.wf-stage-watermark {
  position: absolute;
  bottom: 14px; left: 18px;
  font: 500 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28,25,23,.28);
  pointer-events: none;
}

.wf-stage-row {
  display: flex; gap: 56px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Device shell (shared)
 * ───────────────────────────────────────────────────────────────────────── */
.wf-device {
  position: relative;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 32px 64px rgba(0,0,0,.30))
    drop-shadow(0 12px 24px rgba(0,0,0,.18));
  transform-style: preserve-3d;
}
.wf-device-shadow {
  position: absolute;
  left: 6%; right: 6%;
  bottom: -34px; height: 36px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  filter: blur(6px);
  pointer-events: none;
}

/* Screen viewport — clips content */
.wf-screen {
  position: relative;
  overflow: hidden;
  background: #fafaf9;
  isolation: isolate;
}

/* Glare overlay (premium glass feel) */
.wf-screen::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.06) 100%);
  pointer-events: none;
  z-index: 9999;
}

/* ─────────────────────────────────────────────────────────────────────────
 * iPhone 17 Pro — Natural Titanium
 * ───────────────────────────────────────────────────────────────────────── */
.wf-iphone {
  width: 402px;
  height: 874px;
  border-radius: 58px;
  padding: 10px;
  background:
    linear-gradient(135deg, #cfc8bf 0%, #8d867d 18%, #5c5650 38%, #4a4540 50%, #6b645c 70%, #b8b1a7 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.5);
}
.wf-iphone[data-color="black"] {
  background: linear-gradient(135deg,#3a3a3c 0%,#1c1c1e 30%,#0a0a0a 55%,#1c1c1e 80%,#3a3a3c 100%);
}
.wf-iphone[data-color="desert"] {
  background: linear-gradient(135deg,#e8d3b0 0%,#c9a578 25%,#9b7a52 55%,#c9a578 80%,#e8d3b0 100%);
}

.wf-iphone .wf-bezel {
  position: absolute; inset: 10px;
  border-radius: 48px;
  background: #000;
  padding: 4px;
}
.wf-iphone .wf-screen {
  width: 100%;
  height: 100%;
  border-radius: 44px;
}

/* Dynamic Island */
.wf-iphone .wf-island {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  background: #000;
  border-radius: 22px;
  z-index: 10000;
  box-shadow: inset 0 0 0 1px #111;
}
.wf-iphone .wf-island::before {
  /* faux camera lens dot */
  content: '';
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a30 0%, #050608 70%);
  box-shadow: inset 0 0 0 1px #1a1a1d, 0 0 0 1px rgba(255,255,255,.04);
}

/* Side buttons */
.wf-iphone .wf-btn-right {
  position: absolute; right: -3px; top: 220px;
  width: 4px; height: 100px; border-radius: 2px;
  background: linear-gradient(90deg,#5a544c,#aaa49a,#5a544c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
}
.wf-iphone .wf-btn-action {
  position: absolute; left: -3px; top: 168px;
  width: 4px; height: 28px; border-radius: 2px;
  background: linear-gradient(90deg,#5a544c,#aaa49a,#5a544c);
}
.wf-iphone .wf-btn-volup,
.wf-iphone .wf-btn-voldn {
  position: absolute; left: -3px;
  width: 4px; height: 60px; border-radius: 2px;
  background: linear-gradient(90deg,#5a544c,#aaa49a,#5a544c);
}
.wf-iphone .wf-btn-volup { top: 218px; }
.wf-iphone .wf-btn-voldn { top: 296px; }

/* Home indicator (iOS bottom pill) */
.wf-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.85);
  z-index: 10000;
}
.wf-iphone[data-color="black"] .wf-home-indicator { background: rgba(255,255,255,.85); }

/* ─────────────────────────────────────────────────────────────────────────
 * Android — Pixel 9 Pro (Obsidian)
 * ───────────────────────────────────────────────────────────────────────── */
.wf-android {
  width: 408px;
  height: 884px;
  border-radius: 44px;
  padding: 8px;
  background: linear-gradient(135deg,#2a2a2c 0%,#0e0e10 40%,#1a1a1c 70%,#3a3a3d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.wf-android[data-color="porcelain"] {
  background: linear-gradient(135deg,#e8e3da 0%,#b8b1a4 40%,#a59e90 70%,#d6cfc2 100%);
}
.wf-android .wf-bezel {
  position: absolute; inset: 8px;
  border-radius: 36px;
  background: #000;
  padding: 3px;
}
.wf-android .wf-screen {
  width: 100%;
  height: 100%;
  border-radius: 34px;
}
/* Hole-punch camera */
.wf-android .wf-punch {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1f2024 0%, #000 70%);
  box-shadow: inset 0 0 0 1px #2a2a2e, 0 0 0 1px rgba(255,255,255,.05);
  z-index: 10000;
}
/* Side rails */
.wf-android .wf-btn-right {
  position: absolute; right: -2px; top: 200px;
  width: 3px; height: 60px; border-radius: 2px;
  background: linear-gradient(90deg,#1a1a1c,#3a3a3d,#1a1a1c);
}
.wf-android .wf-btn-right.power { top: 280px; height: 90px; }

/* Android nav pill */
.wf-android-pill {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  z-index: 10000;
}

/* ─────────────────────────────────────────────────────────────────────────
 * iPad Pro M4 (11")
 * ───────────────────────────────────────────────────────────────────────── */
.wf-ipad {
  width: 820px;
  height: 1180px;
  border-radius: 38px;
  padding: 14px;
  background: linear-gradient(135deg,#cfc8bf 0%,#8d867d 35%,#5c5650 60%,#a8a097 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.wf-ipad .wf-bezel {
  position: absolute; inset: 14px;
  border-radius: 26px;
  background: #000;
  padding: 4px;
}
.wf-ipad .wf-screen {
  width: 100%;
  height: 100%;
  border-radius: 22px;
}
.wf-ipad .wf-cam {
  position: absolute; left: 24px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a30 0%, #050608 70%);
  z-index: 10000;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Status bar
 * ───────────────────────────────────────────────────────────────────────── */
.wf-statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
  padding: 18px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 15px/1 'Inter', -apple-system, sans-serif;
  color: var(--statusbar-ink, #0c0a09);
  z-index: 20;
  pointer-events: none;
}
.wf-statusbar > * { pointer-events: auto; }
.wf-statusbar .wf-sb-time { padding-right: 70px; }
.wf-statusbar .wf-sb-icons { padding-left: 70px; }
.wf-statusbar[data-variant="android"] {
  height: 38px;
  padding: 10px 18px 0;
  font-size: 13px;
}
.wf-statusbar[data-variant="android"] .wf-sb-time,
.wf-statusbar[data-variant="android"] .wf-sb-icons { padding: 0; }
.wf-statusbar .wf-sb-time {
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.wf-statusbar .wf-sb-icons {
  display: flex; align-items: center; gap: 6px;
}
.wf-sb-bars {
  display: flex; align-items: flex-end; gap: 2px;
}
.wf-sb-bars i {
  width: 3px; background: currentColor; border-radius: 1px; display: block;
}
.wf-sb-bars i:nth-child(1) { height: 4px; }
.wf-sb-bars i:nth-child(2) { height: 6px; }
.wf-sb-bars i:nth-child(3) { height: 8px; }
.wf-sb-bars i:nth-child(4) { height: 10px; }

.wf-sb-batt {
  width: 26px; height: 12px; border-radius: 3px;
  border: 1.2px solid currentColor;
  position: relative;
  padding: 1.2px;
}
.wf-sb-batt::after {
  content: '';
  position: absolute; right: -3px; top: 3px;
  width: 2px; height: 4px; border-radius: 0 1px 1px 0;
  background: currentColor;
}
.wf-sb-batt i {
  display: block; height: 100%; width: 90%;
  background: currentColor; border-radius: 1.5px;
}