@charset "UTF-8";
/* =============================================================================
   HVIDS DESIGN — fælles stilark
   -----------------------------------------------------------------------------
   ÉN KILDE TIL SANDHED. Alle HVIDS-værktøjer importerer denne fil frem for at
   have deres egen kopi af farver, fonte og komponenter.

   Baggrund: 29. juli 2026 havde fem brugerflader hver sin kopi af paletten, og
   de var drevet fra hinanden — 44 farver uden for paletten i Salgspilot, 28 i
   Kapacitetsanalyse, og fonte der blev hentet ind uden at blive brugt.

   UNDTAGELSE: Brandpilot følger INGENIØR'NEs udtryk og skal IKKE bruge denne fil.

   Sådan bruges den:
     <link rel="stylesheet" href="hvids-design.css">
   Læg linket FØR sidens eget <style>, så lokale regler stadig kan overskrive.

   FONTE HENTES IKKE HERFRA. Filen hentede før selv Space Grotesk og IBM Plex Sans
   med @import. Det blev fjernet 5. august 2026, fordi hver eneste flade allerede
   havde sit eget Google Fonts-link — importen var en dublet alle steder på nær ét,
   og dét ene sted er Konsekvensklasse, som bevidst kører uden eksterne fonte og har
   en CSP der blokerer dem. Importen ville altså aldrig hjælpe nogen, og ville koste
   en CSP-overtrædelse i konsollen netop dér hvor fontene manglede.
   Sidens eget <link> til Google Fonts er derfor fortsat sidens eget ansvar.

   Ret ALDRIG i en kopi. Ret her, og kør synk-scriptet — se README.md.
   ============================================================================= */

:root {
  /* ── Kerne ────────────────────────────────────────────────────────────── */
  /* Baggrunden var #050816 — næsten sort (L* 2). 29. sep. 2026 løftet til en dyb blå
     (L* 12), og alle flader ovenpå fulgt med, så lagene står af som før. Mærkets navy
     #050816 findes stadig i logo og grafik; som arbejdsflade var den for tung. */
  --hvids-navy:     #131D38;   /* Primær baggrund */
  --hvids-blue:     #1B4FFF;   /* Brand accent — CTA-flader, ikke tekst */
  --hvids-electric: #5FA8FF;   /* Glow, highlights, aktive tilstande */
  --hvids-silver:   #CDD5E1;   /* Sekundær tekst, metallic detaljer */
  --hvids-white:    #F4F6F9;   /* Tekst på mørk flade */
  --hvids-border:   #3C4C7D;   /* Kanter og skillelinjer */

  /* ── NAVNETS BOGSTAVER — læs dette før du farver et bogstav ─────────────
     Bogstaverne i HVIDS har hver sin farve ÉT sted i hele huset: i forklaringen
     af navnet på forsiden af hvids.dk, hvor de fem bogstaver bygges op enkeltvis.
     Farverne dér er

         H V   #E6C7A6   gylden   (Human Vision)
         I     #B08EFF   lilla
         D S   #7BB8FF   blå      (Digital Solutions)

     og de tre hører sammen som én grafik. De står i index.html, hvor de bruges.

     ALLE ANDRE STEDER er wordmarket ÉNSFARVET — navigation, footer, en apps
     header, et favikon — i samme farve som teksten omkring det. Og helst som
     billedfilen 04_wordmark_only_transparent_4096.png frem for fem bogstaver
     sat i Space Grotesk; et typet mærke ligner, men er ikke mærket.

     DER ER MED VILJE INGEN TOKENS TIL DE TRE FARVER. Der var engang én,
     --hvids-iris, beskrevet som "forbeholdt I-bogstavet i mærket" — og netop
     fordi den fandtes, blev den brugt fem steder som almindelig UI-farve:
     mærket i Kapasignal og Konsekvensklasse, KK-resultatmærkatet, en
     kategorifarve i LCA og en chipfarve i Salgspilot. Ingen af dem var
     I-bogstavet. Et token er en invitation, og lilla er ikke en UI-farve.

     Skal du bruge en accent til noget andet: --hvids-electric eller en
     seriefarve.                                                               */

  /* ── Human-palette (sekundær, varm) ────────────────────────────────────
     Afspejler "Human" i Human Vision in Digital Solutions. Bruges hvor det
     menneskelige fremhæves — typisk om-sider. Skal forblive sekundær. */
  --human:          #E6C7A6;
  --human-deep:     #D9B38C;

  /* ── Tilstandsfarver (tilføjet 29. juli 2026) ──────────────────────────
     Manglede i systemet, så hver app opfandt sine egne: Salgspilot havde
     #fca5a5, Konsekvensklasse #ff6b6b, Kapacitetsanalyse #b83232. Værdierne
     herunder er dem fra Konsekvensklasse — de var bedst afstemt med paletten.
     Alle tre er målt mod --hvids-navy og består WCAG AA (4.5:1):
       danger  7.2:1    warning 11.3:1    success 10.6:1                    */
  --hvids-danger:   #FF6B6B;
  --hvids-warning:  #FFB454;
  --hvids-success:  #3ED598;

  /* Dæmpede flader til de samme tilstande — til baggrund bag en besked.
     Lav opacitet frem for en fast tone, så de virker på enhver mørk flade. */
  --hvids-danger-bg:  rgba(255,107,107,.10);
  --hvids-warning-bg: rgba(255,180,84,.10);
  --hvids-success-bg: rgba(62,213,152,.10);

  /* ── Tilstandschips (21. august 2026) ──────────────────────────────────
     Et statusmærke i en tabel er ikke det samme som farvet tekst i en sætning,
     og det var derfor det holdt i mørkt tema og faldt i lyst.

     PÅ NAVY bærer selve KULØREN kontrasten: #FF6B6B mod næsten sort er 7,2:1 og
     lyser, også ved 11px og med en hårfin ramme. PÅ HVIDT kan den ikke det. For at
     nå 4,5:1 mod hvid skal en gul mørknes til #915B0E — og så er den brun. Rød,
     gul og grøn blev derfor alle tre tvunget ned i samme lyshed (L* 43-44) og stod
     som tre næsten ens mørke prikker: kuløren var det eneste, der skilte dem, og
     kulør er den svageste kanal ved lille skrift og tynde streger.

     Løsningen er at flytte kuløren fra skriften til FLADEN. En chip har derfor tre
     dele frem for én farve:

       --hvids-X          linjefarve — kurver, rammer, farvet tekst i en sætning
       --hvids-X-chip     chipfladen — den, der bærer kuløren på hvid flade
       --hvids-X-dyb      teksten oven på chipfladen

     I mørkt tema er -dyb den lyse tilstandsfarve og -chip en svag tone af den; i
     lyst tema er -chip lys og -dyb en dyb udgave af samme kulør. Begge veje står
     teksten over 5:1 mod sin egen flade, og de tre chips kan skelnes på afstand.
     Komponenten er .hstatus længere nede. */
  /* Neutral chip: et mærke uden tilstand — en måleuge, en kilde, et antal. Den skal
     ligne en søskende til de farvede, ikke et hul i rækken, men må ikke være mørkere
     end dem og dermed trække mere opmærksomhed end en advarsel. */
  --hvids-neutral-chip: #293968;
  --hvids-danger-chip:  rgba(255,107,107,.14);
  --hvids-warning-chip: rgba(255,180,84,.14);
  --hvids-success-chip: rgba(62,213,152,.14);
  --hvids-danger-dyb:   #FF6B6B;
  --hvids-warning-dyb:  #FFB454;
  --hvids-success-dyb:  #3ED598;

  /* ── Tilstandsfarver på LYS flade ──────────────────────────────────────
     De tre ovenfor er valgt mod --hvids-navy og fungerer kun dér. Sættes de
     på et hvidt kort, forsvinder de: advarselsgul giver 1,8:1 mod hvid, hvor
     kravet for et ikon er 3:1 og for tekst 4,5:1. Systemet er dark-mode first,
     men hvor der findes et lyst tema, skal disse bruges i stedet.
     ADVARSELSFARVEN VAR #C97F14 og stod noteret som "3,2:1 (ikon)" — altså
     bevidst kun god nok til et ikon, ikke til tekst. Men .h-msg.advarsel herunder
     saetter netop --hvids-warning som TEKSTFARVE, og saa laeses en advarsel i lyst
     tema med 2,7:1 mod sin egen flade. Noten var aerlig; den blev bare ikke
     overholdt af systemet selv. En farve, der ikke maa bruges som tekst, kan ikke
     ligge i den samme token som de to andre, der gerne maa — tokenet er en
     invitation. Den er derfor moerknet til samme kuloer (H=35 grader) ved 4,5:1.

     Maalt med WCAG 2.1 relativ luminans, mod rent hvidt kort / mod egen 10%-flade:
       danger-l  5,44:1 / 4,55:1     warning-l 5,67:1 / 4,56:1     success-l 5,30:1 / 4,54:1 */
  /* 6. okt. 2026: mørknet igen, fordi gul tekst var svær at læse på lyst tema.
     Mod hvidt kort: danger-l 7,2:1 · warning-l 8,7:1 · success-l 6,7:1. */
  --hvids-danger-l:   #A8231A;
  --hvids-warning-l:  #6E4100;
  --hvids-success-l:  #136943;

  /* ── Grafseriefarver (tilføjet 8. august 2026) ─────────────────────────
     Manglede i systemet, så hver graf opfandt sine egne: Kapasignal havde otte
     med #3FC08A, #E8A33D og #E2564F iblandt — et FEMTE tilstandssæt — LCA sit
     eget, Salgspilot sit eget. Alle otte herunder er målt: mindst 8:1 mod
     --hvids-navy i mørkt tema og mindst 4,7:1 mod hvid i lyst.

     TO REGLER, og de er vigtigere end farverne selv:

     1. En seriefarve betyder INGENTING. Grøn serie er ikke "godt", rød er ikke
        "galt". Status siges med --hvids-success/warning/danger, med et ord eller
        med et ikon — aldrig med den farve, en serie tilfældigvis fik tildelt.

     2. Farve alene skelner ikke. Sand (2) og lime (6) har samme lyshed og er
        ikke til at skille ad for en deuteranop. Giv derfor altid serier ud over
        de to første en stiplet linje, en markør eller en etiket ved siden af.

     Lilla er ikke med — se reglen om navnets bogstaver øverst i filen.        */
  --hvids-serie-1: #5FA8FF;   /* elektrisk blå */
  --hvids-serie-2: #E6C7A6;   /* sand */
  --hvids-serie-3: #56D9C0;   /* turkis */
  --hvids-serie-4: #8FB4D9;   /* stål */
  --hvids-serie-5: #FFB07C;   /* koral */
  --hvids-serie-6: #A9D96B;   /* lime */
  --hvids-serie-7: #D9B38C;   /* dyb sand */
  --hvids-serie-8: #7FD3F0;   /* cyan */

  /* ── Typografi ────────────────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', Arial, sans-serif;   /* overskrifter, UI-labels */
  --font-body:    'IBM Plex Sans', Arial, sans-serif;   /* brødtekst, data */

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-hvids:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-hover:      180ms;
  --duration-transition: 240ms;

  /* ── Flader ───────────────────────────────────────────────────────────
     Kort- og feltbaggrunde som tokens frem for faste rgba-værdier inde i
     komponentreglerne. Uden dem kan det lyse tema ikke overtage fladerne. */
  /* To solide flader mellem navy og border. Portal og Admin havde begge et
     "navy2"/"navy3" til hævede og sænkede flader — men med hver sin værdi for
     navy3 (#080E1C mod #0D1424). Samlet her på Portals værdier.               */
  --hvids-navy-2:    #293968;                /* hævet flade — modal, kort */
  --hvids-navy-3:    #16213F;                /* sænket flade — tabelrække, felt */

  --hvids-surface:   #1F2C54;   /* kort */
  --hvids-surface-2: #16213F;   /* felter, indsatte flader */
  --hvids-text-mid:  #A9B4C6;   /* dæmpet tekst — 6,8:1 på kort */

  /* ── KONTRAST MELLEM FLADER (29. september 2026) ─────────────────────────
     Teksten havde kontrast nok; det havde fladerne ikke. Baggrund, kort, felt, kant
     og gitter lå ALLE på 1,1:1 mod hinanden, så en side blev én ensartet flade uden
     struktur. Kortet var desuden halvgennemsigtigt og skiftede farve med gløden bag.
     Nu er alle flader tætte, og hvert lag har en målt forskel (se DESIGNGENNEMGANG):
       kort mod baggrund   ≥ 1,2:1     kant mod kort       ≥ 1,4:1
       felt mod kort       ≥ 1,1:1     feltkant mod kort   ≥ 3:1  (WCAG 1.4.11)
       gitter mod kort     ≥ 1,25:1    dæmpet tekst        ≥ 4,5:1 på alle flader
     To nye tokens: --hvids-kant-felt til rammen om det, man kan klikke på eller
     skrive i, og --hvids-gitter til grafernes gitterlinjer. Begge fandtes ikke, og
     derfor brugte felter og grafer --hvids-border, som skal være diskret. */
  --hvids-kant-felt: #6E80B0;   /* ramme om felter og sekundærknapper — 3,1:1 */
  --hvids-gitter:    #34446F;   /* gitterlinjer i grafer — 1,3:1 */

  /* ── Rundinger ────────────────────────────────────────────────────────── */
  --radius-card:  12px;
  --radius-input:  6px;

  /* ── Kontrollernes størrelse (tilføjet 8. august 2026) ──────────────────
     Knapper og felter havde faste størrelser herunder, afledt af portalen: 11px
     tekst, 9px indvendig luft. Det er rigtigt på et website med få knapper og
     forkert i et dataværktøj, hvor knapperne er arbejdsredskaber og skal kunne
     rammes. Derfor stod de fem værktøjer med hver deres egen knap frem for at
     bruge systemets — ikke af sløseri, men fordi systemets var for lille.

     Nu er målene tokens. Et værktøj sætter dem én gang i sin egen :root og
     bruger derefter .btn-p, .btn-s og .hinput som alle andre:

       :root { --ui-btn-tekst: 13px; --ui-btn-luft: 12px 24px; }              */
  /* 29. sep. 2026: løftet. 10-11 px knapper og etiketter blev anonyme i begge temaer —
     det var størrelsen, ikke farven, der gjorde dem svære at bruge. Gulvet er nu 12 px
     for alt, man skal kunne læse og ramme; knapper og felter er mindst 36 px høje. */
  --ui-btn-tekst:   13px;
  --ui-btn-luft:    9px 20px;
  --ui-btn-luft-s:  8px 16px;    /* sekundær: 1,5px ramme æder 3px */
  --ui-btn-hoejde:  36px;
  --ui-fane-hoejde: 40px;
  --ui-felt-tekst:  14px;
  --ui-felt-luft:   8px 12px;
  --ui-lbl-tekst:   12px;        /* feltetiketter, kolonneoverskrifter, små mærker */
  --ui-min-tekst:   12px;        /* gulv for al tekst, der skal læses */

  /* Den kraftigste blå er forbeholdt det aktive valg og den vigtigste handling:
     primærknappen, den aktive fane, det valgte i en segmentvælger. Alt andet —
     sekundære knapper, mærker, links i brødtekst — bruger --hvids-electric eller
     neutral tekst. Én stærk blå pr. skærmudsnit er målet. */
  --hvids-aktiv:    #3563FF;
}

