/* shared/soeg-lovshell.css
   Lov-shellen (shared/soeg-lovshell.js) — bølge B2/W2.2,
   tasks/plan-soeg-ux-2026-08-18.md §3.

   Rører IKKE soeg.html's egen <style>-blok. Alle farver er temavariable fra
   styles.css (--w/--w2/--w3/--w4/--w5, --accent*, --line, --warn*, --err*), så
   både mørkt og lyst tema følger med automatisk.

   VISUEL VÆGT ER EN ÆRLIGHEDSREGEL, IKKE SMAG (planens regel 1 + 7):
     • `.ls-ordlyd-tekst` er den TUNGE tekst — kildetro lovtekst.
     • `.ls-forkl` (forklaringslaget) er dæmpet, mindre og indrykket bag en
       kant — en forklaring i almindeligt sprog må aldrig kunne forveksles med
       ordlyden, heller ikke i et skærmbillede.
     • `body.lovshell-open` skjuler resultatlisten og alt dens kontekst-tilbehør,
       så præcis ÉN af de to flader er synlig. */

/* ── Én skærm, én sandhed (regel 7) ────────────────────────────────────────
   Håndhæves i CSS frem for med inline style, så oprydningen ved lukning er
   ét klasse-fjern og ikke en genopbygning af ti display-værdier. */
/* ── Regel 7: én skærm, én sandhed — UDEN at røre listens scroll ─────────
   Shellen er et selvstændigt LAG over resultatkolonnen, ikke et element inde
   i dens scroll-container.

   HVORFOR (målt, ikke antaget): lå shellen inde i #results-scroll, måtte
   listen skjules med display:none, og så kollapsede containerens indhold
   (målt 6.273 → 574 px ved 1280×720). Browseren klamper da scrollTop til 0 og
   genanvender sit eget huskede offset EFTER klik-handleren, når indholdet
   kommer tilbage. Positionen overlevede kun fordi vi skrev den igen i den
   rigtige frame — et kapløb, ikke en garanti. Som lag ovenpå beholder
   #results-scroll sit indhold, sin højde og sin scrollTop uændret hele vejen,
   og der er intet kapløb tilbage at tabe.

   Listen skjules med `visibility` (bevarer layout og scroll), ikke `display`
   (kollapser begge dele). `pointer-events:none` sikrer at den skjulte liste
   ikke kan rammes af klik eller tastatur bag laget. */
#lovshell-root { display: none; }
body.lovshell-open #lovshell-root {
  display: block;
  position: absolute; inset: 0; z-index: 5;
  overflow-y: auto;
  background: var(--navy);
}
#results-col { position: relative; }
body.lovshell-open #results-scroll,
body.lovshell-open #chips-row,
body.lovshell-open #fallback-line,
body.lovshell-open #timeout-chip,
body.lovshell-open #advarsler-row,
body.lovshell-open #citation-box,
body.lovshell-open #retsomraade-banner,
body.lovshell-open #topforslag-zone,
body.lovshell-open #forbehold-bar,
body.lovshell-open #tabs-row,
/* Facet-kolonnen skjules med: dens KAPITEL-facet ville ellers stå side om side
   med shellens egen kapitel-fortegnelse med to forskellige betydninger (den
   ene tæller søgetræf, den anden er dokumentets struktur). To lister der ligner
   hinanden og betyder noget forskelligt er præcis dét regel 7 skal forhindre.
   Vejen tilbage til filtrene er «‹ Tilbage til resultater». */
body.lovshell-open #facets-col {
  display: none !important;
}

/* Forekomst-panelets rækker med en kendt § er nu genveje ind i shellen. */
.occ-para-klikbar { cursor: pointer; }
.occ-para-klikbar:hover { background: var(--w5); }

/* Kortet er nu en destination — det skal se ud som én. */
.res-card { cursor: pointer; }
.res-card:hover { border-color: var(--accent-ab); }
.res-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Ramme ─────────────────────────────────────────────────────────────── */
.ls-wrap { display: flex; flex-direction: column; min-height: 100%; }

.ls-topbar {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--navy);
  border-bottom: 1px solid var(--line);
}
.ls-tilbage {
  background: transparent; border: 1px solid var(--accent-ab); border-radius: 6px;
  color: var(--w); font-family: 'DM Sans', sans-serif; font-size: 12px;
  padding: 5px 11px; cursor: pointer; transition: all .15s;
}
.ls-tilbage:hover { background: var(--accent-a); border-color: var(--accent); }

/* Regel 6 — dq-chippen */
.ls-dq-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 10px; border-radius: 20px;
  background: var(--accent-a); border: 1px solid var(--accent-ab);
  color: var(--accent-l); font-size: 11px;
}
.ls-dq-x {
  background: transparent; border: none; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 3px; opacity: .75;
}
.ls-dq-x:hover { opacity: 1; }

/* ── Dokumenthoved (regel 2: sticky lov-kontekst) ──────────────────────── */
.ls-hoved {
  position: sticky; top: 39px; z-index: 3;
  padding: 12px 16px 11px;
  background: var(--navy);
  border-bottom: 1px solid var(--line);
}
.ls-hoved-titel-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ls-hoved-titel {
  font-family: var(--heading-font, 'DM Sans', sans-serif);
  font-size: 15px; color: var(--w); line-height: 1.35;
}
.ls-hoved-meta { margin-top: 4px; font-size: 11.5px; color: var(--w3); }
/* Regel 3 — versionslinjen. Aldrig "gældende"; derfor er den heller ikke
   pyntet som et kvalitetsstempel, men sat som det forbehold den er. */
