/* ══════════════════════════════════════════════════════════════════════
   Romulus — stilark
   ──────────────────────────────────────────────────────────────────────
   Efter rumli.com, som Kasper bad om: hvid bund, meget luft, stor
   display-overskrift med indigo accentlinje, runde mærkater, store tal.

   Husets varme off-white og dæmpede grøn bruges IKKE her. Til gengæld
   tages rumlis rytme og ikke dens retorik — ingen fotografier, ingen
   citater, ingen «kom i gang». Den, der åbner et datarum, er ikke på vej
   til at blive overbevist, men på vej til at kontrollere, og layoutet
   skal tjene det: store tal at hæfte blikket på, og luft nok til at et
   forbehold ved siden af et tal bliver læst frem for sprunget over.

   Ét tema, med vilje. Et rum, der læses af få og efterprøves nøje, er
   bedre tjent med ét gennemarbejdet udtryk end to halve.
   ══════════════════════════════════════════════════════════════════════ */

/* Inter er selvhostet. Den blev før hentet fra fonts.googleapis.com med
   skriftfilerne fra fonts.gstatic.com, og det er to grunde til at lade
   være: et skrift-CDN fortæller Google den eksterne parts IP og
   besøgstidspunkt — en ukontrolleret log nummer to ved siden af den, vi
   selv fører — og et stilark fra et fremmed domæne spærrer for
   style-src 'self'. Nu går der ingen kald ud af huset.

   Én fil, ikke fire: filen er den variable Inter, så wght 100-900
   dækker de 400/500/600/700, siden bruger. Se skrift/OM-SKRIFTEN.txt for
   hvor den kommer fra, og hvorfor den er .woff og ikke .woff2. */
@font-face {
  font-family: 'Inter';
  src: url('/skrift/inter.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --hvid:       #ffffff;
  --flade:      #f7f8fa;   /* rolige paneler */
  --flade2:     #fbfcfd;
  --blaek:      #10131a;   /* naesten sort med et strejf blaat */
  --blaek2:     #4a5160;
  --daempet:    #838b9c;
  --linje:      #e6e9ef;
  --linje2:     #d3d8e3;

  /* Accenten er lupamærkets violet. Den lå før på #3b4ce0, en blålig
     indigo — tæt nok på mærket til at de to læses som den samme farve,
     der er ramt skævt. Mærket sætter farven; siden følger den.
     Kontrast mod hvid: 6,69:1, en anelse bedre end den gamle 6,37:1. */
  --indigo:     #5b45c9;
  --indigo-d:   #4735a6;
  --indigo-blod:#efecfa;

  --groen:      #1f7a52;
  --groen-blod: #e8f5ee;
  --gul:        #9a6414;
  --gul-blod:   #fdf3e0;
  --roed:       #a83c2c;
  --roed-blod:  #fdeceb;

  --radius:     14px;
  --radius-s:   9px;
  --skygge:     0 1px 2px rgba(16,19,26,.04), 0 8px 28px rgba(16,19,26,.06);
  --skygge-s:   0 1px 2px rgba(16,19,26,.05);

  --bredde:     1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Den variable Inter bærer også en opsz-akse, som browseren ellers
     ville bruge af sig selv og dermed stramme de store tal og
     overskrifter en anelse. Google leverede en fast opsz; låsen her
     holder udtrykket, som det var. Fjern linjen for at slippe aksen løs. */
  font-optical-sizing: none;
  background: var(--hvid);
  color: var(--blaek);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-d); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }

.num  { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92em; }

/* ═══ Rammen ═══════════════════════════════════════════════════════ */

.ramme { max-width: var(--bredde); margin: 0 auto; padding: 0 32px; }

header.top {
  border-bottom: 1px solid var(--linje);
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
}
.top-in { display: flex; align-items: center; gap: 28px; padding: 18px 0; }
.maerke { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 700; letter-spacing: -.022em; }
/* 40 px, ikke 28. Mærket er en hel scene — ulvinden, de to under den og
   jordlinjen — og under omkring 36 px klumper ungerne sammen til en plet.
   Enten skal det have plads nok til at kunne læses, eller også skal det
   forenkles som fanemærket. Her er der plads. */
.maerke .lupa { width: 43px; height: 40px; flex: none; display: block; }
.maerke .dot { color: var(--indigo); }
.top nav { display: flex; gap: 4px; margin-left: 12px; flex-wrap: wrap; }
.top nav button {
  font: inherit; font-size: 14px; font-weight: 500;
  border: 0; background: none; color: var(--blaek2);
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
}
.top nav button:hover { background: var(--flade); color: var(--blaek); }
.top nav button[aria-current="page"] { background: var(--indigo-blod); color: var(--indigo-d); font-weight: 600; }
.top .hoejre { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--daempet); }

/* ═══ Display ══════════════════════════════════════════════════════ */

.hero { padding: 76px 0 52px; }
.hero h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 700;
  text-wrap: balance;
  max-width: 17ch;
}
.hero h1 .anden { display: block; color: var(--indigo); }
.hero p.under {
  margin-top: 22px; max-width: 62ch;
  font-size: 17px; color: var(--blaek2);
}

.snit { padding: 46px 0; border-top: 1px solid var(--linje); }
.snit > h2 {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--daempet);
  margin-bottom: 22px;
}
.snit h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 6px; }

/* Et underafsnit inde i et afsnit: samme rytme, men uden den streg,
   der skiller to AFSNIT fra hinanden — og med mindre luft over, fordi
   det hører til det, der står ovenfor, frem for at begynde forfra.

   Ti steder i visningen byggede den her med et style="border:0;padding:
   26px 0 0" på hvert kald. En CSP uden 'unsafe-inline' kasserer den
   slags i stilhed, så afsnittene stod med afsnitsstregen og 46 px luft,
   hvor der skulle stå ingen streg og 26 px. */
.snit.underafsnit { border: 0; padding: 26px 0 0; }
/* Det ene, der følger tættere: søjlediagrammet over lønsummen står lige
   under kurven over mennesker og hører sammen med den. */
.snit.underafsnit.taet { padding-top: 20px; }

/* En overskrift inde i et kort er ikke en afsnitsoverskrift og skal
   ikke fylde som en. Bruges i ydelsesgrupperne og over kontrollerne. */
.snit h3.mindre { font-size: 16px; }

/* ═══ Tal ══════════════════════════════════════════════════════════ */

.tal-raekke { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; }

