/* =========================================================================
   AANGAN · THE FRONT DOOR — the sign-in dressed as the house's entrance
   (55-door.js paints the scene; this file re-dresses the auth panel that was
   already wired to Firebase, touching looks only, never ids or structure).

   THE PANEL IS THE PAPER CHIT ON THE DOOR. Every other room already has a
   paper voice — the shop's price tags, the kirana labels — so the form sits
   on that same paper rather than on the app's dark card, and the Google
   button is a BRASS DOORPLATE, the same brass as the nameplate above it.
   ========================================================================= */

/* the scene behind everything: 55-door.js drops three layers in here —
   .dgap (lamplight in the doorway hole), .dleaves (the two swinging
   leaves), .dwall (the wall SVG with the doorway punched out). All three
   share one coordinate system computed in geo(); the boxes are inline. */
#authOv .door-back{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#authOv .door-back .dwall{position:absolute;inset:0;width:100%;height:100%;display:block}
.dgap{position:absolute;overflow:hidden;
  background:radial-gradient(130% 100% at 50% 40%, #ffe3a8 0%, #f0b45e 30%, #b97b33 60%, #6b4318 85%, #3a2410 100%)}
/* dusk in the doorway while shut; lifts as the doors open */
.dgap::after{content:"";position:absolute;inset:0;background:rgba(12,26,18,.55);
  opacity:calc(1 - var(--open,0));transition:opacity .6s}
.dleaves{position:absolute;perspective:900px;perspective-origin:50% 45%}
.dleaf{position:absolute;top:0;width:50%;height:100%;overflow:hidden}
.dleaf svg{width:100%;height:100%;display:block}
.dleaf.l{left:0;transform-origin:left center;transform:rotateY(calc(var(--open,0) * -108deg))}
.dleaf.r{right:0;transform-origin:right center;transform:rotateY(calc(var(--open,0) * 108deg))}
/* the face of a leaf darkens as it turns away from the light */
.dleaf::after{content:"";position:absolute;inset:0;background:#000;
  opacity:calc(var(--open,0) * .38)}

/* THE DOOR OPENS — a transient copy of the scene 55-door.js pins over the
   app after a real sign-in: leaves swing on their jambs, the lamplight
   spills, the whole overlay fades to the courtyard, then removes itself. */
#doorExit{position:fixed;inset:0;z-index:400;pointer-events:none;overflow:hidden}
#doorExit .dwall{position:absolute;inset:0;width:100%;height:100%;display:block}
#doorExit.go .dleaf.l{animation:doorSwingL 1.5s cubic-bezier(.6,.05,.35,1) .08s forwards}
#doorExit.go .dleaf.r{animation:doorSwingR 1.5s cubic-bezier(.6,.05,.35,1) .08s forwards}
#doorExit.go .dgap::after{opacity:0}
#doorExit.go{animation:doorFade .7s ease 1.1s forwards}
@keyframes doorSwingL{to{transform:rotateY(-108deg)}}
@keyframes doorSwingR{to{transform:rotateY(108deg)}}
@keyframes doorFade{to{opacity:0}}
/* the leaves darken as they turn — animated counterpart of the --open rule */
#doorExit.go .dleaf::after{transition:opacity 1.5s cubic-bezier(.6,.05,.35,1);opacity:.38}

/* the overlay itself: no blur-of-the-courtyard behind the door — the wall IS
   the background. Content bottom-anchored so the chit hangs at door height
   and the rangoli on the step stays visible below it. */
body.has-door #authOv{background:#e9dcc0;align-items:center;justify-content:center}
body.has-door #authOv .panel{
  position:relative;z-index:1;
  /* owner 2026-08-11: the first chit covered the whole door — "make it 50%
     smaller so the users can see the designing of the doors". Half the area:
     narrower, tighter type, everything compact. The door is the screen; the
     chit is just the note pinned to it. */
  width:min(236px, calc(100vw - 124px));
  margin-top:-7vh;
  background:linear-gradient(178deg,#fbf5e4,#efe4c8);
  border:1px solid rgba(120,86,40,.35);
  border-radius:6px;
  /* paper, not a floating app card: a close contact shadow plus one deeper */
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 3px 9px rgba(60,36,10,.30),
             0 14px 30px rgba(60,36,10,.22);
  color:#3b2a14;
  padding:12px 13px 10px;
}
/* compact everything on the small chit — one place, all children */
body.has-door #authOv .panel h2{font-size:19px;margin-top:2px}
body.has-door #authOv .panel p{font-size:10.5px;line-height:1.35;margin:2px 0 6px}
body.has-door #authOv .panel .cta{margin:6px 0}
body.has-door #authOv #googleBtn,
body.has-door #authOv #guestBtn,
body.has-door #authOv #authSubmitBtn,
body.has-door #authOv #authRetry{padding:8px 10px;font-size:12.5px;width:100%}
body.has-door #authOv .authform input{padding:7px 9px;font-size:13px}
body.has-door #authOv .authdivider{margin:6px 0;font-size:10px}
body.has-door #authOv .authswitch{font-size:10.5px;margin:6px 0 0}
body.has-door #authOv .autherr{font-size:10.5px}
/* the guest door: paper-on-paper, quieter than the brass google plate */
body.has-door #authOv #guestBtn{
  background:rgba(255,252,242,.65);
  border:1px dashed rgba(120,86,40,.5);border-radius:5px;
  color:#6b4d26;font-weight:600;
}
/* the pin holding the chit to the door */
body.has-door #authOv .panel::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f0d68a, #c9a44a 55%, #8d6c22);
  box-shadow:0 2px 3px rgba(60,36,10,.4);
}
body.has-door #authOv .panel h2{
  color:#7a3d06;font-family:var(--ck-disp);letter-spacing:.5px;margin-bottom:2px}
