/* ==========================================================================
   komponenter.css — K-1 … K-17
   Komponentbiblioteket. Hver blok er én komponent.
   Ét sæt. Bruges uændret i begge flader. Divergerer de, er det design debt.

   BÆRENDE REGEL i hele filen:
   farve er aldrig eneste betydningsbærer. Hvert betydningsbærende udtryk
   har mindst to af disse tre ved siden af farven:
     · IKON   — inline SVG, unikt pr. værdi (aldrig delt mellem to værdier
                inden for samme domæne)
     · FORM   — kantstil (heltrukken / stiplet), venstrebjælke, skråstriber
     · TEKST  — værdien står altid skrevet, aldrig kun som en prik
   ========================================================================== */

/* --------------------------------------------------------------------------
   FÆLLES: kort og zoner
   -------------------------------------------------------------------------- */

.kort {
  background: var(--kortflade);
  border: 1px solid var(--kant-kort);
  border-radius: var(--radius);
  padding: var(--rum-4);
  box-shadow: var(--skygge-kort);
}
.kort__hoved {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rum-3);
  margin-bottom: var(--rum-3);
}
.kort__titel { font-size: var(--tekst-mellem); font-weight: var(--vaegt-halvfed); }

/* Navngiven zone (politikskærmens fire zoner). Zonenavnet står i kanten. */
.zone {
  background: var(--kortflade);
  border: 1px solid var(--kant-kort);
  border-radius: var(--radius);
  padding: var(--rum-5) var(--rum-4) var(--rum-4);
  position: relative;
}
/* Zonenavnet bar før hele strukturen på platformsfladen i 11 px versaler —
   samme opgave som kundefladens 22 px h2, faktor to i skriftstørrelse. Det
   er nu 17 px i sætningsform: versaler er råb, ikke hierarki. */
.zone__navn,
h2.zone__navn {
  position: absolute;
  top: -0.7em;
  left: var(--rum-3);
  background: var(--kortflade);
  padding: 0 var(--rum-2);
  font-size: var(--tekst-mellem);
  font-weight: var(--vaegt-halvfed);
  letter-spacing: normal;
  text-transform: none;
  color: var(--tekst-overskrift);
}

/* --------------------------------------------------------------------------
   K-1 · TABEL — tilbehør (grundstilen ligger i grundlag.css afsnit 9)
   -------------------------------------------------------------------------- */

/* Udvælgelsesbånd: "41 valgt på denne side." + vælg alle i filteret */
.tabel-udvalg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rum-3);
  padding: var(--rum-2) var(--rum-3);
  background: var(--primaer-tint);
  border-bottom: 1px solid var(--kant-felt);
  font-size: var(--tekst-tabel);
  font-weight: var(--vaegt-halvfed);
}
.tabel-udvalg__antal { font-family: var(--skrift-tal); }

/* Sidefod med sidevisning — aldrig uendelig scroll */
.tabel-sidefod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rum-3);
  padding: var(--rum-3);
  border-top: 1px solid var(--kant-felt);
  background: var(--fyld-svag);
  font-size: var(--tekst-lille);
}
/* «Viser 51–100 af 4.312» er en sætning med tal i, ikke en talkolonne.
   Tallene selv formateres dansk af `Vaerdi::beloebTekst()`. */
.tabel-sidefod__status { color: var(--tekst-daempet); }
.tabel-sidefod__navigation { margin-left: auto; display: flex; align-items: center; gap: var(--rum-2); }
.tabel-sidefod input[type="number"] { max-width: 7ch; min-height: 32px; }

/* Filtre og hurtigfiltre — aktivt filter er en chip, der kan fjernes */
.filterlinje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rum-2);
  margin-bottom: var(--rum-3);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-1);
  min-height: 32px;
  padding: 0 var(--rum-3);
  border: 1px solid var(--kant-felt);
  border-radius: 16px;
  background: var(--kortflade);
  font-size: var(--tekst-tabel);
  text-decoration: none;
  color: var(--tekst-krop);
}
.chip:hover { background: var(--fyld-svag); text-decoration: none; }
.chip[aria-pressed="true"], .chip--aktiv {
  background: var(--primaer-tint);
  border-color: var(--primaer);
  color: var(--primaer);
  font-weight: var(--vaegt-halvfed);
}

/* Rækker, der skal stå øverst og ikke må sorteres bort.
   Bjælke + tint + mærke — tre bærere. */
.tabel tbody tr.raekke--standset td { background: var(--tone-alvorlig-tint); }
.tabel tbody tr.raekke--standset td:first-child {
  box-shadow: inset 4px 0 0 0 var(--tone-alvorlig);
}
.tabel tbody tr.raekke--opmaerksom td { background: var(--tone-opmaerksom-tint); }
.tabel tbody tr.raekke--opmaerksom td:first-child {
  box-shadow: inset 4px 0 0 0 var(--tone-opmaerksom);
}
.raekke__begrundelse {
  display: block;
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
  margin-top: 2px;
}

/* Under 768 px falder tabellen til kort. Uden JS: begge findes i DOM'en.
 *
 * Rettet efter QA-gennemgangen: reglen skjulte foer .tabel-rul ubetinget under 768 px — ogsaa
 * paa de fem skaerme, hvis skabelon ikke kaldte Tabel::kort(). Der traadte
 * saa intet i stedet, og hele tabellen forsvandt: paa en telefon var
 * /app/politik en overskrift og en tom side, /app/jobs var blank, og
 * godkendelseskoeens flade liste viste faner uden elementer.
 *
 * Nu skjules rulningen kun, naar der FAKTISK findes en kortform ved siden af
 * (.har-kort saettes af Tabel::ramme(), naar kortene er med). Uden kort
 * beholder tabellen sin vandrette rulning — daarligere paa en telefon, men
 * laesbart, og frem for alt til stede. En layoutregel maa ikke kunne fjerne
 * indhold, fordi en skabelon glemte et kald. */
.tabel-kort { display: none; }
/* `screen and` er ikke pynt. Uden det gaelder reglen ogsaa ved
 * UDSKRIFT fra et smalt vindue — og print.css skjuler samtidig .tabel-kort,
 * saa bilaget blev tomt: begge former var skjult af hver sin regel. */
@media screen and (max-width: 767px) {
  /* Skjul KUN rulningen, naar en kortform faktisk foelger lige efter den.
   * `:has(+ …)` spoerger DOM'en om det, saa ingen skabelon kan glemme at
   * saette et flag — og understoetter en browser ikke `:has()`, falder vi
   * tilbage til en rulbar tabel, hvilket er den sikre af de to retninger. */
  /* Selektoren pegede før på `.tabel-rul:has(+ .tabel-kort)` og kunne ikke
   * matche på en eneste skærm: `Tabel::ramme()` pakker rulningen ind, så
   * `.tabel-rul`s faktiske næste søskende er `.tabel-sidefod`. Resultatet
   * var, at telefonen viste BEGGE former — først en vandret klemt tabel, så
   * de samme rækker igen som kort.
   *
   * Der er TO former, og begge er i brug: kortene ligger enten INDE i rammen
   * eller som dens UMIDDELBARE søskende. Derfor tre regler, i den rækkefølge
   * de er til at stole på:
   *
   *   1. `.har-kort` — rammen ved det selv, fordi `Tabel::ramme()` har fået
   *      kortene med. Kræver ingen `:has()` overhovedet, og det er den vej,
   *      de 50+ komponentbyggede tabeller går.
   *   2. `:has(.tabel-kort)` — fem tabeller skriver deres ramme i hånden
   *      (før/efter, jobliste, politikspejl, tærskeltabellen, aftalens
   *      linjer) og kommer derfor aldrig forbi `Tabel::ramme()`. Kortene
   *      ligger inde i dem, og kun DOM'en kan svare på det.
   *   3. `:has(+ .tabel-kort)` — søskendeformen.
   *
   * Ligger kortene HVERKEN inde i rammen eller lige efter den — står der fx
   * en legende eller et afkortet-afsnit imellem — matcher ingen af de tre,
   * og telefonen viser begge former igen. Det er ikke til at se på skærmen,
   * så `paastaaKortformDaekket()` i prøverne holder øje med det.
   *
   * Kan browseren ikke `:has()`, bliver tabellen stående: dårligere på en
   * telefon, men til stede. En layoutregel må aldrig kunne fjerne indhold. */
  .tabel-ramme.har-kort .tabel-rul,
  .tabel-ramme:has(.tabel-kort) .tabel-rul,
  .tabel-ramme:has(+ .tabel-kort) .tabel-rul { display: none; }
  .tabel-kort { display: block; }
  .tabel-kort__post {
    border: 1px solid var(--kant-kort);
    border-radius: var(--radius);
    background: var(--kortflade);
    padding: var(--rum-3);
  }
  .tabel-kort__post + .tabel-kort__post { margin-top: var(--rum-2); }
  .tabel-kort__linje { display: flex; justify-content: space-between; gap: var(--rum-3); }
  .tabel-kort__linje dt { color: var(--tekst-daempet); font-size: var(--tekst-lille); }
}

/* Mærkets forklaring står VED SIDEN AF mærket, ikke i et `title`: et title på
   et element uden fokus er usynligt på touch, uopnåeligt med tastatur og
   ignoreret af de fleste skærmlæsere. Samme beslutning, og samme stil, som
   .knap-forklaring — huset traf den allerede for deaktiverede knapper. */
