/* MyMobi360 — Passcode screen, rebuilt to Darlene's PASSCODE DESIGN OF RECORD
   (passcode-design-of-record.mp4: chrome plate, rose-gold flowing frame,
   four corner bolts, glowing logo, four empty boxes, SUBMIT pill).

   HER ANIMATION LAW for this screen: "Don't let the boxes be animated —
   let the rest of it be animated." So her video lives and glows underneath,
   while the real digit boxes seated on top of the baked ones are PERFECTLY
   STILL: opaque white, rose-gold outline, no glow, no pulse, no transform,
   no transition of any kind. Only the page (never the boxes) fades on exit.

   Overlay positions were measured from a settled frame of her video
   (720x1280): baked boxes x 15.3-31.3 / 33.3-49.3 / 51.5-67.1 / 69.2-85.1%,
   y 50.2-61.3%; baked SUBMIT pill x ~19.9-80.1%, y 65.6-72.7%.
   Overlays carry a small cover margin so no baked sparkle shows around them.

   Honesty: this screen checks nothing. Any four digits simply continue the
   design flow into the office screen (landing.html). */

*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
  margin:0;
  background:#fff;
  /* type law (Darlene, 2026-11-14 ~18:05 EST): Playfair only, no
     italics — this page's text (the honest line) previously fell back
     to Georgia; it now wears the house Playfair like every other page. */
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
}

/* The stage is an exact 9:16 box (her video's own proportions) scaled to
   FIT ENTIRELY inside the viewport and centered — her whole frame is
   always visible, never cropped (fixed 2026-11-14 evening, the same
   cover-crop flaw Darlene's iPhone caught on the activation screen),
   so percentage positions on the stage always land on the same artwork
   in the video beneath. */
.stage{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(100vw, 56.25vh);
  height:min(100vh, 177.78vw);
  container-type:size;
  transition:opacity .45s ease;
}
.stage.leaving{opacity:0}

.plate{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;
  display:block;
}

.gate{position:absolute; inset:0; margin:0}

/* ---- The four digit boxes: real inputs, perfectly still ---- */
.box{
  position:absolute;
  top:49.5%;
  height:12.4%;
  width:17.3%;
  margin:0; padding:0;
  background:#fff;
  border:0.55cqw solid #c98a72;
  border-radius:1.9cqw;
  box-shadow:inset 0 0 0 0.28cqw #e9c0ab;
  color:#2b2320;
  font-family:'Playfair Display',Georgia,serif;
  font-size:8cqw;
  font-weight:600;
  text-align:center;
  caret-color:#b06a4e;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
#b1{left:14.6%}
#b2{left:32.6%}
#b3{left:50.8%}
#b4{left:68.4%}
/* Focus: a STATIC deepening of the outline only — nothing moves, ever. */
.box:focus{
  border-color:#a55f42;
  box-shadow:inset 0 0 0 0.28cqw #dfa98d, 0 0 0 0.3cqw #a55f42;
}

/* ---- SUBMIT: a real button seated over her rose-gold pill ---- */
.submit{
  position:absolute;
  left:18.5%;
  top:64.6%;
  width:63%;
  height:9.2%;
  margin:0; padding:0;
  border:0.4cqw solid #b4705a;
  border-radius:999px;
  background:linear-gradient(180deg,#f3cdbd 0%,#e5a68d 30%,#d68f73 55%,#c67c5f 78%,#e9b49c 100%);
  color:#fdf3ee;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:4.6cqw;
  font-weight:700;
  letter-spacing:0.55cqw;
  text-indent:0.55cqw;
  text-shadow:0 0.2cqw 0.5cqw rgba(122,62,40,.55);
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.submit:focus-visible{outline:0.35cqw solid #a55f42; outline-offset:0.4cqw}

/* ---- The honest line: small, quiet, below the plate's artwork ---- */
.honest{
  position:fixed;
  left:0; right:0;
  bottom:max(8px, env(safe-area-inset-bottom));
  margin:0;
  text-align:center;
  font-size:11px;
  letter-spacing:.04em;
  color:#97837b;
  text-shadow:0 1px 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.8);
  pointer-events:none;
  z-index:5;
}

/* type law guard (Darlene, 2026-11-14 ~18:05 EST): Playfair only, no
   italics — nothing on this screen may render italic, ever. */
i,em{font-style:normal}