.ls-version {
  margin-top: 7px; padding: 6px 10px; border-radius: 6px;
  background: var(--w5); border: 1px solid var(--line);
  font-size: 10.8px; line-height: 1.55; color: var(--w2);
}
/* Rå status + dens spor. En status uden kilde/måledato er en påstand — og
   siges som sådan. Chippen er neutral, ikke et kvalitetsstempel. */
.ls-status { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ls-status-vaerdi {
  font-size: 10.5px; padding: 2px 8px; border-radius: 20px;
  background: var(--w5); border: 1px solid var(--line); color: var(--w2);
}
/* K1-FIX (31/8, MAJOR, tal rettet 31/8): var(--w3) målte 2,57-3,53:1 i begge
   temaer (under WCAG AA 4,5:1). Sporteksten ("status er en påstand uden
   kilde/måledato") er selve forbeholdet — var(--w2) måler 5,06:1 (tema 2,
   hvid bund) og 6,99:1 (tema 1, rgb(16,26,62)), begge over kravet. */
.ls-status-spor { font-size: 10.5px; color: var(--w2); }
/* F6 — det permanente forskrifts-forbehold, ordret som i resultatlisten. */
.ls-forbehold {
  margin-top: 7px; padding: 6px 10px; border-radius: 6px;
  background: var(--warn-a); border: 1px solid rgba(232,151,58,.25);
  color: var(--warn); font-size: 10.8px; line-height: 1.55;
}
.ls-hoved-kapitel { margin-top: 6px; font-size: 11.5px; color: var(--w2); }
.ls-hoved-kapitel:empty { display: none; }
.ls-hoved-daekning { margin-top: 6px; }
.ls-daek-kort { font-size: 11px; color: var(--w3); line-height: 1.55; }
.ls-daek-toggle {
  background: transparent; border: none; color: var(--accent-l);
  font-size: 11px; cursor: pointer; padding: 3px 0; text-decoration: underline;
  font-family: 'DM Sans', sans-serif;
}
.ls-daek-fuld {
  display: none; margin-top: 5px; padding: 8px 10px; border-radius: 6px;
  background: var(--w5); border: 1px solid var(--line);
  font-size: 10.8px; line-height: 1.6; color: var(--w2); white-space: pre-wrap;
}
.ls-daek-fuld.open { display: block; }

/* ── Advarsler (aldrig-lydløs) ─────────────────────────────────────────── */
.ls-advarsler { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.ls-advarsel {
  font-size: 10.8px; line-height: 1.5; color: var(--warn);
  background: var(--warn-a); border: 1px solid rgba(232,151,58,.25);
  border-radius: 6px; padding: 6px 10px;
}

/* ── To-kolonne-krop ───────────────────────────────────────────────────── */
.ls-body { display: flex; align-items: flex-start; min-height: 0; }

/* ── TOC (regel 4) ─────────────────────────────────────────────────────── */
.ls-toc {
  position: sticky; top: 39px;
  width: 244px; min-width: 244px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
} /* 2026-09-16 (brugeranmodning): headeren (overskrift/filter/forekomst-
   checkbox) er nu FAST — kun kapitel-listen (.ls-toc-liste, fra Kapitel 1)
   har sin egen scroll, se flex-splittet nedenfor. */
.ls-toc-hdr { flex-shrink: 0; padding: 12px 12px 8px; border-bottom: 1px solid var(--line2); }
.ls-toc-t {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
} /* brugeranmodning 2026-09-16: mere tydelig, samme behandling som sidebar/facet-overskrifter (var(--w4) var for svag) */
.ls-toc-sub { margin-top: 4px; font-size: 11px; color: var(--w3); }
.ls-toc-filter {
  width: 100%; margin-top: 8px; padding: 6px 9px;
  background: var(--w5); border: 1px solid var(--line); border-radius: 6px;
  color: var(--w); font-family: 'DM Sans', sans-serif; font-size: 11.5px; outline: none;
}
.ls-toc-filter:focus { border-color: var(--accent-ab); }
/* B5/F4: "Vis kun §§ med træf på «term»" — erstatter det frie 380px-panel
   som selvstændigt næste-skridt (se docs/soegning.md#b5). */
.ls-toc-occ-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.ls-toc-occ-cb { flex-shrink: 0; width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.ls-toc-occ-lbl { font-size: 11px; color: var(--w2); cursor: pointer; line-height: 1.4; }
/* --w2, ikke --w3: caveat-teksten er den BÆRENDE ærligheds-linje (afkortet-forbeholdet)
   og skal holde WCAG AA — samme løft og begrundelse som .ls-forkl-krop (B5-review 19/8:
   --w3 målte 3,53:1/2,60:1; --w2 måler 7,90:1/5,17:1). */
.ls-toc-occ-status { margin-top: 5px; font-size: 10.5px; line-height: 1.5; color: var(--w2); }
.ls-toc-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 14px; }
.ls-toc-kap { margin-bottom: 4px; }
.ls-toc-kap.skjult { display: none; }
.ls-toc-kap-t {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px;
  background: transparent; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: var(--w2);
}
.ls-toc-kap-t:hover { background: var(--w5); }
.ls-toc-kap-navn { flex: 1; min-width: 0; line-height: 1.4; }
.ls-toc-kap-antal {
  flex-shrink: 0; font-size: 10px; color: var(--w3);
  background: var(--w5); padding: 1px 6px; border-radius: 8px;
}
.ls-toc-kap-note { padding: 0 10px 4px; font-size: 10.3px; line-height: 1.5; color: var(--warn); }
.ls-toc-pp { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 8px 6px; }
.ls-toc-pp.skjult { display: none; }
.ls-toc-p {
  padding: 3px 8px; border-radius: 5px;
  background: transparent; border: 1px solid transparent;
  color: var(--w2); font-family: 'DM Sans', sans-serif; font-size: 11px; cursor: pointer;
}
.ls-toc-p:hover { background: var(--w5); }
.ls-toc-p.skjult { display: none; }
.ls-toc-p.aktiv { background: var(--accent-a); border-color: var(--accent-ab); color: var(--accent-l); }
/* Rækken FINDES, men kan ikke åbnes som selvstændig §. Den skjules ikke —
   den ville forsvinde lydløst — og den gøres ikke klikbar, for klikket ville
   give 400. Stiplet + dæmpet, aldrig helt væk. */
.ls-toc-p-lukket {
  display: inline-block; cursor: not-allowed; opacity: .6;
  border: 1px dashed var(--w4); color: var(--w3);
}
.ls-nav-btn-lukket { border-style: dashed; }

/* ── Hovedflade ────────────────────────────────────────────────────────── */
.ls-main { flex: 1; min-width: 0; padding: 14px 18px 40px; }
.ls-main-fuld { padding: 14px 18px 40px; }

/* ── §-BLOKKEN — ÉN FORM, UANSET OM §'EN ER DEN VALGTE (W20.2) ───────────
   Blokken har en GENNEMSIGTIG venstrekant i sin grundform. Det er ikke pynt:
   kanten skal FINDES i begge tilstande, så aktiv-markeringen kan nøjes med at
   ændre dens FARVE. Lagde vi kanten på først i den aktive tilstand, ville
   `border-left-width` og dermed indholdets bredde ændre sig — og så var vi
   tilbage ved to formater for samme bestemmelse (målt før W20: 494 px mod
   524 px, se præreggens §10.1). */
.ls-para {
  padding: 12px 0 12px 10px;
  border-bottom: 1px solid var(--line2);
  border-left: 3px solid transparent;
  background-color: transparent;
}
.ls-para-t {
  font-family: var(--heading-font, 'DM Sans', sans-serif);
  font-size: 16px; font-weight: 600; color: var(--w); margin-bottom: 6px;
  cursor: pointer; /* 2026-09-18 (brugerkrav): §-tallet større (var 13.5px) */
}
/* Fokus-ringen er en OUTLINE, ikke en border: outline ligger uden for
   box-modellen og flytter derfor ikke én eneste px af ordlyden. */
.ls-para-t:focus-visible { outline: 2px solid var(--accent-ab); outline-offset: 2px; }

/* ── AKTIV-MARKERINGEN — DEN PRÆREGISTREREDE ALLOWLIST ───────────────────
   PRÆCIS to properties, og intet andet:
       border-left-color + background-color
   (+ `aria-current="true"` i DOM'en, så markeringen ikke bæres af farve
   alene — WCAG 1.4.1). Enhver tilføjelse her er en regression og fanges af
   G-ID, der differ computed styles node for node mellem en aktiv og en
   ikke-aktiv § og kræver at forskellen er nøjagtig disse to. */
.ls-para-aktiv {
  border-left-color: var(--accent);
  background-color: var(--accent-glow);
}
.ls-para-nav { display: flex; gap: 6px; }
.ls-nav-btn {
  padding: 4px 10px; border-radius: 6px; background: transparent;
  border: 1px solid var(--line); color: var(--w2);
  font-family: 'DM Sans', sans-serif; font-size: 11px; cursor: pointer;
}
.ls-nav-btn:hover:not(:disabled) { border-color: var(--accent-ab); color: var(--w); }
.ls-nav-btn:disabled { opacity: .35; cursor: default; }

/* Den sticky topbar + dokumenthoved dækker toppen af scroll-området. Uden
   scroll-margin lander scrollIntoView midt i den valgte paragraf, så
   ordlydens første linjer står skjult bag hovedet — netop den tekst brugeren
   klikkede for at læse. Højden MÅLES i drift (opdaterStickyOffsets) og lægges
   i --ls-sticky-h, fordi hovedet vokser med advarsler og forbehold; fallbacken
   svarer til et hoved uden dem.
   BEMÆRK at reglen rammer .ls-para UANSET tilstand — en scroll-margin der kun
   gjaldt den aktive § ville være en 28-property-forskel. */
.ls-para, .ls-solo, .ls-sektioner-vaert {
  scroll-margin-top: var(--ls-sticky-h, 200px);
}

/* Sektionernes vært — den ligger UDEN FOR §-blokken. W20.3 flytter den ind i
   sidepanelet; indtil da står den lige under den valgte §. */
.ls-sektioner-vaert { margin: 4px 0 14px; }

.ls-stk { margin: 8px 0; }
.ls-stk-nr { font-size: 10.5px; color: var(--w3); margin-bottom: 2px; }
/* Regel 1 — ORDLYDEN er den tunge tekst på siden. */
.ls-ordlyd-tekst {
  font-size: 13px; line-height: 1.75; color: var(--w); margin: 0;
  white-space: pre-wrap;
}
.ls-ordlyd-tekst mark {
  background: var(--accent-ab); color: var(--w); padding: 0 2px; border-radius: 3px;
}
.ls-stk-markeret {
  border-left: 3px solid var(--accent); padding-left: 10px; margin-left: -13px;
}

/* ── FORKLARINGSLAGET (regel 1) ──────────────────────────────────────────
   Under ordlyden, dæmpet og sekundært — men i TRE forskellige former, fordi
   rækkerne ER tre forskellige ting (se tegnForklaring i soeg-lovshell.js).

   B5-tillæg D gælder uændret: var(--w3) mod denne boks' var(--w5)-baggrund
   målte 3,38:1 (mørk) / 2,55:1 (lys) — under WCAG AA's 4,5:1 for brødtekst.
   Al BRØDTEKST herunder bruger derfor var(--w2) (7,00:1 / 4,97:1, regnet med
   korrekt alfa-kompositering af begge halvgennemsigtige tokens over shellens
   --navy-flade, ikke antaget). var(--w3) er kun tilladt på ETIKETTER, der er
   korte og understøttet af form og placering.

   BRØDTEKSTEN ER IKKE LÆNGERE KURSIV. Kursiv var "sekundær/uverificeret"-
   signalet dengang blokken altid var en dublet af ordlyden. I den fulde form
   ER teksten nu indhold — den eneste forklaring der findes — og lange kursive
   afsnit er målbart tungere at læse. Signalet bæres i stedet af overskriften,
   statuslinjen, venstrekanten og den mindre skriftstørrelse. */
.ls-forkl {
  margin-top: 7px; padding: 7px 10px;
  border-left: 2px solid var(--w4); border-radius: 0 6px 6px 0;
  background: var(--w5);
}
/* Den ægte forklaring er den ENESTE form der er indhold — den får en
   accent-kant, så øjet kan skille den fra de to former der blot gentager
   ordlyden. */
.ls-forkl-fuld { border-left-color: var(--accent-ab); }
.ls-forkl-hdr {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--w3); line-height: 1.5; margin-bottom: 4px;
}
/* 2026-09-16 (brugeranmodning): overskriften er nu <summary> i et
   <details> (.ls-forkl-fold, genbrugt fra "omskrivning"-mønsteret) — kun
   overskriften er synlig som standard, teksten folder ud ved klik paa
   pilen. */
.ls-forkl-fold > .ls-forkl-hdr {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 5px; margin-bottom: 0;
}
.ls-forkl-fold > .ls-forkl-hdr::-webkit-details-marker { display: none; }
.ls-forkl-fold > .ls-forkl-hdr::before {
  content: "▸"; font-size: 15px; font-weight: 700; color: var(--accent); flex-shrink: 0;
}
.ls-forkl-fold[open] > .ls-forkl-hdr::before { content: "▾"; }
.ls-forkl-fold > .ls-forkl-hdr:hover { color: var(--w2); }
.ls-forkl-fold > .ls-forkl-hdr:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}
.ls-forkl-krop { font-size: 11.8px; line-height: 1.65; color: var(--w2); }
/* Statuslinjen står PR. BLOK. Den er bevidst ikke rød: den beskriver en
   tilstand (maskingenereret), ikke en fejl — men den er heller ikke usynlig. */
