/* ============================================================
   feber-components.css · v2.0.0
   Komponentsettet, tegnet én gang for begge stemninger.
   Leser KUN semantiske slots fra feber-tokens.css.
   Navnerom: .fbr-* — kolliderer aldri med husets egne klasser.
   Spesifikasjon og prøvetrykk:
   https://claude.ai/code/artifact/d724a707-3906-4f60-945b-4b4a99b2a27f
   ============================================================ */

/* ---------- grunn ---------- */
[data-mood]{
  background:var(--bg); color:var(--tx);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-synthesis:none; -webkit-font-smoothing:antialiased;
}
[data-mood] ::selection{background:var(--ax-vivid);color:var(--on-accent)}
[data-mood] :focus-visible{outline:2px solid var(--ax-text);outline-offset:2px;border-radius:2px}

/* Tall: proporsjonale som standard. .fbr-num er opt-in for kolonner
   som må linjere over mange rader (tabeller, kontoutskrifter). */
.fbr-num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* Redaksjonell stemme — titler og ingresser */
.fbr-serif{font-family:'Newsreader',serif;font-optical-sizing:auto}

/* ---------- ordmerke + puls ---------- */
/* <span class="fbr-wm">kredittkort<b>feber</b><svg class="fbr-pls">…</svg></span>
   Puls-path (viewBox 0 0 64 44): M2 32 H17 L27.5 8 L37.5 40 L43.5 32 H62
   Forenklet <24px:            M2 32 H16 L30 8 L44 32 H62                */
.fbr-wm{font-weight:430;letter-spacing:-.015em;text-transform:lowercase;white-space:nowrap;color:var(--tx)}
.fbr-wm b{font-weight:800}
svg.fbr-pls{display:inline-block;width:.66em;height:.454em;vertical-align:-.055em;margin-left:.14em;overflow:visible;color:var(--ax-vivid)}
svg.fbr-pls path{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- handling + «Annonselenke» ---------- */
.fbr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;text-decoration:none;
  font:700 var(--fs-0)/1 'Schibsted Grotesk',sans-serif;letter-spacing:.005em;
  background:var(--ax-vivid);color:var(--on-accent);
  border-radius:var(--r-ctrl);padding:13px 22px;
}
.fbr-btn:hover{filter:brightness(1.05)}
.fbr-btn--ghost{background:transparent;color:var(--tx);border:1.5px solid var(--tx)}
.fbr-btn--ghost:hover{filter:none;background:var(--raise)}
/* primær «gå»-knapp — den ENE handlingen (konvertering). Grønn, ikke husets
   aksent, så den skiller seg fra alt annet. Aldri mer enn én synlig om gangen
   i en seksjon. Merkes «Annonselenke» når den er en kommersiell utlenke. */
.fbr-go{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;text-decoration:none;
  font:700 var(--fs-0)/1 'Schibsted Grotesk',sans-serif;letter-spacing:.005em;
  background:var(--go);color:var(--go-ink);
  border-radius:var(--r-ctrl);padding:13px 22px;
}
.fbr-go:hover{background:var(--go-hover)}
.fbr-ann{
  display:inline-block;font-size:.71875rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx3);border:1px solid var(--ln);
  border-radius:var(--r-chip);padding:3px 7px;white-space:nowrap;
}
/* «Annonselenke» står alltid innen 8 px fra sin knapp: */
.fbr-cta{display:inline-flex;flex-direction:column;gap:7px;align-items:flex-start}

/* ---------- sammenligningsrad ---------- */
.fbr-cmp-scroll{overflow-x:auto}
.fbr-cmp{min-width:640px;border:1px solid var(--ln);border-radius:var(--r-card);background:var(--surface);overflow:hidden;color:var(--tx)}
.fbr-cmp__hd,.fbr-cmp__row{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.6fr auto;gap:14px;align-items:center;padding:13px 20px}
.fbr-cmp__hd{font-size:.71875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--ln);padding-block:10px}
.fbr-cmp__row{border-bottom:1px solid var(--ln)}
.fbr-cmp__row:last-child{border-bottom:0}
/* beste rad: dempet flatetone — aldri aksentramme/skinne (hard rule),
   aldri «ANBEFALT»-rosett. Aksent i raden bæres av __val--best-tallet. */
.fbr-cmp__row--top{background:var(--raise)}
.fbr-cmp__prod{display:flex;flex-direction:column;gap:2px}
.fbr-cmp__prod strong{font-size:var(--fs-0)}
.fbr-cmp__prod small{font-size:.78125rem;color:var(--tx3)}
.fbr-cmp__val{font-weight:700;font-size:var(--fs-1)}
.fbr-cmp__val small{display:block;font-size:.71875rem;font-weight:600;color:var(--tx3);letter-spacing:.03em;text-transform:uppercase;margin-top:1px}
.fbr-cmp__val--best{color:var(--ax-text)}
.fbr-cmp__why{font-size:.8125rem;color:var(--tx2)}

