/* Selgerhjelp. Mobil først (390 px), store trykkflater, lys og mørk modus. */
:root {
  color-scheme: light dark;
  --bg: #f4f5f7;
  --kort: #ffffff;
  --tekst: #14181f;
  --dempet: #566070;
  --linje: #dde1e7;
  --aksent: #1d4ed8;
  --aksent-tekst: #ffffff;
  --aksent-svak: #e8eefc;
  --gul-bg: #fff4d6;
  --gul-kant: #d99a00;
  --gul-tekst: #5c3f00;
  --rod-bg: #fde8e8;
  --rod-kant: #c62828;
  --rod-tekst: #7a1212;
  --gronn: #1b7f3b;
  --gronn-bg: #e3f4e8;
  --lilla: #6b3fa0;
  --skygge: 0 1px 2px rgba(20, 24, 31, .06), 0 2px 8px rgba(20, 24, 31, .05);
  --radius: 16px;
  --nav-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1319; --kort: #1a2029; --tekst: #e8ecf2; --dempet: #a1acbb; --linje: #2d3644;
    --aksent: #7aa2ff; --aksent-tekst: #0b1220; --aksent-svak: #1b2742;
    --gul-bg: #3a2f10; --gul-kant: #e0a800; --gul-tekst: #ffe08a;
    --rod-bg: #3d1717; --rod-kant: #ff6b6b; --rod-tekst: #ffc9c9;
    --gronn: #5fd183; --gronn-bg: #16301f; --lilla: #c3a1f5; --skygge: none;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1319; --kort: #1a2029; --tekst: #e8ecf2; --dempet: #a1acbb; --linje: #2d3644;
  --aksent: #7aa2ff; --aksent-tekst: #0b1220; --aksent-svak: #1b2742;
  --gul-bg: #3a2f10; --gul-kant: #e0a800; --gul-tekst: #ffe08a;
  --rod-bg: #3d1717; --rod-kant: #ff6b6b; --rod-tekst: #ffc9c9;
  --gronn: #5fd183; --gronn-bg: #16301f; --lilla: #c3a1f5; --skygge: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 640px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; padding: 16px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
.laster { padding: 48px 16px; text-align: center; color: var(--dempet); }
a { color: inherit; text-decoration: none; }
h1 { font-size: 26px; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 13px; line-height: 1.2; margin: 24px 0 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--dempet); font-weight: 650; }
p { margin: 0 0 8px; }
.dempet { color: var(--dempet); }
.liten { font-size: 14px; }
:focus-visible { outline: 3px solid var(--aksent); outline-offset: 2px; }

/* Topp */
.topp { padding: calc(14px + env(safe-area-inset-top)) 16px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.topp .under { color: var(--dempet); font-size: 14px; }
.tilbake { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; color: var(--aksent); font-weight: 600; margin-left: -4px; }

/* Søk */
.sok { display: block; width: 100%; min-height: 56px; margin: 14px 0 0; padding: 0 18px; font: inherit; font-size: 18px;
  color: var(--tekst); background: var(--kort); border: 1.5px solid var(--linje); border-radius: 28px; box-shadow: var(--skygge); }
.sok::placeholder { color: var(--dempet); }
.sok:focus { border-color: var(--aksent); outline: none; box-shadow: 0 0 0 3px var(--aksent-svak); }

/* Knapper */
.knapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.knapp { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--kort); border: 1px solid var(--linje); box-shadow: var(--skygge); font: inherit; color: var(--tekst); text-align: left; cursor: pointer; }
.knapp b { font-size: 18px; }
.knapp small { color: var(--dempet); font-size: 13px; }
.knapp.hoved { grid-column: 1 / -1; background: var(--aksent); border-color: var(--aksent); color: var(--aksent-tekst); min-height: 72px; }
.knapp.hoved small { color: inherit; opacity: .85; }
.knapp[disabled] { opacity: .55; cursor: default; box-shadow: none; background: transparent; border-style: dashed; }
.knapp.liten-knapp { min-height: 56px; }

/* Kort og lister */
.kort { display: block; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--skygge); margin-bottom: 10px; }
a.kort:active { background: var(--aksent-svak); }
.kort-topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kort-navn { font-size: 20px; font-weight: 650; line-height: 1.2; }
.kort-linje { margin-top: 6px; color: var(--dempet); font-size: 15px; }
.pris { margin-top: 8px; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pris small { font-weight: 400; color: var(--dempet); font-size: 13px; }
.pris.dimmet { font-weight: 500; color: var(--dempet); }
.pris .streket { text-decoration: line-through; }
.kamp { margin-top: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }

/* Merkelapper */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; font-weight: 600;
  background: var(--aksent-svak); color: var(--aksent); white-space: nowrap; }