.maerke-forklaring {
  display: block;
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
  margin-top: var(--rum-1);
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   K-2 · STATUSMÆRKE
   Tone (farve) + ikon (form) + tekst. Kantformen koder livscyklussen:
     .maerke--gaeldende   heltrukken kant   tilstanden gælder nu
     .maerke--forelobig   stiplet kant      endnu ikke virkelig (kladde, planlagt)
     .maerke--afsluttet   4 px venstrebjælke  terminal (lukket, afløst, bortfaldet)
   Selv i sort/hvid kan de tre skelnes. Alle mærker har title med den
   lange forklaring.
   -------------------------------------------------------------------------- */

.maerke {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-1);
  padding: 2px var(--rum-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-lille);
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: baseline;
}
.maerke .ikon { width: 12px; height: 12px; }

.maerke--neutral    { color: var(--tone-neutral);     background: var(--tone-neutral-tint); }
.maerke--ok         { color: var(--tone-ok);          background: var(--tone-ok-tint); }
.maerke--opmaerksom { color: var(--tone-opmaerksom);  background: var(--tone-opmaerksom-tint); }
.maerke--alvorlig   { color: var(--tone-alvorlig);    background: var(--tone-alvorlig-tint); }

.maerke--gaeldende  { border-style: solid; }
.maerke--forelobig  { border-style: dashed; background: var(--kortflade); }
.maerke--afsluttet  { border-left-width: 4px; }

/* Mærket kan indeholde et tal (antal i gruppen) */
.maerke__tal {
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums;
}

/* Miljømærkat i topbåndet: PRODUKTION rødt, DEV/TEST gråt.
   Teksten står skrevet — farven er tilbehør. */
.miljoemaerkat {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-1);
  padding: 2px var(--rum-2);
  border-radius: var(--radius-lille);
  font-size: var(--tekst-mikro);
  font-weight: var(--vaegt-fed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--graa-200);
  color: var(--graa-800);
  border: 1px solid transparent;
}
.miljoemaerkat--produktion { background: #f7d7d8; color: #8c151d; }

/* --------------------------------------------------------------------------
   K-3 · MÅLERKORT
   tal · etiket · retning siden i går · handlingslink.
   Et målerkort uden handlingslink må ikke bygges.
   -------------------------------------------------------------------------- */

/* Tre pr. række — ikke «så mange der kan være».
   `auto-fit` gav to kort på én linje og fire på den næste, alt efter hvor
   lange etiketterne var; seks tal skal kunne læses som to rækker à tre.
   Under 1024 px falder gitteret tilbage til «så mange der er plads til». */
.maalerraekke {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rum-4);
}
@media (max-width: 1023px) {
  .maalerraekke { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.maalerkort {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 132 px, ikke 148: «Sidst tjekket» står nu ÉN gang i sideoverskriftens
     underlinje og ikke i hvert kort. Et kort, der viser mindre, fylder
     mindre. Højden er stadig fast, så skelet og tal fylder ens. */
  min-height: 132px;
  padding: 18px 20px;
  background: var(--kortflade);
  border: 1px solid var(--kant-kort);
  border-radius: var(--radius);
  box-shadow: var(--skygge-kort);
  text-decoration: none;
  color: var(--tekst-krop);
}
a.maalerkort:hover { box-shadow: var(--skygge-hviler); border-color: var(--kant-felt); text-decoration: none; }

/* ETIKETTEN ØVERST, i versaler: den siger hvad tallet er, og den er kortets
   tilgængelige navn. TALLET derefter, 36 px tabulært. KONTEKSTLINJEN nederst
   — én linjerolle, altid samme sted, så seks kort kan skimmes lodret. */
.maalerkort__etiket {
  font-size: var(--tekst-mikro);
  font-weight: var(--vaegt-halvfed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-daempet);
}
.maalerkort__tal {
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--tekst-maalertal);
  font-weight: var(--vaegt-halvfed);
  line-height: 1;
  color: var(--tekst-overskrift);
}
.maalerkort__under  { margin-top: auto; font-size: var(--tekst-tabel); color: var(--tekst-daempet); }
.maalerkort__handling { font-size: var(--tekst-lille); }

/* Retning siden i går: fortegnet skrives ALTID (+7 / −3) og ledsages af
   en pil. Farve alene ville gøre en stigning i fejl til "grøn". */
.retning {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums;
  font-weight: var(--vaegt-halvfed);
}
.retning--op   { color: var(--tone-opmaerksom); }
.retning--ned  { color: var(--tone-ok); }
.retning--uaendret { color: var(--tekst-daempet); }

/* Tilstande.
   Tallet bærer sin egen betydning: en kø, der venter, er opmærksom; en fejl,
   der står, er alvorlig. Begge toner fandtes allerede — de manglede blot en
   kobling til `.maalerkort__tal`, som `Maalerkort::tal()` nu sætter. */
.maalerkort--opmaerksom .maalerkort__tal { color: var(--tone-opmaerksom); }
.maalerkort--alvorlig .maalerkort__tal { color: var(--tone-alvorlig); }
.maalerkort--nul .maalerkort__tal { color: var(--tone-ok); }
.maalerkort--utilgaengelig { border-color: var(--tone-alvorlig); border-left-width: 4px; }
.maalerkort--utilgaengelig .maalerkort__tal { color: var(--tekst-daempet); }

/* «Ikke målt» er ikke «kunne ikke hentes»: der er intet at hente, og der er
   ingenting i stykker. Kortet er derfor NEUTRALT og ikke alvorligt — men det
   bærer en STIPLET kant, så det også uden farve skiller sig fra et kort med
   et rigtigt tal. Samme greb som statusmærkets «Ved ikke». */
.maalerkort--ikke-maalt {
  border-style: dashed;
  border-color: var(--kant-felt);
}
.maalerkort--ikke-maalt .maalerkort__tal { color: var(--graa-500); }

/* --------------------------------------------------------------------------
   SKELET (indlæser) — samme højde som indholdet, ingen layouthop.
   Aldrig en spinner over hele siden.
   -------------------------------------------------------------------------- */

.skelet {
  display: block;
  background: var(--graa-100);
  border-radius: var(--radius-lille);
  height: 1em;
}
.skelet--tal   { height: var(--tekst-maalertal); width: 40%; }
.skelet--linje { height: 0.9em; width: 70%; }
.skelet--kort  { width: 55%; }
.skelet + .skelet { margin-top: var(--rum-2); }

@media (prefers-reduced-motion: no-preference) {
  .skelet {
    background: linear-gradient(90deg, var(--graa-100) 0%, var(--graa-200) 50%, var(--graa-100) 100%);
    background-size: 240% 100%;
    animation: skelet-puls 1.6s ease-in-out infinite;
  }
  @keyframes skelet-puls {
    0%   { background-position: 120% 0; }
    100% { background-position: -20% 0; }
  }
}
/* Skeletrækker i tabeller bevarer den rigtige kolonnebredde. */
.tabel tbody tr.raekke--skelet td { color: transparent; }

/* --------------------------------------------------------------------------
   K-4 · JOBLISTE
   Bruger K-1. Standsede job står øverst med begrundelse inline.
   Der findes ingen handling over listen som helhed — derfor er
   der ingen .tabel-udvalg i denne komponent, og grunden står i fladen.
   -------------------------------------------------------------------------- */

.jobliste__note {
  padding: var(--rum-3);
  border-top: 1px solid var(--kant-fin);
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
  background: var(--fyld-svag);
}

/* --------------------------------------------------------------------------
   K-5 · POLITIKSPEJL (skrivebeskyttet)
   Grå, stiplet ramme. Formen siger "dette kan du ikke redigere her",
   også for den, der ikke ser gråtonen som anderledes.
   -------------------------------------------------------------------------- */

.politikspejl {
  border: 2px dashed var(--kant-felt);
  border-radius: var(--radius);
  background: var(--fyld-svag);
  padding: var(--rum-4);
}
.politikspejl__advarsel {
  display: flex;
  gap: var(--rum-2);
  font-size: var(--tekst-brod);
  font-weight: var(--vaegt-halvfed);
  color: var(--tekst-overskrift);
  margin-bottom: var(--rum-3);
}
.politikspejl .tabel { background: var(--kortflade); }
.politikspejl .tabel-ramme { border-style: dashed; }

/* Kernelåst indstilling: hængelåsikon + ordet "Kernen" + stiplet ramme */
.laast {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-1);
  color: var(--tekst-daempet);
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
}

/* --------------------------------------------------------------------------
   K-6 · FORKLARINGSPANEL (explain)
   Sideskuffe 480 px. Uden JS er det en almindelig side med samme markup:
   .skuffe--side fjerner fastgørelsen.
   Fast lodret rækkefølge — udfaldet står øverst og alene.
   -------------------------------------------------------------------------- */

.skuffe {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(var(--skuffe-bredde), 100%);
  z-index: 60;
  background: var(--kortflade);
  border-left: 1px solid var(--kant-felt);
  box-shadow: var(--skygge-skuffe);
  overflow-y: auto;
  padding: var(--rum-5);
}
.skuffe--side {
  position: static;
  width: auto;
  max-width: 720px;
  box-shadow: none;
  border: 1px solid var(--kant-kort);
  border-radius: var(--radius);
}
.skuffe__hoved {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rum-3);
  padding-bottom: var(--rum-3);
  border-bottom: 2px solid var(--kant-felt);
}
.skuffe__luk { min-height: var(--klikmaal); min-width: var(--klikmaal); }