/* ═══ LYST TEMA ══════════════════════════════════════════════════════════════
   Tilføjet 5. august 2026. Et lyst tema fandtes allerede — identisk defineret i
   Hjemmeside/theme-light-portal.css og LCA's theme-light.css — men stod ikke i
   systemet, så nye flader havde intet at slå op i. Værdierne herunder er de to
   filers, uændrede; dette er en flytning, ikke et nyt design.

   Bemærk at --hvids-navy og --hvids-white BYTTER rolle: navy er "baggrund" og
   white er "tekst på baggrunden", ikke bogstavelige farver. Det er samme greb som
   de eksisterende lyse temaer bruger, så eksisterende regler virker uændret.

   --hvids-electric bliver til blå: #5FA8FF har 1,9:1 mod hvid og forsvinder.
   Tilstandsfarverne skifter til deres -l-udgaver af samme grund.             */
:root[data-theme="light"] {
  --hvids-navy:      #F4F6F9;   /* 6. okt. 2026: Kapasignals lyse side */
  --hvids-white:     #131D38;
  --hvids-silver:    #3B4A63;
  --hvids-border:    #CDD5E1;
  --hvids-electric:  #1B4FFF;

  --hvids-navy-2:    #FFFFFF;
  --hvids-navy-3:    #EEF2FB;

  --hvids-surface:   #FFFFFF;
  --hvids-surface-2: #EEF2FB;
  --hvids-text-mid:  #4A5A72;

  --human:           #B97D3C;
  --human-deep:      #9A5F22;


  --hvids-danger:    var(--hvids-danger-l);
  --hvids-warning:   var(--hvids-warning-l);
  --hvids-success:   var(--hvids-success-l);

  /* Kraftigere end de mørke pendanter: 10 % dækning forsvinder på hvidt.
     Men fladen er ikke gratis: .h-msg sætter tilstandsfarven som tekst OVEN PÅ sin
     egen flade, så hver procent dækning spiser af kontrasten. Ved .08 landede fejl
     og ok på 4,48 og 4,41 — under 4,5 på grund af deres egen baggrund. Alfaerne er
     derfor sat, så teksten holder AA på fladen, ikke kun på det hvide kort. */
  /* Tonede flader bag beskeder og markeringer. Tætte (en rgba-tone blev mudret på den
     blålige baggrund), men blegere end chippene: #FDF1D8 gjorde hele felter gule.
     Samme styrke som tonen i mørkt tema — en antydning, ikke en farveflade. */
  --hvids-danger-bg:  #FCEFED;
  --hvids-warning-bg: #FCF6EA;
  --hvids-success-bg: #EEF7F2;

  /* Chipfladerne er FASTE lyse toner og ikke en tone af linjefarven. Havde de været
     color-mix af --hvids-warning, ville gul-chippen blive lys BRUN — linjefarven er
     jo mørknet netop for at kunne læses som tekst på hvidt. Kuløren skal hentes fra
     den rene gule, ellers forsvinder advarslen som advarsel.

     Målt mod deres egen flade: fejl 6,5:1 · advarsel 6,7:1 · ok 6,3:1. Mod bar hvid
     (hvis fladen af en eller anden grund ikke tegnes) holder teksten stadig 7,2-7,6:1,
     så chippen aldrig kan ende ulæselig. */
  /* Lysere end --hvids-surface-2 (#ECEFF4): sølv på den flade lander på 4,72:1, og
     et mærke, der kun lige klarer AA, har ingen luft, hvis nogen senere dæmper sølv.
     #F1F3F7 giver 4,90:1 og er stadig tydeligt en flade mod det hvide kort. */
  --hvids-neutral-chip: #EBF0F7;
  --hvids-danger-chip:  #FBE9E6;
  --hvids-warning-chip: #FDF1D8;
  --hvids-success-chip: #E4F3EC;
  --hvids-danger-dyb:   #9B2C1E;
  --hvids-warning-dyb:  #5C3600;
  --hvids-success-dyb:  #14634A;

  /* Seriefarverne skal ALLE laves om på lys flade. De mørke er lyse toner valgt
     mod navy; på hvidt giver de 1,5-2,3:1 og forsvinder. Hver farve herunder er
     samme kulør, mørknet til mindst 4,7:1 mod hvid. Rækkefølgen er den samme,
     så en graf skifter tone, ikke betydning, når temaet skifter. */
  --hvids-serie-1: #1B4FFF;
  --hvids-serie-2: #A8641E;
  --hvids-serie-3: #0F7A6B;
  --hvids-serie-4: #3A6E9E;
  --hvids-serie-5: #B34A18;
  --hvids-serie-6: #4A7A16;
  --hvids-serie-7: #8A5A2B;
  --hvids-serie-8: #1A6A8A;
  /* 29. september 2026: baggrunden er gjort mørkere (#F4F6F9 → #E1E7F2), så de hvide
     kort står af (1,08 → 1,24:1). Silver og text-mid var byttet om i lyst tema —
     "dæmpet" var mørkere end "sekundær" — nu følger de samme orden som i mørkt. */
  --hvids-kant-felt: #72819C;
  --hvids-aktiv:     #1B4FFF;   /* 3,9:1 på kort */
  --hvids-gitter:    #D3DBE8;   /* 1,39:1 på kort */
  /* 29. sep. 2026 (2): de lyse neutraler har fået samme blå tone som det løftede mørke
     tema (hue ≈ 222°), så de to temaer er det samme hus i to lysforhold — ikke et blåt
     og et gråt. Lagene har samme afstand som i mørkt: kort 1,24:1 mod baggrund. */
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hvids-navy);
  color: var(--hvids-white);
  font-family: var(--font-body);
}

/* Dark-mode first: hvide flader er undtagelsen, ikke udgangspunktet. */

