/*  Appspesifikk CSS. Alt som kan uttrykkes med --kd-tokens og .kd-klasser
    gjøres der; dette er bare det som er særegent for feltbruk.

    INGEN MAGISKE TALL. Trenger jeg en verdi som ikke finnes, skal skalaen i
    KonsernDesign endres — ikke skrives et engangstall her.                    */

.sj-app {
  /*  Vannrett luft eies naa av `.kd-wrap` i skallet — se index.html. Sto den
      begge steder, ble den lagt sammen, og innholdet fikk en marg ingen hadde
      bestemt. Loddrett luft trengs fortsatt her.                              */
  padding: var(--kd-space-16) 0;
  /* Plass til bunnlinja + iPhones hjemmeindikator. Uten dette havner siste
     kontrollpunkt under knappene, og det oppdages først i felt. */
  padding-bottom: calc(var(--kd-space-64) + var(--kd-space-48) + env(safe-area-inset-bottom));
  /*  Ingen maksbredde-token finnes i KonsernDesign, og en hardkodet rem her
      ville vært et magisk tall. `ch` følger typografien: 80 tegn er lesbar
      linjelengde, og verdien flytter seg av seg selv hvis skalaen endres.     */
  max-width: 80ch;
  /*  IKKE `auto`. Skallet plasserer alt kolonna: `.kd-wrap` sentrerer sida, og
      skinna staar til venstre. Sentrerte kolonna seg i tillegg inne i
      `.kd-main`, ble det staaende et hull paa ~135 px mellom menyen og
      teksten — maalt i skjermbilde 30.08, ikke resonnert fram.               */
  margin-inline: 0;
}

.sj-laster { color: var(--kd-text-muted); padding: var(--kd-space-32) 0; }

/* ── Synkstripe ─────────────────────────────────────────────────────────── */

.sj-synk {
  position: sticky; top: 0; z-index: 20;
  padding: var(--kd-space-8) var(--kd-space-16);
  font-size: var(--kd-text-sm);
  font-weight: var(--kd-weight-medium);
  text-align: center;
}
.sj-synk--venter  { background: var(--kd-warning-soft);  color: var(--kd-warning-text); }
.sj-synk--offnett { background: var(--kd-sunken);  color: var(--kd-text); }
.sj-synk--feil    { background: var(--kd-danger-soft);   color: var(--kd-danger-text); }
.sj-synk--sender  { background: var(--kd-info-soft);     color: var(--kd-info-text); }

/* ── Bunnlinje ──────────────────────────────────────────────────────────── */

.sj-bunn {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: var(--kd-space-8);
  padding: var(--kd-space-8) var(--kd-space-16);
  padding-bottom: calc(var(--kd-space-8) + env(safe-area-inset-bottom));
  background: var(--kd-surface);
  border-top: var(--kd-stroke-control) solid var(--kd-border-control);
}
.sj-bunn > * { flex: 1; }
.sj-bunn__midt {
  flex: 2; display: grid; place-items: center;
  font-size: var(--kd-text-sm); color: var(--kd-text-muted);
}

/*  FREMDRIFTEN FÅR EGEN LINJE, og det er ikke pynt.

    MÅLT 27.08 i iframe med ekte viewport-bredde: med fire knapper på én linje
    sto de alle på min-innhold og kunne ikke krympe mer —
    59 + 94 + 108 + 84 px, pluss 24 px mellomrom og 32 px kantavstand = 401 px.
    Da falt «Neste» utenfor skjermen på 320, 360 OG 375 px. Bare 390 px gikk
    klar. Den primære handlinga i appen var altså usynlig på de fleste
    telefoner.

    Å barbere piksler ville gjort den brøken («1/8 · 12/44») smalere og enda
    mer kryptisk. Med egen linje er det plass til å skrive hva tallene betyr,
    OG de tre knappene får 285 px av 320 — god margin på alt vi bryr oss om.

    `flex: 1 0 100%` tvinger linjeskiftet; `flex-wrap` over gjør det mulig.   */
.sj-bunn__fremdrift {
  flex: 1 0 100%;
  display: flex; align-items: center; justify-content: center;
  gap: var(--kd-space-8);
  padding: var(--kd-space-4) var(--kd-space-8);
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--kd-text-sm);
  color: var(--kd-text-muted);
}
.sj-bunn__fremdrift:hover { color: var(--kd-text); }
.sj-bunn__fremdrift b { color: var(--kd-text); font-weight: var(--kd-weight-semibold); }

/* ── Kontrollpunkt ──────────────────────────────────────────────────────── */

.sj-punkt + .sj-punkt { margin-top: var(--kd-space-24); }

.sj-punkt__tittel {
  font-weight: var(--kd-weight-semibold);
  margin-bottom: var(--kd-space-4);
}
.sj-punkt__veiledning {
  color: var(--kd-text-muted);
  font-size: var(--kd-text-sm);
  margin-bottom: var(--kd-space-8);
}

/*  Statusknappene. Hansker og sollys: minst 44px høyde er Apples egen
    anbefaling, og den er et gulv — ikke et mål.                             */
.sj-status { display: flex; flex-wrap: wrap; gap: var(--kd-space-4); }
.sj-status > button {
  flex: 1 1 var(--kd-space-64);
  min-height: var(--kd-space-48);
  font-size: var(--kd-text-sm);
}
/*  VALGT ER FYLT, UVALGT ER OMRISS.

    Målt 27.08 i mørk modus: fem fylte knapper ser like ut uansett hvilken som
    er valgt, og en ring i currentColor forsvinner i det grønne fyllet. Fyllet
    må bære informasjonen, ikke en dekorasjon oppå den.

    UVALGT: tonefarget ramme og tekst på appens egen flate. `--kd-*-text` er
    laget for tekst mot flate, så kontrasten er dekket av kontraktens 132 krav.
    VALGT:  fylt med `--kd-*` og tekst i `--kd-*-on` — samme par som
    `.kd-btn--danger` bruker.                                                  */

