/* =============================================================
   ShellV2.0 — designtokens
   Stack-neutralt lag. Læg det ind som første stylesheet, og lad
   al komponent-CSS læse herfra i stedet for at skrive hex-koder.

   Tre tilstande skal håndteres, ikke to:
     :root                          -> lys (også standard)
     prefers-color-scheme: dark     -> systemets mørke, når brugeren
                                       ikke selv har valgt
     [data-theme="dark"|"light"]    -> brugerens eget valg vinder
   Skriv aldrig en farve, hvis eneste definition ligger inde i en
   media query — så findes den ikke i den ustemplede tilstand.

   -------------------------------------------------------------
   v2.20.409 — MØRKETILSTANDEN ER SLÅET FRA MED VILJE.

   Rapporteret fra DEV: "tekst og knapper er hvide og ser forkert
   ud". Årsagen stod her. Det mørke sæt nedenfor slår sig selv til,
   når styresystemet står i mørk tilstand — men style.css læser kun
   herfra ~285 steder og har ~1.500 hårdkodede hex-farver, og
   customer-portal.css læser slet ikke herfra. Resultatet var en
   halvt omstillet skærm: sort bund, hvide kort, næsten hvid tekst
   ovenpå. Ulæseligt, og ikke noget nogen havde valgt.

   Derfor står der nu data-theme="light" på <html> i index.html og
   handover.html. Det er ikke en fejl, og det må ikke fjernes, før
   de hårdkodede farver er flyttet herind — så bliver skærmen
   ulæselig igen for alle med mørk tilstand på maskinen.
   Farverne nedenfor bliver stående: de er forarbejdet til den dag,
   mørketilstanden bliver bygget færdig og får sin egen knap.
   test/dark-mode-leak-v220409.test.js holder øje med det.
   ============================================================= */

:root{
  /* ---- flader ------------------------------------------------ */
  --c-ground:#EFF2F1;        /* sidens bund, bag kortene          */
  --c-surface:#FFFFFF;       /* kort, tabeller, paneler           */
  --c-surface-2:#F7F9F8;     /* korthoveder, hover på rækker      */
  --c-surface-3:#E7EBEA;     /* ikonflader, badges, spor i bjælker*/

  /* ---- linjer ------------------------------------------------ */
  --c-line:#DAE1DF;          /* alle hairlines og kortkanter      */
  --c-line-strong:#B4C0BD;   /* dekorative skel, fanelinje        */
  --c-line-control:#8A9693;  /* kant på KLIKBARE felter — knapper,
                                inputs. Skal holde 3:1 mod fladen.
                                Brug ikke --c-line-strong her.    */

  /* ---- blæk -------------------------------------------------- */
  --c-ink:#07100F;           /* overskrifter, tal, primær tekst   */
  --c-ink-2:#2F3D3B;         /* brødtekst, sekundære værdier      */
  --c-ink-3:#61706D;         /* labels, meta, hjælpetekst         */

  /* ---- accent (identitet, ikke status) ----------------------- */
  --c-accent:#07605F;        /* primærknap, aktiv fane, links     */
  --c-accent-ink:#044E4D;    /* accentfarvet TEKST på lys flade   */
  --c-accent-soft:#DCEAE9;   /* accentfladen bag ikoner/badges    */
  --c-on-accent:#FFFFFF;     /* tekst oven på --c-accent          */

  /* ---- status (holdes adskilt fra accent) -------------------- */
  --c-pos:#256F4F;      --c-pos-soft:#DFEDE6;
  --c-warn:#82580F;     --c-warn-soft:#F6EBD4;
  --c-crit:#9E352C;     --c-crit-soft:#F9E4E1;

  /* ---- navigation (egen skala, altid mørk) ------------------- */
  --c-nav-ground:#07100F;
  --c-nav-ink:#BECDCA;
  --c-nav-ink-2:#748887;
  --c-nav-line:#182422;
  --c-nav-active:#15211F;
  --c-nav-marker:#35C2B6;    /* 2px rail på aktivt punkt          */

  /* ---- typografi --------------------------------------------- */
  --f-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display-size:25px;  --t-display-weight:600; --t-display-track:-.034em; --t-display-lh:1.1;
  --t-metric-size:26px;   --t-metric-weight:600;  --t-metric-track:-.045em;  --t-metric-lh:1;
  --t-section-size:12px;  --t-section-weight:600; --t-section-track:.05em;   /* UPPERCASE */
  --t-body-size:14px;     --t-body-weight:400;    --t-body-lh:1.5;
  --t-dense-size:13px;    --t-dense-weight:450;   --t-dense-lh:1.4;
  --t-meta-size:12px;     --t-meta-lh:1.45;
  --t-label-size:11px;    --t-label-weight:500;   --t-label-track:.13em;     /* mono, UPPERCASE · v2.20.637: 9.5 → 11, gulvet */
  --t-tag-size:11px;      --t-tag-weight:600;     --t-tag-track:.07em;       /* UPPERCASE · v2.20.637: 9.5 → 11, gulvet */

  /* ---- rum (4px-basis) --------------------------------------- */
  --s-1:2px;  --s-2:4px;  --s-3:6px;  --s-4:8px;
  --s-5:12px; --s-6:16px; --s-7:20px; --s-8:24px; --s-9:32px;

  /* ---- form -------------------------------------------------- */
  --r-container:4px;   /* kort, paneler, rails                    */
  --r-control:3px;     /* knapper, inputs, navigationspunkter     */
  --r-chip:2px;        /* chips, badges, tags, statusfirkanter    */
  --r-bar:1px;         /* progress-bjælker                        */
  --border:1px;        /* der findes kun én stregtykkelse         */

  /* Højde skabes af linjer, ikke af skygge. Skyggen er kun en
     hårfin bundkant, så kort ikke ser ud til at svæve.           */
  --shadow:0 1px 0 rgba(7,16,15,.03);

  --motion:.12s;       /* hover/fokus. Alt over 200ms føles sløvt */
}