/* Udfaldet: eget felt, størst type, egen ramme. */
.forklaring__udfald {
  margin: var(--rum-4) 0;
  padding: var(--rum-3) var(--rum-4);
  border: 1px solid var(--kant-felt);
  border-left: 4px solid var(--primaer);
  border-radius: var(--radius);
  background: var(--primaer-tint);
}
.forklaring__udfald .etikette { color: var(--tekst-daempet); }
.forklaring__udfald p { font-size: var(--tekst-h3); font-weight: var(--vaegt-halvfed); color: var(--tekst-overskrift); }

/* Beviset: definitionsliste med faste etiketter i venstre kolonne */
.forklaring__bevis { display: grid; grid-template-columns: 14ch 1fr; gap: var(--rum-2) var(--rum-3); }
.forklaring__bevis dt {
  font-size: var(--tekst-mikro);
  font-weight: var(--vaegt-halvfed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-daempet);
  padding-top: 2px;
}
.forklaring__bevis dd { margin: 0; font-size: var(--tekst-tabel); }
.forklaring__bevis dd .kode {
  font-family: var(--skrift-tal);
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
}
/* Tomme grupper skrives ud — at se, at niveau 3 og 4 er tomme, er hele
   grunden til, at man tør lade dem være tomme. */
.forklaring__bevis dd.ingen { color: var(--tekst-daempet); }

/* Trinnene er systemets eget sprog og ligger derfor bag en foldning:
   panelets første skærm er udfaldet og beviset, det her er til
   telefonsamtalen. <summary> er et klikmål og skal have højden. */
.forklaring__trin {
  counter-reset: trin;
  margin-top: var(--rum-4);
  border-top: 1px solid var(--kant-fin);
  padding-top: var(--rum-3);
}
.forklaring__trin > summary {
  cursor: pointer;
  min-height: var(--klikmaal);
  display: flex;
  align-items: center;
  font-size: var(--tekst-mikro);
  font-weight: var(--vaegt-halvfed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-daempet);
}
.forklaring__trin li {
  counter-increment: trin;
  display: grid;
  grid-template-columns: 2.5ch 1fr;
  gap: var(--rum-2);
  font-size: var(--tekst-tabel);
  padding: var(--rum-1) 0;
}
.forklaring__trin li::before {
  content: counter(trin) ".";
  font-family: var(--skrift-tal);
  color: var(--tekst-daempet);
}

/* --------------------------------------------------------------------------
   K-7 · HÆNDELSESTIDSLINJE
   Aktør vises altid og aldrig som "system".
   Impersonerede hændelser får rødt mærke — og kan ikke filtreres fra.
   -------------------------------------------------------------------------- */

.tidslinje { position: relative; padding-left: var(--rum-5); }
.tidslinje::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--kant-fin);
}
.tidslinje__post { position: relative; padding: var(--rum-2) 0; }
.tidslinje__post::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--rum-5) + 1px);
  top: 14px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--kortflade);
  border: 2px solid var(--kant-felt);
}
.tidslinje__post--impersonering::before {
  border-color: var(--baand-impersonering);
  background: var(--baand-impersonering);
}
.tidslinje__tid {
  font-family: var(--skrift-tal);
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
}
.tidslinje__type { font-weight: var(--vaegt-halvfed); }
.tidslinje__aktor { font-size: var(--tekst-tabel); }
.tidslinje__sammendrag {
  font-size: var(--tekst-tabel);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   BÅND — fælles bundstil for de fire båndtyper
   -------------------------------------------------------------------------- */

.baand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rum-3);
  padding: var(--rum-3) var(--rum-4);
  border-radius: var(--radius);
  font-size: var(--tekst-brod);
}
.baand__tekst { flex: 1 1 24ch; }
.baand__tekst strong { display: block; }
.baand .knap { flex: 0 0 auto; }

.baand--kritisk {
  background: var(--baand-kritisk);
  color: var(--hvid);
  border-radius: 0;
}
.baand--kritisk .knap {
  background: var(--hvid); color: var(--baand-kritisk); border-color: var(--hvid);
}
.baand--alvorlig {
  background: var(--tone-alvorlig-tint);
  color: var(--tone-alvorlig);
  border: 1px solid var(--tone-alvorlig);
  border-left-width: 4px;
}
.baand--opmaerksom {
  background: var(--tone-opmaerksom-tint);
  color: var(--tone-opmaerksom);
  border: 1px solid var(--tone-opmaerksom);
  border-left-width: 4px;
}
.baand--neutral {
  background: var(--fyld-svag);
  color: var(--tekst-krop);
  border: 1px solid var(--kant-felt);
  border-left-width: 4px;
}

/* Tørkørsel: skråstriber. Formen bærer betydningen — striberne overlever
   både gråtoner og en sort/hvid udskrift.

   Stribefarven var 1,17:1 mod tinten, og ved det forhold bar formen
   ingenting: hverken på en skærm, i gråtoner eller på et sort/hvidt print.
   Den er nu 3,41:1.

   Det gjorde til gengæld striberne for stærke til at have TEKST oven på sig
   — teksten er #6f4700 og ville lande på 2,07:1 mod striben. Derfor står
   båndets indhold nu på en solid plade af tinten, og striberne løber
   udenom. Formen bærer stadig betydningen; den ligger bare ikke længere
   under de ord, den skal støtte. */
.baand--toerkoersel {
  color: var(--tone-opmaerksom);
  border: 1px solid var(--tone-opmaerksom);
  border-left-width: 4px;
  background-color: var(--tone-opmaerksom-tint);
  background-image: repeating-linear-gradient(
    135deg,
    var(--tone-opmaerksom-stribe) 0, var(--tone-opmaerksom-stribe) 8px,
    var(--tone-opmaerksom-tint)   8px, var(--tone-opmaerksom-tint)  20px
  );
  font-weight: var(--vaegt-halvfed);
}
/* Pladen. Gælder hvert direkte barn — ikonet skal også kunne ses, og et
   semantisk ikon på 2,07:1 er lige så ulæseligt som teksten. */
.baand--toerkoersel > * {
  background-color: var(--tone-opmaerksom-tint);
  border-radius: var(--radius-lille);
  padding: var(--rum-1) var(--rum-2);
}

/* --------------------------------------------------------------------------
   K-8 · BEKRÆFTELSESDIALOG — tre niveauer
   Ens dialoger klikkes væk. Friktionen matcher konsekvensen.
   -------------------------------------------------------------------------- */

.dialog-baggrund {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(18, 23, 28, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--rum-7) var(--rum-4);
  overflow-y: auto;
}
.dialog {
  width: min(560px, 100%);
  background: var(--kortflade);
  border: 1px solid var(--kant-felt);
  border-radius: var(--radius-stor);
  box-shadow: var(--skygge-dialog);
  padding: var(--rum-5);
}
.dialog__titel { font-size: var(--tekst-h2); margin-bottom: var(--rum-4); }
.dialog__noegletal {
  display: grid;
  grid-template-columns: minmax(14ch, auto) 1fr;
  gap: var(--rum-2) var(--rum-4);
  padding: var(--rum-3) 0;
  border-top: 1px solid var(--kant-fin);
  border-bottom: 1px solid var(--kant-fin);
  font-size: var(--tekst-tabel);
}
.dialog__noegletal dt { color: var(--tekst-daempet); }
.dialog__noegletal dd { margin: 0; font-weight: var(--vaegt-halvfed); }
.dialog__noegletal dd.beloeb { font-family: var(--skrift-tal); }
.dialog__handlinger {
  display: flex;
  justify-content: flex-end;
  gap: var(--rum-2);
  margin-top: var(--rum-5);
}
/* Niveau 2: primærknappen bærer tallet, ikke ordet "OK". */
.dialog--niveau2 { border-top: 4px solid var(--primaer); }

/* Niveau 3: farlig handling. Advarselsrammen, begrundelsen og
   bekræftelsesordet — friktionen er meningen. */
.dialog--niveau3 { border-top: 4px solid var(--baand-kritisk); }
.dialog__konsekvens {
  border: 2px solid var(--baand-kritisk);
  border-radius: var(--radius);
  background: var(--tone-alvorlig-tint);
  color: var(--tone-alvorlig);
  padding: var(--rum-3) var(--rum-4);
  margin-bottom: var(--rum-4);
  font-weight: var(--vaegt-halvfed);
}
.dialog__konsekvens ul { margin-top: var(--rum-2); }
.dialog__konsekvens li { display: flex; gap: var(--rum-2); padding: 2px 0; }
.dialog--niveau3 .felt__etiket { font-weight: var(--vaegt-fed); }

/* --------------------------------------------------------------------------
   K-9 · KVITTERING (efter redirect, øverst på destinationssiden)
   Ikke en flydende toast. Bliver stående, til brugeren lukker den.
   -------------------------------------------------------------------------- */