.chip.gul { background: var(--gul-bg); color: var(--gul-tekst); }
.chip.rod { background: var(--rod-bg); color: var(--rod-tekst); }
.chip.gronn { background: var(--gronn-bg); color: var(--gronn); }
.chip.noytral { background: transparent; border: 1px solid var(--linje); color: var(--dempet); }
a.chip { min-height: 40px; padding: 0 14px; font-size: 15px; }

/* Varsler */
.varsel { border-left: 5px solid var(--gul-kant); background: var(--gul-bg); color: var(--gul-tekst); border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 15px; }
.varsel.rod { border-color: var(--rod-kant); background: var(--rod-bg); color: var(--rod-tekst); }
.varsel.info { border-color: var(--aksent); background: var(--aksent-svak); color: var(--tekst); }
.varsel b { font-weight: 650; }
.varsel .handling { margin-top: 8px; }
.knapp-liten { min-height: 48px; padding: 0 18px; border-radius: 24px; border: 0; background: var(--aksent); color: var(--aksent-tekst); font: inherit; font-weight: 650; cursor: pointer; }
.knapp-liten.sekundaer { background: transparent; border: 1.5px solid var(--linje); color: var(--tekst); }
.knapp-liten[disabled] { opacity: .5; cursor: default; }

/* Dagens endringer */
.dagens { list-style: none; margin: 0; padding: 0; }
.dagens li { margin: 0; }

/* Datarader (innstillinger) */
.rad { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linje); min-height: 52px; }
.rad:last-child { border-bottom: 0; }
.rad .venstre { min-width: 0; }
.seg { display: inline-flex; border: 1.5px solid var(--linje); border-radius: 24px; overflow: hidden; }
.seg button { min-height: 44px; min-width: 64px; padding: 0 14px; border: 0; background: transparent; color: var(--tekst); font: inherit; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--aksent); color: var(--aksent-tekst); font-weight: 650; }
.bryter { position: relative; width: 56px; height: 32px; border-radius: 16px; background: var(--linje); flex: none; }
.bryter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--kort); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.bryter.paa { background: var(--aksent); }
.bryter.paa::after { left: 27px; }

/* Bunnmeny */
nav.bunn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center;
  background: color-mix(in srgb, var(--kort) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linje); padding-bottom: env(safe-area-inset-bottom); }
nav.bunn .indre { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 640px; }
nav.bunn a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--nav-h); font-size: 13px; color: var(--dempet); font-weight: 600; }
nav.bunn a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
nav.bunn a[aria-current="page"] { color: var(--aksent); }

.skjult { display: none !important; }
.tom { text-align: center; padding: 32px 8px; color: var(--dempet); }

/* ---------- Økt 2: modellkort, statusvisning, priser ---------- */
:root { --oransje-bg: #fff0e0; --oransje-kant: #d9650a; --oransje-tekst: #6b3000; --lilla-bg: #f0e8fb; --lilla-tekst: #5a2d91; --gra-bg: #eceff3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --oransje-bg: #3b2410; --oransje-kant: #ff9a4d; --oransje-tekst: #ffd8b8; --lilla-bg: #2e2142; --lilla-tekst: #d4b8fa; --gra-bg: #232b36; }
}
:root[data-theme="dark"] { --oransje-bg: #3b2410; --oransje-kant: #ff9a4d; --oransje-tekst: #ffd8b8; --lilla-bg: #2e2142; --lilla-tekst: #d4b8fa; --gra-bg: #232b36; }

.chip.oransje { background: var(--oransje-bg); color: var(--oransje-tekst); border: 1px solid var(--oransje-kant); }
.chip.lilla { background: var(--lilla-bg); color: var(--lilla-tekst); }
.streket { text-decoration: line-through; }
.dempet.streket, .pris-stor.dempet { opacity: .75; }

/* Priser på kortene i modelllisten: én linje per versjon */
.prisrad { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linje); }
.prisrad:first-of-type { border-top: 0; padding-top: 0; }
.prisrad .vnavn { font-size: 14px; color: var(--dempet); }
.prisrad .pris { margin-top: 0; font-size: 18px; }
.prisrad .chip { margin-top: 4px; white-space: normal; text-align: left; line-height: 1.25; padding: 3px 10px; }
.prisrad.ulenket .pris { font-size: 16px; font-weight: 500; }

