/* device.css — iPhone hardware around the app */

.device {
  --bezel: 14px;
  position: relative;
  width: calc(var(--w) + 2 * var(--bezel));
  height: calc(var(--h) + 2 * var(--bezel));
  border-radius: calc(var(--radius) + var(--bezel));
  padding: var(--bezel);
  flex: none;
  /* anodized aluminium unibody rim */
  background:
    radial-gradient(120% 60% at 20% 0%, rgb(255 255 255 / 0.16), transparent 55%),
    linear-gradient(145deg, var(--rim-a), var(--rim-b) 38%, var(--rim-c) 62%, var(--rim-a));
  box-shadow:
    inset 0 0 0 1.2px rgb(255 255 255 / 0.20),
    inset 0 0 0 3px rgb(0 0 0 / 0.55),
    inset 0 0 0 4.5px var(--rim-b),
    0 50px 90px -30px rgb(0 0 0 / 0.65),
    0 30px 60px -40px rgb(0 0 0 / 0.5);
}
.device.finish-deep-blue { --rim-a: #2a3a58; --rim-b: #121a2b; --rim-c: #3c5277; }
.device.finish-cosmic-orange { --rim-a: #d7743a; --rim-b: #7a3614; --rim-c: #f0a06a; }
.device.finish-sky { --rim-a: #b9cfe6; --rim-b: #6f86a3; --rim-c: #dbe8f5; }
.device.finish-space-black { --rim-a: #3a3a3e; --rim-b: #141416; --rim-c: #55555b; }
.device.tablet { --bezel: 22px; }
.device.tablet .device-shell .btn { display: none; }
.device::before {
  /* black glass border around the display */
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--radius) + var(--bezel) - 5px);
  background: #000;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05);
}
.device.bare { padding: 0; width: var(--w); height: var(--h); border-radius: var(--radius); background: none; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6); }
.device.bare::before { display: none; }

.device-shell .btn {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rim-b), var(--rim-c), var(--rim-b));
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.18);
}
.device-shell .btn.action   { left: -3px; top: 150px; height: 34px; }
.device-shell .btn.vol-up   { left: -3px; top: 212px; height: 62px; }
.device-shell .btn.vol-down { left: -3px; top: 290px; height: 62px; }
.device-shell .btn.power    { right: -3px; top: 240px; height: 100px; }
.device-shell .btn.camera   { right: -2px; top: 520px; height: 64px; width: 3px; opacity: 0.8; }

.device-screen {
  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: var(--radius);
  overflow: clip;
  background: #000;
  isolation: isolate;
  /* Safari needs this to clip backdrop-filter children to the radius */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}
.device-screen > .pm-app { position: absolute; inset: 0; }
.screen-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 200;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.035) 0%, rgb(255 255 255 / 0) 32%);
  mix-blend-mode: screen;
}

.device-native { position: fixed; inset: 0; }
.device-native > .pm-app { position: absolute; inset: 0; }

/* ── Status bar ── */
.ios-status-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 150;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transition: color 0.35s ease, opacity 0.3s ease;
}
.ios-status-bar.hidden { opacity: 0; }
.ios-status-bar .sb-left, .ios-status-bar .sb-right {
  width: var(--ear);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ios-status-bar .sb-left { padding-left: 14px; }
.ios-status-bar .sb-right { padding-right: 10px; gap: 5.5px; }
.ios-status-bar.tablet { height: 18px; padding: 0 22px; }
.ios-status-bar.tablet .sb-left, .ios-status-bar.tablet .sb-right { width: auto; padding: 0; gap: 7px; }
.ios-status-bar .sb-time.small { font-size: 15px; }
.ios-status-bar .sb-date, .ios-status-bar .sb-pct { font: 600 15px/18px -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; letter-spacing: -0.2px; }
.ios-status-bar .sb-time {
  font: 600 17px/22px -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  letter-spacing: -0.3px;
  font-feature-settings: "tnum";
}

/* ── Dynamic Island ── */
.dynamic-island-slot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 160;
  display: flex;
  justify-content: center;
}
.dynamic-island {
  background: #000;
  border-radius: 999px;
  box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.04);
  position: relative;
}
.dynamic-island::after {
  /* front camera lens */
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #1a2336 0 20%, #070a12 45%, #000 70%);
  box-shadow: inset 0 0 0 1px rgb(40 50 80 / 0.35);
}

/* ── Home indicator ── */
.ios-home-indicator {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 144px;
  height: 5px;
  border-radius: 3px;
  transform: translateX(-50%);
  z-index: 150;
  cursor: pointer;
  transition: background 0.35s ease;
}