.kvittering {
  display: flex;
  align-items: flex-start;
  gap: var(--rum-3);
  padding: var(--rum-3) var(--rum-4);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius);
}
.kvittering__ikon { margin-top: 2px; }
.kvittering__krop { flex: 1 1 auto; }
.kvittering__krop strong { display: block; }
.kvittering__handlinger { display: flex; gap: var(--rum-2); flex-wrap: wrap; margin-top: var(--rum-2); }

.kvittering--ok         { border-color: var(--tone-ok);         background: var(--tone-ok-tint);         color: var(--tone-ok); }
.kvittering--opmaerksom { border-color: var(--tone-opmaerksom); background: var(--tone-opmaerksom-tint); color: var(--tone-opmaerksom); }
.kvittering--alvorlig   { border-color: var(--tone-alvorlig);   background: var(--tone-alvorlig-tint);   color: var(--tone-alvorlig); }
.kvittering--neutral    { border-color: var(--kant-felt);       background: var(--fyld-svag);            color: var(--tekst-krop); }
.kvittering .knap { color: var(--tekst-krop); }

/* --------------------------------------------------------------------------
   K-10 · TOMTILSTAND · K-11 · FEJLTILSTAND · K-12 · INGEN ADGANG · K-17 · ADGANGSDØR
   Fire komponenter, der ikke må ligne hinanden.
   Fælles kasse, forskellig ramme, forskelligt ikon, forskellig tone.
   -------------------------------------------------------------------------- */

.tilstand {
  display: flex;
  gap: var(--rum-4);
  padding: var(--rum-5);
  border-radius: var(--radius);
  background: var(--kortflade);
}
.tilstand__ikon { flex: 0 0 auto; font-size: 24px; line-height: 1; }
.tilstand__ikon .ikon { width: 24px; height: 24px; }
.tilstand__krop { max-width: 64ch; }
.tilstand__titel { font-size: var(--tekst-mellem); font-weight: var(--vaegt-halvfed); }
/* K-10's overskrift siger HVAD, brødteksten siger HVAD SÅ. To roller, to
   størrelser — og de må ikke gentage hinanden i ord. */
.tilstand--tom .tilstand__titel { font-size: var(--tekst-brod); }
.tilstand--tom .tilstand__krop > p { font-size: var(--tekst-tabel); }
.tilstand p { margin-top: var(--rum-2); }
.tilstand__handlinger { margin-top: var(--rum-4); display: flex; gap: var(--rum-2); flex-wrap: wrap; }

/* K-10 Tom: stiplet ramme, neutral. Fem grunde, fem tekster — teksten
   sættes serverside, komponenten er den samme. */
.tilstand--tom {
  border: 2px dashed var(--kant-felt);
  background: var(--fyld-svag);
  color: var(--tekst-daempet);
}
.tilstand--tom .tilstand__titel { color: var(--tekst-overskrift); }

/* K-11 Fejl: heltrukken alvorlig ramme, vises DER hvor data skulle stå. */
.tilstand--fejl {
  border: 1px solid var(--tone-alvorlig);
  border-left-width: 4px;
  background: var(--tone-alvorlig-tint);
  color: var(--tone-alvorlig);
}
.haendelses-id {
  font-family: var(--skrift-tal);
  font-weight: var(--vaegt-fed);
  background: var(--kortflade);
  border: 1px solid currentColor;
  border-radius: var(--radius-lille);
  padding: 1px 6px;
}

/* K-12 Ingen adgang: neutral med heltrukken kant og hængelås.
   Ikke rød — men heller ikke tom-stiplet. Fortæller hvilken rolle der kræves. */
.tilstand--ingen-adgang {
  border: 1px solid var(--kant-felt);
  border-left: 4px solid var(--tekst-daempet);
  background: var(--fyld-svag);
}
.tilstand--ingen-adgang .kraevet-rolle { font-weight: var(--vaegt-fed); }

/* K-17 Adgangsdør: neutral, ALDRIG alvorlig. Ser den ud som en fejl,
   beder folk om permanente rettigheder i stedet for at gå igennem døren. */
.adgangsdoer {
  border: 1px solid var(--kant-felt);
  border-radius: var(--radius);
  background: var(--kortflade);
  padding: var(--rum-5);
}
.adgangsdoer__hvad { font-size: var(--tekst-mellem); font-weight: var(--vaegt-halvfed); }
.adgangsdoer__hvorfor { color: var(--tekst-daempet); margin-top: var(--rum-1); }
.adgangsdoer__konsekvenser {
  margin: var(--rum-4) 0;
  padding-left: 0;
  font-size: var(--tekst-tabel);
  color: var(--tekst-daempet);
}
.adgangsdoer__konsekvenser li { display: flex; gap: var(--rum-2); padding: 2px 0; }

/* --------------------------------------------------------------------------
   K-13 · FØR OG EFTER
   Prik i margen markerer ændringen for dem, der ikke ser farve.
   Slettede værdier står som "1010 → —" med "● fjernet", aldrig som
   gennemstreget tekst alene.
   -------------------------------------------------------------------------- */

.foer-efter .kol-foer  { color: var(--tekst-daempet); font-family: var(--skrift-tal); }
.foer-efter .kol-efter { font-family: var(--skrift-tal); font-weight: var(--vaegt-halvfed); }
.foer-efter .kol-maerke { width: 12ch; white-space: nowrap; }

.aendringsprik {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-1);
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
}
.aendringsprik::before {
  content: "\25CF";
  font-size: 10px;
}
.aendringsprik--aendret { color: var(--tone-opmaerksom); }
.aendringsprik--ny      { color: var(--tone-ok); }
.aendringsprik--fjernet { color: var(--tone-alvorlig); }

.foer-efter__uaendrede {
  margin-top: var(--rum-3);
  font-size: var(--tekst-tabel);
}
.foer-efter__uaendrede summary { cursor: pointer; min-height: var(--klikmaal); display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   K-14 · IMPERSONERINGSBÅND
   Kun i kundeadmin. Klæbrigt øverst, kan ikke lukkes, skubber indhold ned.
   Detaljerne ligger i kundeadmin.css — komponenten er defineret her.
   -------------------------------------------------------------------------- */

.baand--impersonering {
  position: sticky;
  top: 0;
  z-index: 70;
  border-radius: 0;
  background: var(--baand-impersonering);
  color: var(--hvid);
  /* Skråstriber i kanten: formen gentager advarslen uden farve. */
  border-bottom: 4px solid var(--hvid);
  box-shadow: inset 0 -4px 0 0 var(--baand-impersonering);
  font-weight: var(--vaegt-halvfed);
}
.baand--impersonering .knap {
  background: var(--hvid);
  color: var(--baand-impersonering);
  border-color: var(--hvid);
}
.baand--impersonering .nedtaelling { font-family: var(--skrift-tal); }
/* Fem minutter før udløb: samme bånd, kraftigere tone og ny tekst. */
.baand--impersonering.udloeber-snart { background: var(--baand-kritisk); }
.baand--impersonering.udloeber-snart .knap { color: var(--baand-kritisk); }

/* --------------------------------------------------------------------------
   K-15 · BELØB OG DATO (visningsklasser; feltstilen ligger i grundlag.css)
   -------------------------------------------------------------------------- */

.beloeb, .dato {
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.beloeb { text-align: right; }
.beloeb__valuta {
  font-family: var(--skrift);
  font-size: 0.85em;
  color: var(--tekst-daempet);
  margin-left: var(--rum-1);
}
/* En PERIODE er ikke et tal.
   ------------------------------------------------------------------------
   «10.09.2026 til og med 09.09.2027» stod helt igennem i taltypografi —
   bindeordet med — og `nowrap` på en 34-tegns streng låste periodekolonnen
   til ~230 px og klemte resten af tabellen sammen. Nu er det kun de to
   datoer, der er tal (`.dato`, sat af `Vaerdi::interval()`); ordene er ord,
   og kolonnen må gerne ombryde ved «til og med». `.dato` ovenfor bærer
   allerede taltypografien; her fjernes den bare fra resten. */
.interval { white-space: normal; }
/* Også i en datokolonne: `.kol-dato` sætter taltypografi på hele cellen, og
   et interval er en sætning med to datoer i — ikke en dato. */
.tabel .kol-dato .interval { font-family: var(--skrift); white-space: normal; }

/* --------------------------------------------------------------------------
   K-16 · SIDEOVERSKRIFT MED HANDLINGSZONE
   H1 til venstre, højst én primær knap til højre.
   -------------------------------------------------------------------------- */

.sideoverskrift {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rum-5);
  padding-bottom: var(--rum-4);
  /* Den finere streg. Sideoverskriften er en skillelinje mellem hoved og
     indhold, ikke en kortramme — samme kant som `.def`-rækkerne. */
  border-bottom: 1px solid var(--kant-fin);
  margin-bottom: var(--rum-5);
}
.sideoverskrift__venstre { min-width: 0; }
/* Et langt tenant- eller slutkundenavn må bryde frem for at strække siden. */
.sideoverskrift h1 { overflow-wrap: anywhere; }
.brodkrumme {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
  margin-bottom: 6px;
  list-style: none;
  padding: 0;
}
.brodkrumme li + li::before { content: "\203A"; margin-right: 6px; }
/* Brødkrummen er navigation, ikke brødtekst: leddene farves dæmpet og er
   ikke understreget, så de ikke konkurrerer med sidens rigtige links.
   Sidste led er et <span> med aria-current og er slet ikke et link. */
.brodkrumme a { color: var(--tekst-daempet); text-decoration: none; }
.brodkrumme a:hover { text-decoration: underline; }
.brodkrumme a:visited { color: var(--tekst-daempet); }
.sideoverskrift__handlinger { display: flex; gap: var(--rum-2); align-items: center; flex-wrap: wrap; }
.sideoverskrift__meta { font-size: var(--tekst-lille); color: var(--tekst-daempet); margin-top: var(--rum-1); }

/* --------------------------------------------------------------------------
   FANER (godkendelseskøens grupper/flad liste)
   Den valgte fane bærer 3 px underkant OG halvfed vægt.
   -------------------------------------------------------------------------- */

.faner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rum-1);
  border-bottom: 1px solid var(--kant-kort);
  margin-bottom: var(--rum-4);
}
.faner a {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-2);
  min-height: var(--klikmaal);
  padding: 0 var(--rum-4);
  border-bottom: 3px solid transparent;
  color: var(--tekst-krop);
  text-decoration: none;
}
.faner a:hover { background: var(--fyld-svag); }
.faner a[aria-current="true"] {
  border-bottom-color: var(--primaer);
  color: var(--primaer);
  font-weight: var(--vaegt-halvfed);
}

