/* static/signin.css: hosted sign-in and invite-only pages. The aurora + glass look comes from
   app.css (#splash); this file only adds the form pieces. */
body.signin { margin: 0; min-height: 100vh; background: #050607; }
.fixed-scanlines { position: fixed; inset: 0; z-index: 70; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signin-form, .signin-sent { display: grid; gap: 12px; }
.signin-form[hidden], .signin-sent[hidden] { display: none; }  /* display:grid would beat the hidden attribute */
.signin-input { font: 14px 'JetBrains Mono', monospace; color: #fff; background: rgba(13,13,13,.75); border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px; padding: 12px 14px; outline: none; text-align: center; width: 100%; box-sizing: border-box; }
.signin-input:focus { border-color: #00FFFF; box-shadow: 0 0 0 3px rgba(0,255,255,.18); }
.signin-input::placeholder { color: #5d6170; }
#splash .shift-btn:disabled { opacity: .5; cursor: wait; animation: none; }
.signin-status { min-height: 1.2em; margin: 0; font-size: 12px; color: #b7bccb; }
.signin-status[data-kind="error"] { color: #FF007F; }
.signin-status[data-kind="ok"] { color: #00FF66; }
.signin-link { background: none; border: 0; color: #00FFFF; font: 12px 'JetBrains Mono', monospace; cursor: pointer; text-decoration: underline; }
.signin-sent b { color: #fff; word-break: break-all; }
.signin-button-link { display: block; text-decoration: none; }
#splash h1.hello { font-family: 'Michroma', sans-serif; font-size: 13px; letter-spacing: .12em; color: #00FFFF; font-weight: 400; margin: 0; }
@media (prefers-reduced-motion: reduce) { #splash *, #splash { animation: none !important; } }