/* Forta Pay · komponenter (G68/G73 bølge B0, spor pay-redesign-b0, 15-10-2026)
 *
 * Kilde: Opus' rapporter/opus-redesign/system/fp-komponenter.css (spor pay-redesign-opus), med ændringerne herunder.
 * Bygger KUN på fp-tokens.css (genereret af scripts/fp_design_byg.py). Ingen hex her — prøven
 * tests/test_fp_design_uden_db.py tæller hex-literaler og tillader kun MobilePay-knappen (Vipps' egne farver) og
 * print-hvid.
 * Prefikset `fp-` gør at det nye sæt kan stå SIDE OM SIDE med CRM-klasserne i app.src.css under ombygningen:
 * en skabelon skifter når den er klar (B1), ikke alle på én gang. 🔴 Filen indeholder grundregler for body/h1/a —
 * den må KUN linkes fra en skabelon der er flyttet til det nye system, aldrig ind i app.css.
 * CSP: ingen style=, ingen inline-script, ingen data:. Alt der bevæger sig, slukkes af prefers-reduced-motion.
 *
 * ÆNDRET i forhold til Opus (G73 = Opus' design + Astras regler):
 *  · Statusreglen: grøn (`--fp-ok`/`--fp-ok-flade`) KUN ved bekræftet betaling. Tonen vælges i app/fp_status.py.
 *    Fire regler var grønne uden at være betalingsbevis og er nu primær: .fp-delta-op (et tal der stiger),
 *    .fp-trin-faerdig (et onboarding-trin), .fp-pakke li .fp-ikon (prissidens flueben), .fp-metode-maerke (API-dok).
 *    Prøven tillader --fp-ok kun i de navngivne regler (OK_TILLADT).
 *  · Skriftfilen hentes fra ../fonts/ (samme fil som app.css bruger; den røres ikke).
 */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  /* Skriftens egne tegn (spor pay-lcp3). Uden rangen henter et tegn Inter ikke har (fx «→») hele filen forgæves; med
     den går browseren direkte til næste skrift — som før, bare uden hentningen. Den offentlige flades delsæt
     (offentlig.css) står foran denne, og «→» udløste her den fulde skrift oven i delsættet. */
  unicode-range: U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
}

/* ───────────────────────── Grund ───────────────────────── */
/* B1 (spor pay-redesign-b1): grundreglerne gælder KUN under `.fp` — en side der er FLYTTET til det nye system sætter
   klassen på <body>. Skallen (sidebjælke, topbjælke) er klassebaseret og står på alle sider, også dem der endnu bærer
   app.css-indhold (`.kf`/`.af`, B4); dér må body/h1/a ikke skifte under dem. `.fp h1` slår app.css' `h1` på
   specificitet, så de to lag kan stå i samme dokument. */
*, *::before, *::after { box-sizing: border-box; }
.fp { -webkit-text-size-adjust: 100%; font-family: var(--fp-skrift-sans); font-optical-sizing: auto;
      font-feature-settings: 'cv11', 'ss01'; margin: 0; background: rgb(var(--fp-bg)); color: rgb(var(--fp-tekst));
      font-size: var(--fp-tekst-base); line-height: var(--fp-lh-base); -webkit-font-smoothing: antialiased; }
.fp h1, .fp h2, .fp h3, .fp h4, .fp p { margin: 0; }
.fp h1 { font-size: var(--fp-tekst-2xl); line-height: var(--fp-lh-2xl); letter-spacing: var(--fp-ls-2xl); font-weight: 650; }
.fp h2 { font-size: var(--fp-tekst-lg); line-height: var(--fp-lh-lg); letter-spacing: var(--fp-ls-lg); font-weight: 600; }
.fp h3 { font-size: var(--fp-tekst-md); font-weight: 600; }
.fp a { color: rgb(var(--fp-link)); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fp a:hover { text-decoration-thickness: 2px; }
.fp :focus-visible, .fp-app :focus-visible { outline: 2px solid rgb(var(--fp-fokus)); outline-offset: 2px; border-radius: var(--fp-radius-xs); }
.fp code, .fp kbd, .fp-mono { font-family: var(--fp-skrift-mono); font-size: 0.92em; }
.fp-tal, .fp-num, td.fp-num { font-variant-numeric: tabular-nums; }
/* pay-designloeft-produkt: en dato knækkes aldrig efter bindestregen («22-» / «01-2027»). Sættes af skabelonernes dato(). */
.fp-ubrudt { white-space: nowrap; }
/* pay-designloeft-produkt (fund fra pay-designloeft-web, skud ved 1440): en knap i en tabelcelle brydes ikke («Opret» /
 * «afdrag»), og heller ikke et beløb («777,00» / «DKK» ved 375). UDEN `.fp`-præfiks: målt på /kreditor/indbetalinger,
 * som stadig står i den gamle `kf`-ramme, hvor `.fp …` aldrig rammer. Under 768 KUN i en tabel der ruller
 * (`.tabel-rulle`) — målt: debitortabellen uden rulle blev 391 px bred ved 375. */
.tabel-rulle .data-table td :is(.btn-primary, .btn-secondary, .btn-ghost), .tabel-rulle .data-table td.td-amount { white-space: nowrap; }
@media (min-width: 768px) {
  .data-table td :is(.btn-primary, .btn-secondary, .btn-ghost), .data-table td.td-amount { white-space: nowrap; }
}
.fp-skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
             white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.fp-svag { color: rgb(var(--fp-tekst-svag)); }
.fp-lille { font-size: var(--fp-tekst-sm); }
.fp-xs { font-size: var(--fp-tekst-xs); }
.fp-etiket { font-size: var(--fp-tekst-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
             color: rgb(var(--fp-tekst-svag)); }
.fp-ikon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.fp-ikon-lille { width: 1em; height: 1em; }
.fp-ikon-stor { width: 1.5em; height: 1.5em; }
.fp-raekke { display: flex; align-items: center; gap: 0.5rem; }
.fp-raekke-bryd { flex-wrap: wrap; }
.fp-raekke-mellem { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fp-stak > * + * { margin-top: 1rem; }
.fp-stak-lille > * + * { margin-top: 0.5rem; }
.fp-stak-stor > * + * { margin-top: 1.5rem; }
.fp-gitter { display: grid; gap: 1rem; }
@media (min-width: 720px) { .fp-gitter-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                            .fp-gitter-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                            .fp-gitter-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fp-gitter-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp-gitter-hoved { display: grid; gap: 1.25rem; }
.fp-gitter > *, .fp-gitter-hoved > *, .fp-dok > * { min-width: 0; }
@media (max-width: 719px) { .fp-skjul-mobil { display: none !important; } }
@media (min-width: 1100px) { .fp-gitter-hoved { grid-template-columns: minmax(0, 1fr) 360px; } }
hr.fp-skille { border: 0; border-top: 1px solid rgb(var(--fp-kant)); margin: 1.25rem 0; }

/* ───────────────────────── Skal: sidebjælke + indhold ───────────────────────── */
.fp-app { min-height: 100vh; }
/* background-IMAGE, ikke shorthand'en: den nulstillede rammens farve, så en gammel side (`.kf`, B4) stod gennemsigtig
   ved ≥1024 (MÅLT i B1-e2e 15-10 22:43: rgba(0,0,0,0)). */
@media (min-width: 1024px) { .fp-app:has(> .fp-sidebar) { display: grid; grid-template-columns: 248px minmax(0, 1fr);
  background-image: linear-gradient(to right, rgb(var(--fp-sidebar)) 248px, transparent 248px); } }
.fp-sidebar { display: none; background: rgb(var(--fp-sidebar)); color: rgb(var(--fp-sidebar-tekst));
              padding: 1.25rem 0.875rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
              flex-direction: column; gap: 1.25rem; }
@media (min-width: 1024px) { .fp-sidebar { display: flex; } }
.fp-sidebar-maerke { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.5rem; color: rgb(var(--fp-sidebar-aktiv));
                     text-decoration: none; font-weight: 700; font-size: var(--fp-tekst-md); letter-spacing: -0.01em; }
.fp-sidebar-maerke img { width: 28px; height: 28px; }
.fp-sidebar-maerke span span { font-weight: 500; color: rgb(var(--fp-accent)); }
.fp-kreditorvaelger { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.625rem 0.75rem;
                      border-radius: var(--fp-radius-md); background: rgb(var(--fp-sidebar-flade)); color: rgb(var(--fp-sidebar-aktiv));
                      border: 1px solid rgb(255 255 255 / 0.06); font: inherit; text-align: left; cursor: pointer; }
.fp-kreditorvaelger > span:nth-child(2) { min-width: 0; flex: 1; font-size: var(--fp-tekst-sm); font-weight: 600; }
.fp-kreditorvaelger > span:nth-child(2) > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-kreditorvaelger small { display: block; font-weight: 400; color: rgb(var(--fp-sidebar-tekst)); font-size: var(--fp-tekst-xs); }
.fp-kreditorvaelger .fp-avatar { background: rgb(var(--fp-accent)); color: rgb(var(--fp-sidebar)); }
.fp-nav { display: flex; flex-direction: column; gap: 2px; }
.fp-nav-gruppe { font-size: var(--fp-tekst-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
                 color: rgb(var(--fp-sidebar-tekst) / 0.85); padding: 0.75rem 0.75rem 0.25rem; }
.fp-nav-punkt { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem;
                border-radius: var(--fp-radius-sm); color: rgb(var(--fp-sidebar-tekst)); text-decoration: none;
                font-weight: 500; transition: background var(--fp-tid-hurtig) var(--fp-kurve-ud), color var(--fp-tid-hurtig); }
.fp-nav-punkt:hover { background: rgb(255 255 255 / 0.06); color: rgb(var(--fp-sidebar-aktiv)); text-decoration: none; }
.fp-nav-punkt[aria-current="page"] { background: rgb(var(--fp-sidebar-flade)); color: rgb(var(--fp-sidebar-aktiv)); }
.fp-nav-punkt[aria-current="page"]::before { content: ''; position: absolute; left: -0.875rem; top: 0.375rem; bottom: 0.375rem;
                                             width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--fp-accent)); }
/* `.fp a` (0,1,1) slår en bar klasse (0,1,0) — uden `.fp-app` foran fik sidebjælkens links linkfarven (lilla på
   lilla, MÅLT af axe ved 1440 i lys: 10 noder pr. side). Samme farver, én klasse mere. */
.fp-app .fp-sidebar-maerke { color: rgb(var(--fp-sidebar-aktiv)); }
.fp-app .fp-nav-punkt { color: rgb(var(--fp-sidebar-tekst)); }
.fp-app .fp-nav-punkt:hover, .fp-app .fp-nav-punkt[aria-current="page"] { color: rgb(var(--fp-sidebar-aktiv)); }
.fp-nav-tal { margin-left: auto; font-size: var(--fp-tekst-xs); font-weight: 600; padding: 0 0.4rem; border-radius: var(--fp-radius-fuld);
              background: rgb(var(--fp-accent)); color: rgb(var(--fp-sidebar)); font-variant-numeric: tabular-nums; }
.fp-sidebar-fod { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.fp-sandbox-maerke { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fp-tekst-xs); padding: 0.5rem 0.75rem;
                     border-radius: var(--fp-radius-sm); border: 1px dashed rgb(var(--fp-accent) / 0.5); color: rgb(var(--fp-sidebar-aktiv)); }

.fp-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem;
             padding: 0.75rem 1rem; background: rgb(var(--fp-bg) / 0.85); backdrop-filter: blur(10px);
             border-bottom: 1px solid rgb(var(--fp-kant)); }
@media (min-width: 1024px) { .fp-topbar { padding: 0.75rem 2rem; } }
.fp-topbar-maerke { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; text-decoration: none; color: rgb(var(--fp-tekst)); }
.fp-topbar-maerke img { width: 28px; height: 28px; }
@media (min-width: 1024px) { .fp-topbar-maerke, .fp-mobilmenu { display: none !important; } }
.fp-broedkrumme { display: none; align-items: center; gap: 0.375rem; color: rgb(var(--fp-tekst-svag)); font-size: var(--fp-tekst-sm); }
.fp-broedkrumme a { color: inherit; text-decoration: none; }
.fp-broedkrumme [aria-current] { color: rgb(var(--fp-tekst)); font-weight: 500; }
@media (min-width: 1024px) { .fp-broedkrumme { display: flex; } }
.fp-topbar-hoejre { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.fp-soegeknap { text-decoration: none !important; display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.4rem 0.5rem 0.4rem 0.75rem;
                border-radius: var(--fp-radius-md); border: 1px solid rgb(var(--fp-kant)); background: rgb(var(--fp-flade));
                color: rgb(var(--fp-tekst-svag)); font: inherit; font-size: var(--fp-tekst-sm); cursor: pointer;
                transition: border-color var(--fp-tid-hurtig), box-shadow var(--fp-tid-hurtig); }
.fp-soegeknap:hover { border-color: rgb(var(--fp-kant-staerk)); box-shadow: var(--fp-skygge-1); }
.fp-soegeknap .fp-soege-tekst { display: none; }
@media (min-width: 720px) { .fp-soegeknap { width: 280px; } .fp-soegeknap .fp-soege-tekst { display: inline; } }
.fp-soegeknap kbd { margin-left: auto; }
.fp-kbd, .fp kbd { display: inline-flex; align-items: center; gap: 2px; padding: 0 0.375rem; min-width: 1.5em; justify-content: center;
               font-size: var(--fp-tekst-xs); line-height: 1.5rem; border-radius: var(--fp-radius-xs);
               border: 1px solid rgb(var(--fp-kant)); border-bottom-width: 2px; background: rgb(var(--fp-flade-2));
               color: rgb(var(--fp-tekst-2)); font-family: var(--fp-skrift-sans); }
.fp-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: var(--fp-radius-fuld);
             background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); font-weight: 650; font-size: var(--fp-tekst-sm); }

/* Mobilmenu: <details> åbner uden script */
.fp-mobilmenu { position: relative; }
.fp-mobilmenu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
                          border-radius: var(--fp-radius-md); color: rgb(var(--fp-tekst)); }
