/* Pengasmart – gemensam stil för verktyg, quiz och ordlista. Bygger på /stil.css och guidernas utseende. */
.flinks{display:flex;flex-wrap:wrap;gap:8px 16px}.flinks a{margin:0}
.crumbs{font-size:13px;color:var(--text2);padding-top:6px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.art{max-width:740px}.art h1{font-size:clamp(30px,5.4vw,46px)}.art h2{margin-top:34px;font-size:24px}.art h3{margin-top:20px;font-size:18px;font-weight:800}
.art p,.art li{color:var(--text2);margin-top:12px;font-size:16px;line-height:1.7}.art ul,.art ol{padding-left:22px}.art strong{color:var(--text)}
.art a{color:var(--cyan);text-decoration:underline}.art a.btn{color:#fff;text-decoration:none}
.meta{font-size:13px;color:var(--text2);margin-top:14px}
.cta{background:linear-gradient(150deg,rgba(74,120,255,.14),rgba(0,207,255,.05));border:1px solid rgba(74,120,255,.35);border-radius:var(--r);padding:20px;margin:24px 0;display:flex;flex-direction:column;gap:10px}
.cta b{font-size:18px;color:var(--text);letter-spacing:-.3px}.cta p{margin:0;font-size:14.5px}.cta .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.cta small{display:block}
.btn.lg{padding:14px 24px;font-size:15px}
.btn.ghost{background:transparent}
.tip{background:var(--bg2);border-left:3px solid var(--cyan);border-radius:var(--r2);padding:12px 16px;margin-top:16px}.tip p{margin:0}
.calc{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:20px;margin-top:22px}.calc h2,.calc h3{margin:0 0 4px}
.calc .g{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}@media(max-width:520px){.calc .g{grid-template-columns:1fr}}
.calc .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}@media(max-width:620px){.calc .g3{grid-template-columns:1fr 1fr}}@media(max-width:400px){.calc .g3{grid-template-columns:1fr}}
.calc .out{display:block;margin-top:14px;padding:14px;border-radius:var(--r2);background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:15px;line-height:1.6}
.calc .out b,.hl{color:var(--cyan)}
.calc label small{font-weight:500}
table.t{width:100%;border-collapse:collapse;margin-top:14px;font-size:14.5px}.t th,.t td{padding:9px 8px;border-bottom:1px solid var(--border);text-align:left;color:var(--text2)}.t th{color:var(--text);font-weight:800}.t td.n,.t th.n{text-align:right;font-variant-numeric:tabular-nums}
details{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:12px 16px;margin-top:10px}details summary{cursor:pointer;font-weight:800;color:var(--text);font-size:16px}details p{margin-top:8px}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:14px}.rel a{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--text);font-weight:800}.rel a span{display:block;color:var(--text2);font-weight:500;font-size:13.5px;margin-top:4px}.rel a:hover{border-color:var(--blue)}
.disc{font-size:13px;color:var(--text2);margin-top:26px;padding-top:14px;border-top:1px solid var(--border)}
@media(max-width:520px){nav .btn{padding:9px 12px;font-size:13px}}
@media(max-width:380px){.logo{font-size:0;gap:0}.logo i{font-size:16px}}

