/* Live-visning og rapport på skjerm. Verdier kommer fra felles/tokens.css. */
.visuelt-skjult {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Stegene i live-visningen («Vis alle stegene»): mono, med hake, pil eller prikk foran. Status står også som tekst for skjermlesere. */
.stegliste { list-style: none; padding: 0; margin: var(--rom-3) 0 0; font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); line-height: 1.5; }
.steg { display: flex; gap: var(--rom-2); align-items: baseline; padding: 0.375rem 0; color: var(--farge-tekst-dempet); }
.steg-merke { flex: none; width: 1.25em; font-weight: 600; }
.steg-merke::before { content: "·"; }
.steg-ferdig { color: var(--farge-tekst); }
.steg-ferdig .steg-merke::before { content: "✓"; color: var(--farge-honerod); }
.steg-pagar { color: var(--farge-honerod); font-weight: 600; }
.steg-pagar .steg-merke::before { content: "→"; }

.merke {
  display: inline-block; margin: 0; padding: var(--rom-1) var(--rom-2);
  border: var(--strek) solid var(--farge-marine); border-radius: var(--radius-liten);
  background: var(--farge-hvit);
  font-size: var(--skrift-str-mini); font-weight: 700; color: var(--farge-tekst);
}

.rapport {
  margin-top: var(--rom-4);
  padding: var(--rom-4) 20px;
  background: var(--farge-kort);
  border-radius: var(--radius-stor);
  box-shadow: var(--skygge-kort);
}
.rapport > :first-child { margin-top: 0; }
.rapport h1 { margin-top: var(--rom-3); }
.rapport h2 { margin-top: var(--rom-5); padding-top: var(--rom-4); border-top: 1px solid var(--farge-linje); }
.rapport-meta { color: var(--farge-tekst-dempet); font-size: var(--skrift-str-liten); }
.rapport-ingress {
  margin: var(--rom-4) 0;
  padding: var(--rom-3) var(--rom-4);
  border-left: 4px solid var(--farge-marine);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--farge-krem);
}
.rapport-ingress p { margin: 0; }
.rapport-ingress p:first-child {
  margin-bottom: var(--rom-2);
  font-family: var(--skrift-overskrift);
  font-size: var(--skrift-str-h2);
  line-height: 1.15;
}

/* Statusmerket: ikon og ord, aldri farge alene. */
.status { white-space: nowrap; }
.statusmerke {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.1875rem 0.625rem 0.1875rem 0.375rem;
  border-radius: var(--radius-pille);
  font-size: var(--skrift-str-mini); font-weight: 700; line-height: 1.3;
  color: var(--status-tekst); white-space: nowrap;
}
.statusikon { flex: none; }
.statusmerke-rod { background: var(--status-rod-flate); }
.statusmerke-gul { background: var(--status-gul-flate); }
.statusmerke-gronn { background: var(--status-gronn-flate); }
.statusmerke-gra { background: var(--status-gra-flate); }

.forklaring {
  list-style: none; padding: 0; margin: var(--rom-3) 0;
  display: flex; flex-wrap: wrap; gap: var(--rom-2) var(--rom-3);
  font-size: var(--skrift-str-liten); color: var(--farge-tekst-dempet);
}
.forklaring li { display: flex; align-items: center; gap: var(--rom-2); }

/* Side 3 skilles tydelig fra vurderingen, som skal kunne deles uten prisene. */
.side-3 {
  margin: var(--rom-5) calc(-1 * 20px) calc(-1 * var(--rom-4));
  padding: var(--rom-2) 20px var(--rom-4);
  border-radius: 0 0 var(--radius-stor) var(--radius-stor);
  background: var(--farge-flate);
}
.side-3 h2 { border-top: 0; padding-top: 0; }
.side-3 table { background: var(--farge-hvit); border-radius: var(--radius); }
.tall { white-space: nowrap; text-align: right; }
.pris .sum td { border-bottom: 0; border-top: 2px solid var(--farge-marine); }
.pris .punkt-hva { display: block; margin-top: 2px; font-size: 0.9375rem; white-space: pre-line; overflow-wrap: anywhere; }
.pris input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--farge-marine); cursor: pointer; }
.pris-fiks label { cursor: pointer; }
.pris-fiks-ord { display: none; }
.side-3 .knapp { min-height: var(--trykkflate); }