.fp-mobilmenu > summary::-webkit-details-marker { display: none; }
.fp-mobilmenu[open] > .fp-mobilmenu-panel { display: flex; }
.fp-mobilmenu-panel { display: none; position: fixed; inset: 3.75rem 0 0 0; z-index: 30; flex-direction: column; gap: 2px;
                      padding: 1rem; background: rgb(var(--fp-sidebar)); overflow-y: auto; animation: fp-glid-ned var(--fp-tid-normal) var(--fp-kurve-ud); }

.fp-indhold { max-width: 1320px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
@media (min-width: 1024px) { .fp-indhold { padding: 2rem 2rem 5rem; } }
section + .fp-gitter-hoved, .fp-gitter + .fp-gitter-hoved, section + .fp-gitter, .fp-gitter + section { margin-top: 1.5rem; }
.fp-sidehoved { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.fp-sidehoved p { color: rgb(var(--fp-tekst-svag)); margin-top: 0.25rem; }

/* ───────────────────────── Knapper ───────────────────────── */
.fp-knap { --k-bg: var(--fp-flade); --k-fg: var(--fp-tekst); --k-kant: var(--fp-kant-staerk);
           display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem;
           padding: 0.5rem 1rem; border-radius: var(--fp-radius-md); border: 1px solid rgb(var(--k-kant) / 0.55);
           background: rgb(var(--k-bg)); color: rgb(var(--k-fg)); font: inherit; font-weight: 600; font-size: var(--fp-tekst-sm);
           text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none;
           transition: background var(--fp-tid-hurtig) var(--fp-kurve-ud), box-shadow var(--fp-tid-hurtig), transform var(--fp-tid-hurtig); }
.fp-knap:hover { text-decoration: none; background: rgb(var(--fp-flade-2)); }
.fp-knap:active { transform: translateY(1px) scale(0.99); }
.fp-knap-primaer { --k-bg: var(--fp-primaer); --k-fg: var(--fp-paa-primaer); --k-kant: var(--fp-primaer);
                   box-shadow: var(--fp-skygge-1), inset 0 1px 0 rgb(255 255 255 / 0.12); }
.fp-knap-primaer:hover { background: rgb(var(--fp-primaer-hover)); box-shadow: var(--fp-skygge-2); }
.fp-knap-sekundaer { --k-bg: var(--fp-primaer-flade); --k-fg: var(--fp-primaer); --k-kant: var(--fp-primaer-flade); }
.fp-knap-sekundaer:hover { background: rgb(var(--fp-primaer-flade)); box-shadow: inset 0 0 0 1px rgb(var(--fp-primaer) / 0.4); }
.fp-knap-stille { --k-bg: var(--fp-flade); border-color: transparent; background: transparent; }
.fp-knap-stille:hover { background: rgb(var(--fp-flade-2)); }
.fp-knap-fare { --k-bg: var(--fp-fare-flade); --k-fg: var(--fp-fare); --k-kant: var(--fp-fare); }
/* pay-designloeft-produkt: en knap der er et <a> skal beholde knappens tekstfarve. `.fp a` (0,1,1) vandt over
   `.fp-knap-primaer` (0,1,0) → lilla tekst på lilla knap, kontrast 1,0 («Kom i gang»). */
.fp a.fp-knap-primaer, .fp a.fp-knap-fare { color: rgb(var(--k-fg)); }
.fp-knap-stor { min-height: 3.25rem; padding: 0.75rem 1.5rem; font-size: var(--fp-tekst-md); border-radius: var(--fp-radius-lg); }
.fp-knap-lille { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: var(--fp-tekst-xs); }
.fp-knap-ikon { padding: 0; width: 2.5rem; }
.fp-knap-fuld { width: 100%; white-space: normal; text-align: center; }
.fp-knap[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.fp-knap[aria-busy="true"]::after { content: ''; position: absolute; width: 1rem; height: 1rem; border-radius: 50%;
                                    border: 2px solid rgb(var(--k-fg)); border-right-color: transparent; animation: fp-drej 700ms linear infinite; }

/* ───────────────────────── Felter ───────────────────────── */
.fp-felt { display: flex; flex-direction: column; gap: 0.375rem; }
.fp-felt label, .fp-felt-etiket { font-weight: 600; font-size: var(--fp-tekst-sm); }
.fp-felt-hjaelp { font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); }
.fp-felt-fejl { font-size: var(--fp-tekst-xs); color: rgb(var(--fp-fare)); display: flex; gap: 0.375rem; align-items: center; font-weight: 500; }
.fp-input, .fp-select { width: 100%; min-height: 2.5rem; padding: 0.5rem 0.75rem; border-radius: var(--fp-radius-md);
                        border: 1px solid rgb(var(--fp-kant-staerk)); background: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst));
                        font: inherit; transition: border-color var(--fp-tid-hurtig), box-shadow var(--fp-tid-hurtig); }
.fp-input::placeholder { color: rgb(var(--fp-tekst-svag)); }
.fp-input:hover, .fp-select:hover { border-color: rgb(var(--fp-tekst-svag)); }
.fp-input:focus, .fp-select:focus { outline: none; border-color: rgb(var(--fp-fokus)); box-shadow: 0 0 0 3px rgb(var(--fp-fokus) / 0.3); }
.fp-input[aria-invalid="true"] { border-color: rgb(var(--fp-fare)); }
.fp-input-gruppe { position: relative; }
.fp-input-gruppe .fp-ikon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: rgb(var(--fp-tekst-svag)); }
.fp-input-gruppe .fp-input { padding-left: 2.25rem; }

/* ───────────────────────── Kort ───────────────────────── */
.fp-kort { background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); border-radius: var(--fp-radius-lg);
           box-shadow: var(--fp-skygge-1); }
.fp-kort-krop { padding: 1.25rem; }
.fp-kort-hoved { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem;
                 border-bottom: 1px solid rgb(var(--fp-kant)); }
.fp-kort-hoved h2 { font-size: var(--fp-tekst-md); }
a.fp-kort, .fp-kort-klik { display: block; color: inherit; text-decoration: none;
                           transition: box-shadow var(--fp-tid-normal) var(--fp-kurve-ud), transform var(--fp-tid-normal) var(--fp-kurve-ud), border-color var(--fp-tid-normal); }
a.fp-kort.fp-raekke { display: flex; gap: 1rem; }
a.fp-kort:hover, .fp-kort-klik:hover { box-shadow: var(--fp-skygge-2); transform: translateY(-2px); border-color: rgb(var(--fp-kant-staerk) / 0.5); }

/* ───────────────────────── Nøgletal ───────────────────────── */
.fp-kpi { position: relative; padding: 1.125rem 1.25rem 1rem; overflow: hidden; }
.fp-kpi-etiket { display: flex; align-items: center; gap: 0.5rem; color: rgb(var(--fp-tekst-svag)); font-weight: 500; font-size: var(--fp-tekst-sm); }
.fp-kpi-vaerdi { margin-top: 0.5rem; font-size: var(--fp-tekst-2xl); line-height: 1.1; letter-spacing: var(--fp-ls-2xl); font-weight: 700;
                 font-variant-numeric: tabular-nums; }
