/* ═══════════════════════════════════════════════════════════════════════════════════════════ PULSN — TYPOGRAFISK SKALA (audit-fund D3) Hører sammen med `assets/pulsn-theme.css`, men bor i sin EGEN fil, fordi tema-filen lige nu får samlet sit farve- og token-ordforråd (D2/D8). Typografi er alligevel en akse tema-motoren slet ikke har: `pulsn-theme.css` indeholder 0 `font-size`-erklæringer. ── DET MÅLTE PROBLEM (2026-07-29, ikke auditens tal — genmålt) ─────────────────────────── Union over personale/index.html, index.html, tilmelding/index.html, kvittering.html, fx-header.js og mails/*.html, kommentarer strippet først: 36 distinkte rene px-værdier + 15 ad hoc clamp()-udtryk + `0` = 52 (auditen skrev 50; forskellen er normaliseringen af `!important` og clamp) Under 17px ligger ATTEN trin — 8, 8.5, 9, 9.5 … 16.5 — præcis som auditen skrev. Ni af dem er HALVE pixels: 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5, 16.5, tilsammen 206 erklæringer. ── HVORFOR SKALAEN IKKE ER "7 TRIN" ────────────────────────────────────────────────────── Det er fristende at klemme 36 værdier ned i 7. Men to størrelser der tjener to formål er ikke gæld, og en skala der tvinger dem sammen er værre end de 36. Målt hyppighed viser at 10-16px hver især bærer rigtig vægt i en tæt admin-flade: 12px ×120 13px ×119 11px ×92 15px ×87 14px ×55 10px ×42 16px ×24 Det der DERIMOD ikke er formål, er de halve pixels. Ved 1× DPR kan 12px og 12.5px ikke skelnes; de er drift fra fem års finpudsning, ikke fem beslutninger. Skalaen her kollapser derfor de ni halve trin og LADER de hele stå. Derfor to ramper på ét fundament — og det er ikke en undtagelse, det er typografi: · 9-16px: LINEÆR rampe (±1px). Et geometrisk forhold er ubrugeligt hernede — 1.2 fra 13px springer 13 → 15.6 → 18.7 og springer altså 14px over, som bærer 55 erklæringer. · 18px og op: GEOMETRISK på `--fs-ratio`. Hernede er det omvendt: 1px-trin er usynlige, og forholdet er det der gør en overskrift til en overskrift. ── TO-TRE KNAPPER, IKKE 36 MAGISKE TAL ─────────────────────────────────────────────────── Alt nedenfor er afledt af `--fs-base`, `--fs-step` og `--fs-ratio`. Ejeren låser nødigt noget fast, så en flade skal kunne skrue på basen uden at nogen rører fjorten tal: målt dominerende basis: personale 12px · index.html 13px · fx-header 13px ── FÆLDEN: EN AFLEDT TOKEN RE-DERIVERES **IKKE** AF SIG SELV ───────────────────────────── En custom property får sin var()-substitution på det element hvor den ER ERKLÆRET, og arves derefter som en færdig værdi. Sætter man `--fs-base: 12px` på et element længere nede, ændrer `--fs-md` sig altså IKKE — den blev regnet ud på :root. (Samme fælde som `--bg`- aliaset på indlejrede temaer, målt tidligere.) Derfor står hele stigen på `:root, [data-fs-scope]`: en flade der vil have en anden basis, sætter `data-fs-scope` OG `--fs-base` på samme element, og så bliver stigen regnet forfra.
← hele portalen ét trin ned ── ⛔⛔ DENNE FIL ER IKKE ALENE OM SINE NAVNE — OG DEN SKAL INDLÆSES SIDST ──────────────── `assets/pulsn-theme.css` erklærer ELLEVE af de samme `--fs-*`. Det er en NØDVEJ for de fem flader, der ikke henter denne fil (fx-header.js · fx-header1.js · flexybox-header1.html · flexybox-header-test.html · personale/fremmoede-test.html) — ikke et alternativ. **DENNE FIL VINDER, OG KUN FORDI DEN INDLÆSES EFTER.** Begge blokke står på `:root` med samme specificitet (0,1,0), så rækkefølgen i er hele mekanismen. Bytter nogen om på de to -linjer, skifter husets skriftstørrelser lydløst — der er ingen fejl at se. `tests/design_system_kontrakt_test.php` §B måler rækkefølgen på hver flade, der henter begge. MÅLT 28-08-2026 (`docs/design/kontrol.html`, afsnit ②): efter oprydningen er de to enige om otte af elleve trin. TRE er bevidst fastholdt på nødvejens tal, fordi flader, der ikke henter denne fil, skriver netop de tal ind som fallback: --fs-3xs nødvej 10px / sand 9px --fs-lg nødvej 15px / sand 14px --fs-4xl nødvej 30px / sand 21,6px Listen står i tema-filen med sin lukkebetingelse, og §C i prøven holder den — **den må kun blive kortere.** ⚠ `--fs-5xl` … `--fs-8xl` findes KUN her. En flade uden denne fil, der bruger dem, får en ugyldig erklæring, og teksten arver tavst (målt: 13px i stedet for 31,1px). ── FARVE ──────────────────────────────────────────────────────────────────────────────── Der er ingen farver i denne fil, og der kommer ingen. Brandfarven er ikke valgt endnu. ═══════════════════════════════════════════════════════════════════════════════════════════ */ :root, [data-fs-scope] { /* ─── KNAPPERNE ───────────────────────────────────────────────────────────────────────── */ /* ⭐ rem, IKKE px (27-08-2026). Hele stigen er afledt af disse to, så det er de eneste to linjer, der skal skifte enhed — resten følger med af sig selv. Det er den eneste grund til, at ændringen overhovedet er til at lave. MÅLT FØR: 848 px-erklæringer mod 16 i rem. Et menneske, der har skruet skriften op i sin browser — fordi synet er dårligt, eller fordi telefonen holdes på armslængde — fik INGEN forskel på PULSN. Det er WCAG 1.4.4. ⚠ 0.8125rem ER 13px ved standard-indstillingen. Ingen ser en forskel i dag; forskellen opstår kun hos den, der selv har bedt om den. */ --fs-base: 0.8125rem; /* 13px — brødtekst; målt som den hyppigste på tværs af fladerne */ --fs-step: 0.0625rem; /* 1px — UI-rampens tilvækst, lineær; se noten ovenfor */ --fs-ratio: 1.2; /* display-rampens forhold (major second); 1.25 gør springene grovere */ /* ─── UI-RAMPE: lineær, 9-16px ved standard-basis ─────────────────────────────────────── */ --fs-3xs: calc(var(--fs-base) - 4 * var(--fs-step)); /* 9px — mikro-labels, tabelnoter */ --fs-2xs: calc(var(--fs-base) - 3 * var(--fs-step)); /* 10px — badges, chips */ --fs-xs: calc(var(--fs-base) - 2 * var(--fs-step)); /* 11px — sekundær metatekst */ --fs-sm: calc(var(--fs-base) - 1 * var(--fs-step)); /* 12px — tæt tabeltekst */ --fs-md: var(--fs-base); /* 13px — BRØDTEKST */ --fs-lg: calc(var(--fs-base) + 1 * var(--fs-step)); /* 14px — fremhævet brødtekst */ --fs-xl: calc(var(--fs-base) + 2 * var(--fs-step)); /* 15px — indledning, store knapper */ /* ⛔ FELTETS EGET TRIN — og hele pointen er, at GULVET BOR I VÆRDIEN, ikke i en regel. Første forsøg (27-08) var en konkurrerende regel: @media (pointer: coarse) { input, select, textarea { font-size: max(var(--fs-xl),16px) } } Den er (0,0,1) i specificitet. De otte regler, den blev skrevet imod, er `.field input` (0,1,1), `.bf select` (0,1,1) og `.ov-w-tinput` (0,1,0). **Den mere specifikke vinder, uanset rækkefølge og uanset `@media`.** Værdien var rigtig; reglen nåede aldrig frem. Jeg meldte den som løst. Den var inert. En rettelse, der ikke retter, er værre end ingen, fordi den bliver krydset af. ⭐ SVARET ER IKKE `!important` — det ville starte en specificitets-krig i en fil, hvor der allerede er 32 af dem. Svaret er at flytte gulvet ind i TOKENET: en regel, der skriver `font-size: var(--fs-felt)`, får gulvet med sig, hvor specifik den end er. **Ethvert `input`, `select` og `textarea` skal bruge `--fs-felt`.** */ --fs-felt: var(--fs-xl); --fs-2xl: calc(var(--fs-base) + 3 * var(--fs-step)); /* 16px — mindste overskrift */ /* ─── DISPLAY-RAMPE: geometrisk. Kæden er bevidst — CSS' calc() har ingen pow(). ───────── */ --fs-display-base: calc(var(--fs-base) + 5 * var(--fs-step)); /* 18px — hvor rampen skifter */ --fs-3xl: var(--fs-display-base); /* 18.0px */ --fs-4xl: calc(var(--fs-3xl) * var(--fs-ratio)); /* 21.6px */ --fs-5xl: calc(var(--fs-4xl) * var(--fs-ratio)); /* 25.9px */ --fs-6xl: calc(var(--fs-5xl) * var(--fs-ratio)); /* 31.1px */ --fs-7xl: calc(var(--fs-6xl) * var(--fs-ratio)); /* 37.3px */ --fs-8xl: calc(var(--fs-7xl) * var(--fs-ratio)); /* 44.8px */ /* ─── FLYDENDE DISPLAY: erstatter de 15 håndskrevne clamp()-udtryk ───────────────────── Hvert clamp henter sit gulv og loft fra stigen ovenfor, så en ændret basis eller ratio flytter dem med. Kun vw-tallet er sit eget — det ER designbeslutningen: hvor hurtigt skriften vokser med skærmen. */ --fs-fluid-1: clamp(var(--fs-4xl), 5vw, var(--fs-6xl)); /* 21.6 → 31.1 */ --fs-fluid-2: clamp(var(--fs-5xl), 7vw, var(--fs-7xl)); /* 25.9 → 37.3 */ --fs-fluid-3: clamp(var(--fs-6xl), 9vw, var(--fs-8xl)); /* 31.1 → 44.8 */ --fs-fluid-hero: clamp(var(--fs-7xl), 14vw, calc(var(--fs-8xl) * var(--fs-ratio) * var(--fs-ratio) * var(--fs-ratio))); /* 37.3 → 77.4 */ /* ─── LINJEHØJDE ────────────────────────────────────────────────────────────────────── Målt: 23 distinkte værdier over 230 erklæringer. 1.5/1.55/1.6/1.65/1.7 er 162 af dem — fem tal for ét formål. Her er de fem trin der faktisk skiller sig ad. Enhedsløse, så de skalerer med skriftstørrelsen; en linjehøjde i px knækker så snart basen ændres. */ --lh-flat: 1; /* ikoner, tal-badges — tekst der IKKE må ombrydes */ --lh-tight: 1.15; /* store overskrifter */ --lh-snug: 1.3; /* små overskrifter, knapper */ --lh-normal: 1.5; /* UI-tekst, tabeller */ --lh-relaxed: 1.65; /* løbende brødtekst */ /* ─── KNIBNING ──────────────────────────────────────────────────────────────────────── Målt: 37 distinkte værdier — og en pæn del af dem er samme tal stavet to gange (`.1em` ×15 og `0.1em` ×7 er den samme knibning). En enhed × et heltal er nok. */ --ls-unit: .04em; --ls-tight: calc(var(--ls-unit) * -0.5); /* -.02em — store display-linjer strammes */ --ls-none: 0; --ls-1: var(--ls-unit); /* .04em */ --ls-2: calc(var(--ls-unit) * 2); /* .08em */ --ls-3: calc(var(--ls-unit) * 3); /* .12em — VERSALER, den hyppigste */ --ls-5: calc(var(--ls-unit) * 5); /* .20em — spærret etiket */ } /* ═══════════════════════════════════════════════════════════════════════════════════════════ FELTER ZOOMER IKKE PÅ EN TELEFON ═══════════════════════════════════════════════════════════════════════════════════════════ ⛔ iOS Safari ZOOMER hele siden ind, når man rører et felt med skrift under 16px. Ikke som en fejl — som en hjælpsomhed. Siden hopper, og man skal selv zoome ud igen. Midt i en indmeldelse. MÅLT 27-08-2026: otte sådanne regler i huset — portalens `.field input` (15px), `.bf select` (14px), `.ov-w-tinput` (13px), medlemsfladens `.po-field input` (15px), `select, textarea` (14px) og afdelings-vælgerne (13px). Altså både i portalen og midt i tilmeldingen. ⚠ KUN PÅ BERØRINGSSKÆRME. `pointer: coarse` er en finger, `fine` er en mus. En pc har ingen zoom-adfærd at undgå, så dér ville 16px bare gøre formularerne løsere uden at løse noget. Det er dét, spørgsmålet «mobil, tablet ELLER pc» handler om: den samme regel skal ikke nødvendigvis gælde alle tre. ⚠ `max()` og ikke `16px`: gulvet må løfte, men aldrig sænke. Har brugeren skruet op, så `--fs-xl` allerede er 19px, skal feltet BLIVE 19px. Et fast tal ville tage indstillingen fra netop den, der bad om den. ⛔⛔ **GULVET DÆKKER IKKE DE OTTE REGLER, DER FREMKALDTE DET** (skrevet ned 28-08-2026). Selektoren `input, select, textarea` vejer (0,0,1). De otte regler, noten ovenfor tæller, er klasse-scopede — `.field input` vejer (0,1,1) og VINDER. Reglen her er altså et gulv for de felter, INGEN har sat en størrelse på; den ophæver ikke dem, der ER sat. ⚠ `!important` ville lukke hullet og åbne et værre: den ville også trække et bevidst 18px-felt NED til 16px, fordi `max()` kun kan løfte i forhold til `--fs-xl` — ikke i forhold til det, forfatteren skrev. Derfor står den ikke her. ⇒ Rettelsen hører hos de otte regler (brug `--fs-2xl` eller større dér), ikke i denne blok. Vejledningen i `pulsn-theme.css`, punkt ⑧, siger det samme til den, der skriver en ny. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* Paa en beroeringsskaerm loeftes selve TOKENET — saa foelger hver eneste felt-regel med, uden at nogen skal vinde en kaskade. `max()` og ikke `16px`: gulvet maa loefte, aldrig saenke. Har brugeren skruet op, saa `--fs-xl` allerede er 19px, skal feltet BLIVE 19px. */ @media (pointer: coarse) { :root, [data-fs-scope] { --fs-felt: max(var(--fs-xl), 16px); } } /* Nødvej for felter, ingen har rørt endnu: reglen her taber stadig mod en klasse-selektor, men den koster intet og hjælper de felter, der IKKE har en egen regel. Den er ikke rettelsen — rettelsen er `--fs-felt` på hver felt-regel. */ @media (pointer: coarse) { input, select, textarea { font-size: var(--fs-felt); } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ BRUGSKLASSER — så en flade kan flytte ét element ad gangen i stedet for i ét stort ryk. Skralden (`tests/design_literal_ratchet_test.php`) måler netop den bevægelse. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .t-3xs { font-size: var(--fs-3xs); } .t-2xs { font-size: var(--fs-2xs); } .t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); } .t-md { font-size: var(--fs-md); } .t-lg { font-size: var(--fs-lg); } .t-xl { font-size: var(--fs-xl); } .t-2xl { font-size: var(--fs-2xl); } .t-3xl { font-size: var(--fs-3xl); } .t-4xl { font-size: var(--fs-4xl); } .t-5xl { font-size: var(--fs-5xl); } .t-6xl { font-size: var(--fs-6xl); } .t-7xl { font-size: var(--fs-7xl); } .t-8xl { font-size: var(--fs-8xl); } /* Titel-trin. D11 fandt 149

og nul

, fordi overskriftsniveauet blev valgt efter STØRRELSE. Med de her kan man vælge niveauet efter struktur og udtrykket bagefter. */ .title-1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .title-2 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .title-3 { font-size: var(--fs-3xl); line-height: var(--lh-snug); } .title-4 { font-size: var(--fs-2xl); line-height: var(--lh-snug); } /* Etiketten over et felt / en kolonne: versaler, spærret, lille. 32 forskellige chip-, badge- og tab-klasser (D5) skrev hver sin variant af netop denne kombination. */ .t-label { font-size: var(--fs-3xs); line-height: var(--lh-snug); letter-spacing: var(--ls-3); text-transform: uppercase; }