@layer tg-legacy {
/* Tillidsgruppen — web
 *
 * ── Hvem det er til ─────────────────────────────────────────────────────
 *
 * Tillidsvalgte: elektrikere, SOSU'er, lagerfolk, valgt af deres kolleger.
 * De åbner det på en telefon i en pause, tit fordi noget er gået galt for
 * en, de kender. De er ikke jurister, og de har ikke lang tid.
 *
 * ── Hvad der bærer designet ─────────────────────────────────────────────
 *
 * Dybde frem for streger. En hårstreg er billig; en flade der ligger
 * ovenpå en anden, er tydelig. Derfor har kortene skygge og ingen kant, og
 * derfor er der luft mellem tingene i stedet for linjer imellem dem.
 *
 * Farve med selvtillid. Rummet ejer farven — dyb kongeblå for tillids-
 * arbejde, dyb skovgrøn for arbejdsmiljø — og den bruges, hvor den gør
 * gavn: på knappen, på det valgte menupunkt, i skiven bag et ikon. Resten
 * er varmt papir og blæk.
 *
 * Tal med vægt. Antallet af åbne sager står i antikva i 52 px. Et tal er
 * det, man kom efter, og det fortjener at se sådan ud.
 */

/* Skrifterne ligger på jeres eget domæne. Hentes de hos Google, sender
   browseren den besøgendes IP-adresse dertil ved hver sidevisning — og
   det her bruges til at slå op i sager om navngivne kolleger.
   Se assets/fonts/LÆSMIG.md. */





:root {
  /* Papir og blæk. Varmt, ikke koldt grå — fladen skal se ud som noget,
     der kan ligge på et bord. */
  --papir: var(--tg-info-soft);
  --papir-dyb: var(--tg-info-soft);
  --ark: #FFFFFF;
  --ark-daempet: var(--tg-info-soft);
  --blaek: var(--tg-ink);
  --daempet: var(--tg-muted);
  --svag: var(--tg-line-strong);
  --streg: var(--tg-line);
  --streg-kraftig: var(--tg-line);
  --grafit: var(--tg-ink);
  --grafit-dyb: var(--tg-ink);

  /* Rummene. Dybe og mættede — en farve man kan huske. */
  --tr: var(--tg-primary);
  --tr-dyb: var(--tg-primary);
  --amr: var(--tg-navy);
  --amr-dyb: var(--tg-navy);
  --admin: var(--tg-primary);

  --blaa-bleg: var(--tg-info-soft);
  --groen-bleg: var(--tg-soft);
  --roed: var(--tg-danger);
  --roed-dyb: var(--tg-danger);
  --roed-bleg: var(--tg-danger-soft);

  --advarsel: var(--tg-warning);
  --advarsel-bleg: var(--tg-warning-soft);
  --forbud: var(--tg-danger);

  --accent: var(--tr);
  --accent-dyb: var(--tr-dyb);
  --accent-bleg: var(--blaa-bleg);

  /* Skygger er farvet med blækket, aldrig sort. Sort skygge på varmt
     papir bliver grå og død. */
  --skygge-1: 0 1px 2px rgba(25,28,26,.05);
  --skygge-2: 0 1px 3px rgba(25,28,26,.05), 0 8px 20px -6px rgba(25,28,26,.10);
  --skygge-3: 0 2px 6px rgba(25,28,26,.06), 0 24px 48px -12px rgba(25,28,26,.20);

  --r-1: 10px;
  --r-2: 16px;
  --r-3: 24px;

  --radius-felt: var(--r-1);
  --radius-kort: var(--r-2);
  --radius-ark: var(--r-3);
  --skinne: 64px;
  --baand: 64px;
  --gutter: 24px;

  --serif: Inter, Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root[data-room="AMR"] {
  --accent: var(--amr); --accent-dyb: var(--amr-dyb); --accent-bleg: var(--groen-bleg);
}
:root[data-room="ADMIN"] {
  --accent: var(--admin); --accent-dyb: var(--tg-primary); --accent-bleg: var(--tg-info-soft);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--papir);
  color: var(--blaek);
  font: 400 16px/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

/* Datoer, antal og beløb skal stå i kolonne, ikke danse. */
.tal, .raekke .linje, .sidehoved .tal, .pille { font-variant-numeric: tabular-nums; }

/* Man skal kunne se, hvor man er, når man går med tabulator. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.skinne :focus-visible, .ark-top :focus-visible, .bund :focus-visible { outline-color: var(--accent); }
.bund :focus-visible { outline-color: #FFFFFF; }

/* ── Skinnen ─────────────────────────────────────────────────────────── */

/* Hvid, ikke sort. En sort bjælke øverst er kendetegnet ved et
   administrationspanel; hvidt papir med farve på de steder, der betyder
   noget, er kendetegnet ved et produkt, nogen har betalt for. */
/* Skallen står stille; det er indholdet, der ruller.
 *
 * Før rullede hele siden: hoved og sidemenu vandrede opad, og man skulle
 * langt ned og langt op igen for at komme tilbage til menuen. Nu er
 * vinduet rammen — hoved og menu bliver, hvor de er, og midterfeltet har
 * sin egen rulle.
 *
 * Loginsiden har ingen .ramme og skal stadig kunne rulle helt normalt;
 * derfor :has() frem for en klasse på body. */
.skal { min-height: 100vh; display: flex; flex-direction: column; }
.skal:has(.ramme) { height: 100dvh; min-height: 0; overflow: hidden; }

.skinne {
  /* Skinnen var halvgennemsigtig med en sløring bagved. Den ligger fast
     øverst over alt, der ruller, så browseren skulle male sløringen om
     ved hvert eneste billede — på en rigtig maskine er det dét, man
     mærker som hak. Fladen er nu bare hvid. Over varmt papir kunne man
     alligevel ikke se forskellen. */
  background: var(--ark);
  border-bottom: 1px solid var(--streg);
  position: sticky; top: 0; z-index: 40;
}
.skinne-inder {
  max-width: 1280px; margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--skinne);
  display: flex; align-items: center; gap: 16px;
}
.skinne-maerke {
  display: flex; align-items: center; gap: 11px;
  color: var(--blaek); text-decoration: none; flex: 0 0 auto;
}
.skinne-maerke img { width: 30px; height: 30px; object-fit: contain; }
.skinne-navn { font-size: 16.5px; font-weight: 700; letter-spacing: -.45px; }
.skinne-forbund {
  font-size: 14px; color: var(--daempet);
  padding-left: 17px; border-left: 1px solid var(--streg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.skinne-fyld { flex: 1 1 auto; }
.skinne-ud {
  border: 0; background: transparent; color: var(--svag);
  width: 38px; height: 38px; border-radius: var(--r-1); cursor: pointer; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s ease, color .14s ease;
}
.skinne-ud:hover { background: var(--papir-dyb); color: var(--blaek); }

/* Rumskifteren: en skive hvor det valgte rum ligger ovenpå i sin egen
   farve. Det er det ene sted farven optræder i skinnen, og derfor det
   første øjet finder. */
.rum {
  display: flex; flex: 0 1 auto; min-width: 0;
  background: var(--papir-dyb); padding: 4px; border-radius: 999px;
}
.rum .lang { display: inline; }
.rum .kort { display: none; }
.rum button {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  color: var(--daempet);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.1px;
  padding: 8px 17px; border-radius: 999px;
  transition: color .14s ease;
}
.rum button:hover { color: var(--blaek); }
.rum button.aktiv {
  background: var(--accent); color: #FFFFFF; font-weight: 600;
  box-shadow: var(--skygge-1);
}

/* ── Sidens hoved ────────────────────────────────────────────────────── */

/* Navnet og tallet står sammen, adskilt fra indholdet af luft frem for en
   streg. Handlingen ligger til højre i samme linje — der hvor øjet
   slipper overskriften igen. */
.sidetop {
  display: flex; align-items: flex-end; gap: 24px;
  padding: 40px 0 0;
  margin-bottom: 30px;
}
.sidetop-tekst { flex: 1; min-width: 0; }
.sidetop h1 {
  margin: 0;
  font: 600 31px/1.15 var(--sans);
  letter-spacing: -.85px;
  color: var(--blaek);
  overflow-wrap: anywhere;
}
.sidetop-fakta {
  margin: 7px 0 0;
  font-size: 16px; color: var(--daempet);
  font-variant-numeric: tabular-nums;
}

/* XAVI-navnet er sidens ene markante element. Maskotten stod før her
   oppe i højre hjørne og svævede uden at høre til noget. */
.sidetop-xavi { padding-top: 26px; margin-bottom: 18px; }
.sidetop-xavi .xavi-maerke {
  display: flex; align-items: center; gap: 14px;
  margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -1.8px; line-height: 1;
}
.xavi-beta {
  font-size:13px; font-weight: 700; letter-spacing: .8px;
  color: var(--accent); background: var(--accent-bleg);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  align-self: center;
}

/* ── Indholdet ───────────────────────────────────────────────────────── */

.indhold {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0;
}
/* Polstringen sad før på rullefeltet. Nu ligger den på indholdet, så
   foden kan brede sig helt ud til kanten som før. */
.sidetop { padding-left: var(--gutter); padding-right: var(--gutter); }
.sideindhold { padding: 0 var(--gutter) 70px; }

/* ── Navigation ──────────────────────────────────────────────────────── */

.ramme {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  max-width: 1280px; width: 100%; margin: 0 auto;
}
.ramme-krop { display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; }

.nav {
  width: 236px; flex: 0 0 236px; padding: 30px 0 48px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.nav-inder {
  position: relative;
  display: flex; flex-direction: column; gap: 3px; padding: 0 14px 0 0;
}
/* Markøren ligger bagved punkterne og glider fra det ene til det næste.
   Den er sat med translateY fra JavaScript, fordi punkterne ikke har
   samme højde på alle skærme. */
.nav-maerke {
  position: absolute; left: 0; right: 14px; top: 0;
  border-radius: var(--r-1);
  background: var(--accent-bleg);
  pointer-events: none;
}
/* Er markøren i brug, skal punktet ikke også have sin egen baggrund —
   så ville der ligge to. */
.nav-inder.har-maerke a.aktiv { background: transparent; }
.nav a {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px;
  color: var(--daempet); text-decoration: none;
  font-size: 15px; font-weight: 500; letter-spacing: -.15px;
  border-radius: var(--r-1);
  transition: background .14s ease, color .14s ease;
}
.nav a:hover { background: var(--papir-dyb); color: var(--blaek); }
.nav a.aktiv {
  color: var(--accent); font-weight: 600;
  background: var(--accent-bleg);
}
.nav a svg { width: 19px; height: 19px; flex: 0 0 19px; }
.nav .skel {
  margin: 18px 14px 8px; padding-top: 16px;
  border-top: 1px solid var(--streg);
  font-size:13px; font-weight: 600; color: var(--svag); letter-spacing: .2px;
}

/* ── Flader ──────────────────────────────────────────────────────────── */

/* Et kort er en flade, der ligger ovenpå papiret. Ingen kant — skyggen
   gør arbejdet, og den er farvet med blækket, så den ikke bliver grå. */
.ark {
  background: var(--ark);
  border-radius: var(--r-2);
  box-shadow: var(--skygge-2);
  padding: 8px 4px;
}
.gitter { display: grid; gap: 18px; }
.gitter.to   { grid-template-columns: repeat(2, 1fr); }
.gitter.tre  { grid-template-columns: repeat(3, 1fr); }
.gitter.fire { grid-template-columns: repeat(4, 1fr); }

.sidehoved { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.sidehoved .tal { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.sidehoved .note {
  color: var(--daempet); font-size: 14.5px; font-weight: 400;
  background: none; border: 0; padding: 0;
}
.sidehoved .fyld { flex: 1; }

/* ── Rækker ──────────────────────────────────────────────────────────── */

/* Stregen mellem to rækker begynder, hvor teksten begynder — ikke ved
   kortets kant. Det er en lille ting, men det er den slags, der skiller
   noget forarbejdet fra noget sammensat. */
.raekke {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 20px;
  text-decoration: none; color: inherit;
  position: relative;
  border-radius: var(--r-1);
}
.raekke + .raekke::before {
  content: ''; position: absolute; left: 75px; right: 20px; top: 0;
  border-top: 1px solid var(--streg);
}
.raekke .maerke {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-bleg); color: var(--accent);
}
.raekke .krop { min-width: 0; flex: 1; }
.raekke .titel {
  font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.25px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.raekke .linje {
  margin-top: 3px; color: var(--daempet);
  font-size: 13.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.raekke.klik { cursor: pointer; transition: background .14s ease; }
.raekke.klik:hover { background: var(--papir); }
.raekke.klik:hover + .raekke::before, .raekke.klik:hover::before { border-color: transparent; }

/* Haster noget, får rækkens ikonskive farven — ikke kun mærkatet ude til
   højre, hvor øjet først kommer til sidst. */
.raekke:has(.pille.stop) .maerke { background: var(--roed-bleg); color: var(--forbud); }
.raekke:has(.pille.obs)  .maerke { background: var(--advarsel-bleg); color: var(--advarsel); }

/* ── Knapper ─────────────────────────────────────────────────────────── */

.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--r-1);
  background: var(--accent); color: #FFFFFF;
  box-shadow: var(--skygge-1);
  font-size: 15.5px; font-weight: 600; letter-spacing: -.15px;
  cursor: pointer; text-decoration: none;
  transition: background .14s ease, box-shadow .14s ease, transform .1s ease;
}
.knap:hover { background: var(--accent-dyb); box-shadow: var(--skygge-2); }
.knap:active { transform: translateY(1px); box-shadow: var(--skygge-1); }
.knap:disabled {
  background: var(--papir-dyb); color: var(--svag); cursor: default;
  box-shadow: none; transform: none;
}
.knap.bred { width: auto; min-width: 180px; display: inline-flex; }
.knap.stille {
  background: var(--ark); color: var(--blaek);
  border: 1.5px solid var(--streg-kraftig);
  box-shadow: none; font-weight: 600;
}
.knap.stille:hover { background: var(--papir-dyb); border-color: var(--daempet); }
.knap.tekst {
  background: transparent; color: var(--daempet); box-shadow: none;
  min-height: 40px; padding: 0 10px; font-weight: 600; font-size: 14.5px;
}
.knap.tekst:hover { background: var(--papir-dyb); color: var(--blaek); }

/* ── Felter ──────────────────────────────────────────────────────────── */

.felt { display: block; margin: 0 0 18px; }
.felt > span {
  display: block; margin: 0 0 8px;
  font-size: 13.5px; font-weight: 600; color: var(--blaek); letter-spacing: -.1px;
}
.felt input, .felt textarea, .felt select {
  width: 100%; min-height: 50px; padding: 13px 15px;
  background: var(--ark);
  border: 1.5px solid var(--streg-kraftig);
  border-radius: var(--r-1);
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.felt textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.felt input:hover, .felt textarea:hover, .felt select:hover { border-color: var(--daempet); }
.felt input:focus, .felt textarea:focus, .felt select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.felt input:focus-visible, .felt textarea:focus-visible, .felt select:focus-visible { outline: none; }

/* En overskrift midt i en formular.
 *
 * Redigeringen af et fagforbund er tolv felter i træk. Uden et sted,
 * hvor licensen holder op og administratoren begynder, er den én lang
 * køre, og man læser den ikke — man leder i den. Stregen ovenover gør
 * afsnittet til et afsnit; det første har ingen streg, for der er
 * ikke noget over det. */
.felt-afsnit {
  margin: 30px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--streg);
}
.felt-afsnit:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.felt-afsnit strong {
  display: block;
  font: 400 19px/1.25 var(--serif);
  letter-spacing: -.3px; color: var(--blaek);
}
.felt-afsnit em {
  display: block; margin-top: 4px;
  font-style: normal; font-size: 13px; line-height: 1.5; color: var(--daempet);
}

/* Noget, man skal kunne se, men ikke rette. */
.felt-visning { margin: 0 0 18px; }
.felt-visning-navn {
  display: block; margin: 0 0 8px;
  font-size: 13.5px; font-weight: 600; color: var(--blaek);
}
.felt-liste { margin: 0; padding: 0; list-style: none; }
.felt-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 11px 14px; margin-bottom: 7px;
  background: var(--papir-dyb); border-radius: var(--r-1);
}
.felt-liste strong { font-size: 14px; font-weight: 600; color: var(--blaek); }
.felt-liste span { font-size: 13px; color: var(--daempet); }
.felt-liste em {
  font-style: normal; font-size:13px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--advarsel-bleg); color: var(--advarsel);
}
.felt-tom {
  margin: 0; padding: 13px 14px;
  background: var(--papir-dyb); border-radius: var(--r-1);
  font-size: 13.5px; line-height: 1.5; color: var(--daempet);
}

/* ── Mærkater og beskeder ────────────────────────────────────────────── */

.pille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size:13px; font-weight: 600; white-space: nowrap; letter-spacing: -.05px;
  background: var(--papir-dyb); color: var(--daempet);
}
.pille.god  { background: var(--groen-bleg); color: var(--amr); }
.pille.obs  { background: var(--advarsel-bleg); color: var(--advarsel); }
.pille.stop { background: var(--roed-bleg); color: var(--forbud); }

.note {
  padding: 15px 18px; border-radius: var(--r-1);
  font-size: 14.5px; font-weight: 500; line-height: 1.5;
  background: var(--accent-bleg); color: var(--accent-dyb);
}
.note.fejl { background: var(--roed-bleg); color: var(--forbud); }

.tom {
  text-align: center; padding: 72px 28px; color: var(--daempet);
  background: var(--ark); border-radius: var(--r-2); box-shadow: var(--skygge-2);
}
.tom .ikon {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-bleg); color: var(--accent);
}
.tom h2 {
  margin: 0 0 8px; font-size: 20px; font-weight: 600;
  letter-spacing: -.4px; color: var(--blaek);
}
.tom p { margin: 0 auto; font-size: 15.5px; line-height: 1.55; max-width: 40ch; }

/* ── Indlæsning ──────────────────────────────────────────────────────── */

.spinner {
  width: 26px; height: 26px; margin: 64px auto;
  border: 2.5px solid var(--streg); border-top-color: var(--accent);
  border-radius: 50%; animation: snurr .8s linear infinite;
}
@keyframes snurr { to { transform: rotate(360deg); } }
@keyframes hop { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

/* ── Mobil ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .ramme-krop { flex-direction: column; }
  .nav {
    width: auto; flex: 0 0 auto;
    border-bottom: 1px solid var(--streg);
    background: var(--ark);
    padding: 0; overflow-y: visible; z-index: 30;
  }
  .nav-inder {
    flex-direction: row; gap: 4px; overflow-x: auto;
    padding: 8px var(--gutter); position: static;
    scrollbar-width: none;
  }
  .nav-inder::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 9px 13px; }
  .nav .skel { display: none; }
  .sidetop { padding-top: 30px; }
}

@media (max-width: 980px) {
  .gitter.fire { grid-template-columns: repeat(2, 1fr); }
  .gitter.tre  { grid-template-columns: repeat(2, 1fr); }
  .rum .lang { display: none; }
  .rum .kort { display: inline; }
  .rum button { padding: 8px 14px; }
  .skinne-forbund { display: none; }
  /* På døren er skinnen tom på nær mærket, så linjen har god plads. */
  .doer-skinne .skinne-forbund { display: block; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  .sidetop { flex-direction: column; align-items: stretch; gap: 18px; }
  .sidetop h1 { font-size: 27px; letter-spacing: -.6px; }
  .sidetop .knap { width: 100%; }
  .sidetop-xavi { flex-direction: row; align-items: flex-end; }
  .sidetop-xavi .xavi-maerke { font-size: 33px; letter-spacing: -1.5px; }
  .gitter.to, .gitter.tre, .gitter.fire { grid-template-columns: 1fr; }
  .nav a span { display: none; }
  .nav a { padding: 10px 12px; }
  .skinne-navn { display: none; }
  .raekke { padding: 14px 14px; gap: 13px; }
  .raekke + .raekke::before { left: 66px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Bunden ──────────────────────────────────────────────────────────── */

/* Den var en sort klods.
 *
 * Huset har selv den regel, at en sort bjælke er et administrationspanel
 * — det var derfor skinnen øverst blev hvid. Bunden blev bare stående
 * sort, og så lå der en mørk mur under hver eneste side.
 *
 * Nu er den papir som resten, adskilt med en streg og en anelse dybere
 * tone. Løftet om anonymitet står i antikva i læsestørrelse, fordi det
 * er det, der betyder noget for den, der skal svare på, hvad hun tjener.
 * Alt andet er trukket ned til det, loven kræver. */
.bund {
  margin-top: 64px;
  border-top: 1px solid var(--streg);
  background: var(--papir-dyb);
  color: var(--daempet);
}
.bund-inder {
  max-width: 1180px; margin: 0 auto;
  padding: 26px var(--gutter) 32px;
  display: grid; gap: 14px 48px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.bund-drift {
  grid-column: 1; margin: 0; max-width: 48ch;
  font-size: 13px; line-height: 1.6;
}
/* Fire links er ikke en spalte. De står på én linje, hvor der er plads. */
.bund-links {
  grid-column: 2;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 13.5px;
}
.bund-links a {
  color: var(--daempet); text-decoration: none;
  transition: color .14s ease;
}
.bund-links a:hover {
  color: var(--blaek); text-decoration: underline; text-underline-offset: 3px;
}

/* Fire links på række er brede. Får driftslinjen mindre end det halve
   at stå på, brækker den i tre stumper — så hellere stable tidligt. */
@media (max-width: 900px) {
  .bund-inder { grid-template-columns: 1fr; gap: 14px; }
  .bund-links { grid-column: 1; }
}

/* ── Cookiebanner ────────────────────────────────────────────────────── */

/* Banneret lægger sig i hjørnet frem for at spærre hele skærmen. Det skal
   kunne besvares, ikke overvindes. */
.cookiebanner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
  max-width: 460px;
  background: var(--ark);
  border: 1px solid var(--streg);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(14px);
  transition: opacity .24s ease, transform .24s ease;
}
.cookiebanner.inde { opacity: 1; transform: none; }
.cookiebanner-inder { padding: 20px; }
.cookiebanner h2 { margin: 0 0 8px; font: 400 20px/1.25 var(--serif); color: var(--blaek); }
.cookiebanner p { margin: 0 0 14px; color: var(--daempet); font-size: 14px; line-height: 1.5; }

.cookievalg {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--streg);
  cursor: pointer;
}
.cookievalg input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 20px; }
.cookievalg input:disabled { opacity: .55; }
.cookievalg strong { display: block; font-size: 14.5px; color: var(--blaek); }
.cookievalg em {
  display: block; margin-top: 2px; font-style: normal;
  font-size:13px; color: var(--daempet); line-height: 1.45;
}

.cookieknapper { display: flex; gap: 10px; margin-top: 16px; }
.cookieknapper .knap { flex: 1; min-height: 46px; font-size: 14.5px; }
.cookie-laes { margin: 12px 0 0 !important; font-size:13px; }

@media (max-width: 560px) {
  .cookiebanner { left: 10px; right: 10px; bottom: 10px; }
  .bund-inder { gap: 22px; }
}

/* Login har ingen ryg — der er ikke noget rum at være i endnu. */

/* ── Login: indholdet centreres ──────────────────────────────────────── */

/* .indhold mistede sin centrering, da sidemenuen kom — den sidder nu i en
   .ramme sammen med menuen. Login har ingen menu at ligge ved siden af. */
.indhold.midt { margin: 0 auto; }
@keyframes hop { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

/* ── Formular-ark ────────────────────────────────────────────────────── */

/* Pop-up'en. Sløret bagved er taget væk: at tone en sløring op over
   hele siden er noget af det dyreste, en browser kan blive bedt om, og
   det var dét, man mærkede, hver gang et ark åbnede. Skyggen gør
   arbejdet alene — siden er der stadig, bare skubbet et skridt væk. */
.ark-lag {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(14,16,15,.44);
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  opacity: 0; transition: opacity .22s ease;
}
.ark-lag.inde { opacity: 1; }
.ark-boks {
  background: var(--ark);
  border-radius: var(--r-3);
  box-shadow: var(--skygge-3);
  width: min(580px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.ark-lag.inde .ark-boks { transform: none; }

/* Hovedet er hvidt. En sort bjælke øverst i en dialog er det, der får
   en formular til at ligne noget fra 2015. */
.ark-top {
  background: var(--ark); color: var(--blaek);
  padding: 24px 26px 18px;
  display: flex; align-items: flex-start; gap: 14px;
}
.ark-top strong { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.5px; }
.ark-top em {
  display: block; margin-top: 5px; font-style: normal;
  font-size: 14.5px; line-height: 1.5; color: var(--daempet);
}
.ark-top > div { flex: 1; min-width: 0; }
.ark-luk {
  border: 0; background: var(--papir-dyb); color: var(--daempet);
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
  transition: background .14s ease, color .14s ease;
}
.ark-luk:hover { background: var(--streg-kraftig); color: var(--blaek); }

.ark-krop { padding: 6px 26px 24px; overflow-y: auto; flex: 1; }
.ark-bund {
  display: flex; gap: 12px; padding: 18px 26px 22px;
  border-top: 1px solid var(--streg);
  background: var(--ark);
}
.ark-bund .knap { flex: 1; min-height: 48px; font-size: 15.5px; }
.ark-bund .knap.slet {
  flex: 0 0 auto; color: var(--forbud);
  background: var(--roed-bleg); border: 0; box-shadow: none;
}
.ark-bund .knap.slet:hover { background: var(--tg-danger-soft); }

/* Et afkrydsningsfelt er en flade man kan ramme, ikke en linje med en
   lille firkant på. */
.kryds {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 16px; margin: 0 0 12px;
  background: var(--papir); border-radius: var(--r-1);
  cursor: pointer; transition: background .14s ease;
}
.kryds:hover { background: var(--papir-dyb); }
.kryds input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 20px; }
.kryds strong { display: block; font-size: 15px; font-weight: 600; }
.kryds em {
  display: block; margin-top: 2px; font-style: normal;
  font-size:13px; color: var(--daempet); line-height: 1.45;
}

/* Rækker man kan åbne, skal se ud som om de kan åbnes. */
.raekke.klik { cursor: pointer; }
.raekke.klik:hover { background: var(--ark-daempet); border-left-color: var(--streg-kraftig); }
/* Haster noget, får rækken sin farve i venstre kant — ikke kun på
   mærkatet ude til højre, hvor øjet først kommer til sidst. */
.raekke:has(.pille.stop) { border-left-color: var(--forbud); }
.raekke:has(.pille.obs)  { border-left-color: var(--advarsel); }

@media (max-width: 560px) {
  .ark-lag { padding: 12px; align-items: flex-end; }
  .ark-boks { max-height: 92vh; }
}

.xavi-log {
  border: 1px solid var(--streg); border-radius: 10px;
  background: var(--ark-daempet); padding: 12px 14px; margin: 8px 0 0;
  max-height: 330px; overflow-y: auto;
}
.xavi-log-top, .xavi-log-tom {
  margin: 0 0 10px; font-size:13px; color: var(--daempet);
}
.xavi-log-tom { margin: 0; }

.xavi-log-post {
  border-top: 1px solid var(--streg); padding: 10px 0 2px;
}
.xavi-log-post:first-of-type { border-top: 0; padding-top: 0; }
/* Et spørgsmål uden træf i dokumenterne er som regel forklaringen. */
.xavi-log-post.uden-traef { border-left: 2px solid var(--advarsel, var(--tg-warning)); padding-left: 10px; }
.xavi-log-post.gal { border-left: 2px solid var(--fare, var(--tg-danger)); padding-left: 10px; }

.xavi-log-hoved {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size:13px; color: var(--daempet);
}
.xavi-log-hoved em { font-style: normal; }
.xavi-log-spm { margin: 3px 0 7px; font-size: 14px; color: var(--blaek); }

.xavi-log-tal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; }
.xavi-log-tal > div { display: flex; justify-content: space-between; gap: 8px; font-size:13px; min-width: 0; }
.xavi-log-tal span { color: var(--daempet); white-space: nowrap; }
.xavi-log-tal b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.xavi-log-ord, .xavi-log-grund {
  margin: 6px 0 0; font-size:13px; color: var(--daempet); overflow-wrap: anywhere;
}
.xavi-log-grund { color: var(--tg-warning); }

@media (max-width: 560px) {
  .xavi-log-tal { grid-template-columns: 1fr; }
}

.xavi-log-dok {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 6px 0 0; font-size:13px;
}
.xavi-log-dok span { overflow-wrap: anywhere; }
.xavi-log-dok b { font-weight: 600; white-space: nowrap; color: var(--daempet); }
.xavi-log-dok em {
  grid-column: 1 / -1; font-style: normal; font-size:13px; color: var(--tg-warning);
}
.xavi-log-dok.gal b { color: var(--tg-warning); }
@keyframes vinkelInd { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* XAVI's ansigt hører til i sidens hoved nu, ikke i en sort bjælke.
   Reglerne står ved .sidetop-xavi længere oppe. */
.xavi-maskot { pointer-events: none; user-select: none; }

.felt input[type="file"] {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px dashed var(--streg); border-radius: var(--radius-felt, 10px);
  background: var(--ark-daempet); cursor: pointer;
}
.felt input[type="file"]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 700; margin-right: 10px;
  padding: 6px 12px; border: 0; border-radius: 8px;
  background: var(--blaek); color: #FFFFFF; cursor: pointer;
}
.felt-hjaelp { display: block; margin-top: 5px; font-style: normal; font-size:13px; color: var(--daempet); }

.xavi-log { max-height: 460px; }

/* ── XAVI ─────────────────────────────────────────────────────────────────
 *
 * Et svar fra XAVI er et skriftligt råd, ikke en chatbesked. Derfor er siden
 * sat som et brev: ét læsespor med luft omkring, svaret i antikva så det
 * skiller sig ud fra alt det, der bare er knapper, og paragrafferne nede i
 * en stille linje i bunden.
 *
 * Rummet giver farven — blå for tillidsarbejde, grøn for arbejdsmiljø — så
 * man kan se hvor man er uden at der skal stå det med ord.
 *
 * Klasserne hedder xv- og ikke xavi-, så de aldrig kan ramme sidens egne. */

.xv {
  --rum: var(--tg-primary);
  --rum-bleg: var(--tg-info-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 460px;
}
.xv[data-rum="AMR"] { --rum: var(--tg-navy); --rum-bleg: var(--tg-soft); }

/* Læsefladen. Papir, ikke chatvindue. */
.xv-laes {
  flex: 1 1 auto;
  min-height: 0;                 /* uden den ruller flexboksen ikke */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ark);
  /* Skygge, ikke kant — som alle husets andre flader. */
  border: 0;
  box-shadow: var(--skygge-2);
  border-radius: var(--r-3);
  padding: 30px 34px 36px;
}
.xv-laes > * { flex-shrink: 0; }

/* Linjelængden er det, der afgør om lang tekst kan læses.
 *
 * Før sad den som en spalte på 66 tegn midt i et kort på tusind pixel,
 * så der stod to håndsbredder tomt hvidt på hver side — og dobbelt så
 * meget, når menuen blev foldet væk. Nu har hele siden læsebredden, og
 * sporet fylder kortet ud. */
.xv-spor { max-width: none; }
.indhold-xavi .sidetop,
.indhold-xavi .sideindhold { max-width: 860px; margin-left: auto; margin-right: auto; }
/* Samtalen må bruge den skærm, den har. Med en fast skal stod kortet på
   sin minimumshøjde med tom flade under skrivefeltet. */
@media (min-width: 901px) {
  .xv { min-height: min(620px, calc(100dvh - 300px)); }
}

/* ── Samtalen som en overenskomst med noter i marginen ─────────────────
 *
 * En tillidsrepræsentants håndværk er paragraffen og noten i kanten:
 * teksten står i spalten, og ude i marginen står hvem og hvad det er for
 * et sted. Det er den form, samtalen har fået.
 *
 * Boblerne er væk. En chatboble siger "besked"; det her er ikke beskeder,
 * det er en sag, der bliver lagt frem. XAVI svarer i antikva, fordi det
 * er det, der skal læses; dine egne ord står i grotesk, fordi de er
 * spørgsmålet, ikke svaret.
 *
 * Rygraden — den lodrette streg — er rummets farve. Den er det eneste
 * farvede på hele fladen, og den gør, at man kan se, hvilket rum man
 * står i uden at læse et ord. */

.xv-spor { position: relative; --margin: 112px; }
/* Rygraden tegnes kun, når der faktisk er en samtale. */
.xv-spor:has(.xv-svar)::before,
.xv-spor:has(.xv-spurgt)::before {
  content: ''; position: absolute; top: 4px; bottom: 4px;
  left: var(--margin); width: 2px; border-radius: 2px;
  background: var(--rum-bleg);
}

.xv-svar { position: relative; padding-left: calc(var(--margin) + 26px); }

/* Dine egne ord står i højre side, XAVI i venstre. Siden læses som et
   dokument med noter i begge marginer: forbundets svar i venstre, dine
   egne bemærkninger i højre.
 *
 * Blokken har husets egen runding og rummets blege farve — ikke en
 * chatboble med hale. Teksten indeni står venstrestillet, for
 * højrestillet brødtekst er tung at læse. */
.xv-spurgt { margin: 34px 0 28px; text-align: right; }
.xv-spurgt:first-child { margin-top: 4px; }
.xv-spurgt p {
  display: inline-block; margin: 0; max-width: 78%;
  padding: 11px 16px; border-radius: var(--r-1);
  background: var(--rum-bleg); color: var(--blaek);
  font: 500 16px/1.55 var(--sans); letter-spacing: -.15px;
  text-align: left; overflow-wrap: anywhere;
}
.xv-du { display: none; }

.xv-svar { margin: 0 0 10px; }
.xv-svar + .xv-spurgt { margin-top: 40px; }

.xv-lead {
  margin: 0;
  font: 400 22.5px/1.6 var(--serif);
  letter-spacing: -.1px;
  color: var(--blaek);
  text-wrap: pretty;
}

/* Afsnittets overskrift står ude i marginen, ikke oven på teksten.
   Så kan man løbe marginen ned og finde det sted, man skal bruge —
   som man gør i en overenskomst. Stregen ovenover er væk; marginen
   gør arbejdet. */
.xv-del {
  position: relative;
  margin-top: 26px;
  padding-left: calc(var(--margin) + 26px);
  margin-left: calc((var(--margin) + 26px) * -1);
}
.xv-del h4 {
  position: absolute; left: 0; top: 3px;
  width: calc(var(--margin) - 30px); text-align: right;
  margin: 0;
  font: 600 12.5px/1.4 var(--sans); letter-spacing: .02em;
  color: var(--rum);
  text-wrap: balance;
}
.xv-del p {
  margin: 0;
  font-size: 16px; line-height: 1.72;
  color: var(--blaek);
}
.xv-del.xv-afklar h4 { color: var(--tg-warning); }
.xv-del.xv-besked p {
  padding: 14px 16px; border-radius: 12px;
  background: var(--ark-daempet); font-size: 15.5px;
}
.xv-skjult { display: none; }

.xv-kopier, .xv-mere {
  margin-top: 10px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--rum);
}
.xv-kopier:hover, .xv-mere:hover { text-decoration: underline; }
.xv-mere { margin-top: 18px; }

.xv-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--streg); }
.xv-feedback > span { flex: 1 1 180px; font-size: 13px; color: var(--daempet); line-height: 1.5; }
.xv-feedback button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--daempet); cursor: pointer; }
.xv-feedback button:hover, .xv-feedback button[aria-pressed="true"] { background: var(--rum-bleg); color: var(--rum); border-color: var(--streg); }
.xv-feedback button:focus-visible { outline: 2px solid var(--rum); outline-offset: 2px; }
.xv-feedback button:disabled { cursor: default; opacity: .5; }
@media (max-width: 600px) { .xv-feedback > span { flex-basis: 100%; } }

