/* side-boligpriser.css — panel, graf og tabell på /bolig/boligpriser.
   Lastes bare av artikler som faktisk har en boliggraf. Testen står i
   bygg.mjs og leser den ferdige brødteksten, ikke front matter. */

/* ---------- tallpanelet ----------
   Bygger på .tallboks i pengeguide.css. Her ligger bare det som er
   særegent: serieetiketten ved siden av hvert tall.

   ETIKETTEN ER IKKE PYNT. Tabellen bak siden har to serier for samme
   størrelse, og et tall uten etikett svarer på feil spørsmål. Derfor står
   ordet synlig ved verdien og ikke bare i et data-attributt, og derfor
   krever skript/variantvakt.mjs at det gjør det. */
/* .brod table setter ramme på alle tabeller i brødtekst. Panelet har
   allerede sin egen ramme fra .tallboks, og de to ga en dobbel strek med
   luft imellom under nederste rad. Målt i nettleseren. */
.boligtall table{border:0}
.boligtall .serie{display:block;font-size:var(--tekst-xs);color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 600;letter-spacing:.04em;
  text-transform:uppercase;margin-top:2px;white-space:nowrap}
.boligtall .verdi{white-space:nowrap;text-align:right}
/* Fortegnet skal være til å se. Tallene her er små og bytter retning
   flere ganger i året, i motsetning til prisveksten. */
.boligtall .opp{color:var(--opp)}
.boligtall .ned{color:var(--ned)}
/* Kilde- og datolinja under panelet. Ligger inne i .tallboks-rammen, så
   den trenger sin egen luft. Datoen her er ikke pynt: kvartalsvakten
   leser nettopp denne linja på den publiserte siden for å avgjøre om SSB
   har kommet med et nytt kvartal. Se skript/kvartalsvakt.mjs. */
.boligtall .kildelinje{margin:0;padding:0.75rem 1.125rem;
  border-top:1px solid var(--rule);font-size:var(--tekst-xs);
  color:var(--muted);max-width:none}

/* ---------- grafen ----------
   BYTTET PÅ CONTAINER, IKKE PÅ VIEWPORT. Dette er forskjellen fra
   prisgrafen og rentegrafen, og den er ikke kosmetisk.

   De to står i sidebrede maler, så skjermbredden er et godt mål på hvor
   mye plass grafen har. Denne står inne i lesespalten, som er 42rem
   uansett hvor bred skjermen er. En media query på 75rem ville derfor
   valgt den brede varianten på en 2048 px skjerm og rendret den i en
   672 px spalte. Målt: aksetekst på 6,8 px, altså uleselig, uten at noe
   sa fra — skjermen var jo bred.

   Container query spør om spalten og ikke om vinduet. Flytter grafen inn
   i en smalere boks senere, følger valget etter av seg selv. */
.boliggraframme{position:relative;margin-block:var(--luft-blokk);
  container-type:inline-size;container-name:boliggraf}
.boligfigur{margin:0}
.boligfigur 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}
.boliggraf{display:block;width:100%;height:auto}
/* Utgangspunktet er den smale. Uten container query, for eksempel i en
   gammel nettleser, er det den som står — en litt liten graf er bedre enn
   en uleselig. */
.boliggraf--bred{display:none}
.boliggraf--smal{display:block;max-width:26rem;margin-inline:auto}
@container boliggraf (min-width:36rem){
  .boliggraf--bred{display:block}
  .boliggraf--smal{display:none}
}
.boliggraf .graf-treff{cursor:pointer}
.boliggraf:focus-visible{outline:2px solid var(--rust);outline-offset:4px}

/* Detaljvisningen ved peking og trykk. EGEN KOPI, ikke arv fra
   side-priser.css: den fila lastes ikke her.

   Uten disse reglene lager js/graf.js boksen som vanlig, men den er
   ustilt. Da faller den ut i tekstflyten under grafen og står som tre
   løse linjer brødtekst — «1. kvartal 2025 / 5,5 % ujustert / 2,7 %
   sesongjustert». Sett i nettleseren før den ble rettet. Feilen er
   usynlig i markupen, fordi markupen er riktig. */
.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. Egen kopi og ikke arv fra side-priser.css, som denne
   siden ikke laster. min-width:0 og overflow-wrap er nødvendig av samme
   grunn som der: teksten er en naken tekstnode i en flex-boks, altså et
   anonymt flex-element med min-width:auto, og «sesongjustert» stakk
   utenfor ved 200 % tekst på 320 px. */
.boligtegn{display:flex;flex-wrap:wrap;gap:0.75rem 1.25rem;margin-bottom:0.625rem}
.boligtegn span{display:inline-flex;align-items:center;gap:0.4375rem;min-width:0;
  overflow-wrap:anywhere;font-size:var(--tekst-sm);
  font-variation-settings:"wdth" 96,"wght" 600;color:var(--ink-2)}
.boligtegn span::before{content:"";flex:none;width:1.125rem;height:3px;border-radius:2px}
.boligtegn .tegn-ujustert::before{background:var(--spruce-2)}
.boligtegn .tegn-sesong::before{background:var(--rust-dim)}

/* ---------- tabellen ----------
   Fire kolonner med regionnavn som kan bli lange. min-width tvinger fram
   rulling i .tabellramme i stedet for å presse navnene sammen. */
.brod table.boligtabell{min-width:34rem}
.brod table.boligtabell .tall{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.brod table.boligtabell .opp{color:var(--opp)}
.brod table.boligtabell .ned{color:var(--ned)}