/* Skrift og vægt sættes på elementet — det er identitet, og enhver HVIDS-overskrift
   skal have den. STØRRELSE sættes IKKE. Det var den før: h1 stod til 64px her.
   Da stilarket blev lagt ind i de eksisterende flader 5. august 2026, viste en
   optælling at ti sider ikke selv satte h1 — de ville alle være sprunget til 64px
   uden at nogen havde bedt om det. En størrelse er layout og hører til siden;
   et fælles stilark skal kunne lægges oven i en færdig side uden at flytte noget.

   Reglen ramte før h1-h4 direkte og satte ogsaa margin: 0. Det er den farligste
   linje i hele filen: .page-title paa de offentlige sider saetter margin-bottom, men
   ikke margin-top, saa browserens 0,67em top-margin ville forsvinde — omkring 43px
   ved en 64px overskrift, paa hver eneste offentlig side. Ingen havde bedt om det.

   Derfor er ALT paa overskrifter nu tilvalg. Saet .h-1/.h-2/.h-3/.h-4 paa nye
   overskrifter; eksisterende sider staar uroert. Prisen er at en ustylet <h1> ikke
   automatisk faar brandets skrift — den pris er lavere end en utilsigtet ombrydning
   af ti faerdige sider. */
.h-1, .h-2, .h-3, .h-4 { font-family: var(--font-display); font-weight: 500; margin: 0; }

.h-1 { font-size: 64px; font-weight: 600; }
.h-2 { font-size: 40px; }
.h-3 { font-size: 28px; }

/* ── Tekstskala til DATAVÆRKTØJER (tilføjet 8. august 2026) ──────────────
   Skalaen ovenfor er lavet til en hero på et website. Den passer ikke i et
   dashboard, og det viste sig præcis sådan: fem værktøjer havde hver opfundet
   sin egen — Kapasignal 30/20/12, Salgspilot 22/18/15,5, Konsekvensklasse
   24/16. Ingen af dem tog fejl; de manglede bare noget at slå op i.

   Værdierne herunder er Kapasignals, fordi den var den mest gennemførte, og
   fordi 30px er så stort en sidetitel kan være, når skærmen skal bære en tabel
   nedenunder. Brug .ha-* i værktøjer og .h-* på websitet. */
.ha-1, .ha-2, .ha-3, .ha-4 { font-family: var(--font-display); font-weight: 500; margin: 0; }

.ha-1 { font-size: 30px; letter-spacing: -.01em; }   /* sidens titel */
.ha-2 { font-size: 20px; }                            /* kortets overskrift */
.ha-3 { font-size: 15px; }                            /* underafsnit i et kort */

/* Sektionsmærke — det lille versal-ord over en gruppe. Ikke en overskrift i
   størrelse, men i funktion, så den skal også kunne stå som <h3>. */
.ha-4 {
  font-size: 12px; font-weight: 500; color: var(--hvids-silver);
  text-transform: uppercase; letter-spacing: .08em;
}

/* Tilgængelighed: skal respekteres, ikke tilvælges. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Synligt fokus. Uden dette kan siden ikke betjenes med tastatur. */
:focus-visible { outline: 2px solid var(--hvids-electric); outline-offset: 2px; }

/* ── Kort ──────────────────────────────────────────────────────────────── */
.hcard {
  background: var(--hvids-surface);
  border: 1px solid var(--hvids-border);
  border-radius: var(--radius-card);
  padding: 20px;
  backdrop-filter: blur(8px);
  transition: border-color var(--duration-transition) var(--ease-hvids),
              box-shadow  var(--duration-transition) var(--ease-hvids);
}
.hcard:hover { border-color: var(--hvids-kant-felt); box-shadow: 0 2px 12px rgba(0,0,0,.12); }
/* Statisk variant — samme flade, men reagerer ikke. Til kort man ikke kan klikke. */
.hcard-s { background: var(--hvids-surface); border: 1px solid var(--hvids-border);
           border-radius: var(--radius-card); padding: 20px; backdrop-filter: blur(8px); }

/* Diagonalt "engineering cut" — subtil premium-detalje i kortets hjørne. */
.eng-cut { position: relative; overflow: hidden; }
.eng-cut::after {
  content: ''; position: absolute; top: 0; right: 0; width: 64px; height: 64px;
  background: linear-gradient(135deg, transparent 50%, rgba(95,168,255,.10) 50%);
  pointer-events: none;
}

/* ── Knapper ───────────────────────────────────────────────────────────── */
/* TEKSTFARVEN ER FAST, og det er med vilje. Knappens flade er en blå gradient,
   som ikke skifter med temaet — så må teksten heller ikke. Stod her før
   var(--hvids-white), og den bliver til mørk navy i lyst tema: mørk tekst på
   blå gradient, 3,9:1. Reglen gælder alle flader med fast baggrund. */
.btn-p {
  background: linear-gradient(135deg, var(--hvids-blue) 0%, #3060ff 100%);
  color: #F4F6F9; border: none; border-radius: var(--radius-input);
  padding: var(--ui-btn-luft); font-family: var(--font-body); font-size: var(--ui-btn-tekst); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  min-height: var(--ui-btn-hoejde);
  /* Gløden er dæmpet (29. sep. 2026): den største blå flade skal være knappen selv. */
  box-shadow: 0 2px 10px rgba(27,79,255,.18), inset 0 1px 0 rgba(255,255,255,.1);
  transition: box-shadow 200ms var(--ease-hvids), transform 200ms var(--ease-hvids);
}
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(27,79,255,.28), inset 0 1px 0 rgba(255,255,255,.1); }

.btn-s {
  background: transparent; color: var(--hvids-white);
  border: 1.5px solid var(--hvids-kant-felt); border-radius: var(--radius-input);
  padding: var(--ui-btn-luft-s); font-family: var(--font-display); font-size: var(--ui-btn-tekst); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  min-height: var(--ui-btn-hoejde);
  transition: border-color var(--duration-hover) var(--ease-hvids), background var(--duration-hover) var(--ease-hvids);
}
.btn-s:hover { border-color: var(--hvids-electric); background: color-mix(in srgb, var(--hvids-electric) 8%, transparent); }

.btn-ghost {
  background: none; border: none; color: var(--hvids-electric);
  padding: 10px 0; font-family: var(--font-display); font-size: var(--ui-btn-tekst); min-height: var(--ui-btn-hoejde);
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}

/* Farlig handling — sletning. Rammen frem for fladen: knappen skal kunne ses,
   men ikke indbyde mere end den primære. */
.btn-danger {
  background: transparent; color: var(--hvids-danger);
  border: 1.5px solid var(--hvids-danger); border-radius: var(--radius-input);
  padding: var(--ui-btn-luft-s); font-family: var(--font-display); font-size: var(--ui-btn-tekst); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer; min-height: var(--ui-btn-hoejde);
  transition: background var(--duration-hover) var(--ease-hvids);
}
.btn-danger:hover { background: var(--hvids-danger-bg); }

.btn-p:disabled, .btn-s:disabled, .btn-danger:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── Formularfelter ────────────────────────────────────────────────────── */
.hinput {
  background: var(--hvids-surface-2); border: 1px solid var(--hvids-kant-felt);
  border-radius: var(--radius-input); color: var(--hvids-white);
  padding: var(--ui-felt-luft); font-family: var(--font-body); font-size: var(--ui-felt-tekst); outline: none;
  transition: border-color var(--duration-hover) var(--ease-hvids);
}
.hinput:focus { border-color: var(--hvids-blue); }
.hinput[aria-invalid="true"] { border-color: var(--hvids-danger); }

/* Feltets etiket. Store bogstaver og vid spatiering — teknisk, ikke skrigende. */
.hlbl {
  font-family: var(--font-body); font-size: var(--ui-lbl-tekst); font-weight: 500;
  color: var(--hvids-silver); text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: 6px;
}

/* ── Faner ─────────────────────────────────────────────────────────────── */
.htab {
  background: none; border: none; cursor: pointer; font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 18px; white-space: nowrap; border-bottom: 2px solid transparent; min-height: 40px;
  color: var(--hvids-silver);
  transition: color var(--duration-hover) var(--ease-hvids);
}
.htab:hover { color: var(--hvids-white); }
/* Aktiv fane: fuld tekstfarve, fed og den stærke blå under — samme markering i alle
   programmer (29. sep. 2026). */
.htab.on { color: var(--hvids-white); font-weight: 600; border-bottom-color: var(--hvids-aktiv); }

/* ── Beskeder ──────────────────────────────────────────────────────────── */
/* Farve alene er ikke tilstrækkeligt til at bære betydning — sæt altid et ord
   eller et ikon i beskeden, så den også virker for farveblinde. */
.h-msg {
  border-radius: var(--radius-input); padding: 10px 14px;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  border-left: 3px solid transparent;
}
/* 29. sep. 2026: hele beskeden stod i tilstandsfarven. Gul eller rød brødtekst over flere
   linjer er tung at læse og får ikke nogen til at læse den. Nu bærer kanten og det
   fremhævede ord (<b>/<strong>) farven; selve teksten står i almindelig tekstfarve. */
.h-msg.fejl     { color: var(--hvids-white); background: var(--hvids-danger-bg);  border-left-color: var(--hvids-danger); }
.h-msg.advarsel { color: var(--hvids-white); background: var(--hvids-warning-bg); border-left-color: var(--hvids-warning); }
.h-msg.ok       { color: var(--hvids-white); background: var(--hvids-success-bg); border-left-color: var(--hvids-success); }
.h-msg.fejl :is(b,strong)     { color: var(--hvids-danger-dyb); }
.h-msg.advarsel :is(b,strong) { color: var(--hvids-warning-dyb); }
.h-msg.ok :is(b,strong)       { color: var(--hvids-success-dyb); }
.h-msg.info     { color: var(--hvids-silver);  background: rgba(95,168,255,.06);    border-left-color: var(--hvids-electric); }

/* Tekstfarver til inline-brug, hvor en hel besked er for meget. */
.t-fejl { color: var(--hvids-danger); }
.t-advarsel { color: var(--hvids-warning); }
.t-ok { color: var(--hvids-success); }

/* ── Tilstandschip ───────────────────────────────────────────────────────
   Statusmærket i en tabel eller ved en overskrift: ét ord, der siger hvor noget
   står. Den hørte til i hvert værktøj, indtil Kapasignals udgave viste, at en
   ren tekstfarve med hårfin ramme kun virker på mørk flade — se noten ved
   --hvids-danger-chip øverst.

   Farven bærer ALDRIG betydningen alene. Chippen indeholder altid det ord, den
   handler om, så den kan læses uden at kunne skelne rød fra grøn.

   Størrelsen følger --ui-felt-tekst nedad: 11px er rigtigt på et website og for
   lille i et dataværktøj, hvor mærket er noget, man skimmer en tabel efter. */
.hstatus {
  display: inline-block; white-space: nowrap;
  font-size: max(var(--ui-min-tekst), calc(var(--ui-felt-tekst) - 2px));
  letter-spacing: .03em; line-height: 1.45;
  padding: 2px 10px; border-radius: 20px;
  border: 1px solid var(--hvids-border);
  background: var(--hvids-neutral-chip); color: var(--hvids-silver);
}
.hstatus.fejl {
  background: var(--hvids-danger-chip);  color: var(--hvids-danger-dyb);
  border-color: color-mix(in srgb, var(--hvids-danger) 45%, transparent);
}
.hstatus.advarsel {
  background: var(--hvids-warning-chip); color: var(--hvids-warning-dyb);
  border-color: color-mix(in srgb, var(--hvids-warning) 45%, transparent);
}
.hstatus.ok {
  background: var(--hvids-success-chip); color: var(--hvids-success-dyb);
  border-color: color-mix(in srgb, var(--hvids-success) 45%, transparent);
}

/* Statuskant — tilstand på en hel række eller et helt kort, uden at der skal
   læses et ord. Tre pixels i venstre kant kan skimmes ned ad en tabel, og det er
   dét, der giver overblikket: rød i toppen, grøn i bunden, når tabellen er
   sorteret. Kanten er et SUPPLEMENT til chippen, aldrig en erstatning. */
.hkant-fejl     { box-shadow: inset 3px 0 0 var(--hvids-danger); }
.hkant-advarsel { box-shadow: inset 3px 0 0 var(--hvids-warning); }
.hkant-ok       { box-shadow: inset 3px 0 0 var(--hvids-success); }
.t-svag { color: var(--hvids-silver); }

/* ── Grafer i SVG (tilføjet 8. august 2026) ──────────────────────────────
   Grunden til at disse klasser findes: graferne bygges som SVG-strenge i
   JavaScript, og dér kan man ikke skrive var(--hvids-...) lige så nemt som i et
   stilark. Derfor stod farverne som faste hex-værdier — og derfor fulgte de
   ikke med, da det lyse tema kom. Resultatet var akser på 3,2:1 og serier ned
   til 1,5:1 mod hvid: læsbare om natten, væk om dagen.

   Med en klasse på elementet arver SVG'en temaet som alt andet:
     <text class="hc-akse">42 %</text>
     <line class="hc-grid" .../>
     <path class="hc-s3" .../>
   Ingen JavaScript skal køres om, når temaet skifter. Det er hele pointen.  */
.hc-akse   { fill: var(--hvids-text-mid); font-family: var(--font-body); font-size: 12px; }
.hc-navn   { fill: var(--hvids-silver);   font-family: var(--font-body); font-size: 12px; }
.hc-vaerdi { fill: var(--hvids-white);    font-family: var(--font-body); font-size: 12px; }
.hc-grid   { stroke: var(--hvids-gitter); stroke-width: 1; }
.hc-linje  { stroke: var(--hvids-silver); stroke-width: 1; }   /* akselinje, nullinje */

/* Serierne. Både som streg og som flade, så samme klasse virker på en linje,
   en søjle og en prik i signaturforklaringen. */
