/* The sign-in box, 2 Nov 2026: the Abacus Tables login modal, measure for measure (abacus-next LoginModal.jsx,
   SignInForm.jsx, SignUpForm.jsx, SocialSignIn.jsx, ModalExitButton.jsx, Modal.jsx, read only). Black at 50% with a
   soft blur behind; a 575px panel of #1A1A1A padded 105px at the sides (50px under 992, 30px under 768, 20px under 390)
   and less above and below, so the application's extra fields fit without a taller box (Rick, 3 Nov); EXIT and a
   thin cross above its right edge; two tabs, CREATE ACCOUNT and SIGN IN, the live one underlined in white; an italic
   serif line; grey rounded fields with placeholders; an outlined white button; "or sign in with" and the Google mark. */
.sgn.si{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;animation:siFade .2s ease both}
.sgn.si.on{display:flex}
@keyframes siFade{from{opacity:0}to{opacity:1}}
@keyframes siPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.sgn.si .si-wrap{width:575px;max-width:90vw;position:relative}
.sgn.si.on .si-wrap{animation:siPop .25s ease both}  /* starts when the box is shown; set on the hidden element it stuck at its first frame */
.sgn.si .si-exit{position:absolute;right:0;top:-48px;display:flex;align-items:center;gap:16px;cursor:pointer;background:none;border:0;padding:0;color:#fff}
.sgn.si .si-exit span{font:500 9px/14px var(--font-sans);letter-spacing:2px;text-transform:uppercase;position:relative}
.sgn.si .si-exit span::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:rgba(255,255,255,.5);transition:width .2s}
.sgn.si .si-exit:hover span::after{width:95%}
.sgn.si .si-exit svg{width:14px;height:14px;stroke:#fff;stroke-width:1;fill:none;transition:transform .3s ease-in-out}
.sgn.si .si-exit:hover svg{transform:rotate(90deg)}
.sgn.si .si-bx{background:#1A1A1A;color:#fff;padding:64px 105px;box-sizing:border-box;width:100%;max-height:calc(100vh - 100px);overflow:auto;-webkit-overflow-scrolling:touch}
@media (max-width:991px){.sgn.si .si-bx{padding:44px 50px}}
@media (max-width:767px){.sgn.si{padding:56px 16px 16px}.sgn.si .si-bx{padding:32px 30px;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px)}.sgn.si .si-wrap{max-width:100%}}
@media (max-width:390px){.sgn.si .si-bx{padding:28px 20px}.sgn.si .si-exit{top:-36px}}
/* tabs */
.sgn.si .si-tabs{display:flex;margin:0 0 24px}
.sgn.si .si-tabs button{flex:1;background:none;border:0;border-bottom:1px solid #374151;padding:12px 0;cursor:pointer;font:400 10px/15px var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;color:#9ca3af;transition:all .2s}
.sgn.si .si-tabs button.on{border-bottom:2px solid #fff;color:#fff}
/* the italic line */
.sgn.si h4{margin:24px 0 0;font:300 italic 24px/1.25 var(--font-serif);color:#fff}
.sgn.si h4.c{text-align:center}
.sgn.si h4.g{color:#9ca3af}
.sgn.si h4.si-big{font-size:28px}  /* the application's heading, a little bigger (Rick, 3 Nov) */
.sgn.si .si-or.si-lead{margin-top:12px;line-height:16px}
/* fields */
.sgn.si form{display:flex;flex-direction:column;gap:20px;margin-top:40px}
.sgn.si form[data-f=new]{gap:16px;margin-top:28px}
.sgn.si .si-f{position:relative}
.sgn.si textarea{display:block;width:100%;box-sizing:border-box;min-height:70px;border:0;border-radius:6px;background:rgba(128,128,128,.2);padding:12px 16px;font:300 10px/1.5 var(--font-sans);letter-spacing:.05em;color:#fff;outline:none;appearance:none;-webkit-appearance:none;resize:vertical}
.sgn.si textarea::placeholder{color:#CBCBCB}
.sgn.si input{display:block;width:100%;box-sizing:border-box;height:35px;border:0;border-radius:6px;background:rgba(128,128,128,.2);padding:8px 16px;font:300 10px/1 var(--font-sans);letter-spacing:.05em;color:#fff;outline:none;appearance:none;-webkit-appearance:none}
.sgn.si input::placeholder{color:#CBCBCB}
.sgn.si input.bad{box-shadow:0 0 0 1px rgba(255,80,80,.7)}
.sgn.si .si-forgot{position:absolute;top:50%;right:20px;transform:translateY(-50%);background:none;border:0;padding:0;cursor:pointer;font:400 8px/1 var(--font-sans);letter-spacing:.05em;color:#808080;transition:color .2s}
.sgn.si .si-forgot:hover{color:#fff}
.sgn.si .si-btn{display:block;width:100%;height:35px;margin:20px 0;box-sizing:border-box;white-space:nowrap;padding:0 8px;overflow:hidden;background:none;border:1px solid #fff;border-radius:6px;color:#fff;font:500 10px/1 var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .2s}
.sgn.si .si-btn:hover{background:#fff;color:#000}
.sgn.si form[data-f=new] .si-btn{margin:8px 0 0}
.sgn.si .si-alt{margin:16px 0 0;text-align:center;font:300 10px/14px var(--font-sans);letter-spacing:.05em;color:#CBCBCB}
.sgn.si .si-alt .si-lnk{font:400 10px/14px var(--font-sans);letter-spacing:.05em;text-transform:none;color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.sgn.si .si-or{margin:0;text-align:center;font:300 10px/14px var(--font-sans);color:#CBCBCB}
.sgn.si .si-social{display:flex;justify-content:center;gap:35px;align-items:center;margin-top:32px}
.sgn.si .si-social svg{width:20px;height:20px;cursor:pointer}
.sgn.si .si-who{margin:12px 0 0;text-align:center;font:300 10px/14px var(--font-sans);letter-spacing:.05em;color:#CBCBCB}
/* the application: pairs of fields side by side, stacked on a phone */
.sgn.si .si-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.sgn.si .si-two{grid-template-columns:1fr}}
.sgn.si [hidden]{display:none!important}
.sgn.si .si-lnk{background:none;border:0;padding:0;cursor:pointer;font:400 9px/14px var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid rgba(255,255,255,.25)}
.sgn.si .si-lnk:hover{color:#fff}