/*!
 * LØFT — designsystemets CSS.
 *
 * GENERERET FIL. Ret den ikke i hånden; den bliver skrevet over.
 * Værdierne kommer fra pakker/design/src/tokens.ts, reglerne fra vaerktoej/byg-tokens.mjs.
 * Byg igen med: npm run byg -w @loeft/design
 *
 * Indhold:
 *   01 tokens · 01b stående format · 02 accentvalg · 03 nulstilling ·
 *   04 html og body ·
 *   05 tekststørrelse · 06 de ni tekststile · 07 fokusring · 08 bevægelse ·
 *   09 skelet · 10 klæbende zoner · 12 fælles primitiver · 11 reduceret bevægelse
 */

/* ══ 00 · SKRIFTEN ═════════════════════════════════════════════════════════ */
/* Archivo, self-hostet under SIL OFL 1.1. Ingen opslag hos Google i drift.
   Variabel vægt 100–900 og variabel bredde 62–125 %: de store tal
   sættes i 76–85 % bredde uden en ekstra skriftfamilie.
   Stien er absolut, fordi apps bygges under hver sin base. Se byg-tokens.mjs. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/skrift/archivo-latin.woff2') 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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/skrift/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══ 01 · TOKENS ═══════════════════════════════════════════════════════════ */

