/* ============================================================
   side-styringsrenten.css

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

   Paletten kommer fra tokenene i css/pengeguide.css, som hele nettstedet
   deler. De hardkodede verdiene som står igjen her er nyanser bare denne
   siden bruker: grafens fyll, kortflatene og de to retningsfargene i
   tallpanelet. De hører til komponenten, ikke til paletten, og skal ikke
   løftes til :root før en annen side trenger dem.
   ============================================================ */

/* Toppen, menyen, tallpanelet og bunnen fra utkastet er fjernet:
   siden arver dem fra maler/layout.html. Bare retningsfargene var
   fortsatt i bruk. */
.opp{color:var(--pil-opp)}.ned{color:var(--pil-ned)}

/* ---------- smuler ---------- */
.smuler{font-size:var(--tekst-sm);color:var(--muted);padding:16px 0 0}
.smuler a{color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding:22px 0 40px}
h1{
  font-size:var(--tekst-3xl);
  line-height:1.06;letter-spacing:-.032em;font-weight:800;
  margin:.35em 0 .3em;text-wrap:balance;max-width:16ch;
}
.ingress{font-size:var(--tekst-lg);line-height:1.5;color:var(--ink-2);max-width:60ch;text-wrap:pretty;margin:0}
.byline{margin-top:22px;font-size:var(--tekst-sm);color:var(--muted)}
.byline b{color:var(--ink)}

