/* v3. Retningen står i skisser/side/MANUS.md: nøktern, presis, litt tørr. Rammen er stille; lys og farge finnes bare
   i hallen. Én nøytral stålskala, tre tekstroller, oransje som eneste aksent. Mona Sans til tekst, Martian Mono til tall. */

@font-face { font-family: "Mona Sans"; src: url(side/fonts/mona-sans-latin-standard-normal.woff2) format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mona Sans"; src: url(side/fonts/mona-sans-latin-ext-standard-normal.woff2) format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; src: url(side/fonts/martian-mono-latin-standard-normal.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; src: url(side/fonts/martian-mono-latin-ext-standard-normal.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --flate: #EEF0F2; --haar: rgba(20, 24, 30, 0.12);
  --tekst: #14171C; --tekst-2: #4B525D; --dempet: #7A828D;
  --rav: #F08A24; --rav-tekst: #B4570C; --is: #5B7CC4;
  --natt: #0B0F17; --natt-haar: rgba(150, 165, 190, 0.18); --natt-tekst: #E6E9EE; --natt-tekst-2: #C3C9D2; --natt-dempet: #8A93A3;
  --natt-rav: #F59A45; --andre-tekst: #4565B0; --krypto-tekst: #5E6570;
  --f-tekst: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-tall: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  --kant: max(20px, env(safe-area-inset-left, 0px));
  --kurve: cubic-bezier(0.25, 0.8, 0.25, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --flate: #121418; --haar: rgba(230, 233, 238, 0.12); --tekst: #E6E9EE; --tekst-2: #A9B0BB; --dempet: #7E8693; --rav-tekst: #F59A45; --andre-tekst: #8EA6DB; --krypto-tekst: #8E95A0; color-scheme: dark; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--flate); color: var(--tekst); font: 400 1rem/1.6 var(--f-tekst); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: var(--dempet); text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rav); outline-offset: 3px; }
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }

/* Topplinja hører til forsiden, så den er mørk som den. Høyden er fast, så forsiden kan fylle resten av skjermen. */
.topp { display: flex; justify-content: space-between; align-items: center; gap: 1rem; height: 60px; padding: 0 var(--kant); font-size: 0.86rem; background: var(--natt); color: var(--natt-dempet); border-bottom: 1px solid var(--natt-haar); }
.topp-navn { color: var(--natt-tekst); font-weight: 500; }

/* ---------- Historien ---------- */
.historie { position: relative; }
.scene { background: var(--natt); color: var(--natt-tekst); position: sticky; top: 0; height: 52vh; height: 52svh; z-index: 2; overflow: hidden; }
.scene-haller { position: absolute; inset: 0 0 58px 0; display: grid; grid-template-columns: minmax(0, 1fr); transform-origin: 100% 0; transition: transform 900ms var(--kurve); }
.hallflate { position: relative; min-width: 0; min-height: 0; transition: opacity 600ms var(--kurve); }
.hallflate canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hallflate.alu { display: none; }
.scene.med-alu .scene-haller { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.scene.med-alu .hallflate.alu { display: block; animation: inn 700ms var(--kurve); }
@keyframes inn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Aluminiumsverket alene (steg 5): datahallen viker, og verket får hele scenen. */
.scene.bare-alu .hallflate:not(.alu) { display: none; }
.scene.bare-alu .hallflate.alu { display: block; animation: inn 700ms var(--kurve); }
/* Under hallen: navnet på hallen og tegnforklaringen. Den står fast med scenen og viser bare fargene i bildet. */
.scene-fot { position: absolute; left: var(--kant); right: var(--kant); bottom: 10px; display: grid; gap: 6px; font-size: 0.78rem; color: var(--natt-dempet); transition: bottom 900ms var(--kurve); }
.scene-navn { margin: 0; display: flex; justify-content: space-between; gap: 12px; }
.scene-navn span span { font-family: var(--f-tall); font-size: 0.74rem; }
.scene .navn-alu { display: none; }
.scene.med-alu .navn-alu, .scene.bare-alu .navn-alu { display: inline; }
.scene.bare-alu .navn-dc { display: none; }
.forklaring { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.forklaring li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.forklaring i { width: 10px; height: 10px; border-radius: 1px; }
.forklaring [data-farge="egen"] { color: var(--natt-tekst); }
.forklaring [data-farge="egen"] i { background: #F08A24; }
.forklaring [data-farge="ute"] i { border: 1px dashed #F08A24; }
.forklaring [data-farge="andre"] i { background: #5B7CC4; }
.forklaring [data-farge="krypto"] i { background: #5E6570; }
.forklaring .skala { margin-left: auto; }

.steg-liste { position: relative; z-index: 1; }
.steg { min-height: 78vh; min-height: 78svh; padding: 36px var(--kant) 48px; display: flex; flex-direction: column; justify-content: center; gap: 18px; max-width: 34rem; transition: opacity 400ms var(--kurve); }
.steg:not(.aktiv) { opacity: 0.38; }
.steg p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--tekst-2); text-wrap: pretty; }
.steg h1 { font-size: clamp(2.4rem, 4.2vw + 0.8rem, 4.2rem); line-height: 1.02; font-stretch: 112.5%; letter-spacing: -0.02em; color: var(--tekst); }
.steg h2 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); line-height: 1.1; font-stretch: 105%; letter-spacing: -0.01em; }
.steg h2.aar { font: 300 clamp(2.4rem, 2vw + 1.6rem, 3.2rem)/1 var(--f-tall); font-stretch: 87.5%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* Scenarioene i 2035: tall som tekst, som fanene på forsiden. Det valgte har strek under. */
.scenarioer { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.scen-gruppe { display: flex; align-items: baseline; gap: 4px; border-bottom: 1px solid var(--haar); }
.scen-kilde { margin-right: 8px; font-size: 0.86rem; color: var(--dempet); }
.scen-enhet { margin-left: 6px; font: 400 0.74rem var(--f-tall); color: var(--dempet); }
.scenarioer button { position: relative; border: 0; background: none; padding: 6px 8px 8px; cursor: pointer; font: 400 1rem var(--f-tall); font-variant-numeric: tabular-nums; color: var(--tekst-2); }
.scenarioer button:hover, .scenarioer button[aria-pressed="true"] { color: var(--tekst); }
.scenarioer button[aria-pressed="true"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 2px; background: currentColor; }
.steg .scen-tekst { color: var(--tekst); }
.steg-side .utsagn { font-size: clamp(1.3rem, 0.8vw + 1rem, 1.6rem); line-height: 1.45; color: var(--tekst); }
.steg-slutt .slutt { font-size: clamp(1.3rem, 0.8vw + 1rem, 1.6rem); line-height: 1.45; color: var(--tekst); }
/* Fargene i hallen står i tegnforklaringen under den, og med samme farge i teksten. */
.steg .egen { color: var(--rav-tekst); font-weight: 500; }
.steg .andre { color: var(--andre-tekst); font-weight: 500; }
.steg .krypto { color: var(--krypto-tekst); font-weight: 500; }

/* Steg 1: forsiden. Mørk som scenen, så tekstspalten og hallen blir én flate. Øverst tre stemmer med navnene som
   faner og ett sitat om gangen: Støre, Micaelsen, Jóhannesson, og rundt igjen (styres i v3.js). Nederst spørsmålet. */
.steg.forside { max-width: none; justify-content: space-between; gap: 40px; padding-top: 28px; background: var(--natt); color: var(--natt-tekst); }
.steg.forside:not(.aktiv) { opacity: 1; }
.forside > * { transition: opacity 400ms var(--kurve); }
.forside:not(.aktiv) > * { opacity: 0.38; }
.stemmer { display: grid; gap: 12px; container-type: inline-size; }
.forside .stemmer-navn { margin: 0; font-size: 0.8rem; color: var(--natt-dempet); }
.faner { display: flex; gap: 22px; border-bottom: 1px solid var(--natt-haar); }
.fane { position: relative; border: 0; background: none; padding: 8px 0 9px; cursor: pointer; font-size: 0.9rem; white-space: nowrap; color: var(--natt-dempet); }
.fane:hover, .fane[aria-pressed="true"] { color: var(--natt-tekst); }
.fane .kort { display: none; }
@container (max-width: 440px) { .fane .lang { display: none; } .fane .kort { display: inline; } }
/* Streken under det valgte navnet vokser i takt med lesetiden mens sitatene går av seg selv, og står hel ellers. */
.fane[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; transform-origin: left; }
.stemmer.gaar .fane[aria-pressed="true"]::after { animation: lesetid var(--lesetid, 8s) linear both; }
@keyframes lesetid { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Alle tre sitatene ligger i samme rute, så det som står under, ikke flytter seg når de bytter. */
.stemmer-rute { display: grid; padding-top: 10px; }
.stemme { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 700ms ease-in; }
.stemme.vis { opacity: 1; transition: opacity 1000ms ease-out; }
.stemmer.valgt .stemme { transition: none; }
.stemme blockquote { margin: 0; }
.forside .stemme p { position: relative; margin: 0; font-size: clamp(1rem, 0.86rem + 0.28vw, 1.14rem); line-height: 1.42; color: var(--natt-tekst); max-width: 40ch; }
.stemme .hang { position: absolute; right: 100%; }
.stemme figcaption { margin-top: 10px; font-size: 0.8rem; color: var(--natt-dempet); }
.stemme time { font: 400 0.92em var(--f-tall); font-variant-numeric: tabular-nums; }
/* Navnet står i fanen. Her er det bare for skjermlesere, som leser alle tre sitatene etter hverandre. */
.stemme .hvem { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Spørsmålet er det største på siden. «vår del?» står på egen linje i oransje, som de oransje boksene i hallen. */
.forside-tekst { display: grid; gap: 18px; }
.forside .argumentet { font-size: 0.95rem; color: var(--natt-dempet); }
.forside h1 { font-size: clamp(3.1rem, 1.2rem + 9vw, 5.6rem); line-height: 0.92; font-stretch: 112.5%; letter-spacing: -0.03em; color: #fff; text-wrap: initial; }
.forside h1 .egen { display: block; color: var(--natt-rav); font-weight: 500; }
.forside .ingress { font-size: clamp(1.02rem, 0.9rem + 0.35vw, 1.16rem); line-height: 1.5; color: var(--natt-tekst-2); max-width: 38ch; }
/* Stjernen åpner forbeholdet under ingressen. */
.stjerne { position: relative; top: -0.4em; padding: 0 3px 0 1px; border: 0; background: none; cursor: pointer; font: 500 0.95em/1 var(--f-tekst); color: var(--natt-tekst); }
.stjerne::before { content: ""; position: absolute; inset: -12px -8px; }
.stjerne:hover, .stjerne[aria-expanded="true"] { color: var(--natt-rav); }
.forside .forbehold { margin: -6px 0 0; padding-left: 12px; border-left: 1px solid var(--natt-haar); font-size: 0.86rem; line-height: 1.5; color: var(--natt-dempet); max-width: 44ch; }
.forbehold a { color: var(--natt-tekst-2); }

@media (min-width: 960px) {
  .topp { padding: 0 clamp(24px, 4vw, 64px); }
  .historie { display: grid; grid-template-columns: minmax(340px, 36rem) minmax(0, 1fr); }
  /* Forsiden fyller skjermen under topplinja. Scenen står fast ved siden av den og alle stegene etter. */
  .scene { grid-column: 2; grid-row: 1 / 3; height: 100vh; height: 100svh; }
  .scene.med-alu .scene-haller { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .steg-liste { grid-column: 1; grid-row: 2; }
  .steg { min-height: 92vh; min-height: 92svh; padding: 48px clamp(24px, 4vw, 64px); }
  .steg.forside { grid-column: 1; grid-row: 1; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); padding-top: 32px; position: relative; z-index: 3; }
  /* Spørsmålet sprenger spalten og går nesten inn i hallen, som står mindre og høyere til man scroller videre.
     Størrelsen følger bredden på hallspalten, så første linje stopper før den stiplete boksen. */
  .forside h1 { width: max-content; font-size: min(calc(4.6vw + 24px), 8rem); }
  .scene.omslag .scene-haller { transform: scale(0.64); }
  /* På toppen av siden står scenen under topplinja, så de nederste 60 pikslene er under kanten av skjermen. */
  .scene.omslag .scene-fot { bottom: 70px; }
  .steg:last-child { min-height: 100vh; }
}

/* Regnestykket: en lapp fra strømregnskapet, lukket til man trykker. Det eneste klikkbare i historien. */
.regnestykke { align-self: flex-start; width: 100%; }
.regnestykke summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.92rem; color: var(--tekst-2); text-decoration: underline; text-decoration-color: var(--haar); text-underline-offset: 0.3em; }
.regnestykke summary::-webkit-details-marker { display: none; }
.regnestykke summary::after { content: "+"; font-family: var(--f-tall); font-size: 0.8rem; text-decoration: none; }
.regnestykke[open] summary::after { content: "−"; }
.regnestykke summary:hover { color: var(--tekst); text-decoration-color: currentColor; }
.kvittering { width: 100%; margin-top: 12px; border-collapse: collapse; font: 400 0.76rem/1.5 var(--f-tall); font-variant-numeric: tabular-nums; border-top: 1px solid var(--haar); border-bottom: 1px solid var(--haar); }
.kvittering td { padding: 5px 0; vertical-align: baseline; }
.kvittering .k-tekst { padding-right: 12px; color: var(--tekst-2); }
.kvittering .k-tall { text-align: right; white-space: nowrap; color: var(--tekst); }
.kvittering .k-kilde { padding-left: 14px; color: var(--dempet); font-size: 0.68rem; white-space: nowrap; }
.kvittering tr.sum td { border-top: 1px solid var(--haar); padding-bottom: 9px; }
.kvittering tr.sum .k-tekst, .kvittering tr.sum .k-tall { color: var(--tekst); font-weight: 500; }
.kvittering tr.merk td { color: var(--dempet); padding-top: 8px; font-family: var(--f-tekst); font-size: 0.8rem; }
@media (max-width: 520px) { .kvittering .k-kilde { display: none; } }

/* ---------- Regn selv ---------- */
.regn-selv { border-top: 1px solid var(--haar); padding: 56px var(--kant) 24px; max-width: 1280px; margin: 0 auto; }
.regn-selv > details > summary { list-style: none; cursor: pointer; display: grid; gap: 6px; }
.regn-selv > details > summary::-webkit-details-marker { display: none; }
.rs-tittel { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); font-weight: 500; font-stretch: 105%; }
.rs-tittel::after { content: " +"; font-family: var(--f-tall); font-weight: 300; color: var(--dempet); }
.regn-selv > details[open] .rs-tittel::after { content: " −"; }
.rs-under { color: var(--tekst-2); }
.rs-innhold { display: grid; gap: 0; margin-top: 32px; }
.rs-tilstand { padding: 0 0 18px; }
.rs-aar { margin: 0; display: flex; align-items: baseline; gap: 14px; }
#aarTall { font: 300 2.4rem/1 var(--f-tall); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
#aarTag { font-size: 0.86rem; color: var(--dempet); }
.rs-setning { margin: 10px 0; font-size: 1.3rem; line-height: 1.3; font-weight: 500; max-width: 30ch; }
.rs-tallrad { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 400 0.8rem/1.5 var(--f-tall); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.rs-tallrad b { font-weight: 500; color: var(--tekst); }
.rs-scene { position: relative; background: var(--natt); height: clamp(320px, 58vh, 620px); border-radius: 12px 12px 0 0; }
.rs-scene .hallflate { position: absolute; inset: 0; }
.reserve { position: absolute; inset: auto 16px 16px 16px; margin: 0; color: var(--natt-dempet); }
.rs-tid { background: var(--natt); color: var(--natt-tekst); border-radius: 0 0 12px 12px; padding: 8px 16px 12px; display: flex; gap: 14px; align-items: flex-start; }
.spill { flex: none; margin-top: 10px; cursor: pointer; font-size: 0.86rem; font-weight: 500; padding: 8px 16px; border-radius: 8px; background: var(--natt-tekst); color: var(--natt); border: 0; }
@media (max-width: 639px) { .rs-tid { flex-direction: column; gap: 4px; } }
.rs-valg { display: grid; gap: 40px 56px; padding-top: 40px; }
@media (min-width: 960px) { .rs-valg { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .rs-alle { grid-column: 1 / -1; } }
.rs-valg h3 { font-size: 1.15rem; margin-bottom: 8px; }
.rs-inn, .rs-alle > p, #scenHjelp { margin: 0 0 14px; color: var(--tekst-2); max-width: 60ch; }
#scenKnott { transition: opacity 300ms; }

/* De tre måtene: tekst med en strek i marginen for den valgte, ikke kort. */
.maater { display: grid; gap: 4px; }
.maate { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; text-align: left; padding: 10px 0 10px 16px; border: 0; border-left: 2px solid var(--haar); background: none; cursor: pointer; }
.maate:hover { border-left-color: var(--tekst-2); }
.maate[aria-pressed="true"] { border-left-color: var(--rav); }
.maate-navn { font-weight: 500; }
.maate-andel { font: 400 0.8rem var(--f-tall); color: var(--tekst-2); }
.maate[aria-pressed="true"] .maate-andel { color: var(--rav-tekst); }
.maate-tekst { grid-column: 1 / -1; font-size: 0.9rem; color: var(--tekst-2); max-width: 60ch; }
.maate:not([aria-pressed="true"]) .maate-tekst { display: none; }

/* Landlistene: faner som tekst, Norge i oransje, ingen bokser. */
.landliste { margin-top: 24px; }
.ll-hode { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; border-bottom: 1px solid var(--haar); }
.ll-faner { display: flex; flex-wrap: wrap; gap: 0 18px; }
.ll-faner button { border: 0; background: none; padding: 8px 0; cursor: pointer; font-size: 0.9rem; color: var(--tekst-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ll-faner button[aria-pressed="true"] { color: var(--tekst); border-bottom-color: var(--tekst); }
.ll-norge { margin: 0; font-size: 0.9rem; color: var(--tekst-2); }
.ll-norge b { color: var(--rav-tekst); font: 500 1rem/1 var(--f-tall); }
.ll-tittel { margin: 14px 0 6px; font-size: 0.82rem; color: var(--dempet); }
.ll-rader { list-style: none; margin: 0; padding: 0; display: grid; }
.ll-rad { display: grid; grid-template-columns: 2rem minmax(7rem, 12rem) minmax(0, 1fr) 4.6rem; align-items: center; gap: 12px; padding: 4px 0; font-size: 0.9rem; border-bottom: 1px solid var(--haar); }
.ll-nr { font: 400 0.74rem var(--f-tall); color: var(--dempet); text-align: right; }
.ll-navn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-rad.norge .ll-navn { color: var(--rav-tekst); font-weight: 500; }
.ll-strek { position: relative; height: 6px; }
.ll-strek i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--tekst) 22%, transparent); }
.ll-rad.norge .ll-strek i { background: var(--rav); }
.ll-strek b { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--tekst-2); }
.ll-verdi { font: 400 0.78rem var(--f-tall); text-align: right; font-variant-numeric: tabular-nums; }
.ll-hopp { color: var(--dempet); padding: 2px 0 2px 2.8rem; }
.ll-alle { margin-top: 12px; border: 0; background: none; padding: 0; cursor: pointer; font-size: 0.9rem; color: var(--tekst-2); text-decoration: underline; text-decoration-color: var(--haar); text-underline-offset: 0.3em; }
.ll-merk { margin: 10px 0 0; font-size: 0.85rem; color: var(--rav-tekst); }
.ll-kilde { margin: 12px 0 0; font-size: 0.78rem; color: var(--dempet); }
@media (max-width: 560px) { .ll-rad { grid-template-columns: 1.8rem minmax(0, 1fr) 4.2rem; } .ll-strek { grid-column: 2 / -1; grid-row: 2; } }

/* Alle 18 kombinasjonene: en liten tabell. */
.tabell-boks { overflow-x: auto; }
.alle18 { border-collapse: collapse; font-size: 0.86rem; min-width: 36rem; width: 100%; }
.alle18 th, .alle18 td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--haar); text-align: left; font-weight: 400; vertical-align: bottom; }
.alle18 thead th { color: var(--tekst-2); font-size: 0.8rem; }
.alle18 thead th span { display: block; font: 400 0.72rem var(--f-tall); color: var(--dempet); }
.alle18 tbody th { font-weight: 500; white-space: nowrap; }
.alle18 button { border: 0; background: none; padding: 0; cursor: pointer; font: 400 0.95rem var(--f-tall); font-variant-numeric: tabular-nums; }
.alle18 button:hover { text-decoration: underline; }
.alle18 button[aria-pressed="true"] { color: var(--rav-tekst); font-weight: 500; }

/* Tidslinjen ligger på natt, under hallen i «Regn selv». */
.tidslinje { flex: 1 1 auto; min-width: 0; width: 100%; display: block; overflow: visible; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.tl-linje { stroke: rgba(150, 165, 190, 0.12); }
.tl-akse, .tl-aar text, .tl-navn, .tl-kryss-tekst { font-family: var(--f-tall); font-size: 10px; fill: var(--natt-dempet); }
.tl-aar text { font-size: 11px; }
.tl-aar text.valgt { fill: var(--natt-tekst); font-weight: 600; }
.tl-skille { stroke: rgba(150, 165, 190, 0.4); stroke-dasharray: 2 3; }
.tl-bunnlinje { stroke: rgba(150, 165, 190, 0.35); }
.tl-flate-andre { fill: #5B7CC4; opacity: 0.14; }
.tl-flate-andre.fokus { opacity: 0.28; }
.tl-flate-ute { fill: var(--rav); opacity: 0.18; }
.tl-annen { fill: none; stroke: var(--natt-dempet); stroke-width: 1; opacity: 0.4; }
.tl-stiplet { stroke-dasharray: 3 3; }
.tl-huset { fill: none; stroke: #5B7CC4; stroke-width: 2.5; stroke-linejoin: round; }
.tl-anslag { stroke-dasharray: 6 5; }
.tl-brukt { fill: none; stroke: var(--rav); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.tl-huset.fokus { stroke-width: 4; }
.tl-brukt.fokus { stroke-width: 5.5; }
.tl-kryss { fill: var(--natt); stroke: var(--natt-tekst); stroke-width: 1.5; }
.tl-kryss-tekst { fill: var(--natt-tekst); }
.tl-ende { cursor: pointer; outline: none; }
.tl-treff { fill: transparent; }
.tl-prikk { fill: var(--natt); stroke: var(--natt-dempet); stroke-width: 1.5; }
.tl-ende.valgt .tl-prikk { fill: #5B7CC4; stroke: #5B7CC4; }
.tl-ende:focus-visible .tl-prikk { stroke: #fff; stroke-width: 3; }
.tl-ende.valgt .tl-navn { fill: #A9BDE6; font-weight: 600; }
.tl-leder { fill: none; stroke: rgba(150, 165, 190, 0.35); stroke-width: 0.75; }
.tl-leder.valgt { stroke: #A9BDE6; }
.tl-spiller line { stroke: var(--natt-tekst); stroke-width: 1; }
.tl-knott { fill: var(--natt-tekst); }
.tl-p-andre { fill: #5B7CC4; stroke: var(--natt); stroke-width: 2; }
.tl-p-egen { fill: var(--rav); stroke: var(--natt); stroke-width: 2; }

/* ---------- Om tallene og metoden ---------- */
.metode { max-width: 52rem; margin: 0 auto; padding: 64px var(--kant) 0; display: grid; gap: 8px; }
.om-tallene { display: grid; gap: 12px; padding-bottom: 24px; }
.om-tallene h2, .metode summary { font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); }
.om-tallene p { margin: 0; color: var(--tekst-2); max-width: 62ch; }
.metode details { border-top: 1px solid var(--haar); padding: 20px 0 8px; }
.metode summary { cursor: pointer; list-style: none; font-weight: 500; }
.metode summary::-webkit-details-marker { display: none; }
.metode summary::after { content: " +"; font-family: var(--f-tall); font-weight: 300; color: var(--dempet); }
.metode details[open] summary::after { content: " −"; }
.metode .innhold { display: grid; gap: 14px; padding: 16px 0 8px; font-size: 0.98rem; }
.metode .innhold p { margin: 0; max-width: 62ch; }
.metode .innhold ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; }
.metode h2 { font-size: 1.15rem; margin-top: 12px; }
.metode .tabell-boks { overflow-x: auto; }
.metode table { border-collapse: collapse; width: 100%; font-size: 0.86rem; min-width: 34rem; }
.metode th, .metode td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--haar); vertical-align: top; }
.metode th { font-weight: 500; color: var(--tekst-2); }
.metode td.tall { font: 400 0.8rem/1.5 var(--f-tall); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Typen tall som dempet tekst, ikke piller. */
.type { font-size: 0.8rem; color: var(--dempet); white-space: nowrap; }
.type.malt { color: var(--tekst-2); }
.type + .type::before { content: "· "; }

/* ---------- Mer om kraftsystemet ---------- */
.mer { max-width: 52rem; margin: 64px auto 0; padding: 0 var(--kant); }
.mer h2 { font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); margin-bottom: 20px; }
.innganger { display: grid; gap: 16px; }
@media (min-width: 640px) { .innganger { grid-template-columns: 1fr 1fr; } }
.inngang { display: grid; align-content: start; gap: 8px; padding: 20px 22px 24px; border-radius: 12px; background: var(--natt); color: var(--natt-tekst); text-decoration: none; box-shadow: inset 0 0 0 1px var(--natt-haar); transition: transform 300ms var(--kurve); }
.inngang:hover { transform: translateY(-2px); }
.inngang-adr { font: 400 0.74rem var(--f-tall); color: var(--natt-dempet); }
.inngang-tittel { font-size: clamp(1.2rem, 0.6vw + 1rem, 1.45rem); font-weight: 500; line-height: 1.15; font-stretch: 105%; text-wrap: balance; }
.inngang-tittel::after { content: " →"; color: var(--natt-dempet); transition: color 300ms; }
.inngang:hover .inngang-tittel::after { color: var(--natt-tekst); }
.inngang-tekst { font-size: 0.92rem; line-height: 1.5; color: var(--natt-tekst-2); }

.bunn { max-width: 52rem; margin: 64px auto 0; padding: 32px var(--kant) 72px; border-top: 1px solid var(--haar); display: grid; gap: 8px; font-size: 0.92rem; color: var(--tekst-2); }
.bunn p { margin: 0; }
.bunn .avsender { margin-top: 24px; color: var(--tekst); }
.parole-av { display: inline-block; color: inherit; text-decoration: none; }
.parole-av svg { display: block; height: 30px; width: auto; overflow: visible; }
.parole-av .stjerne { fill: #E34234; }
@media (prefers-color-scheme: dark) { .parole-av .stjerne { fill: #EC7564; } }
.parole-av:hover .stjerne, .parole-av:focus-visible .stjerne { fill: currentColor; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }