/* Kurve — komponentbiblioteket (BRAND-1b runde 2 → BRAND-1c runde 3). ÉN kilde for alle flater.

   Lastes ETTER merke.css (tokens + fonter, generert av bygg/plattform.py fra tokens.json).
   Fila er selvstendig: reset, typografi, layout og hver komponent. Ingen flate har egne stiler —
   finnes ikke komponenten, lages den her. Plattformen leser en generert kopi
   (web/statisk/komponenter.css, plattform.py --sjekk stryker ved drift).

   Hver regel som lukker et punkt i KRITIKK-SKJEMA.md har nummeret i kommentar (#1–#37).
   Ingen fargeverdi her — bare var(--…). Unntaket er lerretet i godkjenningen (#808080),
   dokumentert i ADR-0119. */

/* ===== 0. Reset og grunn =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--flate); color: var(--tekst);
  font-family: var(--skrift-ui); font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased; font-feature-settings: "kern", "liga", "calt";
}
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
[x-cloak] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; } }
.visuelt-skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hopp { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--primaer); color: var(--primaer-tekst); padding: 8px 12px; border-radius: 6px; }
.hopp:focus { left: 8px; }
/* #31: et ord som ikke får plass, brytes — det kuttes aldri. Gjelder all løpende tekst. */
p, li, td, th, dd, dt, label, legend, .felt-etikett, .flis-etikett { overflow-wrap: anywhere; }

/* ===== 1. Typografi (#3 #4 #5 #10) ================================================= */
.display-1 { font-family: var(--skrift-display); font-size: 64px; line-height: 64px; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.display-2 { font-family: var(--skrift-display); font-size: 48px; line-height: 50px; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.h1 { font-family: var(--skrift-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.h2 { font-family: var(--skrift-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.h3 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.h4 { font-size: 16px; line-height: 24px; font-weight: 600; }
.brod-stor { font-size: 18px; line-height: 28px; letter-spacing: -0.005em; }
.brod { font-size: 16px; line-height: 24px; }
.brod-liten { font-size: 14px; line-height: 20px; }
.bildetekst { font-size: 13px; line-height: 18px; color: var(--tekst-dempet); }
.etikett { font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--tekst-dempet); }
.dempet { color: var(--tekst-dempet); }
.sekundaer { color: var(--tekst-2); }
.lenke { color: var(--aksent-tekst); font-weight: 500; }
.lenke:hover { text-decoration: underline; text-underline-offset: 3px; }
.tall { font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; }
.tall-hero { font-family: var(--skrift-tall); font-size: 56px; line-height: 60px; letter-spacing: -0.02em; font-weight: 600; }
.tall-flis { font-family: var(--skrift-tall); font-size: 32px; line-height: 36px; letter-spacing: -0.02em; font-weight: 600; white-space: nowrap; }
.tall-kolonne { font-family: var(--skrift-tall); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.enhet { font-size: 14px; font-weight: 500; color: var(--tekst-2); margin-left: 0.2em; letter-spacing: 0; }
@media (max-width: 699px) {
  .display-1 { font-size: 40px; line-height: 42px; }
  .display-2 { font-size: 32px; line-height: 36px; }
  .h1 { font-size: 24px; line-height: 28px; }
  .tall-hero { font-size: 44px; line-height: 48px; }
}

/* ===== 2. Layout ==================================================================== */
.ramme { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 700px) { .ramme { padding-inline: 40px; } }
.stabel-8 > * + * { margin-top: 8px; }
.stabel-16 > * + * { margin-top: 16px; }
.stabel-24 > * + * { margin-top: 24px; }
.rad { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; min-width: 0; }
.rad > * { min-width: 0; }
.mellom { justify-content: space-between; }
.to-kol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1080px) { .to-kol { grid-template-columns: 1.4fr 1fr; } .to-kol--lik { grid-template-columns: 1fr 1fr; } }
.hårstrek, .haarstrek { border: 0; border-top: 1px solid var(--linje); margin: 0; }

/* ===== 3. Logo ====================================================================== */
.logo { display: inline-flex; align-items: center; height: var(--logo-hoyde, 22px); flex: none; }
.logo img { height: 100%; width: auto; }
.logo .mork { display: none; }
:root[data-modus="mork"] .logo .lys { display: none; }
:root[data-modus="mork"] .logo .mork { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="lys"]) .logo .lys { display: none; }
  :root:not([data-modus="lys"]) .logo .mork { display: block; }
}

/* ===== 4. Ikoner: 20-rutenett, strek 1,5, runde ender (#29) ========================= */
.ikon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ikon--16 { width: 16px; height: 16px; }
.ikon--24 { width: 24px; height: 24px; }
/* #33: ikon og tekst på samme linje deler midtlinje — flex + align-items: center, aldri baseline. */
.ikon-tekst { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ikon-tekst > span { min-width: 0; }

/* ===== 5. Knapper (#7 #17 #18 #19 #20 #22) ========================================== */
.knapp {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid transparent;
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--bev-rask), border-color var(--bev-rask), color var(--bev-rask), box-shadow var(--bev-rask);
}
.knapp .ikon { width: 16px; height: 16px; }
.knapp:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.knapp--primaer { background: var(--primaer); color: var(--primaer-tekst); border-color: var(--primaer); }
.knapp--primaer:hover { background: var(--primaer-hover); border-color: var(--primaer-hover); }
.knapp--primaer:active, .knapp--primaer.er-aktiv { background: color-mix(in srgb, var(--primaer-hover) 84%, var(--tekst)); border-color: transparent; }
/* Sekundær: hårstrek + flate, som Vercel/Klaviyo. 3:1-kanten er forbeholdt inndata (#14). */
.knapp--sekundaer { background: var(--flate); color: var(--tekst); border-color: var(--linje); }
.knapp--sekundaer:hover { background: var(--flate-2); border-color: var(--linje-sterk); }
.knapp--sekundaer:active, .knapp--sekundaer.er-aktiv { background: var(--flate-3); border-color: var(--linje-sterk); }
.knapp--stille { background: transparent; color: var(--tekst-2); }
.knapp--stille:hover { background: var(--flate-2); color: var(--tekst); }
.knapp--stille:active, .knapp--stille.er-aktiv { background: var(--flate-3); color: var(--tekst); }
.knapp--fare { background: var(--feil); color: var(--feil-knapp-tekst); border-color: var(--feil); }
.knapp--fare:hover { background: color-mix(in srgb, var(--feil) 90%, var(--tekst)); }
.knapp--fare:active, .knapp--fare.er-aktiv { background: color-mix(in srgb, var(--feil) 80%, var(--tekst)); }
.knapp--ok { background: var(--ok); color: var(--ok-knapp-tekst); border-color: var(--ok); }
.knapp--ok:hover { background: color-mix(in srgb, var(--ok) 90%, var(--tekst)); }
.knapp--lenke { background: none; color: var(--aksent-tekst); padding: 0 4px; min-height: 24px; }
.knapp--lenke:hover { text-decoration: underline; text-underline-offset: 3px; }
.knapp--liten { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 6px; }
.knapp--stor { min-height: 44px; padding: 0 20px; font-size: 16px; line-height: 24px; border-radius: 8px; }
.knapp--hero { min-height: 48px; padding: 0 24px; font-size: 16px; line-height: 24px; border-radius: 8px; }
.knapp--bred { width: 100%; }
.knapp--ikon { padding: 0; width: 36px; }
.knapp--ikon.knapp--liten { width: 32px; }
.knapp--ikon .ikon { width: 20px; height: 20px; }
.knapp:disabled, .knapp.er-deaktivert, .knapp[aria-disabled="true"] { cursor: not-allowed; background: var(--flate-3); color: var(--tekst-dempet); border-color: transparent; box-shadow: none; }
.knapp.laster { color: transparent !important; pointer-events: none; }
.knapp.laster::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; color: var(--primaer-tekst); animation: snurr 720ms linear infinite; }
.knapp--sekundaer.laster::after, .knapp--stille.laster::after { color: var(--tekst-2); }
@keyframes snurr { to { transform: rotate(360deg); } }
@media (max-width: 699px) {
  .knapp { min-height: 44px; padding: 0 16px; border-radius: 8px; }         /* trykkflate ≥ 44 (#17) */
  .knapp--liten { min-height: 36px; padding: 0 12px; border-radius: 6px; }
  .knapp--ikon { width: 44px; }
  .knapp--ikon.knapp--liten { width: 36px; }
  .knapp--lenke { min-height: 44px; }
}
.knapperad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knapperad--hoyre { justify-content: flex-end; }

/* ===== 6. Inndata (#14 #21) ========================================================= */
.felt { display: grid; gap: 6px; min-width: 0; align-content: start; }
.felt > label, .felt-etikett { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--tekst-2); }
.felt-etikett .valgfri { font-weight: 400; color: var(--tekst-dempet); }
.inndata, .velg, .tekstfelt {
  width: 100%; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-size: 14px; line-height: 20px;
  color: var(--tekst); background: var(--flate); border: 1px solid var(--linje-sterk); outline: none; min-width: 0;
  transition: border-color var(--bev-rask), box-shadow var(--bev-rask), background var(--bev-rask);
}
.inndata::placeholder, .tekstfelt::placeholder { color: var(--tekst-dempet); opacity: 1; }
.inndata:hover, .velg:hover, .tekstfelt:hover { border-color: var(--tekst-dempet); }
.inndata:focus-visible, .velg:focus-visible, .tekstfelt:focus-visible, .er-fokus { border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent); outline: none; }
.inndata:disabled, .velg:disabled, .tekstfelt:disabled, .inndata[readonly] { background: var(--flate-2); color: var(--tekst-dempet); border-color: var(--linje); cursor: not-allowed; }
.inndata[readonly] { cursor: default; color: var(--tekst-2); }
.felt.har-feil .inndata, .felt.har-feil .velg, .felt.har-feil .tekstfelt { border-color: var(--feil); }
.felt.har-feil .inndata:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--feil) 20%, transparent); }
.felt-hjelp { font-size: 12px; line-height: 16px; color: var(--tekst-dempet); }
/* #32 inline-feil: ikon i full farge, teksten i tekstfargen. */
.felt.har-feil .felt-hjelp, .felt-feil { color: var(--tekst); display: flex; gap: 4px; align-items: center; font-size: 12px; line-height: 16px; }
.felt.har-feil .felt-hjelp .ikon, .felt-feil .ikon { width: 14px; height: 14px; color: var(--feil); }
.tekstfelt { min-height: 96px; padding: 8px 12px; resize: vertical; }
.inndata--stor { min-height: 44px; font-size: 16px; line-height: 24px; border-radius: 8px; }
.inndata--liten { min-height: 32px; font-size: 13px; }
.inndata-hylse { position: relative; display: flex; align-items: center; min-width: 0; }
.inndata-hylse .ikon { position: absolute; left: 10px; color: var(--tekst-dempet); pointer-events: none; }
.inndata-hylse .ikon + .inndata { padding-left: 36px; }
.inndata-hylse .suffiks { position: absolute; right: 12px; font-size: 13px; color: var(--tekst-dempet); font-family: var(--skrift-tall); pointer-events: none; }
.inndata-hylse .suffiks ~ .inndata { padding-right: 40px; }
.inndata.tall { text-align: right; font-variant-numeric: tabular-nums; }
.velg-hylse { position: relative; }
.velg { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.velg-hylse > .ikon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tekst-dempet); pointer-events: none; }
@media (max-width: 699px) { .inndata, .velg { min-height: 44px; font-size: 16px; line-height: 24px; border-radius: 8px; } .tekstfelt { font-size: 16px; line-height: 24px; border-radius: 8px; } }
.skjema-rutenett { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .skjema-rutenett { grid-template-columns: 1fr 1fr; } .skjema-rutenett > .felt--bred, .skjema-rutenett > .felt:first-child { grid-column: 1 / -1; } }
.skjema-valg { display: grid; gap: 10px; }