/* --------------------------------------------------------------------------
   GRUPPELISTE (godkendelseskøen)
   Grupper med værnsfund kan ikke massegodkendes; spærringen står som
   tekst i gruppen, ikke som en grå knap uden forklaring.
   -------------------------------------------------------------------------- */

.gruppe {
  border: 1px solid var(--kant-kort);
  border-radius: var(--radius);
  background: var(--kortflade);
  padding: var(--rum-4);
}
.gruppe + .gruppe { margin-top: var(--rum-2); }
.gruppe--spaerret { border-left: 4px solid var(--tone-opmaerksom); }
.gruppe__hoved {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rum-3);
}
.gruppe__navn { font-size: var(--tekst-mellem); font-weight: var(--vaegt-halvfed); }
.gruppe__tal { font-family: var(--skrift-tal); white-space: nowrap; }
.gruppe__forklaring { font-size: var(--tekst-tabel); color: var(--tekst-daempet); margin-top: var(--rum-2); max-width: 72ch; }
.gruppe__handlinger { margin-top: var(--rum-3); display: flex; flex-wrap: wrap; gap: var(--rum-2); align-items: center; }
.gruppe__spaerring {
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
  color: var(--tone-opmaerksom);
  display: inline-flex;
  align-items: center;
  gap: var(--rum-1);
}

/* Forsinkelsens pris — egen boks, ikke en fodnote */
.pris-ved-at-vente {
  border: 1px solid var(--tone-opmaerksom);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--tone-opmaerksom-tint);
  color: var(--tone-opmaerksom);
  padding: var(--rum-4);
}
.pris-ved-at-vente__tal { font-family: var(--skrift-tal); font-size: var(--tekst-h3); font-weight: var(--vaegt-halvfed); }

/* --------------------------------------------------------------------------
   HISTORISK VISNING (tidsmaskinen)
   Hele siden skifter tilstand: gult bånd + stiplet ramme om indholdet.
   -------------------------------------------------------------------------- */

.indhold--historisk {
  outline: 2px dashed var(--tone-opmaerksom);
  outline-offset: -8px;
}

/* --------------------------------------------------------------------------
   KONFIGURATION OG FORHÅNDSVISNING
   Ingen ny komponent — kun de fire mønstre, konfigurationsskærmene tilføjer:
   kortgitteret på oversigten, forhåndsvisningens blok, «gem uden
   forhåndsvisning»-foldningen og markeringen af en tilbagerulning i
   historikkens tabel. Alt bygget af de samme tokens som resten.
   -------------------------------------------------------------------------- */

.kortgruppe { margin-bottom: var(--rum-6); }
.kortgruppe > h2 {
  font-size: var(--tekst-h3);
  margin: 0 0 var(--rum-3);
}
.kortraekke {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--rum-3);
}
.kort--klikbart {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--overgang), border-color var(--overgang);
}
.kort--klikbart:hover,
.kort--klikbart:focus-visible { box-shadow: var(--skygge-hviler); border-color: var(--primaer); }
.kort--klikbart .kort__titel { color: var(--link); }
.kort__under { color: var(--tekst-daempet); margin: var(--rum-2) 0; }
/* MONOSPACE TIL VÆRDIER, DER SAMMENLIGNES LODRET — ALDRIG TIL EN SÆTNING.
   Linjen her bærer i praksis prosa: «Ingen rækker endnu» stod 13 gange i
   taltypografi på konfigurationsskærmen og læstes som en maskinværdi. Står
   der et rent tal, hører taltypografien i `.tal` omkring tallet — ikke om
   hele linjen. */
.kort__tal {
  font-family: var(--skrift);
  font-weight: var(--vaegt-halvfed);
  margin: 0 0 var(--rum-2);
}
/* Et område uden en skærm er ikke et kort, man kan klikke på. Den stiplede
   kant siger «her kunne der stå noget» — samme form som K-10 tomtilstand. */
.kort--tom {
  border-style: dashed;
  box-shadow: none;
  background: none;
}
/* En farlig formular (fjern, rul tilbage) bærer venstrebjælken — form, ikke
   kun farve. */
.kort--advarsel { border-left: 4px solid var(--tone-opmaerksom); }

.forhaandsvisning {
  border: 1px solid var(--kant-kort);
  border-left: 4px solid var(--primaer);
  border-radius: var(--radius);
  padding: var(--rum-4);
  margin-bottom: var(--rum-4);
  background: var(--primaer-tint);
}
.forhaandsvisning > h2 { font-size: var(--tekst-h3); margin-top: 0; }
.forhaandsvisning > h3 { font-size: var(--tekst-mellem); margin: var(--rum-4) 0 var(--rum-2); }
.forhaandsvisning__hvis { font-weight: var(--vaegt-halvfed); margin-top: var(--rum-4); }
.mangelliste { margin: var(--rum-2) 0; padding-left: var(--rum-5); }
.mangelliste li { margin-bottom: var(--rum-1); }
.kol-tal { text-align: right; font-family: var(--skrift-tal); font-variant-numeric: tabular-nums; }

/* «Gem uden forhåndsvisning» — friktionen er, at feltet først findes efter
   et bevidst klik. <details> og ikke JavaScript. */
.spring-over {
  margin-top: var(--rum-4);
  border-top: 1px solid var(--kant-fin);
  padding-top: var(--rum-3);
}
.spring-over > summary {
  cursor: pointer;
  color: var(--tekst-daempet);
  font-size: var(--tekst-lille);
}
.spring-over > summary:focus-visible {
  outline: var(--fokus-bredde) solid var(--fokus-ring);
  outline-offset: var(--fokus-afstand);
}

.felt--laese dl { margin: var(--rum-2) 0 0; }
.felt__enhed { color: var(--tekst-daempet); font-weight: var(--vaegt-normal); }

/* En tilbagerulning er markeret i historikken med en bjælke i margen —
   ikke med en farve alene. Mærket ved siden af bærer ordet. */
.raekke--gendannelse > td:first-child { box-shadow: inset 3px 0 0 0 var(--tone-neutral); }

/* --------------------------------------------------------------------------
   TEKST FRA ET ANDET SYSTEM, ORD FOR ORD

   Fejlteksten paa en sag i doedbrevskassen er ikke vores prosa: den kommer
   fra det system, koerslen talte med, og den skal kunne laeses op i en
   telefon og slaas op hos den, der skrev den. Derfor er den sat med
   taltypografien og med ubrudte tegnfoelger tilladt at bryde — en adresse
   eller et sagsnummer, der loeber ud over kanten, kan ikke laeses paa en
   telefon, og en linje, der bliver klippet, laeses forkert.

   Klassen fandtes i markuppen i forvejen (idempotensnoegler, regel-id'er) og
   havde kun en regel INDE i forklaringspanelet. Her er den generelle.
   -------------------------------------------------------------------------- */