/* ---------- faktakort ---------- */
.fbr-fakta{border:1px solid var(--ln);border-radius:var(--r-card);background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:14px;color:var(--tx)}
.fbr-fakta__hd{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.fbr-fakta__hd strong{font-size:var(--fs-1)}
.fbr-fakta__tag{font-size:.71875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ax-text);color:var(--ax-text);border-radius:var(--r-chip);padding:3px 7px}
.fbr-fakta dl{display:grid;grid-template-columns:1fr auto;gap:8px 18px;font-size:var(--fs--1);margin:0}
.fbr-fakta dt{color:var(--tx3)}
.fbr-fakta dd{font-weight:700;text-align:right;margin:0}
.fbr-fakta__derfor{border-top:1px solid var(--ln);padding-top:12px;font-size:var(--fs--1);color:var(--tx2)}
.fbr-fakta__derfor b{color:var(--ax-text)}

/* ---------- priseksempel / vilkårsboks ----------
   Compliance er ikke liten skrift: systemets tyngste ramme,
   full tekstfarge, aldri under 15 px, aldri bak en utvidelse. */
.fbr-pris{border:1.5px solid var(--tx);border-radius:var(--r-card);background:var(--surface);padding:18px 22px;color:var(--tx)}
.fbr-pris__lbl{font-size:.78125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx2);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fbr-pris__lbl .fbr-pls{margin:0}
.fbr-pris p{font-size:var(--fs-0);line-height:1.6;margin:0}

/* ---------- guide-inngang ---------- */
.fbr-ghero{padding:26px 24px;border-radius:var(--r-card);border:1px solid var(--ln);background:var(--surface);color:var(--tx)}
.fbr-ghero__k{font-size:.71875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ax-text)}
.fbr-ghero h1,.fbr-ghero h2,.fbr-ghero h3{font-family:'Newsreader',serif;font-optical-sizing:auto;font-weight:520;font-size:var(--fs-4);margin:8px 0 0;line-height:1.12;text-wrap:balance}
.fbr-ghero__meta{display:flex;gap:14px;margin-top:12px;font-size:.78125rem;color:var(--tx3);flex-wrap:wrap}

/* ---------- spotillustrasjoner ---------- */
/* Settet ligger i dist/spots/*.svg og limes inn inline (som pulsen).
   Anatomi (48×48-rutenett): aksentvask-lag (fill var(--icon-accent),
   opacity .16) + strekstruktur-lag (1.6 enheter, runde ender/hjørner).
   Vennlige objekter, aldri UI-glyfer, aldri fjes. Standard er nøytral
   blekk-vask; --aksent gir husets farge og brukes maks én gang per
   seksjon. Aldri i .fbr-pris eller faktatabeller; aldri inntil
   kortobjektet. Full plasseringslov: DESIGN-SYSTEM.md. */
svg.fbr-spot{display:block;flex:none;width:48px;height:48px;color:var(--tx);--icon-accent:currentColor}
svg.fbr-spot--aksent{--icon-accent:var(--ax-vivid)}
svg.fbr-spot--96{width:96px;height:96px}

/* ---------- nytteliste ---------- */
/* Ikon + én linje per fordel («inkluderte forsikringer»-mønsteret):
   <ul class="fbr-nytte"><li><svg class="fbr-spot">…</svg><span>…</span></li></ul> */
.fbr-nytte{list-style:none;margin:0;padding:0}
.fbr-nytte li{display:flex;align-items:center;gap:16px;padding:12px 2px;border-bottom:1px solid var(--ln);font-size:var(--fs-0);line-height:1.45;color:var(--tx)}
.fbr-nytte li:last-child{border-bottom:0}
.fbr-nytte b{font-weight:650}

/* ---------- FAQ ---------- */
.fbr-faq{border:1px solid var(--ln);border-radius:var(--r-card);background:var(--surface);overflow:hidden;color:var(--tx)}
.fbr-faq details{border-bottom:1px solid var(--ln)}
.fbr-faq details:last-child{border-bottom:0}
.fbr-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 20px;font-weight:600;font-size:var(--fs-0)}
.fbr-faq summary::-webkit-details-marker{display:none}
.fbr-faq summary::after{content:"+";font-weight:700;color:var(--ax-text);font-size:var(--fs-2);line-height:1}
.fbr-faq details[open] summary::after{content:"–"}
.fbr-faq__a{padding:0 20px 16px;font-size:var(--fs--1);color:var(--tx2);max-width:62ch}

/* ---------- 18+ / ansvarsstripe (mørk stemning) ---------- */
.fbr-rg{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--ln);background:var(--bg);color:var(--tx2);font-size:var(--fs--1)}
.fbr-rg__age{border:1.5px solid var(--tx);border-radius:6px;font-weight:800;padding:3px 8px;color:var(--tx);font-size:.8125rem}
.fbr-rg a{color:var(--tx);font-weight:600;text-underline-offset:3px}
.fbr-rg__sep{color:var(--tx3)}

