/* ═══════════════════════════════════════════════════════════════════════
   Best-AV ordreflow — fælles udseende

   HVER FARVE STÅR ÉT STED. Skal portalen se anderledes ud, rettes kun
   blokkene herunder — ikke de enkelte sider.
   ═══════════════════════════════════════════════════════════════════════ */

:root, :root[data-tema="lys"]{
  --accent:#0B6FB8;    --accent-ink:#08507f;  --accent-flade:#E4EFF8;  --accent-svag:#EFF6FB;
  --paper:#F1F4F9;     --surface:#fff;        --surface-2:#FAFBFC;
  --hair:#DDE3E7;      --hair-svag:#EEF1F3;
  --ink:#0E1B2A;       --ink-60:#5A6B7C;      --ink-35:#93A2B0;      --ink-pre:#2C3B4A;
  --rack:#0E1B2A;      --rack-line:#24405c;   --rack-ink:#fff;
  --rack-ink-60:#CFE4F4; --rack-ink-35:#8FA8BE;
  --ok:#2E9E6B;        --ok-flade:#E4F3EC;    --ok-ink:#1F7A50;
  --warn:#D9902B;      --warn-flade:#FBF0DC;  --warn-ink:#7A5115;    --warn-ink-2:#96631A;
  --bad:#C8443A;       --bad-flade:#FAE7E5;   --bad-ink:#A2332A;     --bad-kant:#E9C4C0;
  --neutral-flade:#EDF1F4;
  --afventer:#FEFBF4;
  --skygge:0 -2px 14px rgba(14,27,42,.12);
  --skygge-menu:0 0 40px rgba(14,27,42,.28);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --disp:'Archivo',var(--sans);
}
:root[data-tema="moerk"]{
  --accent:#3B9BE0;    --accent-ink:#8FCBF5;  --accent-flade:#123246;  --accent-svag:#0F2634;
  --paper:#0B1219;     --surface:#111A24;     --surface-2:#16212C;
  --hair:#22303D;      --hair-svag:#1A2530;
  --ink:#E8EEF3;       --ink-60:#93A7B8;      --ink-35:#6B7F90;      --ink-pre:#B8C7D4;
  --rack:#070C11;      --rack-line:#22303D;   --rack-ink:#E8EEF3;
  --rack-ink-60:#9CC6E4; --rack-ink-35:#6B8296;
  --ok:#3FBF88;        --ok-flade:#0F2A20;    --ok-ink:#5FD3A0;
  --warn:#E0A445;      --warn-flade:#2B2113;  --warn-ink:#E8BC76;    --warn-ink-2:#D9A055;
  --bad:#E06B60;       --bad-flade:#2C1614;   --bad-ink:#EF8A80;     --bad-kant:#4A2724;
  --neutral-flade:#1C2833;
  --afventer:#1E1B12;
  --skygge:0 -2px 14px rgba(0,0,0,.5);
  --skygge-menu:0 0 40px rgba(0,0,0,.6);
}

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

/* ═══════════════════════════════════════════════════════════════════════
   Indholdet vises først, når vi ved, hvem der kigger.

   Uden det her nåede siden at blive tegnet, inden login-gaten greb ind —
   og så blinkede portalen kort forbi for en, der ikke var logget ind.
   portal.js sætter data-klar, når adgangen er afgjort.

   Nødudgangen: skulle JavaScript fejle helt, kommer indholdet frem af sig
   selv efter otte sekunder. En hvid side uden forklaring er værre end at
   vise noget for tidligt.
   ═══════════════════════════════════════════════════════════════════════ */
:root:not([data-klar]) body > .wrap,
:root:not([data-klar]) body > .foot{
  opacity:0;animation:noedudgang 0s 8s forwards}
@keyframes noedudgang{ to{ opacity:1 } }
body > .wrap{transition:opacity .18s ease-out}

/* Diskret tegn på at der sker noget, mens vi venter */
:root:not([data-klar]) body::before{
  content:'';position:fixed;top:0;left:0;right:0;height:2px;z-index:100;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:indlaeser 1.1s ease-in-out infinite}
@keyframes indlaeser{
  0%{background-position:-40% 0} 100%{background-position:140% 0} }
@media (prefers-reduced-motion:reduce){
  :root:not([data-klar]) body::before{animation:none;background-position:0 0}
}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;
  line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp);margin:0;letter-spacing:-.02em;line-height:1.1}
a{color:var(--accent-ink)}
/* ═══ BREDDEN FØLGER VINDUET — TEKSTEN GØR IKKE — 10-09 ═══
   Henrik: «Er der en årsag til, at du altid kun bruger 50 % af
   sidebredden?»

   Ja, men den gjaldt kun teksten: en sætning på 1500 px er svær at læse,
   fordi øjet mister linjen på vej tilbage. Tabeller har det stik modsat —
   de har brug for hver eneste pixel og bliver til tre ordombrudte spalter,
   når de klemmes.

   Den samme grænse på begge dele er den forkerte løsning på et rigtigt
   problem. Rammen følger nu skærmen (op til 1760), og PROSAEN har sin egen
   grænse på ~78 tegn — se `.lead`, `.maxtekst`. */
.wrap{max-width:min(1760px, 100%);margin:0 auto;padding:0 24px}
/* Løbende tekst, der skal kunne læses: aldrig bredere end en linje, øjet
   kan følge tilbage til. Sættes på afsnittet — ikke på rammen. */
.maxtekst{max-width:78ch}

/* ───────── Topbjælke ───────── */
/* 28-09: lys bjælke over lyse kort, mørk menu ved siden af — dashboard-
   udtrykket fra Henriks billede 19-09. Bjælken bærer ét søgefelt, regnskabet
   og profilen; mærket står i menuen og vises kun her, når menuen er en skuffe. */
