/* detaljside.css — «Les mer»-sidene bak lånelistene.

   LAGT OM 17. august 2026, kveld. Den første utgaven var seks
   nøkkel/verdi-tabeller under hverandre, og på de 34 sidene uten bankkilde
   sto «Ikke undersøkt ennå.» fem ganger i kursiv. Dommen var 3 av 10 og
   «gidder ikke lese». Riktig dom: siden så ut som en databasedump.

   Nå svarer siden på tre spørsmål, i den rekkefølgen leseren stiller dem,
   og hvert svar har noe å se på som er regnet ut av dataene:

     1. Hva koster det?        .kostnad: tre tall og en delt stolpe
     2. Er det dyrt eller billig?  .plass: prikkestripa over hele lista
     3. Hva er vilkårene?       én tabell med bare rader som sier noe

   Det som mangler sies ÉN gang, i .usjekket, ikke fem. Prinsippet om at et
   skjult felt er verst står ved lag; det er formen som er endret.

   Fargene er tokener. Panelet er LYST med vilje: annonsekortet i høyre
   kolonne er marineblått med 10 px hjørner, og et marineblått kostnadspanel
   med samme hjørner ville sett ut som annonse nummer to. */

/* ---------- sidehodet: bankens ikon og kickeren over h1 ---------- */
.lanhode{display:flex;align-items:center;gap:1rem;margin:0 0 1.25rem}
.lanmerke{flex:0 0 auto;inline-size:3.5rem;block-size:3.5rem;display:grid;place-items:center;
  border-radius:10px;overflow:hidden;background:var(--wash);color:var(--muted);
  font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 700}
.lanmerke.har-merke{background:none}
.lanmerke img{inline-size:100%;block-size:100%;object-fit:contain;display:block;border-radius:10px}
.lanhode-tekst{min-width:0}
.lanhode .kicker{margin:0 0 .25rem}
.lanhode h1{margin:0}

/* ---------- kostnadspanelet ---------- */
.kostnad{background:var(--fig-hvit);border:1px solid var(--rule);border-radius:10px;
  padding:1.125rem 1.25rem 1rem;margin:0 0 1rem}
/* Kalkulatoren står INNE i panelet, øverst, så tallene endrer seg rett
   under tommelen. .kalk fra side-forbrukslan.css har egen ramme, flate og
   blokkluft; her er panelet ramma, så de tas bort og en hårlinje skiller
   kontrollene fra tallene. */
.brod .kostnad .kalk{border:0;background:transparent;padding:0 0 1.125rem;margin:0 0 1.125rem;
  border-bottom:1px solid var(--rule);border-radius:0}
.kostnad .kalk .belopfelt{max-width:none}
/* Finansportalen-stripa rett under panelet, som over listene. */
.brod .kilde{margin:0 0 var(--luft-blokk)}
/* Tre tall. auto-fit så de går fra tre i bredden til to og én på 320 uten
   at «68 267 kr» brytes midt i. Tallet skal aldri deles: det er én verdi. */
.kostnad-tall{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.875rem 1rem}
.kostnad-tall .lab{display:block;font-size:var(--tekst-xs);color:var(--muted);letter-spacing:.02em;
  margin-bottom:.125rem;font-variation-settings:"wdth" 92,"wght" 520}
.kostnad-tall .val{display:block;font-size:var(--tekst-xl);line-height:1.15;color:var(--ink);
  font-variation-settings:"wdth" 92,"wght" 700;white-space:nowrap}
.kostnad-linje{margin:1.125rem 0 .5rem;font-size:var(--tekst-sm);color:var(--ink-2)}
.kostnad-linje b{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 650}
.kostnad-fot{margin:.875rem 0 0;font-size:var(--tekst-xs);color:var(--muted);line-height:1.5}

/* Den delte stolpen. Bredden på hver del settes som --andel fra bygget,
   fordi den er et tall fra regnestykket og ikke en stil. gap:2px gir en
   hvit fuge mellom delene, så to like mørke naboer aldri leses som én. */
.deling{margin:0}
.deling-stolpe{display:flex;block-size:.875rem;border-radius:999px;overflow:hidden;gap:2px;background:var(--rule)}
.deling .del{flex:0 0 var(--andel);min-inline-size:3px}
.del--renter{background:var(--spruce)}
.del--etabl{background:var(--rust-dim)}
.del--termin{background:var(--on-spruce-dim)}
/* `.brod ul` er display:grid med gap; denne må vinne, ellers stables
   forklaringen loddrett. */
