/* /login in twee kolommen (inspiratie: "sign-in page"), in de stijl van de site.
   Links één formulier: glasvelden, de blauwe siteknop, Google eronder.
   Rechts (vanaf 900px) het product in een afgerond paneel met lichtbundels en
   drie glaskaartjes met echte feiten. Bovenop auth.css; alleen voor /login. */

.ls{ flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0; }
.ls-form{ display:flex; align-items:center; justify-content:center; padding:48px 32px; }
.ls-inner{ width:100%; max-width:400px; display:flex; flex-direction:column; gap:22px; }
.ls-logo .logo{ margin:0 0 6px; width:120px; }
.ls .head{ gap:10px; margin:0; }
.ls h1{ font-size:clamp(2.1rem,3.4vw,2.8rem); font-weight:600; letter-spacing:-.04em; line-height:1.08; }
.ls .sub{ font-size:var(--t-body); }

/* Velden: glas met een dunne rand; bij focus blauw getint. */
.ls-velden{ display:flex; flex-direction:column; gap:18px; }
.ls .field{ gap:8px; }
.ls .field label{ font-size:var(--t-small); font-weight:500; color:var(--muted); letter-spacing:0; }
.ls .field input{ padding:15px 48px 15px 16px; border-radius:16px; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease, box-shadow .2s ease; }
.ls .field input:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.ls .field input:focus{ background:rgba(43,91,208,.1); box-shadow:inset 0 0 0 1px rgba(124,180,255,.7); }
.ls .field input[aria-invalid="true"]{ box-shadow:inset 0 0 0 1px rgba(248,113,113,.7); }
.ls .field input:-webkit-autofill, .ls .field input:-webkit-autofill:hover, .ls .field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px #121a2b inset, inset 0 0 0 1px rgba(255,255,255,.12); }
.ls .eye{ right:8px; bottom:8px; }
.ls .row{ margin-top:-6px; }

/* De knop: de blauwe siteknop (buttons.css), over de volle breedte. */
.ls .btn.btn-shiny{ width:100%; padding:15px 24px; font-size:var(--t-body); margin-top:4px; }

.ls .or{ letter-spacing:.14em; }
.ls .gwrap{ min-height:44px; }
.ls-foot{ text-align:center; font-family:var(--sub); font-size:var(--t-small); color:var(--muted); }
.ls-foot a{ color:var(--link); text-decoration:none; font-weight:500; margin-left:5px; }
.ls-foot a:hover{ text-decoration:underline; }
.ls .fine{ margin-top:0; }