.sj-status > button {
  background: transparent;
  border-color: currentColor;
}
.sj-status > button[data-tone="good"]    { color: var(--kd-good-text); }
.sj-status > button[data-tone="warning"] { color: var(--kd-warning-text); }
.sj-status > button[data-tone="danger"]  { color: var(--kd-danger-text); }
.sj-status > button[data-tone="noytral"] { color: var(--kd-text-muted); }

.sj-status > button[aria-pressed="true"][data-tone="good"] {
  background: var(--kd-good); color: var(--kd-good-on); border-color: var(--kd-good);
}
.sj-status > button[aria-pressed="true"][data-tone="warning"] {
  background: var(--kd-warning); color: var(--kd-warning-on); border-color: var(--kd-warning);
}
.sj-status > button[aria-pressed="true"][data-tone="danger"] {
  background: var(--kd-danger); color: var(--kd-danger-on); border-color: var(--kd-danger);
}
/*  Nøytral valgt: appens tekstfarge som fyll. «Ikke kontrollert» skal være like
    tydelig valgt som «Funn» — det er et svar, ikke et fravær av svar.         */
.sj-status > button[aria-pressed="true"][data-tone="noytral"] {
  background: var(--kd-text); color: var(--kd-surface); border-color: var(--kd-text);
}

/*  Ikonet er en ANDRE KANAL utover farge. Omtrent 8 % av menn har en form for
    fargesynssvakhet, og grønn mot rød er nettopp det paret som rammes. Ikonet
    kommer fra svarsettet, så det er data — ikke noe motoren finner opp.       */
.sj-status__ikon { margin-inline-end: var(--kd-space-4); font-weight: var(--kd-weight-semibold); }

/* ── Sidefremdrift ──────────────────────────────────────────────────────── */

/*  MÅLT 27.08: med begge på samme rad klemte telleren overskriften til tre
    linjer på 375px, og telleren selv brøt til «side / 1 av / 8». Krom var
    redusert fra 313 til 59 px i mockupen; tre linjer overskrift spiser det opp
    igjen. Telleren står derfor over, der den ikke konkurrerer om bredden.     */
.sj-side { margin-bottom: var(--kd-space-16); }
.sj-side__nr {
  display: block;
  color: var(--kd-text-muted);
  font-size: var(--kd-text-sm);
  margin-bottom: var(--kd-space-2);
}

/* ── Søkbar velger ──────────────────────────────────────────────────────── */

/*  En EKTE combobox som ser ut som .kd-select. Se js/velger.js for hvorfor
    <input list> + <datalist> ikke er godt nok.                              */

.sj-velger { position: relative; }

.sj-velger__inn {
  width: 100%;
  /* Plass til pila vi tegner selv. */
  padding-inline-end: var(--kd-space-32);
}

.sj-velger__pil {
  position: absolute;
  inset-inline-end: var(--kd-space-12);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--kd-text-muted);
}

.sj-velger__liste {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--kd-space-4));
  z-index: var(--kd-z-dropdown, 30);
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--kd-surface);
  border: var(--kd-stroke-hairline, 1px) solid var(--kd-border-control);
  border-radius: var(--kd-radius-md);
  box-shadow: var(--kd-shadow-lg);
}

.sj-velger__rad {
  display: grid;
  gap: var(--kd-space-2);
  /* Trykkflate: samme gulv som statusknappene. Med hanske treffer man ikke
     en 32px rad i en liste på 334 prosjekt. */
  min-height: var(--kd-space-48);
  padding: var(--kd-space-8) var(--kd-space-12);
  cursor: pointer;
}
.sj-velger__rad.er-peker,
.sj-velger__rad:hover { background: var(--kd-accent-soft); }

.sj-velger__tekst { font-weight: var(--kd-weight-medium); }
.sj-velger__under { color: var(--kd-text-muted); font-size: var(--kd-text-sm); }
.sj-velger__tom { padding: var(--kd-space-12); color: var(--kd-text-muted); }

/* ── Funn-kort ──────────────────────────────────────────────────────────── */

/*  Åpnes når et svaralternativ har `utloser`. UTEN DETTE var appen verdiløs:
    brukeren trykket «Funn», og funnet forsvant. Beskrivelsen og bildet ER
    innholdet i en vernerunde — statusen alene sier bare at noe fantes.        */

.sj-funn {
  margin-top: var(--kd-space-8);
  padding: var(--kd-space-12);
  border-inline-start: var(--kd-space-4) solid var(--kd-danger);
  background: var(--kd-sunken);
  border-radius: var(--kd-radius-md);
  display: grid;
  gap: var(--kd-space-8);
}
/*  Kantstripa BAERER arten. Thomas 01.09: «I rapporten er funn rødt og
    observasjon gul, mens positiv observasjon da må være grønn.»

    Fargen står på en stripe, ikke på flata: en grønn eller rød bakgrunn bak
    brødtekst koster kontrast, og rundt 8 % av menn har en form for
    fargeblindhet. Statuslinja nederst i kortet sier det samme med ord.       */
.sj-funn--observasjon { border-inline-start-color: var(--kd-warning); }
.sj-funn--positiv     { border-inline-start-color: var(--kd-good); }