/* Rammen rundt live-visningen og rapporten */
.rapportside { max-width: 60rem; padding-top: var(--rom-4); padding-bottom: var(--rom-6); }
.rapportside > h1 { margin-top: var(--rom-4); }
.gjennomgang { margin-top: var(--rom-5); }
.gjennomgang .stegliste { margin-bottom: 0; }

/* Live-visningen i variant A (mockups/a-live.html): overskrift med appnavnet, og planten med ti knopper ved siden av punktene. */
.rapportside.live { max-width: var(--bredde-side); }
.live-hode { max-width: 47.5rem; }
.live-hode > h1 { margin-top: var(--rom-3); }
.live-hode .melding[data-tilstandsmelding] {
  margin: var(--rom-4) 0 0; padding: 0; border: 0; background: none;
  font-size: var(--skrift-str-stor); max-width: 34em; color: var(--farge-tekst);
}
.gjennomgang-scene {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rom-4);
  margin-top: var(--rom-4); align-items: start;
}
.gjennomgang-innhold { min-width: 0; }
@media (min-width: 53.75rem) {
  .gjennomgang-scene { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.875rem 4.375rem; margin-top: 2.875rem; }
}

/* Planten: blekk, ti stiplede knopper. Ferdig: rød app-blomst med hake. Pågår: krem med rød kant, puster rolig. */
.plante-live svg { display: block; width: 100%; max-width: 15.625rem; height: auto; margin: 0 auto; overflow: visible; }
@media (min-width: 53.75rem) { .plante-live svg { max-width: 27.5rem; } }
.plante-skygge { fill: var(--farge-marine); opacity: 0.55; }
.plante-blekk { fill: none; stroke: var(--farge-marine); stroke-linecap: round; stroke-linejoin: round; }
.plante-fyll { fill: var(--farge-krem); }
.plante-live .knopp { transform-box: fill-box; transform-origin: center; }
.plante-live .knopp-form { fill: var(--farge-krem); stroke: var(--farge-marine); stroke-width: 2.4; stroke-dasharray: 4 4; transition: fill 0.6s ease, stroke 0.6s ease; }
.plante-live .knopp-hake { fill: none; stroke: var(--farge-krem); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.6s ease; }
.plante-live .steg-ferdig .knopp-form { fill: var(--farge-honerod); stroke: var(--farge-honerod); stroke-dasharray: none; }
.plante-live .steg-ferdig .knopp-hake { opacity: 1; }
.plante-live .steg-pagar .knopp-form { stroke: var(--farge-honerod); stroke-width: 3; stroke-dasharray: none; }
.plante-live .steg-pagar { animation: puste 2.4s ease-in-out infinite; }
@keyframes puste { 50% { transform: scale(1.12); } }