.top{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:40}
/* Topbjælken følger samme bredde som siden. Stod den på 1300, mens siden
   var bredere, lå BEST-AV midt på skærmen og profilen et stykke inde —
   Henrik, 10-09: «Best-AV skal ud til venstre, og hero i top højre skal
   højrestilles.» */
.top-in{display:flex;align-items:center;gap:14px;padding:10px 24px;min-height:62px;
  max-width:min(1760px, 100%);margin:0 auto}
/* Profilen yderst til højre — uanset hvad der ellers står i bjælken. */
.top-in .mig-hylster{margin-left:auto}
.burger{background:none;border:0;cursor:pointer;padding:7px;margin:-7px 0 -7px -7px;display:grid;gap:4px;border-radius:3px}
.burger:hover{background:var(--neutral-flade)}
.burger span{display:block;width:19px;height:2px;background:var(--ink-60);border-radius:1px}
:root:not([data-menu="fri"]) .top .burger,
:root:not([data-menu="fri"]) .top .mark,
:root:not([data-menu="fri"]) .top .mark-sub{display:none}
.mark{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.03em}
.mark span{color:var(--accent)}
.mark-sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-35);border-left:1px solid var(--hair);padding-left:14px}
.menu .mark{color:var(--rack-ink)}
.mig-hylster{margin-left:auto;position:relative}
.mig{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-60);
  background:none;border:0;cursor:pointer;font-family:inherit;padding:4px 6px;border-radius:3px}
.mig:hover{background:var(--neutral-flade);color:var(--ink)}

/* ───────── Regnskabet og nødbremserne — på hver side (28-09) ───────── */
.regnskab{margin-left:auto;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;
  white-space:nowrap}
.regnskab[hidden]{display:none}
.regnskab.w{background:var(--warn-flade);color:var(--warn-ink)}
.regnskab.ok{background:var(--ok-flade);color:var(--ok-ink)}
.regnskab.b{background:var(--bad-flade);color:var(--bad-ink)}
.regnskab:not([hidden]) ~ .mig-hylster{margin-left:6px}
/* Telefonen (28-09): «logoet knækker i to linjer» (Henrik 20-09) — mærket
   holdes på én linje, sidenavnet ved siden af det går, og regnskabet
   bliver til sit ene ord. */
@media (max-width:640px){
  .regnskab{font-size:11.5px;padding:4px 7px}
  .regnskab .r-lang{display:none}
  .top .mark-sub{display:none}
  .top-in{gap:10px}
  .bremse-baand{padding:8px 16px;font-size:12.5px}
}
.top .mark{white-space:nowrap}
.bremse-baand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:8px 24px;background:var(--warn-flade);color:var(--warn-ink);
  border-bottom:1px solid var(--hair);font-size:13.5px}
.bremse-baand[hidden]{display:none}
.bremse-baand span{font-family:var(--mono);font-size:12px}
.bremse-baand a{margin-left:auto;color:inherit;font-weight:600}
.mig-kort{position:absolute;top:calc(100% + 10px);right:0;min-width:250px;background:var(--surface);
  border:1px solid var(--hair);border-radius:3px;box-shadow:0 8px 28px rgba(14,27,42,.22);
  z-index:70;overflow:hidden}
.mig-kort[hidden]{display:none}
.mig-kort-h{padding:15px 17px 12px;border-bottom:1px solid var(--hair-svag)}
.mig-kort-navn{font-weight:600;font-size:14px;color:var(--ink)}
.mig-kort-mail{font-family:var(--mono);font-size:11.5px;color:var(--ink-35);margin-top:3px}
.mig-kort-roller{padding:12px 17px;border-bottom:1px solid var(--hair-svag)}
/* ───────── Se portalen som en anden ─────────
   Båndet skal være umuligt at overse: en administrator, der tror han ser
   sin egen skærm, mens han ser en montørs, retter noget, der ikke var i
   stykker. Derfor øverst, i fuld bredde, og uden en luk-knap. */
/* ═══════════════════════════════════════════════════════════════════════
   BÅNDET SKAL KLÆBE ØVERST

   Det stod i toppen af siden og var derfor væk, så snart man rullede.
   Længere nede står der knapper, der er slået fra, og handlinger, der
   ikke virker — og forklaringen på hvorfor var rullet ud af syne.

   Henrik 24-08 stod med en side, hvor "Dan kladde af en tidligere ordre"
   manglede, mens der stod "en med rollen Indkøb" i et hjørne, han ikke
   kiggede i.

   Et bånd, der kan rulles væk, er et bånd, man glemmer.
   ═══════════════════════════════════════════════════════════════════════ */