/* checkbox, radio, bryter */
.avkryss, .radio, .bryter { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; cursor: pointer; color: var(--tekst); min-width: 0; }
.avkryss input, .radio input, .bryter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.avkryss .boks, .radio .boks { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; border: 1px solid var(--linje-sterk); background: var(--flate); display: grid; place-items: center; transition: background var(--bev-rask), border-color var(--bev-rask), box-shadow var(--bev-rask); }
.radio .boks { border-radius: 50%; }
.avkryss .boks .ikon { width: 12px; height: 12px; stroke-width: 2.2; color: var(--primaer-tekst); opacity: 0; }
.radio .boks::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primaer-tekst); opacity: 0; }
.avkryss:hover .boks, .radio:hover .boks { border-color: var(--tekst-dempet); }
.avkryss input:checked + .boks, .radio input:checked + .boks, .boks.er-valgt { background: var(--primaer); border-color: var(--primaer); }
.avkryss input:checked + .boks .ikon, .boks.er-valgt .ikon, .radio input:checked + .boks::after, .radio .boks.er-valgt::after { opacity: 1; }
.avkryss .boks.er-delvis { background: var(--primaer); border-color: var(--primaer); }
.avkryss .boks.er-delvis::after { content: ""; width: 10px; height: 2px; background: var(--primaer-tekst); border-radius: 1px; }
.avkryss input:focus-visible + .boks, .radio input:focus-visible + .boks, .boks.er-fokus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent); border-color: var(--fokus); }
.avkryss input:disabled + .boks, .radio input:disabled + .boks, .boks.er-deaktivert { background: var(--flate-2); border-color: var(--linje); }
.avkryss.er-deaktivert, .radio.er-deaktivert, .bryter.er-deaktivert { color: var(--tekst-dempet); cursor: not-allowed; }
.avkryss small, .radio small { display: block; font-size: 12px; line-height: 16px; color: var(--tekst-dempet); }
/* Bryteren og radioen er runde former (halv høyde / sirkel), ikke hjørneradier på skalaen (#28). */
.bryter .spor { flex: 0 0 auto; width: 32px; height: 18px; margin-top: 1px; border-radius: 9px; background: var(--linje-sterk); position: relative; transition: background var(--bev-normal); }
.bryter .spor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--flate); transition: transform var(--bev-normal); box-shadow: 0 1px 2px color-mix(in srgb, var(--tekst) 20%, transparent); }
.bryter input:checked + .spor, .spor.er-valgt { background: var(--primaer); }
.bryter input:checked + .spor::after, .spor.er-valgt::after { transform: translateX(14px); background: var(--primaer-tekst); }
.bryter input:focus-visible + .spor, .spor.er-fokus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent); }
.bryter input:disabled + .spor, .spor.er-deaktivert { background: var(--flate-3); }
@media (max-width: 699px) { .avkryss, .radio, .bryter { min-height: 44px; align-items: center; } }
/* Valgknapper (skjemaets radio/checkbox som trykkflater): hårstrek, valgt = aksent-tint + kant i full farge (#32). */
.valgrad { display: flex; flex-wrap: wrap; gap: 8px; }
.valgrad .valg { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linje); border-radius: 8px; background: var(--flate); cursor: pointer; font-size: 14px; line-height: 20px; min-width: 0; }
.valgrad .valg:hover { border-color: var(--linje-sterk); }
.valgrad .valg:has(input:checked), .valgrad .valg.er-valgt { background: var(--aksent-flate); border-color: var(--aksent); }
.valgrad .valg:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent); }
.valgrad .valg input { accent-color: var(--primaer); margin: 0; flex: none; width: 16px; height: 16px; }
.valgrad--skala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.valgrad--skala .valg { flex: none; justify-content: center; padding: 10px 0; }
.valgrad--skala .valg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.valgrad--skala .valg { position: relative; font-family: var(--skrift-tall); font-weight: 500; }
fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }   /* 🔴 MÅLT 15.09.2026: fieldset krympet ikke under fem skalaknapper på 375 */
legend { padding: 0; }

