/* 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. Status står også som tekst for skjermlesere. */
.stegliste { list-style: none; padding: 0; margin: var(--rom-2) 0 var(--rom-4); }
.steg { display: flex; gap: var(--rom-2); align-items: baseline; padding: var(--rom-1) 0; color: var(--farge-tekst-dempet); }
.steg-merke {
  position: relative; flex: none; width: 1rem; height: 1rem; top: 0.15rem;
  border-radius: var(--radius-liten); border: var(--strek) dashed var(--farge-stiplet);
}
.steg-ferdig { color: var(--farge-tekst); }
.steg-ferdig .steg-merke { background: var(--farge-marine); border: var(--strek) solid var(--farge-marine); }
.steg-ferdig .steg-merke::after {
  content: ""; position: absolute; left: 0.28rem; top: 0.08rem; width: 0.3rem; height: 0.55rem;
  border: solid var(--farge-hvit); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.steg-pagar { color: var(--farge-tekst); font-weight: 600; }
.steg-pagar .steg-merke { border: 2px solid var(--farge-marine); }

.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); }

.resultat td:nth-child(2) { font-weight: 700; color: var(--farge-tekst); }

.resultat .resultat-nr { color: var(--farge-tekst-dempet); font-weight: 700; }

/* 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 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-4);
  padding: var(--rom-3) var(--rom-4);
  border: 2px solid var(--farge-marine);
  border-radius: var(--radius-stor);
  background: var(--farge-hvit);
}
.gjennomgang .stegliste { margin-bottom: 0; }

@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; }
  .resultat, .pris, .resultat tbody, .pris tbody { display: block; }
  .resultat thead, .pris thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .resultat td, .pris td { border-bottom: 0; padding: 0; }

  .resultat tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "nr navn status" "funn funn funn";
    gap: var(--rom-1) var(--rom-2);
    padding: 12px 0;
    border-bottom: 1px solid var(--farge-linje);
  }
  .resultat .resultat-nr { grid-area: nr; min-width: 1.25rem; }
  .resultat .resultat-navn { grid-area: navn; }
  .resultat .status { grid-area: status; }
  .resultat .resultat-funn { grid-area: funn; padding-left: 1.75rem; }

  .side-3 table { background: transparent; }
  .pris tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "punkt punkt" "status fiks" "timer 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-timer { grid-area: timer; }
  .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; }
  .pris-timer::before, .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; }
}