/* ── Kilderne ─────────────────────────────────────────────────────────────
 * Dokumentation, ikke læsestof. Én linje, resten bag "Vis". */

.xv-kilder { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--streg); }
.xv-kilder-knap {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left;
}
.xv-kilder-mærke {
  flex: 0 0 auto; font-size:13px; font-weight: 700;
  color: var(--rum); background: var(--rum-bleg);
  padding: 2px 8px; border-radius: 999px;
}
.xv-kilder-resume {
  flex: 1 1 auto; min-width: 0;
  font-size: 13.5px; color: var(--daempet); line-height: 1.45;
  overflow-wrap: anywhere;
}
.xv-kilder-vis { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--rum); }

.xv-kilder-liste { margin-top: 14px; display: grid; gap: 14px; }
.xv-kilde { border-left: 2px solid var(--rum-bleg); padding-left: 14px; }
.xv-kilde-hvor { margin: 0; font-size: 13.5px; color: var(--blaek); overflow-wrap: anywhere; }
.xv-kilde-hvorfor { margin: 3px 0 0; font-size:13px; color: var(--daempet); font-style: italic; }
.xv-kilde-tekst {
  margin: 9px 0 0; padding: 13px 15px;
  background: var(--ark-daempet); border-radius: 10px;
  font: inherit; font-size: 13.5px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 340px; overflow-y: auto;
}

/* ── Startskærmen ─────────────────────────────────────────────────────── */

.xv-start { padding: 18px 0 6px; }
.xv-start h2 {
  margin: 0 0 10px;
  font: 400 30px/1.2 var(--serif); letter-spacing: -.5px; color: var(--blaek);
}
.xv-start p { margin: 0 0 8px; font-size: 16px; line-height: 1.65; color: var(--daempet); }
.xv-eksempel {
  margin-top: 18px !important;
  padding-left: 16px; border-left: 2px solid var(--rum-bleg);
  font: 400 17px/1.6 var(--serif) !important; color: var(--blaek) !important;
}

.xv-fejl {
  margin-top: 18px; padding: 12px 15px; border-radius: 10px;
  background: var(--tg-warning-soft); border: 1px solid rgba(201,124,16,.28);
  color: var(--tg-warning); font-size: 14.5px; line-height: 1.55;
}

.xv-tænker { display: flex; gap: 6px; padding: 26px 0 6px; }
.xv-tænker i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rum); opacity: .35;
  animation: xvPuls 1.1s ease-in-out infinite;
}
.xv-tænker i:nth-child(2) { animation-delay: .16s; }
.xv-tænker i:nth-child(3) { animation-delay: .32s; }
@keyframes xvPuls { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .xv-tænker i { animation: none; opacity: .5; } }

/* ── Bunden: forslag, felt, fod ───────────────────────────────────────── */

.xv-bund { flex: 0 0 auto; display: grid; gap: 10px; }

.xv-forslag { display: flex; flex-wrap: wrap; gap: 8px; }
.xv-forslag button {
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--streg); background: #FFFFFF;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--blaek);
  cursor: pointer;
}
.xv-forslag button:hover { border-color: var(--rum); color: var(--rum); }

.xv-skriv { display: flex; gap: 10px; }
.xv-skriv input {
  flex: 1; min-width: 0;
  padding: 15px 18px; border-radius: 14px;
  border: 1px solid var(--streg); background: #FFFFFF;
  font: inherit; font-size: 16px; color: var(--blaek);
}
.xv-skriv input:focus { outline: none; border-color: var(--rum); box-shadow: 0 0 0 3px var(--rum-bleg); }
.xv-skriv input:disabled { background: var(--ark-daempet); color: var(--daempet); }
.xv-send {
  flex: 0 0 56px; display: grid; place-items: center;
  border: 0; border-radius: 14px; cursor: pointer;
  background: var(--rum); color: #FFFFFF;
}
.xv-send:disabled { background: var(--streg); cursor: default; }

.xv-fod {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size:13px; color: var(--daempet);
}
.xv-fod-knapper { display: flex; gap: 14px; }
.xv-fod button {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size:13px; color: var(--daempet);
}
.xv-fod button:hover { color: var(--blaek); text-decoration: underline; }

/* ── "Hvad mener du helt præcist?" ────────────────────────────────────── */

.xv-vinkel .ark-krop { display: grid; gap: 9px; }
.xv-vinkel-valg {
  width: 100%; text-align: left; padding: 15px 17px;
  border: 1px solid var(--streg); border-radius: 13px; background: #FFFFFF;
  font: inherit; font-size: 15.5px; color: var(--blaek); cursor: pointer;
  opacity: 0; animation: xvInd .22s ease forwards;
}
.xv-vinkel-valg:hover { border-color: var(--blaek); }
@keyframes xvInd { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .xv-vinkel-valg { animation: none; opacity: 1; } }

@media (max-width: 720px) {
  .xv { height: calc(100vh - var(--baand) - 150px); min-height: 420px; gap: 12px; }
  .xv-laes { padding: 20px 16px 26px; border-radius: 16px; }
  .xv-lead { font-size: 19px; }
  .xv-del p { font-size: 15.5px; }
  .xv-start h2 { font-size: 25px; }
}

/* ── Afsenderen ───────────────────────────────────────────────────────────
 * Man skal kunne se, at det er XAVI, der svarer. Ansigt, navn og hvad slags
 * svar det er: fandt den noget i jeres dokumenter, eller hjælper den dig
 * gennem sagen? Den forskel er vigtigere end den ser ud — den fortæller, om
 * svaret står på tryk et sted, eller om det er vejledning. */

/* Navnet og mærkatet står i marginen under ansigtet — to korte linjer,
   der svarer på "hvem" og "på hvilket grundlag". De fylder ikke en
   bjælke hen over svaret længere. */