/* ===== 7. Chips og tellemerker (#9 #15 #32 #33) ===================================== */
/* #32: flaten er en lys tint, kanten og prikken i full farge, teksten i tekstfargen. Mettet flate bare på knapper. */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--linje); background: var(--flate-3); color: var(--tekst); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; max-width: 100%; }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tekst-dempet); flex: none; }
.chip--ok { background: var(--ok-flate); border-color: var(--ok); }
.chip--ok::before { background: var(--ok); }
.chip--advarsel { background: var(--advarsel-flate); border-color: var(--advarsel); }
.chip--advarsel::before { background: var(--advarsel); }
.chip--feil { background: var(--feil-flate); border-color: var(--feil); }
.chip--feil::before { background: var(--feil); }
.chip--aksent { background: var(--aksent-flate); border-color: var(--aksent); }
.chip--aksent::before { background: var(--aksent); }
.chip--stor { height: 24px; padding: 0 9px; font-size: 13px; line-height: 20px; }
.chip--uten { padding-left: 7px; }
.chip--uten::before { display: none; }
.chip--tall { font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; }
/* #33: tall i boble — inline-grid sentrerer glyfboksen, ikke linjeboksen; minst 20 px; tabulære tall. */
.merke-tall { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--primaer); color: var(--primaer-tekst); font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1; font-weight: 600; flex: none; }
.merke-tall--stor { min-width: 28px; height: 28px; font-size: 14px; border-radius: 8px; padding: 0 8px; }
.merke-tall--dempet { background: var(--flate-3); color: var(--tekst-2); }

/* ===== 8. Kort, KPI-flis, sparkline (#1 #26 #27 #34) ================================= */
.kort { background: var(--flate); border: 1px solid var(--linje); border-radius: 12px; box-shadow: none; padding: 20px; min-width: 0; }
.kort--hevet { box-shadow: var(--skygge-kort); }
.kort--tett { padding: 16px; }
.kort--uten { padding: 0; overflow: hidden; }
.kort--stiplet { border-style: dashed; border-color: var(--linje-sterk); background: transparent; }
.kort-topp { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-width: 0; }
.kort-topp .h3, .kort-topp .h4 { flex: 1 1 auto; min-width: 0; }
.kort-topp .meta { font-size: 13px; line-height: 20px; color: var(--tekst-dempet); white-space: nowrap; }
.kort--uten .kort-topp { padding: 16px 20px 0; }
.kort-bunn { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linje); font-size: 13px; line-height: 20px; color: var(--tekst-dempet); }
.kort--klikkbar { cursor: pointer; transition: border-color var(--bev-rask), background var(--bev-rask); }
.kort--klikkbar:hover { border-color: var(--linje-sterk); }
.kort--valgt { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer) inset; }
.kort-rad { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .kort-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .kort-rad--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 699px) { .kort:not(.kort--uten) { padding: 16px; } }   /* PR1-11 F-1: .kort--uten beholder 0 på mobil, ellers dobbel polstring rundt kortlista */

.kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1080px) { .kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.flis { padding: 16px 20px; display: grid; align-content: start; gap: 0; }
.flis .flis-etikett { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--tekst-2); min-height: 20px; }
.flis .flis-verdi { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.flis .delta { font-family: var(--skrift-tall); font-size: 13px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta--opp { color: var(--ok-tekst); }
.delta--ned { color: var(--feil-tekst); }
.delta--flat { color: var(--tekst-dempet); }
.flis .kilde { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--tekst-dempet); }
.flis--tom .tall-flis { color: var(--tekst-dempet); font-size: 24px; }
.kpi-kilde { font-size: 12px; line-height: 16px; color: var(--tekst-dempet); margin-top: 8px; }
.sparkline { display: block; width: 100%; height: 24px; margin-top: 8px; }
.sparkline path { fill: none; stroke: var(--diagram-serie); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* #34 mobil: to kolonner, tallet er ikke mindre enn på skrivebordet (var 26 px), etiketten får to linjer så tallene står på linje. */
@media (max-width: 699px) {
  .flis { padding: 14px 14px 12px; }
  .flis .flis-etikett { min-height: 40px; }
  .flis .tall-flis { font-size: 30px; line-height: 34px; letter-spacing: -0.03em; }
  .flis .flis-verdi { gap: 6px; }
  .flis .delta { flex-basis: 100%; }   /* deltaet på egen linje: like fliser, aldri to former i samme rad */
}

/* ===== 9. Tabell (#8 #23 #24 #25) og kortliste (#34) ================================= */
.tabell { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tabell th { text-align: left; font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tekst-2); height: 40px; padding: 0 12px; border-bottom: 1px solid var(--linje); white-space: nowrap; }
.tabell td { height: 44px; padding: 10px 12px; border-bottom: 1px solid var(--linje); vertical-align: middle; white-space: nowrap; }   /* én linje = 44, to linjer = 56 (#23) */
.tabell .num { text-align: right; white-space: nowrap; font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; font-weight: 500; }
.tabell th.num { text-align: right; }
.tabell tbody tr:hover td { background: var(--flate-2); }
.tabell td .rad-hode { display: flex; align-items: center; gap: 8px; height: 20px; }   /* chip i raden gir ikke en halv piksel (#23) */
.tabell th:first-child, .tabell td:first-child { padding-left: 20px; }
.tabell th:last-child, .tabell td:last-child { padding-right: 20px; }
.tabell tbody tr:last-child td { border-bottom: 0; }
.tabell .chip { vertical-align: middle; }
.tabell td .rad-tittel { font-weight: 500; color: var(--tekst); }
.tabell td .rad-under { display: block; font-size: 12px; line-height: 16px; color: var(--tekst-dempet); }
.tabell td.sekundaer { color: var(--tekst-2); }
.tabell tr.er-valgt td, .tabell tr.er-valgt:hover td { background: var(--aksent-flate); }
.tabell th.sorterbar { cursor: pointer; user-select: none; }
.tabell th.sorterbar > span { display: inline-flex; align-items: center; gap: 4px; }
.tabell th.sorterbar .ikon { width: 14px; height: 14px; opacity: 0; transition: opacity var(--bev-rask); }
.tabell th.sorterbar:hover .ikon { opacity: 0.6; }
.tabell th.sortert { color: var(--tekst); }
.tabell th.sortert .ikon { opacity: 1; }
.tabell th.sortert.stigende .ikon { transform: rotate(180deg); }
.tabell th.num > span { justify-content: flex-end; }
.tabell-hylse { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabell-tom { padding: 48px 24px; text-align: center; display: grid; justify-items: center; gap: 4px; }
.tabell-tom > .ikon { color: var(--tekst-dempet); margin-bottom: 8px; width: 24px; height: 24px; }
.tabell-tom .tittel { font-size: 14px; line-height: 20px; font-weight: 500; }
.tabell-tom p { font-size: 13px; line-height: 20px; color: var(--tekst-dempet); max-width: 320px; }
.tabell-tom .knapp { margin-top: 12px; }
.tabell-bunn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--linje); font-size: 13px; line-height: 20px; color: var(--tekst-dempet); flex-wrap: wrap; }
.tabell-bunn .tall { font-variant-numeric: tabular-nums; }
.tabell-bunn .knapperad { flex-wrap: nowrap; white-space: nowrap; }
.tabell-verktoy { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--linje); flex-wrap: wrap; }
.tabell-verktoy .inndata-hylse { flex: 1 1 200px; max-width: 320px; }
/* #34: samme rader som kort på mobil. Tabellen finnes fra 700 px, kortlista under. Samme informasjon, annen form. */
.kortliste { display: grid; gap: 0; }
.kortliste-rad { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--linje); }
.kortliste-rad:first-child { border-top: 0; }
.kortliste-rad .rad-hode { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kortliste-rad .rad-tittel { font-weight: 500; font-size: 14px; line-height: 20px; min-width: 0; }
.kortliste-rad .rad-under { font-size: 12px; line-height: 16px; color: var(--tekst-dempet); }
.kortliste-tall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.kortliste-tall > div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; }   /* 14/20 dominerer også på mobil (#1) */
.kortliste-tall > div span:first-child { color: var(--tekst-dempet); }
.kortliste-tall > .hel { grid-column: 1 / -1; }   /* PR1-11: en lang etikett med beløp får hele raden */
.kortliste-tall > div span:last-child { font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
@media (max-width: 699px) { .tabell-hylse--kort { display: none; } }
@media (min-width: 700px) { .kortliste { display: none; } }

/* ===== 10. Diagram (#2) ============================================================= */
.diagram-ramme { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 0 8px; min-width: 0; }
.diagram-ramme .y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 12px; line-height: 12px; color: var(--tekst-dempet); font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; }
.diagram-ramme .x { grid-column: 2; display: grid; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--tekst-dempet); font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; }
.diagram-ramme .x span { text-align: center; overflow: hidden; }
.diagram-ramme .tegning { grid-column: 2; grid-row: 1; width: 100%; height: 180px; display: block; overflow: visible; }
.diagram-ramme .tegning .rutenett { stroke: var(--diagram-rutenett); stroke-width: 1; vector-effect: non-scaling-stroke; }
.diagram-ramme .tegning .akse { stroke: var(--linje); stroke-width: 1; vector-effect: non-scaling-stroke; }
.diagram-ramme .tegning .stolpe { fill: var(--diagram-serie); }
.diagram-ramme .tegning .stolpe.umoden { fill: var(--diagram-umoden); }
.diagram-ramme .tegning .linje { fill: none; stroke: var(--diagram-serie); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.diagram-ramme .tegning .linje.umoden { stroke: var(--diagram-umoden); }
.diagram-ramme .tegning .punkt { fill: var(--flate); stroke: var(--diagram-serie); stroke-width: 2; vector-effect: non-scaling-stroke; }
.diagram-ramme .tegning .flate-under { fill: var(--diagram-serie); opacity: 0.06; }
.diagram-verdi { position: relative; min-width: 0; }
.diagram-verdi .merke { position: absolute; transform: translate(-50%, -100%); font-size: 12px; line-height: 16px; font-weight: 600; font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; color: var(--tekst); background: var(--flate); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.diagram-verdi .prikk { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--flate); border: 2px solid var(--diagram-serie); transform: translate(-50%, -50%); }
.diagram-tekst { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--tekst-dempet); }
.diagram-forklaring { display: flex; gap: 16px; font-size: 12px; line-height: 16px; color: var(--tekst-dempet); flex-wrap: wrap; }
.diagram-forklaring span { display: inline-flex; align-items: center; gap: 6px; }
.diagram-forklaring i { width: 10px; height: 10px; border-radius: 2px; background: var(--diagram-serie); }
.diagram-forklaring i.umoden { background: var(--diagram-umoden); }
.diagram-forklaring i.strek { height: 2px; width: 14px; border-radius: 1px; }
@media (max-width: 699px) { .diagram-ramme .tegning { height: 140px; } .diagram-ramme .x span:nth-child(even) { visibility: hidden; } }

