/* ============================================================
   side-priser.css

   Komponenter som bare finnes på /priser. Lastes kun av den siden,
   gjennom hode_ekstra i bygg.mjs.

   Ingen fargeverdier her. Alt kommer fra tokenene i css/pengeguide.css,
   og skript/palett.mjs stopper bygget hvis noe annet sniker seg inn.
   ============================================================ */

.hero{padding:1.375rem 0 2.5rem}
.hero .ingress{max-width:60ch}
.hero .byline{display:block;margin-top:1.375rem}

/* ---------- temaskiller ----------
   Siden dekker seks ulike temaer. Uten et tydelig skille leses de som
   ett langt stykke tekst. Hver seksjon far derfor en hel skillelinje
   over seg, rikelig luft, og en kicker som navngir temaet.

   Forste seksjon far ingen linje: den kommer rett under tallpanelet,
   som allerede er et skille. */
/* :not(.board) er noedvendig: tallpanelet er ogsaa en <section>, og fikk
   96 px ekstra luft av denne regelen. Malt 213 px hoyt panel mot 116 px
   celleinnhold. */
section:not(.board){margin-block:0;padding-block:var(--luft-seksjon)}
section:not(.board) + section:not(.board){border-top:1px solid var(--rule)}

.seksjonskicker{
  margin:0 0 0.5rem;
  font-size:var(--tekst-xs);letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;
  color:var(--rust);
}
section h2{margin-top:0}
.h2-under{color:var(--muted);font-size:var(--tekst-sm);max-width:68ch;margin:0 0 1.25rem}

/* ---------- graf ---------- */
.graf{background:var(--on-spruce);border:1px solid var(--rule);
  border-radius:4px;padding:1.5rem 1.25rem 1rem}
.graf figcaption{font-size:var(--tekst-sm);color:var(--muted);
  margin-top:0.875rem;padding-top:0.875rem;border-top:1px solid var(--rule);max-width:70ch}

/* To varianter av samme graf, byttet på 75rem. Samme regnestykke som på
   styringsrentesiden: den brede har viewBox 1240 og når først 10,8 px
   tekst ved 1200 px skjerm, så den smale må dekke alt under. Taket på
   26rem hindrer at den smale blåses opp. */
.graf .prisgraf{display:block;width:100%;height:auto}
.graf .prisgraf--smal{display:none}
@media(max-width:74.999rem){
  .graf .prisgraf--bred{display:none}
  .graf .prisgraf--smal{display:block;max-width:26rem;margin-inline:auto}
}

/* Detaljvisning ved peking og trykk. Boksen finnes bare naar js/graf.js
   har kjort; uten JavaScript viser nettleseren <title> fra treffflaten. */
.graf{position:relative}
.prisgraf .graf-treff{cursor:pointer}
.prisgraf:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
.graf-boks{
  position:absolute;z-index:2;pointer-events:none;
  background:var(--spruce);color:var(--on-spruce);
  padding:0.5rem 0.75rem;border-radius:3px;
  font-size:var(--tekst-sm);line-height:1.35;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,50,90,.25);
}
.graf-boks span{color:var(--on-spruce-dim)}
.graf-boks[hidden]{display:none}
.graf-prikk{fill:var(--spruce-2);stroke:var(--on-spruce);stroke-width:2;pointer-events:none}
.graf-prikk--2{fill:var(--rust-dim)}

.tegnforklaring{display:flex;flex-wrap:wrap;gap:0.75rem 1.25rem;margin-bottom:0.625rem}
/* min-width:0 og overflow-wrap:anywhere er nødvendig: teksten er en naken
   tekstnode i en flex-boks, altså et anonymt flex-element med
   min-width:auto. Ved 200 % tekst på 320 px stakk «Kjerneinflasjon
   (KPI-JAE)» 9 px utenfor siden. break-word hjelper ikke, den påvirker
   ikke min-content-bredden. */
.tf{display:inline-flex;align-items:center;gap:0.4375rem;min-width:0;
  overflow-wrap:anywhere;
  font-variation-settings:"wdth" 96,"wght" 600;color:var(--ink-2)}
.tf::before{content:"";flex:none;width:1.125rem;height:3px;border-radius:2px}
.tf--kpi::before{background:var(--spruce-2)}
.tf--jae::before{background:var(--rust-dim)}

/* ---------- kalkulatorene ---------- */
.regn{background:var(--wash);border:1px solid var(--rule);border-radius:4px;
  padding:1.25rem;margin-block:1.25rem;
  display:grid;gap:1rem;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.regn-felt{display:grid;gap:0.375rem;min-width:0}
.regn-felt label{font-size:var(--tekst-sm);color:var(--ink-2);
  font-variation-settings:"wdth" 96,"wght" 600}
.regn-felt input{
  font:inherit;font-size:var(--tekst-base);
  padding:0.625rem 0.75rem;min-block-size:2.75rem;
  border:1px solid var(--rule-2);border-radius:3px;
  background:var(--on-spruce);color:var(--ink);width:100%;
}
.regn-felt input:focus-visible{outline:2px solid var(--rust);outline-offset:2px}

/* Svaret spenner hele bredden, uansett hvor mange felt raden har. */
.regn-svar{grid-column:1/-1;margin:0;font-size:var(--tekst-base);
  color:var(--ink);border-top:1px solid var(--rule-2);padding-top:1rem}
.regn-svar b{font-variation-settings:"wdth" 96,"wght" 700}
.regn-svar:empty{display:none}
.regn-svar span{color:var(--muted);font-size:var(--tekst-sm);display:block;margin-top:0.25rem}

/* ---------- tabell ---------- */
.tabellramme{overflow-x:auto;position:relative}
table{width:100%;border-collapse:collapse;background:var(--on-spruce);
  border:1px solid var(--rule);border-radius:4px;font-size:var(--tekst-sm)}
caption{text-align:left;font-size:var(--tekst-sm);color:var(--muted);padding-bottom:0.625rem}
th,td{padding:0.75rem 1rem;text-align:left;border-top:1px solid var(--rule)}
thead th{font-size:var(--tekst-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);background:var(--bg);border-top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}


/* ---------- finpuss ----------
   Smaa ting som ikke endrer strukturen, men gjor siden roligere aa lese. */

/* Ingressen skal ikke konkurrere med h1. */
.hero .ingress{color:var(--ink-2)}

/* Tall i lopende tekst og i tabeller skal ha samme bredde per siffer, saa
   kolonner star rett under hverandre og tall ikke hopper naar de endres. */
.regn-svar,.graf-boks,table{font-variant-numeric:tabular-nums}

/* Kalkulatorene er handlingsflater, ikke bokser med tekst. Litt mer
   kontrast mot brodteksten enn wash alene gir. */
.regn{border-color:var(--rule-2)}

/* Kildelista nederst skal lese som en fotnote, ikke som brodtekst. */
.kilder ul{margin:0;padding-left:1.2rem}
.kilder li{margin-bottom:0.5rem}

/* Lenker i brodteksten paa denne siden folger resten av nettstedet. */
section p a:not(.knapp){color:var(--green);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
section li a{color:var(--green);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}