/*  ── MOTTAKERBOKSENE I SENDEBILDET ───────────────────────────────

    Thomas 02.09: adressene sto på én lang linje i ett tekstfelt. Nå er hver
    mottaker en boks med et kryss.

    FLEX-WRAP framfor en kolonne: fem korte adresser tar da to linjer i stedet
    for fem, og lista leses i étt blikk. Bryter av seg selv på telefon, der
    én boks fyller bredden.

    Krysset får space-48, samme gulv som statusknappene lenger opp i fila —
    Apples anbefaling er minst 44 px, og skalaen har 40 og 48. `kd-chip__remove`
    fra designsystemet er 32 px og bygget for mus; her skal det treffes ute på
    et prosjekt med hansker.

    MÅLT på 375 px etter at det sto space-32: krysset ble 32×32, altså under
    gulvet — og kommentaren min lovte 44. Det er verdt å merke seg at en
    kommentar som lyver er verre enn ingen kommentar.                        */
.sj-mottakere {
  display: flex; flex-wrap: wrap;
  gap: var(--kd-space-8);
  margin: var(--kd-space-8) 0;
}
.sj-mottakere .kd-chip { max-width: 100%; }
.sj-mottaker__tekst {
  display: flex; flex-direction: column; line-height: 1.25;
  min-width: 0; overflow-wrap: anywhere;
}
.sj-mottaker__tekst small { opacity: .75; font-size: var(--kd-text-xs); }
.sj-mottakere .kd-chip__remove {
  min-width: var(--kd-space-48); min-height: var(--kd-space-48);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--kd-radius-pill);
}
.sj-mottakere .kd-chip__remove:hover { background: var(--kd-danger-soft); }

/*  «Legg tilbake» er en knapp som skal LESE som løpende tekst — den står inne
    i en setning om hva som er tatt bort, og en ordentlig knapp der ville
    konkurrert med mottakerboksene den handler om.                            */
.sj-tilbake {
  border: none; background: none; padding: 0 var(--kd-space-4);
  color: var(--kd-accent-text); cursor: pointer;
  font: inherit; text-decoration: underline;
}

.sj-funn textarea.kd-input { min-height: var(--kd-space-64); resize: vertical; }

/*  «Lagret»-linja står MELLOM funnkortet og legg-til-knappen, og skal høre til
    kortet over — ikke til knappen under. Derfor tett opp mot kortet og luft
    ned mot knappen.                                                          */
.sj-funn__lagret {
  margin: var(--kd-space-4) 0 var(--kd-space-12);
  display: flex; align-items: center; gap: var(--kd-space-6);
}
/*  Tegnet direkte framfor en CSS-escape. MÅLT på 375 px: escapen rendret som
    «¹3» — den ble tolket som oktal på vei inn i fila og aldri som CSS. Fila
    er UTF-8; da er tegnet selv både kortere og entydig.                       */
.sj-funn__lagret::before { content: '✓'; color: var(--kd-good-text); }

.sj-funn__bilder { display: flex; flex-wrap: wrap; gap: var(--kd-space-8); }
.sj-funn__bilde {
  position: relative;
  width: var(--kd-space-64); height: var(--kd-space-64);
  border-radius: var(--kd-radius-sm);
  object-fit: cover;
}
.sj-funn__mangler {
  color: var(--kd-danger-text);
  font-size: var(--kd-text-sm);
  font-weight: var(--kd-weight-medium);
}

/* ── Deltakere ──────────────────────────────────────────────────────────── */

/*  FJERNET 29.08: en eldre `.sj-deltaker`-regel med `display: flex`.

    Den var skrevet for et tidligere deltakerkort som var ÉN rad. Markupen ble
    seinere stablet — navn, rolle-nedtrekk og opprop under hverandre — men
    regelen ble staaende, og fila hadde da TO definisjoner av samme klasse.

    Utfallet, maalt paa 375 px: hele kortet ble en flex-rad, rolle-nedtrekket
    ble klemt til 26 px (uleselig og ubrukelig), og de tre oppropsknappene sto
    utenfor skjermkanten. Deltakerskjermen rullet sidelengs.

    Den andre definisjonen ligger under «Deltakervisningen» og er den som
    gjelder. To regler for samme klasse i samme fil er noe man ikke ser ved aa
    lese den ene.                                                              */

/*  Bildemerke: er bildet lagret i Azure, eller ligger det bare på enheten?

    Uten dette skillet vet ingen om bildet er trygt. Et bilde fra en vernerunde
    kan ikke gjenskapes — situasjonen er borte — så «på enheten» og «lagret» er
    to helt ulike tilstander.                                                  */
.sj-funn__ramme { position: relative; display: inline-block; }
.sj-funn__merke {
  position: absolute;
  inset-block-end: var(--kd-space-2);
  inset-inline-end: var(--kd-space-2);
  display: grid; place-items: center;
  min-width: var(--kd-space-16); min-height: var(--kd-space-16);
  padding-inline: var(--kd-space-2);
  border-radius: var(--kd-radius-sm);
  font-size: var(--kd-text-sm);
  font-weight: var(--kd-weight-semibold);
  background: var(--kd-warning); color: var(--kd-warning-on);
}
.sj-funn__merke.er-oppe { background: var(--kd-good); color: var(--kd-good-on); }

/* ── Totalinntrykk ──────────────────────────────────────────────────────── */

/*  Skalaen er tallknapper framfor en glider: en glider er umulig aa treffe
    presist med hanske, og verdien er ett av fem navngitte nivaa — ikke et
    kontinuum.                                                                */
.sj-inntrykk {
  margin-top: var(--kd-space-32);
  padding-top: var(--kd-space-16);
  border-top: var(--kd-stroke-control) solid var(--kd-border-control);
}
.sj-inntrykk__felt + .sj-inntrykk__felt { margin-top: var(--kd-space-24); }
.sj-inntrykk__skala { display: flex; gap: var(--kd-space-4); margin-top: var(--kd-space-8); }
.sj-inntrykk__skala > button {
  flex: 1;
  min-height: var(--kd-space-48);
  font-weight: var(--kd-weight-semibold);
}
.sj-inntrykk__ord {
  margin-top: var(--kd-space-4);
  color: var(--kd-text-muted);
  font-size: var(--kd-text-sm);
}