.hc-s1 { stroke: var(--hvids-serie-1); fill: var(--hvids-serie-1); }
.hc-s2 { stroke: var(--hvids-serie-2); fill: var(--hvids-serie-2); }
.hc-s3 { stroke: var(--hvids-serie-3); fill: var(--hvids-serie-3); }
.hc-s4 { stroke: var(--hvids-serie-4); fill: var(--hvids-serie-4); }
.hc-s5 { stroke: var(--hvids-serie-5); fill: var(--hvids-serie-5); }
.hc-s6 { stroke: var(--hvids-serie-6); fill: var(--hvids-serie-6); }
.hc-s7 { stroke: var(--hvids-serie-7); fill: var(--hvids-serie-7); }
.hc-s8 { stroke: var(--hvids-serie-8); fill: var(--hvids-serie-8); }
/* En linje skal ikke fyldes, og en flade skal ikke streges. Sæt den ene af
   disse SAMMEN med .hc-sN — ellers får en åben kurve en fyldt skygge under sig. */
.hc-strg { fill: none; }
.hc-flad { stroke: none; }

/* Tilstand i en graf — målstreger og lignende. Egne klasser, så det er
   umuligt at komme til at bruge en seriefarve til at betyde "godt". */
.hc-ok   { stroke: var(--hvids-success); fill: var(--hvids-success); }
.hc-adv  { stroke: var(--hvids-warning); fill: var(--hvids-warning); }
.hc-fejl { stroke: var(--hvids-danger);  fill: var(--hvids-danger); }

/* ── Temaknap ────────────────────────────────────────────────────────────
   Hvert værktøj byggede sin egen. Den hører til her, fordi den skal se ens ud
   alle fire steder — og fordi et værktøj uden knap efterlader brugeren i det
   tema, loginskærmen tilfældigvis stod i. */
/* RETTET 21. august 2026 — fladen var skrevet som rgba(26, 34, 59, .5), altså navy
   direkte i stedet for tokenet. Den fulgte derfor ikke med i lyst tema: knappen stod
   som en mørk navy klods på hvid flade, mens dens egen tekstfarve blev sølv, og de to
   knapper i toppen af hvert værktøj lignede noget, der var glemt at style — ved siden
   af en "Log ud"-knap med gennemsigtig flade og lys ramme.

   --hvids-surface ER rgba(26, 34, 59, .5) i mørkt tema. Rettelsen ændrer derfor
   INTET i mørkt tema — den giver kun knappen en flade i lyst. Det gælder alle fire
   værktøjer på én gang, hvilket er hele grunden til, at knappen ligger her. */
.htema {
  background: var(--hvids-surface); border: 1px solid var(--hvids-border);
  border-radius: var(--radius-input); color: var(--hvids-silver);
  width: 36px; height: 36px; cursor: pointer; font-size: 16px; line-height: 1; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--duration-hover) var(--ease-hvids),
              color var(--duration-hover) var(--ease-hvids);
}
.htema:hover { border-color: var(--hvids-electric); color: var(--hvids-white); }

/* ── Navigation ────────────────────────────────────────────────────────── */
.hnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px; height: 68px;
  background: color-mix(in srgb, var(--hvids-navy) 75%, transparent);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--hvids-border);
}
.hnav a {
  color: var(--hvids-text-mid); font-family: var(--font-body); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: color var(--duration-hover) var(--ease-hvids);
}
.hnav a:hover { color: var(--hvids-white); }
.hnav a.active { color: var(--hvids-electric); }

/* ── Mobil ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .h-1 { font-size: 36px; }
  .h-2 { font-size: 28px; }
  .h-3 { font-size: 22px; }
  .hnav { padding: 0 24px; }
  /* Slå GPU-tunge effekter fra: backdrop-filter koster mærkbart på telefoner. */
  .hcard, .hcard-s, .hnav { backdrop-filter: none; }
  .hcard:hover { border-color: var(--hvids-border); box-shadow: none; }
  .btn-p:hover { transform: none; }
}

/* ── FÆLLES BETJENING (29. sep. 2026) ──────────────────────────────────────
   Samme grundform i alle programmer, så man ikke skal lære dem hver for sig:

   HEADER, fra venstre:  logo · programnavn  ………  filhandlinger (.btn-s) ·
                         primærhandling (.btn-p, højst én) · .htema · konto/log ud
   FANER:                .htab — aktiv fane er fed tekst med --hvids-aktiv under.
   TEMAKNAP:             .htema med ☀ (i mørkt) / ☾ (i lyst), altid 36 × 36 px.

   .h-verktoejslinje samler filhandlinger (Gem, Åbn, Eksportér) i én gruppe. */
.h-verktoejslinje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* En sammenklappelig forklaring. Bruges hvor en lang intro eller et forbehold står
   før selve opgaven: første linje vises, resten ligger bag et klik. */
.h-mere { border: 1px solid var(--hvids-border); border-radius: var(--radius-input);
          background: var(--hvids-surface); }
.h-mere > summary { cursor: pointer; list-style: none; padding: 10px 14px;
          font-size: 13px; color: var(--hvids-silver); display: flex; gap: 8px; align-items: baseline; }
.h-mere > summary::-webkit-details-marker { display: none; }
/* Pilen er tegnet med CSS, ikke et tegn: et ▸ i content afhænger af serverens tegnsæt og
   af skrifttypen og blev vist som et fejlfortolket tegn i LCApilot. */
.h-mere > summary::before { content: ''; display: inline-block; flex: 0 0 auto; width: 0; height: 0;
  border-left: 6px solid var(--hvids-text-mid); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  margin-right: 2px; align-self: center; transition: transform var(--duration-hover); }
.h-mere[open] > summary::before { transform: rotate(90deg); }
.h-mere > summary b { color: var(--hvids-white); font-weight: 600; }
.h-mere > .h-mere-indhold { padding: 0 14px 14px 30px; font-size: 13.5px; line-height: 1.6; color: var(--hvids-silver); }

/* =============================================================================
   FÆLLES KONTROLHØJDE (29. sep. 2026)
   Alle knapper, temaknappen, valgknapper, felter og rullelister er præcis 36 px
   (--ui-btn-hoejde). Faner er 40 px (--ui-fane-hoejde). Tekstlinks er undtaget.
   border-box, så rammen ikke lægger 1–2 px oveni (det gav 37–38 px før).
   ============================================================================= */
.btn-p, .btn-s, .btn-ghost, .btn-danger {
  box-sizing: border-box; min-height: var(--ui-btn-hoejde);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding-block: 0; line-height: 1.2;
}
.htema { box-sizing: border-box; width: var(--ui-btn-hoejde); height: var(--ui-btn-hoejde); }
.hinput, .hselect { box-sizing: border-box; min-height: var(--ui-btn-hoejde); }
.htab { box-sizing: border-box; min-height: var(--ui-fane-hoejde); }

/* =============================================================================
   BEKRÆFTELSESDIALOG (29. sep. 2026)
   Bruges i stedet for browserens confirm-boks, når arbejde kan gå tabt: indlæsning
   oven i ugemte ændringer, nulstilling osv. Markup laves af hvidsVaelg() i værktøjet:
   <dialog class="h-dialog"><h2/><p/><div class="h-dialog-knapper">…</div></dialog>
   ============================================================================= */