.ls-forkl-status {
  margin-top: 5px; font-size: 10px; line-height: 1.5;
  color: var(--warn); opacity: .95;
}
/* MASKINGENERERET-ikonet (2026-08-22, se soeg-lovshell.js): erstatter den
   fulde statuslinje for netop DENNE ene status. `.ls-forkl-status` giver
   samme margin-top som teksten den erstatter; `.ls-forkl-info-wrap` styrer
   selve ikon+tooltip-layoutet. Ikonets farve er var(--w2).
   KONTRAST — to uafhængige målinger, to metoder, SAMME konklusion:
     • Adversarielt review 2026-08-22 regnede 6,77:1 mørk / 5,15:1 lys på en
       IKKE-markeret §-blok, ved alpha-komposition af de deklarerede rgba-tal
       op gennem forfædre-kæden (--w2 over --w5 over --navy).
     • Selvstændigt genmålt her PÅ DEN FAKTISK RENDEREDE PIXEL (screenshot
       dekodet og glyffens blæk sammenlignet med baggrundspixlen i knappens
       eget hjørne — antialiasing giver typisk en LIDT blødere, altså lavere,
       værdi end en ren alfa-udregning): 6,05:1 mørk / 4,22:1 lys på samme
       ikke-markerede tilstand.
   `.ls-para-aktiv`s accent-glow lægger et ekstra semi-transparent lag bag
   ikonet og trækker begge målinger en anelse ned — den pixel-rendrede værdi
   blev 5,70:1 mørk / 4,07:1 lys på selve den markerede paragraf. I ALLE fire
   tal, begge temaer, begge tilstande: komfortabelt over WCAG's 3:1 for
   ikke-tekst-grafik. */