/* ---- systemets mørke, når brugeren ikke selv har valgt -------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-ground:#060B0B;
    --c-surface:#0E1615;
    --c-surface-2:#131C1B;
    --c-surface-3:#1A2523;
    --c-line:#212D2B;
    --c-line-strong:#3D4C49;
    --c-line-control:#576663;
    --c-ink:#F0F5F4;
    --c-ink-2:#AFBEBB;
    --c-ink-3:#7E8F8C;
    --c-accent:#35C2B6;
    --c-accent-ink:#59D5C9;
    --c-accent-soft:#0D2E2C;
    --c-on-accent:#04201F;
    --c-pos:#4FC08D;   --c-pos-soft:#0F2519;
    --c-warn:#DBA85A;  --c-warn-soft:#271D0F;
    --c-crit:#EA7B70;  --c-crit-soft:#2B1412;
    --c-nav-ground:#040808;
    --c-nav-ink:#B5C6C3;
    --c-nav-ink-2:#6B7E7B;
    --c-nav-line:#141E1C;
    --c-nav-active:#111C1A;
    --shadow:0 1px 0 rgba(0,0,0,.5);
  }
}

/* ---- brugerens eget valg vinner over systemet ---------------- */
:root[data-theme="dark"]{
  --c-ground:#060B0B;
  --c-surface:#0E1615;
  --c-surface-2:#131C1B;
  --c-surface-3:#1A2523;
  --c-line:#212D2B;
  --c-line-strong:#3D4C49;
  --c-line-control:#576663;
  --c-ink:#F0F5F4;
  --c-ink-2:#AFBEBB;
  --c-ink-3:#7E8F8C;
  --c-accent:#35C2B6;
  --c-accent-ink:#59D5C9;
  --c-accent-soft:#0D2E2C;
  --c-on-accent:#04201F;
  --c-pos:#4FC08D;   --c-pos-soft:#0F2519;
  --c-warn:#DBA85A;  --c-warn-soft:#271D0F;
  --c-crit:#EA7B70;  --c-crit-soft:#2B1412;
  --c-nav-ground:#040808;
  --c-nav-ink:#B5C6C3;
  --c-nav-ink-2:#6B7E7B;
  --c-nav-line:#141E1C;
  --c-nav-active:#111C1A;
  --shadow:0 1px 0 rgba(0,0,0,.5);
}

/* =============================================================
   Basis. body SKAL sætte en eksplicit baggrund — ellers arver
   siden værtens farve og et tema bliver læst oven på det andet.
   ============================================================= */
body{
  margin:0;
  background:var(--c-ground);
  color:var(--c-ink);
  font-family:var(--f-sans);
  font-size:var(--t-body-size);
  line-height:var(--t-body-lh);
  -webkit-font-smoothing:antialiased;
}

/* Alle kolonner med cifre. Uden dette danser tallene i tabeller. */
.num,.metric-value,td.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}

:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--r-control)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* =============================================================
   v2.20.422 — RETNING B, afprøvet på DEV.
   v2.20.523 — og nu Shells farver. Sættet er ikke længere et valg.

   Indtil v2.20.523 slog sættet herunder kun til, når <html> havde
   data-design="b". Det var rigtigt, mens B var et forslag - præcis
   den fælde, der står beskrevet længere oppe i denne fil:
   mørketilstanden slog sig selv til og gav en halvt omstillet skærm,
   fordi style.css kun læser herfra ~285 steder og har ~1.500
   hårdkodede hex-farver.

   Men et forslag, der kan stå slået fra, er også et forslag, man kan
   komme til at bygge videre PÅ DEN FORKERTE SKÆRM. Valget er væk.

   `html:root` i stedet for `html[data-design="b"]` vejer det samme,
   (0,1,1), så sættet vinder over `:root` ovenfor - og taber stadig
   til `:root[data-theme="dark"]`, der vejer (0,2,0). Mørketilstanden
   er altså urørt: den er stadig Shells egen, ikke B's.

   Og derfor genbruges de EKSISTERENDE tokennavne i stedet for at
   opfinde nye. De ~285 steder, der allerede læser herfra, følger
   så med gratis — og de steder, der IKKE gør, bliver stående i de
   gamle farver. Det er ikke en fejl i forslaget; det er målingen
   af, hvor langt hårdkodningen rækker. Den skal kunne ses.
   ============================================================= */
html:root{
  /* ---- flader: køligere, mere adskilt ------------------------ */
  --c-ground:#EEF2F6;
  --c-surface:#FFFFFF;
  --c-surface-2:#F8FAFC;
  --c-surface-3:#E2E8F0;

  /* ---- linjer: tydeligere, det er hele pointen i B ----------- */
  --c-line:#CBD5E1;
  --c-line-strong:#94A3B8;
  --c-line-control:#64748B;

  /* ---- blæk -------------------------------------------------- */
  --c-ink:#0F172A;
  --c-ink-2:#334155;
  --c-ink-3:#475569;

  /* ---- accent ------------------------------------------------ */
  --c-accent:#0E7490;
  --c-accent-ink:#155E75;
  --c-accent-soft:#CFFAFE;
  --c-on-accent:#FFFFFF;

  /* ---- status: kraftigere, fordi farve skal betyde noget ----- */
  --c-pos:#047857;      --c-pos-soft:#D1FAE5;
  --c-warn:#B45309;     --c-warn-soft:#FEF3C7;
  --c-crit:#B91C1C;     --c-crit-soft:#FEE2E2;

  /* ---- navigation og topbjælke ------------------------------- */
  --c-nav-ground:#0F172A;
  --c-nav-ink:#CBD5E1;
  --c-nav-ink-2:#94A3B8;
  --c-nav-line:#1E293B;
  --c-nav-active:#1E293B;
  --c-nav-marker:#22D3EE;

  /* ---- ÉN skala. Det er dét, der adskiller B fra i dag ------- */
  /* Tekst: 5 trin i stedet for 35. */
  --t-1:30px;  --t-2:20px;  --t-3:15px;  --t-4:13px;  --t-5:11px;
  /* Luft: 5 trin i stedet for 35. */
  --s-1:8px;   --s-2:12px;  --s-3:16px;  --s-4:24px;  --s-5:32px;
  /* Hjørner: ét trin i stedet for 19. */
  --r-b:8px;
}

/* =============================================================
   v2.20.644 — SKRIFTEN FØLGER MED

   --f-sans og --f-mono har heddet «IBM Plex Sans»/«IBM Plex Mono»
   siden designtokens kom ind — men der stod ingen @font-face
   nogen steder. Skriften blev kun brugt, hvis den tilfældigvis var
   installeret på maskinen; ellers faldt browseren tilbage til
   systemets skrift (Segoe UI på Windows, San Francisco på Mac,
   Menlo/Consolas til tallene). Målt: ingen Plex på testmaskinen,
   altså var det, han så, ikke det, der var tegnet.

   Nu leveres den fra Shell selv: latin-udsnittet (æ, ø, å, €, –,
   ·, … er med), vægt 400/500/600/700 af begge, woff2, ca. 150 kB
   i alt. Same-origin, så CSP'ens `font-src 'self'` dækker den.
   `?v=` skifter ved hver release, så filerne caches hårdt
   (max-age=31536000, immutable) og hentes én gang pr. version.
   `font-display:swap`: teksten står i reserveskriften, til Plex
   er hentet — aldrig en tom side.

   Licens: SIL Open Font License 1.1 — public/fonts/OFL-*.txt.
   ============================================================= */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2?v=2.20.681') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-500-normal.woff2?v=2.20.681') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2?v=2.20.681') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-700-normal.woff2?v=2.20.681') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2?v=2.20.681') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2?v=2.20.681') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-600-normal.woff2?v=2.20.681') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-700-normal.woff2?v=2.20.681') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}