/* ===========================================================================
   THE DOOR. Robot's shopfront language: the van, the name, the question in
   Oswald, white cards with a round red arrow. Then the sign-in card.
   =========================================================================== */
#door .shout{font-size:var(--shout); text-align:center; margin:8px 0 6px}
#door{text-align:center}
/* the door sits in the middle of the red between the bar and the footer.
   65px is the bar. On a phone it stacks from the top. */
#door:not([hidden]){display:flex; flex-direction:column; justify-content:center; min-height:calc(100svh - 65px - var(--foot)); padding:24px 0 48px}
main:has(#door:not([hidden])){padding-bottom:0}
@media (max-width:560px){
  #door:not([hidden]){justify-content:flex-start; min-height:0; padding-bottom:64px}
}
.door-q{
  font-family:var(--label); font-weight:500; text-transform:uppercase;
  font-size:var(--head); letter-spacing:2.5px; margin:0;
}
.door-tiles{display:flex; flex-direction:column; gap:10px; width:100%; max-width:420px; margin:clamp(32px,5vw,48px) auto 0}
.door-tile{
  background:var(--white); color:var(--ink); border:0; border-radius:var(--r-card); padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  text-align:left; font:inherit; cursor:pointer; transition:transform .15s;
}
.door-tile:hover{transform:translateY(-2px)}
.door-tile:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.door-tile-t{display:block; font-family:var(--label); font-weight:500; font-size:var(--lead); letter-spacing:.06em; text-transform:uppercase; color:var(--ink)}
.door-tile-d{display:block; font-size:var(--say); color:var(--mid); margin-top:2px}
.door-tile-go{
  width:30px; height:30px; border-radius:50%; background:var(--red); color:var(--white); flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
}
.door-tile.soon{opacity:.45; cursor:default}
.door-tile.soon:hover{transform:none}
.door-tile .badge{color:var(--ink)}

/* ===========================================================================
   SIGN IN. Robot's card: paper, the red HELLO bubble, the word and the
   padlock. Right word: the padlock pops and the bubble turns to READY?
   =========================================================================== */
.shade{position:fixed; inset:0; z-index:70; background:var(--shade); display:flex; align-items:center; justify-content:center; padding:20px}
.shade[hidden]{display:none !important}
.scard{
  position:relative; width:100%; max-width:420px; background:var(--paper); color:var(--ink);
  border-radius:var(--r-card); padding:64px 26px 36px; display:flex; flex-direction:column; align-items:center;
  box-shadow:var(--lift-dialog); animation:pop .3s cubic-bezier(.3,1.4,.6,1);
}
.sx{position:absolute; top:14px; right:16px; width:30px; height:30px; border-radius:50%; border:0; background:none; color:var(--red); cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.sx:hover{background:var(--white)}
.sx svg{width:15px; height:15px}
.sx line{stroke:currentColor; stroke-width:2; stroke-linecap:round}
.bub{position:relative; width:min(46vw,190px); margin:0 0 20px}
.bub svg{display:block; width:100%; height:auto}
.bub svg path{fill:var(--red)}
.bub-word{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:10%}
.bub-word span{font-family:var(--display); color:var(--white); font-size:var(--title); line-height:1}
.bub.turn{animation:bub-turn .9s ease-in-out both}
@keyframes bub-turn{from{transform:perspective(700px) rotateY(0)}to{transform:perspective(700px) rotateY(360deg)}}
.sin{width:100%; max-width:300px; margin:0}
.srow{display:flex; gap:8px}
.srow input{flex:1; min-width:0; background:var(--white); border:0; border-radius:var(--pill); padding:12px 18px}
.srow input:focus{outline:2px solid var(--ink); outline-offset:1px}
.lockgo{width:44px; height:44px; flex:none; border:0; border-radius:50%; background:var(--red); cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.lockgo:hover{background:var(--red-dark)}
.lockgo:disabled{cursor:default}
.lockgo svg{width:24px; height:24px; overflow:visible}
.shackle{transform-origin:4.5px 7px; transition:transform .3s ease}
.lockgo.open .shackle{transform:rotate(-38deg) translateY(-1px)}
.snote{font-size:var(--say); color:var(--red-dark); margin:11px 0 0; min-height:18px; text-align:center}

@media (prefers-reduced-motion:reduce){.bub{animation:none !important}}
@media (max-width:560px){
  .door-q{font-size:var(--lead)}
}