/* Elprisverktyget – natt-tema. Färgpar kontrollerade mot WCAG AA med scripts/contrast.py. */
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:optional}
:root{--bg:#070f26;--bg2:#0b1838;--surf:#0f1f45;--surf2:#152a5c;--line:#26427c;--fg:#eaf1ff;--muted:#a9b9da;--y:#ffd23f;--c:#3ee0ff;--link:#7fe9ff;--g:#3ddc84;--m:#f5a524;--r:#ff6b6b;--ink:#071226;--hl:#ffd23f;--radius:14px;--glow-c:0 0 18px rgba(62,224,255,.35);--glow-y:0 0 22px rgba(255,210,63,.45);--disp:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--fg);background:radial-gradient(1200px 500px at 85% -120px,rgba(62,224,255,.10),transparent 70%),radial-gradient(900px 420px at -10% 0,rgba(255,210,63,.06),transparent 70%),var(--bg);background-repeat:no-repeat}
a{color:var(--link);text-underline-offset:3px}a:hover{color:#fff}
:focus-visible{outline:3px solid var(--y);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px rgba(255,210,63,.25)}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-999px;top:8px;z-index:20}.skip:focus{left:8px;background:var(--y);color:var(--ink);padding:10px 14px;border-radius:8px;font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.1em;height:1.1em;vertical-align:-.18em;margin-right:.4em;flex:none}

/* Sidhuvud */
header.site{position:relative;z-index:2;background:rgba(7,15,38,.82);border-bottom:1px solid rgba(62,224,255,.18);backdrop-filter:blur(6px)}
.hdr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-top:8px;padding-bottom:2px}
.brand{color:#fff;font:700 1.15rem/1 var(--disp);letter-spacing:.01em;text-decoration:none;display:inline-flex;gap:10px;align-items:center;min-height:48px}
.brand .logo{filter:drop-shadow(0 0 8px rgba(62,224,255,.45))}
.brand:hover{color:var(--y)}
header nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;max-width:100%}
header nav ul::-webkit-scrollbar{display:none}
@media(max-width:760px){header nav ul{-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent);padding-right:28px}}
.hdr>nav{max-width:100%}
header nav a{color:#dbe6ff;text-decoration:none;padding:12px 10px;display:inline-block;border-radius:10px;min-height:44px;white-space:nowrap;font-weight:500}
header nav a:hover{color:#fff;background:rgba(62,224,255,.10)}
header nav a[aria-current]{color:var(--y);background:rgba(255,210,63,.10);box-shadow:inset 0 -2px 0 var(--y)}
.areas{display:flex;align-items:center;gap:6px;padding-bottom:10px;flex-wrap:wrap}
.areas-l{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.areas a{color:#fff;text-decoration:none;font:600 .9rem/1 var(--disp);padding:0 14px;min-height:36px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surf)}
.areas a:hover{border-color:var(--c);box-shadow:var(--glow-c)}
.areas a[aria-current]{background:var(--c);color:var(--ink);border-color:var(--c);box-shadow:var(--glow-c)}

/* Typografi */
main{padding-bottom:40px;min-height:60vh}
main>.wrap{padding-top:10px}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.01em;line-height:1.2}
h1{font-size:clamp(1.7rem,4.2vw,2.5rem);margin:.5em 0 .3em}
h2{font-size:clamp(1.25rem,2.6vw,1.55rem);margin:1.6em 0 .5em}h3{font-size:1.08rem;margin:1.1em 0 .4em}
h2.sec{display:flex;align-items:center;gap:2px}h2.sec .ic{color:var(--y);filter:drop-shadow(0 0 6px rgba(255,210,63,.6))}
.lead{font-size:1.1rem;color:#cfdbf5;max-width:68ch}
.muted{color:var(--muted)}.small{font-size:.9rem}
.crumbs{font-size:.9rem;color:var(--muted);margin-top:8px}.crumbs a{color:var(--muted)}.crumbs a:hover{color:#fff}
.phead{display:flex;align-items:center;gap:14px;margin-top:.4em}.phead h1{margin:.2em 0}
.pic{width:48px;height:48px;flex:none;padding:10px;border-radius:14px;color:var(--y);background:linear-gradient(145deg,var(--surf2),var(--surf));border:1px solid var(--line);box-shadow:var(--glow-y)}
.pmap{width:40px;height:88px;flex:none;filter:drop-shadow(0 0 10px rgba(255,210,63,.35))}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#040a1c 0%,#0a1840 55%,#10275a 100%);border-bottom:1px solid rgba(62,224,255,.25);margin-top:-1px}
.hero-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-art .stars circle{fill:#dfe9ff;opacity:.75}
.hero-art .moon{fill:#fff3c4;filter:drop-shadow(0 0 14px rgba(255,236,170,.6))}.hero-art .moon-cut{fill:#06102a}
.hero-art .hill2{fill:#0b1a40}.hero-art .hill{fill:#061230}
.hero-art .city rect{fill:#081536}.hero-art .win rect{fill:var(--y);opacity:.8}
.hero-art .py{fill:none;stroke:#2c4f8f;stroke-width:2.2;stroke-linejoin:round}
.hero-art .pyl{fill:none;stroke:#203f78;stroke-width:1}
.hero-art .ins{stroke:#6c8fcf;stroke-width:2}
.hero-art .wire{fill:none;stroke:#3a5d9b;stroke-width:1.2;opacity:.9}
.hero-art .pulse{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 98;opacity:.55;animation:flow 11s linear infinite}
.hero-art .pulse.p1{animation-delay:-4s;stroke:var(--y)}.hero-art .pulse.p2,.hero-art .pulse.p3{display:none}
@keyframes flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.hero-in{position:relative;display:grid;gap:18px;padding-top:26px;padding-bottom:40px}
@media(min-width:880px){.hero-in{grid-template-columns:1.25fr .9fr;align-items:center;padding-top:44px;padding-bottom:70px}}
.hero h1{margin:.15em 0 .35em;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero .lead{text-shadow:0 1px 10px rgba(0,0,0,.8)}
.glow{color:var(--y);text-shadow:0 0 24px rgba(255,210,63,.45)}
.kicker{display:inline-flex;align-items:center;margin:0;padding:6px 12px;border-radius:999px;background:rgba(62,224,255,.12);border:1px solid rgba(62,224,255,.35);color:#c8f6ff;font:600 .85rem/1.2 var(--disp);letter-spacing:.03em}
.kicker .ic{color:var(--y)}

/* Elmätare */
.meter{position:relative;background:linear-gradient(160deg,rgba(21,42,92,.92),rgba(10,22,54,.95));border:1px solid var(--line);border-radius:22px;padding:16px 18px 14px;box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);text-align:center}
.meter::before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;background:linear-gradient(140deg,var(--c),transparent 40%,transparent 60%,var(--y));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.meter p{margin:0}
.m-area{font:600 .95rem/1.3 var(--disp);color:#dbe6ff}.m-area span{display:block;font:400 .82rem/1.4 system-ui,sans-serif;color:var(--muted)}
.gauge{width:100%;max-width:280px;height:auto;aspect-ratio:200/124;display:block;margin:6px auto 0}
.gauge path.g-b,.gauge path.g-m,.gauge path.g-d{fill:none;stroke-width:14;stroke-linecap:butt}
.g-b{stroke:var(--g)}.g-m{stroke:var(--m)}.g-d{stroke:var(--r)}
.m-billigt .g-m,.m-billigt .g-d,.m-medel .g-b,.m-medel .g-d,.m-dyrt .g-b,.m-dyrt .g-m{opacity:.35}
.m-billigt .g-b{filter:drop-shadow(0 0 6px var(--g))}.m-medel .g-m{filter:drop-shadow(0 0 6px var(--m))}.m-dyrt .g-d{filter:drop-shadow(0 0 6px var(--r))}
.g-t path{stroke:#6f86b8;stroke-width:1.4}
.gauge text{fill:var(--muted);font:11px system-ui,sans-serif}
.needle{transform-origin:100px 100px}.needle path{fill:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}
.hub{fill:var(--y);stroke:#0a1636;stroke-width:3}
.m-val{margin-top:2px!important}.m-val b{font:700 clamp(2.6rem,7vw,3.4rem)/1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.m-val span{color:var(--muted);font-size:.95rem}
.m-lvl{display:inline-flex;align-items:center;gap:6px;margin:8px 0 4px!important;padding:6px 14px;border-radius:999px;font:700 1rem/1.2 var(--disp);color:var(--ink)}
.m-lvl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3}
.m-billigt .m-lvl{background:var(--g);box-shadow:0 0 18px rgba(61,220,132,.45)}.m-medel .m-lvl{background:var(--m);box-shadow:0 0 18px rgba(245,165,36,.45)}.m-dyrt .m-lvl{background:var(--r);box-shadow:0 0 18px rgba(255,107,107,.45)}
.m-billigt .m-val b{color:var(--g)}.m-medel .m-val b{color:var(--m)}.m-dyrt .m-val b{color:var(--r)}
.m-msg{font-weight:600;color:#e3ecff}
.m-ctx{font-size:.8rem;color:var(--muted);margin-top:6px!important;line-height:1.45}
.hero-meter{min-height:420px}
@media(min-width:880px){.hero-meter{min-height:440px}}
@media(max-width:879px){.gauge{max-width:230px}.hero-in{padding-bottom:28px}.hero-art{height:min(100%,640px);opacity:.75}.hero-art .moon,.hero-art .moon-cut{display:none}.hero-txt{position:relative}}
.now-panel{display:grid;gap:14px;margin:12px 0}
@media(min-width:760px){.no-meter .kpis{grid-template-columns:repeat(4,1fr)}.now-panel{grid-template-columns:minmax(280px,360px) 1fr;align-items:stretch}.now-panel.no-meter{grid-template-columns:1fr}}

/* Paneler, nyckeltal, kort */
.panel{background:linear-gradient(180deg,rgba(21,42,92,.55),rgba(15,31,69,.55));border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;align-content:stretch}
.kpi{background:linear-gradient(160deg,var(--surf2),var(--surf));border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 14px 18px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.kpi span{display:block;font-size:.85rem;color:var(--muted)}.kpi b{font:700 1.85rem/1.15 var(--disp);display:block;font-variant-numeric:tabular-nums}.kpi small{color:var(--muted)}
.kpi-billigt::after{background:var(--g);box-shadow:0 0 12px var(--g)}.kpi-dyrt::after{background:var(--r);box-shadow:0 0 12px var(--r)}.kpi-medel::after{background:var(--m)}.kpi-tax::after{background:var(--c);box-shadow:0 0 12px var(--c)}
.cards{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
@media(min-width:560px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cards{grid-template-columns:repeat(4,1fr)}.cards.cards3{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;gap:12px;align-items:center;background:linear-gradient(160deg,var(--surf2),var(--surf));border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;text-decoration:none;color:var(--fg);transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--c);box-shadow:var(--glow-c);color:var(--fg)}
.mini-map{width:46px;height:100px;flex:none;filter:drop-shadow(0 0 8px rgba(255,210,63,.3))}
.cbody{display:flex;flex-direction:column;min-width:0}
.card .ar{font:700 1.15rem/1.1 var(--disp);color:var(--y)}.card .nm{font-size:.82rem;color:var(--muted)}
.card b{font:700 1.8rem/1.15 var(--disp);margin-top:4px;font-variant-numeric:tabular-nums}.card small{color:var(--muted);font-size:.8rem}
.card .cw{font-size:.8rem;color:#cfe0ff;margin-top:4px}
.card .lv{align-self:flex-start;margin-top:6px}
.lv{display:inline-block;padding:2px 9px;border-radius:999px;font:700 .78rem/1.5 var(--disp);color:var(--ink);text-transform:capitalize}
.lv-billigt{background:var(--g)}.lv-medel{background:var(--m)}.lv-dyrt{background:var(--r)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:12px 0}
.tile{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px;background:linear-gradient(160deg,var(--surf2),var(--surf));border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--fg);transition:border-color .2s,box-shadow .2s}
.tile .tic{grid-row:1/3;width:44px;height:44px;padding:9px;border-radius:12px;color:var(--y);background:rgba(255,210,63,.08);border:1px solid rgba(255,210,63,.3)}
.tile b{font-family:var(--disp);color:#fff}.tile span{color:var(--muted);font-size:.9rem}
.tile:hover{border-color:var(--y);box-shadow:var(--glow-y);color:var(--fg)}
.tile:hover .tic{color:var(--ink);background:var(--y)}
.cols,.cols3{display:grid;gap:14px}
@media(min-width:760px){.cols{grid-template-columns:1fr 1fr}.cols3{grid-template-columns:repeat(3,1fr)}}
.cols>.tw{margin:0}
.win-list h3{display:flex;align-items:center;margin-top:.2em}.win-list h3 .ic{color:var(--g)}.win-list.dear h3 .ic{color:var(--r)}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:8px 0;border-bottom:1px solid rgba(38,66,124,.6)}ul.plain li:last-child{border-bottom:0}
ul.plain strong{color:var(--g);font-family:var(--disp)}.dear ul.plain li{color:#ffd9d9}

/* Graf */
figure{margin:12px 0}
figure.panel{padding:14px 12px 10px}
.chartbox{display:grid;grid-template-columns:42px 1fr;position:relative;border-radius:10px}
.cy{position:relative;font-size:12px;color:var(--muted);height:220px}
.cy span{position:absolute;right:8px;transform:translateY(-50%);font-variant-numeric:tabular-nums}
.cy .cu{top:-2px;transform:none;font-size:11px;right:auto;left:0;top:-4px}
.plot{position:relative;height:220px;padding-bottom:0;touch-action:pan-y}
@media(min-width:700px){.cy,.plot{height:270px}}
.chart{width:100%;height:100%;display:block;overflow:visible}
.chart .grid{stroke:rgba(120,150,210,.22);stroke-width:1}
.chart .avg{stroke:var(--c);stroke-width:1.5;stroke-dasharray:6 5;opacity:.85}
.chart .cheap{fill:rgba(62,224,255,.10);stroke:none}
.chart .sel{fill:rgba(255,255,255,.10)}
.b-billigt{fill:var(--g)}.b-medel{fill:var(--m)}.b-dyrt{fill:var(--r)}
.chart rect[class^=b-]{opacity:.9;transition:opacity .15s}
.chart rect.on{opacity:1;filter:drop-shadow(0 0 5px #fff)}
.chart .now{stroke:var(--y);stroke-width:2.5;filter:drop-shadow(0 0 4px var(--y))}
.cl-now{position:absolute;top:-2px;transform:translateX(-50%);background:var(--y);color:var(--ink);font:700 11px/1 var(--disp);padding:3px 6px;border-radius:6px;box-shadow:var(--glow-y);pointer-events:none}
.cl-band{position:absolute;top:22px;text-align:center;font-size:11px;color:#bff4ff;pointer-events:none;white-space:nowrap;overflow:visible}
.cx{position:absolute;left:0;right:0;bottom:-20px;height:18px;font-size:12px;color:var(--muted)}
.cx span{position:absolute;transform:translateX(-50%)}
.chartbox{margin-bottom:24px}
.chartbox[tabindex]{cursor:crosshair}
.chartbox[tabindex]:focus-visible{outline-offset:6px}
.ctip{position:absolute;top:18px;width:140px;padding:8px 10px;border-radius:10px;background:rgba(5,12,32,.95);border:1px solid var(--c);box-shadow:var(--glow-c);font-size:.85rem;line-height:1.35;pointer-events:none;display:flex;flex-direction:column;gap:2px;z-index:3}
.ctip b{font-family:var(--disp)}.ctip .lv{align-self:flex-start}
.legend{font-size:.85rem;color:var(--muted);line-height:2}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 5px 0 10px;vertical-align:-1px}
.sw.b-billigt{background:var(--g)}.sw.b-medel{background:var(--m)}.sw.b-dyrt{background:var(--r)}.sw-cheap{background:rgba(62,224,255,.3);border:1px solid var(--c)}.sw-avg{height:0;border-top:2px dashed var(--c);border-radius:0;vertical-align:3px}

/* Tabeller */
.tw{overflow-x:auto;margin:10px 0}
.tw.panel{padding:8px 12px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
caption{text-align:left;font:600 .95rem/1.4 var(--disp);padding:6px 0 8px;color:#dbe6ff}
th,td{padding:8px;border-bottom:1px solid rgba(38,66,124,.7);text-align:left;font-variant-numeric:tabular-nums}
thead th{color:var(--muted);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover{background:rgba(62,224,255,.05)}
th[scope=row] a{font:700 1rem var(--disp);color:var(--y);text-decoration:none}th[scope=row] a:hover{text-decoration:underline}
details{margin:10px 0;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:4px 14px}
details[open]{padding-bottom:10px}
summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;font-family:var(--disp)}
summary::marker{color:var(--c)}

/* Knappar */
.btn{display:inline-flex;align-items:center;gap:2px;background:var(--y);color:var(--ink);border:0;border-radius:12px;padding:12px 18px;font:700 1rem/1.25 var(--disp);text-decoration:none;cursor:pointer;min-height:48px;box-shadow:0 0 0 1px rgba(255,210,63,.6),var(--glow-y);transition:transform .15s,box-shadow .15s}
.btn:hover{color:var(--ink);transform:translateY(-1px);box-shadow:0 0 0 1px #fff3b0,0 0 30px rgba(255,210,63,.6)}
.btn2{background:rgba(62,224,255,.08);color:#d6f8ff;box-shadow:inset 0 0 0 2px var(--c)}
.btn2:hover{color:#fff;background:rgba(62,224,255,.18);box-shadow:inset 0 0 0 2px var(--c),var(--glow-c)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.pill{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:999px;margin:3px 0;text-decoration:none;background:var(--surf)}
.note{background:rgba(255,210,63,.08);border:1px solid rgba(255,210,63,.4);border-left:5px solid var(--y);padding:10px 14px;border-radius:10px;color:#fff4cf}
.attr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:28px}.attr .ic{color:var(--y)}
.ad-slot{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px),var(--bg2);border:1px dashed #2f4b85;border-radius:12px;margin:24px 0;min-height:280px;contain:layout size;color:#9aaacb;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
@media(min-width:700px){.ad-slot{min-height:250px}}

/* Formulär */
.tool{background:linear-gradient(160deg,rgba(21,42,92,.75),rgba(15,31,69,.75));border:1px solid var(--line);border-radius:18px;padding:16px;margin:14px 0;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.form-note{display:flex;align-items:center;margin-top:0}.form-note .ic{color:var(--c)}
.grid{display:grid;gap:14px}
@media(min-width:700px){.grid{grid-template-columns:1fr 1fr}}
label{display:block;font-weight:600;font-size:.95rem;color:#dbe6ff}
label.inline{display:inline-flex;gap:8px;align-items:center;font-weight:500;margin-right:16px;min-height:44px}
input,select{display:block;width:100%;font:inherit;color:var(--fg);padding:10px 12px;border:1px solid #4a69a8;border-radius:10px;background:#081433;margin-top:5px;min-height:46px;transition:border-color .15s}
input::-webkit-calendar-picker-indicator{filter:invert(.85) sepia(1) hue-rotate(5deg) saturate(4);cursor:pointer;border-radius:4px}
input::-webkit-calendar-picker-indicator:focus-visible{outline:3px solid var(--y);outline-offset:1px}
input:hover,select:hover{border-color:#6c8fd0}
input:focus,select:focus{border-color:var(--c);outline:3px solid var(--y);outline-offset:2px}
input[type=radio],input[type=checkbox]{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--y)}
select option{background:#081433;color:var(--fg)}
fieldset{border:1px solid var(--line);border-radius:12px;margin:14px 0 0;padding:8px 14px}
legend{font-weight:600;font-family:var(--disp);padding:0 6px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.result{margin:14px 0;min-height:120px}
.out p{margin:.4em 0}
.big{background:linear-gradient(140deg,rgba(61,220,132,.16),rgba(62,224,255,.08));border:1px solid rgba(61,220,132,.55);border-radius:var(--radius);padding:14px 16px;box-shadow:0 0 26px rgba(61,220,132,.15)}
.eyebrow{margin:0;color:var(--muted);font-size:.9rem}
.hl{font:600 1.35rem/1.3 var(--disp);margin:.2em 0}.hl b{color:var(--y)}
.big .hl b{color:var(--g);font-size:1.25em}
.out .hl{padding:12px 14px;border-radius:12px;background:rgba(255,210,63,.07);border:1px solid rgba(255,210,63,.35)}
.result .kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:12px 0}
.assume{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:4px 18px 12px;margin-top:24px}
.assume li{margin:6px 0}
pre.code{background:#030817;color:#e6edf3;padding:14px;border:1px solid var(--line);border-radius:12px;overflow-x:auto;font-size:.85rem;white-space:pre-wrap;word-break:break-all}
code{font-size:.92em;color:#bff4ff}

/* Guider */
.guide-wrap{display:grid;gap:24px}
@media(min-width:980px){.guide-wrap{grid-template-columns:minmax(0,74ch) 280px;justify-content:space-between}.guide-side{position:sticky;top:16px;align-self:start;margin-top:96px}}
.guide-side .panel{margin-bottom:14px}.side-h{display:flex;align-items:center;margin:0 0 6px;font:700 1rem var(--disp)}.side-h .ic{color:var(--y)}
.side-l{list-style:none;padding:0;margin:0}.side-l a{display:flex;align-items:center;padding:9px 0;min-height:44px;text-decoration:none;color:#dbe6ff;border-bottom:1px solid rgba(38,66,124,.6)}.side-l li:last-child a{border-bottom:0}.side-l a:hover{color:var(--y)}.side-l .ic{color:var(--c)}
.guide{max-width:74ch}.guide .meta{display:flex;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.9rem}.guide .meta .ic{color:var(--g)}
.guide p,.guide li{color:#dde6f8}
.guide h2{padding-top:.2em;border-top:1px solid rgba(38,66,124,.6)}
.guide blockquote{margin:1em 0;padding:10px 16px;border-left:4px solid var(--c);background:var(--surf);border-radius:0 10px 10px 0}
.sources{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:4px 18px 12px;margin-top:24px}
.sources ol{padding-left:1.3em}.sources li{margin:6px 0}
.glist{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.glist a{display:grid;grid-template-columns:44px 1fr;column-gap:12px;row-gap:2px;padding:14px;height:100%;background:linear-gradient(160deg,var(--surf2),var(--surf));border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--fg);transition:border-color .2s,box-shadow .2s}
.glist .tic{grid-row:1/3;width:44px;height:44px;padding:9px;border-radius:12px;color:var(--c);background:rgba(62,224,255,.08);border:1px solid rgba(62,224,255,.3)}
.glist b{font-family:var(--disp)}.glist span{color:var(--muted);font-size:.9rem}
.glist a:hover{border-color:var(--c);box-shadow:var(--glow-c)}
.list{list-style:none;padding:0}.list li{padding:10px 0;border-bottom:1px solid var(--line)}

/* Sidfot */
footer.site{background:#050b1d;border-top:1px solid rgba(62,224,255,.2);font-size:.92rem;position:relative}
footer.site::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--c),var(--y),transparent);opacity:.8}
.foot{display:grid;gap:16px;padding-top:22px;padding-bottom:26px}
.foot p{color:var(--muted)}
@media(min-width:700px){.foot{grid-template-columns:2fr 1fr}}
.foot ul{list-style:none;padding:0;margin:0;columns:2}.foot li a{display:inline-block;padding:10px 0;color:#cfe0ff}

/* Widget (inbäddning) */
body.embed{background:var(--bg);padding:10px;margin:0}
.wg{font-size:15px}.wgh{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.wgh b{font-family:var(--disp);color:var(--y)}.wgh span{color:var(--muted);font-size:.85rem}
.wgn{font:700 1.7rem/1.2 var(--disp)}.wgn small{font:400 .85rem system-ui,sans-serif;color:var(--muted)}
body.embed .cy,body.embed .plot{height:140px}body.embed .chartbox{grid-template-columns:34px 1fr}.wgs{font-size:.9rem;margin-top:4px}.wgf{font-size:12px;color:var(--muted);margin:6px 0 0}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero-art .pulse{stroke-dasharray:none;opacity:.35;filter:none}}
@media(forced-colors:active){.lv,.m-lvl,.btn{border:1px solid}}

/* ---------- Interaktiva grafer ---------- */
.ctools{min-height:84px;margin:0 0 10px;display:flex;flex-direction:column;gap:8px}
.ctools.ct-mode,.ctools.ct-day{min-height:76px}
@media(min-width:760px){.ctools,.ctools.ct-mode,.ctools.ct-day{min-height:44px;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}}
.ctools.ct-full{min-height:132px}
@media(min-width:760px){.ctools.ct-full{min-height:88px}}
@media(min-width:1080px){.ctools.ct-full{min-height:44px}}
.ctitle{margin:0;font:600 .92rem/1.3 var(--disp);color:#dbe6ff}
.cgroups{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:inline-flex;background:#081433;border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg button{font:600 .85rem/1 var(--disp);color:#cfe0ff;background:transparent;border:0;border-radius:9px;padding:0 11px;min-height:36px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.seg button:hover{background:rgba(62,224,255,.12);color:#fff}
.seg button[aria-pressed=true]{background:var(--c);color:var(--ink);box-shadow:var(--glow-c)}
.seg button.soon::after{content:" ⏳";font-size:.8em}
.xh-v{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,255,255,.75);pointer-events:none;transform:translateX(-.5px)}
.xh-h{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(255,255,255,.55);pointer-events:none}
.xh-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 0 10px #fff;pointer-events:none;transition:top .08s,left .08s}
.xh-dot.s1{background:#3ee0ff}.xh-dot.s2{background:#c39bff}.xh-dot.s3{background:#ffd23f}.xh-dot.s4{background:#ff8f6b}
.ctip{width:170px;transition:left .08s}.ctip.wide{width:190px}
.ctip .tbig{font:700 1.35rem/1.1 var(--disp)}.ctip .tbig small{font:400 .75rem system-ui,sans-serif;color:var(--muted)}
.ctip .tdiff{font-size:.78rem}.ctip .tdiff.up,.m-next .up{color:#ff9d9d}.ctip .tdiff.down,.m-next .down{color:#7ff0b0}
.ctip .tunit{font-size:.72rem;color:var(--muted)}
.ctip .trow{display:grid;grid-template-columns:14px 34px 1fr auto;align-items:center;gap:4px;font-size:.82rem}.ctip .trow em{font-style:normal;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.key{display:inline-block;width:14px;height:0;border-top:3px solid;vertical-align:middle;margin:0 5px 0 10px}
.ctip .key{margin:0}
.key.s1{border-color:#3ee0ff}.key.s2{border-color:#c39bff;border-top-style:dashed}.key.s3{border-color:#ffd23f;border-top-width:4px}.key.s4{border-color:#ff8f6b;border-top-style:dotted;border-top-width:4px}
.chart .ln{fill:none;stroke-width:2;stroke-linejoin:round}
.chart .ln.s1{stroke:#3ee0ff}.chart .ln.s2{stroke:#c39bff;stroke-dasharray:8 4}.chart .ln.s3{stroke:#ffd23f;stroke-width:3;filter:drop-shadow(0 0 3px rgba(255,210,63,.6))}.chart .ln.s4{stroke:#ff8f6b;stroke-dasharray:2 4;stroke-width:2.6}
/* Mätare */
@keyframes pop{0%{transform:scale(.85);opacity:.3}60%{transform:scale(1.06)}100%{transform:none;opacity:1}}
.m-val b{display:inline-block}
.m-next{margin:10px 0 0;padding:8px 10px;border-radius:12px;background:rgba(8,20,51,.7);border:1px solid var(--line);text-align:left;font-size:.85rem;line-height:1.45;display:grid;gap:4px}
.m-next p{margin:0;color:#dbe6ff}.m-next .ic{color:var(--c)}.m-next .cd{font-variant-numeric:tabular-nums;color:var(--y)}
.hero-meter{min-height:500px}@media(min-width:880px){.hero-meter{min-height:500px}}
.meter{min-height:0}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;background:var(--surf2);border:1px solid var(--c);box-shadow:var(--glow-c);border-radius:12px;padding:12px 16px;max-width:92vw;animation:pop .4s ease-out}
.sw-now{background:var(--y);width:4px;box-shadow:var(--glow-y)}

/* Markeringar i grafen */
.chart .dear{fill:rgba(255,107,107,.10);stroke:none}
.cl-dear{color:#ffc9c9}
.sw-dear{background:rgba(255,107,107,.3);border:1px solid var(--r)}
.m-next .mn-t{border-top:1px solid var(--line);padding-top:4px}.m-next .mn-t .ic{color:var(--y)}
/* Elområdesväljare i mätaren */
.m-pick{display:flex;justify-content:center;gap:4px;margin:0 0 8px}
.m-pick a{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:#081433;color:#cfe0ff;text-decoration:none;font:700 .88rem/1 var(--disp)}
.m-pick a:hover{border-color:var(--c);color:#fff}
.m-pick a[aria-current]{background:var(--c);color:var(--ink);border-color:var(--c)}
.areas a.saved:not([aria-current]){border-color:var(--c)}
/* Mobil startsida: pris nu direkt under rubriken */
@media(max-width:879px){
  .hero-txt{display:contents}
  .hero .kicker{order:1;justify-self:start}.hero h1{order:2;font-size:1.55rem;margin:.1em 0 0}.hero-meter{order:3;min-height:560px}.hero .lead{order:4;font-size:1rem}.hero .cta{order:5;margin-top:0}
  .hero-in{gap:12px;padding-top:16px}
}
/* Status/varningar och kostnadsuppdelning */
.status:empty{display:none}
.status{margin-top:14px}
.note.warn{border-left-color:#ff8f6b;border-color:rgba(255,143,107,.55);background:rgba(255,143,107,.1)}
.cost summary{font-weight:600}
.cost table td,.cost table th{text-align:left}
.cost table th[scope=row]{font-weight:500}

/* Tomma annonsplatser döljs tills annonser aktiveras (lägg klassen ads-on på body). */
body:not(.ads-on) .ad-slot{display:none}