/* ==========================================================
   Alla färger är variabler på :root. Skriv aldrig en färg
   direkt i en regel, då går den inte att ändra på ett ställe.

   Accentfärgen är en mörkare orange än profilens #FB904D,
   eftersom den ljusa mot vitt hamnar under gränsen för
   läsbar text.
   ========================================================== */
:root{
  --bg:#F7F4F0;
  --panel:#FFFFFF;
  --panel-2:#F1ECE6;
  --line:rgba(26,20,16,.13);
  --accent:#B35415;
  --accent-2:#8C400F;
  --on-accent:#FFFFFF;
  --knapp-hover:#98470F;
  --text:#1A1512;
  --text-2:#453B34;
  --ingress:#5A4E45;
  --muted:#726860;
  --hint:#948A82;
  --green:#1C8256;
  /* Mellantonen i guidens ringdiagram, mellan accenten och bakgrunden. Bara
     till ytor, inte till text: den är för ljus för att läsas mot vitt. */
  --cirkel-ljus:#E0A070;
  /* Insättningen i guidens stapeldiagram. Neutral, så att avkastningen i
     accentfärgen är det ögat fastnar på. */
  --sparstapel-insatt:#9C8E7F;
  /* Flaggfärger. Nationsfärger, inte temafärger, men de ligger här ändå
     så att ingen regel skriver en färg direkt. */
  --flagga-se-bla:#006AA7;
  --flagga-se-gul:#FECC00;
  --flagga-us-bla:#3C3B6E;
  --flagga-us-rod:#B22234;
  --flagga-vit:#FFFFFF;
  /* Googles egna märkesfärger, till loggan i inloggningsknappen. Samma
     hantering som flaggfärgerna: de hör inte till temat, men de ligger
     här ändå så att ingen regel skriver en färg direkt. */
  --google-bla:#4285F4;
  --google-gron:#34A853;
  --google-gul:#FBBC05;
  --google-rod:#EA4335;
  --red:#C0392C;
  --fel-text:#9E2B22;
  --ok-text:#146449;
  --topp:rgba(247,244,240,.92);
  --markering:rgba(179,84,21,.10);
  --matning:rgba(179,84,21,.05);
  --matning-etikett:#F6EDE4;
  --faltram:rgba(26,20,16,.18);
  --scen-bull:#1C8256;
  --scen-base:#B35415;
  --scen-bear:#C0392C;
  /* Budgetens fyra grupper. Den mörka tonen är text och kant, den ljusa är
     mätarens spår och bakgrund vid hovring. Fasta och rörliga utgifter har
     samma röda, så rörliga pekar på de fasta och följer med om den ändras.
     Alla klarar läsbar text mot vitt. Sparkvot och kvar att fördela
     använder --accent. */
  --grupp-inkomst:#1C8256;
  --grupp-inkomst-ljus:rgba(28,130,86,.10);
  --grupp-fast:#A3271F;
  --grupp-fast-ljus:rgba(163,39,31,.10);
  --grupp-rorlig:var(--grupp-fast);
  --grupp-rorlig-ljus:var(--grupp-fast-ljus);
  --grupp-sparande:#2D5C88;
  --grupp-sparande-ljus:rgba(45,92,136,.10);
  --skugga:rgba(26,20,16,.14);
  /* Rätt och fel i kunskapsquizet, som ljus bakgrund bakom ett svar. */
  --ratt-ljus:rgba(28,130,86,.10);
  --fel-ljus:rgba(192,57,44,.08);
  /* Bildvisaren i guiden: mörk bakgrund bakom en förstorad bild, och knappar
     som syns mot den. */
  --bildvisare-bakgrund:rgba(20,16,13,.94);
  --bildvisare-text:#FFFFFF;
  --bildvisare-knapp:rgba(255,255,255,.14);
  --bildvisare-knapp-hover:rgba(255,255,255,.24);
  --dimma:rgba(26,20,16,.45);
  /* Skymningen över remsan av sidan som mobilmenyn lämnar fri. Ljusare än
     --dimma med flit: bakom menyn byts samlingssidan mjukt, och det bytet
     ska gå att se genom skymningen. */
  --menyskym:rgba(26,20,16,.30);
  --sans:'Clear Sans','Segoe UI',system-ui,Arial,sans-serif;
}

html{ background:var(--bg); color-scheme:light; }
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.45;padding:28px 20px 60px;
}
.wrap{max-width:1220px;margin:0 auto}