.xv-hvem {
  position: absolute; left: 0; top: 1px;
  width: calc(var(--margin) - 30px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  margin: 0;
}
/* Ansigtet sidder på rygraden og punkterer den med papirets farve. */
.xv-ansigt {
  position: absolute; left: calc(var(--margin) - 14px); top: -1px;
  width: 28px; height: 28px;
  border-radius: 50%; object-fit: cover; object-position: top center;
  background: var(--rum-bleg);
  box-shadow: 0 0 0 5px var(--ark);
}
/* Navnet står over ansigtet, ikke ved siden af. Marginen er smal, så
   det er en kort linje, ikke en overskrift. */
.xv-navn {
  display: flex; flex-direction: column; align-items: flex-end;
  font: 700 13px/1.3 var(--sans); color: var(--blaek);
  letter-spacing: .03em;
}
.xv-navn em {
  font-style: normal; font-size:13px; font-weight: 500;
  color: var(--svag); letter-spacing: 0; text-align: right;
}
/* Grundlaget: vejledning eller noget, der står på tryk. Ingen pille og
   ingen streg — marginen har allerede sin rygrad, og to lodrette linjer
   ved siden af hinanden er rod. Farven bærer forskellen: står svaret på
   tryk i jeres egne dokumenter, er den rummets. */
.xv-maerke {
  max-width: 100%;
  font: 500 11.5px/1.35 var(--sans); color: var(--svag);
  text-align: right; text-wrap: balance;
}
.xv-maerke.fundet { color: var(--rum); font-weight: 600; }

.xv-tænker { padding: 4px 0 6px; }

@media (max-width: 560px) {
  /* Mærkatet var skjult her, dengang det var en pille, der ikke kunne
     være der. Nu er det tekst — og "står det på tryk eller er det
     vejledning?" er lige så vigtigt på en telefon. */
  .xv-maerke { font-size:13px; }
  .xv-ansigt { width: 32px; height: 32px; flex-basis: 32px; }
}

/* ── XAVI's kvittering ────────────────────────────────────────────────
   Når XAVI har oprettet en sag eller en aftale, står den i samtalen som
   en kvittering. Den ligner et svar — samme afsender, samme bredde — men
   den har en ramme og en accentstribe, fordi den siger noget andet end
   et svar: det her ligger nu hos fagforbundet.

   Klassen ligger under .xv-svar og tilføjer kun. Bliver reglerne for et
   svar rettet, følger kvitteringen med. */
/* Kvitteringen har sin egen ramme, og så hører marginen ikke hjemme
   derinde: navnet lå oven i teksten. Her står afsenderen som en almindelig
   linje øverst i kortet. */
.xv-kvit {
  margin-top: 4px;
  margin-left: calc(var(--margin) + 26px);
  padding: 18px 20px 20px;
  border: 1px solid var(--streg);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-kort);
  background: var(--ark);
}
.xv-kvit.xv-svar { padding-left: 20px; }
.xv-kvit .xv-hvem {
  position: static; width: auto;
  flex-direction: row; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.xv-kvit .xv-navn { align-items: flex-start; }
.xv-kvit .xv-maerke { text-align: left; }
.xv-kvit .xv-ansigt {
  position: static; order: -1;
  width: 28px; height: 28px; flex: 0 0 28px; box-shadow: none;
}

.xv-kvit-top {
  margin: 14px 0 16px;
  font: 400 19px/1.5 var(--serif);
  color: var(--blaek);
}

/* To spalter, hvor der er plads: navnet til venstre, værdien til højre.
   Under 520px lægger de sig over hinanden, så en lang titel ikke bliver
   presset ned i en stribe på tre tegn. */
.xv-kvit-liste { margin: 0 0 18px; display: grid; gap: 1px; background: var(--streg); border-top: 1px solid var(--streg); border-bottom: 1px solid var(--streg); }
.xv-kvit-liste > div { display: grid; grid-template-columns: 148px 1fr; gap: 14px; padding: 11px 2px; background: var(--ark); }
.xv-kvit-liste dt { font: 500 13px/1.45 var(--sans); color: var(--daempet); }
.xv-kvit-liste dd { margin: 0; font: 400 15px/1.5 var(--sans); color: var(--blaek); overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .xv-kvit-liste > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ── Forsidens nøgletal ───────────────────────────────────────────────
   Tallet i antikva og i stor grad. Et fedt 24 px-tal i en lille kasse er
   noget, man skal lede efter; et 52 px-tal i antikva er noget, man ser.
   Kortet kan trykkes og løfter sig, når musen er over — så man ved, at
   det fører et sted hen. */
.noegletal {
  position: relative; display: block;
  padding: 24px 24px 26px;
  background: var(--ark); border-radius: var(--r-2);
  box-shadow: var(--skygge-2);
  text-decoration: none; color: inherit;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
}
a.noegletal:hover { transform: translateY(-3px); box-shadow: var(--skygge-3); }
a.noegletal:active { transform: translateY(-1px); }

.noegletal-ikon {
  width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-bleg); color: var(--accent);
  margin-bottom: 18px;
}
.noegletal-tal {
  display: block;
  font: 400 52px/1 var(--serif);
  letter-spacing: -1.5px; color: var(--blaek);
  font-variant-numeric: tabular-nums lining-nums;
}
.noegletal-navn {
  display: block; margin-top: 8px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; color: var(--blaek);
}
.noegletal-under {
  display: block; margin-top: 3px;
  font-size: 13.5px; color: var(--daempet); line-height: 1.4;
}

/* Velkomsten står i antikva. Det er den ene sætning på siden, der er
   skrevet til et menneske og ikke til en maskine. */
.velkomst { margin: 0 0 30px; max-width: 58ch; }
.velkomst h2 {
  margin: 0;
  font: 400 27px/1.3 var(--serif);
  letter-spacing: -.3px; color: var(--blaek); text-wrap: pretty;
}
.velkomst p { margin: 8px 0 0; color: var(--daempet); font-size: 16px; line-height: 1.55; }

@media (max-width: 620px) {
  .noegletal { padding: 20px 20px 22px; }
  .noegletal-tal { font-size: 44px; }
  .velkomst h2 { font-size: 23px; }
}

/* ── Cookies og privatlivspolitik ─────────────────────────────────────
   De to sider er statiske og har ikke en app omkring sig. De låner
   skinnen, men bærer sidens navn i den, siden der ikke er andet. */
.skinne-sidenavn { flex: 1; min-width: 0; padding-left: 17px; border-left: 1px solid var(--streg); }
.skinne-sidenavn h1 {
  margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.35px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skinne-sidenavn .under {
  margin: 1px 0 0; font-size: 13px; color: var(--daempet);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 620px) { .skinne-sidenavn .under { display: none; } }

/* Handlingen i sidens hoved. Tom er den usynlig og fylder intet. */
.sidetop-handling:empty { display: none; }
.sidetop-handling { flex: 0 0 auto; }
.sidetop-handling .knap.bred { margin: 0; }
@media (max-width: 620px) { .sidetop-handling, .sidetop-handling .knap { width: 100%; } }

/* ── "Kræver din opmærksomhed" ────────────────────────────────────────── */
.opmaerksom { margin-top: 44px; }
.opmaerksom h2 {
  margin: 0 0 16px;
  font-size: 18px; font-weight: 600; letter-spacing: -.35px; color: var(--blaek);
}

/* Er der ingenting at haste med, skal det siges — ikke bare mangle. */
.rolig {
  margin-top: 44px;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 26px 28px;
  background: var(--groen-bleg); border-radius: var(--r-2);
}
.rolig-ikon {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7); color: var(--amr);
}
.rolig strong { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.25px; color: var(--amr-dyb); }
.rolig p { margin: 5px 0 0; color: var(--amr-dyb); opacity: .82; font-size: 15px; line-height: 1.5; }

/* ── Beskeder ─────────────────────────────────────────────────────────
   Indbakke og samtale ved siden af hinanden. På en telefon er der kun
   plads til én ad gangen, og så skifter siden mellem dem. */
.samtaler {
  display: grid; grid-template-columns: 320px 1fr; gap: 20px;
  height: calc(100vh - var(--skinne) - 210px); min-height: 480px;
}

.samtaler-liste {
  background: var(--ark); border-radius: var(--r-2); box-shadow: var(--skygge-2);
  display: flex; flex-direction: column; overflow: hidden;
}
.samtaler-hoved {
  padding: 18px 20px 14px; font-size: 13px; font-weight: 600;
  color: var(--svag); letter-spacing: .3px;
  border-bottom: 1px solid var(--streg);
}
.samtaler-rul { flex: 1; overflow-y: auto; padding: 8px; }
.samtale-ingen { margin: 0; padding: 26px 20px; color: var(--daempet); font-size: 14.5px; line-height: 1.55; }

.samtale-linje {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 12px; border: 0; background: transparent; cursor: pointer;
  text-align: left; border-radius: var(--r-1);
  transition: background .14s ease;
}
.samtale-linje:hover { background: var(--papir); }
.samtale-linje.valgt { background: var(--accent-bleg); }
.samtale-krop { flex: 1; min-width: 0; }
.samtale-top { display: flex; align-items: baseline; gap: 10px; }
.samtale-navn {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--blaek);
  letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.samtale-naar { font-size:13px; color: var(--svag); white-space: nowrap; font-variant-numeric: tabular-nums; }
.samtale-uddrag {
  display: block; margin-top: 2px; font-size: 13.5px; color: var(--daempet);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.samtale-linje.ulaest .samtale-navn { font-weight: 700; }
.samtale-linje.ulaest .samtale-uddrag { color: var(--blaek); font-weight: 500; }
.samtale-prik {
  flex: 0 0 auto; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: #FFFFFF;
  font-size:13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Forbogstaver, når der ikke er et billede. Et brudt billedikon ser ud
   som en fejl; to bogstaver ser ud som et menneske. */
.ansigt {
  position: relative; flex: 0 0 42px; width: 42px; height: 42px;
  border-radius: 999px; overflow: hidden;
  background: var(--accent-bleg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.ansigt b { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.ansigt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ansigt-stor { flex-basis: 46px; width: 46px; height: 46px; }
.ansigt-stor b { font-size: 16.5px; }

/* ── Selve samtalen ──────────────────────────────────────────────────── */
.samtale {
  background: var(--ark); border-radius: var(--r-2); box-shadow: var(--skygge-2);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.samtale-hoved {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid var(--streg);
}
.samtale-tilbage {
  display: none; border: 0; background: var(--papir-dyb); color: var(--daempet);
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  align-items: center; justify-content: center; flex: 0 0 36px;
}
.samtale-tilbage svg { transform: rotate(180deg); }
.samtale-hvem { min-width: 0; }
.samtale-hvem strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.samtale-hvem em {
  display: block; margin-top: 1px; font-style: normal; font-size: 13.5px; color: var(--daempet);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.samtale-rul { flex: 1; overflow-y: auto; padding: 22px; overscroll-behavior: contain; }

.besked-dag { display: flex; align-items: center; margin: 22px 0 16px; }
.besked-dag::before, .besked-dag::after { content: ''; flex: 1; border-top: 1px solid var(--streg); }
.besked-dag span {
  padding: 0 14px; font-size:13px; font-weight: 600; color: var(--svag);
  text-transform: lowercase;
}
.besked-dag:first-child { margin-top: 0; }

.besked { margin-bottom: 14px; max-width: 74%; }
.besked.min { margin-left: auto; text-align: right; }
.besked-boble {
  display: inline-block; padding: 11px 15px; border-radius: 16px 16px 16px 5px;
  background: var(--papir-dyb); color: var(--blaek);
  font-size: 15.5px; line-height: 1.5; text-align: left;
  overflow-wrap: anywhere;
}
.besked.min .besked-boble {
  border-radius: 16px 16px 5px 16px;
  background: var(--accent); color: #FFFFFF;
}
.besked-tid { margin-top: 4px; font-size:13px; color: var(--svag); font-variant-numeric: tabular-nums; }

.besked-tom { padding: 40px 10px; text-align: center; color: var(--daempet); }
.besked-tom p { margin: 0; font-size: 15.5px; }
.besked-tom-note { margin-top: 6px !important; font-size: 13.5px; color: var(--svag); }

.samtale-skriv {
  display: flex; align-items: flex-end; gap: 12px;
  padding: 16px 20px 18px; border-top: 1px solid var(--streg);
}
.samtale-skriv textarea {
  flex: 1; min-height: 48px; max-height: 160px; resize: none;
  padding: 13px 15px; font: inherit; line-height: 1.5;
  background: var(--ark); color: var(--blaek);
  border: 1.5px solid var(--streg-kraftig); border-radius: var(--r-1);
  outline: none; transition: border-color .14s ease, box-shadow .14s ease;
}
.samtale-skriv textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.samtale-skriv .knap { flex: 0 0 48px; min-width: 48px; padding: 0; min-height: 48px; }
.samtale-skriv .knap svg { transform: rotate(-90deg); }

/* Ingen samtale valgt. */
.samtale-vaelg {
  margin: auto; padding: 40px; text-align: center; color: var(--daempet); max-width: 42ch;
}
.samtale-vaelg-ikon {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-bleg); color: var(--accent);
}
.samtale-vaelg h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.4px; color: var(--blaek); }
.samtale-vaelg p { margin: 0; font-size: 15px; line-height: 1.6; }

/* "Skriv" ude til højre i medlemssøgningen. */
.raekke-handling {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
}
button.raekke { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; }

@media (max-width: 900px) {
  .samtaler { height: calc(100vh - var(--skinne) - 170px); }
}
@media (max-width: 760px) {
  /* Én ad gangen. Vælger man en samtale, fylder den skærmen. */
  .samtaler { grid-template-columns: 1fr; }
  .samtaler.har-valgt .samtaler-liste { display: none; }
  .samtaler:not(.har-valgt) .samtale { display: none; }
  .samtale-tilbage { display: flex; }
  .besked { max-width: 86%; }
  .raekke-handling span { display: none; }
}

/* ── Ny besked: vælg modtager ─────────────────────────────────────────
   Søgefeltet står fast øverst, og resultaterne ruller under det — så man
   kan skrive videre uden at miste feltet af syne. */
.vaelg-boks { max-height: 78vh; }
.vaelg-soeg { padding: 0 26px 16px; border-bottom: 1px solid var(--streg); }
.vaelg-liste { overflow-y: auto; padding: 8px; flex: 1; min-height: 180px; }

.vaelg-linje {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 11px 14px; border: 0; background: transparent; cursor: pointer;
  text-align: left; border-radius: var(--r-1);
  transition: background .14s ease;
}
.vaelg-linje:hover { background: var(--papir); }
.vaelg-krop { min-width: 0; }
.vaelg-navn {
  display: block; font-size: 15.5px; font-weight: 600; color: var(--blaek);
  letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vaelg-under {
  display: block; margin-top: 2px; font-size: 13.5px; color: var(--daempet);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vaelg-besked {
  margin: 0; padding: 34px 20px; text-align: center;
  color: var(--daempet); font-size: 14.5px; line-height: 1.55;
}
.vaelg-besked.fejl { color: var(--forbud); }

/* ── Forhandlinger ────────────────────────────────────────────────────── */
.fh-intro { margin: 0 0 22px; color: var(--daempet); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.fh-soeg { margin-bottom: 14px; max-width: 460px; }

/* Filtrene er en stribe, man kan rulle på en telefon. */
.fh-filtre {
  display: flex; gap: 8px; margin: 0 0 26px;
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
.fh-filtre::-webkit-scrollbar { display: none; }
.fh-filter {
  flex: 0 0 auto; border: 1.5px solid var(--streg-kraftig); background: var(--ark);
  color: var(--daempet); padding: 8px 15px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.fh-filter:hover { border-color: var(--daempet); color: var(--blaek); }
.fh-filter.valgt { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }

.fh-gruppe { margin-bottom: 28px; }
/* Virksomhedens navn bærer gruppen — man leder efter et sted, ikke en titel. */
.fh-firma {
  margin: 0 0 12px; font: 600 17px/1.3 var(--sans);
  letter-spacing: -.35px; color: var(--blaek);
}
.fh-resultat {
  flex: 0 0 auto; max-width: 42%;
  font-size: 15px; font-weight: 600; color: var(--accent);
  text-align: right; letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ── Arket ────────────────────────────────────────────────────────────── */
.fh-boks { width: min(620px, 100%); }
.fh-etiket {
  margin: 22px 0 10px; font-size: 14px; font-weight: 600;
  color: var(--blaek); letter-spacing: -.15px;
}
.fh-valg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.fh-knap {
  border: 1.5px solid var(--streg-kraftig); background: var(--ark);
  color: var(--blaek); padding: 10px 16px; border-radius: var(--r-1);
  cursor: pointer; font-size: 14.5px; font-weight: 600;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.fh-knap:hover { border-color: var(--daempet); }
.fh-knap.valgt {
  background: var(--accent-bleg); border-color: var(--accent);
  color: var(--accent-dyb);
}

@media (max-width: 620px) {
  .fh-resultat { max-width: 38%; font-size: 14px; }
  .fh-soeg { max-width: none; }
}

/* ── Forhandlingen, som en kollega ser den ────────────────────────────── */
.fh-vis { width: min(560px, 100%); }
/* Resultatet står øverst og stort. Det er dét, man er kommet efter. */
.fh-tal {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px; margin: 0 0 20px;
  background: var(--accent-bleg); border-radius: var(--r-2);
}
.fh-tal-navn { font-size: 13px; font-weight: 600; color: var(--accent-dyb); opacity: .75; }
.fh-tal-vaerdi {
  font: 400 32px/1.2 var(--serif); color: var(--accent-dyb);
  letter-spacing: -.6px; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums lining-nums;
}

.fh-liste { margin: 0; display: grid; gap: 1px; background: var(--streg);
  border-top: 1px solid var(--streg); border-bottom: 1px solid var(--streg); }
.fh-liste > div { display: grid; grid-template-columns: 132px 1fr; gap: 14px;
  padding: 11px 2px; background: var(--ark); }
.fh-liste dt { font-size: 13.5px; color: var(--daempet); }
.fh-liste dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }

.fh-noter { margin-top: 20px; }
.fh-noter h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--daempet); }
.fh-noter p { margin: 0; font: 400 16.5px/1.6 var(--serif); color: var(--blaek); }

.fh-delt { margin: 20px 0 0; font-size: 13.5px; color: var(--svag); }

/* ── "Flere detaljer" ─────────────────────────────────────────────────── */
.fh-mere { margin: 4px 0 0; border-top: 1px solid var(--streg); padding-top: 14px; }
.fh-mere summary {
  cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 600;
  color: var(--accent); padding: 4px 0;
}
.fh-mere summary::-webkit-details-marker { display: none; }
.fh-mere summary::before { content: '＋ '; font-weight: 400; }
.fh-mere[open] summary::before { content: '－ '; }
.fh-mere summary em { font-style: normal; font-weight: 400; color: var(--daempet); }
.fh-mere-krop { padding-top: 14px; }

@media (max-width: 620px) {
  .fh-tal-vaerdi { font-size: 27px; }
  .fh-liste > div { grid-template-columns: 1fr; gap: 3px; }
  .fh-mere summary em { display: none; }
}

/* ── Lønstatistikkens besvarelser ─────────────────────────────────────── */
.loen-boks { width: min(640px, 100%); }

.loen-opgoer { margin-bottom: 26px; }
.loen-opgoer h3 {
  margin: 0 0 10px; font-size: 15px; font-weight: 600;
  color: var(--daempet); letter-spacing: -.1px;
}
/* Medianen står øverst og stort. Et gennemsnit kan trækkes op af én høj
   løn; tallet i midten er det, man kan bruge ved et forhandlingsbord. */
.loen-hoved {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px; margin-bottom: 2px;
  background: var(--accent-bleg); border-radius: var(--r-2) var(--r-2) 0 0;
}
.loen-hoved-navn { font-size: 13px; font-weight: 600; color: var(--accent-dyb); opacity: .75; }
.loen-hoved-tal {
  font: 400 34px/1.15 var(--serif); color: var(--accent-dyb);
  letter-spacing: -.7px; font-variant-numeric: tabular-nums lining-nums;
}
.loen-tal {
  margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--streg); border-radius: 0 0 var(--r-2) var(--r-2); overflow: hidden;
}
.loen-tal > div { background: var(--ark-daempet); padding: 11px 16px; }
.loen-tal dt { font-size:13px; color: var(--daempet); }
.loen-tal dd {
  margin: 2px 0 0; font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.loen-alle { margin: 30px 0 12px; font-size: 15px; font-weight: 600; color: var(--daempet); }
.loen-tabelrul { overflow-x: auto; border: 1px solid var(--streg); border-radius: var(--r-1); }
.loen-tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.loen-tabel th, .loen-tabel td {
  text-align: left; padding: 10px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--streg);
}
.loen-tabel th {
  background: var(--ark-daempet); font-weight: 600; font-size: 13px;
  color: var(--daempet); position: sticky; top: 0;
}
.loen-tabel tr:last-child td { border-bottom: 0; }
.loen-tabel td { font-variant-numeric: tabular-nums; }

.loen-del {
  margin-top: 26px; padding: 18px 20px;
  background: var(--papir); border-radius: var(--r-2);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.loen-del-navn { font-size: 13px; font-weight: 600; color: var(--daempet); }
.loen-del code {
  font-size: 13.5px; word-break: break-all; color: var(--blaek);
  background: var(--ark); padding: 8px 12px; border-radius: var(--r-1);
  width: 100%; box-sizing: border-box;
}
.loen-del .knap { min-height: 42px; }
/* To knapper ved siden af hinanden — og under hinanden, når der ikke er
   plads. Boksen ligger også inde i et ark på en telefon. */
.del-knapper { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.del-knapper .knap { flex: 1 1 auto; }

/* Arbejdsmiljøkanalen bruger den samme boks, men står øverst på fanen
   og skal ikke skubbes ned af en margen, der er sat til at følge efter
   et resultat. */
.am-kanal .loen-del { margin-top: 14px; }

.loen-tom { padding: 30px 0; text-align: center; color: var(--daempet); }
.loen-tom p { margin: 0; font-size: 16px; }
.loen-tom-note { margin-top: 6px !important; font-size: 14px; color: var(--svag); }

/* Et tilbageholdt resultat er ikke en tom side — det er en beskyttelse,
   der er trådt i kraft. Den skal se ud som noget, der virker. */
.loen-tom.diskretion { text-align: left; padding: 22px 20px; border-radius: 12px;
  background: var(--flade, rgba(0,0,0,.03)); border-left: 3px solid var(--groen, var(--tg-primary)); }
.loen-tom.diskretion p:first-child { color: var(--blaek, inherit); }
.loen-tom.diskretion .loen-tom-note { margin-top: 8px !important; line-height: 1.5; }

@media (max-width: 620px) {
  .loen-hoved-tal { font-size: 28px; }
  .loen-tal { grid-template-columns: 1fr; }
}

/* ── Referat ──────────────────────────────────────────────────────────── */
.ref-intro { margin: 0 0 24px; color: var(--daempet); font-size: 15px; line-height: 1.6; max-width: 62ch; }
.ref-intro strong { color: var(--blaek); font-weight: 600; }

.ref-boks { width: min(640px, 100%); }
.ref-etiket {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 24px 0 10px; font-size: 14px; font-weight: 600;
  color: var(--blaek); letter-spacing: -.15px;
}
.ref-note { margin: -4px 0 10px; font-size: 13.5px; color: var(--daempet); }

/* Deltagerne: navn og rolle på én linje, med et kryds til at fjerne. */
.ref-deltager { display: flex; gap: 8px; margin-bottom: 8px; }
.ref-deltager input {
  flex: 1; min-width: 0; min-height: 46px; padding: 11px 13px;
  background: var(--ark); border: 1.5px solid var(--streg-kraftig);
  border-radius: var(--r-1); outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.ref-deltager input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.ref-fjern {
  flex: 0 0 46px; width: 46px; border: 0; border-radius: var(--r-1);
  background: var(--papir-dyb); color: var(--daempet); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s ease, color .14s ease;
}
.ref-fjern:hover { background: var(--roed-bleg); color: var(--forbud); }

/* Dikteringen. Når den lytter, pulserer prikken — så man kan se det uden
   at læse knappen. */
.ref-diktat {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--streg-kraftig); background: var(--ark);
  color: var(--blaek); padding: 7px 14px; border-radius: 999px;
  cursor: pointer; font-size: 13.5px; font-weight: 600;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.ref-diktat:hover { border-color: var(--daempet); }
.ref-diktat.lytter {
  background: var(--roed-bleg); border-color: var(--forbud); color: var(--forbud);
}
.ref-diktat.lytter::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--forbud); animation: pulser 1.2s ease-in-out infinite;
}
@keyframes pulser { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.skjul-etiket {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ref-udskrift { min-height: 120px !important; }
.ref-referat { min-height: 190px !important; }

@media (max-width: 620px) {
  .ref-deltager { flex-wrap: wrap; }
  .ref-deltager input { flex: 1 1 100%; }
  .ref-fjern { flex: 0 0 auto; width: 100%; height: 40px; }
}

/* ── En kollegas profil ───────────────────────────────────────────────── */
.profil-boks { width: min(500px, 100%); }
.profil-hoved { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.profil-hoved .ansigt { flex-basis: 62px; width: 62px; height: 62px; }
.profil-hoved .ansigt b { font-size: 22px; }
.profil-hoved h2 {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.5px; color: var(--blaek);
}
.profil-hoved p { margin: 3px 0 0; font-size: 15px; color: var(--daempet); }

.profil-liste { margin: 0; display: grid; gap: 1px; background: var(--streg);
  border-top: 1px solid var(--streg); border-bottom: 1px solid var(--streg); }
.profil-liste > div { display: grid; grid-template-columns: 116px 1fr; gap: 14px;
  padding: 12px 2px; background: var(--ark); }
.profil-liste dt { font-size: 13.5px; color: var(--daempet); }
.profil-liste dd { margin: 0; font-size: 15.5px; overflow-wrap: anywhere; }
.profil-liste dd a { color: var(--accent); text-decoration: none; font-weight: 500; }
.profil-liste dd a:hover { text-decoration: underline; }

.profil-intet { margin: 0; color: var(--daempet); font-size: 15px; line-height: 1.6; }

/* "Skriv" i søgeresultatet er nu en knap for sig. */
.raekke-handling {
  border: 1.5px solid var(--streg-kraftig); background: var(--ark);
  color: var(--accent); cursor: pointer;
  padding: 8px 14px; border-radius: 999px; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600;
  transition: background .14s ease, border-color .14s ease;
}
.raekke-handling:hover { background: var(--accent-bleg); border-color: var(--accent); }

@media (max-width: 620px) {
  .profil-liste > div { grid-template-columns: 1fr; gap: 3px; }
  .raekke-handling { padding: 8px 11px; }
}

/* ── Referaterne samlet under emnet ───────────────────────────────────── */
.ref-gruppe { margin-bottom: 26px; }
.ref-emne {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font-size: 16.5px; font-weight: 600;
  letter-spacing: -.3px; color: var(--blaek);
}
.ref-emne span {
  font-size:13px; font-weight: 600; color: var(--daempet);
  background: var(--papir-dyb); padding: 2px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ── Min profil ───────────────────────────────────────────────────────── */
.profil-mit {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 22px; margin: 22px 0;
  background: var(--ark); border-radius: var(--r-2); box-shadow: var(--skygge-2);
}
.profil-mit .ansigt { flex-basis: 64px; width: 64px; height: 64px; }
.profil-mit .ansigt b { font-size: 23px; }
.profil-mit-tekst { flex: 1; min-width: 0; }
.profil-mit-tekst strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.35px; }
.profil-mit-tekst em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 14.5px; color: var(--daempet); overflow-wrap: anywhere;
}

/* Kontosletning står for sig, med luft omkring. Den skal ikke kunne
   trykkes ved et uheld, mens man scroller forbi. */
.profil-farlig {
  margin-top: 44px; padding: 24px 26px;
  background: var(--roed-bleg); border-radius: var(--r-2);
}
.profil-farlig h2 {
  margin: 0 0 8px; font-size: 17px; font-weight: 600;
  letter-spacing: -.3px; color: var(--forbud);
}
.profil-farlig p {
  margin: 0 0 18px; font-size: 14.5px; line-height: 1.6;
  color: var(--forbud); opacity: .9; max-width: 56ch;
}
.profil-farlig .knap.slet {
  background: var(--ark); color: var(--forbud);
  border: 1.5px solid color-mix(in srgb, var(--forbud) 35%, transparent);
  box-shadow: none;
}
.profil-farlig .knap.slet:hover { background: var(--forbud); color: #FFFFFF; border-color: var(--forbud); }

/* ── Meningsmålingens resultat ────────────────────────────────────────── */
.maaling-boks { width: min(560px, 100%); }
.maaling-spm { margin: 0 0 22px; font: 400 17px/1.6 var(--serif); color: var(--blaek); }
.maaling-valg { margin-bottom: 18px; }
.maaling-top {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 7px;
}
.maaling-navn { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.maaling-tal {
  font-size: 14px; font-weight: 600; color: var(--accent);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.maaling-bjaelke {
  height: 10px; border-radius: 999px; background: var(--papir-dyb); overflow: hidden;
}
.maaling-bjaelke i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent); transition: width .5s cubic-bezier(.2,.8,.3,1);
}

/* ── Administration: logo og push ─────────────────────────────────────── */
.a-afsnit {
  margin: 36px 0 14px; font-size: 17px; font-weight: 600;
  letter-spacing: -.3px; color: var(--blaek);
}
.a-logo {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 20px 22px;
  background: var(--ark); border-radius: var(--r-2); box-shadow: var(--skygge-2);
}
.a-logo img {
  width: 76px; height: 76px; object-fit: contain; flex: 0 0 76px;
  background: var(--papir); border-radius: var(--r-1); padding: 8px;
}
.a-logo-tom {
  width: 76px; height: 76px; flex: 0 0 76px; border-radius: var(--r-1);
  background: var(--papir-dyb); color: var(--svag);
  display: flex; align-items: center; justify-content: center;
  font-size:13px; text-align: center; padding: 8px;
}
.a-logo > div { flex: 1; min-width: 220px; }
.a-logo p { margin: 0 0 12px; font-size: 14.5px; color: var(--daempet); line-height: 1.55; }

.a-push {
  padding: 20px 22px;
  background: var(--ark); border-radius: var(--r-2); box-shadow: var(--skygge-2);
}
.a-push-linje { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.a-push-linje span:last-child { flex: 1; min-width: 220px; font-size: 14.5px; color: var(--daempet); line-height: 1.55; }
.a-push-fejl { margin: 0; color: var(--forbud); font-size: 14.5px; }

/* ── Meld en fejl ─────────────────────────────────────────────────────── */
.profil-fejl {
  margin-top: 40px; padding: 22px 26px;
  background: var(--ark); border-radius: var(--r-2); box-shadow: var(--skygge-2);
}
.profil-fejl h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.profil-fejl p { margin: 0 0 16px; font-size: 14.5px; color: var(--daempet); line-height: 1.6; max-width: 58ch; }

/* Hvem har delt forhandlingen, og hvilket firma er den for.
   Firmaet i blæk, personen dæmpet — man leder efter firmaet først, og
   spørger personen bagefter. */
.fh-hvem {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-top: 4px; font-size: 14px; line-height: 1.4;
}
.fh-firma-navn { font-weight: 600; color: var(--blaek); }
.fh-af { color: var(--daempet); }
.fh-af::before { content: 'delt af '; }
/* Skilletegnet hænger på firmaet, ikke på personen. Ellers begynder en
   ny linje med et "·", når de to ikke er plads til på samme linje. */
.fh-firma-navn::after { content: ' ·'; color: var(--svag); font-weight: 400; }
@media (max-width: 620px) {
  .fh-hvem { gap: 0 7px; }
  .fh-firma-navn::after { content: ''; }
}

/* ── Hvem er logget på ────────────────────────────────────────────────── */
.skinne-mig {
  display: flex; align-items: center; gap: 11px; flex: 0 1 auto; min-width: 0;
  text-decoration: none; color: inherit;
  padding: 5px 10px 5px 5px; border-radius: 999px;
  transition: background .14s ease;
}
.skinne-mig:hover { background: var(--papir-dyb); }
.skinne-mig .ansigt { flex-basis: 34px; width: 34px; height: 34px; }
.skinne-mig .ansigt b { font-size: 13px; }
.skinne-mig-tekst { min-width: 0; line-height: 1.25; }
.skinne-mig-tekst strong {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skinne-mig-tekst em {
  display: block; margin-top: 1px; font-style: normal;
  font-size:13px; color: var(--daempet);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* På smallere skærme viger teksten for rumskifteren — ansigtet bliver
   stående, for det er det, man genkender sig selv på. */
@media (max-width: 1080px) { .skinne-mig-tekst { display: none; } }
@media (max-width: 560px) { .skinne-mig { padding: 0; } }

/* ── Profil ───────────────────────────────────────────────────────────── */

/* Toppen. Siden har ét sted med farve, og det er her: rummets egen,
   dyb og mættet. Navnet skal kunne bæres af fladen — derfor antikva i
   stor grad, ikke fed sans. */
.mig {
  position: relative; overflow: hidden;
  margin: 22px 0 0; padding: 30px 32px;
  border-radius: var(--r-3);
  background: linear-gradient(142deg, var(--accent) 0%, var(--accent-dyb) 100%);
  color: #FFFFFF;
  box-shadow: var(--skygge-3);
}
/* Et blødt lys i hjørnet. Uden det er en farvet flade bare en farvet flade. */
.mig::after {
  content: ''; position: absolute; right: -90px; top: -150px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.mig-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.mig .ansigt {
  flex: 0 0 84px; width: 84px; height: 84px;
  background: rgba(255,255,255,.17);
  box-shadow: 0 0 0 3px rgba(255,255,255,.28);
}
.mig .ansigt b { font-size: 29px; color: #FFFFFF; }
.mig-navn { flex: 1 1 260px; min-width: 0; }
.mig-navn h2 {
  margin: 0; color: #FFFFFF;
  font: 400 33px/1.14 var(--serif); letter-spacing: -.4px;
}
.mig-navn > p { margin: 8px 0 0; font-size: 16.5px; color: rgba(255,255,255,.82); }
/* Står der ingen titel, siger tomheden ikke sig selv — så beder den om det. */
.mig-tom {
  margin: 8px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 16.5px; color: rgba(255,255,255,.82);
  text-decoration: underline; text-underline-offset: 3px;
}
.mig-tom:hover { color: #FFFFFF; }
.mig-roller { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mig-roller .pille { background: rgba(255,255,255,.17); color: #FFFFFF; }
.mig-knapper { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.mig-knapper .knap {
  background: #FFFFFF; color: var(--accent-dyb);
  box-shadow: 0 1px 2px rgba(10,20,40,.18);
}
.mig-knapper .knap:hover { background: rgba(255,255,255,.90); box-shadow: 0 4px 14px rgba(10,20,40,.22); }
.mig-knapper .knap.stille {
  background: rgba(255,255,255,.12); color: #FFFFFF;
  border: 1.5px solid rgba(255,255,255,.34); box-shadow: none;
}
.mig-knapper .knap.stille:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); }
.mig-knapper .knap:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* Fanerne. Understregning frem for knapper: man skifter side, man
   vælger ikke et filter. */
.faner {
  display: flex; gap: 2px; margin: 28px 0 0;
  border-bottom: 1px solid var(--streg);
  overflow-x: auto; scrollbar-width: none;
}
.faner::-webkit-scrollbar { display: none; }
.fane {
  appearance: none; background: none; border: 0; cursor: pointer;
  margin-bottom: -1px; padding: 13px 16px 12px;
  font: 600 15.5px/1 var(--sans); letter-spacing: -.15px;
  color: var(--daempet); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.fane:hover { color: var(--blaek); }
.fane.valgt { color: var(--accent); border-bottom-color: var(--accent); }
.fane:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 8px 8px 0 0; }

#p-panel > :first-child { margin-top: 26px; }
.p-intro { margin: 26px 0 0; max-width: 62ch; font-size: 15.5px; color: var(--daempet); }
.p-intro + .ark { margin-top: 14px; }

.p-afsnit {
  margin: 34px 0 12px; font-size: 16px; font-weight: 600;
  letter-spacing: -.3px; color: var(--blaek);
}
/* Tallet ved siden af en afsnitsoverskrift. Hvor mange ligger der i
   det her rum — det er hele pointen med at dele listen op. */
.afsnit-tal {
  display: inline-block; margin-left: 7px;
  padding: 1px 9px; border-radius: 999px;
  font-size:13px; font-weight: 600;
  background: var(--papir-dyb); color: var(--daempet);
  font-variant-numeric: tabular-nums;
}
/* Forklaringen under overskriften, tæt på den den hører til. */
.dok-note { margin: -6px 0 10px; }

.p-mangler {
  margin: 12px 0 0; padding: 14px 18px; border-radius: var(--r-1);
  background: var(--advarsel-bleg); color: var(--advarsel);
  font-size: 14.5px; line-height: 1.55;
}

/* Hvad kolleger kan se. Grønt flueben eller en streg — man skal kunne
   svare på "kan de se mit nummer?" uden at åbne en formular. */
.p-deling { padding: 6px 4px; }
.p-delt {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; position: relative;
}
.p-delt + .p-delt::before {
  content: ''; position: absolute; left: 50px; right: 18px; top: 0;
  border-top: 1px solid var(--streg);
}
.p-delt-maerke {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--papir-dyb); color: var(--svag);
  font-size: 13px; font-weight: 700;
}
.p-delt.ja .p-delt-maerke { background: var(--groen-bleg); color: var(--amr); }
.p-delt-navn { flex: 1; min-width: 0; font-size: 15px; }
.p-delt-svar { font-size: 13.5px; color: var(--daempet); white-space: nowrap; }
.p-delt.ja .p-delt-svar { color: var(--amr); }
.p-skift-deling { margin-top: 14px; }

/* ── Forhandlingens firma ─────────────────────────────────────────────── */
.fh-firma-fast {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--papir); border-radius: var(--r-1);
}
.fh-firma-fast-navn { font-size: 16px; font-weight: 600; letter-spacing: -.25px; }
.fh-firma-fast-note { font-size: 13px; color: var(--daempet); }
.fh-intet-firma { margin-bottom: 18px; }
.fh-intet-firma .knap { margin-top: 12px; min-height: 42px; }

/* ── Velkomsten ───────────────────────────────────────────────────────── */
.velkomst-boks { width: min(500px, 100%); }
.velkomst-boks .ark-krop { padding: 30px 28px 24px; }
.velkomst-ikon {
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-bleg); color: var(--accent);
}
.velkomst-boks h2 {
  margin: 0 0 8px; font: 400 27px/1.2 var(--serif);
  letter-spacing: -.3px; color: var(--blaek);
}
.velkomst-boks > .ark-krop > p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--daempet); }
.velkomst-hvorfor { margin: 0 0 18px; padding-left: 20px; }
.velkomst-hvorfor li { margin-bottom: 9px; font-size: 14.5px; line-height: 1.55; color: var(--daempet); }
.velkomst-hvorfor strong { color: var(--blaek); font-weight: 600; }
.velkomst-ro { margin: 0 !important; font-size: 13.5px !important; color: var(--svag) !important; }
@media (max-width: 560px) {
  /* På telefonen skal navn og ansigt blive stående ved siden af hinanden.
     Ellers fylder toppen en halv skærm, før man har set noget. */
  .mig { padding: 22px 20px; border-radius: var(--r-2); }
  .mig-top { gap: 15px; align-items: flex-start; }
  .mig .ansigt { flex: 0 0 60px; width: 60px; height: 60px; }
  .mig .ansigt b { font-size: 21px; }
  /* Basis 0, ikke auto: ellers måler rollemærkaterne navnefeltet så bredt,
     at ansigtet bliver skubbet op på sin egen linje. */
  .mig-navn { flex: 1 1 0; min-width: 0; }
  .mig-navn h2 { font-size: 25px; }
  .mig-navn > p, .mig-tom { font-size: 15px; }
  .mig-roller { margin-top: 12px; }
  /* Knapperne kan ikke stå til højre for et navn på 375 px — de får
     deres egen linje i fuld bredde, hvor de er til at ramme. */
  .mig-knapper { margin: 20px 0 0; flex: 1 0 100%; }
  .mig-knapper .knap { flex: 1 1 auto; white-space: nowrap; padding: 0 16px; }

  .faner { margin-top: 22px; }
  .fane { padding: 12px 13px 11px; font-size: 15px; }

  .p-delt { gap: 10px; padding: 12px 14px; }
  .p-delt + .p-delt::before { left: 38px; right: 14px; }
  .p-delt-navn { font-size: 14px; }
  .p-delt-svar { font-size:13px; }
}

/* ── Sidemenuen kan foldes væk ────────────────────────────────────────── */

/* Knappen står under skinnen, i venstre side lige over menuen. Den hører
   til dér: det er den spalte, den folder væk, og når den er foldet væk,
   bliver knappen stående samme sted. */
/* Ikonet skal stå på linje med noget. Er menuen fremme, er det menuens
   egne ikoner; er den væk, er det sidens overskrift, som rykker helt ud
   til venstre. Derfor de to små tal — knappen er 38 px bred om et ikon
   på 19, så ikonet sidder 9,5 px inde. */
.ramme-styr { flex: 0 0 auto; padding: 12px 0 0 5px; }
:root[data-menu="skjult"] .ramme-styr { padding-left: 15px; }
.menu-knap {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-1);
  background: none; color: var(--daempet); cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.menu-knap:hover { background: var(--papir-dyb); color: var(--blaek); }
.menu-knap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Den lodrette streg i ikonet er selve menuen. Er den skjult, tones
   stregen ned — knappen viser altså, hvad skærmen ser ud som. */
.menu-knap svg path { transition: opacity .14s ease; }
:root[data-menu="skjult"] .menu-knap svg path { opacity: .25; }

/* Menuen starter tættere på nu, for knappen har taget den øverste luft. */
.nav { padding-top: 12px; }

:root[data-menu="skjult"] .nav { display: none; }
/* Pladsen bliver ikke stående tom: både skinnen og indholdet får lov at
   brede sig, så hele skærmen retter sig ind efter valget. */
:root[data-menu="skjult"] .ramme,
:root[data-menu="skjult"] .skinne-inder { max-width: 1440px; }

/* Under 900 px er menuen allerede en vandret stribe øverst. Der er
   ingenting at folde væk, så knappen hører ikke hjemme. */
@media (max-width: 900px) {
  .ramme-styr { display: none; }
  .nav { padding-top: 0; }
  :root[data-menu="skjult"] .nav { display: block; }
  /* Sele og livrem: menuen er en vandret stribe her, og .nav-inder er
     ikke positioneret. Kom markøren til at stå synlig, ville den falde
     ud i indholdet. */
  .nav-maerke { display: none !important; }
}

/* Kontrollen før et referat sendes videre.
   Et referat, der går ud af huset med et forkert tal eller et forkert
   navn, er værre end ingen referat. Den her skal ses, ikke skimmes —
   derfor rødt felt og ikke grå brødtekst. */
.ref-tjek {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0 0; padding: 13px 16px;
  border-radius: var(--r-1);
  background: var(--roed-bleg); color: var(--forbud);
  font-size: 13.5px; font-weight: 500; line-height: 1.5;
}
.ref-tjek svg { flex: 0 0 17px; margin-top: 2px; }

/* ── Samtalen på en telefon ───────────────────────────────────────────── */

/* Marginen er en luksus, en bred skærm har. På en telefon ville den tage
   en tredjedel af linjen, så noterne lægger sig ind over teksten i
   stedet — samme rækkefølge, samme ord, bare stablet. */
@media (max-width: 620px) {
  .xv-spor { --margin: 0px; }
  .xv-spor:has(.xv-svar)::before,
  .xv-spor:has(.xv-spurgt)::before { display: none; }

  .xv-svar { padding-left: 0; }
  .xv-spurgt { margin: 26px 0 22px; }
  .xv-spurgt p { max-width: 86%; }
  .xv-kvit { margin-left: 0; }
  .xv-hvem {
    position: static; width: auto;
    flex-direction: row; align-items: center; gap: 9px;
    margin-bottom: 11px;
  }
  .xv-navn { align-items: flex-start; }
  .xv-maerke { text-align: left; }
  .xv-ansigt {
    position: static; width: 26px; height: 26px; flex: 0 0 26px;
    box-shadow: none;
  }
  .xv-del {
    margin-left: 0; padding-left: 0;
    padding-top: 16px; border-top: 1px solid var(--streg);
  }
  .xv-del h4 {
    position: static; width: auto; text-align: left;
    margin-bottom: 6px;
  }
}

/* ── Døren ────────────────────────────────────────────────────────────
 *
 * Husets første skærm. Den var en smal spalte med tre tynde listerækker
 * — en indstillingsside, ikke en dør.
 *
 * Man vælger ikke et "arbejdsrum". Man vælger, hvilket hverv man handler
 * under i dag, og TR og AMR er to forskellige mandater med hver sin
 * hjemmel. Derfor spørger siden om det med ord, og derfor får hvert
 * hverv sin egen flade med sin farve som ryg i venstre kant — samme
 * sprog som samtalen inde i huset.
 *
 * Farven er tilbageholdt til rygen og mærket. Først når man har valgt,
 * tager huset hele farven. Ét sted ad gangen.
 */

.doer-skinne { background: var(--ark); }
.doer {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 48px var(--gutter) 64px;
}
.doer-stage { width: 100%; max-width: 940px; }
.doer-stage-smal { max-width: 460px; }

/* Spørgsmålet. Det er stillet til et menneske, så det står i antikva og
   i en grad, hvor man kan høre det. */
.doer-spoergsmaal {
  margin: 0;
  font: 400 clamp(30px, 4.6vw, 46px)/1.12 var(--serif);
  letter-spacing: -.9px; color: var(--blaek);
  text-wrap: balance;
}
.doer-under {
  margin: 12px 0 0; max-width: 46ch;
  font-size: 16px; line-height: 1.6; color: var(--daempet);
}

/* ── De tre hverv ─────────────────────────────────────────────────── */

.roller {
  display: grid; gap: 16px; margin-top: 38px;
  grid-template-columns: repeat(3, 1fr);
}
/* Mærket foroven, navnet forneden. Ellers samler alt sig i toppen og
   efterlader en død stribe langs bunden af kortet. */
.rolle {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between;
  min-height: 216px; padding: 26px 26px 26px 30px;
  border: 0; border-radius: var(--r-2);
  background: var(--ark); box-shadow: var(--skygge-2);
  cursor: pointer; text-align: left;
  transition: transform .18s cubic-bezier(.22,.8,.26,1);
}
/* Den løftede skygge ligger i sit eget lag. At tone et lag op koster
   ingenting; at tone en skygge koster en ommaling ved hvert billede. */
.rolle::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--skygge-3);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.rolle:hover::after, .rolle:focus-visible::after { opacity: 1; }
/* Ryggen. Den er hvervets farve, og den tykner, når man peger — så kan
   man se sit valg, før man tager det. */
.rolle-ryg {
  position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: var(--rolle-farve);
  transform: scaleX(.6); transform-origin: left center;
  transition: transform .18s cubic-bezier(.22,.8,.26,1);
}
.rolle[data-p="TR"]    { --rolle-farve: var(--tr); --rolle-bleg: var(--blaa-bleg); }
.rolle[data-p="AMR"]   { --rolle-farve: var(--amr); --rolle-bleg: var(--groen-bleg); }
.rolle[data-p="ADMIN"] { --rolle-farve: var(--admin); --rolle-bleg: var(--tg-info-soft); }

.rolle:hover { transform: translateY(-3px); }
.rolle:hover .rolle-ryg,
.rolle:focus-visible .rolle-ryg { transform: none; }
.rolle:focus-visible { outline: 2px solid var(--rolle-farve); outline-offset: 3px; }

.rolle-maerke {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rolle-bleg); color: var(--rolle-farve);
  transition: transform .2s cubic-bezier(.22,.8,.26,1);
}
.rolle:hover .rolle-maerke { transform: translateY(-2px); }
/* Navn og note hører sammen og sidder i bunden som én blok. */
.rolle-navn { margin-top: auto; padding-top: 22px; }
.rolle-navn {
  font: 400 21px/1.25 var(--serif); letter-spacing: -.3px;
  color: var(--blaek); text-wrap: balance;
}
/* To linjers plads til noten, uanset hvor lang den er. Ellers står de
   tre navne i tre forskellige højder, og rækken bliver rastløs. */
.rolle-note {
  margin-top: 7px; min-height: 3em;
  font-size: 14px; line-height: 1.5; color: var(--daempet);
}

/* ── Loginet ──────────────────────────────────────────────────────── */

.valgt-rum {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
/* Mærket fra kortet, i det små. Det er den samme flade, der flyttede
   sig herop — så den skal også se ud som den samme. */
.rolle-maerke.lille { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; }
.rolle-maerke[data-p="TR"]    { background: var(--blaa-bleg);  color: var(--tr); }
.rolle-maerke[data-p="AMR"]   { background: var(--groen-bleg); color: var(--amr); }
.rolle-maerke[data-p="ADMIN"] { background: var(--tg-info-soft);           color: var(--admin); }
.valgt-rum strong { flex: 1 1 auto; font-size: 15.5px; letter-spacing: -.2px; }
/* Vejen tilbage. Den lå før som hvid tekst på en hvid skinne og kunne
   ikke ses — man kunne ikke fortryde sit valg. */
.doer-tilbage {
  flex: 0 0 auto; padding: 6px 0;
  border: 0; background: none; cursor: pointer;
  font: 600 13.5px var(--sans); color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.doer-tilbage:hover { color: var(--accent-dyb); }

.doer-kort {
  padding: 30px 30px 32px;
  border-radius: var(--r-3);
  background: var(--ark); box-shadow: var(--skygge-2);
}
.doer-hilsen {
  margin: 0; font: 400 28px/1.15 var(--serif);
  letter-spacing: -.5px; color: var(--blaek);
}
.doer-kort .doer-under { margin: 8px 0 24px; font-size: 15px; }
.doer-fejl { margin-bottom: 16px; }
.doer-knap { width: 100%; margin-top: 4px; }

/* ── Samtykket ────────────────────────────────────────────────────── */

/* Man trækker det til side.
 *
 * Et flueben kan rammes ved et uheld; en skyder skal man ville. Og
 * bevægelsen er ens egen — den er ikke noget, skærmen gør for én.
 *
 * Kun `transform` flytter sig, så det er grafikkortet, der arbejder, og
 * ikke browserens layout. */
.samtykke { margin: 4px 0 20px; }
.skyder {
  display: block; width: 100%; padding: 0;
  border: 0; background: none; cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.skyder:active { cursor: grabbing; }
.skyder-spor {
  position: relative; display: flex; align-items: center;
  height: 52px; padding: 4px;
  border-radius: 999px;
  background: var(--papir-dyb);
  overflow: hidden;
  transition: background .2s ease;
}
.samtykke.ja .skyder-spor { background: var(--accent-bleg); }

.skyder-nej, .skyder-ja {
  position: absolute; left: 62px; right: 20px;
  font: 600 14px var(--sans); letter-spacing: -.1px;
  transition: opacity .18s ease;
}
.skyder-nej { color: var(--daempet); }
.skyder-ja { color: var(--accent); opacity: 0; }
.samtykke.ja .skyder-nej { opacity: 0; }
.samtykke.ja .skyder-ja { opacity: 1; }

.skyder-knap {
  position: relative; z-index: 1;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 999px;
  background: var(--ark); box-shadow: var(--skygge-2);
  transition: transform .26s cubic-bezier(.2,.85,.3,1), background .2s ease;
}
/* Mens man trækker, skal knappen følge fingeren uden forsinkelse. */
.skyder.traekker .skyder-knap { transition: background .2s ease; }
/* Pilen på knappen siger, hvilken vej man skal. Den bliver til et
   flueben, når man er nået over. */
.skyder-knap::before,
.skyder-knap::after {
  content: ''; position: absolute; inset: 0;
  background: no-repeat center / 17px 17px;
  transition: opacity .16s ease;
}
.skyder-knap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6158' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
.skyder-knap::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
  opacity: 0;
}
/* Hvor langt knappen skal, afhænger af sporets bredde, og den kender
   CSS ikke. JavaScript måler den og sætter --vej — samme tal som
   trækket bruger, så de to ikke kan komme ud af trit. */
.samtykke.ja .skyder-knap {
  background: var(--accent);
  transform: translateX(var(--vej, 0px));
}
.samtykke.ja .skyder-knap::before { opacity: 0; }
.samtykke.ja .skyder-knap::after { opacity: 1; }
.skyder:focus-visible .skyder-spor { outline: 2px solid var(--accent); outline-offset: 2px; }

.samtykke-tekst {
  margin: 12px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--daempet);
}
/* Linket åbner teksten. Det siger ikke ja på ens vegne — det gjorde det
   før, og et samtykke, man giver ved at ville læse om det, er ikke et
   samtykke. */
.som-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.som-link:hover { color: var(--accent-dyb); }

.politik-ark { width: min(720px, 100%); }
.politik-ark .ark-krop { max-height: 62vh; }

/* ── Dørens bevægelse ─────────────────────────────────────────────── */

/* Papirets bevægelse: tingene falder på plads. Seks pixel, ingen
   skalering, ingen flyvetur. */
@keyframes falderPaaPlads {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ind-rum .doer-spoergsmaal { animation: falderPaaPlads .42s ease-out both; }
.ind-rum .doer-under { animation: falderPaaPlads .42s ease-out .06s both; }
.ind-rum .rolle { animation: falderPaaPlads .46s ease-out both; }
.ind-rum .rolle:nth-child(1) { animation-delay: .14s; }
.ind-rum .rolle:nth-child(2) { animation-delay: .21s; }
.ind-rum .rolle:nth-child(3) { animation-delay: .28s; }

/* Formularen kommer efter mærket, der bærer bevægelsen fra valget. */
.ind-form .valgt-rum { animation: falderPaaPlads .4s ease-out .1s both; }
.ind-form .doer-kort { animation: falderPaaPlads .44s ease-out .18s both; }

@media (max-width: 860px) {
  .roller { grid-template-columns: 1fr; gap: 12px; }
  .rolle {
    min-height: 0; flex-direction: row; align-items: center;
    gap: 18px; padding: 18px 20px 18px 26px;
    flex-wrap: wrap;
  }
  .rolle-maerke { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 0; }
  .rolle-navn { flex: 1 1 auto; font-size: 19px; }
  .rolle-note { flex: 1 1 100%; margin-top: 0; padding-left: 62px; }
  .doer { padding: 30px var(--gutter) 44px; align-items: flex-start; }
}

@media (max-width: 560px) {
  .doer-kort { padding: 24px 20px 26px; border-radius: var(--r-2); }
  .rolle-note { padding-left: 0; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ind-rum .doer-spoergsmaal, .ind-rum .doer-under, .ind-rum .rolle,
  .ind-form .valgt-rum, .ind-form .doer-kort { animation: none; }
  .rolle:hover { transform: none; }
}

/* ── En juridisk tekst, sat så den kan læses ──────────────────────────
 *
 * Privatlivspolitikken er en aftale. Den sættes derfor som en aftale:
 * nummeret ude i marginen, teksten i spalten — samme sprog som samtalen
 * med XAVI, og den måde love og overenskomster altid har været sat på.
 *
 * Reglerne bor her og ikke i privatliv.html, fordi teksten også vises
 * inde i loginet. Der er kun ét sted at rette.
 *
 * Bredden måles på beholderen, ikke på vinduet: inde i et ark er der
 * ikke plads til en margin, selv om skærmen er bred.
 */
.dok {
  container-type: inline-size;
  max-width: 760px; margin: 0 auto;
}
/* På de selvstændige sider bærer dokumentet sin egen luft. Inde i et
   ark har arket allerede sin. */
.indhold > .dok { padding: 42px var(--gutter) 90px; }
.ark-krop > .dok { max-width: none; }

.pol-ingress {
  margin: 0 0 30px; max-width: 58ch;
  font: 400 20px/1.6 var(--serif); color: var(--blaek);
  text-wrap: pretty;
}

/* Det, en travl tillidsrepræsentant har brug for at vide, står først og
   står alene. Resten er der for dem, der skal bruge det. */
.pol-kort {
  margin: 0 0 26px; padding: 24px 26px;
  border-radius: var(--r-2);
  background: var(--ark); box-shadow: var(--skygge-2);
}
.pol-kort-titel {
  margin: 0 0 14px;
  font: 600 13px var(--sans); letter-spacing: .04em;
  color: var(--daempet);
}
.pol-kort ul { margin: 0; padding: 0; list-style: none; }
.pol-kort li {
  position: relative; margin: 0 0 11px; padding-left: 26px;
  font-size: 15px; line-height: 1.6; color: var(--daempet);
}
.pol-kort li:last-child { margin-bottom: 0; }
.pol-kort li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.pol-kort strong { color: var(--blaek); font-weight: 600; }

.pol-indhold {
  margin: 0 0 26px; padding: 22px 26px 24px;
  border-radius: var(--r-2); background: var(--papir-dyb);
}
.pol-indhold ol {
  margin: 0; padding: 0; list-style: none;
  counter-reset: toc;
  columns: 2; column-gap: 32px;
}
.pol-indhold li {
  counter-increment: toc;
  break-inside: avoid; margin-bottom: 9px;
  font-size: 14.5px; line-height: 1.45;
}
.pol-indhold a {
  color: var(--blaek); text-decoration: none;
}
.pol-indhold a::before {
  content: counter(toc) '.';
  display: inline-block; width: 22px;
  color: var(--svag); font-variant-numeric: tabular-nums;
}
.pol-indhold a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.pol-forbehold { margin: 0 0 40px; }

/* Afsnittene. Nummeret i marginen, teksten i spalten. */
.dok h2:not(.pol-kort-titel) {
  position: relative;
  margin: 46px 0 14px;
  font: 400 25px/1.25 var(--serif); letter-spacing: -.35px;
  color: var(--blaek); scroll-margin-top: 90px;
  text-wrap: balance;
}
/* Kun nummererede dokumenter har en margin at rykke ind efter. */
.dok h2[data-nr] { padding-left: 62px; }
/* Nummeret står i markuppen som data-nr og bliver ikke regnet ud.
   En CSS-tæller ville være pænere, men `container-type` medfører
   style-containment, og så tæller den forfra. */
.dok h2[data-nr]::before {
  content: attr(data-nr);
  position: absolute; left: 0; top: 6px;
  width: 40px; text-align: right;
  font: 600 14px var(--sans); color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Alt i afsnittet rykker ind til spalten, så nummeret står frit. */
.dok h2[data-nr] ~ h3,
.dok h2[data-nr] ~ p,
.dok h2[data-nr] ~ ul,
.dok h2[data-nr] ~ table { margin-left: 62px; }

.dok h3 {
  margin: 26px 0 8px;
  font: 600 14.5px var(--sans); letter-spacing: -.1px; color: var(--blaek);
}
.dok p, .dok li { color: var(--daempet); line-height: 1.65; }
.dok > p, .dok h2 ~ p { max-width: 64ch; }
.dok ul { padding-left: 20px; }
.dok li { margin-bottom: 7px; }

/* Tabellerne bærer det meste af indholdet. De skal kunne skimmes:
   begrebet i blæk til venstre, forklaringen dæmpet til højre. */
.dok table {
  width: 100%; border-collapse: collapse; margin: 14px 0 6px;
}
.dok th, .dok td {
  text-align: left; vertical-align: top;
  padding: 13px 16px 13px 0;
  border-top: 1px solid var(--streg);
  font-size: 14.5px; line-height: 1.6;
}
.dok tr:last-child th, .dok tr:last-child td { border-bottom: 1px solid var(--streg); }
.dok th {
  width: 34%; color: var(--blaek); font-weight: 600;
  padding-right: 24px;
}
.dok td { color: var(--daempet); }

.udfyld {
  background: var(--advarsel-bleg);
  color: var(--advarsel);
  padding: 2px 8px; border-radius: 6px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}

/* Smal beholder — et ark i loginet, eller en telefon. Marginen falder
   sammen, og tabellerne bliver til to linjer i stedet for to spalter. */
@container (max-width: 560px) {
  .pol-ingress { font-size: 18px; }
  .pol-indhold ol { columns: 1; }
  .pol-indhold, .pol-kort { padding: 18px 20px; }
  .dok h2:not(.pol-kort-titel) { margin: 34px 0 12px; font-size: 21px; }
  .dok h2[data-nr] { padding-left: 0; }
  .dok h2[data-nr]::before {
    position: static; display: block; width: auto; text-align: left;
    margin-bottom: 4px;
  }
  .dok h2[data-nr] ~ h3,
  .dok h2[data-nr] ~ p,
  .dok h2[data-nr] ~ ul,
  .dok h2[data-nr] ~ table { margin-left: 0; }

  .dok table, .dok tbody, .dok tr, .dok th, .dok td { display: block; }
  .dok tr { padding: 12px 0; border-top: 1px solid var(--streg); }
  .dok th, .dok td { width: auto; padding: 0; border: 0; }
  .dok th { margin-bottom: 3px; }
  .dok tr:last-child { border-bottom: 1px solid var(--streg); }
}

.politik-dokument { min-width: 0; max-width: 100%; }
.politik-dokument h1, .politik-dokument h2, .politik-dokument h3 { letter-spacing: 0; }
.politik-dokument code { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 560px) {
  .politik-dokument .dok table, .politik-dokument .dok tbody,
  .politik-dokument .dok tr, .politik-dokument .dok th, .politik-dokument .dok td { display: block; }
  .politik-dokument .dok tr { padding: 12px 0; border-top: 1px solid var(--streg); }
  .politik-dokument .dok th, .politik-dokument .dok td { width: auto; padding: 0; border: 0; }
  .politik-dokument .dok th { margin-bottom: 3px; }
  .politik-dokument .dok tr:last-child { border-bottom: 1px solid var(--streg); }
}

/* ── Når abonnementet ikke er betalt ──────────────────────────────────
 *
 * Man kan se alt, men ikke gøre noget. Beskeden står øverst på hver
 * side og forsvinder ikke af sig selv — det gør tilstanden heller ikke.
 *
 * Selve låsen ligger i API'et. Det her er kun for ikke at lokke nogen
 * til at udfylde en formular, der alligevel bliver afvist.
 */
.laas-baand {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 22px 0 -8px; padding: 16px 20px;
  border-radius: var(--r-2);
  background: var(--roed-bleg); color: var(--forbud);
}
.laas-baand.varsel { background: var(--advarsel-bleg); color: var(--advarsel); }
/* Prøveperioden er en oplysning, ikke en advarsel. Den skal have sin
   egen rolige tone — gul ville sige, at noget var ved at gå galt. */
.laas-baand.proeve { background: var(--blaa-bleg); color: var(--tr); }
.laas-ikon { flex: 0 0 18px; margin-top: 2px; }
.laas-baand strong { display: block; font-size: 15.5px; letter-spacing: -.2px; }
.laas-baand p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
.laas-baand > div { flex: 1 1 auto; min-width: 0; }

/* Vejen hen til betalingen.
 *
 * Båndet står på hver eneste side. Stod der kun en besked om, at der
 * ikke er betalt, skulle man selv finde ud af hvorhen — og det er den
 * eneste ting, beskeden handler om. Knappen har båndets egen farve, så
 * de to ting hører sammen i stedet for at slås om opmærksomheden. */
.laas-knap {
  flex: 0 0 auto; align-self: center;
  background: var(--forbud);
  padding: 10px 18px; white-space: nowrap;
}
.laas-knap:hover { background: var(--tg-danger); box-shadow: var(--skygge-2); }
.laas-baand.varsel .laas-knap { background: var(--advarsel); }
.laas-baand.varsel .laas-knap:hover { background: var(--tg-warning); }
.laas-baand.proeve .laas-knap { background: var(--tr); }
.laas-baand.proeve .laas-knap:hover { background: var(--tg-primary); }

@media (max-width: 680px) {
  .laas-baand { flex-wrap: wrap; }
  /* Kun knappen må falde ned på sin egen linje. Uden en grundbredde
     regner teksten sig selv så bred som sin længste linje og skubber
     ikonet op for sig selv — så stod låsen alene på række ét. */
  .laas-baand > div { flex: 1 1 60%; }
  .laas-knap { width: 100%; align-self: stretch; margin-top: 2px; }
}

/* Gemme- og sletteknapper slås fra. Annullér, Luk og navigation rører
   vi ikke — man skal stadig kunne komme rundt og komme ud. */
/* Kun inde i huset. Reglen ramte før enhver .skyder på siden, også
   samtykket på loginskærmen — og hang låsen ved efter log ud, kunne
   man ikke komme ind igen. */
:root[data-laast="1"] .sideindhold .knap:not(.stille):not(.tekst),
:root[data-laast="1"] .sidetop .knap:not(.stille):not(.tekst),
:root[data-laast="1"] .sideindhold .knap.slet,
:root[data-laast="1"] .sideindhold .ref-diktat,
:root[data-laast="1"] .sideindhold .skyder {
  opacity: .45; pointer-events: none; filter: grayscale(1);
}

/* ── Betalingssiden ───────────────────────────────────────────────── */

.bet-tal { margin-bottom: 8px; }
.tal-kort {
  display: flex; flex-direction: column; gap: 2px;
  padding: 20px 22px 18px;
}
.tal-stor {
  font: 400 32px/1.1 var(--serif); letter-spacing: -.8px;
  color: var(--blaek); font-variant-numeric: tabular-nums;
}
.tal-navn { margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--blaek); }
.tal-note { font-size: 13px; color: var(--svag); }
.tal-kort.tal-stop .tal-stor { color: var(--forbud); }

/* Dage tilbage er det tal, man handler på — derfor et tal og ikke en
   dato, man selv skal regne på. */
.bet-rest {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px;
  font-size:13px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bet-rest.god  { background: var(--groen-bleg); color: var(--amr); }
.bet-rest.obs  { background: var(--advarsel-bleg); color: var(--advarsel); }
.bet-rest.stop { background: var(--roed-bleg); color: var(--forbud); }
.bet-rest.fri  { background: var(--papir-dyb); color: var(--daempet); }
/* Prøveperiode. Den har altid få dage tilbage, så den må ikke stå i
   den gule "løber snart ud"-tone — så ville hele prøvelisten se ud,
   som om den hastede. */
.bet-rest.proeve { background: var(--blaa-bleg); color: var(--tr); }

/* Navnet på et forbund på prøve får et mærke, så det kan ses i
   listen uden at læse linjen under. */
.bet-chip {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; font-size:13px; font-weight: 600;
  letter-spacing: .01em; vertical-align: 1px;
  background: var(--blaa-bleg); color: var(--tr);
}
/* Knappen ligger i rækken, men rækken er også klikbar. Den skal
   derfor være tydeligt sin egen — ikke bare tekst, der flyder med. */
.bet-proeve { flex: 0 0 auto; align-self: center; margin-right: 4px; }

/* Sletteknappen på en dokumentlinje.
 *
 * Den skal kunne findes, men ikke kalde på sig. Dæmpet indtil man er
 * henne ved den, og først dér rød — en rød knap på hver linje gør
 * listen til en advarsel. */
.dok-slet {
  flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-right: 2px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--svag);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.dok-slet:hover, .dok-slet:focus-visible {
  background: var(--roed-bleg); color: var(--forbud);
}
.dok-slet:focus-visible { outline: 2px solid var(--forbud); outline-offset: 1px; }
.dok-slet svg { stroke-width: 1.9; }

.bet-beloeb {
  flex: 0 0 auto; font-size: 15px; font-weight: 600;
  color: var(--blaek); font-variant-numeric: tabular-nums;
}
.bet-slet {
  flex: 0 0 32px; width: 32px; height: 32px; margin-left: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-1); background: none;
  color: var(--svag); cursor: pointer;
}
.bet-slet:hover { background: var(--roed-bleg); color: var(--forbud); }

@media (max-width: 620px) {
  .bet-raekke .under { font-size:13px; }
  .tal-stor { font-size: 27px; }
}

/* Anmodninger, der venter. Det er den eneste række på siden med to
   knapper, så de må være mindre end resten — ellers fylder de mere,
   end beslutningen gør. */
.knap.lille { padding: 7px 14px; font-size: 13.5px; }
.anm-raekke { align-items: center; }
.anm-note {
  margin-top: 5px; padding-left: 11px; border-left: 2px solid var(--streg);
  font-size: 13px; line-height: 1.5; color: var(--daempet);
}
.anm-valg { flex: 0 0 auto; display: flex; gap: 8px; margin-left: 14px; }
.anm-hjaelp { margin-top: 12px; }
.anm-faktura {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size:13px; font-weight: 600; color: var(--amr);
}
/* En ordre, der venter på penge, er ikke en god nyhed endnu. */
.anm-faktura.venter { color: var(--advarsel); }
.anm-faktura.stop { color: var(--forbud); }

/* Ingen skylder noget. Det er også et svar, og det skal stå — ellers
   ved man ikke, om listen er tom eller ikke hentet. */
.alt-godt { display: flex; gap: 14px; padding: 16px 20px; margin-bottom: 8px; }
.alt-godt .maerke { flex: 0 0 34px; height: 34px; background: var(--groen-bleg); color: var(--amr); }
.alt-godt .titel { font-size: 15px; font-weight: 600; color: var(--blaek); }
.alt-godt .under { margin-top: 2px; font-size: 13.5px; color: var(--daempet); }

/* Overskriften over dem, der skylder, skal ikke ligne de andre. */
.p-afsnit.skylder-top { color: var(--forbud); }
.maerke.stop { background: var(--roed-bleg); color: var(--forbud); }

/* Hvad der sker, når pengene er overført. Den står mellem
   kontonummeret og knapperne, hvor spørgsmålet melder sig. */
.krav-naar {
  margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--daempet);
}

/* ── Fakturaen ────────────────────────────────────────────────────────
 *
 * Den skal kunne skrives ud og lægges i et regnskab, så den ser ud som
 * en faktura og ikke som en skærm: hvidt papir, tal i antikva med faste
 * cifferbredder, og beløbet at betale som det eneste, der er fremhævet.
 */
.faktura {
  background: #FFFFFF; padding: 30px 32px 26px;
  border-radius: var(--r-2); border: 1px solid var(--streg);
  color: var(--blaek);
}
.fak-top {
  display: flex; justify-content: space-between; gap: 30px;
  flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid var(--blaek);
}
.fak-navn { font: 400 24px/1 var(--serif); letter-spacing: -.5px; }
.fak-top p { margin: 4px 0 0; font-size: 13.5px; color: var(--daempet); }
.fak-noegler { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 190px; }
.fak-noegler div { display: flex; justify-content: space-between; gap: 16px; }
.fak-noegler dt { font-size:13px; color: var(--daempet); }
.fak-noegler dd {
  margin: 0; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fak-til { margin: 22px 0 24px; }
.fak-til span { font-size:13px; color: var(--svag); }
.fak-til strong { display: block; margin-top: 3px; font-size: 16.5px; letter-spacing: -.2px; }
.fak-til p { margin: 2px 0 0; font-size: 13.5px; color: var(--daempet); }

.fak-linjer { width: 100%; border-collapse: collapse; }
.fak-linjer th, .fak-linjer td { text-align: left; padding: 11px 0; }
.fak-linjer thead th {
  font-size:13px; font-weight: 600; color: var(--svag);
  border-bottom: 1px solid var(--streg); padding-bottom: 7px;
}
.fak-linjer th:last-child, .fak-linjer td:last-child {
  text-align: right; font-variant-numeric: tabular-nums;
}
.fak-linjer th:nth-child(2), .fak-linjer td:nth-child(2) { text-align: right; width: 22%; }
.fak-linjer tbody td { font-size: 14.5px; border-bottom: 1px solid var(--streg); }
.fak-linjer tfoot th { font-size: 13.5px; font-weight: 500; color: var(--daempet); }
.fak-linjer tfoot td { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.fak-linjer tfoot tr:first-child th, .fak-linjer tfoot tr:first-child td { padding-top: 12px; }
.fak-ialt th { font-size: 16px !important; font-weight: 700 !important; color: var(--blaek) !important; }
.fak-ialt td {
  font: 400 22px/1 var(--serif) !important; letter-spacing: -.5px;
  border-top: 2px solid var(--blaek); padding-top: 13px !important;
}
.fak-ialt th { border-top: 2px solid var(--blaek); padding-top: 13px !important; }

.fak-bund {
  display: flex; gap: 40px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--streg);
}
.fak-bund span { font-size:13px; color: var(--svag); }
.fak-bund p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }
.fak-ref { font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.fak-fod { margin: 20px 0 0; font-size:13px; color: var(--svag); }

.ark-boks.bred { max-width: 720px; }

/* ── Sagen som en journal ─────────────────────────────────────────────
 *
 * Man skriver øverst, og det gamle står under. Sådan føres en sag:
 * man tilføjer noget, og det, der var der, bliver stående.
 *
 * Skrivefeltet er ikke gemt bag en knap. Det er det, man kom for.
 */
.sag-ark { max-width: 640px; }

.sag-hoved {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--streg);
}
.sag-hoved-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 12px;
}
.sag-hoved h2 {
  margin: 0; font: 400 24px/1.2 var(--serif);
  letter-spacing: -.5px; color: var(--blaek);
}
.sag-hoved p { margin: 6px 0 0; font-size: 13.5px; color: var(--daempet); }
.sag-hoved .ark-luk { margin: -4px -6px 0 0; }

.sag-krop { padding: 20px 24px 24px; }
.sag-tekst {
  margin: 0 0 20px; padding-left: 14px;
  border-left: 2px solid var(--streg);
  font-size: 14.5px; line-height: 1.65; color: var(--daempet);
}

/* Skrivefeltet. Det fylder, fordi det er hovedhandlingen. */
.skriv {
  padding: 16px 18px 14px; border-radius: var(--r-2);
  background: var(--papir-dyb);
}
.skriv-etiket {
  display: block; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; color: var(--blaek);
}
.skriv textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-1);
  border: 1px solid var(--streg); background: var(--ark);
  font: inherit; font-size: 15px; line-height: 1.6; color: var(--blaek);
  resize: vertical; min-height: 86px;
}
.skriv textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bleg);
}
.skriv-bund {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: 12px; flex-wrap: wrap;
}
.skriv-mail { flex: 1 1 200px; min-width: 0; }
.skriv-mail span {
  display: block; margin-bottom: 4px; font-size:13px; color: var(--svag);
}
.skriv-mail input {
  width: 100%; padding: 9px 12px; border-radius: var(--r-1);
  border: 1px solid var(--streg); background: var(--ark);
  font: inherit; font-size: 14px; color: var(--blaek);
}
.skriv-mail input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bleg);
}

/* Journalen. En streg ned gennem tiden, og et punkt for hver gang
   nogen har gjort noget ved sagen. */
.journal { list-style: none; margin: 26px 0 0; padding: 0 0 0 20px; position: relative; }
.journal::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px;
  width: 1px; background: var(--streg);
}
.journal li { position: relative; padding: 0 0 22px; }
.journal li::before {
  content: ''; position: absolute; left: -20px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ark); border: 2px solid var(--streg-kraftig);
}
.journal li:first-child::before { border-color: var(--accent); }
.journal-top {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.journal-top strong { font-size: 14.5px; color: var(--blaek); }
.journal-hverv {
  padding: 1px 7px; border-radius: 999px;
  background: var(--papir-dyb); color: var(--daempet);
  font-size:13px; font-weight: 600;
}
.journal-top time { font-size:13px; color: var(--svag); }
.journal-tekst {
  margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: var(--blaek);
}
.journal-kvit {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size:13px;
}
.journal-kvit.god  { color: var(--amr); }
.journal-kvit.stop { color: var(--forbud); }
.journal-kvit.fri  { color: var(--svag); }
.journal-tom {
  margin: 26px 0 0; font-size: 14px; color: var(--svag); text-align: center;
}

@media (max-width: 560px) {
  .sag-hoved, .sag-krop { padding-left: 18px; padding-right: 18px; }
  .skriv-bund .knap { width: 100%; }
}

/* Hvad der faktisk skete med mailen. Grøn når den gik af sted, gul når
   den ikke gjorde — og så står det, hvad man selv skal gøre. */
.fak-status {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 16px; padding: 12px 15px; border-radius: var(--r-1);
  font-size: 13.5px; line-height: 1.5;
}
.fak-status svg { flex: 0 0 16px; margin-top: 2px; }
.fak-status.god { background: var(--groen-bleg); color: var(--amr); }
.fak-status.obs { background: var(--advarsel-bleg); color: var(--advarsel); }

@media (max-width: 620px) {
  .faktura { padding: 22px 18px 20px; }
  .fak-top { gap: 16px; }
  .fak-noegler { min-width: 0; width: 100%; }
}

.pris-ark {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 20px 22px; flex-wrap: wrap;
}
.pris-tal {
  margin: 0; flex: 1 1 auto;
  display: flex; flex-wrap: wrap; gap: 14px 34px;
}
.pris-knapper { display: flex; gap: 8px; flex-wrap: wrap; }
.pris-tal div { display: flex; flex-direction: column; gap: 1px; }

/* Prøvemailens opsætning. Det, der mangler, skal kunne ses uden at
   læse hver linje — derfor er de tomme felter røde. */
.proeve-liste { flex-direction: column; gap: 9px; margin-top: 14px; }
.proeve-liste div { flex-direction: row !important; justify-content: space-between; gap: 18px; }
.proeve-liste dd.mangler { color: var(--forbud); }
.pris-tal dt { font-size:13px; color: var(--svag); }
.pris-tal dd {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--blaek);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .anm-raekke { flex-wrap: wrap; }
  .anm-valg { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ── Fagforbundets eget abonnement ────────────────────────────────────
 *
 * Datoen er det, alt andet hænger på, så den står stort og i skriften,
 * der er lavet til at læse tal. Farven kommer ét sted fra: kanten i
 * venstre side skifter med tilstanden, og resten af arket bliver
 * roligt — så siger den låste tilstand noget uden at råbe.
 */
.abo-top {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px; align-items: start;
  padding: 26px 28px 24px 32px;
}
.abo-top::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--amr);
}
.abo-top[data-tilstand="snart"]::before { background: var(--advarsel); }
.abo-top[data-tilstand="laast"]::before { background: var(--forbud); }
.abo-top[data-tilstand="proeve"]::before { background: var(--tr); }

.abo-mærkat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size:13px; font-weight: 600; letter-spacing: .01em;
  background: var(--groen-bleg); color: var(--amr);
}
.abo-top[data-tilstand="snart"] .abo-mærkat { background: var(--advarsel-bleg); color: var(--advarsel); }
.abo-top[data-tilstand="laast"] .abo-mærkat { background: var(--roed-bleg); color: var(--forbud); }
.abo-top[data-tilstand="proeve"] .abo-mærkat { background: var(--blaa-bleg); color: var(--tr); }
.abo-mærkat svg { stroke-width: 2.4; }

.abo-spørgsmål {
  margin: 14px 0 0; font-size: 14.5px; color: var(--daempet);
}
.abo-dato {
  margin: 2px 0 0;
  font: 400 clamp(28px, 4.6vw, 38px)/1.12 var(--serif);
  letter-spacing: -1px; color: var(--blaek);
  font-variant-numeric: tabular-nums;
}
.abo-rest {
  margin: 10px 0 0; max-width: 46ch;
  font-size: 14.5px; line-height: 1.6; color: var(--daempet);
}
.abo-top[data-tilstand="laast"] .abo-rest { color: var(--forbud); }

/* Tallene står i en kolonne for sig med en linje imellem — ikke i kort,
   for det er tre oplysninger om det samme, ikke tre ting. */
.abo-fakta {
  margin: 0; padding: 4px 0 0 28px; min-width: 210px;
  border-left: 1px solid var(--streg);
  display: flex; flex-direction: column; gap: 14px;
}
.abo-fakta div { display: flex; flex-direction: column; gap: 1px; }
.abo-fakta dt { font-size:13px; color: var(--svag); }
.abo-fakta dd {
  margin: 0; font-size: 17px; font-weight: 600; color: var(--blaek);
  font-variant-numeric: tabular-nums;
}

.abo-venter { display: flex; gap: 14px; padding: 16px 20px; margin-top: 14px; }
.abo-venter .maerke { flex: 0 0 34px; height: 34px; }
.abo-venter .titel { font-size: 15px; font-weight: 600; color: var(--blaek); }
.abo-venter .under { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--daempet); }

/* De tre veje er lige gode, så de ser ens ud. Den lukkede bliver
   stående og siger hvorfor — bedre end en knap, der ikke findes. */
.abo-veje { display: grid; gap: 10px; }
.abo-vej {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 17px 20px; text-align: left; cursor: pointer; border: 0;
  font: inherit; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}
.abo-vej:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--skygge-2); }
.abo-vej:active:not(:disabled) { transform: translateY(0); }
.abo-vej:disabled { cursor: default; }
.abo-vej:disabled .abo-vej-ikon { background: var(--papir-dyb); color: var(--svag); }
.abo-vej:disabled strong { color: var(--daempet); }
.abo-vej-ikon {
  flex: 0 0 42px; height: 42px; border-radius: var(--r-1);
  display: flex; align-items: center; justify-content: center;
  background: var(--blaa-bleg); color: var(--tr);
}
.abo-vej-tekst { flex: 1 1 auto; min-width: 0; }
.abo-vej-tekst strong {
  display: block; font-size: 15.5px; letter-spacing: -.2px; color: var(--blaek);
}
.abo-vej-tekst em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 13.5px; line-height: 1.55; color: var(--daempet);
}
.abo-vej-pil { flex: 0 0 18px; color: var(--svag); }
.abo-hjaelp { margin-top: 18px; }

/* ── Det, der skal betales ────────────────────────────────────────────
 *
 * Er der sendt en faktura, er det dén, skærmen handler om. Beløbet og
 * kontonummeret står, hvor øjet lander — man skal ikke lede efter
 * dem for at kunne overføre. */
.faktura-krav {
  padding: 22px 24px 20px;
  border: 1px solid var(--streg-kraftig);
}
.krav-top {
  display: flex; justify-content: space-between; gap: 24px;
  align-items: flex-start; flex-wrap: wrap;
}
.krav-maerke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  background: var(--papir-dyb); color: var(--daempet);
  font-size:13px; font-weight: 600;
}
.krav-hvad { margin: 10px 0 0; font-size: 15.5px; color: var(--blaek); }
.krav-beloeb { text-align: right; }
.krav-beloeb strong {
  display: block; font: 400 30px/1.05 var(--serif);
  letter-spacing: -.8px; color: var(--blaek);
  font-variant-numeric: tabular-nums;
}
.krav-beloeb span { display: block; margin-top: 4px; font-size:13px; color: var(--svag); }

