/* EnvoyAgent — kundefladen (F012–F014).
 *
 * Tokens og typografi: «Morgen v4», tilpasset (F079). Designet er taget som
 * SPROG — tokens, skala, herkomstfarver, rækkemønstre — ikke som indhold.
 * Hvor det modsagde en vedtaget beslutning (H051, R14, lilla agentnavn,
 * kursiv modeltekst), vandt den vedtagne. Se product-ai/F079_v1.md og
 * DESIGN_LOG.md (VIS-002 ff.). Mockup'ens inline-styles på de
 * LAYOUTBÆRENDE elementer er flyttet hertil som klasser, fordi et inline
 * grid-template ikke kan brydes om af en media query — og bogholderen
 * godkender fra telefonen.
 *
 * FARVE ER HERKOMST (VIS-002). Lilla KUN på tekst sprogmodellen har skrevet.
 * Grøn KUN det systemet har kontrolleret mod kundens data. Blæk er
 * mennesket og den primære handling, links, det aktive menupunkt og fokus.
 * Rød er stop, gul er venter. `--accent` ER blæk — den er ikke lilla, og
 * den må ikke blive det: skabelonerne bruger den til ting der ikke er
 * modeltekst.
 *
 * Klasserne fra den gamle, funktionelle flade (table.grid, form.stack,
 * p.error, .flash) står stadig nederst: login, brugeradministration og
 * fejlsider bruger dem, og de hører til andre features.
 */

/* F079 — SKRIFTEN LIGGER PÅ VORES EGEN SERVER.
   Geist og Geist Mono (SIL OFL 1.1, vercel/geist-font v1.7.2) er de
   officielle variable woff2-filer, UÆNDREDE — kun omdøbt fra
   `Geist[wght].woff2`, så stien ikke skal URL-kodes. Licensen ligger ved
   siden af (`fonts/OFL.txt`). Filerne hentes fra `'self'`, så CSP'ens
   `font-src 'self'` og `style-src 'self'` gælder uændret, og der går ingen
   forespørgsel ud af huset (H053: Google Fonts blev afvist af CSP'en og
   sendte kundens IP til en tredjepart). `swap`: teksten tegnes med det
   samme i systemskriften og skifter, når filen er hentet. */
@font-face{
  font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/Geist-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');
}

:root{
  /* Neutrale, hue 250. NAVNENE ER DE GAMLE — skabelonerne og apps.css
     bygger på dem. `--ink-3` er 0.54 og ikke designets 0.60: 0.60 giver
     3,95:1 på hvidt og dumper WCAG 1.4.3; 0.54 giver ca. 5,1. */
  --paper:oklch(0.982 0.002 250);
  --card:oklch(1 0 0);
  --sunk:oklch(0.98 0.003 250);
  --hover:oklch(0.945 0.004 250);
  --ink:oklch(0.21 0.012 250);
  --ink-hover:oklch(0.32 0.012 250);
  --ink-2:oklch(0.46 0.012 250);
  --ink-3:oklch(0.54 0.01 250);
  --line:oklch(0.91 0.004 250);
  --line-2:oklch(0.95 0.003 250);
  --line-strong:oklch(0.88 0.005 250);
  /* Feltkanten er sin egen: `--line` som kant om et felt giver 1,24:1 og
     dumper 1.4.11 (ikke-tekstkontrast); 0.64 giver ca. 3,4. */
  --field:oklch(0.64 0.008 250);
  --underline:oklch(0.80 0.005 250);
  --selection:oklch(0.88 0.02 250);
  /* `--accent` er BLÆK. Se klassehovedet. */
  --accent:var(--ink);

  /* Modeltekst, hue 293. KUN på flader hvis indhold sprogmodellen skrev. */
  --model:oklch(0.50 0.17 293);
  --model-ink:oklch(0.45 0.16 293);
  --model-body:oklch(0.28 0.05 293);
  --model-muted:oklch(0.50 0.08 293);
  --model-bg:oklch(0.975 0.012 293);
  --model-line:oklch(0.90 0.04 293);

  /* Status. `--ok/--warn/--deny` er IKONFARVER og bruges aldrig som tekst
     — de når ikke 4,5:1. Tekst bruger `-fg`. */
  --ok:oklch(0.55 0.12 155);
  --warn:oklch(0.62 0.13 70);
  --deny:oklch(0.55 0.15 25);
  --ok-fg:oklch(0.42 0.09 155);
  --ok-bg:oklch(0.95 0.035 155);
  --ok-line:oklch(0.88 0.06 155);
  --warn-fg:oklch(0.48 0.11 60);
  --warn-bg:oklch(0.96 0.045 80);
  --warn-line:oklch(0.88 0.05 70);
  --deny-fg:oklch(0.48 0.13 25);
  --deny-bg:oklch(0.96 0.025 25);
  --deny-wash:oklch(0.97 0.02 25);
  --deny-line:oklch(0.88 0.06 25);
  --reject-fg:oklch(0.50 0.15 25);
  --reject-hover:oklch(0.97 0.02 25);
  --reject-line:oklch(0.90 0.03 25);
  --neutral-fg:oklch(0.45 0.015 250);
  --neutral-bg:oklch(0.95 0.004 250);

  --font-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,
    'Helvetica Neue',Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,
    'Liberation Mono',monospace;

  --r-xs:4px;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:10px;
}

*{box-sizing:border-box}

/* SKALAEN (VIS-004): brød 14/1.5 · sekundær 13 · etiketter 12 · modeltekst
   15 · sektion 20 · h1 28. Intet under 12 px, og ingen versaler — undtagen
   MODELTEKST-mærket, som skal kunne ses på afstand. */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* LINKS ER UNDERSTREGEDE (WCAG 1.4.1). Før var de blå uden streg, og
   farven alene skulle bære at noget kunne trykkes på. Nu er de blæk med
   en lys streg, der bliver mørk ved hover. Knapper, menupunkter og
   rækkelinks slår stregen fra i deres egne regler. */
a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--underline);
  text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* F079 — FOKUS ER ALTID SYNLIGT (WCAG 2.4.7/2.4.11). Fladen havde ingen
   fokusmarkering ud over browserens egen, og den eneste regel der fandtes
   (`.ta:focus`) var blå. Ringen er BLÆK og ikke lilla: lilla betyder
   modeltekst (VIS-002), og fokus er ikke noget modellen har skrevet.
   `:focus-visible` og ikke `:focus`, så et museklik ikke tegner en ring. */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Felter viser fokus i selve rammen. Ringen bliver stående ovenpå. */
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
::selection{background:var(--selection)}
/* Topbaren er sticky og 56 px høj. Uden luften her lander et anker
   (`#main`, en fejl i en formular) UNDER topbaren og kan ikke ses. */
html{scroll-padding-top:64px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;
  border-radius:var(--r-md);z-index:30;text-decoration:none}

/* ---------------------------------------------------------------- skallen */

/* Kun for skærmlæsere: teksten står i DOM'en, men fylder ingenting. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* F079 — TOPBAREN (56 px, sticky). Brand + selskab · «Spørg agenten» ·
   brugeren. Den står OVER `.app`-gridden, så sidebarens sticky-top og
   fremviserens (`.viewer`) regner fra 56 px og ikke fra 0. */
.top{position:sticky;top:0;z-index:10;height:56px;display:flex;align-items:center;gap:16px;
  padding:0 20px;background:var(--card);border-bottom:1px solid var(--line)}