/* Ingen margin her: `.ls-forkl-status` (den anden klasse på samme node) leverer
   allerede margin-top:5px — at gentage den ville skabe to konkurrerende regler
   med samme specificitet, og i soeg.html afhænger værdien af konteksten
   (nested vs. resultatkort). */
/* 24/8 (brugerbeslutning — "meget mere diskret, grafisk pænt, inline efter
   teksten"): lille cirkel-i med tynd ring, dæmpet i hvile, fuld farve ved
   hover/fokus. Ingen egen linje — vertikalt justeret til teksten før det.
   Kontrasten er MÅLT (se Playwright-beviset i commit): ring+glyf holder
   ≥3:1 i begge temaer også i hviletilstanden. */
.ls-forkl-info-wrap { position: relative; display: inline-flex; vertical-align: -1px; margin-left: 5px; }
.ls-forkl-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; padding: 0; margin: 0;
  border: 1px solid var(--w2); border-radius: 50%;
  background: transparent; cursor: pointer;
  color: var(--w2); font-size: 9px; line-height: 1;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600;
  opacity: 0.82; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.ls-forkl-info:hover, .ls-forkl-info:focus-visible {
  color: var(--w); border-color: var(--w); opacity: 1;
}
.ls-forkl-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* `position:fixed`, ikke `absolute`: ikonet optræder inde i flere forskellige
   scroll-containere (§-strøm, forekomst-panel, resultatkort), og et
   `absolute`-lag ville kunne klippes af den nærmeste `overflow:auto`-
   forfader. Positionen (top/left) sættes af positionerInfoTip() i JS, klemt
   til viewporten — også ved 390 px. */