.fp-kpi-vaerdi small { font-size: var(--fp-tekst-sm); font-weight: 500; color: rgb(var(--fp-tekst-svag)); margin-left: 0.25rem; letter-spacing: 0; }
.fp-kpi-fod { margin-top: 0.625rem; display: flex; align-items: center; gap: 0.5rem; font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); }
.fp-delta { display: inline-flex; align-items: center; gap: 0.125rem; font-weight: 600; padding: 0.0625rem 0.375rem; border-radius: var(--fp-radius-fuld); }
.fp-delta-op { color: rgb(var(--fp-primaer)); background: rgb(var(--fp-primaer-flade)); }
.fp-delta-ned { color: rgb(var(--fp-fare)); background: rgb(var(--fp-fare-flade)); }
.fp-gnist { position: absolute; right: 1rem; bottom: 1rem; width: 96px; height: 32px; overflow: visible; }
.fp-gnist path.fp-linje { fill: none; stroke: rgb(var(--fp-diagram-1)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
                          stroke-dasharray: 200; stroke-dashoffset: 200; animation: fp-tegn 1.1s var(--fp-kurve-ud) 250ms forwards; }
.fp-gnist path.fp-areal { fill: rgb(var(--fp-diagram-1) / 0.12); stroke: none; }
.fp-kpi-fremhaevet { background: linear-gradient(135deg, rgb(var(--fp-sidebar)) 0%, rgb(var(--fp-primaer-hover)) 140%); color: rgb(var(--fp-sidebar-aktiv)); border-color: transparent; }
.fp-kpi-fremhaevet .fp-kpi-etiket, .fp-kpi-fremhaevet .fp-kpi-fod, .fp-kpi-fremhaevet .fp-kpi-vaerdi small { color: rgb(var(--fp-sidebar-tekst)); }
.fp-kpi-fremhaevet .fp-gnist path.fp-linje { stroke: rgb(var(--fp-accent)); }
.fp-kpi-fremhaevet .fp-gnist path.fp-areal { fill: rgb(var(--fp-accent) / 0.16); }

/* ───────────────────────── Chips ───────────────────────── */
.fp-chip { --c: var(--fp-neutral); --cb: var(--fp-neutral-flade);
           display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem 0.125rem 0.4375rem; border-radius: var(--fp-radius-fuld);
           background: rgb(var(--cb)); color: rgb(var(--c)); font-size: var(--fp-tekst-xs); font-weight: 600; white-space: nowrap; line-height: 1.5; }
.fp-chip::before { content: ''; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
.fp-chip-ok { --c: var(--fp-ok); --cb: var(--fp-ok-flade); }
.fp-chip-advarsel { --c: var(--fp-advarsel); --cb: var(--fp-advarsel-flade); }
.fp-chip-fare { --c: var(--fp-fare); --cb: var(--fp-fare-flade); }
.fp-chip-info { --c: var(--fp-info); --cb: var(--fp-info-flade); }
.fp-chip-primaer { --c: var(--fp-primaer); --cb: var(--fp-primaer-flade); }
.fp-chip-puls::before { animation: fp-puls 1.8s var(--fp-kurve-ind-ud) infinite; }
.fp-filterchips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fp-filterchip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0.25rem 0.75rem; border-radius: var(--fp-radius-fuld);
                 border: 1px solid rgb(var(--fp-kant)); background: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst-2));
                 font: inherit; font-size: var(--fp-tekst-sm); font-weight: 500; cursor: pointer; text-decoration: none;
                 transition: all var(--fp-tid-hurtig) var(--fp-kurve-ud); }
.fp-filterchip:hover { border-color: rgb(var(--fp-kant-staerk)); text-decoration: none; }
.fp-filterchip[aria-pressed="true"], .fp-filterchip[aria-current="true"] { background: rgb(var(--fp-tekst)); color: rgb(var(--fp-flade)); border-color: rgb(var(--fp-tekst)); }
.fp-filterchip .fp-tael { font-variant-numeric: tabular-nums; font-size: var(--fp-tekst-xs); opacity: 0.85; }

/* ───────────────────────── Tabel ───────────────────────── */
.fp-tabel-ramme { overflow-x: auto; }
.fp-tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fp-tekst-sm); }
.fp-tabel th { position: sticky; top: 0; text-align: left; font-weight: 600; font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag));
               letter-spacing: 0.04em; text-transform: uppercase; padding: 0.625rem 1rem; background: rgb(var(--fp-flade-2));
               border-bottom: 1px solid rgb(var(--fp-kant)); white-space: nowrap; }
.fp-tabel td { padding: 0.75rem 1rem; border-bottom: 1px solid rgb(var(--fp-kant)); vertical-align: middle; }
.fp-tabel tbody tr { transition: background var(--fp-tid-hurtig); }
.fp-tabel tbody tr:hover { background: rgb(var(--fp-flade-2) / 0.7); }
.fp-tabel tbody tr:last-child td { border-bottom: 0; }
.fp-tabel .fp-num { text-align: right; white-space: nowrap; }
.fp-tabel a.fp-raekkelink { color: rgb(var(--fp-tekst)); font-weight: 600; text-decoration: none; }
.fp-tabel a.fp-raekkelink:hover { color: rgb(var(--fp-link)); text-decoration: underline; }
.fp-tabel input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: rgb(var(--fp-primaer)); }
/* < 720 px: rækker bliver kort. Etiketten kommer fra data-etiket (CSS attr(), intet script). */
@media (max-width: 719px) {
  .fp-tabel-kort thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fp-tabel-kort, .fp-tabel-kort tbody, .fp-tabel-kort tr, .fp-tabel-kort td { display: block; width: 100%; }
  /* faste områder: [titel | beløb] over [meta | status]; celler uden data-omr skjules på mobil */
  .fp-tabel-kort tr { padding: 0.875rem 1rem; border-bottom: 1px solid rgb(var(--fp-kant)); display: grid;
                      grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'titel beloeb' 'meta status'; gap: 0.25rem 1rem; align-items: center; }
  .fp-tabel-kort td { padding: 0; border: 0; display: none; }
  .fp-tabel-kort td[data-omr] { display: block; }
  .fp-tabel-kort td[data-omr="titel"] { grid-area: titel; } .fp-tabel-kort td[data-omr="beloeb"] { grid-area: beloeb; text-align: right; }
  .fp-tabel-kort td[data-omr="meta"] { grid-area: meta; } .fp-tabel-kort td[data-omr="status"] { grid-area: status; text-align: right; }
  .fp-tabel-kort td[data-omr="meta"] div { display: inline; } .fp-tabel-kort td[data-omr="meta"] div::before { content: ' · '; }
}

/* ───────────────────────── Faner ───────────────────────── */
.fp-faner { display: flex; gap: 0.25rem; border-bottom: 1px solid rgb(var(--fp-kant)); overflow-x: auto; }
.fp-fane { position: relative; padding: 0.625rem 0.875rem; color: rgb(var(--fp-tekst-svag)); font-weight: 500; text-decoration: none; white-space: nowrap; }
.fp-fane:hover { color: rgb(var(--fp-tekst)); text-decoration: none; }
.fp-fane[aria-current="page"] { color: rgb(var(--fp-tekst)); font-weight: 600; }
.fp-fane[aria-current="page"]::after { content: ''; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 2px;
                                       border-radius: 2px; background: rgb(var(--fp-primaer)); }

/* ───────────────────────── Tomme tilstande der lærer ───────────────────────── */
.fp-tom { display: grid; justify-items: center; text-align: center; gap: 0.75rem; padding: 3rem 1.5rem; }
.fp-tom-figur { width: 120px; height: 96px; }
.fp-tom-figur .fp-f-flade { fill: rgb(var(--fp-primaer-flade)); }
.fp-tom-figur .fp-f-kort { fill: rgb(var(--fp-flade)); stroke: rgb(var(--fp-kant-staerk) / 0.6); }
.fp-tom-figur .fp-f-linje { fill: rgb(var(--fp-kant)); }
.fp-tom-figur .fp-f-accent { fill: rgb(var(--fp-accent)); }
.fp-tom-figur .fp-f-primaer { fill: rgb(var(--fp-primaer)); }
.fp-tom h3 { font-size: var(--fp-tekst-lg); }
.fp-tom p { max-width: 46ch; color: rgb(var(--fp-tekst-svag)); }
.fp-tom-trin { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 0.25rem; font-size: var(--fp-tekst-sm); color: rgb(var(--fp-tekst-2)); }
.fp-tom-trin span { display: inline-flex; align-items: center; gap: 0.375rem; }
.fp-tom-trin b { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%;
                 background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); font-size: var(--fp-tekst-xs); }

/* ───────────────────────── Bannere ───────────────────────── */
.fp-banner { --c: var(--fp-info); --cb: var(--fp-info-flade); display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem;
             border-radius: var(--fp-radius-md); background: rgb(var(--cb)); color: rgb(var(--fp-tekst)); border: 1px solid rgb(var(--c) / 0.25); }
.fp-banner > .fp-ikon { color: rgb(var(--c)); margin-top: 0.125rem; }
.fp-banner-advarsel { --c: var(--fp-advarsel); --cb: var(--fp-advarsel-flade); }
.fp-banner-fare { --c: var(--fp-fare); --cb: var(--fp-fare-flade); }
.fp-banner-ok { --c: var(--fp-ok); --cb: var(--fp-ok-flade); }

/* ───────────────────────── Tidslinje ───────────────────────── */
.fp-tidslinje { list-style: none; margin: 0; padding: 0; }
.fp-tidslinje li { position: relative; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.75rem; padding-bottom: 1.25rem; }
.fp-tidslinje li::before { content: ''; position: absolute; left: calc(0.875rem - 1px); top: 1.75rem; bottom: 0; width: 2px; background: rgb(var(--fp-kant)); }
.fp-tidslinje li:last-child::before { display: none; }
.fp-tl-prik { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--fp-flade-2));
              color: rgb(var(--fp-tekst-svag)); border: 2px solid rgb(var(--fp-flade)); box-shadow: 0 0 0 1px rgb(var(--fp-kant)); }
.fp-tl-prik .fp-ikon { width: 0.875rem; height: 0.875rem; }
.fp-tl-ok .fp-tl-prik { background: rgb(var(--fp-ok)); color: rgb(var(--fp-flade)); box-shadow: none; }
.fp-tl-nu .fp-tl-prik { background: rgb(var(--fp-primaer)); color: rgb(var(--fp-paa-primaer)); box-shadow: 0 0 0 4px rgb(var(--fp-primaer) / 0.18); }
.fp-tl-plan .fp-tl-prik { background: transparent; border-style: dashed; border-color: rgb(var(--fp-kant-staerk)); box-shadow: none; }
.fp-tl-tid { font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); }
.fp-tl-titel { font-weight: 600; }