/* ── Seksjonsark ────────────────────────────────────────────────────────── */

/*  Bunnark framfor sideskinne PÅ TELEFON: 8 sider trenger ikke være synlige
    hele tiden, men de må være ETT trykk unna. En permanent skinne ville spist
    bredde på 375px — og krommet ble redusert fra 313 til 59 px for innholdet.

    ── PÅ BRED SKJERM ER DET MOTSATT (29.08) ─────────────────────────────────

    Anders: «Navigere mellom de ulike seksjonene i spørsmålene (hovedtema) i
    vernerunden hadde vært fint, slik du har laget til i mockup.» Han satt på
    PC. Innholdet fantes bak «Seksjoner ▾» i bunnlinja — han fant det ikke.

    Argumentet over gjelder 375px, ikke 1400px. Der er bredden ikke knapp, og
    en meny som må åpnes er en meny som ikke brukes.

    SAMME MARKUP i begge tilfeller; det er bare CSS som skiller. To utgaver av
    samme meny ville drifte fra hverandre.                                     */

.sj-ark-bak {
  position: fixed; inset: 0; z-index: 40;
  background: rgb(0 0 0 / 55%);
}

.sj-ark {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 41;
  max-height: 85vh; overflow-y: auto;
  padding: var(--kd-space-16);
  padding-bottom: calc(var(--kd-space-16) + env(safe-area-inset-bottom));
  background: var(--kd-surface);
  border-top-left-radius: var(--kd-radius-lg);
  border-top-right-radius: var(--kd-radius-lg);
  box-shadow: var(--kd-shadow-lg);
}

.sj-ark__topp {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kd-space-8); margin-bottom: var(--kd-space-12);
}

.sj-arkrad {
  display: flex; align-items: center; gap: var(--kd-space-12);
  width: 100%;
  /* Samme trykkflate-gulv som statusknappene. En liste med 8 rader treffes
     ikke med hanske om radene er 32px. */
  min-height: var(--kd-space-48);
  padding: var(--kd-space-8) var(--kd-space-12);
  text-align: start;
  background: transparent;
  border: var(--kd-stroke-control) solid transparent;
  border-radius: var(--kd-radius-md);
  color: var(--kd-text);
  font: inherit;
  cursor: pointer;
}
.sj-arkrad:hover { background: var(--kd-sunken); }
.sj-arkrad.er-valgt {
  border-color: var(--kd-border-control);
  background: var(--kd-sunken);
}

.sj-arkrad__nr {
  display: grid; place-items: center;
  min-width: var(--kd-space-24);
  color: var(--kd-text-muted);
  font-variant-numeric: tabular-nums;
}
.sj-arkrad__navn { flex: 1; display: grid; gap: var(--kd-space-2); }
.sj-arkrad__navn small { display: block; }

.sj-navtall {
  color: var(--kd-text-muted);
  font-size: var(--kd-text-sm);
  font-variant-numeric: tabular-nums;
}
.sj-navtall.er-full { color: var(--kd-good-text); font-weight: var(--kd-weight-semibold); }

.sj-ark__bryter {
  display: flex; align-items: center; gap: var(--kd-space-8);
  min-height: var(--kd-space-48);
  margin-top: var(--kd-space-16);
  padding-top: var(--kd-space-12);
  border-top: var(--kd-stroke-control) solid var(--kd-border-control);
}

/* ── Rapport ────────────────────────────────────────────────────────────── */

/*  Tallene står øverst fordi det er dem noen faktisk leser. Djupevik-referatet
    så gjennomført ut helt til man leste at 33 av 44 sto som «ikke kontrollert»
    — det tallet skal ikke være noe man må lete etter.                         */
.sj-rapport__tall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kd-space-64), 1fr));
  gap: var(--kd-space-8);
  margin-block: var(--kd-space-16);
}
.sj-tall {
  padding: var(--kd-space-8);
  border-radius: var(--kd-radius-md);
  background: var(--kd-sunken);
  text-align: center;
}
.sj-tall__verdi {
  display: block;
  font-size: var(--kd-text-lg);
  font-weight: var(--kd-weight-semibold);
  font-variant-numeric: tabular-nums;
}
/*  `--kd-text-secondary`, IKKE `--kd-text-muted`.

    MAALT i lys modus 28.08 mot ekte data: muted paa `--kd-sunken` gav 4,35:1.
    AA krever 4,5 for liten tekst, saa etiketten laa akkurat under — og det er
    etiketten som sier HVA tallet betyr. Et tall uten lesbar etikett er verre
    enn ingen rute.

    Muted er riktig for tekst man kan hoppe over. Dette er ikke det.
    Moerk modus var greit (6,81:1), saa feilen fantes bare i den ene.          */
.sj-tall__navn {
  display: block;
  font-size: var(--kd-text-sm);
  color: var(--kd-text-secondary);
}
.sj-tall--good .sj-tall__verdi    { color: var(--kd-good-text); }
.sj-tall--warning .sj-tall__verdi { color: var(--kd-warning-text); }

/*  Tabellen kan bli bred. Den ruller i sin egen boks, ikke i sida — ellers
    sklir hele skjermen sidelengs hver gang man bommer med tommelen.           */
.sj-tabellramme { overflow-x: auto; margin-block: var(--kd-space-8); }
.sj-tabellramme tr.er-utenfor { opacity: 0.6; }

/* ── Bunnlinja på telefon ─────────────────────────────────────────────────── */

