/* ═══════════════════════════════════════════════════════════════════
   STAGE 2 — PASSCODE / LOGIN
   Entirely simulated. The passcode is a fictional value held in the prop's
   own configuration; nothing is verified against anything.
   Every colour, size and shape below comes from the theme's stage-2 tokens,
   which a reference-derived theme fills in from the login screenshot.
   ═══════════════════════════════════════════════════════════════════ */
#stage2{background:var(--pc-bg);z-index:2;color:var(--pc-fg);height:100%;min-height:100%;overflow:hidden}

#pcBg{position:absolute;inset:0;background-position:50% 50%;background-size:cover;background-repeat:no-repeat}
#pcScrim{position:absolute;inset:0;background:var(--pc-bg);opacity:0;pointer-events:none}

.pc-wrap{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 26px) 22px calc(env(safe-area-inset-bottom,0px) + 16px);
  overflow:hidden
}

.pc-head{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none}
#pcBrandSlot{display:flex;align-items:center;justify-content:center;min-height:34px;color:var(--pc-fg)}
#pcBrandSlot img{max-height:40px;max-width:150px;object-fit:contain}
#pcBrandSlot .mk-l{fill:var(--pc-accent)}
.pc-word{
  font-family:var(--f-display);font-size:12px;font-weight:700;
  letter-spacing:var(--ls-word);text-indent:var(--ls-word);
  text-transform:uppercase;color:var(--pc-fg);opacity:.9
}

.pc-greet{text-align:center;margin-top:22px;flex:none}
.pc-greet h1{
  margin:0;font-family:var(--f-display);font-size:23px;font-weight:var(--w-display);
  letter-spacing:var(--ls-display);color:var(--pc-fg);line-height:1.2
}
.pc-greet .pc-name{display:block;margin-top:3px}
.pc-greet p{margin:8px 0 0;font-size:13px;color:var(--pc-mute);line-height:1.45}

.pc-id{
  margin:14px auto 0;display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:var(--r-pill);
  background:var(--pc-key-bg);border:var(--bw) solid var(--pc-key-bd);
  font-size:11.5px;color:var(--pc-mute);font-variant-numeric:tabular-nums
}
.pc-id b{font-weight:560;color:var(--pc-fg);letter-spacing:.04em}
.pc-id.off{display:none}

/* ── entry dots ── */
.pc-dots{display:flex;align-items:center;justify-content:center;gap:16px;margin:26px 0 0;flex:none;min-height:20px}
.pc-dots i{
  width:13px;height:13px;border-radius:50%;background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--pc-dot-off);
  transition:background 180ms var(--ease),box-shadow 180ms var(--ease),transform 180ms var(--ease)
}
.pc-dots i.on{background:var(--pc-dot);box-shadow:inset 0 0 0 1.5px var(--pc-dot);transform:scale(1.06)}
.dots-bar .pc-dots{gap:10px}
.dots-bar .pc-dots i{width:26px;height:3px;border-radius:2px;box-shadow:none;background:var(--pc-dot-off)}
.dots-bar .pc-dots i.on{background:var(--pc-dot);transform:none}
.dots-box .pc-dots{gap:10px}
.dots-box .pc-dots i{
  width:38px;height:46px;border-radius:calc(var(--r-btn) * .8);background:var(--pc-key-bg);
  box-shadow:inset 0 0 0 var(--bw) var(--pc-key-bd);display:grid;place-items:center
}
.dots-box .pc-dots i.on{background:var(--pc-key-bg);box-shadow:inset 0 0 0 1.5px var(--pc-dot)}
.dots-box .pc-dots i.on:after{
  content:"";width:11px;height:11px;border-radius:50%;background:var(--pc-dot)
}

.pc-dots.shake{animation:pcShake 420ms cubic-bezier(.36,.07,.19,.97)}
@keyframes pcShake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)}
}