.krav-konto {
  margin: 20px 0 0; padding: 15px 18px;
  background: var(--papir-dyb); border-radius: var(--r-1);
  display: flex; flex-wrap: wrap; gap: 14px 40px;
}
.krav-konto div { display: flex; flex-direction: column; gap: 2px; }
.krav-konto dt { font-size:13px; color: var(--svag); }
.krav-konto dd {
  margin: 0; font-size: 14.5px; font-weight: 600; color: var(--blaek);
  font-variant-numeric: tabular-nums;
}
.krav-ref { letter-spacing: .05em; }
.krav-knapper {
  display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; align-items: center;
}
/* Fortryd står til sidst og stille. Den er der, men den skal ikke
   konkurrere med det, man kom for. */
.krav-fortryd { margin-left: auto; color: var(--svag); }
.krav-fortryd:hover { color: var(--forbud); }

/* Aftalen. Ingen knapper — der er ikke noget at vælge her. Perioden
   blev aftalt, da abonnementet blev oprettet. */
.abo-aftale { display: flex; gap: 14px; padding: 16px 20px; margin-top: 14px; }
.abo-aftale .maerke { flex: 0 0 34px; height: 34px; }
.abo-aftale .titel { font-size: 15px; font-weight: 600; color: var(--blaek); }
.abo-aftale .under { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--daempet); }