/* ───────────────────────── Fremdrift / tjekliste ───────────────────────── */
.fp-fremdrift { height: 0.5rem; border-radius: var(--fp-radius-fuld); background: rgb(var(--fp-flade-3)); overflow: hidden; }
.fp-fremdrift > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--fp-primaer)), rgb(var(--fp-accent)));
                       transform-origin: left; animation: fp-vokse var(--fp-tid-fejring) var(--fp-kurve-ud) both; }
.fp-fremdrift-60 > span { width: 60%; }
.fp-fremdrift-40 > span { width: 40%; }
.fp-ring { width: 72px; height: 72px; transform: rotate(-90deg); }
.fp-ring circle { fill: none; stroke-width: 7; }
.fp-ring .fp-ring-spor { stroke: rgb(var(--fp-flade-3)); }
.fp-ring .fp-ring-fyld { stroke: rgb(var(--fp-accent)); stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 188.5;
                         animation: fp-ring-40 var(--fp-tid-fejring) var(--fp-kurve-ud) 200ms forwards; }
.fp-tjekliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fp-trin { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.125rem;
           border-radius: var(--fp-radius-lg); border: 1px solid rgb(var(--fp-kant)); background: rgb(var(--fp-flade));
           transition: box-shadow var(--fp-tid-normal), border-color var(--fp-tid-normal); }
.fp-trin-nr { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
              background: rgb(var(--fp-flade-2)); color: rgb(var(--fp-tekst-svag)); border: 1px solid rgb(var(--fp-kant)); }
.fp-trin-faerdig .fp-trin-nr { background: rgb(var(--fp-primaer)); color: rgb(var(--fp-paa-primaer)); border-color: transparent; }
.fp-trin-faerdig .fp-trin-titel { color: rgb(var(--fp-tekst-svag)); }
.fp-trin-nu { border-color: rgb(var(--fp-primaer) / 0.55); box-shadow: 0 0 0 4px rgb(var(--fp-primaer) / 0.10), var(--fp-skygge-2); }
.fp-trin-nu .fp-trin-nr { background: rgb(var(--fp-primaer)); color: rgb(var(--fp-paa-primaer)); border-color: transparent; }
.fp-trin-titel { font-weight: 600; }
.fp-trin p { color: rgb(var(--fp-tekst-svag)); font-size: var(--fp-tekst-sm); margin-top: 0.125rem; }
.fp-trin-laast { opacity: 0.72; }
@media (max-width: 600px) { .fp-trin { grid-template-columns: 2.25rem 1fr; } .fp-trin > :last-child { grid-column: 2; justify-self: start; } }

/* ───────────────────────── Dialog, ⌘K, toast ───────────────────────── */
dialog.fp-modal { width: min(560px, calc(100vw - 2rem)); padding: 0; border: 1px solid rgb(var(--fp-kant)); border-radius: var(--fp-radius-xl);
                  background: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst)); box-shadow: var(--fp-skygge-3); }
dialog.fp-modal[open] { animation: fp-ind-skaler var(--fp-tid-normal) var(--fp-kurve-fjeder); }
dialog.fp-modal::backdrop { background: rgb(var(--fp-sidebar) / 0.45); backdrop-filter: blur(3px); }
.fp-modal-hoved { padding: 1.25rem 1.25rem 0.5rem; }
.fp-modal-krop { padding: 0 1.25rem 1.25rem; color: rgb(var(--fp-tekst-2)); }
.fp-modal-fod { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid rgb(var(--fp-kant));
                background: rgb(var(--fp-flade-2)); border-radius: 0 0 var(--fp-radius-xl) var(--fp-radius-xl); }
/* Statisk visning af modal/palet i designsystemsiden (en åben <dialog> kan ikke skærmbilledes ved siden af andet) */
.fp-modal-statisk { position: static; display: block; margin: 0; }

dialog.fp-palet { width: min(640px, calc(100vw - 1.5rem)); margin-top: 12vh; padding: 0; border: 1px solid rgb(var(--fp-kant));
                  border-radius: var(--fp-radius-xl); background: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst)); box-shadow: var(--fp-skygge-3); overflow: hidden; }
dialog.fp-palet[open] { animation: fp-ind-skaler var(--fp-tid-normal) var(--fp-kurve-fjeder); }
dialog.fp-palet::backdrop { background: rgb(var(--fp-sidebar) / 0.5); backdrop-filter: blur(4px); }
.fp-palet-felt { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.125rem; border-bottom: 1px solid rgb(var(--fp-kant)); }
.fp-palet-felt input { flex: 1; border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: var(--fp-tekst-md); }
.fp-palet-liste { list-style: none; margin: 0; padding: 0.5rem; max-height: 380px; overflow-y: auto; }
.fp-palet-gruppe { padding: 0.5rem 0.75rem 0.25rem; font-size: var(--fp-tekst-xs); font-weight: 600; color: rgb(var(--fp-tekst-svag)); letter-spacing: 0.04em; text-transform: uppercase; }
.fp-palet-valg { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--fp-radius-md); cursor: pointer; }
.fp-palet-valg[aria-selected="true"] { background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); }
.fp-palet-valg .fp-palet-hjaelp { margin-left: auto; color: rgb(var(--fp-tekst-svag)); font-size: var(--fp-tekst-xs); }
.fp-palet-fod { display: flex; gap: 1rem; padding: 0.625rem 1rem; border-top: 1px solid rgb(var(--fp-kant)); background: rgb(var(--fp-flade-2));
                font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); }

.fp-toaster { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.fp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; min-width: 300px; max-width: 420px; padding: 0.875rem 1rem;
            border-radius: var(--fp-radius-lg); background: rgb(var(--fp-tekst)); color: rgb(var(--fp-flade)); box-shadow: var(--fp-skygge-3);
            animation: fp-toast-ind var(--fp-tid-langsom) var(--fp-kurve-fjeder); }
.fp-toast .fp-ikon { color: rgb(var(--fp-accent)); margin-top: 0.1rem; }
.fp-toast-luk { margin-left: auto; background: none; border: 0; color: inherit; opacity: 0.75; cursor: pointer; padding: 0; }
.fp-toast-statisk { position: static; animation: none; }

/* ───────────────────────── Debitor: beløb først, mobil først ───────────────────────── */
.fp-deb { min-height: 100vh; background:
            radial-gradient(1200px 400px at 50% -120px, rgb(var(--fp-primaer) / 0.14), transparent 70%), rgb(var(--fp-bg)); }
.fp-deb-ramme { max-width: 480px; margin: 0 auto; padding: 1rem 1rem 3rem; }
@media (min-width: 720px) { .fp-deb-ramme { padding-top: 3rem; } }
.fp-deb-afsender { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.25rem 1rem; }
.fp-deb-logo { width: 2.75rem; height: 2.75rem; border-radius: var(--fp-radius-md); display: grid; place-items: center; font-weight: 700;
               background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); color: rgb(var(--fp-primaer)); box-shadow: var(--fp-skygge-1); }
.fp-deb-afsender b { display: block; }
.fp-deb-afsender small { color: rgb(var(--fp-tekst-svag)); }
.fp-deb-sprog { margin-left: auto; font-size: var(--fp-tekst-sm); }
.fp-deb-kort { background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); border-radius: var(--fp-radius-xl);
               box-shadow: var(--fp-skygge-2); overflow: hidden; }
.fp-belob-hero { padding: 1.5rem 1.5rem 1.25rem; text-align: left; }
.fp-belob { font-size: var(--fp-tekst-3xl); line-height: var(--fp-lh-3xl); letter-spacing: var(--fp-ls-3xl); font-weight: 700;
            font-variant-numeric: tabular-nums; margin-top: 0.75rem; }
.fp-belob small { font-size: var(--fp-tekst-lg); font-weight: 500; color: rgb(var(--fp-tekst-svag)); letter-spacing: 0; }
.fp-belob-meta { display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; margin-top: 0.5rem; color: rgb(var(--fp-tekst-2)); font-size: var(--fp-tekst-sm); }
.fp-belob-meta span { display: inline-flex; align-items: center; gap: 0.375rem; }
.fp-metoder { display: flex; flex-direction: column; gap: 0.625rem; padding: 0 1.5rem 1.25rem; }
.fp-metode-mobilepay { --k-bg: var(--fp-flade); background: #4961cd; color: #fff; border-color: #4961cd; } /* Vipps' egen aktiv-nuance (5,42:1) — eneste farveundtagelse, se rapport §2.6 */
.fp-metode-mobilepay:hover { background: #3F55C4; }
.fp-centreret-lille { text-align: center; margin-top: -0.25rem; }
.fp-deb-sekundaer { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid rgb(var(--fp-kant)); background: rgb(var(--fp-flade-2)); }
.fp-detaljer { border-top: 1px solid rgb(var(--fp-kant)); }
.fp-detaljer > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; font-weight: 600; }
.fp-detaljer > summary::-webkit-details-marker { display: none; }
.fp-detaljer > summary .fp-pil { margin-left: auto; transition: transform var(--fp-tid-normal) var(--fp-kurve-ud); }
.fp-detaljer[open] > summary .fp-pil { transform: rotate(180deg); }
.fp-detaljer-krop { padding: 0 1.5rem 1.25rem; }
.fp-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; font-size: var(--fp-tekst-sm); }
.fp-dl dt { color: rgb(var(--fp-tekst-svag)); }
.fp-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.fp-tillid { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1rem; padding: 1rem 1.125rem; border-radius: var(--fp-radius-lg);
             background: rgb(var(--fp-primaer-flade) / 0.6); color: rgb(var(--fp-tekst-2)); font-size: var(--fp-tekst-sm); }
.fp-tillid .fp-ikon { color: rgb(var(--fp-primaer)); margin-top: 0.125rem; }
.fp-deb-fod { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; color: rgb(var(--fp-tekst-svag)); font-size: var(--fp-tekst-xs); }
.fp-deb-fod img { width: 16px; height: 16px; }

/* Betalings-succes: CSS alene (portalen har intet script). Ring tegnes, flueben tegnes, glød pulser én gang. */
.fp-succes { display: grid; justify-items: center; text-align: center; padding: 2rem 1.5rem 1.5rem; gap: 0.75rem; }
.fp-succes-figur { width: 96px; height: 96px; border-radius: 50%; box-shadow: var(--fp-skygge-glod); animation: fp-gloed 1.6s var(--fp-kurve-ud) 600ms both; }
.fp-succes-figur svg { width: 96px; height: 96px; }
.fp-succes-figur .fp-s-flade { fill: rgb(var(--fp-ok)); transform-origin: 48px 48px; animation: fp-pop 520ms var(--fp-kurve-fjeder) both; }
.fp-succes-figur .fp-s-flueben { fill: none; stroke: rgb(var(--fp-flade)); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
                                 stroke-dasharray: 60; stroke-dashoffset: 60; animation: fp-tegn-60 420ms var(--fp-kurve-ud) 380ms forwards; }
