/* Dokument-lesevisning — komponenter/dokument-panel.js + dokument-visning.js.
   To deler: dokumentlista (.dokliste-*) og selve dokumentet (.dok-les).

   Lesevisningen er bevisst LUFTIGERE enn appen ellers (05 §10.1 «tett vs luftig —
   kontekst styrer»): en rutine leses fra topp til bunn, den skannes ikke som en
   tabell. Typografien speiler editorens ark, så det man skrev ser ut som det man
   leser. */

/* ---------------------------- Dokumentlista ----------------------------

   NB prefiks: klassene her heter `dokliste-*`, ikke `dok-gruppe`/`dok-rad`.
   `.dok-gruppe` er OPPTATT av matrisens kolonne-header i dokumentasjon.css
   (text-align:center + uppercase + liten dempet skrift). Gjenbrukte vi navnet,
   arvet panelet hele den stilen og dokumenttitlene ble sentrerte versaler. */

.dokliste-gruppe { margin-bottom: var(--avstand-4); }

.dokliste-gruppe__topp {
  display: flex;
  align-items: baseline;
  gap: var(--avstand-2);
  margin-bottom: var(--avstand-2);
}

.dokliste-gruppe__navn { font-weight: 600; font-size: var(--font-base); color: var(--farge-tekst); }

/* Antall vises bare når en type har flere dokumenter — ellers er «1» støy. */
.dokliste-gruppe__antall {
  font-size: 11px;
  color: var(--farge-tekst-dempet);
  background: var(--farge-overflate);
  border: var(--kant);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
}

.dokliste-gruppe__begrunnelse {
  margin: 0;
  font-size: var(--font-liten);
  color: var(--farge-tekst-dempet);
  padding-left: var(--avstand-3);
  border-left: 2px solid var(--farge-kant);
}

.dokliste-gruppe--tom .dokliste-gruppe__navn { color: var(--farge-tekst-dempet); font-weight: 500; }

.dokliste-gruppe__liste { list-style: none; margin: 0; padding: 0; }

/* Kort markering av gruppen man kom hit for å se (klikket status-prikk).
   Toner ut av seg selv — den skal peke, ikke bli en varig tilstand. */
.dokliste-gruppe--fokus {
  outline: 2px solid var(--farge-primary);
  outline-offset: 4px;
  border-radius: var(--radius);
  transition: outline-color 0.4s ease;
}

/* Raden skal LESE som et dokument: ikon og tittel side om side øverst, type og
   status som dempet underrad. Tittelen er det viktigste og får derfor normal
   skrift og full bredde — ikke sentrert småtekst. */
.dokliste-rad {
  display: flex;
  align-items: flex-start;
  gap: var(--avstand-2);
  width: 100%;
  padding: var(--avstand-2);
  border: var(--kant);
  border-radius: var(--radius);
  margin-bottom: var(--avstand-1);
  background: var(--farge-bakgrunn);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dokliste-rad:hover { background: var(--farge-overflate-hover); border-color: var(--farge-kant-sterk); }
.dokliste-rad:focus-visible { outline: 2px solid var(--farge-primary); outline-offset: 1px; }

/* EntitetIkon-glyfen (07 §4.6.5) — samme dokument-ikon som i blokkdiagram og
   relasjonstabeller, så typen kjennes igjen visuelt overalt. */
.dokliste-rad__ikon { flex: 0 0 auto; margin-top: 1px; }

.dokliste-rad__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.dokliste-rad__navn {
  font-size: var(--font-base);
  font-weight: 500;
  line-height: var(--linje-hoyde-tett);
  color: var(--farge-tekst);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dokliste-rad__meta {
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  font-size: var(--font-liten);
  color: var(--farge-tekst-dempet);
  flex-wrap: wrap;
}

/* Ekstern lenke markeres i teksten, ikke som et eget ikon — ikonet er reservert
   entitet-typen (dokument), og to ikoner ved siden av hverandre leser dårlig. */
.dokliste-rad__ekstern { display: inline-flex; align-items: center; gap: 3px; }

/* ------------------------- Metadata + handlinger ------------------------ */

.dok-les__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--avstand-3);
  margin: 0 0 var(--avstand-3);
  font-size: var(--font-liten);
}
.dok-les__meta dt { color: var(--farge-tekst-dempet); }
.dok-les__meta dd { margin: 0; }

.dok-les__handlinger {
  display: flex;
  gap: var(--avstand-2);
  padding-bottom: var(--avstand-3);
  border-bottom: var(--kant);
  margin-bottom: var(--avstand-4);
}

