/* Screens — lock, passcode, home stub. Classic flat iOS (iPhone 12 Pro).
   Geometry in points via calc(N * var(--pt)). See docs/BUILD-SPEC.md §7. */

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding-top: var(--safe-top); padding-bottom: var(--safe-bottom);
  color: #fff; text-shadow: 0 0 calc(6 * var(--pt)) rgba(0,0,0,.35);
}

/* ============================ LOCK ============================ */
.lock { justify-content: flex-start; }
.lock-top {
  margin-top: calc(3 * var(--pt)); width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.lock-padlock { opacity: .92; height: calc(15 * var(--pt)); }
.lock-date {
  margin-top: calc(5 * var(--pt));
  font-size: calc(15 * var(--pt)); font-weight: 600; letter-spacing: .2px; opacity: .96;
}
.lock-time {
  /* Real device uses SF Pro (San Francisco) — serifed "1", narrow digits, medium weight.
     NOT SF Pro Rounded. -apple-system resolves to SF Pro Display at this size on iOS. */
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: calc(82 * var(--pt)); font-weight: 500; line-height: 1.0;
  letter-spacing: calc(-1 * var(--pt)); margin-top: calc(-4 * var(--pt));
  color: rgba(255,255,255,.98);
}
.lock-foot {
  margin-top: auto; width: 100%;
  display: flex; justify-content: space-between;
  padding: 0 calc(30 * var(--pt)) calc(24 * var(--pt));
}
.lock-btn {
  width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: 50%;
  background: rgba(0,0,0,.32); color: #fff; border: 0;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
}
.lock-btn:active { background: rgba(255,255,255,.35); }

/* ============================ PASSCODE ============================ */
.passcode { background: rgba(0,0,0,.28); justify-content: flex-start; }
.pc-title { margin-top: calc(50 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 500; letter-spacing: .2px; }
.pc-dots { display: flex; gap: calc(23 * var(--pt)); margin-top: calc(22 * var(--pt)); height: calc(13 * var(--pt)); align-items: center; }
.pc-dot {
  width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); border-radius: 50%;
  border: calc(1.4 * var(--pt)) solid #fff; box-shadow: 0 0 calc(4 * var(--pt)) rgba(0,0,0,.3);
}
.pc-dot.on { background: #fff; }
.pc-dots.shake { animation: pc-shake .44s cubic-bezier(.36,.07,.19,.97); }
@keyframes pc-shake {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(calc(-12 * var(--pt))); } 30% { transform: translateX(calc(10 * var(--pt))); }
  45% { transform: translateX(calc(-8 * var(--pt))); } 60% { transform: translateX(calc(6 * var(--pt))); }
  75% { transform: translateX(calc(-4 * var(--pt))); } 90% { transform: translateX(calc(2 * var(--pt))); }
}

.pc-pad {
  margin-top: calc(56 * var(--pt));
  display: grid; grid-template-columns: repeat(3, calc(72 * var(--pt)));
  column-gap: calc(25 * var(--pt)); row-gap: calc(13 * var(--pt));
}
.pc-key {
  width: calc(72 * var(--pt)); height: calc(72 * var(--pt)); border-radius: 50%;
  background: rgba(255,255,255,.16); border: .5px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: translateZ(0);   /* own layer -> stable backdrop, no flicker on transition */
}
.pc-key:active { background: rgba(255,255,255,.42); }
.pc-key.void, .pc-key.del { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pc-key.del:active { background: none; }
.pc-key.del.hidden { visibility: hidden; }
.pc-n { font-size: calc(34 * var(--pt)); font-weight: 300; line-height: 1; }
.pc-a { font-size: calc(9.5 * var(--pt)); font-weight: 600; letter-spacing: calc(1.4 * var(--pt)); margin-top: calc(3 * var(--pt)); }
.pc-foot {
  position: absolute; bottom: calc(var(--safe-bottom) + 14 * var(--pt));
  width: 100%; max-width: calc(320 * var(--pt));
  display: flex; justify-content: space-between; padding: 0 calc(30 * var(--pt));
  font-size: calc(16 * var(--pt));
}
/* Prime B: invisible top-right sixth */
.pc-hot-b { position: absolute; top: 0; right: 0; width: 46%; height: 22%; z-index: 5; }

/* fade-in transition lock -> passcode. Opacity-only: animating transform on the panel
   makes iOS re-render the keys' backdrop-filter each frame (the "numbers flicker" bug).
   The exact iOS rise motion gets recalibrated later from the clean recording (§7.3). */
.passcode.rise { animation: pc-rise .32s ease; }
@keyframes pc-rise { from { opacity: 0; } to { opacity: 1; } }
/* unlock (§7.1) */
.passcode.unlocking { animation: pc-unlock .28s ease forwards; }
@keyframes pc-unlock { to { opacity: 0; transform: scale(1.04); } }

/* ============================ HOME (stub) ============================ */
.home { justify-content: flex-start; background: transparent; }
.home-grid {
  margin-top: calc(20 * var(--pt)); width: 100%;
  padding: 0 calc(24 * var(--pt));
  display: grid; grid-template-columns: repeat(4, 1fr); row-gap: calc(20 * var(--pt)); column-gap: calc(20 * var(--pt));
}
.app { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--pt)); }
.app-icon {
  width: calc(60 * var(--pt)); height: calc(60 * var(--pt)); border-radius: calc(14 * var(--pt));
  background: hsl(var(--h,200), 60%, 55%);
  box-shadow: 0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgba(0,0,0,.25);
}
.app-label { font-size: calc(12 * var(--pt)); font-weight: 400; }
.page-dots { margin-top: auto; display: flex; gap: calc(8 * var(--pt)); padding-bottom: calc(10 * var(--pt)); }
.pd { width: calc(7 * var(--pt)); height: calc(7 * var(--pt)); border-radius: 50%; background: rgba(255,255,255,.4); }
.pd.on { background: #fff; }
.dock {
  width: calc(340 * var(--pt)); height: calc(88 * var(--pt)); border-radius: calc(34 * var(--pt));
  background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: space-around; padding: 0 calc(10 * var(--pt));
  margin-bottom: calc(6 * var(--pt));
}
.dock-app .app-icon { width: calc(60 * var(--pt)); height: calc(60 * var(--pt)); }
.home-indicator {
  position: absolute; bottom: calc(8 * var(--pt)); left: 50%; transform: translateX(-50%);
  width: calc(134 * var(--pt)); height: calc(5 * var(--pt)); border-radius: calc(3 * var(--pt)); background: rgba(255,255,255,.85);
}
.home-note { position: absolute; top: calc(var(--safe-top) + 2 * var(--pt)); font-size: calc(10 * var(--pt)); opacity: .5; }
.home.unlock-in { animation: home-in .5s cubic-bezier(.2,.7,.2,1); }
@keyframes home-in { from { opacity: .5; transform: scale(.92); } to { opacity: 1; transform: none; } }