.fp-konfetti { position: relative; width: 0; height: 0; }
.fp-konfetti i { position: absolute; width: 6px; height: 10px; border-radius: 2px; opacity: 0; animation: fp-drys 1.1s var(--fp-kurve-ud) 450ms both; }
.fp-konfetti i:nth-child(3n) { background: rgb(var(--fp-accent)); }
.fp-konfetti i:nth-child(3n+1) { background: rgb(var(--fp-primaer)); }
.fp-konfetti i:nth-child(3n+2) { background: rgb(var(--fp-diagram-3)); }
.fp-konfetti i:nth-child(1) { --x: -90px; --y: -60px; --r: 120deg; } .fp-konfetti i:nth-child(2) { --x: 80px; --y: -70px; --r: -80deg; }
.fp-konfetti i:nth-child(3) { --x: -60px; --y: -100px; --r: 200deg; } .fp-konfetti i:nth-child(4) { --x: 110px; --y: -20px; --r: 60deg; }
.fp-konfetti i:nth-child(5) { --x: -120px; --y: -10px; --r: -140deg; } .fp-konfetti i:nth-child(6) { --x: 40px; --y: -110px; --r: 90deg; }
.fp-konfetti i:nth-child(7) { --x: -20px; --y: -120px; --r: -40deg; } .fp-konfetti i:nth-child(8) { --x: 120px; --y: -90px; --r: 160deg; }

/* ───────────────────────── Offentlig: forside / prisside ───────────────────────── */
.fp-off-top { display: flex; align-items: center; gap: 1.5rem; max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem; }
.fp-off-top nav { display: none; gap: 1.5rem; }
.fp-off-top nav a { color: rgb(var(--fp-tekst-2)); text-decoration: none; font-weight: 500; }
@media (min-width: 900px) { .fp-off-top nav { display: flex; } }
.fp-off-top .fp-raekke:last-child { margin-left: auto; }
.fp-hero { position: relative; overflow: hidden; padding: 3rem 1rem 1rem; text-align: center; }
.fp-hero::before { content: ''; position: absolute; inset: -40% -10% auto; height: 640px; z-index: -1;
                   background: radial-gradient(closest-side, rgb(var(--fp-accent) / 0.22), transparent),
                               radial-gradient(closest-side at 70% 40%, rgb(var(--fp-primaer) / 0.20), transparent);
                   animation: fp-drift 18s var(--fp-kurve-ind-ud) infinite alternate; }
.fp-hero h1 { font-size: var(--fp-tekst-3xl); line-height: var(--fp-lh-3xl); letter-spacing: var(--fp-ls-3xl); font-weight: 750; max-width: 18ch; margin: 1rem auto 0; }
@media (min-width: 900px) { .fp-hero { padding: 5rem 1rem 1.5rem; } .fp-hero h1 { font-size: var(--fp-tekst-5xl); line-height: var(--fp-lh-5xl); letter-spacing: var(--fp-ls-5xl); } }
.fp-hero h1 em { font-style: normal; background: linear-gradient(90deg, rgb(var(--fp-primaer)), rgb(var(--fp-accent-tekst))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-hero p.fp-ingress { max-width: 56ch; margin: 1.25rem auto 0; font-size: var(--fp-tekst-md); color: rgb(var(--fp-tekst-2)); }
@media (min-width: 900px) { .fp-hero p.fp-ingress { font-size: var(--fp-tekst-lg); font-weight: 400; } }
.fp-hero .fp-raekke { justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.fp-pille { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.375rem; border-radius: var(--fp-radius-fuld);
            background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); font-size: var(--fp-tekst-sm); font-weight: 500; color: rgb(var(--fp-tekst-2)); box-shadow: var(--fp-skygge-1); }
.fp-pille b { padding: 0 0.5rem; border-radius: var(--fp-radius-fuld); background: rgb(var(--fp-primaer)); color: rgb(var(--fp-paa-primaer)); font-size: var(--fp-tekst-xs); }
.fp-sektion { max-width: 1200px; margin: 0 auto; padding: 3rem 1rem; }
.fp-sektion > h2 { font-size: var(--fp-tekst-2xl); line-height: var(--fp-lh-2xl); letter-spacing: var(--fp-ls-2xl); text-align: center; }
.fp-sektion > p.fp-svag { text-align: center; margin-top: 0.5rem; }
.fp-pakker { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 900px) { .fp-pakker { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.fp-pakke { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; }
.fp-pakke-pris { font-size: var(--fp-tekst-3xl); font-weight: 750; letter-spacing: var(--fp-ls-3xl); font-variant-numeric: tabular-nums; line-height: 1; }
.fp-pakke-pris small { font-size: var(--fp-tekst-sm); font-weight: 500; color: rgb(var(--fp-tekst-svag)); letter-spacing: 0; }
.fp-pakke ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--fp-tekst-sm); }
.fp-pakke li { display: flex; gap: 0.5rem; align-items: flex-start; }
.fp-pakke li .fp-ikon { color: rgb(var(--fp-primaer)); margin-top: 0.1rem; }
.fp-pakke .fp-knap { margin-top: auto; }
.fp-pakke-anbefalet { position: relative; border: 2px solid rgb(var(--fp-primaer)); box-shadow: var(--fp-skygge-2), 0 0 0 6px rgb(var(--fp-primaer) / 0.08); }
.fp-pakke-anbefalet .fp-chip { position: absolute; top: -0.75rem; left: 1.75rem; }
.fp-tillidsbaand { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 900px) { .fp-tillidsbaand { grid-template-columns: repeat(3, 1fr); } }
.fp-tillidsbaand > div { display: flex; gap: 0.875rem; align-items: flex-start; }
.fp-tillidsbaand .fp-ikonflise { flex: none; }
.fp-ikonflise { width: 2.5rem; height: 2.5rem; border-radius: var(--fp-radius-md); display: grid; place-items: center; background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); }
.fp-moerkt-baand { background: rgb(var(--fp-sidebar)); color: rgb(var(--fp-sidebar-aktiv)); border-radius: var(--fp-radius-2xl); padding: 2rem; display: grid; gap: 1.5rem; }
.fp-moerkt-baand p { color: rgb(var(--fp-sidebar-tekst)); }
@media (min-width: 900px) { .fp-moerkt-baand { grid-template-columns: 1.2fr 1fr; padding: 3rem; align-items: center; } }
.fp-beregner-ud { font-size: var(--fp-tekst-4xl); font-weight: 750; letter-spacing: var(--fp-ls-4xl); font-variant-numeric: tabular-nums; color: rgb(var(--fp-accent)); }
.fp-skyder { width: 100%; accent-color: rgb(var(--fp-accent)); }
.fp-off-fod { border-top: 1px solid rgb(var(--fp-kant)); padding: 2rem 1rem; text-align: center; color: rgb(var(--fp-tekst-svag)); font-size: var(--fp-tekst-sm); }

/* ───────────────────────── API-dok ───────────────────────── */
.fp-dok { display: grid; gap: 0; max-width: 1440px; margin: 0 auto; }
@media (min-width: 1100px) { .fp-dok { grid-template-columns: 240px minmax(0, 1fr) minmax(0, 460px); } }
.fp-dok-nav { display: none; padding: 1.5rem 1rem; border-right: 1px solid rgb(var(--fp-kant)); position: sticky; top: 3.6rem; height: calc(100vh - 3.6rem); overflow-y: auto; }
@media (min-width: 1100px) { .fp-dok-nav { display: block; } }
.fp-dok-nav a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: var(--fp-radius-sm); color: rgb(var(--fp-tekst-2)); text-decoration: none; font-size: var(--fp-tekst-sm); }
.fp-dok-nav a[aria-current] { background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); font-weight: 600; }
.fp-dok-tekst { padding: 2rem 1rem; }
@media (min-width: 1100px) { .fp-dok-tekst { padding: 2.5rem 2.5rem; } }
.fp-dok-kode { padding: 1rem; background: rgb(var(--fp-sidebar)); }
@media (min-width: 1100px) { .fp-dok-kode { padding: 2.5rem 1.5rem; position: sticky; top: 3.6rem; height: calc(100vh - 3.6rem); overflow-y: auto; } }
.fp-metode-maerke { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: var(--fp-radius-xs); font-family: var(--fp-skrift-mono);
                    font-size: var(--fp-tekst-xs); font-weight: 700; background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); }
.fp-metode-maerke.fp-get { background: rgb(var(--fp-info-flade)); color: rgb(var(--fp-info)); }
.fp-kodeblok { border-radius: var(--fp-radius-lg); background: rgb(var(--fp-sidebar-flade)); border: 1px solid rgb(255 255 255 / 0.08); overflow: hidden; }
.fp-kodeblok-hoved { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); color: rgb(var(--fp-sidebar-tekst)); font-size: var(--fp-tekst-xs); }
.fp-kodeblok-hoved .fp-knap { margin-left: auto; --k-bg: var(--fp-sidebar); --k-fg: var(--fp-sidebar-aktiv); border-color: rgb(255 255 255 / 0.15); }
.fp-kodeblok pre { margin: 0; padding: 1rem; overflow-x: auto; color: rgb(var(--fp-sidebar-aktiv)); font-family: var(--fp-skrift-mono); font-size: 12.5px; line-height: 1.7; }
.fp-kodeblok .k-s { color: rgb(var(--fp-kode-streng)); } .fp-kodeblok .k-n { color: rgb(var(--fp-kode-tal)); }
.fp-kodeblok .k-k { color: rgb(var(--fp-sidebar-tekst)); }
.fp-param { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 0.25rem 1rem; padding: 0.875rem 0; border-bottom: 1px solid rgb(var(--fp-kant)); font-size: var(--fp-tekst-sm); }
.fp-param code { font-weight: 600; color: rgb(var(--fp-tekst)); }

/* ───────────────────────── Mail (forhåndsvisning i appen; selve mailen inlines) ───────────────────────── */
.fp-mailramme { max-width: 640px; margin: 2rem auto; }

/* ───────────────────────── PDF (A4-forhåndsvisning) ───────────────────────── */