.brod .deling-forklaring{list-style:none;margin:.625rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.375rem 1.25rem;font-size:var(--tekst-sm);color:var(--ink-2)}
.brod .deling-forklaring li{padding:0}
.deling-forklaring b{color:var(--ink);font-variation-settings:"wdth" 92,"wght" 700}
.prikk{display:inline-block;inline-size:.625rem;block-size:.625rem;border-radius:2px;
  margin-right:.375rem;vertical-align:baseline}
.prikk--renter{background:var(--spruce)}
.prikk--etabl{background:var(--rust-dim)}
.prikk--termin{background:var(--on-spruce-dim)}

/* ---------- prikkestripa: alle lån i lista, dette lånet markert ---------- */
/* Prikkene er HTML med prosentposisjon, så de har samme størrelse i alle
   bredder. Markøren er --rust-dim med marineblå ring, som er palettens
   punktmarkør. Sidemargen på stripa er halve markøren, så ytterste prikk
   ikke klippes ved 0 og 100 prosent. */
.plass{margin:0 0 1.25rem}
.plass-stripe{position:relative;block-size:2rem;margin:0 .5rem}
.plass-stripe::before{content:"";position:absolute;left:0;right:0;top:50%;
  border-top:2px solid var(--rule-2);translate:0 -50%}
.plass-stripe i{position:absolute;top:50%;translate:-50% -50%;inline-size:.5rem;block-size:.5rem;
  border-radius:999px;background:var(--fig-dim)}
.plass-stripe i.prikk-denne{inline-size:1rem;block-size:1rem;background:var(--rust-dim);
  box-shadow:0 0 0 2px var(--spruce);z-index:1}
.plass-akse{display:flex;justify-content:space-between;gap:1rem;font-size:var(--tekst-xs);
  color:var(--muted);line-height:1.45;margin:0 .5rem}
.plass-akse b,.plass-denne b{color:var(--ink);font-variation-settings:"wdth" 92,"wght" 700}
/* Etiketten over markøren. Blokka har samme sidemarg som stripa, så
   prosentene måler samme bredde. Spennet inni står ved left:X% og skyves
   tilbake X% av sin egen bredde: ved 0 % venstrestilt, ved 100 %
   høyrestilt, ellers sentrert over prikken. --x settes fra bygget. */
.brod .plass-denne{position:relative;margin:0 .5rem .25rem;block-size:1.5em;
  font-size:var(--tekst-xs);color:var(--muted);line-height:1.45}
.plass-denne span{position:absolute;left:var(--x,50%);top:0;white-space:nowrap;
  transform:translateX(calc(-1 * var(--x,50%)))}
.plass-denne span::after{content:"";position:absolute;left:var(--x,50%);top:100%;
  translate:-50% 0;border-left:1px solid var(--rule-2);block-size:.375rem}

/* ---------- vilkårstabellen og bankens side ---------- */
.dempet{font-size:var(--tekst-sm);color:var(--muted)}
.mangler{color:var(--muted);font-style:italic}

/* Bankens egne opplysninger som definisjonsliste: etikett og svar. Én
   tabell til hadde gjort siden til det den var. */
.bankside{margin:0 0 var(--luft-blokk);padding:0}
.bankside > div{display:grid;grid-template-columns:minmax(0,1fr);gap:.125rem .75rem;
  padding:.75rem 0;border-top:1px solid var(--rule)}
.bankside > div:last-child{border-bottom:1px solid var(--rule)}
.bankside dt{font-size:var(--tekst-sm);color:var(--muted);font-variation-settings:"wdth" 92,"wght" 600}
.bankside dd{margin:0}
@media(min-width:36rem){.bankside > div{grid-template-columns:11rem minmax(0,1fr)}}

/* Det som ikke er sjekket, sagt én gang. Tonet flate, ingen ramme, ingen
   stripe: det er en opplysning, ikke en advarsel. */
.usjekket{margin:0 0 var(--luft-blokk);padding:.875rem 1rem;background:var(--wash);border-radius:8px;
  font-size:var(--tekst-sm);color:var(--ink-2);line-height:1.55}
.usjekket p{margin:0}
.usjekket b{color:var(--ink)}

/* Avvik mellom bankens prisliste og Finansportalen. Noteres, ikke utjevnes.
   Full ramme, ikke venstrestripe: samme flate som .usjekket, med ramme
   fordi den er en presisering av tall som står rett over. */
.avvik{padding:.75rem 1rem;background:var(--wash);border:1px solid var(--rule-2);border-radius:8px;
  font-size:var(--tekst-sm);color:var(--ink-2)}
.avvik b{color:var(--ink)}

/* Kildelista nederst. Hver kilde har lenke og dato. */
.kilder{padding-left:1.25rem}
.kilder li{margin:0 0 .5rem}