/* ==========================================================
   Gemensamma delar för hela Aktieimperiet: topprad, meny,
   inloggning, introsida, guide och budget.
   Grunddesignen och värderingsverktyget ligger i stil.css.
   ========================================================== */

body{padding:0}
.wrap{padding:0 20px}
main.wrap{padding-top:26px;padding-bottom:60px}
a{color:var(--accent)}

/* ---------- topprad ----------
   #topp har display:contents, så att testbannern och .topp blir barn till
   body i layouten. Utan det är #topp precis lika hög som sitt innehåll,
   och en klistrad rad kan aldrig följa med längre än sin behållare: raden
   scrollade bort efter 110 px trots position:sticky. Bannern står kvar
   static och scrollar bort som förut, bara raden följer med.

   Att .guidemeny ligger på top:78px visar att raden alltid varit tänkt att
   vara klistrad. Mät .topp och inte #topp om du behöver radens underkant,
   som kopplaMeny i js/guide.js gör: #topp har ingen ruta längre. */
#topp{display:contents}
.topp{
  position:sticky;top:0;z-index:40;background:var(--topp);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.topp .inre{
  max-width:1220px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:22px;min-height:62px;
}
.marke{
  display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text);text-decoration:none;white-space:nowrap;
}
.marke .markesbild{width:30px;height:30px;flex:none;border-radius:50%;display:block}
.meny{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.meny a{
  color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;
  padding:8px 12px;border-radius:8px;
}
.meny a:hover{color:var(--text);background:var(--panel-2)}
.meny a[aria-current="page"]{color:var(--accent);background:var(--markering)}
.toppkonto{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.toppkonto .epost{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ikonknapp{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;flex:none;color:var(--muted);
}
.ikonknapp:hover{color:var(--accent)}

/* ---------- rubriker på undersidor ---------- */
.sidhuvud{margin-bottom:22px}
.sidhuvud h1{font-size:30px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.sidhuvud h1 span{color:var(--accent)}
.sidhuvud .tagline{color:var(--muted);font-size:14px;margin-top:6px;max-width:680px}

/* ---------- inloggning ---------- */
.grind{max-width:430px;margin:56px auto}
.grind .kort{padding:26px}
.grind h2{font-size:20px;text-transform:none;letter-spacing:0;color:var(--text);margin-bottom:6px}
.grind .under{color:var(--muted);font-size:13.5px;margin-bottom:20px;line-height:1.5}
.grind .falt{margin-bottom:13px}
.grind button{width:100%;padding:12px;font-size:14px;margin-top:6px}
/* Loggan och texten står bredvid varandra i mitten. Knappen är vit och
   inte i accentfärgen: den primära knappen i rutan är formulärets, och två
   fyllda knappar över varandra hade tävlat om blicken. */
.grind .googleknapp{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--panel)}
.grind .googleknapp svg{flex:none}
/* Avdelaren mellan Google och formuläret: ordet i mitten med en linje ut
   åt varje håll. Linjerna är pseudoelement, så det är en enda rad i html. */
.grind .eller{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:12px;color:var(--hint)}
.grind .eller::before,.grind .eller::after{content:"";flex:1;height:1px;background:var(--line)}
.grind .vaxla{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}
.grind .vaxla a{color:var(--accent);cursor:pointer;text-decoration:none;font-weight:600}
.grind .vaxla a:hover{text-decoration:underline}
.melding{font-size:13px;padding:10px 12px;border-radius:8px;margin-top:12px;line-height:1.45}
.melding.fel{background:rgba(224,82,76,.12);color:var(--fel-text);border:1px solid rgba(224,82,76,.3)}
.melding.ok{background:rgba(63,191,127,.12);color:var(--ok-text);border:1px solid rgba(63,191,127,.3)}
.melding.info{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
/* ---------- kontaktformuläret ----------
   Honungsfällan är fältet en robot fyller i och en människa aldrig ser. Den
   göms med position och inte med display:none eller hidden: en del robotar
   hoppar över fält som är bortgömda på det sättet, och då fyller de i det
   riktiga meddelandet i stället. aria-hidden går inte heller att sätta på
   ett fält som ska kunna fyllas i, så skärmläsare får i stället etiketten
   "Lämna det här fältet tomt". */
.honungsfalla{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Fälten står under varandra och behöver luft emellan. Utan den hamnar
   nästa etikett direkt mot föregående rutas underkant, och de två läses
   som ett enda fält. Samma avstånd som inloggningens .grind .falt.

   Marginalen ligger på fältet och inte som gap på formuläret, eftersom
   buggfälten ligger i en egen behållare som fälls in och ut: ett gap på
   formuläret hade gett den behållaren ett avstånd och fälten inuti inget. */
#kontaktform .falt{margin-bottom:15px}

/* Robotkontrollen. Netlify byter ut den inre rutan mot Googles widget när
   sajten byggs, och vilka klasser och attribut rutan får i det bytet är
   inte vårt att bestämma. Därför ligger marginalen på en egen behållare
   utanför: den står kvar vad Netlify än gör med rutan inuti.

   Widgeten ritas i en iframe på 302 px och går inte att styla inifrån.
   Marginalen är allt vi råder över, och den behövs: utan den ligger rutan
   kant i kant mot e-postfältet över och knappen under. Lokalt är rutan tom,
   och marginalen syns då som ett glapp: widgeten kommer först vid bygget. */
.robotruta{margin:3px 0 18px}

/* Obligatoriska fält märks på det klassiska viset: röd ram och röd
   etikett, men först när man tryckt Skicka. Klassen visafel sätts i
   skriptet och :invalid gör resten, så markeringen släpper av sig själv
   så fort fältet blir giltigt. Utan klassen hade en tom obligatorisk ruta
   stått röd redan vid sidladdningen.

   Formuläret har novalidate, så webbläsarens egen bubbla är avstängd och
   den här markeringen plus raden i #formstatus är allt besökaren ser.

   Hjälptexten i etiketten behåller sin dämpade färg: regeln går på label
   och .falt .hint ligger på en egen selektor inuti den. */
#kontaktform.visafel :is(input,select,textarea):invalid{
  border-color:var(--red);background:rgba(192,57,44,.05);
}
#kontaktform.visafel .falt:has(:invalid) label{color:var(--fel-text)}

/* Knappen och kvittot står på var sin rad under fälten, med luft emellan. */
#kontaktform .primar{margin-top:5px}
#formstatus:not(:empty){margin-top:14px}

.testbanner{
  background:rgba(251,144,77,.12);border-bottom:1px solid rgba(251,144,77,.3);
  color:var(--accent);font-size:12.5px;text-align:center;padding:7px 16px;
}

/* ---------- sparade dokument ---------- */
/* Raden som ersätter hela arkivpanelen för den som inte är inloggad. */
.arkivgast{
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;margin-bottom:16px;color:var(--muted);font-size:13.5px;line-height:1.55;
}
.arkiv{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.arkiv .falt{flex:1;min-width:200px;max-width:330px}
.lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.lista .post{
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 15px;
  display:flex;flex-direction:column;gap:3px;text-align:left;
}
.lista .post .namn{font-weight:700;font-size:15px;color:var(--text);cursor:pointer}
.lista .post .namn:hover{color:var(--accent)}
.lista .post .meta{font-size:12px;color:var(--muted)}
.lista .post[data-aktiv="1"]{border-color:var(--accent);background:var(--markering)}
/* Knapparna ligger två och två, inte fyra i bredd. Posterna ligger i
   kolumner om minst 228 px, och kontosidans fyra knappar, Öppna, Ladda ner,
   Byt namn och Radera, mäter 269 px tillsammans i en yta på 268. Utan
   brytningen rann de ut över rutans högerkant, och med fri brytning föll
   bara Radera ner på egen rad, en pixel från att rymmas.

   Halva bredden var är därför ett val och inte en mätning: den spricker inte
   om ett teckensnitt ritas en pixel bredare eller en etikett byts. Paren
   svarar dessutom mot vad knapparna gör. Övre raden rör filens innehåll,
   nedre raden filen själv. På en telefon ryms alla fyra på en rad, men
   dubbelt så breda tryckytor är värt den extra raden där med. */
.lista .post .knappar{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.lista .post .knappar button{
  flex:1 1 calc(50% - 3px);padding:5px 9px;font-size:11.5px;
}
/* Spänner hela rutnätet. Utan det blir den tomma raden ett rutnätsobjekt i
   en 228 px bred kolumn, och meningen bryts mitt itu. */
.tomt{grid-column:1 / -1;color:var(--muted);font-size:13.5px;padding:6px 0}

/* ---------- sidindelning i listorna ----------
   Ritas av sidvaljare i js/arkiv.js, se SIDSTORLEK där för varför gränsen
   går vid åtta poster.

   grid-column måste stå här. Raden ligger inuti .lista på kontosidan, där
   elementet självt är rutnätet, och utanför den i värderingsverktygets
   väljare. Utan regeln blir sidväljaren en kolumn bland posterna. */
.sidvaljare{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;justify-content:center;margin-top:14px;
}
/* Smalare och tätare än vanliga knappar: de är många och står i rad, och
   ett sidnummer behöver inte en knapp i full storlek. Minsta bredden håller
   ensiffriga och tvåsiffriga nummer lika breda, så raden inte hoppar. */
.sidvaljare button{min-width:34px;padding:6px 9px;font-size:12.5px;font-weight:700}
.sidvaljare .sidnummer[aria-current="page"]{
  border-color:var(--accent);background:var(--markering);color:var(--accent);
}

/* ---------- introsidan ---------- */
.hjalte{padding:66px 0 44px;text-align:center}
.hjalte h1{font-size:clamp(34px,6vw,60px);line-height:1.02;font-weight:700;letter-spacing:-.03em;text-transform:uppercase}
.hjalte h1 span{color:var(--accent)}
.hjalte p{color:var(--muted);font-size:17px;max-width:640px;margin:20px auto 0;line-height:1.55}
.hjalte .knappar{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hjalte .knappar button{padding:13px 26px;font-size:15px}
.kortrad{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}

/* Tre kort per rad i stället för fyra. Används på kalkylatorsidan, där
   korten har längre text och blir för smala i en fyrkolumnare. */
.kortrad.tre{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){ .kortrad.tre{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .kortrad.tre{grid-template-columns:1fr} }
.funktion{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;display:block;text-decoration:none;color:inherit}
.funktion:hover{border-color:var(--accent)}
/* Emoji ovanför rubriken, den första varianten av korten. Ingen sida
   använder den längre: start, verktyg och kalkylatorer har alla gått över
   till .rubrikrad nedan. Står kvar för ett kort som bara behöver ett
   märke och inte en ritad ikon. */
.funktion .ikon{font-size:22px;margin-bottom:12px;display:block}
.funktion h3{font-size:17px;font-weight:700;margin-bottom:8px}
/* Ikonen står till vänster om rubriken i stället för ovanför den, och är en
   streckad svg på samma 24-rutnät som guidernas och quizets ikoner, se
   GUIDEIKONER i js/guide.js. Strecket sätts här och inte som attribut på
   varje svg, så att märket i html:en bara är viewBox och path. */
.funktion .rubrikrad{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.funktion .rubrikrad h3{margin:0;font-size:15.5px}
.funktion .rubrikrad svg{
  width:19px;height:19px;flex:none;color:var(--accent);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
/* Den här sortens kort är en knapp och inte en yta att läsa i: en rad med
   ikon och rubrik, en rad text under. Luften krymper därefter, annars ser
   nio sådana ut som nio artiklar. Regeln hakar i .rubrikrad och inte i en
   egen klass, eftersom det är just ikonraden som gör kortet kompakt.

   Används av startsidans sex kort, verktyg.html och kalkylatorer.html.
   TEXTEN SKA VARA EN RAD PÅ KORT UTAN BANDEROLL. Gränsen är 209 px, vilket
   är kortets textbredd vid 821 px fönsterbredd, alltså precis där rutnätet
   går från två kolumner till tre och kolumnen är som smalast. Två kolumner
   vid 561 px ger 223 px, och en telefon får hela bredden, så det är det tre
   spaltiga läget som sätter taket. Ett kort som bryter till två rader drar
   upp höjden på hela raden, och med sex eller nio kort ser raden trasig ut.

   Verktygssidans tre kort är undantaget. De har en banderoll som redan
   bestämmer höjden, och de är tre i en rad som sträcks lika höga ändå, så
   en andra textrad kostar ingenting där. */
.funktion:has(.rubrikrad){padding:15px 17px}

.funktion:has(.rubrikrad) p{font-size:13px;line-height:1.45}
.funktion p{color:var(--muted);font-size:13.5px;line-height:1.55}.avdelare{height:1px;background:var(--line);margin:44px 0}
.sektionsrubrik{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:14px}
/* En rad under sektionsrubriken, för sektioner som behöver en mening innan
   innehållet. Rubriken har redan sin marginal, så den här tar bort den och
   bär avståndet själv. */
.sektionsingress{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:640px;margin:-6px 0 16px}

/* ==========================================================
   Vikrutan: en ruta bakom en rund knapp

   Förbehållen längst ner på samlingssidorna, alltså vad verktygen
   inte gör och vad kalkylatorerna är. Texterna ska finnas kvar och
   gå att läsa, men de är inte det man kommer till sidan för, och
   utskrivna tog de mer plats än korten ovanför.

   Byggd på <details> och inte på en knapp med js. Öppning och
   stängning, tangentbord och uppläsare sköts då av webbläsaren, och
   texten finns i dokumentet även om en modul inte laddar. Sidorna
   har ingen egen js utöver starta().
   ========================================================== */
.vikruta > summary{
  display:flex;width:46px;height:46px;margin:0 auto;
  align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:var(--panel);
  color:var(--accent);font-size:21px;font-weight:700;line-height:1;
  cursor:pointer;box-shadow:0 2px 8px var(--skugga);
  transition:background-color .15s,color .15s,border-color .15s;
}
/* Triangeln framför summary tas bort på tre sätt, eftersom webbläsarna
   inte är överens: display:flex räcker i de flesta, list-style i Firefox
   och ::-webkit-details-marker i äldre Safari. */
.vikruta > summary{list-style:none}
.vikruta > summary::-webkit-details-marker{display:none}
.vikruta > summary::marker{content:""}
.vikruta > summary:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.vikruta > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Öppen knapp är fylld, så att det syns vilken knapp rutan hör till när
   texten står utskriven under den. */
.vikruta[open] > summary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* Frågetecknet byts mot ett kryss när rutan är öppen, samma grepp som
   hamburgaren: båda tecknen ligger i knappen och css väljer. */
.vikruta .kryss{display:none}
.vikruta[open] .fraga{display:none}
.vikruta[open] .kryss{display:block}
/* Rutan är inte sidans sista ord utan ett svar på ett tryck, så den tonar
   fram i stället för att hoppa upp. Marginalen ligger här och inte på
   .kort, eftersom kortets egen margin-bottom ska vara kvar. */
.vikruta > .kort{margin-top:16px;animation:vikFram .18s ease-out}
@keyframes vikFram{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
/* Samma hänsyn som bildvisaren och mobilmenyn. */
@media (prefers-reduced-motion:reduce){
  .vikruta > .kort{animation:none}
}
/* Rutnät av smala länkrutor, till listor där namnet är hela innehållet och
   ett kort vore för tungt. Rutorna är lika höga oavsett hur långt namnet
   är, så raden blir jämn även när en titel bryts i två.

   INGEN SIDA ANVÄNDER DET JUST NU. Startsidans guidelista gjorde det tills
   den togs bort. Reglerna står kvar för att listan kan komma tillbaka. */
.lankrutnat{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:10px}
.lankruta{
  display:flex;align-items:center;gap:13px;min-height:54px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:11px 15px;text-decoration:none;color:inherit;
}
.lankruta:hover{border-color:var(--accent)}
.lankruta .nr{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.06em;flex:0 0 auto}
.lankruta .namn{font-size:15px;font-weight:600;line-height:1.35}
/* Numrerad lista med nolla framför och accentfärg. Ingen sida använder den
   just nu: startsidan hade en och den togs bort. Klassen står kvar för
   nästa gång något ska räknas upp i steg.

   Numren ritas av en css-räknare och inte av listan själv, eftersom de ska
   ha nolla framför och accentfärg. En css-räknare läser dock inte ol:ets
   start-attribut, så en lista som fortsätter en annan måste säga var den
   börjar en gång till: style="--fran:3" ger första raden 04. Utan det
   börjar två spalter bredvid varandra båda om på 01. Sätt start på ol:et
   också, för den som lyssnar på sidan. */
.steglista{counter-reset:steg var(--fran,0);display:grid;gap:14px}
.steglista li{list-style:none;display:flex;gap:16px;align-items:flex-start}
.steglista li::before{
  counter-increment:steg;content:counter(steg,decimal-leading-zero);
  font-weight:700;color:var(--accent);font-size:13px;padding-top:2px;font-variant-numeric:tabular-nums;
}
.steglista h4{font-size:15px;font-weight:700;margin-bottom:3px}
.steglista p{color:var(--muted);font-size:13.5px;line-height:1.55}

/* ---------- progressbar ----------
   Delas av översikten, guidemenyn och kontosidan. Bredden på den
   fyllda delen sätts som style på span:en. En avklarad bar blir grön. */
.framstegsbar{height:8px;border-radius:99px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.framstegsbar > span{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .5s ease}
.framstegsbar[data-klar="1"] > span{background:var(--green)}

/* ---------- guideöversikten ---------- */
.tillbaka{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:8px}
.tillbaka:hover{color:var(--accent)}
.guidetotal{padding:24px 26px}
.guidetotal-topp{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.guidetotal .etikett{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:6px}
.guidetotal-tal{font-size:20px;font-weight:700;letter-spacing:-.01em}
.guidetotal-procent{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.guidetotal .framstegsbar{height:12px}
.guidetotal-fot{font-size:13.5px;color:var(--muted);margin-top:14px}
.guidetotal-fot a{color:var(--accent);font-weight:600}
/* Kort med banderoll, använt av verktyg.html och kalkylatorer.html. Samma
   uppbyggnad som guidekorten nedan:
   banderoll kant i kant upptill, ett orange stegnummer, rubrik, text och en
   knapp nere till höger. Egen klass och inte .funktion, eftersom .funktion
   delas med startsidans sex kort, som ska fortsätta vara kompakta knappar
   med en rad text.

   Texten får flex:1 så att knappen hamnar i botten även när korten har
   olika mycket text. Utan den hamnar knappen direkt under texten, och de
   tre knapparna står då på olika höjd i raden. */
.bildkort{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:border-color .12s;
}
.bildkort:hover{border-color:var(--accent)}
.bildkort-bild{display:block;width:calc(100% + 48px);margin:-22px -24px 4px;
  aspect-ratio:16/9;object-fit:cover;border-radius:13px 13px 0 0}
.bildkort-nr{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700}
.bildkort h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.bildkort p{color:var(--muted);font-size:13.5px;line-height:1.55;flex:1}
/* Foten har en kort faktarad till vänster och knappen till höger, samma
   uppdelning som guidekortens och quizkortens fötter. Raden säger vad
   verktyget ger, medan stycket ovanför säger vad steget går ut på. */
.bildkort-fot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.bildkort-meta{font-size:12.5px;color:var(--muted);min-width:0}
.bildkort-knapp{
  flex:none;padding:5px 12px;border:1.5px solid var(--accent);border-radius:8px;
  background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700;white-space:nowrap;
}
.bildkort:hover .bildkort-knapp{background:var(--knapp-hover);border-color:var(--knapp-hover)}

.guidekortrad{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.guidekort{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:border-color .12s;
}
.guidekort:hover{border-color:var(--accent)}
/* Omslaget går kant i kant upptill, alltså utanför kortets egen padding, och
   får kortets hörnradie minus kantlinjens bredd. 16:9 är samma format som
   bilderna ritas i, så object-fit får aldrig något att beskära i praktiken. */
.guidekort-bild{display:block;width:calc(100% + 48px);margin:-22px -24px 4px;
  aspect-ratio:16/9;object-fit:cover;border-radius:13px 13px 0 0}
.guidekort-nr{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700}
.guidekort h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.guidekort p{color:var(--muted);font-size:13.5px;line-height:1.55;flex:1}
.guidekort-meta{font-size:12px;color:var(--hint);margin-bottom:6px}
.guidekort-fot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-top:4px}
.guidekort-knapp{font-weight:700;color:var(--accent)}
.guidekort[data-klar="1"] .guidekort-knapp{color:var(--green)}

/* Kontosidans lista, en rad och en bar per guide. */
.guiderader{display:grid;gap:14px}
.guiderad-topp{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;margin-bottom:6px}
.guiderad-topp a{font-weight:600;color:var(--text);text-decoration:none}
.guiderad-topp a:hover{color:var(--accent)}
.guiderad-hoger{display:flex;align-items:center;gap:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.guiderad-hoger button{padding:4px 9px;font-size:11.5px}
.guidefot{margin-top:14px}

/* Kontosidans filer. Namnet är en länk, knapparna ligger under. */
.kontopost .namn{text-decoration:none}
.kontopost[data-redigerar="1"]{border-color:var(--accent);background:var(--markering)}
.kontopost input{margin-bottom:4px}

/* ---------- bekräftelserutan, js/fraga.js ---------- */
/* margin:auto är det som centrerar en dialog. Återställningen i stil.css
   sätter marginalen till noll på allt, och då hamnar rutan i hörnet. */
dialog.fraga{
  margin:auto;border:none;padding:0;border-radius:14px;background:var(--panel);color:var(--text);
  width:min(440px, calc(100vw - 32px));box-shadow:0 24px 60px var(--skugga);
}
dialog.fraga::backdrop{background:var(--dimma)}
.fraga-inre{padding:24px 24px 20px}
.fraga h2{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.fraga p{font-size:14px;line-height:1.6;color:var(--text-2)}
.fraga-knappar{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;flex-wrap:wrap}

/* ---------- guiden ---------- */
.guide[hidden],#oversikt[hidden],.tillbaka[hidden]{display:none}
/* minmax(0,1fr) och inte 1fr, så att innehåll som inte kan krympa aldrig
   gör kolumnen bredare än skärmen. */
.guide{display:grid;grid-template-columns:264px minmax(0,1fr);gap:26px;align-items:start}
.guidemeny{position:sticky;top:78px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;max-height:calc(100vh - 104px);overflow:auto}
.guidemeny .del{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:16px 8px 7px;font-weight:700}
.guidemeny .del:first-child{margin-top:2px}
.guidemeny a{
  display:flex;gap:9px;align-items:baseline;padding:8px 9px;border-radius:8px;
  color:var(--muted);text-decoration:none;font-size:13.5px;line-height:1.35;
}
.guidemeny a:hover{background:var(--panel-2);color:var(--text)}
.guidemeny a[data-aktiv="1"]{background:var(--markering);color:var(--accent);font-weight:600}
.guidemeny a .nr{font-variant-numeric:tabular-nums;font-size:11.5px;opacity:.65;min-width:17px}
.guidemeny a .bock{margin-left:auto;color:var(--green);font-size:12px}
.guideframsteg{font-size:12px;color:var(--muted);padding:10px 9px 4px;border-top:1px solid var(--line);margin-top:12px}
.guideframsteg .framstegsbar{height:6px;margin-top:8px}

/* Mobilraden överst i menyn. Dold på bred skärm, där listan alltid står
   framme. Knappen nollställer den globala hovringen, annars blir hela
   raden orange med ram när man trycker på den. */
.guidemeny-rad{
  display:none;width:100%;align-items:center;gap:12px;padding:12px 14px 10px;
  background:none;border:none;border-radius:14px 14px 0 0;text-align:left;color:var(--text);
}
.guidemeny-rad:hover{background:none;border:none;color:var(--text)}
.guidemeny-rad-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.guidemeny-rad-nr{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700}
.guidemeny-rad-titel{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guidemeny-rad-knapp{flex:none;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--accent)}
.guidemeny-rad-knapp::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s;
}
.guidemeny[data-oppen="1"] .guidemeny-rad-knapp::after{transform:translateY(2px) rotate(-135deg)}
.guidemeny-radbar{display:none;padding:0 14px 12px}
.guidemeny-radbar .framstegsbar{height:4px}
.kapitel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:34px 38px}
.kapitel .nummer{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700}
.kapitel h1{font-size:31px;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:10px 0 16px}
.kapitel .ingress{font-size:16px;color:var(--ingress);line-height:1.6;margin-bottom:24px}
.kapitel h2{font-size:19px;font-weight:700;margin:30px 0 12px;letter-spacing:-.01em}
.kapitel h3{font-size:15.5px;font-weight:700;margin:22px 0 8px;color:var(--text)}
.kapitel p{font-size:15px;line-height:1.72;color:var(--text-2);margin-bottom:13px}
.kapitel ul,.kapitel ol{margin:0 0 14px 22px}
.kapitel li{font-size:15px;line-height:1.7;color:var(--text-2);margin-bottom:7px}
.kapitel b{color:var(--text);font-weight:700}
.kapitel .ruta-text{background:var(--panel-2);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:16px 18px;margin:20px 0}
.kapitel .ruta-text p:last-child{margin-bottom:0}
.kapitel .ruta-text .etikett{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700;margin-bottom:8px}
/* Liten flagga före ett bolagsnamn. Ritad med bakgrundslager i stället för
   som bild eller emoji: en emojiflagga blir två bokstäver på Windows, och en
   bildfil hade blivit ett anrop till. Den svenska är ett kors, den
   amerikanska sju ränder och ett blått fält. */
.flagga{
  position:relative;overflow:hidden;
  display:inline-block;width:18px;height:12px;border-radius:2px;margin-right:8px;
  vertical-align:-1px;box-shadow:inset 0 0 0 1px var(--line);
}
.flagga[data-land="SE"]{
  background:
    linear-gradient(var(--flagga-se-gul),var(--flagga-se-gul)) 5px 0/3px 100% no-repeat,
    linear-gradient(var(--flagga-se-gul),var(--flagga-se-gul)) 0 4.5px/100% 3px no-repeat,
    var(--flagga-se-bla);
}
.flagga[data-land="US"]{
  background:repeating-linear-gradient(var(--flagga-us-rod) 0 1.72px, var(--flagga-vit) 1.72px 3.44px);
}
/* Det blå fältet ligger som ett eget lager, så att stjärnprickarna kan
   upprepas inuti det utan att spilla ut över ränderna. Vid tolv bildpunkters
   höjd går inga stjärnor att rita, men ett rutmönster av prickar ger samma
   intryck som emojin på håll. */
.flagga[data-land="US"]::before{
  content:"";position:absolute;left:0;top:0;width:8px;height:7px;
  background:
    radial-gradient(circle at 50% 50%, var(--flagga-vit) 0 .36px, transparent .37px) 0 0/2px 1.75px,
    var(--flagga-us-bla);
}
.kapitel table{min-width:0;margin:8px 0 18px;width:100%}
.kapitel th,.kapitel td{white-space:normal;font-size:14px;text-align:left}
.kapitel th:first-child,.kapitel td:first-child{position:static;min-width:0;background:none}
/* På en telefon ryms inte fyra eller fem kolumner utan att tabellen måste
   dras i sidled, och då syns aldrig hela raden samtidigt. Varje rad blir
   därför ett eget kort: första cellen är rubrik, resten etikett och värde på
   var sin sida. Kolumnrubrikerna kommer från data-rubrik, som sätts av
   avsnittHtml i js/guide.js. */
@media (max-width:560px){
  .kapitel .rullyta{overflow:visible}
  .kapitel .rullyta table,.kapitel .rullyta tbody,.kapitel .rullyta tr,.kapitel .rullyta td{display:block;width:auto}
  .kapitel .rullyta thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .kapitel .rullyta tr{
    background:var(--bg);border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;margin-bottom:10px;
  }
  .kapitel .rullyta td{border:0;padding:3px 0}
  .kapitel .rullyta td:first-child{font-weight:700;color:var(--text);font-size:15px;padding-bottom:6px}
  /* Etikettkolumnen har en låst andel av bredden. Med flex:0 1 auto fick varje
     etikett bredden av sin egen text, så värdena började på olika ställe på
     varje rad och kortet såg ostädat ut. Nu linjerar de. */
  .kapitel .rullyta td:not(:first-child){display:flex;align-items:baseline;gap:12px}
  .kapitel .rullyta td:not(:first-child)::before{content:attr(data-rubrik);color:var(--muted);flex:0 0 42%;min-width:0;hyphens:auto}
  /* En tabell vars första kolumnrubrik är tom har radnamnet som etikett, och
     då behöver den ingen egen rubrikrad i kortet. */
  .kapitel .rullyta td:empty{display:none}
  /* Två och tre kolumner ryms som tabell även på en telefon, och då behövs
     inga kort. Rubrikerna står kvar en gång högst upp i stället för att
     upprepas på varje rad, och tabellen blir både kortare och lättare att
     jämföra i. Bredden fördelas av webbläsaren, inte av låsta andelar:
     kolumnerna innehåller allt från fem till sjuttio tecken, och en jämn
     delning hade gjort den längsta kolumnen till en remsa. */
  .kapitel .rullyta .somtabell,
  .kapitel .rullyta .somtabell tbody,
  .kapitel .rullyta .somtabell tr,
  .kapitel .rullyta .somtabell td{display:revert;width:auto}
  .kapitel .rullyta .somtabell{width:100%;table-layout:auto}
  .kapitel .rullyta .somtabell thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .kapitel .rullyta .somtabell tr{background:none;border:0;border-radius:0;padding:0;margin:0}
  .kapitel .rullyta .somtabell th,
  .kapitel .rullyta .somtabell td{
    display:table-cell;white-space:normal;vertical-align:top;
    hyphens:auto;overflow-wrap:break-word;
    padding:9px 10px 9px 0;border-bottom:1px solid var(--line);
  }
  .kapitel .rullyta .somtabell th:last-child,
  .kapitel .rullyta .somtabell td:last-child{padding-right:0}
  .kapitel .rullyta .somtabell td:first-child{font-weight:600;font-size:14px;padding-bottom:9px}
  .kapitel .rullyta .somtabell td::before{content:none}
  /* Tre kolumner på 305 px ger ungefär hundra pixlar var, fyra ännu mindre.
     Ett snäpp mindre grad och tightare luft gör skillnaden mellan tre och
     fyra rader per cell. */
  .kapitel .rullyta .tat th,
  .kapitel .rullyta .tat td{font-size:13px;padding-right:8px}
  .kapitel .rullyta .tat td:first-child{font-size:13px}
  /* Många kolumner ryms inte som kort. Tabellen behålls som tabell och får
     dras i sidled i stället, så att raden går att läsa i följd. */
  .kapitel .rullyta.bred{overflow-x:auto}
  .kapitel .rullyta .bredtabell,
  .kapitel .rullyta .bredtabell tbody,
  .kapitel .rullyta .bredtabell tr,
  .kapitel .rullyta .bredtabell td{display:revert;width:auto}
  .kapitel .rullyta .bredtabell{width:100%}
  .kapitel .rullyta .bredtabell thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .kapitel .rullyta .bredtabell tr{background:none;border:0;border-radius:0;padding:0;margin:0}
  .kapitel .rullyta .bredtabell th,
  .kapitel .rullyta .bredtabell td{white-space:nowrap;padding:6px 10px 6px 0;font-size:13px}
  .kapitel .rullyta .bredtabell td:first-child,
  .kapitel .rullyta .bredtabell th:first-child{position:sticky;left:0;background:var(--bg);padding-right:14px}
  .kapitel .rullyta .bredtabell td::before{content:none}
  /* Fallbara tabeller visar bara bolagsnamnet tills raden öppnas. */
  .kapitel .fallbar td:not(:first-child){display:none}
  .kapitel .fallbar tr.oppen td:not(:first-child){display:flex}
  .kapitel .fallbar td:first-child{padding:0}
  /* Flaggan och namnet hålls ihop till vänster, pilen skjuts ut till höger
     med auto-marginal. Med space-between blir texten ett eget flexobjekt
     mitt i raden, alltså centrerad, vilket ser oavsiktligt ut. */
  .kapitel .radknapp{
    display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;
    background:none;border:0;padding:0;margin:0;cursor:pointer;
    font:inherit;font-weight:700;color:var(--text);text-align:left;
  }
  .kapitel .radknapp::after{
    content:"";flex:none;width:9px;height:9px;margin:0 2px 0 auto;
    border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;
  }
  .kapitel .oppen .radknapp{padding-bottom:6px}
  .kapitel .oppen .radknapp::after{transform:rotate(-135deg) translate(-3px,-3px)}
}
/* På bredare skärmar är knappen bara text, utan pil och utan klickyta. */
@media (min-width:561px){
  .kapitel .radknapp{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:default}
}
/* Bildplatsen och fyll i-rutan är till för utkast. De streckade
   kanterna gör att de inte går att förväxla med färdigt innehåll. */
.kapitel .bildplats{border:2px dashed var(--faltram);border-radius:12px;background:var(--matning);padding:26px 22px;margin:20px 0;text-align:center}
.kapitel .bildplats .etikett{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:8px}
.kapitel .bildplats p{font-size:14px;color:var(--muted);margin:0 auto;max-width:520px}
.kapitel .guidebild{margin:20px 0}
/* Höjden har ett tak, så att en kvadratisk eller stående skärmbild inte tar
   hela textbredden på en datorskärm. Liggande bilder begränsas av bredden
   som förut. Knappen krymper med bilden och centreras. */
.kapitel .guidebild img{display:block;width:auto;height:auto;max-width:100%;max-height:min(480px,70vh);border-radius:12px}
/* bred:true på bilden tar bort höjdtaket och låter den fylla textbredden.
   Till skärmbilder av verktygen, där detaljerna försvinner om bilden krymps. */
.kapitel .guidebild.bred img{width:100%;max-height:none}
.kapitel .guidebild.bred .bildforstora{width:100%}
.kapitel .guidebild figcaption{font-size:13px;color:var(--muted);margin-top:8px}
/* Annonslänk. Ska gå att skilja från guidens eget innehåll vid en blick,
   därför en heldragen ram och ingen accentkant som rutorna har. Märkningen
   sitter överst och foten förklarar vad ersättningen betyder för läsaren.
   Se partnerHtml i js/guide.js. */
.kapitel .guidepartner{
  margin:22px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.guidepartner-etikett{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;
}
.kapitel .guidepartner-text{margin:0;font-size:15px}
.guidepartner-knapp{
  display:inline-block;padding:9px 16px;border:1.5px solid var(--accent);border-radius:9px;
  background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;text-decoration:none;
}
a.guidepartner-knapp:hover{background:var(--knapp-hover);border-color:var(--knapp-hover)}
.guidepartner-knapp[data-tom="1"]{background:var(--panel-2);border-color:var(--line);color:var(--hint)}
.kapitel .guidepartner-fot{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.kapitel .guidepartner-risk{
  margin:0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--text-2);
}

/* Den särskilda upplysningen vid marknadsföring av kreditavtal. Texten och
   triangeln är föreskrivna, se KREDITUPPLYSNING i js/guide.js, och ska synas
   utan att läsaren behöver leta. */
.kapitel .guidepartner-varning{
  display:flex;gap:10px;margin:0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--text-2);
}
.guidepartner-varning svg{flex:none;width:20px;height:20px;color:var(--red);margin-top:1px}

/* Förenklade telefonskärmar, en per steg. Se telefonerHtml i js/guide.js.
   Formen följer skissen: ett beige telefonskal med högtalarstreck, en vit
   skärm innanför, fälten som rundade piller och en fylld knapp längst ner.
   Allt ritat med kant och radie i stället för en bild, så skärmarna följer
   sidans färger och blir skarpa i alla storlekar. */
.kapitel .guidetelefoner{margin:22px 0}
.telefoner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:18px}
.telefon{display:flex;flex-direction:column;gap:12px}
.telefonram{
  background:var(--panel-2);border:1.5px solid var(--line);border-radius:26px;
  padding:14px 11px;display:flex;flex-direction:column;gap:10px;
}
.telefonhogtalare{display:block;width:30%;height:5px;border-radius:3px;background:var(--text);opacity:.8;margin:0 auto}
.telefonskarm{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:12px 10px;display:flex;flex-direction:column;gap:7px;
}
.telefonrubrik{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.telefonrad{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  border:1.5px solid var(--line);border-radius:999px;padding:7px 12px;font-size:11.5px;color:var(--muted);
}
.telefonrad b{color:var(--text);font-size:11.5px;white-space:nowrap}
.telefonrad.vald{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.telefonrad.vald b{color:var(--on-accent)}
.telefonsymbol{display:grid;place-items:center;padding:6px 0 2px;color:var(--accent)}
.telefonikon{width:30px;height:30px}
.telefonknapp{
  margin-top:4px;text-align:center;background:var(--accent);color:var(--on-accent);
  border-radius:999px;padding:9px 10px;font-size:12px;font-weight:700;
}
.telefonnamn{display:flex;flex-direction:column;gap:3px}
.telefonnamn b{font-size:13.5px;line-height:1.3}
.telefonnamn span{font-size:12.5px;color:var(--muted);line-height:1.45}
.kapitel .guidetelefoner figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* Små cirkeldiagram bredvid varandra, ett per upplägg. Se cirklarHtml i
   js/guide.js. Två färger: den första för fonder, den andra för aktier,
   samma par som kurvorna. Varje kort har en text under sig, så färgen är
   aldrig enda skillnaden. Mellanrummen mellan delarna ritas som en kant i
   bakgrundsfärgen, vilket håller tårtbitarna isär utan extra former. */
.kapitel .guidecirklar{margin:22px 0}
/* Samma platta som kurvdiagrammen. Minicirklarnas bitar skiljs dessutom åt av
   en kontur i var(--bg), och den syns bara mot just den bakgrunden. */
.kapitel .minicirkelyta{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.minicirkel-forklaring{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px;font-size:13px;color:var(--text-2)}
.minicirkel-forklaring span{display:inline-flex;align-items:center;gap:7px}
.minicirkel-forklaring i{width:12px;height:12px;border-radius:3px;background:var(--accent)}
.minicirkel-forklaring i[data-slag="1"]{background:var(--green)}
.minicirklar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.minicirkel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.minicirkel svg{width:100%;max-width:130px;height:auto;display:block}
.minicirkel-bit{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.minicirkel-bit[data-slag="1"]{fill:var(--green)}
.minicirkel b{font-size:14px;line-height:1.3}
.minicirkel span{font-size:12.5px;color:var(--muted);line-height:1.45}
.kapitel .guidecirklar figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* Två sparanden ritade som kurvor, se kurvorHtml i js/guide.js. Serierna får
   färg efter sin plats i listan: den första grön, den andra i accentfärgen.
   Paret är kontrollerat mot bakgrunden för både normalseende och färgblindhet.
   Texten i diagrammet bär aldrig seriens färg, utan sidans vanliga textfärger,
   och varje kurva har en egen etikett vid slutpunkten. Ytan mellan kurvorna är
   skillnaden, alltså vad avgiften har kostat. */
.kapitel .guidekurvor{margin:22px 0}
/* Diagrammet ligger på en platta i samma varma vita som illustrationernas
   egen bakgrund, med samma rundning som bilderna, så att graferna och
   bilderna ser ut att höra till samma familj. Bildtexten står utanför
   plattan, precis som under en bild. */
.kapitel .kurvyta{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px 12px}
.kapitel .guidekurvor svg{display:block;width:100%;height:auto;overflow:visible}
.kurvlegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px;font-size:13px;color:var(--text-2)}
.kurvnamn{display:inline-flex;align-items:center;gap:7px}
.kurvnamn i{width:14px;height:3px;border-radius:2px;background:var(--green)}
.kurvnamn[data-serie="1"] i{background:var(--accent)}
.kurvrutnat{stroke:var(--line);stroke-width:1}
.kurvtal,.kurvar{fill:var(--hint);font-size:11px}
/* Talen på skalan ritas sist och får en kontur i plattans färg. En kurva som
   passerar ett tal hamnar då bakom det i stället för framför, vilket annars
   syns på en telefon där texten sätts i större grad. */
.kurvtal{paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.kurvar{text-anchor:middle}
.kurvmellanrum{fill:var(--markering)}
.kurva{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke:var(--green)}
.kurva[data-serie="1"]{stroke:var(--accent)}
.kurvpunkt{fill:var(--green)}
.kurvpunkt[data-serie="1"]{fill:var(--accent)}
/* Etiketten läggs ovanför den övre kurvan och under den undre, så att ingen
   text hamnar inne i ytan mellan dem. Konturen i bakgrundsfärgen gör att
   texten går att läsa även där den korsar en stödlinje. */
.kurvslut{fill:var(--text);font-size:14px;font-weight:700}
.kurvslutnamn{fill:var(--muted);font-size:12px}
.kurvnamn b{color:var(--text)}
/* Diagrammet skalas med bredden, så texten krymper med den. På en telefon
   sätts den därför i en större grad i diagrammets eget mått. */
@media (max-width:560px){
  .kurvtal,.kurvar{font-size:20px}
  /* På en telefon får etiketterna vid kurvornas slut inte plats i läsbar
     grad. Slutsummorna står då i teckenförklaringen i stället. */
  .kurvslut,.kurvslutnamn{display:none}
}
.kapitel .guidekurvor figcaption{font-size:13px;color:var(--muted);margin-top:8px}

/* Ikonrutnätet. Tre rutor per rad på datorn och två på mobil, aldrig en
   ensam sist på raden eftersom antalet kort alltid är jämnt delbart med två.
   Etiketterna hålls korta, så att de får plats på högst två rader. */
.kapitel .guideikoner{margin:22px 0}
.kapitel .ikonrutor{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:12px}
.kapitel .ikonruta{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.kapitel .ikonruta svg{width:34px;height:34px;color:var(--accent);flex:none}
.kapitel .ikonruta span{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--text)}
.kapitel .guideikoner figcaption{font-size:13px;color:var(--muted);margin-top:8px}

/* Bilden är en knapp som öppnar bildvisaren, se js/bildvisare.js. Knappens
   egen ram, bakgrund och hovringsfärg från stil.css nollställs, så att bara
   bilden syns. Etiketten i hörnet visar att bilden går att förstora, vilket
   inte syns av sig självt på en telefon där det inte finns någon muspekare. */
.kapitel .bildforstora{
  position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;padding:0;border:0;border-radius:12px;
  background:none;color:inherit;cursor:zoom-in;line-height:0;min-height:0;
}
.kapitel .bildforstora:hover{background:none;border:0;color:inherit}
.kapitel .bildforstora:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kapitel .forstoramarke{
  position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;background:var(--topp);color:var(--text);
  font-size:12px;font-weight:600;line-height:1.2;box-shadow:0 2px 8px var(--skugga);
}
.kapitel .bildforstora:hover .forstoramarke{color:var(--accent)}

/* Bildvisaren i helskärm. Sidan bakom låses så att den inte scrollar med. */
html.bildvisare-oppen{overflow:hidden}
dialog.bildvisare{
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:var(--bildvisare-bakgrund);color:var(--bildvisare-text);overflow:hidden;
}
dialog.bildvisare::backdrop{background:transparent}
.bildvisare-scen{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;cursor:zoom-in;
}
dialog.bildvisare[data-zoomad="1"] .bildvisare-scen{cursor:grab}
dialog.bildvisare[data-drar="1"] .bildvisare-scen{cursor:grabbing}
.bildvisare-scen img{
  max-width:calc(100vw - 32px);max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);
  border-radius:8px;transform-origin:center;will-change:transform;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.bildvisare-scen img.animera{transition:transform .2s ease}
@media (prefers-reduced-motion:reduce){ .bildvisare-scen img.animera{transition:none} }
.bildvisare-verktyg{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:1}
.bildvisare-verktyg button{
  width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:var(--bildvisare-knapp);color:var(--bildvisare-text);line-height:0;
}
.bildvisare-verktyg button svg{width:22px;height:22px;display:block}
.bildvisare-verktyg button:hover{background:var(--bildvisare-knapp-hover);color:var(--bildvisare-text)}
.bildvisare-text{
  position:absolute;left:16px;right:16px;bottom:18px;margin:0;text-align:center;
  font-size:13px;line-height:1.45;color:var(--bildvisare-text);opacity:.8;pointer-events:none;
}
/* Stora tal i var sin ruta, se siffrorHtml i js/guide.js. Beloppet bryts
   aldrig, eftersom "−100 000 kr" på två rader inte går att läsa som ett tal. */
.kapitel .guidesiffror{margin:20px 0}
.kapitel .siffrorutor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kapitel .sifferruta{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kapitel .sifferruta .etikett{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700}
.kapitel .sifferruta .belopp{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;margin:8px 0 4px}
.kapitel .sifferruta .forklaring{font-size:13px;line-height:1.45;color:var(--muted)}
.kapitel .guidesiffror figcaption{font-size:13px;color:var(--muted);margin-top:8px}
/* Trappor bredvid varandra, se trapporHtml i js/guide.js. Varje steg flyttas
   åt höger med --i, som sätts på raden. Listans egen marginal och indrag
   nollställs, annars ärver den kapitlets vanliga listor. */
.kapitel .guidetrappor{margin:20px 0}
.kapitel .trappor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kapitel .trappa{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kapitel .trappa .etikett{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700}
.kapitel .trappa .trapptext{font-size:13px;line-height:1.45;color:var(--muted);margin:4px 0 12px}
.kapitel .trappsteg{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kapitel .trappsteg li{
  margin:0 0 0 calc(var(--i) * 11%);display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;
}
.kapitel .trappsteg .nr{
  flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;
}
.kapitel .trappsteg .trappinnehall{display:flex;flex-direction:column;min-width:0;font-size:13.5px;line-height:1.35;color:var(--text)}
.kapitel .trappsteg .detalj{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.kapitel .trappsteg .nyckel{color:var(--accent);font-weight:700}
.kapitel .guidetrappor figcaption{font-size:13px;color:var(--muted);margin-top:8px}
/* Tipslistan, se tipsHtml i js/guide.js. Två nivåer av details: rutan
   fäller ut kategorierna, och varje kategori fäller ut sina tips. details
   och summary sköter öppning, tangentbord och skärmläsare utan egen kod.
   Webbläsarens egen triangel döljs och ersätts av samma pil som i
   guidemenyn. */
.kapitel .tipslista{margin:18px 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.kapitel .tipslista summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px}
.kapitel .tipslista summary::-webkit-details-marker{display:none}
.kapitel .tipslista summary::after{
  content:"";flex:none;width:7px;height:7px;margin-left:4px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s;
}
.kapitel .tipslista[open] > summary::after,
.kapitel .tipskategori[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.kapitel .tipslista .antal{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.kapitel .tipslista > summary{padding:15px 18px}
.kapitel .tipsknapp{font-size:15px;font-weight:700;color:var(--accent)}
.kapitel .tipsknapp .oppen,
.kapitel .tipslista[open] .tipsknapp .stangd{display:none}
.kapitel .tipslista[open] .tipsknapp .oppen{display:inline}
.kapitel .tipskategorier{border-top:1px solid var(--line);padding:2px 12px 6px}
.kapitel .tipskategori + .tipskategori{border-top:1px solid var(--line)}
.kapitel .tipskategori > summary{padding:12px 6px}
.kapitel .tipskategori > summary:hover .tipsnamn{color:var(--accent)}
.kapitel .tipsnamn{font-size:14.5px;font-weight:600;color:var(--text)}
.kapitel .tipskategori ul{margin:0 6px 14px 28px}
.kapitel .tipskategori li{font-size:14.5px;line-height:1.6;color:var(--text-2);margin-bottom:7px}
/* Ringdiagrammet, se cirkelHtml i js/guide.js. Ringen till vänster och
   förklaringen till höger, under varandra på mobil. Summan i mitten är
   vanlig text ovanpå svg-bilden, så att den har sajtens typsnitt och inte
   skalas med ringen. Listans egen marginal nollställs, annars ärver den
   kapitlets vanliga listor. */
.kapitel .guidecirkel{margin:20px 0}
.kapitel .cirkelyta{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px;align-items:center;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:22px 24px;
}
.kapitel .cirkel{position:relative;width:100%;max-width:220px;aspect-ratio:1}
.kapitel .cirkel svg{display:block;width:100%;height:100%}
.kapitel .cirkelmitt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.2}
.kapitel .cirkelmitt b{font-size:19px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.kapitel .cirkelmitt span{font-size:12px;color:var(--muted)}
.kapitel .cirkeldelar{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kapitel .cirkeldelar li{display:flex;gap:12px;align-items:flex-start;margin:0}
.kapitel .cirkeldelar .prick{flex:none;width:14px;height:14px;border-radius:4px;margin-top:2px}
.kapitel .cirkeltext{display:flex;flex-direction:column;min-width:0}
.kapitel .cirkelnamn{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-2)}
.kapitel .cirkelrad{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kapitel .cirkelandel{font-size:24px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.kapitel .cirkelbelopp{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.kapitel .cirkelforklaring{font-size:13px;line-height:1.45;color:var(--muted)}
.kapitel .guidecirkel figcaption{font-size:13px;color:var(--muted);margin-top:8px}
/* Stapeldiagrammet, se staplarHtml i js/guide.js. Staplarna är vanliga
   element med höjd i procent, inte en bild, så de följer med bredden på alla
   skärmar. Diagrammet har luft ovanför för etiketten vid vändpunkten, och
   det streckade strecket ligger bakom staplarna. */
.kapitel .guidestaplar{margin:20px 0}
.kapitel .sparstapelyta{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px 12px}
.kapitel .sparstapelforklaring{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:8px}
.kapitel .sparstapelforklaring span{display:flex;align-items:center;gap:7px}
.kapitel .sparstapelforklaring i{width:12px;height:12px;border-radius:3px;display:block}
.kapitel .sparstapel-insatt{background:var(--sparstapel-insatt)}
.kapitel .sparstapel-avkastning{background:var(--accent)}
.kapitel .sparstapeldiagram{display:flex;align-items:stretch;gap:4px;height:200px;padding-top:26px;border-bottom:1px solid var(--text-2)}
.kapitel .sparstapelpar{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;gap:1px}
.kapitel .sparstapel{position:relative;z-index:1;flex:1 1 0;min-width:0;border-radius:2px 2px 0 0}
.kapitel .sparstapelpar.vand::before{content:"";position:absolute;left:50%;top:-6px;bottom:0;border-left:1.5px dashed var(--text-2)}
.kapitel .vandetikett{
  position:absolute;left:50%;top:-26px;transform:translateX(-50%);white-space:nowrap;
  font-size:11.5px;font-weight:700;color:var(--text-2);background:var(--bg);padding:0 4px;
}
.kapitel .sparstapelaxel{display:flex;gap:4px;margin-top:6px}
.kapitel .sparstapelaxel span{flex:1 1 0;min-width:0;display:flex;justify-content:center;white-space:nowrap;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Första och sista årtalet vänds inåt, som i kalkylatorernas diagram. Ett
   årtal är bredare än stapelparet på en telefon, och centrerat hamnade det
   utanför rutan. Flex och inte text-align: text som är bredare än sin ruta
   rinner alltid över åt höger med text-align, men åt vänster med flex-end. */
.kapitel .sparstapelaxel span:first-child{justify-content:flex-start}
.kapitel .sparstapelaxel span:last-child{justify-content:flex-end}
.kapitel .guidestaplar figcaption{font-size:13px;color:var(--muted);margin-top:8px}
/* Checklistan i sista kapitlet, se checklistaHtml i js/guide.js. Hela
   raden är klickbar. Rutan är webbläsarens egen kryssruta i accentfärgen,
   inte en egenritad, så att tangentbord och skärmläsare fungerar som
   vanligt. De globala reglerna för input nollställs, annars blir rutan
   lika bred som ett textfält. */
.kapitel .checklista{margin:16px 0 20px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kapitel .checklista-topp{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.kapitel .checklista-antal{flex:none;font-size:12.5px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.kapitel .checklista-topp .framstegsbar{flex:1;min-width:0}
.kapitel .checklista-punkter{list-style:none;margin:0;padding:0}
.kapitel .checklista-punkter li{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 2px;border-top:1px solid var(--line)}
.kapitel .checklista-punkter li:first-child{border-top:0}
.kapitel .checklista-punkter label{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:15px;line-height:1.55;color:var(--text-2);margin:0}
.kapitel .checklista-punkter input{
  flex:none;width:20px;height:20px;min-height:0;margin:2px 0 0;padding:0;border:0;box-shadow:none;background:none;
  appearance:auto;-webkit-appearance:checkbox;accent-color:var(--accent);cursor:pointer;
}
.kapitel .checklista-punkter li[data-bockad="1"] label{color:var(--muted)}
.kapitel .checklista-kapitel{flex:none;font-size:12.5px;font-weight:600;white-space:nowrap;margin-top:3px;text-decoration:none}
.kapitel .checklista-kapitel:hover{text-decoration:underline}
.kapitel .checklista-klar{margin-top:10px;padding:12px 14px;border-radius:10px;background:var(--panel);border-left:3px solid var(--green);font-size:14px;line-height:1.55;color:var(--text-2)}
.kapitel .checklista-klar[hidden]{display:none}

/* ---------- kunskapsquiz ----------
   Se js/quiz.js och js/quizer.js. Frågorna är fieldset med webbläsarens
   egna radioknappar och kryssrutor i accentfärgen, så att tangentbord och
   skärmläsare fungerar som vanligt. De globala reglerna för input
   nollställs, annars blir knapparna lika breda som ett textfält. Efter
   rättningen märks frågan med data-ratt och alternativen med
   data-markering: ratt, missad eller fel. */
/* Korten i översikten. Medvetet mindre och tätare än guidekorten, med en
   ikon per quiz i stället för beskrivning. Beskrivningen ligger i title.
   Stapeln visar bästa resultatet. Knappen är fylld när quizet inte är gjort
   och har kant när det är gjort, så att det syns vilka som återstår. */
/* Minsta bredden är satt så att den längsta titeln, Analysera och värdera ett
   bolag, ryms på en rad. En ny längre titel kortas med tre punkter i stället
   för att bryta, så att alla kort är lika höga. */
.quizrutor{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:12px}
.quizruta{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;transition:border-color .12s;
}
.quizruta:hover{border-color:var(--accent)}
/* Omslaget går kant i kant upptill, alltså utanför kortets padding, och får
   kortets hörnradie minus kantlinjens bredd. Samma bild som på guidekortet,
   och det är den som ersatte ikonrutan till vänster om titeln. */
.quizruta-bild{display:block;width:calc(100% + 32px);margin:-14px -16px 0;
  aspect-ratio:16/9;object-fit:cover;border-radius:11px 11px 0 0}
.quizruta-namn{display:flex;flex-direction:column;gap:2px;min-width:0}
.quizruta-nr{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--hint);font-weight:700}
.quizruta-namn b{font-size:15px;line-height:1.3;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quizruta-poang{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.quizruta-poang span{display:block;height:100%;background:var(--accent);border-radius:3px}
.quizruta[data-klar="1"] .quizruta-poang span{background:var(--green)}
.quizruta-fot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.quizruta-status{font-size:12.5px;color:var(--muted);min-width:0}
.quizruta-status b{color:var(--text)}
.quizruta-knapp{
  flex:none;padding:5px 12px;border:1.5px solid var(--accent);border-radius:8px;
  background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700;white-space:nowrap;
}
.quizruta:hover .quizruta-knapp{background:var(--knapp-hover);border-color:var(--knapp-hover)}
.quizruta[data-gjord="1"] .quizruta-knapp{background:var(--panel);color:var(--accent)}
.quizruta[data-gjord="1"]:hover .quizruta-knapp{background:var(--markering);border-color:var(--accent)}
/* Framsteget inne i ett quiz. Klistrad, så att den syns medan man scrollar
   genom frågorna. */
.quizframsteg{
  position:sticky;top:0;z-index:5;max-width:760px;display:flex;align-items:center;gap:14px;
  margin-bottom:12px;padding:10px 0;background:var(--bg);
}
.quizframsteg[hidden]{display:none}
.quizframsteg span{flex:none;font-size:13px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.quizframsteg .framstegsbar{flex:1;min-width:0}
.quizbasta{max-width:760px;font-size:13.5px;color:var(--text-2);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:16px}
.quizform{display:grid;gap:14px;max-width:760px}
.quizfraga{min-width:0;margin:0;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.quizfraga legend{float:left;width:100%;display:flex;flex-direction:column;gap:4px;padding:0;margin-bottom:12px}
.quizfraga legend + *{clear:both}
.quiznr{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700}
.quiztext{font-size:16.5px;font-weight:700;line-height:1.4;color:var(--text)}
.quiztyp{font-size:12.5px;font-weight:600;color:var(--muted)}
.quizsvar{display:grid;gap:8px}
.quizalternativ{display:flex;align-items:flex-start;gap:12px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;font-size:15px;line-height:1.5;color:var(--text-2)}
.quizalternativ:hover{border-color:var(--accent)}
.quizalternativ input{
  flex:none;width:18px;height:18px;min-height:0;margin:3px 0 0;padding:0;border:0;box-shadow:none;background:none;
  appearance:auto;-webkit-appearance:auto;accent-color:var(--accent);cursor:pointer;
}
.quizalternativ:has(input:checked){border-color:var(--accent);background:var(--markering)}
.quizfraga[data-rattad="1"] .quizalternativ{cursor:default}
.quizfraga[data-rattad="1"] .quizalternativ:hover{border-color:var(--line)}
.quizfraga[data-rattad="1"] .quizalternativ input{cursor:default}
.quizalternativ[data-markering="ratt"],
.quizfraga[data-rattad="1"] .quizalternativ[data-markering="ratt"]:hover{border-color:var(--green);background:var(--ratt-ljus)}
.quizalternativ[data-markering="missad"],
.quizfraga[data-rattad="1"] .quizalternativ[data-markering="missad"]:hover{border-color:var(--green);border-style:dashed;background:var(--bg)}
.quizalternativ[data-markering="fel"],
.quizfraga[data-rattad="1"] .quizalternativ[data-markering="fel"]:hover{border-color:var(--red);background:var(--fel-ljus)}
.quizmarke{flex:none;margin-left:auto;padding-left:8px;font-size:12px;font-weight:700;white-space:nowrap}
.quizalternativ[data-markering="ratt"] .quizmarke,
.quizalternativ[data-markering="missad"] .quizmarke{color:var(--ok-text)}
.quizalternativ[data-markering="fel"] .quizmarke{color:var(--fel-text)}
.quizfacit{margin-top:12px;padding:12px 14px;border-left:3px solid var(--line);border-radius:0 10px 10px 0;background:var(--panel-2);font-size:14px;line-height:1.55;color:var(--text-2)}
.quizfacit[hidden]{display:none}
.quizfacit b{color:var(--text)}
.quizfacit p{margin:0 0 8px}
.quizfacit p:last-child{margin-bottom:0}
.quizfacit ul{margin:0 0 8px;padding-left:20px}
.quizfacit li{margin:2px 0}
.quizfacit .quizlas{font-size:13px}
.quizfraga[data-ratt="1"] .quizfacit{border-left-color:var(--green)}
.quizfraga[data-ratt="0"] .quizfacit{border-left-color:var(--red)}
.quizfot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:4px 2px}
.quizfot[hidden]{display:none}
.quizbesvarade{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.quizresultat{max-width:760px;margin-bottom:18px;padding:20px 22px;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:14px;background:var(--panel)}
.quizresultat[data-niva="alla"]{border-top-color:var(--green)}
.quizpoang{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.quizpoang b{font-size:32px;letter-spacing:-.02em;color:var(--text)}
.quizpoang span{font-size:15px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.quizomdome{margin:6px 0 4px;font-size:15px;color:var(--text-2)}
.quizsparat{font-size:13.5px;color:var(--muted)}
.quizsparat b{color:var(--ok-text)}
.quizknappar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.quizknappar a{display:inline-flex;align-items:center;padding:9px 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
.quizknappar a:hover{border-color:var(--accent);color:var(--accent)}

/* Rutan i sista kapitlet av varje guide, se ritaKapitel i js/guide.js. */
.kapitel .guidequiz{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;margin-top:26px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--markering)}
.kapitel .guidequiz .etikett{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700;margin-bottom:4px}
.kapitel .guidequiz p{margin:0;max-width:480px;font-size:14.5px}
.kapitel .guidequiz-knapp{display:inline-flex;align-items:center;padding:10px 16px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.kapitel .guidequiz-knapp:hover{background:var(--knapp-hover);color:var(--on-accent)}
.kapitel .fyll-i{border:1.5px dashed var(--accent);border-radius:10px;background:var(--markering);padding:14px 18px;margin:20px 0}
.kapitel .fyll-i .etikett{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700;margin-bottom:6px}
.kapitel .fyll-i p{margin:0}
/* Kapitlets fot i två rader, likadant på alla skärmar. Överst avbocknings-
   knappen i hela bredden, under den föregående till vänster och nästa till
   höger. Nästa trycks mot högerkanten även när föregående saknas, så att
   raden ser likadan ut i första kapitlet.

   Bara en knapp är orange åt gången. Innan kapitlet är avbockat är det
   avbockningen, efteråt nästa, se ritaKapitel i js/guide.js.

   Egen klass och inte .steg, som är värderingens stegrutor längre ner och
   ritade en ram runt knapparna. */
.kapitelfot{display:flex;flex-direction:column;gap:12px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.kapitelklar.klar{color:var(--ok-text)}
/* Datumraden står under kapitelfotens knappar och ska läsas som en upplysning
   om texten, inte som en del av navigeringen. Därför hint och inte muted: den
   ligger en nivå under bildtexterna i tyngd.

   Selektorn tar med .kapitel, eftersom .kapitel p sätter både grad och färg
   på varje stycke i kapitlet och annars vinner på specificitet. */
.kapitel p.guidegranskad{margin:18px 0 0;font-size:13px;color:var(--hint)}
/* Rutnät och inte flex: en flexrad räknar med hela knapptexten när den
   bestämmer sin minsta bredd, även med min-width:0, och en lång kapiteltitel
   i Nästa tryckte då ut hela kapitlet på mobil. Kolumnen minmax(0,max-content)
   får krympa till noll, så texten kortas med tre punkter i stället. Nästa
   ligger alltid i andra kolumnen och står därför till höger även utan
   Föregående. */
.kapitelsteg{display:grid;grid-template-columns:auto minmax(0,max-content);justify-content:space-between;gap:8px}
.kapitelsteg > button{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kapitelsteg > button:last-child{grid-column:2;justify-self:end}
/* På en telefon får kapiteltiteln inte plats bredvid Föregående, och en titel
   som kapas mitt i säger inget. Där står bara Nästa. */
@media (max-width:560px){ .kapitelsteg .stegtitel{display:none} }

/* ---------- budget ----------
   Varje grupp har sin färg i två variabler som sätts på elementet:
   --gf är den mörka tonen för text, kant och mätare, --gl den ljusa för
   mätarens spår och hovring. Färgerna står i stil.css. */
.budverktyg{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:26px 0 16px}
.budperiod{display:flex;align-items:center;gap:8px}
.budpil{
  width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:var(--panel);font-size:22px;line-height:1;
}
.budperiodnamn{font-size:22px;font-weight:700;letter-spacing:-.01em;min-width:200px;text-align:center;font-variant-numeric:tabular-nums}
.budidag{background:none;border-color:transparent;color:var(--accent);padding:8px 10px}
.budidag:hover{border-color:var(--accent)}
.budvyval{display:flex;gap:4px;padding:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px}
.budvyval button{background:none;border:none;border-radius:9px;padding:8px 18px;color:var(--muted)}
.budvyval button:hover{color:var(--text)}
.budvyval button[aria-pressed="true"]{background:var(--text);color:var(--panel)}

.budkort{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
.budsiffra{
  position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:15px 16px 14px 20px;
}
.budsiffra::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gf,var(--line))}
.budsiffra .etikett{font-size:12.5px;font-weight:700;color:var(--text-2)}
.budsiffra .tal{
  font-size:25px;font-weight:700;letter-spacing:-.02em;margin-top:6px;white-space:nowrap;
  color:var(--gf,var(--text));font-variant-numeric:tabular-nums;
}
.budsiffra .jmf{font-size:12px;color:var(--muted);margin-top:3px}

.budgrupper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;margin-bottom:18px}
.budgrupper[hidden]{display:none}
.budgrupp{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--gf);border-radius:14px;padding:16px 18px 12px}
.budgrupphuvud{display:flex;align-items:center;gap:10px}
.budgrupphuvud h2{flex:1;font-size:17px;font-weight:700;color:var(--gf)}
.budgruppsumma{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.budgruppsumma b{color:var(--text)}
.budgruppsumma.over b{color:var(--red)}
.budmatare{height:6px;margin:12px 0 4px;border-radius:99px;background:var(--gl);overflow:hidden}
.budmatare i{display:block;width:0;height:100%;border-radius:99px;background:var(--gf);transition:width .2s}
/* Utgiftsgrupperna är röda redan från början, så ett överdrag får ränder
   i stället för en ny färg. */
.budmatare i.over{background:repeating-linear-gradient(135deg,var(--gf) 0 6px,var(--fel-text) 6px 12px)}

.budmeny{position:relative}
.budmeny summary{
  list-style:none;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;
  border-radius:8px;color:var(--muted);font-size:18px;font-weight:700;
}
.budmeny summary::-webkit-details-marker{display:none}
.budmeny summary:hover,.budmeny[open] summary{background:var(--panel-2);color:var(--text)}
.budmenylista{
  position:absolute;right:0;top:36px;z-index:20;display:grid;min-width:250px;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px var(--skugga);
}
.budmenylista button{background:none;border:none;text-align:left;padding:9px 10px;border-radius:7px}
.budmenylista button:hover{background:var(--panel-2);color:var(--text)}

.budrad{display:grid;grid-template-columns:minmax(0,1fr) 104px 104px 92px 28px;gap:6px;align-items:center}
.budrubrik{
  padding:10px 0 6px;border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
}
.budrubrik span:nth-child(n+2){text-align:right;padding-right:10px}
.budrader .budrad{border-bottom:1px solid var(--line);padding:2px 0}
.budrad input{background:transparent;border:1px solid transparent;border-radius:7px;font-size:14px;padding:7px 9px}
.budrad input:hover{border-color:var(--line)}
.budrad input:focus{background:var(--panel-2);border-color:var(--gf)}
.budrad input::placeholder{color:var(--hint);font-weight:500}
.budrad input.budtal{text-align:right;font-variant-numeric:tabular-nums}
.buddiff{text-align:right;padding-right:10px;font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.budbort{
  width:28px;height:28px;padding:0;background:none;border:none;
  color:var(--hint);font-size:18px;line-height:1;opacity:0;
}
.budrad:hover .budbort,.budrad:focus-within .budbort{opacity:1}
.budbort:hover{color:var(--red)}
.budsumma{padding:10px 0 4px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.budsumma span:nth-child(n+2){text-align:right;padding-right:10px;white-space:nowrap}
.budnyradrad{display:flex;align-items:center;gap:8px;margin:8px 0 4px}
.budnyrad{
  flex:1;padding:9px 12px;text-align:left;
  background:none;border:1px dashed var(--line);border-radius:9px;color:var(--gf);
}
.budomfang{flex:none;width:auto;padding:8px 10px;border-radius:9px;font-size:13px}
.budnamncell{position:relative;display:flex;align-items:center;gap:6px;min-width:0}
.budnamncell input{flex:1;min-width:0}
.budforslag{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;display:grid;
  min-width:220px;max-height:268px;overflow-y:auto;padding:5px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px var(--skugga);
}
.budforslagrad{
  padding:8px 10px;text-align:left;font-weight:500;color:var(--text);
  background:none;border:none;border-radius:7px;
}
.budforslagrad b{font-weight:700;color:var(--gf)}
.budforslagrad:hover,.budforslagrad[aria-selected="true"]{background:var(--gl);color:var(--text)}
.budmarke{
  flex:none;padding:3px 8px;border-radius:99px;background:var(--gl);color:var(--gf);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.budnyrad:hover{background:var(--gl);border-color:var(--gf);color:var(--gf)}

.budartabell table{min-width:1000px}
.budartabell th:first-child,.budartabell td:first-child{min-width:180px}
.budartabell thead button{background:none;border:none;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.budartabell thead button:hover{color:var(--accent)}
.budartabell td.plan{color:var(--hint);font-style:italic}
.budartabell th.nu,.budartabell td.nu{background:var(--markering)}
.budartabell tr.budkvar td{border-top:2px solid var(--line);font-weight:700}
.budartabell tr.budgruppsrad td{padding-top:16px;font-weight:700;border-bottom:none}
.budetikett{display:inline-flex;align-items:center;gap:8px}
.budprick{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gf)}
.budposter{margin-top:18px}

/* Årsvyn på mobilen: samma siffror med en rad per månad, se ritaAr.
   Den syns bara under 680 pixlar, datorn har tabellen ovanför. */
.budfalt{display:block;min-width:0}
.budarmobil{display:none}
.budarmobil thead th{color:var(--gf,var(--muted))}
.budarmobil td.plan{color:var(--hint);font-style:italic}
.budarmobil .nu{background:var(--markering)}
.budarmobil tbody th{font-weight:700}
.budarmobil tbody th button{
  padding:0;background:none;border:none;font:inherit;color:var(--accent);
  text-transform:none;letter-spacing:0;
}
.budarmobil .gruppRad td{color:var(--gf)}

/* Två grupper i bredd kräver ungefär 1100 pixlar, annars blir namnfältet
   för smalt att läsa. Under det står grupperna i en kolumn. */
@media (max-width:1100px){
  .budkort{grid-template-columns:repeat(3,minmax(0,1fr))}
  .budgrupper{grid-template-columns:1fr}
}
@media (max-width:900px){
  .guide{grid-template-columns:minmax(0,1fr);gap:16px}
  /* Menyn blir en klistrad rad under toppraden. --toppkant är var
     toppradens nederkant syns just nu, noll när den har scrollats bort.
     Den sätts av js/guide.js. */
  /* Ingen luft ovanför raden, annars syns texten igenom där. När raden har
     fastnat (data-klistrad, satt av js/guide.js) blir kortet en list i hela
     bredden, fortfarande vit. Negativ marginal och lika
     stor padding tar ut varandra, så texten står still i sidled. Ramen
     färgas genomskinlig i stället för att tas bort, så att höjden inte
     ändras och raden hoppar. */
  .guidemeny{
    top:var(--toppkant, 0px);z-index:30;padding:0;
    max-height:none;overflow:visible;
    box-shadow:0 8px 22px var(--skugga);
    transition:margin .18s, padding .18s, border-radius .18s, background-color .18s, box-shadow .18s;
    --kant:20px;
  }
  .guidemeny[data-klistrad="1"]{
    margin-inline:calc(var(--kant) * -1);padding-inline:var(--kant);
    border-radius:0;border-color:transparent transparent var(--line);
    box-shadow:0 6px 16px var(--skugga);
  }
  .guidemeny-rad{display:flex}
  .guidemeny-radbar{display:block}
  .guidemeny[data-oppen="1"] .guidemeny-radbar{display:none}
  .guidemeny-lista{
    display:none;padding:6px 10px 12px;border-top:1px solid var(--line);overflow:auto;
    max-height:calc(100vh - var(--toppkant, 0px) - 110px);
    max-height:calc(100dvh - var(--toppkant, 0px) - 110px);
  }
  .guidemeny[data-oppen="1"] .guidemeny-lista{display:block}
  .kapitel{padding:24px 20px}
}
@media (max-width:680px){
  .minicirklar{gap:10px}
  .minicirkel svg{max-width:96px}
  .kapitel .ikonrutor{grid-template-columns:repeat(2,1fr);gap:10px}
  .kapitel .ikonruta{padding:14px 10px}
  main.wrap{padding-top:18px}
  .wrap{padding:0 14px}
  .guidemeny{--kant:14px}  .kapitel .siffrorutor{grid-template-columns:1fr}
  .kapitel .trappor{grid-template-columns:1fr}
  .quizfraga{padding:14px}
  .quiztext{font-size:15.5px}
  .quizresultat{padding:16px}
  .quizpoang b{font-size:27px}
  .kapitel .cirkelyta{grid-template-columns:1fr;justify-items:center;gap:20px;padding:18px}
  .kapitel .cirkel{max-width:190px}
  .kapitel .cirkeldelar{width:100%}
  .kapitel .sparstapelyta{padding:14px 12px 10px}
  .kapitel .sparstapeldiagram{height:170px;gap:2px}
  .kapitel .sparstapelaxel{gap:2px}
  .hjalte{padding:42px 0 28px}
  .kapitel h1{font-size:25px}
  .budkort{grid-template-columns:repeat(2,minmax(0,1fr))}
  .budsiffra .tal{font-size:20px}
  /* Fem rutor i två kolumner lämnar sparkvoten ensam på tredje raden.
     Den får hela bredden och en större siffra i stället för en tom halva. */
  .budperiodnamn{font-size:18px;min-width:150px}
  .budverktyg{justify-content:center}
  .budgrupp{padding:14px 14px 10px}
  .budgrupphuvud{flex-wrap:wrap}
  .budgruppsumma{order:3;flex-basis:100%}

  /* Kolumnrubrikerna ryms inte på en telefon, så varje fält bär sin egen
     etikett. Namnet och krysset på första raden, planerat och utfall
     bredvid varandra på andra, differensen under. Fälten får synlig ram,
     eftersom det inte finns någon hovring. */
  .budrubrik{display:none}
  .budrader .budrad{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;row-gap:6px;padding:10px 0;
    grid-template-areas:"namn namn bort" "plan utfall ." "diff diff diff";
  }
  .budrad .budnamncell{grid-area:namn}
  .budfalt-plan{grid-area:plan}
  .budfalt-utfall{grid-area:utfall}
  .budrad .buddiff{grid-area:diff;text-align:left;padding:0 0 0 2px}
  .budrad .budbort{grid-area:bort;opacity:1}
  .budrad input{border-color:var(--line)}
  .budfalt::before,.budsumma [data-etikett]::before{
    content:attr(data-etikett);display:block;margin:0 0 3px 2px;
    font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  }
  .budrad .buddiff::before{content:"Differens ";font-size:12px;font-weight:400;color:var(--muted)}
  .buddiff:empty{display:none}
  .budsumma{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px;padding-top:12px}
  .budsumma > span:first-child{grid-column:1 / -1}
  .budsumma span:nth-child(n+2){text-align:left;padding-right:0}
  .budsumma span:empty{display:none}
  .budnyradrad{flex-wrap:wrap}
  .budnyrad,.budomfang{flex:1 1 100%}

  /* Årsvyn: tabellen med en rad per månad i stället för en kolumn. */
  .budardator{display:none}
  .budarmobil{display:block}
  .budarmobil th,.budarmobil td{font-size:12.5px}
  /* Rubrikerna en grad mindre och tätare spärrade än talen. I samma storlek
     som talen var SPARAT bredare än sin kolumn och gick in i KVAR. Vadderingen
     i sidled är också mindre, så att texten får mer av kolumnen.

     Dubbla klasser på bredderna, eftersom kalkylatortabellernas regel för
     första kolumnen står längre ner i filen och annars vinner. Då tog
     månadskolumnen en fjärdedel och sifferkolumnerna blev för smala. */
  .budarmobil .budarmanader thead th{font-size:10.5px;letter-spacing:.03em}
  /* Centrerat i varje kolumn, så att rubrik och tal står mitt över varandra.
     Högerställt gav ojämn luft mellan rubrikerna, eftersom orden är olika
     långa: Kvar och Kvot är korta, Inkomst långt. */
  .budarmobil .budarmanader th,.budarmobil .budarmanader td{padding:7px 4px;text-align:center}
  /* Bredderna följer det bredaste innehållet i varje kolumn, inte lika
     delar. Inkomst behöver plats för rubriken, Utgift för en sexsiffrig
     årssumma som "132 700", Kvar för ett negativt belopp som "−55 120". */
  .budarmobil .budarmanader th:nth-child(1){width:12%}
  .budarmobil .budarmanader th:nth-child(2){width:19%}
  .budarmobil .budarmanader th:nth-child(3){width:18%}
  .budarmobil .budarmanader th:nth-child(4){width:16%}
  .budarmobil .budarmanader th:nth-child(5){width:19%}
  .budarmobil .budarmanader th:nth-child(6){width:16%}
  /* Helårsraden bär årets summor, alltså de längsta talen, och i fetstil.
     En grad mindre där, så att de inte går ihop med grannkolumnen. */
  .budarmobil .budarmanader tr.vald th,.budarmobil .budarmanader tr.vald td{font-size:11.5px}  .budarmobil .budarposter th:first-child,.budarmobil .budarposter td:first-child{width:44%}
}

/* De smalaste telefonerna, till exempel 360 pixlar breda Android. Där är
   tabellen 15 pixlar smalare, och i full storlek gick rubriken Inkomst och
   procenttalen i Kvot utanför sina kolumner. */
@media (max-width:370px){
  .budarmobil .budarmanader th,.budarmobil .budarmanader td{font-size:11.5px}
  .budarmobil .budarmanader thead th{font-size:9.5px;letter-spacing:0}
}

/* ==========================================================
   Stegen i värderingsverktyget
   ========================================================== */
.steg{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  margin-bottom:14px;overflow:hidden;transition:border-color .15s;
}
.steg[data-lage="oppen"]{border-color:var(--accent)}
.steg[data-lage="last"]{opacity:.5}
.steghuvud{margin:0}
.stegknapp{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:none;border:none;border-radius:0;padding:18px 22px;cursor:pointer;
  font-size:16px;font-weight:700;color:var(--text);
}
.steg[data-lage="last"] .stegknapp{cursor:default}
.stegknapp:hover{color:var(--text);border-color:transparent}
.steg[data-lage="last"] .stegknapp:hover{color:var(--muted)}
.stegnr{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-2);border:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
}
.steg[data-lage="oppen"] .stegnr{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.steg[data-klar="1"] .stegnr{
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  border-color:var(--green);color:transparent;
}
.steg[data-klar="1"][data-lage="oppen"] .stegnr{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
.stegtitel{flex:none}
.steg[data-lage="last"] .stegtitel{color:var(--muted);font-weight:600}
.stegsammanfattning{
  flex:1;text-align:right;font-size:13px;font-weight:600;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stegpil{flex:none;color:var(--muted);font-size:12px;transition:transform .15s}
.steg[data-lage="oppen"] .stegpil{transform:rotate(180deg)}
.steg[data-lage="last"] .stegpil{opacity:0}
.stegkropp{padding:2px 22px 22px;display:none}
.steg[data-lage="oppen"] .stegkropp{display:block}
.steghjalp{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:16px;max-width:640px}
.falthjalp{font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:5px}
.stegfot{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.mer{margin-top:18px;border:1px solid var(--line);border-radius:10px;padding:0}
.mer summary{
  cursor:pointer;list-style:none;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--muted);
}
.mer summary::-webkit-details-marker{display:none}
.mer summary::before{content:"▸ ";color:var(--accent)}
.mer[open] summary::before{content:"▾ "}
.mer[open] summary{border-bottom:1px solid var(--line)}
.mer > *:not(summary){margin:16px}

/* ---------- sökrutan med förslag ---------- */
.sokrad{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.sokfalt{position:relative;flex:1;min-width:260px;max-width:520px}
.sokfalt input{font-size:16px;padding:12px 14px}
.forslagslista{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);overflow:hidden;max-height:330px;overflow-y:auto;
}
.forslag{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;
  text-align:left;background:none;border:none;border-radius:0;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--line);
}
.forslag:last-child{border-bottom:none}
.forslag:hover,.forslag[data-markerad="1"]{background:var(--markering);color:inherit}
.forslag .tick{font-weight:700;font-size:14px;color:var(--accent);white-space:nowrap}
.forslag .bolagsnamn{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.forslag .bors{font-size:11.5px;color:var(--muted);white-space:nowrap}
.forslag-tomt{padding:14px;font-size:13px;color:var(--muted)}
.sokrad + .status{margin-top:12px}
.status{font-size:12.5px;color:var(--muted);line-height:1.45;max-width:760px}
.status.fel{color:var(--red)}
.status.ok{color:var(--green)}

/* ---------- metodvalet ---------- */
.metodval{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
/* Beskrivningen ligger bakom en informationsknapp, och en knapp får inte
   ligga inuti en annan knapp. Kortet är därför en behållare runt valet,
   med informationsknappen som granne i hörnet i stället för som barn. */
.metodkort{position:relative}
.metod{
  display:block;width:100%;height:100%;text-align:left;padding:20px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line);cursor:pointer;
}
.metodkort > .infoknapp{position:absolute;top:15px;right:15px;z-index:2}
.metod:hover{border-color:var(--accent);color:inherit}
.metod[data-aktiv="1"]{border-color:var(--accent);background:var(--markering)}
.metod .niva{
  display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--accent);margin-bottom:10px;
}
.metod h3{font-size:17px;font-weight:700;color:var(--text);padding-right:22px}

/* ---------- svaret i omvänd DCF ---------- */
.svar{
  background:var(--panel-2);border:1px solid var(--accent);border-radius:14px;
  padding:26px;text-align:center;margin-bottom:20px;
}
.svar .over{font-size:13px;color:var(--muted);margin-bottom:10px}
.svar .tal{font-size:clamp(38px,7vw,60px);font-weight:700;letter-spacing:-.03em;color:var(--accent);line-height:1}
.svar .under{font-size:14px;color:var(--text);margin-top:12px;font-weight:600}
/* Noten under det stora talet: historiken i den omvända DCF:n, slutvärdets
   andel i kassaflödesvärderingen. Ett streck skiljer den från svaret, och
   talet i meningen är det enda som ska gå att hitta med blicken. */
.svar .omdome{
  font-size:13.5px;color:var(--muted);line-height:1.6;
  max-width:560px;margin:20px auto 0;padding-top:18px;border-top:1px solid var(--line);
}
/* Procenttecknet står efter ett mellanslag och hamnar annars ensamt på
   nästa rad när rutan blir smal. */
.svar .omdome b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Åren var för sig, under noten. Smal och tunn med flit: den är underlag
   till talet ovanför, inte ett eget svar. Global table sätter min-width
   760 för de breda scenariotabellerna, och den måste släppas här. */
/* Beskedet efter Spara värdering, bredvid knappen i resultatfoten. */
.sparbesked{align-self:center;font-size:12.5px;color:var(--muted)}
.sparbesked.ok{color:var(--ok-text)}
.sparbesked.fel{color:var(--fel-text)}

/* Knapparna om scenarier som saknar värden, bredvid Visa resultatet.
   Röd text på röd botten, men som en vanlig knapp i storlek: det är en
   genväg till det som fattas, inte ett felmeddelande. */
.saknasscen{display:flex;gap:8px;flex-wrap:wrap}
button.saknas{
  background:rgba(224,82,76,.10);border-color:rgba(224,82,76,.35);color:var(--fel-text);
}
button.saknas:hover{background:rgba(224,82,76,.18)}

/* Varningen om bolagstypen, sist i steg 1. Extra luft under, så att den
   hör ihop med siffrorna ovanför och inte klistrar sig mot knappen. */
.typvarning{margin-bottom:4px}
.typvarning b{color:var(--text)}
.typvarning .kalla{display:block;margin-top:7px;font-size:11.5px;opacity:.8}

.aretakt{max-width:360px;margin:16px auto 0}
/* Global table sätter min-width 760 för de breda scenariotabellerna, och
   den måste släppas här. Fast layout gör att kolumnerna får de bredder
   som står nedan i stället för att räknas fram ur innehållet. */
.aretakt table{
  min-width:0;width:100%;table-layout:fixed;font-size:12.5px;text-align:left;
}
/* Global th,td låser första kolumnen som en sticky spalt med egen vit
   bakgrund och 210 px minimibredd, för de breda scenariotabellerna som
   scrollas i sidled. Här hade det gett en vit klump under årtalen. */
.aretakt th:first-child,.aretakt td:first-child{
  position:static;background:none;min-width:0;text-align:left;
}
.aretakt th{
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:var(--muted);padding:0 0 7px;border-bottom:1px solid var(--line);
  vertical-align:bottom;white-space:normal;
}
.aretakt th:nth-child(1){width:22%}
.aretakt th:nth-child(2){width:41%}
.aretakt th:nth-child(3){width:37%}
.aretakt td{padding:6px 0;border-bottom:1px solid var(--line);color:var(--text)}
.aretakt tr:last-child td{border-bottom:0;padding-bottom:0}
/* Mellanrummet ligger som vänsterluft på kolumnerna, annars står de två
   högerställda rubrikerna kant i kant på en smal skärm. Blir det trångt
   får rubrikerna gå på två rader, siffrorna behåller sin enda. */
.aretakt .belopp,.aretakt .andring{text-align:right}
.aretakt .belopp{padding-left:10px}
.aretakt .andring{padding-left:12px}
.aretakt td.belopp{color:var(--muted);white-space:nowrap}
.aretakt td.andring{font-weight:700;white-space:nowrap}
.aretfot{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5;text-align:left}

/* Läsanvisningen sist i svarsrutan. Egen platta i stället för löptext, så
   att den läses som en instruktion och inte som ännu ett resonemang. */
.svar .lasanvisning{
  margin:20px auto 0;max-width:560px;padding:14px 16px;border-radius:10px;
  background:var(--markering);color:var(--muted);
  font-size:12.5px;line-height:1.6;text-align:left;
}
.svar .lasanvisning b{color:var(--text)}

.kansel td.mitt{background:var(--markering);font-weight:700}

@media (max-width:680px){
  .stegknapp{padding:15px 16px;gap:10px;font-size:15px}
  .stegkropp{padding:2px 16px 18px}
  .stegsammanfattning{display:none}
  .sokfalt{max-width:none}
  .sokrad button{width:100%}
  .forslag{grid-template-columns:auto 1fr;gap:8px}
  .forslag .bors{grid-column:2;font-size:11px}
}

/* ==========================================================
   Steg 3 i värderingen: förklaringar, scenariokort och
   en tabell där varje rad går att redigera
   ========================================================== */

/* ---------- rubriken i den öppna scenariopanelen ---------- */
.scenhuvud{
  border-left:3px solid var(--fg-scen);padding:2px 0 2px 14px;margin-bottom:16px;max-width:820px;
}
.scenhuvud h3{font-size:17px;font-weight:700;color:var(--fg-scen)}
.scenhuvud h3 span{
  font-size:12px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;
  display:inline-block;margin-left:6px;
}
.scenhuvud p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:5px}

/* ---------- snabbifyllningen, nu i två delar ---------- */
.snabb{
  display:grid;gap:20px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-bottom:16px;
}
.snabbrub{
  font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--accent);
  font-weight:700;margin-bottom:8px;
}
.snabbfalt{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.snabbfalt .falt{width:150px}
.snabbfalt .falt.bred{width:210px}
.snabbfalt .falthjalp{max-width:150px}
.snabbfalt .falt.bred .falthjalp{max-width:210px}
.snabb .txt{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:700px}

/* Fälten ovanför gör ingenting förrän man trycker här, så knappen måste
   se ut som ett steg man ska ta. Den är inte orange, för då konkurrerar
   den med Visa resultatet längst ner, men den är heller inte grå och
   stum som en vanlig knapp. */
.fyllknapp{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:transparent;border:1.5px solid var(--accent);color:var(--accent);
  font-size:13.5px;font-weight:700;padding:11px 18px;
}
.fyllknapp:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fyllknapp .pil{font-size:15px;line-height:1}

/* ---------- nyckeln över tabellen ---------- */
.tabellnyckel{
  font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:18px;max-width:820px;
}

/* Texten under en tabell eller en knapp. Utan luften ovanför klibbar den
   fast i sista raden och läses som en del av tabellen i stället för som
   en kommentar till den. */
.tabellfot{margin-top:18px}

/* ---------- valet mellan takt och belopp i DCF-tabellen ----------
   Två knappar och inte en kryssruta: båda lägena är lika giltiga, och en
   kryssruta hade gjort det ena till undantaget. Samma form som flikarna
   över scenarierna, fast i accentfärgen, eftersom valet gäller tabellen
   under och inte hela steget. */
.lagesval{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.lagesval button{
  border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);
  border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:700;
}
.lagesval button:hover{border-color:var(--accent);color:var(--accent)}
.lagesval button[data-aktiv="1"]{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}

/* ---------- årsväljaren ---------- */
/* Knappraden över scenariotabellen på telefon, se js/arsvaljare.js. Samma
   form som lägesvalet ovanför, fast smalare: det är upp till elva knappar
   och de ska rymmas på två rader. Raden finns bara när modulen satt dit
   den, alltså bara på smal skärm, så den behöver ingen egen mediefråga.
   Siffrorna i tabellsnitt håller knapparna lika breda, annars hoppar raden
   i sidled när ettan i 2031 byts mot en nolla. */
.arsvaljare{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
/* Etiketten tar en egen rad. Står den bredvid knapparna äter den sextio
   bildpunkter av raden, och då ryms bara fyra av fem årtal: det femte
   hamnar ensamt på rad två. Med etiketten ovanför får knapparna hela
   bredden och fem år står på en rad, vilket är det vanliga valet. */
.arsvaljare-etikett{
  flex-basis:100%;margin-bottom:1px;
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:700;
}
.arsvaljare button{
  border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);
  border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.arsvaljare button[data-aktiv="1"]{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}

/* Tabellen som årsväljaren styr. Attributet data-arsvald sätts av modulen
   och bara på smal skärm, så reglerna behöver ingen egen mediefråga.

   Fast tabellayout och en bredd per kolumn. Utan det sätter innehållet
   bredderna, och då blir årskolumnerna olika breda och snäppningen hamnar
   fel: två kolumner ryms inte längre exakt. Måtten kommer in som
   egenskaper på rullytan, eftersom de beror på skärmens bredd, se matt()
   i js/arsvaljare.js. Även tabellbredden kommer därifrån, och den måste
   skrivas ut: en tabell med fast layout och bredden auto får ingen fast
   layout alls, utan faller tillbaka på den automatiska. Summan är bredare
   än rutan, och det är den utstickande delen man rullar i.

   Snäppningen fäster på rubrikcellerna. Kolumnerna ligger i lod, så
   rubrikradens lägen gäller för hela tabellen. Etikettspalten är inte med:
   den är klistrad och ska inte gå att snäppa till. */
table[data-arsvald]{table-layout:fixed;width:var(--arsbredd);min-width:0}
table[data-arsvald] th,table[data-arsvald] td{width:var(--arskol)}
table[data-arsvald] th:first-child,table[data-arsvald] td:first-child{
  width:var(--arsetikett);min-width:0;
}
table[data-arsvald] thead th:nth-child(n+2){scroll-snap-align:start}
/* Fältet får krympa med kolumnen. Minimibredden på 62 bildpunkter, som
   mediefrågan i stil.css sätter, spränger kolumnen på en liten telefon:
   där blir det bara sjuttio bildpunkter över per år när etikettspalten
   tagit sitt, och ett fält som vägrar bli smalare än 62 plus vaddring
   trycker ut tabellen så att två år inte längre ryms exakt. */
table[data-arsvald] td input{min-width:0}

/* ---------- radetiketterna i tabellen ---------- */
/* Inline, inte block: informationsknappen ska stå bredvid radnamnet och
   inte på raden under det, se info.js. */
.radnamn{display:inline;font-weight:600}
/* Knappen står vid etikettspaltens högerkant, inte efter sista ordet.
   Efter ordet vandrar den med radnamnets längd, och på en smal skärm
   bryter den ner på en egen rad så fort namnet fyller bredden. Vid
   kanten står alla knappar i en lodrät stapel och raden blir en rad.

   Luckan som håller texten borta från knappen sätts sist i filen, se
   slutet: jämförelsens egna cellregler har samma tyngd och skriver
   annars över den. */
.radnamn + .infoknapp{position:absolute;top:4px;right:3px}
.radinfo{
  display:block;font-size:11px;font-weight:400;color:var(--muted);line-height:1.3;
  margin-top:2px;white-space:normal;max-width:230px;
}
th:first-child,td:first-child{vertical-align:top}
tr.summa .radinfo,tr.tjock .radinfo{font-weight:400}

/* ---------- vända tabeller ----------
   På en telefon byter de breda tabellerna led: åren blir rader och
   nyckeltalen kolumner, se js/tabellvand.js. Två saker följer med.

   Skuggningen låg på raden och ligger efter vändningen på varje cell,
   eftersom raden den hörde till inte finns kvar. Och radnamnen hamnar i
   rubrikraden, där de inte längre är förstaceller och därför saknar den
   position som informationsknappen hänger i. */
td.matning{background:var(--matning)}
th.matning{background:var(--matning-etikett)}
.harinfo:not(:first-child){position:relative}
/* Bredden sätts av rutan, inte av innehållet. En vänd tabell finns bara
   på telefon, och där ska ingen av dem behöva dras i sidled. Rubrikraden
   bär de långa orden och får ta de extra raderna. */
table[data-vandad="1"]{table-layout:fixed;width:100%;min-width:0}
table[data-vandad="1"] th,table[data-vandad="1"] td{white-space:normal}
table[data-vandad="1"] th:first-child,table[data-vandad="1"] td:first-child{min-width:0;width:62px}
table[data-vandad="1"] td input{min-width:0}

@media (max-width:680px){
  .snabbfalt .falt{width:calc(50% - 6px)}
  .snabbfalt .falt.bred{width:100%}
  .snabbfalt .falthjalp,.snabbfalt .falt.bred .falthjalp{max-width:none}
  .fyllknapp{width:100%;justify-content:center}
  /* Radernas förklaringar är dolda på telefon. De är bra att ha men de
     breddar den fastfrusna etikettspalten och gör varje rad tre gånger så
     hög, och på en liten skärm är det siffrorna man är där för. Samma sak
     står i nyckeltexten ovanför tabellen. */
  .radinfo{display:none}
}


/* ==========================================================
   Mobilmenyn

   På bred skärm är .toppfall bara en genomskinlig behållare,
   display:contents, så menyn och kontodelen sitter kvar som
   direkta objekt i toppraden precis som utan den. Under
   brytpunkten blir den i stället ett lägg som täcker sidan från
   toppradens underkant och ner, och hamburgaren fäller ut den.
   ========================================================== */
.toppfall{display:contents}

/* Menyn glider in från höger när den öppnas, som en draglåda. Hela plattan
   rör sig, innehållet med den.

   I sidled går det, i höjdled gjorde det inte det. Fällan spänner från
   toppradens underkant till rutans nederkant, så en förflyttning uppåt
   eller neråt hade antingen lämnat en remsa av sidan synlig i nederkanten
   eller lagt menyn över toppraden under tiden. Åt höger behåller den sin
   över- och underkant hela vägen, och det enda som ligger utanför rutan är
   det som ännu inte glidit in.

   Den delen ger ingen vågrät rullningslist. Fällan är position:fixed, och
   ett fast placerat element räknas inte in i dokumentets rullbara yta.
   Kontrollerat med plattan tvingad till translateX(100%): högerkanten låg
   på 675 px i en ruta på 375, och scrollWidth stod kvar på 375. Det vilade
   förut på overflow:hidden över hela sidan, men det låset är borta sedan
   bakgrunden ska gå att rulla.

   Ingen intoning. En draglåda som både glider och tonar ser ut att tveka,
   och plattan är opak hela vägen, så sidan under täcks allteftersom. Det
   gäller de 80 procent plattan tar. Den sista femtedelen täcks aldrig, utan
   ligger kvar under skymningsytan längre ner.

   Animationen startar av sig själv varje gång fällan går från display:none
   till display:block, alltså vid varje öppning. Stängningen har ingen: den
   går tillbaka till display:none, och en utgående animation hade krävt att
   elementet fick ligga kvar och vänta på att den blev klar.

   Ett mjukt sidbyte med menyn uppe rör inte fällans display, så menyn
   glider inte in på nytt när sidan bakom byts. */
@keyframes menyGliderIn{
  from{transform:translateX(100%)}
  to{transform:translateX(0)}
}

.menyknapp{display:none}
.menyknapp .ikon-kryss{display:none}
.menyknapp[aria-expanded="true"] .ikon-meny{display:none}
.menyknapp[aria-expanded="true"] .ikon-kryss{display:block}

@media (max-width:900px){
  .topp .inre{flex-wrap:wrap;gap:10px;padding:0 16px;min-height:58px}
  /* Loggan behövde en gång bära radens höjd själv. Då låg fällan i flödet
     som en andra rad i .inre, och med den uppe var .inre hög av sig själv:
     min-height hade inget att göra, första raden krympte till loggans egen
     höjd, och luften över loggan och krysset försvann i samma stund som
     menyn öppnades. Nu ligger fällan fast utanför flödet, .inre är alltid
     en rad, och .inre{min-height:58px} räcker i båda lägena. */
  .marke{font-size:15px}
  .menyknapp{display:inline-flex;margin-left:auto}

  .toppfall[data-mobil="1"]{display:none;order:3;width:100%}
  /* Fällan är en draglåda på 80 procent av bredden, från toppradens
     underkant till rutans nederkant. Den sista femtedelen lämnas åt sidan
     under: ett tryck på en grupprad byter in samlingssidan bakom menyn, och
     med en platta i hela bredden skedde det bytet utom synhåll.

     Remsan ligger under en skymningsyta, se .topp::after nedan. Utan den
     läses sidan bakom som en del av menyn, eftersom båda går i --bg. Ytan
     spänner hela bredden, inte bara remsan, så att sidan är skymd redan
     innan plattan glidit fram över den.

     Den är scrollbar i sig själv, så alla tjugoåtta raderna går att nå med
     alla grupper utfällda, och overscroll-behavior hindrar att rullningen
     fortsätter ner i sidan när listan tar slut.

     --menytopp sätts av sattLage i js/skal.js ur var toppraden faktiskt
     hamnar: raden ligger på olika y beroende på scrollning och testbanner,
     så ett fast mått lämnade antingen ett glapp under raden eller en remsa
     av sidan under synlig. Värdet i fallback gäller bara ögonblicket innan
     js:en har hunnit mäta.

     Sidopaddingen måste stå här. Fast placering lämnar .inre och därmed
     dess padding:0 16px, så raderna hade annars gått kant i kant. */
  .toppfall[data-mobil="1"][data-oppen="1"]{
    display:block;position:fixed;left:auto;right:0;width:80%;
    top:var(--menytopp,58px);bottom:0;z-index:1;
    padding:6px 16px 20px;background:var(--bg);
    border-left:1px solid var(--line);box-shadow:-16px 0 30px var(--skugga);
    overflow-y:auto;overscroll-behavior:contain;
  }
  /* Längden är kort med flit: menyn är en navigering och inte en effekt,
     och allt över ett par tiondelar känns som att vänta. Sträckan är plattans
     egen bredd, alltså fyra femtedelar av skärmen, så den får något mer än
     en rörelse på tolv pixlar hade behövt.

     Ingen fill-mode, men den gör mindre skillnad än man tror. En flik som
     inte ritas flyttar inte fram animationen: den står kvar som running
     med currentTime 0, och då gäller noll-bildrutan ändå. Menyn står
     alltså utanför rutan där, med eller utan both, och börjar glida in i
     samma stund som fliken ritas igen. Det kostade tid att hitta under
     bygget, så det står här: en meny som verkar utebli i en bakgrundsflik
     är inte ett fel i reglerna nedan.

     Att fill-mode ändå är borta beror på att den inte behövs. Det finns
     ingen fördröjning att täcka i början, och slutbildrutan är densamma
     som elementets vanliga läge. Släcks animationen av
     prefers-reduced-motion nedan gäller just det läget, alltså meny på
     plats utan rörelse. */
  .toppfall[data-mobil="1"][data-oppen="1"]{
    animation:menyGliderIn .26s cubic-bezier(.2,.7,.3,1);
  }
  /* Samma hänsyn som bildvisaren längre upp i filen. */
  @media (prefers-reduced-motion:reduce){
    .toppfall[data-mobil="1"][data-oppen="1"]{animation:none}
  }

  /* Raden ska vara opak medan menyn är uppe. Den halvgenomskinliga
     bakgrunden låter sidan under lysa igenom som suddiga skuggor, och med
     ett lägg i opakt --bg direkt under raden syns skillnaden som en kant.
     --topp är --bg på 92 procent, så opakt --bg ser likadant ut.

     backdrop-filter:none bär dessutom själva placeringen och får inte tas
     bort: ett filter gör .topp till containing block för allt fast placerat
     inuti den, och fällan hade då mätt sin top och bottom mot raden i
     stället för mot rutan. */
  .topp:has(.toppfall[data-oppen="1"]){background:var(--bg);backdrop-filter:none}

  /* Skymningsytan över sidan. Den spänner hela bredden och inte bara den
     femtedel som blir kvar synlig: plattan glider in från höger, och med en
     yta som slutade vid plattans kant låg resten av sidan oskymd tills
     plattan hann fram. Skillnaden syntes som en ljus kil framför menyn
     under hela inglidningen.

     Resten av ytan ligger under plattan, som är opak, så det enda man ser
     av skymningen är remsan till vänster.

     Den hänger på toppraden och inte på fällan: fällan glider in med transform,
     och ett fast placerat barn till den hade mätt sina kanter mot plattan i
     stället för mot rutan och följt med i glidningen.

     Det går just här för att raden tappar sin backdrop-filter i regeln
     ovanför medan menyn är uppe. Med filtret kvar hade .topp varit
     containing block även för den här ytan.

     z-index håller ordningen inne i .topp. ::after kommer sist i DOM och
     hade annars legat över plattan. Ytorna överlappar helt, så det är inte
     en försiktighetsåtgärd: utan z-index läggs skymningen över menyn och
     grumlar den.

     Den är klickbar med flit. Klicket landar på .topp, alltså utanför
     fällan, och dokumentlyssnaren i js/skal.js stänger då menyn. */
  .topp:has(.toppfall[data-oppen="1"])::after{
    content:"";position:fixed;z-index:0;
    left:0;right:0;top:var(--menytopp,58px);bottom:0;
    background:var(--menyskym);
  }
  .toppfall[data-mobil="1"] .meny{flex-direction:column;gap:2px;width:100%}
  .toppfall[data-mobil="1"] .meny a{padding:11px 12px;font-size:15px}
  .toppfall[data-mobil="1"] .toppkonto{
    width:100%;margin-top:12px;padding-top:13px;border-top:1px solid var(--line);
    justify-content:space-between;flex-wrap:wrap;gap:10px;
  }
  .toppfall[data-mobil="1"] .toppkonto .epost{max-width:none;flex:1 1 auto}
  .toppfall[data-mobil="1"] .toppkonto button{padding:10px 15px}
}

/* ==========================================================
   Arkivet: väljaren och den öppna filen

   Listan över allt sparat ligger bakom knappen Öppna sparad, så att
   den inte tar plats varje gång man kommer till sidan. Under
   statusraden står bara den fil man har öppen just nu, och den
   rutan finns inte alls när man håller på med en osparad.
   ========================================================== */
.valjare{
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:15px 16px;margin-bottom:16px;
}
.valjarrubrik{
  font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--accent);
  font-weight:700;margin-bottom:12px;
}
.valjare .tomt{padding:0}

/* ==========================================================
   Etiketterna är alltid en rad

   Förut reserverades två rader åt varje etikett, eftersom de
   långa bröt och tryckte ner sitt fält en rad jämfört med
   grannarna. Lösningen kostade en tom rad i varje ruta: texten
   satt antingen långt från sitt eget fält eller i höjd med
   grannens andra rad.

   Nu ryms varje etikett på en rad i stället. Texterna är
   kortade, förtydligandena har flyttat ner till hjälpraden under
   fältet, och den minsta kolumnbredden i g-bolag är satt så att
   den längsta etiketten får plats även med informationsknappen
   bredvid sig. white-space håller löftet också om ett annat
   typsnitt laddas, och overflow är sista utvägen: hellre en
   kapad etikett än en som lägger sig över grannen.

   Etiketten sitter därmed tätt över sitt eget fält, vilket är
   den plats den andra raden hade förut.
   ========================================================== */
.grid .falt label,
.snabbfalt .falt label{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ==========================================================
   Faktarutorna vid inmatningsfälten i kassaflödesmetoderna
   ========================================================== */

/* Egna mått i stället för knappstilen: en vanlig knapp här hade blivit
   lika hög som inmatningsfältet under.

   Knappen står i etikettens övre högra hörn och lyfts ur flexraden för
   att göra det. Låg den kvar sist i raden flyttade den sig med texten:
   direkt efter ett kort fältnamn, längst ut efter ett långt, och nedflyttad
   till andra raden så fort etiketten bröt. Den blev alltså svår att hitta
   just i de fält där man behövde den. Absolut placerad sitter den på samma
   punkt i varje ruta. Etiketten får en lucka till höger så att texten inte
   löper in under den.

   Faktarutan påverkas inte. Den ligger i fönstrets koordinater och räknas
   fram ur knappens läge vid varje öppning, se nedan. */
.infoknapp{
  all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;color:var(--hint);
  flex:0 0 auto;transition:color .12s,background .12s;
}
/* Texten som knappen ersätter. Den ligger kvar i dokumentet och döljs
   bara, så att koden som skriver till den kan fortsätta göra det. */
.infodold{display:none !important}
.falt.harinfo{position:relative}
.falt.harinfo > label{padding-right:23px}
.falt.harinfo .infoknapp{position:absolute;top:-2px;right:0}

/* Samma hörn i en resultatruta: knappen i rutans övre högra kant, med en
   lucka i rubriken så att texten inte löper in under den. */
.ruta.harinfo{position:relative}
.ruta.harinfo .rub{padding-right:22px}
.ruta.harinfo .rub .infoknapp{position:absolute;top:11px;right:11px}
.infoknapp:hover,.infoknapp[aria-expanded="true"]{color:var(--accent);background:var(--markering)}
.infoknapp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Rutan ligger i fönstrets koordinater, inte i fältets.

   Stegkortet har overflow:hidden för sina rundade hörn, och en ruta som
   ligger absolut inuti kortet klipps därför vid kanten. Det syntes både
   i sidled på det fjärde fältet i en rad och nedåt när fälten står sist
   i ett steg. Med fixed hamnar den ovanpå allt, och js/faktarutor.js
   räknar fram top och left från knappens läge vid varje öppning. */
.faktaruta{
  position:fixed;z-index:60;top:0;left:0;
  width:max-content;min-width:230px;max-width:min(340px, calc(100vw - 24px));
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;box-shadow:0 12px 28px rgba(26,20,16,.16);
}
.faktaruta p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:9px}
.faktaruta p b{color:var(--text)}
.faktaruta p:last-child{margin-bottom:0}
.faktarubrik{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--accent);margin-bottom:5px
}
.faktarimligt{color:var(--text);padding-bottom:9px;border-bottom:1px solid var(--line)}
.faktarimligt b{font-weight:700}

/* Var siffrorna kommer ifrån, under nyckeltalsrutorna. */
.kalla{
  font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px;max-width:820px;
}

/* ==========================================================
   Loggan på introsidan

   Bilden är kvadratisk med genomskinlig bakgrund, så den sitter
   direkt på sidans bottenfärg utan platta bakom sig. Storleken
   följer skärmen på samma sätt som rubriken under den, annars
   tar den halva mobilskärmen.
   ========================================================== */
.hjaltelogga{
  width:clamp(104px,15vw,152px);height:auto;display:block;margin:0 auto 22px;
}

@media (max-width:680px){
  .hjaltelogga{margin-bottom:16px}
}

/* Hela rutan på Mitt konto är länken till filen, inte bara namnet. */
.lankpost{text-decoration:none;color:inherit;transition:border-color .12s}
.lankpost:hover{border-color:var(--accent)}
.lankpost:hover .namn{color:var(--accent)}
.lankpost .namn{cursor:inherit}
.lankpost .oppnalank{
  margin-top:9px;font-size:11.5px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.07em;
}

/* ==========================================================
   Jämför aktier

   Väljarna högst upp är tre lika breda rutor. En tom ruta är ett
   sökfält, en fylld är bolaget plus ett kryss. Att de byter innehåll
   men behåller sin plats gör att raden inte hoppar när ett bolag
   läggs till eller tas bort.
   ========================================================== */
.jamforvaljare{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.jamforval{min-width:0}
/* Sökfältet ligger i en .falt och behöver den relativa positionen till
   förslagslistan. Den globala .sokfalt sätter en maxbredd som är till
   för en ensam sökrad, och den ska inte gälla i rutnätet här. */
.jamforval .sokfalt{max-width:none;min-width:0}
.jamforval .sokfalt input{font-size:15px;padding:10px 12px}
.jamforval .status{margin-top:7px;font-size:12.5px}
/* Statusraden ligger kvar tom när hämtningen är klar. Med flex-basis 100
   tar den då en egen rad i rutan och lämnar en glugg under valutan. */
.jamforval .status:empty{display:none}

.jamforval[data-fylld="1"]{
  display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
  background:var(--markering);border:1px solid var(--accent);border-radius:12px;
  padding:14px 15px;
}
/* Rutan är lika hög som ett sökfält med sin etikett, alltså gott om yta
   för tre rader text. Graden följer med dit i stället för att lämna
   luft: tickern är rutans rubrik och ska läsas först. */
.valdbolag{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.valdbolag .tick{font-size:21px;font-weight:700;color:var(--accent);letter-spacing:-.01em;line-height:1.15}
.valdbolag .bolagsnamn{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.valdbolag .valuta{font-size:11.5px;color:var(--muted);letter-spacing:.07em}
/* Krysset är en ren ikon och ska inte bära knappstilens ram och fyllning. */
.jamforval .bort{
  flex:none;background:none;border:none;color:var(--muted);
  font-size:20px;line-height:1;padding:0 4px;
}
.jamforval .bort:hover{color:var(--red);border-color:transparent}
.jamforval[data-fylld="1"] .status{flex-basis:100%}

/* ---------- tabellen ---------- */
/* Kolumnerna är lika breda och delar på det som blir över när
   etikettspalten tagit sitt. Utan fast bredd blir kolumnen med det
   längsta talet bredast, och tre bolag ser då olika viktiga ut. */
/* Bredden sätts av rutan och inte av innehållet, i alla storlekar. Det
   är villkoret för att rubrikraden ska gå att klistra fast: en tabell som
   måste dras i sidled behöver en rullyta omkring sig, och en klistrad rad
   fäster då mot rullytan i stället för mot sidan. */
.jamforyta{overflow:visible}
.jamfortabell{min-width:0;table-layout:fixed;width:100%}
/* Avdelare mellan raden och bolagens tal. Utan den flyter etiketten ihop
   med första kolumnens siffror, eftersom tabellen till skillnad från
   scenariotabellen inte har några skuggade rader som ritar kanten åt
   sig själv. Linjen går till höger om informationsknapparna. */
.jamfortabell th:first-child,.jamfortabell td:first-child{
  width:250px;white-space:normal;border-right:1px solid var(--line);
}
.jamfortabell .gruppRad td{border-right:none}
.jamfortabell thead th:not(:first-child){width:auto}

/* Rubrikraden följer med nedåt. Utan den får man minnas vilken kolumn som
   hör till vilket bolag, och tabellen är åttio rader lång.

   Noll och inte toppradens höjd: toppraden är klistrad inuti sin egen
   behållare och rullar därför ut ur bild som vilken rad som helst. Med en
   marginal för den hade rubriken svävat en bit ner på skärmen med sidans
   innehåll synligt ovanför. */
.jamfortabell thead th{
  position:sticky;top:0;z-index:2;
  background:var(--panel);vertical-align:bottom;padding-bottom:12px;
  box-shadow:inset 0 -1px 0 var(--line);
}
.jamfortabell thead th:first-child{z-index:3}
.kolTicker{display:block;font-size:16px;font-weight:700;color:var(--accent);letter-spacing:0;text-transform:none}
.kolNamn{
  display:block;font-size:11.5px;font-weight:400;color:var(--text);
  text-transform:none;letter-spacing:0;white-space:normal;margin-top:2px;
}
.kolValuta{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;letter-spacing:.08em}

/* Gruppbandet. Egen rad tvärs över tabellen i stället för en rubrik i
   etikettspalten, så att den syns även när tabellen scrollats i sidled.
   Den fastfrusna första cellen måste därför kopplas loss här, annars
   ligger bandet under den och bryts på mitten. */
.gruppRad td{
  background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;
  color:var(--accent);padding:9px 10px;text-align:left;position:static;
}
.jamfortabell tbody tr:first-child td{border-top:none}

/* Bästa kolumnen på raden. Färgen ensam räcker inte: den som inte
   skiljer rött från grönt ser ingen skillnad alls. Därför bär cellen
   också en fyllning och en fetare grad. */
.jamfortabell td.basta{
  color:var(--green);font-weight:700;
  background:rgba(28,130,86,.10);
  box-shadow:inset 2px 0 0 var(--green);
}
/* Ett negativt tal i den bästa cellen ska vara grönt, inte rött.
   Klassen ner sätts på alla minusvärden och måste stå tillbaka här. */
.jamfortabell td.basta.ner{color:var(--green)}
.jamfortabell td.text{
  font-size:12.5px;color:var(--muted);white-space:normal;font-weight:400;
}

@media (max-width:680px){
  .jamforvaljare{grid-template-columns:1fr;gap:11px}
  /* Hela tabellen ska rymmas på skärmen utan att dras i sidled. Tre bolag
     plus etikettspalten kräver 446 px med tajta kolumner, alltså mer än en
     telefon har. Bredden måste därför sättas av rutan i stället för av
     innehållet: fast tabellayout, full bredd och celler som får bryta.

     Priset är att "5 272,7 mdr" hamnar på två rader. Det är ändå bättre än
     en tabell där två av tre bolag ligger utanför skärmkanten, eftersom
     hela poängen med sidan är att kolumnerna ska gå att jämföra. */
  .jamfortabell th,.jamfortabell td{
    white-space:normal;overflow-wrap:break-word;padding:6px 5px;font-size:12px;
  }
  /* Etikettspalten är bredare här än i värderingens tabeller: raderna
     heter "Fritt kassaflöde mot börsvärdet" och inte "År 1", och med
     104 px blir de fem rader höga. */
  .jamfortabell th:first-child,.jamfortabell td:first-child{min-width:0;width:116px}
  /* Sektor och bransch är enstaka ord utan brytpunkter. En grad mindre gör
     att "Technology" ryms på en rad, så bara de riktigt långa delas. */
  .jamfortabell td.text{font-size:11px;line-height:1.3}
  .kolTicker{font-size:13px}
  .kolNamn{display:none}
}

/* Varje plats i väljaren har en egen behållare, så att en plats kan ritas
   om utan att grannarnas sökrutor byggs upp på nytt. Se ritaValjare. */
.jamforplats{min-width:0}

/* ==========================================================
   Kalkylatorerna

   Fälten ligger i ett rutnät som fyller bredden, med enheten som en
   dämpad text till höger inne i rutan. Enheten står där i stället för
   i etiketten, eftersom "Sparande per månad" och "kr" är två olika
   sorters upplysning och den ena hör ihop med talet.
   ========================================================== */
/* Radavståndet är dubbelt mot kolumnavståndet. Reglagets ändpunkter står
   under spåret och nästa fälts etikett står över sin ruta, så med lika
   avstånd hamnar "0" och "20" närmare nästa fält än sitt eget. */
.kalkylfalt-rad{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;row-gap:34px}
.kalkylfalt{min-width:0}
.faltrad{position:relative;display:flex;align-items:center}
.faltrad input{font-size:16px}
/* Enheten ligger ovanpå fältet och inte bredvid, så att alla inmatningsrutor
   blir exakt lika breda oavsett hur lång enheten är. Utan pointer-events:none
   hamnar klick på texten utanför fältet och markören sätts inte. */
/* Enheten ligger ovanpå fältet och inte bredvid, så att alla
   inmatningsrutor blir exakt lika breda oavsett hur lång enheten är.
   Luckan den behöver räknas fram ur texten och sätts som padding på
   rutan, se faltHtml. Med ett fast mått föll "kr per månad" bort i en
   ellips. */
.faltrad .enhet{
  position:absolute;right:11px;pointer-events:none;
  font-size:12px;color:var(--hint);white-space:nowrap;text-align:right;
}

/* ---------- reglaget ---------- */
/* Ett reglage under fältet för de värden man vill känna på snarare än
   veta exakt: avkastning, antal år, inflation. Talet i rutan är kvar
   som facit och går att skriva i, reglaget är till för att svepa. */
.reglagerad{margin-top:8px}
/* Ingen ram. Den globala input-regeln i stil.css ger varje fält en grå
   kant och rundade hörn, och på ett reglage lade den sig som en avlång
   ruta runt både spåret och dragpunkten. Spåret är formen här, inte
   rutan omkring det. */
.reglage{
  -webkit-appearance:none;appearance:none;width:100%;height:20px;
  background:transparent;border:none;border-radius:0;
  cursor:pointer;padding:0;display:block;
}
/* Spåret är fyllt fram till dragpunkten och tomt efter den, så att läget
   syns utan att man letar upp den lilla ringen. Andelen kommer från
   --fyll, som sätts av fyllReglage i kalkyl.js. */
.reglage::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;border:none;
  background:linear-gradient(to right,var(--accent) 0 var(--fyll,0%),var(--panel-2) var(--fyll,0%) 100%);
  box-shadow:inset 0 0 0 1px var(--line);
}
.reglage::-moz-range-track{
  height:6px;border-radius:99px;background:var(--panel-2);border:none;
  box-shadow:inset 0 0 0 1px var(--line);
}
.reglage::-moz-range-progress{height:6px;border-radius:99px;background:var(--accent)}
/* Vit dragpunkt med orange ring. En helfylld orange ring försvinner in i
   det fyllda spåret så fort den dras förbi mitten. */
.reglage::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--panel);border:3px solid var(--accent);margin-top:-6px;
  box-shadow:0 1px 4px rgba(26,20,16,.25);
}
.reglage::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--panel);
  border:3px solid var(--accent);box-shadow:0 1px 4px rgba(26,20,16,.25);
}
.reglage:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Ändpunkterna under spåret. Tabulärsiffror så att de två talen står
   stilla när reglaget dras och etiketterna räknas om. */
.reglageskala{
  display:flex;justify-content:space-between;gap:10px;margin-top:1px;
  font-size:11px;color:var(--hint);font-variant-numeric:tabular-nums;
}

/* ---------- hela rader, dolda fält och växeln ---------- */
/* hel:true i kalkylatorn. Fältet tar hela raden i stället för en kolumn. */
.kalkylfalt.hel{grid-column:1 / -1}
/* visasOm i kalkylatorn. Attributet hidden räcker inte om en regel sätter
   display på fältet, så det sägs ut här. */
.kalkylfalt[hidden]{display:none}

/* En växel ligger i samma rutnät som talfälten och ska läsa som ett av
   dem: etiketten överst på egen rad och kontrollen under den, ungefär där
   ett talfälts ruta sitter. Inget streck och ingen extra luft ovanför.
   Fälten står i flera kolumner, så en avdelare över en ensam cell blir
   ett kort streck mitt i raden och ser ut som en ny avdelning i stället
   för som ett fält bland de andra. Informationsknappen får därmed ligga
   kvar i hörnet som på övriga fält. */
.vaxelfalt > .vaxel{display:block;margin-top:2px}

/* Kryssrutan ritad som en knapp som skjuts åt sidan. Prefixet .falt
   behövs för att vinna över den globala regeln för fält i stil.css. */
.falt .vaxel{
  -webkit-appearance:none;appearance:none;position:relative;cursor:pointer;
  width:46px;height:26px;margin:0;padding:0;border-radius:99px;
  background:var(--panel-2);border:1px solid var(--faltram);
  transition:background .15s,border-color .15s;
}
.falt .vaxel::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--panel);box-shadow:0 1px 3px rgba(26,20,16,.3);transition:transform .15s;
}
.falt .vaxel:focus:not(:checked){background:var(--panel-2);border-color:var(--faltram)}
.falt .vaxel:checked{background:var(--accent);border-color:var(--accent)}
.falt .vaxel:checked::after{transform:translateX(20px)}
.falt .vaxel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- skalan ---------- */
/* Mätaren under resultatrutorna, se skalaHtml i js/kalkyl.js.

   Den ser ut som reglagen ovanför på samma sida, med flit: ett spår i
   panelfärgen, fyllt med accentfärgen fram till värdet, och en vit prick
   med orange ring. Inga egna färger för zonerna. Gränserna mellan dem är
   skåror i spåret, och zonen där värdet står får sitt namn i accentfärgen.
   Etiketterna centreras på sitt läge, utom i ändarna, där de vänds inåt så
   att de inte klipps av kortets kant. Skorna ritas efter fyllningen, så att
   de syns också i den del av spåret som är fylld. */
#kalkylskala:empty{display:none}
.skala{margin-top:30px}
.skalaspar{
  position:relative;height:8px;margin:14px 0 10px;border-radius:99px;
  background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);
}
.skalafyllning{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--accent);transition:width .2s}
.skalazon{position:absolute;top:0;bottom:0}
.skalazon + .skalazon{border-left:2px solid var(--panel)}
.skalaprick{
  position:absolute;top:50%;width:20px;height:20px;border-radius:50%;
  background:var(--panel);border:3px solid var(--accent);
  box-shadow:0 1px 4px rgba(26,20,16,.25);transform:translate(-50%,-50%);transition:left .2s;
}
.skalarad{position:relative;height:17px;font-size:11px;color:var(--hint);font-variant-numeric:tabular-nums}
.skalarad + .skalarad{margin-top:3px}
.skalaetikett{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.skalaetikett.start{transform:none}
.skalaetikett.slut{transform:translateX(-100%)}
.skalanamn{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.skalanamn.aktiv{color:var(--accent)}
.skalasvar{
  margin-top:20px;padding:16px 20px;border-radius:10px;
  background:var(--markering);border-left:4px solid var(--accent);
}
.skalasvar.upp{background:var(--panel-2);border-left-color:var(--green)}
.skalaomdome{font-size:20px;font-weight:800;color:var(--text);line-height:1.3}
.skalatext{margin-top:4px;font-size:16px;color:var(--text);line-height:1.5;max-width:720px}

/* ---------- utdelningskalkylatorn ---------- */
/* En rad per innehav: namn, belopp, direktavkastning och en knapp att ta
   bort raden med. Bolagsnamnet klipps med en ellips i stället för att
   bryta, så att alla rader blir lika höga och beloppsrutorna står i lod. */
.innehavlista{margin-top:14px;display:grid;gap:10px}
.innehavlista:empty{display:none}
.innehavrad{
  display:grid;grid-template-columns:minmax(0,1fr) 180px 150px 38px;align-items:center;gap:14px;
  padding:10px 12px 10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);
}
.innehavnamn{min-width:0;display:flex;flex-direction:column}
.innehavnamn .tick{font-weight:700;font-size:14px;color:var(--accent)}
.innehavnamn .bolagsnamn{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.innehavbelopp input{width:100%;background:var(--panel)}
.innehavavk{text-align:right;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.innehavavk span{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.innehavavk.laddar{color:var(--hint);font-weight:400;font-size:13px}
.innehavavk.fel{color:var(--fel-text);font-weight:600;font-size:12.5px;text-align:left}
.innehavbort{width:38px;height:38px;padding:0;font-size:20px;line-height:1;border-radius:9px;background:var(--panel)}

/* Staplarna per månad. Varje månad är en kolumn där stapeln växer uppåt
   från botten av en egen yta, så att beloppet ovanför och månadens namn
   under inte räknas in i stapelns höjd. */
.manadsstaplar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;height:200px;padding-top:18px;margin-top:6px}
.manad{display:flex;flex-direction:column;align-items:center;min-width:0;height:100%}
/* Beloppet hänger ovanför sin egen stapel i stället för att stå på en rad
   högst upp. Absolut placering gör att siffran inte påverkar stapelns höjd,
   och padding-top på rutnätet ger plats åt den högsta stapelns siffra. */
.manadbelopp{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;
  font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stapelyta{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}
.stapel{position:relative;display:block;width:100%;max-width:46px;background:var(--accent);border-radius:6px 6px 2px 2px}
.manadnamn{font-size:11px;color:var(--hint);margin-top:6px}

@media (max-width:680px){
  .innehavrad{
    grid-template-columns:minmax(0,1fr) auto 38px;
    grid-template-areas:"namn namn bort" "belopp avk avk";
    row-gap:10px;padding:10px 10px 12px 14px;
  }
  .innehavnamn{grid-area:namn}
  .innehavbelopp{grid-area:belopp}
  .innehavavk{grid-area:avk}
  .innehavbort{grid-area:bort}
  /* Tolv belopp ryms inte ovanför tolv smala staplar. Talen står i
     tabellen under, och här räcker formen. */
  .manadsstaplar{gap:4px;height:150px}
  .manadbelopp{display:none}
  .manadnamn{font-size:9.5px}
}

/* ---------- resultatet ---------- */
/* Tre rutor per rad i stället för så många som får plats. Sex svar i en
   enda lång rad blir sex smala pelare där talet är mindre än rubriken
   ovanför, och talet är det man kom för. Två rader om tre ger varje ruta
   en dryg tredjedel av kortet, och då ryms slutbeloppet utskrivet. */
#kalkylrutor{margin-top:0;grid-template-columns:repeat(3,1fr);gap:14px}
#kalkylrutor .ruta{padding:17px 19px}
#kalkylrutor .ruta .rub{margin-bottom:8px}
#kalkylrutor .ruta .varde{font-size:29px;line-height:1.15;overflow-wrap:break-word}
/* Huvudsvaret på egen rad, se stor i rutorHtml i js/kalkyl.js. */
#kalkylrutor .ruta.stor{grid-column:1 / -1}
#kalkylrutor .ruta.stor .varde{font-size:44px}

/* ---------- tipsrutan över grafen ---------- */
/* Kurvan visar formen, tipsrutan svaret. Peka på ett år och få dess tal,
   i stället för att ögonmäta mot närmaste stödlinje. */
.diagramyta{position:relative;margin-top:26px}
.diagram{touch-action:pan-y}
.diagramtips{
  position:absolute;top:4px;pointer-events:none;z-index:2;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;box-shadow:0 4px 14px rgba(26,20,16,.14);
  font-size:12.5px;white-space:nowrap;
}
.tipsrubrik{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:700;margin-bottom:5px;
}
.tipsrad{display:flex;align-items:center;gap:8px}
.tipsrad + .tipsrad{margin-top:3px}
.tipsrad i{flex:none;width:11px;height:3px;border-radius:2px}
.tipsrad span{color:var(--muted)}
.tipsrad b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}

@media (max-width:980px){
  #kalkylrutor{grid-template-columns:repeat(2,1fr)}
}
/* Ett avsnitt är en tabell med egen rubrik, underrubrik och fotrad.
   Bolånet har två: vad lånet kostar i dag och vad det kostar om räntan
   rör sig. Rubriken är mörk och inte accentfärgad, eftersom kortets egen
   h2 redan äger den färgen och två orange rubriker i samma kort gör att
   ingen av dem leder. */
.kalkylavsnitt{margin-top:30px}
.kalkylrubrik{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px}
.kalkylunderrubrik{font-size:12.5px;color:var(--muted);margin-bottom:15px}
.kalkyltabellfot{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:15px}
.kalkyltabellfot b{color:var(--text);font-weight:700}

.kalkyltabell{margin-top:0}
.kalkyltabell table{min-width:0}
.kalkyltabell th:first-child,.kalkyltabell td:first-child{min-width:0;width:auto}

/* Den rad som svarar mot det man själv fyllt i. Fyllningen och den feta
   graden räcker: raden med nollan i skillnadskolumnen kan inte gärna
   vara någon annans. */
.kalkyltabell tr.vald td{background:var(--panel-2)}
.kalkyltabell tr.vald th:first-child{background:var(--panel-2)}
.kalkyltabell tr.vald th,.kalkyltabell tr.vald td{font-weight:700;color:var(--text)}

@media (max-width:680px){
  .kalkylfalt-rad{grid-template-columns:1fr;gap:28px}
  .faltrad input{font-size:16px}
  /* Reglaget behöver mer yta för en tumme än för en muspekare. */
  .reglage{height:28px}
  .reglage::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8px}
  .reglage::-moz-range-thumb{width:18px;height:18px}
  /* En ruta per rad. Utskrivna belopp får inte plats i en halv telefon,
     och ett avstavat slutbelopp är sämre än en ruta till att skrolla. */
  #kalkylrutor{grid-template-columns:1fr;gap:11px}
  #kalkylrutor .ruta{padding:14px 16px}
  #kalkylrutor .ruta .varde{font-size:26px}
  #kalkylrutor .ruta.stor .varde{font-size:34px}
  .diagramtips{font-size:12px;padding:8px 10px}
  /* Bredden sätts av rutan och inte av innehållet, så att ingen
     kalkylatortabell behöver dras i sidled. Cellerna får bryta i stället,
     och rubrikraden är den som tar de extra raderna. */
  .kalkyltabell table{table-layout:fixed;width:100%}
  .kalkyltabell th,.kalkyltabell td{white-space:normal;padding:7px 6px}
  /* Etikettspalten får en fjärdedel, inte en lika lott. Fast tabellayout
     delar annars bredden jämnt, och då fick spalten med 1,5 % i lika mycket
     plats som spalten med Månadskostnad i. Ordet är ett enda och kan inte
     brytas, så det rann ut i grannkolumnen. Etiketterna i de här tabellerna
     är korta hela vägen: en räntenivå, Per månad, ett procenttal. */
  .kalkyltabell th:first-child,.kalkyltabell td:first-child{width:24%}
  /* Tabeller med enrad:true håller varje värde på en rad, så att "kr"
     inte hamnar under beloppet. Då måste bredden sättas av innehållet i
     stället för av jämna delar, annars rinner de längsta beloppen ut i
     grannkolumnen. Rubrikerna bryts fortfarande. Räcker bara för korta
     värden: frihetstabellen ryms precis på 360 px. */
  .kalkyltabell.enrad table{table-layout:auto}
  .kalkyltabell.enrad th:first-child,.kalkyltabell.enrad td:first-child{width:auto}
  .kalkyltabell.enrad tbody th,.kalkyltabell.enrad tbody td{white-space:nowrap;padding:7px 4px;font-size:12.5px}
  .kalkylrubrik{font-size:15px}
}

/* Informationsknapparna finns på telefon också. Cirkeln är lika stor,
   men tryckytan runt den växer: fjorton bildpunkter är för lite för en
   tumme, och knappen sitter dessutom nära rutans kant. */
@media (max-width:680px){
  .infoknapp{width:30px;height:30px}
  .falt.harinfo > label{padding-right:30px}
  .falt.harinfo .infoknapp{top:-7px;right:-6px}
  .ruta.harinfo .rub{padding-right:26px}
  .ruta.harinfo .rub .infoknapp{top:5px;right:5px}
  .metodkort > .infoknapp{top:10px;right:10px}
  .faktaruta{padding:13px 14px}
}

/* Luckan som håller radnamnet borta från informationsknappen. Står sist
   för att vinna över tabellernas egna padding-regler, som har samma
   tyngd: jämförelsens celler sätter padding 6px 5px på telefon och tog
   annars bort luckan, så att namnet hamnade under knappen. */
th.harinfo,td.harinfo{padding-right:25px}

@media (max-width:680px){
  /* Knappen är trettio bildpunkter bred för tummens skull, och i en
     tabellcell på drygt hundra bildpunkter åt den då in i radnamnet.
     Här räcker tjugosex, och luckan mäts mot den bredden. */
  th.harinfo .infoknapp,td.harinfo .infoknapp{width:26px;height:26px}
  th.harinfo,td.harinfo{padding-right:30px}
}

/* ---------- Rutan om nyare rapportdata ----------
   Ligger mellan arkivkortet och första steget på värderingssidan och ber
   dig fatta ett beslut. Därför är den ett eget kort och inte en smal
   meldingsremsa: den ska väga lika tungt som det den avbryter, och den
   behöver plats åt tre knappar utan att de klibbar ihop.

   Färgerna kommer från meldingsklassen den ligger i, info eller fel, så
   reglerna här sätter bara form och avstånd. */
#nyrapport{margin:18px 0 22px}
#nyrapport .melding{padding:18px 20px;border-radius:14px;font-size:14px;margin-top:0}

/* Rubriken bär beskedet och ska gå att läsa på en halv sekund. */
#nyrapport .rubrik{display:block;font-size:15px;font-weight:700;margin-bottom:10px}

/* Egna stycken i stället för radbrytningar, så att raderna får andas. */
#nyrapport p{margin:0 0 10px}
#nyrapport p:last-child{margin-bottom:0}

/* Knapparna radas med mellanrum och bryter ner på smal skärm i stället
   för att tryckas ihop. Marginalen uppåt är större än nedåt, eftersom
   eftertexten hör till knapparna och brödtexten är ett eget stycke. */
#nyrapport .knappar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 12px}

/* Raden som förklarar varför kopian är förvald. Dämpad, eftersom den är
   en upplysning och inte en del av valet. */
#nyrapport .efter{font-size:13px;color:var(--muted);margin:0}

/* ---------- Aktiescreener ----------
   Formuläret är brett och har tretton fält, så rutnätet får fler kolumner
   än kalkylatorernas. Under 900 px faller de ihop till en kolumn via
   .grid:s egen brytpunkt i stil.css. */
.grid.g-screener{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Mallknapparna sitter i en rad och den valda är primär. Beskrivningen
   under dem byter text vid klick, så den har en minsta höjd för att raden
   under inte ska hoppa. */
.mallbeskrivning{font-size:13px;color:var(--muted);line-height:1.55;margin-top:14px;min-height:40px}
.mallbeskrivning:empty{display:none}

/* Tickern står först och fet, bolagsnamnet under i mindre grad. Två rader
   i en cell håller tabellen smal nog att rymmas utan sidoscroll. */
.screenernamn{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.screenerlankar{white-space:nowrap}
.screenerlankar a{margin-right:10px;font-size:13px}
.screenerlankar a:last-child{margin-right:0}

/* ---------- sorteringen ----------
   Rubriken är en knapp, inte bara en cell med en lyssnare. Då går
   sorteringen att nå med tangentbord och skärmläsaren säger att den går
   att trycka på. Cellen bär aria-sort, knappen bär texten. */
.screenertabell th{padding:0}
.sortrubrik{
  background:none;border:0;padding:8px 10px;width:100%;cursor:pointer;
  font:inherit;font-weight:600;color:var(--muted);
  display:inline-flex;align-items:baseline;gap:5px;justify-content:flex-end;
}
.screenertabell th:first-child .sortrubrik{justify-content:flex-start}
.sortrubrik:hover{color:var(--accent);background:var(--panel-2)}
.screenertabell th[aria-sort]:not([aria-sort="none"]) .sortrubrik{color:var(--accent)}
.sortpil{font-size:10px;line-height:1}

/* Sorteringsraden är mobilens motsvarighet till en klickbar rubrikrad och
   göms på bred skärm, där rubrikerna gör samma jobb. */
.sortrad{display:none}

/* Foten under resultatet säger vad listan inte är. Den ska läsas, men inte
   konkurrera med tabellen, så den är dämpad och smalare än kortet. */
.screenerfot{font-size:13px;color:var(--muted);line-height:1.55;margin-top:16px;max-width:70ch}

/* ---------- bläddringen ----------
   Tio rader per sida. Statusraden står över knapparna så att den syns även
   när raden med sidnummer blir lång. */
.bladdra{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:center}
.bladdrastatus{font-size:13px;color:var(--muted);margin:0}
.bladdraknappar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.bladdraknappar button{padding:7px 12px;font-size:13.5px;min-width:40px}
.bladdraknappar button:disabled{opacity:.4;cursor:default}
.bladdrahopp{color:var(--muted);padding:0 2px;user-select:none}

/* ---------- resultatet på smal skärm ----------
   Elva kolumner ryms inte på en telefon, och en tabell som måste dras i
   sidled döljer alltid halva raden. Varje bolag blir därför ett eget kort.

   Nyckeltalen ligger i ett rutnät och inte som rader under varandra.
   Etikett mot värde på var sin sida ger nio nästan tomma rader med ett
   brett tomrum i mitten, och kortet blir högt utan att säga mer. I rutnät
   står etiketten ovanför sitt tal i mindre, dämpad grad, talen bildar
   kolumner som går att jämföra mellan kort, och kortet blir hälften så
   högt. Rutorna fylls på med auto-fit, så en telefon får två kolumner och
   en surfplatta tre eller fyra utan egen brytpunkt.

   Etiketterna kommer ur data-rubrik, samma grepp som guidernas tabeller
   i .kapitel.

   Brytpunkten är mätt och inte gissad. Cellerna har white-space:nowrap
   från stil.css, så tabellen kan inte bli smalare än sina kolumner. Under
   det kan den inte krympa utan att hela sidan börjar scrolla i sidled,
   vilket är precis det korten ska bli av med. */
@media (max-width:1180px){
  .screenertabell,
  .screenertabell tbody,
  .screenertabell td{display:block;width:auto}
  .screenertabell thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* Två globala regler i stil.css är gjorda för breda tabeller som dras i
     sidled, och båda måste släckas här. table{min-width:760px} gjorde
     kortet bredare än skärmen på en surfplatta, och den klistrade
     förstakolumnen på 210 px gav varje kort en bakgrundsplatta på tvären. */
  .screenertabell{min-width:0}

  .sortrad{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    margin-bottom:14px;font-size:13.5px;color:var(--muted);
  }
  .sortrad select{flex:1 1 150px;min-width:0}
  .sortrad button{padding:9px 13px;font-size:13.5px;white-space:nowrap}

  /* 86 i minmax. Vid 375 px är innerbredden 288, så tre kolumner kräver
     att varje ruta får plats på (288 minus två glapp) delat med tre,
     alltså 88. Med nio nyckeltal blir det tre rader i stället för fem och
     kortet nästan hälften så högt. */
  .screenertabell tr{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
    gap:11px 12px;align-items:start;
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:14px;margin-bottom:10px;
  }
  .screenertabell td{border:0;padding:0;white-space:normal;text-align:left}

  /* Rubriken och länkarna är inte nyckeltal och tar hela bredden.
     Rubriken blöder ut till kortets kant med negativa marginaler, så att
     den orange plattan går kant i kant och kortet får ett huvud i stället
     för en fetstilt rad. */
  .screenertabell td:first-child,
  .screenertabell td.screenerlankar{grid-column:1 / -1}
  .screenertabell td:first-child{
    position:static;min-width:0;
    margin:-14px -14px 0;padding:10px 14px;
    background:var(--markering);border-bottom:1px solid var(--line);
    border-radius:13px 13px 0 0;
    font-size:16px;font-weight:700;line-height:1.25;color:var(--accent);
  }
  .screenertabell .screenernamn{font-size:12px;margin-top:2px;line-height:1.35;color:var(--muted)}

  /* Etiketten står över sitt tal, i versaler och liten grad så att den
     läses som en etikett och inte konkurrerar med siffran.

     Ingen color här. Cellen för årsförändringen bär .upp eller .ner, och
     en färg på den här regeln hade vunnit över dem och gjort plus och
     minus lika svarta. */
  .screenertabell td:not(:first-child):not(.screenerlankar){
    font-size:15px;font-weight:600;line-height:1.3;
  }
  .screenertabell td:not(:first-child):not(.screenerlankar)::before{
    content:attr(data-rubrik);display:block;margin-bottom:1px;
    font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);line-height:1.3;
  }

  /* Länkraden får en linje över sig, så att den skiljs från talen utan att
     kortet behöver ännu en ram. */
  .screenertabell td.screenerlankar{
    border-top:1px solid var(--line);padding-top:11px;margin-top:1px;
  }
  .screenertabell td.screenerlankar::before{content:none}
  .screenerlankar a{margin-right:18px;font-size:13.5px}

  /* Valutan står kvar vid kursen och göms på belopp. Hela listan har samma
     valuta, eftersom marknaden är ett av kriterierna, så en gång per kort
     räcker. Utan det blir "303,0 md USD" bredare än rutan och talen bryts
     till två rader. */
  .kol-borsvarde .enhet,
  .kol-oms .enhet{display:none}
}

@media (max-width:680px){
  /* Mallnamnen är för långa för fyra knappar i bredd på en telefon.
     Texten bryts då till fem rader inuti varje knapp och de blir drygt
     hundra bildpunkter höga. En knapp per rad tar lika stor plats och går
     att läsa. */
  #mallar{flex-direction:column;align-items:stretch}
  #mallar button{width:100%}
}

/* ---------- Utfällbara menygrupper ----------
   Guider, Kunskapsquiz och Verktyg fäller ut en lista. På bred skärm är
   namnet och pilen två olika klickytor: namnet går till samlingssidan,
   pilen öppnar listan. På smal skärm är raden en enda knapp, se
   mobilblocket längst ned.
   Alla tre har en samlingssida i dag. `.menygruppnamn` finns kvar för en
   framtida grupp utan egen sida och är stylat som en länk, så att raden ser
   likadan ut vare sig namnet är en länk eller en knapp. */
.menygrupp{position:relative;display:flex;align-items:center}
/* Måtten är desamma som .meny a längst upp i filen, radhöjden utskriven
   för att en knapp annars räknar sin textrad lägre än en länk gör. Utan
   den blir Verktygs platta fyra pixlar lägre än grannarnas. */
.menygruppnamn{
  background:none;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:20px;color:var(--muted);
}

/* Namnet och pilen ligger i en gemensam rad, och det är raden som bär
   plattan. Låg den på namnet slutade den orange ytan mitt i posten med
   pilen utanför, som om markeringen var avklippt. Barnen inuti blir
   genomskinliga och bidrar bara med sin färg. */
.menyrad{display:flex;align-items:center;border-radius:8px}
.menyrad:hover{background:var(--panel-2)}
.menyrad.aktiv{background:var(--markering)}
.menyrad:hover > a,
.menyrad:hover > .menygruppnamn,
.menyrad:hover > .menypil{color:var(--text);background:transparent}
.menyrad.aktiv > a,
.menyrad.aktiv > .menygruppnamn,
.menyrad.aktiv > .menypil,
.menyrad.aktiv:hover > a,
.menyrad.aktiv:hover > .menygruppnamn,
.menyrad.aktiv:hover > .menypil{color:var(--accent);background:transparent}

/* Pilen sitter tätt intill namnet och är liten med flit: den ska gå att
   träffa men inte konkurrera med namnet om blicken. */
.menypil{
  background:none;border:0;padding:8px 10px 8px 0;margin-left:-8px;cursor:pointer;
  color:var(--muted);display:inline-flex;align-items:center;border-radius:8px;
}
.menypil:hover{color:var(--text);background:transparent;border-color:transparent}
/* Ikonen till vänster om namnet på menyns sex huvudposter, se SIDIKONER
   i js/skal.js. Den ritas alltid men syns bara i hamburgermenyn: på bred
   skärm är toppraden en enda rad med knappt 60 px luft vid 1024 px, och
   sex ikoner behöver omkring 150. Menyn hade brutit till två rader.

   Gömningen ligger här och inte i js:en, eftersom menyn ritas en gång och
   måste klara att fönstret ändrar storlek efteråt. */
.menyikon{display:none}

.menypil svg{transition:transform .14s}
.menypil[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Listan läggs ovanpå innehållet på bred skärm. Minsta bredd så att
   guidetitlarna inte bryts, och en högsta höjd för den dag listorna blir
   längre än skärmen. */
.menylista{
  position:absolute;top:100%;left:0;z-index:40;min-width:250px;max-height:70vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:6px;margin-top:6px;box-shadow:0 10px 30px rgba(26,20,16,.13);
  display:flex;flex-direction:column;gap:2px;
}
/* Glappet ner till listan täcks av en osynlig remsa. Utan den lämnar
   pekaren gruppen på vägen ner och listan hinner stängas innan man är
   framme. Remsan sitter på gruppen och inte på listan, eftersom listans
   overflow:auto klipper bort allt som sticker ut ovanför den, remsan
   inräknad. Den finns bara medan listan är öppen, så att det inte ligger
   en död träffyta under toppraden resten av tiden. */
.menygrupp:has(.menypil[aria-expanded="true"])::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:8px;
}
/* Behövs trots hidden-attributet: display:flex ovanför slår ut
   webbläsarens egen [hidden]{display:none}, och utan den här raden låg
   alla listor alltid öppna. Attributväljaren tar över även i
   mobilblocket längst ned, så den behöver ingen upprepning där. */
.menylista[hidden]{display:none}
.menylista a{
  padding:8px 10px;border-radius:7px;font-size:14px;font-weight:600;
  color:var(--muted);text-decoration:none;white-space:nowrap;
}
.menylista a:hover{color:var(--text);background:var(--panel-2)}
.menylista a[aria-current="page"]{color:var(--accent);background:var(--markering)}

@media (max-width:900px){
  /* I hamburgermenyn finns ingen plats att lägga listan ovanpå. Den fälls
     ut i flödet i stället, indragen så att det syns att den hör till
     posten ovanför. */
  .menygrupp{flex-wrap:wrap}
  /* Raden tar hela bredden, så plattan ser likadan ut som på de vanliga
     menyposterna.

     Pilen vandrar ut till högerkanten och tar hela radens höjd. Tätt efter
     namnet hamnar varje grupps pil på sitt eget x, eftersom namnen är
     olika långa, och fyra pilar på fyra ställen inuti fullbreda plattor
     ser slumpmässigt ut. Vid kanten står de i en kolumn, och hela
     högerkanten blir en träffyta stor nog för en tumme. */
  .menyrad{width:100%}
  /* Hela raden är en knapp här, inte två. Ett tryck var som helst på den
     fäller ut listan och går vidare till samlingssidan, och js:en läser
     därför raden och inte namnet, se kopplaMenylyssnare i js/skal.js. Två
     träffytor i samma platta är en gissningslek med tummen: pilen var 41
     px bred i en rad på 283, så den som ville se listan träffade namnet
     och lämnade sidan i stället.

     Pilen får pointer-events:none och blir ren dekor som visar om listan
     är öppen. Utan det ligger en knapp inuti knappen, med egen träffyta
     och eget hovringsläge, och raden ser delad ut igen. Namnet behåller
     flex:1 så att plattan fylls, men dess träffyta spelar ingen roll
     längre: klicket fångas av raden. */
  .menyrad{cursor:pointer}
  .menyrad > a,
  .menyrad > .menygruppnamn{flex:1;text-align:left}
  /* Ikonen och namnet ligger på en rad. Både de fristående posterna och
     gruppnamnen, alltså menyns sex huvudposter. Raderna i de utfällbara
     listorna har ingen ikon och rörs inte. */
  .toppfall[data-mobil="1"] .meny > a,
  .toppfall[data-mobil="1"] .menyrad > a,
  .toppfall[data-mobil="1"] .menyrad > .menygruppnamn{
    display:flex;align-items:center;gap:10px;
  }
  /* currentColor gör att ikonen följer radens färg av sig själv: dämpad
     normalt, accent där man står. Måtten är startsidans kortikoner i
     mindre format, samma stroke-width så att strecken väger lika. */
  .menyikon{
    display:block;width:17px;height:17px;flex:none;
    fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  }
  .menyrad > .menypil{margin-left:auto;align-self:stretch;padding:0 14px;pointer-events:none}
  .menygrupp:has(.menypil[aria-expanded="true"])::after{content:none}
  /* Listan bär ingenting eget: ingen ram, ingen platta, ingen skugga och
     inget streck. Bara ett indrag.

     Tidigare hängde ett tvåpixlarsstreck längs hela listan, i accentfärg
     när gruppen var den man stod i. Tillsammans med den markerade radens
     tonade platta, som låg direkt under gruppradens egen tonade platta,
     blev det två block i rad med en lodrät linje bredvid, och listan läste
     sig som en ruta inuti menyn. Indraget ensamt räcker för att visa vad
     raderna hör till, och det är det vanliga greppet i en utfällbar
     mobilmeny. */
  .menylista{
    position:static;min-width:0;width:100%;box-shadow:none;border:0;
    background:transparent;padding:2px 0 6px;margin:0;
  }
  /* Raderna börjar där namnen ovanför börjar, alltså efter ikonkolumnen:
     länkens 12 plus ikonens 17 plus mellanrummets 10 blir 39. Ikonplatsen
     står tom i listan, och det är den tomma kolumnen som visar att raderna
     hör till posten ovanför.

     Graden och vikten är ett steg under posternas 15 px och 600. Det är
     den skillnaden som bär hierarkin när varken streck eller platta gör
     det, och den måste därför sättas här och inte lämnas åt arvet: regeln
     för .meny a i mobilblocket längre upp är lika specifik och vinner
     annars på att stå före. */
  .toppfall[data-mobil="1"] .menylista a{
    white-space:normal;padding:10px 12px 10px 39px;font-size:14px;font-weight:500;
  }
  /* Var man står visas med färgen på texten och ingenting annat. En tonad
     platta här hamnar direkt under gruppradens egen och ger just de
     staplade blocken som indraget finns till för att slippa. */
  .toppfall[data-mobil="1"] .menylista a[aria-current="page"]{
    background:transparent;color:var(--accent);font-weight:600;
  }
}