.tal {
  background: var(--flade); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 24px 24px 22px;
}
.tal .etiket { font-size: 13px; color: var(--daempet); font-weight: 500; }
.tal .vaerdi {
  font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tal .vaerdi .enhed { font-size: 15px; font-weight: 500; color: var(--daempet); letter-spacing: 0; }
.tal .noten { font-size: 13px; color: var(--blaek2); margin-top: 10px; line-height: 1.45; }

/* ═══ Noten, der står frit ═════════════════════════════════════════
   `.tal .noten` ovenfor gælder kun inde i en flise. Den forklarende
   linje, der står frit i et afsnit — mellem en overskrift og den tabel,
   den handler om — er en anden ting: den bærer sidens brødtekststørrelse
   og har kun brug for sin farve og sin luft.

   Farven og luften stod før som et style= på hvert enkelt af de sytten
   kald, der bygger sådan en linje. Grundformen her er den hyppigste af
   dem; modifikatorerne er de undtagelser, der faktisk fandtes. Værdierne
   er båret ordret med over, så fladen tegner som før. */
p.noten { color: var(--blaek2); margin-bottom: 14px; }

/* En underlinje til noten ovenfor — populationen bag en prøve, kilden
   under et kort. Den er dæmpet, fordi den uddyber frem for at oplyse. */
p.noten.daempet { color: var(--daempet); }

/* Noter, der har noget bestemt lige under sig, og derfor holder tættere
   på det. `foran-underlinje` har en dæmpet linje under sig, `foran-note`
   en note af samme vægt, `foran-kort` selve kortet. */
p.noten.foran-underlinje { margin-bottom: 4px; }
p.noten.foran-note       { margin-bottom: 6px; }
p.noten.foran-kort       { margin-bottom: 8px; }
/* Prisgrundlagets indledning bærer hele tabellen og får en anelse mere. */
p.noten.luftig           { margin-bottom: 16px; }

/* Noter, der står EFTER eller MELLEM tabeller. Luften flytter med op;
   `margin` og ikke `margin-top`, så grundformens 14 px nedad nulstilles
   frem for at lægge sig oveni. */
p.noten.efter-tabel     { margin: 14px 0 0; }
p.noten.mellem-tabeller { margin: 16px 0 10px; }
p.noten.i-kort          { margin: 6px 0 0; }

/* ═══ Tal, der kan åbnes ═══════════════════════════════════════════ */

/* Et nøgletal, man ikke kan komme bagom, er en påstand. Derfor kan de
   åbnes og vise hver eneste post, de er talt op af — så en læser kan
   tælle efter frem for at tro på os. */

button.tal {
  font: inherit; color: inherit; text-align: left; width: 100%;
  cursor: pointer; display: block;
  transition: border-color .12s ease, box-shadow .12s ease;
}
button.tal:hover { border-color: var(--linje2); box-shadow: var(--skygge-s); }
button.tal .aabn {
  margin-top: 13px; font-size: 12.5px; font-weight: 600; color: var(--indigo);
}
button.tal:hover .aabn { color: var(--indigo-d); }

dialog.opslag {
  border: 0; padding: 0; border-radius: 18px; color: var(--blaek);
  background: var(--hvid); box-shadow: var(--skygge);
  width: min(1060px, calc(100vw - 36px)); max-width: none;
  max-height: min(860px, calc(100vh - 64px));
  display: none; overflow: hidden;
  /* Browseren centrerer selv et modalt <dialog> med sin egen regel
     `dialog:modal { margin: auto }`. Den regel slår `* { margin: 0 }`
     ovenfor (:71) ihjel, og ALLE opslag i Romulus lagde sig derfor klemt
     op i øverste venstre hjørne med bagtæppe til højre og nedenunder —
     målt 08-09-2026 til `{left: 0, top: 0}` ved viewport 1.400×900 og
     set på et skærmbillede med opslaget åbent. Linjen her giver
     browserens egen centrering tilbage; den hører hjemme i reglen, der
     allerede findes, frem for som en undtagelse i stjerne-reglen. */
  margin: auto;
}
dialog.opslag[open] { display: flex; flex-direction: column; }
dialog.opslag::backdrop { background: rgba(16,19,26,.44); }

.opslag-hoved { padding: 26px 28px 20px; border-bottom: 1px solid var(--linje); flex: none; position: relative; }
.opslag-hoved h3 { font-size: 21px; letter-spacing: -.02em; padding-right: 40px; }
.opslag-hoved .kriterium { margin-top: 7px; font-size: 13.5px; color: var(--blaek2); max-width: 78ch; line-height: 1.5; }
.opslag-luk {
  position: absolute; top: 22px; right: 22px; font: inherit; font-size: 17px;
  line-height: 1; border: 1px solid var(--linje); background: var(--hvid);
  color: var(--daempet); width: 32px; height: 32px; border-radius: 99px; cursor: pointer;
}
.opslag-luk:hover { background: var(--flade); color: var(--blaek); }

.opslag-krop { overflow-y: auto; padding: 22px 28px 26px; }
/* Datoer og beløb må ikke brække. Navnekolonnen skal — den er den eneste,
   der er lang, og tabellen ruller vandret i sin egen ramme. */
.opslag-krop td { white-space: nowrap; }
.opslag-krop td:first-child { white-space: normal; min-width: 190px; }
.opslag-krop .tabelramme { border-radius: var(--radius-s); }
.opslag-krop thead th { position: sticky; top: 0; z-index: 1; }
.opslag-fod { margin-top: 14px; font-size: 12.5px; color: var(--daempet); line-height: 1.5; max-width: 78ch; }

/* ═══ Mærkater ═════════════════════════════════════════════════════ */

.pil {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .005em;
  background: var(--flade); color: var(--blaek2); border: 1px solid var(--linje);
  white-space: nowrap;
}
.pil.ok    { background: var(--groen-blod); color: var(--groen); border-color: transparent; }
.pil.obs   { background: var(--gul-blod);   color: var(--gul);   border-color: transparent; }
.pil.stop  { background: var(--roed-blod);  color: var(--roed);  border-color: transparent; }
.pil.info  { background: var(--indigo-blod);color: var(--indigo-d); border-color: transparent; }

/* Et mærkat, der ER en knap — fanerækken over aftalelisten. En knap
   arver ikke skrift af sig selv, og uden `font: inherit` falder den
   tilbage på browserens egen. Samme greb som `button.pil.bilag`
   nedenfor; det stod før som et style= på hvert af de fire kald. */
button.pil { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* To mærkater i træk i samme celle. Ikke `.pil + .pil`: dér, hvor flere
   mærkater står sammen, gør `.maerkater` det med gap, og de to greb må
   ikke lægge sig oven i hinanden. */
.pil.efter { margin-left: 6px; }

/* En række mærkater, der skal kunne brydes: statuskolonnen i
   aftalelisten og fanerækken over den. Fanerækken har luft nedad ind
   til tabellen; statuskolonnen står i en celle og skal ikke have det. */
.maerkater { display: flex; gap: 5px; flex-wrap: wrap; }
.fanerad   { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* ═══ Bilag ════════════════════════════════════════════════════════ */

/* «Ingen kontrakt» skal ses uden at blive læst. Prikken foran gør
   mærkatet til noget, øjet finder ved at skimme kolonnen — et rødt «0»
   i en talkolonne gør ikke, og det var netop det, der skulle rettes.

   Prikken sidder på .ingen alene og ikke på .pil.stop, så de mærkater,
   der stod på fladen i forvejen, tegner uændret. */
.pil.ingen::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 99px;
  background: currentColor;
}

button.pil.bilag {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: var(--indigo-blod); color: var(--indigo-d); border-color: transparent;
  transition: background .12s ease, color .12s ease;
}
button.pil.bilag::after { content: '→'; font-weight: 500; }
button.pil.bilag:hover { background: var(--indigo); color: #fff; }

/* Bilagsopslaget lægger sig oven på et åbent nøgletalsopslag. Det er
   smallere end det, det dækker, så man kan se, hvad man kom fra. */
dialog.bilagsopslag { width: min(760px, calc(100vw - 36px)); }
.bilagsopslag td:first-child { min-width: 260px; }

.bilag-link { color: var(--indigo-d); font-weight: 500; text-decoration: none; }
.bilag-link:hover { text-decoration: underline; }
/* Et link, der åbner et nyt faneblad, skal sige det. */
.bilag-link::after { content: ' ↗'; color: var(--daempet); font-weight: 400; }

/* ═══ Forbehold — det vigtigste element på siden ═══════════════════ */

/* Et forbehold hører ved sit tal, ikke i en fodnote. Derfor er det
   bygget som noget, der sidder FAST på tallet og ikke kan skrolles
   væk fra det.                                                        */
.forbehold {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--gul-blod); border: 1px solid #f2e2c2;
  border-radius: var(--radius-s); padding: 11px 14px;
  font-size: 13.5px; color: #6f4a12; line-height: 1.5;
  margin-top: 12px;
}
.forbehold::before { content: '!'; font-weight: 700; color: var(--gul); flex: none; }
.forbehold.rolig { background: var(--indigo-blod); border-color: #ded7f7; color: #3a2f86; }
.forbehold.rolig::before { content: 'i'; color: var(--indigo); }

/* ═══ Tabeller ═════════════════════════════════════════════════════ */

.tabelramme { overflow-x: auto; border: 1px solid var(--linje); border-radius: var(--radius); background: var(--hvid); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
thead th {
  text-align: left; font-weight: 600; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--daempet);
  padding: 13px 16px; background: var(--flade2);
  border-bottom: 1px solid var(--linje); white-space: nowrap;
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--linje); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--flade2); }
td.h, th.h { text-align: right; font-variant-numeric: tabular-nums; }
td .sel { color: var(--daempet); font-size: 12.5px; }

/* ═══ Foldbar tabel ════════════════════════════════════════════════
   Én række pr. menneske, der kan foldes ud til forløbet måned for måned.
   Rækken er selv knappen — en lille knap i en celle er svær at ramme, og
   pilen alene ville se ud som pynt. Åbningen skal kunne ses uden farve:
   pilen drejer, og den åbne række får en indigo kant i venstre side.   */

.foldtabel tbody tr.foldbar { cursor: pointer; }
.foldtabel tbody tr.foldbar td:first-child { padding-left: 38px; position: relative; }
.foldtabel tbody tr.foldbar td:first-child::before {
  content: '›'; position: absolute; left: 16px; top: 11px;
  font-size: 17px; line-height: 1; color: var(--daempet);
  transition: transform .12s ease; transform-origin: 40% 55%;
}
.foldtabel tbody tr.foldbar.aaben td:first-child::before {
  transform: rotate(90deg); color: var(--indigo);
}
.foldtabel tbody tr.foldbar.aaben > td {
  background: var(--indigo-blod); border-bottom-color: transparent;
}
.foldtabel tbody tr.foldbar.aaben > td:first-child { box-shadow: inset 3px 0 0 var(--indigo); }
.foldtabel tbody tr.foldbar:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.foldtabel tbody tr.folddetalje:hover { background: none; }
.foldtabel tbody tr.folddetalje > td { padding: 0; background: var(--flade2); }

.medarb { font-weight: 600; }

/* ═══ Løngrundlaget ════════════════════════════════════════════════
   Satsen står to steder: på menneskerækken som den seneste kendte, og i
   det udfoldede forløb som månedens egen. Den er et tal, der skal kunne
   sammenlignes ned ad en kolonne — derfor tabular-nums begge steder, så
   cifrene står under hinanden og et skift fra 61.575 til 60.000 kan ses
   uden at blive læst.

   Bredden på cellen i menneskerækken er et GULV og ikke et mål. Uden det
   presses den ene lange sætning — «Timeløn 150 kr/time — ikke på fast løn»
   — ned i en søjle på ét ord pr. linje på en smal skærm, netop dér hvor
   pointen er, at den skal kunne læses som en oplysning og ikke som et
   manglende beløb. Målt på fladen: kolonnen finder selv 134 px, så gulvet
   rører den ikke i almindelig bredde. Det stod først på 150 px og kostede
   dermed 48 px vandret rulning uden at give noget igen. */
.sats { font-weight: 500; font-variant-numeric: tabular-nums; }
td .loengrundlag { min-width: 130px; }

/* Forløbet inde i den udfoldede række. Den indre tabel må ikke se ud som
   en fortsættelse af den ydre — den er ét menneskes lønsedler, ikke flere
   mennesker, og den forskel skal kunne ses på et halvt sekund.         */
.forloeb { padding: 18px 20px 20px; }
.forloeb .forloeb-hj {
  font-size: 13px; color: var(--blaek2); line-height: 1.5;
  margin-bottom: 14px; max-width: 84ch;
}
.forloeb .tabelramme { border-radius: var(--radius-s); }
.forloeb table { font-size: 13.5px; }
.forloeb thead th { padding: 10px 13px; background: var(--flade); }
.forloeb tbody td { padding: 9px 13px; white-space: nowrap; }

/* ═══ Kort ═════════════════════════════════════════════════════════ */

.kort {
  background: var(--hvid); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--skygge-s);
}
.kort + .kort { margin-top: 14px; }
.kort-hoved { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.kort-hoved h3 { flex: 1; min-width: 220px; }

.gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/* ═══ Vælgeren ═════════════════════════════════════════════════════
   Ydelsesoversigterne vælges i en <select>. Den arver ikke skrift af
   sig selv, og uden `max-width` sprænger den rammen på en smal skærm,
   fordi foreningsnavnene er lange. */

.vaelger {
  font: inherit; padding: 9px 13px;
  border: 1px solid var(--linje2); border-radius: var(--radius-s);
  background: var(--hvid); max-width: 100%;
}
/* Luft over vælgeren, ind til nøgletallene — og over det, den viser. */
.vaelger-rad { margin-top: 22px; }
.vaelger-ud  { margin-top: 18px; }

/* ═══ Søjler ═══════════════════════════════════════════════════════
   Intet diagrambibliotek. En søjle er en div med bredde i procent, som i
   resten af huset. Tallet står ved siden af søjlen og ikke kun i den, så
   det kan læses uden at måle med øjet — og forbeholdet står INDE i
   rammen, ikke under den, hvor det kan skrolles væk fra det, det
   handler om.                                                          */

.diagram { background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--radius); padding: 22px 24px 18px; box-shadow: var(--skygge-s); }
.diagram > h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 3px; }
.diagram > p.hj { font-size: 13px; color: var(--blaek2); line-height: 1.5; margin-bottom: 18px; max-width: 74ch; }

