/* =============================================================================
   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 ────────────────────────────────────────────────────────────── */
  --hvids-navy:     #050816;   /* Primær baggrund */
  --hvids-blue:     #1B4FFF;   /* Brand accent — CTA-flader, ikke tekst */
  --hvids-electric: #5FA8FF;   /* Glow, highlights, aktive tilstande */
  --hvids-silver:   #B7C2D0;   /* Sekundær tekst, metallic detaljer */
  --hvids-white:    #F4F6F9;   /* Tekst på mørk flade */
  --hvids-border:   #1A223B;   /* 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);

  /* ── 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 */
  --hvids-danger-l:   #C0392B;
  --hvids-warning-l:  #915B0E;
  --hvids-success-l:  #1B7A55;

  /* ── 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:    #0D1528;                /* hævet flade — modal, kort */
  --hvids-navy-3:    #080E1C;                /* sænket flade — tabelrække, felt */

  --hvids-surface:   rgba(26, 34, 59, .5);   /* kort */
  --hvids-surface-2: rgba(5, 8, 22, .8);     /* felter, indsatte flader */
  --hvids-text-mid:  rgba(183, 194, 208, .8);/* dæmpet tekst mellem silver og white */

  /* ── 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; }              */
  --ui-btn-tekst:   11px;
  --ui-btn-luft:    9px 20px;
  --ui-btn-luft-s:  7px 16px;    /* sekundær: 1,5px ramme æder 3px */
  --ui-felt-tekst:  12px;
  --ui-felt-luft:   6px 10px;
}

/* ═══ 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;
  --hvids-white:     #0A0E1A;
  --hvids-silver:    #5A6B82;
  --hvids-border:    #D5DCE6;
  --hvids-electric:  #1B4FFF;

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

  --hvids-surface:   #FFFFFF;
  --hvids-surface-2: #ECEFF4;
  --hvids-text-mid:  #2E3A4D;

  --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. */
  --hvids-danger-bg:  rgba(192, 57, 43, .07);
  --hvids-warning-bg: rgba(145, 91, 14, .10);
  --hvids-success-bg: rgba(27, 122, 85, .06);

  /* 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;
}

/* ── 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-electric); box-shadow: 0 0 24px rgba(95,168,255,.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: .13em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 24px rgba(27,79,255,.26), 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(-2px); box-shadow: 0 0 40px rgba(27,79,255,.42), inset 0 1px 0 rgba(255,255,255,.1); }

.btn-s {
  background: transparent; color: var(--hvids-white);
  border: 1.5px solid var(--hvids-border); 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;
  transition: border-color var(--duration-hover) var(--ease-hvids);
}
.btn-s:hover { border-color: var(--hvids-electric); }

.btn-ghost {
  background: none; border: none; color: var(--hvids-electric);
  padding: 12px 0; font-family: var(--font-display); font-size: var(--ui-btn-tekst);
  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;
  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-border);
  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: 10.5px; font-weight: 500;
  color: var(--hvids-electric); text-transform: uppercase;
  letter-spacing: .28em; margin-bottom: 8px;
}

/* ── Faner ─────────────────────────────────────────────────────────────── */
.htab {
  background: none; border: none; cursor: pointer; font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 18px; white-space: nowrap; border-bottom: 2px solid transparent;
  color: var(--hvids-silver);
  transition: color var(--duration-hover) var(--ease-hvids);
}
.htab:hover { color: var(--hvids-white); }
.htab.on { color: var(--hvids-electric); border-bottom-color: var(--hvids-electric); }

/* ── 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;
}
.h-msg.fejl     { color: var(--hvids-danger);  background: var(--hvids-danger-bg);  border-left-color: var(--hvids-danger); }
.h-msg.advarsel { color: var(--hvids-warning); background: var(--hvids-warning-bg); border-left-color: var(--hvids-warning); }
.h-msg.ok       { color: var(--hvids-success); background: var(--hvids-success-bg); border-left-color: var(--hvids-success); }
.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); }
.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: 11px; }
.hc-navn   { fill: var(--hvids-silver);   font-family: var(--font-body); font-size: 11px; }
.hc-vaerdi { fill: var(--hvids-white);    font-family: var(--font-body); font-size: 11px; }
.hc-grid   { stroke: var(--hvids-border); 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. */
.htema {
  background: rgba(26, 34, 59, .5); border: 1px solid var(--hvids-border);
  border-radius: var(--radius-input); color: var(--hvids-silver);
  width: 32px; height: 32px; cursor: pointer; font-size: 14px; line-height: 1;
  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: rgba(5, 8, 22, .45);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(26, 34, 59, .4);
}
.hnav a {
  color: rgba(183, 194, 208, .65); font-family: var(--font-body); font-size: 11px;
  letter-spacing: .16em; 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; }
}