/* ── Perioden ─────────────────────────────────────────────────────────
 *
 * Én liste, sorteret efter længde. Prisen pr. måned står under, så
 * man kan se, hvad det længere valg er værd, uden selv at regne. */
.periode-valg {
  display: grid; gap: 9px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.periode {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 15px; text-align: left; cursor: pointer;
  background: var(--ark); border: 1px solid var(--streg);
  border-radius: var(--r-1); font: inherit; color: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.periode:hover { border-color: var(--streg-kraftig); }
.periode.valgt {
  border-color: var(--accent); background: var(--accent-bleg);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.periode-tid { font-size: 14px; font-weight: 600; color: var(--blaek); }
.periode-pris {
  font-size: 17px; font-weight: 600; color: var(--blaek);
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}
.periode-pr { font-size:13px; color: var(--svag); font-variant-numeric: tabular-nums; }
.periode.valgt .periode-tid, .periode.valgt .periode-pris { color: var(--accent-dyb); }
.periode-note { margin: 0 0 16px; }

/* Kvitteringen. Referencen er det eneste, banken kan genkende
   betalingen på, så den skal kunne læses uden at lede. */
.kvit {
  padding: 20px 22px; border-radius: var(--r-2);
  background: var(--papir-dyb);
}
.kvit-beloeb {
  font: 400 34px/1 var(--serif); letter-spacing: -1px;
  color: var(--blaek); font-variant-numeric: tabular-nums;
}
.kvit-beloeb span {
  margin-left: 9px; font: 400 13px/1 var(--sans); color: var(--svag);
  letter-spacing: 0;
}
.kvit dl {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--streg);
  display: flex; flex-direction: column; gap: 11px;
}
.kvit dl div { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.kvit dt { font-size: 13.5px; color: var(--daempet); }
.kvit dd {
  margin: 0; font-size: 14.5px; font-weight: 600; color: var(--blaek);
  font-variant-numeric: tabular-nums; text-align: right;
}
.kvit-ref { letter-spacing: .04em; }

/* Abonnementssiden er vejen ud af låsen. Den må aldrig selv være låst. */
:root[data-laast="1"] .abo-vej,
:root[data-laast="1"] .ark-lag .knap {
  opacity: 1; pointer-events: auto; filter: none;
}

@media (max-width: 760px) {
  .abo-top { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px 20px 24px; }
  .abo-fakta {
    padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--streg);
    flex-direction: row; flex-wrap: wrap; gap: 16px 28px;
  }
  .abo-vej { padding: 15px 16px; gap: 13px; }
  .abo-vej-ikon { flex-basis: 38px; height: 38px; }
}

/* ═══ Sagsforløb og frister ═══════════════════════════════════════════
   Et forløb er en liste af trin. Listen skal kunne læses på én gang —
   derfor står dagtallet som ord til venstre og handlingen til højre,
   i stedet for en tabel man skal læse to gange. */

.forloeb { margin-bottom: 16px; }
.forloeb.slukket { opacity: .62; }
.forloeb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.forloeb-top strong { font-size: 16.5px; }
.forloeb-note { margin: 10px 0 0; color: var(--svag); font-size: 14px; line-height: 1.5; }
.forloeb-overskrift { margin: 22px 0 10px; font-size: 14px; letter-spacing: .01em; }

.forloeb-trin { list-style: none; margin: 14px 0 0; padding: 0; }
.forloeb-trin li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--linje, rgba(0,0,0,.07));
  font-size: 14.5px;
}
.forloeb-trin li:first-child { border-top: 0; }
/* Fast bredde, så handlingerne står under hinanden og kan skimmes. */
.forloeb-dag { flex: 0 0 104px; color: var(--svag); font-size: 13px; }
.forloeb-titel { flex: 1 1 auto; }
.forloeb-knapper { display: flex; gap: 8px; margin-top: 14px; }

.pille.fri { background: rgba(0,0,0,.06); color: var(--daempet); }

/* Valg af rum. Tre knapper, ikke en rulleliste — der er kun tre. */
.rumvalg { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.rumknap {
  flex: 1 1 auto; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--kant, var(--tg-line)); background: #FFFFFF;
  font: 600 13.5px inherit; color: var(--daempet); cursor: pointer;
}
.rumknap.valgt { border-color: var(--accent); color: var(--accent); background: var(--accent-bleg); }

/* Trinnene under redigering. */
.forloeb-ark .ark-krop { padding-bottom: 8px; }
.trinliste { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.trin {
  padding: 12px; border-radius: 12px;
  background: var(--flade, rgba(0,0,0,.03));
  display: flex; flex-direction: column; gap: 8px;
}
.trin-raekke { display: flex; align-items: center; gap: 10px; }
.trin input[type="text"], .trin input:not([type]), .trin input[type="number"] {
  padding: 10px 12px; border-radius: 9px;
  border: 1.5px solid var(--kant, var(--tg-line)); background: #FFFFFF; font-size: 15px;
}
.trin-titel { flex: 1 1 auto; min-width: 0; }
.trin-note { width: 100%; }
.trin-fjern {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: rgba(0,0,0,.05); color: var(--svag); cursor: pointer;
  display: grid; place-items: center;
}
.trin-dage { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; }
.trin-dage input { width: 82px; }
.trin-dage span { color: var(--svag); font-size: 13.5px; }
.trin-kritisk { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--daempet); }

/* ═══ Fristerne på en sag ═════════════════════════════════════════════
   En frist er ikke en påmindelse. Den er et trin, der skal være klaret
   inden en dato — og overskrides den, kan sagen være tabt. Derfor får
   den overskredne en farvet kant, og et kritisk trin er mærket. */

.frister { margin: 0 0 22px; }
.frister-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.frister-top h3 { margin: 0 0 10px; font-size: 15px; }
.frister.tom .knap.bred { margin-top: 10px; }

.fristliste { list-style: none; margin: 0 0 12px; padding: 0; }
.frist {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px; margin-bottom: 8px; border-radius: 11px;
  background: var(--flade, rgba(0,0,0,.03));
  border-left: 3px solid transparent;
}
.frist.over { border-left-color: var(--tg-danger); background: rgba(193,38,59,.06); }
.frist.snart { border-left-color: var(--tg-warning); background: rgba(201,124,16,.06); }
.frist.klaret { opacity: .6; }
.frist.klaret .frist-titel { text-decoration: line-through; }

.frist-flueben {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 7px; border: 1.5px solid var(--kant, var(--tg-line));
  background: #FFFFFF; cursor: pointer; display: grid; place-items: center;
  color: #FFFFFF; padding: 0;
}
.frist.klaret .frist-flueben { background: var(--accent); border-color: var(--accent); }
.frist-flueben:disabled { opacity: .5; cursor: default; }

.frist-tekst { flex: 1 1 auto; min-width: 0; }
.frist-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.frist-note { margin: 5px 0 0; color: var(--svag); font-size: 13.5px; line-height: 1.45; }
.frist-fjern {
  flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--svag); cursor: pointer;
  display: grid; place-items: center;
}
.frist-fjern:hover { background: rgba(0,0,0,.06); }
.frist-knapper { display: flex; gap: 8px; flex-wrap: wrap; }
.frist-knapper .knap { flex: 1 1 auto; }

/* Forbundets egen privatlivstekst på loginskærmen.
   Den står som sin egen beslutning, adskilt fra Tillidsgruppens egen — det
   er en anden tekst, skrevet af nogle andre. */
.forbund-samtykke { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--kant, var(--tg-line)); }
.samtykke-forbund-top {
  margin: 0 0 10px; font-size: 14px; line-height: 1.4;
  font-weight: 600; color: var(--blaek, inherit);
}
.gdpr-afsnit { padding: 10px 0; border-top: 1px solid var(--linje, rgba(0,0,0,.07)); }
.gdpr-afsnit:first-of-type { border-top: 0; padding-top: 0; }
.gdpr-afsnit strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.gdpr-afsnit p { margin: 0; color: var(--daempet); font-size: 14px; line-height: 1.55; }
.afsnit-titel { flex: 1 1 auto; min-width: 0; }
.afsnit-tekst { width: 100%; padding: 10px 12px; border-radius: 9px;
  border: 1.5px solid var(--kant, var(--tg-line)); background: #FFFFFF; font-size: 15px;
  font-family: inherit; line-height: 1.5; resize: vertical; }
.opslag-knapper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ═══ Bekræftelse ═════════════════════════════════════════════════════
   Browserens egen confirm() ligner en systemfejl og siger "OK". Den
   her siger, hvad der sker, og den farlige knap er rød. */

.bekraeft-lag { align-items: center; justify-content: center; padding: 24px; }
.bekraeft {
  width: min(420px, 100%); background: var(--ark);
  border-radius: 16px; padding: 26px 24px 20px;
  box-shadow: 0 1px 3px rgba(25,28,26,.05), 0 16px 40px -10px rgba(25,28,26,.22);
  transform: translateY(8px) scale(.98);
  transition: transform .16s cubic-bezier(.2,.8,.3,1);
}
.ark-lag.inde .bekraeft { transform: none; }
.bekraeft h2 {
  margin: 0 0 8px; font: 400 23px/1.2 var(--serif);
  letter-spacing: -.4px; color: var(--blaek);
}
.bekraeft p { margin: 0 0 22px; color: var(--daempet); font-size: 15px; line-height: 1.55; }
.bekraeft-knapper { display: flex; gap: 10px; justify-content: flex-end; }
.bekraeft-knapper .knap { min-width: 104px; justify-content: center; }

/* Den røde. Kun til det, der ikke kan fortrydes. */
.knap.roed { background: var(--roed); border-color: var(--roed); color: #FFFFFF; }
.knap.roed:hover { background: var(--roed-dyb); border-color: var(--roed-dyb); }

/* Knapperne ved et opslag. Tilbagetrækning er en almindelig handling;
   sletning er ikke, så den står som et ikon indtil man peger på den. */
.opslag-knapper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.opslag-knapper .knap.stille { padding: 8px 14px; font-size: 13.5px; }
.opslag-slet {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--svag); cursor: pointer;
  display: grid; place-items: center; transition: background .14s, color .14s;
}
.opslag-slet:hover { background: var(--roed-bleg); color: var(--roed); }

/* ═══ Kalenderens måned ═══════════════════════════════════════════════
   En flad liste kan ikke svare på "hvad sker der på torsdag". Et
   gitter kan, og en prik siger, hvor der er noget, uden at man skal
   læse noget som helst. */

.kal { background: var(--ark); border-radius: 16px; padding: 16px 14px 12px;
  box-shadow: 0 1px 3px rgba(25,28,26,.05), 0 8px 20px -6px rgba(25,28,26,.1);
  margin-bottom: 20px; }
.kal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.kal-maaned {
  flex: 1 1 auto; border: 0; background: none; cursor: pointer;
  font: 400 21px/1.2 var(--serif); letter-spacing: -.3px; color: var(--blaek);
  padding: 6px 10px; border-radius: 9px;
}
.kal-maaned:hover { background: var(--papir-dyb); }
.kal-pil {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: var(--papir-dyb); color: var(--daempet); cursor: pointer;
  display: grid; place-items: center;
}
.kal-pil:hover { background: var(--streg); color: var(--blaek); }
.kal-pil.venstre svg { transform: rotate(180deg); }

.kal-ugedage, .kal-gitter {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.kal-ugedage { margin-bottom: 4px; }
.kal-ugedage span {
  text-align: center; font-size:13px; font-weight: 600;
  color: var(--svag); padding: 4px 0; letter-spacing: .02em;
}
.kal-tom { aspect-ratio: 1; }
.kal-dag {
  aspect-ratio: 1; border: 0; background: none; cursor: pointer;
  border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: 14.5px; color: var(--blaek); padding: 0;
  transition: background .12s, color .12s;
}
.kal-dag:hover { background: var(--papir-dyb); }
/* I dag er markeret med en ring — valgt er fyldt. De to kan være
   den samme dag, og så skal begge stadig kunne ses. */
.kal-dag.idag { box-shadow: inset 0 0 0 1.5px var(--streg-kraftig); }
.kal-dag.valgt { background: var(--accent); color: #FFFFFF; box-shadow: none; }
.kal-prik { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.kal-dag.valgt .kal-prik { background: rgba(255,255,255,.85); }

.kal-dagtitel {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px 2px; font: 400 18px/1.3 var(--serif);
  letter-spacing: -.2px; color: var(--blaek);
}
.kal-ingen { margin: 0; padding: 22px 16px; text-align: center;
  color: var(--svag); font-size: 15px; }

/* Op til tre prikker pr. dag, og et mærke på pilen når der er noget
   at gå hen til i måneden ved siden af. */
.kal-prikker { display: flex; gap: 2px; align-items: center; height: 5px; }
.kal-prikker i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.kal-dag.valgt .kal-prikker i { background: rgba(255,255,255,.85); }
.kal-pil { position: relative; }
.kal-pil.har::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* Resultatplakaten, når den ikke kan hentes endnu.
   Boksen står der, så man ved, at den findes — men den skal kunne ses
   at være slukket, uden at man skal trykke for at opdage det. */
.res-venter code { color: var(--svag); }
.res-venter .knap[disabled] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* ═══ Vejledning ══════════════════════════════════════════════════════
   En håndbog, ikke en artikel.

   Forsiden er en indholdsfortegnelse: nummererede rækker med en hårfin
   streg imellem, samlet i afsnit. Det ligner en manual, fordi det ER en
   manual — man kommer med ét spørgsmål og skal kunne slå det op.

   Her stod før et bånd af piller øverst og alle afsnit under hinanden
   på én side. Man kunne ikke se, hvor meget der var, og man kunne ikke
   tage ét emne med sig. */

.vejl-ingress {
  margin: 0 0 26px; color: var(--daempet);
  font-size: 15.5px; line-height: 1.55; max-width: 58ch;
}

.vejl-bog { margin: 0; }

.vejl-gruppe { margin: 0 0 30px; }
/* Afsnitsnavnet er en etiket, ikke en overskrift. Det skal kunne
   springes over af den, der ved, hvad hun leder efter. */
.vejl-gruppe h2 {
  margin: 0 0 4px; padding-bottom: 8px;
  border-bottom: 2px solid var(--blaek);
  font-size:13px; font-weight: 700; line-height: 1.3;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--blaek);
}

.vejl-rad {
  display: grid; grid-template-columns: 34px 1fr 20px; align-items: center;
  gap: 12px; width: 100%; padding: 14px 4px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--streg);
  cursor: pointer; font: inherit; color: inherit;
}
.vejl-rad:last-child { border-bottom: 0; }
.vejl-rad:hover { background: var(--papir-dyb); }
.vejl-rad:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Nummeret er det, man husker et kapitel på, når man har slået op én
   gang. Antikva-tallene hører til husets skrift. */
.vejl-nr {
  font: 400 19px/1 var(--serif); color: var(--svag);
  font-variant-numeric: oldstyle-nums; text-align: right;
}
.vejl-tekst { display: block; min-width: 0; }
.vejl-tekst strong {
  display: block; font-size: 16px; font-weight: 650; color: var(--blaek);
  letter-spacing: -.1px;
}
.vejl-tekst em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 14px; color: var(--daempet); line-height: 1.4;
}
.vejl-pil { color: var(--svag); display: grid; place-items: center; }
.vejl-rad:hover .vejl-pil { color: var(--accent); }

/* ── Kapitlet ──────────────────────────────────────────────────────── */
.vejl-tilbage { margin: 0 0 22px; }