.soejle { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 14px; padding: 5px 0; }
.soejle .navn { font-size: 13px; color: var(--blaek2); font-variant-numeric: tabular-nums; }
.soejle .spor { background: var(--flade); border-radius: 5px; height: 22px; overflow: hidden; }
.soejle .fyld { background: var(--indigo); height: 100%; border-radius: 5px; min-width: 3px; }
.soejle .fyld.mat { background: #b9afe8; }
.soejle .maal { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 68px; text-align: right; }
.soejle .maal .bi { display: block; font-size: 12px; font-weight: 400; color: var(--daempet); }

/* Forbeholdet, der hører til diagrammet, sidder i rammen under søjlerne. */
.diagram .indeni {
  margin-top: 16px; padding: 13px 15px; background: var(--indigo-blod);
  border: 1px solid #ded7f7; border-radius: var(--radius-s);
  font-size: 13px; line-height: 1.55; color: #3a2f86; max-width: 78ch;
}
.diagram .indeni b { font-weight: 600; }

/* ═══ Kontroller ═══════════════════════════════════════════════════ */

.kontrol { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--linje); }
.kontrol:last-child { border-bottom: 0; }
.kontrol .mrk { flex: none; width: 74px; }
.kontrol .txt { flex: 1; }
.kontrol .txt b { font-weight: 600; }
.kontrol .txt p { color: var(--blaek2); font-size: 13.5px; margin-top: 2px; }
/* Den linje, der forklarer hvorfor en kontrol tæller som ren, selv om
   den HAR poster. Den skal have samme farve som mærkatet ved siden af —
   ellers læses forklaringen som almindelig brødtekst, og forbeholdet i
   den forsvinder. */