.ls-forkl-info-tip {
  position: fixed; z-index: 500; max-width: 260px; width: max-content;
  padding: 7px 10px; border-radius: 7px;
  background: var(--navy); color: var(--w); border: 1px solid var(--accent-ab);
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  font-size: 11px; line-height: 1.5; font-weight: 400; font-style: normal;
  visibility: hidden; opacity: 0; pointer-events: none;
}
/* BLOCKER (WCAG 1.4.13 Hoverable, adversarielt review 2026-08-22):
   `pointer-events:none` gjaldt her UBETINGET — også mens tooltippen var
   synlig — så musen aldrig kunne udløse events PÅ den, uanset JS'ens
   mouseenter/mouseleave-logik. `.aaben` skal derfor ALTID sætte `auto`, ikke
   kun visibility/opacity. */
.ls-forkl-info-wrap.aaben .ls-forkl-info-tip { visibility: visible; opacity: 1; pointer-events: auto; }
/* Nøgleord: navigationshjælp, aldrig indhold. */
.ls-forkl-ord { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 5px; }
.ls-forkl-ordetiket {
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--w3); margin-right: 2px;
}
.ls-forkl-chip {
  font-size: 10.5px; line-height: 1.4; color: var(--w2);
  padding: 2px 7px; border-radius: 10px;
  background: var(--w4); border: 1px solid var(--w4);
  /* Et langt nøgleord må bryde frem for at skubbe panelet vandret. */
  overflow-wrap: anywhere;
}
.ls-forkl-kildetro {
  font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--w3); cursor: help; border-bottom: 1px dotted var(--w4);
}
/* Foldet omskrivning. `details` bruges frem for en egen knap, så tastatur og
   skærmlæser får den indbyggede semantik uden vores egen ARIA-efterligning. */
.ls-forkl-fold { margin-top: 5px; }
/* `display` sættes bevidst IKKE på dette <summary>.
   Et <summary> hvis display ændres, ophører i flere motorer med at fungere som
   <details>-elementets disclosure-summary. Vi har ikke brug for det: pilen
   tegnes af ::before, og `list-style: none` + marker-reglen fjerner den
   indbyggede trekant. Prisen for at undgå klassen er nul, så den betales.
   (MÅLENOTE 2026-08-20: en tidlig E2E-kørsel så ud til at bevise at foldet var
   brudt. Det var MÅLINGEN der var forkert — Chrome 151 skjuler et lukket
   <details>' indhold med `content-visibility: hidden` på `::details-content`,
   ikke med `display:none`, så `offsetParent`/`getBoundingClientRect()` er
   IKKE brugbare kriterier. `Element.checkVisibility()` og `innerText` er, og
   de viser at foldet folder korrekt.) */
.ls-forkl-foldknap {
  cursor: pointer; font-size: 10.5px; line-height: 1.5; color: var(--w3);
  list-style: none;
}
.ls-forkl-foldknap::-webkit-details-marker { display: none; }
.ls-forkl-foldknap::before { content: "▸ "; font-size: 15px; font-weight: 700; color: var(--accent); }
.ls-forkl-fold[open] > .ls-forkl-foldknap::before { content: "▾"; }
.ls-forkl-foldknap:hover { color: var(--w2); }
.ls-forkl-foldknap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.ls-forkl-fold > .ls-forkl-krop { margin-top: 5px; }
/* Karnov-parallellen: hvorfor rækken overhovedet blev fundet. */
.ls-forkl-fundet {
  font-size: 10px; line-height: 1.5; color: var(--accent-l);
  margin-bottom: 4px;
}

@media (max-width: 460px) {
  /* 390px-kontrollen: intet i blokken må kunne skubbe siden vandret. */
  .ls-forkl { padding: 6px 8px; }
  .ls-forkl-krop { font-size: 11.5px; }
  .ls-forkl-chip { max-width: 100%; }
}