.vejl-kap { max-width: 62ch; }
.vejl-kap-gruppe {
  margin: 0 0 6px; font-size:13px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--accent);
}
.vejl-kap h2 {
  margin: 0 0 12px; font: 400 30px/1.15 var(--serif);
  letter-spacing: -.6px; color: var(--blaek);
}
.vejl-kap-hvad {
  margin: 0 0 30px; font-size: 16.5px; line-height: 1.6; color: var(--blaek);
}
/* Mellemrubrikkerne er små og faste. Man skal kunne springe til "Hvis
   det driller" uden at læse resten — og de står det samme sted i alle
   kapitler, så øjet ved, hvor det skal hen. */
.vejl-kap h3 {
  margin: 0 0 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--streg);
  font-size:13px; font-weight: 700; line-height: 1.3;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--daempet);
}
.vejl-kap h3 + * { margin-top: 0; }
.vejl-kap > * + h3 { margin-top: 30px; }

.vejl-trin { margin: 0; padding-left: 0; list-style: none; counter-reset: trin; }
.vejl-trin li {
  counter-increment: trin; position: relative;
  padding: 0 0 14px 36px; font-size: 15.5px; line-height: 1.55;
}
/* Tallet er en del af anvisningen, ikke pynt — derfor et rigtigt
   nummer og ikke en prik. */
.vejl-trin li::before {
  content: counter(trin); position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--accent-bleg); color: var(--accent);
  font-size:13px; font-weight: 700; display: grid; place-items: center;
}

.vejl-punkter { margin: 0; padding-left: 0; list-style: none; }
.vejl-punkter li {
  position: relative; padding: 0 0 12px 22px;
  font-size: 15px; line-height: 1.55; color: var(--daempet);
}
.vejl-punkter li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--svag);
}

/* Symptom og svar som en ordliste. Man læser venstre side, til man
   genkender sit eget problem, og først så højre. */
.vejl-driller { margin: 0; }
.vejl-driller dt {
  font-size: 15px; font-weight: 650; color: var(--blaek); margin-bottom: 3px;
}
.vejl-driller dt::before { content: '„'; color: var(--svag); }
.vejl-driller dt::after { content: '“'; color: var(--svag); }
.vejl-driller dd {
  margin: 0 0 16px; padding-left: 14px;
  border-left: 2px solid var(--accent-bleg);
  font-size: 15px; line-height: 1.55; color: var(--daempet);
}

.vejl-aabn { margin-top: 32px; }

.vejl-naeste {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--streg);
}

.vejl-slut {
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--streg);
  color: var(--svag); font-size: 14.5px; line-height: 1.55;
}

@media (max-width: 560px) {
  .vejl-rad { grid-template-columns: 26px 1fr 18px; gap: 10px; padding: 13px 2px; }
  .vejl-nr { font-size: 16px; }
  .vejl-kap h2 { font-size: 25px; }
  .vejl-naeste { flex-direction: column; }
}

/* ═══ Arbejdsmiljø ════════════════════════════════════════════════════
   Risikoen først. Den afgør, hvad der haster, hvad der kan vente, og
   hvad der skal handles på i dag — resten er detaljer. */

.am-overblik { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 20px; }
.am-kort { background: var(--ark); border-radius: 14px; padding: 14px 15px;
  box-shadow: 0 1px 3px rgba(25,28,26,.05), 0 8px 20px -6px rgba(25,28,26,.08);
  border-left: 3px solid var(--streg-kraftig); }
.am-kort.stop { border-left-color: var(--roed); }
.am-kort.advarsel { border-left-color: var(--advarsel); }
.am-tal { display: block; font: 400 27px/1 var(--serif); color: var(--blaek); }
.am-navn { display: block; margin-top: 5px; font-size: 13px; color: var(--daempet); line-height: 1.35; }

.am-forhold { margin-bottom: 12px; cursor: pointer; }
.am-forhold:hover { box-shadow: 0 1px 3px rgba(25,28,26,.06), 0 10px 26px -8px rgba(25,28,26,.16); }
.am-forhold.lukket { opacity: .62; }
.am-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.am-top strong { font-size: 16px; }
.am-bund { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Farve alene må ikke bære betydningen — derfor står ordet også. */
.am-risiko { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
  font-size:13px; font-weight: 700; white-space: nowrap; }
.am-risiko.lav { background: var(--papir-dyb); color: var(--daempet); }
.am-risiko.moderat { background: var(--advarsel-bleg); color: var(--advarsel); }
.am-risiko.hoej { background: var(--tg-danger-soft); color: var(--roed); }
.am-risiko.kritisk { background: var(--roed); color: #FFFFFF; }

.am-frist { font-size: 13px; color: var(--daempet); }
.am-frist.over { color: var(--roed); font-weight: 600; }
.am-frist.snart { color: var(--advarsel); font-weight: 600; }

/* Skalaen. Fem knapper, ikke en rulleliste — man skal kunne se hele
   spændet på én gang for at vælge rigtigt. */
.am-skala { margin-bottom: 12px; }
.am-skala > span { display: block; margin-bottom: 7px; font-size: 13.5px;
  font-weight: 600; color: var(--blaek); }
.am-trin { display: flex; gap: 7px; }
.am-knap { flex: 1 1 0; padding: 11px 0; border-radius: 10px;
  border: 1.5px solid var(--kant, var(--tg-line)); background: #FFFFFF;
  font: 600 15px inherit; color: var(--daempet); cursor: pointer; }
.am-knap.valgt { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.am-resultat { display: flex; align-items: baseline; gap: 10px;
  padding: 12px 14px; border-radius: 11px; margin-bottom: 4px; }
.am-resultat strong { font-size: 16px; }
.am-resultat span { font-size: 13px; opacity: .75; }
.am-resultat.lav { background: var(--papir-dyb); color: var(--daempet); }
.am-resultat.moderat { background: var(--advarsel-bleg); color: var(--advarsel); }
.am-resultat.hoej { background: var(--tg-danger-soft); color: var(--roed); }
.am-resultat.kritisk { background: var(--roed); color: #FFFFFF; }

.knap.stille.fare-tekst { color: var(--roed); margin-right: auto; }

/* Et kort til én ting. .ark er en beholder til en liste af rækker;
   det her er ét selvstændigt kort med sit eget indhold. */
.blok {
  background: var(--ark); border-radius: 14px; padding: 15px 16px;
  box-shadow: 0 1px 3px rgba(25,28,26,.05), 0 8px 20px -6px rgba(25,28,26,.08);
}

/* Arbejdsmiljøets tre faner. */
.am-faner { display: flex; gap: 6px; margin-bottom: 20px;
  background: var(--papir-dyb); padding: 4px; border-radius: 12px; }
.am-faner button {
  flex: 1 1 0; padding: 10px 8px; border: 0; border-radius: 9px;
  background: transparent; color: var(--daempet);
  font: 600 13.5px inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.am-faner button.aktiv { background: var(--ark); color: var(--blaek);
  box-shadow: 0 1px 3px rgba(25,28,26,.08); }
.am-nye { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--roed); color: #FFFFFF; font-size:13px; font-weight: 700;
  display: grid; place-items: center; }

.am-kanal { margin-bottom: 18px; }
.am-kanal strong { display: block; margin-bottom: 4px; }
.am-kanal code { display: block; margin: 12px 0 10px; padding: 11px 13px;
  background: var(--papir-dyb); border-radius: 9px; font-size: 13px;
  word-break: break-all; color: var(--daempet); }

.am-forhold.ny { border-left: 3px solid var(--accent); }
.am-tekst { margin: 12px 0 8px; font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; }

/* Det første, man skal vide om en indberetning, er ikke hvad der står
   — det er, om man må svare. Derfor står afsenderen øverst. */
.am-afsender { margin: 0 0 9px; font-size: 13px; font-weight: 600;
  color: var(--daempet); }

/* Fire valg om den samme indberetning. De hører sammen to og to: to
   gør indberetningen til noget, to lukker den. Ordet "læg over" står
   forrest én gang, så knapperne kan nøjes med at være korte — og det
   er det samme ord, kvitteringen bagefter bruger. */
.am-handlinger { margin-top: 13px; padding-top: 11px;
  border-top: 1px solid var(--streg); }
.am-handlinger-navn { margin: 0 0 8px; font-size: 13px; font-weight: 600;
  color: var(--daempet); }
.am-valg { display: flex; gap: 7px; flex-wrap: wrap; }
.am-chip { border: 0; border-radius: 999px; padding: 8px 15px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: var(--accent-bleg); color: var(--accent);
  transition: background .14s ease; }
.am-chip:hover { background: var(--accent); color: #FFFFFF; }
.am-luk { display: flex; justify-content: space-between; margin-top: 7px; }
.am-stille { border: 0; background: none; padding: 7px 2px; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--daempet); cursor: pointer;
  border-radius: 7px; }
.am-stille:hover { color: var(--blaek); }
.am-stille.fare-tekst { color: var(--roed); }
.am-stille.fare-tekst:hover { color: var(--roed-dyb); }

/* ══════════════════════════════════════════════════════════════════════
   DE FIRE MODULER — september 2026
   Årshjul · Lokalaftaler · Rundering · Videncenter
   ══════════════════════════════════════════════════════════════════════ */

/* En knap, der ikke skal fylde en linje for sig. */
.knap.lille { padding: 7px 14px; font-size: 13.5px; }

/* En note, der skal læses, ikke bare stå der. */
.note.vigtigt {
  background: var(--advarsel-bleg); color: var(--advarsel);
  border-left: 3px solid var(--advarsel); font-weight: 600;
}

/* ── Årshjul ─────────────────────────────────────────────────────────
   Året som en skinne, ikke en liste. Alle tolv måneder står der, også
   de tomme: en tom måned er en oplysning — der er fri. Den måned, vi
   er i, er det ene sted, øjet skal kunne finde uden at læse. */

.aa-styr { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.aa-aar { display: flex; align-items: center; gap: 4px; }
.aa-aar strong { font-size: 27px; letter-spacing: -1px; min-width: 76px;
  text-align: center; font-variant-numeric: tabular-nums lining-nums; }
.aa-pil { border: 1px solid var(--streg); background: var(--ark);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--daempet);
  transition: border-color .14s ease, color .14s ease; }
.aa-pil:hover { border-color: var(--accent); color: var(--accent); }
.aa-pil svg { transform: rotate(180deg); }
.aa-pil.frem svg { transform: none; }
.aa-sum { margin: 0 0 20px; font-size: 13px; color: var(--svag);
  font-variant-numeric: tabular-nums; }

.aa-hjul { display: flex; flex-direction: column; }

/* Måneden: nummeret i grøften, navnet ved siden af, punkterne under.
   Stregen til venstre er året, der løber igennem. */
.aa-maaned { display: grid; grid-template-columns: 46px 1fr; gap: 0 14px;
  padding: 0 0 2px; position: relative; }
.aa-maaned::before {
  content: ''; position: absolute; left: 22px; top: 0; bottom: 0;
  width: 1px; background: var(--streg);
}
.aa-maaned:first-child::before { top: 15px; }
.aa-maaned:last-child::before { bottom: auto; height: 15px; }

.aa-navn { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px;
  padding: 16px 0 8px; }
.aa-nr { position: relative; z-index: 1; width: 44px; flex: 0 0 44px;
  text-align: center; font-size:13px; font-weight: 700; color: var(--svag);
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--papir); padding: 3px 0; }
.aa-navn h3 { margin: 0; font-size: 15.5px; font-weight: 700;
  letter-spacing: -.3px; color: var(--daempet); }
.aa-nu-maerke { font-size:13px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: #FFFFFF; background: var(--accent);
  padding: 2px 7px; border-radius: 999px; }

.aa-maaned.nu .aa-nr { color: var(--accent); }
.aa-maaned.nu .aa-navn h3 { color: var(--blaek); }

.aa-punkter { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 4px; }
.aa-maaned.fri .aa-punkter { padding-bottom: 0; }

.aa-punkt { background: var(--ark); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(25,28,26,.05), 0 6px 16px -8px rgba(25,28,26,.1);
  border-left: 3px solid var(--accent); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
.aa-punkt:hover, .aa-punkt:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(25,28,26,.06), 0 10px 22px -8px rgba(25,28,26,.14); }
/* Fagforbundets punkter er ikke dine. De er roligere og har en lås. */
.aa-punkt.forbundets { border-left-color: var(--streg-kraftig); cursor: default;
  background: var(--ark-daempet); }
.aa-punkt.forbundets:hover { transform: none; }
.aa-punkt-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; }
.aa-punkt-top strong { font-size: 14.5px; font-weight: 650; letter-spacing: -.2px; }
.aa-forbund { flex: 0 0 auto; color: var(--svag); margin-top: 1px; }
.aa-tekst { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--daempet); }
.aa-fakta { margin: 6px 0 0; font-size:13px; color: var(--svag);
  font-variant-numeric: tabular-nums; }
.aa-fri { margin: 0; padding: 0 0 6px; font-size: 13px; color: var(--svag); }

@media (max-width: 560px) {
  .aa-maaned { grid-template-columns: 38px 1fr; gap: 0 10px; }
  .aa-maaned::before { left: 18px; }
  .aa-nr { width: 36px; flex-basis: 36px; }
  .aa-aar strong { font-size: 24px; min-width: 66px; }
}

/* ── Lokalaftaler ────────────────────────────────────────────────────
   Det, en tillidsrepræsentant skal vide, er ikke hvad der står i
   aftalen — det er hvornår den kan opsiges. Derfor er fristen det,
   der er farvet. */

.lo-liste { display: flex; flex-direction: column; gap: 11px; }
.lo-aftale { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.lo-aftale:hover, .lo-aftale:focus-visible { transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(25,28,26,.06), 0 12px 26px -8px rgba(25,28,26,.14); }
.lo-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; }
.lo-top strong { font-size: 15.5px; font-weight: 650; letter-spacing: -.25px; }
.lo-top h2 { margin: 0; font-size: 21px; letter-spacing: -.6px; }
.lo-bund { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 11px; }

.lo-frist { display: inline-block; font-size: 13px; font-weight: 650;
  color: var(--daempet); font-variant-numeric: tabular-nums; }
.lo-frist.haster { color: var(--roed); }
.lo-frist.ukendt { color: var(--svag); font-weight: 500; }
.lo-hoved .lo-frist { margin-top: 12px; }
.lo-ver { font-size:13px; color: var(--svag);
  font-variant-numeric: tabular-nums; }

.lo-hoved { margin-bottom: 14px; }
.lo-forslag { margin: 10px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--daempet); }
.lo-tekst { margin-bottom: 14px; }
.lo-tekst p { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }

/* Stregerne tegnes PÅ cellerne, ikke som mellemrum, der lader baggrunden
   skinne igennem. Med mellemrum stod der et gråt hul til højre, hver gang
   sidste række ikke gik op — og det så ud som en celle, der var gået i
   stykker, ikke som en tom plads. */
.lo-fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0 0 18px; background: var(--ark); border: 1px solid var(--streg);
  border-radius: 12px; overflow: hidden; }
.lo-fakta > div { padding: 11px 14px;
  box-shadow: 1px 0 0 var(--streg), 0 1px 0 var(--streg); }
.lo-fakta dt { font-size:13px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--svag); }
.lo-fakta dd { margin: 3px 0 0; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.lo-fakta.vis { margin: 0; }

.lo-noter { margin-bottom: 18px; }
.lo-noter h3 { margin: 0 0 6px; font-size: 14px; }
.lo-noter p { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap;
  color: var(--daempet); }

.lo-knapper { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 30px; }

.lo-historik h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.3px; }
.lo-historik-note { margin: 0 0 12px; font-size: 13px; line-height: 1.5;
  color: var(--svag); max-width: 60ch; }
.lo-hver { width: 100%; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px; text-align: left;
  background: var(--ark); border: 0; border-radius: 11px; padding: 12px 14px;
  margin-bottom: 7px; cursor: pointer; font: inherit;
  box-shadow: 0 1px 2px rgba(25,28,26,.05); transition: box-shadow .12s ease; }
.lo-hver:hover { box-shadow: 0 2px 6px rgba(25,28,26,.1); }
.lo-hver-nr { font-size:13px; font-weight: 750; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.lo-hver-hvad { font-size: 14px; color: var(--blaek); }
.lo-hver-naar { font-size:13px; color: var(--svag); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .lo-hver { grid-template-columns: 1fr auto; }
  .lo-hver-hvad { grid-column: 1 / -1; }
}

/* ── Rundering ───────────────────────────────────────────────────────
   En gåtur, ikke et skema. Fire felter, der kan rammes med en tommel
   uden at se ned. Intet punkt starter som OK. */

.ru-kort, .ru-hoved { cursor: pointer; }
.ru-hoved { cursor: default; margin-bottom: 18px; }
.ru-kort { transition: transform .12s ease, box-shadow .12s ease; margin-bottom: 11px; }
.ru-kort:hover, .ru-kort:focus-visible { transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(25,28,26,.06), 0 12px 26px -8px rgba(25,28,26,.14); }
.ru-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; }
.ru-top strong { font-size: 15.5px; font-weight: 650; letter-spacing: -.25px; }
.ru-top h2 { margin: 0; font-size: 21px; letter-spacing: -.6px; }

.ru-spor { height: 5px; border-radius: 999px; background: var(--papir-dyb);
  margin: 13px 0 8px; overflow: hidden; }
.ru-spor span { display: block; height: 100%; border-radius: 999px;
  background: var(--amr); transition: width .3s ease; }
.ru-tal { margin: 0; font-size:13px; color: var(--svag);
  font-variant-numeric: tabular-nums; }

.ru-punkter { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.ru-punkt { background: var(--ark); border-radius: 13px; padding: 14px 15px;
  box-shadow: 0 1px 3px rgba(25,28,26,.05), 0 8px 20px -8px rgba(25,28,26,.09);
  border-left: 3px solid var(--streg); }
.ru-punkt.ok { border-left-color: var(--amr); }
.ru-punkt.observation { border-left-color: var(--advarsel); }
.ru-punkt.problem { border-left-color: var(--roed); }
.ru-punkt.ikke_relevant { border-left-color: var(--streg-kraftig); opacity: .72; }

.ru-punkt-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; }
.ru-punkt-top strong { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.ru-kat { display: inline-block; margin-left: 8px; font-size:13px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--svag); }
.ru-hjaelp { margin: 5px 0 0; font-size: 13px; line-height: 1.45; color: var(--daempet); }

.ru-valg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 13px; }
.ru-svar { border: 1px solid var(--streg); background: var(--ark);
  border-radius: 10px; padding: 12px 6px; font: inherit; font-size:13px;
  font-weight: 650; color: var(--daempet); cursor: pointer; line-height: 1.2;
  transition: background .13s ease, border-color .13s ease, color .13s ease; }
.ru-svar:hover { border-color: var(--streg-kraftig); color: var(--blaek); }
.ru-svar.valgt { border-color: transparent; color: #FFFFFF; background: var(--grafit); }
.ru-punkt.ok .ru-svar.valgt { background: var(--amr); }
.ru-punkt.observation .ru-svar.valgt { background: var(--advarsel); }
.ru-punkt.problem .ru-svar.valgt { background: var(--roed); }
@media (max-width: 520px) {
  .ru-valg { grid-template-columns: repeat(2, 1fr); }
  .ru-svar { padding: 14px 6px; }
}

.ru-note { margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--ark-daempet); }
.ru-note p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.ru-note p + p { margin-top: 6px; }
.ru-hvor { font-weight: 700; color: var(--blaek); }
.ru-forslag { color: var(--daempet); }
.ru-overfoert { margin: 11px 0 0; font-size:13px; font-weight: 650;
  color: var(--amr); }
.ru-overfoer { margin-top: 11px; }

.ru-knapper { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 30px; }
.ru-knapper .knap[disabled] { opacity: .5; cursor: not-allowed; }

.ru-historik h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: -.3px; }
.ru-hver { display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; background: var(--ark); border-radius: 11px; margin-bottom: 7px;
  font-size: 13.5px; box-shadow: 0 1px 2px rgba(25,28,26,.05);
  font-variant-numeric: tabular-nums; }
.ru-hver-tal { color: var(--daempet); }

/* ── Videncenter ─────────────────────────────────────────────────────
   Et opslagsværk. Bruges når nogen har et spørgsmål lige nu, så
   søgefeltet er det første, og listen er tæt. Typen står i en fast
   grøft, så titlerne står lige under hinanden. */

.vi-soeg { margin-bottom: 12px; }
.vi-soeg input { width: 100%; border: 1px solid var(--streg);
  background: var(--ark); border-radius: 12px; padding: 14px 16px;
  font: inherit; font-size: 15.5px; color: var(--blaek);
  box-shadow: 0 1px 2px rgba(25,28,26,.04); }
.vi-soeg input:focus { outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: transparent; }
.vi-soeg input::placeholder { color: var(--svag); }

.vi-filtre { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.vi-filter { border: 1px solid var(--streg); background: var(--ark);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--daempet); cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease; }
.vi-filter:hover { border-color: var(--streg-kraftig); color: var(--blaek); }
.vi-filter.aktiv { background: var(--grafit); border-color: transparent; color: #FFFFFF; }

.vi-liste { display: flex; flex-direction: column; gap: 6px; }
.vi-emne { width: 100%; display: grid; grid-template-columns: 96px 1fr auto;
  align-items: center; gap: 14px; text-align: left; font: inherit;
  background: var(--ark); border: 0; border-radius: 11px; padding: 13px 15px;
  cursor: pointer; box-shadow: 0 1px 2px rgba(25,28,26,.05);
  transition: box-shadow .12s ease, transform .12s ease; }
.vi-emne:hover { transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(25,28,26,.1); }
.vi-type { font-size:13px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent); }
.vi-type.stor { display: block; margin-bottom: 7px; font-size:13px; }
.vi-midt { display: block; min-width: 0; }
.vi-midt strong { display: block; font-size: 15px; font-weight: 650;
  letter-spacing: -.2px; }
.vi-midt em { display: block; margin-top: 3px; font-size: 13px; font-style: normal;
  color: var(--daempet); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.vi-pil { color: var(--svag); display: flex; }
@media (max-width: 560px) {
  .vi-emne { grid-template-columns: 1fr auto; }
  .vi-type { grid-column: 1 / -1; }
}

.vi-side { margin-bottom: 20px; }
.vi-side h2 { margin: 0; font-size: 25px; letter-spacing: -.8px; line-height: 1.15; }
.vi-ingress { margin: 9px 0 0; font-size: 16px; line-height: 1.55;
  color: var(--daempet); max-width: 62ch; }
.vi-indhold { margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--streg); }
.vi-indhold p { margin: 0 0 13px; font-size: 15.5px; line-height: 1.68;
  max-width: 68ch; }
.vi-indhold p:last-child { margin-bottom: 0; }
.vi-kilde { margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--streg);
  font-size:13px; color: var(--svag); font-variant-numeric: tabular-nums; }

.vi-mere { margin-bottom: 22px; }
.vi-mere h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: -.3px; }
.vi-styr { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 30px; }

/* ── Forbundets skabeloner ───────────────────────────────────────────
   Uden de her sider er Rundering og Årshjul døde: en rundering kan
   ikke starte uden en publiceret skabelon, og et årshjul, ingen ruller
   ud, er et tomt år. */

.sk-intro { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6;
  color: var(--daempet); max-width: 66ch; }
.sk-kort { margin-bottom: 13px; }
.sk-kort.arkiveret { opacity: .6; }
.sk-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; }
.sk-top strong { font-size: 15.5px; font-weight: 650; letter-spacing: -.25px; }

.sk-punkter { list-style: none; margin: 13px 0 0; padding: 0;
  border-top: 1px solid var(--streg); }
.sk-punkter li { display: grid; grid-template-columns: 46px 1fr auto;
  align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--streg); }
.sk-punkter li:last-child { border-bottom: 0; }
.sk-maaned { font-size:13px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--svag); }
/* Månedsnavne kan skæres til tre tegn — "jan", "feb" læses stadig.
   Kategorier kan ikke: "orden" blev til "ORDE" og "flugtveje" til
   "FLUG". Derfor sin egen, bredere grøft og ingen afkortning. */
.sk-punkter.kategorier li { grid-template-columns: 104px 1fr auto; }
.sk-kat { font-size:13px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--svag); overflow: hidden;
  text-overflow: ellipsis; }
@media (max-width: 560px) {
  .sk-punkter.kategorier li { grid-template-columns: 1fr auto; }
  .sk-punkter.kategorier .sk-kat { grid-column: 1 / -1; }
}
.sk-tekst { font-size: 14px; }
.sk-fjern { border: 0; background: none; padding: 5px; cursor: pointer;
  color: var(--svag); border-radius: 7px; display: flex;
  transition: color .13s ease, background .13s ease; }
.sk-fjern:hover { color: var(--roed); background: var(--roed-bleg); }
.sk-tom { margin: 12px 0 0; font-size: 13px; color: var(--svag); }
.sk-note { margin: 11px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--daempet); }
.sk-knapper { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--streg); }

/* ══════════════════════════════════════════════════════════════════════
   FUNKTIONSSTYRING OG NYHEDSBREVE — oktober 2026
   ══════════════════════════════════════════════════════════════════════ */

/* BETA i menuen. Den skjuler ingenting — den siger, hvad man kan
   forvente. Derfor dæmpet og lille, ikke en advarsel. */
.nav-beta {
  margin-left: auto; font-style: normal; font-size:13px; font-weight: 800;
  letter-spacing: .7px; color: var(--accent); background: var(--accent-bleg);
  padding: 2px 6px; border-radius: 999px; flex: 0 0 auto;
}
/* Ulæste nyhedsbreve. Rød, fordi det er det ene sted i menuen, hvor
   der er noget, der venter på én. */
.nav-badge {
  margin-left: auto; font-style: normal; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--roed); color: #FFFFFF;
  font-size:13px; font-weight: 700; display: grid; place-items: center;
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
}

/* ── Funktioner ───────────────────────────────────────────────────── */

.fu-intro { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6;
  color: var(--daempet); max-width: 66ch; }
.fu-sum { margin: -8px 0 18px; font-size: 13px; color: var(--svag);
  font-variant-numeric: tabular-nums; }
.fu-note { margin: 22px 0 0; font-size: 13px; line-height: 1.55;
  color: var(--svag); max-width: 62ch; }

.fu-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 11px; }
.fu-kort { background: var(--ark); border-radius: 13px; padding: 15px 16px;
  box-shadow: 0 1px 3px rgba(25,28,26,.05), 0 8px 20px -8px rgba(25,28,26,.09);
  display: flex; flex-direction: column; }
/* Det slukkede gemmes ikke væk nederst — det står, hvor det hører
   hjemme, med farven trukket ud. Man skal kunne se med ét blik, hvad
   der mangler, ikke lede efter det. */
.fu-kort.slukket { background: var(--papir-dyb); box-shadow: none; }
.fu-kort.slukket .fu-hvad, .fu-kort.slukket .fu-hvem { color: var(--svag); }

.fu-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; }
.fu-navn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-width: 0; }
.fu-navn strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.25px; }
.fu-beta { font-size:13px; font-weight: 800; letter-spacing: .7px;
  color: var(--accent); background: var(--accent-bleg);
  padding: 2px 7px; border-radius: 999px; }
.fu-slukket { font-size:13px; font-weight: 800; letter-spacing: .7px;
  color: var(--svag); background: var(--ark); padding: 2px 7px;
  border-radius: 999px; }

/* Kontakten. Bygget af et afkrydsningsfelt, så tastatur og
   skærmlæser får den gratis. */
.fu-kontakt { position: relative; flex: 0 0 auto; width: 44px; height: 26px;
  cursor: pointer; }
.fu-kontakt input { position: absolute; inset: 0; opacity: 0; margin: 0;
  cursor: pointer; }
.fu-kontakt::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: var(--streg-kraftig); transition: background .16s ease;
}
.fu-kontakt::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #FFFFFF; transition: transform .16s ease;
  box-shadow: 0 1px 2px rgba(25,28,26,.2);
}
.fu-kontakt:has(input:checked)::before { background: var(--amr); }
.fu-kontakt:has(input:checked)::after { transform: translateX(18px); }
.fu-kontakt:has(input:focus-visible)::before { outline: 2px solid var(--accent);
  outline-offset: 2px; }

.fu-hvad { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5;
  color: var(--daempet); flex: 1; }