/* Versjonsvelger */
.velger { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; }
.velger::-webkit-scrollbar { display: none; }
.velg { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 24px; border: 1.5px solid var(--linje); background: var(--kort); font-weight: 600; font-size: 15px; white-space: nowrap; }
.velg[aria-selected="true"] { background: var(--aksent); border-color: var(--aksent); color: var(--aksent-tekst); }
.enkeltversjon { margin-top: 12px; font-weight: 600; color: var(--dempet); }

/* Seksjoner */
details.seksjon { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--skygge); }
details.seksjon > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; font-size: 18px; font-weight: 650; cursor: pointer; list-style: none; }
details.seksjon > summary::-webkit-details-marker { display: none; }
details.seksjon > summary::after { content: "›"; font-size: 24px; color: var(--dempet); transition: transform .15s; margin-left: 6px; }
details.seksjon[open] > summary::after { transform: rotate(90deg); }
details.seksjon > summary .antall { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--dempet); }
.seksjon-innhold { padding: 0 16px 12px; }
details.gruppe { border-top: 1px solid var(--linje); }
details.gruppe > summary { display: flex; justify-content: space-between; gap: 8px; min-height: 48px; align-items: center; font-weight: 600; cursor: pointer; }
details.gruppe > summary .antall { font-size: 13px; font-weight: 500; color: var(--dempet); }

/* Ett felt */
.felt { padding: 12px 0; border-top: 1px solid var(--linje); }
.felt:first-child { border-top: 0; }
.felt-topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.felt .etikett { font-size: 14px; color: var(--dempet); font-weight: 600; }
.felt .verdi { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: anywhere; }
.felt .bet { font-size: 14px; font-weight: 500; color: var(--dempet); }
.verdi-blokk { margin-top: 2px; }
.verdi-blokk.sekundaer .verdi { font-size: 16px; font-weight: 500; color: var(--dempet); }
.felt.kompakt { padding: 9px 0; }
.felt.kompakt .verdi { font-size: 16px; }
.felt.kompakt .etikett { font-size: 16px; color: var(--tekst); font-weight: 500; }
.felt .hoyre { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.felt .hoyre small { font-weight: 400; color: var(--dempet); }
.melding { margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 15px; background: var(--gra-bg); border-left: 5px solid var(--dempet); }
.melding.oransje { background: var(--oransje-bg); color: var(--oransje-tekst); border-left-color: var(--oransje-kant); font-weight: 600; }
.melding.gul { background: var(--gul-bg); color: var(--gul-tekst); border-left-color: var(--gul-kant); font-weight: 600; }
.melding.gra { color: var(--tekst); }
.felt.uenig { border-left: 4px solid var(--oransje-kant); padding-left: 12px; margin-left: -16px; padding-right: 16px; margin-right: -16px; background: color-mix(in srgb, var(--oransje-bg) 55%, transparent); }
.felt.trolig_feil { border-left: 4px solid var(--gul-kant); padding-left: 12px; margin-left: -16px; padding-right: 16px; margin-right: -16px; background: color-mix(in srgb, var(--gul-bg) 55%, transparent); }
.trekant { color: var(--gul-kant); }
.uenig-linje { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--oransje-kant); }
.nedtonet { margin-top: 8px; font-size: 15px; color: var(--dempet); }
.merknad { font-size: 14px; color: var(--dempet); margin: 8px 0 0; }
.felt .verdi-blokk.manuell { border-left: 4px solid var(--lilla-tekst); padding-left: 10px; margin-top: 8px; }

/* Kilde og sitat */
details.kilde { margin-top: 4px; }
details.kilde > summary { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; color: var(--dempet); cursor: pointer; list-style: none; max-width: 100%; }
details.kilde > summary::-webkit-details-marker { display: none; }
details.kilde > summary::before { content: "▸ "; margin-right: 4px; }
details.kilde[open] > summary::before { content: "▾ "; }
details.kilde .k { margin: 4px 0 8px; padding: 8px 10px; background: var(--gra-bg); border-radius: 8px; }
details.kilde .ktittel { font-size: 13px; font-weight: 650; margin-bottom: 4px; }
details.kilde blockquote { margin: 0 0 6px; font-size: 14px; font-style: italic; overflow-wrap: anywhere; }
details.kilde blockquote .fil { display: block; font-style: normal; font-size: 12px; color: var(--dempet); margin-top: 2px; word-break: break-all; }