.sesom-baand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:60;
  padding:9px 18px;background:var(--acc-flade,#fff4e5);
  border-bottom:2px solid var(--acc-ink,#b26a00);
  box-shadow:0 1px 4px rgba(14,27,42,.08);
  font-size:13.5px;color:var(--acc-ink,#8a5200)}
.sesom-baand b{font-weight:600}
.sesom-baand span{font-family:var(--mono);font-size:12px;opacity:.85}
.sesom-baand button{margin-left:auto;font-family:var(--sans);font-size:13px;
  padding:5px 12px;border-radius:3px;border:1px solid var(--acc-ink,#b26a00);
  background:#fff;color:var(--acc-ink,#8a5200);cursor:pointer}
.sesom-baand button:hover{background:var(--acc-ink,#b26a00);color:#fff}
.mig-kort-sesom{padding:12px 17px;border-bottom:1px solid var(--hair-svag)}
.mig-kort-sesom label{display:block;font-size:12px;color:var(--ink-60);margin-bottom:5px}
.mig-kort-sesom select{width:100%;font-family:var(--sans);font-size:13px;padding:6px 8px;
  border:1px solid var(--hair);border-radius:3px;background:#fff}
.mig-kort-hj{font-size:11.5px;color:var(--ink-35);margin-top:6px;line-height:1.4}

.mig-kort-ud{width:100%;text-align:left;padding:12px 17px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--bad)}
.mig-kort-ud:hover{background:var(--bad-flade)}
@media (max-width:640px){ .mig-navn{display:none} }
.avatar{width:29px;height:29px;border-radius:50%;background:var(--accent);display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;flex:none}

/* ───────── Sidemenu ───────── */
/* Samme kurve og varighed på menu og overlay — ellers halter det ene efter
   det andet, og bevægelsen føles billig. Kun transform og opacity animeres;
   de kører på grafikkortet og udløser ikke ny layoutberegning. */
.overlay{position:fixed;inset:0;background:rgba(7,12,17,.45);z-index:50;opacity:0;
  pointer-events:none;transition:opacity .26s cubic-bezier(.22,.61,.36,1)}
.overlay.aaben{opacity:1;pointer-events:auto}
.menu{position:fixed;top:0;left:0;bottom:0;width:264px;background:var(--rack);color:var(--rack-ink);
  z-index:60;transform:translate3d(-100%,0,0);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  will-change:transform;backface-visibility:hidden;
  display:flex;flex-direction:column;box-shadow:var(--skygge-menu)}
.menu.aaben{transform:translate3d(0,0,0)}
/* Skyggen fra en lukket skuffe må ikke ligge som en grå kant i venstre side. */
:root[data-menu="fri"] .menu:not(.aaben){box-shadow:none}

/* Menupunkterne toner ind lige efter panelet — det giver dybde uden at
   forsinke noget. */
:root[data-menu="fri"] .menu .mpunkt,
:root[data-menu="fri"] .menu .gruppe{opacity:0;transform:translateX(-6px);
  transition:opacity .2s ease-out .06s, transform .2s ease-out .06s}
:root[data-menu="fri"] .menu.aaben .mpunkt,
:root[data-menu="fri"] .menu.aaben .gruppe{opacity:1;transform:none}

/* Har man slået bevægelse fra i systemet, skal vi ikke animere noget */
@media (prefers-reduced-motion:reduce){
  .menu,.overlay,.menu .mpunkt,.menu .gruppe{transition:none !important}
}
.menu-h{display:flex;align-items:center;padding:19px 22px;border-bottom:1px solid var(--rack-line)}
.menu-h .mark{font-size:17px}
.luk{margin-left:auto;background:none;border:0;color:var(--rack-ink-35);cursor:pointer;
  font-size:22px;line-height:1;padding:3px 7px;border-radius:3px}
.luk:hover{background:rgba(255,255,255,.08);color:var(--rack-ink)}
.menu-b{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px}
/* 28-09: gruppen er et punkt med ikon, navn og tal — ikke en lille
   overskrift i versaler. Det er grupperne, der står tilbage, når menuen
   klapper sammen, så de skal kunne stå alene. */
.gruppe{position:relative;display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--rack-ink-60);padding:10px 12px;border-radius:8px;margin-top:2px}
.m-ikon{flex:none;display:block}
.g-navn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-tal{min-width:22px;text-align:center;font-size:12px;font-weight:700;line-height:18px;
  padding:1px 7px;border-radius:10px;background:var(--accent);color:#fff}
.g-tal[hidden]{display:none}

/* ───────── Grupper, der kan foldes ─────────
   Overskriften bliver en knap, når der er mere end én gruppe. HELE bredden
   kan trykkes — en pil på ti pixels er ikke et klikmål. */
.gruppe.knap{width:100%;background:none;border:0;cursor:pointer;text-align:left}
.gruppe.knap:hover{color:var(--rack-ink);background:rgba(255,255,255,.05)}
.gr.heri > .gruppe{color:var(--rack-ink);background:rgba(255,255,255,.06)}
.gruppe.knap .pil{transition:transform .15s ease-out;flex:none;opacity:.75}
.gr.aaben > .gruppe.knap .pil{transform:rotate(180deg)}
/* Foldet betyder VÆK, ikke bare usynlig — så tabuleringen heller ikke
   vandrer ned i noget, man ikke kan se. */
.gr-b{display:none}
.gr.aaben .gr-b{display:block}
/* Punkterne hænger under gruppens ikon, med en tynd streg ned langs dem. */
.gr[data-gruppe] > .gr-b{margin:2px 0 6px 21px;padding-left:10px;border-left:1px solid var(--rack-line)}
@media (prefers-reduced-motion:reduce){ .gruppe.knap .pil{transition:none} }

.mpunkt{display:flex;align-items:center;gap:12px;padding:9px 12px;margin:1px 0;color:var(--rack-ink-60);
  text-decoration:none;font-size:14px;border:0;border-radius:8px;cursor:pointer;
  background:none;width:100%;text-align:left;font-family:inherit}
.gr.start .mpunkt{font-size:14.5px;font-weight:600}
.mpunkt:hover{background:rgba(255,255,255,.05);color:var(--rack-ink)}
/* En skillelinje i menuen hører til PÅ punktet under den — så forsvinder
   den med punktet, hvis brugeren ikke må se det. 11-09. */
.mpunkt.streg{border-top:1px solid var(--rack-line);margin-top:7px;padding-top:14px;
  border-top-left-radius:0;border-top-right-radius:0}
.mpunkt[aria-current=page]{background:var(--accent);color:#fff;font-weight:600}
.mpunkt .badge{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--warn);
  color:#2B2113;padding:1px 6px;border-radius:9px;font-weight:600}
.skil{height:1px;background:var(--rack-line);margin:10px 22px}
.menu-f{border-top:1px solid var(--rack-line);padding:8px 10px}
.version{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--rack-ink-35);
  padding:4px 22px 6px;opacity:.65}
.mpunkt.udlog{color:var(--bad)}
.mpunkt.udlog:hover{background:rgba(200,68,58,.12);color:var(--bad)}

/* ───────── Fastgjort menu ─────────
   Styres af data-menu på <html>, ikke af skærmbredden alene. Så kan man
   folde den væk på en stor skærm og folde den frem på en lille — og valget
   følger med til næste gang. portal.js sætter attributten. */
:root[data-menu="fast"] .menu{
  transform:none;box-shadow:none;border-right:1px solid var(--rack-line);
  transition:none;will-change:auto}
:root[data-menu="fast"] .overlay{display:none}
:root[data-menu="fast"] body{padding-left:264px}
:root[data-menu="fast"] .top{margin-left:0}

/* ───────── Sammenklappet: kun ikoner og tal (28-09) ─────────
   Striben står fast i venstre side. Peger man på den, eller trykker på et
   ikon, folder den sig ud OVER siden — indholdet flytter sig ikke, så en
   bred tabel bliver stående, hvor den er. */
:root[data-menu="smal"] body{padding-left:68px}
:root[data-menu="smal"] .menu{transform:none;width:68px;box-shadow:none;
  border-right:1px solid var(--rack-line);will-change:auto;
  transition:width .18s cubic-bezier(.22,.61,.36,1)}
:root[data-menu="smal"] .menu:hover,
:root[data-menu="smal"] .menu:focus-within,
:root[data-menu="smal"] .menu.aaben{width:264px;box-shadow:var(--skygge-menu);transition-delay:.12s}
:root[data-menu="smal"] .menu.aaben{transition-delay:0s}
:root[data-menu="smal"] .menu:not(:hover):not(:focus-within):not(.aaben) :is(.g-navn,.pil,.m-t,.menu-h .mark,.luk,.menu-f){display:none}
:root[data-menu="smal"] .menu:not(:hover):not(:focus-within):not(.aaben) .gr[data-gruppe] > .gr-b{display:none}
:root[data-menu="smal"] .menu:not(:hover):not(:focus-within):not(.aaben) .menu-h{justify-content:center;padding-left:0;padding-right:0}
:root[data-menu="smal"] .menu:not(:hover):not(:focus-within):not(.aaben) .fastgoer{margin:0}
/* Tallet sidder som et lille mærke på ikonet, når navnet er væk. */
:root[data-menu="smal"] .menu:not(:hover):not(:focus-within):not(.aaben) .g-tal{
  position:absolute;top:3px;right:4px;min-width:17px;font-size:10px;line-height:15px;padding:0 4px}
:root[data-menu="smal"] .overlay.aaben{opacity:1}

/* Knappen der fastgør eller frigør. Vises kun, når der er plads. */
.fastgoer{margin-left:auto;background:none;border:0;color:var(--rack-ink-35);cursor:pointer;
  padding:5px 8px;border-radius:3px;display:none;line-height:0}
.fastgoer:hover{background:rgba(255,255,255,.08);color:var(--rack-ink)}
.fastgoer svg{display:block}
.fastgoer.vendt svg{transform:rotate(180deg)}
@media (min-width:900px){ .fastgoer{display:block} }

/* Er menuen fastgjort, giver lukkekrydset ingen mening */
:root[data-menu="fast"] .luk,
:root[data-menu="smal"] .luk{display:none}

/* ───────── Byggeklodser ───────── */
.head{padding:26px 0 8px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px}
h2.sec{font-size:26px}
.lead{max-width:720px;color:var(--ink-60);margin:6px 0 0}

.card{background:var(--surface);border:1px solid var(--hair);border-radius:3px;margin-bottom:20px}
.card-h{padding:14px 18px;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h3{font-size:15px;font-weight:700}
.card-h .meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-35)}
.card-b{padding:18px}.card-b.flush{padding:0}

/* ═══════════════════════════════════════════════════════════════════════
   ÉN REGEL FOR ALLE LISTER — 10-09

   Henrik: *«Generelt på lister: højrestil indholdet i et felt og ikke
   centrér. Knapper yderst til højre højrestilles. Alt skal stå ens, så det
   ikke ser så ufærdigt ud.»*

   Han har ret, og det er ikke pynt: en tabel, hvor tal, tekst og knapper
   står forskellige steder fra række til række, tvinger øjet til at lede
   efter det samme felt igen på hver linje. Det er dét, der får en færdig
   side til at føles ufærdig.

   Reglen, én gang, for hver tabel i portalen:
     · tekst og numre står VENSTRE — man læser fra venstre
     · tal står HØJRE, med samme cifferbredde, så de kan sammenlignes
     · knapper står yderst til HØJRE og har samme bredde
   ═══════════════════════════════════════════════════════════════════════ */
table th, table td{text-align:left}
/* Tal: højrestillet og med faste cifferbredder, så 1.219,93 og 20.267,44
   flugter under hinanden i stedet for at danse. */
table th.n, table td.n, table th.num, table td.num{
  text-align:right;font-variant-numeric:tabular-nums}
/* Den sidste spalte er handlingernes. Den fylder kun det, den skal, og
   holder sit indhold ude til højre. */
table td.handling, table th.handling{text-align:right;white-space:nowrap;width:1%}
table td.handling .btn{min-width:118px}
/* En knap, der er et link, skal ligne en knap — ikke et understreget ord.
   «Invitér dem» stod med understregning ved siden af fire, der ikke havde. */
/* Genvejene ⚙ og ↗ ved et varenummer — små, grå, og de fylder ikke i
   kolonnen. Se `genveje()` i portal.js. */
.varelink{color:var(--ink-35);text-decoration:none;font-size:12px;padding:0 2px}
.varelink:hover{color:var(--accent)}
a.btn{text-decoration:none}
a.btn:hover{text-decoration:none}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-35);margin-bottom:8px}

.btn{font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;border-radius:3px;
  padding:9px 16px;background:var(--accent);border:1px solid var(--accent);color:#fff}
.btn:hover{background:var(--accent-ink)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.ghost{background:var(--surface);border-color:var(--hair);color:var(--ink-60)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-svag)}
.btn.fare{background:var(--surface);border-color:var(--bad-kant);color:var(--bad)}
.btn.fare:hover{background:var(--bad-flade)}
.btn.lille{font-size:12px;padding:6px 11px}

input[type=text],input[type=email],input[type=password],input[type=number]{
  font-family:var(--mono);font-size:13px;padding:9px 11px;border:1px solid var(--hair);
  border-radius:3px;background:var(--surface);color:var(--ink);min-width:210px}
input:focus{outline:none;border-color:var(--accent)}

.tag{display:inline-block;font-family:var(--mono);font-size:9.5px;padding:2px 6px;border-radius:2px;margin:0 3px 3px 0}
.tag.ok{background:var(--ok-flade);color:var(--ok-ink)}
.tag.w{background:var(--warn-flade);color:var(--warn-ink-2)}
.tag.b{background:var(--bad-flade);color:var(--bad-ink)}
.tag.n{background:var(--neutral-flade);color:var(--ink-60)}
.tag.acc{background:var(--accent-flade);color:var(--accent-ink)}
.tag.pdf{background:var(--accent-flade);color:var(--accent-ink);border:1px solid var(--accent);
  cursor:pointer;font-weight:600;line-height:1.35}
.tag.pdf:hover{background:var(--accent);color:#fff}

.varsel{border-radius:3px;padding:13px 16px;margin-bottom:18px;font-size:13.5px;
  display:flex;gap:11px;align-items:flex-start}
.varsel[hidden]{display:none}
.varsel.gul{background:var(--warn-flade);border:1px solid var(--warn);color:var(--warn-ink)}
.varsel.blaa{background:var(--accent-svag);border:1px solid var(--accent);color:var(--accent-ink)}
.varsel.roed{background:var(--bad-flade);border:1px solid var(--bad);color:var(--bad-ink)}
.varsel .ikon{font-family:var(--mono);font-weight:700;flex:none;width:20px;height:20px;
  display:grid;place-items:center;border-radius:2px;font-size:11px}
.varsel.gul .ikon{background:var(--warn);color:var(--warn-flade)}
.varsel.blaa .ikon{background:var(--accent);color:#fff}
.varsel.roed .ikon{background:var(--bad);color:#fff}

table{width:100%;border-collapse:collapse}
th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-35);text-align:left;font-weight:500;padding:11px 14px;
  border-bottom:1px solid var(--hair);white-space:nowrap}
th.c{text-align:center}th.num{text-align:right}
td{padding:11px 14px;border-bottom:1px solid var(--hair-svag);font-size:14px;vertical-align:middle}
td.c{text-align:center}td.num{font-family:var(--mono);text-align:right}
tr:last-child td{border-bottom:0}
tr.rk:hover{background:var(--surface-2)}

pre{font-family:var(--mono);font-size:11.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  margin:0;color:var(--ink-pre);background:var(--paper);border:1px solid var(--hair);
  border-radius:3px;padding:12px;max-height:340px;overflow:auto}
.empty{padding:26px 18px;text-align:center;color:var(--ink-35);font-size:13.5px}
.ingen-adgang{padding:64px 20px;text-align:center;color:var(--ink-35)}
.ingen-adgang h3{color:var(--ink);margin-bottom:8px}
/* Viser at listen holder sig selv frisk, uden at stjæle opmærksomhed */
.frisk{font-family:var(--mono);font-size:11px;color:var(--ink-35);display:inline-flex;
  align-items:center;gap:7px}
.frisk .puls{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;opacity:.35}
.frisk.henter .puls{animation:puls 1s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){ .frisk.henter .puls{animation:none;opacity:1} }

.foot{border-top:1px solid var(--hair);padding:20px 0 40px;color:var(--ink-35);
  font-family:var(--mono);font-size:11.5px;margin-top:6px}

/* ═════════ Vindue oveni siden ═════════
   Bruges af "Opret vare" og "Opret debitor". Begge sker MIDT i en
   arbejdsgang — en linje kataloget ikke kender, eller en ordre der venter
   på en debitor. Går man et andet sted hen for at ordne det, mister man
   tråden i resten. Derfor samme vindue. Reglerne står her og ikke på de
   enkelte sider, så de to vinduer ser ens ud. */
.skygge{position:fixed;inset:0;z-index:60;background:rgba(14,27,42,.45);
  display:grid;place-items:center;padding:20px}
.skygge[hidden]{display:none}
.kasse{background:var(--surface);border:1px solid var(--hair);border-radius:4px;
  width:min(560px,100%);max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(14,27,42,.35)}
.kasse.bred{width:min(700px,100%)}
.kasse-h{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--hair)}
.kasse-h h3{font-size:15px;font-weight:700}
.luk-kasse{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;
  color:var(--ink-35);cursor:pointer;padding:0 4px}
.luk-kasse:hover{color:var(--ink)}
.kasse-b{padding:18px}

/* ═════════ Mulige dubletter ═════════
   Vises FØR man opretter. En debitor, der ligger der i forvejen, koster to
   saldi og to rykkerspor at opdage bagefter. */
.match{border:1px solid var(--hair);border-radius:3px;margin-bottom:8px;
  padding:11px 13px;background:var(--surface-2)}
.match.sikker{border-color:var(--bad);background:var(--bad-flade)}
.match.staerk{border-color:var(--warn)}
.match .nr{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent-ink);
  margin-right:8px}
.match .hvem{font-size:13.5px;font-weight:600}
.match .hvorfor{font-size:12.5px;color:var(--ink-60);margin-top:4px}
.match .rad{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.match .rad .btn{margin-left:auto}

@media (max-width:560px){
  .wrap{padding:0 16px}
  .top-in{padding:14px 16px}
  .menu{width:270px}
}

/* ═══════════════════════════════════════════════════════════════════════
   ARBEJDSSTREGEN

   Henrik 25-08: *"når man klikker på ting generelt i portalen, så er
   loadtider til den langsomme side. En load cirkel/indikatore vil være
   rigtig god, så ikke man bare klikker og klikker."*

   Én streg øverst, mens der er mindst ét kald i gang. Den ligger over alt
   andet, den tager ingen plads, og den kan ikke klikkes væk ved et uheld
   (pointer-events: none) — den skal aldrig komme til at stå i vejen for
   dét, man ventede på.

   Vises først efter 250 ms, se portal.js: et blink på et hurtigt kald får
   siden til at se ustabil ud, hver gang man rører den.
   ═══════════════════════════════════════════════════════════════════════ */
#portal-arbejder{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:9999;
  pointer-events:none; opacity:0; transition:opacity .15s ease;
  background:var(--hair-svag);
}
#portal-arbejder.vis{opacity:1}
#portal-arbejder i{
  display:block; height:100%; width:40%; background:var(--accent);
  border-radius:0 2px 2px 0;
  animation:portal-loeb 1.1s ease-in-out infinite;
}
@keyframes portal-loeb{
  0%   {transform:translateX(-100%)}
  100% {transform:translateX(350%)}
}
/* Den, der har slået animationer fra, skal ikke have en streg, der løber.
   Så står den stille og lyser i stedet — beskeden er den samme. */
@media (prefers-reduced-motion:reduce){
  #portal-arbejder i{animation:none; width:100%; opacity:.55}
}

/* ═══ SØG I PORTALEN — Ctrl+K (04-09) ═══ */
/* 28-09: ser ud som ét søgefelt — det ER stadig paletten, der åbner. */
.soegknap{display:inline-flex;align-items:center;gap:10px;flex:1 1 auto;max-width:520px;min-width:220px;height:42px;
  background:var(--paper);border:1px solid var(--hair);color:var(--ink-60);border-radius:10px;
  padding:0 14px;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.soegknap:hover{border-color:var(--ink-35);color:var(--ink)}
.soegknap kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-35);border:1px solid var(--hair);border-radius:3px;padding:1px 5px}
@media (max-width:760px){ .soegknap{min-width:0;flex:0 0 auto;width:42px;padding:0;justify-content:center} .soegknap-t,.soegknap kbd{display:none} }
/* `display:flex` slår browserens eget [hidden] — uden den her linje står
   paletten fast på skærmen fra første sekund (målt 04-09). */
.soeg-skygge[hidden]{display:none}
.soeg-skygge{position:fixed;inset:0;background:rgba(7,12,17,.5);z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 16px}
.soeg-boks{width:min(680px,100%);background:var(--surface);border:1px solid var(--hair);border-radius:5px;box-shadow:0 18px 50px rgba(14,27,42,.35);overflow:hidden}
.soeg-felt{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--hair);color:var(--ink-35)}
.soeg-felt input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.soeg-felt kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--hair);border-radius:3px;padding:1px 5px;color:var(--ink-35)}
.soeg-liste{max-height:min(60vh,480px);overflow:auto;padding:6px 0}
.soeg-gruppe{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35);padding:8px 16px 3px}
.soeg-raekke{display:flex;gap:12px;align-items:baseline;padding:8px 16px;text-decoration:none;color:var(--ink);font-size:14px}
.soeg-raekke.valgt{background:var(--accent-svag);box-shadow:inset 3px 0 0 var(--accent)}
.soeg-raekke .soeg-und{font-family:var(--mono);font-size:11.5px;color:var(--ink-35);margin-left:auto;white-space:nowrap}
.soeg-tom{padding:22px 16px;color:var(--ink-35);font-size:13.5px}
.soeg-fod{padding:8px 16px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:10.5px;color:var(--ink-35)}
.soeg-fod span{border:1px solid var(--hair);border-radius:3px;padding:0 4px}

