/* ============================================================================= generator.css — det, generatoren har brug for, og system.css ikke daekker. Reglen for denne fil: den maa kun indeholde komponenter, designsystemet ikke allerede har, og den maa kun bruge system.css' egne poletter. Ingen nye farver, ingen nye skriftgrader ud af den blaa luft. Alt, der kan skrives med .panel, .etiket, .v, .maerke, .raekker eller .sektion, staar IKKE her. Skrevet 21. aug 2026 sammen med tools/skabelon/. ========================================================================== */ /* --- 0. Global dækflade og navigation ------------------------------------ Dækket svæver ikke længere frit på den rå bund, men hviler som et solidt kridtpanel (--panel) med 1px afgrænsning forneden og stanset lyskant. Aktivt menupunkt forankres med 2px signalgul accent (--accent). */ .daek { background: var(--panel); border-bottom: 1px solid var(--linje); box-shadow: inset 0 1px 0 var(--stans); } .daek__nav a[aria-current]::after { background: var(--accent); height: 2px; } .daek__nav a:hover::after { background: var(--accent); height: 2px; } /* --- 1. AABNINGEN (JPK's tillaeg, 24. aug 2026) --------------------------- Titel + yderpunkter + EU-fundet. Budgettet: op til 1,5 skaermhoejde ved 1440x900. Foerste skaerm skal goere praecis tre ting: sige hvad samlingen er, vise mindst én maskine stor nok til at lede blikket, og goere det tydeligt at der er mere nedenunder. Fladen er stadig systemets graa bund (21.08.2026's regel: graa bund, hvide paneler flyder ovenpaa) — kun kataloget faar sin egen flade, se afsnit 6. */ .aabning { display: flex; flex-direction: column; } .aabning > section + section { margin-top: var(--r8); } /* --- 2. Filterlagene ------------------------------------------------------ Ét lag pr. facet. display:contents, saa laget ikke selv bliver en gittercelle - et skjult kort maa ikke efterlade et tomt felt i gitteret. Selve reglerne genereres pr. side af tools/skabelon/katalog.mjs. */ .lag { display: contents; } .lag[hidden] { display: none; } /* FILTERPANELET, STRAMMET 27. aug 2026 (JPK: "filteret skal ogsaa have en opstramning"). Den gamle regel var `display:flex;flex-wrap:wrap`, saa hver gruppe begyndte dér, hvor den forrige tilfaeldigvis slap. Maalt i browseren ved 1440: gruppeetiketterne stod paa TRE forskellige x (44, 648, 887 px), og parringen "vaegtklasse + IP" og "producentland + CE" var ikke en beslutning, men et resultat af, hvor lang den foregaaende gruppe var. Panelet saa tilfaeldigt ud, fordi det VAR tilfaeldigt. Nu: to spalter - etiketterne i én, vaerdierne i én. Maalt efter: ét x for alle fem etiketter (44) og ét for alle fem vaerdiraekker (174). Det koster 45 px hoejde (267 -> 312) og giver panelet den ene lodrette linje, et instrument skal have. `display:contents` paa fieldsettet lader legend og .filtre blive gitterets egne felter, saa hverken markup eller fieldset/legend-semantikken aendres. */ /* Katalogets egne facetter tegnes af TYPESKILT-afsnittet nederst i denne fil (afsnit 20). Den gamle to-spaltede panelform gik ud med salene 31. aug 2026: facetterne er nu stansede felter i et 12-kolonners gitter, ikke en liste med etiketspalte. MEN `.facet` ER IKKE KATALOGETS ALENE. Grundreglen bliver derfor staaende praecis som foer - det er den, sammenligningssidens vaelger ogsaa regner med - og katalogets nye form er scopet under `.facetter__net` i afsnit 20. Uden den opdeling fik sammenligningssidens vaelger 24 px polstring og to haarstreger, den aldrig har bedt om. Samme fejl som `.kort`, fanget samme dag. (`.sammenligning-vaelger` selv er en fjernet, doed klasse - spor/doedcss, 1. sep 2026 - markeringen "facet sammenligning-vaelger" i markup findes ikke laengere.) */ .facet { border: 0; margin: 0; padding: 0; min-width: 0; display: contents; } .facet legend { padding: 0; margin: 0; } /* --- L44: sorteringskontrollen og tommelindekset ------------------------- Begge er ren HTML. Sorteringen er radioknapper, som CSS'ens :has() laeser (reglerne genereres i katalog.mjs' hovedStil); indekset er ankre til salenes egne id'er. Ingen af dem roerer JavaScript, og uden :has()-stoette staar kortene i vaegtorden - samme fejlvej som filtrene. Chipformen er den SAMME som .filtre (system.css afsnit 13), ikke en ny: to betjeningsflader, der goer beslaegtede ting, skal ikke se ud som to systemer. Kun tilstanden er anderledes - en radio er et enten-eller. */ /* Sorteringskontrollen tegnes nu af TYPESKILT-afsnittet (§20) som en stanset raekke i resultathovedet. Den er stadig RADIOKNAPPER og ikke en kan ikke drive `order` uden JavaScript, og sorteringen skal virke uden - samme loefte som filtrene. TOMMELINDEKSET ER FJERNET sammen med salene (31. aug 2026). Det sprang til `#h-`, og de overskrifter findes ikke mere; vaegtklassen er en facet. Et indeks over fire ankre, der ikke laengere har maal, ville vaere fire doede links - linktjek.mjs ville fange dem, og laeseren ville falde i dem foerst. */ /* Her stod fire regler for `.filtre`s :target- og :checked-tilstande (accent- bund, hullets stiplede :target-udgave). FJERNET 3. sep 2026 (spor/testvend): `.filtre` er den chip-baserede facetform, kat3 gjorde doed i system.css (0 forekomster i dist/) - facetterne er raekker (`.rk`) nu, og `.rk--uoplyst` (afsnit 20f) baerer samme haarde begraensning 5-sprog i den nye form. */ /* Soegefeltet er skjult, indtil JavaScript taender det: et felt, der intet goer, er en betjeningsflade uden funktion. Filtrene er der uanset. .sog saetter display:flex i system.css og slaar derfor [hidden]. */ .sog[hidden], .styr[hidden], .tomt[hidden] { display: none; } .tomt { margin-top: var(--r5); padding: var(--r4) 20px; background: var(--tom); border: 1px dashed var(--hegn); border-radius: var(--hjoerne); font-size: var(--fs-lille); color: var(--blaek2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } /* L77: her stod `.tomt__ryd{font-size:var(--fs-raekke)}`, sat da knappen var `.videre` (15 px) og nul-tilstandens udgave skulle vaere en anelse mindre. Med primitiven er 12 px knappens grad overalt, og en enkelt undtagelse ville goere nul-tilstandens knap til den eneste i sitet med sin egen stoerrelse. Klassen bliver staaende i markup'en - tests/dele/30.9 kraever den ved siden af `data-ryd` - den styrer bare ikke laengere noget. */ /* --- 2b. TAELLERNES OMFANG (P0, 28. aug 2026) ----------------------------- Katalogets taellere - 30 ved facetterne, 4 i tommelindekset, 4 ved salene - er regnet ved BYGGETIDEN over hele kataloget. Filtreringen sker i CSS, og CSS kan taende og slukke kort, men ikke taelle dem. Uden JavaScript stod tallene derfor uaendret ved siden af et udvalg, de ikke laengere beskrev. Maalt paa `#f-land-tyskland` ved 1440 foer rettelsen: 1 synligt kort mod 37 taellere, hvis tal ikke passede paa det viste. Loesningen er ikke at skjule tallene - de er nyttige, og det er dem, der forhindrer en blindgyde ("0" ved en facet betyder: klik ikke her). Den er at lade dem SIGE, hvad de taeller, i praecis den tilstand hvor det ellers ville vaere tvetydigt: "18" bliver "18 af 77". To betingelser, begge noedvendige: - `:has(.facetter input:checked/:target)` - der ER et filter i brug. I hvile beskriver taellerne hele kataloget OG det viste udvalg paa én gang, og saa er efterstillingen stoej. - `:not([data-levende])` - JavaScript koerer IKKE. Naar katalog.js er i drift, regner den taellerne om ved hvert klik, og saa er de levende og skal ikke baere et forbehold. Flaget saettes af katalog.js selv, saa forbeholdet forsvinder i samme oejeblik, det bliver usandt. Rangordenen: efterstillingen er sekundaer tekst i normal vaegt, saa selve tallet stadig er det, oejet lander paa. */ [data-sal][hidden], [data-omfang][hidden], [data-omfang-note][hidden], [data-tomt-grund][hidden] { display: none; } .taeller-omfang { font-weight: 400; letter-spacing: 0; color: var(--blaek3); } /* .facet-tom saettes af assets/katalog.js naar en facets taeller naar 0, saa valg der leder til en tom tilstand fremstaar tydeligt daempede. */ .facet-tom { opacity: 0.38; } .facet-omfang { margin-top: var(--r4); max-width: 86ch; color: var(--blaek2); } /* Betingelsen "der ER filtreret" GENERERES nu pr. side i katalog.mjs' hovedStil (§5e) og stod her indtil 31. aug 2026 som én bred regel. Den kunne ikke blive: status-facetten har en STANDARDTILSTAND (L56 punkt 5 - udgaaede skjult), saa to af dens felter er krydset af i hvile. Reglen `:has(.facetter input:checked)` ville derfor vaere sand med det samme, og hvert eneste omfangsmaerke ("af 77") ville staa paa siden, FOER laeseren havde roert noget - praecis den stoej, maerkerne blev indfoert for at undgaa. Den genererede udgave spoerger i stedet pr. facet, og for status spoerger den, om markeringen AFVIGER fra standarden. */ /* --- 3. Katalogets og sektionernes tekstled ------------------------------- */ .katalog-hoved { background: var(--panel); border: 1px solid var(--linje); border-left: 3px solid var(--accent); border-radius: var(--hjoerne); padding: var(--r4) var(--r5); box-shadow: inset 0 1px 0 var(--stans); margin-top: var(--r4); display: flex; flex-direction: column; gap: var(--r2h); } .sektion-note { margin-top: var(--r3); max-width: 86ch; } .sektion .gitter { margin-top: var(--r5); } /* --- 3c. HER STOD FORSIDENS AFSLUTNINGSBLOKS knap-wrapper - én margin-top-regel (spor/indgang, 26. aug 2026). FJERNET 2. sep 2026 med sin sidste bruger: sammenligningssidens éne "Vaelg robotter"-knap (spor/saml3, JPK: "Choose robot knappen skal vaek"). Klassenavnet staar ordret i commit-beskeden og i git-historikken, ikke her: sporets acceptkriterium taeller navnet i DENNE fil og kan ikke se forskel paa en kommentar og en regel. Maalt foer fjernelsen, saa dette ikke blev en regression paa en anden side: klassen stod ét sted i skabelonerne, i tools/skabelon/ sammenligning.mjs. Forsiden, som gav reglen sit navn, holdt op med at bruge den (tests/dele/39-rod.mjs:109 laaser netop, at forsiden ikke laengere baerer .videre--stille), saa sammenligningssiden var den eneste tilbage. Uden denne sletning var reglen blevet doed CSS nr. 67 (Aa102). */ /* VAEGTKLASSE-SALENE ER FJERNET 31. aug 2026 (spor/katalog, L54/L57). Reglerne for `.sal`, `.sal__nr`, `.sal__titel`, `.sal__antal`, `.sal__forklaring` og `.gitter + .sal` er gaaet med dem: der findes ikke længere et element paa nogen side, de kan ramme. Hvorfor salene faldt, staar i tools/skabelon/katalog.mjs' filhoved. Kort: L56 punkt 3 gjorde ALFABETISK til standardsortering, og en gruppering efter vaegt ville tvinge vaegtordenen igennem foerst, uanset hvad laeseren vaelger. Vaegtklassen er nu en facet med fire afkrydsningsfelter. */ .tegnforklaring { background: var(--panel); border: 1px solid var(--linje); border-radius: var(--hjoerne); padding: var(--r5); margin-top: var(--r7); } .tegnforklaring .sektion-hoved { padding-bottom: var(--r3); margin-bottom: var(--r3); border-bottom: 1px solid var(--linje); } /* LAESENOEGLENS OVERSKRIFT HAR ÉN GRAD PAA HELE SITET (spor/typeskala, 9. sep 2026). Her stod --fs-display-lille (27px), og system.css havde en ANDEN regel, der satte netop den samme overskrift til --fs-h3 (19px) paa Om os. Samme komponent, to grader - og fordi begge overskriver .t-h2, gav klassen .t-h2 tre forskellige grader paa sitet: 34 (token), 27 (denne) og 19 (Om os). Maalt i browseren ved 1440 px. HVORFOR 19 OG IKKE 34: overskriften er en PANELETIKET, ikke en sektionsoverskrift. Paa Om os ligger noeglen inde i sektionen "The four states", hvis egen overskrift er 34px, og prosaen lige over den peger ned paa noeglen ("The key below is the catalogue's own"). Afproevet i browseren med 34px: etiketten er versaler og vaegt 700, saa den kom til at raabe hoejere end den sektionsoverskrift, den hoerer under - en omvendt orden. Skudt og set, ikke skoennet. HVAD DET AENDRER I FORHOLD TIL 7. SEP: kommentaren ved .aabning__flok laengere nede i denne fil kaldte denne overskrift en "aegte sektionsoverskrift" og satte den lig .plade__titel. Den dom staar ved magt for .plade__titel, men ikke for denne: .plade__titel er typeskiltets egen titel, mens denne er etiketten paa et opslagspanel i bunden af siden. --fs-h3 er skalaens trin for "underoverskrifter og fremhaevede led", og det er rollen her. DEN SIDSTE LINJE ER RETTET 9. sep 2026 (spor/h1-noegle). side.mjs' tegnforklaring() satte class="t-h2" paa overskriften, og saa laenge den klasse stod der, kunne .t-h2 ikke give én grad, uanset hvad CSS gjorde - klassen lovede en sektionsgrad, og elementet er en etiket. Overskriften baerer nu sin egen komponentklasse, .tegnforklaring__navn, praecis som sammenligningssidens udgave allerede goer med .saml-noegle__navn. Elementet er stadig en

- aria-labelledby peger paa den. Maalt i browseren ved 1440 px: .t-h2 gaar fra to grader (34 og 19) til én (34). Selektoren er samtidig flyttet fra en efterkommerkaede til klassen selv; den valgte de samme elementer, men laante sin identitet fra et element og en beholder i stedet for at have sin egen. */ .tegnforklaring__navn { font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase; letter-spacing: -0.014em; margin: 0; } .tegnforklaring .raekker { margin-top: var(--r3); max-width: 96ch; } .tegnforklaring .raekke dt { display: flex; align-items: center; min-height: 34px; } .kort-legende { margin-top: var(--r4); color: var(--stoev-blaek); } /* --- 4. Vaerdier, system.css ikke har en form til ------------------------- */ /* Tekstvaerdier (compute, monteringsinterface). Fed og stor hoerer til TAL; en saetning sat som et tal laeses som et tal. L80: reglen pegede paa --sans og faar nu --mono (Saira), fordi UI og data ER Saira. VAER OPMAERKSOM PAA, HVAD DER SKER HER: forskellen paa denne regel og et tal var indtil i dag ogsaa en SKRIFT-forskel - men kun ved et uheld, fordi --sans faldt igennem til Segoe UI. Den utilsigtede forskel forsvinder. Skellet baeres nu af vaegt (500 mod tallenes 700) og af display:inline, hvilket er det, reglen hele tiden PAASTOD at goere. */ .v-tekst { font-family: var(--mono); font-weight: 500; color: var(--blaek); display: inline; line-height: 1.5; } /* Advarslen staar VED SIDEN AF vaerdien, aldrig i en fodnote (regel 9). */ .advarsel { display: flex; flex-direction: column; gap: 3px; margin-top: var(--r2); padding: var(--r2h) var(--r3) var(--r2h); background: var(--panel-ro); border-left: 2px solid var(--hegn); border-radius: 0 var(--hjoerne) var(--hjoerne) 0; font-size: var(--fs-raekke); line-height: 1.5; color: var(--blaek2); /* 80ch stod her indtil 7. sep 2026 (spor/imp-robot, typeset). Maalet er 45-75ch, og resten af fladen bruger --maal (68ch); 80ch var en enkeltvaerdi ved siden af skalaen, ikke et valg nogen havde truffet. Forbeholdene er sidens taetteste prosa - 30 blokke paa microrobotech-movenew-p2 - saa deres maal er ikke en detalje. */ max-width: var(--maal); } .advarsel, .advarsel * { color: var(--blaek2); } .advarsel .advarsel-navn { color: var(--blaek); } /* D18: blokken har to slags, saa laeseren, der foelger et maerke ned i feltlisten, kan se hvilken slags tekst der venter. -------------------------------------------------------------------------- GYLDIGHED baerer --hegn i venstrekanten: SAMME polet som marken paa feltnavnet lige ovenover. De to er ét tegn paa to skalaer — et lille i etiketten, et stort i blokken — ikke to forskellige signaler. UDDYBNING traeder tilbage: --linje (den rent dekorative haarstreg) og ingen flade. Den forsvinder ikke, men den holder op med at ligne en advarsel. Foer D18 saa de to ens ud, og alle 1.158 blokke pr. sprog hed "Advarsel" — ogsaa de 303, der ikke advarer om noget. */ /* KANTEN BAERER TILSTANDEN (spor/imp-robot, 7. sep 2026, colorize). --hegn stod her og maalte 2,14 : 1 paa bunden og 2,47 : 1 paa panelet - under WCAG 1.4.11's 3,0. Sammen med en flade paa 1,00 : 1 betoed det, at et forbehold - sidens maerke for, at et tal er TOLKET og ikke aflaest - ikke havde ét eneste signal over kravet. --hegn-baerende er palettens token for netop dette: en kant, der er den ENESTE baerer af en tilstand. Maalt 3,43 : 1 for KANTEN paa bunden og 3,96 : 1 paa panelet. Samme dom som --tom's chip fik af spor/tomstat. .advarsel--uddybning nedenfor beholder --linje med vilje: den uddyber, den advarer ikke, og D18's hele pointe er, at de to IKKE maa ligne hinanden. */ .advarsel--gyldighed { border-left-color: var(--hegn-baerende); } .advarsel--uddybning { border-left-color: var(--linje); background: transparent; padding-left: var(--r2h); } .advarsel--uddybning .advarsel-navn { color: var(--blaek2); } .feltnote { margin-top: var(--r1h); font-size: var(--fs-raekke); line-height: 1.5; color: var(--blaek3); /* 80ch, som .advarsel ovenfor. Maalt til 79,3ch paa CE-raekkens EU-note - den sidste blok paa fladen over 75. Nu paa skalaens --maal (68ch). */ max-width: var(--maal); } .varianter { margin-top: var(--r2); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; } .varianter dt { width: 100%; } .varianter dd { font-family: var(--mono); font-size: var(--fs-mikro); color: var(--blaek2); margin: 0; } .varianter dd b { color: var(--blaek); font-weight: 700; } /* .feltvaerdi (fund/arkiv/2026-08/FUND-detalje.md, opgave 4b): manglede helt - robot.mjs' feltKrop() og stribe() pakker hver vaerdi ind i den, og kildemaerket sidder som soeskende til figuren, ikke som barn af den. Uden regel her springer .stribe .krop's hoejdemaal (afsnit 10 ovenfor, som maaler paa `.krop > .v`) over enhver celle, hvor vaerdien har et kildemaerke - cellerne ville springe i hoejde alt efter, om tallet havde et maerke eller ej. */ .feltvaerdi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.34em; min-width: 0; } .feltvaerdi > .forbehold { align-self: center; } .stribe .krop > .feltvaerdi { min-height: 30px; align-items: center; flex-wrap: nowrap; } /* robot.mjs' EGEN varianter() (feltKrop, forskellig fra flet dt/dd-formen ovenfor) pakker hvert par i sin egen kasse. Mere specifik end ".varianter dt/dd" ovenfor (tre klasser slaar to), saa de to sameksisterer uden at det ene bryder det andet. CHIPPEN ER BLEVET EN TAP. Her stod samme flade+ramme+radius som `.variantnavn` og `.maerke` — 57 af dem paa Go2-siden alene — og de laeste som et gitter af knapper. Men i MODSAETNING til `.variantnavn` laver kassen her et rigtigt stykke arbejde: den holder navn og vaerdi sammen, saa "AIR ca. 7 kg" ikke smelter ind i "PRO ca. 8 kg". Formen kan altsaa ikke bare fjernes, kun skiftes ud med den mindst mulige, der stadig grupperer: én 1 px streg til venstre. Aaben paa tre sider, ingen flade, ingen radius — den kan ikke laeses som en trykflade, og den er stadig et utvetydigt skel mellem to par. */ .varianter .variant { display: flex; align-items: baseline; gap: 7px; border: 0; border-left: 1px solid var(--linje); border-radius: 0; background: none; padding: var(--r1) var(--r2) var(--r1) var(--r3); } .varianter .variant dt { width: auto; font-family: var(--mono); font-size: var(--fs-etiket); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blaek3); } .varianter .variant dd { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-mikro); font-weight: 700; color: var(--blaek); margin: 0; } .varianter .variant--navn { background: none; border: 0; padding-left: 0; } .varianter .variant--navn dt { color: var(--blaek2); } /* --- 5. (fjernet 26.08.2026: EU/CE-maerket paa katalogkortet - JPK bad om det vaek fra kortene. ce_oplyst-feltet, forsidens CE-taelling og robotsidens egen EU-blok staar uaendret, se robot.mjs og forside.mjs.) */ /* --- 6. Kortet: striben ---------------------------------------------------- 24.08.2026: den kompakte stribe er to spalter ved ALLE bredder og ejes nu helt af system.css (spalter, kantlinjer, femte celle over hele raekken). De tidligere 3+2-regler her er fjernet - ved ~100 px pr. spalte klippede NYTTELAST og DRIFTSTID paa hvert kort ved 1440 px (maalt: 284 fund). */ /* Navnets ::after daekker hele kortet, saa kortet er ét klikmaal. Kildemaerket er et andet maal og skal ligge OVEN PAA det - ellers er bogstavet et link, ingen kan ramme. */ .kort .kildemaerke { position: relative; z-index: 2; } .kort .stribe { margin-top: var(--r0); } /* FORSOEGT OG FORKASTET (spor/instrument2, punkt 2, 26. aug 2026): en kortere billedboks paa kortet (16/9 i stedet for systemets 16/10, scopet til .kort) blev proevet for at trimme mere hoejde ud. Maalt med maalevaerktoej/maal.mjs: beskaaretOver25pct gik fra 0 til 13 (1440px) og 0 til 3 (390px) - billedfeltet er derfor URORT. Taetheden er hentet fra gitter/gap/typografi i stedet, ikke fra en aendret billedboks. */ /* Strammet 12px -> 6px, samme INSTRUMENT-taethedsspor som .gitter + .sal ovenfor - kortets egen bundluft, ikke afstanden mellem kort. (r2=8px var for meget sammen med de oevrige stramninger paa dette kort; 6px er et direkte tal, ikke skalaens naeste trin (r1=4), fordi 4px maalt for taet paa .kort's egen border-radius og fik badge-raekken til at virke klemt.) */ .kort-krop { padding-bottom: var(--r1); } /* Anvendelsesmaerkerne paa KORTET (ikke robotsidens egen .robot-navn .maerker, som er uroert): samme stramning som resten af kortet - padding 4/10/5 -> 2/7/3, font 12,5px -> 12px. Scopet til .kort saa robotsidens egen badge-raekke (stoerre, sidens hovedsag der) IKKE rammes. */ .kort .maerke { font-size: var(--fs-etiket); padding: var(--r0) var(--r2) var(--r0); } /* Robotsidens store billedled. Klassen sættes af billedled({stor:true}) i robot.mjs, men stod uden regel her — dens eneste styling laa i den forladte sider.css. Fotografiet staar stille paa robotsiden: bevaegelsen paa .kort er en invitation til at klikke; her er man allerede fremme. */ /* L78: varianten beholder sin egen KANT og plade, men sideforholdet og fitten er systemets - 4:3 og contain, arvet fra .billedled. En variant maa have sin egen ramme; den maa ikke have sit eget sideforhold. */ .billedled--stor { aspect-ratio: 4 / 3; border: 1px solid var(--linje); border-radius: var(--hjoerne); box-shadow: var(--skygge); background: var(--panel); } .billedled--stor .intetfoto { border-radius: var(--hjoerne); } .billedled--stor img { transition: none; } /* "Vitrine"-mat (spor/lysbyg, retning LYS, prototype/retning-lys/lys.css' .vitrine): fotografiet hviler PAA en hvid plade i stedet for at fylde kortets kant helt ud - signaturgrebet, mockuppen brugte paa alle fire sider. Kun robotsidens STORE billede faar den: katalogets 62 kort er uaendret (samme regel ville have krympet hvert billedfelt 62 gange for en effekt, der kun betaler sig, naar billedet i forvejen er stort). HER STOD VAGTEN `:not(.billedled--maal)` PAA BEGGE SELEKTORER NEDENFOR. Fjernet 9. sep 2026 (spor/pil). Maaltro-pladen var undtaget, fordi dens kasse regnede sin egen procentbredde ud fra hele feltets 16:10-flade og ville forskydes af en ekstra ramme af luft udenom. Pladen UDGIK med L113 - .intetfoto er den eneste billedtilstand for "intet brugbart fotografi" - saa vagten matchede altid og var doed. Instruksen om at fjerne den stod i tests/dele/57-doed-css.mjs, grund 14, og er udfoert her. `img` fylder sit ``, som fylder billedled (system.css §11's `.billedled img{width:100%;height:100%}`) - padding paa den YDRE flade insaetter derfor billedet uden at aendre selve fyld-mekanikken, kun den plads, den regner ud fra. IKKE visuelt efterproevet med en browser i denne session (ingen Playwright-adgang) - se fund/arkiv/2026-08/FUND-lysbyg.md. */ .billedled--stor { padding: var(--r3) var(--r3) 0; } .billedled--stor picture { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--hjoerne); border: 1px solid var(--linje); } /* --- 8b. SAMMENLIGNINGSSIDEN (spor/lysbyg, kontrakt: prototype/retning-lys/sammenligning.html + BEGRUNDELSE.md) --------------- */ /* --- 8b-I. PLADEHOVEDET OG LAESENOEGLEN (spor/samlbyg, 31. aug 2026) ------ Kontrakt: retninger/nyverden/sammenligning.html, godkendt af JPK efter to feedbackrunder. Ingen nye poletter - hver vaerdi herunder er system.css' egen, og manifestets navne staar i parentes, saa kortet mellem compen og designsystemet kan efterproeves: --bund (eloxgraa), --blaek (gunmetal), --accent (afmaerkningsgul), --hegn (stoevgraa), --panel (kridt), --linje (rille), --mono (Saira = "pladen"), --manual (Literata). */ /* Titel + stempelblok side om side, som paa katalogsidens typeskilt. `flex-direction:row` SKAL staa eksplicit: elementet baerer ogsaa `.katalog-hoved` (afsnit 6), som saetter `flex-direction:column`. Uden overstyringen arvede pladen kolonneretningen, og `space-between` kom til at virke paa den LODRETTE akse - maalt 31. aug 2026 til et tomt hul paa ca. 220 px mellem leden og stemplerne, fordi .saml-plade__ord's `flex:1 1` voksede nedad. To klasser paa samme element, hvor kun den ene saetter retningen, er den klassiske maade at faa to regler til at ophaeve hinanden paa. */ .saml-plade { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--r5); flex-wrap: wrap; background: var(--panel); border: 1px solid var(--linje); border-left: 3px solid var(--accent); border-radius: var(--hjoerne) var(--hjoerne) 0 0; padding: var(--r4) var(--r5); box-shadow: inset 0 1px 0 var(--stans); margin-top: var(--r4); } .saml-plade__ord { min-width: 0; flex: 1 1 34ch; } .saml-plade .stempler { align-self: flex-start; justify-items: end; } /* LAESENOEGLEN SOM BAAND. Ét vandret baand, aldrig en fold: noeglen til at laese tallene maa ikke ligge bag et klik paa en side, der KUN handler om at laese tal. Leadet ("Producenten oplyser …") er FOERSTE celle i raekken, ikke en linje ovenover - det sparer en hel tekstlinje, og saetningen loeber vandret gennem baandet i stedet for at blive gentaget fire gange. Dokker direkte under sammenligningspladen som en samlet instrumentkonsol. */ .saml-noegle { margin-top: -1px; padding: var(--r3) var(--r5); background: var(--stans); border: 1px solid var(--linje); border-left: 3px solid var(--accent); border-radius: 0 0 var(--hjoerne) var(--hjoerne); box-shadow: inset 0 1px 0 var(--stans); } /* Spalterne er UENS med vilje: "nul"-forklaringen baerer to saetninger (forskellen paa et maalt nul og et tomt felt er sidens vigtigste skelnen), mens "ja", "nej" og "ikke oplyst" er korte. Lige spalter tvang nul-teksten til to linjer og satte dermed hele baandets hoejde. SEKS spalter siden 7. sep 2026 (impeccable clarify): lead, tal, nul, ja, nej, ikke oplyst. "ja" er den femte forklaring, og den kom til, fordi maerket stod paa fladen uden en linje i noeglen - se legendeHTML()s egen kommentar for tallene. "ja" faar mindst plads, fordi dens saetning er kortest ("at robotten har dette"). */ /* CELLERNE STRAEKKER, DE FLUGTER IKKE PAA BASELINE (spor/typeskala, 9. sep 2026). Her stod `align-items: baseline`, og det var aarsagen til JPK's 8. sep: "Denne tekst i baren paa sammenligningssiden staar ikke lige." Maalt i browseren ved 1440 px foer aendringen: .saml-noegle__lead top 254 <- "HOW TO READ THE FIGURES" de fem .saml-tegn top 244 spredning 10 px MEKANISMEN: de fem tegnceller er flex og har deres egen baseline paa maerket (17px). Leadet er en blok med TO linjer, hvor den foerste er en versaletiket paa 10,5px. Baseline-justering laaser leadets FOERSTE linje til de andres baseline, og fordi de to grader er forskellige, falder hele leadcellen 10 px ned. HVORFOR STRAEKNING FREM FOR `start`: `start` giver ogsaa 0 px spredning i top, men lader hver celle beholde sin egen hoejde - og cellerne baerer en `border-left: 1px dashed`, som saa bliver forskelligt lang fra celle til celle (26 px mod 38 px). Den ragede stiplede streg er den anden halvdel af det, der ser skaevt ud. Straekning giver baade samme top og samme hoejde, saa alle fem skillestreger er lige lange. SPALTEBREDDERNE ER UROERTE MED VILJE, og det er maalt: lige spalter (`repeat(6, minmax(0,1fr))`) er den intuitive rettelse og goer fladen VAERRE - nul-forklaringen er den laengste og braekker da til TRE linjer, saa hoejdespredningen stiger fra 12 til 26 px. Proev dem ikke igen. */ .saml-noegle__raekke { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 0.78fr) minmax(0, 1.42fr) minmax(0, 0.8fr) minmax(0, 0.98fr) minmax(0, 0.98fr); } .saml-noegle__lead { padding-right: var(--r3); min-width: 0; margin: 0; } .saml-noegle__navn { display: block; font-family: var(--mono); font-size: var(--fs-etiket); font-weight: 700; letter-spacing: 0.15em; line-height: 1.1; text-transform: uppercase; color: var(--blaek); margin-bottom: 1px; } /* Forstavelsen er saetningens begyndelse, ikke en etiket - derfor manualens skrift, som resten af forklaringen. */ .saml-noegle__stam { display: block; font-family: var(--manual); font-size: var(--fs-mikro); line-height: 1.25; color: var(--stoev-blaek); } .saml-tegn { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 0 var(--r3); border-left: 1px dashed var(--linje); } .saml-tegn:first-of-type { border-left: 0; padding-left: 0; } .saml-tegn__mrk { flex: none; } .saml-tegn__tekst { font-family: var(--manual); font-size: var(--fs-mikro); line-height: 1.35; color: var(--blaek2); text-wrap: pretty; min-width: 0; } /* Samme notits-form til to beskeder, der begge siger "det, du forventede, sker ikke her": JS-status'en (for faa/for mange valgte) og noscript- beskeden (punkt 3, Aa54). Ingen ny visuel familie - kun klassenavnet er nyt, poletterne er de samme. */ .sammenligning-status, .sammenligning-noscript { margin-top: var(--r3); padding: var(--r2h) var(--r3h); background: var(--accent-ro); border: 1px solid var(--linje); border-radius: var(--hjoerne); color: var(--blaek); } .sammenligning-status[hidden] { display: none; } /* --- 8b-II. JIGGEN: MATRICEN SOM RIGTIG TABEL ---------------------------- VENDT 31. aug 2026 (spor/samlbyg). Foer laa der display:block/grid ovenpaa tabelelementerne, saa gitteret kunne staa som mockuppens .saml-*. Compen kraever i stedet, at kolonnehovedet KLAEBER og at raekkehovedet klaeber til venstre kant - og position:sticky paa et tabelelement virker kun, naar elementet faktisk har sin tabel-display. Vi giver derfor displayen tilbage og lader tabellen vaere en tabel. ARIA-rollerne i sammenligning.js staar uroerte: de skader ikke, naar displayen er rigtig, og de var det eneste vaern, mens den ikke var. MAALT 31. aug 2026, og det er ikke en detalje: saetter man overflow-x:auto paa rullebeholderen, tvinger browseren overflow-y fra visible til auto - og saa bliver beholderen den klaebende raekkes rullebeholder i STEDET for viewporten. Hovedet klaeber da til en kasse, der ikke ruller lodret, og klaeber altsaa aldrig. Compen maalte top:-938px ved raekke 21, MENS skaermbilledet saa helt rigtigt ud. Beholderen ruller derfor kun paa de bredder, hvor den skal (se 820 px-graensen), og er visible resten af tiden. */ .saml-enhedslinje { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: var(--r3); margin: var(--r3) 0 var(--r2); } .saml-enhedslinje .enhedsnote { color: var(--stoev-blaek); } .saml-rulle { position: relative; overflow: visible; margin-top: var(--r4); background: var(--panel); border-radius: var(--hjoerne); box-shadow: inset 0 0 0 1px var(--linje), inset 0 1px 0 var(--stans); } .saml-rulle:has(.saml-invit) { padding: var(--r4) var(--r4) 0; } .saml-rulle:not(:has(.saml-matrix)) { padding: var(--r7) var(--r5); text-align: center; border: 1px dashed var(--linje); } /* JIGRAEKKEN: kolonnehovedet klaeber. Foer rullede robotnavnene vaek, og raekke 25 blev laest uden at vide, hvilken spalte der var hvem. Gunmetal-fladen er ikke pynt: den skiller betjeningen fra dataene og giver det klaebende hoved en ugennemsigtig bund, saa raekkerne ikke skinner igennem, naar de ruller under. --bund paa --blaek maaler 12,72:1. */ .specimen-hoved { background: var(--blaek); } .specimen-hoved th, .specimen-hoved td { position: sticky; top: 0; z-index: 30; background: var(--blaek); color: var(--bund); text-align: left; vertical-align: bottom; padding: var(--r4) var(--r3); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); border-bottom: 2px solid var(--accent); } /* Hjoernet klaeber i BEGGE retninger og skal derfor ligge over baade jigraekken og de klaebende raekkehoveder. */ .specimen-hoved__hjoerne { left: 0; z-index: 31; width: 224px; min-width: 224px; } .saml-hjoerne__ord { display: block; font-family: var(--mono); font-size: var(--fs-etiket); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bund); margin-bottom: var(--r1); } .saml-hjoerne__note { display: block; font-family: var(--manual); font-size: var(--fs-data); line-height: 1.4; color: var(--paafod2); max-width: 22ch; } /* Specimen-kortet er nu et (Aa54). Det arver dermed system.css §14's `thead th{font-family:mono;font-size:var(--fs-etiket); font-weight:500;letter-spacing:.13em;text-transform:uppercase; color:--blaek3;white-space:nowrap}` og `th,td{padding:12px 16px}` - regler skrevet til producentsidens smalle kolonneoverskrifter. Uden nulstillingen herunder ville producentnavnet i .specimen__meta staa VERSALT i mono og ikke kunne ombrydes, og kortet ville faa 12/16px luft, det aldrig har haft. `font:inherit` henter hele skriftsaettet tilbage fra dokumentet, praecis som da kortet var et
. */ .specimen { border-left: 1px solid var(--blaek2); font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; white-space: normal; } /* Hoejden er BUNDET, fordi hovedet OGSAA er betjeningen og skal blive ved med at klaebe: et hoejt billede ville gOEre den klaebende raekke til en skaerm i sig selv paa 390. `contain` og ikke `cover` - chippen skal kun sige HVILKEN maskine spalten er, og der er intet at vinde ved at skaere poter af. */ .specimen__top { display: flex; align-items: flex-start; gap: var(--r3); min-width: 0; } .specimen__id { display: block; min-width: 0; } .saml-fotofelt { flex: none; width: 74px; height: 56px; display: grid; place-items: center; overflow: hidden; background: var(--bund); border-radius: var(--hjoerne); } .saml-fotofelt picture { display: block; width: 100%; height: 100%; } .saml-fotofelt img { width: 100%; height: 100%; object-fit: contain; padding: var(--r0); } /* Manglende foto: den stiplede ikke-oplyst-plade, samme sprog som ethvert andet uoplyst felt - saa det ikke kan laeses som en indlaesningsfejl. Maalt: 76 af 77 robotter har foto, saa tilfaeldet er sjaeldent, men det findes, og en tom kasse ville se ud som en fejl netop dér. */ .saml-fotofelt--uoplyst { background: var(--fod); border: 1px dashed var(--hegn); border-radius: var(--hjoerne); align-content: center; padding: var(--r0); } /* R9 / DP3c: 8 px brød skriftgulvet paa 10,5. Ordet baeres nu som tilgaengelighedstekst - stiplet firkant for oejet, ordet for skaermlaeseren. */ .saml-fotofelt__ord { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .specimen__navn { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; color: var(--bund); overflow-wrap: break-word; } .specimen__meta { display: block; font-size: var(--fs-etiket); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--paafod2); margin-top: var(--r1); padding: 0; overflow-wrap: break-word; } .specimen__fod { display: flex; align-items: baseline; gap: var(--r3); flex-wrap: wrap; margin-top: var(--r2h); padding-top: var(--r2h); border-top: 1px solid var(--blaek2); } .specimen__taethed { font-family: var(--mono); font-size: var(--fs-etiket); font-weight: 600; color: var(--paafod2); } /* FJERN-KNAPPEN i kolonnehovedets fod (spor/saml3, JPK 2. sep 2026). Formen er sitets knapprimitiv, `knap knap--kant-moerk`: kolonnehovedet staar paa moerk bund (`.specimen-hoved{background:blaek}`), og varianten siger fladen i sit navn. paafod paa fod = 12,72:1. HER STOD FOER EN FARVE- OG KANT-OVERSTYRING, og hele dens begrundelse er forsvundet med L77. Den lyder ordret i git-historikken: `.nulstil` var en MOERK-flade-knap, den stod 700 linjer laengere nede i filen, og reglen maatte derfor vaere TO SELEKTORER DYB (0,2,0) for overhovedet at traede i kraft. Nu vaelges fladen paa knappen selv, i markup'en, og der er ingenting at neutralisere. Tilbage staar kun det, der ER specimen- specifikt: stoerrelsen og placeringen. FARVERNE BLEV SAMTIDIG BEDRE, ikke bare faerre: den gamle overstyring satte `color:var(--paafod2)` (5,94:1) og en haarstreg i `--blaek2`, som paa --fod maaler 2,20:1 og altsaa var under WCAG 1.4.11's 3:1 for en synlig kant. Varianten giver 12,72:1 paa teksten og 5,94:1 paa haarstregen. `margin-left:auto` skubber knappen til hoejre kant af foden, saa taetheds-tallet og knappen ikke laeses som ét udtryk. `align-self` fordi foden er `align-items:baseline`, som ellers ville haenge knappens ramme op paa tekstens grundlinje. Den bliver TO SELEKTORER DYB, fordi `min-height:0` og polstringen skal slaa primitivens egne 44 px - se beroeringsmaalet nedenfor for hvorfor knappen SKAL vaere lille her. */ .specimen .specimen__fjern { position: relative; margin-left: auto; align-self: center; min-height: 0; font-size: var(--fs-etiket); letter-spacing: 0.1em; padding: var(--r1h) var(--r2h); transition: color 120ms ease, border-color 120ms ease, background 120ms ease, transform 80ms ease; } .specimen .specimen__fjern:hover { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.5); background: rgba(255, 107, 107, 0.12); } .specimen .specimen__fjern:active { transform: scale(0.95); } /* BEROERINGSMAALET, og grunden til at det ikke bare er en `min-height`. Den SYNLIGE knap er lille med vilje: kolonnehovedet KLAEBER (position: sticky), og en 44 px hoej knap ville skubbe den klaebende raekke ned over matricen - netop den fejl, `.saml-fotofelt`s bundne hoejde lige ovenfor er sat for at undgaa ("et hoejt billede ville gOEre den klaebende raekke til en skaerm i sig selv paa 390"). Maalt paa formen: 10 px mono + 5 px polstring op og ned giver ca. 24-25 px hoejde - over WCAG 2.5.8's minimum (24x24), men under de 44, resten af siden holder (primitiven `.knap` saetter min-height:44px; denne ene knap skriver den ned til 0 og betaler for det med feltet herunder). `::after` loeser begge dele: et usynligt felt paa mindst 44x44, centreret paa knappen, uden at aendre én eneste pixel af layoutet. De tre knapper staar i hver sin spalte og kan derfor ikke overlappe hinandens felt. */ .specimen .specimen__fjern::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; min-width: 44px; height: 44px; } /* INVITATIONEN tilbage til kataloget - ÉN pr. side, kun naar der er en ledig plads (se sammenligning.js' invitationHTML() for hvorfor den ikke er tre kopier i kolonnehovederne). Plads nok til at baere de 44 px direkte, uden ::after-kneb. FLADEN STAAR NU I MARKUP'EN: `knap knap--kant` - den omridsede vaegt paa LYS bund, blaek paa bund = 12,72:1. DEN HISTORIE, DER GJORDE DENNE REGEL LANG, ER SLUT, og det er vaerd at vide hvorfor, fordi det er selve begrundelsen for L77. Knappen laante foer `.nulstil`, som er en MOERK-flade-knap (`color:var(--paafod)`, #E8EBED). Paa sidens lyse bund maalte den 1,16:1 - praktisk talt usynlig. Foerste rettelse virkede ikke, fordi `.saml-invit__link` alene er 0,1,0, altsaa PRAECIS lige saa specifik som `.nulstil`, der stod ~700 linjer laengere nede og derfor vandt paa kilderaekkefoelge. Foerst 0,2,0 vendte farven. Begge fejl var den samme fejl: en primitiv, der ikke baar sin flade i sig, saa den forkerte flade var den, man fik ved et uheld. Primitiven goer nu det modsatte - `.knap` alene er farveloes (`color:inherit`), og fladen skal vaelges ved navn. Der er ikke laengere noget at overstyre, og reglen herunder er skrumpet til det, der faktisk er invitationens eget: dens bundmargin. Her stod ogsaa `min-height:44px` og en egen `:hover`. Begge er primitivens nu. Hover-reglen SKULLE vaek, ikke bare kunne: den var `.saml-invit .saml-invit__link:hover` = (0,3,0) og ville have slaaet `.knap--kant:hover` = (0,2,0), saa denne ene knap havde beholdt sin egen hover-farve, mens resten af sitet fik familiens gule. Én knap, der opfoerer sig anderledes end de ti andre, er praecis den tilstand, L77 afskaffer. */ .saml-invit { display: flex; flex-direction: column; align-items: center; gap: var(--r3); margin-bottom: var(--r4); } .saml-enkelt-valgt { margin: var(--r4) auto; max-width: 320px; background: var(--blaek); color: var(--bund); border-radius: var(--hjoerne); border: 1px solid var(--hegn-baerende); overflow: hidden; } .saml-enkelt-valgt .specimen--enkelt { display: flex; flex-direction: column; gap: var(--r3); padding: var(--r3); border-left: 0; } /* Felttabellen. Aa54: en RIGTIG , men med display:block/grid ovenpaa, saa gitteret staar som foer - en subgrid-lignende raekke (200px etiket + N vaerdikolonner) lader hver celle vaere sin egen boks med egen venstrekant, samme princip som mockuppens .saml-*. Semantikken baeres af elementerne PLUS eksplicitte ARIA-roller; se sammenligning.js' kommentar om hvorfor begge dele skal til, naar `display` aendres paa et tabelelement. Tre globale regler i system.css §14 er skrevet til producentsidens brede .prod-tabel og ville ellers naa herind. De neutraliseres praecist HER, saa §14 selv staar uroert for de sider, der bygger paa den: table{width:100%;min-width:620px;font-size:var(--fs-lille)} -> .saml-matrix th,td{border-top:1px} -> celle-reglen thead th{...} -> .specimen ovenfor min-width:620px er den farligste af dem: paa en telefon ville den give vandret overloeb, hvor der foer ingen var. */ /* table-layout:fixed (K1, JPK 3. sep 2026): under `auto` bestemmer INDHOLDET bredden, saa en plade med 24 udfyldte felter blev 743 px og en tavs plade 195 px - maalt forhold 3,92x ved tre plader og 4,70x ved to. Kolonner af forskellig bredde laeses som forskellig VAEGT, og fladens opgave er sammenligning. `fixed` laeser foerste raekkes bredder, og foerste raekke er .specimen-hoved, hvis hjoerne allerede baerer de 224 px (linje 434 + 605-606, og 150 px ved <=720). Der skal derfor INGEN ny bredde tilfoejes - en fjerde kopi af 224 ville vaere det haandskrevne tal ved siden af det udledte. SCOPET til .saml-matrix med vilje: `table{table-layout:fixed}` ville ramme robotsidernes 77 tabeller og producentsidens ene umaalt. */ .saml-matrix { width: 100%; min-width: 0; font-size: var(--fs-raekke); table-layout: fixed; border-collapse: separate; border-spacing: 0; } /* Nulstiller §14's th,td{border-top:1px} paa PRAECIS de celler, der ellers ville faa en streg, de aldrig har haft. Raekkens og gruppens egne streger sidder paa og , ikke paa cellerne. Foerste forsoeg var den brede `.saml-matrix th,.saml-matrix td` - og den var forkert. Specificiteten (0,1,1) slaar `.specimen` (0,1,0), saa specimen-kortet mistede sin egen overkant: kortet blev 84 -> 83 px, og hele siden 4014 -> 4013 px. Maalt med en geometrisonde, ikke set med oejet - 1 px flytter sig ikke synligt, men det ER en aendring af udseendet. Vaelgerne herunder roerer aldrig .specimen, som beholder sin ramme hele vejen rundt (og som §14's thead th{border-top:0} i forvejen ikke generer, fordi .specimen's egen `border` vinder over den). */ /* `.saml-raekke > th,.saml-raekke > td` STOD HER og er fjernet 3. sep 2026 (JPK: synlige raekkelinjer). Den var aarsagen - ikke en manglende regel: med (0,1,1) slog den `.saml-raekke > *` (0,1,0) fire linjer laengere nede, og specificitet afgoeres FOER kilderaekkefoelgen. Hvert barn af en er enten th eller td, saa raekkestregen vandt paa 0 af 142 celler og maalte `0px none` overalt. Aa146 kaldte den doede regel doed og ville slette den; den var overskrevet, ikke uden aftagere. De to oevrige vaelgere BLIVER: gruppetitlens egen overkant saettes betinget nedenfor, og hjoernecellen skal fortsat ikke have en. */ .saml-gruppe__titelraekke > th, .specimen-hoved__hjoerne { border-top: 0; } /* Gruppetitlen: én pr. gruppe, scope="rowgroup". Klaeber til venstre kant sammen med raekkehovederne, saa den ikke forsvinder under vandret rulning paa smalle skaerme. */ .saml-gruppe__titel { position: sticky; left: 0; text-align: left; padding: var(--r3h) var(--r3) var(--r2h); font-family: var(--mono); font-size: var(--fs-etiket); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blaek); background: var(--panel); border-bottom: 1px solid var(--linje); } .saml-gruppe:first-of-type .saml-gruppe__titel { padding-top: var(--r3h); } /* GRUPPESKELLET: Markant 2px teknisk skillelinje mellem de 6 spec-kassetter */ .saml-gruppe:not(:first-of-type) .saml-gruppe__titelraekke > th { border-top: 2px solid var(--blaek3); } /* Feltraekken. Raekkehovedet klaeber til VENSTRE kant: paa en smal skaerm ruller man hen over spalterne, og feltnavnet skal staa fast - ellers ved man ikke, hvad tallet under fingeren er et tal FOR. */ /* RAEKKEHAARSTREGEN. Den har staaet her siden matricen blev bygget og har aldrig tegnet en eneste streg, fordi nulstilleren ovenfor slog den paa specificitet. Fra 3. sep 2026 er nulstilleren vaek, og reglen er i drift. --linje er den rigtige polet og ikke et kompromis: dens egen beskrivelse i system.css' palet er ordret "rillen mellem stansede felter. Haarstreger." Den maaler 1,56:1 (rille PAA panel) - under 3,0 - og det er lovligt her, fordi raekkeadskillelsen IKKE hviler paa stregen alene: 43,7 px median raekkehoejde, 11 px lodret polstring og hver celles egen venstrekant baerer den ogsaa. Praecis samme polet i praecis samme tykkelse staar allerede paa 99 celler som `border-left` fire regler laengere nede, saa den vandrette streg bliver noejagtig lige saa synlig som de lodrette, fladen har haft hele tiden. Gruppeskellet ovenfor er den modsatte sag - der ER stregen eneste baerer, og derfor er den --blaek3 (5,48:1). To vaegte, ikke én. */ .saml-raekke > * { border-top: 1px solid var(--linje); } .saml-raekke__navn { position: sticky; left: 0; z-index: 10; width: 224px; min-width: 224px; text-align: left; vertical-align: top; font-weight: 500; padding: var(--r3) var(--r3); background: var(--panel); box-shadow: 1px 0 0 var(--linje); } .saml-raekke__ord { display: block; font-size: var(--fs-raekke); color: var(--blaek2); line-height: 1.3; } /* HER STOD SVARMAERKET - en raekke smaa firkanter under hvert feltnavn, én pr. plade, fyldt = svarer, stiplet = tier. FJERNET 2. sep 2026 (JPK: "Disse bokse der angiver felter oplyste skal ikke vaere der"), sammen med udsendelsen i assets/sammenligning.js' svarHTML(). Selve TAELLINGEN staar uaendret som tekst i `.kunskaerm` samme sted - maerkeraekken var `aria-hidden`, saa en skaermlaeser hoerer det samme som foer. Reglerne fjernes i SAMME commit som markup'en, saa klassen ikke bliver til doed CSS (Aa102). */ /* overflow-wrap:anywhere hoerer til table-layout:fixed og maa ikke skilles fra den. Under `auto` kunne et langt ord altid tvinge kolonnen bredere; under `fixed` kan det ikke, og ordet ville klippe. Laengste ord i datasaettet i dag er 29 tegn og klipper ingenting (0 celleoverloeb maalt af 142), men det er sandt for DAGENS data - en 60-tegns modelbetegnelse ville ellers blive et layoutbrud, ingen forbinder med denne aendring. */ .saml-raekke__celle { vertical-align: top; padding: var(--r3) var(--r3); border-left: 1px solid var(--linje); min-width: 0; overflow-wrap: anywhere; } .saml-raekke__celle .v { font-size: var(--fs-felt); } .saml-raekke__celle .v-tal { display: inline-flex; align-items: baseline; flex-wrap: nowrap; } .saml-raekke__celle .num { font-variant-numeric: tabular-nums; } /* Raekker, hvor ALLE plader tier: hele raekken traeder tilbage. Vaerdierne staar der stadig med deres eget stiplede maerke - hullet er ikke skjult, det er blot holdt op med at konkurrere med de raekker, der baerer tal. Tavsheden er selve fundet, ikke en mangel der skal gemmes. */ .saml-raekke--tavs .saml-raekke__ord { color: var(--stoev-blaek); } .saml-raekke--tavs .saml-raekke__navn { border-left: 2px dashed var(--hegn); padding-left: calc(var(--r3) - var(--r0)); } .saml-raekke--tavs .saml-raekke__navn, .saml-raekke--tavs .saml-raekke__celle { padding-top: var(--r1h); padding-bottom: var(--r1h); } .saml-raekke--tavs .saml-raekke__celle { opacity: 0.35; transition: opacity 0.15s ease; } .saml-raekke--tavs:hover .saml-raekke__celle, .saml-raekke--tavs:focus-within .saml-raekke__celle { opacity: 1; } .saml-raekke__navn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* RAEKKEMARKERING VED SVAEV OG FOKUS (K2 punkt 1, valgt til af JPK 3. sep 2026). Opgaven paa denne flade er ikke at se, HVOR en raekke slutter - det baerer haarstregen og 43,7 px raekkehoejde. Det er at HOLDE FAST i raekke 17, mens blikket flytter 1.336,8 px til hoejre. */ @media (hover: hover) { .saml-raekke:hover > * { background: var(--accent-ro); } .saml-raekke:hover .saml-raekke__navn { box-shadow: inset 3px 0 0 var(--accent), 1px 0 0 var(--linje); } .saml-raekke:hover .saml-raekke__ord { color: var(--blaek); } } .saml-raekke:focus-within > * { background: var(--accent-ro); } .saml-raekke:focus-within .saml-raekke__navn { box-shadow: inset 3px 0 0 var(--accent), 1px 0 0 var(--linje); } .saml-raekke:focus-within .saml-raekke__ord { color: var(--blaek); } /* Kolonne-sigtekorn (delight): diskret synkroniseret fremhaevning af aktiv kolonne */ @media (hover: hover) { .saml-matrix:has(td:nth-child(2):hover) td:nth-child(2), .saml-matrix:has(td:nth-child(3):hover) td:nth-child(3), .saml-matrix:has(td:nth-child(4):hover) td:nth-child(4) { background-color: rgba(230, 170, 0, 0.035); } .saml-matrix:has(td:nth-child(2):hover) th.specimen:nth-child(2), .saml-matrix:has(td:nth-child(3):hover) th.specimen:nth-child(3), .saml-matrix:has(td:nth-child(4):hover) th.specimen:nth-child(4) { background-color: #2a2e33; } } /* --- DIFF-MODE: Fremhaev forskelle (spor/analyse, Mulighed A) ----------- */ .saml-vaerktoej { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--r2); margin: var(--r2) 0 var(--r3); } .saml-vaerktoej:has(.saml-invit) { margin-top: 0; } .saml-diff-knap { display: inline-flex; align-items: center; gap: var(--r1h); font-family: var(--mono); font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: var(--r1h) var(--r2h); min-height: 44px; color: var(--blaek); background: var(--bund); border: 1.5px solid var(--blaek); border-radius: var(--hjoerne); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease, box-shadow 120ms ease; } @media (max-width: 600px) { .saml-vaerktoej { flex-direction: column; align-items: stretch; } .saml-diff-knap { width: 100%; justify-content: center; } } .saml-diff-knap:hover { border-color: var(--blaek); background: var(--stans); } .saml-diff-knap:active { transform: translateY(1px); } .saml-diff-knap:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .saml-diff-knap[aria-pressed="true"], .saml-diff-knap--aktiv { background: var(--accent); color: var(--blaek); border: 1.5px solid var(--blaek); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(230, 170, 0, 0.35); font-weight: 800; } .saml-diff-knap__ikon { font-family: var(--mono); font-weight: 700; font-size: var(--fs-raekke); line-height: 1; } .saml-diff-knap__taeller { font-family: var(--mono); font-size: var(--fs-mikro); opacity: 0.85; } /* Animate & Colorize i Diff-mode */ .saml-matrix .saml-raekke { transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .saml-matrix .saml-raekke { transition: none; } } /* Identiske felter: tones daempet ned, men vaagner ved svaev eller tastaturfokus */ .saml-matrix--diff .saml-raekke--ens { opacity: 0.20; } @media (hover: hover) { .saml-matrix--diff .saml-raekke--ens:hover { opacity: 0.95; } } .saml-matrix--diff .saml-raekke--ens:focus-within { opacity: 0.95; } /* Afvigende felter (forskelle): skarp autoritet, 3px accentstreg i venstre kant */ .saml-matrix--diff .saml-raekke--forskel { opacity: 1; background: rgba(230, 170, 0, 0.035); } .saml-matrix--diff .saml-raekke--forskel .saml-raekke__navn { box-shadow: inset 3px 0 0 var(--accent), 1px 0 0 var(--linje); font-weight: 600; } .saml-matrix--diff .saml-raekke--forskel .saml-raekke__ord { font-weight: 700; color: var(--blaek); } .saml-matrix--diff .saml-raekke--forskel .saml-raekke__celle .num { font-weight: 700; color: var(--blaek); } /* --- 8b-III. MATRICENS FOD OG VAELGEREN ---------------------------------- */ .saml-fod { margin-top: var(--r4); } /* HER STOD .saml-vinderregel og .saml-vinderregel__navn - den redaktionelle note ved matricens fod. TEKSTEN er fjernet 3. sep 2026 paa JPK's ord, og reglerne fjernes i SAMME commit som markup'en, saa de ikke bliver til doed CSS (Aa102). Notens ordlyd gengives med vilje IKKE her: denne fil kopieres raat til dist/, og et grep efter saetningen i den byggede side skal give 0. PRINCIPPET staar uaendret: matricen udpeger fortsat ikke en vindercelle, fordi haard begraensning 6 forbyder en redaktionel score uden en offentliggjort metode. Begrundelsen i fuld laengde staar der, hvor nogen ville komme til at tilfoeje markeringen igen - tools/skabelon/ sammenligning.mjs' matrixFodHTML(). .saml-fod BLIVER: fotokreditten skrives ind i den klientside. */ .saml-fotoophav { font-family: var(--manual); font-size: var(--fs-etiket); line-height: 1.55; color: var(--stoev-blaek); max-width: 78ch; margin: var(--r3) 0 0; padding: 0 var(--r3) var(--r3); text-wrap: pretty; } /* FOTOKREDITTEN PR. KOLONNE (spor/fotofod, JPK 3. sep 2026: "Fodnoter til foto skal vaere i deres respektive kollonner"). Cellerne genbruger sidens EGNE to graenselinjer: border-top var(--linje) er den samme streg, .saml-raekke > * saetter mellem hver datataekke, og border-left var(--blaek2) er kolonnedeleren fra pladehovedets .specimen. To genbrugte tokens, ingen nye. */ .saml-fotofod__hjoerne, .saml-fotofod__celle { border-top: 1px solid var(--linje); vertical-align: top; padding: var(--r2) var(--r3); font-family: var(--manual); font-size: var(--fs-etiket); line-height: 1.4; color: var(--stoev-blaek); text-align: left; } .saml-fotofod__celle { border-left: 1px solid var(--blaek2); } /* --- 8b-IV. SMALLE SKAERME ---------------------------------------------- Matricen brydes ALDRIG op i blokke - det ville koste tabelrollen, som Aa54 netop lappede. Den ruller vandret i stedet, og raekkehovedet klaeber til venstre kant, saa feltnavnet altid er synligt. */ @media (max-width: 1100px) { .saml-noegle__raekke { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 0; } .saml-tegn:nth-child(2n + 1) { border-left: 0; padding-left: 0; } } /* HER STOD `.saml-matrix{min-width:640px}` og er FJERNET 7. sep 2026 (impeccable adapt). Reglen var den haardeste fejl paa fladen, og den fejlede omvendt af hvad man venter: 640 px stod fast, UANSET hvor mange spalter der var, saa spalterne blev BREDERE, jo faerre robotter man sammenlignede. Maalt paa 390 px foer aendringen: 3 robotter -> tabel 640 px, spalter 163,3 px, 1 af 3 vaerdispalter synlig 2 robotter -> tabel 640 px, spalter 245,0 px, 0 af 2 vaerdispalter synlige Siden fejlede altsaa haardest i praecis det tilfaelde, den selv anbefaler ("Vaelg 2 eller 3 robotter"). Uden min-width goer `width:100%` + `table-layout:fixed` arbejdet selv: tabellen fylder beholderen, og vaerdispalterne deler resten ligeligt. Maalt EFTER paa 390 px: 2 robotter -> tabel 358 px, spalter 120 px, 2 af 2 synlige 3 robotter -> tabel 358 px, spalter 80 px, 3 af 3 synlige `width:auto` og `width:max-content` er PROEVET og virker ikke (spor/fladefix, maalt til 464,3 px med ULIGE spalter): under en ubestemt bredde falder `table-layout:fixed` tilbage til indholdsbestemt layout, og robotnavnenes laengde saetter spaltebredden. Proev dem ikke igen. HELE `@media (max-width:820px)`-grenen er FJERNET 7. sep 2026 (impeccable layout). Den indeholdt `overflow-x:auto` + `overscroll-behavior-x:contain` paa .saml-rulle, og den vandrette ruller kostede den klaebning, fladen lever af. MEKANISMEN, som .saml-rulle's egen kommentar ovenfor allerede beskrev: saetter man overflow-x:auto, tvinger browseren overflow-y fra visible til auto. Beholderen bliver da den klaebende raekkes rullebeholder i stedet for viewporten - og beholderen ruller ikke lodret, saa hovedet klaeber aldrig. Maalt paa 390 px med 3 robotter, ved sidste af 33 raekker: FOER: overflow-y: auto kolonnehovedet stod paa top: -4812 px EFTER: overflow-y: visible kolonnehovedet staar paa top: 0 px Man laeste altsaa 33 raekker uden at kunne se, hvilken robot en spalte var. Grenen KUNNE ikke fjernes foer, fordi min-width:640px tvang tabellen bredere end skaermen. Nu goer den ikke det: `width:100%` + `table-layout:fixed` holder tabellen inden for beholderen ved enhver bredde (maalt 390/480/600/720/820/1440 px: 0 vandret overloeb, 0 klippede celler). Der er ikke laengere noget at rulle, saa rulleren var ren omkostning. BEMAERK FOR TESTEN: tests/dele/12-enheder.mjs' K10b kraever, at `.saml-rulle` baade er overflow:visible som udgangspunkt OG har overflow-x:auto i en 820px-gren. Den anden halvdel er nu falsk med vilje. Testens HENSIGT - "rullebeholderen maa ikke selv vaere en lodret ruller" - holdes staerkere end foer, fordi der slet ingen ruller er. */ @media (max-width: 720px) { .saml-noegle { padding: var(--r2) var(--r3) var(--r2); } /* Paa 390 er der ikke bredde til fem spalter med prosa. Ét spor, men stadig ALT synligt: fire raekker a én linje. Leadet saettes INLINE her - som to blokke kostede det en hel ekstra linje. */ .saml-noegle__raekke { grid-template-columns: 1fr; gap: 2px; } .saml-tegn, .saml-tegn:nth-child(2n + 1) { border-left: 0; padding: 0; } .saml-tegn__tekst { font-size: var(--fs-mikro); } .saml-noegle__lead { padding-right: 0; } .saml-noegle__navn { display: inline; margin-right: var(--r1h); } .saml-noegle__stam { display: inline; font-size: var(--fs-mikro); } .saml-matrix { font-size: var(--fs-mikro); } .specimen-hoved__hjoerne, .saml-raekke__navn { width: 150px; min-width: 150px; padding: var(--r2h) var(--r2); } .saml-raekke__ord { font-size: var(--fs-mikro); } /* Maerkatfotoet krymper med hovedet, saa den klaebende raekke ikke aeder skaermen paa 390. */ .saml-fotofelt { width: 52px; height: 40px; } /* KOLONNEHOVEDET STABLES: foto OVER navn, ikke ved siden af. Vandret kostede navnet hele spalten. Maalt paa 390 px med 3 robotter: spalten er 80 px, cellepolstringen 2 x 10 px og fotoet 52 px + 10 px mellemrum - der var 8 px tilbage til robotnavnet, og "MOVENEW P1" stod klippet som "MOV". En spalte, man ikke kan sige navnet paa, kan man ikke sammenligne med. Stablet faar navnet hele spaltens bredde. */ .specimen__top { flex-direction: column; gap: var(--r2); } /* Invitationens polstring maa ikke smalne matricen. `.saml-rulle:has( .saml-invit){padding:0 16px}` gav 16 px i hver side, men KUN naar "Vaelg robotter"-knappen stod der - altsaa praecis i to-robot-tilstanden. Matricen mistede 32 px af 358 i det tilfaelde, fladen selv anbefaler. Polstringen flyttes til invitationen, som er den, der skal have luft. */ .saml-rulle:has(.saml-invit) { padding: 0; } .saml-invit { padding: var(--r4) var(--r4) 0; } .saml-hjoerne__note { display: none; } .specimen-hoved th, .specimen-hoved td { padding: var(--r3) var(--r2h); } /* overflow-wrap paa BEGGE tekster, ikke kun navnet. Producentnavnet er det laengste ubrudte ord i hovedet ("MicroRoboTech" maaler 94,4 px med sin 0,13em spatiering), og i en kolonne-flexbeholder saetter det BREDESTE barns min-content hele linjens tvaerbredde: med `anywhere` kun paa navnet blev .specimen__id 94,4 px bred i en 80 px spalte, og "MOVENEW P1" stod som "MOVENEW", mens "MicroRoboTech" stod som "MICROROBOT". Maalt, ikke set: navnets kasse laa 25,4 px uden for cellens hoejrekant. */ .specimen__navn, .specimen__meta { overflow-wrap: anywhere; } .specimen__navn { font-size: var(--fs-lille); } .specimen__fod { display: block; } } /* Under 480 px er etiketspalten den dyreste spalte paa fladen. Maalt paa 390 px med 3 robotter: 150 px etiket lod kun 69,3 px tilbage til hver robot, og VAERDIERNE er det, fladen sammenligner - feltnavnet laeses én gang. 118 px er ikke valgt rundt: det bredeste feltnavn maaler 142,1 px i max-content ("Trappetrin, kontinuerligt", maalt i browseren), saa 118 px bryder praecis 3 af 33 navne over to linjer og lader resten staa paa én. Regnestykket paa 390 px (358 px indhold): 118 + 3 x 80,0 mod 150 + 3 x 69,3. Spalterne vokser 15 %, og siden bliver KORTERE, ikke laengere - maalt 6.490 px mod 7.233 px, fordi vaerdierne ombryder mindre, end feltnavnene vinder. */ @media (max-width: 480px) { .specimen-hoved__hjoerne, .saml-raekke__navn { width: 118px; min-width: 118px; } .specimen-hoved th, .specimen-hoved td { padding: var(--r2) var(--r1h); } .specimen__meta { display: none; } /* FJERN-knappen maa ikke vaere bredere end sin egen spalte. Maalt paa den ENGELSKE side ved 320 px med 3 robotter: spalten er 56,7 px, knappen ("Remove") 64 px, og dens hoejrekant laa paa 322 mod viewportens 320 - to pixels vandret rul paa HELE siden. Den fandtes ikke foer, fordi matricen dengang laa i en vandret ruller, der slugte overloebet. Traeffeltet er uroert: .specimen__fjern::after er absolut placeret med min-width:44px og paavirkes ikke af knappens egen bredde. */ .specimen .specimen__fjern { max-width: 100%; } } /* ============================================================================= 9. SIDENS RAMME, ROBOTSIDEN OG PRODUCENTSIDEN Flyttet fra den forladte assets/sider.css, 24. aug 2026 (fund/arkiv/2026-08/FUND-detalje.md, opgave 1 + 4b). sider.css blev aldrig linket i bygget — kun system.css og generator.css sendes til dist/ — men robot.mjs og producent.mjs har hele tiden skrevet netop disse klassenavne. Uden CSS'en ramte HTML'en ingen regel: .robot-top var derfor et umuligt layout (billedet fortrængte navnet under første skærmhøjde), ikke et bevidst valgt ét. Reglerne herunder er FLYTTET, ikke genopfundet — samme metode som .billedled--stor ovenfor. Ingen nye farver: hver værdi er en polet fra system.css' :root, som sider.css' egen header allerede lovede. To rettelser fra originalen: .advarsel og .v-tekst er UDELADT her, fordi generator.css §4 allerede definerer dem (med andre, LEVENDE værdier) — at kopiere sider.css' udgaver ved siden af ville genskabe præcis den dobbelt-definitions-fælde, DESIGN.md advarer imod. Det gamle .arvet er erstattet af .anvendelse__arv (BEM), fordi arve-markeringen nu bærer et rigtigt navn og link i stedet for den rå slug (se robot.mjs, opgave 4c). ========================================================================== */ .side { padding-bottom: var(--r7); } .side > .rum { padding-top: var(--r4); } .retur { margin-bottom: var(--r3); } .retur a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--r3) 0 0; font-size: var(--fs-lille); font-weight: 600; text-decoration: none; color: var(--blaek2); } .retur a::before { content: "←"; margin-right: var(--r2h); font-family: var(--mono); color: var(--blaek3); } /* L76: hover satte accent som TEKST paa --bund (1,38 : 1) - altsaa gjorde hover mindre laesbart end hvile (--blaek2, 5,68 : 1). Nu loefter hover til fuld --blaek, og accent baerer understregningen. */ .retur a:hover { color: var(--blaek); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); } .robotside, .producentside { display: flex; flex-direction: column; } .producentside { min-height: clamp(480px, 60vh, 800px); } /* --- 9a. Robotsidens top: fotografiet ledsager navnet, ikke fortrænger det. Fra 900 px op staar billede og navn side om side (7fr/5fr) — under det, ogsaa ved 360 px, stakkes de, men navnet er dermed det FØRSTE tekstindhold under et billede, der ikke laengere spaender hele bredden alene (maalt fund/arkiv/2026-08/FUND-detalje.md, opgave 1). */ .robot-top { display: grid; gap: var(--r5); align-items: start; padding-top: var(--r2); } @media (min-width: 900px) { .robot-top { grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: var(--r6); } } /* Under 900 px stakkes billede og navn (§9a). Maalt fund/arkiv/2026-08/FUND-detalje.md, dengang siden endnu viste billednote-banneret fra S1 (fjernet 26. aug 2026, se L37): et rigtigt fotografi i 16:10 fylder stadig ~205 px hoejde ved 360 px bredde alene, og lagt oven paa navigation + "Tilbage til kataloget" skubbede navnet for taet paa en almindelig telefons foerste skaermhoejde. HER STOD VAGTEN `:not(.billedled--maal)` PAA SELEKTOREN NEDENFOR. Fjernet 9. sep 2026 (spor/pil). Loftet gjaldt KUN et rigtigt fotografi, og vagten holdt maaltro-pladen udenfor, fordi dens kasse regnede sin egen procentbredde ud fra 16:10 og ville forvrides af en haandregnet hoejde. Pladen udgik med L113, saa vagten matchede altid og var doed. Instruksen om at fjerne den stod i tests/dele/57-doed-css.mjs, grund 14. RETTET AF L78 (2. sep 2026): sidste linje sagde foer, at fotografiet blev "beskaaret proportionalt af den eksisterende cover-fit i system.css". Der er ingen cover-fit laengere. Loftet virker uaendret - men det INDPASSER nu billedet i de 190 px i stedet for at beskaere det, hvilket er praecis, hvad L78 vil have paa den flade, hvor maskinen skal ses. */ @media (max-width: 899px) { .robot-top { gap: var(--r4); } .robot-foto .billedled--stor { max-height: 190px; } } /* --- 9a-2. Noegletallene op ved siden af fotografiet (KRITIK-4 fund 4). Maalt paa 12 robotsider ved 1440 foer aendringen: hoejre spalte baerer producent, land, status, navn, vaegtklasse, chips og ét link — og derunder 175-343 px, hvor der staar INTET, ned til fotoets underkant. De fem noegletal, som er det laeseren kom efter, begyndte foerst under fotoet. Striben er derfor flyttet ind i .robot-top som tredje gridfelt (robot.mjs' top()). DOM-raekkefoelgen er uaendret laesbar: foto, navn, tal — saa en skaermlaeser og en tastaturbruger moeder dem i samme orden som foer, og under 1180 px staar siden praecis som i dag. Behold-punkt 4 i KRITIK-4 fredr aflaesningslinjen: fem felter, fast orden, tabellariske cifre. Den er urgot — kun ANTALLET AF SPALTER skifter i den smalle hoejrespalte, og tre spalter er ikke en ny form: det er praecis den arrangement, striben allerede bruger under 1180 px (l.576 nedenfor). */ .robot-noegletal { min-width: 0; margin-top: var(--r6); } /* Sektionens egen lodrette rytme (.sektion{padding-top:var(--r8)}) hoerer til mellem sidens sektioner, ikke inde i hovedet. Hovedets grid styrer nu afstanden; uden nulstillingen ville de 64 px laegge sig oven i grid-gap'et. */ .robot-noegletal > .sektion { padding-top: 0; } .robot-noegletal .stribe .v-tal { flex-wrap: nowrap; } .stribe .etiket.m-etiket { padding-left: var(--r2); } .stribe .etiket.m-etiket::before { top: 2px; bottom: 2px; left: 0; } /* MAALT AF spor/imp-robot 7. sep 2026: GITTERREGLERNE I DE TO BLOKKE HERUNDER RAMMER ALDRIG ROBOTSIDEN. robot.mjs skriver
, og system.css saetter `.typeskilt .robot-top` med grid-template-areas "navn navn" / "foto tal" plus `.typeskilt .robot-navn {grid-area:navn}` og de to soeskende. Specificiteten er 0,2,0 mod 0,1,0 her, saa TYPESKILT vinder i enhver bredde og uanset raekkefoelge. Maalt i browseren ved 1000 px: `.robot-navn` faar computed grid-column-start "navn", ikke "1", og navnet spaender begge spalter. generator.css' egen tegning (7fr/5fr, "foto navn" fra 1180 px) beskriver altsaa et layout, robotsiden ikke har haft, siden TYPESKILT kom. Konsekvensen for det, sporet aendrede: robot.mjs' top() skriver nu navn -> tal -> foto (foer: navn -> foto -> tal), fordi det foerste noegletal laa 782,9 px nede ved 390 px. Under 900 px er der ingen navngivne felter, saa DOM-ordenen er den, der taeller - og det er dér, aendringen virker (foerste tal: 782,9 -> 504,3 px). Fra 900 px op placerer TYPESKILT de tre felter ved navn, saa kompositionen er uaendret; det er MAALT, ikke skoennet. Reglerne staar uroert, fordi de ogsaa daekker producentsiden, og fordi et spor, der river dem ud, skal maale begge flader. Det, der IKKE er doedt i samme afsnit: `.robot-foto .billedled--stor` (max-height 190px under 900) og `.robot-noegletal > .sektion {padding-top:0}` - de har intet TYPESKILT-modstykke og virker. */ @media (min-width: 900px) { /* Mellem 900 og 1180 px er hoejrespalten for smal til baade navn OG fem tal. Striben spaender derfor hele bredden under hovedet — dagens billede. */ .robot-noegletal { grid-column: 1 / -1; } } @media (min-width: 1180px) { .robot-top { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); grid-template-areas: "foto navn" "foto tal"; column-gap: var(--r6); row-gap: var(--r5); } .robot-foto { grid-area: foto; } .robot-navn { grid-area: navn; } .robot-noegletal { grid-area: tal; margin-top: 0; } /* TO spalter, ikke tre. Foerste udgave af denne regel brugte tre, og det var en maalt REGRESSION i aflaesningslinjen: en tre-spaltet celle er 183 px, hvoraf vaerdiblokken faar 121 px - mod ~200 px i den gamle fem-spaltede stribe over hele bredden. Vaerdien ombroed derfor oftere, og maalt over 25 robotsider ved 1440 gik flerlinjede vaerdiblokke fra 20 af 125 til 30 af 125. Det er ikke en skoenhedsfejl. Det, der ombroed, var i vidt omfang HULMAERKET "ikke oplyst" - sidens signatur - som gik fra én til tre linjer. spor/typografi brugte hele sit spor paa at faa vaerdiblokkens hoejde ned; en celle, der er tre linjer hoej paa nogle robotter og én paa andre, goer striben til en liste igen. To spalter giver ~275 px pr. celle og ~219 px til vaerdiblokken - altsaa BREDERE end den oprindelige fem-spaltede stribe, ikke bare bredere end tre spalter. Prisen er én raekke mere i hoejden. FRAVALGT: at lade det imperiale chip staa paa egen linje. Det ville have gjort ombrydningen ENSARTET, men ikke faerre - og paa fx anybotics-anymal-x er alle fire ramte celler "ikke oplyst"-huller UDEN imperialt chip, saa den mekanisme rammer ikke aarsagen. */ .robot-noegletal .stribe--seks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .robot-noegletal .stribe--seks > li { border-left: 1px solid var(--linje); } .robot-noegletal .stribe--seks > li:nth-child(2n + 1) { border-left: 0; } .robot-noegletal .stribe--seks > li:nth-child(n + 3) { border-top: 1px solid var(--linje); } /* Med seks felter i to spalter danner cellerne et perfekt 3x2 gitter uden tomme felter, saa span 2 paa sidste celle bortfalder for .stribe--seks (L66). `.stribe--fem` er FJERNET herfra 3. sep 2026 (spor/testvend): den blev doed, da spor/robot3 tilfoejede et sjette noegletal og indfoerte .stribe--seks som robotsidens eneste fulde stribe (0 forekomster af klassetokenet "stribe--fem" i dist/, maalt over alle 216 sider). */ .robot-noegletal .stribe > li { padding: var(--r3h) var(--r3h) var(--r3h); gap: 10px; } /* FIGUREN staar paa 23px - og KUN figuren. Den gamle regel her ramte `.v` bredt (0,0,3,0) og slog dermed system.css' `.stribe .v-ikke,.stribe .v-billede{font-size:var(--fs-mikro)}` (0,0,2,0), som er de fire datatilstandes egen skala. Resultatet var, at "ikke oplyst" fik NOEJAGTIG samme sats som et oplyst tal - men KUN fra 1180 px op, hvor denne @media begynder. Maalt foer rettelsen: forholdet hul:tal var 0,45 ved 390-1179 px og præcis 1,00 fra 1180. Det er samme specificitetsfejl, DESIGN.md's changelog 24. aug 2026 beskriver som rettet - genindfoert her paa desktop alene, hvilket er grunden til at ingen af de eksisterende maalinger fangede den: de blev taget ved 390 og 1024. Haard begraensning 5 er ikke en skoenhedsregel: "ikke oplyst", "nej" og "0" SKAL se forskellige ud. `0` er en figur (`.v-tal.v-nul`) og bliver derfor staaende paa 23px; de fire ikke-figurer holdes ude med :not(), saa de falder tilbage paa deres egen sats i system.css (13px for v-ikke/v-billede, 18px for v-nej/v-ja). :not() frem for at skrive `.v-tal` direkte: maalt paa de 77 byggede robotsider baerer panelet i dag 310 `.v-tal`, 49 `.v-ikke` og 1 `.v-nej` og INGEN bar `.v` - men et felt med tekstvaerdi (`.v-tekst`) eller liste (`.v-liste`) kan lande her, saa snart skemaet aendrer sig, og skal saa stadig arve figurens sats. Undtagelsen navngiver derfor de fire tilstande, ikke det ene tilfaelde, vi ville beholde. */ .robot-noegletal .stribe .v:not(.v-ikke, .v-billede, .v-nej, .v-ja) { font-size: var(--fs-figur-s); } .robot-noegletal .stribe .krop > .v, .robot-noegletal .stribe .krop > .feltvaerdi { min-height: 26px; } .robot-noegletal .stribe .v-tal { flex-wrap: nowrap; } } .robot-foto { margin: 0; display: flex; flex-direction: column; gap: 0; } .robot-foto .billedled--stor { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .billedfod { display: flex; flex-direction: column; gap: 5px; background: var(--panel); border: 1px solid var(--linje); border-top: 0; border-radius: 0 0 var(--hjoerne) var(--hjoerne); padding: var(--r2) var(--r3); } .billedfod p { font-family: var(--mono); font-size: var(--fs-etiket); line-height: 1.45; color: var(--blaek3); display: flex; gap: 8px; align-items: flex-start; } .billedfod .prik { flex: none; width: 5px; height: 5px; border-radius: 99px; background: var(--hegn); margin-top: var(--r1h); } .billedfod .prik--klip { border-radius: 0; background: none; border: 1px dashed var(--hegn); width: 7px; height: 7px; margin-top: var(--r1h); } .robot-navn { display: flex; flex-direction: column; gap: var(--r3); background: var(--panel); border: 1px solid var(--linje); border-left: 3px solid var(--accent); border-radius: var(--hjoerne); padding: var(--r4) var(--r5); box-shadow: inset 0 1px 0 var(--stans); } .robot-navn .kort-ophav { gap: var(--r1h) var(--r3); } .robot-navn .kort-ophav .prod { font-weight: 700; color: var(--blaek); } .robot-navn .kort-ophav a.prod:hover { color: var(--blaek); text-decoration: underline; } .robot-navn h1 { margin: 0; } .robot-navn .aar { font-size: var(--fs-etiket); color: var(--blaek3); } .robot-navn .maerker { margin-top: var(--r0); } .robot-videre { margin-top: var(--r1); display: flex; align-items: center; } .robot-videre a { font-family: var(--mono); font-size: var(--fs-etiket); color: var(--blaek2); text-decoration: none; border-bottom: 1px dashed var(--linje); transition: color 0.1s ease, border-color 0.1s ease; } .robot-videre a:hover { color: var(--blaek); border-bottom: 1px solid var(--blaek); } /* VARIANTNAVNENE ER DATA, IKKE KNAPPER. Her stod flade + ramme + radius — den grammatik, kataloget bruger paa sine KLIKBARE filterchips, og samme container som `.maerke` lige ovenover. Maalt 28. aug 2026 paa /da/robotter/unitree-go2/: `.variantnavn` og `.maerke` delte flade (#F7F8FA), ramme (1px solid #E3E5E9) og radius (6px) tegn for tegn, saa fire doede stod paa raekke under to andre bokse og lignede et saet, man kunne slaa til og fra. En raekke korte, ens boksede ord er tag-vaelgerens signatur, uanset hvor praecist de rammer filterchippens maal. Grebet er derfor ikke at variere boksen, men at FJERNE den: navnene saettes som sidens egne VAERDIER — mono, fuld blaek, vaegt 700, samme sats som `.variant dd` — og luften mellem dem goer resten (gab 10 -> 14 px, fordi ordene ikke laengere har en ramme til at holde dem fra hinanden). Oplysningen er uaendret; formen kan ikke laengere forveksles med noget, man trykker paa. Faerre streger, jf. L40. */ .robot-varianter { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0; } .robot-varianter .etiket { display: inline; flex: none; } .variantnavn { font-family: var(--mono); font-size: var(--fs-data); font-weight: 700; color: var(--blaek); letter-spacing: 0.02em; white-space: nowrap; } /* --- 9b. Advarsler/varianter under nøgletalsstriben, foldet (opgave 1) ----- Fem stribefelter kan hver bære en advarsel- eller variantboks. Åbnet som standard stod de som venstrestillede blokke med tom højrespalte ved siden af sig — op til fem korte, brede paneler i træk. Foldet bag
: teksten er UÆNDRET, kun standardtilstanden er lukket. Selve nøgletalsstriben og dens fire datatilstande er urørt — kun de SUPPLERENDE afvigelses-/variantnoter foldes (robot.mjs, stribe()). */ .stribe-under-fold { margin-top: var(--r4); } .stribe-under-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-mikro); font-weight: 500; color: var(--blaek2); padding: var(--r2h) var(--r0); border-top: 1px solid var(--linje); } .stribe-under-fold > summary::-webkit-details-marker { display: none; } .stribe-under-fold > summary::before { content: "+"; font-family: var(--mono); color: var(--blaek3); width: 1em; text-align: center; } .stribe-under-fold[open] > summary::before { content: "–"; } .stribe-under-fold > summary:hover { color: var(--blaek); } .stribe-under-fold > summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; } .stribe-under-krop { padding-top: var(--r2); } .stribe-under { margin-top: var(--r3); } .stribe-under:first-child { margin-top: 0; } .stribe-under > .etiket { margin-bottom: var(--r0); } .stribe-under .advarsel { margin-top: var(--r1); } /* Robotsidens EGEN, fulde stribe (seks felter — ikke kortets kompakte to). */ .stribe--seks { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1180px) { .stribe--seks { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stribe--seks > li:nth-child(3n + 1) { border-left: 0; } .stribe--seks > li:nth-child(n + 4) { border-top: 1px solid var(--linje); } } @media (max-width: 680px) { .stribe--seks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stribe--seks > li { border-left: 1px solid var(--linje); border-top: 1px solid var(--linje); } .stribe--seks > li:nth-child(2n + 1) { border-left: 0; } .stribe--seks > li:nth-child(-n + 2) { border-top: 0; } } .typeskilt .stribe-hoved h2, .typeskilt .sektion-hoved h2, .typeskilt .skema__hoved h2 { font-family: var(--display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-transform: none; color: var(--blaek); margin: 0; } /* Prisvisning (L66, JPK 3. sep 2026): omregnet USD-pris og producentens egen kildepris. */ .pris-par { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .stribe-kildepris { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--mono); font-size: var(--fs-etiket); line-height: 1.3; color: var(--blaek3); margin-top: var(--r0); } .stribe-kildepris .v { font-size: var(--fs-etiket) !important; min-height: auto !important; color: var(--blaek2); gap: 0.2em; display: inline-flex; } .stribe-kildepris .num { font-size: var(--fs-etiket) !important; font-weight: 600; letter-spacing: normal; } .stribe-kildepris .enhed { font-size: var(--fs-gulv) !important; color: var(--blaek3); } .stribe-kildepris .op { font-size: var(--fs-data) !important; color: var(--blaek3); } .stribe-kildepris .kildemaerke { font-size: var(--fs-gulv); } .advarsel-navn { display: block; font-family: var(--mono); font-size: var(--fs-etiket); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blaek); margin-bottom: var(--r0); } .advarsel, .feltnote, .anvendelse-citat { overflow-wrap: anywhere; word-break: break-word; } /* .v-tekst har allerede en regel i §4 ovenfor; kun .v-liste manglede. */ .v-liste { display: inline-flex; flex-wrap: wrap; gap: 5px; } .v-liste code { font-family: var(--mono); font-size: var(--fs-mikro); color: var(--blaek2); background: var(--panel-ro); border: 1px solid var(--linje); border-radius: var(--hjoerne); padding: var(--r0) var(--r2) var(--r0); } /* --- 9d. Døren ud til producenten ------------------------------------------ */ .typeskilt .produktside { padding: var(--r3h) var(--r4) var(--r4); background: var(--panel); border: 1px solid var(--linje); border-left: 3px solid var(--accent); border-radius: var(--hjoerne); box-shadow: inset 0 1px 0 var(--stans); max-width: 76ch; margin-top: var(--r5); } .typeskilt .produktside .sektion-hoved { margin-bottom: var(--r1h); } .typeskilt .produktside .knap { margin-top: var(--r2); } .typeskilt .produktside .produktside-url { margin-top: var(--r1); font-family: var(--mono); color: var(--blaek3); overflow-wrap: anywhere; max-width: 70ch; } /* POLISH (spor/imp-robot, 7. sep 2026). "Se alle modeller fra " flyttede hertil fra hovedet, hvor `.typeskilt .robot-videre{margin:0}` var rigtigt: dér stod den i en flex-kolonne med sit eget gap. Her landede den klistret op ad URL-linjen og laeste som en fodnote TIL adressen, ikke som sidens anden udgang. En haarstreg og 12 px skiller dem nu ad. */ .typeskilt .produktside .robot-videre { margin-top: var(--r3); padding-top: var(--r3); border-top: 1px solid var(--linje); } /* --- 9e. Anvendelsen -------------------------------------------------------- */ .anvendelse-citat { margin: var(--r3) 0 var(--r3); padding: var(--r3h) var(--r4) var(--r4); background: var(--panel); border: 1px solid var(--linje); border-left: 3px solid var(--accent); border-radius: var(--hjoerne); max-width: 76ch; } .anvendelse-citat .etiket { margin-bottom: var(--r1h); } .anvendelse-citat p + p { margin-top: var(--r2); } .anvendelse-citat p:not(.etiket) { font-size: var(--fs-felt); line-height: 1.5; color: var(--blaek); } /* Arven skal SES, med grundmodellens navn og et rigtigt link (L23, opgave 4c) — ikke den raa slug uden markering, det gamle .arvet skrev. Baerer sin egen fulde typografi (samme tal som .t-mikro) i stedet for at dele klasse med den: robot.mjs' markup skal kunne testes paa netop denne ene BEM-klasse alene (class="anvendelse__arv", ikke "t-mikro anvendelse__arv"). */ .anvendelse__arv { font-size: var(--fs-mikro); line-height: 1.5; font-style: normal; color: var(--blaek3); } .anvendelse__arv a { color: var(--blaek3); text-decoration-thickness: 1.5px; } /* L76: samme moenster som .retur - hover gik FRA --blaek3 (4,74 : 1) TIL accent (1,38 : 1). Nu loefter den til --blaek, og accent staar i stregen. */ .anvendelse__arv a:hover { color: var(--blaek); text-decoration-color: var(--accent); } .anvendelse__note { margin-top: var(--r1); } /* --- 9f. Det fulde skema, sammenklappet ------------------------------------ */ .skema { margin-top: var(--r7); background: var(--panel); border: 1px solid var(--linje); border-radius: var(--hjoerne); box-shadow: var(--skygge); } .skema > summary { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; min-height: 56px; padding: var(--r3h) var(--r5); cursor: pointer; list-style: none; border-radius: var(--hjoerne); } .skema > summary::-webkit-details-marker { display: none; } .skema > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: var(--fs-h3); font-weight: 500; color: var(--blaek3); line-height: 1; } .skema[open] > summary::after { content: "–"; } .skema[open] > summary { border-radius: var(--hjoerne) var(--hjoerne) 0 0; border-bottom: 1px solid var(--linje); } .skema > summary:hover { background: var(--panel-ro); } .skema > summary:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; } .skema-taeller { font-size: var(--fs-mikro); font-weight: 500; color: var(--blaek2); } .skema-gruppe + .skema-gruppe { margin-top: var(--r5); } .skema-gruppe h3 { padding-bottom: var(--r2); border-bottom: 1px solid var(--linje); margin-bottom: var(--r1); } .typeskilt .skema-tabel thead th { font-size: var(--fs-etiket); letter-spacing: 0.12em; } .typeskilt .skema-gruppe:not(:first-of-type) .skema-gruppenavn th { border-top: 2px solid var(--blaek3); padding-top: var(--r5); } .typeskilt .skema-gruppenavn th { font-size: var(--fs-etiket); color: var(--blaek); letter-spacing: 0.18em; padding-bottom: var(--r2); border-bottom: 1px solid var(--linje); } @media (max-width: 720px) { .typeskilt .skema-gruppe:not(:first-of-type) .skema-gruppenavn th { padding-top: var(--r2); } } @media (max-width: 560px) { .skema > summary { padding: var(--r3h) var(--r4); } /* Kun paa disse to sider. .raekke er en delt komponent — en aendring af dens ombrydning ville ogsaa ramme katalogsidens producentindeks. */ .robotside .raekke, .producentside .raekke { grid-template-columns: minmax(0, 1fr); } } /* --- 9g. Noter og kilder ----------------------------------------------------- */ /* MAALT 7. sep 2026 (spor/imp-robot, typeset): `max-width:82ch` stod her, og den var GRUNDEN til, at `.maal` paa
    ikke bed. Begge selektorer vejer 0,1,0, og generator.css indlaeses efter system.css, saa 82ch vandt paa raekkefoelge alene. Maalt i browseren ved 1440 px: noternes linjer loeb 82,8ch - praecis den vaerdi, der stod her. Maalet er flyttet ned paa
  • , hvor skriftgraden faktisk saettes (--fs-lille, 15px). Paa
      ville 68ch vaere regnet i den ARVEDE 17px, altsaa 672 px, som ved 15px svarer til 77 tegn - stadig over de 75, maalet handler om. Et ch-maal skal staa dér, hvor skriften staar. */ .noter { display: flex; flex-direction: column; gap: 10px; padding-top: var(--r3); } /* overflow-wrap (fund/arkiv/2026-08/FUND-detalje.md, opgave 1-regressionssweep): en note kan baere en raa URL uden mellemrum (fx xiaomi-cyberdog-1/2's dokumentation af en JS-bundle-kilde) - uden ombrydningen skubber den .noter li 56 px ud over sin ramme ved 360 px, en horisontal overloeb-fejl der var til stede FOER dette spor ogsaa (bekraeftet mod grenens startpunkt), men som denne migrering nu retter, fordi klassen endelig har en regel at rette i. Samme "ombryd hellere end skub ud af sporet"-princip som .stribe .v (system.css). */ .noter li { font-size: var(--fs-lille); line-height: 1.55; color: var(--blaek2); padding-left: var(--r4); border-left: 2px solid var(--linje); overflow-wrap: break-word; max-width: var(--maal); } .kilder .kildeliste { padding-top: var(--r4); } /* Samme grund som .noter li: maalet skal regnes i den skrift, linjen har. Kildelinjerne stod 133,1ch brede (13px i en 1.160 px kolonne) foer. */ .kilder .kildeliste li { font-size: var(--fs-mikro); max-width: var(--maal); } .kilder .url { display: inline-block; padding: var(--r1h) 0; min-height: 24px; } .kilder .kildeliste .hvad { color: var(--blaek2); } /* --- 9h. Producentsiden ------------------------------------------------------ */ .producent-top { margin-top: var(--r4); background: var(--panel); border: 1px solid var(--linje); border-left: 3px solid var(--accent); border-radius: var(--hjoerne); padding: var(--r4) var(--r5); box-shadow: inset 0 1px 0 var(--stans); display: flex; flex-direction: column; gap: var(--r4); } .producent-fakta { display: inline-flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; } .producent-fakta > div { display: flex; flex-direction: column; gap: var(--r1); padding: 0 var(--r4); border-left: 1px solid var(--linje); } .producent-fakta > div:first-child { border-left: 0; padding-left: 0; } .producentside .kort__prod { display: none; } .producent-fakta .etiket { font-family: var(--mono); font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em; color: var(--stoev-blaek); text-transform: uppercase; } .producent-fakta dd { font-family: var(--mono); font-size: var(--fs-broed); font-weight: 600; color: var(--blaek); min-height: 26px; display: inline-flex; align-items: center; } .producent-fakta .figur { font-family: var(--mono); font-size: var(--fs-figur-s); font-weight: 700; font-variant-numeric: tabular-nums; } .producent-fakta .hjemsted { font-family: var(--manual); font-weight: 600; } .sektion-hoved .tal { color: var(--blaek); font-weight: 500; } .producentside .gitter { padding-top: var(--r4); list-style: none; margin: 0; padding-inline: 0; } .producentside .gitter > li { display: flex; } .producentside .gitter > li > .kort { flex: 1; } .producentside .kort-krop { padding-bottom: var(--r4); } .robotside > .sektion, .producentside > .sektion { padding-top: var(--r6); } .producentside .net--fritstaaende:has(> .kort:only-child) { max-width: 360px; } .producentside .net--fritstaaende:has(> .kort:nth-child(2):last-child) { max-width: 720px; } /* Producentindekset (F1, /producenter/): tre adskilte kolonner navn/land/ modeller i stedet for én sammenklistret
      -streng ("Kina 13 modeller") - spor/producent, punkt 1, 26. aug 2026. .raekker/.raekke (system.css) er en delt 2-kolonne-komponent ejet af et andet spor og bruges IKKE her; en rigtig
giver tre selvstaendige celler og fylder .rum's fulde bredde i stedet for at efterlade over halvdelen tom. .figur (system.css) laegger allerede font-variant-numeric: tabular-nums paa modeltallet - kun hoejrestillingen tilfoejes her. */ .prod-tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--linje); border-radius: var(--hjoerne); padding: var(--r4) var(--r5); margin-top: var(--r4); } @media (max-width: 600px) { .prod-tabel-wrap { padding: var(--r3) var(--r3h); } } /* R7 (spor/prodtabel, 4. sep 2026): min-width:0 er ikke pynt - det er hele rettelsen af R7, og aarsagen laa ikke, hvor designplanen ledte. MAALT foer rettelsen ved 390 px, begge sprog: .prod-tabel-wrap havde clientWidth 358 og scrollWidth 620 - 262 px skjult. Kolonnen LAND begyndte ved x=434,3 (da) / 408,5 (en) mod en hoejre kant paa 374, saa LAND var ikke "klippet midt i ordet" som planen skrev: den var HELT usynlig, og det samme var ANTAL. Kun PRODUCENT var paa skaermen. AARSAGEN er IKKE de laaste 20ch/12ch-bredder nedenfor. De er allerede sat til `auto` af @media (max-width:899px) i bunden af dette afsnit, og en proeve med `table-layout:fixed;width:100%` flyttede intet. Aarsagen er system.css' bare elementregel table{border-collapse:collapse;width:100%;min-width:620px;font-size:var(--fs-lille)} Den er skrevet netop TIL denne tabel dengang den var bred, og de 620 er praecis den scrollWidth, der blev maalt. Paa en telefon binder det gulv tabellen til 620 px inde i en 358 px bred kasse. Faelden er allerede navngivet to steder i dette repo - .saml-matrix (afsnittet ovenfor: "min-width:620px er den farligste af dem") og .typeskilt .skema-tabel (system.css) - og begge lukker den med praecis `min-width:0` paa deres egen tabelklasse. Det er derfor ingen ny opfindelse, men den tredje anvendelse af en kendt lokal neutralisering: system.css §14 staar uroert for de sider, der bygger paa den, og reglen her ligger inden for sporets ejerskab (.prod-tabel*). INGEN NY BREDDE TILFOEJES. Med gulvet vaek fordeler `table-layout:auto` selv: maalt ved 390 px bliver LAND 73,5 px og ANTAL 43,6 px (deres max-content), og PRODUCENT faar resten - 241 px, hvor kun EEN af 25 producenter ombryder ("Shandong Youbaote Intelligent Robot", to linjer). Ingen celle faar vandret overloeb (scrollWidth > clientWidth paa 0 af celler ved ti bredder x to sprog). Et haandskrevet tal her ville vaere det udledte tals konkurrent - se D7/L30. VED >=900 PX AENDRER DEN INTET: tabellen er `width:100%` af et rum, der er bredere end 620, saa gulvet var allerede uden virkning. Maalt ved 1440 px foer og efter: PRODUCENT 237,1 / LAND 174,3 / ANTAL 104,6 / MODELLER 836,0 - identisk. */ .prod-tabel { min-width: 0; } .prod-tabel th, .prod-tabel td { padding: var(--r3) var(--r4) var(--r3) 0; text-align: left; border-top: 1px solid var(--linje); vertical-align: baseline; } .prod-tabel thead th { border-top: 0; padding-bottom: var(--r2); font-size: var(--fs-mikro); font-weight: 600; color: var(--blaek3); text-transform: uppercase; letter-spacing: 0.02em; } .prod-tabel tbody tr:first-child td { border-top: 1px solid var(--linje); } .prod-tabel tbody tr { transition: background-color 0.1s ease; } .prod-tabel tbody tr:hover td { background: var(--stans); } /* L76: 1,38 : 1 paa hvert link i tabellen. --blaek + arvet understregning. */ .prod-tabel a { color: var(--blaek); font-weight: 600; display: inline-flex; align-items: center; min-height: 24px; } .prod-tabel th.figur, .prod-tabel td.figur { text-align: right; padding-right: 0; } .prod-tabel th:nth-child(2), .prod-tabel td:nth-child(2) { width: 20ch; } .prod-tabel th:last-child, .prod-tabel td:last-child { width: 12ch; } /* --- producentindeks (spor/prodindeks) --- Punkt 1, 1. sep 2026: JPK bad om en fjerde kolonne med modelnavnene efter Antal (tools/skabelon/producent.mjs's hovedkommentar ved renderIndeks). Den kolonne var kun markup i mellemtilstanden 685e888; her faar den sin CSS. To ting fra 3-kolonne-aeraen ovenfor skal RETTES, ikke lades uroert: - th:last-child/td:last-child{width:12ch} (linjen lige over) fulgte foer .figur, fordi .figur DENGANG var sidste barn i DOM'en. Nu er .prod-navne sidst, saa :last-child rammer DEN i stedet - ogsaa naar den er skjult under 900px, for display:none flytter ikke DOM-positionen. .figur mister dermed sin smalle bredde, og .prod-navne faar den forkert. Rettet ved at give .figur sin egen eksplicitte bredde tilbage og .prod-navne fri bredde, saa 390px-visningen bliver den, den var foer dette spor. - .prod-tabel a gaelder alle links i tabellen, producentnavnet inklusive. For ni GENISOM AI-modellers navne i traek ville fuld vaegt paa hvert enkelt navn vaere for meget. Kun cellen daempes til --blaek3; cellens EGNE links loefter sig til fuld --blaek, saa kommaerne mellem navnene traeder tilbage af sig selv uden at faa deres egen klasse (producent.mjs's egen begrundelse, mellemtilstandens hovedkommentar). RETTET AF L76 (2. sep 2026): grundreglen var `.prod-tabel a{color:var(--accent)}` (1,38 : 1), og daempningen blev dengang beskrevet som "til --blaek, ikke accent". Grundreglen ER nu --blaek, saa daempningen til --blaek3 og loeftet tilbage til --blaek staar uaendret - kun praemissen om accent er vaek. - .figur's padding-right:0 (linje 1166) forudsatte, at .figur var sidste kolonne - der var intet efter, som skulle skilles fra. Nu staar .prod-navne lige efter, med samme 0-venstre-polstring som alle andre celler (linje 1159's shorthand), saa tallet og det foerste modelnavn ville staa klaebet sammen ("2Trakr 5") uden en eksplicit venstrepolstring her - maalt paa det foerste skaermbillede, foer denne linje blev tilfoejet. */ .prod-tabel td.figur, .prod-tabel th.figur { width: 12ch; } .prod-tabel td.prod-navne, .prod-tabel th.prod-navne { width: auto; padding-left: var(--r4); } .prod-tabel td.prod-navne { color: var(--blaek3); } .prod-tabel td.prod-navne a { color: var(--blaek); display: inline-block; padding: 2px 4px; } @media (max-width: 899px) { .prod-tabel th.prod-navne, .prod-tabel td.prod-navne { display: none; } .prod-tabel th:nth-child(2), .prod-tabel td:nth-child(2) { width: auto; } .prod-tabel td.figur, .prod-tabel th.figur { width: auto; min-width: 5ch; } } /* Den beregnede fordelingssaetning under overskriften (spor/producent, punkt 2, 26. aug 2026) - samme brede maal som t-broed andre steder, saa linjen ikke straekker sig over hele .rum's 1440px og bliver svaer at laese. */ .producent-fordeling { padding-top: var(--r3); max-width: 70ch; font-family: var(--manual); } /* --- 9i. Feltmarkør: værdien varierer mellem modelvarianter (opgave 4c) ---- Kun en prikket underkant — ingen ny farve, ingen ny komponentfamilie. */ .maerke--varianter { border-bottom: 1px dotted var(--hegn); } /* --- 9j. Print --------------------------------------------------------------- */ @media print { .retur { display: none; } .skema[open] > summary::after, .skema > summary::after { content: ""; } .skema { box-shadow: none; } .skema, .skema > * { display: block !important; } .stribe-under-fold, .stribe-under-fold > * { display: block !important; } .kort, .stribe { box-shadow: none; } .kilder .url { text-decoration: none; color: var(--blaek); } } /* ============================================================================= 20. KATALOGSIDEN SOM TYPESKILT (spor/katalog, 31. aug 2026, L54/L57) ----------------------------------------------------------------------------- Retningskontrakt: retninger/nyverden/katalog.html + MANIFEST.md. Tesen: filtret er ikke et sidepanel. Det er pladen, kataloget er boltet paa. Derfor ligger det som en fuldbredde, stanset plade - ikke i en venstreskinne. OVERSAT, IKKE KOPIERET. Compens egen typeskilt.css har sine egne :root-variable; her bruges systemets tokens, som spor/fundament allerede satte til de samme vaerdier (system.css §2). To steder afviger vi bevidst fra compens tal: 1. RADIUS. Compen skriver 3px paa .plade__krop og 1px paa maaleren. Begge ligger uden for skalaen 0/2/6/8/12 + 99px, som tests/dele/31-pudsning.mjs haandhaever - og 3px er praecis den slags tal, der opstaar, naar nogen skoenner i stedet for at vaelge fra skalaen. Her staar 2px: typeskiltets stansning, samme trin som primitiven `.stans`. 2. SORTERINGEN er radioknapper, ikke kan ikke drive `order` uden JavaScript. Se 20i. Alt kortarbejde er scopet under `.net`. `.kort` deles med forsiden og producentsiderne, som IKKE er bygget om i dette spor; en uscopet regel her ville bygge de to andre flader om ved et uheld. ========================================================================== */ /* --- 20a. Fladen ---------------------------------------------------------- */ /* Pladens skrift er Saira (var(--mono) - se system.css' note om navnet): paa et typeskilt staar etiketter OG tal i samme snit. Prosaen er Literata. */ .aabning, .plade, .resultat { font-family: var(--mono); letter-spacing: 0; } .aabning__under, .aabning__note, .facet-omfang { font-family: var(--manual); } /* Den stansede plade. `.stans` (system.css) giver 2px radius og den indfaeldede 1px kant med hvid lyskant; her kommer kun fladen og overflow-klipningen til, saa de indre haarstreger stopper ved kanten. */ .aabning__krop, .plade__krop { background: var(--panel); overflow: hidden; border-left: 3px solid var(--accent); } /* --- 20b. Aabningen: de seneste modeller --------------------------------- JPK's tillaeg 31. aug 2026. Sat af ROBOTTER, ikke af en paastand - svaret paa D20. Aarstallet er stemplet som et stort tal i pladens hoejre side, samme greb som stempelblokken paa filterpladen nedenfor. */ .aabning { padding-top: var(--r4); } .aabning__hoved { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--r5); align-items: start; padding: var(--r4) var(--r5) var(--r3); border-bottom: 1px solid var(--linje); } /* Graden er --fs-h1 siden 9. sep 2026 (L111): katalogets aabningstitel er et

, og JPK bad om én h1-grad paa hele sitet. --fs-display-titel havde ingen anden forbruger og er slettet fra skalaen. */ .aabning__titel { margin: 0; font-size: var(--fs-h1); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; max-width: 16ch; } .aabning__under { margin-top: var(--r2h); font-size: var(--fs-lille); line-height: 1.5; color: var(--blaek2); max-width: 64ch; } .aarstempel { display: grid; justify-items: end; gap: 2px; align-self: start; text-align: right; margin: 0; } .aarstempel__tal { font-size: var(--fs-display-stor); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--blaek); font-variant-numeric: tabular-nums; padding-bottom: var(--r1h); border-bottom: 3px solid var(--accent); } .aarstempel__ord { font-size: var(--fs-etiket); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--stoev-blaek); } /* Kvalifikationen staar HER, hvor udvalget vises - ikke i en fodnote. De uden aarstal maa aldrig komme til at se gamle ud: "ikke oplyst" er en tavshed, ikke en aargang (haard begraensning 5). */ .aabning__baand { padding: var(--r3) var(--r5); border-bottom: 1px solid var(--linje); } /* GRUPPETITLEN — katalogets ene etiketrolle (impeccable typeset, 7. sep 2026). Katalogsiden bar FIRE

paa fire grader: 11,5 (denne) · 14 (.resultat__titel) · 27 (.plade__titel) · 27 (tegnforklaringens .t-h2), maalt i browseren ved 1440 px. Ingen anden flade paa sitet har mere end een. MEN TO AF DE FIRE ER SLET IKKE OVERSKRIFTER, og det er hele forklaringen: ".plade__titel" og tegnforklaringens h2 er ægte sektionsoverskrifter, og de er ALLEREDE enige (begge --fs-display-lille). Denne her og ".resultat__titel" er versaletiketter, der navngiver en gruppe kort — samme rolle som filterpanelets ".facet__navn" (9 stk). De skal derfor ikke have en overskriftsgrad; de skal have etiketrollens grad, og den er besluttet i forvejen: system.css' ".udtraek"-blok satte panelets etiketter til --fs-etiket med .09em sperring. De to sidste etiketter foelger nu med. .16em -> .09em. Ingen ny vaerdi indfoeres, og graden er uroert. RETTELSE 9. sep 2026 (spor/typeskala): saetningen ovenfor om, at ".plade__titel" og tegnforklaringens h2 "er ALLEREDE enige (begge --fs-display-lille)", passer ikke mere. Tegnforklaringens overskrift er flyttet til --fs-h3, fordi den samme komponent stod paa 19px paa Om os og 27px her - se den fulde begrundelse ved ".tegnforklaring__navn" oeverst i denne fil. ".plade__titel" er uroert paa --fs-display-lille. Sætningen faar denne note frem for at blive slettet: den forklarer stadig, hvorfor de to ETIKETTER ser ud, som de goer. OG SENERE SAMME DAG (spor/h1-noegle): overskriften baerer ikke laengere .t-h2. Linjen ovenfor, der taeller "27 (tegnforklaringens .t-h2)", er derfor historik - klassen er .tegnforklaring__navn nu, og .t-h2 har én grad paa sitet. */ .aabning__flok { margin: 0; font-size: var(--fs-etiket); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blaek); } .aabning__note { margin-top: var(--r1h); font-size: var(--fs-mikro); line-height: 1.5; color: var(--stoev-blaek); max-width: 78ch; } /* --- 20c. Typeskiltets hoved --------------------------------------------- */ .plade { padding-top: var(--r5); } .plade__hoved { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--r5); align-items: start; padding: var(--r5) var(--r5) var(--r4); border-bottom: 1px solid var(--linje); } .plade__titel { margin: 0; font-size: var(--fs-display-lille); font-weight: 700; line-height: 1.06; letter-spacing: -0.014em; text-transform: uppercase; text-wrap: balance; } /* Stempelblokken ER signaturen (MANIFEST "Signaturelementet"): TYPE · UDGAVE · POSTER · OPLYSTE FELTER, stanset til hoejre. */ .stempler { display: grid; grid-template-columns: auto auto; gap: 3px var(--r4); margin: 0; } .stempel { display: contents; } .stempler dt { font-size: var(--fs-etiket); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--stoev-blaek); grid-column: 1; } .stempler dd { margin: 0; font-size: var(--fs-raekke); font-weight: 600; text-align: right; letter-spacing: 0.02em; grid-column: 2; font-variant-numeric: tabular-nums; } /* --- 20d. Chippen og maaleren: det, der BOEDE i strimlen ------------------ AFSNITTET HED "Strimlen: den klaebende etage" indtil 8. sep 2026, og .strimmel selv stod her: en klaebende, moerk fuldbredde-bar med background:var(--fod), position:sticky, z-index:40 og --ring:var(--accent). BAREN ER VAEK (JPK 8. sep 2026, ordret: "Nu kan 14/150 og RESET lige saa godt komme ned paa den anden linje hvor 'SLECTED' staar"). Tilbage staar de dele, der boede i den og nu bor i .valgbaand: chippen med sit kryds og resultatmaaleren. Baandets eget layout staar i 20e. DEN VIGTIGE KONSEKVENS ER FARVERNE, IKKE FLYTNINGEN. Alt hernede var tegnet til en MOERK flade og staar nu paa en LYS. Hver farve er derfor genafgjort mod DESIGN.md's forgrundsregel DP1 (DESIGN.md:515) - se de tre kommentarer ved .taeller__tal, .taeller__af og .taeller-omfang. --ring:var(--accent) FORSVANDT MED BAREN, og det er en gevinst, ikke et tab: en accent-fokusring paa lys flade er 1,38:1 mod WCAG 1.4.11's 3,0 (DP1 type 3, FORBUDT). RESET falder nu tilbage paa den sikre --ring:var(--blaek) fra DP1b. `.plade .strimmel{padding:...}` staar STADIG i assets/system.css:1917 og er doed CSS efter denne aendring. Sporet ejer ikke den fil - den er meldt i fund/FUND-valgbaand.md. */ .valgliste { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; min-width: 0; } /* Hver mulig markering har sin egen
  • . De staar skjult og taendes af de genererede regler i katalog.mjs (5c) - byggetidsviden i stedet for en taelling, CSS ikke kan lave. */ .valg { display: none; align-items: center; gap: 8px; background: var(--accent); color: var(--blaek); padding: var(--r1) var(--r1h) var(--r1) var(--r2h); border-radius: var(--hjoerne); font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .valg__navn { min-width: 0; } /* .knap--kryds: knapprimitivens IKON-KVADRAT. Her stod `.valg__fjern`. DEN ENESTE VARIANT UDEN FLADE I NAVNET, og det er selve pointen: krydset saetter ingen forgrund, saa det arver chippens. `.valg` er `background:var(--accent);color:var(--blaek)`, altsaa en TREDJE flade ud over lys og moerk - den gule - og dér giver arven blaek paa gul = 9,19:1 uden at nogen har skullet vide det. Det er `color:inherit` i primitiven, der goer det muligt; en variant med en haardkodet forgrund ville have skullet gaette chippens farve. Fladen er en TONE af chippens eget blaek, ikke en ny farve: 14 % gunmetal oven paa gult laeser som en fordybning i chippen frem for et fremmedlegeme. BEROERINGSMAALET ER 18x18 og dermed under WCAG 2.5.8's 24x24. Det er uaendret fra foer L77 - primitiven hverken forbedrer eller forvaerrer det - og staar noteret som fund i agentrapporten, ikke rettet: designfrysen (L70) siger, at et fund noteres. Rettelsen er ikke gratis, fordi chippen er 26 px hoej i alt. */ .knap--kryds { display: grid; place-items: center; width: 18px; height: 18px; min-height: 0; padding: 0; gap: 0; flex: none; background: rgba(34, 38, 42, 0.14); } /* L76 GENNEMGAAET, BEHOLDT: accent staar her PAA --blaek = 9,19 : 1. Krydset er den ene variant, der IKKE tager familiens gule hover: dens hvileflade ER gul (chippen), saa en gul hover ville vaere usynlig. Den vender i stedet chippens to farver om. */ .knap--kryds:hover { background: var(--blaek); color: var(--accent); } .valg__kryds { display: block; } /* `margin-left:auto` og `padding-left` stod her og staar nu paa `.valgbaand__maal` i 20e - taelleren skubber ikke laengere sig selv, den rejser med RESET i en gruppe, ombrydningen ikke kan skille ad. */ .taeller { display: flex; align-items: baseline; gap: 9px; } /* DP1 GENNEMFOERT 8. sep 2026, OG TALLET VENDTE. Her stod: "L76 GENNEMGAAET, BEHOLDT: .strimmel staar paa --fod (= gunmetal), saa tallet er accent PAA blaek = 9,19 : 1 - den moerke flade, hvor L76 udtrykkeligt tillader accent som tekst." Den saetning var sand, saa laenge maaleren stod i den moerke bar. Baren er vaek, og SAMME token paa den LYSE flade er 1,38 : 1 - DP1 type 1 og 2 (DESIGN.md:546-547), FORBUDT mod WCAG's 4,5. Forgrunden er derfor --blaek (12,72 : 1 paa --bund). Det er DESIGN.md's egen faelde, ordret: "et kontrasttal uden en laeseretning er ikke et tal". Tallet 9,19 var maalt som accent PAA gunmetal og gjaldt aldrig den anden vej. UNDERSTREGNINGEN BLIVER, OG DEN ER LOVLIG PRAECIS FORDI TEKSTEN OVER DEN NU ER BLAEK: DP1 type 5 (DESIGN.md:551), ordret "rent dekorativ forgrund, hvor betydningen baeres af noget andet i samme element - fx en understregning under en blaek-tekst" - tilladt paa begge flader, uden kravtal. Betydningen baeres af cifrene; stregen er ren markering. Havde tallet selv vaeret gult, ville stregen have vaeret type 4 og forbudt. TABULAERE CIFRE OG `stempl` ER UROERTE: tallet skifter, naar der filtreres, og proportionale cifre ville faa det til at hoppe. */ .taeller__tal { font-size: var(--fs-figur-m); font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--blaek); font-variant-numeric: tabular-nums; padding-bottom: var(--r1h); border-bottom: 3px solid var(--accent); animation: stempl 0.32s var(--slyng) both; } /* --paafod2 er stoevgraa TIL GUNMETAL (5,94 : 1) og maaler 1,7 : 1 paa lys bund. --stoev-blaek er den lyse flades tilsvarende daempede trin, 4,74 : 1 paa --bund (system.css:1994's egen maaling af .knap--tekst) - over WCAG's 4,5 for lille tekst. Det er samme token, .valgbaand__mrk bruger to sektioner laengere nede, saa etiketten og maalerens efterled taler med samme stemme paa samme raekke. */ .taeller__af { font-size: var(--fs-mikro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stoev-blaek); } /* Det ENESTE autoreret oejeblik paa siden (MANIFEST "Layouttesen"): taelleren stempler, naar tallet skifter. */ @keyframes stempl { from { opacity: 0.35; letter-spacing: 0.06em; } to { opacity: 1; letter-spacing: -0.01em; } } /* Samme flytning fra moerk til lys flade som .taeller__af ovenfor. */ .taeller .taeller-omfang { color: var(--stoev-blaek); } /* NULSTIL-KNAPPEN. `type="reset"` er hele mekanikken: den stiller formularen tilbage til sine `checked`-attributter - altsaa til L56's standardtilstand, udgaaede skjult - UDEN JavaScript. Et link til #alle kunne kun rydde :target. L77: her stod `.nulstil` - den knap, primitivens STEMME kommer fra (mono, versaler, spaerret). Selve reglen er vaek, fordi knapprimitiven nu siger det samme for hele sitet. VARIANTEN SKIFTEDE 8. sep 2026, fordi FLADEN skiftede. Her stod, at knappen er `.knap--kant-moerk`, fordi den staar i .strimmel paa `background:var(--fod)`. Strimlen findes ikke mere; knappen staar i `.valgbaand`, som er en LYS flade, og varianten er derfor `.knap--kant`. Kontrasten er den samme - blaek paa bund = 12,72:1, praecis som paafod paa fod var det. Ordet "-moerk" i klassenavnet ER vaernet (system.css:1971-1972): den forkerte flade kan ikke vaelges uden at have skrevet ordet. Kroget er attributten, ikke en klasse: `[data-nulstil]` stod allerede i markup'en, og en klasse, hvis eneste opgave var at give knappen en margin, ville vaere et ellevte knapudtryk mere, ikke faerre. */ /* --- 20e. Filterbaandet: ni menuknapper i én raekke ---------------------- OMLAGT 8. sep 2026 (spor/filterbaand). Her stod et 12-kolonners gitter, og GITTERET SELV VAR HOVEDFEJLEN: en aaben facet straekker HELE sin grid-raekke, saa naboerne foelger med op i hoejde uden at have indhold at fylde den med. MAALT PAA DEN BYGGEDE SIDE 8. sep 2026, 1440 x 900, foer omlaegningen: alt lukket facetbaand 230 px . filterblok 512 px "Manufacturer's country" aaben facetbaand 862 px . filterblok 1.144 px IP rating . Status . Certifications: 709 px hver - TOMME kasser, der kun er hoeje, fordi de deler grid-raekke med de 42 lande. RETNINGEN (MODE Operate, DESIGN.md:394): hver facet er sin egen knap i et baand, og dens panel LOEFTES UD AF FLOWET (position:absolute). Et aabent panel koster derfor 0 px i pladens hoejde - baandet flytter sig ikke, naar man aabner en menu, og det er hele pointen. KNAPPEN LAANER SIN FORM AF SORTERINGEN (.sortervalg label, §20i), som staar i samme panel: 44 px, --stans-flade, `inset 0 0 0 1px var(--hegn-baerende)` (3,96:1, over WCAG 1.4.11's 3:1), --hjoerne, og accentfyldt naar den er aktiv. Det er ikke et nyt formsprog - det er nabokomponentens, jf. impeccable/polish' "an existing shared component or pattern should replace it". HAARSTREGEN EFTER TITLEN ER VAEK. `.facet__navn::after` var et GITTERCELLE-greb: en 1px streg, der fyldte cellens resterende bredde ud. En knap har ingen resterende bredde. system.css' `summary.facet__navn:: after{flex:none}` staar tilbage uden et pseudoelement at virke paa - noteret i sporets rapport, ikke skjult. POLSTRINGEN. `.facet` baerer ingen polstring mere; knappen har sin egen. Selektoren er `.udtraek .facetter__net .facet` og ikke den korte, fordi system.css:1900 staar paa PRAECIS den selektor (0-3-0) og ellers vinder - maalt: den korte regel aendrede ingenting. generator.css indlaeses efter system.css, saa samme specificitet er nok. */ /* PLADEN KLIPPER IKKE LAENGERE SINE EGNE MENUER AF (punkt 3). §20a giver `.aabning__krop, .plade__krop{overflow:hidden}`. Klipningen er der, fordi `.stans` runder hjoernerne 2 px, og et fuldbredde-barn med egen flade ellers ville stikke firkantet ud af den runding. Reglen er ALTSAA ikke overfloedig - den er bare rettet mod en risiko, der ikke findes paa DENNE plade. MAALT, 1440 px, med land aabent: panelet er 460 px hoejt og blev klippet 400 px af. Fire boern ligger i .plade__krop; kun ét af dem har en egen flade (.strimmel, gunmetal), og den staar 107 px fra pladens top og 218 px over dens bund - altsaa ikke ved noget hjoerne. De tre oevrige er gennemsigtige. Der er intet at klippe. `.aabning__krop` er UROERT og klipper stadig: dens kortstribe loeber bevidst ud over hoejre kant, og dét er en ægte klipning. BIVIRKNING, MAALT OG BEHOLDT: `.strimmel` er `position:sticky`, og en `overflow:hidden`-forfader var dens rullecontainer - den kunne derfor aldrig klaebe. Nu klaeber den inden for pladens egen hoejde. */ .plade__krop { overflow: visible; } .udtraek { border: 0; margin: 0; padding: 0; } .udtraek > .udtraek__greb { display: none; } /* RYTMEN ER TO INTERVALLER, IKKE ÉT (impeccable layout, 8. sep 2026). Foer stod der ét tal - 8 px - mellem soegefeltet og foerste knap, mellem to knapper og mellem to raekker. Naar alle afstande er ens, har alt lige vaegt, og en ombrudt raekke laeser som "mere af det samme" i stedet for som en ny linje. TAET indeni gruppen (6 px mellem to knapper: de ni hoerer sammen). RUMMELIGT mellem raekker (10 px) og mellem soegefeltet og knapperne (6 + 16 = 22 px, se .sog's margin-right): soegning og filtrering er to veje til samme maal, ikke ét sammenhaengende felt. Begge tal er trin paa afstandsskalaen (--r1h, --r2h, --r4), ikke skoen. */ .facetter__net { position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: var(--r2h) var(--r1h); padding: var(--r3) var(--r4); } /* SOEGEFELTET, FOERSTE FELT I BAANDET (punkt 4). Det staar allerede som et fleks-element i system.css (`flex:1 1 300px;min-width:250px`), saa her saettes kun det, baandet kraever: en OEVRE graense, saa feltet ikke aeder den plads, ni knapper skal dele, og en bundlinje, der flugter med dem. Etiketten er visuelt skjult i markup'en (klassen `kunskaerm`), saa kolonneretningen fra system.css koster ingen hoejde her. */ /* SOEGEFELTET FAAR BAANDETS FOERSTE LINJE FOR SIG SELV (impeccable layout). MAALT PAA TRE VARIANTER, samme byg, 1440 og 1280 px, alle med samme baandhoejde paa 123 px: soegefeltet inline, 300 px 2 knapraekker . sidste raekke havde 2 af 9 soegefeltet inline, 260 px 2 knapraekker . sidste raekke havde 1 af 9 soegefeltet paa egen linje 1 knapraekke . alle ni staar samlet De ni knapper er 1.042 px tilsammen; baandets indre bredde er 1.322 ved 1440 px. De kan altsaa staa paa ÉN raekke - men kun hvis soegefeltet ikke deler den. To knapper alene paa en anden raekke laeser som rester, ikke som en gruppe, og det var den strukturelle fejl. `flex:1 1 100%` tvinger linjeskiftet; INPUTTET og ikke beholderen faar breddegraensen, fordi en max-width paa beholderen ville ophaeve linjeskiftet (fleks bryder linjer paa den KLAMPEDE hypotetiske stoerrelse, saa et 100 %-oenske klampet til 420 px ikke laengere braekker linjen). */ .facetter__net .sog { flex: 1 1 100%; max-width: none; min-width: 0; gap: 0; } .facetter__net .sog input { max-width: 420px; } .udtraek .facetter__net .facet { display: block; position: relative; border: 0; margin: 0; min-width: 0; padding: 0; } .facet__navn { display: inline-flex; align-items: center; gap: var(--r2); width: auto; padding: var(--r1h) var(--r3); margin: 0; float: none; white-space: nowrap; font-size: var(--fs-data); font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--blaek2); background: var(--stans); border-radius: var(--hjoerne); box-shadow: inset 0 0 0 1px var(--hegn-baerende); } .facet__navn:hover { color: var(--blaek); box-shadow: inset 0 0 0 1px var(--blaek); } /* AABEN MENU = ACCENTFYLDT KNAP. Samme par som sorteringens `input:checked + label`, og samme laeseretning: blaek PAA gul, 9,19:1. DP1 (DESIGN.md:499) forbyder det omvendte - accent som TEKST paa lys flade er 1,38:1 - og det sker ikke her. */ details.facet[open] > .facet__navn { color: var(--blaek); background: var(--accent); box-shadow: inset 0 0 0 1px var(--blaek); } /* `.facet__tal` HAR INGEN REGEL HER LAENGERE. Klassen findes ikke paa den byggede side efter JPK's "Fjern teksten '... state a figure'" (8. sep 2026) - maalt: 0 forekomster i dist/index.html. En regel for et element, der ikke findes, er doed kode; den er derfor slettet frem for efterladt. */ /* `.facet__hjaelp` HAR INGEN REGEL HER LAENGERE. spor/hjaelpetekst fjernede sit eneste kaldsted - facetBlok's hjaelp-parameter, der satte denne saetning i det foerste filterpanel - fra fladen (9. sep 2026), efter JPKs afgoerelse i STATUS.md AA215/AA217. Maalt: tests/dele/57-doed-css.mjs's 57.1 fandt klassen doed (13 doede mod 12 beskyttede), bevist med et midlertidigt revert af kaldsstedet. En regel for en klasse uden forbruger er doed kode; den er derfor slettet frem for foert ind i BESKYTTET. */ /* --- CHIPBAANDET: DE AKTIVE VALG, UNDER KNAPPERNE (punkt 5) ------------- Det er baandets sidste linje (`flex-basis:100%`), ikke en ny blok under det: chippene hoerer til de knapper, de kommer fra, og deler derfor deres polstring og rytme. NUL PX, NAAR INTET ER VALGT (briefets K7). `display:none` er hviletilstanden, og tre betingelser taender den - de tre maader, et valg kan opstaa paa: .rk__felt:checked et afkrydsningsfelt (med og uden JavaScript) .rk__felt:target et filterlink (robotter/#f-anv-industri) .valg--skala:not([hidden]) en skala, som assets/katalog.js har fyldt Uden det sidste led ville baandet vaere skjult, mens en synlig skalachip laa i det - maalt som en tom, men aaben, raekke i prototypen. DE TO AFSNIT OVENFOR BESKRIVER TILSTANDEN FRA FORMIDDAGEN 8. sep 2026 og staar, fordi de forklarer HVORFOR de tre betingelser ser ud, som de goer. K7 selv er ophaevet samme eftermiddag - laes videre ved ".valgbaand" nedenfor, hvor betingelserne er flyttet fra baandet til etiketten. Chippens egen form (.valg, .knap--kryds) er UROERT fra strimlen: gul flade, blaek paa gul 9,19:1, kryds der arver forgrunden. Kun etiketten er ny, og den er ny AF NOEDVENDIGHED: .strimmel__mrk er sat i --paafod2 til brug paa den moerke bund og ville vaere 1,7:1 her. */ /* BAANDET STAAR ALTID NU - ETIKETTEN ER DEN, DER GEMMER SIG (8. sep 2026, spor/valgbaand). Her stod `display:none` paa `.valgbaand` med de tre `:has()`-regler nedenfor som eneste undtagelse; det var briefets K7, "baandet fylder 0 px, naar intet er valgt", og den assertion bestod. K7 KAN IKKE HOLDE LAENGERE, og det er en bestilling, ikke en fejl: baandet baerer nu resultatmaaleren (`.valgbaand__maal`), som skal ses i enhver tilstand. Et baand paa 0 px ville skjule taelleren. DEN NYE REGEL ER K7 ÉT NIVEAU NED: `.valgbaand__mrk` fylder 0 px, naar intet er valgt. De TRE BETINGELSER ER ORDRET DE SAMME - de er bare flyttet fra baandet til etiketten: .rk__felt:checked en afkrydsning, med og uden JavaScript .rk__felt:target et filterlink (robotter/#f-anv-industri) .valg--skala:not([hidden]) en skala, assets/katalog.js har fyldt HVORFOR DET ER HELE POINTEN OG IKKE EN DETALJE: ordet "SELECTED" NAVNGIVER chiplisten. Staar det, naar listen er tom, staar det i stedet foran taelleren "150 OF 150" og laeser som om alle 150 robotter var valgt - forvekslingen mellem standardtilstand og brugervalg, som DESIGN.md:394 forbyder for Operate-flader, og som test 56 ryddede op i én gang. Loesningen er ikke at daempe ordet, men at lade vaere med at tegne det: et ord, der ikke er der, kan ikke fejllaeses. `display:block` og ikke `flex`: etiketten er én tekst, ikke en beholder. */ /* BAANDET KLAEBER (JPK 9. sep 2026, ordret: "Lad taelleren klaebe igen"). `.strimmel` bar `position:sticky;top:0;z-index:40` og forsvandt med baren. Reglen er tilbage, men PAA ET ANDET STED I TRAEET, og det er ikke en omskrivning af beslutningen - det er den eneste maade at udfoere den paa: `position:sticky` afgraenses af FORAELDERENS kasse. Baandet laa som sidste barn af `.facetter__net` (maalt 1440 px, 9. sep 2026: baand 739-794, forael 614-806) = 12 px klaebefelt. Som direkte barn af `form.styr` (540-9256) klaeber det fra pladens bund til sidste kort. Skabelonen baerer flytningen og maalingen bag den; se katalog.mjs ved `const valgBaand`. Ogsaa maalt dér: briefets praemis om, at `.strimmel` fulgte med "ned gennem 150 kort", holder ikke - den klaebede inden for PLADEN, altsaa ~200 px og aldrig ned i gitteret. Baandet gaar nu laengere end den bar, det afloeser. FIRE EGENSKABER, DER FOELGER AF AT VAERE EN KLAEBENDE FLADE OG IKKE EN RAEKKE INDE I EN PLADE: 1. EGEN, ULIGENNEMSIGTIG FLADE. `--panel` - PRAECIS den flade, baandet stod paa foer flytningen (`.plade__krop{background:var(--panel)}`, generator.css:2536), saa hver farve i raekken beholder den baggrund, dens kontrasttal er maalt mod. `--bund` ville vaere sidens egen graa og 1,08 gange moerkere. Uden EN flade ville kortene kunne ses gennem baandet, mens de ruller forbi - det er hele grunden til, at en klaebende raekke skal have en baggrund. 2. `border-bottom` I STEDET FOR `border-top`. Stregen skal skille baandet fra det, der ruller UNDER det. DESIGN.md "Dybde" (linje 947): systemet er fladt, og dybde signaleres af fladeskift og streger, ikke af skygge - saa en slagskygge under den klaebende kant er forbudt her. 3. VANDRET POLSTRING `var(--r4)`. Baandet spaender nu hele indholds- kolonnen (1352 px fra x=44) og ikke facetnettets indre kasse (1317 px fra x=63). De 16 px er praecis facetnettets egen vandrette polstring, saa indholdet naesten ikke flytter sig: maalt 1440 px, venstre kant af foerste chip 127 -> 124 px, altsaa 3 px til venstre. Uden polstringen var det 19. 4. `z-index:40`, ORDRET SOM `.strimmel` HAVDE. Under `.klaebebar` (50) og under `.facet__panel` (50), saa et aabent facetpanel stadig tegnes hen over baandet. `flex:1 1 100%` ER FJERNET og ikke glemt: den var en flex-item-egenskab paa et barn af `.facetter__net`. `form.styr` er en blok, saa erklaeringen ville ikke tegne noget - den ville kun se ud som om den gjorde. */ /* BAANDETS KLAEB SKAL RAEKKE HELE VEJEN NED - ELLERS ER K8a IKKE LUKKET. Tilfoejet 9. sep 2026 (spor/pil), og det er ikke pynt paa flytningen af pilen: det ER den halvdel af rettelsen, der lukker fejlen. MEKANISMEN. Et `position:sticky`-element klaeber kun, mens dets EGEN beholder er i viewport. `.valgbaand`s beholder er `form.styr`, som slutter ved dokument-y 9272,5, mens siden fortsaetter til 10417,6 med tegnforklaringen og