/* Rödpennan – stilmall. Tokens och komponenter är tagna rakt från prototypen (v3).
   Skillnad mot prototypen: ingen telefonram – appen fyller skärmen, och på bred skärm
   ligger den i en centrerad kolumn (max 480 px). */

@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonter/familjen-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonter/familjen-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --gron:#0F3D2E;--gron-mork:#0A2C21;--gron2:#1E5A45;--gron3:#2F7A5E;--mint:#E4F0EA;
  --ljus:#F6F8F7;--yta:#FFFFFF;--rod:#D7263D;--rod-ljus:#FCE9EC;--gul:#F3E35B;--gul-ljus:#FBF6CF;
  --black:#10261E;--text:#132820;--mjuk:#63736C;--svag:#66756F;--linje:#E3EAE6;
  --mjukt:cubic-bezier(.22,.9,.24,1);--fjader:cubic-bezier(.34,1.4,.5,1);
  --r-l:22px;--r-m:16px;--r-s:12px;
  --topp:env(safe-area-inset-top,0px);--botten:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:#EEF2F0;color:var(--text);font:15px/1.45 "Familjen Grotesk",system-ui,sans-serif;font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
a{color:var(--gron2)}
:focus-visible{outline:2.5px solid var(--gron3);outline-offset:2px;border-radius:8px}
.siffror{font-variant-numeric:tabular-nums}
.dold-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hoppa{position:absolute;left:12px;top:-60px;z-index:60;background:var(--gron);color:#fff;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600}
.hoppa:focus{top:calc(10px + var(--topp))}
[hidden]{display:none!important}

/* ============ appens ram ============ */
.app{position:fixed;inset:0;max-width:480px;margin:0 auto;overflow:hidden;overflow:clip;background:var(--ljus);isolation:isolate}
@media (min-width:520px){.app{box-shadow:0 0 0 1px rgba(16,38,30,.05),0 30px 80px -40px rgba(10,44,33,.35)}}

/* skärmar */
.skarmar{position:absolute;inset:0}
.skarm{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:0 0 calc(120px + var(--botten));background:var(--ljus);
  transition:transform .48s var(--mjukt),opacity .32s ease;will-change:transform;overscroll-behavior:contain}
.skarm::-webkit-scrollbar{display:none}
.skarm.dold{opacity:0;pointer-events:none;transform:scale(.985);visibility:hidden;transition:transform .48s var(--mjukt),opacity .32s ease,visibility 0s .32s}
.skarm.push-in{transform:translateX(100%)}
.skarm.push-ut{transform:translateX(-28%);opacity:.6}
.skarm.utan-flikar{padding-bottom:calc(40px + var(--botten))}

/* stor rubrik som krymper */
.navbar{position:sticky;top:0;z-index:10;padding:calc(18px + var(--topp)) 20px 10px;background:rgba(246,248,247,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);transition:box-shadow .25s}
.navbar.skuggad{box-shadow:0 1px 0 var(--linje)}
.navbar .rad{display:flex;justify-content:space-between;align-items:center;min-height:36px;position:relative;gap:10px}
.navbar .liten-titel{font-weight:600;font-size:16px;opacity:0;transition:opacity .2s;position:absolute;left:48px;right:48px;text-align:center;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbar.skuggad .liten-titel{opacity:1}
.stor-titel{font-size:32px;font-weight:700;letter-spacing:-.8px;color:var(--black);margin:6px 0 0;line-height:1.1;transition:opacity .2s}
.navbar.skuggad .stor-titel{opacity:0}
.navknapp{width:36px;height:36px;border-radius:50%;background:var(--yta);display:grid;place-items:center;box-shadow:0 1px 2px rgba(16,38,30,.06);transition:transform .15s;flex:none}
.navknapp:active{transform:scale(.92)}
.navknapp svg{width:18px;height:18px;stroke:var(--gron);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.navknapp.initial{font-weight:700;font-size:14px;color:var(--gron);background:var(--mint)}
.tillbaka{display:flex;align-items:center;gap:2px;color:var(--gron2);font-weight:600;font-size:16px;position:relative;z-index:1;min-height:36px}
.tillbaka svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.innehall{padding:6px 16px 0}
.halsning{color:var(--mjuk);font-size:14px;margin-top:2px;min-height:20px}

/* hjältekortet */
.hjalte{background:var(--gron);color:#fff;border-radius:var(--r-l);padding:20px 20px 18px;position:relative;overflow:hidden;margin-bottom:22px}
.hjalte:before{content:"";position:absolute;right:-60px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(47,122,94,.55),transparent 70%)}
.hjalte .etikett{font-size:13.5px;color:#BCD4CA;position:relative}
.hjalte .summa{font-size:42px;font-weight:700;letter-spacing:-1.4px;line-height:1.05;margin:4px 0 2px;position:relative}
.hjalte .summa small{font-size:18px;font-weight:500;letter-spacing:0;color:#cfe0d8}
.hjalte .delar{display:flex;height:8px;border-radius:8px;overflow:hidden;gap:3px;margin:16px 0 10px;position:relative;background:rgba(255,255,255,.08)}
.hjalte .delar i{display:block;height:100%;border-radius:8px;transform-origin:left;animation:fyllas .9s var(--mjukt) both}
@keyframes fyllas{from{transform:scaleX(0)}}
.hjalte .legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:#cfe0d8;position:relative}
.hjalte .legend span{display:flex;align-items:center;gap:6px}
.hjalte .legend b{width:8px;height:8px;border-radius:50%;display:inline-block}
.hjalte .fot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#BCD4CA;position:relative}
.hjalte .fot b{color:#fff;font-weight:600}
.hjalte .skelett{background:linear-gradient(90deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.08) 100%);background-size:200% 100%}
.markering{background:rgba(243,227,91,.16);color:var(--gul);padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600}

.sektion{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 10px}
.sektion h2{margin:0;font-size:19px;letter-spacing:-.3px;color:var(--black)}
.sektion h2.liten{font-size:15px;color:var(--mjuk);font-weight:600;letter-spacing:0}
.sektion button{color:var(--gron2);font-weight:600;font-size:14px}
.mellanrum{margin-top:22px}

/* åtgärdskort */
.atgard{display:flex;gap:14px;align-items:center;background:var(--yta);border-radius:var(--r-m);padding:14px;margin-bottom:10px;width:100%;text-align:left;
  box-shadow:0 1px 2px rgba(16,38,30,.04);transition:transform .18s var(--mjukt)}
button.atgard:active{transform:scale(.985)}
.atgard .text{flex:1;min-width:0}
.atgard .rubrik{font-weight:600;font-size:15px;display:block}
.atgard .under{font-size:13px;color:var(--mjuk)}
.atgard .hoger{text-align:right}
.atgard .spar{font-weight:700;color:var(--gron2);font-size:15px;display:block}
.atgard .spar-under{font-size:11.5px;color:var(--svag)}
.dagar-badge{position:relative;display:inline-block;font-size:12.5px;font-weight:700;color:var(--rod);padding:1px 2px}
.signatur{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none}
.signatur path{fill:none;stroke:var(--rod);stroke-width:1.6;stroke-linecap:round}

/* monogram */
.mono{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;color:#fff;letter-spacing:-.3px;background:var(--gron3)}
.mono.stor{width:64px;height:64px;border-radius:19px;font-size:22px}

/* tidslinje 12 månader */
.tidslinje{background:var(--yta);border-radius:var(--r-m);padding:16px 16px 12px;margin-bottom:24px}
.tidslinje .bana{position:relative;height:56px;margin:4px 8px 0}
.tidslinje .axel{position:absolute;left:0;right:0;top:30px;height:2px;background:var(--linje);border-radius:2px}
.tidslinje .idag{position:absolute;top:18px;left:0;width:2px;height:26px;background:var(--gron);border-radius:2px}
.tidslinje .idag:after{content:"Idag";position:absolute;top:-17px;left:-4px;font-size:11px;font-weight:600;color:var(--gron)}
.tidslinje .punkt{position:absolute;top:21px;width:20px;height:20px;margin-left:-10px;border-radius:50%;border:3px solid var(--yta);box-shadow:0 0 0 1px var(--linje);transition:transform .2s var(--fjader)}
@media (hover:hover){.tidslinje .punkt:hover{transform:scale(1.2)}}
.tidslinje .punkt.varm:before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--rod);animation:puls 2s ease-out infinite}
@keyframes puls{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
.tidslinje .manader{display:flex;justify-content:space-between;font-size:11px;color:var(--svag);margin:2px 4px 0}
.tidslinje .tom-text{font-size:13px;color:var(--mjuk);text-align:center;margin:-2px 0 4px}

/* listor */
.segment{display:flex;background:#E7EDEA;border-radius:11px;padding:3px;margin-bottom:14px;position:relative;overflow-x:auto;scrollbar-width:none}
.segment::-webkit-scrollbar{display:none}
.segment button{flex:1;padding:7px 10px;font-size:13.5px;font-weight:600;color:var(--mjuk);border-radius:9px;position:relative;z-index:1;white-space:nowrap;transition:color .25s}
.segment button[aria-pressed=true]{color:var(--black)}
.segment .glid{position:absolute;top:3px;bottom:3px;border-radius:9px;background:var(--yta);box-shadow:0 1px 3px rgba(16,38,30,.12);transition:left .35s var(--mjukt),width .35s var(--mjukt)}
.sok{display:flex;align-items:center;gap:8px;background:#E7EDEA;border-radius:11px;padding:9px 12px;margin-bottom:12px;color:var(--svag);font-size:15px}
.sok:focus-within{box-shadow:0 0 0 2.5px var(--gron3)}
.sok svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none}
.sok input{border:none;background:none;font:inherit;font-size:16px;color:var(--text);flex:1;outline:none;min-width:0}
.sok input::placeholder{color:var(--svag)}
.grupp{background:var(--yta);border-radius:var(--r-m);overflow:hidden;margin-bottom:22px}
.rad-avtal{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;text-align:left;position:relative;transition:background .15s}
.rad-avtal:active{background:#F1F5F3}
.grupp>[role=listitem]+[role=listitem] .rad-avtal:before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--linje)}
.rad-avtal .text{flex:1;min-width:0}
.rad-avtal .rubrik{font-weight:600;display:block}
.rad-avtal .under{font-size:13px;color:var(--mjuk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.rad-avtal .pris{font-weight:600;text-align:right;white-space:nowrap}
.rad-avtal .pris small{display:block;font-weight:500;font-size:12px;color:var(--svag)}
.chev{width:14px;height:14px;stroke:#B9C4BF;fill:none;stroke-width:2.4;flex:none}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;margin-top:3px}
.pill.rod{background:var(--rod-ljus);color:#A51A2D}.pill.gul{background:var(--gul-ljus);color:#6B5E00}.pill.gron{background:var(--mint);color:var(--gron2)}
.pill.ingen-marginal{margin:0}

/* detalj */
.detaljhuvud{text-align:center;padding:4px 16px 20px}
.detaljhuvud .mono{margin:0 auto 12px}
.detaljhuvud h1{margin:0;font-size:24px;letter-spacing:-.5px;color:var(--black)}
.detaljhuvud .lev{color:var(--mjuk);font-size:14.5px}
.detaljhuvud .pris{font-size:36px;font-weight:700;letter-spacing:-1px;margin-top:12px;color:var(--black)}
.detaljhuvud .pris small{font-size:16px;font-weight:500;color:var(--mjuk);letter-spacing:0}
.kort{background:var(--yta);border-radius:var(--r-m);padding:16px;margin:0 16px 14px}
.innehall .kort{margin:0 0 14px}
.kort h3{margin:0 0 2px;font-size:16px;color:var(--black)}
.kort .under{font-size:13px;color:var(--mjuk)}
.kort p.brod{margin:0 0 12px;color:var(--mjuk);font-size:14px}
.kort p.brod:last-child{margin-bottom:0}
.analys .rubrikrad{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.analys .rubrikrad .ring-ikon{width:30px;height:30px;border-radius:9px;background:var(--rod-ljus);display:grid;place-items:center;flex:none}
.analys .rubrikrad .ring-ikon.bra{background:var(--mint)}
.jamf{margin:6px 0 4px}
.jamf .rad{display:grid;grid-template-columns:62px 1fr 82px;align-items:center;gap:10px;margin-bottom:9px;font-size:13.5px}
.jamf .bar{height:10px;border-radius:10px;background:#EDF2EF;overflow:hidden}
.jamf .bar i{display:block;height:100%;border-radius:10px;transform-origin:left;animation:fyllas 1s .15s var(--mjukt) both}
.jamf .bar i.idag{background:var(--rod)}
.jamf .bar i.mojligt{background:var(--gron3);animation-delay:.3s}
.jamf .v{text-align:right;font-weight:600}
.besparing-rad{display:flex;justify-content:space-between;align-items:center;background:var(--mint);border-radius:var(--r-s);padding:11px 13px;margin-top:10px}
.besparing-rad span{font-size:14px}
.besparing-rad b{color:var(--gron);font-size:17px}
.fotnot{font-size:11.5px;color:var(--svag);margin-top:8px}
.fakta-lista .rad{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:14.5px}
.fakta-lista .rad+.rad{border-top:1px solid var(--linje)}
.fakta-lista .rad b{text-align:right}
.fakta-lista span{color:var(--mjuk)}
.fakta-lista .rad.lank{color:var(--gron2);font-weight:600;text-decoration:none;width:100%;text-align:left}
.fakta-lista .rad.lank b{color:var(--gron2)}
.fakta-lista .rad.fara,.fakta-lista .rad.fara b{color:#B01F33}
.forlopp{height:6px;border-radius:6px;background:#EDF2EF;overflow:hidden;margin:12px 0 6px}
.forlopp i{display:block;height:100%;border-radius:6px;background:var(--gron3);transform-origin:left;animation:fyllas 1s var(--mjukt) both}
.forlopp.varm i{background:var(--rod)}
.forlopp-text{display:flex;justify-content:space-between;font-size:12px;color:var(--svag)}
.cta-zon{position:sticky;bottom:0;padding:14px 16px calc(24px + var(--botten));background:linear-gradient(rgba(246,248,247,0),var(--ljus) 30%);z-index:5;margin-top:6px}
.knapp{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:15px;padding:16px;font-weight:600;font-size:16px;background:var(--gron);color:#fff;transition:transform .15s var(--mjukt),opacity .2s;text-decoration:none}
.knapp:active{transform:scale(.975)}
.knapp.sekundar{background:transparent;color:var(--gron2);padding:12px}
.knapp.kontur{background:var(--yta);color:var(--gron2);box-shadow:inset 0 0 0 1.5px var(--linje)}
.knapp.fara{background:var(--rod);color:#fff}
.knapp.smal{max-width:260px;margin:0 auto}
.knapp:disabled,.knapp[aria-disabled=true]{opacity:.38;cursor:not-allowed;transform:none}
.knapp svg{width:18px;height:18px}
.knapp-rad{display:flex;gap:10px}
.knapp-rad .knapp{flex:1}

/* ärenden */
.arende{background:var(--yta);border-radius:var(--r-m);padding:16px;margin-bottom:14px}
.arende .topp{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.arende .topp .namn{flex:1;min-width:0}
.arende .topp b{display:block}
.arende .nr{font-size:12.5px;color:var(--svag)}
.steg{list-style:none;margin:0;padding:0;position:relative}
.steg li{display:grid;grid-template-columns:26px 1fr;gap:12px;padding-bottom:16px;position:relative}
.steg li:last-child{padding-bottom:0}
.steg li:not(:last-child):after{content:"";position:absolute;left:12px;top:26px;bottom:2px;width:2px;background:var(--linje)}
.steg li.klar:not(:last-child):after{background:var(--gron3)}
.steg .prick{width:26px;height:26px;border-radius:50%;border:2px solid var(--linje);background:var(--yta);display:grid;place-items:center}
.steg li.klar .prick{background:var(--gron3);border-color:var(--gron3)}
.steg li.klar .prick svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3}
.steg li.pagar .prick{border-color:var(--gron3)}
.steg li.pagar .prick:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gron3);animation:puls2 1.6s ease-in-out infinite}
@keyframes puls2{50%{transform:scale(.6);opacity:.5}}
.steg b{display:block;font-size:14.5px;font-weight:600}
.steg span{font-size:13px;color:var(--mjuk)}
.tomt{text-align:center;padding:60px 26px;color:var(--mjuk)}
.tomt.kompakt{padding:36px 20px}
.tomt .cirkel{width:76px;height:76px;border-radius:50%;background:var(--mint);display:grid;place-items:center;margin:0 auto 16px}
.tomt .cirkel svg{width:32px;height:32px;stroke:var(--gron2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tomt .cirkel.rod{background:var(--rod-ljus)}
.tomt .cirkel.rod svg{stroke:var(--rod)}
.tomt h3{color:var(--black);margin:0 0 6px;font-size:18px}
.tomt p{margin:0 0 20px}
.liten-not{font-size:12.5px;color:var(--svag);margin:4px 4px 0}

/* energi */
.diagramkort{background:var(--yta);border-radius:var(--r-m);padding:16px 16px 10px;margin-bottom:14px}
.diagramkort .nu{display:flex;align-items:baseline;gap:6px}
.diagramkort .nu b{font-size:36px;letter-spacing:-1px;color:var(--black)}
.diagramkort .nu span{color:var(--mjuk);font-size:14px}
.diagramkort .tid-label{font-size:13px;color:var(--mjuk);min-height:19px}
.diagram{position:relative;height:170px;margin:12px -4px 0;touch-action:none;cursor:crosshair;border-radius:8px}
.diagram svg{width:100%;height:100%;overflow:visible;display:block}
.diagram .linje{fill:none;stroke:var(--gron3);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.timaxel{display:flex;justify-content:space-between;font-size:11px;color:var(--svag);padding:4px 2px 0}
.statistik{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.statistik div{background:var(--yta);border-radius:var(--r-s);padding:12px}
.statistik span{display:block;font-size:12px;color:var(--mjuk)}
.statistik b{font-size:18px;color:var(--black)}
.statistik small{font-size:12px;color:var(--svag);font-weight:500}
.info-rad{display:flex;gap:12px;align-items:center;background:var(--yta);border-radius:var(--r-m);padding:14px;width:100%;text-align:left}
.info-rad .ic{width:36px;height:36px;border-radius:11px;background:var(--gul-ljus);display:grid;place-items:center;flex:none}
.info-rad .ic svg{width:18px;height:18px;stroke:#7A6B00;fill:none;stroke-width:2.2;stroke-linecap:round}
.info-rad .t{flex:1}
.info-rad .t b{display:block}
.info-rad .t span{font-size:13px;color:var(--mjuk)}
.skelett{background:linear-gradient(90deg,#EEF2F0 0%,#F7F9F8 50%,#EEF2F0 100%);background-size:200% 100%;animation:skimra 1.2s infinite;border-radius:8px}
.skelett.rad{height:14px;margin:6px 0}
.skelett.block{height:72px;border-radius:var(--r-m);margin-bottom:10px}
.skelett.full{height:100%}
@keyframes skimra{to{background-position:-200% 0}}

/* flikrad */
.flikrad{position:absolute;left:12px;right:12px;bottom:calc(14px + var(--botten));height:66px;border-radius:24px;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 10px 30px -10px rgba(16,38,30,.25),0 0 0 1px rgba(16,38,30,.05);display:flex;z-index:15;padding:6px;transition:transform .4s var(--mjukt)}
.flikrad.gomd{transform:translateY(calc(120px + var(--botten)));visibility:hidden;transition:transform .4s var(--mjukt),visibility 0s .4s}
.flikrad button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;color:var(--svag);position:relative;z-index:1;transition:color .25s;border-radius:18px}
.flikrad button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flikrad button[aria-current=page]{color:var(--gron)}
.flikrad .glid{position:absolute;top:6px;bottom:6px;border-radius:18px;background:var(--mint);transition:left .45s var(--fjader),width .45s var(--fjader)}
.flikrad .bricka{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--rod);color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 4px;transform:scale(0);transition:transform .35s var(--fjader)}
.flikrad .bricka.syns{transform:scale(1)}

/* blad (bottom sheet) */
.slojan{position:absolute;inset:0;background:rgba(10,30,22,.38);opacity:0;pointer-events:none;transition:opacity .35s;z-index:30}
.slojan.oppen{opacity:1;pointer-events:auto}
.blad{position:absolute;left:0;right:0;bottom:0;background:var(--yta);border-radius:30px 30px 0 0;z-index:31;transform:translateY(105%);transition:transform .5s var(--mjukt),visibility 0s .5s;visibility:hidden;max-height:90%;display:flex;flex-direction:column;box-shadow:0 -10px 40px -10px rgba(10,30,22,.25)}
.blad.oppen{transform:translateY(0);visibility:visible;transition:transform .5s var(--mjukt)}
.blad .handtag{width:38px;height:5px;border-radius:3px;background:#D5DEDA;margin:9px auto 4px;flex:none;cursor:grab;box-sizing:content-box;padding:6px 30px;background-clip:content-box;touch-action:none}
.blad .blad-innehall{overflow-y:auto;padding:4px 20px calc(28px + var(--botten));scrollbar-width:none;overscroll-behavior:contain}
.stegvisare{display:flex;gap:6px;margin:6px 0 18px}
.stegvisare i{flex:1;height:4px;border-radius:4px;background:#E7EDEA;overflow:hidden;position:relative}
.stegvisare i:after{content:"";position:absolute;inset:0;background:var(--gron3);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--mjukt)}
.stegvisare i.klar:after{transform:scaleX(1)}
.blad h2{margin:0 0 6px;font-size:22px;letter-spacing:-.4px;color:var(--black)}
.blad h2.forst{margin-top:6px}
.blad p{color:var(--mjuk);margin:0 0 14px}
.blad p.not{font-size:12px;color:var(--svag);margin:12px 0 0}
.blad p.centrerad{text-align:center}
.sammanfattning{border:1px solid var(--linje);border-radius:var(--r-m);padding:4px 14px;margin-bottom:14px;text-align:left}
.sammanfattning .rad{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14.5px}
.sammanfattning .rad b{text-align:right}
.sammanfattning .rad+.rad{border-top:1px solid var(--linje)}
.sammanfattning span{color:var(--mjuk)}
.oppenhet{display:flex;gap:11px;background:var(--gul-ljus);border-radius:var(--r-s);padding:12px 13px;font-size:13.5px;margin-bottom:14px;color:#4E4500}
.oppenhet svg{width:18px;height:18px;flex:none;margin-top:1px;stroke:#7A6B00;fill:none;stroke-width:2}
.kryss{display:flex;gap:12px;align-items:flex-start;font-size:14px;margin-bottom:18px;cursor:pointer;position:relative}
.kryss input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.kryss .ruta{width:22px;height:22px;border-radius:7px;border:2px solid #C5D0CB;flex:none;display:grid;place-items:center;transition:background .2s,border-color .2s}
.kryss .ruta svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3.2;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .3s .05s var(--mjukt)}
.kryss input:checked+.ruta{background:var(--gron);border-color:var(--gron)}
.kryss input:checked+.ruta svg{stroke-dashoffset:0}
.kryss input:focus-visible+.ruta{outline:2.5px solid var(--gron3);outline-offset:2px}
.kryss.fel .ruta{border-color:var(--rod)}
.laddar{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:snurra .8s linear infinite;flex:none}
.knapp.kontur .laddar,.knapp.sekundar .laddar{border-color:rgba(30,90,69,.25);border-top-color:var(--gron2)}
@keyframes snurra{to{transform:rotate(360deg)}}
.klar-ikon{width:84px;height:84px;margin:10px auto 16px;display:block}
.klar-ikon circle{fill:none;stroke:var(--gron3);stroke-width:3.5;stroke-dasharray:252;stroke-dashoffset:252;animation:rita .7s var(--mjukt) forwards}
.klar-ikon path{fill:none;stroke:var(--gron3);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:rita .45s .55s var(--mjukt) forwards}
@keyframes rita{to{stroke-dashoffset:0}}
.centrerat{text-align:center}

/* formulär */
.falt{margin-bottom:14px}
.falt label,.falt .etikett{display:block;font-size:13px;font-weight:600;color:var(--mjuk);margin-bottom:6px}
.falt input,.falt textarea,.falt select{width:100%;padding:14px;border-radius:var(--r-s);border:1.5px solid var(--linje);font:inherit;font-size:16px;background:var(--yta);color:var(--text);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.falt input[type=date]{min-height:52px}
.falt textarea{resize:vertical;min-height:80px}
.falt input:focus,.falt textarea:focus{outline:none;border-color:var(--gron3);box-shadow:0 0 0 4px rgba(47,122,94,.12)}
.falt input[aria-invalid=true]{border-color:var(--rod)}
.falt input[aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(215,38,61,.12)}
.falt .hjalp{font-size:12.5px;color:var(--svag);margin-top:5px}
.falt .felmeddelande{font-size:12.5px;color:#B01F33;margin-top:5px;font-weight:600}
.falt-rad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formfel{background:var(--rod-ljus);color:#8E1726;border-radius:var(--r-s);padding:11px 13px;font-size:13.5px;margin-bottom:14px;font-weight:500}
.kategorier{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.kategori{border:1.5px solid var(--linje);border-radius:var(--r-s);padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:600;transition:border-color .2s,background .2s,transform .2s var(--fjader)}
.kategori svg{width:22px;height:22px;stroke:var(--gron);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kategori[aria-checked=true]{border-color:var(--gron);background:var(--mint);transform:scale(1.03)}

/* toast */
.toast{position:absolute;left:50%;top:calc(14px + var(--topp));transform:translate(-50%,calc(-110px - var(--topp)));background:var(--black);color:#fff;padding:11px 16px;border-radius:14px;font-size:14px;font-weight:500;z-index:40;display:flex;gap:8px;align-items:center;transition:transform .5s var(--fjader);width:max-content;max-width:calc(100% - 32px);box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.toast.syns{transform:translate(-50%,0)}
.toast svg{width:16px;height:16px;stroke:var(--gul);fill:none;stroke-width:2.6;flex:none}
.toast.fel svg{stroke:#FF8A98}

/* offlineremsa */
.offline{position:absolute;left:50%;bottom:calc(92px + var(--botten));transform:translateX(-50%);z-index:16;background:var(--black);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:20px;display:flex;gap:8px;align-items:center;box-shadow:0 8px 24px -10px rgba(0,0,0,.45);white-space:nowrap}
.offline i{width:8px;height:8px;border-radius:50%;background:var(--gul)}
.app.utan-flikrad .offline{bottom:calc(20px + var(--botten))}

/* ============ inloggning och välkomst ============ */
.inlogg{min-height:100%;display:flex;flex-direction:column;padding:calc(28px + var(--topp)) 22px calc(28px + var(--botten))}
.marke{display:flex;align-items:center;gap:12px}
.marke .ikon{width:44px;height:44px;border-radius:12px;background:var(--gron);display:grid;place-items:center;flex:none}
.marke .ikon svg{width:22px;height:22px}
.marke b{display:block;font-size:17px;color:var(--black)}
.marke span{color:var(--mjuk);font-size:14px}
.inlogg .mitt{flex:1;display:flex;flex-direction:column;justify-content:center;padding:36px 0 20px}
.inlogg h1{font-size:34px;line-height:1.06;letter-spacing:-1px;margin:0 0 12px;color:var(--black);font-weight:700;max-width:14ch}
.inlogg .ingress{font-size:16.5px;color:var(--mjuk);margin:0 0 26px;max-width:40ch}
.inlogg .fordelar{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.inlogg .fordelar li{display:flex;gap:10px;align-items:center;font-size:14.5px}
.inlogg .fordelar li i{width:26px;height:26px;border-radius:8px;background:var(--mint);display:grid;place-items:center;flex:none}
.inlogg .fordelar svg{width:14px;height:14px;stroke:var(--gron2);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.inlogg .villkor{font-size:12.5px;color:var(--svag);text-align:center;margin:14px 0 0}
.inkorg{text-align:center}
.inkorg .cirkel{width:84px;height:84px;border-radius:50%;background:var(--mint);display:grid;place-items:center;margin:0 auto 18px}
.inkorg .cirkel svg{width:36px;height:36px;stroke:var(--gron2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.inkorg h1{margin:0 auto 10px;font-size:28px}
.inkorg .ingress{margin:0 auto 22px}
.devlank{display:block;background:var(--gul-ljus);color:#4E4500;border-radius:var(--r-s);padding:12px 13px;font-size:13.5px;margin:0 0 16px;text-align:left;word-break:break-all}
.devlank b{display:block;margin-bottom:4px}
.devlank a{color:#4E4500;font-weight:600}.devlank .devkod{display:block;margin-top:4px}.devlank .devkod b{display:inline}

.valkommen{padding:calc(22px + var(--topp)) 20px calc(28px + var(--botten));min-height:100%;display:flex;flex-direction:column}
.valkommen .stegvisare{margin:0 0 26px}
.valkommen h1{font-size:30px;letter-spacing:-.8px;line-height:1.1;margin:0 0 8px;color:var(--black)}
.valkommen .ingress{color:var(--mjuk);margin:0 0 22px;font-size:15.5px}
.valkommen form{flex:1;display:flex;flex-direction:column}
.valkommen .botten{margin-top:auto;padding-top:14px}

/* profil */
.profilhuvud{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.profilhuvud .mono{background:var(--gron)}
.profilhuvud b{display:block;font-size:17px;color:var(--black)}
.profilhuvud div span{font-size:13.5px;color:var(--mjuk);word-break:break-all}
.version{font-size:12px;color:var(--svag);text-align:center;margin:18px 0 0}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.knapp,.navknapp,.kategori,.segment button,.flikrad button{border:1px solid ButtonText}}
/* programmatiskt fokus på rubriker (för skärmläsare) ska inte ge en ram */
[tabindex="-1"]:focus{outline:none}
.navknapp-plats{width:36px;height:36px;flex:none}
.skel-summa{height:44px;width:60%;margin:8px 0 18px}
.skel-delar{height:8px;margin-bottom:12px}
.skel-legend{height:12px;width:80%}
.knapp.liten{width:auto;padding:11px 16px;font-size:14.5px;flex:none}
.luft{height:20px}
.kort h3.kort-rubrik{margin-bottom:12px}
.blad p.direkt{font-size:13px;margin:14px 0 0}

/* ============ runda 2 ============ */
/* senare-besparing i hjälten (avtal som inte går att förhandla än) */
.hjalte .senare{font-size:12.5px;color:#BCD4CA;margin-top:10px;position:relative}
.hjalte .senare b{color:#fff;font-weight:600}
.sammanfattning .markering{background:var(--gul-ljus);color:#6B5E00;font-size:11px;padding:1px 7px;margin-left:4px;white-space:nowrap}
/* förhandlingsförfrågan: så går det till */
.sa-gar-det-till{list-style:none;counter-reset:steg;padding:0;margin:0 0 16px;display:grid;gap:12px}
.sa-gar-det-till li{counter-increment:steg;display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:start}
.sa-gar-det-till li:before{content:counter(steg);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--gron2);font-weight:700;font-size:14px;display:grid;place-items:center}
.sa-gar-det-till b{font-size:14.5px;color:var(--black)}
.sa-gar-det-till span{font-size:13.5px;color:var(--mjuk)}
.arende-not{font-size:13px;color:var(--mjuk);background:var(--ljus);border-radius:var(--r-s);padding:10px 12px;margin:14px 0 0}
.blad p.integritetsrad{font-size:12.5px;color:var(--svag);margin:12px 0 0}
.oppenhet.varning-ruta{background:var(--rod-ljus);color:#7A1424}.oppenhet.varning-ruta svg{stroke:var(--rod)}
/* inloggningskod */
.kodform{text-align:left;margin:0 0 6px}
.falt input.kod{font-size:26px;letter-spacing:.42em;text-indent:.42em;text-align:center;font-weight:600;padding:12px 10px;font-variant-numeric:tabular-nums}
.falt input.kod::placeholder{color:#C5D0CB}
/* bot-skydd: honeypot syns aldrig, Turnstile bara när den laddats */
.honung{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.turnstile{margin:0 0 12px;display:flex;justify-content:center}.turnstile:empty{display:none}
.oppenhet .ingen-ersattning{display:block;margin-top:6px;font-weight:600}
.fler{margin:0 0 16px}.fler summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--gron2);padding:6px 0 10px;list-style:none;display:flex;align-items:center;gap:6px}
.fler summary::-webkit-details-marker{display:none}.fler summary:after{content:"";width:7px;height:7px;border:solid var(--gron2);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--mjukt)}
.fler[open] summary:after{transform:rotate(225deg) translateY(-1px)}.fler .hjalp{font-size:12.5px;color:var(--svag);margin:-6px 0 0}