/*  KonsernDesign setter `.kd-btn { width: 100% }` under 540 px — en enslig
    knapp skal fylle bredden — med en unntaksliste for radbeholdere:
    .kd-row, .kd-topbar, .kd-toolbar, .kd-card__head, .kd-dialog__actions.

    Bunnlinja ER en slik radbeholder, men klassen er vår, så unntaket må
    gjentas her.

    MÅLT 27.08 ved 390 px, ikke resonnert fram: uten dette ble ↩-knappen 468
    av 468 tilgjengelige piksler. `flex: 0 0 auto` leser `width` som
    flex-basis, og `shrink: 0` nektet å gi plassen tilbake — så Forrige,
    seksjonsmenyen og Neste sto på x=492, 594 og 704, utenfor skjermen.
    Thomas så bare pila.

    Feilen fantes BARE under 540 px. Skjermbildene mine var bredere.          */
@media (max-width: 540px) {
  .sj-bunn > .kd-btn { width: auto; }
}

/* ── Bildeknappene ────────────────────────────────────────────────────────── */

/*  To knapper, ikke én. Se kommentaren over funnKort i app.js: nettleserens
    egen velger gir enten bare kamera (med `capture`) eller bare galleri (uten)
    — avhengig av OS og versjon. Da må appen spørre selv.                     */
.sj-funn__legg { margin-top: var(--kd-space-8); }
.sj-funn__legg > .kd-btn { flex: 1; justify-content: center; }

/* ── Versjonsmarkør ───────────────────────────────────────────────────────── */

/*  Liten, men den skal ALLTID være der.

    «Kjører jeg gammel versjon?» er et spørsmål ingen skal måtte gjette på i
    felt — og for en cache-først PWA er det et reelt spørsmål, ikke paranoia.
    Teksten settes av den service workeren som faktisk betjener forespørslene,
    så den svarer på hva som kjører, ikke hva som er rullet ut.

    Øverst til høyre fordi bunnlinja er fast plassert og fordi synkstripa —
    som er viktigere — eier toppen på full bredde og har høyere z-index.
    `pointer-events: none` slik at den aldri stjeler et trykk fra en hanske.  */
.sj-versjon {
  position: fixed; top: 0; right: 0; z-index: 10;
  padding: var(--kd-space-4) var(--kd-space-8);
  font-size: var(--kd-text-xs);
  color: var(--kd-text-muted);
  pointer-events: none;
}

/* ── Arven: åpne funn fra tidligere runder ────────────────────────────────── */

/*  Øverst på første side, fordi det er der man går forbi dem. En liste man må
    lete etter blir ikke sjekket.

    Knappene ligger i `.sj-status`, som bærer fyll-mot-omriss-logikken for
    valgt tilstand. Ikke gjenta den her — da kan den bli glemt neste gang.    */
.sj-arv { margin-bottom: var(--kd-space-24); }
.sj-arv__hode {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--kd-space-8); margin-bottom: var(--kd-space-4);
}
.sj-arv--ukjent { border-left: var(--kd-space-4) solid var(--kd-warning-text); }
.sj-arv__advarsel {
  font-size: var(--kd-text-sm);
  color: var(--kd-warning-text);
  background: var(--kd-warning-soft);
  padding: var(--kd-space-8) var(--kd-space-12);
  border-radius: var(--kd-radius-sm);
  margin: var(--kd-space-8) 0 0;
}
.sj-arv__post {
  border-top: var(--kd-stroke-control) solid var(--kd-border-control);
  padding-top: var(--kd-space-12);
  margin-top: var(--kd-space-12);
}
/*  INGEN DEMPING AV SJEKKEDE RADER.

    Første utkast satte `opacity: .72` på en rad som var sjekket. Sett på
    skjermen gjorde det bare et HMS-funn vanskeligere å lese — og signalet
    finnes alt to steder som er tydeligere: merket «N ikke sjekket» i hodet, og
    at en usjekket rad har BEGGE knappene som omriss.

    Å dempe innhold for å signalisere framdrift er å betale med lesbarhet for
    noe man alt har fått gratis.                                              */
.sj-arv__meta {
  font-size: var(--kd-text-xs);
  color: var(--kd-text-muted);
  margin-bottom: var(--kd-space-4);
}
.sj-arv__gjenganger { color: var(--kd-danger-text); }
.sj-arv__punkt {
  font-weight: var(--kd-weight-semibold);
  margin-bottom: var(--kd-space-4);
}
.sj-arv__valg { margin-top: var(--kd-space-8); }

/* ── Deltakerkort ─────────────────────────────────────────────────────────── */

/*  Var en <li> med navn og rolle på én linje. Ble et kort da rolle og opprop
    kom inn: tre knapper og en nedtrekk får ikke plass på en listelinje ved
    375 px, og et opprop man må zoome for å treffe blir ikke brukt.           */
.sj-deltaker { margin-top: var(--kd-space-8); }
.sj-deltaker__rad {
  display: flex; align-items: center; gap: var(--kd-space-8);
  justify-content: space-between;
  margin-bottom: var(--kd-space-8);
}
.sj-deltaker__navn { font-weight: var(--kd-weight-semibold); }
.sj-deltaker .kd-label { margin-top: var(--kd-space-8); display: block; }

/* ── Detaljer om runden (akse 6b) ─────────────────────────────────────────── */

.sj-detaljer { margin-bottom: var(--kd-space-16); }
.sj-detaljer .kd-label { margin-top: var(--kd-space-12); display: block; }
.sj-detaljer > strong { display: block; margin-bottom: var(--kd-space-4); }
.sj-detaljer .kd-text-sm { margin-top: var(--kd-space-4); }
/*  Et felt appen ikke kan tegne skal SES. Et felt Anders har lagt inn i malen
    og som stille forsvinner, er verre enn en synlig mangel.                  */
