/* Johnny Blastoff — sign in, your account, and the sign-in return. Tokens come from site.css. */

.s-auth{background:linear-gradient(#6FA2D2,#9CC3E2 32%,#CFE1EC);padding-top:8px}
.auth{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px;align-items:start}
.auth-narrow{grid-template-columns:minmax(0,560px)}
.auth-card{background:var(--paper);border-radius:16px;padding:30px 30px 26px;box-shadow:0 14px 36px rgba(12,22,56,.18)}
.auth-card h2{font-size:clamp(30px,3.4vw,38px);line-height:1.04;margin-bottom:18px}
.auth-card .kicker{color:var(--orange-deep);margin-bottom:10px}

.auth-msg{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--cloud);font-size:16px;line-height:1.45}
.auth-msg.good{background:#E3F4E6;color:#1B4D2A}
.auth-msg.bad{background:#FDE8DD;color:#7A2A05}
.auth-msg[hidden]{display:none}

.ways{display:grid;gap:10px}
.way{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin-top:10px;padding:0 18px;border:1.5px solid rgba(12,22,56,.22);
  border-radius:12px;background:#fff;color:var(--ink);font:600 17px/1.2 var(--body);text-align:left;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.ways .way{margin-top:0}
.way:hover:not(:disabled){border-color:var(--ink);box-shadow:0 4px 14px rgba(12,22,56,.12);transform:translateY(-1px)}
.way:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,103,26,.28)}
.way img{flex:none;width:22px;height:22px}
.way span{flex:1}
.way small{font:700 12px/1 var(--inst);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.way:disabled{cursor:default;opacity:.62}
.way[aria-busy="true"]{opacity:.7;cursor:wait}
.way-key{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.way-key img{filter:invert(1)}
.way-key:hover:not(:disabled){background:var(--cobalt);border-color:var(--cobalt)}

.or{display:flex;align-items:center;gap:12px;margin:22px 0 12px;font:700 13px/1 var(--inst);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(12,22,56,.18)}

.sig{margin-top:12px;padding:16px;border-radius:12px;background:#EEF3FE}
.sig[hidden],.auth-form[hidden],#sigStep2[hidden]{display:none}
.auth-form{display:grid;gap:12px;margin-top:6px}
.auth-form label{display:grid;gap:6px;font:600 15px/1.2 var(--body)}
.auth-form label small{font-weight:400;color:var(--ink-soft)}
.auth-form input{font:400 17px/1.35 var(--body);color:var(--ink);background:#fff;border:1.5px solid rgba(12,22,56,.3);border-radius:10px;padding:11px 12px}
.auth-form input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,103,26,.22)}
#sigCode{font:700 26px/1 var(--inst);letter-spacing:.3em;max-width:9em}
.sig-emoji{margin:14px 0 2px;font-size:30px;letter-spacing:.2em}
.auth-small{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.auth-link{display:inline-block;margin-top:14px;padding:0;border:0;background:none;color:var(--ink);font:600 16px/1.4 var(--body);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth-link:hover{color:var(--orange-deep)}
#pkNew{margin-top:10px}

.auth-side{color:var(--ink);padding-top:8px}
.auth-side h2{font-size:clamp(28px,3vw,36px);line-height:1.05;margin-bottom:14px}
.auth-side ul{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.auth-side li{position:relative;padding-left:26px;font-size:17px;line-height:1.45}
.auth-side li::before{content:"";position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.auth-side .script{font-size:24px;color:var(--orange-deep)}

.acct-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:16px 0 4px;font-size:16px}
.acct-facts:empty{display:none}
.acct-facts dt{font:700 13px/1.6 var(--inst);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.acct-facts dd{margin:0;overflow-wrap:anywhere}
.acct-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
#pkAdd[hidden]{display:none}

.nav .nav-acct{white-space:nowrap}

@media (max-width:860px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-card{padding:24px 20px 22px}
}