/* ============================================================
   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;
}
.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:#cbe0f0}
.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:#8fb2ce;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:#1a1204;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:#f4bd67}

/* ---------- 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:#f5f9fc}
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}
.kort{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:24px;border-top:3px solid var(--rust-dim)}
.kort p{font-size:var(--tekst-sm);color:#2c3f4d;margin:0}

/* ---------- 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:#2c3f4d}

/* ---------- 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å. */
.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)}