.top-brand{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.brandmark{flex:none;width:24px;height:24px;border-radius:5px;background:var(--ink);color:#fff;
  font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.brandname{font-size:14px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap}
.brandsep{color:var(--underline)}
.tenant{font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* «Spørg agenten» ser ud som et felt, men ER et link til /spoerg. Ingen
   tekstmarkør og ingen ⌘K: den lover ikke at man kan skrive her. Ikonet er
   `--ink-2` og ikke lilla — spørgsmålet er brugerens, ikke modellens. */
.askbar{flex:0 1 520px;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:8px;
  min-height:36px;padding:0 12px;background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r-md);color:var(--ink-3);font-size:14px;text-decoration:none;min-width:0}
.askbar:hover{border-color:var(--field);color:var(--ink-2)}
.askbar .ic{color:var(--ink-2);margin:0}
.askbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user{flex:none;margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.askbar+.user{margin-left:0}
.avatar{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.user-id{display:flex;flex-direction:column;line-height:1.25;min-width:0;max-width:220px}
.user-mail{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:12px;color:var(--ink-3)}
.user-account{font-size:13px;white-space:nowrap}
.user form{margin:0}

/* SIDEBAREN (UX-005: kundefladen er LYS). 224 px, sticky under topbaren og
   med sin egen rulning, så en lang menu ikke ruller siden. */
.app{display:grid;grid-template-columns:224px 1fr;min-height:calc(100vh - 56px)}
.app.solo{grid-template-columns:1fr}
.nav{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  background:var(--paper);border-right:1px solid var(--line);padding:20px 14px;
  display:flex;flex-direction:column;gap:2px}
.navi{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;
  transition:background-color .12s ease,color .12s ease}
.navi:hover{background:var(--hover);color:var(--ink)}
/* Aktiv = lys grå flade + 600. Ingen streg i kanten — den var blå. */
.navi.on{background:var(--hover);color:var(--ink);font-weight:600}
.navi .ic{margin:0}
/* Tælleren var hvid på gult (ca. 3,5:1). Nu hvid på blæk, mono. */
.navi .ct{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:1.4;
  background:var(--ink);color:#fff;border-radius:var(--r-xs);padding:0 6px}
.nav-foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--line)}
.nav-foot .who{font-size:13px;color:var(--ink-3);line-height:1.5;word-break:break-word}

.main{padding:28px 32px 40px;max-width:1280px;width:100%;display:flex;flex-direction:column;gap:28px;min-width:0}
/* SIDEHOVEDET (F079): h1 28 overalt, undertekst højst 64 tegn bred. Ingen
   streg under — luften mellem sektionerne (28 px) skiller i stedet. */
.hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hd h1{margin:0;font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-0.02em}
.hd p{margin:6px 0 0;color:var(--ink-2);font-size:14px;max-width:64ch}
.hd .crumb{margin:0 0 8px;font-size:13px}
/* Forsidens datolinje over overskriften: mono 12, `--ink-3`. */
.hd p.dateline{margin:0 0 6px;font-size:12px;color:var(--ink-3)}
.hd-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* AI Act art. 50 (F025): ét sted i layoutet, på hver side.
   F079: NEUTRAL, som en fod. Den var blå som en oplysning der ville have
   opmærksomhed; den er en varedeklaration, og den står der hver gang. */
.ai-note{display:flex;gap:10px;align-items:flex-start;margin-top:8px;
  padding:16px 0 0;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ai-note b{font-weight:600;color:var(--ink)}

/* ------------------------------------------------------------------ kort */

/* F079: flade kort, radius 10, ingen skygge (VIS-007). Ingen
   `overflow:hidden` — den ville klippe en sticky fremviser og et fokusring
   der stikker ud over kanten. Overskrifter med egen baggrund får i stedet
   selv de runde hjørner. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);min-width:0}
.card>h2{margin:0;padding:14px 18px;font-size:14px;font-weight:600;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:9px 9px 0 0}
.card>h2 small{margin-left:auto;font-weight:400;color:var(--ink-3);font-size:12.5px}
.card-body{padding:16px 18px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.card-foot{padding:12px 18px;border-top:1px solid var(--line-2)}
/* «skrevet af systemet» i handlingens overskrift: neutral, ikke grøn — det
   er en oplysning om hvem der skrev, ikke en kontrol der er gået godt. */
.action-block>h2 small{font-size:12px;color:var(--ink-3)}

/* `.card.accent` var blå. Den bærer beslutningskortet og handlingen — det
   SYSTEMET har skrevet — og blå havde ingen betydning ud over «se her».
   Nu er det en stærkere kant og en hvid overskrift. */
.card.accent{border-color:var(--line-strong)}
.card.accent>h2{background:var(--card)}
.card.alarm{border-color:var(--deny-line)}
.card.alarm>h2{background:var(--deny-wash);border-bottom-color:var(--deny-line);color:var(--deny-fg)}
/* `.card.quoted` er en forklaring eller et citat — IKKE nødvendigvis
   modeltekst (apps- og koblingssiden bruger den til vores egen tekst). Den
   er derfor neutral; modeltekstens lilla bor på `.rationale-block`. */
.card.quoted{background:var(--sunk)}
.card.quoted>h2{color:var(--ink-2)}

/* ---------------------------------------------------------------- tabeller */

.tw{overflow-x:auto}
.card table,table.data{width:100%;border-collapse:collapse;font-size:14px}
/* INGEN RÆKKE-HOVER. En række er ikke en klikflade — linket sidder i den
   bærende celle (Test288), og en række der lyser op, lover et klik der
   ikke er der. Se `.row-link` for listen hvor hele rækken ER ét link. */
.card th,table.data th{text-align:left;font-weight:500;color:var(--ink-2);font-size:12px;padding:9px 16px;background:var(--sunk);border-bottom:1px solid var(--line);white-space:nowrap}
.card td,table.data td{padding:10px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
.card td.mono,table.data td.mono{font-size:13px}
.card tr:last-child td,table.data tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.sub{color:var(--ink-3);font-size:12.5px;margin-top:2px}
.row-warn{background:oklch(0.985 0.02 80)}
.row-deny{background:var(--deny-wash)}
.deny-text{color:var(--deny-fg);font-size:12.5px;margin-top:3px}

/* ------------------------------------------------- CSP-SIKRE HJÆLPEKLASSER

   H053 — HELE DENNE BLOK FINDES FORDI 41 INLINE-STILE ALDRIG HAR VIRKET.
   Appens egen CSP er `style-src 'self'` UDEN `unsafe-inline`, så browseren
   afviser hvert eneste `style="…"`-attribut på siden — målt i en rigtig
   browser 18-09-2026: «Refused to apply inline style because it violates the
   following Content Security Policy directive: style-src 'self'».

   Det var ikke synligt i en kodegennemgang, for attributterne STÅR der og ser
   rigtige ud. Det var kun synligt ved at se på siden. Følgen var at
   forbindelsessiden rendrede som en liste rå `<details>`-trekanter, og at
   gruppeoverskrifterne i menuen stod som sort brødtekst ud til kanten på hver
   eneste side — netop det «bygget i 1998»-udtryk kunden satte ord på.

   REGLEN ER DERFOR: ingen `style="…"` i en skabelon. Test252 håndhæver den.  */

.mt-9{margin-top:9px}
.mt-10{margin-top:10px}
.mt-11{margin-top:11px}
.mv-11{margin:11px 0 3px}
.dim{color:var(--ink-3)}
.txt-accent{color:var(--accent)}
.inl{display:inline}
.w30{width:30px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
/* Fritekstfeltet hvor man beder agenten om noget. Samme form tre steder. */
.ta{width:100%;box-sizing:border-box;font:inherit;padding:9px 10px;
  border:1px solid var(--field);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
/* `.ta:focus` er fjernet (F079): fokus er den globale ring ovenfor. */
.cols-flush{gap:0;margin-top:9px}
/* Etiketten over en kolonne inde i et kort — samme form som en `th`, men uden
   at være en tabel. */
.colhead{font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
/* Værktøjsnøglen under en handling. Mono kommer fra `.mono` ved siden af. */
/* Værktøjsnøglen er SYSTEMETS navn på et kald, ikke modeltekst — derfor
   ikke lilla (VIS-002). */
.toolkey{font-size:12.5px;color:var(--ink-2)}
/* De to ruder i et todelt kort. Stregen står mellem dem, ikke om dem. */
.pane-l{padding:13px 14px 0 0;border-right:1px solid var(--line-2)}
.pane-r{padding:13px 0 0 14px}
/* Citeret materiale: modellens egen tekst, et dokumentuddrag. Lys baggrund,
   så det er synligt HVOR citatet holder op. */
.quote-row{display:flex;gap:11px;align-items:flex-start;background:var(--sunk)}
/* Én forbindelse = én linje der kan foldes ud. Erstatter `$linje`/`$folde`,
   som var stilstrenge bygget i PHP og derfor lige så afvist som resten. */
.connrow{padding:12px 18px;border-bottom:1px solid var(--line-2)}
.connrow:last-child{border-bottom:0}
.connrow>summary{cursor:pointer;font-size:14px;display:block}

/* Gruppeoverskriften i menuen. Stod inline i `templates/layout.php` med en
   kommentar om at flytningen hertil «kunne ske senere». Den kunne ikke: uden
   den her regel har overskriften aldrig haft en stil i en rigtig browser.   */
.navgroup{margin-top:14px}
.navgroup>summary{padding:6px 10px;font-size:12px;font-weight:500;color:var(--ink-2);
  border-radius:var(--r-sm);cursor:pointer;list-style:none}
.navgroup>summary:hover{color:var(--ink)}
/* Gruppepunkterne er en liste man læser, ikke flader man sigter efter:
   lettere vægt og intet ikon (se layout.php). */
.navgroup .navi{font-size:13.5px;font-weight:400;padding:5px 10px}
.navgroup .navi.on{font-weight:600}
.navgroup>summary::-webkit-details-marker{display:none}
.navgroup>summary::marker{content:''}
/* F079: pilen er ikonet `caret_down` (layout.php), ikke en CSS-trekant. Den
   peger ned når gruppen er lukket og op når den er åben. */
.navgroup>summary .ic{margin:0 0 0 6px;vertical-align:-2px;color:var(--ink-3)}
.navgroup[open]>summary .ic{transform:rotate(180deg)}

/* ------------------------------------------ hvad agenten bemærkede (H058)

   DEN SER IKKE UD SOM MODELTEKST, og det er hele pointen. Modelteksten på
   bilagssiden er mærket og dæmpet, fordi den er utroet. Bemærkningerne er
   REGLENS — udledt af sammenligninger mod kreditorkartoteket, kontoplanen og
   historikken — og de skal derfor bære den modsatte visuelle besked: det her
   er kontrolleret, ikke gættet.

   INGEN FARVE PÅ EN AFVIGELSE ENDNU. En afvigende konto er ikke en fejl; den
   er en forskel et menneske skal se. Rødt ville sige «noget er galt», og det
   ville gøre den dag der KOMMER en rigtig advarsel (bankoplysninger der ikke
   stemmer) mindre værd.

   F079 — OG IKKE GRØN, SELV OM GRØN BETYDER «KONTROLLERET». Designet gjorde
   kassen grøn. Det ville være en visuel løgn i dag: «står allerede som
   kreditorposter» er IKKE et opslag, og «bogført» betyder «bogført af os»
   (H083-fundet, PROJEKTVIDEN «Hvad en bemærkning må påstå»). Kassen er
   NEUTRAL, indtil H083 er rettet og hver sætning i den er en kontrol. */

.noticed{border:1px solid var(--line);border-left:2px solid var(--ink-3);background:var(--sunk);
  border-radius:var(--r-md);padding:12px 14px;margin:0 0 12px}
.noticed>b{display:block;font-size:13px;font-weight:600;
  color:var(--ink);margin-bottom:5px}
.noticed ul{margin:0;padding-left:16px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.noticed li+li{margin-top:3px}

/* H069 — BETALINGSSPÆRRINGEN. Samme kasse, anden farve.
   Den er ikke rød for at skræmme: den er rød fordi den er den ENESTE
   bemærkning på siden der betyder «her kan der ikke bogføres». Havde den
   samme blå som resten, ville den ligne en oplysning man kunne læse
   bagefter — og så ville forskellen mellem «værd at vide» og «stop» ligge
   i ordlyden alene. Farven er den samme som `.t-deny`'s, så et nej ser ud
   som et nej overalt i huset.                                            */
.noticed.deny{border-color:var(--deny-line);border-left-color:var(--deny);background:var(--deny-wash)}
.noticed.deny>b{color:var(--deny-fg)}

/* --------------------------------------------------------- agenten (H052)

   HVEM ER DET DER HAR LAVET ARBEJDET. Siden viste agentens RESULTATER — et
   beløb, en konto — men aldrig at der var nogen. Det er forskellen mellem en
   indbakke med tal i og en kollega der har været igennem posten.

   DEN SIGER KUN HVAD DER ER MÅLT: hvor mange bilag agenten har læst, hvor
   mange den er i tvivl om, hvilken model der svarede og hvornår. Ingen
   modeltekst står her — sætningen er VORES, tallene er talt. Derfor skal den
   heller ikke bære AI-mærkningen; den står ét sted i layoutet i forvejen.

   DEN FYLDER ÉN LINJE. Fristelsen er et kort med et ansigt og en hilsen. Det
   er sjovt én gang og i vejen hver dag derefter.                            */

/* F079: kanten er `--line-strong` og ikke lilla. Linjen er VORES sætning
   med talte tal — ikke modeltekst (VIS-002). */
.agent{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border:1px solid var(--line);border-left:2px solid var(--line-strong);
  border-radius:var(--r-lg);background:var(--card);font-size:13px;color:var(--ink-2)}
.agent .who{font-weight:600;color:var(--ink);white-space:nowrap}
.agent .said{flex:1 1 auto;min-width:0}
.agent .meta{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
/* Handlingen hører til hos den der udfører den. «Læs dem igen» stod før alene
   midt på siden, uden noget at høre sammen med.                              */
/* HANDLINGEN OMBRYDES ALDRIG — METADATA GØR. Knappen står før `.meta` i
   DOM'en, så det er modelnavnet og tidspunktet der falder ned på anden linje
   når pladsen slipper op. Omvendt ville betyde at den ene ting man kan GØRE
   på linjen, er den der forsvinder først.                                   */
.agent form{margin:0;order:2}
.agent .meta{order:3}
.agent .btn.sm{white-space:nowrap}
.agent .warn{color:var(--warn-fg);font-weight:500}

/* H087 — `.warn` VIRKEDE KUN INDE I `.agent`.
   `bilag_list.php` og nu `bilag_detail.php` bruger klassen uden for
   agentkortet, og dér havde den ingen farve overhovedet: en advarsel der
   ser ud som brødtekst, er ikke en advarsel. Reglen her gælder alle steder;
   den ovenfor er stadig den stærkere inde i kortet.                        */
.warn{color:var(--warn-fg);font-weight:500}
.agent.idle{border-left-color:var(--line)}

/* ------------------------------------------------------- opsummering (H051)

   Sidens svar på «hvad skal jeg gøre nu». ÉT stort tal og to små: en række
   med fire lige store tal fortæller ikke hvad man skal kigge på, og så læser
   man dem alle fire hver gang. Tallene er links, fordi et tal man kan trykke
   på er en handling og et tal man ikke kan trykke på er en plakat.

   `.calm` er nul-tilstanden. Den er ikke grå og ikke skjult — «0 venter på
   dig» er et af de bedste svar siden kan give, og det skal man kunne se på
   afstand. Den mister kun sin farve, ikke sin vægt.                         */

.sum{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.sum a{display:flex;align-items:baseline;gap:8px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:12px 16px;color:var(--ink-2)}
.sum a:hover{border-color:var(--field)}
.sum b{font-variant-numeric:tabular-nums;letter-spacing:-0.02em;line-height:1}
.sum span{font-size:13px;color:var(--ink-3)}
/* Det store tal er BLÆK på en stærkere kant. Størrelsen bærer vægten
   (H051) — farven var blå og betød ikke andet end «se her». */
.sum-main{border-color:var(--line-strong)!important;background:var(--card)!important}
.sum-main b{font-size:26px;font-weight:600;color:var(--ink)}
.sum-main span{color:var(--ink-2)}
.sum-main.calm{border-color:var(--line)!important;background:var(--card)!important}
.sum-main.calm b{color:var(--ink-2)}
.sum-main.calm span{color:var(--ink-3)}
.sum-item b{font-size:17px;font-weight:600;color:var(--ink)}

/* Alderen er en oplysning man scanner, ikke læser: lysere end resten, og
   uden ombrydning så kolonnen bliver smal. Det præcise tidspunkt står i
   `title` — det er ikke væk, det er bare ikke dét man skal læse 50 gange. */
.age{color:var(--ink-3);white-space:nowrap}

/* HVEM VENTER DEN PÅ. «Dig» er den eneste der skal fange øjet; «Agenten»
   betyder at man ikke skal gøre noget, og et mærke der råber det, ville
   bruge opmærksomhed på ikke-arbejde.                                       */
/* NAVNENE ER `v-`-PRÆFIKSEDE MED VILJE. `.venter.agent` ramte også
   `.agent`-linjens regel ovenfor, og mærket i tabellen fik en ramme og lignede
   en knap. Set på den rendrede side — ikke i koden, hvor de to regler står
   halvtreds linjer fra hinanden og ikke ligner hinanden.                     */
.venter{font-size:12.5px;white-space:nowrap}
.venter.v-dig{color:var(--accent);font-weight:600}
.venter.v-agent{color:var(--ink-3)}

/* AGENTENS TVIVL. Kun «lav» får et mærke — se listeskabelonen. Det sidder
   klods op ad beløbet, fordi det er tallet man skal bedømme.                */
/* Cellen må ikke brydes om: mærket skal stå PÅ tallets linje. Uden det
   faldt «!» ned under beløbet og lignede en fejl i sig selv (set i en
   gennemgang af den rendrede side, ikke i koden).                          */
.card td.num{white-space:nowrap}
.conf-low{display:inline-block;margin-left:5px;width:16px;height:16px;line-height:16px;
  text-align:center;border-radius:50%;background:var(--warn-bg);
  color:var(--warn-fg);font-size:12px;font-weight:700;cursor:help;
  font-family:var(--font-sans)}

/* ------------------------------------------------------------------ mærker */

/* Hver etiket når mindst 4,5:1, og teksten siger det farven siger — en
   etiket skal kunne læses af den der ikke ser farver. `.t-run` («hos
   agenten», «i gang») er NEUTRAL blæk: arbejde der ikke venter på nogen,
   skal ikke trække opmærksomhed, og lilla er modeltekst (VIS-002).
   `.t-off` var 3,15:1 og er rettet. */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1.4;padding:2px 8px;border-radius:var(--r-xs);font-weight:500;white-space:nowrap}
.t-ok{background:var(--ok-bg);color:var(--ok-fg)}
.t-wait{background:var(--warn-bg);color:var(--warn-fg)}
.t-deny{background:var(--deny-bg);color:var(--deny-fg)}
.t-run{background:var(--hover);color:var(--ink)}
.t-off{background:var(--neutral-bg);color:var(--neutral-fg)}

/* ------------------------------------------------------------------ knapper */

/* PRIMÆR ER BLÆK (UI-003), og der er højst én pr. visning. «Afvis» er rød
   KONTUR, aldrig fyldt og aldrig større end den primære (UI-002): en
   fejlklikket afvisning koster en kørsel. Højden er 36 px på en skærm og
   44 px under 640 px — som px-litteral i mobilblokken, fordi Test79 læser
   tallet og ikke en variabel. */
.btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 14px;
  border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--card);
  color:var(--ink);font-size:14px;font-weight:500;line-height:1.2;font-family:inherit;
  cursor:pointer;text-decoration:none;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.btn:hover{border-color:var(--field);color:var(--ink)}
.btn.p{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.p:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:#fff}
.btn.p:active{background:oklch(0.16 0.012 250);border-color:oklch(0.16 0.012 250)}
.btn.d{background:var(--card);color:var(--reject-fg);border-color:var(--reject-line)}
.btn.d:hover{background:var(--reject-hover);border-color:var(--deny-line);color:var(--reject-fg)}
.btn.sm{min-height:30px;padding:4px 10px;font-size:13px;border-radius:var(--r-sm)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}

/* --------------------------------------------------------------- nøgletal */

/* F079 — ÉT KORT, SKILT AF 1 PX. Skillelinjerne er gridens `gap` med
   kortets kantfarve bagved — så findes der ingen celle-kanter der skal
   passe sammen, når gridden brydes om på en telefon. */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.kpi.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi>div{background:var(--card);padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi span{font-size:12.5px;color:var(--ink-2)}
.kpi b{font-family:var(--font-mono);font-size:22px;font-weight:500;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.kpi b.sm{font-size:15px;padding-top:5px}
.kpi i{font-style:normal;font-size:12px;color:var(--ink-3)}

/* ------------------------------------------------------------------ rækker */

.rule{display:flex;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.rule.mid{align-items:center;gap:14px}
.rule:last-child{border-bottom:0}
.rule .grow{flex-grow:1;min-width:0}
.rule b{font-weight:500}
.ic{flex:none;margin-top:1px}
/* F079 — STATUSFARVEN KOMMER FRA KLASSEN. Stregen er `currentColor`
   (Icon::tone), og farven sættes her — ikonfarverne, aldrig tekstfarverne. */
.ic-ok{color:var(--ok)}
.ic-warn{color:var(--warn)}
.ic-deny{color:var(--deny)}
.ic-muted{color:var(--ink-3)}
.crumb a.back{display:inline-flex;align-items:center;gap:4px}
.crumb a.back .ic{margin:0}
.noticed>b .ic{vertical-align:-2px;margin:0}
.viewer>h2 .ic{margin:0;color:var(--ink-2)}
.row-link .age{display:inline-flex;align-items:center;gap:4px}
.row-link .age .ic,.row-go .ic{margin:0}

/* ------------------------------------------------------------------- grids */

.cols{display:grid;gap:20px;align-items:start}
.cols-2{grid-template-columns:1fr 1fr}
.cols-wide{grid-template-columns:1.55fr 1fr}
.cols-detail{grid-template-columns:1fr 330px;gap:18px}
.stackcol{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ---------------------------------------------- godkendelsens to blokke */

/* De to beholdere SKAL kunne skelnes — af et menneske og af en test.
 * data-block er ikke pynt: Test46 læser præcis dem. */
.action-block{}
.rationale-block{}
.facts{display:grid;grid-template-columns:150px 1fr;gap:0 16px;font-size:14px}
.facts>span,.facts>b{padding:8px 0;border-bottom:1px solid var(--line-2)}
.facts>span{color:var(--ink-2)}
.facts>b{font-weight:500;min-width:0;overflow-wrap:anywhere}
/* GRØN = KONTROLLERET MOD KUNDENS DATA (VIS-002). `.note-ok` står kun hvor
   systemet har slået op og fundet det i orden. */
.note-ok{margin-top:14px;padding:10px 14px;background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--r-md);display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ok-fg);line-height:1.5}
/* ----------------------------------------------- MODELTEKST (F079, VIS-002)

   LILLA BETYDER «SKREVET AF SPROGMODELLEN» — og intet andet i huset. Ikke
   fokus, ikke hover, ikke agentens navn, ikke et ikon, ikke en status. Det
   er derfor farven kan bære en betydning: den står kun hvor teksten er
   utroet.

   INGEN KURSIV. Kursiv gjorde teksten sværere at læse uden at sige HVAD den
   var. Det siger mærket nu («MODELTEKST», mono, versal — husets eneste
   versaler), og det står FØR teksten, så det er læst før sætningen.

   Fladen er så lys at teksten (`--model-body`) har ca. 13:1, og mærket
   (`--model-ink` på hvidt) ca. 7:1. */
.model-text{margin:0;padding:14px 18px;background:var(--model-bg);color:var(--model-body);
  font-size:15px;line-height:1.55;font-style:normal;white-space:pre-wrap;overflow-wrap:anywhere}
.model-text p{margin:0}
.model-hd{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin:0;padding:10px 18px;
  background:var(--model-bg);border-bottom:1px solid var(--model-line)}
.badge-model{display:inline-flex;align-items:center;flex:none;font-family:var(--font-mono);
  font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.5;
  padding:0 6px;border-radius:var(--r-xs);background:#fff;color:var(--model-ink);
  border:1px solid var(--model-line);white-space:nowrap}
.model-warning{font-size:12.5px;color:var(--model-muted);font-weight:400}
/* Godkendelsens begrundelse: hele kortet er modeltekst. Advarselslinjen
   der stod der i forvejen (`.rationale-warning`, Test80) bliver stående —
   den skifter bare fra gul til modeltekstens dæmpede lilla. */
.card.rationale-block{background:var(--model-bg);border-color:var(--model-line)}
.card.rationale-block>h2{background:transparent;color:var(--model-body);border-bottom-color:var(--model-line)}
.card.rationale-block>h2 small{color:var(--model-muted)}
.model-hd .rationale-warning{margin:0;padding:0;background:none;border:0;color:var(--model-muted);font-size:12.5px}
.model-card{border-color:var(--model-line)}
.model-card>h2+.model-hd{border-top:0}
/* Bilagssidens begrundelse (inde i formularen): samme flade, egen ramme. */
/* F084a — `.why-model` er «Hvorfor?»-kortets modelflade (LÆSTE + VURDERING).
   Samme flade, derfor samme regel — ikke en kopi af værdierne (VIS-009). */
.model-box,.why-model{margin:12px 0;border:1px solid var(--model-line);border-radius:var(--r-lg);background:var(--model-bg)}
.model-box .model-hd,.why-model .model-hd{border-radius:9px 9px 0 0}
.model-box .model-note{margin:0;padding:10px 18px 0;font-size:12.5px;color:var(--model-muted)}
.model-box .model-text{padding-top:6px}
.model-box .model-when{margin:0;padding:0 18px 12px}
/* Revisionsudtrækket: ræsonnementet ligger i en tabelcelle. */
.rationale-block .model-hd b{font-weight:600;color:var(--model-body)}
/* H085 — mailens egen tekst. `pre-wrap` bevarer afsenderens linjeskift (et
   beløb i en kolonne holder op med at være en kolonne hvis teksten ombrydes),
   og `overflow-wrap:anywhere` holder en lang URL inde på siden. Loftet i
   højden gør at en mail med citeret historik ikke skubber alt andet ned —
   resten scroller i blokken frem for på siden. */
.mailtekst{margin:0;padding:14px 18px;max-height:22em;overflow:auto;background:var(--sunk);
  font-family:var(--font-sans);color:var(--ink-2);font-size:13px;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere}
/* `.rationale-warning` er husets gule «læs det her først»-linje og bruges på
   mange sider (delegering, fakturering, fortryd …) — ikke kun ved
   modeltekst. Inde i `.rationale-block` får den modeltekstens form (trin 6). */
.rationale-warning{margin:0;padding:10px 14px;border-bottom:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn-fg);font-size:12.5px}

/* ------------------------------------- «HVORFOR DETTE FORSLAG?» (F084a)

   HERKOMST VISES AF BEHOLDEREN (VIS-009). Det systemet skrev (FIK,
   KONTROLLER, råt input) står neutralt; det modellen skrev (LÆSTE,
   VURDERING, råt svar) står på modelfladen. Ingen grøn: modellens egen
   sikkerhed er et skøn, ikke en kontrol. Ingen skygge, ingen animation.
   Rå tekst i `pre` bag `details` (VIS-010), og en `pre` scroller i sig selv
   — aldrig siden vandret. Alle værdier er F079-tokens.                    */
.why .card-body{padding-top:12px}
.why-meta{margin:0 0 10px}
.why-older{margin:0 0 10px}
.why-none{margin:6px 0;font-size:13px;color:var(--ink-3)}
.why-jump{margin:6px 0 0}
.why-link{font-size:13px;font-weight:500;color:var(--ink-2)}
.why summary{display:flex;align-items:center;gap:6px;min-height:40px;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--ink);list-style:none}
.why summary::-webkit-details-marker{display:none}
.why summary::marker{content:''}
.why summary .ic{margin:0}
.why details>summary>.why-c-open{display:none}
.why details[open]>summary>.why-c-open{display:inline-flex}
.why details[open]>summary>.why-c-shut{display:none}
.why-count{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--ink-3)}
.why-sec{padding:14px 0;border-top:1px solid var(--line-2)}
.why h3{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:12px;font-weight:500;color:var(--ink-2)}
.why h4{margin:12px 0 6px;font-size:12px;font-weight:500;color:var(--ink-2)}
.why-src{margin-left:auto;font-size:12px;font-weight:400;color:var(--ink-3)}
.why-list{margin:0;padding-left:16px;font-size:14px;line-height:1.55;color:var(--ink)}
.why-list li+li{margin-top:3px}
.why-facts>b{font-family:var(--font-mono);font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums}
.why-sub{font-family:var(--font-sans);font-size:12px;font-weight:400;color:var(--ink-2)}
.why-model .why-sec{padding:14px 16px;border-top-color:var(--model-line)}
.why-model .facts>span,.why-model .facts>b{border-bottom-color:var(--model-line)}
.why-model .why-sec:first-of-type{border-top:0}
.why-model .why-conf{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--model-body)}
.why-model .model-text{margin-top:8px;padding:0;background:none}
.why-fold{border-top:1px solid var(--line-2)}
.why-pre{margin:0;padding:12px 14px;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;
  max-width:100%;max-height:28em;overflow:auto;box-sizing:border-box;border-radius:var(--r-md);
  background:var(--sunk);color:var(--ink-2);font-family:var(--font-mono);font-size:12px;line-height:1.5}
.why-pre+h4{margin-top:16px}
.why-model-pre{background:var(--model-bg);border:1px solid var(--model-line);color:var(--model-body)}
.why-model-hd{padding:10px 14px;margin-top:8px;border:1px solid var(--model-line);border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0}
.why-model-hd+.why-model-pre{border-radius:0 0 var(--r-md) var(--r-md)}
.why-hist td a{display:inline-flex;align-items:center}
@media (max-width: 640px){
  .why summary{min-height:44px}
  .why-link{display:inline-flex;align-items:center;min-height:44px}
  .why-hist td a{min-height:44px}
  .why-pre{max-height:20em}
  .why .why-hide{display:none}
}
@media print{
  .why-pre{max-height:none;overflow:visible}
}

/* Previewet fra Approval\PreviewRenderer bærer sine egne klasser. */
table.preview{width:100%;border-collapse:collapse;font-size:14px}
table.preview th{width:1%;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink-2);font-weight:400;padding:5px 14px 5px 0;border:0;background:none}
table.preview td{padding:5px 0;border:0;font-weight:500}
table.preview caption{text-align:left;padding:0 0 10px;color:var(--ink-3);font-size:12.5px;line-height:1.5}
.preview-warnings{margin:10px 0 0;padding:8px 12px 8px 28px;color:var(--warn-fg);background:var(--warn-bg);border-radius:var(--r-md);font-size:12.5px}
.preview-note{color:var(--ink-3);font-size:12px;margin:10px 0 0}

.flash{background:var(--sunk);border:1px solid var(--line);color:var(--ink);padding:10px 14px;border-radius:var(--r-md);font-size:13px}
.flash.bad{background:var(--deny-wash);border-color:var(--deny-line);color:var(--deny-fg)}
.empty{padding:16px 18px;color:var(--ink-3);font-size:14px}
.empty-ok{display:flex;align-items:center;gap:10px;margin:0}
.empty-ok .ic{margin:0;color:var(--ink-3)}

/* F079 — RÆKKEN DER ER ÉT LINK (UX-010). Kun hvor rækken har ÉN
   destination; aldrig `tr onclick`. Hover og fokus gælder hele rækken, og
   den er mindst 44 px høj — som px-litteral, så en test kan læse den. */
.row-link{display:flex;align-items:center;gap:14px;min-height:44px;padding:12px 18px;
  border-bottom:1px solid var(--line-2);color:var(--ink);text-decoration:none}
.row-link:last-child{border-bottom:0}
.row-link:hover{background:var(--hover);color:var(--ink)}
/* `--ink-3` på `--hover` er 4,3:1 — under gulvet. Den grå tekst i rækken
   bliver derfor `--ink-2` (ca. 6:1) så længe rækken lyser op. */
.row-link:hover .sub,.row-link:hover .age{color:var(--ink-2)}
.row-link:focus-visible{outline-offset:-2px}
.row-link .grow{flex:1 1 auto;min-width:0}
.row-link b{font-weight:500}
.row-link .sub{display:block}
.row-link .age{flex:none;margin:0}
.row-go{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--ink-2)}
.row-link:hover .row-go{color:var(--ink)}

/* ------------------------------------------------------------- responsivt */

@media (max-width: 860px){
  /* Topbaren bliver to rækker og holder op med at klæbe: brand + bruger
     øverst, «Spørg agenten» i fuld bredde under. E-mail og rolle skjules
     — avataren og «Min konto» bliver stående. */
  .top{position:static;height:auto;flex-wrap:wrap;gap:10px;padding:10px 16px}
  .top-brand{order:1;flex:1 1 0}
  .user{order:2;margin-left:auto}
  .askbar{order:3;flex:1 1 100%;max-width:none;margin:0}
  .user-id{display:none}
  .app{grid-template-columns:1fr;min-height:0}
  .nav{position:static;height:auto;overflow:visible;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .navgroup{margin-top:0}
  .navi{padding:6px 10px}
  .nav-foot{margin:8px 0 0;padding:8px 0 0;flex:1 1 100%}
  .main{padding:16px 16px 28px;gap:20px}
  .kpi,.kpi.k5{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Fem tal i to kolonner: det sidste fylder rækken, så der ikke står en
     tom grå celle. */
  .kpi.k5>div:last-child{grid-column:1/-1}
  .cols-2,.cols-wide,.cols-detail{grid-template-columns:1fr}
}
/* ARBEJDSLISTEN PÅ EN TELEFON (H051).

   Bogholderen godkender fra telefonen — det er derfor hele skallen bryder om
   i forvejen. Men tabellen gjorde det ikke: den fik en vandret scrollbar, og
   de to første kolonner (hvornår, hvem) åd hele bredden, så EMNET — det man
   leder efter — lå uden for skærmen. En liste man skal scrolle vandret i for
   at se hvad noget handler om, er ikke en liste.

   DER SKJULES KOLONNER FREM FOR AT KRYMPE DEM. En kolonne på 40 px er ikke
   læsbar, den er bare til stede. Afsender, konto og antal filer ryger:
   afsenderadressen er den bredeste og den mindst afgørende (emnet siger det
   samme kortere), kontoen er et opslag man laver når man åbner bilaget, og
   filantallet betyder kun noget når man skal se filen — altså på
   detaljesiden. Alle tre står stadig dér.

   TILBAGE ER DE FEM DER AFGØR EN BESLUTNING: hvor længe det har ligget, hvad
   det handler om, hvor meget, hvad status er, og hvem der venter.

   `.tw` beholder sin overflow-auto. Den er en bagstopper for en skærm der er
   endnu smallere end den vi regner med — ikke den normale tilstand.         */
@media (max-width: 720px){
  .card table td.hide-sm,.card table th.hide-sm{display:none}
  .card th,table.data th{padding:8px 10px}
  .card td,table.data td{padding:9px 10px}
  .age{font-size:12px}
}
/* PÅ EN TELEFON RYGER OGSÅ ALDEREN. «for 34 min. siden» er en bred kolonne
   for en oplysning man ikke handler på — og uden den er der plads til
   «Venter på», som er hele grunden til at man kigger på listen på en telefon.
   Alderen står stadig i `title` på cellen og på detaljesiden.

   GRÆNSEN ER 560 OG IKKE 720, så et lille tablet-vindue beholder den.       */
@media (max-width: 560px){
  .card table td.hide-xs,.card table th.hide-xs{display:none}
}
@media (max-width: 460px){
  .kpi,.kpi.k5{grid-template-columns:1fr}
  /* Opsummeringen bliver til én kolonne: tre kort ved siden af hinanden på
     430 px er tre kort man ikke kan læse tallene i. */
  .sum{flex-direction:column}
  .sum a{justify-content:flex-start}
  .hd{align-items:flex-start}
  .facts{grid-template-columns:1fr;gap:0}
  /* Etiketten står over værdien; stregen hører under PARRET, ikke mellem. */
  .facts>span{margin-top:8px;padding-bottom:0;border-bottom:0}
  .facts>b{padding-top:2px}
}

/* --------------------------------------------------------------------------
 * Den gamle funktionelle flade: login, adgangskoder, brugeradministration,
 * fejlsider. Andre features ejer de templates; klasserne bliver derfor stående.
 * -------------------------------------------------------------------------- */

main{padding:16px}
h1{font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-0.02em;margin:0 0 16px}
h2{font-size:14px;margin:20px 0 8px}
table.grid{border-collapse:collapse;width:100%;margin-bottom:16px;background:var(--card);font-size:14px}
table.grid th,table.grid td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
table.grid thead th{background:var(--sunk);font-size:12px;font-weight:500;color:var(--ink-2)}
table.grid td.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid td.mono{font-family:var(--font-mono);font-size:12.5px}
table.meta{max-width:720px}
form.stack{max-width:420px;margin:0 0 16px}
form.stack p{margin:0 0 12px}
/* FELTER (F079): 36 px, radius 6, og en kant der kan SES (`--field`,
   ca. 3,4:1 — `--line` var 1,24:1 og dumpede WCAG 1.4.11). */
form.stack input[type=text],form.stack input[type=email],form.stack input[type=password],form.stack select{
  padding:7px 10px;font-size:14px;min-height:36px;min-width:260px;max-width:100%;
  border:1px solid var(--field);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-family:inherit}
form.stack textarea,form.stack input[type=number],form.stack input[type=date]{
  padding:7px 10px;font-size:14px;border:1px solid var(--field);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font-family:inherit;max-width:100%}
form.stack small{color:var(--ink-3);font-size:12.5px}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}
form.decide{display:flex;gap:8px;flex-wrap:wrap;margin:0}
p.error{color:var(--deny-fg);background:var(--deny-wash);border:1px solid var(--deny-line);padding:10px 14px;border-radius:var(--r-md);max-width:720px;font-size:13px}
code.mono{font-family:var(--font-mono);font-size:12.5px;word-break:break-all}

/* --------------------------------------------------------------------------
 * F026–F028: mine data, revisor-udtræk og forbrug.
 *
 * Kun det de tre sider har brug for ud over de eksisterende klasser. Intet af
 * det rører en eksisterende regel.
 * -------------------------------------------------------------------------- */

/* Revisor-udtrækkets tabel. Den er bred med vilje — hver linje skal bære hele
   kæden — og ligger derfor i sin egen .tw-beholder med vandret scroll. */
table.audit{font-size:12px}
table.audit th{white-space:nowrap}
table.audit td{vertical-align:top}
tr.row-approval>td{background:var(--sunk)}

/* Modellens ræsonnement: lilla flade med MODELTEKST-mærket, tydeligt
   adskilt fra rækken ovenfor. Samme visuelle sprog som godkendelsessidens
   rationale-blok, fordi det er den samme slags tekst — og den skal
   genkendes som sådan (F079: ikke længere kursiv). */
tr.rationale-row>td{padding:0;border-top:0}
tr.rationale-row .rationale-block{margin:0;border-top:0}

/* Datofelterne i periodevælgeren. */
.card input[type=date]{padding:6px 10px;min-height:36px;font-size:14px;border:1px solid var(--field);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-family:inherit}
.card label{font-size:13px;color:var(--ink-2);margin-right:4px}

/* Faktalisten på /indstillinger/data. Punkterne er det vigtigste på siden. */
.action-block ul{margin:8px 0 0;padding-left:20px}
.action-block li{margin:0 0 6px;font-size:14px}

/* --------------------------------------------------------------------------
 * F015 — GODKENDELSE PÅ EN TELEFON.
 *
 * Bogholderen godkender fra telefonen. En godkendelse der kræver en 27-tommer
 * skærm bliver ikke givet, og så står agenten stille — derfor er det her en
 * produktfeature og ikke en finpudsning.
 *
 * Fire regler, og de er alle sammen kontrollerbare:
 *
 *  1. INTET ELEMENT ER BREDERE END SKÆRMEN. Ingen fast bredde over 360 px
 *     overlever ned i mobiltilstand; hver tabel ligger i sin egen .tw
 *     (overflow-x) ELLER foldes ud til kort (table.stack). Siden scroller
 *     aldrig vandret. Test79 læser denne fil og markup'en ved 360 px.
 *  2. TRYKFLADER ER MINDST 44 px. `.tap` sætter det eksplicit, og under
 *     640 px gælder det hver eneste .btn.
 *  3. GODKEND OG AFVIS LIGGER IKKE TÆT. De står i hver sin ende af en
 *     kolonne med mindst 18 px imellem, og "Afvis" er hverken den største
 *     eller den øverste knap. En tommel der glider skal ikke kunne afvise en
 *     kørsel.
 *  4. DE TO BLOKKE SMELTER IKKE SAMMEN. Handlingsbeskrivelsen (.action-block)
 *     og modellens begrundelse (.rationale-block) beholder deres egne rammer i
 *     alle bredder. Ingen regel herunder sætter display:contents eller fjerner
 *     rammen på dem — det er en sikkerhedsegenskab, ikke et designvalg, og
 *     Test80 gennemsøger mediaqueries for netop den slags regel.
 * -------------------------------------------------------------------------- */

/* Eksplicit trykflade. Står på knapper og links man skal kunne ramme i farten. */
.tap{min-height:44px}
a.tap{display:inline-flex;align-items:center}

/* ---- beslutningskortet øverst på godkendelsen ---- */
.decision-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px;padding:14px 18px}
.decision-facts>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.decision-facts span{font-size:12.5px;color:var(--ink-2)}
.decision-facts b{font-weight:500;font-size:14px;min-width:0;overflow-wrap:anywhere}
.decision-facts b.big{font-size:22px;letter-spacing:-0.02em}
.decision-facts i{display:block;font-style:normal;font-weight:400;color:var(--ink-3);font-size:12px}

.decision .decide{display:flex;gap:16px;align-items:center;padding:14px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.decision .decide .btn{min-height:44px}
.decision .decide .btn.p{flex:1 1 220px;justify-content:center;font-size:14px}
.decision .decide .btn.d{flex:0 0 auto}
.decide-hint{margin:0;padding:0 18px 14px;color:var(--ink-3);font-size:12.5px;overflow-wrap:anywhere}

/* ---- diff-listen: antal og sum står ALTID uden for <details> ---- */
.diff-summary{display:flex;gap:28px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.diff-summary>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.diff-summary span{font-size:12.5px;color:var(--ink-2)}
.diff-summary b{font-size:17px;font-weight:500;letter-spacing:-0.01em}
.difflist summary{display:flex;align-items:center;min-height:44px;padding:0 18px;font-size:14px;color:var(--ink);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--underline);text-underline-offset:3px}
.difflist summary:hover{color:var(--ink);text-decoration-color:var(--ink)}
.difflist[open] summary{border-bottom:1px solid var(--line-2)}
.difflist .tw{padding:0}

/* ---- beskedindstillinger: hele rækken er trykflade ---- */
.switchrow{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 18px;
  border-bottom:1px solid var(--line-2);cursor:pointer;font-size:14px}
.switchrow:last-of-type{border-bottom:0}
.switchrow input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;flex:none}
.switchrow .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.switchrow b{font-weight:500}

/* --------------------------------------------------------------------------
 * Tabeller der bliver til KORT.
 *
 * Samme markup i alle bredder — der er ikke en mobiludgave af listen der kan
 * komme i utakt med den rigtige. Hver celle bærer sin overskrift i
 * `data-label`, og under 640 px bliver hver række til et kort.
 *
 * `tr:first-child{display:none}` skjuler overskriftsrækken. Det gælder KUN
 * table.stack, hvor første række altid er overskrifterne (approvals_list,
 * dashboard, diff-listen) — og de overskrifter står stadig på hver celle.
 * -------------------------------------------------------------------------- */
@media (max-width: 640px){
  .card table.stack,
  .card table.stack tbody,
  .card table.stack tr,
  .card table.stack td,
  table.data.stack,
  table.data.stack tbody,
  table.data.stack tr,
  table.data.stack td{display:block;width:auto}
  .card table.stack tr:first-child,
  table.data.stack tr:first-child{display:none}
  .card table.stack tr,
  table.data.stack tr{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
    margin:0 12px 10px;padding:4px 0}
  .card table.stack td,
  table.data.stack td{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
    padding:6px 12px;border:0;text-align:left;overflow-wrap:anywhere}
  .card table.stack td::before,
  table.data.stack td::before{content:attr(data-label);flex:0 0 38%;
    font-size:12px;font-weight:500;color:var(--ink-2)}
  .card table.stack td.cell-action,
  table.data.stack td.cell-action{justify-content:flex-end}
  .card table.stack td.cell-action::before,
  table.data.stack td.cell-action::before{content:none}
  .card table.stack td.num,
  table.data.stack td.num{text-align:right}

  /* Trykflader. Under 640 px er ENHVER knap mindst 44 px høj. */
  .btn,.btn.sm{min-height:44px}
  .navi{min-height:44px}
  .askbar{min-height:44px}

  /* Beslutningskortet stables, og de to knapper ligger ikke tæt:
     "Godkend" fylder bredden og står øverst, "Afvis" står under med 18 px
     luft og uden primærvægt. */
  .decision-facts{grid-template-columns:1fr;gap:10px}
  .decision .decide{flex-direction:column;align-items:stretch;gap:18px}
  .decision .decide .btn{width:100%;justify-content:center}
  .decision .decide .btn.d{order:2}

  .row-link{flex-wrap:wrap;gap:8px 12px}
  .row-link .grow{flex-basis:100%;order:-1}
  .rule.mid{flex-wrap:wrap}
  .rule.mid .btn{width:100%;justify-content:center}
  .hd-actions{width:100%}
  .hd-actions .btn{flex:1 1 auto;justify-content:center}
}

/* 360 px er den smalleste telefon vi lover at virke på. Her må intet stå på
   en linje der kræver mere end skærmen: lange nøgler, e-mails og kontonumre
   brydes frem for at skubbe siden ud i siden. */
@media (max-width: 400px){
  .main{padding:14px 16px 24px}
  .mono,.facts>b,.decision-facts b,.nav-foot .who{overflow-wrap:anywhere}
  .top{padding:10px 12px;gap:8px}
  .user{gap:8px}
  .card>h2{flex-wrap:wrap}
  .card>h2 small{margin-left:0;flex-basis:100%}
  .diff-summary{gap:16px}
  .difflist summary{padding:0 12px}
  /* Previewets etiketkolonne må gerne bryde på en telefon. Den ligger i en
     .tw-beholder, men det skal helst ikke være dén der scroller. */
  table.preview th{white-space:normal;padding-right:10px}
  .tag{white-space:normal}
}

/* --------------------------------------------------------------------------
 * Udskrift. /revision skal kunne printes og lægges på et bord: navigation,
 * knapper og periodevælger forsvinder, tabellen får rammer der kan ses på
 * papir, og AI-oplysningen bliver stående — den hører til på hver side.
 * -------------------------------------------------------------------------- */
@media print{
  .top,.nav,.noprint,.hd-actions{display:none !important}
  .app{display:block}
  .main{padding:0}
  .card{border:0;box-shadow:none;padding:0;margin:0 0 10px}
  .tw{overflow:visible}
  table.audit{font-size:9px;width:100%}
  table.audit th,table.audit td{border:1px solid #999}
  a{color:inherit;text-decoration:none}
  @page{size:landscape;margin:10mm}
}

/* F064d — DETALJESIDENS TO SPALTER OG DOKUMENTFREMVISEREN.
   Siden var én smal kolonne med den halve skærm tom ved siden af, og
   bogholderen skulle hente fakturaen ned som en fil for at læse det tal han
   skulle taste. `.split-2` deler skærmen: arbejdet til venstre, dokumentet
   til højre.
   GRIDDEN ER BRØKER OG IKKE EN FAST BREDDE. En fast pixelbredde til
   fremviseren ville være rigtig på præcis én skærm.
   H122: 4fr/3fr og ikke 1fr/1fr. Formularen har fire felter pr. linje og
   blev klemt; dokumentet bliver ikke smallere end før ved 1440 px og op,
   fordi `.main` på bilagssiden samtidig må blive bredere (se H122 nedenfor).
   `.split` UDEN `.split-2` ER ÉN SPALTE. Er der intet at vise, må venstre
   side fylde det hele — en tom højrespalte er værre end ingen.
   UNDER 1100px STABLES DER. En PDF ved siden af en formular på en smal skærm
   giver to ting der begge er for smalle. Dokumentet lægger sig da ØVERST,
   fordi det er det man læser før man taster. */
.split{display:grid;gap:14px;align-items:start}
.split-2{grid-template-columns:minmax(0,4fr) minmax(0,3fr)}
.split-l{display:flex;flex-direction:column;gap:14px;min-width:0}
.split-r{min-width:0}
/* STICKY, SÅ DOKUMENTET BLIVER STÅENDE mens man ruller ned gennem felterne.
   `top` er luften over kortet; `--h` er højden: skærmen minus toppen og
   minus luften i bunden. */
/* F079: 70 = topbarens 56 + 14 luft. Med top:14 gled kortets overskrift
   ind under topbaren. */
.viewer{position:sticky;top:70px}
.viewer>h2{word-break:break-all}
/* RAMMEN ER HØJ MED VILJE. En A4-side i halv skærmbredde er høj, og en
   fremviser man skal rulle i for at se den øverste tredjedel af en faktura,
   sparer ingen tid. 78vh er så meget som der kan være uden at kortets
   overskrift og hentelinket ryger uden for skærmen. */
.viewer .doc{display:block;width:100%;height:78vh;border:0;border-top:1px solid var(--line-2);background:var(--card)}
.viewer>p.sub{padding:9px 14px;margin:0;border-top:1px solid var(--line-2)}
@media (max-width: 1100px){
  .split-2{grid-template-columns:minmax(0,1fr)}
  /* DOKUMENTET ØVERST når der stables. */
  .split-r{order:-1}
  .viewer{position:static}
  .viewer .doc{height:60vh}
}

/* H009 — LINJETABELLEN I BOGFØRINGSFORMULAREN.
   Felterne skal kunne stå ved siden af hinanden i en tabelcelle uden at
   sprænge rækken. `form.stack input` har en min-bredde på 260px, som er
   rigtig for et felt der står alene i en kolonne og forkert for fire felter
   på en linje. */
table.linjer td{padding:6px 8px;vertical-align:top}
table.linjer th{padding:6px 8px}
/* SPECIFICITETEN SKAL VÆRE HØJERE END `form.stack input`, som sætter en
   min-bredde på 260px. Den er rigtig for et felt der står alene i en kolonne
   og forkert for fire felter i en tabelrække — uden det her skubber rækken en
   vandret rullebjælke frem, og så kan man ikke se momskoden. */
form.stack table.linjer input,form.stack table.linjer select,
table.linjer input,table.linjer select{min-width:0;width:100%;max-width:none;box-sizing:border-box}
table.linjer td:nth-child(1){width:34%}
table.linjer td:nth-child(2){width:16%}
table.linjer td:nth-child(3){width:26%}
/* DEN RÆKKE FEJLEN SIDDER I, MÆRKES. En besked der siger at beløbet ikke kan
   læses, uden at pege på rækken, er en besked man skal lede efter svaret på. */
table.linjer tr.fejl td{background:var(--deny-wash)}
table.linjer tr.fejl input,table.linjer tr.fejl select{border-color:var(--deny)}

/* H122 — BILAGSSIDEN FÅR DEN PLADS DEN ALLEREDE HAR.
   `form.stack{max-width:420px}` låste bogføringsformularen — og dermed
   linjetabellen — til 420 px uanset hvor bred venstre spalte var: konto,
   beløb, moms og tekst blev klemt til 57-121 px. I venstre spalte følger
   formularen spalten; tabellen fylder formularen.
   TEKSTEN HOLDES LÆSBAR. En bemærkning eller en begrundelse i 900 px bredde
   er en linje man mister i. 72ch er en læselængde, ikke en px-bredde. */
.split-l form.stack{max-width:none}
table.linjer{width:100%}
.split-l form.stack>p,
.split-l form.stack .noticed p,.split-l form.stack .noticed li,
.split-l form.stack .model-box p{max-width:72ch}
/* ARBEJDSFLADE ≠ LÆSESIDE. `.main` er 1280 px (F079) fordi en læseside ikke
   bliver bedre af at blive bredere. Bilagssiden er en arbejdsflade med et
   dokument ved siden af formularen; den må bruge skærmen. Kun bilagssiden
   har `.split-2` (fordelingen 4fr/3fr står i F064d-blokken ovenfor). */
.main:has(.split-2){max-width:1760px}

/* H078 del B — valget mellem flere ubekræftede betalingsoplysninger.
   Klassen findes HER og ikke som et style-attribut: `style-src 'self'`
   afviser inline-stil uden en linje i nogen logfil, og 41 sådanne
   attributter blev fundet under F064c ved at åbne siden og læse konsollen.
   En stil man ikke har set virke, er en hensigt. */
.noticed fieldset { border: 1px solid var(--line-strong); border-radius: var(--r-sm);
                    padding: .6rem .8rem; margin: .6rem 0; }
.noticed legend   { font-weight: 600; padding: 0 .3rem; }
label.valg        { display: block; padding: .25rem 0; }
label.valg input  { margin-right: .5rem; }
label.valg .sub   { margin-left: .5rem; }

/* F032b — VENTETILSTANDEN PÅ /spoerg.
   Klasserne står HER og ikke som style-attributter: CSP'en er
   `style-src 'self'` uden `unsafe-inline`, så en inline-stil bliver afvist
   uden en linje i nogen logfil (H053, målt i en rigtig browser).

   Pulsen sidder på det SIDSTE kald i listen — det der er i gang. Den er det
   ene sted på fladen hvor der er bevægelse, og den findes fordi en liste der
   står helt stille ikke kan skelnes fra en side der er gået i stå.

   `prefers-reduced-motion: reduce` slår den fra og sætter en statisk markering
   i stedet. Bevægelsen er en OPLYSNING («det her kald er i gang»), og en
   oplysning må ikke forsvinde fordi animationen gør. */
ol.working{margin:0;padding-left:18px}
ol.working li{padding:3px 0;border-bottom:1px solid var(--line-2)}
ol.working li:last-child{border-bottom:0}
ol.working li .sub{display:inline;margin-left:6px}

ol.working li.pulse{animation:envoy-pulse 1.4s ease-in-out infinite}
@keyframes envoy-pulse{
  0%,100%{opacity:1}
  50%{opacity:0.45}
}
@media (prefers-reduced-motion: reduce){
  ol.working li.pulse{animation:none;font-weight:600}
  /* F079: de 120 ms farveovergange er pynt og falder væk. */
  .btn,.navi{transition:none}
}

/* F087a — BETALINGSBLOKKEN i bogføringsformularen på /bilag/{id}.
   Felterne fylder blokkens bredde (også på 360 px), trykfladerne er 44 px,
   og lange labels og hjælpetekster brydes i stedet for at skubbe siden ud. */
form.stack fieldset.betaling{border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:10px 14px 4px;margin:0 0 14px;min-width:0}
form.stack fieldset.betaling legend{font-weight:600;padding:0 6px}
form.stack fieldset.betaling label,form.stack fieldset.betaling small,
form.stack fieldset.betaling .sub{display:block;overflow-wrap:anywhere}
/* Hjælpetekster og noter i brødtekstens størrelse og en læsbar grå: det er
   dem, der skal forhindre en forkert FI-betaling. `.warn` beholder sin farve. */
form.stack fieldset.betaling small,form.stack fieldset.betaling .sub{font-size:14px;color:var(--ink-2);line-height:1.5}
form.stack fieldset.betaling .warn{color:var(--warn-fg)}
form.stack fieldset.betaling select,form.stack fieldset.betaling input[type=text]{
  width:100%;min-width:0;min-height:44px;box-sizing:border-box}
form.stack fieldset.betaling [aria-invalid="true"]{border-color:var(--deny-line);background:var(--deny-wash)}
form.stack fieldset.betaling .tap{min-height:44px}
/* `display:block` ovenfor må ikke slå `hidden` ihjel — bilag.js skjuler med det. */
form.stack fieldset.betaling [hidden]{display:none}
/* H089-historikkens valg som knap (D6): ser ud som et link, trykflade 44 px. */
button.linkknap{background:none;border:0;padding:0 2px;margin:0;font:inherit;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--underline);cursor:pointer;
  min-height:44px;overflow-wrap:anywhere}
/* F087b — kildemærket under hvert felt, sammenligningen og den gule
   advarsel ved en ny modtager. 14 px, --ink-2, line-height 1.5 som resten
   af blokkens hjælpetekster; «Fra dokumentet» og advarslen i --warn-fg. */
form.stack fieldset.betaling .betaling-kilde{font-size:14px;line-height:1.5;color:var(--ink-2)}
form.stack fieldset.betaling .betaling-kilde.warn{color:var(--warn-fg)}
.noticed.warn-blok{border-color:var(--warn-line);border-left-color:var(--warn-fg);background:var(--warn-bg)}
.noticed.warn-blok>b{color:var(--warn-fg)}
/* QA F7 — overskriften i blokkens noter i brødtekstens størrelse, ikke 13 px. */
form.stack fieldset.betaling .noticed>b{font-size:14px;line-height:1.5}
form.stack fieldset.betaling details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;
  font-size:14px;color:var(--ink-2)}
form.stack fieldset.betaling .noticed label.valg{display:flex;gap:8px;align-items:flex-start;min-height:44px}
form.stack fieldset.betaling .noticed input[type=checkbox]{min-width:20px;min-height:20px;margin-top:2px}
/* F102 — ét betalingsflow: knapperne i godkendelsesboksen, sammenligningen og beløbet. */
.bv-knapper{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
dl.bv-sammenligning{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:6px 0}
dl.bv-sammenligning dt{font-weight:500}
dl.bv-sammenligning dd{margin:0}
.bv-beloeb .bv-tal{white-space:nowrap}
@media (max-width: 767px){
  /* Design: stablet lodret i fuld bredde; «Til manuel» står nederst (UI-002). */
  .bv-knapper{flex-direction:column;align-items:stretch}
  .bv-knapper .tap{width:100%}
  dl.bv-sammenligning{grid-template-columns:1fr}
  form.stack button.btn.p{width:100%}
}
table.betaling-sammenligning{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;
  color:var(--ink-2);margin:0 0 10px}
table.betaling-sammenligning th{text-align:left;font-weight:500;padding:4px 8px 4px 0}
table.betaling-sammenligning td{padding:4px 8px 4px 0;overflow-wrap:anywhere}

/* F100 — Bogføringsassistenten (graphic-design/F100_visual_v1.md). Kun
   eksisterende tokens. Lilla kun på modelteksten og `.as-src.model`; grøn kun
   på serverens kontrol; den aktive opsummering har 2 px blæk-venstrekant. */
.as-state{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.tag.as-direct{font-weight:600;box-shadow:inset 0 0 0 1px var(--field)}
.as-thread{display:flex;flex-direction:column;gap:12px;min-width:0}
.as-turn{display:flex;flex-direction:column;gap:12px;min-width:0}
.as-turn+.as-turn{margin-top:8px}
.as-thread>[tabindex="-1"]:focus,.as-turn>[tabindex="-1"]:focus{outline:2px solid var(--ink);outline-offset:2px}
.as-msg{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;max-width:72ch;
  font-size:14px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.as-msg>p{margin:0}
.as-msg>p.as-text{white-space:pre-wrap}
.as-msg-hd{font-size:12px;font-weight:500;color:var(--ink-2);margin:0 0 4px}
.as-msg-hd .mono{font-size:12px;color:var(--ink-3);font-weight:400}
.as-files{gap:8px;margin:8px 0 0;padding:0;list-style:none}
.as-file{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 8px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);font-size:13px;flex-wrap:wrap}
.as-file b{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.as-file .mono{font-size:12px;color:var(--ink-3)}
.as-missing{margin:0;padding:10px 18px;border-top:1px solid var(--line-2);background:var(--card);
  font-size:13px;font-weight:500;color:var(--ink-2)}
.as-missing b{color:var(--ink);font-weight:600}
.as-summary{border-left:2px solid var(--ink)}
.as-summary.is-old{border-left:1px solid var(--line)}
.as-summary.is-old .decision-facts b{color:var(--ink-2)}
.as-side{position:sticky;top:70px;min-width:0}
.as-side .as-req-card{max-height:calc(100vh - 84px);overflow:auto}
.as-req-fold>summary{min-height:44px;display:flex;align-items:center;gap:6px;padding:0 16px;font-size:14px;
  font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.as-req-fold>summary::-webkit-details-marker{display:none}
.as-count{font-size:13px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
table.as-req{width:100%;border-collapse:collapse}
table.as-req th{text-align:left;font-size:13px;font-weight:500;color:var(--ink-2);padding:10px 12px 10px 16px;
  vertical-align:top;background:none;border-bottom:1px solid var(--line-2)}
table.as-req td{padding:10px 8px;font-size:14px;font-weight:500;color:var(--ink);vertical-align:top;
  border-bottom:1px solid var(--line-2);overflow-wrap:anywhere}
table.as-req td .mono{font-size:13.5px}
table.as-req td.as-st{padding:10px 16px 10px 0;text-align:right;white-space:nowrap}
table.as-req tr.as-bad td,table.as-req tr.as-bad th{background:var(--deny-wash)}
table.as-req tr.as-opt th{border-top:1px solid var(--line);padding:12px 16px 4px;font-size:12px;color:var(--ink-3)}
.as-src{display:block;margin-top:2px;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--ink-3)}
.as-src.model{color:var(--model-muted)}
.as-foot{font-size:13px;line-height:1.5;color:var(--ink-2)}
.as-send{display:flex;justify-content:flex-end;margin-top:12px}
#skriv label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin:12px 0 4px}
#skriv label:first-of-type{margin-top:0}
.as-erase{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media (max-width: 860px){
  .as-side{position:static;order:-1}
  .as-side .as-req-card{max-height:none;overflow:visible}
}
@media (max-width: 640px){
  .as-summary .decide{gap:24px}
  .as-file{flex-basis:100%}
  .as-file .btn{min-height:44px}
}
@media (max-width: 560px){
  table.as-req th,table.as-req td{display:block}
  table.as-req th{padding:10px 16px 0;font-size:12.5px;border-bottom:0}
  table.as-req td.as-st{text-align:left;padding:0 16px 10px}
}

/* F104 — regelbogen. Tælleren i en foldet menugruppe (beslutning 1); regel-
   rækkernes mønstre brydes, og knapperne stables i fuld bredde på mobil. */
.navgroup>summary .ct{margin-left:6px;font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:1.4;
  background:var(--ink);color:#fff;border-radius:var(--r-xs);padding:0 6px}
.regel .moenster,td.moenster{overflow-wrap:anywhere}
.regel .knapper{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.regel .knapper form{display:inline}
.regel details.flere,.regel details.spor{margin-top:6px}
.regel .noticed{margin-top:8px}
/* Momskoden hører kun til «Momspligtig» (UX-010): uden JS skjules panelet, når «Momsfri» er valgt. */
.rb-moms input[value="fri"]:checked ~ .rb-pligtig{display:none}
@media (max-width: 767px){
  .regel .knapper{flex-direction:column;align-items:stretch}
  .regel .knapper .btn{width:100%;min-height:44px;justify-content:center}
  /* UI-002: knapperne i «Lært automatisk»-tabellen er mindst 44 px høje. */
  table.stack .btn.sm{min-height:44px}
}

/* F108 — «Model og forbrug» (/model/forbrug). Fieldsets som betalingsblokken,
   selects i fuld bredde (36 px, 44 px på mobil, UI-002), kontakterne er `.switchrow`. */
form.stack.modelvalg{max-width:560px}
form.stack fieldset.modelvalg{border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:10px 14px 4px;margin:0 0 14px;min-width:0}
form.stack fieldset.modelvalg legend{font-weight:600;padding:0 6px}
form.stack fieldset.modelvalg select{width:100%;min-width:0;min-height:36px;box-sizing:border-box}
form.stack fieldset.modelvalg .switchrow{padding:10px 0;border-bottom:0}
form.stack fieldset.modelvalg small{display:block;overflow-wrap:anywhere}
@media (max-width: 767px){
  form.stack fieldset.modelvalg select{min-height:44px}
}

/* H237: modpartens fejlsvar på godkendelsen. Lange, ubrudte JSON-strenge må ikke sprænge kortet. */
.fejlsvar{margin-top:6px;min-width:0;overflow-wrap:anywhere}
.rule .grow .sub{overflow-wrap:anywhere}
.fejlsvar-felter{margin:4px 0 6px;padding-left:18px;font-size:13px;overflow-wrap:anywhere}
.fejlsvar summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
@media (max-width:640px){.fejlsvar summary{min-height:44px;padding:12px 0;box-sizing:border-box}}
.fejlsvar-krop{margin:6px 0;padding:8px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:4px}

/* F118a — bilagssiden: kendsgerningerne som én linje under overskriften, Bogfør,
   Til manuel og Ignorér i én række (UI-002: Ignorér yderst til højre, 44 px), og
   «Mere om bilaget» foldet. Under 768 px står Bogfør i fuld bredde (reglen for
   `form.stack button.btn.p` ovenfor) og de to andre under den, delt ligeligt. */
.hd p.meta{overflow-wrap:anywhere}
.bilag-raekke{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 12px}
.bilag-raekke .hoejre{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.card.mere>details>summary{display:list-item;min-height:44px;box-sizing:border-box;padding:12px 18px;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.card.mere>details[open]>summary{border-bottom:1px solid var(--line-2)}
.card.mere section+section{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}
.card.mere h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink)}
.card.mere form.stack{margin:0 0 8px}
@media (max-width: 767px){
  .bilag-raekke .hoejre{margin-left:0;width:100%}
  .bilag-raekke .btn{justify-content:center}
  .bilag-raekke .hoejre .btn{flex:1 1 0}
  /* QA F118a fund 1: mindst 16 px mellem Bogfør og de to andre, så et upræcist
     tryk på Bogfør ikke rammer Ignorér. */
  .bilag-raekke{row-gap:16px}
  /* Design F118a fund 3: opret-linket er en trykflade på 44 px. */
  a.opret-link{display:inline-flex;align-items:center;min-height:44px}
}

/* F118b — formularen grupperet: kernefelterne i to kolonner (én under 720 px),
   «Flere felter» som en foldet gruppe med de aktuelle værdier i summary, og
   regelbogen og opret-blokken som foldede kort i venstre spalte. */
.kerne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.kerne>p{min-width:0}
/* Design F118b fund 1: felterne fylder deres kolonne og aldrig mere (ellers skubber
   en lang leverandørliste griddet ud over kortet). */
.kerne input,.kerne select{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
details.flere{margin:0 0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 12px}
details.flere>summary{min-height:44px;box-sizing:border-box;padding:12px 0;cursor:pointer;font-weight:600;
  overflow-wrap:anywhere}
details.flere>summary .sub{font-weight:400}
details.flere[open]>summary{margin-bottom:8px}
.card.opret>details>form,.card.opret>details>p{padding:0 18px}
@media (max-width: 719px){
  .kerne{grid-template-columns:minmax(0,1fr)}
}

/* F124a — BESLUTNINGSBJÆLKEN (ui-ux/F124_design_v1.md §6.1, §6.2, §12). Alt nedenfor
   rammer kun markup, som skabelonerne tegner med flaget. Bjælken er formularens sidste
   element og klæber til bunden af skærmen, så længe formularen er i billedet. `.card`
   har ingen `overflow:hidden` (se ovenfor), ellers ville sticky ikke virke. */
.bjaelke{position:sticky;bottom:0;z-index:4;margin:16px -18px 0;padding:10px 18px;
  background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 12px -12px oklch(0.2 0.01 250 / .35)}
.bjaelke.alene{margin:12px 0 16px;border:1px solid var(--line);border-radius:var(--r-lg)}
.bjaelke-knapper{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.bjaelke-knapper .btn{justify-content:center;white-space:nowrap}
.bjaelke-knapper .btn.p{margin-right:auto}
form.stack .bjaelke-knapper button.btn.p{width:auto}
.bjaelke .kort{display:none}
/* Grunden står med ikon og tekst — aldrig kun som farve. */
.bjaelke-grund{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 8px;font-size:13px;font-weight:500}
.bjaelke-grund.deny{color:var(--deny-fg)}
.bjaelke-grund.warn{color:var(--warn-fg)}
.bjaelke-grund a{display:inline-flex;align-items:center;min-height:44px}
/* `display:flex` ovenfor slår browserens `[hidden]`; bilag-flow.js skjuler grunden,
   når «via» ikke længere er valgt. */
.bjaelke-grund[hidden]{display:none}
/* Sticky må ikke dække det fokuserede felt (WCAG 2.4.11); med en grund er bjælken højere. */
html:has(.bjaelke){scroll-padding-bottom:96px}
html:has(.bjaelke-grund:not([hidden])){scroll-padding-bottom:140px}
@media (max-width: 767px){
  .bjaelke-knapper .btn{min-height:44px}
}
/* Under 560 px ombrydes en lang etiket («Godkend nyt nummer og bogfør») i stedet for at
   løbe ud af bjælken; knappen må blive højere end 44 px. */
@media (max-width: 559px){
  .bjaelke-knapper .btn{white-space:normal;text-align:center}
}
/* Under 400 px: korte etiketter. Den fulde tekst står stadig i knappen for en
   skærmlæser; den korte er `aria-hidden`. Bogfør 50 %, de to andre 25 % hver. */
@media (max-width: 399px){
  .bjaelke .lang{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .bjaelke .kort{display:inline}
  .bjaelke-knapper{gap:6px}
  .bjaelke-knapper .btn{flex:1 1 0;min-width:0;padding:0 6px}
  .bjaelke-knapper .btn.p{flex-grow:2;margin-right:0}
}

/* F124a (fra F118c) — telefonudgaven af detaljen. Godkendelsessiden: en lang værdi
   uden mellemrum i «Handling der udføres» skubbede siden 40 px ud ved 360 px. */
.tw.ombryd table.preview td{overflow-wrap:anywhere}
/* `.kerne input` (0,1,1) tabte til `form.stack input[type=text]` (0,2,2) og dens
   min-width:260px; denne selektor vinder uanset rækkefølge. */
form.stack[data-bjaelke] .kerne input:not([type=hidden]),form.stack[data-bjaelke] .kerne select{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
@media (max-width: 767px){
  button.tilfoej{min-height:44px;min-width:44px;padding:0 14px}
}
/* Fil-linjen findes kun under 720 px; over det står fremviseren. */
.fil-linje{display:none}
@media (max-width: 1099px){
  .split-2.tlf .viewer .doc{height:50vh}
}
@media (max-width: 719px){
  .fil-linje{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:12px 14px}
  .fil-linje .grow{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
  .fil-linje .grow .sub{display:block}
  .split-2.tlf .split-r{display:none}
}
/* Linjetabellen under 560 px: hver linje er en blok, etiketten over feltet. */
@media (max-width: 559px){
  table.linjer.stablet,table.linjer.stablet tbody,table.linjer.stablet tr,table.linjer.stablet td{display:block;width:auto}
  table.linjer.stablet tr:first-child{display:none}
  table.linjer.stablet tr{border:1px solid var(--line);border-radius:var(--r-md);padding:4px 0;margin:0 0 10px}
  table.linjer.stablet td{padding:6px 10px;border:0}
  table.linjer.stablet td::before{content:attr(data-label);display:block;margin:0 0 4px;font-size:12px;font-weight:500;color:var(--ink-2)}
}

/* F124b — HEADEREN, FORSLAGSLINJEN OG ÉN FLADE (ui-ux/F124_design_v1.md §6.1, §6.3, §12).
   Alt nedenfor rammer kun markup, som skabelonen tegner med flaget. */
.hd-bilag{display:block}
.hd-nav{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 8px;font-size:13px}
.hd-nav .back{gap:4px}
.hd-nav .pager{display:inline-flex;align-items:center;gap:6px}
.hd-nav .pil{min-width:44px;justify-content:center;font-size:18px;line-height:1}
.hd-nav .pil[aria-disabled=true]{opacity:.45;cursor:default}
.hd-titel{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.hd-titel h1{overflow-wrap:anywhere}
/* «⋯ Mere»: en `<details>`-menu, der virker uden JS. Hvert punkt er mindst 44 px (UI-002). */
details.mere-menu{position:relative;margin-left:auto}
details.mere-menu>summary{list-style:none;cursor:pointer}
details.mere-menu>summary::-webkit-details-marker{display:none}
details.mere-menu>ul{position:absolute;right:0;z-index:6;margin:4px 0 0;padding:4px 0;list-style:none;min-width:240px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 8px 24px -12px oklch(0.2 0.01 250 / .45)}
details.mere-menu li>a,details.mere-menu li>button,details.mere-menu li>form>button{display:flex;align-items:center;width:100%;
  min-height:44px;box-sizing:border-box;padding:0 14px;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);
  text-align:left;cursor:pointer;text-decoration:none}
details.mere-menu li>form{margin:0}
details.mere-menu li>a:hover,details.mere-menu li button:hover{background:var(--sunk)}
@media (max-width: 719px){
  details.mere-menu>ul{min-width:min(280px,calc(100vw - 32px))}
}
/* Forslagslinjen: én linje, skuffen bag ét klik. «Hvorfor?» står ved siden af, ikke i
   `<summary>` (UI fund 4); en advarsel har et tekstmærke ud over farven (UI fund 3). */
.forslag-raekke{display:flex;align-items:flex-start;gap:0 12px;margin:0 0 12px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:0 12px}
.forslag-raekke>details.forslag,.forslag-raekke>p.forslag{flex:1 1 auto;min-width:0;margin:0}
details.forslag>summary,p.forslag{min-height:44px;box-sizing:border-box;padding:12px 0;overflow-wrap:anywhere}
details.forslag>summary{cursor:pointer;font-weight:600}
.forslag-linje.warn{color:var(--warn-fg)}
.forslag-mrk{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:12px;font-weight:600;color:var(--warn-fg)}
.forslag-why{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px}
details.forslag[open]>summary{border-bottom:1px solid var(--line-2)}
/* «Hvorfor dette forslag?» lukket som standard (UI fund 2). */
details.card.why>summary{list-style:none;cursor:pointer;min-height:44px}
details.card.why>summary::-webkit-details-marker{display:none}
details.card.why>summary>h2{margin:0;padding:14px 18px;font-size:14px;font-weight:600}
details.card.why[open]>summary>h2{border-bottom:1px solid var(--line-2)}
/* Under 400 px: «⋯» alene (summary'en har sin `aria-label`), og intet filternavn før «n af m». */
@media (max-width: 399px){
  details.mere-menu .mere-tekst,.hd-nav .pager-filter{display:none}
}
details.historik>summary{min-height:44px;box-sizing:border-box;padding:12px 0;cursor:pointer}
/* Én flade: ingen kort i kort i venstre kolonne, kun tynde skillelinjer. */
.split.flad .split-l>.card{border:0;border-radius:0;background:transparent}
.split.flad .split-l>.card+.card{border-top:1px solid var(--line-2)}
.split.flad .split-l>.card>.card-body{padding-left:0;padding-right:0}
.split.flad .bjaelke{margin-left:0;margin-right:0}
/* F124d — BILAGSLISTEN SOM ARBEJDSKØ (ui-ux/F124_design_v1.md §4.1, §4.2, §12.1). Alt
   nedenfor rammer kun markup fra templates/bilag_koe.php (flaget tændt). */
.koe-hd{align-items:center}
.koe-soeg{display:flex;gap:8px;flex:1 1 320px;max-width:480px;min-width:0}
.koe-soeg input[type=search]{flex:1 1 auto;min-width:0;box-sizing:border-box}
/* Segmenterne: links med tal; den aktive har kant og fed tekst. Under 600 px er rækken den
   ENESTE, der kan scrolles vandret (§4.2). */
.seg{margin:14px 0 6px;min-width:0}
.seg ul{display:flex;gap:6px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:thin}
.seg li{flex:0 0 auto}
.seg a{display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid transparent;border-radius:var(--r-sm);
  color:var(--ink-2);text-decoration:none;white-space:nowrap;box-sizing:border-box}
.seg a:hover{background:var(--sunk)}
.seg a.aktiv{border-color:var(--ink);color:var(--ink);font-weight:600}
.seg a b{font-weight:600;font-variant-numeric:tabular-nums}
.koe-agent{display:flex;align-items:center;gap:8px;min-height:44px;flex-wrap:wrap;margin:0 0 8px}
.koe-agent>span{flex:1 1 auto;min-width:0}
.koe-agent details.mere-menu{margin-left:auto}
.koe-filter{margin:0 0 10px}
.koe-filter>summary{display:inline-flex;align-items:center;cursor:pointer}
.koe-filter form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
table.koe td{height:52px;box-sizing:border-box;vertical-align:middle}
table.koe .koe-kreditor{overflow-wrap:anywhere}
table.koe .koe-handling{text-align:right;white-space:nowrap}
table.koe .koe-handling form{margin:0}
.trin-flere,.trin-uvis{font-size:12px;font-weight:600;color:var(--ink-2);cursor:help}
.koe-sider{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 2px}
/* 360 px: hver række er en blok med TO linjer (UI-1) — kreditor og beløb øverst; status,
   konto, alder og knap nederst. Overskrifterne er skjult visuelt, ikke for skærmlæseren, og
   rækkerne har `role` (QA F6). Ingen vandret scroll uden for segmentrækken (AK8), som har en
   fade i højre kant (UI-2). */
@media (max-width: 599px){
  .koe-soeg{flex-basis:100%;max-width:none}
  .seg{position:relative}
  .seg::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
    background:linear-gradient(to right,transparent,var(--paper))}
  table.koe,table.koe tbody{display:block;width:100%}
  table.koe thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  table.koe tr{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:"kreditor kreditor kreditor beloeb" "status konto alder handling";
    column-gap:10px;row-gap:4px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-2)}
  table.koe tr:last-child{border-bottom:0}
  table.koe td{display:block;height:auto;padding:0;border:0;min-width:0}
  table.koe .koe-kreditor{grid-area:kreditor;font-weight:600}
  table.koe .koe-beloeb{grid-area:beloeb}
  table.koe .koe-status{grid-area:status}
  table.koe .koe-handling{grid-area:handling}
  table.koe .koe-konto{grid-area:konto;font-size:12.5px;color:var(--ink-3)}
  table.koe .koe-alder{grid-area:alder;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* UI R1 — konto og moms kun på Klar, hvor det er det, der bogføres; ellers bliver linjen for lang. */
  table.koe tr:not([data-trin="klar"]) .koe-konto{display:none}
}
/* F124e — GODKENDELSERNE (ui-ux/F124_design_v1.md §7). Listen rammer kun markup fra
   templates/approvals_koe.php; detaljen kun `.godk-*` i approval_detail.php med flaget. */
.godk-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.godk-top .seg{flex:1 1 auto}
.godk-top>p{margin:0}
table.godk{width:100%}
table.godk td{height:52px;box-sizing:border-box;vertical-align:middle}
table.godk .godk-hvad,table.godk .godk-hvem{overflow-wrap:anywhere}
table.godk .godk-hvem .warn{color:var(--warn-fg)}
table.godk .godk-tid{white-space:nowrap}
table.godk .godk-handling{text-align:right;white-space:nowrap}
table.godk .godk-handling form{margin:0}
details.godk-regler>summary,details.godk-teknisk>summary{min-height:44px;box-sizing:border-box;padding:12px 0;cursor:pointer;font-weight:600}
details.godk-teknisk .facts{margin-top:4px}
.godk-afvis{margin:6px 0 0}
/* 360 px: to linjer pr. række — «Hvad» og beløb øverst; kreditor, udløb og handling nederst.
   «Fra» står på detaljen. Ingen vandret scroll uden for segmentrækken (AK10). */
@media (max-width: 599px){
  table.godk,table.godk tbody{display:block;width:100%}
  table.godk thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  table.godk tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"hvad hvad beloeb" "hvem tid handling";
    column-gap:10px;row-gap:4px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-2)}
  table.godk tr:last-child{border-bottom:0}
  table.godk td{display:block;height:auto;padding:0;border:0;min-width:0}
  table.godk .godk-hvad{grid-area:hvad;font-weight:600}
  table.godk .godk-beloeb{grid-area:beloeb}
  table.godk .godk-hvem{grid-area:hvem;font-size:12.5px;color:var(--ink-3)}
  table.godk .godk-tid{grid-area:tid;font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
  table.godk .godk-handling{grid-area:handling}
  table.godk .godk-fra{display:none}
}

/* F124c — BETALINGEN FYLDER KUN, NÅR DEN AFVIGER (ui-ux/F124_design_v1.md §6.4, §12.1).
   Bevist ens: én linje i en `details.betaling`, hvor [Ændr] er summary'en. Felterne i den
   lukkede details sendes med (UX-010). Linjen er mindst 44 px og ombrydes på telefon. */
details.betaling{margin:0 0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 12px}
details.betaling>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;box-sizing:border-box;
  padding:10px 0;cursor:pointer;list-style:none;overflow-wrap:anywhere}
details.betaling>summary::-webkit-details-marker{display:none}
details.betaling .betaling-titel{font-weight:600}
details.betaling .betaling-linje{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2)}
details.betaling .betaling-aendr{margin-left:auto;text-decoration:underline}
details.betaling[open]>summary{border-bottom:1px solid var(--line-2);margin-bottom:8px}
details.betaling[open] .betaling-aendr,details.betaling[open] .betaling-linje,details.betaling[open] .betaling-titel,
details.betaling[open] .betaling-aendret{display:none}
details.betaling .betaling-aendret[hidden]{display:none}
details.betaling .betaling-aendret{color:var(--warn-fg)}
details.betaling:not([open]) .betaling-fold{display:none}
details.betaling .betaling-fold{text-decoration:underline}
details.betaling .betaling-linje[hidden]{display:none}

/* F124h — SAMLET JA (ui-ux/F124_design_v1.md §4.1–4.3, §5, §12.2). Kun markup fra
   templates/bilag_koe.php med `table.koe.samlet`, bilag_samlet_bjaelke.php og bilag_samlet.php
   (flaget tændt). Bjælken har en fast højde, og scroll-padding er præcis den (WCAG 2.4.11). */
table.koe .koe-vaelg{width:44px;text-align:center;padding:0}
table.koe .koe-vaelg label{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer}
table.koe .koe-vaelg input{width:18px;height:18px;margin:0}
.koe-regler{margin:6px 2px 0}
html:has(.koe-bjaelke){scroll-padding-bottom:64px}
html:has(.samlet-bjaelke){scroll-padding-bottom:64px}
.koe-bjaelke,.samlet-bjaelke{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  height:64px;margin:10px 0 0;padding:0 14px;background:var(--paper);border-top:1px solid var(--line);box-sizing:border-box}
.koe-bjaelke-info{display:flex;align-items:baseline;gap:10px;flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.koe-bjaelke-tal{font-weight:600;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.koe-bjaelke-tal:empty{display:none}
.koe-bjaelke-undt{overflow:hidden;text-overflow:ellipsis}
.koe-bjaelke-knapper{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.koe-bjaelke-sek{display:flex;gap:8px}
.koe-bjaelke-mere{display:none;position:relative}
.koe-bjaelke-menu{position:absolute;right:0;bottom:52px;display:flex;flex-direction:column;gap:6px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);min-width:200px}
.samlet-bjaelke{justify-content:flex-end}
/* Runde 3: «Vælg alle klar» ligger i «⋯» allerede under 1100 px; Ignorér og Ryd står i linjen til 600 px. */
@media (max-width: 1099px){
  .koe-bjaelke-sek [data-samlet-alle]{display:none}
  .koe-bjaelke-mere.har-alle{display:block}
}
@media (min-width: 600px) and (max-width: 1099px){
  .koe-bjaelke-menu [data-samlet-ignorer],.koe-bjaelke-menu [data-samlet-ryd]{display:none}
}
.flash form.inline{display:inline;margin:0 0 0 8px}
.flash ul{margin:6px 0 0;padding-left:18px}
.samlet-facts{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
table.samlet{width:100%}
table.samlet td{vertical-align:middle}
table.samlet .samlet-kreditor{overflow-wrap:anywhere}
table.samlet .samlet-detalje{display:none}
table.samlet tr.samlet-sum td{font-weight:600;border-top:1px solid var(--line)}
.samlet-ude ul{margin:0;padding:0 14px 10px 30px}
.samlet-ude li{min-height:44px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 360 px: bjælken er én linje «n valgt · sum [Bogfør n] [⋯]»; undtagelseslinjen er skjult, og
   Ignorér, Ryd og Vælg alle klar ligger i «⋯» (§4.2). Bekræftelsessidens rækker er to linjer. */
@media (max-width: 599px){
  table.koe.samlet tr{grid-template-columns:44px auto auto minmax(0,1fr) auto;
    grid-template-areas:"vaelg kreditor kreditor kreditor beloeb" "vaelg status konto alder handling"}
  table.koe.samlet .koe-vaelg{grid-area:vaelg;width:44px}
  html:has(.koe-bjaelke),html:has(.samlet-bjaelke){scroll-padding-bottom:56px}
  .koe-bjaelke,.samlet-bjaelke{height:56px;padding:0 10px}
  .koe-bjaelke-undt{display:none}
  .koe-bjaelke-sek{display:none}
  .koe-bjaelke-mere{display:block}
  .samlet-bjaelke>a{display:none}
  .samlet-bjaelke .btn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.samlet,table.samlet tbody{display:block;width:100%}
  table.samlet thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  table.samlet tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kreditor beloeb" "detalje detalje";
    column-gap:10px;row-gap:4px;padding:8px 12px;border-bottom:1px solid var(--line-2)}
  table.samlet td{display:block;padding:0;border:0;min-width:0}
  table.samlet .samlet-kreditor{grid-area:kreditor;font-weight:600}
  table.samlet .samlet-beloeb{grid-area:beloeb}
  table.samlet .samlet-col{display:none}
  table.samlet .samlet-detalje{display:block;grid-area:detalje;font-size:12.5px;color:var(--ink-3)}
  table.samlet tr.samlet-sum{grid-template-areas:none;grid-template-columns:minmax(0,1fr) auto}
  table.samlet tr.samlet-sum td:last-child{display:none}
}