/* Inloggningssidan. Samma palett och typsnitt som handboken. */
@font-face{
  font-family:"Comfortaa";
  src:url("fonts/Comfortaa.ttf") format("truetype");
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
}

:root{
  --paper:#FFFFFF;
  --tint:#F7F8FA;
  --tint-2:#EEF0F3;
  --ink:#001E46;
  --ink-2:#344967;
  --ink-3:#64718A;
  --rule:#DCE0E5;
  --rule-2:#7A88A2;
  --stop:#A8291F;
  --stop-pale:#FCF0EE;
  --stop-line:#EDC3BE;
  --sans:"Comfortaa",-apple-system,"SF Pro Text",BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:1.5rem;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
  background:var(--tint);
  /* Två mjuka ljuskällor i marinblått, så ytan inte blir platt grå. */
  background-image:
    radial-gradient(68rem 38rem at 18% -12%, #E6EBF4 0%, rgba(230,235,244,0) 62%),
    radial-gradient(52rem 32rem at 92% 108%, #E9EDF3 0%, rgba(233,237,243,0) 58%);
  background-attachment:fixed;
  -webkit-text-size-adjust:100%;
}

.card{
  width:100%;
  max-width:25.5rem;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:18px;
  padding:2.5rem 2.25rem 2rem;
  box-shadow:0 1px 2px rgba(0,30,70,.04), 0 12px 32px -12px rgba(0,30,70,.16);
}

/* ---------- varumärke ---------- */
.brand{display:flex;flex-direction:column;line-height:1.3;margin-bottom:2rem}
.brand b{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.brand span{font-size:.73rem;color:var(--ink-3)}

/* ---------- rubrik ---------- */
h1{
  margin:0 0 1.75rem;
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
}

/* ---------- fält ---------- */
label{
  display:block;
  margin-bottom:.45rem;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-2);
}

.field{position:relative}

.field input{
  width:100%;
  min-height:48px;
  padding:.7rem 4.1rem .7rem .9rem;
  border:1px solid var(--rule-2);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.95rem;
  letter-spacing:.02em;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder{color:var(--ink-3)}
.field input:hover{border-color:var(--ink-2)}
.field input:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(0,30,70,.13);
}

/* Dölj webbläsarnas egna lösenordsikoner — vi har en egen knapp. */
.field input::-ms-reveal,
.field input::-webkit-credentials-auto-fill-button{display:none}

.peek{
  position:absolute;
  top:50%;right:.5rem;
  transform:translateY(-50%);
  border:0;
  background:var(--tint-2);
  color:var(--ink-2);
  border-radius:7px;
  padding:.4rem .6rem;
  font:700 .7rem var(--sans);
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.peek:hover{background:var(--ink);color:#FFF}
.peek:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- felläge ---------- */
.fel{
  margin:.65rem 0 0;
  padding:.5rem .7rem;
  border:1px solid var(--stop-line);
  border-radius:8px;
  background:var(--stop-pale);
  color:var(--stop);
  font-size:.8rem;
  font-weight:600;
}
form.fel-aktiv .field input{border-color:var(--stop)}
form.fel-aktiv .field input:focus{box-shadow:0 0 0 3px rgba(168,41,31,.14)}
form.fel-aktiv .field{animation:skaka .3s ease}

@keyframes skaka{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

/* ---------- knapp ---------- */
.submit{
  width:100%;
  margin-top:1.25rem;
  min-height:48px;
  border:1px solid var(--ink);
  border-radius:10px;
  background:var(--ink);
  color:#FFF;
  font:700 .85rem var(--sans);
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .12s ease, transform .08s ease;
}
.submit:hover{background:#001634}
.submit:active{transform:translateY(1px)}
.submit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- fot ---------- */
.redan{
  margin:1.5rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  font-size:.78rem;
  color:var(--ink-3);
}
.redan a,.link{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.link{border:0;background:none;padding:0;font:inherit;font-weight:700;cursor:pointer}
.link:hover,.redan a:hover{color:var(--ink-2)}

noscript .fel{display:block}

@media (max-width:26rem){
  .card{padding:2rem 1.5rem 1.75rem;border-radius:14px}
  h1{font-size:1.4rem;margin-bottom:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}