/* THE STUDIO SIGN-IN STANDARD (DESIGN, 24 Sep 2026, JOB-20260801-001).
   Chris, 24 Sep: "Wardys loading page where you log in is fkin dope. Standardise
   that across the board for log in pages etc."
   ONE source for every sign-in screen: build/signin/ (this file + wave.js),
   copied by build.py to /assets/signin/. Used by:
     - signinPage() in site/_worker.js (and functions/_lib/signin.js, the mirror):
       client preview sign-ins (/p/<token>/) and the studio gate (/auth/login)
     - the /intake/ PIN lock (site/intake/index.html)
   A new sign-in screen uses this markup, nothing else:
     <div class="si"> .si-bg (i.s1 i.s2 i.dt) + canvas.si-wave + main.si-card
       .si-mk (p.si-eb "Made by" + img reverse mark) p.si-kk h1.si-h (span)
       div.si-rd p.si-l [p.si-er] form (label+input.si-in ... button.si-go) p.si-ft
     </div>  + <script src="/assets/signin/wave.js" defer>
   Everything is scoped under .si so it can sit inside another app. */
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo Black";src:url(/assets/fonts/archivo-black-latin.woff2) format("woff2");font-display:swap}
.si{--soy:#201E1D;--red:#EC3013;--deep:#C42A10;--orange:#FF563C;--por:#F3F2F2;--mute:#B9B4AF;
position:fixed;inset:0;z-index:80;overflow-x:hidden;overflow-y:auto;display:flex;padding:32px 16px;
background:var(--soy);color:var(--por);font:17px/1.5 Archivo,Arial,sans-serif;color-scheme:dark;-webkit-font-smoothing:antialiased}
.si[hidden]{display:none}
.si *{box-sizing:border-box}
.si-bg,.si-bg i,.si-wave{position:fixed;inset:0;display:block}
.si-bg{z-index:0;pointer-events:none}
.si-bg .s1{background:var(--red);clip-path:polygon(0 0,42% 0,30% 100%,0 100%);animation:si-sl 1.05s cubic-bezier(.2,.8,.2,1) both}
.si-bg .s2{background:var(--orange);clip-path:polygon(42% 0,47% 0,35% 100%,30% 100%);animation:si-sl 1.05s .1s cubic-bezier(.2,.8,.2,1) both}
.si-bg .dt{background-image:radial-gradient(rgba(243,242,242,.06) 1.6px,transparent 1.6px);background-size:16px 16px}
@media (max-width:640px){.si-bg .s1{clip-path:polygon(0 0,70% 0,38% 100%,0 100%)}.si-bg .s2{clip-path:polygon(70% 0,78% 0,46% 100%,38% 100%)}}
.si-wave{z-index:1;width:100%;height:100%;pointer-events:none}
@keyframes si-sl{from{transform:translateX(-100%)}to{transform:none}}
@keyframes si-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.si-card{position:relative;z-index:2;width:100%;max-width:440px;margin:auto;background:var(--soy);border:4px solid var(--red);padding:34px 26px 28px;
animation:si-pop .7s .35s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 30px 80px rgba(0,0,0,.45)}
@media (min-width:700px){.si-card{border-width:5px;padding:46px 48px 38px}}
.si .si-eb{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:700;margin:0 0 8px;max-width:none}
.si .si-mk img{height:34px;width:auto;display:block;margin:0 0 34px}
.si .si-kk{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--orange);margin:0 0 12px;max-width:none}
.si .si-kk::before{content:"";width:26px;height:5px;background:currentColor;transform:skewX(-18deg)}
.si .si-h{font-family:"Archivo Black",Archivo,"Arial Black",sans-serif;font-weight:400;font-size:clamp(34px,9vw,52px);line-height:.95;letter-spacing:-1px;margin:0 0 14px;color:var(--por);text-transform:none}
.si .si-h span{color:var(--red)}
.si .si-rd{width:64px;height:8px;background:var(--orange);transform:skewX(-22deg);margin:0 0 20px}
.si .si-l{margin:0 0 26px;color:var(--mute);font-size:17px;max-width:none}
.si label{display:block;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 7px;color:var(--por)}
.si .si-in{display:block;width:100%;font:inherit;padding:13px 14px;border:2px solid #4A4644;border-radius:0;background:#131211;color:var(--por);margin:0 0 18px;min-height:0;box-shadow:none}
.si .si-in:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--por)}
.si .si-in.si-pin{font-size:1.6rem;letter-spacing:.35em;text-align:center}
.si .si-go{display:block;font:800 15px Archivo,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;background:var(--deep);color:#fff;border:0;border-radius:0;padding:16px 26px;cursor:pointer;width:100%;margin:4px 0 0;min-height:54px}
.si .si-go:hover{background:#A82309}.si .si-go:focus-visible{outline:3px solid var(--por);outline-offset:3px}
.si .si-er{background:rgba(236,48,19,.14);border-left:4px solid var(--red);padding:10px 14px;margin:0 0 20px;font-size:15px;color:var(--por);font-weight:400}
.si .si-er[hidden]{display:none}
.si .si-ft{margin:24px 0 0;font-size:14px;color:var(--mute);max-width:none}
.si .si-ft a{color:var(--por)}
.si .si-link{font:inherit;font-size:14px;background:none;border:0;padding:10px 0;min-height:44px;color:var(--por);text-decoration:underline;cursor:pointer}
.si .si-link:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.si-bg .s1,.si-bg .s2,.si-card{animation:none}}