/* ---------- topp ---------- */
header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
h1{font-size:30px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
h1 span{color:var(--accent)}
.tagline{color:var(--muted);font-size:14px;margin-top:4px;max-width:640px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
button{
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:9px 14px;transition:.12s;
}
button:hover{border-color:var(--accent);color:var(--accent)}
button.primar{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
button.primar:hover{background:var(--knapp-hover);color:var(--on-accent)}
/* För val som inte går att ångra, som att radera eller nollställa. */
button.farlig{background:var(--red);color:var(--on-accent);border-color:var(--red)}
button.farlig:hover{background:var(--fel-text);border-color:var(--fel-text);color:var(--on-accent)}

/* ---------- kort ---------- */
.kort{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px}
.kort > h2{
  font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);
  font-weight:700;margin-bottom:16px;
}
.kort > h2 small{display:block;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400;font-size:12px;margin-top:5px}

/* ---------- formulär ---------- */
.grid{display:grid;gap:14px}
/* Radavståndet är större än kolumnavståndet, så att raderna går att
   skilja åt trots att etiketten sitter tätt över sitt eget fält.

   Den minsta kolumnbredden är satt efter den längsta etiketten plus
   informationsknappen bredvid den, se sajt.css. Sänker du den bryts
   etiketterna igen, och då är det etiketten som ska kortas, inte
   bredden som ska tillbaka. */
.g-bolag{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));row-gap:22px}
.falt label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:5px}
.falt .hint{text-transform:none;letter-spacing:0;color:var(--hint)}
input,select,textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-family:var(--sans);font-size:15px;font-weight:600;padding:9px 11px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
/* Flerradig text läses som text och inte som ett värde, så den går ner i
   vikt och får luft mellan raderna. Bara höjden får dras i: en ruta som går
   att bredda sticker ut ur kortet den ligger i. */
textarea{font-weight:500;line-height:1.55;resize:vertical;display:block}
textarea[readonly]{color:var(--muted);font-size:13px}

/* ---------- hämtat mot eget i kassaflödesmetoderna ----------
   Samma språk som tabellerna: det du fyller i är fyllt, det som kommer
   utifrån är ljust. En hämtad siffra får därför vit ruta, alltså samma färg
   som kortet den ligger på, och sjunker in i bakgrunden. Ett eget antagande
   behåller den vanliga fyllda rutan och drar blicken.

   Båda går att skriva i. Skillnaden är vem som satt siffran, inte om den är
   låst, och en hämtning som blivit fel måste alltid gå att rätta. Vilken sort
   det är står i rubriken över varje grupp, så färgen behöver inga etiketter.

   Fyllningen är --panel-2 och inte tabellernas --matning, som ligger på fem
   procent orange och alltså nästan är vit. Mot ett vitt kort hade de två
   sorternas rutor då sett likadana ut, och hela markeringen varit förgäves. */
.falt.hamtat input{background:var(--panel)}
.falt.eget input{background:var(--panel-2)}
select{cursor:pointer}
option{background:var(--panel-2)}

/* ---------- flikar ---------- */
.flikar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.flik{
  border:1px solid var(--line);background:var(--panel-2);border-radius:10px;
  padding:10px 18px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.flik[data-aktiv="1"]{background:var(--fg-scen);border-color:var(--fg-scen);color:var(--on-accent)}
.panel[hidden]{display:none}

/* ---------- tabell ---------- */
/* Ingen vaddering i sidled. Den fastfrusna första kolumnen fäster mot
   ytans innerkant, så fyra pixlars vaddering blev en glugg där de
   bortscrollade cellerna syntes till vänster om etiketten. */
.rullyta{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--panel);z-index:1;min-width:210px}
/* Rubrikerna hänger i överkanten, inte i mitten. En rubrik som bryter till
   två rader gör hela raden hög, och de korta rubrikerna bredvid glider då
   ner mot mitten: på en telefon stod Ränta högst upp, Månadskostnad en halv
   rad lägre och Skillnad mot idag över två rader. Överkanten är rätt också
   för årsraden i värderingen, där 2026 och ordet idag delar cell: övriga
   årtal linjerar då med årtalet i stället för med ordet under det. */
thead th{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;
  border-bottom:1px solid var(--line);vertical-align:top;
}
thead th.ar0{color:var(--text)}
tr.matning td{background:var(--matning)}
tr.matning td:first-child{background:var(--matning-etikett)}
td.etikett-sub{color:var(--muted);font-weight:400;font-size:12px}
tr.summa td{font-weight:700;font-size:15px}
tr.tjock td{border-top:2px solid var(--line)}
td input{
  width:100%;min-width:74px;text-align:right;padding:6px 8px;font-size:14px;
  background:transparent;border:1px solid var(--faltram);
}
td input:focus{background:var(--panel-2)}
.upp{color:var(--green)}
.ner{color:var(--red)}
.dov{color:var(--muted)}

/* Snabbifyllningen i värderingen ligger i sajt.css, se steg 3. */

/* ---------- nyckeltal ---------- */
.rutor{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-top:18px}
.ruta{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.ruta .rub{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:6px}
.ruta .varde{font-size:23px;font-weight:700;letter-spacing:-.02em}
.ruta .sub{font-size:12px;color:var(--muted);margin-top:3px}
.ruta.stark{border-color:var(--accent)}

/* ---------- diagram ---------- */
.diagram{width:100%;height:320px;display:block}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:12px;height:3px;border-radius:2px;vertical-align:middle;margin-right:7px}

/* ---------- hämta från Yahoo ---------- */
.hamta{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:18px;
}
.hamta .falt{flex:1;min-width:220px;max-width:340px}
.hamta .status{font-size:12.5px;color:var(--muted);flex:1;min-width:200px;line-height:1.35}
.hamta .status.fel{color:var(--red)}
.hamta .status.ok{color:var(--green)}
button[disabled]{opacity:.5;cursor:default}