.kode {
  font-family: var(--skrift-tal);
  font-size: var(--tekst-lille);
  overflow-wrap: anywhere;
  word-break: break-word;
}
p.kode {
  margin: var(--rum-2) 0 0;
  padding: var(--rum-3);
  background: var(--sideflade);
  border: 1px solid var(--kant-fin);
  border-radius: var(--radius);
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   ENGANGSKODEN OG FEJLTEKSTEN
   To ting, der skal kunne LÆSES ORDRET og ikke skimmes.

   .kode-engangs  vises én gang og skal kunne markeres uden at man rammer
                  forkert. Derfor monospace, stor tekst og user-select: all —
                  et fejlkopieret tegn i en adgangskode koster en nulstilling.
   .fejltekst     ERP-svar er ofte flere linjer med indlejrede citationstegn.
                  En sammenklappet fejltekst er den, ingen læser til ende, så
                  linjeskiftene bevares og blokken får sin egen ramme.
   --------------------------------------------------------------------------- */
.kode-engangs {
  display: inline-block;
  font-family: var(--skrift-tal);
  font-size: var(--tekst-h3);
  letter-spacing: 0.04em;
  padding: var(--rum-2) var(--rum-3);
  border: 1px solid var(--kant-felt);
  border-radius: var(--radius);
  
  user-select: all;
  word-break: break-all;
}

.fejltekst {
  font-family: var(--skrift-tal);
  font-size: var(--tekst-lille);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 14em;
  padding: var(--rum-2) var(--rum-3);
  border: 1px solid var(--kant-felt);
  border-radius: var(--radius);
  margin: var(--rum-2) 0;
}

/* Kortets handlingsrække. Klassen var i brug i Kundeadmin uden en regel —
   knapperne lå derfor på hver sin linje uden mellemrum. */
.kort__handlinger {
  margin-top: var(--rum-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rum-2);
  align-items: center;
}

/* --------------------------------------------------------------------------
   LINJETABEL MED INPUTS I CELLERNE (.tabel--linjer)
   K-1 antager tekstceller; en 40 px input i en celle med 8 × 12 padding gav
   en 56 px række. Her er cellen 4 × 8, så rækken bliver 48. Inputs fylder
   cellen, og «Fjern»-knappen løftes til klikmålet.
   Under 768 px falder hver række til et fieldset-lignende kort: cellerne
   stakkes, og kolonneoverskrifterne skjules — hvert input bærer sin egen
   (visuelt skjulte) label, så intet mister sit navn.
   -------------------------------------------------------------------------- */
.tabel--linjer tbody td { padding: var(--rum-1) var(--rum-2); vertical-align: top; }
.tabel--linjer td .felt { margin: 0; }
.tabel--linjer td input { max-width: 100%; width: 100%; }
.tabel--linjer th.kol-type, .tabel--linjer td.kol-type { width: 1%; white-space: nowrap; }
.tabel--linjer th.kol-antal { width: 8ch; }
.tabel--linjer th.kol-beloeb { width: 16ch; }
.tabel--linjer th.kol-bortfald { width: 24ch; }
.tabel--linjer td.kol-beloeb input { text-align: right; }
.tabel--linjer .knap { min-height: var(--klikmaal); }
.tabel--linjer tfoot td {
  background: var(--fyld-svag);
  border-top: 1px solid var(--kant-felt);
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
}
.tabel--linjer tfoot td.kol-beloeb { font-family: var(--skrift-tal); }

@media screen and (max-width: 767px) {
  .tabel--linjer thead { display: none; }
  .tabel--linjer, .tabel--linjer tbody, .tabel--linjer tfoot { display: block; }
  .tabel--linjer tbody tr, .tabel--linjer tfoot tr {
    display: block;
    border: 1px solid var(--kant-kort);
    border-radius: var(--radius);
    padding: var(--rum-3);
  }
  .tabel--linjer tbody tr + tr, .tabel--linjer tfoot tr { margin-top: var(--rum-2); }
  .tabel--linjer tbody td, .tabel--linjer tfoot td {
    display: block;
    width: auto;
    /* `height: var(--raekkehojde)` fra grundlaget er en FAST højde, og på en
     * blok er den ikke en mindstehøjde. Cellen blev ved med at være 40 px,
     * mens indholdet — etiket, mellemrum og et 40 px felt — er 60. De tre
     * celler lagde sig derfor 20 px ind over hinanden, og etiketten stod
     * inde i feltet ovenfor. Rækkehøjden hører til en rigtig tabelrække og
     * har intet at gøre her, hvor rækken er et kort. */
    height: auto;
    padding: var(--rum-1) 0;
    border-bottom: none;
    text-align: left;
  }
  .tabel--linjer td.kol-type { font-size: var(--tekst-brod); font-weight: var(--vaegt-halvfed); }
  /* Linjetabellens felter skal have NAVNE på en telefon.
   * ---------------------------------------------------------------------
   * Overstyringen kunne ikke vinde: `.visuelt-skjult` sætter
   * `position: absolute !important` OG `clip-path: inset(50%)`, og blokken
   * her satte kun `position: static` uden `!important` og rørte slet ikke
   * `clip-path`. Etiketten blev derfor klippet væk alligevel, og de tre
   * inputfelter «Tekst», «Antal» og «Pris pr. enhed» stod navnløse. */
  .tabel--linjer td .felt label.visuelt-skjult {
    position: static !important;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0 0 var(--rum-1);
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: block;
    font-size: var(--tekst-lille);
    color: var(--tekst-daempet);
    /* Etiketten er en SÆTNING og arver ellers taltypografien fra `.kol-tal`
     * og `.kol-beloeb`. Monospace hører til værdier, der sammenlignes
     * lodret — ikke til «Basislinje, Pris pr. enhed». */
    font-family: var(--skrift);
    text-align: left;
  }
  .tabel--linjer td.kol-handling { text-align: left; }
  /* Klikmål på touch: også «Fjern» i linjetabellen. */
  .tabel--linjer .knap { min-height: var(--klikmaal); }
}

/* --------------------------------------------------------------------------
   TO FELTER PÅ ÉN LINJE (.feltraekke)
   .knapgruppe (gab 8, centreret) er til knapper og passer ikke til
   etiket-over-felt. Her: gab 16, og hvert felt ombrydes til sin egen linje,
   når der er under 20ch til det.
   -------------------------------------------------------------------------- */
.feltraekke { display: flex; flex-wrap: wrap; gap: var(--rum-4); }
.feltraekke > .felt { flex: 1 1 20ch; margin-top: 0; }
.feltraekke + .felt, .felt + .feltraekke, .feltraekke + .feltraekke,
.feltraekke + fieldset.felt, fieldset.felt + .feltraekke { margin-top: var(--rum-4); }

/* --------------------------------------------------------------------------
   OPSLAGETS RESULTATLISTE (fieldset.opslag)
   Radios i en ramme, adskilt af fine linjer, så tyve rækker ikke flyder
   sammen med resten af formularen. Den afkortede tekst står inde i
   fieldsettet og læses med gruppen.
   -------------------------------------------------------------------------- */
fieldset.opslag {
  margin-top: var(--rum-3);
  padding: var(--rum-2) var(--rum-3);
  border: 1px solid var(--kant-kort);
  border-radius: var(--radius);
  background: var(--kortflade);
}
fieldset.opslag > legend {
  padding: 0 var(--rum-1);
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
  color: var(--tekst-daempet);
}
fieldset.opslag > .valg + .valg { border-top: 1px solid var(--kant-fin); }
fieldset.opslag > .kort__handlinger { margin-top: var(--rum-2); }

/* Feltrammer, der er fieldsets (radiogrupper): samme rytme som .felt. */
fieldset.felt { padding: 0; margin: 0; }
fieldset.felt > legend { padding: 0; }
.felt + fieldset.felt, fieldset.felt + .felt { margin-top: var(--rum-4); }

/* Bredere formularramme til linjetabellen: seks kolonner kræver ca. 700 px,
   før tabellen ruller. Aftale-formularen får 880; de øvrige beholder 560. */
.dialog--bred { width: min(880px, 100%); }

/* ==========================================================================
   FUNDAMENTET — MÆRKELEGENDE, DEFINITIONSLISTE, TRIN, LOGIN
   Fem klasser, ingen ny PHP-komponent og ingen ny farve. Kortet fra klasse
   til designbeslutning står i designsporingen; arket peger ikke tilbage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MÆRKELEGENDE — forklaringen ud af rækken og ned under tabellen
   --------------------------------------------------------------------------
   `.maerke-forklaring` er en rigtig beslutning: et `title` er usynligt på
   touch og uopnåeligt med tastatur, så forklaringen skal stå i dokumentet.
   Men beslutningen blev truffet for statusmærket som OBJEKT — ikke for
   statusmærket gentaget ned ad en kolonne. Forklaringen forklarer
   TILSTANDEN, ikke RÆKKEN: den er den samme for alle 41 kladder på siden.
   Rækkehøjden gik fra de lovede 40 px til 60, og på en telefon til 110.

   Teksten flyttes derfor 40 px ned — den forsvinder ikke. Den står stadig
   som tekst i dokumentet, én linje pr. FOREKOMMENDE tilstand, og tabellen
   peger på den med `aria-describedby`. Uden for tabeller — på kort og på
   målerkort — bliver `.maerke-forklaring` som den er.
   -------------------------------------------------------------------------- */

.tabel td .maerke-forklaring,
/* Og i kortformen, som ER tabellen på en telefon: tre kort, der hver
   gentager den samme sætning, er nøjagtig den gentagelse, reglen findes
   for — bare lodret i stedet for i en kolonne. Legenden står under
   kortene og bærer forklaringen dér også. */
.tabel-kort .maerke-forklaring { display: none; }

.maerke-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: var(--rum-3);
  font-size: var(--tekst-lille);
  color: var(--tekst-daempet);
}
.maerke-legende__titel { font-weight: var(--vaegt-halvfed); }
.maerke-legende__par { display: inline-flex; align-items: center; gap: var(--rum-2); }

/* --------------------------------------------------------------------------
   DEFINITIONSLISTE (.def) — husets måde at vise et objekts felter
   Begge flader viste «et objekts felter» på tre forskellige måder. Én
   komponent, ét sted: 160 px etiketkolonne i en hovedkolonne, stablet i en
   sidekolonne, hvor der ikke er 160 px at give af.
   -------------------------------------------------------------------------- */