body.has-door #authOv .panel p{color:#6b4d26}

/* the Google button: a brass doorplate, engraved. Same gradient family as the
   nameplate in the SVG so the two read as one metal. */
body.has-door #authOv #googleBtn{
  width:100%;
  background:linear-gradient(180deg,#f0d68a,#c9a44a 55%,#a8842e);
  border:1px solid #8d6c22;border-radius:5px;
  color:#3d2a06;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,246,214,.8), inset 0 -2px 3px rgba(90,60,10,.25),
             0 2px 5px rgba(60,36,10,.3);
  text-shadow:0 1px 0 rgba(255,246,214,.5);
}
body.has-door #authOv #googleBtn:active{
  box-shadow:inset 0 2px 4px rgba(90,60,10,.35);transform:translateY(1px)}

/* the divider becomes a stitched thread across the paper */
/* #a8845a on the chit measured 2.94:1 — under 3:1, i.e. not read at all. The
   rule it divides is still a hairline; only the word darkens. */
body.has-door #authOv .authdivider{color:#6f4f27}
body.has-door #authOv .authdivider::before,
body.has-door #authOv .authdivider::after{background:rgba(120,86,40,.35)}

/* inputs: ruled lines on the chit, the way the chalk sections already do
   inputs — a line to write on, not a dark field */
body.has-door #authOv .authform input{
  background:rgba(255,252,242,.6);
  border:0;border-bottom:1.6px solid rgba(120,86,40,.45);border-radius:3px 3px 0 0;
  color:#3b2a14;caret-color:#7a3d06;
}
body.has-door #authOv .authform input::placeholder{color:#a8845a}
body.has-door #authOv .authform input:focus{
  outline:0;border-bottom-color:#7a3d06;background:rgba(255,252,242,.9)}

/* sign-in: the wooden latch under the brass — secondary to Google, still warm */
body.has-door #authOv #authSubmitBtn{
  width:100%;
  background:linear-gradient(180deg,#a86528,#7a4515);
  border:1px solid #5e3210;border-radius:5px;color:#ffeec8;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,220,170,.35), 0 2px 4px rgba(60,36,10,.3);
}
body.has-door #authOv .authswitch{color:#6b4d26}
body.has-door #authOv .authswitch a{color:#7a3d06;font-weight:700;text-decoration-color:rgba(122,61,6,.4)}
body.has-door #authOv .autherr{color:#a3211a}
body.has-door #authOv #authRetry{
  background:rgba(255,252,242,.6);border:1px solid rgba(120,86,40,.4);
  border-radius:5px;color:#6b4d26}

/* the app header (logo + lang pill) floats over the wall while the door is up;
   keep it readable on cream instead of on the old dark ground */
body.has-door #authOv ~ * .apphead{}