/* Mens sjekken går (ux-flyt B2): hva vi har fått, overskrift, fremdrift og de ti punktene. */
.kode-linje { margin: 0; font-family: var(--skrift-mono); font-size: 0.84rem; color: var(--farge-tekst-dempet); }
.kode-linje-mottatt { color: var(--farge-tekst); }
.kode-linje-mottatt span { color: var(--farge-honerod); font-weight: 600; }
.gjennomgang-overskrift {
  margin: 0.875rem 0 0;
  font-size: clamp(2.125rem, 3.4vw, 3.25rem); font-weight: var(--skrift-vekt-overskrift); line-height: 0.95;
}
/* Fremdriften er bølgestreken som fylles med hønerødt. Bredden settes av skriptet. */
.fremdrift {
  container-type: inline-size;
  height: 0.875rem; margin: var(--rom-4) 0 0;
  background: url("fremdrift-spor.765c85e79db3.svg") center / 100% 100% no-repeat;
}
.fremdrift-fyll {
  height: 100%; width: 0; overflow: hidden;
  background: url("fremdrift-fyll.396b0b32c4ad.svg") left center / 100cqw 100% no-repeat;
  transition: width 1s ease;
}
@media (prefers-reduced-motion: reduce) { .fremdrift-fyll { transition: none; } }
.fremdrift-tall { margin: 0.375rem 0 0; text-align: right; font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); color: var(--farge-tekst-dempet); }
.punktruter {
  list-style: none; padding: 0; margin: var(--rom-4) 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.75rem;
}
@media (min-width: 40rem) { .punktruter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.punktrute {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.6875rem 0; border-top: 1px dashed var(--farge-linje-sterk);
  font-weight: 600; color: var(--farge-tekst-dempet); overflow-wrap: anywhere;
}
.punktrute-merke {
  position: relative; flex: none; display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem; border-radius: 7px;
  box-shadow: inset 0 0 0 var(--strek) var(--farge-linje-sterk);
}
.punktrute-nr { flex: none; width: 1.25rem; font-family: var(--skrift-mono); font-size: 0.78rem; font-weight: 400; color: var(--farge-tekst-dempet); }
.punktrute.steg-ferdig { color: var(--farge-tekst); font-weight: 700; }
.punktrute.steg-ferdig .punktrute-merke { background: var(--farge-marine); box-shadow: none; }
.punktrute.steg-ferdig .punktrute-merke::after {
  content: ""; width: 0.5625rem; height: 0.3125rem; transform: translateY(-1px) rotate(-45deg);
  border-left: 2px solid var(--farge-krem); border-bottom: 2px solid var(--farge-krem);
}
.punktrute.steg-pagar { color: var(--farge-honerod); font-weight: 700; }
.punktrute.steg-pagar .punktrute-merke { box-shadow: inset 0 0 0 2.4px var(--farge-honerod); animation: puste 2.4s ease-in-out infinite; }
.alle-steg { margin-top: var(--rom-4); }
.alle-steg summary {
  cursor: pointer; min-height: var(--trykkflate); display: inline-flex; align-items: center; gap: var(--rom-2);
  list-style: none; font-weight: 800; color: var(--farge-tekst);
}
.alle-steg summary::-webkit-details-marker { display: none; }
.alle-steg summary::before { content: "+"; font-family: var(--skrift-mono); color: var(--farge-honerod); }
.alle-steg[open] summary::before { content: "–"; }
.alle-steg summary:hover { color: var(--farge-honerod); }
@media (prefers-reduced-motion: reduce) {
  .plante-live .steg-pagar, .punktrute.steg-pagar .punktrute-merke { animation: none; }
  .plante-live .knopp-form, .plante-live .knopp-hake { transition: none; }
}

@media (min-width: 40rem) {
  .rapport { padding: var(--rom-5) 2.75rem; }
  .side-3 { margin: var(--rom-5) -2.75rem calc(-1 * var(--rom-5)); padding: var(--rom-3) 2.75rem var(--rom-5); }
}

/* Under ca. 600 px blir hver rad i tabellene et lite kort, så ingenting må rulles sidelengs. */
@media (max-width: 37.5rem) {
  .rapport .tabell-rull { overflow-x: visible; }
  .pris, .pris tbody { display: block; }
  .pris thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pris td { border-bottom: 0; padding: 0; }

  .side-3 table { background: transparent; }
  .pris tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "punkt punkt" "status fiks" "belop belop";
    gap: var(--rom-2) var(--rom-3);
    margin-bottom: 12px;
    padding: 14px var(--rom-3);
    border-radius: var(--radius);
    background: var(--farge-hvit);
  }
  .pris .pris-punkt { grid-area: punkt; }
  .pris .status { grid-area: status; }
  .pris .pris-belop { grid-area: belop; text-align: left; font-weight: 700; color: var(--farge-tekst); }
  .pris .pris-fiks { grid-area: fiks; align-self: center; }
  /* Avtalen (bug 2): punktet øverst, så hvert beløp på egen linje med hva det er. */
  .avtale-pris tr { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .avtale-pris td.tall { text-align: left; }
  .avtale-pris td:empty { display: none; }
  .avtale-pris td[data-etikett]::before { content: attr(data-etikett) ": "; font-weight: 400; color: var(--farge-tekst-dempet); }
  .pris-belop::before {
    content: attr(data-etikett) ": ";
    font-weight: 400;
    color: var(--farge-tekst-dempet);
  }
  .pris-fiks label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rom-1);
    min-width: var(--trykkflate);
    font-size: var(--skrift-str-mini);
    font-weight: 700;
    color: var(--farge-tekst);
  }
  .pris-fiks { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--rom-1); }
  .pris-fiks-ord { display: inline; }
  .pris .sum {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tekst belop";
    border-top: 2px solid var(--farge-marine);
    border-radius: 0;
    background: transparent;
    padding: 14px 0 0;
  }
  .pris .sum td { border-top: 0; }
  .pris .sum .tom { display: none; }
  .pris .sum .sum-tekst { grid-area: tekst; }
  .pris .sum .sum-belop { grid-area: belop; text-align: right; }
  .pris .sum .sum-belop::before { content: none; }
}

/* Eierskap med domene: se eierskap.css (ux-flyt B). */