.def { margin: 0; }
.def__raekke {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--rum-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--kant-fin);
}
.def__raekke:last-child { border-bottom: none; }
.def__etiket {
  font-size: var(--tekst-lille);
  font-weight: var(--vaegt-halvfed);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tekst-daempet);
  margin: 0;
}
.def__vaerdi { font-size: var(--tekst-brod); color: var(--tekst-krop); margin: 0; overflow-wrap: anywhere; }
/* BELØB ER TABULÆRE — ALT ANDET ER PROPORTIONALT.
   ---------------------------------------------------------------------------
   `.tal` er skrevet til en talKOLONNE, hvor cifrene skal stå under hinanden og
   højrestillet. I en definitionsliste er der ingen kolonne at stå under: de
   tre tal i driftskortet («12 kørt», «0 fejlede», «14 jobs») læses hver for
   sig, og monospace gør dem mindre og fremmede end resten af listen.
   `.beloeb` og `.dato` bliver — dem SKAL man kunne sammenligne. */
.def__vaerdi .tal {
  font-family: var(--skrift);
  font-variant-numeric: normal;
  font-feature-settings: normal;
  text-align: left;
}

.def--stablet .def__raekke { grid-template-columns: 1fr; gap: 2px; }

@media (max-width: 767px) {
  .def__raekke { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------------------
   FORMULARTRIN (.trin) — det ene sted, --tekst-h2 stadig bruges
   Trinnets HVORFOR står ved siden af trinnets HVAD, så felterne slipper for
   hjælpetekster om sammenhængen. Nummeret er en glyf-badge og ikke tegnene
   «1 · » i overskriftsstrengen — så kan det være aria-hidden, uden at
   strengen bliver forkert.
   -------------------------------------------------------------------------- */

.trin {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--rum-6);
  padding: var(--rum-5) 0;
  border-bottom: 1px solid var(--kant-fin);
}
.trin:last-child { border-bottom: none; }
.trin__hoved { display: flex; flex-direction: column; gap: 6px; }
.trin__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--graa-900);
  color: var(--hvid);
  font-family: var(--skrift-tal);
  font-variant-numeric: tabular-nums;
  font-size: var(--tekst-tabel);
  font-weight: var(--vaegt-fed);
}
h2.trin__titel { font-size: var(--tekst-h2); margin: 0; }
.trin__hjaelp { font-size: var(--tekst-tabel); color: var(--tekst-daempet); max-width: 64ch; }

@media (max-width: 767px) {
  .trin { grid-template-columns: 1fr; gap: var(--rum-4); }
}

/* --------------------------------------------------------------------------
   KVITTERING INDE I EN FORMULAR (p.kvittering--ok)
   Ikke K-9: det er en CSS-klasse til det valgte objekt i et trin. Glyf, ord
   og venstrekant bærer den — farven er den fjerde kanal, ikke den første.
   Afgrænset til <p>: uden afgrænsningen vandt reglen over K-9's
   `div.kvittering.kvittering--ok` (senere i arket, samme vægt) og centrerede
   glyffen og sænkede skrifttrinnet i HVER ok-kvittering.
   -------------------------------------------------------------------------- */

p.kvittering--ok {
  display: flex;
  align-items: center;
  gap: var(--rum-2);
  padding: var(--rum-3) var(--rum-4);
  border: 1px solid var(--tone-ok);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--tone-ok-tint);
  color: var(--tone-ok);
  font-size: var(--tekst-tabel);
}
p.kvittering--ok .ikon { width: 18px; height: 18px; }
.kvittering--ok__navn { font-weight: var(--vaegt-halvfed); }
.kvittering--ok__skift { margin-left: auto; font-weight: var(--vaegt-halvfed); color: var(--tone-ok); }

/* --------------------------------------------------------------------------
   FARLIGT KORT (.kort--farlig)
   Kortet VARSLER, knappen ER den farlige handling — derfor rav på kortet og
   rødt på knappen. Rækkefølgen inde i kortet er bevidst: overskrift,
   forklaring, felt, knap. Konsekvensen læses, før knappen ses.
   -------------------------------------------------------------------------- */

.kort--farlig { border-left: 4px solid var(--tone-opmaerksom); }

/* --------------------------------------------------------------------------
   LOG IND (.login-ramme, .kort--login) — S1 og P1 deler skelet
   Kundefladens login bærer INTET om, at der findes en platformsflade. De to
   sider adskilles på platformens egne tokens: lyshed (sidebunden), form
   (radius + signaturstribe) og ord (mærkatet). Tre uafhængige kanaler, også
   uden et topbånd at bære dem.
   -------------------------------------------------------------------------- */

/* Log ind har intet chrome, og rammen skal derfor kunne fylde hele siden:
   den lodrette centrering er en 100dvh-boks, og platformens signaturstribe
   skal gå fra kant til kant. `main.indhold`s padding ville ellers lægge en
   ramme om begge dele. Kan browseren ikke `:has()`, står login-kortet med
   sidens almindelige indrykning — dårligere, men ikke i stykker, og det er
   den sikre af de to retninger. */
.indhold:has(> .login-ramme) { padding: 0; max-width: none; }

.login-ramme {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: var(--rum-6) var(--rum-4);
}
.login-ramme > * { width: min(416px, 100%); }

.login-maerke {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rum-3);
  margin-bottom: var(--rum-3);
}
.login-maerke__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--primaer);
  color: var(--hvid);
  font-weight: var(--vaegt-fed);
  font-size: var(--tekst-mellem);
  flex: 0 0 auto;
}
.login-maerke__navn { font-size: var(--tekst-mellem); font-weight: var(--vaegt-halvfed); color: var(--tekst-overskrift); }

.kort--login {
  border-radius: var(--radius-stor);
  box-shadow: var(--skygge-hviler);
  padding: var(--rum-6);
}
/* Sidens vigtigste ord var 17 px — mindre end en kortoverskrift alle andre
   steder. Log ind-kortets titel ER sidens h1. */
.kort--login .kort__titel { font-size: var(--tekst-h1); letter-spacing: -0.01em; }
.kort--login .kort__hoved { margin-bottom: 20px; }
.kort--login .felt + .felt { margin-top: 20px; }
.kort--login .knapgruppe { margin-top: 20px; }
.kort--login .knapgruppe .knap { width: 100%; }
.kort--login input { max-width: none; }
.kort--login > .lille { margin-top: var(--rum-3); }

/* ==========================================================================
   DE KLASSER, SKÆRMENE SELV BEHØVER
   Fundamentet ovenfor (.def, .trin, .kort--farlig, .kvittering--ok,
   .maerke-legende) bruges af alle skærme. Herunder står det, omtegningen af
   detaljeskærmene krævede — og intet andet. Ingen ny farve, intet nyt token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SEKTIONSHOVED — overskrift til venstre, én vej videre til højre
   En sektionsoverskrift og dens «se alle» stod før på hver sin linje, og
   linket lignede så sektionens første indhold. De hører sammen: den ene
   siger hvad man ser, den anden hvor resten er.
   -------------------------------------------------------------------------- */

.sektion__hoved {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rum-3);
  flex-wrap: wrap;
  margin-bottom: var(--rum-3);
}
.sektion__hoved h2 { margin: 0; }
.sektion__hoved__link { font-size: var(--tekst-tabel); font-weight: var(--vaegt-halvfed); }

/* Hændelsens navn er kolonnens bærende ord — de tre andre kolonner er
   omstændigheder. */
.tabel td.kol-haendelse { font-weight: var(--vaegt-halvfed); }

/* --------------------------------------------------------------------------
   DETALJEGITTER — hovedkolonne + 360 px sidekolonne
   Aftalekortet og tenantkortet lagde alt i ÉN spalte, og en 1440 px skærm
   viste derfor et 700 px indhold med 700 px luft ved siden af. Det, der skal
   læses i rækkefølge, står i hovedkolonnen; det, der slås op, i sidekolonnen.
   `align-items: start` er ikke pynt: uden den strækkes et kort på 120 px til
   at følge et naboskort på 600.
   -------------------------------------------------------------------------- */

.detaljegitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--rum-5);
  align-items: start;
}
.detaljegitter__hoved,
.detaljegitter__side { display: flex; flex-direction: column; gap: var(--rum-5); min-width: 0; }

@media (max-width: 1023px) {
  /* Sidekolonnen lægger sig UNDER hovedkolonnen — den er opslag, ikke
     forudsætning, og skal derfor ikke læses først. */
  .detaljegitter { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   FILTERLINJE MED SØGEGLYF (S3, S20, P4)
   Pladsholderen bærer nu hjælpeteksten, og glyffen siger hvad feltet er,
   før man har læst pladsholderen. Glyffen ligger i feltet og ikke foran det:
   et ikon uden for feltet er en knap, man prøver at trykke på.
   -------------------------------------------------------------------------- */

.soegefelt { position: relative; display: block; flex: 0 1 480px; min-width: 0; }
.soegefelt > input {
  width: 100%;
  max-width: none;
  min-height: var(--klikmaal);
  padding-left: 38px;
}
.soegefelt > .ikon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--tekst-daempet);
  pointer-events: none;
}
/* «Ryd filtre» yderst til højre — den fortryder linjen og hører derfor ikke
   ind mellem de to knapper, der udfører den (audit 06). */
.filterlinje__hoejre { margin-left: auto; }

/* Hurtigfiltrene er en navngiven gruppe og ikke tre løse links. */
.chipraekke { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rum-2); margin-top: var(--rum-3); }
.chipraekke__etiket { font-size: var(--tekst-lille); font-weight: var(--vaegt-halvfed); color: var(--tekst-daempet); }