:root {
  /* FARVER · grundflader — alt indhold bor i kort oven på bunden */
  --flade-bund: #0B0C0D;
  --flade-kort: #141618;
  --flade-haevet: #1D2023;
  --flade-felt: #101214;
  --flade-valgt: color-mix(in oklab, var(--accent) 12%, transparent);

  /* FARVER · kanter og slør */
  --kant-normal: #2A2E33;
  --kant-staerk: #6B737C;
  --kant-scrim: rgba(4,5,7,0.72);
  --kant-afkrydsning: #6B737C;
  --kant-tom: #6B737C;
  --kant-fare-svag: color-mix(in oklab, var(--roed) 40%, transparent);

  /* FARVER · tekst — alle består AA på den mørke flade */
  --tekst: #F1F2ED;
  --tekst-daempet: #B4BAC1;
  --tekst-svag: #8D949C;
  /* --tekst-paa-accent følger accentvalget og sættes i afsnit 02 */

  /* FARVER · betydning — fast sprog, aldrig dekoration */
  --gul: #FFC24B; /* hvile mellem sæt */
  --lilla: #B98CFF; /* overgang og coach */
  --cyan: #52E8FF; /* cardio */
  --groen: #5FD38D; /* fremgang og bekræftelse */
  --roed: #FF5D52; /* kun det uigenkaldelige */

  /* FARVER · medaljer — kun rekordtavlens tre pladser */
  --medalje-guld: #C9A227; /* rekordtavlens plads 1 · 8,1 mod cifferet */
  --medalje-soelv: #C2C8CE; /* rekordtavlens plads 2 · 11,6 mod cifferet */
  --medalje-bronze: #B87333; /* rekordtavlens plads 3 · 5,2 mod cifferet */

  /* FARVER · accentpaletten — signaturen og de to godkendte alternativer */
  --accent-lime: #D9FB3C; /* standard */
  --accent-pink: #FF4FD8; /* det kraftige alternativ */
  --accent-hvid: #F2F3EE; /* det rolige valg */

  /* FARVER · avatartoner — otte afmættede toner gange otte former giver 64 avatarer */
  --avatar-sand: #C9B48F;
  --avatar-rosa: #D3A9B4;
  --avatar-dis: #9FB4CE;
  --avatar-siv: #B4BE93;
  --avatar-ler: #D9A98C;
  --avatar-salvie: #9DBFAD;
  --avatar-syrin: #B0A6C9;
  --avatar-sten: #A7B0B8;

  /* TYPOGRAFI · de ni stiles tal — klasserne står i afsnit 06 */
  --stil-display-2-px: 96px;
  --stil-display-2-vaegt: 900;
  --stil-display-2-bredde: 76;
  --stil-display-2-linje: 1;
  --stil-display-1-px: 64px;
  --stil-display-1-vaegt: 900;
  --stil-display-1-bredde: 80;
  --stil-display-1-linje: 1;
  --stil-tal-1-px: 44px;
  --stil-tal-1-vaegt: 850;
  --stil-tal-1-bredde: 85;
  --stil-tal-1-linje: 1.05;
  --stil-titel-stor-px: 34px;
  --stil-titel-stor-vaegt: 800;
  --stil-titel-stor-bredde: 86;
  --stil-titel-stor-linje: 1.12;
  --stil-titel-1-px: 28px;
  --stil-titel-1-vaegt: 800;
  --stil-titel-1-bredde: 88;
  --stil-titel-1-linje: 1.1;
  --stil-titel-2-px: 20px;
  --stil-titel-2-vaegt: 720;
  --stil-titel-2-bredde: 94;
  --stil-titel-2-linje: 1.25;
  --stil-krop-1-px: 16px;
  --stil-krop-1-vaegt: 450;
  --stil-krop-1-bredde: 100;
  --stil-krop-1-linje: 1.5;
  --stil-krop-2-px: 14px;
  --stil-krop-2-vaegt: 500;
  --stil-krop-2-bredde: 100;
  --stil-krop-2-linje: 1.45;
  --stil-knap-px: 16px;
  --stil-knap-vaegt: 700;
  --stil-knap-bredde: 100;
  --stil-knap-linje: 1.1;
  --stil-knap-sperring: 0;
  --stil-maerkat-px: 13px;
  --stil-maerkat-vaegt: 600;
  --stil-maerkat-bredde: 100;
  --stil-maerkat-linje: 1.3;
  --stil-maerkat-sperring: 0;
  --stil-etiket-px: 13px;
  --stil-etiket-vaegt: 650;
  --stil-etiket-bredde: 100;
  --stil-etiket-linje: 1.2;
  --stil-enhed-px: 22px;
  --stil-enhed-vaegt: 650;
  --stil-enhed-bredde: 90;
  --stil-enhed-linje: 1.2;
  --mindste-tekst: 12px; /* intet brugervendt under dette */

  /* TYPOGRAFI · væggens egen skala — infoskærmen, tegnet i 4K */
  --stil-vaeg-display-px: 216px;
  --stil-vaeg-display-vaegt: 900;
  --stil-vaeg-display-bredde: 76;
  --stil-vaeg-display-linje: 1;
  --stil-vaeg-tal-px: 100px;
  --stil-vaeg-tal-vaegt: 850;
  --stil-vaeg-tal-bredde: 85;
  --stil-vaeg-tal-linje: 1;
  --stil-vaeg-tal-stor-px: 110px;
  --stil-vaeg-tal-stor-vaegt: 850;
  --stil-vaeg-tal-stor-bredde: 85;
  --stil-vaeg-tal-stor-linje: 1;
  --stil-vaeg-navn-px: 68px;
  --stil-vaeg-navn-vaegt: 750;
  --stil-vaeg-navn-bredde: 100;
  --stil-vaeg-navn-linje: 1.1;
  --stil-vaeg-besked-px: 52px;
  --stil-vaeg-besked-vaegt: 500;
  --stil-vaeg-besked-bredde: 100;
  --stil-vaeg-besked-linje: 1.35;
  --stil-vaeg-enhed-px: 52px;
  --stil-vaeg-enhed-vaegt: 700;
  --stil-vaeg-enhed-bredde: 85;
  --stil-vaeg-enhed-linje: 1;
  --stil-vaeg-motivation-px: 48px;
  --stil-vaeg-motivation-vaegt: 500;
  --stil-vaeg-motivation-bredde: 100;
  --stil-vaeg-motivation-linje: 1.3;
  --stil-vaeg-maerkat-px: 34px;
  --stil-vaeg-maerkat-vaegt: 700;
  --stil-vaeg-maerkat-bredde: 100;
  --stil-vaeg-maerkat-linje: 1.2;
  --stil-vaeg-maerkat-sperring: .08em;
  --stil-vaeg-maerkat-stor-px: 40px;
  --stil-vaeg-maerkat-stor-vaegt: 700;
  --stil-vaeg-maerkat-stor-bredde: 100;
  --stil-vaeg-maerkat-stor-linje: 1.2;
  --stil-vaeg-maerkat-stor-sperring: .08em;
  --stil-vaeg-rekordplads-px: 36px;
  --stil-vaeg-rekordplads-vaegt: 850;
  --stil-vaeg-rekordplads-bredde: 85;
  --stil-vaeg-rekordplads-linje: 1;
  --stil-vaeg-rekordplads-stor-px: 56px;
  --stil-vaeg-rekordplads-stor-vaegt: 850;
  --stil-vaeg-rekordplads-stor-bredde: 85;
  --stil-vaeg-rekordplads-stor-linje: 1;
  --stil-vaeg-rekordnavn-px: 40px;
  --stil-vaeg-rekordnavn-vaegt: 750;
  --stil-vaeg-rekordnavn-bredde: 100;
  --stil-vaeg-rekordnavn-linje: 1.1;
  --stil-vaeg-rekordtal-px: 58px;
  --stil-vaeg-rekordtal-vaegt: 850;
  --stil-vaeg-rekordtal-bredde: 85;
  --stil-vaeg-rekordtal-linje: 1;
  --stil-vaeg-type-side-px: 176px;
  --stil-vaeg-type-side-vaegt: 900;
  --stil-vaeg-type-side-bredde: 75;
  --stil-vaeg-type-side-linje: 1;
  --stil-vaeg-type-historie-px: 144px;
  --stil-vaeg-type-historie-vaegt: 900;
  --stil-vaeg-type-historie-bredde: 75;
  --stil-vaeg-type-historie-linje: 1.05;
  --stil-vaeg-type-tilstand-px: 112px;
  --stil-vaeg-type-tilstand-vaegt: 800;
  --stil-vaeg-type-tilstand-bredde: 85;
  --stil-vaeg-type-tilstand-linje: 1.1;
  --stil-vaeg-type-hovedtal-px: 128px;
  --stil-vaeg-type-hovedtal-vaegt: 850;
  --stil-vaeg-type-hovedtal-bredde: 85;
  --stil-vaeg-type-hovedtal-linje: 1;
  --stil-vaeg-type-tal-px: 100px;
  --stil-vaeg-type-tal-vaegt: 850;
  --stil-vaeg-type-tal-bredde: 85;
  --stil-vaeg-type-tal-linje: 1;
  --stil-vaeg-type-foerernavn-px: 84px;
  --stil-vaeg-type-foerernavn-vaegt: 750;
  --stil-vaeg-type-foerernavn-bredde: 100;
  --stil-vaeg-type-foerernavn-linje: 1.1;
  --stil-vaeg-type-navn-px: 68px;
  --stil-vaeg-type-navn-vaegt: 750;
  --stil-vaeg-type-navn-bredde: 100;
  --stil-vaeg-type-navn-linje: 1.1;
  --stil-vaeg-type-kontaktnavn-px: 96px;
  --stil-vaeg-type-kontaktnavn-vaegt: 750;
  --stil-vaeg-type-kontaktnavn-bredde: 92;
  --stil-vaeg-type-kontaktnavn-linje: 1.1;
  --stil-vaeg-type-besked-px: 48px;
  --stil-vaeg-type-besked-vaegt: 500;
  --stil-vaeg-type-besked-bredde: 100;
  --stil-vaeg-type-besked-linje: 1.35;
  --stil-vaeg-type-tilstand-hjaelp-px: 60px;
  --stil-vaeg-type-tilstand-hjaelp-vaegt: 500;
  --stil-vaeg-type-tilstand-hjaelp-bredde: 100;
  --stil-vaeg-type-tilstand-hjaelp-linje: 1.35;
  --stil-vaeg-type-enhed-px: 52px;
  --stil-vaeg-type-enhed-vaegt: 700;
  --stil-vaeg-type-enhed-bredde: 85;
  --stil-vaeg-type-enhed-linje: 1;
  --stil-vaeg-type-maerkat-stor-px: 54px;
  --stil-vaeg-type-maerkat-stor-vaegt: 700;
  --stil-vaeg-type-maerkat-stor-bredde: 100;
  --stil-vaeg-type-maerkat-stor-linje: 1.2;
  --stil-vaeg-type-maerkat-stor-sperring: .08em;
  --stil-vaeg-type-maerkat-px: 48px;
  --stil-vaeg-type-maerkat-vaegt: 700;
  --stil-vaeg-type-maerkat-bredde: 100;
  --stil-vaeg-type-maerkat-linje: 1.2;
  --stil-vaeg-type-maerkat-sperring: .08em;
  --stil-vaeg-rekord-foerste-tal-px: 80px;
  --stil-vaeg-rekord-foerste-tal-vaegt: 850;
  --stil-vaeg-rekord-foerste-tal-bredde: 85;
  --stil-vaeg-rekord-foerste-tal-linje: 1;
  --stil-vaeg-rekord-foerste-tal-rummelig-px: 192px;
  --stil-vaeg-rekord-foerste-tal-rummelig-vaegt: 850;
  --stil-vaeg-rekord-foerste-tal-rummelig-bredde: 85;
  --stil-vaeg-rekord-foerste-tal-rummelig-linje: 1;
  --stil-vaeg-rekord-andet-tal-px: 68px;
  --stil-vaeg-rekord-andet-tal-vaegt: 850;
  --stil-vaeg-rekord-andet-tal-bredde: 85;
  --stil-vaeg-rekord-andet-tal-linje: 1;
  --stil-vaeg-rekord-andet-tal-rummelig-px: 112px;
  --stil-vaeg-rekord-andet-tal-rummelig-vaegt: 850;
  --stil-vaeg-rekord-andet-tal-rummelig-bredde: 85;
  --stil-vaeg-rekord-andet-tal-rummelig-linje: 1;
  --stil-vaeg-rekord-andet-navn-px: 48px;
  --stil-vaeg-rekord-andet-navn-vaegt: 750;
  --stil-vaeg-rekord-andet-navn-bredde: 100;
  --stil-vaeg-rekord-andet-navn-linje: 1.1;

  /* PRINT · opsætningssedlen, og kun den — papir er ikke en skærm */
  --print-papir: #FFFFFF;
  --print-blaek: #22252A;
  --print-daempet: #5A5F66;
  --print-kant: #D8DAD2;

  /* VÆGGEN · lærredets mål og QR-koderne */
  --vaeg-laerredBredde: 3840px;
  --vaeg-laerredHoejde: 2160px;
  --vaeg-ordmaerke: 360px;
  --vaeg-qrStor: 240px;
  --vaeg-qrLille: 140px;

  /* VÆGGEN · geometri og QR-mål (5.2) — de stående værdier står i afsnit 01b */
  --vaeg-luft-side: 96px; /* vandret sikkerhedsluft */
  --vaeg-luft-kant: 64px; /* lodret sikkerhedsluft */
  --vaeg-mellem-sektion: 32px; /* mellem store zoner */
  --vaeg-mellem-kort: 32px; /* standard gitterafstand */
  --vaeg-mellem-kort-staaende: 48px; /* stablede rekordkort — eget mål, ikke et formatskifte */
  --vaeg-kort-runding: 24px; /* alle indholdskort */
  --vaeg-kort-luft: 40px; /* personalekort og store kort */
  --vaeg-qr-app: 240px; /* app-koden — den eneste, der skal kunne ses fra gulvet */
  --vaeg-qr-regler: 180px; /* den generelle regelkode ved siden af app-koden */
  --vaeg-qr-regler-alene: 260px; /* den generelle regelkode, når app-koden ikke er der */
  --vaeg-qr-oevelse: 112px; /* øvelsens regel-QR i rekordkortet · 160px stående */
  --vaeg-qr-wifi: 300px; /* gæstenettets kode · 320px stående */

  /* AFSTANDE · 4-base, ti trin */
  --afstand-1: 4px; /* ikon til tekst */
  --afstand-2: 8px; /* inde i chips og badges */
  --afstand-3: 12px; /* mellem kort · gap i lister */
  --afstand-4: 16px; /* kortpolstring, kompakt */
  --afstand-5: 20px; /* kortpolstring standard · skærmmargin */
  --afstand-6: 24px; /* luft omkring helten på et kort */
  --afstand-7: 32px; /* mellem sektioner */
  --afstand-8: 40px; /* over en sektionsoverskrift */
  --afstand-9: 48px; /* fokusforløbets indre topluft */
  --afstand-10: 64px; /* omkring display-tal i fuld skærm */

  /* MÅL · det, der er lov */
  --maal-beroeringsmaal-min: 44px;
  --maal-primaerknap-hoejde: 56px;
  --maal-listeraekke-min: 52px;
  --maal-tabelraekke: 72px;
  --maal-mobil-reference: 390px;
  --maal-stiplet-bredde: 1.5px;
  --maal-centerknap-hoejde: 48px;
  --maal-centerknap-sekundaer-hoejde: 44px;
  --maal-centermenu-bredde: 256px;
  --maal-centermenu-brudpunkt: 1440px;
  --maal-ordmaerke-bredde: 140px;
  --maal-ordmaerke-hoejde: 28px;
  --maal-panel-bredde: 420px;
  --maal-dialog-maks-bredde: 560px;
  --maal-vaelger-min-bredde: 200px;
  --maal-vaelger-maks-bredde: 260px;
  --maal-bygger-redigering-min: 480px;
  --maal-bygger-visning-min: 600px;
  --maal-oevelsesliste-maks-hoejde: 288px;

  /* RUNDINGER · seks navne */
  --runding-lige: 0px;
  --runding-mikro: 10px; /* chips, badges, forsøgsfelter */
  --runding-lille: 14px; /* felter, små paneler, rækker */
  --runding-mellem: 18px; /* paneler og kort i lister */
  --runding-stor: 28px; /* kort, ark (øverste hjørner) */
  --runding-pille: 999px; /* knapper, piller, kontakter, fremdrift, ure */

  /* STREGER · to af dem er designbeslutninger, ikke tykkelser */
  --streg-normal: 1px;
  --streg-staerk: 2px;
  --streg-tom: 1.5px; /* stiplet tomtilstand */
  --streg-signatur: 4px; /* Løftelinjens faste linje — den, der erstatter glød som hierarki */
  --streg-vaeg: 2px; /* skillelinjer i logisk 4K, hvor én pixel forsvinder på afstand */

  /* STRUKTUR · de tal en CSS-regel skal bruge, så de ikke står løst i en skærm */
  --struktur-nul: 0;
  --struktur-en: 1;
  --struktur-negativ-en: -1; /* negativ retning uden en løs konstant */
  --struktur-fuld: 100%;
  --struktur-halv: 50%;
  --struktur-laesebredde: 75%; /* maksimal forklaringsbredde i væggens tomtilstand */
  --struktur-ark-maks: 92%; /* arkets maksimale andel af den logiske skærm */
  --struktur-fraktion: 1fr;

  /* GRID · kolonnetallene fladerne allerede deler op efter */
  --grid-telefon-kolonner: 4;
  --grid-arbejde-kolonner: 12;
  --grid-vaeg-kolonner: 3;
  --grid-fane-kolonner: 4;
  --grid-nul: 0;
  --grid-en: 1;
  --grid-halv: 0.5;
  --grid-fuld-procent: 100;
  --grid-halv-procent: 50;
  --grid-skala-normal: 1;
  --grid-skala-stor: 1.15;
  --grid-skala-stoerre: 1.3;
  --grid-tekst-max-procent: 100;

  /* SKRIFT · én kilde til familie, reserve og aksernes grænser */
  --skrift-familie: Archivo;
  --skrift-reserve: system-ui, sans-serif; /* fejlrobust reserve — ikke et valg */
  --skrift-vaegt-min: 100;
  --skrift-vaegt-maks: 900;
  --skrift-bredde-min: 62; /* wdth-aksen i procent */
  --skrift-bredde-maks: 125;

  /* LAG · seks etager */
  --lag-indhold: 0;
  --lag-klaebende: 10;
  --lag-ark: 20;
  --lag-dialog: 30;
  --lag-toast: 40;
  --lag-fejring: 50;

  /* SKYGGER · kun det, der ligger over indholdet — ark, klæbende zoner og toasten */
  --skygge-ark: 0 -1px 0 #2A2E33, 0 24px 48px rgba(0,0,0,.5);
  --skygge-klaebende: none;
  --skygge-toast: none;
  --skygge-flade: none;

  /* GLØD · lys, ikke højde — ingen forskydning, og farven følger accentvalget */
  --gloed-accent: 0 0 0 0 transparent;
  --gloed-accentro: 0 0 0 0 transparent;

  /* LYSTRAPPE · flader, lyset falder PÅ — afledt af --accent, så den følger accentvalget */
  --lys-accent-1: transparent;
  --lys-accent-2: transparent;
  --lys-accent-3: transparent;
  --lys-accent-4: transparent;
  --lys-accent-valgt: color-mix(in oklab, var(--accent) 12%, transparent);

  /* KANTLYS · kanter, lyset rammer — og de to inset-linjer, der gør en flade til et objekt */
  --kantlys-accent-svag: var(--kant-normal);
  --kantlys-accent: var(--kant-staerk);
  --kantlys-accent-staerk: var(--accent-tekst);
  --kantlys-hvisken: transparent;
  --kantlys-lysende: var(--kant-staerk);
  --kantlys-top: none;
  --kantlys-top-accent: none;

  /* KASTET LYS · en lysende flade kaster sin egen farve ned. Blur og spredning er FASTE */
  --kast-accent-lav: none;
  --kast-accent: none;
  --kast-accent-hoej: none;
  --kast-plan-2: none;
  --kast-plan-3: none;

  /* BEVÆGELSE · fem varigheder */
  --tid-mikro: 90ms; /* tryk-svar, kontakter */
  --tid-kort: 180ms; /* faneskift, toasts */
  --tid-mellem: 260ms; /* skærmskift, ark op */
  --tid-lang: 400ms; /* fejringens opbygning */
  --tid-episk: 700ms; /* kun PR-fest og blok-slut */
  --ark-op: 260ms;
  --ark-ned: 180ms; /* væk-ting skal væk hurtigere, end de kom */
  --reduceret: 150ms; /* ren indtoning ved reduceret bevægelse */
  --puls-aktiv: 2000ms; /* det aktive sæts puls — den ene loop, der ikke er et skelet */
  --svartid-max: 100ms; /* hård grænse fra tryk til synlig virkning */

  /* BEVÆGELSE · tre kurver — fjederen bruges aldrig på noget, der ikke fejrer */
  --kurve-ind: cubic-bezier(.2,0,0,1);
  --kurve-ud: cubic-bezier(.4,0,1,1);
  --kurve-fjeder: cubic-bezier(.34,1.36,.64,1);

  /* BEVÆGELSE · de navngivne øjeblikke fra afsnit 5.3, 5.7 og 5.8 — ikke frie værdier */
  --logo-taender: 300ms; /* ø’ets accent tænder ved åbning (5.3) */
  --overstregning: 300ms; /* den gamle rekord streges over (5.3, trin 7) */
  --streak-optaelling: 300ms; /* streaken tæller op efter en gennemført uge (5.7) */
  --talopdaeling: 600ms; /* tallet tæller op fra gammel til ny rekord i PR-festen (5.3) */
  --konfetti-min-ms: 1500ms; /* konfettiens levetid, minimum (5.3) */
  --konfetti-maks-ms: 2000ms; /* konfettiens levetid, maksimum (5.3) */
  --vaeg-sideskift: 800ms; /* væggens sideskift — langsommere, afstanden er meter (5.8, etape 4) */
  --vaeg-tekstskift: 600ms; /* væggens tekstskift (5.8) */

  /* BEVÆGELSE · mål og mængder */
  --tryk-skala: 0.97; /* hvert trykbart element går ned og op igen */
  --nik: 24px; /* et nik, ikke en rejse */
  --trappe: 20ms; /* forsinkelse pr. række i en trappevis indtoning */
  --trappe-max-raekker: 8; /* rækker derefter kommer med den sidste */

  /* VENTEN · skelet og toasts */
  --skelet-min-opacitet: 0.08;
  --skelet-maks-opacitet: 0.14;
  --skelet-cyklus: 1200ms;
  --ventetid-til-fejl: 4000ms; /* derefter besked + PRØV IGEN, aldrig en opdigtet procent */
  --toast: 2800ms;
  --toast-med-fortryd: 4200ms;

  /* FOKUS · outline:none uden erstatning er forbudt */
  --fokus-bredde: 2px;
  --fokus-luft: 3px;

  /* ADFÆRD · Løftelinjens samlede navne. De fleste er alias for en variabel ovenfor —
samme tal, nyt navn. De gamle forsvinder, når hver reference er flyttet. */
  --adfaerd-reduceret-ms: 150ms;
  --adfaerd-svartid-maks-ms: 100ms;
  --adfaerd-skelet-cyklus-ms: 1200ms;
  --adfaerd-ventetid-ms: 4000ms;
  --adfaerd-toast-ms: 2800ms;
  --adfaerd-fortryd-ms: 4200ms;
  --adfaerd-ark-op-ms: 260ms;
  --adfaerd-ark-ned-ms: 180ms;
  --adfaerd-trappe-ms: 20ms;
  --adfaerd-trappe-maks: 8;
  --adfaerd-ryk-px: 24px;
  --adfaerd-tryk-skala: 0.97;
  --adfaerd-dialog-skala: 0.96; /* dialogens tilladte startskala */
  --adfaerd-ark-luk-andel: 0.3; /* træk-andel, før arket lukker */
  --adfaerd-traek-taerskel-px: 6px; /* fredet: tryk eller træk */
  --adfaerd-skelet-min: 0.08;
  --adfaerd-skelet-maks: 0.14;
  --adfaerd-hvile-trin-sek: 15; /* hviletimerens trin pr. tryk */

  /* TOKENS UDEN CSS-BRUG · står her, så JavaScript kan læse dem ét sted */
  --accent-standard-navn: lime; /* det valg, appen starter med — et navn, ikke en farve */
  --avatar-former: kile, soejler, bue, ring, trappe, bjaelke, boelge, stjerne;
  --lyd-navne: gong, klik-tak, fanfare; /* ingen lyd afspilles oven i en anden */
  --vibration-let: 10; /* millisekunder */
  --vibration-afvisning: 20; /* millisekunder */
  --vibration-dobbelt: 30, 30, 30; /* millisekunder */
}