.sj-detaljer__ukjent {
  font-size: var(--kd-text-sm);
  color: var(--kd-warning-text);
  background: var(--kd-warning-soft);
  padding: var(--kd-space-8) var(--kd-space-12);
  border-radius: var(--kd-radius-sm);
  margin-top: var(--kd-space-8);
}

/* ── Sendevisningen ───────────────────────────────────────────────────────── */

.sj-send__advarsel {
  font-size: var(--kd-text-sm);
  color: var(--kd-warning-text);
  background: var(--kd-warning-soft);
  border-left: var(--kd-space-4) solid var(--kd-warning-text);
  padding: var(--kd-space-8) var(--kd-space-12);
  border-radius: var(--kd-radius-sm);
  margin: var(--kd-space-12) 0;
}

/*  Feilmeldinger kan ha flere avsnitt. Uten `pre-line` ble en flerlinjes
    melding en vegg av tekst — og en feilmelding ingen leser er like ubrukelig
    som ingen melding.                                                        */
.sj-feil__tekst { white-space: pre-line; }

/*  Diagnoseutskrift. `pre` fordi linjene er strukturerte og skal kunne leses
    opp eller kopieres i sin helhet — ombrekking ville blandet dem sammen.    */
.sj-feil__diag {
  margin-top: var(--kd-space-12);
  padding: var(--kd-space-12);
  background: var(--kd-sunken);
  border-radius: var(--kd-radius-sm);
  font-family: var(--kd-font-mono);
  font-size: var(--kd-text-xs);
  color: var(--kd-text);
  white-space: pre-wrap;
  overflow-x: auto;
}

/*  ── RUNDERAD ──────────────────────────────────────────────────────────────

    Oversikten bruker `.kd-btn` for hver runde. Det er RIKTIG interaksjon — hele
    rada er trykkbar — men feil form: designsystemets knapp har
    `white-space: nowrap`, fordi en knapp har kort etikett.

    En runde heter «Vernerunde – anlegg — 250236 Rv. 13 Lovraeide- Rødsliene -
    Risa». MAALT 29.08 paa 375 px: knappen ble 567 px inne i en 333 px
    beholder, og HELE SIDA rullet sidelengs. Appen brukes paa telefon i felt.

    Regelen i designsystemet er ikke feil — bruken var det. Derfor en egen
    radklasse framfor en overstyring av `.kd-btn` i sin helhet: knapper ellers i
    appen skal fortsatt ikke brekke etiketten sin.

    Kandidat for KonsernDesign som `.kd-btn--rad`. En full bredde-rad med
    brytende tekst er ikke noe bare denne appen trenger — samme form dukket opp
    i saken med `.kd-btn` under 540 px.                                        */
.sj-rad {
  width: 100%;
  justify-content: flex-start;
  white-space: normal;
  text-align: start;
  gap: var(--kd-space-12);
}

/*  Tekstkolonna. `min-width: 0` er det som faktisk lar flex-barnet krympe
    under sitt eget innhold — uten den fortsetter den aa presse rada bredere,
    og `white-space: normal` alene hjelper ikke.                              */
.sj-rad__tekst {
  flex: 1;
  min-width: 0;
  text-align: start;
  overflow-wrap: anywhere;
}

/*  Merket til hoeyre — antall besvart, loepenummer. Skal ikke krympe bort naar
    tittelen er lang, og skal ikke brekke midt i «34 besvart».                */
.sj-rad__merke { flex: 0 0 auto; white-space: nowrap; }

/* ── Oversikter på tvers av runder ────────────────────────────────────────── */

/*  Åpne funn øverst på prosjektsida. Framhevet med kantfarge framfor fylt
    bakgrunn: et åpent funn er ikke en FEIL, det er noe som står igjen — og en
    rød flate ville lest som at prosjektet er i trøbbel.                       */
.sj-aapne {
  border-inline-start: var(--kd-space-4) solid var(--kd-warning);
  margin-block: var(--kd-space-16);
}
.sj-aapne__liste {
  margin: var(--kd-space-8) 0 0;
  padding-inline-start: var(--kd-space-20);
}
.sj-aapne__liste li { margin-bottom: var(--kd-space-8); }
.sj-aapne__liste small { display: block; }


/* ── Seksjonsmenyen som fast skinne på bred skjerm ────────────────────────── */

/*  Under 1024px: arket er skjult til det åpnes. Over: alltid synlig som en
    kolonne til venstre, og bunnlinjas «Seksjoner»-knapp er overflødig.

    1024 er valgt fordi det er der to kolonner faktisk får plass: skinna på
    18rem pluss innholdets 80ch. Under det ville skinna stjålet fra teksten,
    som er problemet den skulle løse.                                          */
@media (max-width: 1023px) {
  body:not([data-ark-aapent]) .sj-ark,
  body:not([data-ark-aapent]) .sj-ark-bak { display: none; }
}

@media (min-width: 1024px) {
  .sj-ark-bak { display: none; }

  .sj-ark {
    position: fixed;
    inset-block: 0 auto;
    inset-inline-start: 0;
    inline-size: 18rem;
    block-size: 100dvh;
    max-height: none;
    overflow-y: auto;
    border-radius: 0;
    border-inline-end: 1px solid var(--kd-border);
    box-shadow: none;
    padding-bottom: var(--kd-space-24);
  }

  /*  «Lukk» hører til et ark som kan lukkes. En skinne som alltid er der har
      ingenting å lukke, og knappen ville bare vært forvirrende.               */
  .sj-ark__topp [data-lukk-ark] { display: none; }

  /*  Innholdet flyttes til side for skinna. `.sj-app` har alt en maksbredde i
      ch; marginen legges utenpå den.

      `:has(.sj-ark)` — IKKE `.sj-app` alene. Uten betingelsen ble HVER visning
      dyttet 18rem til høyre på brede skjermer, også de som ikke har noen
      skinne: oversikten, prosjekter, maler. Målt 30.08 da hovedmenyen kom inn
      — innholdet sto 288 px fra menyen med ingenting imellom.

      Feilen var der fra før; den ble bare synlig da noe annet la seg til
      venstre og gjorde hullet umulig å overse.                                */
  .sj-app:has(.sj-ark) { margin-inline-start: 18rem; }

  /*  Samme betingelse: bunnlinja rykker bare inn naar skinna faktisk staar
      der. Paa referatet finnes ingen skinne, og da skal den ikke rykke inn. */
  body:has(.sj-ark) .sj-bunn { padding-inline-start: calc(18rem + var(--kd-space-16)); }

  /*  Fremdriftsknappen i bunnlinja beholdes — den viser «12 av 44 besvart»,
      som er tall man vil se uansett. Men den skal ikke love en meny som alt
      står åpen ved siden av.                                                  */
  .sj-bunn__fremdrift .sj-bunn__arkhint { display: none; }
}