/* Pris */
.prisblokk { padding: 12px 0; border-top: 1px solid var(--linje); }
.prisblokk:first-child { border-top: 0; }
.pris-stor { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.pris-stor small { font-size: 14px; font-weight: 500; color: var(--dempet); }
.liten-blokk { font-size: 15px; }
.ulenket { padding: 12px 0; border-top: 1px solid var(--linje); }
.ulenket-rad { margin-top: 8px; }
.ulenket-rad.ubekreftet { color: var(--dempet); }
.aerlig .kort { padding-top: 4px; padding-bottom: 4px; }
.aerlig h2 { margin-top: 20px; }

/* Kampanjestempel (gyldig, utløpt, trolig utløpt) kan være lange og skal brytes, ikke gå ut av kortet */
.chip.stempel { white-space: normal; max-width: 100%; align-items: flex-start; line-height: 1.25; padding-top: 4px; padding-bottom: 4px; margin: 2px 0; }

/* ---------- Økt 3: ingen sidelengs overflyt (Android, 360–412 px, tekststørrelse opp til 130 %) ---------- */
/* Årsak: .felt.uenig og .felt.trolig_feil brukte -16 px marger og stakk utenfor boksen sin, og kildelinjene var inline-flex uten bryting. */
.felt.uenig, .felt.trolig_feil { margin-left: 0; margin-right: 0; padding-left: 12px; padding-right: 8px; border-radius: 8px; }
main, .kort, details.seksjon, details.gruppe, .seksjon-innhold, .felt, .felt-topp > *, .prisrad, .prisblokk, .ulenket-rad, .melding, .uenig-linje, .nedtonet, .merknad, .verdi-blokk, .k, .mangler-rad, .varsel, .rad .venstre { min-width: 0; overflow-wrap: anywhere; }
.felt-topp .chip, .felt-topp .hoyre { flex: none; max-width: 55%; }
.felt-topp .hoyre { text-align: right; overflow-wrap: anywhere; }
.chip { white-space: normal; max-width: 100%; text-align: left; line-height: 1.25; padding-top: 3px; padding-bottom: 3px; }
details.kilde { max-width: 100%; }
details.kilde > summary { display: block; max-width: 100%; overflow-wrap: anywhere; padding: 6px 0; min-height: 36px; }
details.gruppe > summary, details.seksjon > summary { overflow-wrap: anywhere; }
details.gruppe > summary > span:first-child, details.seksjon > summary > span:first-child { min-width: 0; flex: 1 1 auto; }
details.gruppe > summary .antall, details.seksjon > summary .antall { flex: none; text-align: right; max-width: 55%; }
#app { overflow-x: clip; }
img, svg, input { max-width: 100%; }

/* Mangler-lista: én rad per ukjent felt, uten grå bokser */
details.seksjon.mangler > summary { color: var(--dempet); }
.mangler-gruppe { margin-top: 10px; }
.mangler-tittel { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--dempet); margin-bottom: 2px; }
.mangler-rad { padding: 8px 0; border-top: 1px solid var(--linje); }
.mangler-rad .etikett { font-size: 15px; font-weight: 600; color: var(--tekst); }
.mangler-tekst { font-size: 15px; color: var(--dempet); }
.felt.stor .verdi { font-size: 26px; }

/* Svarkort, Ting å finne ut, Kampanjer */
.svarkort { padding-bottom: 6px; }
.kortsvar { margin-top: 10px; display: grid; gap: 10px; }
.kortsvar-rad { border-left: 4px solid var(--aksent); padding-left: 12px; }
.kortsvar-tekst { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kortsvar-tekst .bet { font-size: 15px; font-weight: 500; color: var(--dempet); }
.kortsvar-etikett { font-size: 14px; color: var(--dempet); }
.svar-detaljer { margin-top: 10px; border-top: 1px solid var(--linje); }
.svar-del h3 { font-size: 15px; margin: 14px 0 2px; color: var(--dempet); text-transform: uppercase; letter-spacing: .05em; }
.ikke-i-basen .melding { margin-top: 6px; }
.filtre { display: grid; gap: 8px; margin: 10px 0; }
.filter { display: grid; gap: 4px; font-size: 14px; color: var(--dempet); font-weight: 600; }
.filter select { min-height: 48px; font: inherit; font-size: 16px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--linje); background: var(--kort); color: var(--tekst); width: 100%; }
.ting.uenig { border-left: 5px solid var(--oransje-kant); }
.ting.trolig_feil { border-left: 5px solid var(--gul-kant); }
.ting-hva { margin: 8px 0; }
.kildeliste { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; color: var(--dempet); }
.ting.lokal { border-left: 5px solid var(--lilla-tekst); }
.kampanje.utlopt, .kampanje.trolig_utlopt { border-left: 5px solid var(--rod-kant); }
.kampanje.ukjent, .kampanje.ikke_startet { border-left: 5px solid var(--gul-kant); }
.kampanje.gyldig { border-left: 5px solid var(--gronn); }
a.knapp.liten-knapp { text-decoration: none; }