/* «Be om tilbud» og kvitteringen på den ekte rapportsiden (bit 6). */
.tilbud { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rom-2) var(--rom-3); margin-top: var(--rom-3); }
.tilbud .melding { flex-basis: 100%; margin: 0; }
.tilbud-tekst { flex: 1 1 18rem; margin: 0; color: var(--farge-tekst-dempet); font-size: var(--skrift-str-liten); }
.kvittering { margin: var(--rom-3) 0; }
.kvittering p { margin: 0 0 var(--rom-2); }
.kvittering-liste { margin: 0 0 var(--rom-2); padding-left: var(--rom-4); }

/* Akutte funn øverst i rapporten (bit 13). */
.akutte-funn {
  border-left: 4px solid var(--status-rod-ikon);
  background: var(--status-rod-flate);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.akutte-funn h2 { margin-top: 0; }

/* --- Rapporten som dashbord på nettsiden (ux-flyt PR 7) -------------------------------------
   Samme innhold og rekkefølge som rapport-mal.md. PDF-en har egen CSS (rapport-pdf.css).
   Under 64rem: én kolonne. Fra 64rem: vurderingen til venstre og prisdelen i et fast panel. */
.anbefalingskort {
  border-left: 0; border-radius: var(--radius);
  background: var(--farge-marine); color: var(--farge-hvit);
}
.anbefalingskort p:first-child, .anbefalingskort strong { color: var(--farge-hvit); }

/* Resultat: ti kort. Én kolonne som rader på mobil, to kolonner med kort fra 48rem. */
.punktkort { list-style: none; padding: 0; margin: var(--rom-3) 0; display: grid; gap: 0; }
.punktkort-kort { padding: 12px 0; border-bottom: 1px solid var(--farge-linje); }
.punktkort-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rom-1) var(--rom-2); }
.punktkort-navn {
  margin: 0; font-family: var(--skrift); font-size: var(--skrift-str);
  font-weight: 700; line-height: 1.3; color: var(--farge-tekst);
}
.punktkort-nr { display: inline-block; min-width: 1.5rem; color: var(--farge-tekst-dempet); }
.punktkort .resultat-funn { margin: var(--rom-1) 0 0; font-size: var(--skrift-str-liten); }
.punktkort-mer, .anbefaling-mer { margin-top: var(--rom-2); font-size: var(--skrift-str-liten); }
.punktkort-mer summary, .anbefaling-mer summary {
  cursor: pointer; font-weight: 700; color: var(--farge-lenke);
  min-height: var(--trykkflate); display: flex; align-items: center;
}
.punktkort-mer p, .anbefaling-mer p { margin: var(--rom-1) 0 var(--rom-2); }
@media (min-width: 48rem) {
  .punktkort { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rom-3); }
  .punktkort-kort { padding: var(--rom-3); border: 1px solid var(--farge-linje); border-radius: var(--radius); }
}

/* Fanene lages av rapport-skjerm.js på brede skjermer. Uten dem står delene under hverandre. */
.fanelist {
  display: flex; flex-wrap: wrap; gap: var(--rom-1);
  margin: var(--rom-5) 0 var(--rom-3); padding-top: var(--rom-4);
  border-top: 1px solid var(--farge-linje);
}
.fanelist[hidden] { display: none; }
.fane-knapp {
  min-height: var(--trykkflate); padding: 0 var(--rom-3);
  border: var(--strek) solid var(--farge-linje-sterk); border-radius: var(--radius-pille);
  background: var(--farge-hvit); color: var(--farge-tekst);
  font: inherit; font-weight: 700; font-size: var(--skrift-str-liten); cursor: pointer;
}
.fane-knapp[aria-selected="true"] { background: var(--farge-marine); border-color: var(--farge-marine); color: var(--farge-hvit); }
.faner-aktiv .fane > h3:first-of-type { margin-top: 0; }
.faner-aktiv .fane:focus-visible { outline: 3px solid var(--farge-fokus); outline-offset: 4px; border-radius: var(--radius-liten); }