/* Rechterkolom */
.ls-hero{ position:relative; padding:16px 16px 16px 0; }
.ls-beeld{ position:absolute; inset:16px 16px 16px 0; overflow:hidden; border-radius:28px;
  background:radial-gradient(120% 80% at 70% 0%, rgba(58,106,216,.35) 0%, rgba(10,14,23,0) 60%), linear-gradient(180deg,#121b31 0%,#0b111e 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  animation:ls-rechts .9s cubic-bezier(.22,1,.36,1) .3s both; }
.ls-beeld .beams-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; filter:blur(6px); opacity:.9; }
.ls-dash{ position:absolute; z-index:1; left:12%; top:14%; width:120%; max-width:none; height:auto; border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -30px rgba(0,0,0,.95); }
.ls-feiten{ position:absolute; z-index:2; left:16px; right:32px; bottom:40px; display:flex; justify-content:center; gap:14px; padding:0 24px; }
.ls-feit{ display:flex; align-items:flex-start; gap:12px; width:260px; padding:18px; border-radius:24px;
  background:rgba(18,26,43,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 40px -24px rgba(0,0,0,.9);
  animation:ls-kaart .8s cubic-bezier(.22,1,.36,1) var(--d,1s) both; }
.ls-feit b{ display:block; font-family:var(--ui); font-size:var(--t-small); font-weight:600; color:#f4f6fb; line-height:1.3; }
.ls-feit span:not(.ls-ico){ display:block; margin-top:4px; font-family:var(--sub); font-size:var(--t-micro); line-height:1.45; color:rgba(234,238,247,.7); }
.ls-ico{ flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:14px; color:#fff;
  background:linear-gradient(180deg,#3a6ad8,#2450c0); box-shadow:inset 0 0 0 1px #1c3f9c; }
.ls-ico svg{ width:18px; height:18px; }
.ls-feit-xl, .ls-feit-2xl{ display:none; }
@media (min-width:1280px){ .ls-feit-xl{ display:flex; } }
@media (min-width:1600px){ .ls-feit-2xl{ display:flex; } }

/* Binnenkomst: vervaagd omhoog, rechterpaneel van rechts, kaartjes iets later. */
/* Geen getrapte blur-animatie per element (dat flikkerde bij het openen);
   alleen de hele kaart vervaagt één keer rustig in. */
.a{ animation:none; }
.ls-inner{ animation:ls-zacht .35s ease both; }
@keyframes ls-zacht{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ls-in{ from{ opacity:0; filter:blur(6px); transform:translateY(12px); } to{ opacity:1; filter:none; transform:none; } }
@keyframes ls-rechts{ from{ opacity:0; filter:blur(6px); transform:translateX(30px); } to{ opacity:1; filter:none; transform:none; } }
@keyframes ls-kaart{ from{ opacity:0; filter:blur(6px); transform:translateY(16px) scale(.96); } to{ opacity:1; filter:none; transform:none; } }

@media (max-width:900px){
  .ls{ grid-template-columns:minmax(0,1fr); }
  .ls-hero{ display:none; }
  .ls-form{ padding:40px max(20px, env(safe-area-inset-left, 0px)) 32px; }
  .ls h1{ font-size:2.1rem; }
}
@media (prefers-reduced-motion: reduce){
  .a, .ls-beeld, .ls-feit{ animation:none; }
}
.ls-beeld .beams-bg.glas{ filter:none; opacity:1; }

/* Mobiel: het formulier als glaskaart, zelfde als op /signup. */
@media (max-width:900px){
  .ls-form{ padding:28px 16px 32px; }
  .ls-inner{ gap:18px; padding:32px 24px 26px; border-radius:28px;
    background:linear-gradient(105deg, rgba(255,255,255,.07) 0%, rgba(18,18,18,.55) 100%);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.9); }
  .ls-logo{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto;
    border-radius:50%; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
  .ls-logo .logo{ height:26px !important; width:auto; margin:0; }
  .ls .head{ text-align:center; align-items:center; }
  .ls h1{ font-size:1.75rem; }
  .ls .field input{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); border-radius:14px; }
  .ls .field input:focus{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px rgba(148,163,184,.35); }
  .ls-velden{ padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.07); }
}
.ls-achter{ display:none; }
@media (max-width:900px){ .beams-bg.ls-achter{ display:block; } }

/* Alles past zonder scrollen: compacter naarmate het scherm lager is. */
.ls{ min-height:0; }
body{ min-height:100dvh; }
@media (max-height:820px){
  .ls-form{ padding-top:20px; padding-bottom:20px; }
  .ls-inner{ gap:14px; }
  .ls h1{ font-size:clamp(1.6rem,3vw,2.2rem); }
  .ls .field input{ padding-top:12px; padding-bottom:12px; }
  .ls-velden{ gap:12px; }
  .ls .fine{ font-size:.7rem; }
  .ls-hero{ padding-top:10px; padding-bottom:10px; }
  .ls-beeld{ inset:10px 16px 10px 0; }
}
@media (max-width:900px) and (max-height:760px){
  .ls-form{ padding:10px 12px 12px; }
  .ls-inner{ gap:10px; padding:20px 18px 16px; }
  .ls-logo{ width:44px; height:44px; }
  .ls-logo .logo{ height:22px !important; }
  .ls h1{ font-size:1.45rem; }
  .ls .sub{ font-size:.82rem; }
  .ls .head{ gap:4px; }
  .ls .field{ gap:5px; }
  .ls .field label{ font-size:.75rem; }
  .ls .field input{ padding-top:10px; padding-bottom:10px; }
  .ls-velden{ gap:9px; padding-bottom:2px; }
  .ls .row{ margin-top:-4px; }
  .ls .btn.btn-shiny{ padding:12px 20px; margin-top:0; }
  .ls .gwrap{ min-height:40px; }
  .ls-foot{ font-size:.75rem; }
  .ls .fine{ gap:3px; }
}
/* "Use the legacy login" in dezelfde blauwe linkstijl als "Sign up". */
.ls .fine a[href="/existing/login"]{ color:var(--link); font-weight:500; text-decoration:none; }
.ls .fine a[href="/existing/login"]:hover{ text-decoration:underline; }
/* Mobiel: icoon zonder rondje links in de hoek, kop rechts uitgelijnd. */
@media (max-width:900px){
  .ls-inner{ position:relative; }
  .ls-logo{ position:absolute; top:30px; left:24px; width:auto; height:auto; margin:0; background:none; box-shadow:none; border-radius:0; }
  .ls-logo .logo{ height:28px !important; }
  .ls .head{ text-align:right; align-items:flex-end; padding-left:52px; }
}
@media (max-width:900px) and (max-height:760px){ .ls-logo{ top:20px; left:18px; } .ls-logo .logo{ height:24px !important; } }
.ls .field .eye{ right:8px; bottom:0; height:var(--veld-h, 48px); }
.ls .field{ --veld-h:50px; } .card .field{ --veld-h:46px; }

/* ===== Login-fijnafstelling (21-10-2026) ===== */
/* Vaste veldhoogte: zo staat het oogje overal (ook Safari/iOS) precies in het midden. */
.ls .field input{ height:52px; line-height:20px; padding-top:0; padding-bottom:0; -webkit-appearance:none; appearance:none; }
.ls .field{ --veld-h:52px; }
.ls .field .eye{ bottom:0; height:52px; top:auto; }
/* Alleen "Use the legacy login" blauw; de vraag ervoor grijs. */
.ls .fine a[href="/existing/login"]{ color:var(--link); }
.ls .legacy{ color:var(--subtle); }
/* Meer lucht. */
.ls-inner{ gap:26px; }
.ls-velden{ gap:20px; }
.ls .field{ gap:9px; }
@media (max-width:900px){
  .ls-inner{ gap:22px; padding:34px 26px 28px; }
  .ls-logo{ top:32px; left:26px; }
  .ls-logo .logo{ height:38px !important; }
  .ls .head{ min-height:40px; justify-content:center; }
  .ls h1{ font-size:1.9rem; }
  .ls-velden{ gap:18px; padding-bottom:10px; }
}
@media (max-width:900px) and (max-height:760px){
  .ls-inner{ gap:14px; padding:24px 20px 18px; }
  .ls-logo{ top:22px; left:20px; } .ls-logo .logo{ height:32px !important; }
  .ls .field input{ height:46px; } .ls .field{ --veld-h:46px; } .ls .field .eye{ height:46px; }
  .ls-velden{ gap:12px; }
}
@media (max-height:820px) and (min-width:901px){ .ls-inner{ gap:18px; } .ls-velden{ gap:14px; } }
.ls .gwrap{ transition:opacity .25s ease; }
.ls .gwrap.g-wacht{ opacity:0; pointer-events:none; }