.kontrol .txt p.obs { color: var(--gul); }

/* ═══ Login ════════════════════════════════════════════════════════ */

body.login { display: grid; place-items: center; min-height: 100vh; background: var(--flade); }
.login-kort {
  background: var(--hvid); border: 1px solid var(--linje); border-radius: 18px;
  padding: 44px 44px 36px; width: min(440px, calc(100vw - 40px)); box-shadow: var(--skygge);
}
/* På loginsiden står mærket alene og må gerne fylde: det er det eneste,
   der er at se på, før nøglen er skrevet ind. */
.login-kort .maerke { flex-direction: column; align-items: flex-start; gap: 20px; font-size: 22px; margin-bottom: 28px; }
.login-kort .maerke .lupa { width: 66px; height: 62px; }
.login-kort h1 { font-size: 25px; letter-spacing: -.028em; margin-bottom: 8px; }
.login-kort p.hj { color: var(--blaek2); font-size: 14.5px; margin-bottom: 26px; }
.login-kort label { display: block; font-size: 13px; font-weight: 600; color: var(--blaek2); margin-bottom: 7px; }
.login-kort input {
  width: 100%; font: inherit; font-size: 17px; letter-spacing: .07em;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  padding: 13px 15px; border: 1px solid var(--linje2); border-radius: var(--radius-s);
  background: var(--hvid); color: var(--blaek); text-transform: uppercase;
}
.login-kort input:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-blod); }
.knap {
  width: 100%; font: inherit; font-size: 15px; font-weight: 600;
  background: var(--indigo); color: #fff; border: 0;
  padding: 13px 20px; border-radius: var(--radius-s); cursor: pointer; margin-top: 18px;
}
.knap:hover { background: var(--indigo-d); }
.knap:disabled { opacity: .55; cursor: default; }
.fejl {
  margin-top: 16px; background: var(--roed-blod); border: 1px solid #f3d3cf;
  color: var(--roed); padding: 11px 14px; border-radius: var(--radius-s); font-size: 13.5px;
}