/* Merknad over dokumentet: «til godkjenning» / «endret siden godkjenning».
   Samme uttrykk som editorens retur-boks, saa de leses som samme slags beskjed. */
.dok-les__notis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--avstand-2) var(--avstand-3);
  margin-bottom: var(--avstand-3);
  border: var(--kant);
  border-left: 3px solid var(--farge-aksent);
  border-radius: var(--radius);
  background: var(--farge-overflate);
}
.dok-les__notis strong { font-size: var(--font-liten); color: var(--farge-aksent); }
.dok-les__notis span { font-size: var(--font-liten); color: var(--farge-tekst-dempet); }

.dok-les__versjon { margin: calc(-1 * var(--avstand-2)) 0 var(--avstand-3); font-size: var(--font-liten); }

/* ---------------------------- Selve dokumentet -------------------------- */

.dok-les {
  font-size: 14px;
  line-height: 1.65;
  color: var(--farge-tekst);
  /* Lange, ubrutte strenger (URL-er i rutiner) skal ikke sprenge panelbredden. */
  overflow-wrap: anywhere;
}

.dok-les__tittel { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 0 var(--avstand-3); }

.dok-les h2 { font-size: 17px; margin: var(--avstand-5) 0 var(--avstand-2); line-height: 1.3; }
.dok-les h3 { font-size: 15px; margin: var(--avstand-4) 0 var(--avstand-1); line-height: 1.3; }
.dok-les h4 {
  font-size: 13px;
  margin: var(--avstand-3) 0 var(--avstand-1);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--farge-tekst-dempet);
}
.dok-les p { margin: 0 0 var(--avstand-3); }
.dok-les ul, .dok-les ol { margin: 0 0 var(--avstand-3); padding-left: var(--avstand-5); }
.dok-les li { margin: 2px 0; }
.dok-les li > ul, .dok-les li > ol { margin-bottom: 0; }
.dok-les a { color: var(--farge-primary); }

.dok-les blockquote {
  margin: 0 0 var(--avstand-3);
  padding-left: var(--avstand-3);
  border-left: 3px solid var(--farge-primary);
  font-style: italic;
}
.dok-les blockquote cite {
  display: block;
  margin-top: var(--avstand-1);
  font-size: var(--font-liten);
  font-style: normal;
  color: var(--farge-tekst-dempet);
}
.dok-les--sentrert { text-align: center; }

.dok-les__merknad {
  display: block;
  background: var(--farge-primary-svak);
  border: var(--kant);
  border-left: 3px solid var(--farge-aksent);
  border-radius: var(--radius);
  padding: var(--avstand-3);
  margin: 0 0 var(--avstand-3);
}
.dok-les__merknad strong { display: block; margin-bottom: 2px; }
.dok-les__merknad span { color: var(--farge-tekst-dempet); font-size: var(--font-liten); }

.dok-les__kode {
  background: var(--farge-overflate);
  border: var(--kant);
  border-radius: var(--radius);
  padding: var(--avstand-3);
  margin: 0 0 var(--avstand-3);
  font-family: var(--font-monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}

.dok-les__skille { border: 0; border-top: var(--kant); margin: var(--avstand-5) 0; }

/* Matrise-pusten (05 §1.1): en tabell i et dokument er innhold, ikke en tett liste. */
.dok-les__tabell { margin-bottom: var(--avstand-3); }
.dok-les__tabell th,
.dok-les__tabell td { height: auto; padding: 6px 8px; white-space: normal; }

/* Sjekkliste — haken er dekorativ (lese-visning), derfor aria-hidden i markupen. */
.dok-les__sjekkliste { list-style: none; padding-left: var(--avstand-2); }
.dok-les__sjekkliste li { display: flex; align-items: flex-start; gap: var(--avstand-2); }
.dok-les__hake {
  flex: 0 0 auto;
  width: 13px; height: 13px;
  margin-top: 4px;
  border: 1px solid var(--farge-kant-sterk);
  border-radius: 3px;
  background: var(--farge-overflate);
}
.dok-les__hake--satt {
  background: var(--farge-ok, #16a34a);
  border-color: var(--farge-ok, #16a34a);
  position: relative;
}
.dok-les__hake--satt::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 3px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dok-les mark { padding: 1px 2px; border-radius: 2px; }
.dok-les code { font-family: var(--font-monospace); font-size: .9em; }

/* Klikkbart tjenestenavn i dokumentasjons-matrisen (åpner dette panelet). */
.dok-tjeneste-lenke {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dok-tjeneste-lenke:hover { color: var(--farge-primary); text-decoration: underline; }