/* ---------- fot ---------- */
.info{font-size:12.5px;color:var(--muted);line-height:1.6}
/* Styckena i "Att tänka på" är egna tankar, inte en löpande text, och
   satt utan luft mellan sig läses de som ett enda stycke. */
.info p + p{margin-top:11px}
.info b{color:var(--text);font-weight:600}
.info ul{margin:8px 0 0 18px}
.info li{margin-bottom:4px}
.disclaimer{
  background:var(--panel-2);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  padding:12px 15px;margin-top:16px;font-size:12px;color:var(--muted)
}
.sparat{font-size:12px;color:var(--muted);align-self:center}

/* ---------- sidfot ---------- */
/* Foten ritas av ritaSidfot i js/skal.js och ligger sist i body, alltså
   utanför .wrap. Marginalen uppåt ersätter den padding-top som stod
   inskriven på varje sida förut. */
.sidfot{
  text-align:center;color:var(--muted);font-size:12.5px;
  padding:30px 20px 34px;margin-top:auto;
}
/* Kontonamnet var länge bara fet text. Nu är det länken till profilen, och
   den ska se likadan ut som förut: accentfärg, fet, utan understrykning.
   Regeln står kvar för b, eftersom markupen kan återgå till fet text på en
   sida som inte vill länka ut. */
.sidfot b,
.sidfot .instalank{color:var(--accent);font-weight:700;text-decoration:none}
.sidfot .instalank:hover{text-decoration:underline}
/* Länkarna till policyn, villkoren och kontakten. De är dämpade med flit:
   de ska gå att hitta men inte dra blicken från innehållet. Avdelarna är
   ritade med pseudoelement i stället för att stå i markupen, så att de inte
   läses upp av en skärmläsare som tecken mitt i en länklista. */
.sidfotlankar{
  display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;margin-top:7px;
}
.sidfotlankar a{color:var(--muted);text-decoration:none;position:relative}
.sidfotlankar a:hover{color:var(--accent);text-decoration:underline}
.sidfotlankar a + a::before{
  content:"";position:absolute;left:-8px;top:50%;width:1px;height:11px;
  margin-top:-5px;background:var(--line);
}

@media (max-width:680px){
  body{padding:16px 12px 40px}
  h1{font-size:23px}
  .tagline{font-size:13px}
  .kort{padding:16px 14px;border-radius:12px}
  .kort > h2{margin-bottom:13px}
  /* Ingen minimibredd på telefon. Med 640 px blev varje tabell så bred
     oavsett innehåll, och webbläsaren delade ut överskottet till den
     bredaste kolumnen, alltså etikettspalten. Utan den blir tabellen
     precis så bred som innehållet kräver: de smala ryms på skärmen och
     de breda scrollar med tajta kolumner i stället för glesa. */
  table{font-size:13px;min-width:0}
  th,td{padding:7px 8px}
  /* Den fastfrusna etikettspalten tog en dryg tredjedel av en telefon och
     lämnade knappt två årskolumner synliga. Fast bredd i stället för
     minimibredd, radnamnet får bryta, och radinfo är dold, se sajt.css. */
  th:first-child,td:first-child{min-width:104px;font-size:12px;white-space:normal}
  table.kansel thead th:first-child{white-space:normal}
  /* Scenariojämförelsen och baklängesräkningen ska rymmas utan sidoscroll.
     Båda har samma form: en etikettspalt och ett scenario per kolumn. Fyra
     kolumner, tre av dem lika breda, och fast tabellayout så att bredderna
     sätts av regeln här i stället för av det längsta talet. Cellerna får
     bryta: "12,3 till 18,0" och "Över rimlig kurs" ryms inte på en rad i en
     tredjedels telefon, och en rad som bryter är bättre än en tabell som
     måste dras i sidled. Utan den här regeln var baklängesräkningen 478
     bildpunkter bred i en yta på 314. */
  table#jamfor,table#rimligt{table-layout:fixed;width:100%}
  table#jamfor th,table#jamfor td,
  table#rimligt th,table#rimligt td{white-space:normal;padding:6px 5px}
  table#jamfor th:first-child,table#jamfor td:first-child,
  table#rimligt th:first-child,table#rimligt td:first-child{width:96px}
  table#jamfor td input{min-width:0;width:100%;padding:5px 4px}
  td input{min-width:62px}
  .ruta .varde{font-size:19px}
  .hamta .falt{max-width:none}
  /* Lite högre än förut. Diagrammet är sidans svar i bild, och med
     250 px blev kurvan en platt stump under de sex resultatrutorna. */
  .diagram{height:285px}
  .toolbar{width:100%}
  .toolbar button{flex:1}
}

@media print{
  body{background:#fff;color:#000;padding:0}
  .toolbar,.snabb button{display:none}
  .kort{break-inside:avoid;border-color:#ccc}
  .panel[hidden]{display:block !important}
}