/* ===== 10b. Tall: to stolper per uke, fjoråret som skygge, minigraf (PR1-11) =========== */
/* Geometrien (x, y, bredde, høyde) står i SVG-en, regnet ut av tallene i app/tall.py. Her står bare
   farge og rutenett. En uke uten tall har ingen stolpe og ingen prosent — aldri en stolpe på 0. */
.stolper { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; min-width: 0; }
.stolper-andeler, .stolper-x { grid-column: 2; display: grid; grid-template-columns: repeat(var(--uker, 13), minmax(0, 1fr)); font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; text-align: center; }
.stolper-andeler { grid-row: 1; margin-bottom: 6px; font-weight: 600; color: var(--tekst); }
.stolper-andeler .umoden { color: var(--tekst-dempet); }
.stolper-andeler .mangler { color: var(--tekst-dempet); font-weight: 500; }
.stolper-y { grid-column: 1; grid-row: 2; height: 160px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 12px; color: var(--tekst-dempet); }
.stolper-tegning { grid-column: 2; grid-row: 2; display: block; width: 100%; height: 160px; overflow: visible; }
.stolper-tegning .rutenett { stroke: var(--diagram-rutenett); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stolper-tegning .akse { stroke: var(--linje); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stolper-tegning .skygge { fill: var(--diagram-fjor); }
.stolper-tegning .stolpe-total { fill: var(--diagram-total); }
.stolper-tegning .stolpe { fill: var(--diagram-serie); }
.stolper-tegning .stolpe.umoden { fill: var(--diagram-umoden); }
.stolper-tegning .stolpe-total.umoden { fill-opacity: 0.5; }
.stolper-tegning .mangler { stroke: var(--linje-sterk); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.stolper-x { grid-row: 3; margin-top: 8px; color: var(--tekst-dempet); white-space: nowrap; }
.stolper-x .mangler { text-decoration: line-through; }
.diagram-forklaring i.total { background: var(--diagram-total); }
.diagram-forklaring i.skygge { background: var(--diagram-fjor); border: 1px solid var(--linje); }
.diagram-forklaring i.mangler { height: 0; width: 14px; border-radius: 0; background: none; border-top: 1.5px dashed var(--linje-sterk); }
@media (max-width: 699px) {
  .stolper-andeler { display: none; }          /* #34: 13 prosenttall får ikke plass; hovedtallet står over */
  .stolper-y, .stolper-tegning { height: 132px; }
  .stolper-x > :nth-child(even) { visibility: hidden; }
  .stolper-x > :nth-child(odd) { margin-inline: -10px; }   /* #31: «u26» (23 px) får låne plass av den skjulte naboen, 13 kolonner er 19 px på 375 */
}

/* Hovedtallet over diagrammet, og det samme mønsteret på Oversikten. */
.hovedtall { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
.hovedtall .tall-hero { color: var(--tekst); }
.hovedtall .etikett-tekst { font-size: 14px; line-height: 20px; color: var(--tekst-2); }
.merknad { font-size: 13px; line-height: 20px; color: var(--tekst-dempet); }
.merknad--umoden::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--diagram-umoden); vertical-align: 0; }

/* To tall side om side: nå mot i fjor / før oss. */
.tallpar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.tallpar > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 8px; background: var(--flate-2); min-width: 0; }
.tallpar .etikett-tekst { font-size: 13px; line-height: 20px; color: var(--tekst-2); }
.tallpar .tall-flis { font-size: 28px; line-height: 32px; }
.faktor { font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; color: var(--tekst); }

/* Innsiktskort: hva vi så, hva vi gjør. Tre side om side fra 1080, stablet under. */
.kort-rad--3 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) { .kort-rad--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.innsikt { display: grid; align-content: start; gap: 8px; }
.innsikt .handling { display: flex; gap: 8px; align-items: flex-start; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--linje); font-size: 14px; line-height: 20px; color: var(--tekst); }
.innsikt .handling .ikon { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--aksent); }

/* Oversikten: andelen denne uka med minigraf, som lenke til Tall. */
.andel-kort { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: end; }
.andel-kort { align-content: start; }
.andel-kort .minigraf { grid-column: 2; grid-row: 1 / span 2; width: 160px; height: 48px; }
.minigraf { display: block; overflow: visible; }
.minigraf path { fill: none; stroke: var(--diagram-serie); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.andel-kort .kort-lenke { grid-column: 1 / -1; }
@media (max-width: 699px) { .andel-kort .minigraf { width: 96px; height: 36px; } }
.kort-lenke { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--aksent-tekst); }
.kort-lenke .ikon { width: 16px; height: 16px; }
a.kort { color: inherit; }

/* «Vis alle»: radene bak står skjult til <details> er åpen. Ingen skript. */
.bak-vis-alle tr.bak, .bak-vis-alle .kortliste-rad.bak { display: none; }
.bak-vis-alle:has(details[open]) tr.bak { display: table-row; }
.bak-vis-alle:has(details[open]) .kortliste-rad.bak { display: grid; }
.bak-vis-alle summary { list-style: none; cursor: pointer; color: var(--aksent-tekst); font-weight: 500; }
.bak-vis-alle summary::-webkit-details-marker { display: none; }
.bak-vis-alle details[open] summary { display: none; }

/* ===== 11. Varsel, toast, feil (#32) ================================================= */
/* #32: flaten er en lys tint, kant og ikon i full farge, tekst i tekstfargen. Ingen mettet flate her. */
.varsel { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--linje); background: var(--flate-2); font-size: 14px; line-height: 20px; color: var(--tekst); min-width: 0; }
.varsel .ikon { margin-top: 2px; width: 16px; height: 16px; color: var(--tekst-2); }
.varsel .innhold { flex: 1 1 auto; min-width: 0; }
.varsel .innhold b { font-weight: 600; }
.varsel .innhold p { color: var(--tekst-2); }
.varsel .lukk { margin: -6px -6px -6px 0; }
.varsel--ok { background: var(--ok-flate); border-color: var(--ok); }
.varsel--ok .ikon { color: var(--ok); }
.varsel--advarsel { background: var(--advarsel-flate); border-color: var(--advarsel); }
.varsel--advarsel .ikon { color: var(--advarsel); }
.varsel--feil { background: var(--feil-flate); border-color: var(--feil); }
.varsel--feil .ikon { color: var(--feil); }
.varsel--info { background: var(--aksent-flate); border-color: var(--aksent); }
.varsel--info .ikon { color: var(--aksent); }
.varsel .knapp--lenke { color: var(--aksent-tekst); min-height: 20px; padding: 0; }
.varsel[role="alert"]:empty, .varsel.er-tom { display: none; }