/* ══ 01b · STÅENDE FORMAT ══════════════════════════════════════════════════ */

/* Samme variabelnavne som på :root, andre tal. Sæt `data-format='staaende'` på
   lærredet — så følger alt indeni med, uden at kende formatet. */
[data-format='staaende'] {
  /* TYPOGRAFI · væggens skala, stående */
  --stil-vaeg-type-side-px: 192px;
  --stil-vaeg-type-tilstand-px: 120px;
  --stil-vaeg-type-hovedtal-px: 120px;
  --stil-vaeg-type-foerernavn-px: 78px;
  --stil-vaeg-type-navn-px: 72px;
  --stil-vaeg-type-kontaktnavn-px: 104px;
  --stil-vaeg-type-besked-px: 52px;
  --stil-vaeg-type-tilstand-hjaelp-px: 64px;
  --stil-vaeg-type-enhed-px: 56px;
  --stil-vaeg-rekord-foerste-tal-px: 192px;
  --stil-vaeg-rekord-foerste-tal-rummelig-px: 192px;
  --stil-vaeg-rekord-andet-tal-px: 120px;
  --stil-vaeg-rekord-andet-tal-rummelig-px: 120px;

  /* VÆGGEN · geometri, stående */
  --vaeg-qr-oevelse: 160px;
  --vaeg-qr-wifi: 320px;
}

/* ══ 02 · ACCENTVALG ═══════════════════════════════════════════════════════ */

/* Standardvalget ligger på :root, så appen har en accent, før nogen har valgt. */
:root,
:root.accent-lime {
  --accent: var(--accent-lime);
  --accent-tekst: var(--accent-lime);
  --tekst-paa-accent: #121315;
  --logo-oe: var(--accent-lime);
}

:root.accent-pink {
  --accent: var(--accent-pink);
  --accent-tekst: var(--accent-pink);
  --tekst-paa-accent: #121315;
  --logo-oe: var(--accent-pink);
}

:root.accent-hvid {
  --accent: var(--accent-hvid);
  --accent-tekst: var(--accent-hvid);
  --tekst-paa-accent: #121315;
  --logo-oe: var(--accent-lime);
}

/* ══ 02b · LYS TILSTAND ════════════════════════════════════════════════════ */

:root {
  --knap-primaer-flade: var(--accent);
  --knap-primaer-tekst: var(--tekst-paa-accent);
}

:root[data-tema='lys'] {
  color-scheme: light;
  --flade-bund: #F3F4F1;
  --flade-kort: #FFFFFF;
  --flade-haevet: #FFFFFF;
  --flade-felt: #ECEDE9;
  --kant-normal: #D4D7D1;
  --kant-staerk: #7A8087;
  --kant-scrim: rgba(18,19,21,0.42);
  --kant-afkrydsning: #121315;
  --kant-tom: #5D636A;
  --tekst: #121315;
  --tekst-daempet: #454A50;
  --tekst-svag: #5D636A;
  --gul: #8A5800;
  --lilla: #6638C4;
  --cyan: #00717D;
  --groen: #18713F;
  --roed: #C2251B;
  --skygge-ark: 0 16px 40px rgba(18,19,21,.16), 0 1px 0 rgba(18,19,21,.06);
  --skygge-klaebende: none;
  --skygge-toast: none;
  --skygge-flade: 0 1px 2px rgba(18,19,21,.06), 0 8px 24px rgba(18,19,21,.07);
  --accent-tekst: #4D6200;
  --knap-primaer-flade: var(--tekst);
  --knap-primaer-tekst: var(--accent);
}

:root[data-tema='lys'].accent-pink {
  --accent-tekst: #A3127F;
}

:root[data-tema='lys'].accent-hvid {
  --accent-tekst: #121315;
  --accent: var(--tekst);
  --tekst-paa-accent: var(--flade-kort);
  --knap-primaer-tekst: var(--flade-kort);
}

/* Ordmærket i lys tilstand er den sorte udgave (ordmaerke-sort.svg): samme form, men
   et lime Ø kan ikke ses på hvidt papir. */
:root[data-tema='lys'] img[src$='ordmaerke.svg'] { filter: brightness(0); }

@media (prefers-color-scheme: light) {
  :root:not([data-tema='moerk']) img[src$='ordmaerke.svg'] { filter: brightness(0); }

  :root:not([data-tema='moerk']) {
    color-scheme: light;
    --flade-bund: #F3F4F1;
    --flade-kort: #FFFFFF;
    --flade-haevet: #FFFFFF;
    --flade-felt: #ECEDE9;
    --kant-normal: #D4D7D1;
    --kant-staerk: #7A8087;
    --kant-scrim: rgba(18,19,21,0.42);
    --kant-afkrydsning: #121315;
    --kant-tom: #5D636A;
    --tekst: #121315;
    --tekst-daempet: #454A50;
    --tekst-svag: #5D636A;
    --gul: #8A5800;
    --lilla: #6638C4;
    --cyan: #00717D;
    --groen: #18713F;
    --roed: #C2251B;
    --skygge-ark: 0 16px 40px rgba(18,19,21,.16), 0 1px 0 rgba(18,19,21,.06);
    --skygge-klaebende: none;
    --skygge-toast: none;
    --skygge-flade: 0 1px 2px rgba(18,19,21,.06), 0 8px 24px rgba(18,19,21,.07);
    --accent-tekst: #4D6200;
    --knap-primaer-flade: var(--tekst);
    --knap-primaer-tekst: var(--accent);
  }

  :root:not([data-tema='moerk']).accent-pink {
    --accent-tekst: #A3127F;
  }

  :root:not([data-tema='moerk']).accent-hvid {
    --accent-tekst: #121315;
    --accent: var(--tekst);
    --tekst-paa-accent: var(--flade-kort);
    --knap-primaer-tekst: var(--flade-kort);
  }
}

/* Et udsnit, der altid er mørkt, uanset tilstanden omkring det: forhåndsvisningen af en væg. */
.tema-moerk {
  color-scheme: dark;
  --flade-bund: #0B0C0D;
  --flade-kort: #141618;
  --flade-haevet: #1D2023;
  --flade-felt: #101214;
  --kant-normal: #2A2E33;
  --kant-staerk: #6B737C;
  --kant-scrim: rgba(4,5,7,0.72);
  --kant-afkrydsning: #6B737C;
  --kant-tom: #6B737C;
  --tekst: #F1F2ED;
  --tekst-daempet: #B4BAC1;
  --tekst-svag: #8D949C;
  --gul: #FFC24B;
  --lilla: #B98CFF;
  --cyan: #52E8FF;
  --groen: #5FD38D;
  --roed: #FF5D52;
  --skygge-ark: 0 -1px 0 #2A2E33, 0 24px 48px rgba(0,0,0,.5);
  --skygge-klaebende: none;
  --skygge-toast: none;
  --skygge-flade: none;
  --accent-tekst: var(--accent);
  --knap-primaer-flade: var(--accent);
  --knap-primaer-tekst: var(--tekst-paa-accent);
}
/* `:root` foran giver samme vægt som de lyse regler for ordmærket, og denne står efter dem. */
:root .tema-moerk img[src$='ordmaerke.svg'] { filter: none; }

/* ══ 03 · NULSTILLING ══════════════════════════════════════════════════════ */

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

* {
  margin: 0;
}