.ls-ordlyd-fejl {
  padding: 10px 12px; border-radius: 8px;
  background: var(--err-a); border: 1px solid var(--err-ab);
  color: var(--err); font-size: 12px; line-height: 1.6;
}
.ls-ordlyd-fejl-note { margin-top: 6px; font-size: 11px; color: var(--w3); line-height: 1.6; }
/* Foldningens regler (.ls-fejl-inline, .ls-sektion*, .ls-liste, .ls-kryds-*,
   .ls-fb*, .ls-vej*, .ls-relateret-*, .ls-attr*) staar i shared/soeg-relateret.css,
   som soeg.html indlaeser FOER denne fil. Se filens hoved for cascade-begrundelsen. */

/* 24/8: kilde-linket i dokumenthovedet (deler .ls-vej-link's grundstil). */
.ls-hoved-kildelink { margin-top: 6px; }
/* 24/8: den §-forankrede indgang til det relaterede indhold (brugerkrav —
   panelet/draweren var ikke opdagbar nok). Diskret linje, accent-farvet. */
.ls-para-relateret {
  display: block; margin-top: 9px; padding: 6px 10px;
  background: transparent; border: 1px dashed var(--accent-ab); border-radius: 6px;
  color: var(--accent-l); font-size: 11px; text-align: left; cursor: pointer;
  font-family: 'DM Sans', sans-serif; line-height: 1.4;
}
.ls-para-relateret:hover { background: var(--accent-a); border-style: solid; }
.ls-para-relateret:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 2026-09-18 (brugerkrav): i §-strømmen markeres paragrafgrænsen af ÉN
   skillelinje efter hele gruppen (ordlyd + omskrivning + relateret indhold),
   ikke af .ls-para's egen bundkant, som sad FØR relateret indhold.
   .ls-para bevarer bundkanten alle andre steder den bruges. */
.ls-main > .ls-para { border-bottom: none; }
.ls-para-skel {
  border: 0; border-top: 2px solid var(--w3);
  margin: 20px 0 8px; height: 0;
}
/* `@keyframes lsPanelBlink` og `.ls-sektion-blink` er FLYTTET UAENDRET til
   shared/soeg-relateret.css (2026-09-22): sektions-blinket er chip-klikkets
   kvittering og skal ogsaa virke i sag.html, som kun indlaeser den fil.
   Keyframen bor samme sted som sin foerste bruger; `.ls-panel-blink` herunder
   finder den fint, fordi @keyframes-navne er dokument-globale og soeg.html
   indlaeser soeg-relateret.css FOER denne fil. */
.ls-panel-blink { animation: lsPanelBlink 1.5s ease-out; }

/* Chipsene (opgave B, 28/8) er FLYTTET til shared/soeg-relateret.css
   (2026-09-22): de bor nu i "Relateret indhold til § X"-foldens overskrift,
   som ogsaa tegnes i sag.html, der kun indlaeser soeg-relateret.css.
   Chip-raekken (.ls-chip-row) findes ikke laengere — tallene stod ellers
   baade i raekken og i folden. */

/* 28/8 opgave C1: §-forankret kildelink — samme visuelle vægt som .ls-vej-link. */
.ls-para-kildelink {
  display: block; margin-top: 6px; font-size: 10.5px; color: var(--accent-l);
}

/* 28/8 opgave F: status-badge (BEK/VEJ). Samme opake-farve-princip som
   .badge-kasseret/.badge-pa i soeg.html — tema-uafhængig kontrast. */