/*  Slettknapp på et bilde i funnkortet. Uten den satt brukeren fast: et funn
    med bilde kan ikke fjernes, og bildet kunne ikke fjernes heller.

    Øverst til HØYRE, mens opplastingsmerket står nederst til høyre — to
    kontroller i samme hjørne ville blitt truffet feil med hanske.             */
.sj-funn__slett {
  position: absolute;
  inset-block-start: var(--kd-space-2);
  inset-inline-end: var(--kd-space-2);
  display: grid; place-items: center;
  /* Samme trykkflate-gulv som ellers. Et 16px kryss treffes ikke ute. */
  min-width: var(--kd-space-32); min-height: var(--kd-space-32);
  border: none; border-radius: var(--kd-radius-sm);
  background: var(--kd-scrim);
  color: #fff;
  font-size: var(--kd-text-lg);
  line-height: 1;
  cursor: pointer;
}
.sj-funn__slett:hover { background: var(--kd-danger); }

/*  «Utført på stedet» — avkryssing med forklaring under.

    Ingen egne tall: avstandene er --kd-space-tokens, og teksten arver
    typografien. `align-items: start` fordi avkryssingsboksen skal stå på linje
    med FØRSTE tekstlinje, ikke midt i en tolinjers forklaring.                */
.sj-lukket {
  display: flex;
  align-items: start;
  gap: var(--kd-space-8);
  margin-top: var(--kd-space-8);
  cursor: pointer;
}
.sj-lukket input { margin-top: var(--kd-space-2); flex: none; }
.sj-lukket small { display: block; }

/*  «Legg til funn» — skilt fra kortene over med luft, ikke med en strek.
    Flere streker i et skjema gjør at ingen av dem betyr noe.                  */
.sj-funn__flere { margin: var(--kd-space-8) 0 var(--kd-space-16); }

/*  Et kontrollpunkt i maleditoren: tittel, veiledning og «Fjern».

    `grid` framfor `flex` fordi de to feltene skal ha ULIK bredde og likevel
    stå i kolonner nedover hele lista. Med flex ville hver rad funnet sin egen
    fordeling, og lista sett ujevn.

    På smal skjerm faller de i stabel — to tekstfelt side om side under 500 px
    gir plass til fire tegn hver.                                              */
.sj-malpunkt {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: var(--kd-space-8);
  align-items: center;
  margin-block: var(--kd-space-8);
}
@media (max-width: 700px) {
  .sj-malpunkt { grid-template-columns: 1fr; }
}

/*  ── TRE KLASSER SOM HØRER TIL DENNE APPEN, IKKE TIL DESIGNSYSTEMET ────────

    Målt 31.08: appen brukte 160 klassenavn som ikke fantes — `kd-h3`, `kd-h4`,
    `kd-text-sm`, `kd-text-muted`. Jeg hadde skrevet TOKENNAVN som klassenavn.
    `--kd-text-muted` er en token; `.kd-muted` er klassen. De 160 er nå byttet
    til `kd-title`/`kd-heading`/`kd-subhead`/`kd-small`/`kd-faint`.

    De tre under fantes heller ikke, men de er reelle behov i denne appen. De
    får `sj-`-prefiks med vilje: `kd-` skal bety «kommer fra designsystemet».
    Trenger en annen app det samme, hører de opp i KonsernDesign — ikke her.
    Ingen tall, bare tokens.                                                  */

.sj-kort--fare {
  border-color: var(--kd-danger);
  background: var(--kd-danger-soft);
  color: var(--kd-danger-text);
}
.sj-rad--mellom { justify-content: space-between; }
.sj-tekst--ok   { color: var(--kd-good-text); }

/*  ── VERTIKAL RYTME PÅ OVERSKRIFTER ────────────────────────────────────────

    `.kd-title`/`.kd-heading`/`.kd-subhead` har `margin: 0` fra designsystemet,
    og `kd-core.css` er REN TOKENFIL — ingen elementreset. Så lenge appen brukte
    `kd-h3`/`kd-h4` (klasser som ikke fantes) beholdt overskriftene nettleserens
    egen margin. Byttet til de ekte klassene fjernet den, og 20 av 38
    overskrifter hadde ingen egen avstand.

    Én regel her framfor 20 inline-marginer. De 18 som allerede har
    `style="margin-top:…"` vinner på spesifisitet og beholder sin verdi.        */

.sj-app :is(h1, h2, h3, h4) + *,
.sj-app :is(.kd-title, .kd-heading, .kd-subhead) + * { margin-top: var(--kd-space-8); }
.sj-app * + :is(.kd-title, .kd-heading, .kd-subhead) { margin-top: var(--kd-space-24); }

