/* Svara — konto- och onboardingytor (G-onboarding). Läser tokens från /tokens.css (B33) men har egna reservvärden.
   Delar klasser: .kn (sidskal) .kn-topp .kn-steg .kn-kort .kn-falt .kn-knapp .kn-sso .kn-ruta .kn-fel .kn-info. Onboardingflödet (vyer/onboarding.css) bygger på samma. */
.kn{--k-bg:var(--bg,#fff);--k-yta:var(--yta,#fff);--k-panel:var(--panel,#f4f5f8);--k-ink:var(--ink,#0b1533);--k-text:var(--text,#1d2433);--k-mut:var(--mut,#5d6578);--k-linje:var(--linje,#e3e6ee);--k-linje2:var(--linje2,#d5d9e4);
  --k-acc:var(--acc,#2c5cff);--k-accfg:var(--acc-fg,#fff);--k-accsvag:var(--acc-svag,#eaf0ff);--k-ok:var(--ok,#0f8a55);--k-oksvag:var(--ok-svag,#e3f5ec);--k-fel:var(--fel,#c4321f);--k-felsvag:var(--fel-svag,#fbe6e2);--k-var:var(--var,#b26a00);--k-varsvag:var(--var-svag,#fbf0dc);
  --k-knapp:var(--knapp,#0b1533);--k-knappfg:var(--knapp-fg,#fff);--k-sans:var(--sans,"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif);--k-disp:var(--disp,"Newsreader",ui-serif,Georgia,serif);
  --k-sk:var(--sk-2,0 1px 2px rgba(11,21,51,.05),0 8px 24px -8px rgba(11,21,51,.12))}
body.kn{margin:0;background:var(--k-bg);color:var(--k-text);font:16px/1.55 var(--k-sans);-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}
.kn *{box-sizing:border-box}
.kn :focus-visible{outline:3px solid var(--k-acc);outline-offset:2px;border-radius:6px}
.kn a{color:var(--k-acc)}
.kn a.kn-knapp{color:var(--k-knappfg)}.kn a.kn-knapp.sek{color:var(--k-ink)}
.kn .dold{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kn .hopp{position:absolute;left:12px;top:-60px;background:var(--k-knapp);color:var(--k-knappfg);padding:10px 14px;border-radius:10px;z-index:9;text-decoration:none}
.kn .hopp:focus{top:10px}
.kn-topp{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;max-width:1080px;margin:0 auto}
.kn-logo{display:inline-flex;align-items:center;gap:10px;font:600 20px/1 var(--k-disp);color:var(--k-ink);text-decoration:none;letter-spacing:-.01em;min-height:44px}
.kn-logo i{width:26px;height:26px;border-radius:8px;background:var(--k-ink);position:relative;flex:none}
.kn-logo i:after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--k-acc)}
.kn-topp nav{display:flex;gap:6px;align-items:center}
.kn-lank{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--k-ink);text-decoration:none;font-weight:500;border-radius:10px}
.kn-lank:hover{background:var(--k-panel)}
.kn-tema{background:none;border:0;min-width:44px;min-height:44px;border-radius:10px;color:var(--k-mut);cursor:pointer}
/* förloppsindikator */
.kn-steg{max-width:560px;margin:4px auto 0;padding:0 16px}
.kn-steg ol{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.kn-steg li{flex:1;height:5px;border-radius:99px;background:var(--k-linje2);transition:background .2s}
.kn-steg li.klar{background:var(--k-ok)}.kn-steg li.nu{background:var(--k-acc)}
.kn-steg p{margin:10px 0 0;font-size:14px;color:var(--k-mut);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kn-steg p b{color:var(--k-ink);font-weight:600}
.kn-steg .sparad{color:var(--k-ok)}
/* huvudyta */
.kn-yta{max-width:560px;margin:0 auto;padding:22px 16px 56px}
.kn-yta h1{font:400 clamp(30px,8vw,42px)/1.08 var(--k-disp);letter-spacing:-.02em;color:var(--k-ink);margin:0 0 10px;overflow-wrap:anywhere}
.kn-ingress{margin:0 0 22px;color:var(--k-mut);font-size:17px}
.kn-kort{background:var(--k-yta);border:1px solid var(--k-linje);border-radius:20px;padding:20px;box-shadow:var(--k-sk)}
@media (max-width:360px){.kn-kort{padding:16px;border-radius:16px}}
.kn-falt{display:grid;gap:6px;margin:0 0 16px}
.kn-falt label{font-weight:600;color:var(--k-ink);font-size:15px}
.kn-falt label small{font-weight:400;color:var(--k-mut)}
.kn-falt input,.kn-falt select,.kn-falt textarea{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--k-linje2);border-radius:12px;background:var(--k-yta);color:var(--k-ink);font:inherit;font-size:16px}
.kn-falt textarea{min-height:96px;resize:vertical}
.kn-falt input:focus,.kn-falt select:focus,.kn-falt textarea:focus{outline:none;border-color:var(--k-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-acc) 28%,transparent)}
.kn-falt [aria-invalid=true]{border-color:var(--k-fel)}
.kn-falt .hj{font-size:14px;color:var(--k-mut);margin:0}
.kn-falt .fel{font-size:14px;color:var(--k-fel);margin:0;font-weight:500}
.kn-falt .fel a{color:inherit;font-weight:700}
.kn-knapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:14px;border:1.5px solid transparent;font:600 16px/1 var(--k-sans);cursor:pointer;text-decoration:none;width:100%;background:var(--k-knapp);color:var(--k-knappfg)}
.kn-knapp:hover{filter:brightness(1.08)}
.kn-knapp[disabled]{opacity:.55;cursor:not-allowed}
.kn-knapp.sek{background:var(--k-yta);color:var(--k-ink);border-color:var(--k-linje2)}
.kn-knapp.sek:hover{background:var(--k-panel);filter:none}
.kn-knapp.text{background:none;color:var(--k-acc);border:0;min-height:44px;width:auto;padding:0 8px}
.kn-sso{display:grid;gap:10px;margin:0 0 18px}
.kn-sso .kn-knapp{font-weight:500}
.kn-sso svg{width:18px;height:18px;flex:none}
.kn-delare{display:flex;align-items:center;gap:12px;color:var(--k-mut);font-size:14px;margin:18px 0}
.kn-delare:before,.kn-delare:after{content:"";flex:1;height:1px;background:var(--k-linje)}
.kn-under{margin:18px 0 0;display:grid;gap:4px;justify-items:center;text-align:center;color:var(--k-mut);font-size:15px}
.kn-fel,.kn-info,.kn-ok{display:flex;gap:10px;padding:12px 14px;border-radius:12px;font-size:15px;margin:0 0 16px;align-items:flex-start}
.kn-fel{background:var(--k-felsvag);color:var(--k-fel)}.kn-info{background:var(--k-accsvag);color:var(--k-ink)}.kn-ok{background:var(--k-oksvag);color:var(--k-ok)}
.kn-fel b,.kn-info b,.kn-ok b{display:block}
.kn-ruta{border:1.5px dashed var(--k-linje2);border-radius:16px;padding:14px;background:var(--k-panel);margin:0 0 18px}
.kn-ruta small{display:block;font-size:13px;color:var(--k-mut);margin:0 0 8px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kn-ruta code{display:block;font:500 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;color:var(--k-ink);margin:0 0 12px}
.kn-bock{width:56px;height:56px;border-radius:50%;background:var(--k-oksvag);color:var(--k-ok);display:grid;place-items:center;margin:0 0 16px}
.kn-bock svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kn-snurr{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:kn-v .8s linear infinite}
@keyframes kn-v{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kn-snurr{animation-duration:2s}.kn *{transition:none!important}}
/* kryssruta med länkar (villkor) — hela raden är tryckyta */
.kn-check{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:6px 0;font-weight:400!important;color:var(--k-text)!important;cursor:pointer;font-size:15px!important;line-height:1.45}
.kn-check input{flex:none;width:24px;height:24px;min-height:0!important;margin:1px 0 0;padding:0;accent-color:var(--k-acc)}
.kn-check a{text-underline-offset:3px}
[hidden]{display:none!important}
@media (min-width:880px){.kn-yta{padding-top:44px}}

/* ===== B57 premium ===== */
.kn-kort{border-radius:24px;box-shadow:0 1px 2px rgba(11,21,51,.05),0 24px 56px -28px rgba(11,21,51,.28)}
.kn-falt input,.kn-falt select,.kn-falt textarea{border-radius:14px;transition:border-color .16s,box-shadow .16s}
.kn-knapp{border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -12px rgba(11,21,51,.6);transition:transform .16s,filter .16s,box-shadow .16s}
.kn-knapp:hover{transform:translateY(-1px)}.kn-knapp:active{transform:scale(.985)}
.kn-knapp.sek,.kn-knapp.text{box-shadow:none}
.kn-yta h1{letter-spacing:-.03em}
.kn-ruta{border-radius:18px}
@media (prefers-reduced-motion:reduce){.kn-knapp{transition:none}}

/* B58: flikar (lösenord / länk) + visa-dölj lösenord */
.kn-flikar{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--k-panel);border-radius:14px;margin:0 0 18px}
.kn-flikar button{min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--k-mut);font:600 15px/1 var(--k-sans);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.kn-flikar button[aria-selected=true]{background:var(--k-yta);color:var(--k-ink);box-shadow:0 1px 2px rgba(11,21,51,.08),0 4px 12px -6px rgba(11,21,51,.18)}
.kn-losen{position:relative}.kn-losen input{padding-right:52px}
.kn-visa{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;color:var(--k-mut);border-radius:10px;display:grid;place-items:center;cursor:pointer}
.kn-visa:hover{background:var(--k-panel);color:var(--k-ink)}
.kn-visa svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kn-visa[aria-pressed=true] svg{stroke:var(--k-acc)}
.kn-under>a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}