/* device.css — El Arquitecto · App Store set
   iPhone 17 Pro front frame, ported from the "Design Skills & Assets" template
   (iPhone 17 Pro Mockups.html) and namespaced `dev-` so it never collides with
   the calculator's own `.phone` / `.screen` / `.statusbar` / `.island` classes.
   A live <ArqApp> is dropped into `.dev-screen`; the frame supplies the titanium
   rim, side buttons, Dynamic Island and home indicator. */

/* ---------- colorway themes ---------- */
.dev-silver {
  --frame: linear-gradient(135deg, #fcfcfb, #a9adac 34%, #ebedec 58%, #989c9b 100%);
  --dev-btn: #b7bbba;
}
.dev-orange {
  --frame: linear-gradient(135deg, #f8ad5e, #b25a21 34%, #ef8c43 58%, #a44c1d 100%);
  --dev-btn: #b85a22;
}
.dev-navy {
  --frame: linear-gradient(135deg, #5a6e95, #1e2840 34%, #45577d 58%, #18213a 100%);
  --dev-btn: #222b44;
}

/* ---------- phone shell ---------- */
.dev-phone {
  position: relative;
  width: var(--w, 384px);
  aspect-ratio: 244 / 516;
  border-radius: calc(var(--w, 384px) * 0.165);
  background: var(--frame);
  padding: 5px;
  box-shadow:
    0 2px 1px rgba(255,255,255,0.18),
    0 40px 70px -28px rgba(0,0,0,0.55),
    0 14px 30px -18px rgba(0,0,0,0.5);
}
/* metallic rim highlights */
.dev-phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 8;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -1px 2px rgba(0,0,0,0.35);
}

/* side buttons */
.dev-btns { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.dev-btn {
  position: absolute; background: var(--dev-btn); border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 1px 1px rgba(0,0,0,0.4);
}
.dev-btn.r1 { right: -3px; top: 23%; width: 3.5px; height: 9%; }
.dev-btn.l1 { left: -3px; top: 16%; width: 3.5px; height: 4.5%; }  /* action */
.dev-btn.l2 { left: -3px; top: 27%; width: 3.5px; height: 8%; }    /* vol up */
.dev-btn.l3 { left: -3px; top: 38%; width: 3.5px; height: 8%; }    /* vol down */

/* ---------- screen (holds the live app) ---------- */
.dev-screen {
  position: absolute; inset: 5px; border-radius: calc(var(--w, 384px) * 0.15);
  background: #000; overflow: hidden;
  box-shadow: inset 0 0 0 2px #07080c;
}

/* drop the live calculator into the screen, edge to edge */
.dev-screen .arq { width: 100%; height: 100%; display: block; }
.dev-shot-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 1;
}
.dev-screen .arq .phone {
  width: 100%; height: 100%; border-radius: inherit;
  box-shadow: none;
}
/* the frame already supplies bezel + Dynamic Island, so retire the app's own */
.dev-screen .arq .bezel,
.dev-screen .arq .notch { display: none; }

/* Dynamic Island */
.dev-island {
  position: absolute; top: 2.4%; left: 50%; transform: translateX(-50%);
  width: 33%; height: 4.2%; background: #000; border-radius: 999px; z-index: 10;
  display: flex; align-items: center; justify-content: flex-end; gap: 6%; padding: 0 7%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dev-island .dev-cam { width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #25406a, #05080f 70%); }
.dev-island .dev-dot { width: 5px; height: 5px; border-radius: 50%;
  background: #c2511f; box-shadow: 0 0 4px #e0641f; }

/* home indicator */
.dev-home {
  position: absolute; bottom: 1.1%; left: 50%; transform: translateX(-50%);
  width: 32%; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.85); z-index: 11;
}
/* on the light editions the indicator reads darker so it stays visible */
.dev-screen .arq[data-surface="light"] ~ .dev-home,
.card[data-edition="light"] .dev-home { background: rgba(24,32,57,0.55); }