/* ═══ Fod ══════════════════════════════════════════════════════════ */

footer.fod {
  border-top: 1px solid var(--linje); margin-top: 56px;
  padding: 30px 0 52px; font-size: 13px; color: var(--daempet);
}
footer.fod b { color: var(--blaek2); font-weight: 600; }
footer.fod p + p { margin-top: 7px; }

/* ═══ Leverandører ═════════════════════════════════════════════════ */

/* Bindingsrækkerne genbruger .kontrol, men mærkatet er bredere: «kan
   ikke afgøres» er et af de tre udfald, og det skal kunne stå på én
   linje ved siden af de to korte. Rykkes det om på to linjer, ser
   det ud som en fejl frem for som et svar. */
.kontrol.binding .mrk { width: 148px; }

/* Beslutningskortene i budgetafsnittet. Samme grund som bindingsrækkerne
   ovenfor: mærkatet «afklaret 05-09-2026» er 150 px bredt og kan ikke stå i
   en kolonne på 74. Uden det her stak det 76 px ud — `.maerkater` har
   overflow: visible — og brødteksten i .txt lagde sig oven på det, uden at
   siden blev bredere end sin ramme (målt med elementFromPoint 06-09-2026,
   fund 11; breddemålingen kunne ikke se det, fordi overløbet var 0 px).
   Bredden sidder på KORTET og ikke på de daterede rækker alene, så alle
   tre beslutninger har samme mærkatkolonne og teksterne flugter. */