.h-dialog {
  border: 1px solid var(--hvids-border); border-radius: 12px;
  background: var(--hvids-surface); color: var(--hvids-white);
  padding: 22px 24px 20px; width: min(540px, calc(100vw - 32px)); box-sizing: border-box;
  /* margin/inset sat eksplicit: værktøjer med en nulstilling af margin (*{margin:0})
     ville ellers lægge dialogen i øverste venstre hjørne. */
  position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto;
  box-shadow: 0 18px 48px rgba(0,0,0,.35); font-family: var(--font-body);
}
.h-dialog::backdrop { background: rgba(10,14,26,.55); }
.h-dialog h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--hvids-white); }
.h-dialog p { font-size: 14px; line-height: 1.55; color: var(--hvids-silver); margin: 0 0 18px; }
.h-dialog-knapper { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Fortryd-bjælke: vises kort efter en handling, der kan fortrydes (fx Nulstil). */
.h-fortryd {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px;
  background: var(--hvids-surface); color: var(--hvids-white);
  border: 1px solid var(--hvids-border); border-radius: 8px; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: calc(100vw - 32px);
}
.h-fortryd[hidden] { display: none; }

/* =============================================================================
   SKAL — værktøjernes fælles ramme (6. okt. 2026, hentet fra Kapasignal)
   -----------------------------------------------------------------------------
   Header, fanebjælke, menu, ⓘ-forklaring og rolig typografi. Alt er tilvalg med
   klasser (hv-…), så et værktøj uden skal ser ud som før. Det lyse tema i toppen af
   filen er samtidig skiftet til Kapasignals lyse udtryk, og det gælder alle.

   Opmærkning:
     <body class="hv-app">
     <header class="hv-skal">
       <img class="hv-ordmaerke" src="hvids-ordmaerke.png" alt="HVIDS">
       <span class="hv-skille" aria-hidden="true"></span>
       <div class="hv-kontekst">
         <span class="hv-produkt">Salgspilot</span>
         <span class="hv-meta">…</span>
       </div>
       <div class="hv-handlinger"> .hv-hknap · .hv-ikonknap · .hv-menu · .btn-p </div>
     </header>
     <nav class="hv-faner"><button aria-selected="true">…</button>…</nav>
   Første værktøj på skallen: Salgspilot. hvids-ordmaerke.png synkroniseres med.
   ============================================================================= */
/* ── Header ──────────────────────────────────────────────────────────────── */
.hv-skal {
  background: #131D38; color: #F4F6F9;
  border-bottom: 3px solid #1B4FFF;
  padding: 14px 28px; margin: 0;
  display: flex; align-items: center; gap: 22px; flex-wrap: nowrap;
  position: relative; z-index: 50;
}
:root[data-theme="dark"] .hv-skal { background: #1B2647; }
.hv-ordmaerke { height: 17px; width: auto; display: block; flex: none; filter: none !important; }
.hv-skille { width: 1px; height: 34px; background: #3B4A6B; flex: none; }
.hv-skille.lille { height: 24px; margin: 0 4px; }
.hv-kontekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-produkt {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: #8FB2FF; margin: 0;
}
.hv-meta {
  font-size: 12.5px; color: #B8C3D8; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; min-width: 0;
}
.hv-meta b, .hv-meta strong { color: #E6ECF7; font-weight: 500; }
/* Datomærke/advarsel i headeren — samme pille i alle værktøjer. */
.hv-maerke {
  height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  border-radius: 13px; border: 1px solid #E39B3A; background: rgba(227,155,58,.18);
  color: #FFC57E; font: 600 12.5px var(--font-body); white-space: nowrap;
}
.hv-maerke.kritisk { border-color: #F08A3E; background: rgba(240,138,62,.22); }
.hv-maerke.ok { border-color: #3B4A6B; background: transparent; color: #B8C3D8; font-weight: 400; }
button.hv-maerke { cursor: pointer; }

.hv-handlinger { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.hv-skal .hv-hknap,
.hv-skal .hv-menu > summary {
  height: 36px; min-height: 36px; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
  border-radius: 4px; border: 1px solid #5A6A8C; background: #1E2A4A; color: #E6ECF7;
  font: 500 13px/1 var(--font-body); letter-spacing: 0; text-transform: none;
  cursor: pointer; white-space: nowrap; box-shadow: none; transform: none;
}
:root[data-theme="dark"] .hv-skal .hv-hknap,
:root[data-theme="dark"] .hv-skal .hv-menu > summary { background: #25335A; }
.hv-skal .hv-hknap.flad, .hv-skal .hv-ikonknap { background: transparent; }
.hv-skal .hv-ikonknap { width: 36px; padding: 0; justify-content: center; }
.hv-skal .hv-ikonknap svg { width: 17px; height: 17px; }
.hv-skal .hv-hknap:hover, .hv-skal .hv-menu > summary:hover { border-color: #8FB2FF; background: #263451; }
.hv-skal .hv-hknap:focus-visible, .hv-skal .hv-menu > summary:focus-visible,
.hv-skal .hv-maerke:focus-visible { outline: 2px solid #8FB2FF; outline-offset: 2px; }
.hv-skal .btn-p {
  height: 36px; min-height: 36px; padding: 0 18px; border-radius: 4px; background: #1B4FFF;
  color: #fff; font: 600 13px var(--font-body); letter-spacing: 0; text-transform: none; box-shadow: none;
}
/* Temaknappen: én knap, to ikoner — det viste er det, man skifter TIL. */
:root[data-theme="light"] .hv-tema .sol,
:root:not([data-theme="light"]) .hv-tema .maane { display: none; }

/* ── Menu (fx Eksport) ───────────────────────────────────────────────────── */
.hv-menu { position: relative; }
.hv-menu > summary { list-style: none; }
.hv-menu > summary::-webkit-details-marker { display: none; }
.hv-menu[open] { z-index: 60; }
.hv-menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; padding: 8px;
  background: var(--hvids-surface); border: 1px solid var(--hvids-border); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.hv-menu-panel button, .hv-menu-panel a {
  display: block; width: 100%; min-height: 38px; background: none; border: 0; border-radius: 4px;
  color: var(--hvids-white); text-align: left; font: 400 13px/1.5 var(--font-body);
  padding: 8px 10px; cursor: pointer; text-decoration: none; letter-spacing: 0; text-transform: none;
}
.hv-menu-panel button:hover, .hv-menu-panel a:hover { background: var(--hvids-surface-2); }
.hv-menu-panel hr { border: 0; border-top: 1px solid var(--hvids-border); margin: 6px 0; }

/* ── Fanebjælke ──────────────────────────────────────────────────────────── */
.hv-faner {
  background: var(--hvids-surface); border-bottom: 1px solid var(--hvids-border);
  padding: 0 28px; display: flex; gap: 30px; height: 50px; align-items: stretch;
  overflow-x: auto; margin: 0 0 24px;
}
.hv-faner > button, .hv-faner > a {
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
  padding: 0 4px; min-height: 0; font: 400 14px var(--font-body); letter-spacing: 0;
  text-transform: none; color: var(--hvids-silver); white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; cursor: pointer; text-decoration: none;
}
.hv-faner > [aria-selected="true"], .hv-faner > .on, .hv-faner > [aria-current="page"] {
  border-bottom-color: #1B4FFF; color: var(--hvids-white); font-weight: 600;
}
.hv-faner > button:hover, .hv-faner > a:hover { color: var(--hvids-white); }
.hv-faner > :focus-visible { outline: 2px solid var(--hvids-electric); outline-offset: -2px; }
.hv-faner .hv-faner-hoejre { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Indholdet under skallen ─────────────────────────────────────────────── */
.hv-indhold { padding: 0 28px 70px; }

/* ── Rolig typografi i værktøjerne ───────────────────────────────────────────
   Kapasignals stemme: almindelige bogstaver i overskrifter, faner, etiketter og
   tabelhoveder. Versaler med luft er forbeholdt produktnavnet i headeren. */
.hv-app .htab, .hv-app .hlbl, .hv-app th, .hv-app .btn-p, .hv-app .btn-s,
.hv-app .btn-ghost, .hv-app .btn-danger { letter-spacing: 0; text-transform: none; }
.hv-app th { background: var(--hvids-surface-2); font-size: 13px; font-weight: 500; }
.hv-app .hcard, .hv-app .hcard-s { border-radius: 8px; }
.hv-app .bg-glow { display: none; }

/* ── ⓘ-forklaring: en kort "Sådan læses …" ved titlen ─────────────────────── */
.hv-titelraekke { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.hv-titelraekke > h2, .hv-titelraekke > h3 { margin: 0 !important; }
details.hv-forkl { position: relative; flex: none; }
details.hv-forkl > summary {
  list-style: none; padding: 4px 8px; margin-right: -8px; border-radius: 5px; font-size: 12.5px;
  color: var(--hvids-text-mid); display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
details.hv-forkl > summary::-webkit-details-marker { display: none; }
details.hv-forkl > summary:hover, details.hv-forkl[open] > summary { color: var(--hvids-electric); background: var(--hvids-surface-2); }
details.hv-forkl > .hv-forkl-tekst {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(520px, calc(100vw - 48px));
  background: var(--hvids-surface); border: 1px solid var(--hvids-border); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22); padding: 14px 16px; font-size: 13px; line-height: 1.6;
  color: var(--hvids-silver);
}

/* ⓘ-forklaring på eksisterende "mere"-bokse: <details class="h-mere hv-forkl"> med
   .h-mere-indhold virker som <details class="hv-forkl"> med .hv-forkl-tekst (Kapasignal).
   .hv-forkl-venstre: står alene uden titel. .hv-forkl-hjoerne: øverst til højre i kortet. */
details.hv-forkl > .h-mere-indhold {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(520px, calc(100vw - 48px));
  background: var(--hvids-surface); border: 1px solid var(--hvids-kant-felt, var(--hvids-border)); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22); padding: 14px 16px; font-size: 13px; line-height: 1.6;
  color: var(--hvids-silver); text-align: left; font-weight: 400; letter-spacing: 0; text-transform: none;
}
details.h-mere.hv-forkl { border: 0; background: none; margin: 0 !important; }
details.h-mere.hv-forkl > summary {
  padding: 4px 8px; margin-right: -8px; border-radius: 5px; font-size: 12.5px; color: var(--hvids-text-mid);
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
}
details.h-mere.hv-forkl > summary:hover, details.h-mere.hv-forkl[open] > summary { color: var(--hvids-electric); background: var(--hvids-surface-2); }
details.h-mere.hv-forkl > summary::before { display: none; }
details.hv-forkl > summary:focus-visible { outline: 2px solid var(--hvids-electric); outline-offset: 2px; }
details.hv-forkl.hv-forkl-venstre { display: inline-block; margin: 0 0 12px !important; }
details.hv-forkl.hv-forkl-venstre > .hv-forkl-tekst,
details.hv-forkl.hv-forkl-venstre > .h-mere-indhold { left: 0; right: auto; }
details.hv-forkl.hv-forkl-hjoerne { position: absolute !important; top: 24px; right: 24px; }
.hv-titelraekke.hv-titelraekke-lille { margin: 26px 0 8px; }

/* ── Små fælles byggesten (6. okt. 2026, flyttet fra kapasignal-layout.css) ──
   .hv-ikon      lille stregikon (svg) inde i tekst og knapper
   .hv-pil       fold-ud-pil; .hv-pil.ned når den er åben
   .hv-lang / .hv-kort   lang og kort tekst i samme knap — den korte vises på telefon
   .hv-tabel-scroll      bred tabel scroller for sig selv i stedet for hele siden
   .hv-skuffe, .hv-skuffe-hoved, .hv-funktioner   panel der folder ud under headeren
   .hv-gemstatus         "Gemt"/"Ikke gemt" i headeren                           */
.hv-ikon { width: 15px; height: 15px; flex: none; vertical-align: -3px; }
.hv-pil { display: inline-block; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); margin: 0 2px; vertical-align: 1px; transition: transform .15s; }
.hv-pil.ned { transform: rotate(45deg); vertical-align: 3px; }
.hv-kort { display: none; }
.hv-tabel-scroll { overflow-x: auto; max-width: 100%; }
.hv-skuffe { margin-bottom: 22px; }
.hv-skuffe-hoved { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hv-skuffe-hoved h2 { margin: 0; font-size: 18px; letter-spacing: 0; text-transform: none; }
.hv-funktioner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hv-funktioner p { margin: 0; color: var(--hvids-silver); font-size: 14px; }
.hv-skal .hv-gemstatus { font-size: 12px; color: #BDD4FF; margin: 0 2px; }
.hv-skal .hv-gemstatus[data-failed=true] { color: #FF9B93; }
.hv-maerke[role=button] { cursor: pointer; }
.hv-maerke[role=button]:focus-visible { outline: 2px solid #BDD4FF; outline-offset: 2px; }
.hv-maerke .hv-ikon { width: 14px; height: 14px; vertical-align: 0; }
@media (max-width: 620px) { .hv-lang { display: none; } .hv-kort { display: inline; } }
@media (max-width: 520px) {
  .hv-funktioner { grid-template-columns: 1fr; }
  details.hv-forkl > summary span { display: none; }
  .hv-titelraekke { flex-wrap: nowrap; }
}
@media print { details.hv-forkl { display: none !important; } }

/* ── Smalle skærme ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .hv-skal, .hv-handlinger { flex-wrap: wrap; } }
@media (max-width: 620px) {
  .hv-skal { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .hv-ordmaerke { height: 14px; }
  .hv-skal > .hv-skille, .hv-handlinger .hv-skille { display: none; }
  .hv-kontekst { order: 3; flex-basis: 100%; }
  .hv-handlinger { order: 2; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .hv-skal .hv-hknap, .hv-skal .hv-menu > summary, .hv-skal .btn-p { height: 44px; }
  .hv-skal .hv-ikonknap { width: 44px; }
  .hv-faner { padding: 0 16px; gap: 22px; height: 48px; }
  .hv-indhold { padding: 0 16px 60px; }
}
@media (pointer: coarse) { .hv-skal button, .hv-faner > button { min-height: 44px; } }
@media print { .hv-skal, .hv-faner { display: none !important; } }