/* gate.css — OTP identity gate + operator modal for The RealReal.
   Luxury-editorial: dark "gallery entrance" gate, warm-paper operator card.
   Design tokens come from styles.css. */

#siteRoot[aria-hidden="true"]{display:none}

/* ── the gate overlay ─────────────────────────────────────────────────── */
#gate{
  position:fixed;inset:0;z-index:2147483647;
  display:flex;align-items:center;justify-content:center;padding:28px;
  background:radial-gradient(120% 100% at 50% -10%,#26221d,#141210 58%,#0c0b09);
  color:#faf8f5;
  font-family:'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
}
.gate-card{width:min(440px,92vw);text-align:center;position:relative}
.gate-mark{margin:0 auto 22px;color:#b8925a}
.gate-ey{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#b8925a;margin-bottom:18px}
.gate-card h2{font-family:'Didot','Bodoni MT',Georgia,serif;font-weight:400;
  font-size:2.1rem;line-height:1.1;letter-spacing:-.01em;color:#faf8f5;margin:0 0 14px}
.gate-card p{font-size:14px;line-height:1.65;color:rgba(250,248,245,.62);margin:0 0 24px}
.gate-card p strong{color:#faf8f5;font-weight:600}
.gate-hint{color:rgba(250,248,245,.42)}

.gate-card form{display:flex;gap:10px}
.gate-card input{
  flex:1;min-width:0;background:rgba(250,248,245,.05);
  border:1px solid rgba(250,248,245,.2);border-radius:2px;
  padding:14px 16px;color:#faf8f5;font-size:14px;outline:none;font-family:inherit;
  transition:border-color .15s ease;
}
#codeInput{text-align:center;letter-spacing:.55em;font-size:20px;font-variant-numeric:tabular-nums}
.gate-card input::placeholder{color:rgba(250,248,245,.34);letter-spacing:normal}
.gate-card input:focus{border-color:#b8925a}

.gate-card button[type="submit"]{
  background:#faf8f5;color:#141210;border:none;border-radius:2px;
  padding:0 24px;height:50px;font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:background .15s ease,transform .15s ease;
}
.gate-card button[type="submit"]:hover:not(:disabled){background:#fff;transform:translateY(-1px)}
.gate-card button:disabled{opacity:.5;cursor:default}

.gate-msg{color:#d8a07a;font-size:12.5px;margin-top:16px;min-height:16px;line-height:1.5}
.gate-msg.ok{color:#b8925a}

.gate-link{background:none;border:none;color:rgba(250,248,245,.55);font-size:12px;
  letter-spacing:.06em;cursor:pointer;margin:18px 10px 0;text-decoration:underline;
  text-underline-offset:3px;font-family:inherit;padding:0}
.gate-link:hover{color:#faf8f5}
.gate-ft{margin-top:32px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,248,245,.4)}

.gate-card button:focus-visible,.gate-card input:focus-visible,.gate-link:focus-visible{
  outline:2px solid #b8925a;outline-offset:3px}

@keyframes gateShake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-6px)}}
.gate-card.shake{animation:gateShake .4s ease}
@media (prefers-reduced-motion:reduce){.gate-card.shake{animation:none}}

/* ── operator modal (KR facilitators only) ────────────────────────────── */
#opLaunch{position:fixed;right:20px;bottom:20px;z-index:70;
  background:#141210;color:#faf8f5;border:none;border-radius:2px;
  padding:12px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  box-shadow:0 6px 24px rgba(0,0,0,.22)}
#opLaunch:hover{background:#2a251f}

#opModal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(20,18,16,.55)}
.op-card{width:min(720px,95vw);max-height:90vh;overflow-y:auto;background:#faf8f5;
  border:1px solid #c9c2b6;border-radius:3px;padding:30px;color:#141210;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
.op-card .gate-ey{color:#8a6d3b;text-align:left}
.op-card h2{font-family:'Didot','Bodoni MT',Georgia,serif;font-weight:400;font-size:1.7rem;color:#141210;margin:4px 0 10px}
.op-card>div>p{color:#6d675f;font-size:.95rem;margin:0 0 16px;line-height:1.55}
#opTranscript,#opGuide{width:100%;background:#fff;border:1px solid #e4dfd6;border-radius:2px;
  color:#141210;padding:12px 14px;font-family:inherit;font-size:.9rem;line-height:1.5;box-sizing:border-box}
#opTranscript{min-height:200px;resize:vertical}
#opGuide{margin-top:10px}
.op-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.op-btn{background:#141210;color:#faf8f5;border:none;border-radius:2px;padding:11px 20px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.op-btn:hover:not(:disabled){background:#2a251f}
.op-btn:disabled{opacity:.5;cursor:default}
.op-btn-ghost{background:transparent;color:#6d675f;border:1px solid #c9c2b6;border-radius:2px;
  padding:11px 20px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.op-btn-ghost:hover{color:#141210;border-color:#141210}
.op-preview{border:1px solid #e4dfd6;border-radius:2px;padding:18px;background:#fff;margin-top:6px}
.op-h{font-family:'Didot','Bodoni MT',Georgia,serif;font-weight:400;font-size:1.15rem;margin:0 0 8px}
.op-h + .op-list{margin-top:0}
.op-list{margin:0 0 16px;padding-left:18px}
.op-list li{font-size:.92rem;color:#6d675f;margin-bottom:6px;line-height:1.5}
.op-list li b{color:#141210}