/* ───────────────────────── B1 · skallen i appen (spor pay-redesign-b1) ───────────────────────── */
/* Rammen: `.fp` = flyttet side (lys+mørk), `.kf`/`.af` + data-tema="lys" = endnu ikke flyttet (B4). */
.fp-krop { margin: 0; }
.fp-krop:has(> .fp-app.fp) { background: rgb(var(--fp-bg)); }
.fp-app.fp { background-color: rgb(var(--fp-bg)); color: rgb(var(--fp-tekst)); }
.fp-hovedramme { min-width: 0; }
.fp-spring { position: absolute; left: 0.5rem; top: -3rem; z-index: 80; padding: 0.5rem 0.875rem; border-radius: var(--fp-radius-md);
             background: rgb(var(--fp-primaer)); color: rgb(var(--fp-paa-primaer)); font-weight: 600; text-decoration: none; }
.fp-spring:focus { top: 0.5rem; }
.fp-sidebar :focus-visible, .fp-mobilmenu-panel :focus-visible { outline-color: rgb(var(--fp-accent)); }
.fp-sidebar-maerke img { width: 33px; height: 30px; }
.fp-nav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-nav-punkt .fp-ikon { opacity: 0.9; }
/* Kreditorvælgeren: en GET-formular i topbjælken (ingen script). Under 720 px på sin egen række. */
.fp-topbar { flex-wrap: wrap; }
.fp-vaelger { min-width: 0; }
.fp-vaelger > form { display: flex; margin: 0; }
.fp-vaelger-raekke { display: flex; gap: 0.375rem; min-width: 0; width: 100%; }
.fp-vaelger-felt { min-width: 0; flex: 1; min-height: 2.5rem; padding: 0.5rem 0.625rem; border-radius: var(--fp-radius-md);
                   border: 1px solid rgb(var(--fp-kant-staerk)); background: rgb(var(--fp-flade));
                   color: rgb(var(--fp-tekst)); font: inherit; font-size: var(--fp-tekst-sm); font-weight: 600; }
.fp-vaelger-knap { --k-bg: var(--fp-flade); --k-fg: var(--fp-tekst); min-height: 2.5rem; padding: 0 0.875rem; border-radius: var(--fp-radius-md);
                   border: 1px solid rgb(var(--fp-kant-staerk) / 0.55); background: rgb(var(--k-bg)); color: rgb(var(--k-fg));
                   font: inherit; font-size: var(--fp-tekst-sm); font-weight: 600; cursor: pointer; }
.fp-vaelger-knap:hover { background: rgb(var(--fp-flade-2)); }
@media (max-width: 719px) { .fp-vaelger { order: 3; flex-basis: 100%; } }
@media (min-width: 720px) { .fp-vaelger-felt { width: 16rem; flex: none; } }
/* Mobil (< 1024 px): vælgeren og menuen står i mobilmenuens panel; sidebjælken er skjult. */
.fp-mobilmenu-panel .fp-nav-gruppe:first-child { padding-top: 0.25rem; }
.fp-topbar-maerke span { font-size: var(--fp-tekst-md); }
.fp-maerke-moerk { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) .fp-maerke-lys { display: none; }
                                      :root:not([data-tema="lys"]) .fp-maerke-moerk { display: inline; } }
:root[data-tema="moerk"] .fp-maerke-lys { display: none; }
:root[data-tema="moerk"] .fp-maerke-moerk { display: inline; }
[data-tema="lys"]:not(:root) .fp-maerke-lys { display: inline; }
[data-tema="lys"]:not(:root) .fp-maerke-moerk { display: none; }
/* Brugermenuen: <details>, ingen script. */
.fp-brugermenu { position: relative; }
.fp-brugermenu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem;
                           padding: 0.25rem 0.5rem; border-radius: var(--fp-radius-md); color: rgb(var(--fp-tekst)); }
.fp-brugermenu > summary::-webkit-details-marker { display: none; }
.fp-brugermenu > summary:hover { background: rgb(var(--fp-flade-2)); }
.fp-brugermenu-navn { display: none; font-weight: 500; font-size: var(--fp-tekst-sm); }
@media (min-width: 1280px) { .fp-brugermenu-navn { display: inline; } }
.fp-brugermenu-panel { position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 40; min-width: 15rem; padding: 0.375rem;
                       border-radius: var(--fp-radius-lg); border: 1px solid rgb(var(--fp-kant)); background: rgb(var(--fp-flade));
                       color: rgb(var(--fp-tekst)); box-shadow: var(--fp-skygge-3); display: flex; flex-direction: column; gap: 2px; }
.fp-brugermenu-panel a, .fp-brugermenu-panel button { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem;
                       border-radius: var(--fp-radius-sm); color: rgb(var(--fp-tekst)); text-decoration: none; font: inherit;
                       font-size: var(--fp-tekst-sm); background: none; border: 0; cursor: pointer; }
.fp-brugermenu-panel a:hover, .fp-brugermenu-panel button:hover { background: rgb(var(--fp-flade-2)); text-decoration: none; }
.fp-brugermenu-panel form { margin: 0.25rem 0 0; padding-top: 0.25rem; border-top: 1px solid rgb(var(--fp-kant)); }
.fp-brugermenu-hvem { padding: 0.5rem 0.75rem; font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); overflow-wrap: anywhere; }
/* «Forta-produkter» (fællesdesignets trin 2, spor pay-apps-menu): samme klasser som CRM og Sign (.ft-apps/.ft-menu/
   .ft-app/.ft-her), men i Pays tokens. Ingen produktfarver her — farven står i hvert produkts eget logo
   (static/maerke/produkter/, VENDORERET.json). Lys/mørk logo efter samme regler som .fp-maerke-lys/-moerk.
   Under 720 px står kun ni-prikken, og panelet hænger i højre klynge, så de 340 px ikke løber ud til venstre. */
.ft-apps { position: relative; }
.ft-apps > summary { list-style: none; }
.ft-apps > summary::-webkit-details-marker { display: none; }
.ft-apps-knap { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2.5rem; padding: 0 0.8125rem;
                border-radius: var(--fp-radius-fuld); border: 1px solid rgb(var(--fp-kant-staerk) / 0.55);
                background: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst)); font-size: var(--fp-tekst-sm); font-weight: 600;
                line-height: 1; cursor: pointer; user-select: none; white-space: nowrap; }
.ft-apps-knap svg { width: 14px; height: 14px; flex: none; color: rgb(var(--fp-tekst-svag)); }
.ft-apps-knap:hover, .ft-apps[open] > .ft-apps-knap { background: rgb(var(--fp-flade-2)); }
.ft-apps-knap:focus-visible { outline: 2px solid rgb(var(--fp-fokus)); outline-offset: 2px; }
.ft-menu { display: none; }
.ft-apps[open] > .ft-menu { display: block; position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; width: 340px;
                            max-width: calc(100vw - 2rem); box-sizing: border-box; padding: 0.5rem;
                            background: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst)); border: 1px solid rgb(var(--fp-kant));
                            border-radius: var(--fp-radius-lg); box-shadow: var(--fp-skygge-3); }
.ft-menu-h { margin: 0.375rem 0.625rem 0.5rem; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.06em;
             text-transform: uppercase; color: rgb(var(--fp-tekst-svag)); }
.ft-liste { list-style: none; margin: 0; padding: 0; }
/* `.ft-menu a.ft-app`: over `.fp a` (linkfarven), så navnet står i brødtekstens farve som i CRM og Sign. */
.ft-menu a.ft-app { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.625rem; border-radius: var(--fp-radius-md);
          color: rgb(var(--fp-tekst)); text-decoration: none; }
.ft-menu a.ft-app:hover { background: rgb(var(--fp-flade-2)); color: rgb(var(--fp-tekst)); text-decoration: none; }
.ft-app:focus-visible { outline: 2px solid rgb(var(--fp-fokus)); outline-offset: -2px; }
.ft-app[aria-current="true"] { background: rgb(var(--fp-primaer-flade)); }
.ft-app-navn { min-width: 0; }
.ft-app-navn b { display: block; font-weight: 600; font-size: var(--fp-tekst-sm); }
.ft-app-navn small { display: block; color: rgb(var(--fp-tekst-svag)); font-size: var(--fp-tekst-xs); }
.ft-her { margin-left: auto; white-space: nowrap; font-size: var(--fp-tekst-xs); font-weight: 600; color: rgb(var(--fp-link)); }
.ft-logo-boks { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; }
.ft-logo-boks img { height: 34px; width: auto; max-width: 36px; }
/* `.ft-menu p.ft-menu-fod`: over `.fp p` (afsnittets margen), så foden flugter med overskriften. */
.ft-menu p.ft-menu-fod { margin: 0.375rem 0.625rem 0.25rem; padding-top: 0.5rem; border-top: 1px solid rgb(var(--fp-kant));
               font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); }
.ft-logo-moerk { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) .ft-logo-lys { display: none; }
                                      :root:not([data-tema="lys"]) .ft-logo-moerk { display: block; } }
:root[data-tema="moerk"] .ft-logo-lys { display: none; }
:root[data-tema="moerk"] .ft-logo-moerk { display: block; }
[data-tema="lys"]:not(:root) .ft-logo-lys { display: block; }
[data-tema="lys"]:not(:root) .ft-logo-moerk { display: none; }
@media (max-width: 719px) {
  .ft-apps-tekst { display: none; }
  .ft-apps-knap { width: 2.5rem; padding: 0; justify-content: center; }
  .ft-apps-knap svg { width: 16px; height: 16px; }
  .fp-topbar-hoejre { position: relative; }
  .ft-apps { position: static; }
}
.fp-mb { margin-bottom: 1rem; }
.fp-fod { padding: 1rem 1rem 2rem; font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); border-top: 1px solid rgb(var(--fp-kant)); }
@media (min-width: 1024px) { .fp-fod { padding: 1rem 2rem 2rem; } }
.fp-mt { margin-top: 1rem; }
/* Toast (server-renderet kvittering for en LOKAL handling — toast-reglen). Står til den lukkes. */
.fp-toast > div { min-width: 0; flex: 1; }
.fp-toast-luk[hidden] { display: none; }
@media (max-width: 480px) { .fp-toaster { left: 1rem; } .fp-toast { min-width: 0; } }

