/* =====================================================
   PHONE MOCKUP
   A modern smartphone drawn in CSS, with the live calculator inside.
   Sizes use container units (cqw = 1% of the phone's width), so the
   frame, island, buttons and status bar stay in proportion at any
   size. device.js scales the 390-px-wide page to fit the screen.

   <div class="device"> … </div>  (markup from siteRender.phoneMock)
   --device-width sets the size; it never exceeds 78% of the screen.
===================================================== */

.device {
  --device-width: 300px;
  position: relative;
  width: min(var(--device-width), 78vw);
  aspect-ratio: 9 / 19.3;
  margin-inline: auto;
  container-type: inline-size;
  isolation: isolate;
}

/* soft floor shadow */
.device::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -5%;
  height: 7%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 42, 0.32), transparent);
  filter: blur(6px);
}

/* titanium frame */
.device-body {
  position: absolute;
  inset: 0;
  padding: 1.6cqw;
  border-radius: 16.5cqw;
  background:
    linear-gradient(160deg, #8d939b 0%, #3d4147 14%, #24272b 42%, #3a3e44 70%, #9aa0a8 100%);
  box-shadow:
    0 2.4cqw 6cqw rgba(15, 23, 42, 0.30),
    0 9cqw 18cqw rgba(15, 23, 42, 0.20),
    inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.22),
    inset 0 0 0 0.9cqw rgba(0, 0, 0, 0.35);
}

/* black glass bezel around the screen */
.device-bezel {
  position: relative;
  height: 100%;
  padding: 2.6cqw;
  border-radius: 15cqw;
  background: #050607;
  box-shadow: inset 0 0 0 0.4cqw #1b1d20;
}

.device-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12.5cqw;
  background: var(--surface, #e7ecf2);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

/* status bar: time, signal, wi-fi, battery */
.device-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 13cqw;
  padding: 2.6cqw 7.5cqw 0 9.5cqw;
  color: var(--ink, #1e2a38);
  font: 600 4.5cqw/1 -apple-system, "SF Pro Text", var(--font-body);
  letter-spacing: 0.01em;
}

.device-icons { display: flex; align-items: center; gap: 1.4cqw; }
.device-icons svg { display: block; height: 3.6cqw; width: auto; fill: currentColor; }
.device-icons .device-battery { height: 3.9cqw; }

/* the page inside the phone */
.device-view { position: relative; overflow: hidden; }

.device-view iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: calc(100% / var(--s, 0.7));
  border: 0;
  transform: scale(var(--s, 0.7));
  transform-origin: 0 0;
  background: var(--surface, #e7ecf2);
}

/* Dynamic Island */
.device-island {
  position: absolute;
  top: 2.7cqw;
  left: 50%;
  z-index: 3;
  width: 31cqw;
  height: 9cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

.device-island::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6.2cqw;
  width: 3.4cqw;
  height: 3.4cqw;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4a6b 0%, #121a2b 45%, #05070c 70%);
  box-shadow: 0 0 0 0.5cqw #0b0d12;
}

/* home indicator */
.device-home {
  position: absolute;
  left: 50%;
  bottom: 2cqw;
  z-index: 3;
  width: 35cqw;
  height: 1.5cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #1e2a38) 80%, transparent);
  pointer-events: none;
}

/* glass reflection across the screen */
.device-glare {
  position: absolute;
  inset: 2.6cqw;
  z-index: 4;
  border-radius: 12.5cqw;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 22%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

/* side buttons */
.device-key {
  position: absolute;
  width: 1.3cqw;
  border-radius: 0.6cqw;
  background: linear-gradient(90deg, #5d6268, #a3a9b0 45%, #4a4e54);
  box-shadow: 0 0 0.4cqw rgba(0, 0, 0, 0.35);
}

.device-key-action { left: -0.9cqw; top: 18%; height: 6%; }
.device-key-up     { left: -0.9cqw; top: 27%; height: 10%; }
.device-key-down   { left: -0.9cqw; top: 39%; height: 10%; }
.device-key-power  { right: -0.9cqw; top: 30%; height: 15%; }

/* until the calculator loads */
.device-view::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 9cqw;
  height: 9cqw;
  margin-left: -4.5cqw;
  border-radius: 50%;
  border: 1cqw solid color-mix(in srgb, var(--brand, #1f7ae0) 25%, transparent);
  border-top-color: var(--brand, #1f7ae0);
  animation: device-spin 0.9s linear infinite;
}

.device-view.is-loaded::before { display: none; }

@keyframes device-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .device-view::before { animation: none; }
}