.ls-status-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #fff;
}
.ls-status-badge-gaeldende { background: #1f6b3f; }
.ls-status-badge-historisk { background: #8c1c1c; }
.ls-status-badge-ukendt    { background: #5b5f6b; }


/* ── Strøm-navigation, noter, loader, fejl ─────────────────────────────── */
.ls-vindue-btn {
  display: block; width: 100%; margin: 10px 0; padding: 8px 12px;
  border-radius: 7px; background: transparent; border: 1px dashed var(--w4);
  color: var(--w2); font-family: 'DM Sans', sans-serif; font-size: 11.5px; cursor: pointer;
}
.ls-vindue-btn:hover { border-color: var(--accent-ab); color: var(--w); }
.ls-note {
  margin: 10px 0; padding: 8px 11px; border-radius: 7px;
  background: var(--w5); border: 1px solid var(--line);
  font-size: 11px; line-height: 1.6; color: var(--w3);
}
.ls-strom-status { padding: 14px 0; font-size: 11.5px; color: var(--w3); }
.ls-loader { padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ls-loader-t { font-size: 12.5px; color: var(--w3); }
.ls-fejl { padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ls-fejl-t {
  padding: 12px 14px; border-radius: 9px;
  background: var(--err-a); border: 1px solid var(--err-ab);
  color: var(--err); font-size: 12.5px; line-height: 1.6;
}

.ls-fb-kontekst { margin-top: 8px; font-size: 11.5px; color: var(--w2); }
.ls-fb-kontekst-btn {
  background: transparent; border: none; padding: 0 2px;
  color: var(--accent-l); font-family: 'DM Sans', sans-serif; font-size: 11.5px;
  cursor: pointer; text-decoration: underline;
}

/* ══ SIDEPANELET (W20.3) ═══════════════════════════════════════════════════
   Tredje kolonne. Den er SØSKENDE til .ls-main, aldrig et barn — lå den inde
   i hovedfladen, ville den dele dokumentets scroll-container, og en drawer
   ville arve hovedfladens position. */
/* BREDDEN ER MÅLT, IKKE VALGT (W20.3-gate). Læsefladen er sidens formål; den
   må ikke skrumpe, fordi et hjælpepanel kom til.
   MÅLT ved 1600 px: 236 px sidebar + 244 px TOC + 300 px panel efterlader
   531 px til ordlyden — over baselinens 494 px før W20. Under grænsen er der
   ikke plads til tre kolonner, og panelet bliver en drawer; tallene OG
   metoden bag grænsen står ved @media-reglen nedenfor. */
.ls-panel {
  position: sticky; top: 39px;
  flex: 0 0 300px; width: 300px; min-width: 0;
  max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
}
.ls-panel-hdr {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line2);
  background: var(--navy, transparent);
}
.ls-panel-para {
  font-family: var(--heading-font, 'DM Sans', sans-serif);
  font-size: 17px; font-weight: 600; color: var(--w); margin-bottom: 8px;
} /* brugeranmodning 2026-09-15: stoerre overskrift (var 12.5px) */
.ls-panel-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ls-panel-omlov { margin-bottom: 8px; }
.ls-panel-omlov-t {
  font-size: 11.5px; color: var(--accent); cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 6px; background: var(--accent-a);
  list-style: none;
} /* brugeranmodning 2026-09-15: tydeligere at den er klikbar (var almindelig graa tekst) */
.ls-panel-omlov-t::-webkit-details-marker { display: none; }
.ls-panel-omlov-t::before {
  content: "▸"; display: inline-block; font-size: 10px;
  transition: transform .15s ease;
}
.ls-panel-omlov[open] > .ls-panel-omlov-t::before { transform: rotate(90deg); }
.ls-panel-omlov-t:hover { background: var(--accent-ab); }
.ls-panel-omlov-titel { font-size: 11.5px; color: var(--w); margin: 6px 0 3px; }
.ls-panel-omlov-linje { font-size: 11px; color: var(--w2); line-height: 1.5; }
.ls-panel-ankre { display: flex; gap: 5px; flex-wrap: wrap; }
.ls-panel-anker {
  padding: 3px 8px; border-radius: 6px; background: transparent;
  border: 1px solid var(--line); color: var(--w2);
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; cursor: pointer;
}
.ls-panel-anker:hover { border-color: var(--accent-ab); color: var(--w); }
/* PANELETS EGEN SCROLL — ankerchipsene scroller DENNE, aldrig dokumentet. */
.ls-panel-krop { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 20px; }
.ls-sektion-note {
  font-size: 11px; color: var(--w2); line-height: 1.55; margin-bottom: 6px;
}
.ls-occ-btn {
  padding: 4px 10px; border-radius: 6px; background: transparent;
  border: 1px solid var(--line); color: var(--w2);
  font-family: 'DM Sans', sans-serif; font-size: 11px; cursor: pointer;
  margin-bottom: 6px;
}
.ls-occ-btn:hover:not(:disabled) { border-color: var(--accent-ab); color: var(--w); }
.ls-occ-btn:disabled { opacity: .45; cursor: default; }
.ls-occ-denne { font-size: 11px; color: var(--w2); margin: 4px 0 6px; }

/* Luk-knapperne hoerer til drawer-tilstanden og er skjult naar panelerne er
   de faste kolonner (se @media-reglen nedenfor). */
.ls-panel-luk, .ls-toc-luk { display: none; }
/* De to toolbar-knapper hoerer OGSAA kun til smal skaerm — uden denne
   basisregel faldt de tilbage til browserens uformaterede standard-
   knap-udseende ved normal vinduesstoerrelse (kun @media-reglen gav dem
   deres design, og den regel gaelder jo ikke der). Fundet og rettet
   2026-09-16 efter brugerrapport: "de ser anderledes ud" ved normal bredde. */
.ls-toc-btn, .ls-drawer-btn { display: none; }


/* ══ TO DRAWERS ≤1560 px (2026-09-16, UX-spec m. referencebillede) ═══════
   Under grænsen (målt, se den historiske note i basisreglerne ovenfor: ved
   1561px giver tre kolonner 492px ordlyd, ved 1560px giver to-drawer-
   modellen langt mere) er der ikke plads til tre kolonner. Lovteksten
   (panel 2, `.ls-main`) får hele bredden; panel 1 (`.ls-toc`) og panel 3
   (`.ls-panel`) bliver SKJULTE DRAWERS der ligger OVENPÅ teksten — ikke i
   dokumentflowet, ikke en klemt kolonne — og åbnes fra to kompakte,
   sekundære knapper i toolbaren (`.ls-toc-btn`/`.ls-drawer-btn`, altid i
   DOM'en, se tegnTopbar). Al eksisterende markup/logik i begge paneler er
   URØRT — kun deres CSS-position skifter her. */
@media (max-width: 1560px) {
  /* Den ydre app-sidebar (.sb, Sagsstyring/Forside osv.) — 2026-09-16
     (brugerrettelse): den maa IKKE forsvinde helt mens shellen er aaben paa
     smal skaerm (det gjorde den indtil nu, se den slettede display:none-
     regel). Den kollapser i stedet til en smal ikon-raekke (labels/pills
     skjules, ikoner + avatar forbliver synlige og klikbare — inkl.
     log ud-knappen, som ligger INDE i navne-wrapperen i auth-guard.js og
     derfor IKKE maa skjules sammen med selve navnet). */
  body.lovshell-open .sb {
    width: 60px; min-width: 60px;
  }
  body.lovshell-open .sb .sb-lbl,
  body.lovshell-open .sb .ni-lbl,
  body.lovshell-open .sb .sb-pill,
  body.lovshell-open .sb .u-name,
  body.lovshell-open .sb .u-role {
    display: none;
  }
  body.lovshell-open .sb .sb-sect { padding-left: 8px; padding-right: 8px; }
  body.lovshell-open .sb .ni { justify-content: center; padding: 8px 6px; gap: 0; }
  body.lovshell-open .sb .sb-foot {
    flex-direction: column; gap: 10px; padding: 12px 6px; align-items: center;
  }
  body.lovshell-open .sb .user-row { flex-direction: column; gap: 8px; }
  /* Wrapperen om u-name/u-role bærer ALSO log ud-knappen (auth-guard.js
     appendChild'er den derind) — wrapperen forbliver derfor synlig, kun de
     to tekstlinjer i den er skjult ovenfor. */
  body.lovshell-open .sb #verixLogoutBtn { margin: 0 !important; }
  body.lovshell-open .sb #verixLogoutBtn span { display: none; }

  .ls-main { width: 100%; padding: 12px 14px 40px; }

  .ls-tilbage { padding: 7px 14px; font-size: 13px; }
  .ls-toc-btn, .ls-drawer-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 6px; background: transparent;
    border: 1px solid var(--accent-ab); color: var(--w);
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap; transition: all .15s;
  }
  .ls-toc-btn:hover, .ls-drawer-btn:hover { background: var(--accent-a); border-color: var(--accent); }
  .ls-toc-btn { margin-left: 8px; }
  .ls-btn-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .ls-btn-ic svg { display: block; }
  .ls-drawer-btn { margin-left: 6px; }

  /* Den dæmpede baggrund — KUN synlig/klikbar mens en drawer er åben. */
  .ls-drawer-backdrop {
    position: fixed; inset: 0; z-index: 120; /* 2026-09-23: løftet fra 65 til 120 - soeg.html's
    body.soeg-ux2 .topbar fik z-index:100 (stakke-kontekst), og denne backdrop dækker HELE
    skærmen (inset:0, ikke top:90px) og skal derfor ligge over topbaren på mobil, ikke under */
    background: rgba(0, 0, 0, .38);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease-out;
  }
  .ls-toc-aaben .ls-drawer-backdrop, .ls-drawer-aaben .ls-drawer-backdrop {
    opacity: 1; pointer-events: auto;
  }

  /* Begge drawers: ligger OVENPÅ teksten (position: fixed, tager ingen
     plads i flowet), 320-380px bred (min(88vw, 360px) — smallere viewport
     giver en smallere drawer i stedet for at gå ud over skærmen), meget
     diskret skygge/kant, EGEN scroll. */
  .ls-toc, .ls-panel {
    position: fixed; top: 0; bottom: 0;
    width: min(88vw, 360px); max-width: 380px; min-width: 0;
    height: auto; max-height: none;
    z-index: 121; /* 2026-09-23: løftet fra 66 til 121 - fuld skærmhøjde (top:0/bottom:0,
    ikke top:90px), skal ligge over baade backdroppen (120) og soeg.html's topbar (100) */
    background: var(--bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .14);
    transition: transform .2s ease-out;
  }
  /* 2026-09-16 (brugeranmodning): TOC-headeren (overskrift/filter) er fast
     ogsaa i drawer-tilstand — kun .ls-toc-liste scroller (base-reglens
     flex-split gaelder ogsaa her, uaendret fra basisreglen). Panelet
     beholder sin egen fulde scroll (dets .ls-panel-krop har i forvejen sin
     egen uafhaengige scroll, se basisreglen — uaendret her). */
  .ls-panel { overflow-y: auto; }
  .ls-toc {
    left: 0; right: auto; border-right: 1px solid var(--line); border-left: none;
    transform: translateX(-105%);
  }
  .ls-panel {
    right: 0; left: auto; border-left: 1px solid var(--line);
    transform: translateX(105%);
  }
  .ls-toc-aaben .ls-toc { transform: translateX(0); }
  .ls-drawer-aaben .ls-panel { transform: translateX(0); }

  .ls-toc-hdr { display: flex; align-items: flex-start; flex-wrap: wrap; position: relative; padding-right: 40px; }
  .ls-toc-t, .ls-toc-sub, .ls-toc-filter, .ls-toc-occ-row { flex-basis: 100%; }
  .ls-panel-hdr { position: relative; padding-right: 40px; }

  /* Tydeligt X, øverste højre hjørne af drawerens hoved. */
  .ls-panel-luk, .ls-toc-luk {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 10px;
    width: 26px; height: 26px; padding: 0; margin: 0;
    border-radius: 6px; background: transparent;
    border: 1px solid var(--line); color: var(--w2);
    font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1;
    cursor: pointer;
  }
  .ls-panel-luk:hover, .ls-toc-luk:hover { border-color: var(--accent-ab); color: var(--w); background: var(--w5); }
}