.pc-error{
  margin:12px 0 0;text-align:center;font-size:12px;color:#D24545;min-height:16px;
  opacity:0;transition:opacity 220ms ease;flex:none
}
.pc-error.show{opacity:1}
.theme-dark .pc-error{color:#FF8A8A}

/* ── keypad ── */
.pc-pad-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.pc-pad{
  display:grid;grid-template-columns:repeat(3,var(--pc-key-size));
  gap:var(--pc-key-gap);justify-content:center;margin:0 auto
}
.pc-key{
  width:var(--pc-key-size);height:var(--pc-key-size);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:var(--pc-key-bg);color:var(--pc-key-fg);
  border:var(--bw) solid var(--pc-key-bd);
  border-radius:50%;
  transition:transform 110ms var(--ease),opacity 110ms ease,background 140ms ease
}
.pc-key .d{
  font-family:var(--f-num);font-size:var(--pc-key-font);font-weight:var(--pc-key-weight);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em
}
.pc-key .l{font-size:9px;letter-spacing:.12em;font-weight:600;opacity:.5;text-transform:uppercase}
.pc-key:active{transform:scale(.94);opacity:.85}
.pc-key.blank{background:none;border-color:transparent;pointer-events:none}
.pc-key.util{background:none;border-color:transparent;color:var(--pc-fg)}
.pc-key.util svg{width:26px;height:26px}

.key-rounded .pc-key{border-radius:calc(var(--r-btn) + 4px)}
.key-square .pc-key{border-radius:4px}
.key-plain .pc-key{background:none;border-color:transparent}
.key-plain .pc-key:active{background:var(--pc-key-bg)}

/* ── actions ── */
.pc-foot{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:18px}
.pc-btn{
  width:100%;max-width:330px;padding:15px;border-radius:var(--r-btn);
  background:var(--pc-btn-bg);color:var(--pc-btn-fg);
  font-size:15px;font-weight:600;letter-spacing:.005em;text-align:center;
  transition:opacity 160ms ease,transform 120ms var(--ease)
}
.pc-btn:active{transform:scale(.99);opacity:.88}
.pc-btn[disabled]{opacity:.4;pointer-events:none}
.pc-btn.off{display:none}

.pc-links{display:flex;flex-direction:column;align-items:center;gap:9px}
.pc-link{font-size:12.5px;font-weight:520;color:var(--pc-accent)}
.pc-link.quiet{color:var(--pc-mute);font-weight:460}
.pc-link.off{display:none}

.pc-sec{
  display:flex;align-items:flex-start;gap:7px;max-width:330px;margin:2px auto 0;
  font-size:10.5px;line-height:1.45;color:var(--pc-mute);text-align:left
}
.pc-sec svg{width:13px;height:13px;flex:none;margin-top:1px;color:var(--pc-accent)}
.pc-sec.off{display:none}

.pc-locked .pc-pad,.pc-locked .pc-btn{opacity:.35;pointer-events:none}

/* compact phones: shrink the keypad rather than clipping the screen */
@media (max-height:720px){
  .pc-pad{grid-template-columns:repeat(3,calc(var(--pc-key-size) * .84));gap:calc(var(--pc-key-gap) * .8)}
  .pc-key{width:calc(var(--pc-key-size) * .84);height:calc(var(--pc-key-size) * .84)}
  .pc-greet{margin-top:12px}
  .pc-dots{margin-top:18px}
}


/* Face ID biometric animation */
.pc-faceid-overlay{
  position:absolute;inset:0;z-index:30;
  background:transparent;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 160ms ease,visibility 160ms ease
}
.pc-faceid-overlay.show{opacity:1;visibility:visible}
.pc-faceid-overlay dotlottie-wc{
  position:absolute;left:var(--face-x,50%);top:var(--face-y,50%);
  width:var(--face-size,180px);height:var(--face-size,180px);
  transform:translate(-50%,-50%);display:block;
  max-width:none;max-height:none;
}
.pc-faceid-overlay dotlottie-wc canvas,.pc-faceid-overlay dotlottie-wc svg{width:100% !important;height:100% !important}