/* ---------- Økt 4: skjemaark, egne verdier, forhandlerlag ---------- */
.handlinger { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.liten-knapp2 { min-height: 44px; padding: 0 14px; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; text-align: center; }
a.knapp-liten, label.knapp-liten { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; max-width: 100%; text-align: center; }
.valgt-linje { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--lilla-bg); color: var(--lilla-tekst); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.kort-topp .chip { flex: none; white-space: nowrap; max-width: none; }
.kort-topp > div:first-child { min-width: 0; }
.lokal-kort .kort-navn { font-size: 18px; }
.lokal-pris { padding: 10px 0; border-top: 1px solid var(--linje); }
.lokal-pris:first-of-type { border-top: 0; }
.tom-liste { padding: 6px 0; }
.backup-boks .melding { margin-top: 10px; }
.ai-boks { background: var(--kort); border: 2px solid var(--oransje-kant); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.ai-topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 20px; }
.gratis-info { margin-top: 8px; }
.losning { margin-top: 8px; padding: 8px 10px; border-left: 4px solid var(--lilla-tekst); background: var(--lilla-bg); border-radius: 8px; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 30; max-width: 560px; margin: 0 auto; padding: 12px 16px; border-radius: 12px; background: var(--tekst); color: var(--bg); font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.3); }

/* Arket (skjemaene) */
body.ark-apen { overflow: hidden; }
.sk-bakgrunn { position: fixed; inset: 0; z-index: 50; background: rgba(10, 14, 20, .55); display: flex; align-items: flex-end; justify-content: center; }
.sk-ark { width: 100%; max-width: 640px; max-height: 94dvh; overflow-y: auto; overflow-x: hidden; background: var(--bg); color: var(--tekst); border-radius: 20px 20px 0 0; padding: 0 16px 0; -webkit-overflow-scrolling: touch; }
.sk-topp { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 10px; background: var(--bg); }
.sk-topp h2 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--tekst); overflow-wrap: anywhere; min-width: 0; }
.sk-lukk { flex: none; width: 48px; height: 48px; border-radius: 24px; border: 0; background: var(--kort); color: var(--tekst); font-size: 28px; cursor: pointer; }
.sk-ingress { margin: 0 0 12px; color: var(--dempet); font-size: 15px; overflow-wrap: anywhere; }
.sk-info { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--lilla-bg); color: var(--lilla-tekst); font-size: 15px; overflow-wrap: anywhere; }
.sk-felt { margin-bottom: 14px; min-width: 0; }
.sk-etikett { display: block; font-weight: 650; margin-bottom: 4px; font-size: 16px; overflow-wrap: anywhere; }
.sk-krav { color: var(--rod-kant); }
.sk-inn { display: block; width: 100%; min-height: 48px; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--tekst); background: var(--kort); border: 1.5px solid var(--linje); border-radius: 12px; }
textarea.sk-inn { min-height: 80px; resize: vertical; }
.sk-inn:focus { border-color: var(--aksent); outline: none; box-shadow: 0 0 0 3px var(--aksent-svak); }
.sk-inn:disabled { opacity: .5; }
.sk-med-suffiks { display: flex; align-items: center; gap: 8px; }
.sk-med-suffiks .sk-inn { flex: 1 1 auto; min-width: 0; }
.sk-suffiks { flex: none; color: var(--dempet); font-weight: 600; }
.sk-hint { margin-top: 4px; font-size: 13px; color: var(--dempet); overflow-wrap: anywhere; }
.sk-feil { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--rod-kant); overflow-wrap: anywhere; }
.sk-feil:empty { display: none; }
.sk-har-feil .sk-inn { border-color: var(--rod-kant); }
.sk-feiloppsummering { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--rod-bg); color: var(--rod-tekst); font-weight: 600; }
.sk-radiogruppe, .sk-avkr { display: grid; gap: 6px; }
.sk-radio { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1.5px solid var(--linje); border-radius: 12px; background: var(--kort); cursor: pointer; overflow-wrap: anywhere; }
.sk-radio input { flex: none; width: 22px; height: 22px; accent-color: var(--aksent); }
.sk-radio span { min-width: 0; }
.sk-knapper { display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--linje); }
.sk-knapper .knapp-liten { flex: 1 1 0; }
.sk-forhandsvis { margin-bottom: 12px; }