/* ═══════════════════════════════════════════════════════════════════════
   PRISVEJEN — HVOR ER JEG I FORLØBET? (09-09)

   Henrik, 09-09: *«det er et kæmpe problem at jeg ikke kan finde rundt i
   systemet endnu … så er det for svært at bruge.»*

   Menuen var ikke problemet — den er 22 punkter i seks grupper og følger
   forløbet ordre → indkøb → varer → aftaler. Problemet er, at ÉT stykke
   arbejde går på TVÆRS af tre af grupperne:

       Leverandørtilbud (Indkøb) → Priskørsel (Aftaler)
       → Prislister (Aftaler)    → Shoppen (Varer)

   Fire sider, ét forløb, og ingen af dem sagde, at de hang sammen. To af
   dem tager oven i købet en Excel-fil med priser uden at sige HVILKEN
   slags: den ene vil have leverandørens tilbud, den anden kundens eget
   ark. Det kostede en formiddag den 09-09.

   Striben her sættes ind af portal.js på præcis de fire sider. Den
   flytter ingenting og ændrer ingen logik — den siger, hvor man er, og
   fører videre med aftalen i hånden.
   ═══════════════════════════════════════════════════════════════════════ */
.vej{display:flex;border:1px solid var(--hair);border-radius:3px;overflow:hidden;
  background:var(--surface-2);margin:2px 0 18px}