.toast { display: flex; gap: 10px; align-items: flex-start; width: 100%; max-width: 380px; padding: 12px 12px 12px 14px; border-radius: 8px; background: var(--flate); border: 1px solid var(--linje); box-shadow: var(--skygge-svevende); font-size: 14px; line-height: 20px; color: var(--tekst); }
.toast .ikon { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; color: var(--tekst-2); }
.toast .innhold { flex: 1 1 auto; min-width: 0; }
.toast .innhold p { color: var(--tekst-2); font-size: 13px; }
.toast .lukk { margin: -6px -6px -6px 0; }
.toast .handling { margin-top: 6px; }
.toast--ok { border-color: var(--ok); }
.toast--ok .ikon { color: var(--ok); }
.toast--advarsel { border-color: var(--advarsel); }
.toast--advarsel .ikon { color: var(--advarsel); }
.toast--feil { border-color: var(--feil); }
.toast--feil .ikon { color: var(--feil); }
.toast--laster .ikon { color: var(--tekst-dempet); animation: snurr 900ms linear infinite; }
.toast-stabel { display: grid; gap: 8px; justify-items: end; }
@media (max-width: 699px) { .toast { max-width: none; } }

.feilside { text-align: center; padding: 48px 24px; display: grid; justify-items: center; gap: 8px; }
.feilside .kode { font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 20px; color: var(--tekst-dempet); letter-spacing: 0.06em; }
.feilside .feil-ikon { width: 40px; height: 40px; border-radius: 8px; background: var(--feil-flate); border: 1px solid var(--feil); color: var(--feil); display: grid; place-items: center; margin-bottom: 8px; }
.feilside .h2 { margin-top: 4px; }
.feilside p { color: var(--tekst-2); max-width: 420px; font-size: 14px; line-height: 20px; }
.feilside .knapperad { margin-top: 16px; justify-content: center; }
.feil-innlagt { border: 1px dashed var(--linje-sterk); border-radius: 12px; padding: 24px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.feil-innlagt .ikon { color: var(--feil); width: 20px; height: 20px; margin-bottom: 4px; }
.feil-innlagt .tittel { font-size: 14px; line-height: 20px; font-weight: 500; }
.feil-innlagt p { font-size: 13px; line-height: 20px; color: var(--tekst-dempet); }

/* ===== 12. Modal, skjelett, meny, tips, stegviser ==================================== */
.bakteppe { background: color-mix(in srgb, var(--tekst) 45%, transparent); border-radius: 12px; padding: 32px 16px; display: grid; place-items: center; }
.dialog { width: 100%; max-width: 460px; background: var(--flate); border: 1px solid var(--linje); border-radius: 12px; box-shadow: var(--skygge-svevende); padding: 24px; color: var(--tekst); }
dialog.dialog { margin: auto; }
dialog.dialog::backdrop { background: color-mix(in srgb, var(--tekst) 45%, transparent); }
.dialog .dialog-topp { display: flex; align-items: flex-start; gap: 12px; }
.dialog .dialog-topp .h3 { flex: 1 1 auto; }
.dialog .dialog-topp .lukk { margin: -6px -6px 0 0; }
.dialog p { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--tekst-2); }
.dialog .dialog-kropp { margin-top: 16px; display: grid; gap: 12px; }
.dialog .dialog-bunn { margin-top: 24px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dialog--fare .dialog-ikon { width: 36px; height: 36px; border-radius: 8px; background: var(--feil-flate); border: 1px solid var(--feil); color: var(--feil); display: grid; place-items: center; flex: 0 0 auto; }
.dialog details { border-top: 1px solid var(--linje); padding-top: 8px; }
.dialog summary { cursor: pointer; font-size: 13px; line-height: 20px; color: var(--tekst-2); }
@media (max-width: 699px) { .dialog { padding: 20px; width: min(94vw, 460px); } .dialog .dialog-bunn .knapp { flex: 1 1 auto; } .bakteppe { padding: 16px 8px; } }

.skjelett { display: block; background: var(--flate-3); border-radius: 6px; height: 14px; animation: puls 1200ms ease-in-out infinite; }
.skjelett--tekst { height: 12px; }
.skjelett--tittel { height: 18px; width: 40%; }
.skjelett--tall { height: 32px; width: 55%; border-radius: 8px; }
.skjelett--rad { height: 44px; border-radius: 0; background: transparent; border-bottom: 1px solid var(--linje); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; align-items: center; padding: 0 20px; animation: none; }
.skjelett--rad > i { display: block; height: 12px; background: var(--flate-3); border-radius: 6px; animation: puls 1200ms ease-in-out infinite; }
.skjelett--rund { width: 28px; height: 28px; border-radius: 50%; }
.skjelett--diagram { height: 140px; border-radius: 8px; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .skjelett, .skjelett--rad > i, .knapp.laster::after, .toast--laster .ikon { animation: none; } }
.laster-linje { height: 2px; background: var(--flate-3); border-radius: 1px; overflow: hidden; }
.laster-linje > i { display: block; height: 100%; width: 40%; background: var(--primaer); border-radius: 1px; animation: glid 1200ms cubic-bezier(0.2, 0, 0, 1) infinite; }
@keyframes glid { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.snurre { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--flate-3); border-top-color: var(--primaer); animation: snurr 720ms linear infinite; }

.nedtrekk { width: 220px; background: var(--flate); border: 1px solid var(--linje); border-radius: 8px; box-shadow: var(--skygge-svevende); padding: 4px; }
.nedtrekk a, .nedtrekk button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 8px; min-height: 32px; border-radius: 6px; font-size: 14px; line-height: 20px; color: var(--tekst); text-align: left; }
.nedtrekk a:hover, .nedtrekk button:hover, .nedtrekk .er-aktiv { background: var(--flate-2); }
.nedtrekk .ikon { width: 16px; height: 16px; color: var(--tekst-2); }
.nedtrekk hr { border: 0; border-top: 1px solid var(--linje); margin: 4px 0; }
.nedtrekk .fare, .nedtrekk .fare .ikon { color: var(--feil-tekst); }
.nedtrekk .snarvei { margin-left: auto; font-size: 12px; color: var(--tekst-dempet); font-family: var(--skrift-tall); }
.tips { display: inline-block; background: var(--tekst); color: var(--flate); font-size: 12px; line-height: 16px; padding: 4px 8px; border-radius: 6px; }

/* Stegviser: ruller sidelengs på mobil i stedet for å presse siden bredere (#31). */
.steg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(108px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.steg > div { position: relative; padding-top: 12px; font-size: 13px; line-height: 18px; color: var(--tekst-dempet); white-space: nowrap; }
.steg > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 1.5px; background: var(--flate-3); }
.steg > div.ferdig::before { background: var(--tekst); }
.steg > div.ferdig { color: var(--tekst-2); }
.steg > div.naa::before { background: var(--aksent); }
.steg > div.naa { color: var(--tekst); font-weight: 600; }
.steg small { display: block; font-weight: 400; color: var(--tekst-dempet); }
.fremdriftslinje { height: 6px; background: var(--flate-3); border-radius: 3px; overflow: hidden; }
.fremdriftslinje > i { display: block; height: 100%; width: 0; background: var(--primaer); border-radius: 3px; transition: width var(--bev-rask); }
.fremdriftslinje > i.advarsel { background: var(--advarsel); }
.fremdriftslinje > i.ok { background: var(--ok); }

