/* Sign-in screen and the signed-in chip in the header.
   Uses the playbook's own theme tokens so it follows light/night mode. */

#s4gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:24px;
  background:var(--ground, #0E1116);
}
#s4gate[hidden]{display:none}

#s4gate .s4card{
  width:100%; max-width:380px; text-align:center;
  background:var(--surface, #161A20);
  border:1px solid var(--rule, #2A3038);
  border-radius:6px; padding:32px 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
#s4gate .s4brand{
  font-family:var(--disp, system-ui); font-weight:800; font-size:26px;
  letter-spacing:.01em; color:var(--ink, #E6EAF0); margin-bottom:12px;
}
#s4gate .s4msg{
  font-family:var(--sans, system-ui); font-size:14px; line-height:1.6;
  color:var(--ink-2, #A9B2BE); margin:0 0 22px;
}
#s4gate .s4msg code{
  font-family:var(--mono, monospace); font-size:12.5px;
  background:var(--sunk, #11151A); padding:.1em .4em; border-radius:3px;
}
#s4gate .s4acts{display:flex; flex-direction:column; gap:10px}

#s4gate .s4btn{
  appearance:none; cursor:pointer; width:100%;
  font-family:var(--mono, monospace); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; padding:11px 15px;
  border-radius:3px; border:1px solid var(--rule, #2A3038);
  background:var(--surface-2, #1B2027); color:var(--ink-2, #A9B2BE);
}
#s4gate .s4btn:hover{color:var(--ink, #E6EAF0); border-color:var(--ink-3, #6B7480)}
#s4gate .s4btn.primary{
  background:#5865F2; border-color:#5865F2; color:#fff; font-weight:600;
}
#s4gate .s4btn.primary:hover{background:#4752c4; border-color:#4752c4}
#s4gate .s4btn:disabled{opacity:.55; cursor:default}

#s4gate .s4form{display:flex; gap:7px}
#s4gate .s4form input{
  flex:1 1 auto; min-width:0;
  font-family:var(--sans, system-ui); font-size:13.5px;
  color:var(--ink, #E6EAF0); background:var(--sunk, #11151A);
  border:1px solid var(--rule, #2A3038); border-radius:3px; padding:10px 11px;
}
#s4gate .s4form input:focus{outline:2px solid var(--t, #C08A2E); outline-offset:-1px}
#s4gate .s4form .s4btn{width:auto; flex:0 0 auto; white-space:nowrap}

/* signed-in chip: sign-out link over the Discord name, top right */
.whoami{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  flex:0 0 auto; min-width:0; line-height:1.2;
}
.whoami .wh-name{
  font-family:var(--disp, system-ui); font-size:15px; font-weight:700;
  letter-spacing:-.005em; color:var(--ink); max-width:220px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wh-out{
  appearance:none; cursor:pointer; background:none; border:none; padding:0;
  font-family:var(--mono, monospace); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.wh-out:hover{color:var(--ink)}
.wh-out:focus-visible{outline:2px solid var(--ct); outline-offset:2px; border-radius:2px}
@media (max-width:820px){
  .whoami .wh-name{max-width:120px}
}