/* Prisdelen: lista med punkter, sum og «Be om tilbud». */
.prisvalg { margin: var(--rom-3) 0 0; }
.prisvalg-tittel { margin: 0; color: var(--farge-tekst); }
.prisvalg-tittel + p { margin: var(--rom-1) 0 var(--rom-2); }
.prisliste { list-style: none; padding: 0; margin: 0; }
.prisrad {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "boks navn belop" "boks status status";
  gap: var(--rom-1) var(--rom-2); align-items: start;
  padding: 10px var(--rom-3); margin-bottom: var(--rom-2);
  border-radius: var(--radius); background: var(--farge-hvit);
}
.prisrad input[type="checkbox"] {
  grid-area: boks; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0;
  accent-color: var(--farge-marine); cursor: pointer;
}
.prisrad-navn { grid-area: navn; font-weight: 700; color: var(--farge-tekst); cursor: pointer; }
.prisrad-grunnlag { display: block; font-weight: 400; }
.prisrad-status { grid-area: status; }
.prisrad-belop { grid-area: belop; font-weight: 700; color: var(--farge-tekst); }
/* Appsjekk-flyt 2: prisene er estimat til rapporten er sett over. */
.estimat-merke {
  display: block; width: max-content; margin: 0 0 2px auto; padding: 0 5px;
  border: 1px dashed var(--farge-stiplet); border-radius: 3px;
  font-family: var(--skrift-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--farge-tekst-dempet);
}
.estimat-note {
  margin: var(--rom-2) 0 0; padding: var(--rom-2) var(--rom-3); border-radius: var(--radius);
  background: var(--farge-flate); color: var(--farge-tekst); font-size: var(--skrift-str-liten);
}
.prissum {
  display: flex; justify-content: space-between; gap: var(--rom-2);
  margin: var(--rom-2) 0 0; padding-top: var(--rom-2);
  border-top: 2px solid var(--farge-marine); color: var(--farge-tekst);
}
.prispanel .tilbud .knapp { flex: 1 1 100%; }
.prispanel > p:last-child { margin-bottom: 0; }


@media (min-width: 64rem) {
  .rapportside-dash { max-width: var(--bredde-side); }
  .rapportside-dash .rapport { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .hopp-pris { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hopp-pris:focus { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .dash { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--rom-4); align-items: start; }
  .dash-innhold {
    padding: var(--rom-5) 2.75rem; background: var(--farge-kort);
    border-radius: var(--radius-stor); box-shadow: var(--skygge-kort);
  }
  .dash-innhold > :first-child { margin-top: 0; }
  .rapportside-dash .prispanel {
    margin: 0; padding: var(--rom-4); border-radius: var(--radius-stor); box-shadow: var(--skygge-kort);
  }
  .prispanel h2 { margin: 0 0 var(--rom-2); font-size: var(--skrift-str-h3); }
  .prispanel > p, .prispanel .anbefaling-mer { margin: 0 0 var(--rom-2); }
  .prispanel .anbefaling-mer summary { min-height: 2rem; }
  .prisrad { padding: var(--rom-2) 12px; font-size: var(--skrift-str-liten); }
}
/* Fast panel bare når skjermen er høy nok. Lista ruller inne i panelet, mens sum og knapp alltid synes.
   Ved stor zoom (lav høyde) står panelet vanlig, så det aldri dekker innhold. */
@media (min-width: 64rem) and (min-height: 40rem) {
  .rapportside-dash .prispanel {
    position: sticky; top: var(--rom-3);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 2 * var(--rom-3)); overflow-y: auto;
  }
  .prispanel > * { flex: none; }
  .prispanel > .avkrysning { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .prispanel .prisvalg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .prispanel .prisvalg > * { flex: none; }
  .prispanel .prisliste { flex: 1 1 auto; min-height: 8rem; overflow-y: auto; padding-right: var(--rom-1); }
  .prispanel .prissum, .prispanel .tilbud { flex: none; }
}

/* --- Avtalen om retting (bugs feil 2) ------------------------------------------------------
   1A: avtaleteksten og Vedlegg 1 bak lenker i egen boks, åpnes i et vindu over siden.
   3C: boksen «Signer avtalen» med tre steg. 6A: to signaturfelt på den godtatte avtalen. */
.avtale-dokumenter {
  background: var(--farge-kort);
  border: 1px solid var(--farge-linje);
  border-radius: var(--radius);
  padding: var(--rom-2) var(--rom-4);
}
.avtale-dokument {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rom-2) var(--rom-3);
  padding: var(--rom-3) 0;
}
.avtale-dokument + .avtale-dokument { border-top: 1px solid var(--farge-linje); }
.avtale-dokument-ikon { flex-shrink: 0; stroke: var(--farge-stiplet); }
.avtale-dokument-tekst { flex: 1 1 14rem; min-width: 0; }
.avtale-dokument-navn { margin: 0; font-weight: 600; color: var(--farge-tekst); }
.avtale-dokument-meta { margin: 0; font-size: var(--skrift-str-liten); color: var(--farge-tekst-dempet); }
.avtale-dokument-lenke { font-weight: 600; min-height: var(--trykkflate); display: inline-flex; align-items: center; }
.avtale-dokument-hjelp { margin-top: var(--rom-2); }

.vindu {
  width: calc(100% - 2rem); max-width: var(--bredde-innhold); max-height: calc(100vh - 4rem);
  padding: 0; border: 0; border-radius: var(--radius-stor);
  background: var(--farge-kort); color: var(--farge-brodtekst); box-shadow: var(--skygge-kort);
}
.vindu[open] { display: flex; flex-direction: column; }
.vindu::backdrop { background: color-mix(in srgb, var(--farge-marine-mork) 55%, transparent); }
.vindu-topp {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rom-3);
  padding: var(--rom-3) var(--rom-3) var(--rom-3) var(--rom-4); border-bottom: 1px solid var(--farge-linje);
}
.vindu-tittel { font-size: var(--skrift-str-h3); margin: 0; }
.vindu-topp form, .vindu-bunn form { margin: 0; }
.vindu-lukk {
  width: var(--trykkflate); height: var(--trykkflate); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pille); background: var(--farge-flate); color: var(--farge-tekst); cursor: pointer;
}
.vindu-lukk:focus-visible { outline: 3px solid var(--farge-fokus); outline-offset: 3px; }
.vindu-innhold { padding: var(--rom-3) var(--rom-4); overflow: auto; flex: 1 1 auto; }
.vindu-bunn {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rom-2) var(--rom-3);
  padding: var(--rom-2) var(--rom-4); border-top: 1px solid var(--farge-linje); background: var(--farge-bakgrunn);
}