.fu-bund { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 13px; padding-top: 11px;
  border-top: 1px solid var(--streg); }
.fu-hvem { font-size:13px; color: var(--svag); }
.fu-beta-knap { border: 1px solid var(--streg); background: var(--ark);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size:13px;
  font-weight: 600; color: var(--daempet); cursor: pointer; white-space: nowrap;
  transition: border-color .13s ease, color .13s ease; }
.fu-beta-knap:hover { border-color: var(--accent); color: var(--accent); }
.fu-beta-knap.aktiv { background: var(--accent-bleg); border-color: transparent;
  color: var(--accent); }

/* ── Nyhedsbreve, læserens ────────────────────────────────────────── */

.ny-liste { display: flex; flex-direction: column; gap: 7px; }

/* Prikken er væk. Et ulæst brev er fyldt med sit eget blæk, og det
   læses på afstand uden at skulle forklares. */

.ny-fra { display: block; margin-top: 6px; font-size:13px; color: var(--svag);
  font-variant-numeric: tabular-nums; }

/* ── Nyhedsbreve, afsenderens ─────────────────────────────────────── */

.ny-admin { margin-bottom: 11px; }
.ny-admin.kladde { border-left: 3px solid var(--advarsel); }
.ny-admin-top { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; }
.ny-admin-top strong { font-size: 15.5px; font-weight: 650; letter-spacing: -.25px; }
.ny-admin-resume { margin: 9px 0 0; font-size: 13.5px; line-height: 1.5;
  color: var(--daempet); }
.ny-admin-bund { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--streg); }
.ny-laest { font-size: 13px; color: var(--amr); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.ny-arkiv { margin-left: auto; color: var(--svag); }
.ny-arkiv:hover { color: var(--roed); }

/* Menuens gruppeoverskrifter.
   Sytten punkter i én stribe scannes, ikke læses. Overskriften er
   lille og dæmpet — den skal dele, ikke råbe. */
.nav-gruppe {
  margin: 18px 0 5px; padding: 0 12px;
  font-size:13px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--svag);
}
.nav-inder > .nav-gruppe:first-of-type { margin-top: 14px; }

/* Fælles arbejdsflade: navigation, lister, formularer og overblik. */
:root {
  --papir: var(--tg-info-soft);
  --papir-dyb: var(--tg-info-soft);
  --ark-daempet: #FFFFFF;
  --blaek: var(--tg-navy);
  --grafit: var(--tg-navy);
  --grafit-dyb: var(--tg-navy);
  --daempet: var(--tg-muted);
  --svag: var(--tg-muted);
  --streg: var(--tg-info-soft);
  --streg-kraftig: var(--tg-line-strong);
  --tr: var(--tg-primary);
  --tr-dyb: var(--tg-primary);
  --amr: var(--tg-primary);
  --amr-dyb: var(--tg-navy);
  --admin: var(--tg-muted);
  --blaa-bleg: var(--tg-info-soft);
  --groen-bleg: var(--tg-soft);
  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;
  --skinne: 72px;
  --gutter: 28px;
  --skygge-1: 0 1px 2px rgba(32,42,53,.04);
  --skygge-2: 0 2px 8px rgba(32,42,53,.04);
  --skygge-3: 0 16px 48px rgba(32,42,53,.16);
}
:root[data-room="ADMIN"] {
  --accent-dyb: var(--tg-primary);
  --accent-bleg: var(--tg-info-soft);
}
[hidden] { display: none !important; }
.skal, .skal *, .dok, .dok * { letter-spacing: 0 !important; }
.skinne-inder { max-width: none; padding: 0 24px; gap: 18px; }
.skinne-maerke img { width: 32px; height: 32px; }
.skinne-navn { font-size: 18px; font-weight: 750; }
.skinne-forbund { max-width: 290px; font-size: 13px; }
.menu-knap {
  flex: 0 0 36px; width: 36px; height: 36px;
  border: 1px solid var(--streg); background: var(--ark);
}
.skinne-mig { max-width: 245px; padding: 5px 8px; }
.skinne-mig-tekst strong { font-size: 13px; }
.skinne-mig-tekst em { font-size:13px; }
.rum { border: 1px solid var(--streg); border-radius: 8px; padding: 3px; background: var(--ark-daempet); }
.rum button { min-height: 32px; padding: 5px 12px; border-radius: 5px; font-size:13px; }
.ramme { max-width: none; }
:root[data-menu="skjult"] .ramme,
:root[data-menu="skjult"] .skinne-inder { max-width: none; }
.nav {
  width: 250px; flex: 0 0 250px; padding: 22px 14px 30px;
  background: var(--ark); border-right: 1px solid var(--streg);
}
.nav-rum { display: flex; align-items: center; gap: 11px; min-height: 48px; margin: 0 6px 20px; }
.nav-rum-ikon {
  display: grid; place-items: center; width: 38px; height: 38px;
  flex: 0 0 38px; border: 1px solid var(--streg); border-radius: 8px;
  color: var(--accent); background: var(--ark-daempet);
}
.nav-rum > div { min-width: 0; }
.nav-rum strong { display: block; font-size:13px; line-height: 1.45; font-weight: 700; }
.nav-rum > div > span { display: block; font-size:13px; line-height: 1.5; color: var(--daempet); overflow-wrap: anywhere; margin-top: 3px; }
.nav-soeg {
  display: flex; align-items: center; gap: 8px; margin: 0 4px 18px;
  padding: 0 10px; height: 36px; background: var(--ark-daempet);
  border: 1px solid var(--streg); border-radius: 6px; color: var(--svag);
}
.nav-soeg svg { flex: 0 0 17px; }
.nav-soeg input { width: 100%; min-width: 0; padding: 6px 0; border: 0; outline: 0; background: none; font-size:13px; }
.nav-soeg:focus-within { border-color: var(--accent); outline: 2px solid var(--accent-bleg); }
.nav-inder { gap: 0; padding: 0; }
.nav-afsnit { margin: 0 0 12px; }
.nav-gruppe { margin: 0 0 7px; padding: 0 11px; font-size:13px; font-weight: 650; color: var(--svag); }
.nav a {
  min-height: 38px; padding: 8px 11px; margin-bottom: 2px; gap: 10px;
  font-size:13px; font-weight: 500; border-radius: 6px;
}
.nav a span { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.nav a svg { width: 17px; height: 17px; flex-basis: 17px; }
.nav a.aktiv { color: var(--accent-dyb); font-weight: 700; }
.nav-maerke { left: 0; right: 0; border-radius: 6px; border-left: 3px solid var(--accent); }
.nav-beta { margin-left: auto; font-size:13px; padding: 2px 4px; }
.nav-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; font-size:13px; }
.nav-soeg-tom { margin: 15px 11px; font-size:13px; color: var(--daempet); }
.menu-baggrund { display: none; }
.indhold { background: var(--papir); scrollbar-gutter: stable; }
.sidetop, .sideindhold {
  width: min(100%, 1376px); margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.sidetop { padding-top: 28px; margin-bottom: 24px; align-items: center; }
.sidetop-sti { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size:13px; color: var(--daempet); }
.sidetop-sti > span { color: var(--streg-kraftig); }
.sidetop h1 { font-size: 27px; line-height: 1.25; font-weight: 700; }
.sidetop-fakta { margin-top: 7px; font-size: 13px; }
.sidetop-handling { flex: 0 0 auto; }
.sideindhold { padding-bottom: 36px; }
.gitter { gap: 14px; }
.ark { border: 1px solid var(--streg); box-shadow: var(--skygge-1); padding: 4px 0; }
.ark .tom { background: none; box-shadow: none; border-radius: 0; }
.raekke { min-height: 70px; padding: 15px 18px; gap: 12px; }
.raekke .maerke { width: 36px; height: 36px; flex-basis: 36px; border-radius: 7px; }
.raekke .titel { font-size: 14px; line-height: 1.45; }
.raekke .linje { font-size:13px; line-height: 1.55; }
.raekke + .raekke::before { left: 66px; right: 18px; }
.raekke > svg { flex: 0 0 auto; color: var(--svag); }
.pille { padding: 4px 8px; font-size:13px; border-radius: 5px; }
.knap { min-height: 40px; padding: 0 16px; font-size: 13px; box-shadow: none; gap: 8px; }
.knap.stille { border-width: 1px; }
.knap.bred { min-width: 0; }
.felt > span, .felt-visning-navn { font-size:13px; }
.felt input, .felt select, .felt textarea { min-height: 42px; padding: 10px 12px; border-width: 1px; font-size: 14px; }
.felt textarea { min-height: 128px; }
.felt-afsnit strong { font: 650 17px/1.4 var(--sans); }
.ark-boks { border: 1px solid var(--streg); }
.ark-top { background: var(--ark-daempet); }
.ark-top strong { font-size: 19px; line-height: 1.35; }
.ark-top em { font-size:13px; }
.ark-bund { border-top: 1px solid var(--streg); background: var(--ark-daempet); }
.tom { padding: 48px 24px; border: 1px solid var(--streg); box-shadow: none; }
.tom .ikon { width: 48px; height: 48px; border-radius: 10px; margin-bottom: 16px; }
.tom h2 { font-size: 19px; }
.tom p { font-size: 14px; }
.note { font-size: 13px; border-radius: 6px; }
.p-afsnit { font-family: var(--sans); font-size: 17px; font-weight: 650; }
.noegletal {
  display: grid; grid-template-columns: 1fr 38px;
  grid-template-areas: "navn ikon" "tal ikon" "under pil";
  gap: 5px 12px; min-height: 144px; padding: 20px;
  border: 1px solid var(--streg); background: var(--ark);
  box-shadow: var(--skygge-1); border-radius: 8px;
  color: var(--blaek); position: relative; text-decoration: none;
}
a.noegletal:hover { border-color: var(--streg-kraftig); box-shadow: var(--skygge-2); transform: none; }
.noegletal-ikon { grid-area: ikon; width: 38px; height: 38px; border-radius: 8px; background: var(--accent-bleg); color: var(--accent); margin: 0; align-self: start; }
.noegletal-navn { grid-area: navn; margin: 0; font-size:13px; font-weight: 550; color: var(--daempet); }
.noegletal-tal { grid-area: tal; font: 650 36px/1.15 var(--sans); font-variant-numeric: tabular-nums; margin: 0; }
.noegletal-under { grid-area: under; margin: 6px 0 0; font-size:13px; line-height: 1.5; }
.noegletal-pil { grid-area: pil; display: flex; justify-content: flex-end; color: var(--svag); align-self: end; }
.overblik-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.overblik-intro h2 { margin: 0; font-size: 16px; font-weight: 600; }
.overblik-intro p { margin: 5px 0 0; font-size: 13px; color: var(--daempet); }
.overblik-dato { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; font-size:13px; color: var(--daempet); }
.overblik-kolonner { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr); gap: 32px; margin-top: 30px; }
.overblik-kolonner > *, .overblik-aside, .overblik-afsnit { min-width: 0; }
.overblik-afsnit { margin: 0 0 28px; }
.overblik-afsnit-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.overblik-afsnit-top h2 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 650; }
.overblik-afsnit-top > a { display: inline-flex; align-items: center; gap: 3px; font-size:13px; color: var(--daempet); text-decoration: none; white-space: nowrap; }
.overblik-afsnit-top > a:hover { color: var(--accent); }
.overblik-liste { border-top: 1px solid var(--streg); border-bottom: 1px solid var(--streg); }
.overblik-liste .raekke { background: transparent; border-left: 0; padding: 17px 0; color: inherit; text-decoration: none; }
.overblik-liste .raekke + .raekke::before { left: 48px; right: 0; }
.overblik-liste .titel { white-space: normal; overflow-wrap: anywhere; }
.overblik-liste .raekke:hover { background: var(--papir-dyb); }
.overblik-ro { display: flex; align-items: center; gap: 13px; padding: 22px 0; }
.overblik-ro > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 8px; color: var(--amr); background: var(--groen-bleg); }
.overblik-ro strong { display: block; font-size: 13px; font-weight: 600; }
.overblik-ro p, .overblik-tom { font-size:13px; line-height: 1.6; color: var(--daempet); }
.overblik-ro p { margin: 3px 0 0; }
.overblik-tom { margin: 0; padding: 23px 0; }
.aftale-dato { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 44px; height: 50px; border: 1px solid var(--streg); border-radius: 6px; background: var(--ark); }
.aftale-dato strong { font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.aftale-dato > span { font-size:13px; color: var(--daempet); text-transform: uppercase; margin-top: 2px; }
.overblik-genveje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; border-top: 1px solid var(--streg); }
.overblik-genveje > a, .overblik-dokumenter > a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 15px 0; border-bottom: 1px solid var(--streg); color: var(--blaek); text-decoration: none; font-size:13px; }
.overblik-genveje > a > span:not(.genvej-ikon) { min-width: 0; overflow-wrap: anywhere; }
.genvej-ikon { display: grid; place-items: center; flex: 0 0 31px; height: 31px; color: var(--daempet); }
.overblik-genveje > a > svg, .overblik-dokumenter > a > svg { flex: 0 0 15px; margin-left: auto; color: var(--svag); }
.overblik-genveje > a:hover, .overblik-dokumenter > a:hover { color: var(--accent); }
.overblik-dokumenter { border-top: 1px solid var(--streg); }
.overblik-dokumenter > a > div { min-width: 0; }
.overblik-dokumenter strong { display: block; font-size:13px; line-height: 1.5; font-weight: 550; overflow-wrap: anywhere; }
.overblik-dokumenter > a > div > span { display: block; margin-top: 3px; font-size:13px; color: var(--daempet); overflow-wrap: anywhere; }
.laas-baand { margin: 20px var(--gutter) 0; padding: 15px 18px; border: 1px solid color-mix(in srgb, var(--forbud) 16%, transparent); border-radius: 8px; }
.laas-baand strong { font-size: 13px; }
.laas-baand p { font-size:13px; }
.laas-baand.utilgaengelig { color: var(--blaek); background: var(--ark); border-color: var(--streg); }
.laas-baand.utilgaengelig .laas-ikon { color: var(--daempet); }
.laas-baand.utilgaengelig p { color: var(--daempet); }
.laas-baand.proeve, .laas-baand.varsel { border-color: transparent; }
.bund { margin-top: 18px; background: var(--ark-daempet); }
.bund-inder { padding-top: 22px; padding-bottom: 24px; }
.bund-links, .bund-drift { font-size:13px; }
.ny-brev, .ny-admin { border: 1px solid var(--streg); border-radius: 8px; box-shadow: var(--skygge-1); }
.fu-kort, .lo-kort, .am-kort { border-radius: 8px; }
.dok h1 { font-family: var(--sans); font-weight: 700; }
.dok h2 { font-family: var(--sans); font-size: 22px; font-weight: 650; }
.doer .rolle-kort { border-radius: 8px; }

@media (max-width: 1190px) {
  .overblik-kolonner { grid-template-columns: minmax(0, 1.4fr) minmax(230px, 1fr); gap: 24px; }
  .overblik-genveje { grid-template-columns: 1fr; }
  .overblik-dato { display: none; }
  .skinne-mig-tekst em { display: none; }
  .skinne-forbund { max-width: 180px; }
}
@media (max-width: 1050px) and (min-width: 901px) {
  .nav { width: 220px; flex-basis: 220px; }
  .skinne-mig-tekst { display: none; }
  .overblik-kolonner { grid-template-columns: 1fr; }
  .overblik-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 900px) {
  .skinne-inder { padding: 0 18px; gap: 12px; }
  .ramme-krop { flex-direction: row; }
  .nav, :root[data-menu="skjult"] .nav {
    display: block; position: fixed; top: var(--skinne); bottom: 0; left: 0;
    width: min(300px, calc(100vw - 54px)); padding: 22px 16px 30px;
    overflow-y: auto; z-index: 35; visibility: hidden; transform: translateX(-100%);
    transition: transform .18s ease, visibility .18s ease; border-bottom: 0;
  }
  :root[data-mobil-menu="aaben"] .nav { visibility: visible; transform: translateX(0); }
  .nav-inder { display: flex; flex-direction: column; padding: 0; overflow: visible; position: relative; }
  .nav-gruppe { display: block; }
  .nav a { white-space: normal; min-height: 43px; font-size: 14px; padding: 10px 11px; }
  .nav a span { display: block; }
  .nav-soeg { height: 40px; }
  .nav-soeg input { font-size: 14px; }
  .nav-rum strong { font-size: 13px; }
  .nav-rum > div > span { font-size:13px; }
  :root[data-mobil-menu="aaben"] .menu-baggrund {
    display: block; position: fixed; inset: var(--skinne) 0 0; z-index: 34;
    border: 0; padding: 0; background: rgba(32,42,53,.28); cursor: pointer;
  }
  .overblik-kolonner { grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr); }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; --skinne: 64px; }
  .skinne-mig-tekst { display: none; }
  .skinne-mig { padding: 0; flex: 0 0 auto; }
  .skinne-inder { gap: 10px; }
  .skinne-fyld { min-width: 0; }
  .sidetop { padding-top: 22px; gap: 16px; align-items: stretch; }
  .sidetop h1 { font-size: 24px; }
  .sidetop-handling:empty { display: none; }
  .overblik-kolonner { grid-template-columns: 1fr; gap: 0; }
  .overblik-genveje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gitter.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gitter.fire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noegletal { min-height: 141px; padding: 15px; grid-template-columns: 1fr; grid-template-areas: "navn" "tal" "under"; grid-template-rows: minmax(34px, auto) 35px 1fr; gap: 5px; }
  .noegletal-ikon, .noegletal-pil { display: none; }
  .noegletal-tal { font-size: 30px; }
  .noegletal-navn { font-size:13px; }
  .noegletal-under { font-size:13px; }
  .overblik-intro { margin-bottom: 19px; }
}
@media (max-width: 359px) {
  .gitter.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gitter.tre > .noegletal:last-child { grid-column: 1 / -1; }
  .noegletal { min-height: 119px; grid-template-rows: minmax(24px, auto) 35px 1fr; }
}
@media (max-width: 460px) {
  :root { --gutter: 16px; }
  .skinne-inder { padding: 0 12px; gap: 8px; }
  .skinne-navn { display: none; }
  .skinne-maerke img { width: 27px; height: 27px; }
  .rum button { padding: 5px 9px; font-size:13px; }
  .skinne-ud { width: 32px; flex-basis: 32px; }
  .skinne-mig .ansigt { width: 28px; height: 28px; flex-basis: 28px; }
  .noegletal { padding: 12px 10px; }
  .overblik-afsnit-top h2 { font-size: 14px; }
  .overblik-liste .raekke { flex-wrap: wrap; }
  .overblik-liste .raekke .krop { flex: 1 1 55%; }
  .overblik-liste .pille { margin-left: 48px; }
}