.kort.beslutninger .kontrol .mrk { width: 158px; }

/* Den ordrette tekststump, aflæsningen hviler på. Den skal kunne ses at
   være CITAT og ikke vores egen formulering — derfor stregen i venstre
   side og den dæmpede farve, ikke kursiv, som ville gøre en lang
   kontraktsætning tungere at læse. */
.kontrol .txt p.kilde {
  margin-top: 7px; padding-left: 12px; border-left: 2px solid var(--linje2);
  color: var(--daempet); font-size: 13px; line-height: 1.55;
}

/* Mærkaterne i en celle: samme greb som statuskolonnen på kundesiden,
   men med luft opad, fordi de står under to tekstlinjer. */
.maerkater.levmrk { margin-top: 7px; }
.maerkater.levmrk.hoejre { justify-content: flex-end; }

/* Grundlaget: aflæsningen og dokumenterne står i samme celle, fordi de
   svarer på det samme — hvad hviler rækken på. To kolonner skubbede
   tabellen ud over rammen, og den kolonne, der så skulle rulles frem,
   var netop den, forbeholdene handler om. */
.grundlagcelle > * + * { margin-top: 9px; }

/* En kolonneoverskrift, der må bryde. Se `bryd` i tabel() i app.js. */
thead th.bryd { white-space: normal; min-width: 104px; }