/* Resultatrutor */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:10px;margin-top:16px}
.kpi{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px;min-width:0}
.kpi span{display:block;font-size:12px;color:var(--text2);font-weight:700}
.kpi b{display:block;font-size:clamp(19px,4.6vw,24px);letter-spacing:-.5px;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi.hl{border-color:rgba(0,207,255,.45);background:linear-gradient(150deg,rgba(0,207,255,.10),rgba(74,120,255,.05))}.kpi.hl b{color:var(--cyan)}
.kpi.ok b{color:var(--green)}
.insight{margin-top:12px;color:var(--text2);font-size:15px}.insight b{color:var(--text)}

/* Diagram */
.chart{margin-top:16px}.chart svg{display:block;width:100%;height:auto}
.chart .ax{fill:var(--text2);font:600 11px var(--font)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:13px;color:var(--text2)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* Snabbval och flikar */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font:700 13px var(--font);cursor:pointer;min-height:36px}
.chip:hover{border-color:var(--blue)}
.seg{display:flex;gap:6px;margin:14px 0 4px;background:var(--bg3);padding:4px;border-radius:var(--r2);border:1px solid var(--border)}
.seg button{flex:1;padding:10px 8px;border-radius:9px;border:0;background:transparent;color:var(--text2);font:800 14px var(--font);cursor:pointer;min-height:44px}
.seg button[aria-selected="true"]{background:var(--blue);color:#fff}
.check{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:14px;color:var(--text2);cursor:pointer}.check input{width:20px;height:20px;accent-color:var(--blue)}

/* Abonnemangslista */
.subs{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.sub{display:grid;grid-template-columns:1fr 120px auto auto;gap:8px;align-items:center}
.sub input{padding:10px 12px}
.sub .keep{padding:9px 10px;border-radius:var(--r2);border:1px solid var(--border2);background:var(--bg3);color:var(--green);font:800 12.5px var(--font);cursor:pointer;min-height:42px;white-space:nowrap}
.sub .keep[aria-pressed="true"]{color:var(--red);border-color:rgba(255,112,136,.5);background:rgba(255,112,136,.08)}
.sub .del{width:42px;height:42px;border-radius:var(--r2);border:1px solid var(--border);background:transparent;color:var(--text2);font-size:20px;cursor:pointer}
.sub .del:hover{color:var(--red);border-color:var(--red)}
@media(max-width:520px){.sub{grid-template-columns:1fr auto 42px;padding-bottom:10px;border-bottom:1px solid var(--border)}.sub input:first-child{grid-column:1 / -1}.sub .keep{grid-column:2;grid-row:2}.sub .del{grid-column:3;grid-row:2}}

/* 52 veckor */
.bar{height:12px;border-radius:999px;background:var(--bg3);border:1px solid var(--border);overflow:hidden;margin-top:14px}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .35s}
.weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:16px}
.wk{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 10px;border-radius:var(--r2);border:1px solid var(--border2);background:var(--bg3);color:var(--text);cursor:pointer;font:600 12px var(--font);text-align:left;min-height:64px}
.wk b{font-size:15px;font-variant-numeric:tabular-nums}.wk small{font-size:11px}
.wk:hover{border-color:var(--blue)}
.wk[aria-pressed="true"]{background:rgba(45,216,150,.13);border-color:rgba(45,216,150,.55)}
.wk[aria-pressed="true"] b::after{content:" ✓";color:var(--green)}
.wk.now{box-shadow:0 0 0 2px var(--amber) inset}
.row2{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* Hubb */
.gg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:24px}
.gcard{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.gcard:hover{border-color:#4a78ff;transform:translateY(-2px)}
.gcard .ic{font-size:28px;line-height:1}.gcard b{font-size:19px}.gcard span:last-child{color:var(--text2);font-size:14px;line-height:1.5}
.sec-h{margin-top:40px}

/* Quiz */
.quiz{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:22px;margin-top:22px}
.qtop{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--text2);font-weight:700}
.qq{font-size:clamp(19px,4.4vw,23px);font-weight:800;letter-spacing:-.4px;line-height:1.35;margin-top:14px;color:var(--text)}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.opt{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:13px 14px;border-radius:var(--r2);border:1px solid var(--border2);background:var(--bg3);color:var(--text);font:600 15.5px/1.4 var(--font);cursor:pointer;min-height:52px}
.opt:hover:not([disabled]){border-color:var(--blue)}
.opt .k{flex:0 0 28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--bg4,#1a2030);font-weight:800;font-size:13px;color:var(--text2)}
.opt[disabled]{cursor:default}
.opt.ok{border-color:rgba(45,216,150,.7);background:rgba(45,216,150,.12)}.opt.ok .k{background:var(--green);color:#03140d}
.opt.bad{border-color:rgba(255,112,136,.7);background:rgba(255,112,136,.10)}.opt.bad .k{background:var(--red);color:#2a0710}
.expl{margin-top:14px;padding:14px;border-radius:var(--r2);background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:15px}
.expl b{color:var(--text)}
.qact{display:flex;justify-content:flex-end;margin-top:14px}
.score{font-size:clamp(54px,14vw,84px);font-weight:800;letter-spacing:-3px;line-height:1;margin-top:8px;background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.lvl{font-size:22px;font-weight:800;margin-top:6px}
.review{margin-top:14px}.review li{margin-top:8px}
.qbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* Ordlista */
.search{position:sticky;top:0;z-index:5;padding:12px 0;background:linear-gradient(var(--bg) 75%,rgba(6,8,12,0))}
.search input{font-size:16px;padding:13px 14px}
.letters{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.letters a{min-width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--border);background:var(--bg2);text-decoration:none;font-weight:800;font-size:14px;color:var(--text)}
.letters a:hover{border-color:var(--blue)}
.lgrp h2{margin-top:30px;font-size:22px;color:var(--cyan)}
.term{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px;margin-top:10px;scroll-margin-top:90px}
.term:target{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,207,255,.25)}
.term dt{font-weight:800;font-size:17px;color:var(--text)}
.term dd{margin:6px 0 0;color:var(--text2);font-size:15.5px;line-height:1.65}
.term dd a{color:var(--cyan)}
.empty{display:none;margin-top:18px;color:var(--text2)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;transition:.25s;z-index:50;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

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

/* Utskrift (52 veckor m.fl.) */
@media print{
  body{background:#fff;color:#000;font-size:12px}body::before{display:none}
  nav,footer,.cta,.rel,.crumbs,.noprint,.disc,details,.toc{display:none!important}
  .art p,.art li,.kpi span,.wk small{color:#333}
  .calc,.kpi,.wk{background:#fff;border-color:#999;box-shadow:none}
  .kpi b,.wk b,.hl,.calc .out b{color:#000}
  .weeks{grid-template-columns:repeat(8,1fr);gap:4px}
  .wk{min-height:0;padding:5px 6px}
  .wk[aria-pressed="true"]{background:#e6f7ef}
  .bar{border-color:#999}.bar i{background:#555}
  h1{font-size:24px}
}
.quiz .qq,.quiz .lvl{color:var(--text)}.quiz .qq{margin-top:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.lgrp{padding:0}.lgrp h2{margin-top:26px}

/* Design 2027 – finish */
.kpi{box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.kpi:hover{border-color:var(--border2);transform:translateY(-2px)}
.kpi.hl{box-shadow:0 8px 30px rgba(0,207,255,.10),inset 0 1px 0 rgba(255,255,255,.08)}
input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.kpi{transition:none}.kpi:hover{transform:none}}