/* ===== 13. App-skall: topp, sidefelt fra 1080, fanelinje under (#34) ================= */
.skall { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--flate-2); }
.skall-topp { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0; background: var(--flate); border-bottom: 1px solid var(--linje); }
.skall-topp .butikk { font-weight: 500; font-size: 14px; line-height: 20px; padding-left: 12px; border-left: 1px solid var(--linje); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.skall-topp .hoyre { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }
.skall-topp .spraakvalg { display: none; }
@media (min-width: 700px) { .skall-topp .spraakvalg { display: flex; } .skall-topp { padding-inline: 20px; } }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--flate-3); color: var(--tekst-2); display: inline-grid; place-items: center; font-size: 12px; line-height: 1; font-weight: 600; flex: none; }
.skall-kropp { display: grid; grid-template-columns: minmax(0, 1fr); }
.sidefelt { display: none; }
.skall-hoved { padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 0px)); min-width: 0; }
.skall-hoved > * + * { margin-top: 16px; }
.side-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.meny { display: grid; gap: 2px; }
.meny a { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-height: 36px; border-radius: 6px; color: var(--tekst-2); font-size: 14px; line-height: 20px; font-weight: 500; }
.meny a:hover { background: var(--flate-2); color: var(--tekst); }
.meny a[aria-current], .meny a.aktiv { background: var(--flate-3); color: var(--tekst); }
.meny a .merke-tall { margin-left: auto; }
.meny .ikon { color: var(--tekst-dempet); }
.meny a[aria-current] .ikon, .meny a.aktiv .ikon { color: var(--tekst); }
.sidefelt .konto { margin-top: 24px; padding: 12px 10px 0; border-top: 1px solid var(--linje); font-size: 12px; line-height: 16px; color: var(--tekst-dempet); overflow-wrap: anywhere; }
.faner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--flate); border-top: 1px solid var(--linje); padding-bottom: env(safe-area-inset-bottom, 0px); }
.faner > a, .faner > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; min-height: 56px; font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tekst-dempet); white-space: nowrap; background: none; border: 0; cursor: pointer; }
.faner > [aria-current], .faner a.aktiv { color: var(--tekst); }
/* PR1-06: den aktive fanen har en strek øverst i primærfargen, ikke bare mørkere tekst */
.faner > [aria-current]::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; margin-left: -16px; height: 2px; border-radius: 0 0 2px 2px; background: var(--primaer); }
.faner > :focus-visible { outline: 2px solid var(--fokus); outline-offset: -4px; border-radius: 8px; }
.faner a .merke-tall { position: absolute; top: 2px; left: calc(50% + 10px); height: 20px; min-width: 20px; font-size: 12px; padding: 0 5px; } /* #2: 12 px er gulvet, også i en boble; ved siden av ikonet (20 px), ikke over det (BRAND-1d) */
/* PR1-06: Mer-arket (popover). Nederst som ark på mobil, midt på fra 700. Samme .meny som sidefeltet. */
.mer-ark { margin: auto 0 0; width: 100%; max-width: none; max-height: 92dvh; overflow: auto; background: var(--flate); color: var(--tekst); border: 0; border-top: 1px solid var(--linje); border-radius: 16px 16px 0 0; box-shadow: var(--skygge-svevende); padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.mer-ark::backdrop { background: color-mix(in srgb, var(--tekst) 45%, transparent); }
.mer-ark .meny a, .mer-ark .meny button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--tekst); text-align: left; cursor: pointer; }
.mer-ark .meny button { margin-top: 4px; border-top: 1px solid var(--linje); border-radius: 0 0 8px 8px; }
.mer-ark .meny a:hover, .mer-ark .meny button:hover { background: var(--flate-2); }
@media (min-width: 700px) { .mer-ark { margin: auto; width: min(360px, 92vw); border: 1px solid var(--linje); border-radius: 12px; padding-bottom: 12px; } }
/* PR1-06: «✕ Lukk» inne i en økt (godkjenning, skjemaets steg-modus); står først i topplinja */
.okt-lukk { flex: none; margin-left: -8px; }
@media (min-width: 1080px) {
  .skall-kropp { grid-template-columns: 240px minmax(0, 1fr); }
  .sidefelt { display: block; background: var(--flate); border-right: 1px solid var(--linje); padding: 16px 12px; }
  .skall-hoved { padding: 32px 40px 48px; }
  .skall-hoved > * + * { margin-top: 24px; }
  .faner { display: none; }
}
.spraakvalg { display: flex; gap: 2px; }
.spraakvalg a { color: var(--tekst-dempet); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; padding: 0 8px; border-radius: 6px; min-height: 32px; display: inline-flex; align-items: center; }
.spraakvalg a[aria-current], .spraakvalg a.aktiv { color: var(--tekst); background: var(--flate-3); }
/* Veiviser-kort: én handling som venter på kunden (#36) */
.venter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.venter > .tekst { flex: 1 1 200px; min-width: 0; }
.venter .knapp { margin-left: auto; }
@media (max-width: 699px) { .venter .knapp { flex: 1 1 100%; margin-left: 0; } }

