/* Rödpennan – inloggning med e-post och lösenord (runda 6). Bygger på tokens och komponenter i stil.css. */

/* flikarna Logga in / Skapa konto */
.segment.lage{margin:0 0 18px}
.segment.lage button{padding:10px 10px;font-size:14.5px}
.segment.lage button[aria-selected=true]{background:var(--yta);color:var(--black);box-shadow:0 1px 3px rgba(16,38,30,.12)}

/* lösenordsfältet med visa/dölj */
.losen-rad{position:relative}
.losen-rad input{padding-right:52px}
.visa-losen{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--mjuk)}
.visa-losen svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.visa-losen[aria-pressed=true]{color:var(--gron2)}
@media (hover:hover){.visa-losen:hover{background:var(--ljus)}}

/* styrkeindikatorn: fyra streck som fylls med färg */
.styrka{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}
.styrka i{height:5px;border-radius:3px;background:var(--linje);transition:background .25s}
.styrka[data-niva="0"] i:first-child{background:var(--rod)}
.styrka[data-niva="1"] i:nth-child(-n+1){background:#E07A2F}
.styrka[data-niva="2"] i:nth-child(-n+2){background:#C9A400}
.styrka[data-niva="3"] i:nth-child(-n+3){background:var(--gron3)}
.styrka[data-niva="4"] i{background:var(--gron)}
.regler{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.regler .styrka-text{flex-basis:100%;font-weight:600;color:var(--mjuk);min-height:0}
.regler .styrka-text:empty{display:none}
.regel{display:inline-flex;align-items:center;gap:6px}
.regel:before{content:"";width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #C5D0CB;flex:none;transition:background .2s,box-shadow .2s}
.regel.ok{color:var(--gron2)}
.regel.ok:before{background:var(--gron3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:none}
.regler .tips{flex-basis:100%;color:var(--svag)}

/* länkar och avdelare */
.textlank{color:var(--gron2);font-weight:600;font-size:14px;padding:6px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.glomt{display:block;margin:-6px 0 14px auto}
.eller{display:flex;align-items:center;gap:12px;color:var(--svag);font-size:13px;margin:18px 0 14px}
.eller:before,.eller:after{content:"";flex:1;height:1px;background:var(--linje)}
.knapp.kontur svg{stroke:var(--gron2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.liten-not.mitten{text-align:center;margin:8px 0 0}
.inlogg .knapp-rad .knapp.sekundar{padding:12px 6px;font-size:14.5px}
.inlogg .knapp.sekundar{margin-top:6px}
.inlogg form .oppenhet{text-align:left}

/* dolt användarnamn för lösenordshanteraren: inte display:none (då ignoreras det) */
.dold-anv{position:absolute!important;left:-10000px;width:1px;height:1px;opacity:0}

/* inloggningen på bred skärm: smal kolumn */
@media (min-width:700px){.inlogg{max-width:468px;margin:0 auto}}