/* --------------------------------------------------------------------------
   KORTGRUPPE (S9) — én overskrift pr. gruppe, kortene i et gitter
   Konfigurationsskærmen havde fem sektioner, hvor de fire havde samme slags
   indhold, og gentog den samme sætning tretten gange. Én <h2> pr. gruppe,
   gruppens fælles note ÉN gang under overskriften, kortene derefter.
   -------------------------------------------------------------------------- */

.kortgruppe + .kortgruppe { margin-top: var(--rum-6); }
.kortgruppe > h2 { margin-bottom: var(--rum-2); }
.kortgruppe__note { font-size: var(--tekst-tabel); color: var(--tekst-daempet); margin-bottom: var(--rum-3); max-width: 72ch; }
.kortraekke {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--rum-4);
  align-items: start;
}
@media (max-width: 767px) {
  .kortraekke { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   TIDSMASKINEN (S3b) — en visningskontrol i handlingszonen
   Formularen lå før inde i «Aftalen»-kortet som et sjette datafelt, og et
   datofelt mellem aftalens egne oplysninger læses som noget, man kan SÆTTE
   på aftalen. Den hører sammen med sidens øvrige knapper.
   -------------------------------------------------------------------------- */

.tidsmaskine { display: inline-flex; align-items: center; gap: var(--rum-2); }
.tidsmaskine input[type="date"] {
  min-height: var(--klikmaal);
  /* Et datofelt skal rumme «10.09.2026» og browserens egen kalenderknap —
     ikke mere. Feltets standardbredde er sidens bredeste kontrol. */
  width: 13ch;
  min-width: 0;
}

/* Kortets ene forklarende afsnit — tilstandens forklaring, sagt én gang
   under overskriften i stedet for ved hvert mærke og i hver tabelrække. */
.kort__forklaring {
  font-size: var(--tekst-tabel);
  color: var(--tekst-daempet);
  margin-bottom: var(--rum-3);
}
/* Kortets vej videre: en sætning, ikke en knap. En knap alene under en
   overskrift vejer lige så meget som overskriften (audit 04). */
.kort__link { font-size: var(--tekst-tabel); font-weight: var(--vaegt-halvfed); }

/* --------------------------------------------------------------------------
   TRINFORMULAREN (S20) — kortet, felterne og handlingslinjen
   `.trin` selv er Del A's. Herunder står kun det, kortet omkring trinnene
   behøver: ingen ramme mellem trinnene (den streg, `.trin` selv tegner, er
   delingen), og en handlingslinje, der hører til hele formularen.
   -------------------------------------------------------------------------- */

.kort--trin { padding: 0 var(--rum-6); }
.trin__felter { min-width: 0; }

/* `.feltgrid`-cellerne skal stå i toppen af deres række. Uden dette
   strækkes et 40 px felt til at følge en radiogruppe med tre hjælpetekster,
   og etiketten flyder midt i cellen. */
.feltgrid > * { align-self: start; }

.trin__handlinger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rum-3);
  padding: var(--rum-5) 0;
  border-top: 1px solid var(--kant-fin);
}
.trin__handlinger > p { margin: 0; max-width: 60ch; }

/* Linjetabellens fod: én handling til venstre, én oplysning til højre —
   og ALDRIG et beregnet beløb (UI-006). */
.tabelfod {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rum-3);
  padding: var(--rum-3) 0;
}

@media (max-width: 767px) {
  .kort--trin { padding: 0 var(--rum-4); }
  .trin__handlinger { flex-direction: column; align-items: stretch; }
}

/* En ny overskrift efter et feltgitter skal have luft: uden den klæber
   «Første ejer» til feltet ovenfor og læses som dets hjælpetekst. */
.feltgrid + .dialog__titel { margin-top: var(--rum-5); }


/* ==========================================================================
   REGNSKABSSYSTEM OG INTEGRATIONER
   Forbind med ét klik, «Hvem styrer hvad», platformens app-nøgler.
   Kun eksisterende tokens; ingen ny farve.
   ========================================================================== */

/* Kortoverskriften er 18 px på begge skærme (kortets h2). */
.regnskab .kort__titel,
.integrationer .kort__titel { font-size: var(--tekst-h3); font-weight: var(--vaegt-halvfed); color: var(--tekst-overskrift); margin: 0; }

/* Afstand: bånd/kvittering → første kort 16 px, kort → kort 24 px. */
.regnskab > .baand,
.regnskab > .kvittering,
.regnskab > .kort,
.regnskab > form.kort,
.regnskab > .chipraekke--system,
.regnskab > .tilstand,
.regnskab > .dialog,
.integrationer > .kort,
.integrationer > .kvittering,
.integrationer > .tilstand,
.integrationer > .dialog { margin-top: var(--rum-4); }
.regnskab > .kort + .kort,
.regnskab > .kort + form.kort,
.regnskab > form.kort + .kort,
.integrationer > .kort + .kort { margin-top: var(--rum-5); }

/* Ikke forbundet: kortet er en handling, ikke en tabel. */
.kort--forbind { max-width: 640px; }
.kort__hoved--glyf { justify-content: flex-start; align-items: center; gap: var(--rum-3); }
.kort__hoved--glyf > .ikon { width: 24px; height: 24px; flex: none; color: var(--tekst-daempet); }
.kort__hoved--glyf > .maerke { margin-left: auto; }
.forbind__krop { font-size: var(--tekst-brod); color: var(--tekst-krop); line-height: var(--linje-brod); max-width: 56ch; margin: 0; }
.forbind__bagefter { font-size: var(--tekst-tabel); color: var(--tekst-daempet); margin: var(--rum-3) 0 0; max-width: 56ch; }
.forbind__tidligere {
  display: flex;
  align-items: flex-start;
  gap: var(--rum-2);
  margin: var(--rum-3) 0 0;
  font-size: var(--tekst-tabel);
  color: var(--tekst-daempet);
}
.forbind__tidligere .ikon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.kort--forbind .knapenhed { margin-top: var(--rum-4); max-width: 56ch; }
.kort--forbind .knap-forklaring { max-width: 56ch; }
.chipraekke--system { margin-bottom: var(--rum-3); }

/* En knap og dens forklaring er ÉN enhed — forklaringen flugter med knappen. */
.knapenhed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rum-1);
  max-width: min(40ch, 100%);
}
.knapenhed > .knap-forklaring { margin-top: 0; }
.kort__handlinger--enheder { align-items: flex-start; margin-top: var(--rum-4); }
.kort__handlinger .knapenhed--farlig,
.kort__handlinger .knap--farlig { margin-left: auto; }
.kort__handlinger .knapenhed--farlig .knap--farlig { margin-left: 0; }

/* «Retninger» på én linje: parrene brydes mellem par, aldrig inde i et par. */
.retningspar { display: inline-block; white-space: nowrap; }

/* «Vis prøvens detaljer» — native <details>, ingen JS. */
.detaljer { margin-top: var(--rum-3); }
.detaljer > summary {
  font-size: var(--tekst-tabel);
  font-weight: var(--vaegt-halvfed);
  color: var(--link);
  cursor: pointer;
  min-height: var(--klikmaal);
  display: list-item;
}

/* «Hvem styrer hvad»: tre ligeværdige rækker uden nummerbadge. */
.kort--retninger .trinliste { margin-top: var(--rum-3); }
.trinliste > .trin:first-child { border-top: 1px solid var(--kant-fin); }
.trinliste > .trin:last-child { border-bottom: 1px solid var(--kant-fin); }
.trin--raekke .trin__titel { font-size: var(--tekst-mellem); font-weight: var(--vaegt-halvfed); color: var(--tekst-overskrift); margin: 0; }
.kort--retninger .trin__handlinger { padding: var(--rum-4) 0 0; }
.kort--retninger .felt--begrundelse { margin-top: var(--rum-4); }
.kort--retninger .felt--begrundelse input { max-width: 44ch; }
.kort--retninger .valg--stak:has(input:checked) .valg__tekst > span:first-child { font-weight: var(--vaegt-halvfed); }
.kort--retninger .trin__felter > .kvittering { margin: var(--rum-3) 0; }

/* Platformens integrationskort. */
.kode--marker { user-select: all; overflow-wrap: anywhere; }
.integration__formular { border-top: 1px solid var(--kant-fin); margin-top: var(--rum-4); padding-top: var(--rum-4); }
.integration__skift { font-size: var(--tekst-brod); font-weight: var(--vaegt-halvfed); color: var(--tekst-overskrift); margin: 0 0 var(--rum-1); }
.felt__kode { font-family: var(--skrift-tal); font-size: var(--tekst-tabel); }

@media (max-width: 767px) {
  .kort--forbind .knap { width: 100%; }
  .kort--forbind .knapenhed { max-width: none; align-items: stretch; }
  .kort__handlinger--enheder { flex-direction: column; align-items: stretch; }
  .kort__handlinger--enheder .knapenhed { max-width: none; align-items: stretch; }
  .kort__handlinger--enheder .knap { width: 100%; }
  .kort__handlinger .knapenhed--farlig { margin-left: 0; margin-top: var(--rum-5); }
}
@media (pointer: coarse) {
  .chipraekke--system .chip { min-height: 40px; }
}