.skjema fieldset.signer {
  margin: var(--rom-5) 0 var(--rom-4); padding: var(--rom-4);
  border: 2px solid var(--farge-marine); border-radius: var(--radius-stor); background: var(--farge-kort);
}
.skjema .signer-tittel {
  font-family: var(--skrift-overskrift); font-size: var(--skrift-str-h2); font-weight: var(--skrift-vekt-underoverskrift);
  color: var(--farge-tekst); letter-spacing: var(--sporing-overskrift); padding: 0 var(--rom-2); margin-left: calc(-1 * var(--rom-2));
}
.signer-ingress { margin: 0 0 var(--rom-4); }
.signer-steg { display: flex; gap: 0.75rem; margin: 0 0 var(--rom-4); }
.signer-steg:last-child { margin-bottom: 0; }
.signer-steg-knapp { align-items: center; }
.signer-nr {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--radius-pille);
  background: var(--farge-flate); color: var(--farge-tekst); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.signer-innhold { flex: 1 1 auto; min-width: 0; }
.signer-innhold .felt:last-child { margin-bottom: 0; }

.signert {
  background: var(--farge-kort); border: 1px solid var(--farge-linje); border-radius: var(--radius-stor);
  padding: var(--rom-4); margin: var(--rom-4) 0 0;
}
.signert-topp {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--rom-2) var(--rom-3);
  margin: 0 0 var(--rom-3);
}
.signert-tittel { font-size: var(--skrift-str-h3); margin: 0; display: flex; align-items: center; gap: var(--rom-2); }
.signert-ikon { color: var(--status-gronn-ikon); flex-shrink: 0; }
.signert-nummer { margin: 0; font-size: var(--skrift-str-liten); color: var(--farge-tekst-dempet); }
.signert-nummer strong { color: var(--farge-tekst); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.signert-felt { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--rom-3); }
.signert-part { margin: 0; border-top: 2px solid var(--farge-marine); padding-top: 0.625rem; }
.signert-part dd { margin: 0; }
.signert-part dt {
  font-size: var(--skrift-str-mini); font-weight: 700; color: var(--farge-tekst-dempet);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.signert-part .signert-navn {
  font-family: var(--skrift-overskrift); font-size: var(--skrift-str-h3); font-weight: var(--skrift-vekt-underoverskrift);
  color: var(--farge-tekst); margin-top: var(--rom-1); overflow-wrap: anywhere;
}
.signert-part .signert-tid { font-size: var(--skrift-str-liten); color: var(--farge-tekst-dempet); margin-top: var(--rom-1); }