/* Kvalitetskompassen – all CSS är scopad under .kk så att den fungerar i vilket
   WordPress-tema som helst, och så att temat inte kan påverka utseendet. */
.kk{
  --ink:#0f2233; --muted:#5a6a79; --line:#e3e9ef; --page:#f6f8fa; --card:#ffffff;
  --brand:#16558f; --brand-dk:#0f3f6c; --brand-soft:#e8eff7;
  --accent:#a4560f; --accent-soft:#fbf0e2;
  --ok:#1d6b45; --ok-soft:#e6f2ec; --gap:#9b2c2c; --gap-soft:#f9eaea; --na:#eef2f6;
  --radius:14px; --maxw:800px;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.55; color:var(--ink);
  max-width:var(--maxw); margin:0 auto; padding:8px 0 40px;
  -webkit-font-smoothing:antialiased;
}
.kk,.kk *{box-sizing:border-box}
.kk h1,.kk h2,.kk h3{line-height:1.25; margin:0 0 .4em; font-family:inherit; color:inherit; font-weight:700; text-transform:none; letter-spacing:normal}
.kk h1{font-size:clamp(1.7rem,4.5vw,2.4rem); letter-spacing:-.01em}
.kk h2{font-size:1.3rem}
.kk h3{font-size:1.02rem}
.kk p{margin:0 0 1em; color:inherit}
.kk a{color:var(--brand)}
.kk .lead{font-size:1.08rem; color:var(--muted)}
.kk .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; box-shadow:0 1px 2px rgba(15,34,51,.04)}
.kk .card + .card{margin-top:16px}
.kk .eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand); margin:0 0 10px}
.kk ul.ticks{list-style:none; padding:0; margin:0 0 22px}
.kk ul.ticks li{position:relative; padding:5px 0 5px 30px; margin:0}
.kk ul.ticks li::before{content:""; position:absolute; left:4px; top:13px; width:9px; height:9px; border-radius:50%; background:var(--brand)}
.kk .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:650;
  background:var(--brand); color:#fff; border:1px solid var(--brand); border-radius:10px;
  padding:13px 22px; cursor:pointer; text-decoration:none; transition:background .15s; box-shadow:none
}
.kk .btn:hover{background:var(--brand-dk); color:#fff}
.kk .btn:focus-visible{outline:3px solid #7aa9d6; outline-offset:2px}
.kk .btn.ghost{background:#fff; color:var(--brand); border-color:#c3d4e5}
.kk .btn.ghost:hover{background:var(--brand-soft); color:var(--brand-dk)}
.kk .btn.sm{padding:9px 15px; font-size:.92rem; font-weight:600}
.kk .btnrow{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px}
.kk .spacer{flex:1}
.kk .prog{margin:0 0 20px}
.kk .prog .meta{display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); margin-bottom:7px}
.kk .prog .track{height:7px; background:#e6ebf1; border-radius:99px; overflow:hidden}
.kk .prog .fill{height:100%; background:var(--brand); border-radius:99px; transition:width .25s ease}
.kk .q{padding:18px 0; border-top:1px solid var(--line)}
.kk .q:first-of-type{border-top:0; padding-top:4px}
.kk .q .qtext{font-weight:650; margin:0 0 12px; display:flex; gap:10px}
.kk .q .qnum{color:var(--muted); font-weight:600; flex:none}
.kk .q .qhint{font-size:.9rem; color:var(--muted); font-weight:400; margin:-6px 0 12px 26px}
.kk .opts{display:grid; gap:8px}
.kk .opt{display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line); border-radius:10px; padding:11px 13px; cursor:pointer; background:#fff; transition:border-color .12s, background .12s; margin:0}
.kk .opt:hover{border-color:#b8cde0; background:#fafcfe}
.kk .opt input{margin:3px 0 0; accent-color:var(--brand); flex:none; width:17px; height:17px; opacity:1; position:static}
.kk .opt.checked{border-color:var(--brand); background:var(--brand-soft)}
.kk .opt.dk{border-style:dashed}
.kk .opt.dk span{color:var(--muted)}
.kk .opt.dk.checked span{color:var(--brand-dk)}
.kk .opt span{font-size:.97rem}
.kk .q.missing .qtext{color:#8f2c2c}
.kk .q.missing .opts{outline:2px solid #e8b4b4; outline-offset:6px; border-radius:12px}
.kk .err{color:#8f2c2c; font-size:.9rem; margin:10px 0 0; display:none}
.kk .err.show{display:block}
.kk .pf{padding:14px 0; border-top:1px solid var(--line)}
.kk .pf:first-of-type{border-top:0; padding-top:0}
.kk .pf .lbl{display:block; font-weight:650; margin-bottom:9px}
.kk .chips{display:flex; flex-wrap:wrap; gap:8px}
.kk .chip{border:1px solid var(--line); border-radius:99px; padding:8px 15px; cursor:pointer; background:#fff; font-size:.94rem; margin:0}
.kk .chip:hover{border-color:#b8cde0}
.kk .chip.checked{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-dk); font-weight:600}
.kk .chip input{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px}
.kk .score{display:flex; flex-wrap:wrap; gap:24px; align-items:center}
.kk .score .big{font-size:3.4rem; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--brand-dk)}
.kk .score .big small{font-size:1.1rem; font-weight:600; color:var(--muted); letter-spacing:0}
.kk .lvl{display:inline-block; background:var(--brand-soft); color:var(--brand-dk); border-radius:99px; padding:5px 14px; font-weight:700; font-size:.95rem}
.kk .bars{margin:6px 0 0}
.kk .bar{padding:11px 0; border-top:1px solid var(--line)}
.kk .bar:first-child{border-top:0}
.kk .bar .top{display:flex; justify-content:space-between; gap:12px; font-size:.95rem; margin-bottom:6px}
.kk .bar .nm{font-weight:600}
.kk .bar .vl{font-variant-numeric:tabular-nums; font-weight:700; color:var(--brand-dk); flex:none}
.kk .bar.prio .vl{color:var(--accent)}
.kk .bar.na .vl{color:var(--muted); font-weight:600}
.kk .bar .track{height:10px; background:#eef2f6; border-radius:99px; overflow:hidden}
.kk .bar .fill{height:100%; background:var(--brand); border-radius:99px; transition:width .5s ease}
.kk .bar.prio .fill{background:var(--accent)}
.kk .bar.na .track{background:repeating-linear-gradient(135deg,#eef2f6,#eef2f6 6px,#e2e8ee 6px,#e2e8ee 12px)}
.kk .tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:2px 7px; margin-left:8px; vertical-align:1px}
.kk .tag.grey{color:var(--muted); background:var(--na)}
.kk .rec{border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:16px 18px; margin-bottom:12px; background:#fff}
.kk .rec .rank{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.kk .rec h3{margin:4px 0 2px}
.kk .rec .sub{color:var(--muted); font-size:.9rem; margin:0 0 10px}
.kk .rec ul{margin:0; padding-left:20px}
.kk .rec li{margin:4px 0}
.kk .tpl{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line)}
.kk .tpl .tl{font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 7px}
.kk .tpl .items{display:flex; flex-wrap:wrap; gap:6px}
.kk .tpl .items span{font-size:.87rem; background:var(--brand-soft); color:var(--brand-dk); border-radius:6px; padding:4px 9px}
.kk .comp{margin:6px 0 0}
.kk .crow{display:flex; gap:12px; align-items:baseline; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line)}
.kk .crow:first-child{border-top:0}
.kk .crow .cn{font-weight:600; font-size:.96rem}
.kk .crow .ch{display:block; font-weight:400; font-size:.87rem; color:var(--muted)}
.kk .pill{flex:none; font-size:.8rem; font-weight:700; border-radius:99px; padding:3px 11px; white-space:nowrap}
.kk .pill.ok{color:var(--ok); background:var(--ok-soft)}
.kk .pill.delvis{color:var(--accent); background:var(--accent-soft)}
.kk .pill.gap{color:var(--gap); background:var(--gap-soft)}
.kk .pill.okant{color:var(--muted); background:var(--na)}
.kk .pill.na{color:#93a1ad; background:#f7f9fb}
.kk .sums{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.kk .sums .s{border:1px solid var(--line); border-radius:9px; padding:8px 13px; font-size:.9rem}
.kk .sums .s b{display:block; font-size:1.35rem; line-height:1.1; font-variant-numeric:tabular-nums}
.kk .sums .s.gap b{color:var(--gap)} .kk .sums .s.okant b{color:var(--muted)}
.kk .sums .s.delvis b{color:var(--accent)} .kk .sums .s.ok b{color:var(--ok)}
.kk .cta{background:var(--brand-dk); color:#fff; border:0}
.kk .cta h2{color:#fff}
.kk .cta p{color:#d5e3f0}
.kk .cta .btn{background:#fff; color:var(--brand-dk); border-color:#fff}
.kk .cta .btn:hover{background:#e8eff7; color:var(--brand-dk)}
.kk .cta .btn.line{background:transparent; color:#fff; border-color:#5b87b3}
.kk .cta .btn.line:hover{background:#14497b; color:#fff}
.kk .field,.kk .lrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.kk .field input[type=email],.kk .lrow input[type=text]{flex:1 1 200px; font:inherit; padding:12px 14px; border:1px solid #c3d4e5; border-radius:10px; background:#fff; color:var(--ink); min-width:0}
.kk .cta h3{color:#fff; font-size:1.05rem}
.kk .btn[disabled]{opacity:.55; cursor:not-allowed}
.kk .kkp{padding:14px 0; border-top:1px solid var(--line)}
.kk .kkp:first-of-type{border-top:0; padding-top:2px}
.kk .kkp h3{margin:0 0 2px}
.kk .kkp ul{margin:8px 0 0; padding-left:20px}
.kk .kkp li{margin:6px 0}
.kk .kkp-omr{display:inline-block; font-size:.8rem; color:var(--muted); background:var(--na); border-radius:5px; padding:1px 7px; margin-left:4px; white-space:nowrap}
.kk-leverans .btn.sm{margin:0 6px 6px 0}
.kk .consent{display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color:#c9dcec; margin-top:12px}
.kk .consent input{margin-top:3px; accent-color:#fff}
.kk .note{font-size:.85rem; color:var(--muted)}
.kk .callout{background:var(--brand-soft); border-radius:10px; padding:14px 16px; font-size:.94rem}
.kk .faq{margin-top:16px}
.kk .faq details{border-top:1px solid var(--line); padding:12px 0}
.kk .faq details:first-of-type{border-top:0}
.kk .faq summary{cursor:pointer; font-weight:600}
.kk .hidden{display:none !important}
.kk .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media print{
  .kk{background:#fff; max-width:none}
  .kk .noprint{display:none !important}
  .kk .card{break-inside:avoid; box-shadow:none}
}