/* ═══ KLASSERNE ER «vej-»-NAVNE, OG DET ER EN RETTELSE — 10-09 ═══
   Trinnene hed før `.t`, `.n`, `.s`, `.h`. Fire sider har deres EGEN
   `.t` (et lille pille-mærke: versaler, mono, rund kant) og deres egen
   `.n` (højrestillet taltekst i tabeller) — og de rullede ned over
   striben, så den så helt anderledes ud på shoppen og prislister end på
   priskørsel. Samme kode, tre udseender.

   Et navn så kort som `.t` i et fælles stilark er en fælde, der venter
   på den næste side. Nu er de scopede ved navn og kan ikke rammes. */
.vej .vej-t{flex:1;min-width:0;border-right:1px solid var(--hair)}
.vej .vej-t:last-child{border-right:0}
.vej .vej-t>*{display:block;padding:8px 12px 9px;color:inherit;text-decoration:none}
.vej a.vej-a:hover{background:var(--accent-svag)}
.vej .vej-n{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-35);font-weight:400}
.vej .vej-s{font-family:var(--disp);font-size:13.5px;margin-top:1px;text-transform:none;
  letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vej .vej-h{font-size:11.5px;color:var(--ink-60);margin-top:1px;font-family:var(--sans);
  text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vej .vej-t.nu{background:var(--accent-flade);box-shadow:inset 0 -3px 0 var(--accent)}
.vej .vej-t.nu .vej-n{color:var(--accent-ink);font-weight:700}
.vej .vej-t.nu .vej-s{color:var(--accent-ink)}
/* Under 700 px er fire spalter fire ulæselige spalter. Så bliver det til
   to rækker af to — stadig fire trin, stadig i rækkefølge. */
@media(max-width:700px){
  .vej{flex-wrap:wrap}
  .vej .vej-t{flex:1 1 50%;border-bottom:1px solid var(--hair)}
  .vej .vej-t:nth-child(2n){border-right:0}
  .vej .vej-t:nth-child(n+3){border-bottom:0}
  .vej .vej-h{display:none}
}

/* Hvad vil den her side have? Én linje, dér hvor man står med filen i
   hånden — og en vej videre, hvis man er det forkerte sted. */
.hvad{background:var(--accent-svag);border:1px solid var(--hair);
  border-left:3px solid var(--accent);border-radius:2px;padding:10px 14px;margin:0 0 16px}
.hvad b{font-weight:600}
.hvad .and{margin-top:5px;font-size:13.5px;color:var(--ink-60)}

/* ═══════════════════════════════════════════════════════════════════════
   FOLDBARE KORT — 10-09

   Henrik: *«Alle de lange lister skal vi kunne folde sammen for at skabe
   bedre overblik. Det gælder alle sider. Det er svært at finde noget der
   skal scrolles langt efter.»*

   Hver side er bygget af de samme `.card` — hoved, krop. Derfor bor
   foldningen HER og ikke på siderne: én mekanik, 28 sider, ingen kopier
   der kan blive uenige. `portal.js` sætter knappen ind i hvert korthoved.

   Kortet med noget i gang lukkes aldrig af sig selv — se `foldbareKort()`.
   ═══════════════════════════════════════════════════════════════════════ */
.card-h{cursor:pointer;user-select:none}
.card-h .fold{margin-left:8px;order:99;background:none;border:0;padding:4px;cursor:pointer;
  color:var(--ink-35);display:grid;place-items:center;border-radius:3px;line-height:0}
.card-h .fold:hover{background:var(--neutral-flade);color:var(--ink)}
.card-h .fold svg{transition:transform .15s}
.card-h .meta{margin-left:auto}
/* Er kortet foldet, peger vinklen mod højre — «der er mere her». */
.card.foldet .card-h{border-bottom:0}
.card.foldet .card-h .fold svg{transform:rotate(-90deg)}
.card.foldet .card-b{display:none}
.card-h .skjult{font-family:var(--mono);font-size:11px;color:var(--ink-35);order:98}
/* Sider, hvor kortet ikke skal kunne foldes (fx et enkelt handlingskort),
   sætter data-fold="nej" på kortet. */
.card[data-fold="nej"] .card-h{cursor:default}

/* Fold alt på én gang. Står i overskriften, kun når der er mere end ét
   kort at folde. */
.foldalt{background:none;border:0;padding:2px 0;margin-top:6px;cursor:pointer;
  font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-35);text-decoration:underline;
  text-underline-offset:3px}
.foldalt:hover{color:var(--accent-ink)}

/* ═══ FANER — fælles (14-09). Mekanikken er faner() i portal.js. ═══ */
.tabs{display:flex;gap:2px;margin:6px 0 16px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.tab{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:10px 15px;border:0;background:none;
  color:var(--ink-35);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink-60)}
.tab[aria-selected=true]{color:var(--accent-ink);border-bottom-color:var(--accent)}
.tab[hidden]{display:none}
/* Et afsnit inde i en rude skal ikke starte med sin egen streg — fanen er stregen. */
[data-pane] > .afsnit:first-child{border-top:0;margin-top:0;padding-top:0}

/* ═══ AFTALEN — ÉN AFTALE, TRE FANER (30-09) ═══
   Samme stribe som prisvejen; første felt er aftalens navn. */
.vej.aftalefaner .af-navn{flex:1.3;background:var(--paper-2,#f4f6f9)}
.vej.aftalefaner .af-navn .vej-s{font-weight:700}
.vej.aftalefaner .af-navn a{color:var(--accent-ink);font-size:11.5px}

/* ═══════════════════════════════════════════════════════════════════════
   «SPØRG PORTALEN» — panelet fra højre (02-10)

   Skitsen: claude/skitse-portal-agent.html. Knappen i topbjælken og
   Ctrl+J. På brede skærme skubber panelet indholdet til side, så man kan
   se tabellen og svaret på samme tid; på smalle ligger det ovenpå.
   ═══════════════════════════════════════════════════════════════════════ */
.agentknap{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 13px;border-radius:6px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;font:600 13.5px var(--sans);cursor:pointer;white-space:nowrap}
.agentknap:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.agentknap[aria-expanded="true"]{background:var(--accent-ink);border-color:var(--accent-ink)}
.agentknap kbd{font:500 10px var(--mono);background:rgba(255,255,255,.2);border-radius:3px;padding:1px 5px}
@media (max-width:1100px){ .agentknap kbd{display:none} }
@media (max-width:760px){ .agentknap{width:42px;padding:0;justify-content:center} .agentknap-t{display:none} }

.agent-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;z-index:110;
  display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--hair);
  box-shadow:-10px 0 34px rgba(14,27,42,.14);font-size:14px}
.agent-panel[hidden]{display:none}
@media (min-width:1280px){ :root[data-agent="aaben"] body{padding-right:420px} }
.ag-h{padding:14px 16px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ag-h h2{font:700 16px var(--disp);margin:0}
.ag-ctx{font:500 11px var(--mono);color:var(--ink-60);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}
.ag-ctx span{background:var(--accent-flade);color:var(--accent-ink);border-radius:3px;padding:1px 5px}
.ag-hk{display:flex;gap:2px}
.ag-hk button{border:0;background:none;color:var(--ink-35);font-size:18px;line-height:1;padding:4px 7px;border-radius:4px;cursor:pointer}
.ag-hk button:hover{color:var(--ink);background:var(--hair-svag)}
.ag-traad{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.ag-tom{color:var(--ink-60);font-size:13px;line-height:1.55}
.ag-mig{align-self:flex-end;background:var(--accent);color:#fff;border-radius:12px 12px 2px 12px;padding:8px 12px;max-width:85%;white-space:pre-wrap;word-break:break-word}
.ag-svar p{margin:0 0 8px;line-height:1.5}
.ag-slog{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.ag-slog span{font:500 10.5px var(--mono);color:var(--ink-60);border:1px solid var(--hair);border-radius:10px;padding:1px 8px;background:var(--surface-2)}
.ag-slog span::before{content:"⌕ ";color:var(--ink-35)}
.ag-slog span.nej{color:var(--warn-ink);border-color:var(--warn);background:var(--warn-flade)}
.ag-slog span.nej::before{content:"⊘ "}
.ag-slog span.fejl{color:var(--bad-ink);border-color:var(--bad-kant)}
.ag-slog span.arb{border-style:dashed;animation:ag-puls 1.2s ease-in-out infinite}
.ag-slog span.arb::before{content:""}
@keyframes ag-puls{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){ .ag-slog span.arb{animation:none} }
.ag-fejl{color:var(--bad-ink);background:var(--bad-flade);border:1px solid var(--bad-kant);border-radius:6px;padding:7px 10px;font-size:13px}
.ag-fakta{border:1px solid var(--hair);border-radius:7px;overflow:hidden;margin:6px 0 10px;font-size:12.5px}
.ag-fakta div{display:flex;justify-content:space-between;gap:10px;padding:5px 10px;border-top:1px solid var(--hair-svag)}
.ag-fakta div:first-child{border-top:0}
.ag-fakta span:last-child{font-family:var(--mono);text-align:right}
.ag-fakta .bad{color:var(--bad-ink);font-weight:600}
.ag-fakta .ok{color:var(--ok-ink);font-weight:600}
.ag-tjek{list-style:none;padding:0;margin:6px 0 8px}
.ag-tjek li{display:flex;gap:8px;padding:4px 0;border-top:1px solid var(--hair-svag);font-size:13px}
.ag-tjek li:first-child{border-top:0}
.ag-tjek .n{font:600 12px var(--mono);min-width:34px;text-align:right}
.ag-tjek .ok{color:var(--ok)} .ag-tjek .warn{color:var(--warn)} .ag-tjek .bad{color:var(--bad)}
.ag-handl{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ag-handl a{font:600 12px var(--sans);text-decoration:none;color:var(--accent-ink);border:1px solid var(--accent);border-radius:5px;padding:4px 9px;background:var(--accent-svag)}
.ag-handl a:hover{background:var(--accent-flade)}
.ag-forslag{padding:8px 16px;display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--hair-svag)}
.ag-forslag:empty{display:none}
.ag-chip{font:12px var(--sans);border:1px solid var(--hair);border-radius:12px;padding:3px 10px;color:var(--ink-60);background:var(--surface);cursor:pointer}
.ag-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.ag-input{padding:12px 16px;border-top:1px solid var(--hair)}
.ag-input textarea{width:100%;resize:none;border:1px solid var(--hair);border-radius:8px;padding:9px 12px;font:inherit;
  color:var(--ink);background:var(--surface-2);outline:0}
.ag-input textarea:focus{border-color:var(--accent)}
.ag-fod{font:500 10.5px var(--mono);color:var(--ink-35);margin-top:6px;display:flex;justify-content:space-between;gap:8px}
.ag-fod b{color:var(--ok-ink);font-weight:500}

/* Linjen, agenten peger på (priskoersel.html → window.portalMarker). */
tr.agent-mark > td{background:var(--accent-svag) !important;box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
tr.agent-mark > td:first-child{box-shadow:inset 2px 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}