/* ---------- nokkeltall-kort ---------- */
.naa{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;
  background:var(--spruce);color:#fff;border-radius:4px;overflow:hidden;margin:36px 0 44px;
;position:relative}
.naa-venstre{padding:34px 34px 30px}
.merke{display:inline-block;font-size:var(--tekst-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rust-dim);margin-bottom:14px}
.stor{font-size:var(--tall-stor);font-weight:800;letter-spacing:-.045em;line-height:.95;margin:0}
.stor span{font-size:.34em;font-weight:700;letter-spacing:-.01em;vertical-align:.42em;margin-left:.12em}
.uendret{margin:14px 0 0;font-size:var(--tekst-sm);color:var(--on-spruce-dim)}
.uendret b{color:#fff}
.naa-hoyre{padding:34px;background:rgba(255,255,255,.055);border-left:1px solid var(--linje);display:flex;flex-direction:column;justify-content:center;gap:18px}
.rad{display:flex;gap:14px;align-items:baseline}
.rad dt{flex:0 0 116px;font-size:var(--tekst-sm);color:var(--on-spruce-dim);font-weight:600}
.rad dd{margin:0;font-size:var(--tekst-base);font-weight:600}
.rad dd small{display:block;font-weight:500;font-size:var(--tekst-sm);color:var(--on-spruce-dim);margin-top:2px}
.naa-hoyre .knapp{
  display:inline-flex;align-self:flex-start;margin-top:4px;
  background:var(--rust-dim);color:var(--spruce);text-decoration:none;font-weight:700;font-size:var(--tekst-sm);
  padding:11px 18px;border-radius:3px;transition:background .22s cubic-bezier(.22,1,.36,1);
}
.naa-hoyre .knapp:hover{background:var(--on-spruce)}

/* ---------- seksjoner ---------- */
section{padding:14px 0 46px}
h2{font-size:var(--tekst-2xl);letter-spacing:-.025em;font-weight:800;margin:0 0 6px;text-wrap:balance}
h3{font-size:var(--tekst-lg);font-weight:700;letter-spacing:-.012em;margin:0 0 6px}
.h2-under{color:var(--muted);margin:0 0 26px;max-width:64ch;text-wrap:pretty}
p{max-width:70ch;text-wrap:pretty}

/* ---------- graf ---------- */
.graf{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:24px 20px 16px}
.graf svg{display:block;width:100%;height:auto}
.graf figcaption{font-size:var(--tekst-sm);color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.graf figcaption a{color:var(--spruce-2)}

/* ---------- tabell ---------- */
.tabellramme{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff;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:10px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--rule)}
thead th{font-size:var(--tekst-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--bg)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-weight:600}
.endring{font-weight:700;font-size:var(--tekst-sm)}
.e-opp{color:var(--opp)}.e-ned{color:var(--ned)}.e-null{color:var(--muted);font-weight:500}

/* ---------- forklaringskort ---------- */
.kort3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
/* Kortene er lenker. Hele flaten er klikkbar, ikke bare overskriften:
   et kort som ser ut som en knapp skal oppfore seg som en. */
.kort{display:block;background:var(--on-spruce);border:1px solid var(--rule);
  border-radius:4px;padding:24px;border-top:3px solid var(--rust-dim);
  color:inherit;text-decoration:none;transition:border-color .18s,transform .18s}
.kort:hover{border-color:var(--spruce-2)}
.kort:hover .kort-pil{transform:translateX(3px)}
.kort h3{color:var(--ink)}
.kort p{font-size:var(--tekst-sm);color:var(--ink-2);margin:0}
.kort-pil{display:inline-block;color:var(--spruce-2);transition:transform .18s}

/* ---------- faq ---------- */
details{background:#fff;border:1px solid var(--rule);border-radius:4px;margin-bottom:10px}
summary{padding:16px 20px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:var(--tekst-lg);font-weight:600;color:var(--rust);transition:transform .25s cubic-bezier(.22,1,.36,1)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 20px 18px;font-size:var(--tekst-sm);color:var(--ink-2)}

/* ---------- kildeboks ---------- */
.kilder{background:var(--wash);border:1px solid var(--rule-2);padding:20px 24px;border-radius:4px;font-size:var(--tekst-sm)}
.kilder h3{margin-bottom:8px}
.kilder ul{margin:0;padding-left:20px}
.kilder li{margin-bottom:5px}
.kilder a{color:var(--spruce-2)}

/* ---------- bunn ---------- */

@media (max-width:820px){
  .naa{grid-template-columns:1fr}
  .naa-hoyre{border-left:0;border-top:1px solid var(--linje)}
  .naa-venstre,.naa-hoyre{padding:26px 22px}
  .rad{flex-direction:column;gap:2px}
  .rad dt{flex:none}
  table{font-size:var(--tekst-sm)}
  th,td{padding:10px 12px}
}
}

/* ---------- overstyringer mot det delte stilarket ---------- */

/* .byline er flex i css/pengeguide.css, fordi den der er en rad med
   forfatter, dato og lesetid. Her er den en vanlig setning, og flex
   gjorde hvert tekstledd til et eget flex-element som brøt på feil sted. */
.hero .byline{display:block}

/* Ingressen skal få bruke bredden sin. p{max-width:70ch} i det delte
   stilarket traff den først. */
.hero .ingress{max-width:60ch}

/* ---------- detaljvisning på grafen ---------- */

/* Treffflatene er usynlige, men skal vise at det er noe å peke på. */
/* To varianter av samme graf. Den brede beholder sideforholdet 3,1:1 og
   blir 303x98 px paa en 390 px skjerm, med 3 px etiketter. Den smale har
   en viewBox paa 300x356 og blir naermest kvadratisk, med 10,7 til 15,3 px
   tekst. Byttet skjer paa 34rem. Maks 22rem hindrer at den smale blaases
   opp til 19 px tekst rett under bytepunktet. */
.graf .rentegraf--smal{display:none}
/* Bytepunktet er regnet ut, ikke valgt. Rendret tekst er
   fontenheter x (grafbredde / viewBox-bredde). Den brede har viewBox 1240
   og naar foerst 10,8 px ved 1200 px skjerm. Byttet vi tidligere, fikk vi
   et hull: paa 700 px skjerm gav den brede 6,0 px tekst, altsaa daarligere
   enn det vi nettopp rettet paa mobil.

   Den smale er derfor i bruk helt opp til 75rem, med et tak paa 26rem saa
   teksten ikke blaases opp. Da ligger minste tekst mellom 10,2 og 18 px i
   hele omraadet, uten fall noe sted. */
@media(max-width:74.999rem){
  .graf .rentegraf--bred{display:none}
  .graf .rentegraf--smal{display:block;max-width:26rem;margin-inline:auto}
}

.rentegraf .graf-treff{cursor:pointer}
.rentegraf:focus-visible{outline:2px solid var(--rust);outline-offset:4px}

/* Boksen finnes bare når js/graf.js har kjørt. Uten JavaScript vises
   nettleserens egen hjelpetekst fra <title> i stedet. */
.graf-boks{
  position:absolute;z-index:5;pointer-events:none;
  background:var(--spruce);color:#fff;
  padding:0.5rem 0.75rem;border-radius:3px;
  font-size:var(--tekst-sm);line-height:1.35;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,32,58,.22);
}
.graf-boks span{color:var(--on-spruce-dim)}
.graf-boks[hidden]{display:none}
.graf-prikk{fill:var(--rust-dim);stroke:#fff;stroke-width:2;pointer-events:none}

/* Vekselvis bakgrunn på FAQ-en. Åpent spørsmål får alltid den mørkere,
   så det skiller seg fra de lukkede uansett hvor i rekka det står. */
details:nth-of-type(odd){background:var(--wash)}
details:nth-of-type(even){background:#fff}
details[open]{background:var(--wash)}

/* Spørsmål og svar skilles på vekt og størrelse, som ellers på siden. */
summary,details p{overflow-wrap:anywhere}
summary{width:100%;font-size:var(--tekst-base);
  font-variation-settings:"wdth" 96,"wght" 720}
details p{font-size:var(--tekst-sm);
  font-variation-settings:"wdth" 100,"wght" 400;color:var(--ink-2)}