/* ===== 14. Innlogging =============================================================== */
.inngang { min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px; background: var(--flate-2); }
@media (min-width: 700px) { .inngang { align-items: center; padding: 40px 24px; } }
.inngang-innhold { width: 100%; max-width: 420px; }
.inngang-topp { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.inngang-topp .spraakvalg { margin-left: auto; }
.inngang .kort { padding: 24px 20px; }
@media (min-width: 700px) { .inngang .kort { padding: 28px 24px; } }
.inngang .ingress { margin-top: 8px; margin-bottom: 20px; font-size: 14px; line-height: 20px; color: var(--tekst-2); }
.inngang form { display: grid; gap: 16px; }
.inngang .bytt { display: grid; justify-items: start; gap: 4px; margin-top: 16px; }
.inngang .fot { margin-top: 20px; display: grid; gap: 8px; }

/* ===== 15. Godkjenning (Tinder-flaten) — samme markup som web/maler/godkjenning/flate.html ===== */
/* PR1-04 (PRODUKT-1 §1): brevet fyller høyden (#38 ≥ 80 % på 375/390/414). Topplinje + innbokshode over,
   knappene flyter over brevets bunn i tommelsonen. Ingen zoomrad, dekningslinje, lås-tekst eller køkort for kunden. */
.tinder { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--flate-2); color: var(--tekst); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
.tinder-flate, .tinder > [x-data] { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tinder-topp { padding: calc(4px + env(safe-area-inset-top, 0px)) 8px 0 16px; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; }
.tinder-tittel { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.tinder-tittel .flow { font-weight: 400; color: var(--tekst-dempet); }
.tinder-topp .fremdrift { color: var(--tekst-dempet); font-size: 13px; line-height: 20px; font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tinder .innboks { padding: 0 16px 6px; font-size: 13px; line-height: 18px; min-width: 0; }
.tinder .innboks-linje, .tinder .innboks-forhand { overflow-wrap: anywhere; } /* emnet kuttes aldri: det er en del av det som godkjennes (#31) */
.tinder .innboks-linje b { font-weight: 600; margin-right: 4px; }
.tinder .innboks-forhand { color: var(--tekst-dempet); }
/* Brevet: loddrett rulleflate i full bredde. Referansen er kundens brev — ingen ramme i vår palett rundt (ADR-0119). */
.tinder .brev { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; background: #808080; border-top: 1px solid var(--linje); transform: translateX(0); transition: transform var(--bev-normal); }
.tinder .brev.drar { transition: none; }
.tinder .brev-innhold { position: relative; width: 100%; padding-bottom: 88px; background: #808080; } /* bunnen av brevet kan rulles fri av knappene */
.tinder .brev-innhold > img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.tinder .brev-innhold > .dyn-merke, .tinder .brev-innhold > i { pointer-events: none; }
.tinder .brev-innhold > img.mork, :root[data-modus="mork"] .tinder .brev-innhold > img.lys { display: none; } /* Kurves statiske flate: begge referansene, modus velger */
:root[data-modus="mork"] .tinder .brev-innhold > img.mork { display: block; }
.tinder .dyn-merke { position: absolute; left: 0; right: 0; border: 2px dashed var(--aksent); background: color-mix(in srgb, var(--aksent) 8%, transparent); }
.tinder .dyn-merke span { position: absolute; top: -1px; left: 0; background: var(--aksent); color: var(--primaer-tekst); font-size: 12px; line-height: 16px; font-weight: 500; padding: 2px 6px; border-radius: 0 0 6px 0; }
.tinder .brev-prikk, .tinder .brev-punkt { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; }
.tinder .brev-prikk { background: var(--aksent); border: 2px solid var(--flate); }
.tinder .brev-punkt { border: 2px solid var(--feil); box-shadow: 0 0 0 4px color-mix(in srgb, var(--feil) 25%, transparent); }
/* Stempelet: .brev har alltid en transform (translateX(0) i CSS, sveipet i JS), så position: fixed holder det fast i brevets ramme mens brevet rulles. */
.tinder .merke { position: fixed; top: 14px; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; line-height: 20px; opacity: 0; pointer-events: none; letter-spacing: 0.04em; z-index: 2; }
.tinder .merke.ja { left: 14px; background: var(--ok); color: var(--ok-knapp-tekst); }
.tinder .merke.nei { right: 14px; background: var(--feil); color: var(--feil-knapp-tekst); }
/* Knappene flyter over brevets bunn (tommelsone). data-over-brev: #38 måler hvor mye av brevet de dekker. */
.tinder .knapper { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.tinder .knapper .knapp { pointer-events: auto; min-height: 56px; border-radius: 8px; box-shadow: var(--skygge-svevende); font-size: 16px; line-height: 24px; }
.tinder .knapper .knapp.nei { width: 56px; padding: 0; }
.tinder .knapper .knapp.ja { padding: 0 24px; }
.tinder .knapper .knapp .ikon { width: 20px; height: 20px; }
.tinder .tinder-hint { position: absolute; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 4; max-width: none; width: auto; }
.tinder .operator { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; background: var(--flate); border: 1px solid var(--linje); box-shadow: var(--skygge-svevende); }
.tinder .nevner { padding: 0 6px; font-size: 12px; line-height: 16px; color: var(--tekst-dempet); font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; }
.tinder .ferdig { text-align: center; padding: 40px 20px; display: grid; gap: 6px; justify-items: center; }
/* Arket: glir opp nedenfra på mobil. Kategoriene som store valg (PRODUKT-1 §1.3). */
.tinder .dialog .varsel { margin-top: 4px; }
.tinder .dialog-topp .lukk { margin: -8px -8px 0 0; }
.tinder .dialog-topp .h3:focus { outline: none; } /* arket gir tittelen fokus, ikke lukkeknappen (ingen ring ved åpning, intet tastatur) */
.tinder .lukk .ikon, .tinder .tinder-topp .mer .ikon { width: 20px; height: 20px; }
.tinder .kategorier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tinder .kategori { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--linje); background: var(--flate); color: var(--tekst); font-size: 14px; line-height: 20px; font-weight: 500; text-align: left; cursor: pointer; }
.tinder .kategori[aria-checked="true"] { border-color: var(--primaer); background: var(--aksent-flate); box-shadow: inset 0 0 0 1px var(--primaer); }
.tinder .kategori:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.tinder .kategorier--sma { margin-top: 12px; }
.tinder details .felt { margin-top: 12px; }
.tinder .mer-liste section { display: grid; gap: 4px; }
.tinder .mer-liste section p { margin: 0; }
.tinder .slik-kort { min-height: 120px; display: grid; align-content: center; gap: 8px; }
@media (max-width: 699px) {
  .tinder dialog.ark { margin: auto 0 0; width: 100%; max-width: none; max-height: 92dvh; overflow: auto; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
/* B904: «Publiser til Klaviyo» på kundegodkjente brev (fra web/statisk/flate.css, som BRAND-1c fjernet) */
.tinder .publisering { display: grid; gap: 8px; padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px)); overflow: auto; min-height: 0; }
.tinder .mer-liste .publisering { padding: 8px 0 0; border-top: 1px solid var(--linje); }
.tinder .pub-brev { display: grid; gap: 6px; padding: 12px; }
.tinder .pub-status { margin: 0; font-size: 14px; line-height: 20px; color: var(--tekst-2); }
.tinder .pub-status.feil { color: var(--tekst); }
.tinder .pub-funn { font-size: 13px; line-height: 18px; }
.tinder .pub-funn ul { margin: 4px 0 0; padding-left: 18px; }
@media (min-width: 700px) { .tinder { max-width: 560px; margin: 0 auto; border-left: 1px solid var(--linje); border-right: 1px solid var(--linje); } }

/* ===== 16. Skjema (onboarding, B503) ================================================= */
.skjema { max-width: 720px; margin: 0 auto; padding: 0 16px calc(120px + env(safe-area-inset-bottom, 0px)); background: var(--flate-2); min-height: 100dvh; }
.skjema-topp { padding: calc(16px + env(safe-area-inset-top, 0px)) 0 4px; }
.skjema-topp .merkelinje { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.skjema-topp .merkelinje .spraakvalg { margin-left: auto; }
.skjema-topp .ingress { color: var(--tekst-2); margin-top: 6px; font-size: 14px; line-height: 20px; }
.skjema .seksjon, .skjema .panel { background: var(--flate); border: 1px solid var(--linje); border-radius: 12px; padding: 16px; margin: 16px 0; }
.skjema .seksjon > .h3, .skjema .panel > .h3 { margin-bottom: 4px; }
.skjema .panel ul { padding-left: 18px; font-size: 14px; line-height: 20px; }
.skjema .panel li { margin: 2px 0; }
.skjema .felt { padding: 14px 0; border-top: 1px solid var(--linje); gap: 8px; }
.skjema .felt:first-of-type { border-top: 0; }
.skjema .felt.er-forste { border-top: 0; }
.skjema .sporsmal, .skjema .felt legend { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tekst); }
.skjema .felt .merke { display: inline-block; vertical-align: middle; margin-left: 6px; }
.skjema .hjelp { color: var(--tekst-dempet); font-size: 13px; line-height: 18px; }
.skjema .kilde { display: flex; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; color: var(--tekst); }
.skjema .kilde .ikon { width: 14px; height: 14px; color: var(--ok); }
.skjema .feiltekst, .skjema .manglertekst { display: flex; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; color: var(--tekst); }
.skjema .feiltekst .ikon { width: 14px; height: 14px; color: var(--feil); }
.skjema .manglertekst .ikon { width: 14px; height: 14px; color: var(--advarsel); }
.skjema .felt.ugyldig .inndata, .skjema .felt.ugyldig .tekstfelt { border-color: var(--feil); }
.skjema .status { font-size: 14px; line-height: 20px; margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.skjema .status .ikon { width: 14px; height: 14px; }
.skjema .status-bekreftet .ikon { color: var(--ok); }
.skjema .status-ufullstendig .ikon { color: var(--advarsel); }
.skjema .veiledning { background: var(--aksent-flate); border: 1px solid var(--aksent); border-radius: 12px; padding: 14px; margin: 4px 0 8px; }
.skjema .veiledning .h4 { margin-bottom: 6px; }
.skjema .veiledning p { font-size: 14px; line-height: 20px; margin-bottom: 8px; }
.skjema .eksempler { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0 4px; }
@media (min-width: 560px) { .skjema .eksempler { grid-template-columns: 1fr 1fr; } }
.skjema .eksempel svg { width: 100%; height: auto; display: block; border-radius: 6px; background: var(--flate); border: 1px solid var(--linje); }
.skjema .eksempel figcaption { display: flex; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; margin-top: 4px; }
.skjema .eksempel figcaption .ikon { width: 14px; height: 14px; }
.skjema .eksempel.riktig figcaption .ikon { color: var(--ok); }
.skjema .eksempel.feil figcaption .ikon { color: var(--feil); }
.skjema .ai .bekreft { margin-top: 10px; display: grid; gap: 10px; }
.skjema .lenke-felt { margin-top: 8px; }
/* Vedtak 2026-09-16 (B1301, P-MERGE-13-2): lenken under en avkrysning eller bryter får luft (8 px)
   og står i tekstkolonnen, ikke under kontrollen: boks 18 + gap 10 = 28 px, spor 32 + gap 10 = 42 px. */
.skjema .lenke-under { margin-top: 8px; padding-left: 28px; }
.skjema .ai .lenke-under { padding-left: 42px; }
/* Hjelpeteksten under bryteren står i samme kolonne som lenken; ellers står lenken innrykket under
   en tekst som ikke er det (sett i skjermbildet av skjerm 5, 375 lys, B1301). */
.skjema .ai > .hjelp { padding-left: 42px; }
.skjema-fremdrift { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--flate); border-top: 1px solid var(--linje); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.skjema-fremdrift .indre { max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.skjema-fremdrift .tekst { font-size: 13px; line-height: 20px; color: var(--tekst-2); flex: 1 1 160px; min-width: 0; }
.skjema-fremdrift .knapp { margin-left: auto; }
.skjema-fremdrift .manglerliste { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 20px; max-height: 30vh; overflow: auto; }
.skjema-fremdrift .manglerliste a { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.skjema-fremdrift .kvittering { display: flex; gap: 6px; align-items: center; font-weight: 500; }
.skjema-fremdrift .kvittering .ikon { color: var(--ok); width: 16px; height: 16px; }
/* PR1-06: fanelinja står under fremdriften når begge vises (uten steg-modus, under 1080); i steg-modus
   er fanelinja skjult og «✕ Lukk» står øverst til venstre (PRODUKT-1 §8). */
.skjema .okt-lukk { display: none; }
.skjema--steg .okt-lukk { display: inline-flex; }
.skjema--steg .merkelinje .logo { display: none; } /* Lukk står der logoen sto: målt 404 px bredt på 375 med begge */
.skjema--steg .faner { display: none; }
@media (max-width: 1079px) {
  .skjema:not(.skjema--steg):has(> .faner) { padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)); }
  .skjema:not(.skjema--steg):has(> .faner) .skjema-fremdrift { bottom: calc(57px + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; }
}
/* #34 mobil: ett spørsmål per skjerm. skjema.js setter .skjema--steg på rota og .er-aktiv på feltet som vises. */
.skjema-steg-nav { display: none; }
@media (max-width: 699px) {
  .skjema--steg .seksjon > .felt:not(.er-aktiv), .skjema--steg .seksjon > .veiledning:not(.er-aktiv) { display: none; }
  .skjema--steg .seksjon > .felt.er-aktiv { border-top: 0; padding-top: 4px; }
  .skjema--steg .seksjon:not(.er-aktiv) { display: none; }
  .skjema--steg .panel:not(.er-aktiv) { display: none; }
  .skjema--steg .skjema-steg-nav { display: flex; gap: 8px; align-items: center; }
  .skjema--steg .skjema-steg-nav .teller { font-size: 13px; line-height: 20px; color: var(--tekst-dempet); font-family: var(--skrift-tall); font-variant-numeric: tabular-nums; margin-right: auto; }
  .skjema--steg .skjema-fremdrift .tekst { display: none; }
  .skjema--steg .skjema-fremdrift .indre { gap: 8px; }
  .skjema--steg .skjema-fremdrift .knapp--send { flex: 1 1 100%; margin-left: 0; }
  .skjema--steg .skjema-steg-linje { margin: 12px 0 0; }
}

/* ===== 17. Markedsside (forsiden) (#18 #28 #30) ====================================== */
.topp-marked { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--flate) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linje); }
.topp-marked .topp-rad { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.topp-marked .hovednav { display: none; gap: 24px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tekst-2); }
.topp-marked .hovednav a:hover { color: var(--tekst); }
.topp-marked .topp-hoyre { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topp-marked .lenke-dempet { display: none; color: var(--tekst-2); font-size: 14px; font-weight: 500; }
.topp-marked .knapp { display: none; }
@media (min-width: 720px) { .topp-marked .hovednav { display: flex; } .topp-marked .lenke-dempet { display: inline; } .topp-marked .knapp { display: inline-flex; } }
.seksjon-marked { padding-block: 64px; }
.seksjon-marked--flate { background: var(--flate-2); border-block: 1px solid var(--linje); }
.seksjon-hode { max-width: 40em; margin-bottom: 32px; }
.seksjon-hode .h2 + p { margin-top: 12px; }
.seksjon-hode--midt { margin-inline: auto; text-align: center; }
.eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aksent-tekst); font-weight: 500; margin-bottom: 16px; }
.ingress { font-size: 18px; line-height: 28px; letter-spacing: -0.005em; color: var(--tekst-2); max-width: 34em; }
.hero { padding-block: 40px 64px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero .ingress { margin-top: 20px; }
.hero .cta-rad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .for-hvem { margin-top: 20px; font-size: 14px; line-height: 20px; color: var(--tekst-dempet); }
.hero-visual { display: flex; justify-content: center; }
/* #28 radiusskala: telefon 24 → skjerm 16 → kort 12 → knapp 8 → mikro 6. Ekte skjermbilde av appen, ikke en tegning. */
.telefon { width: 100%; max-width: 340px; padding: 10px; border-radius: 24px; background: var(--flate-2); border: 1px solid var(--linje); box-shadow: var(--skygge-svevende); }
.telefon-skjerm { border-radius: 16px; border: 1px solid var(--linje); overflow: hidden; background: var(--flate); aspect-ratio: 375 / 812; }
.telefon-skjerm img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.telefon-skjerm .mork { display: none; }
:root[data-modus="mork"] .telefon-skjerm .lys { display: none; }
:root[data-modus="mork"] .telefon-skjerm .mork { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="lys"]) .telefon-skjerm .lys { display: none; }
  :root:not([data-modus="lys"]) .telefon-skjerm .mork { display: block; }
}
.kort-nr, .steg-nr { font-family: var(--skrift-tall); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--tekst-dempet); }
.kort-rad .kort { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.kort-rad .kort p { color: var(--tekst-2); font-size: 14px; line-height: 20px; }
.steg-rad { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.steg-rad .steg-punkt { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--linje); }
.steg-rad .steg-punkt:first-child { border-top-color: var(--aksent); }
.steg-rad .steg-punkt p { color: var(--tekst-2); font-size: 14px; line-height: 20px; }
.etterpaa { margin-top: 32px; max-width: 44em; color: var(--tekst-2); font-size: 18px; line-height: 28px; }
.pris-kort { max-width: 520px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; padding: 32px 24px 24px; }
.pris-belop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pris-belop .belop { font-family: var(--skrift-tall); font-weight: 600; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; white-space: nowrap; }
.pris-belop .periode { color: var(--tekst-2); font-size: 16px; }
.pris-liste { list-style: none; margin: 0; padding: 18px 0 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linje); }
.pris-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; }
.pris-liste li .ikon { width: 16px; height: 16px; color: var(--ok); margin-top: 2px; }
.pris-tillegg { color: var(--tekst-2); font-size: 14px; line-height: 20px; }
.pris-merknad { text-align: center; font-size: 13px; line-height: 18px; color: var(--tekst-dempet); }
.book-grid { display: grid; gap: 32px; align-items: start; }
.book-alt { margin-top: 24px; color: var(--tekst-2); font-size: 14px; line-height: 20px; }
.kalender { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; }
.kalender .ikon { color: var(--tekst-dempet); width: 24px; height: 24px; margin-bottom: 8px; }
.kalender-tekst { font-weight: 500; }
.bunn-marked { border-top: 1px solid var(--linje); padding-block: 48px 28px; }
.bunn-grid { display: grid; gap: 28px; }
.bunn-tagline { margin-top: 12px; color: var(--tekst-2); max-width: 28em; font-size: 14px; line-height: 20px; }
.bunn-lenker { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; line-height: 20px; font-weight: 500; }
.bunn-lenker a { color: var(--tekst-2); }
.bunn-lenker a:hover { color: var(--tekst); }
.bunn-rad { margin-top: 32px; font-size: 13px; line-height: 18px; color: var(--tekst-dempet); }
@media (min-width: 720px) {
  .steg-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .bunn-grid { grid-template-columns: 1.2fr 1fr auto; align-items: start; }
}
@media (min-width: 1080px) {
  .seksjon-marked { padding-block: 96px; }        /* #30 */
  .hero { padding-block: 96px 80px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; }
  .hero-visual { justify-content: flex-end; }
  .steg-rad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .book-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* ===== 18. Statiske tilstands-klasser for komponentsiden (samme regler som :hover/:focus) ===== */
.knapp--primaer.er-hover { background: var(--primaer-hover); border-color: var(--primaer-hover); }
.knapp--sekundaer.er-hover { background: var(--flate-2); border-color: var(--linje-sterk); }
.knapp--stille.er-hover { background: var(--flate-2); color: var(--tekst); }
.knapp--fare.er-hover { background: color-mix(in srgb, var(--feil) 90%, var(--tekst)); }
.knapp--lenke.er-hover { text-decoration: underline; text-underline-offset: 3px; }
.knapp.er-fokus { outline: 2px solid var(--fokus); outline-offset: 2px; }
.inndata.er-hover, .velg.er-hover { border-color: var(--tekst-dempet); }
.avkryss .boks.er-hover, .radio .boks.er-hover { border-color: var(--tekst-dempet); }
.kort--klikkbar.er-hover { border-color: var(--linje-sterk); }
.tabell tr.er-hover td { background: var(--flate-2); }
.nedtrekk .er-hover { background: var(--flate-2); }