/* ---------- familiefot ---------- */
.fbr-fam{padding:24px;border-radius:var(--r-card);border:1px solid var(--ln);background:var(--surface);color:var(--tx)}
.fbr-fam__lbl{font-size:.78125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3)}
.fbr-fam ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:14px 0 0;padding:0;align-items:baseline}
.fbr-fam a{text-decoration:none}
.fbr-fam .fbr-wm{font-size:var(--fs-0)}
.fbr-fam i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;vertical-align:1px}
.fbr-fam .fbr-fam__her{border-bottom:2px solid var(--tx)}

/* ---------- responsivt ---------- */
@media (max-width:720px){
  .fbr-cmp__hd,.fbr-cmp__row{grid-template-columns:1.8fr 1fr 1fr 1.4fr auto;gap:10px;padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .fbr-btn:hover{filter:none}
}

/* ---------- rentevisning (RateDisplay) ---------- */
/* Det store prosenttallet som merkeelement — Schibsted, tabulære siffer.
   Trend er informasjon, ikke dom: blekk, aldri grønt/rødt (grønt er
   reservert handlings-CTA-en). */
.fbr-rate{display:inline-flex;flex-direction:column;gap:2px;color:var(--tx)}
.fbr-rate__lbl{font-size:.71875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3)}
.fbr-rate__verdi{font-size:var(--fs-6);font-weight:800;line-height:1.02;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.fbr-rate--aksent .fbr-rate__verdi{color:var(--ax-text)}
.fbr-rate__endring{font-size:var(--fs--1);color:var(--tx2)}
.fbr-rate--kompakt .fbr-rate__verdi{font-size:var(--fs-4)}

/* ---------- kostnadseksempel (CostExampleBox) ---------- */
/* Generalisert priseksempel for rente/strøm-husene: lånekostnad,
   månedskostnad. SAMME regulatoriske register som .fbr-pris — 1,5 px
   blekkstrek, flate, ALDRI aksent, aldri bak en utvider, tekst ≥15 px.
   Spots og dekor har ingen adgang. */
.fbr-kost{border:1.5px solid var(--tx);border-radius:var(--r-card);background:var(--surface);padding:18px 22px;color:var(--tx)}
.fbr-kost__lbl{font-size:.78125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx2);margin-bottom:8px}
.fbr-kost p{font-size:var(--fs-0);line-height:1.6;margin:0}
.fbr-kost__tall{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px}
.fbr-kost__tall dt{font-size:.71875rem;color:var(--tx3);margin-bottom:1px}
.fbr-kost__tall dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums lining-nums}

/* ---------- sporingskort (TrackerCard) ---------- */
/* Levende tall (dagens spotpris, beste boliglånsrente). Kilde + tidspunkt
   er OBLIGATORISK innhold i __kilde — et sporet tall uten kilde og
   klokkeslett er en påstand, ikke et måletall. */
.fbr-tracker{border:1px solid var(--ln);border-radius:var(--r-card);background:var(--surface);padding:18px 22px;display:flex;flex-direction:column;gap:6px;color:var(--tx)}
.fbr-tracker__lbl{font-size:.71875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3)}
.fbr-tracker__verdi{font-size:var(--fs-5);font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums lining-nums}
.fbr-tracker__enhet{font-size:var(--fs-0);font-weight:600;color:var(--tx2)}
.fbr-tracker__delta{font-size:var(--fs--1);color:var(--tx2)}
.fbr-tracker__kilde{font-size:.71875rem;color:var(--tx3);border-top:1px solid var(--ln);padding-top:8px;margin-top:6px}

/* ---------- FeberScore-nedbrytning (FeberScoreBreakdown) ---------- */
/* Totalen er verdifiguren (aksent-tekstnivået); pilar-søylene er blekk —
   flisene aksent-markerer aldri enkeltpilarer. Bredde per rad settes
   inline: style="--p:62%". */
.fbr-score{border:1px solid var(--ln);border-radius:var(--r-card);background:var(--surface);padding:18px 22px;color:var(--tx)}
.fbr-score__topp{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.fbr-score__total{font-size:var(--fs-5);font-weight:800;color:var(--ax-text);font-variant-numeric:tabular-nums lining-nums}
.fbr-score__av{font-size:var(--fs--1);color:var(--tx3)}
.fbr-score__rad{display:grid;grid-template-columns:minmax(90px,1fr) 2.2fr auto;align-items:center;gap:10px;padding:5px 0;font-size:var(--fs--1)}
.fbr-score__navn{color:var(--tx2)}
.fbr-score__spor{height:6px;border-radius:var(--r-pill);background:var(--raise);overflow:hidden}
.fbr-score__fyll{height:100%;width:var(--p,0%);border-radius:inherit;background:var(--tx2)}
.fbr-score__tall{font-variant-numeric:tabular-nums lining-nums;font-weight:700}