/* Nøgletal i appen: fem kort, måler som SVG med width-ATTRIBUT (CSP: ingen style). */
.fp-kpi-gitter { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-kpi-gitter > :first-child { grid-column: span 2; }
@media (min-width: 720px) { .fp-kpi-gitter { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .fp-kpi-gitter > :first-child { grid-column: auto; } }
@media (min-width: 1280px) { .fp-kpi-gitter { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fp-kpi-vaerdi { white-space: nowrap; }
@media (max-width: 719px) { .fp-kpi-vaerdi { font-size: var(--fp-tekst-xl); } }
/* pay-designloeft-produkt (målt ved 1280): fem kort i rækken gav «12.569,38 k» — tallet klippet af kortets kant (198 px
   indhold i 179 px). Tallet følger nu kortets bredde, aldrig større end før. */
@media (min-width: 720px) { .fp-kpi { container-type: inline-size; } .fp-kpi-vaerdi { font-size: min(var(--fp-tekst-2xl), 14cqi); } }
.fp-kpi-fare .fp-kpi-vaerdi { color: rgb(var(--fp-fare)); }
.fp-kpi-advarsel .fp-kpi-vaerdi { color: rgb(var(--fp-advarsel)); }
.fp-kpi-fod a { color: inherit; }
.fp-maaler { display: block; width: 100%; height: 6px; margin-top: 0.75rem; border-radius: var(--fp-radius-fuld); overflow: hidden; }
.fp-maaler .fp-maaler-spor { fill: rgb(var(--fp-flade-2)); }
.fp-maaler .fp-maaler-fare { fill: rgb(var(--fp-fare)); }
.fp-maaler .fp-maaler-advarsel { fill: rgb(var(--fp-advarsel)); }
.fp-maaler .fp-maaler-neutral { fill: rgb(var(--fp-neutral)); }
.fp-maaler .fp-maaler-primaer { fill: rgb(var(--fp-primaer)); }
.fp-kig-maaler { height: 8px; margin-top: 0; }
.fp-kig-faerdig { display: flex; gap: 0.875rem; align-items: center; padding: 1rem 1.125rem; border-radius: var(--fp-radius-lg);
                  border: 1px solid rgb(var(--fp-primaer) / 0.35); background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-tekst));
                  animation: fp-op var(--fp-tid-langsom) var(--fp-kurve-ud) both; }
/* pay-designloeft-produkt: `.fp-svag` (#5c6d70) på den lilla flade gav 3,74 (< 4,5) i «Alt er på plads». */
.fp-kig-faerdig .fp-svag { color: rgb(var(--fp-tekst-2)); }
.fp-trin .fp-trin-titel > span { margin-left: 0.25rem; vertical-align: 1px; }

/* ───────────────────────── B1 · broen: de gamle klassenavne i tokens, KUN under .fp ─────────────────────────
   En flyttet side bærer stadig `kf` (layoutet fra spor pay-designloeft), men alle FARVER kommer herfra, så lys og
   mørk følger tokens. Samme specificitet som `.kf X` — dette stilark står efter app.css og vinder. B4 flytter de øvrige
   skabeloner ved at sætte `fp_side`; broen forsvinder, når den sidste skabelon bruger fp-klasserne direkte. */
.fp .text-neutral, .fp .subhead, .fp .breadcrumb, .fp .breadcrumb a, .fp .form-help, .fp .log-time,
.fp .empty-state, .fp .maaler-tekst, .fp .resume-etiket, .fp .kpi-label, .fp .kpi-delta-neutral { color: rgb(var(--fp-tekst-svag)); }
.fp .text-neutral-strong, .fp .data-table tbody td { color: rgb(var(--fp-tekst-2)); }
.fp .text-torp-navy, .fp .kom-i-gang-titel, .fp .resume-vaerdi, .fp .kpi-value, .fp .data-table .td-amount { color: rgb(var(--fp-tekst)); }
.fp .text-torp-blue { color: rgb(var(--fp-link)); }
.fp .text-warning { color: rgb(var(--fp-advarsel)); }
.fp .text-danger, .fp .resume-stor.resume-fare .resume-vaerdi, .fp .arbejdsliste-tal-alarm { color: rgb(var(--fp-fare)); }
.fp .text-success { color: rgb(var(--fp-tekst-2)); }
.fp .bg-white, .fp .timeline-node, .fp .kpi { background-color: rgb(var(--fp-flade)); }
.fp .kpi { border-color: rgb(var(--fp-kant)); border-radius: var(--fp-radius-lg); }
.fp .border-border, .fp .tabs, .fp .kom-i-gang-klare, .fp .tidslinje-afsluttet { border-color: rgb(var(--fp-kant)); }
.fp .arbejdsliste > * + *, .fp .kom-i-gang > * + * { border-color: rgb(var(--fp-kant)); }
.fp .breadcrumb a:hover { color: rgb(var(--fp-link)); }
.fp .card { background: rgb(var(--fp-flade)); border-color: rgb(var(--fp-kant)); border-radius: var(--fp-radius-lg); box-shadow: var(--fp-skygge-1); }
.fp .card-title { color: rgb(var(--fp-tekst)); }
.fp .card-title .ikon { color: rgb(var(--fp-accent-tekst)); }
.fp .card-primaer { border-top-color: rgb(var(--fp-primaer)); }
.fp .card-sekundaer { background: rgb(var(--fp-flade-2)); box-shadow: none; }
.fp .card-sekundaer .card-title { color: rgb(var(--fp-tekst-2)); }
.fp .btn-primary { --k-bg: var(--fp-primaer); --k-fg: var(--fp-paa-primaer); background: rgb(var(--k-bg)); color: rgb(var(--k-fg));
                   border-color: rgb(var(--fp-primaer)); border-radius: var(--fp-radius-md); font-weight: 600; }
.fp .btn-primary:hover { background: rgb(var(--fp-primaer-hover)); color: rgb(var(--fp-paa-primaer)); }
.fp .btn-secondary { --k-bg: var(--fp-flade); --k-fg: var(--fp-tekst); background: rgb(var(--k-bg)); color: rgb(var(--k-fg));
                     border-color: rgb(var(--fp-kant-staerk) / 0.55); border-radius: var(--fp-radius-md); font-weight: 600; }
.fp .btn-secondary:hover { border-color: rgb(var(--fp-kant-staerk)); background: rgb(var(--fp-flade-2)); color: rgb(var(--fp-tekst)); }
.fp .btn-ghost { background: transparent; color: rgb(var(--fp-link)); border-radius: var(--fp-radius-md); }
.fp .btn-ghost:hover { background: rgb(var(--fp-flade-2)); color: rgb(var(--fp-link)); }
.fp .btn-danger { --k-bg: var(--fp-fare-flade); --k-fg: var(--fp-fare); background: rgb(var(--k-bg)); color: rgb(var(--k-fg));
                  border-color: rgb(var(--fp-fare)); border-radius: var(--fp-radius-md); }
/* 🔴 STATUSREGLEN i broen: `pill-active` er IKKE grøn under .fp — den bruges også til en aktiv aftale, en tændt
   integration og et udført importtrin. Grøn (`fp-chip-ok`) kommer kun fra app/fp_status.tone(). */
.fp .pill-active { --c: var(--fp-primaer); --cb: var(--fp-primaer-flade); background: rgb(var(--cb)); color: rgb(var(--c)); }
.fp .pill-active::before { background: currentColor; }
.fp .pill-pending { --c: var(--fp-advarsel); --cb: var(--fp-advarsel-flade); background: rgb(var(--cb)); color: rgb(var(--c)); }
.fp .pill-overdue { --c: var(--fp-fare); --cb: var(--fp-fare-flade); background: rgb(var(--cb)); color: rgb(var(--c)); }
.fp .pill-neutral { --c: var(--fp-neutral); --cb: var(--fp-neutral-flade); background: rgb(var(--cb)); color: rgb(var(--c)); }
.fp .pill-info { --c: var(--fp-info); --cb: var(--fp-info-flade); background: rgb(var(--cb)); color: rgb(var(--c)); }
.fp .alert-warning { --c: var(--fp-advarsel); --cb: var(--fp-advarsel-flade); background: rgb(var(--cb)); color: rgb(var(--fp-tekst));
                     border-color: rgb(var(--c) / 0.35); border-radius: var(--fp-radius-md); }
.fp .alert-danger { --c: var(--fp-fare); --cb: var(--fp-fare-flade); background: rgb(var(--cb)); color: rgb(var(--fp-tekst));
                    border-color: rgb(var(--c) / 0.35); border-radius: var(--fp-radius-md); }
.fp .alert-info, .fp .alert-success { --c: var(--fp-info); --cb: var(--fp-info-flade); background: rgb(var(--cb)); color: rgb(var(--fp-tekst));
                    border-color: rgb(var(--c) / 0.35); border-radius: var(--fp-radius-md); }
/* spor pay-filterlayout: `background-color`, ikke `background` — forkortelsen nulstillede @tailwindcss/forms' pil-billede,
   så en select i .fp-fladen lignede et tekstfelt (MÅLT i fakturalistens filtre 21-10). */
.fp .form-input, .fp .form-select, .fp .form-textarea { background-color: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst));
                    border-color: rgb(var(--fp-kant-staerk)); border-radius: var(--fp-radius-md); }
.fp .form-input::placeholder { color: rgb(var(--fp-tekst-svag)); }
.fp .form-label { color: rgb(var(--fp-tekst-2)); }
.fp .form-checkbox { accent-color: rgb(var(--fp-primaer)); }
/* spor pay-filterlayout: @tailwindcss/forms tegner et umarkeret felt hvidt — i mørk en hvid prik i filterpanelet. Kun
   den UMARKEREDE tilstand: den markerede bærer pluginets flueben på `currentColor` og må ikke overskrives. */
.fp .form-checkbox:not(:checked) { background-color: rgb(var(--fp-flade)); border-color: rgb(var(--fp-kant-staerk)); }
.fp .data-table thead th { background: rgb(var(--fp-flade-2)); color: rgb(var(--fp-tekst-svag)); border-color: rgb(var(--fp-kant)); }
.fp .data-table tbody td { border-color: rgb(var(--fp-kant)); }
.fp .data-table tbody tr:hover { background: rgb(var(--fp-flade-2) / 0.7); }
.fp .data-table th a { color: inherit; }
.fp .tab { color: rgb(var(--fp-tekst-svag)); }
.fp .tab:hover { color: rgb(var(--fp-tekst)); }
.fp .tab-active { color: rgb(var(--fp-tekst)); border-color: rgb(var(--fp-primaer)); font-weight: 600; }
.fp .tab-count { --c: var(--fp-neutral); --cb: var(--fp-neutral-flade); background: rgb(var(--cb)); color: rgb(var(--c)); }
.fp .tab-count-alarm { --c: var(--fp-fare); --cb: var(--fp-fare-flade); background: rgb(var(--cb)); color: rgb(var(--c)); }
.fp .arbejdsliste-tal { color: rgb(var(--fp-tekst-2)); }
/* pay-designloeft-produkt: reglen ovenfor stod EFTER `.fp .arbejdsliste-tal-alarm` med samme specificitet, så et
   alarmtal aldrig blev rødt (lys og mørk). Og `.kf .arbejdsliste-aktiv`'s `bg-danger-bg/50` er lys lyserød i mørk →
   lilla link på grå-brun, 2,0. Begge følger nu tokens. */
