/* Standalone login page styles (does not depend on style.css / ui.css).
   Phones and laptops each have their own picture (login-phone.jpg / login-desktop.jpg) with the form card, drawn live, on top.
   --ps / --s = size of one picture pixel on screen; every size below scales from the picture so it looks the same on any screen. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Nunito',system-ui,Arial,sans-serif;
  background:linear-gradient(90deg,#868486 0 50%,#f1f1f2 50% 100%);
  min-height:100%;
}

/* ---------- phones: the picture (862x1824) covers the screen; wider screens show all of it with wall colours at the sides ---------- */
.screen{
  position:relative;
  --ps:max(calc(100vw/862),calc(var(--vh,100dvh)/1824));
  --pox:calc((100vw - var(--ps)*862)/2);
  --poy:calc((var(--vh,100dvh) - var(--ps)*1824)/2);
  --u:calc(var(--ps)*12.54);
  width:100vw;height:var(--vh,100dvh);overflow:hidden;
}
@media (min-aspect-ratio:1/2){
  .screen{--ps:min(calc(100vw/862),calc(var(--vh,100dvh)/1824))}
}
.screen::before{
  content:"";position:absolute;left:calc(var(--pox) - var(--ps)*420);top:var(--poy);width:calc(var(--ps)*1702);height:calc(var(--ps)*1824);
  background:url('../img/login-phone-wide.jpg') 0 0/100% 100% no-repeat;
}
/* the picture has a card and social icons baked in; the icons are painted over with a soft wall patch, the card is covered by the live card */
.screen::after{
  content:"";position:absolute;pointer-events:none;
  left:calc(var(--pox) + var(--ps)*100);top:calc(var(--poy) + var(--ps)*1646);
  width:calc(var(--ps)*662);height:calc(var(--ps)*150);
  background:#f1f2f4;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect;
}
.card,.social{z-index:1}
.head{display:none}
/* Login card */
.card{
  position:absolute;
  left:calc(var(--pox) + var(--ps)*36);top:calc(var(--poy) + var(--ps)*911);
  width:calc(var(--ps)*790);min-height:calc(var(--ps)*718);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff 0%,#f6f6f7 100%);
  border-radius:calc(var(--u)*4.7);
  padding:calc(var(--u)*5.8) calc(var(--u)*4.6) calc(var(--u)*2.4) calc(var(--u)*4.4);
  box-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.08);
}
.field{
  position:relative;
  display:flex;align-items:center;
  height:calc(var(--u)*8.4);
  background:#fff;
  border-radius:calc(var(--u)*5);
  margin-left:calc(var(--u)*1);
  padding-left:calc(var(--u)*8.2);
  box-shadow:inset 0 calc(var(--u)*.2) calc(var(--u)*.5) rgba(0,0,0,.06);
}
.field + .field{margin-top:calc(var(--u)*3.6)}
.field .ic{
  position:absolute;left:calc(var(--u)*-1.2);top:50%;transform:translateY(-50%);
  width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff4d55 0%,#e3121d 55%,#b00811 100%);
  box-shadow:0 calc(var(--u)*.7) calc(var(--u)*1.4) rgba(200,10,20,.35);
  display:flex;align-items:center;justify-content:center;
}
.field .ic svg{width:calc(var(--u)*3.6);height:calc(var(--u)*3.6)}
.field input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:calc(var(--u)*3.1);color:#222;
  padding:0 calc(var(--u)*2);height:100%;min-width:0;
}
.field input[type=password]{letter-spacing:calc(var(--u)*.4);font-size:calc(var(--u)*3.4)}
.field input[type=password]::placeholder{letter-spacing:0}
.field:focus-within{box-shadow:0 0 0 calc(var(--u)*.4) rgba(227,18,29,.25)}
.eye{
  border:0;background:none;cursor:pointer;
  margin-right:calc(var(--u)*3);display:flex;color:#777;
}
.eye:hover,.eye.is-on{color:#e3121d}
.eye svg{width:calc(var(--u)*4.2);height:calc(var(--u)*4.2)}
.eye .slash{opacity:0}
.eye.is-on .slash{opacity:1}
.alert{
  margin-top:calc(var(--u)*2.6);padding:calc(var(--u)*1.2) calc(var(--u)*3);border-radius:calc(var(--u)*5);
  background:#fdecee;color:#b3000f;border:1px solid #f6b8bd;
  font-size:calc(var(--u)*2.7);font-weight:700;line-height:1.35;text-align:center;
}
.forgot{
  display:block;margin:calc(var(--u)*3.6) 0 0 auto;
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:calc(var(--u)*2.85);font-weight:700;color:#e3121d;text-decoration:none;
}
.forgot:hover{text-decoration:underline}
.btn{
  display:block;width:calc(100% + calc(var(--u)*1.6));margin:calc(var(--u)*1.4) calc(var(--u)*-.8) 0;
  height:calc(var(--u)*9.4);border:0;border-radius:calc(var(--u)*5);cursor:pointer;
  font-family:inherit;font-size:calc(var(--u)*4.6);font-weight:800;color:#fff;
  background:linear-gradient(180deg,#ff3b44 0%,#e6111c 45%,#c50a14 100%);
  box-shadow:0 calc(var(--u)*1) 0 #9e0710,0 calc(var(--u)*2) calc(var(--u)*3) rgba(200,10,20,.35),inset 0 calc(var(--u)*.4) calc(var(--u)*.6) rgba(255,255,255,.35);
  transition:transform .1s,box-shadow .1s;
}
.btn:active{transform:translateY(calc(var(--u)*.8));box-shadow:0 calc(var(--u)*.2) 0 #9e0710,0 calc(var(--u)*1) calc(var(--u)*2) rgba(200,10,20,.3)}
.btn:focus-visible{outline:calc(var(--u)*.5) solid #ffb3b7;outline-offset:calc(var(--u)*.5)}
.divider{height:1px;background:#ddd;margin:auto 0 calc(var(--u)*1.6)}
.signup{text-align:center;font-size:calc(var(--u)*2.9);color:#777}
.signup a{color:#e3121d;font-weight:800;text-decoration:none}
/* Social icons (laid out on the picture's own icon row) */
.social{
  position:absolute;left:calc(var(--pox) + var(--ps)*431);top:calc(var(--poy) + var(--ps)*1673);transform:translateX(-50%);
  display:flex;justify-content:center;gap:calc(var(--ps)*32);
}
.social a{
  width:calc(var(--ps)*86);height:calc(var(--ps)*86);border-radius:50%;
  background:#fff;color:#222;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 calc(var(--ps)*4) calc(var(--ps)*14) rgba(0,0,0,.14);
}
.social a:hover{color:#e3121d}
.social svg{width:calc(var(--ps)*38);height:calc(var(--ps)*38)}

/* ---------- laptop / desktop: full-screen 16:9 picture (covers the whole window), live card on the right; never scrolls ---------- */
/* --s = size of one picture pixel on screen when the picture covers the window; the picture's own baked card is
   painted over with a soft wall patch, so the live card can be any size. */
@media (min-width:900px) and (min-height:520px){
  body{align-items:stretch;background:#f5f6f8}
  .screen{
    --u:clamp(4.4px,min(.42vw,.74dvh),7.4px);
    --s:max(calc(100vw/1672),calc(var(--vh,100dvh)/941));
    --ox:calc((100vw - var(--s)*1672)/2);
    --oy:calc((var(--vh,100dvh) - var(--s)*941)/2);
    width:100vw;height:var(--vh,100dvh);aspect-ratio:auto;background:#f5f6f8;
  }
  .screen::before{
    inset:0;width:auto;height:auto;
    background:url('../img/login-desktop.jpg') center/cover no-repeat;
    -webkit-mask-image:none;mask-image:none;
  }
  .screen::after{
    content:"";position:absolute;pointer-events:none;
    left:calc(var(--ox) + var(--s)*818);top:calc(var(--oy) + var(--s)*72);
    width:calc(var(--s)*784);height:calc(var(--s)*796);
    background:#f5f6f8;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
    mask-composite:intersect;
  }
  .card{
    left:calc(var(--ox) + var(--s)*1210);top:50%;transform:translate(-50%,-50%);
    width:calc(var(--u)*65);min-height:0;height:auto;
    padding:calc(var(--u)*4.2) calc(var(--u)*5) calc(var(--u)*2.4) calc(var(--u)*4.6);
    border-radius:calc(var(--u)*5);
  }
  .divider{margin:calc(var(--u)*2.6) 0 calc(var(--u)*1.6)}
  .head{display:block;text-align:center;margin-bottom:calc(var(--u)*4.4)}
  .head h1{font-size:calc(var(--u)*7.2);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#0a0a0a}
  .head p{margin-top:calc(var(--u)*1);font-size:calc(var(--u)*3.3);color:#111}
  .social{left:calc(var(--ox) + var(--s)*1210);top:auto;bottom:calc(var(--u)*3.5);gap:calc(var(--u)*2.4)}
  .social a{width:calc(var(--u)*7.9);height:calc(var(--u)*7.9);background:#f2f2f3;box-shadow:0 calc(var(--u)*.6) calc(var(--u)*1.4) rgba(0,0,0,.18)}
  .social svg{width:calc(var(--u)*3.6);height:calc(var(--u)*3.6)}
}