/* The door password: new members answer "what's the password?" before they get in (public/gate.js). It borrows the
   "you can add that" overlay (.youcan in youcan.css: the blur, the red pen) and adds a field under the words. */
.youcan.gate {
  inset: auto 0 auto 0;
  top: var(--app-top, 0px);
  height: var(--app-h, 100dvh);
  z-index: 8999; /* under "you can add that", which plays first on iPhone */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 5vh, 40px);
  background: color-mix(in srgb, var(--wall, #f4f6fb) 62%, transparent);
  touch-action: manipulation;
}
.youcan.gate svg { width: min(86vw, 520px); max-height: 42%; }
.gate-ask {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity .35s ease, transform .35s ease, visibility 0s .35s;
}
.gate.asking .gate-ask { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.gate-row { display: flex; align-items: flex-end; gap: 12px; }
.gate-row input {
  width: 10ch; padding: 4px 2px 6px;
  font: 700 24px/1.2 "Atkinson Hyperlegible", system-ui, sans-serif;
  color: var(--ink, #0b1a2e); text-align: center; letter-spacing: .04em;
  background: transparent; border: 0; border-bottom: 3px solid var(--red, #1259d3); border-radius: 0;
  outline: none; -webkit-appearance: none; appearance: none;
  -webkit-user-select: text; user-select: text;
}
.gate-row input:focus-visible { border-bottom-color: var(--ink, #0b1a2e); }
.gate-go {
  padding: 11px 18px; border: 0;
  font: 700 17px/1 "Atkinson Hyperlegible", system-ui, sans-serif;
  background: var(--red, #1259d3); color: var(--red-ink, #fff);
}
.gate-go:disabled { opacity: .6; }
.gate-hint { margin: 0; font: 400 15px/1.3 "Atkinson Hyperlegible", system-ui, sans-serif; color: var(--ink-2, #4a5f7d); }
.gate-hint.bad { color: var(--red, #1259d3); font-weight: 700; }
.gate.nope .gate-row { animation: gate-nope .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes gate-nope {
  15%, 85% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(7px); }
  45% { transform: translateX(-9px); }
  55% { transform: translateX(9px); }
}
@media (prefers-reduced-motion: reduce) { .gate.nope .gate-row { animation: none; } }