/*  ── HANDLINGSGRUPPA I MALLISTA ────────────────────────────────────────────

    Kopier · Rediger · Slett hører sammen og skal bryte som én enhet. Uten
    dette bryter de enkeltvis på en telefon, og «Slett» — den røde — havner
    alene på en linje uten det den gjelder for i syne.

    `flex: 0 0 auto` på normal bredde, hele linja under 540 px. Bruddpunktet er
    designsystemets eget (se components.css, der `.kd-btn` går full bredde
    under samme grense), ikke et tall jeg fant på.                             */

.sj-malhandlinger { flex: 0 0 auto; gap: var(--kd-space-8); }

@media (max-width: 540px) {
  .sj-malhandlinger { flex: 1 0 100%; }
  /*  Designsystemet gir `.kd-btn` full bredde under 540 px og gjør unntak for
      direkte barn av `.kd-row`. Denne gruppa ER en `.kd-row`, så unntaket
      gjelder — men det måtte gjentas for `sj-`-varianten sist gang også
      (se kd_btn_full_bredde_under_540). Her holder det at klassen er med.     */
  .sj-malhandlinger > .kd-btn { flex: 1 1 auto; width: auto; }
}

/*  ── FARGESKALA PÅ TOTALINNTRYKK ───────────────────────────────────────────

    ANDERS 31.08 kl. 14:16: «Kan gjerne legg på noe fareger eller annet som
    hjelper leser å se at 5 er bra score og at 1 er dårlig. F.eks. Fargeskala
    fra 1 rød til 3 gul til 5 som er grønn.»

    UVALGT er `-soft` med `-text` på: en svak flate med tekstfargen som holder
    kontrast mot den. VALGT er full farge med `-on`. Det er designsystemets egne
    par, ikke blandinger jeg har funnet på — de er kontrastsjekket i
    tokens-bygget, og det er hele grunnen til å bruke dem framfor å velge en
    rødtone som «ser riktig ut».

    Trinnet beholder en synlig kant også når det er valgt. Fem fylte flater
    inntil hverandre uten skille leses som ett felt, og da ser man ikke hvilket
    som er trykket — som er det ene knappene skal vise.                       */

.sj-inntrykk__trinn--daarlig { background: var(--kd-danger-soft);  color: var(--kd-danger-text); }
.sj-inntrykk__trinn--midt    { background: var(--kd-warning-soft); color: var(--kd-warning-text); }
.sj-inntrykk__trinn--bra     { background: var(--kd-good-soft);    color: var(--kd-good-text); }

.sj-inntrykk__trinn.er-valgt {
  border-color: currentColor;
  box-shadow: inset 0 0 0 var(--kd-stroke-control) currentColor;
}
.sj-inntrykk__trinn--daarlig.er-valgt { background: var(--kd-danger);  color: var(--kd-danger-on); }
.sj-inntrykk__trinn--midt.er-valgt    { background: var(--kd-warning); color: var(--kd-warning-on); }
.sj-inntrykk__trinn--bra.er-valgt     { background: var(--kd-good);    color: var(--kd-good-on); }

/*  Kravet skal SES, ikke bare stå. Et felt som mangler får en kant i
    varselfargen — samme signal som funnkortene bruker, så det leses uten
    forklaring.                                                              */
.sj-inntrykk__krav { color: var(--kd-warning-text); }
.sj-inntrykk__felt--mangler {
  border-left: var(--kd-stroke-control) solid var(--kd-warning);
  padding-left: var(--kd-space-12);
}

/*  ── FARGET TEGN PER MALTYPE ───────────────────────────────────────────────

    ANDERS 31.08 kl. 18:50: «ulike farger på vernerunde anlegg, vernerunde DOV
    og Ledelsesinspeksjon, slik at det var lett å se de ulike inpseksjonene.
    Klarer du dette, samtidig som at det ser "clean" ut?»

    Et lite fylt tegn, ikke en farget rad. En liste der hver rad har egen
    bakgrunnsfarge blir en fargekartlegging man må lære; et tegn leses som en
    kategori og lista holder seg rolig.

    Fargene er designsystemets aksenttoner — accent, info, good, warning — i den
    rekkefølgen malene kommer fra serveren. Ingen nye verdier: de er
    kontrastsjekket i tokens-bygget. En femte mal ville trengt en femte farge
    ingen har vurdert, så `% 4` gjenbruker framfor å finne på.

    `flex-shrink: 0` fordi et tegn som klemmes flatt av en lang tittel er verre
    enn ingen tegn. `vertical-align` framfor flex på raden: raden er en knapp
    med tekst inni, og et flex-bytte der ville flyttet alt annet.             */

.sj-maltegn {
  display: inline-block;
  flex-shrink: 0;
  width: var(--kd-space-8);
  height: var(--kd-space-8);
  margin-right: var(--kd-space-8);
  border-radius: var(--kd-radius-pill);
  vertical-align: baseline;
  background: var(--kd-text-muted);
}
/*  REKKEFØLGEN ER MÅLT, IKKE VALGT PÅ FØLELSE. Første forsøk var accent, info,
    good, warning — og på skjermbildet var tegn 0 og 2 nesten samme farge:
    accent er #6dada2 og good #60bc71 i mørk modus, altså dempet turkis mot
    grønn. Anders ba om at typene skal være LETTE å skille.

    Nå: blå, amber, grønn — tre toner ingen forveksler. Turkis kommer som fjerde
    og er den eneste som ligger nær grønn; det biter først ved fire maler, og da
    er en ordentlig palettbeslutning uansett på tid.

    Rødt er utelatt med vilje. Det betyr «problem» overalt ellers i appen, og
    som kategorimerke ville det sagt noe om malen som ikke er sant.           */
.sj-maltegn--0 { background: var(--kd-info); }
.sj-maltegn--1 { background: var(--kd-warning); }
.sj-maltegn--2 { background: var(--kd-good); }
.sj-maltegn--3 { background: var(--kd-accent); }