html {
  /* Ingen grå blitz, når en finger rammer noget trykbart. */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* Knapper arver tekstfarven. Uden linjen malede iOS hver knap uden sin egen farve i systemets blå: titler, rækker
   og ikonknapper stod i en mørkeblå, der ikke findes i appen (UX-gennemgangen 19. oktober 2026). */
button {
  color: inherit;
}

html,
body {
  /* Et træk forbi listens ende trækker ikke siden bag appen med. */
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══ 04 · HTML OG BODY ═════════════════════════════════════════════════════ */

:root {
  /* Mørk er udgangspunktet; afsnit 02b skifter til lys. */
  color-scheme: dark;
  accent-color: var(--accent-tekst);
}

/* **Bundfarven sidder på `html`, ikke på `body`.**

   Det var oprindeligt en nødvendighed: når `html` har en baggrund, flyttes den ud på
   lærredet, så rumlyset kunne males oven på den. Havde `body` haft sin egen baggrund,
   ville den blive malet EFTER alle lag med negativ `z-index` og dække lyset helt. Det
   skete også, første gang det blev bygget: gradienten lå i computed style, og skærmen
   var stadig sort.

   Rumlyset er væk med Løftelinjen, så den konkrete fælde findes ikke længere. Farven
   bliver alligevel på `html`: en baggrund dér dækker hele lærredet, også når siden er
   kortere end vinduet, og når overrulning trækker fladen ud over kanten. Flytter man
   den til `body`, får man en stribe i browserens egen farve ved begge ender. */
html {
  min-height: 100%;
  background: var(--flade-bund);
}

body {
  min-height: 100%;
  color: var(--tekst);
  font-family: 'Archivo', system-ui, sans-serif;
}

/* Uden en klasse på skriver appen i krop-1. */
body {
  font-size: calc(var(--stil-krop-1-px) * var(--tekst-skala));
  line-height: var(--stil-krop-1-linje);
  font-weight: var(--stil-krop-1-vaegt);
  font-variation-settings: 'wdth' var(--stil-krop-1-bredde), 'wght' var(--stil-krop-1-vaegt);
}

::selection {
  background: var(--accent);
  color: var(--tekst-paa-accent);
}

/* **Rummet bag appen.** Indtil nu var bunden ÉN flad farve over hele skærmen — og en
   flad farve har ingen retning. Intet kort kunne vende mod en lyskilde, for der var
   ingen. Det var grunden til, at appen føltes flad; ikke manglende effekter.

   Lyset er fastgjort til vinduet, ikke til siden: en lyskilde ruller ikke med
   indholdet. `z-index: -1` maler det oven på body's egen bundfarve og under alt
   appindhold, og `pointer-events: none` betyder, at det aldrig kan fange et tryk.
   Farven er `--lys-accent-*`, så rummet skifter kulør sammen med accentvalget.

   Gradienterne blandes i oklab. Mod `transparent` i sRGB går vejen gennem
   gennemsigtig SORT, og så lægger der sig en grå dis over overgangen. */
/* **Rumlyset er fjernet 20. september 2026 med Løftelinjen.**

   Her stod et body::before med to radiale gradienter i accentfarven. Kontrakten siger
   det direkte: rumlys, glød og lysgradienter anvendes ikke. Hierarki bæres af flader,
   kontrast og den faste signaturlinje.

   Det er en udskiftning, ikke en besparelse. Fladetrappen blev hævet i samme greb, så
   kort mod haevet gik fra 1,14:1 til 1,31:1, og kanterne blev faste farver i stedet for
   gennemsigtigt hvidt. Et ark skiller sig nu fra indholdet ved sin egen flade og kant.
   Det var netop dét, gradienten før skulle hjælpe med.

   Findes der igen behov for dybde, tegnes den med flade plus kant. Ark, klæbende zone
   og toast er de eneste tre, der har skygge. */

/* ══ 05 · TEKSTSTØRRELSE ═══════════════════════════════════════════════════ */

/* De tre trin skalerer én rodvariabel, som alle tekststile ganges med. Derfor flytter
   en større tekst hele appen samtidig — ikke ét afsnit ad gangen.

   Faktorerne var de eneste tre tal i filen, kontrakten ikke indeholdt. Det holdt indtil
   20. september 2026: Løftelinjen navngav dem som grid.skalaNormal, grid.skalaStor og
   grid.skalaStoerre, og de hentes nu derfra som alt andet. */
:root {
  --tekst-skala-normal: 1;
  --tekst-skala-stor: 1.15;
  --tekst-skala-stoerre: 1.3;
  --tekst-skala: var(--tekst-skala-normal);
}

.tekst-normal {
  --tekst-skala: var(--tekst-skala-normal);
}

.tekst-stor {
  --tekst-skala: var(--tekst-skala-stor);
}

.tekst-stoerre {
  --tekst-skala: var(--tekst-skala-stoerre);
}

/* ══ 06 · DE NI TEKSTSTILE ═════════════════════════════════════════════════ */

.display-2 {
  font-size: calc(var(--stil-display-2-px) * var(--tekst-skala));
  line-height: var(--stil-display-2-linje);
  font-weight: var(--stil-display-2-vaegt);
  font-variation-settings: 'wdth' var(--stil-display-2-bredde), 'wght' var(--stil-display-2-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.display-1 {
  font-size: calc(var(--stil-display-1-px) * var(--tekst-skala));
  line-height: var(--stil-display-1-linje);
  font-weight: var(--stil-display-1-vaegt);
  font-variation-settings: 'wdth' var(--stil-display-1-bredde), 'wght' var(--stil-display-1-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.tal-1 {
  font-size: calc(var(--stil-tal-1-px) * var(--tekst-skala));
  line-height: var(--stil-tal-1-linje);
  font-weight: var(--stil-tal-1-vaegt);
  font-variation-settings: 'wdth' var(--stil-tal-1-bredde), 'wght' var(--stil-tal-1-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.titel-stor {
  font-size: calc(var(--stil-titel-stor-px) * var(--tekst-skala));
  line-height: var(--stil-titel-stor-linje);
  font-weight: var(--stil-titel-stor-vaegt);
  font-variation-settings: 'wdth' var(--stil-titel-stor-bredde), 'wght' var(--stil-titel-stor-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.titel-1 {
  font-size: calc(var(--stil-titel-1-px) * var(--tekst-skala));
  line-height: var(--stil-titel-1-linje);
  font-weight: var(--stil-titel-1-vaegt);
  font-variation-settings: 'wdth' var(--stil-titel-1-bredde), 'wght' var(--stil-titel-1-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.titel-2 {
  font-size: calc(var(--stil-titel-2-px) * var(--tekst-skala));
  line-height: var(--stil-titel-2-linje);
  font-weight: var(--stil-titel-2-vaegt);
  font-variation-settings: 'wdth' var(--stil-titel-2-bredde), 'wght' var(--stil-titel-2-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.krop-1 {
  font-size: calc(var(--stil-krop-1-px) * var(--tekst-skala));
  line-height: var(--stil-krop-1-linje);
  font-weight: var(--stil-krop-1-vaegt);
  font-variation-settings: 'wdth' var(--stil-krop-1-bredde), 'wght' var(--stil-krop-1-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.krop-2 {
  font-size: calc(var(--stil-krop-2-px) * var(--tekst-skala));
  line-height: var(--stil-krop-2-linje);
  font-weight: var(--stil-krop-2-vaegt);
  font-variation-settings: 'wdth' var(--stil-krop-2-bredde), 'wght' var(--stil-krop-2-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.knap {
  font-size: calc(var(--stil-knap-px) * var(--tekst-skala));
  line-height: var(--stil-knap-linje);
  font-weight: var(--stil-knap-vaegt);
  font-variation-settings: 'wdth' var(--stil-knap-bredde), 'wght' var(--stil-knap-vaegt);
  letter-spacing: var(--stil-knap-sperring);
  text-transform: none;
  font-variant-numeric: normal;
}

.maerkat {
  font-size: calc(var(--stil-maerkat-px) * var(--tekst-skala));
  line-height: var(--stil-maerkat-linje);
  font-weight: var(--stil-maerkat-vaegt);
  font-variation-settings: 'wdth' var(--stil-maerkat-bredde), 'wght' var(--stil-maerkat-vaegt);
  letter-spacing: var(--stil-maerkat-sperring);
  text-transform: none;
  font-variant-numeric: normal;
}

.etiket {
  font-size: calc(var(--stil-etiket-px) * var(--tekst-skala));
  line-height: var(--stil-etiket-linje);
  font-weight: var(--stil-etiket-vaegt);
  font-variation-settings: 'wdth' var(--stil-etiket-bredde), 'wght' var(--stil-etiket-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.enhed {
  font-size: calc(var(--stil-enhed-px) * var(--tekst-skala));
  line-height: var(--stil-enhed-linje);
  font-weight: var(--stil-enhed-vaegt);
  font-variation-settings: 'wdth' var(--stil-enhed-bredde), 'wght' var(--stil-enhed-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

/* Væggens egen skala. Klasserne findes overalt, men bruges kun af infoskærmen —
   de er tegnet til at blive læst på meters afstand inde i et 4K-lærred. */

.vaeg-display {
  font-size: calc(var(--stil-vaeg-display-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-display-linje);
  font-weight: var(--stil-vaeg-display-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-display-bredde), 'wght' var(--stil-vaeg-display-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-tal {
  font-size: calc(var(--stil-vaeg-tal-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-tal-linje);
  font-weight: var(--stil-vaeg-tal-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-tal-bredde), 'wght' var(--stil-vaeg-tal-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-tal-stor {
  font-size: calc(var(--stil-vaeg-tal-stor-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-tal-stor-linje);
  font-weight: var(--stil-vaeg-tal-stor-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-tal-stor-bredde), 'wght' var(--stil-vaeg-tal-stor-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-navn {
  font-size: calc(var(--stil-vaeg-navn-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-navn-linje);
  font-weight: var(--stil-vaeg-navn-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-navn-bredde), 'wght' var(--stil-vaeg-navn-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-besked {
  font-size: calc(var(--stil-vaeg-besked-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-besked-linje);
  font-weight: var(--stil-vaeg-besked-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-besked-bredde), 'wght' var(--stil-vaeg-besked-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-enhed {
  font-size: calc(var(--stil-vaeg-enhed-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-enhed-linje);
  font-weight: var(--stil-vaeg-enhed-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-enhed-bredde), 'wght' var(--stil-vaeg-enhed-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-motivation {
  font-size: calc(var(--stil-vaeg-motivation-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-motivation-linje);
  font-weight: var(--stil-vaeg-motivation-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-motivation-bredde), 'wght' var(--stil-vaeg-motivation-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-maerkat {
  font-size: calc(var(--stil-vaeg-maerkat-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-maerkat-linje);
  font-weight: var(--stil-vaeg-maerkat-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-maerkat-bredde), 'wght' var(--stil-vaeg-maerkat-vaegt);
  letter-spacing: var(--stil-vaeg-maerkat-sperring);
  text-transform: uppercase;
  font-variant-numeric: normal;
}

.vaeg-maerkat-stor {
  font-size: calc(var(--stil-vaeg-maerkat-stor-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-maerkat-stor-linje);
  font-weight: var(--stil-vaeg-maerkat-stor-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-maerkat-stor-bredde), 'wght' var(--stil-vaeg-maerkat-stor-vaegt);
  letter-spacing: var(--stil-vaeg-maerkat-stor-sperring);
  text-transform: uppercase;
  font-variant-numeric: normal;
}

.vaeg-rekordplads {
  font-size: calc(var(--stil-vaeg-rekordplads-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekordplads-linje);
  font-weight: var(--stil-vaeg-rekordplads-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekordplads-bredde), 'wght' var(--stil-vaeg-rekordplads-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-rekordplads-stor {
  font-size: calc(var(--stil-vaeg-rekordplads-stor-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekordplads-stor-linje);
  font-weight: var(--stil-vaeg-rekordplads-stor-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekordplads-stor-bredde), 'wght' var(--stil-vaeg-rekordplads-stor-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-rekordnavn {
  font-size: calc(var(--stil-vaeg-rekordnavn-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekordnavn-linje);
  font-weight: var(--stil-vaeg-rekordnavn-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekordnavn-bredde), 'wght' var(--stil-vaeg-rekordnavn-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-rekordtal {
  font-size: calc(var(--stil-vaeg-rekordtal-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekordtal-linje);
  font-weight: var(--stil-vaeg-rekordtal-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekordtal-bredde), 'wght' var(--stil-vaeg-rekordtal-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-type-side {
  font-size: calc(var(--stil-vaeg-type-side-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-side-linje);
  font-weight: var(--stil-vaeg-type-side-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-side-bredde), 'wght' var(--stil-vaeg-type-side-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-historie {
  font-size: calc(var(--stil-vaeg-type-historie-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-historie-linje);
  font-weight: var(--stil-vaeg-type-historie-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-historie-bredde), 'wght' var(--stil-vaeg-type-historie-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-tilstand {
  font-size: calc(var(--stil-vaeg-type-tilstand-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-tilstand-linje);
  font-weight: var(--stil-vaeg-type-tilstand-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-tilstand-bredde), 'wght' var(--stil-vaeg-type-tilstand-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-hovedtal {
  font-size: calc(var(--stil-vaeg-type-hovedtal-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-hovedtal-linje);
  font-weight: var(--stil-vaeg-type-hovedtal-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-hovedtal-bredde), 'wght' var(--stil-vaeg-type-hovedtal-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-type-tal {
  font-size: calc(var(--stil-vaeg-type-tal-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-tal-linje);
  font-weight: var(--stil-vaeg-type-tal-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-tal-bredde), 'wght' var(--stil-vaeg-type-tal-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-type-foerernavn {
  font-size: calc(var(--stil-vaeg-type-foerernavn-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-foerernavn-linje);
  font-weight: var(--stil-vaeg-type-foerernavn-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-foerernavn-bredde), 'wght' var(--stil-vaeg-type-foerernavn-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-navn {
  font-size: calc(var(--stil-vaeg-type-navn-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-navn-linje);
  font-weight: var(--stil-vaeg-type-navn-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-navn-bredde), 'wght' var(--stil-vaeg-type-navn-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-kontaktnavn {
  font-size: calc(var(--stil-vaeg-type-kontaktnavn-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-kontaktnavn-linje);
  font-weight: var(--stil-vaeg-type-kontaktnavn-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-kontaktnavn-bredde), 'wght' var(--stil-vaeg-type-kontaktnavn-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-besked {
  font-size: calc(var(--stil-vaeg-type-besked-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-besked-linje);
  font-weight: var(--stil-vaeg-type-besked-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-besked-bredde), 'wght' var(--stil-vaeg-type-besked-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-tilstand-hjaelp {
  font-size: calc(var(--stil-vaeg-type-tilstand-hjaelp-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-tilstand-hjaelp-linje);
  font-weight: var(--stil-vaeg-type-tilstand-hjaelp-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-tilstand-hjaelp-bredde), 'wght' var(--stil-vaeg-type-tilstand-hjaelp-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-enhed {
  font-size: calc(var(--stil-vaeg-type-enhed-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-enhed-linje);
  font-weight: var(--stil-vaeg-type-enhed-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-enhed-bredde), 'wght' var(--stil-vaeg-type-enhed-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

.vaeg-type-maerkat-stor {
  font-size: calc(var(--stil-vaeg-type-maerkat-stor-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-maerkat-stor-linje);
  font-weight: var(--stil-vaeg-type-maerkat-stor-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-maerkat-stor-bredde), 'wght' var(--stil-vaeg-type-maerkat-stor-vaegt);
  letter-spacing: var(--stil-vaeg-type-maerkat-stor-sperring);
  text-transform: uppercase;
  font-variant-numeric: normal;
}

.vaeg-type-maerkat {
  font-size: calc(var(--stil-vaeg-type-maerkat-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-type-maerkat-linje);
  font-weight: var(--stil-vaeg-type-maerkat-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-type-maerkat-bredde), 'wght' var(--stil-vaeg-type-maerkat-vaegt);
  letter-spacing: var(--stil-vaeg-type-maerkat-sperring);
  text-transform: uppercase;
  font-variant-numeric: normal;
}

.vaeg-rekord-foerste-tal {
  font-size: calc(var(--stil-vaeg-rekord-foerste-tal-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekord-foerste-tal-linje);
  font-weight: var(--stil-vaeg-rekord-foerste-tal-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekord-foerste-tal-bredde), 'wght' var(--stil-vaeg-rekord-foerste-tal-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-rekord-foerste-tal-rummelig {
  font-size: calc(var(--stil-vaeg-rekord-foerste-tal-rummelig-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekord-foerste-tal-rummelig-linje);
  font-weight: var(--stil-vaeg-rekord-foerste-tal-rummelig-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekord-foerste-tal-rummelig-bredde), 'wght' var(--stil-vaeg-rekord-foerste-tal-rummelig-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-rekord-andet-tal {
  font-size: calc(var(--stil-vaeg-rekord-andet-tal-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekord-andet-tal-linje);
  font-weight: var(--stil-vaeg-rekord-andet-tal-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekord-andet-tal-bredde), 'wght' var(--stil-vaeg-rekord-andet-tal-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-rekord-andet-tal-rummelig {
  font-size: calc(var(--stil-vaeg-rekord-andet-tal-rummelig-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekord-andet-tal-rummelig-linje);
  font-weight: var(--stil-vaeg-rekord-andet-tal-rummelig-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekord-andet-tal-rummelig-bredde), 'wght' var(--stil-vaeg-rekord-andet-tal-rummelig-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.vaeg-rekord-andet-navn {
  font-size: calc(var(--stil-vaeg-rekord-andet-navn-px) * var(--tekst-skala));
  line-height: var(--stil-vaeg-rekord-andet-navn-linje);
  font-weight: var(--stil-vaeg-rekord-andet-navn-vaegt);
  font-variation-settings: 'wdth' var(--stil-vaeg-rekord-andet-navn-bredde), 'wght' var(--stil-vaeg-rekord-andet-navn-vaegt);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: normal;
}

/* ══ 07 · FOKUSRING ════════════════════════════════════════════════════════ */

/* Samme ring overalt, i accentfarven, med luft nok til at ses oven på et kort.
   Den vises kun ved tastatur og hjælpeteknologi — men den kan ikke slås fra. */
:focus-visible {
  outline: var(--fokus-bredde) solid var(--accent-tekst);
  outline-offset: var(--fokus-luft);
}

/* ══ 08 · BEVÆGELSE ════════════════════════════════════════════════════════ */

@keyframes loeft-ind-toning {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes loeft-ud-toning {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes loeft-ind-op {
  from {
    opacity: 0;
    transform: translateY(var(--nik));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loeft-ind-ned {
  from {
    opacity: 0;
    transform: translateY(calc(var(--nik) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loeft-pop {
  from {
    transform: scale(var(--tryk-skala));
  }
  to {
    transform: scale(1);
  }
}

@keyframes loeft-ark-op {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes loeft-ark-ned {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.ind-toning {
  animation: loeft-ind-toning var(--tid-kort) var(--kurve-ind) both;
}

/* Det, der går ud, starter hurtigt og bremser: --kurve-ind, ikke --kurve-ud. --kurve-ud er en ease-in, der starter
   langsomt, og så virker en lukning træg i sit første øjeblik (Emil Kowalskis tjekliste, UX-gennemgangen 19. oktober
   2026, S-F3). Ud er stadig hurtigere end ind: varigheden er kortere. */
.ud-toning {
  animation: loeft-ud-toning var(--tid-kort) var(--kurve-ind) both;
}

.ind-op {
  animation: loeft-ind-op var(--tid-mellem) var(--kurve-ind) both;
}

.ind-ned {
  animation: loeft-ind-ned var(--tid-mellem) var(--kurve-ind) both;
}

/* Fjederen er fejringens — pokalen, sæt-prikkens pop. Aldrig noget andet. */
.pop {
  animation: loeft-pop var(--tid-kort) var(--kurve-fjeder) both;
}

.ark-op {
  animation: loeft-ark-op var(--ark-op) var(--kurve-ind) both;
}

.ark-ned {
  animation: loeft-ark-ned var(--ark-ned) var(--kurve-ind) both;
}

/* Tryk-svar: ned ved berøring, op ved slip. Kvitteringen kommer oveni, aldrig i stedet for. Svaret skal komme i det
   første millisekund, så kurven starter hurtigt (--kurve-ind, som .knap-basis); --kurve-ud startede langsomt, netop
   når tommelfingeren venter (S-F3, S-APP-F2). */
.tryk-svar {
  transition: transform var(--tid-mikro) var(--kurve-ind);
}

.tryk-svar:active {
  transform: scale(var(--tryk-skala));
}

/* Trappevis indtoning i lister. */
.trappe > * {
  animation: loeft-ind-op var(--tid-kort) var(--kurve-ind) both;
}

.trappe > *:nth-child(1) {
  animation-delay: calc(var(--trappe) * 0);
}

.trappe > *:nth-child(2) {
  animation-delay: calc(var(--trappe) * 1);
}

.trappe > *:nth-child(3) {
  animation-delay: calc(var(--trappe) * 2);
}

.trappe > *:nth-child(4) {
  animation-delay: calc(var(--trappe) * 3);
}

.trappe > *:nth-child(5) {
  animation-delay: calc(var(--trappe) * 4);
}

.trappe > *:nth-child(6) {
  animation-delay: calc(var(--trappe) * 5);
}

.trappe > *:nth-child(7) {
  animation-delay: calc(var(--trappe) * 6);
}

.trappe > *:nth-child(8) {
  animation-delay: calc(var(--trappe) * 7);
}

/* Række 9 og frem kommer sammen med den sidste — trappen må ikke blive en ventetid. */
.trappe > *:nth-child(n + 9) {
  animation-delay: calc(var(--trappe) * 7);
}

/* Konfettilaget ligger over alt andet og tager aldrig imod et tryk. */
.konfetti {
  position: fixed;
  inset: 0;
  z-index: var(--lag-fejring);
  pointer-events: none;
}

/* ══ 09 · SKELET ═══════════════════════════════════════════════════════════ */

/* Pulsen er ren opacitet. Skelettet skal have samme antal kort og samme højder som
   det indhold, der kommer — så intet hopper på plads. Efter ventetiden bliver enhver
   venten til besked + PRØV IGEN, aldrig en opdigtet procent. */
@keyframes loeft-skelet-puls {
  0%,
  100% {
    opacity: var(--skelet-min-opacitet);
  }
  50% {
    opacity: var(--skelet-maks-opacitet);
  }
}

.skelet {
  background: var(--tekst);
  border-radius: var(--runding-lille);
  opacity: var(--skelet-min-opacitet);
  animation: loeft-skelet-puls var(--skelet-cyklus) var(--kurve-ind) infinite;
}

/* ══ 10 · KLÆBENDE ZONER ═══════════════════════════════════════════════════ */

/* Toppen bærer kontekst og vejen tilbage, bunden den ene primære handling. Højst én
   klæbende primærknap pr. skærm, og den flytter sig aldrig, mens man ruller —
   indholdet ruller under den med en blød kantskygge. */
.klaebende-top,
.klaebende-bund {
  position: sticky;
  z-index: var(--lag-klaebende);
  /* **Zonerne bærer lyset selv i stedet for at lade det skinne igennem.**
     Første forsøg gjorde dem til rigtigt glas — 76 % dækkende. Så kunne man læse
     teksten, der rullede under toppen, TVÆRS GENNEM overskriften. Zonens hele
     opgave er at skjule det, der ruller under den, så gennemsigtighed er forkert
     her uanset hvor pænt lyset falder. Zonen males derfor helt dækkende.

     Bundfarven er HELT dækkende, og der er ingen `backdrop-filter`. Ved 94 % kunne
     man stadig ane overskriften nedenunder bag klokkeslættet — det er 6 % for meget,
     når zonens eneste opgave er at skjule netop dét. Sløringen ville alligevel ikke
     have noget at sløre bag en dækkende flade. */
  background: var(--flade-bund);
}

.klaebende-top {
  top: 0;
  /* Appen sætter `--statuslinje` (statuslinjen plus iOS' sløring under den, apps/bruger/src/app.css). Panelerne
     lægger sig ikke under statuslinjen, og dér er tallet nul. */
  padding: calc(var(--afstand-4) + var(--statuslinje, env(safe-area-inset-top, 0px))) var(--afstand-5) var(--afstand-4);
  /* Gradienten er væk med Løftelinjen. Den hentede sin farve fra rumlyset, og rumlyset
     findes ikke længere. Zonen skal stadig kunne skelnes fra indholdet, der ruller under
     den, og det klarer den dækkende bundfarve plus skyggen — som er en af de tre, der
     fortsat må have skygge. */
  box-shadow: var(--skygge-klaebende);
}

/* Bundpolstringen lægger telefonens hjemmestribe oveni, så knappen aldrig havner
   under den. Uden hjemmestribe er tillægget nul, og der kommer ingen tom kant. */
.klaebende-bund {
  bottom: 0;
  padding: var(--afstand-4) var(--afstand-5) calc(var(--afstand-4) + env(safe-area-inset-bottom, 0px));
  /* **Ingen gradient her.** Tommelzonens lys hørte til skærmens underkant, ikke til
     zonen — og de to er ikke det samme sted. Er siden kort, sidder zonen midt på
     skærmen (målt på loginskærmen: 415-571 px i et vindue på 812), og så tegnede
     lyset en lys firkant med en knivskarp kant midt i mørket.

     Lyset lå derefter i rumlyset, som var fastgjort til vinduet. Med Løftelinjen er
     rumlyset fjernet, og zonen står på den dækkende bundfarve alene. Konklusionen er
     uændret: her skal ikke være en gradient. */
  background: var(--flade-bund);
}

/* **Bunden kaster ingen skygge.** Den havde en — den samme token som toppen, spejlet
   opad — og den var usynlig, så længe der ikke var noget lys bag appen. Nu er der lys,
   og så gør en sort skygge præcis dét, sorte skygger gør: den mørkner lyset omkring
   zonen. En ydre box-shadow males ALDRIG inden under elementet selv, så resultatet var
   en mørk bræmme over og under en uberørt firkant — og firkanten så derfor LYSERE ud
   end sine omgivelser. Målt i drift på loginskærmen: et bånd fra 415 til 571 px.

   Toppen beholder sin skygge. Den sidder altid ved vinduets overkant og har derfor kun
   ÉN kant at kaste over — indholdet, der ruller under den. Det er dét, skyggen er til
   for. Bunden kan ikke det samme, fordi den flytter sig: på en kort side står den midt
   på skærmen, og så er der ingen kant at blødgøre, kun lys at ødelægge.

   Zonen er dækkende og skiller sig allerede tydeligt fra indholdet uden en skygge. */

/* **Statuslinjen i en Safari-fane på iPhone og iPad.** Panelerne og hjemmesiden ligger
   ikke under statuslinjen, men Safari lader det, man ruller op, fortsætte ind under
   klokkeslættet, sløret (set i simulatoren 20. oktober 2026). Ligger et dækkende element
   fast i toppen, farver Safari statuslinjen med det i stedet, og indholdet glider ind
   under en ren flade. Striben er det element, i sidens egen farve. Det skal være et
   rigtigt element: et `body::before` lod Safari være (prøvet; tekst stod stadig sløret
   over det). Safari regner kun med flader over 10 punkter. Fladerne har elementet
   `<div class="statuslinje-stribe">` øverst i `<body>`; appen har sin egen stribe, og
   væggen har sit eget tema. Kun iOS' browsermotor kender `-webkit-touch-callout`, så
   pc og Android får intet at se. */
.statuslinje-stribe { display: none; }
@supports (-webkit-touch-callout: none) {
  .statuslinje-stribe {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--flade-bund);
    z-index: var(--lag-klaebende);
    pointer-events: none;
  }
}

/* ══ 12 · FÆLLES PRIMITIVER ══════════════════════════════════════ */

/* Klasserne, alle fire flader skrev forfra. Nu ét sted: fire steder at glemme at rette
   blev til ét. Begrundelsen for hvert kanonisk valg står i vaerktoej/byg-tokens.mjs
   lige over dette afsnit — og den hører til dér, fordi den her fil bliver skrevet over.
   (Backticks kan ikke stå i denne kommentar — den bor inde i en skabelonstreng.) */

.knap-fuld { width: 100%; }

.felt-etiket {
  display: flex;
  flex-direction: column;
  gap: var(--afstand-2);
}

.tekst-daempet { color: var(--tekst-daempet); }
.tekst-svag { color: var(--tekst-svag); }

/* ── Løftelinjens to greb ─────────────────────────────────────────────── */

/* Tallet bærer, enheden følger. Samme grundlinje, aldrig midterstillet. */
.hovedtal {
  display: flex;
  align-items: baseline;
  gap: var(--afstand-2);
}

/* Gentaget indhold som sammenhængende rækker. Rækkehøjden er berøringsmålets gulv,
   så en række kan rammes med en finger den dag, den bliver trykbar. */
.raekkeliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.raekkeliste > li {
  min-height: var(--maal-listeraekke-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--afstand-3);
}


/* ── Knapperne · fire grader plus den talende ─────────────────────────── */

.knap-basis {
  font: inherit;
  font-size: var(--stil-knap-px);
  font-weight: var(--stil-knap-vaegt);
  letter-spacing: var(--stil-knap-sperring);
  font-variation-settings: 'wdth' 100, 'wght' var(--stil-knap-vaegt);
  min-height: var(--maal-primaerknap-hoejde);
  min-width: var(--maal-beroeringsmaal-min);
  padding: 0 var(--afstand-5);
  border-radius: var(--runding-pille);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform var(--tid-mikro) var(--kurve-ind),
    opacity var(--tid-mikro) var(--kurve-ind),
    background-color var(--tid-mikro) var(--kurve-ind),
    border-color var(--tid-mikro) var(--kurve-ind),
    color var(--tid-mikro) var(--kurve-ind);
}

.knap-basis:active {
  transform: scale(var(--tryk-skala));
}

/* **Trykket LYSNER.** Et tryk er lys, der rammer en flade — ikke en skygge, der falder
   på den. Alle grader svarer i FARVEN, aldrig i skyggen: en blød skygge, der ændrer
   blødhed, skal males forfra på hvert eneste billede, og LOG SÆT er appens mest
   trykkede knap. Farveskiftet skubbes derimod af grafikchippen. Varigheden er
   --tid-mikro — den er sat på .knap-basis ovenfor. */

.knap-primaer:active { background: color-mix(in oklab, var(--knap-primaer-flade) 84%, var(--knap-primaer-tekst)); }
/* Kanten lysner med den samme formel som fladen. Den hentede før sin værdi fra
   --kantlys-lysende, og kantlys er en af de fire glødfamilier, Løftelinjen afskaffer.
   Kontrakten tillader netop dette: pegning og tryk må ændre flade, kant eller
   tekstfarve. */
.knap-sekundaer:active,
.knap-talende:active {
  background: color-mix(in oklab, var(--flade-haevet) 78%, var(--tekst));
}
.knap-fare:active { background: color-mix(in oklab, var(--roed) 84%, var(--tekst)); }
.knap-tekst:active { color: var(--tekst); }

/* **Gløden under primærknappen er væk med Løftelinjen.** DESIGN.md er ordret om netop
   denne: »LOG SÆT får aldrig dekorativ glød«, og den fredede regel om én massiv
   accenthandling er bevaret med visuel ændring — glød erstattes af fast linje og
   kontrast.

   Knappen behøver den heller ikke. Massiv lime mod den mørke flade måler 16,59:1 på
   bunden og 10,97:1 på et ark. Den er appens mest kontrastrige element i forvejen, og
   et skær under den tilføjede opmærksomhed til noget, der allerede havde al den, der
   fandtes. */
.knap-primaer { background: var(--knap-primaer-flade); color: var(--knap-primaer-tekst); }

/* Meget blødere (4. oktober 2026): sekundærknappen er en blød flade uden ramme. I lys
   tilstand bærer fladeskyggen adskillelsen, fordi hvidt på lysegråt ellers forsvinder. */
.knap-sekundaer {
  background: var(--flade-haevet);
  color: var(--tekst);
  box-shadow: var(--skygge-flade);
}

/* P4's trin 3 — vejen TIL bekræftelsen. Konturen spørger; den fyldte gør det. */
.knap-fare-kontur { background: none; color: var(--roed); border-color: var(--kant-fare-svag); }
/* Trykket lysner — også på konturen. Baggrunden er gennemsigtig, så lysningen bæres
   af tekst og kant med familiens 70 %-formel (samme som .knap-tekst:active). Afgjort
   af Fable 22. august, da samlerunden efterlod graden uden svar. */
.knap-fare-kontur:active {
  color: color-mix(in oklab, var(--roed) 70%, var(--tekst));
  border-color: color-mix(in oklab, var(--roed) 70%, var(--tekst));
}

/* P4's øverste trin. Rød står aldrig på en handling, der kan gøres om. */
.knap-fare { background: var(--roed); color: var(--flade-bund); }

/* Den talende knap er aldrig grå og stum — den siger, hvad der mangler. */
.knap-talende {
  background: var(--flade-haevet);
  color: var(--tekst-daempet);
  font-size: var(--stil-krop-2-px);
}

.knap-tekst {
  background: none;
  color: var(--tekst-daempet);
  text-transform: none;
  font-weight: 550;
  letter-spacing: 0;
  min-height: var(--maal-beroeringsmaal-min);
  padding: 0 var(--afstand-3);
}

/* ── Slukket ───────────────────────────────────────────────── */
/* En knap, der intet gør, ser sådan ud. Før stod en slukket primærknap limegrøn med pegefinger og sagde intet ved et
   tryk (UX-gennemgangen 19. oktober 2026). Den talende knap siger selv, hvad der mangler, og den optagne viser sine
   prikker; de to beholder deres udseende. */
.knap-basis:disabled:not(.knap-optaget),
.knap-basis[aria-disabled='true']:not(.knap-talende):not(.knap-optaget) {
  background: var(--flade-haevet);
  color: var(--tekst-svag);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}
.knap-basis.knap-tekst:disabled,
.knap-basis.knap-tekst[aria-disabled='true'] {
  background: none;
}
.knap-basis:disabled:active,
.knap-basis[aria-disabled='true']:not(.knap-talende):active {
  transform: none;
}

/* ── Felterne ──────────────────────────────────────────────── */

.felt {
  font: inherit;
  background: var(--flade-felt);
  border: 1px solid var(--kant-staerk);
  border-radius: var(--runding-lille);
  color: var(--tekst);
  min-height: var(--maal-beroeringsmaal-min);
  padding: 0 var(--afstand-4);
  width: 100%;
}

/* Flerlinjefeltet polstres hele vejen rundt. Enlinjefeltet centrerer sin tekst selv,
   så lodret polstring dér kun ville flytte tallet; en textarea starter i øverste
   venstre hjørne og har brug for luften. Det var centerplatformens ene ægte behov, og
   det løses her generisk i stedet for med en anden .felt. */
textarea.felt { padding: var(--afstand-4); }

/* Et datofelt fylder kolonnen som de andre felter. iOS giver det sin egen mindstebredde, og det gik ud over arkets
   højre kant (UX-gennemgangen 19. oktober 2026, J-F18). Uden systemets udseende følger det `width: 100%`; et tryk åbner
   stadig datovælgeren. */
input.felt[type='date'] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
}
input.felt[type='date']::-webkit-date-and-time-value { text-align: left; }

.felt-fejl { border-color: var(--roed); }

/* ══ 11 · REDUCERET BEVÆGELSE ══════════════════════════════════════════════ */

/* Systemets indstilling. */
@media (prefers-reduced-motion: reduce) {
  /* Ingen overgang må flytte eller skalere noget — heller ikke en, en komponent
     selv har fundet på. Farve, opacitet, kant og skygge overgår stadig, bare på
     indtoningstiden. */
  *,
  *::before,
  *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow, outline-color !important;
    transition-duration: var(--reduceret) !important;
    transition-timing-function: var(--kurve-ind) !important;
    transition-delay: 0ms !important;
  }

  /* ALT, der kom flyvende eller poppende, toner nu bare ind — også det, ingen har
     skrevet endnu.
     
     Reglen stod indtil 15. august 2026 som en LISTE af navngivne klasser, og den
     liste dækkede kun designsystemets egne. Appernes syv egne keyframes stod ikke
     på den: hvert skærmskift gled ind fra siden, synk-banneret gled ned ovenfra,
     dialogen skalerede, arket gled op, og toasten gled ind — også for en bruger,
     der udtrykkeligt havde bedt om mindre bevægelse. Kontakten virkede for de
     klasser, designsystemet selv ejede, og for ingen andre.
     
     Derfor er den nu universel. En vælger på `*` har specificitet 0,0,0, så hver
     eneste undtagelse herunder — de er alle klasser — vinder over den uanset
     rækkefølge. Det er ikke et held; det er grunden til, at den kan stå her. */
  *,
  *::before,
  *::after {
    animation-name: loeft-ind-toning !important;
    animation-duration: var(--reduceret) !important;
    animation-timing-function: var(--kurve-ind) !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
  }

  /* Et ark, der lukker, toner ud i stedet for at glide ned. */
  .ark-ned {
    animation-name: loeft-ud-toning !important;
    animation-duration: var(--reduceret) !important;
    animation-timing-function: var(--kurve-ind) !important;
  }

  /* En toast, der forsvinder, toner ud på reduceret tid i stedet for at blive
     tvunget ind i den universelle indtoningsregel ovenfor — ellers ville den
     blitze kort til usynlig og tilbage, lige før den fjernes. */
  .toast.ud-toning {
    animation-name: loeft-ud-toning !important;
    animation-duration: var(--reduceret) !important;
    animation-timing-function: var(--kurve-ind) !important;
  }

  /* Trappen slås fra — rækkerne kommer samlet i stedet for én ad gangen. */
  .trappe > * {
    animation-delay: 0ms !important;
  }

  /* Tryk-svaret må ikke skalere. Svaret bæres i stedet af flade og farve i selve
     komponenten — og det kommer stadig inden for svartiden. */
  .tryk-svar,
  .tryk-svar:active {
    transform: none !important;
    transition-duration: var(--reduceret) !important;
  }

  /* Konfetti vises slet ikke. */
  .konfetti {
    display: none !important;
  }

  /* Skelettets puls bliver stående: den flytter intet, den ændrer kun opacitet —
     og uden den ligner en skærm, der venter, en skærm, der er gået i stå. */
  .skelet {
    animation-name: loeft-skelet-puls !important;
    animation-duration: var(--skelet-cyklus) !important;
    animation-iteration-count: infinite !important;
  }
}

/* Kontakten inde i appen — den kan slås til, selv om systemet ikke beder om det. */
/* Ingen overgang må flytte eller skalere noget — heller ikke en, en komponent
   selv har fundet på. Farve, opacitet, kant og skygge overgår stadig, bare på
   indtoningstiden. */
[data-bevaegelse='reduceret'] *,
[data-bevaegelse='reduceret'] *::before,
[data-bevaegelse='reduceret'] *::after {
  transition-property: opacity, color, background-color, border-color, box-shadow, outline-color !important;
  transition-duration: var(--reduceret) !important;
  transition-timing-function: var(--kurve-ind) !important;
  transition-delay: 0ms !important;
}

/* ALT, der kom flyvende eller poppende, toner nu bare ind — også det, ingen har
   skrevet endnu.
   
   Reglen stod indtil 15. august 2026 som en LISTE af navngivne klasser, og den
   liste dækkede kun designsystemets egne. Appernes syv egne keyframes stod ikke
   på den: hvert skærmskift gled ind fra siden, synk-banneret gled ned ovenfra,
   dialogen skalerede, arket gled op, og toasten gled ind — også for en bruger,
   der udtrykkeligt havde bedt om mindre bevægelse. Kontakten virkede for de
   klasser, designsystemet selv ejede, og for ingen andre.
   
   Derfor er den nu universel. En vælger på `*` har specificitet 0,0,0, så hver
   eneste undtagelse herunder — de er alle klasser — vinder over den uanset
   rækkefølge. Det er ikke et held; det er grunden til, at den kan stå her. */
[data-bevaegelse='reduceret'] *,
[data-bevaegelse='reduceret'] *::before,
[data-bevaegelse='reduceret'] *::after {
  animation-name: loeft-ind-toning !important;
  animation-duration: var(--reduceret) !important;
  animation-timing-function: var(--kurve-ind) !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
}

/* Et ark, der lukker, toner ud i stedet for at glide ned. */
[data-bevaegelse='reduceret'] .ark-ned {
  animation-name: loeft-ud-toning !important;
  animation-duration: var(--reduceret) !important;
  animation-timing-function: var(--kurve-ind) !important;
}

/* En toast, der forsvinder, toner ud på reduceret tid i stedet for at blive
   tvunget ind i den universelle indtoningsregel ovenfor — ellers ville den
   blitze kort til usynlig og tilbage, lige før den fjernes. */
[data-bevaegelse='reduceret'] .toast.ud-toning {
  animation-name: loeft-ud-toning !important;
  animation-duration: var(--reduceret) !important;
  animation-timing-function: var(--kurve-ind) !important;
}

/* Trappen slås fra — rækkerne kommer samlet i stedet for én ad gangen. */
[data-bevaegelse='reduceret'] .trappe > * {
  animation-delay: 0ms !important;
}

/* Tryk-svaret må ikke skalere. Svaret bæres i stedet af flade og farve i selve
   komponenten — og det kommer stadig inden for svartiden. */
[data-bevaegelse='reduceret'] .tryk-svar,
[data-bevaegelse='reduceret'] .tryk-svar:active {
  transform: none !important;
  transition-duration: var(--reduceret) !important;
}

/* Konfetti vises slet ikke. */
[data-bevaegelse='reduceret'] .konfetti {
  display: none !important;
}

/* Skelettets puls bliver stående: den flytter intet, den ændrer kun opacitet —
   og uden den ligner en skærm, der venter, en skærm, der er gået i stå. */
[data-bevaegelse='reduceret'] .skelet {
  animation-name: loeft-skelet-puls !important;
  animation-duration: var(--skelet-cyklus) !important;
  animation-iteration-count: infinite !important;
}