/* Beløbscellen er en knap med fire linjer: bogført og kladde med hver
   sin etiket. De to lægges ALDRIG sammen — der er nul bogførte
   leverandørfakturaer i 2025/2026 — så der står to tal og ikke ét, og
   knappen bærer dem begge frem for at gemme det ene. */
.beloebknap {
  display: block; width: 100%; text-align: right;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.beloebknap .sum { font-weight: 600; }
.beloebknap .sum + .sel { margin-bottom: 6px; }
.beloebknap:hover .sum { color: var(--indigo-d); text-decoration: underline; }
.beloebknap:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

/* Et mærkat, der åbner et opslag. Pilen siger, at der er mere bag —
   uden at mærkatet holder op med at være et mærkat, sådan som en
   fuldfarvet knap ville. */
button.pil.aabner { border-color: var(--linje2); }
button.pil.aabner::after { content: '›'; font-weight: 700; color: currentColor; opacity: .65; }
button.pil.aabner:hover { border-color: var(--indigo); color: var(--indigo-d); }

/* Aflæsningsopslaget. Tekststumpen er en hel kontraktsætning, og
   opslagets almindelige `white-space: nowrap` ville skubbe tabellen ud
   i vandret rulning i stedet for at bryde linjen. */
dialog.opslag.aflaesning { width: min(1000px, calc(100vw - 36px)); }
.aflaesning td:first-child { min-width: 168px; }
.aflaesning td:last-child { white-space: normal; min-width: 320px; line-height: 1.55; }
.aflaesning .opslag-fod + .opslag-fod { margin-top: 9px; }

/* ═══ Budget og omsætning pr. kunde ════════════════════════════════ */

/* Snittet mellem to kilder i regnskabshistorikken. Seks år, hvoraf de to
   ældste er indlæste årsregnskaber fra Midas og de fire nyeste er
   posteringssummer fra e-conomic — to forskellige mål, og tabellen må
   ikke se ud som én ubrudt række. Rækken er én celle over alle kolonner,
   dæmpet og lav, så den læses som en streg med ord på og ikke som et år. */
tbody tr.kildeskift td {
  padding: 7px 16px; font-size: 12.5px; color: var(--daempet);
  background: var(--flade); border-bottom: 1px solid var(--linje2);
}
tbody tr.kildeskift:hover td { background: var(--flade); }

/* Søjlerne over de største kunder. Navnekolonnen i `.soejle` er 92 px —
   nok til et regnskabsår, ikke til «A/B Havnefjord I». Her får den plads
   til et foreningsnavn på én linje, og søjlen tager resten. */
.diagram.brednavn .soejle { grid-template-columns: 220px 1fr auto; }
.diagram.brednavn .soejle .navn { color: var(--blaek); }

/* Budgettets måned for måned har otte talkolonner, når meromsætningen er
   med. Med den almindelige polstring på 16 px stak tabellen 57 px ud over
   rammen ved 1.000 px. Fem px mindre i hver side af hver celle er
   forskellen på en tabel, der kan læses, og én, der skal rulles — og
   ingen overskrift og intet tal er gjort kortere for det. */
table.smal thead th, table.smal tbody td { padding-left: 11px; padding-right: 11px; }

/* Året i regnskabshistorikken bærer kilden og målet under sig, som et
   foreningsnavn bærer sit nummer. Uden et gulv presser de seks talkolonner
   cellen ned på et ord pr. linje — «Midas (indlaest regnskab)» blev til
   fire linjer. Samme greb som `td .loengrundlag`: et gulv, ikke et mål. */
td .aarkilde { min-width: 200px; }

@media (max-width: 700px) {
  .diagram.brednavn .soejle { grid-template-columns: 120px 1fr auto; }
  .ramme { padding: 0 20px; }
  .hero { padding: 50px 0 36px; }
  .top-in { flex-wrap: wrap; gap: 14px; }
  .kontrol.binding .mrk { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}