/* Kalenderens arbejdsflade, med samme aftaler i uge og måned. */
.kal-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 32px; align-items: start; }
.kal-flade, .kal-agenda { min-width: 0; }
.kal-flade { background: var(--ark); border: 1px solid var(--streg); border-radius: 8px; padding: 20px; }
.kal-vaerktoej { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.kal-visning { display: flex; padding: 3px; background: var(--ark-daempet); border: 1px solid var(--streg); border-radius: 6px; }
.kal-visning button { min-width: 64px; height: 32px; border: 0; border-radius: 4px; font-size:13px; color: var(--daempet); background: transparent; cursor: pointer; }
.kal-visning button[aria-pressed="true"] { color: var(--accent); background: var(--ark); box-shadow: var(--skygge-1); font-weight: 650; }
.kal-layout .kal { padding: 0; margin: 0; background: none; border-radius: 0; box-shadow: none; }
.kal-layout .kal-top { margin-bottom: 18px; }
.kal-layout .kal-maaned { font: 650 18px/1.4 var(--sans); text-transform: capitalize; min-width: 0; padding: 6px; }
.kal-layout .kal-pil { background: var(--ark-daempet); border: 1px solid var(--streg); border-radius: 6px; }
.kal-layout .kal-ugedage, .kal-layout .kal-gitter { gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-layout .kal-ugedage span { font-size:13px; }
.kal-layout .kal-dag, .kal-layout .kal-tom { aspect-ratio: auto; height: 64px; min-width: 0; border-radius: 6px; }
.kal-layout .kal-dag { font-size: 14px; gap: 7px; }
.kal-layout .kal-dag:nth-child(7n), .kal-layout .kal-dag:nth-child(7n - 1) { color: var(--daempet); }
.kal-layout .kal-dag.valgt { color: #FFFFFF; }
.kal-layout .kal-prikker { height: 5px; flex: 0 0 5px; }
.kal-signatur { display: flex; justify-content: space-between; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--streg); font-size:13px; color: var(--daempet); }
.kal-signatur > span { display: flex; gap: 7px; align-items: center; }
.kal-signatur i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.kal-layout .kal-dagtitel { margin: 0 0 18px; justify-content: space-between; }
.kal-dagtitel small { display: block; font: 500 12px/1.5 var(--sans); color: var(--daempet); text-transform: capitalize; }
.kal-dagtitel h2 { margin: 5px 0 0; font: 650 19px/1.4 var(--sans); }
.kal-aftaler { border-top: 1px solid var(--streg); }
.kal-aftale { display: flex; align-items: flex-start; gap: 15px; width: 100%; text-align: left; padding: 18px 0; background: none; color: var(--blaek); border: 0; border-bottom: 1px solid var(--streg); cursor: pointer; }
.kal-aftale:hover { background: var(--papir-dyb); }
.kal-tid { flex: 0 0 68px; color: var(--accent); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kal-tid small { display: block; font-size:13px; font-weight: 400; margin-top: 5px; color: var(--daempet); }
.kal-aftale-tekst { min-width: 0; flex: 1; border-left: 3px solid var(--accent); padding-left: 13px; }
.kal-aftale-tekst strong { display: block; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.kal-aftale-tekst > span { display: block; margin-top: 5px; font-size:13px; color: var(--daempet); line-height: 1.5; overflow-wrap: anywhere; }
.kal-aftale > svg { color: var(--svag); flex: 0 0 16px; }
.kal-layout .kal-ingen { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 30px 15px; font-size:13px; color: var(--daempet); }
.kal-ingen strong { font-size: 14px; color: var(--blaek); font-weight: 600; }
.kal-kommende { margin-top: 32px; }
.kal-kommende h2 { font-size: 15px; margin: 0 0 14px; font-weight: 650; }
@media (max-width: 1100px) {
  .kal-layout { grid-template-columns: 1fr; gap: 28px; }
  .kal-agenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .kal-kommende { margin-top: 0; }
}
@media (max-width: 600px) {
  .kal-flade { padding: 16px 12px; }
  .kal-layout .kal-dag, .kal-layout .kal-tom { height: 42px; }
  .kal-layout .kal-ugedage, .kal-layout .kal-gitter { gap: 2px; }
  .kal-agenda { display: block; }
  .kal-kommende { margin-top: 28px; }
  .kal-tid { flex-basis: 61px; }
  .kal-aftale { gap: 8px; }
}

/* Overblik og nyhedsbrevplakat. Kun disse flader ændres i version 124. */
.overblik-dag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: var(--tg-navy); color: #FFFFFF; padding: 28px 30px 24px; }
.overblik-dag h2 { font-size: 24px; font-weight: 650; line-height: 1.25; margin: 5px 0 0; }
.overblik-dag p { font-size:13px; color: var(--tg-line-strong); margin: 0; overflow-wrap: anywhere; }
.overblik-dag .overblik-dato { color: var(--tg-line-strong); }
.overblik-tal { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); padding-top: 22px; border-top: 1px solid var(--tg-muted); gap: 22px; }
.overblik-tal > * { color: #FFFFFF; text-decoration: none; min-width: 0; border-right: 1px solid var(--tg-muted); padding-right: 22px; }
.overblik-tal > *:last-child { border-right: 0; }
.overblik-tal > * > span { display: flex; justify-content: space-between; color: var(--tg-line-strong); }
.overblik-tal strong { display: block; font-size: 34px; font-weight: 550; line-height: 1.2; margin: 12px 0 4px; }
.overblik-tal small { color: var(--tg-line-strong); font-size:13px; }
.overblik-tal a:hover > span { color: #FFFFFF; }
.ny-plakat-visning { max-width: 600px; margin: 20px auto; background: #FFFFFF; }
.ny-plakat-visning[hidden] { display: none; }
.ny-plakat-visning > svg { display: block; width: 100%; height: auto; }
.ny-plakat-handlinger { display: flex; justify-content: flex-end; max-width: 600px; margin: 16px auto 0; }
@media (max-width: 600px) {
  .overblik-dag { padding: 22px 18px; gap: 18px; }
  .overblik-dag h2 { font-size: 22px; }
  .overblik-tal { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overblik-tal > * { border-right: 0; padding-right: 0; }
  .overblik-tal strong { font-size: 30px; }
}
/* Afgrænset driftscenter. Ingen ændring af de øvrige sider. */
.lf-center { color: var(--tg-navy); min-width: 0; }
.lf-band { background: var(--tg-navy); color: #FFFFFF; padding: 20px 24px; display: flex; gap: 20px; align-items: center; justify-content: space-between; border-top: 3px solid var(--tg-primary); }
.lf-band h2 { font-size: 22px; margin: 6px 0 9px; letter-spacing: 0; }
.lf-eyebrow { font-size:13px; color: var(--tg-line-strong); font-weight: 700; }
.lf-connection { font-size: 13px; margin: 0; color: var(--tg-line-strong); display: flex; gap: 12px; flex-wrap: wrap; }
.lf-connection span { color: var(--tg-line); }
.lf-connection.offline { color: var(--tg-danger-soft); }
.lf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lf-band .knap.stille { color: #FFFFFF; border: 1px solid var(--tg-muted); background: var(--tg-navy); width: 40px; min-height: 40px; padding: 0; border-radius: 6px; }
.lf-band .knap.stille:hover { background: var(--tg-primary); }
.lf-connection::before { content: ''; width: 6px; height: 6px; background: var(--tg-primary); border-radius: 50%; align-self: center; }
.lf-connection.offline::before { background: var(--tg-danger-soft); }
.lf-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--tg-line); background: var(--tg-bg); }
.lf-metric { padding: 16px 22px; min-width: 0; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--tg-line); }
.lf-metric strong { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lf-metric span { font-size:13px; color: var(--tg-muted); overflow-wrap: anywhere; }
.lf-metric.error strong { color: var(--tg-danger); }
.lf-metric.warning strong { color: var(--tg-warning); }
.lf-metric.success strong { color: var(--tg-primary); }
.lf-scope { display: flex; gap: 10px; align-items: center; padding: 18px 0 12px; flex-wrap: wrap; }
.lf-scope span { font-size:13px; color: var(--tg-muted); }
.lf-center select { padding: 10px 30px 10px 12px; min-height: 42px; border: 1px solid var(--tg-line); border-radius: 5px; color: var(--tg-navy); background: #FFFFFF; font: inherit; font-size: 13px; max-width: 100%; }
.lf-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--tg-line); overflow-x: auto; }
.lf-tabs button { border: 0; border-bottom: 3px solid transparent; background: none; padding: 12px 0; color: var(--tg-muted); white-space: nowrap; font: inherit; font-size: 14px; cursor: pointer; }
.lf-tabs button.active { color: var(--tg-navy); border-bottom-color: var(--tg-primary); font-weight: 700; }
.lf-filters { display: flex; gap: 8px; padding: 14px 0; flex-wrap: wrap; }
.lf-search { display: flex; align-items: center; gap: 9px; border: 1px solid var(--tg-line); border-radius: 5px; padding: 0 12px; min-height: 42px; flex: 1 1 300px; }
.lf-search input { border: 0; background: transparent; outline: 0; padding: 10px 0; min-width: 0; width: 100%; font: inherit; font-size: 13px; }
.lf-search:focus-within { outline: 2px solid var(--tg-primary); }
.lf-list-top { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 14px 0; flex-wrap: wrap; }
.lf-list-top strong { font-size: 15px; }
.lf-list-top span { font-size:13px; color: var(--tg-muted); }
.lf-feed { border-top: 1px solid var(--tg-line); background: #FFFFFF; }
.lf-event, .lf-device { display: grid; grid-template-columns: 92px 58px minmax(0,1fr) 82px; align-items: center; gap: 12px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--tg-bg); padding: 15px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.lf-event:hover, .lf-device:hover { background: var(--tg-bg); }
.lf-event.selected { background: var(--tg-soft); box-shadow: inset 3px 0 var(--tg-primary); }
.lf-center button:focus-visible, .lf-technical summary:focus-visible { outline: 2px solid var(--tg-primary); outline-offset: -2px; }
.lf-event time { font-size:13px; color: var(--tg-muted); font-variant-numeric: tabular-nums; }
.lf-event strong, .lf-device strong { font-size: 13px; line-height: 1.45; display: block; overflow-wrap: anywhere; }
.lf-event div > span, .lf-device div > span, .lf-device small { display: block; margin-top: 5px; font-size:13px; color: var(--tg-muted); overflow-wrap: anywhere; }
.lf-event small { display: block; margin-top: 4px; color: var(--tg-muted); font-size:13px; overflow-wrap: anywhere; }
.lf-pill { display: inline-flex; align-items: center; justify-content: center; background: var(--tg-info-soft); color: var(--tg-primary); border-radius: 4px; padding: 5px 7px; font-size:13px; white-space: nowrap; width: fit-content; }
.lf-pill.error, .lf-pill.critical { background: var(--tg-danger-soft); color: var(--tg-danger); }
.lf-pill.warning { background: var(--tg-warning-soft); color: var(--tg-warning); }
.lf-pill.success { background: var(--tg-soft); color: var(--tg-primary); }
.lf-status { font-size:13px; color: var(--tg-muted); display: flex; gap: 6px; align-items: center; }
.lf-status.open { color: var(--tg-danger); }
.lf-status.resolved { color: var(--tg-primary); }
.lf-device { grid-template-columns: 70px minmax(0,1fr) auto; }
.lf-empty { padding: 42px 12px; color: var(--tg-muted); font-size: 14px; text-align: center; }
.lf-pagination { display: flex; justify-content: flex-end; gap: 12px; align-items: center; padding: 18px 0; font-size:13px; }
.lf-pipeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: var(--tg-bg); }
.lf-check { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--tg-line); }
.lf-check strong { font-size: 14px; }
.lf-check p { font-size: 13px; color: var(--tg-muted); margin: 5px 0 0; line-height: 1.5; }
.lf-runtime { padding: 15px 0; font-size:13px; color: var(--tg-muted); }
.lf-workbench { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; }
.lf-inbox { min-width: 0; }
.lf-feed-head { display: grid; grid-template-columns: 92px 58px minmax(0,1fr) 82px; gap: 12px; padding: 10px 12px; color: var(--tg-muted); font-size:13px; background: var(--tg-soft); }
.lf-inspector { margin-top: 8px; padding: 18px; background: #FFFFFF; border-top: 3px solid var(--tg-primary); position: sticky; top: 90px; min-width: 0; box-shadow: 0 4px 20px #202a350a; }
.lf-inspector-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size:13px; }
.lf-inspector-caption span { color: var(--tg-muted); }
.lf-detail-heading { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lf-detail-heading > span:last-child { font-size:13px; color: var(--tg-muted); }
.lf-detail h3 { font-size: 17px; margin: 0 0 8px; }
.lf-detail h3 { line-height: 1.4; overflow-wrap: anywhere; }
.lf-detail p { font-size: 13px; line-height: 1.6; margin: 0 0 15px; }
.lf-recommendation { background: var(--tg-soft); padding: 12px; border-left: 2px solid var(--tg-primary); }
.lf-detail dl { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 8px; font-size:13px; }
.lf-detail dt { color: var(--tg-muted); }
.lf-detail dd { margin: 0; overflow-wrap: anywhere; }
.lf-detail pre { background: var(--tg-navy); color: var(--tg-soft); font-size:13px; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 5px; max-height: 280px; overflow-y: auto; }
.lf-technical { margin: 18px 0; font-size:13px; }
.lf-technical summary { cursor: pointer; padding: 10px 0; color: var(--tg-muted); }
#lf-annotation { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--tg-bg); }
#lf-annotation label { display: grid; gap: 6px; font-size:13px; color: var(--tg-muted); }
#lf-annotation textarea { min-width: 0; width: 100%; resize: vertical; border: 1px solid var(--tg-line); padding: 10px; border-radius: 5px; font: inherit; font-size:13px; color: var(--tg-navy); line-height: 1.5; box-sizing: border-box; }
#lf-annotation .knap { justify-self: start; border-radius: 5px; background: var(--tg-primary); }
.lf-health { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; }
@media (max-width:1100px) {
  .lf-workbench { grid-template-columns: minmax(0,1fr); }
  .lf-inspector { display: none; }
  .lf-event.selected { background: #FFFFFF; box-shadow: none; }
}
@media (max-width: 700px) {
  .lf-band { padding: 16px; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
  .lf-band h2 { font-size: 20px; }
  .lf-connection { font-size:13px; gap: 7px; }
  .lf-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lf-metric { padding: 15px; border-bottom: 1px solid var(--tg-line); }
  .lf-tabs { gap: 20px; }
  .lf-event { grid-template-columns: 55px minmax(0,1fr) 18px; gap: 10px; padding: 14px 10px; }
  .lf-event time { grid-column: 2 / 4; grid-row: 2; }
  .lf-event .lf-status { font-size: 0; }
  .lf-device { grid-template-columns: 55px minmax(0,1fr) 18px; gap: 10px; }
  .lf-device .lf-status { font-size: 0; }
  .lf-pipeline { grid-template-columns: 1fr; }
  .lf-check { gap: 10px; }
  .lf-health { grid-template-columns: minmax(0,1fr); }
  .lf-feed-head { display: none; }
  .lf-center select { min-width: 0; flex: 1; }
  .lf-scope select[name=organization_id] { flex-basis: 100%; }
}

/* Nyhedsbrevenes udgaver og læsevisning. */
.ny-udgaver, .ny-laeser { max-width: 1080px; margin: 0 auto; min-width: 0; letter-spacing: 0; }
.ny-udgaver-top, .ny-vaerktoej { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 22px; }
.ny-udgaver-top p { color: var(--daempet); margin: 0; font-size: 13px; }
/* ───────────────────────── forsiden ─────────────────────────
   Listen er en forside, ikke en liste. Det ulæste står som nyheder i
   fuld størrelse, det læste falder sammen til en indholdsfortegnelse
   nederst. Hierarkiet er størrelse — derfor hverken kort, skygger,
   prikker eller filtre. */
.ny-forside { max-width: 720px; margin: 0 auto; letter-spacing: 0;
  animation: ny-ankomst .4s ease both; }
.ny-stribe { height: 3px; background: var(--accent); margin-bottom: 4px; }

/* Startsiden. Den siger, hvor man er landet, før siden begynder at vise
   breve: hvem der skriver, hvor mange der er, og hvornår det sidste kom.
   Tallene i antikva og stor grad, som husets nøgletal. */
.ny-start { padding: 15px 0 24px; border-bottom: 1px solid var(--streg);
  margin-bottom: 24px; }
.ny-start-hvem { margin: 0; color: var(--accent); font-size: 14.5px;
  font-weight: 700; }
.ny-start-om { margin: 8px 0 0; max-width: 56ch; font-size: 15px;
  line-height: 1.55; color: var(--daempet); }
.ny-start-tal { display: flex; gap: 40px; margin-top: 22px; flex-wrap: wrap; }
.ny-tal { display: flex; flex-direction: column; gap: 5px; }
.ny-tal b { font-family: Newsreader, Georgia, serif; font-size: 32px;
  line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ny-tal em { font-style: normal; font-size: 13px; color: var(--svag); }

/* Hvert brev er sit eget felt. Et ULÆST felt ligger løftet med en
   skygge i brevets egen farve; et læst ligger fladt med en hårstreg.
   Dybde frem for streger, og ingen prik der skal forklare det. */
.ny-felt { display: block; width: 100%; text-align: left; font: inherit;
  background: var(--ark); color: var(--blaek); border: 0; padding: 0;
  margin-bottom: 16px; border-radius: 16px; overflow: hidden; cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 24%, transparent);
  transition: transform .14s ease, box-shadow .14s ease; }
.ny-felt.laest { box-shadow: none; border: 1px solid var(--streg); }
.ny-felt:hover { transform: translateY(-2px); }
.ny-felt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ny-felt-krop { display: block; padding: 15px 17px 16px; }

.ny-baand { display: block; }
.ny-baand > svg { display: block; width: 100%; height: auto; }
.ny-baand-stor { width: 100%; border: 0; padding: 0; background: none;
  cursor: pointer; margin-bottom: 26px; border-radius: 16px; overflow: hidden; }
.ny-baand-stor:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Kickeren: en kort farvet streg og et ord. Ikke versaler med spærring. */
.ny-kicker { display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.ny-kicker::before { content: ''; width: 16px; height: 2.5px; background: currentColor; }

.ny-felt strong { display: block; font-family: Newsreader, Georgia, serif;
  font-size: 22px; line-height: 1.17; font-weight: 700; letter-spacing: -.2px; }
.ny-manchet { display: block; margin-top: 8px; font-style: normal;
  font-size: 15.5px; line-height: 1.5; color: var(--daempet); max-width: 62ch; }
.ny-felt strong + .ny-manchet { margin-top: 8px; }
.ny-felt-krop > .ny-manchet:first-child { margin-top: 0; font-size: 17px; color: var(--blaek); }
.ny-byline { display: flex; align-items: center; gap: 9px; margin-top: 13px;
  font-size: 13px; color: var(--svag); font-variant-numeric: tabular-nums; }
.ny-byline i { width: 10px; height: 10px; flex: none; }
.ny-laest-mark { margin-left: auto; font-weight: 400; font-size:13px; }

/* Oplysningerne sat som i en avis: etiket i gråt, værdi i sort. */
.ny-felter { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; }
.ny-felt .ny-felter + .ny-byline { margin-top: 12px; }
.ny-felt-krop .ny-felt { all: unset; }
.ny-felter .ny-felt { display: inline-flex; align-items: baseline; gap: 6px;
  background: none; border: 0; box-shadow: none; margin: 0; padding: 0;
  border-radius: 0; cursor: inherit; }
.ny-felter .ny-felt em { font-style: normal; font-size: 13.5px; color: var(--svag); }
.ny-felter .ny-felt b { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sideskiftet vises kun, når der er mere end én side. */
.ny-sider { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--streg); }
.ny-sider button { display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent);
  background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.ny-sider button[disabled] { color: var(--svag); cursor: default; }
.ny-sider button:first-child svg { transform: rotate(180deg); }
.ny-sider span { font-size: 13px; color: var(--svag);
  font-variant-numeric: tabular-nums; }

/* Kompakte nyhedsbrevfelter. Plakatens fulde udtryk hører til i brevet. */
.ny-forside.ny-kompakt { max-width: 1040px; }
.ny-kompakt .ny-feltoversigt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ny-kompakt .ny-mini { --ny-ink: var(--tg-primary); display: flex; flex-direction: column;
  min-width: 0; min-height: 184px; margin: 0; padding: 15px 17px 12px;
  border: 1px solid var(--tg-bg); border-left: 3px solid var(--ny-ink); border-radius: 6px;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(26, 38, 42, .04); letter-spacing: 0;
  transition: border-color .16s ease, box-shadow .16s ease; }
.ny-kompakt .ny-mini.ny-tone-skov { --ny-ink: var(--tg-primary); }
.ny-kompakt .ny-mini.ny-tone-baer { --ny-ink: var(--tg-primary); }
.ny-kompakt .ny-mini.ny-tone-honning { --ny-ink: var(--tg-warning); }
.ny-kompakt .ny-mini.ny-tone-vigtig { --ny-ink: var(--tg-danger); }
.ny-kompakt .ny-mini.laest { background: #FFFFFF; border-left-color: var(--tg-line); box-shadow: none; }
.ny-kompakt .ny-mini:hover { transform: none; border-color: var(--ny-ink);
  box-shadow: 0 3px 10px rgba(26, 38, 42, .08); }
.ny-kompakt .ny-mini:focus-visible { outline-color: var(--ny-ink); }
.ny-mini-top { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 18px; font-size:13px; line-height: 1.35; }
.ny-mini-nummer { display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--ny-ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ny-mini-nummer svg { flex: none; }
.ny-mini-status { color: var(--tg-muted); flex: none; font-size:13px; }
.ny-mini-status.vigtig { color: var(--tg-danger); font-weight: 600; }
.ny-kompakt .ny-mini .ny-felt-krop { display: block; min-width: 0; padding: 10px 0 12px; flex: 1; }
.ny-kompakt .ny-mini strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; font-family: inherit; font-size: 17px;
  line-height: 1.3; font-weight: 650; letter-spacing: 0; color: var(--tg-navy); }
.ny-kompakt .ny-mini .ny-manchet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; margin-top: 6px; max-width: none;
  font-size: 13px; line-height: 1.45; color: var(--tg-muted); }
.ny-mini-fod { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center;
  gap: 10px; padding-top: 9px; border-top: 1px solid var(--tg-bg); min-height: 25px;
  font-size:13px; line-height: 1.4; color: var(--tg-muted); }
.ny-mini-afsender { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ny-mini-dato { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ny-mini-pil { display: flex; color: var(--ny-ink); }
.ny-kompakt .ny-sider { margin-top: 18px; }
@media (max-width: 1040px) {
  .ny-kompakt .ny-feltoversigt { grid-template-columns: minmax(0, 1fr); }
  .ny-kompakt .ny-mini { min-height: 168px; padding: 13px 14px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ny-forside.ny-kompakt { animation: none; }
  .ny-kompakt .ny-mini { transition: none; }
}

.ny-moede { border-top: 3px solid var(--tg-primary); padding: 22px 0 18px; margin: 8px 0 20px; }
.ny-moede-hoved { display: flex; align-items: flex-start; gap: 22px; }
.ny-moede-hoved > div:last-child { min-width: 0; }
.ny-moede-hoved p { color: var(--daempet); margin: 0 0 5px; font-size:13px; }
.ny-moede-dag { width: 62px; flex: 0 0 62px; display: grid; justify-items: center; gap: 5px; color: var(--tg-primary); }
.ny-moede-dag b { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.ny-moede-dag span { font-size:13px; font-weight: 700; }
.ny-moede h2 { font-family: var(--sans); font-size: 22px; line-height: 1.3; margin: 0; letter-spacing: 0; overflow-wrap: anywhere; }
.ny-moede dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 24px 0; }
.ny-moede dl > div:last-child { grid-column: 1 / -1; }
.ny-moede dt { color: var(--tg-muted); font-size:13px; margin-bottom: 4px; }
.ny-moede dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.ny-moede-afslut { border-top: 1px solid var(--streg); padding-top: 15px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.ny-moede-afslut p { font-size: 13px; color: var(--tg-primary); margin: 0; flex: 1 1 220px; }
.ny-moede-svar { display: flex; flex-wrap: wrap; gap: 10px; }
.ny-svar-aabn { background: transparent; border: 0; border-block: 1px solid var(--streg); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 14px 0; margin-top: 16px; cursor: pointer; color: var(--tg-primary); }
.ny-svar-aabn:hover { background: var(--tg-soft); }
.ny-svar-aabn > span { display: flex; align-items: center; gap: 8px; font-size:13px; }
.ny-svartal { display: flex; gap: 32px; }
.ny-svartal > div { display: grid; gap: 4px; color: var(--daempet); }
.ny-svartal > div:first-child { color: var(--tg-primary); }
.ny-svartal b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ny-svartal span { font-size:13px; }
.ny-svaroversigt h3 { font-size: 17px; line-height: 1.35; margin: 0 0 8px; letter-spacing: 0; }
.ny-svaroversigt > p { color: var(--daempet); font-size: 13px; margin: 0 0 20px; overflow-wrap: anywhere; }
.ny-svaroversigt > .ny-svartal { padding-bottom: 20px; }
.ny-svaroversigt input[type="search"] { width: 100%; margin-bottom: 16px; }
.ny-svar-filtre { display: flex; gap: 0; border-bottom: 1px solid var(--streg); margin-bottom: 8px; }
.ny-svar-filtre button { flex: 1; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 12px 4px; color: var(--daempet); font-size: 13px; cursor: pointer; }
.ny-svar-filtre button[aria-selected="true"] { color: var(--tg-primary); border-bottom-color: var(--tg-primary); font-weight: 700; }
.ny-invite-felter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-block: 1px solid var(--streg); padding-block: 18px; margin-bottom: 18px; }
.ny-invite-felter[hidden] { display: none; }
.ny-invite-felter .felt { min-width: 0; margin: 0; }
.ny-invite-felter .felt:last-child { grid-column: 1 / -1; }
.ny-invite-felter input { min-width: 0; width: 100%; }
.ny-moede-deltagere > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--tg-line); }
.ny-moede-deltagere strong { overflow-wrap: anywhere; min-width: 0; }
.ny-moede-deltagere span { flex-shrink: 0; color: var(--daempet); font-size:13px; }
.ny-moede-deltagere span.ja { color: var(--tg-primary); }
@media (max-width: 480px) {
  .ny-moede dl { grid-template-columns: 1fr; }
  .ny-moede-hoved { gap: 14px; }
  .ny-moede h2 { font-size: 19px; }
  .ny-svartal { gap: 24px; }
  .ny-svar-aabn > span { font-size:13px; gap: 4px; }
  .ny-invite-felter { grid-template-columns: 1fr; }
}
.ny-vaerktoej .som-link { margin-right: auto; }
.ny-ikonknap { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 6px; background: var(--tg-soft); color: var(--tg-navy); cursor: pointer; }
.ny-laeser [hidden] { display: none !important; }
.ny-plakat-scene { background: var(--tg-soft); padding: 26px 20px; margin-bottom: 26px;
  animation: ny-ankomst .4s ease both; }
.ny-plakat-scene[hidden] { display: none; }
.ny-plakat-scene .ny-plakat-visning { max-width: 460px; margin: 0 auto; box-shadow: 0 18px 48px rgba(30,57,49,.14); }
.ny-plakat-tom { margin: 22px 0 6px; padding: 18px 20px; border-radius: 12px;
  background: var(--flade-2, var(--tg-bg)); color: var(--blaek-svag, var(--tg-muted)); font-size: .94rem; }

/* ───────────────────────── artiklen ─────────────────────────
   Brevet læst som en artikel: kicker, rubrik, byline, manchet,
   faktaboks, brødtekst. Faktaboksen er avisens egen opfindelse til
   præcis det her — det praktiske, man skal kunne finde uden at læse
   teksten igennem. Den står mellem to streger, fordi det er dér,
   læseren leder efter den. Ingen kasse om siden, ingen skygge:
   siden ER papiret. */
.ny-artikel { max-width: 680px; margin: 0 auto; animation: ny-ankomst .4s ease both; }
.ny-artikel h2 { margin: 0; font-family: Newsreader, Georgia, serif;
  font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -.4px;
  overflow-wrap: anywhere; }
.ny-artikel .ny-byline { margin: 14px 0 0; }
.ny-manchet-stor { margin: 20px 0 0; font-size: 19.5px; line-height: 1.5;
  font-weight: 600; max-width: 60ch; }
.ny-faktaboks { display: grid; grid-template-columns: minmax(96px, auto) 1fr;
  gap: 8px 18px; margin: 24px 0 0; padding: 13px 0;
  border-top: 2px solid var(--blaek); border-bottom: 1px solid var(--streg); }
.ny-faktaboks .ny-felt { display: contents; }
.ny-faktaboks .ny-felt em { font-size: 14px; }
.ny-faktaboks .ny-felt b { font-size: 15.5px; }
/* Et felt uden etiket skal stadig stå i værdikolonnen. */
.ny-faktaboks .ny-felt b:first-child { grid-column: 2; }
.ny-brevtekst { min-width: 0; max-width: 66ch; overflow-wrap: anywhere; margin-top: 26px; }
.ny-brevtekst p { font-size: 16.5px; line-height: 1.75; margin: 0 0 22px; }
.ny-brevtekst p:last-child { margin-bottom: 0; }
.ny-laesetid { margin: 24px 0 0; font-size: 13px; color: var(--svag); }

@keyframes ny-ankomst { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .ny-artikel h2 { font-size: 28px; }
  .ny-manchet-stor { font-size: 17.5px; }
  .ny-faktaboks { grid-template-columns: minmax(80px, auto) 1fr; gap: 7px 14px; }
  .ny-plakat-scene { padding: 14px 10px; }
  .ny-kortfortalt, .ny-laesetid { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ny-artikel, .ny-plakat-scene { animation: none; } }

/* ── Bekræftelseskoden ───────────────────────────────────────────────
   Koden skrives i et ark oven på loginsiden, ikke i formularen. Den er
   et skridt for sig: man henter noget i sin indbakke og kommer tilbage,
   og det skal man kunne gøre uden at miste det, man allerede har
   skrevet.

   Seks felter frem for ét. Man ved, hvor mange cifre der mangler, uden
   at tælle dem, og kan rette ét uden at slette resten.

   Mærket i hovedet er ikke pynt. Det fylder op, mens man skriver — ét
   sjettedel pr. ciffer — så man kan se, hvor langt man er, uden at der
   står et tal nogen steder. Og når koden er rigtig, er det det samme
   skjold, der sætter sig som segl nede i rækken. Begyndelsen og
   slutningen er den samme figur. */
.kode-ark { width: min(452px, 100%); }
.kode-ark[data-p="TR"]    { --rolle-farve: var(--tr);    --rolle-bleg: var(--blaa-bleg); }
.kode-ark[data-p="AMR"]   { --rolle-farve: var(--amr);   --rolle-bleg: var(--groen-bleg); }
.kode-ark[data-p="ADMIN"] { --rolle-farve: var(--admin); --rolle-bleg: var(--tg-info-soft); }

/* Mærket, der fylder op. --fyld går fra 0 til 1.
   Vælgeren skal være stærkere end .ark-top > div, som ellers giver
   alle direkte børn flex: 1 og spreder skjoldet ud over halve hovedet. */
.ark-top > .kode-maerke { flex: 0 0 38px; width: 38px; height: 44px; margin-top: 2px; }
.kode-maerke svg { width: 100%; height: 100%; overflow: visible; }
.kode-maerke .kant { fill: none; stroke: var(--streg-kraftig); stroke-width: 2; }
.kode-maerke .fyld {
  fill: var(--rolle-farve);
  transform: translateY(calc((1 - var(--fyld, 0)) * 38px));
  transition: transform .34s cubic-bezier(.2,.8,.3,1);
}
/* Når seglet sætter sig nedenfor, har mærket gjort sit. */
.kode-ark.faerdig .kode-maerke { opacity: .3; transition: opacity .3s ease; }

.kode-raekke {
  position: relative;
  display: flex; gap: 10px; justify-content: center;
  margin: 10px 0 6px;
  transition: gap .26s cubic-bezier(.2,.8,.3,1), transform .3s cubic-bezier(.2,.8,.3,1);
}
.kode-celle {
  width: 48px; height: 60px; padding: 0;
  text-align: center; font-size: 26px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blaek); background: var(--papir-dyb);
  border: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px var(--streg);
  transition: box-shadow .16s ease, background .2s ease,
              color .2s ease, border-radius .26s cubic-bezier(.2,.8,.3,1);
  /* Cellerne lægges ud én ad gangen, som kort på et bord. */
  animation: kode-laeg .38s cubic-bezier(.2,.9,.3,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes kode-laeg {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.kode-celle:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--rolle-farve); }
/* Et ciffer, der lander, sætter sig. */
.kode-celle.fyldt {
  background: var(--ark);
  box-shadow: inset 0 0 0 1.5px var(--streg), var(--skygge-1);
  animation: kode-saet .2s cubic-bezier(.3,1.4,.5,1);
}
@keyframes kode-saet { 50% { transform: scale(1.07); } }
.kode-celle:disabled { opacity: 1; }

/* Godkendt.

   Cellerne glider sammen til én flade, blækket løber igennem fra
   venstre, og seglet sætter sig. Til sidst letter hele rækken — som et
   stempel, der løftes fra papiret, når det har sat sit mærke. */
.kode-raekke.godkendt { gap: 0; }
.kode-raekke.godkendt .kode-celle {
  background: var(--ark); color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--streg);
  border-radius: 0; animation: none;
}
.kode-raekke.godkendt .kode-celle:first-child { border-radius: 14px 0 0 14px; }
.kode-raekke.godkendt .kode-celle:last-child  { border-radius: 0 14px 14px 0; }
.kode-raekke.loeftet { transform: translateY(-5px); }

.kode-blaek {
  position: absolute; inset: 0; border-radius: 14px;
  background: var(--rolle-farve);
  transform: scaleX(0); transform-origin: left center;
  opacity: 0; pointer-events: none;
}
.kode-raekke.godkendt .kode-blaek {
  opacity: 1; transform: scaleX(1);
  transition: transform .44s cubic-bezier(.4,0,.2,1) .2s, opacity .08s linear .2s;
}
.kode-raekke.loeftet .kode-blaek { box-shadow: 0 10px 22px -8px var(--rolle-farve); }
.kode-segl {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
}
.kode-raekke.godkendt .kode-segl { opacity: 1; transition: opacity .16s ease .52s; }
.kode-segl svg { width: 30px; height: 36px; overflow: visible; }
.kode-segl path {
  fill: none; stroke: #FFFFFF; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 170; stroke-dashoffset: 170;
}
.kode-raekke.godkendt .kode-segl path {
  animation: kode-segl-tegn .46s cubic-bezier(.3,.7,.3,1) .54s forwards;
}
@keyframes kode-segl-tegn { to { stroke-dashoffset: 0; } }

/* Afvist.

   Blækket løber rødt op fra bunden og trækker sig tilbage igen, celle
   for celle. Ingen rysten: et stempel, der ikke tog, flytter sig ikke
   sidelæns — det sætter sig bare ikke. Bagefter viskes cifrene ud
   bagfra, så rækken tømmes for øjnene af én i stedet for at blinke
   tom. */
.kode-raekke.afvist .kode-celle { animation: kode-afvist .56s cubic-bezier(.3,.7,.3,1) both; }
.kode-raekke.afvist .kode-celle:nth-child(2) { animation-delay: .035s; }
.kode-raekke.afvist .kode-celle:nth-child(3) { animation-delay: .07s; }
.kode-raekke.afvist .kode-celle:nth-child(4) { animation-delay: .105s; }
.kode-raekke.afvist .kode-celle:nth-child(5) { animation-delay: .14s; }
.kode-raekke.afvist .kode-celle:nth-child(6) { animation-delay: .175s; }
@keyframes kode-afvist {
  0%   { box-shadow: inset 0 0 0 1.5px var(--streg); }
  34%  { box-shadow: inset 0 -60px 0 0 var(--roed-bleg), inset 0 0 0 2px var(--roed);
         color: var(--roed-dyb); transform: translateY(3px); }
  100% { box-shadow: inset 0 0 0 1.5px var(--streg); transform: none; }
}

/* Rådet i arket, der siger fra. Ét afsnit, ingen kasse om. */
.ingen-adgang-raad {
  margin: 4px 0 2px; color: var(--daempet);
  font-size: 15px; line-height: 1.55;
}

.kode-under {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.kode-svar { min-height: 20px; font-size: 14px; line-height: 1.45; }
.kode-svar.fejl { color: var(--forbud); }
.kode-svar.ja   { color: var(--rolle-farve); font-weight: 600; }

/* Nogle mennesker bliver dårlige af bevægelse. Stemplet skal stadig
   kunne ses — det skifter bare farve i stedet for at løbe. */
@media (prefers-reduced-motion: reduce) {
  .kode-celle, .kode-raekke, .kode-raekke.godkendt .kode-celle,
  .kode-maerke .fyld { transition: none; animation: none; }
  .kode-celle.fyldt { animation: none; }
  .kode-raekke.godkendt .kode-blaek { transition: opacity .12s ease; transform: scaleX(1); }
  .kode-raekke.godkendt .kode-segl { transition: opacity .12s ease .1s; }
  .kode-raekke.godkendt .kode-segl path { animation: none; stroke-dashoffset: 0; }
  .kode-raekke.afvist .kode-celle { animation: none; box-shadow: inset 0 0 0 2px var(--roed); }
  .kode-raekke.loeftet { transform: none; }
}
.skinne-forbund-logo { width: 36px; height: 36px; object-fit: contain; background: white; border-radius: 4px; padding: 3px; flex-shrink: 0; }
.skinne-forbund-logo[hidden] { display: none; }

}