.fp .arbejdsliste-tal.arbejdsliste-tal-alarm { color: rgb(var(--fp-fare)); }
.fp .arbejdsliste-aktiv { background-color: rgb(var(--fp-fare-flade)); }
/* pay-designloeft-produkt (målt ved 375): `.tabel-rulle > .data-table` er 36rem bred under md, så en TOM tabels
   centrerede «Ingen tilbageførsler venter.» stod halvt uden for skærmen. En tabel med kun tom-tilstanden skal ikke rulle. */
@media (max-width: 767.98px) {
  .fp .tabel-rulle > .data-table:has(> tbody > tr:only-child > td.empty-state) { min-width: 0; }
}
.fp .kraever-forta-pay { color: rgb(var(--fp-primaer)); border-color: rgb(var(--fp-primaer)); }
.fp .kom-i-gang-klare > summary, .fp .tidslinje-afsluttet > summary { color: rgb(var(--fp-link)); }
.fp .timeline-node { border-color: rgb(var(--fp-kant)); border-radius: var(--fp-radius-md); }
.fp .timeline-node-done { border-top-color: rgb(var(--fp-primaer)); }
.fp .timeline-node-sent { border-top-color: rgb(var(--fp-info)); }
.fp .timeline-node-imported { border-top-color: rgb(var(--fp-accent-tekst)); }
.fp .timeline-node-planned { border-top-color: rgb(var(--fp-kant-staerk)); }
.fp .timeline-node-blocked { --c: var(--fp-fare); --cb: var(--fp-fare-flade); border-top-color: rgb(var(--c)); background: rgb(var(--cb)); color: rgb(var(--fp-tekst)); }
.fp .ikon-chip { --c: var(--fp-primaer); --cb: var(--fp-primaer-flade); background: rgb(var(--cb)); color: rgb(var(--c)); }
.fp .ikon-chip-fare { --c: var(--fp-fare); --cb: var(--fp-fare-flade); }
.fp .ikon-chip-advarsel { --c: var(--fp-advarsel); --cb: var(--fp-advarsel-flade); }
.fp .ikon-chip-info { --c: var(--fp-info); --cb: var(--fp-info-flade); }
.fp .ikon-chip-neutral { --c: var(--fp-neutral); --cb: var(--fp-neutral-flade); }
.fp .topnav-menu > summary { color: rgb(var(--fp-tekst-2)); }
.fp .topnav-menu-panel, .fp .eksport-panel { background: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst)); border-color: rgb(var(--fp-kant));
                     border-radius: var(--fp-radius-lg); box-shadow: var(--fp-skygge-3); }
.fp .topnav-menu-panel > a, .fp .topnav-menu-panel button { color: rgb(var(--fp-tekst)); }
.fp .topnav-menu-panel > a:hover { background: rgb(var(--fp-flade-2)); }
.fp .topnav-menu-panel > a[aria-current="page"] { color: rgb(var(--fp-primaer)); }
/* Målt i mørk (axe, B1-kørsel 15-10 22:30): app.css' faste farver der stod tilbage under .fp. Samme specificitet
   som `.kf X` — stilarket står efter app.css. */
.fp h1, .fp h2 { color: inherit; }
/* pay-designloeft-produkt (målt i mørk, 1440m): app.css' `.kf h3 { text-neutral-strong }` stod tilbage — «Afsendte
   skrivelser» og leveringskædens trin var #2d3e52 på #121a1c (1,62). */
.fp h3, .fp h4 { color: rgb(var(--fp-tekst-2)); }
.fp .arbejdsliste-tom { color: rgb(var(--fp-tekst-2)); }
.fp .arbejdsliste-tom svg { color: rgb(var(--fp-primaer)); }
.fp .arbejdsliste-nuller { border-color: rgb(var(--fp-kant)); }
.fp .arbejdsliste-nuller > summary { color: rgb(var(--fp-tekst-2)); }
.fp .arbejdsliste-nul .arbejdsliste-tal, .fp .arbejdsliste-nul a, .fp .arbejdsliste-nul > span:not(.arbejdsliste-tal),
.fp .kort-etiket, .fp .raekke-del td, .fp .raekke-del td.td-amount { color: rgb(var(--fp-tekst-svag)); }
.fp .filter-bar { background: rgb(var(--fp-flade)); border-color: rgb(var(--fp-kant)); }
.fp .data-table thead th a { color: rgb(var(--fp-tekst-svag)); }
.fp .data-table thead th a:hover { color: rgb(var(--fp-link)); }
.fp .data-table .raekke-total td { background: rgb(var(--fp-flade-2)); color: rgb(var(--fp-tekst)); border-top-color: rgb(var(--fp-kant-staerk)); }
.fp .timeline-node .timeline-titel { color: rgb(var(--fp-tekst)); }
/* 🔴 STATUSREGLEN: en udstedt faktura er ikke en betaling — tidslinjens «udført»-ikon er primær, ikke grøn. */
.fp .timeline-node-done .timeline-titel .ikon { color: rgb(var(--fp-primaer)); }
.fp .timeline-node-sent .timeline-titel .ikon { color: rgb(var(--fp-info)); }
.fp .timeline-node-imported .timeline-titel .ikon { color: rgb(var(--fp-accent-tekst)); }
.fp .timeline-node-planned .timeline-titel .ikon { color: rgb(var(--fp-tekst-svag)); }
.fp .timeline-node-blocked .timeline-titel .ikon { color: rgb(var(--fp-fare)); }
/* En lang pille i en smal kolonne (faktura, Bogføring: «Registreret uden for … opkrævning») rullede siden vandret ved
   1440 med sidebjælken (MÅLT: 1514 > 1440). I kortene må pillen bryde; i tabellerne holder app.css den på én linje. */
.fp .card > :not(.tabel-rulle) :is(.pill-active, .pill-pending, .pill-overdue, .pill-neutral, .pill-info),
.fp .card > :is(.pill-active, .pill-pending, .pill-overdue, .pill-neutral, .pill-info) { white-space: normal; }
.fp .log-entry { color: rgb(var(--fp-tekst-2)); }
.fp code { color: rgb(var(--fp-tekst)); }

/* ───────────────────────── D10 · ⌘K-palet, søgning og faner (spor pay-admin-palet) ───────────────────────── */
/* Paletten: valg og grupper skjules med `hidden` — men `display:flex` ovenfor ville ellers slå UA'ens [hidden] ud. */
.fp-palet [hidden] { display: none !important; }
.fp-palet-felt .ikon { flex: none; color: rgb(var(--fp-tekst-svag)); }
.fp-palet-luk { flex: none; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.fp-palet-valg .ikon { flex: none; }
.fp-palet-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-palet-valg .fp-palet-hjaelp { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-palet-status { margin: 0; padding: 0 1rem 0.5rem; font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); }
.fp-palet-status:empty { display: none; }
.fp-palet-fod span { display: inline-flex; align-items: center; gap: 0.25rem; }
@media (max-width: 719px) { .fp-palet-fod { display: none; } dialog.fp-palet { margin-top: 0.75rem; } }
/* Topbarens «Søg» (et link — uden script fører det til søgesiden). Tasten vises kun hvor der er plads. */
.fp-soegeknap .ikon { flex: none; }
.fp-soege-tast { display: none; }
@media (min-width: 720px) { .fp-soege-tast { display: inline-flex; } }
/* Søgesiden */
.fp-soegeformular { display: flex; gap: 0.5rem; max-width: 40rem; }
.fp-soegeformular .fp-vaelger-felt { flex: 1; font-weight: 400; }
.fp-soegeliste { list-style: none; margin: 0; padding: 0.25rem 1.25rem 1rem; display: flex; flex-direction: column; }
.fp-soegeliste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.5rem 0;
                    border-bottom: 1px solid rgb(var(--fp-kant)); }
.fp-soegeliste li:last-child { border-bottom: 0; }
.fp-soegeliste a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; overflow-wrap: anywhere; }
/* Faner på en side (static/js/faner.js): uden script er de ankerlinks; med script en tablist med aria-selected. */
.fp-fane[aria-selected="true"] { color: rgb(var(--fp-tekst)); font-weight: 600; }
.fp-fane[aria-selected="true"]::after { content: ''; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 2px;
                                        border-radius: 2px; background: rgb(var(--fp-primaer)); }
.fp-fane-tal { display: inline-block; min-width: 1.25rem; margin-left: 0.25rem; padding: 0 0.375rem; border-radius: var(--fp-radius-fuld);
               font-size: var(--fp-tekst-xs); text-align: center; background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); }
.fp-fanepanel:focus-visible { outline-offset: 4px; }
/* Farezonen: adskilt nederst, med farekanten som eneste signal (teksten siger konsekvensen). */
.fp-farezone { margin-top: 2rem; border-color: rgb(var(--fp-fare)) !important; }

/* ───────────────────────── Bevægelse ───────────────────────── */
.fp-ind { animation: fp-op var(--fp-tid-langsom) var(--fp-kurve-ud) both; }
.fp-ind-1 { animation-delay: 40ms; } .fp-ind-2 { animation-delay: 90ms; } .fp-ind-3 { animation-delay: 140ms; }
.fp-ind-4 { animation-delay: 190ms; } .fp-ind-5 { animation-delay: 240ms; } .fp-ind-6 { animation-delay: 290ms; }
.fp-skelet { border-radius: var(--fp-radius-sm); background: linear-gradient(90deg, rgb(var(--fp-flade-2)) 0%, rgb(var(--fp-flade-3)) 50%, rgb(var(--fp-flade-2)) 100%);
             background-size: 200% 100%; animation: fp-glimt 1.4s linear infinite; height: 0.875rem; }
@keyframes fp-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fp-glid-ned { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes fp-ind-skaler { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fp-toast-ind { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fp-tegn { to { stroke-dashoffset: 0; } }
@keyframes fp-tegn-60 { to { stroke-dashoffset: 0; } }
@keyframes fp-ring-40 { to { stroke-dashoffset: 75.4; } }
@keyframes fp-vokse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fp-drej { to { transform: rotate(360deg); } }
@keyframes fp-puls { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 4px transparent; } }
@keyframes fp-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fp-gloed { 0% { box-shadow: 0 0 0 0 rgb(var(--fp-accent) / 0.5); } 100% { box-shadow: var(--fp-skygge-glod); } }
@keyframes fp-drys { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; }
                     100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes fp-drift { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 3%, 0) scale(1.06); } }
@keyframes fp-glimt { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
                           animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .fp-konfetti { display: none; }
}

/* Udskrift: ingen skal, ingen skygger */
@media print { .fp-sidebar, .fp-topbar, .fp-toaster { display: none !important; } .fp-kort { box-shadow: none; } body { background: #fff; } }