(wrapSize, compose.go). Fase 1 (#2139) shippede wrapperen men UDSKØD grid-CSS'en; denne task (2.1.3) er første flade der emitter sz-klasser, så footprinten defineres her. grid-column-span virker KUN i en grid-container; admin-dashboardets container er rel-dashboard-admin-stak (wa-stack = flex-column), hvor grid-column er inert → widgets forbliver fuld-bredde (korrekt for den lodrette stak). Definitionen gør klasserne meningsfulde den dag en widget sidder i en ægte grid (fx et fremtidigt fler-kolonne-dashboard), uden at røre den nuværende stak. WA har ingen utility for en per-barn column-span, så custom er berettiget. */ .sz-s { grid-column: span 1; } .sz-m { grid-column: span 2; } .sz-l { grid-column: 1 / -1; } /* ── Dashboard edit-mode "Tilpas"-chrome (ug3-2ua0c.2.1.3) ─────────────────── Toolbar + per-widget editbar + widget-bibliotek, injiceret gennem uirender.EditChrome (kun i edit-visningen; normal-visningen emitter intet af dette). Alt på --ug-*-tokens; ingen nye farver. WA-utilities dækker ikke en sticky, bordered værktøjslinje med badge/segment-aktioner, så custom-klasser er berettiget (::part/utility ville ikke være enklere). */ .ug-dash-toolbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--ug-space-m); flex-wrap: wrap; margin-bottom: var(--ug-space-m); padding: var(--ug-space-s) var(--ug-space-m); border: var(--wa-border-width-s) solid var(--ug-brand-line); border-radius: var(--ug-radius); background: var(--ug-surface); box-shadow: var(--ug-shadow); } .ug-dt-id { display: flex; align-items: center; gap: var(--ug-space-s); min-width: 0; flex-wrap: wrap; } .ug-dt-badge { display: inline-flex; align-items: center; gap: var(--ug-space-2xs); padding: var(--ug-space-2xs) var(--ug-space-xs); border-radius: var(--ug-radius-s); background: var(--ug-brand-strong); color: #fff; font-family: var(--ug-mono); font-size: var(--ug-text-2xs); font-weight: var(--ug-weight-bold); letter-spacing: var(--ug-tracking-label); text-transform: uppercase; white-space: nowrap; } .ug-dt-ctx { font-size: var(--ug-text-s); color: var(--ug-text-quiet); } .ug-dt-ctx b { color: var(--ug-text); font-weight: var(--ug-weight-semibold); } .ug-dt-actions { display: flex; align-items: center; gap: var(--ug-space-2xs); flex-wrap: wrap; } /* Per-widget editbar: en bar øverst i widget-cellen med Skjul (eller Fast-lås). */ .ug-widget-edit { position: relative; } .ug-editbar { display: flex; align-items: center; gap: var(--ug-space-xs); flex-wrap: wrap; margin-bottom: var(--ug-space-2xs); padding: var(--ug-space-2xs) var(--ug-space-xs); border: var(--wa-border-width-s) dashed var(--ug-border-strong); border-radius: var(--ug-radius-s); background: var(--ug-surface-sunk); } .ug-editbar-label { font-size: var(--ug-text-xs); font-weight: var(--ug-weight-semibold); color: var(--ug-text-quiet); } .ug-editbar-spring { flex: 1; } .ug-editbar-fixed { display: inline-flex; align-items: center; gap: var(--ug-space-2xs); font-size: var(--ug-text-xs); color: var(--ug-text-faint); } .ug-toggle-form { display: inline-flex; margin: 0; } /* Toolbar sprog-segment (ug3-2ua0c.2.5.1) + "Sætter op for"-target-vælger (ug3-2ua0c.2.4.1). Segment-layout ejes af wa-cluster + wa-gap-xs i tilpas-toolbar.html; her kun label-styling (delt regel). */ .ug-dt-sprog-label, .ug-dt-target-label { display: inline-flex; align-items: center; gap: var(--ug-space-2xs); font-size: var(--ug-text-xs); color: var(--ug-text-quiet); } /* Inline i18n-panel (designets w-i18n): felt pr. flagget i18n-felt under widgetten. Stak/klynge ejes af wa-stack/wa-cluster i tilpas-i18n.html; her kun de ikke-WA-dækkede regler (ramme, baggrund, radius, typografi, farve). */ .ug-i18n-panel { margin-top: var(--ug-space-2xs); padding: var(--ug-space-s); border: var(--wa-border-width-s) dashed var(--ug-border-strong); border-radius: var(--ug-radius-s); background: var(--ug-surface-sunk); } .ug-i18n-head { font-size: var(--ug-text-xs); color: var(--ug-text-quiet); } .ug-i18n-head b { color: var(--ug-text); } .ug-i18n-sub { font-size: var(--ug-text-2xs); color: var(--ug-text-faint); } .ug-i18n-form { margin: 0; } .ug-i18n-mangler { display: inline-flex; align-items: center; gap: var(--ug-space-2xs); font-size: var(--ug-text-2xs); color: var(--ug-warning-text); } /* Relations-kobling drawer-fragmentets gruppe-overskrifter («Valgte » + typenavn, .drawer-gruppe-overskrift): Johannes' rytme-regel (prototype-facit) — LUFTEN sidder OVER overskriften (stor margin-top = gruppe-adskillelsen), og overskriften sidder TÆT på egne rækker (ingen margin-bottom). Fragment-h3 har intet element-CSS-hjem, så reglen bor i det delte bundt der også renderes på post-rediger-draweren. Token-only. */ .drawer-gruppe-overskrift { margin-block: var(--ug-space-l) 0; display: flex; align-items: baseline; gap: var(--ug-space-xs); } /* Koblede-tællertal ved siden af «Valgte »-overskriften (prototype-facit .proto-gruppe-antal): dæmpet, medium vægt, i footnote-størrelse. Rendres kun når der ER koblede — prototypen viser aldrig «0». */ .drawer-gruppe-antal { font-size: var(--ug-text-s); font-weight: var(--ug-weight-medium); color: var(--ug-text-quiet); } /* Drag-grip + S/M/L-størrelsesvalg i editbaren (ug3-2ua0c.2.2.1). Grip-måltal fra design-facittet (dashboard-tilpas.css .w-grip), oversat til --ug-tokens. Custom CSS er berettiget for grippet (WA har intet draggable håndtag); størrelses- knapperne er rene wa-buttons (pill, filled/plain) og behøver kun tæt gap. */ .ug-w-grip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--ug-radius-s); color: var(--ug-text-faint); cursor: grab; flex: none; } .ug-w-grip:hover { background: var(--ug-surface-sunk); color: var(--ug-brand); } .ug-w-grip:active { cursor: grabbing; } .ug-w-grip wa-icon { font-size: 14px; } .ug-w-size { display: inline-flex; align-items: center; gap: 2px; } /* Drag-tilstande (tilpas-dragjs.html): den trukne widget dæmpes; drop-målet markeres med brand-outline (widget indsættes FØR målet ved drop). */ .ug-widget-edit.ug-dragging { opacity: .45; } .ug-widget-edit.ug-drag-over { outline: 2px solid var(--ug-brand); outline-offset: 2px; border-radius: var(--ug-radius-s); } /* Widget-bibliotek (wa-drawer indhold). */ .ug-wlib-intro { margin: 0 0 var(--ug-space-m); font-size: var(--ug-text-s); color: var(--ug-text-quiet); line-height: 1.5; } .ug-wlib-item { display: flex; align-items: center; gap: var(--ug-space-s); padding: var(--ug-space-s); border: var(--wa-border-width-s) solid var(--ug-border-quiet); border-radius: var(--ug-radius); margin-bottom: var(--ug-space-2xs); background: var(--ug-surface); } .ug-wlib-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ug-wlib-t { font-size: var(--ug-text-s); font-weight: var(--ug-weight-semibold); color: var(--ug-text); } .ug-wlib-empty { margin: 0; font-size: var(--ug-text-s); color: var(--ug-text-faint); } /* ── Status-annotations-wrapper er flex-transparent (UNIVERSELT) ───────────── godkendtWrap/kandidatWrap (compose.go) pakker hvert komposit-medlem i

. Som en block-div bliver wrapperen det direkte flex-barn af et relations-udtryk (wa-cluster/wa-stack), så medlemmernes flex (fx ug-cmdk-label flex:1, rel-pwbar-segmenter) rammer wrapperen i stedet for elementet → labelen vokser ikke / segmenter kollapser. display:contents fjerner wrapperens layout-boks så medlemmet bliver det reelle flex-barn. Boede før KUN i ramme-shell.css (loades kun på render/ramme-ruter) → preview-siderne (kompositionsgrupper) manglede den. Flyttet hertil så den gælder overalt. SCOPET til godkendt/kandidat: de synlige ✗-fejl-markører (knækket/mangler/fejl) skal beholde deres block-boks. */ [data-ug-status="godkendt"], [data-ug-status="kandidat"] { display: contents; } /* Søgefiltret (ug-cmdk-search) skjuler ikke-matchende rækker via hidden-attribut. Uden dette vinder author-origin display:contents ovenfor (og en rækkes egen .wa-cluster display:flex) over UA-stylesheetets [hidden]{display:none} → rækken forbliver synlig. rowEnvelope() toggler hidden på ENTEN [data-ug-status]-wrapperen ELLER selve .wa-cluster-rækken (når ingen wrapper) — begge dækkes. Specificity (0,2,0)/(0,1,1) slår (0,1,0)/(0,1,0) → intet !important. Samme mønster som .gal-cmp-tray[hidden] nedenfor. */ [data-ug-status="godkendt"][hidden], [data-ug-status="kandidat"][hidden], .wa-cluster[hidden] { display: none; } /* ── Dæmpet-markør (composer-injiceret, ug3-ml7au) ─────────────────────────── Gentagelse.Daempet → data-ug-daempet="ja" på forekomstens boks-element. For en gentaget GRUPPE lander markøren på gruppens status-wrapper (display:contents ovenfor — wrapperen har ingen boks, så opacity på den selv er virkningsløs); dæmpningen rammer derfor wrapperens direkte børn (fx ug-fane-flise for den «kommer senere»-dæmpede Medvirkende-fane). Substrat-regel her, ikke element- CSS: markøren er composer-ejet ligesom status-wrapperen selv. */ [data-ug-daempet] > * { opacity: 50%; } /* ── ov-pillmenu · række-fladen (render-tilstand på overlay-niveau) ────────── grp-cmdk-raekke's manifest erklærer pr.-række-fladen (padding/hover/aktiv) som render-tilstand på liste-/overlay-niveau — bevidst IKKE en del af den statiske komposition. Hele den tilstand bor her, scoped til paletten. Orakel-fladen shell (.menu-item): padding 10px 12px → --ug-space-s-u / --ug-space-s, radius, hover → --ug-row-hover; keyboard-highlight (.menu-item.kbd-on, sat af ug-cmdk-search's ↓/↑) deler hover-baggrunden; aktiv (.menu-item.on = nuværende side) → --ug-brand-quiet baggrund + --ug-brand-strong etiket. Oraklets egen .wa-dark-variant er unødvendig: --ug-brand-quiet/-strong tema-flipper selv (look.css' dark-blok). Markører er data-attributter i data-ug-*-namespacet ([data-ug-kbd] JS-sat, [data-ug-aktiv] host/JS-sat) — aldrig klasser på composer-emitteret markup. Aktiv-reglerne står EFTER kbd-reglen så aktiv vinder når begge er sat (samme kaskade-orden som oraklet). Token-only. NB: selektoren følger rel-cmdk-raekkes utility (wa-cluster) — skifter udtrykket utility, skal selektoren med. */ [data-ug-overlay="ov-pillmenu"] .wa-cluster[data-ug-id="grp-cmdk-raekke"] { padding-block: var(--ug-space-s-u); padding-inline: var(--ug-space-s); border-radius: var(--ug-radius); cursor: pointer; } [data-ug-overlay="ov-pillmenu"] .wa-cluster[data-ug-id="grp-cmdk-raekke"]:hover, [data-ug-overlay="ov-pillmenu"] .wa-cluster[data-ug-id="grp-cmdk-raekke"][data-ug-kbd] { background: var(--ug-row-hover); } [data-ug-overlay="ov-pillmenu"] .wa-cluster[data-ug-id="grp-cmdk-raekke"][data-ug-aktiv] { background: var(--ug-brand-quiet); } [data-ug-overlay="ov-pillmenu"] .wa-cluster[data-ug-id="grp-cmdk-raekke"][data-ug-aktiv] ug-cmdk-label { color: var(--ug-brand-strong); } /* ── ov-post-forhaandsvis · dialog-bredden (kompositions-chrome, ug3-e6743) ── Johannes' testrunde 2026-07-27: «selve modalen til previewet skal være bredere». WA-dialogens default --width klemmer preview-iframen så smal at publikums-modallen inde i den aldrig når kundens facit-bredde (Nicolines _modal.css: 560px) — den faldt tilbage til calc(100vw - 2rem) af IFRAMENS viewport. Fladen er composer-emitteret (ingen klods ejer wa-dialog-tagget), så breddereglen bor her som overlay-scoped chrome — ov-tidspunkt-drawer- mønstret nedenfor. 60rem giver Desktop-visningen rum til facit-modallen med luft; WA klipper selv ned på smalle viewports. */ wa-dialog[data-ug-overlay="ov-post-forhaandsvis"] { --width: 60rem; } /* ── ov-tidspunkt-drawer · drawer-bredden (kompositions-chrome) ────────────── Facit tidspunkt-drawer-model.html: draweren glider ind fra højre over rækkerne; ≤520px fylder den hele bredden (#drawer --size: 100vw). Fladen er composer-emitteret (ingen klods ejer wa-drawer-tagget), så breddereglen bor her som overlay-scoped chrome — samme mønster som ov-pillmenu ovenfor. */ @media (max-width: 520px) { wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] { --size: 100vw; } } /* ── ov-tidspunkt-drawer · Start/Slut på samme linje (facit .tider) ────────── Facit tidspunkt-drawer-model.html: de to tids-inputs står side om side i et to-spors grid (.tider { grid-template-columns: 1fr 1fr }). Formen er en composer-emitteret wa-stack hvis medlems-wrappers er display:contents, så grid-items er selve klodserne — geometrien bor her som overlay-scoped kompositions-chrome (bredde-reglen ovenfor er præcedensen). Formen bliver et to-spors grid: alle medlemmer spænder begge spor (wrapper-hoppet i Start/Slut-selektorerne holder deres specificitet over catch-all'en), kun Start/Slut deler en række. Gap arver formens --wa-gap-shim. */ wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] { display: grid; grid-template-columns: 1fr 1fr; } wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] > [data-ug-status] > * { grid-column: 1 / -1; } wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] > [data-ug-status] > ug-tidspunkt-start-input { grid-column: 1; } wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] > [data-ug-status] > ug-tidspunkt-slut-input { grid-column: 2; } /* ── ov-tidspunkt-drawer · handlingsknapper på ÉN linje (facit .dknapper) ───── Facit drawer-footeren: Tilføj (den brede primære) og Tilføj + nyt i én knap-række; Gemt-indikatoren står UNDER rækken som stille info (godkendt placering). Samme grid-chrome som Start/Slut: de to opret-knapper deler en række (spor 1 + 2, Tilføj som den fyldte primære i første spor), og deres wa-buttons fylder deres spor så rækken læser som facit'ens flex-række. Rediger-tilstandens Gem-knap beholder catch-all'ens fulde bredde (facit: den brede Gem ændringer); csrf-feltet er display:contents og Gemt- indikatoren auto-placeres på næste række under knapperne. */ wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] > [data-ug-status] > ug-tilfoej-tidspunkt-button { grid-column: 1; } wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] > [data-ug-status] > ug-tilfoej-og-nyt-button { grid-column: 2; } wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] ug-tilfoej-tidspunkt-button wa-button, wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] ug-tilfoej-og-nyt-button wa-button, wa-drawer[data-ug-overlay="ov-tidspunkt-drawer"] form[data-ug-id="grp-tidspunkt-form"] ug-gem-button wa-button { width: 100%; } /* Login-resend-formens send-igen-knap (F4-1 par 6 → auto+centreret 2026-07-20): arrangeringen flyttet HERTIL fra den slettede ug-send-igen-button, da knappen blev den delte ug-gensend-button (inline pille i invitations-rækkerne) — ADR-0043: konteksten (gruppens wrapper), ikke elementet, er kanalen for ren arrangering. grp-send-igen findes kun i login-fladens link-sendt-tilstand. Knap-bredde er auto (dom A2 — den tidligere inline-size:100% var et kontekst- scopet A2-brud som lint B.2 ikke fanger). Host beholder display:block så wa-button står som ren inline-block-atom (auto bredde). Centreret som UNDTAGELSE fra "kun lister centreres" (Johannes 2026-07-20): den enlige send-igen afløser link-sendt-tilstandens plads for de centrerede metode-knapper, så den skal stå centreret som dem. align-self:center pr. flex-item i grp-send-igens form-wa-stack. */ [data-ug-id="grp-send-igen"] ug-gensend-button { display: block; align-self: center; } /* ── Overlay footer-Luk · knap-anatomi (ug3-qchfj) ──────────────────────────── The dialog/drawer footer close button (overlay.go's overlaySurfaceTmpls) is shared composition-chrome — it is baked into EVERY overlay surface, not a registry klods — so it never picked up a klods' own ::part(base) pill-rule the way ug-forhaandsvis-button/ug-annuller-button do (each scopes its own tag). Since there is no klods tag to scope on, the rule scopes on the shared .ug-overlay class (present on every wa-dialog/wa-drawer surface, overlaySurfaceTmpls) + the footer slot, matching those klodsers' B1 pill radius (var(--ug-radius-pill)). The .ug-knap/.ug-knap-m sizing classes are set directly in the overlay templates (Takt 2 — Sektion, size="s", same anatomy as ug-slet-aflys-i-stedet/ug-tilfoej-kandidat's variant="brand" pairing). */ .ug-overlay wa-button[slot="footer"]::part(base) { border-radius: var(--ug-radius-pill); } /* ══ Knap-anatomi (delt) — knap-og-ikon-domme A3, bundt C.3 ══════════════════ Bomærke-idiomet centraliseret ÉT sted. C.3 leverer KUN infrastrukturen: den delte klasse .ug-knap + takt-modifikatorerne .ug-knap-l/-m/-s. INGEN klods bærer klassen endnu — C.4 tildeler takterne pr. A1-mappingen — så hele blokken er render-neutral (nul selektor-match på nuværende registry). Placeret som en klasse (ikke globale wa-button-regler) af to grunde: (1) render-neutralitet er garanteret ved nul-match frem for at afhænge af fallback-lighed; (2) slotted- nulstillingen KRÆVER en selektor der slår WA's shadow-::slotted på SPECIFICITET (se nedenfor) — klassen leverer den nødvendige vægt naturligt. Takt-valg: en modifikator peger de generiske «aktiv-takt»-tokens mod sin rå takt, og .ug-knap-basen læser KUN de generiske. C.4 sætter altså class="ug-knap ug-knap-m" (etc.) på wa-button'en — ét sted, ingen literaler. */ .ug-knap-l { --ug-knap-h: var(--ug-knap-h-l); --ug-knap-font: var(--ug-knap-font-l); --ug-knap-pad: var(--ug-knap-pad-l); --ug-knap-gap: var(--ug-knap-gap-l); } .ug-knap-m { --ug-knap-h: var(--ug-knap-h-m); --ug-knap-font: var(--ug-knap-font-m); --ug-knap-pad: var(--ug-knap-pad-m); --ug-knap-gap: var(--ug-knap-gap-m); } .ug-knap-s { --ug-knap-h: var(--ug-knap-h-s); --ug-knap-font: var(--ug-knap-font-s); --ug-knap-pad: var(--ug-knap-pad-s); --ug-knap-gap: var(--ug-knap-gap-s); } /* Takt-mekanik: højde-tokenet overstyrer WA's size-afledte højde OG nulstiller den size-koblede interne padding (A1) ved at wire de aktive takt-tokens ind i WA's egne form-control-variabler — så takt 2 og takt 3 (begge size="s") ikke kan drive fra hinanden. Font sættes på hosten (WA's .button arver font-size: inherit). C7: ::part(base) er den eneste vej til den interne knap- flade — ingen WA-utility dækker per-takt højde/padding, så ::part er korrekt. */ .ug-knap { font-size: var(--ug-knap-font); --wa-form-control-height: var(--ug-knap-h); --wa-form-control-padding-inline: var(--ug-knap-pad); } /* Slotted-margin-nulstilling (A3): WA's shadow-CSS lægger en fast ikon-til-tekst- afstand på det slottede led — `slot[name=start]::slotted(*){margin-inline-end: .75em}` og end-varianten (WA Pro 3.10.0, verbatim fra button.styles-chunken). Vi ERSTATTER den med gap-tokenet, så tokenet er den ENESTE afstand. Det slottede led er glyph-wrapperen i LYS DOM (`…`), så en dokument- regel rammer den direkte. Cascade: WA's ::slotted-regel har specificitet (0,1,2) [slot-type + [name]-attribut + ::slotted-pseudoelement]; `.ug-knap [slot=…]` har (0,2,0) [klasse + attribut] og VINDER på specificitet (sammenlignes før tree- order). En `wa-button [slot=…]`-regel ville derimod TABE (0,1,1) < (0,1,2) — derfor klassen. (Verificeret mod den vendorede WA 3.10.0-kilde; ingen browser i worktree, men reglen er spec-deterministisk, ikke miljø-afhængig.) */ .ug-knap > [slot='start'] { margin-inline-end: var(--ug-knap-gap); } .ug-knap > [slot='end'] { margin-inline-start: var(--ug-knap-gap); } /* vE: intet at gøre — wa-icon sætter selv vertical-align, og knap-basen er inline-flex/align-items:center, så ikonet centreres via flex (vertical-align har ingen effekt på flex-items). Verificeret mod WA 3.10.0-kilden. */ /* Koncentrisk-reglen (A3): et CIRKULÆRT ikon i en pille lægges koncentrisk med endebuen. Opt-in helper — en klods med et rundt LEDENDE ikon bærer .ug-knap-koncentrisk sammen med sin takt; padding-inline-start = (højde−ikon)/2 pr. takt (--ug-knap-koncentrisk-*). Kantede ikoner bruger takt-paddingen og sætter IKKE denne klasse. C.4 påfører den på de relevante runde-ikon-klodser. */ .ug-knap-koncentrisk.ug-knap-l::part(base) { padding-inline-start: var(--ug-knap-koncentrisk-l); } .ug-knap-koncentrisk.ug-knap-m::part(base) { padding-inline-start: var(--ug-knap-koncentrisk-m); } .ug-knap-koncentrisk.ug-knap-s::part(base) { padding-inline-start: var(--ug-knap-koncentrisk-s); } /* ══ Rund ikon-knap (delt form) — knap-og-ikon-domme A2/A5/A7, bundt C.4 ══════ Den ikon-only runde knap: en 28px cirkel (takt 3) med bart, koncentrisk centreret ikon. C.4 leverer FORMEN delt her; hver mål-klods bærer markøren på sin wa-button (data-ug-knap-rund) og sætter selv sin FLADE (accent/danger/ neutral efter rolle) + ink-sæt i sin egen CSS (A5/A7) — samme opdeling som C.3's takt-anatomi (form ét sted, rolle hos klodsen). MARKØR = data-attribut, IKKE class: grammatik-regel E2 tillader kun ÉN class, der matcher ^wa-[a-z-]+$, på et element (WA-utility) — en ug-*-class fanges af E2. Data-attributter (som de eksisterende data-hoved/data-caret/data-ov-anker på wa-buttons) er frie, så markøren bæres som `data-ug-knap-rund`. A2: cirklen sættes med BUTTON-styling (border-radius, lige høj og bred), ALDRIG med FA's cirkel-ikoner. Centrering: en ikon-only knap har INGEN tekst, så det barte ikon centreres koncentrisk i cirklen (WA's egen flex-base + align/justify-center) — dette er IKKE en fravigelse af vE-dommen (A3), der forbyder flex-centrering af glyphs der står INLINE med tekst; her er der ingen tekst. Fase-1-lint B.3 undtager netop ikon-only-knapper (knapHasTextWaButton → false) fra vE-kravet, og centreringen ligger på ::part(base), ikke på glyph- selektoren. */ /* Standalone-defaulten for den runde form. IKKE en invariant for alle bærere: kort-fodens ug-overblik-button skalerer op til takt-m (34px cirkel, 20px øje) i sin EGEN element-CSS, fordi den står ved siden af en takt-m Rediger-pille. */ [data-ug-knap-rund] { --wa-form-control-height: var(--ug-knap-h-s); /* 28px cirkel-diameter (takt 3) */ --wa-form-control-padding-inline: 0; /* bart ikon → ingen inline-pad */ --ug-glyph-size: var(--ug-knap-ikon-s); /* 16px ikon i 28px cirkel (A3 koncentrisk) — virker kun på størrelses-renset glyph-atom */ } /* Basis-cirkelgeometrien under :where() (specificitet 0,0,1) så en klods' egen ::part(base)-regel ALTID vinder — de tre række-handlingsklodser (raekke-menu, tidspunkt-kopier, tidspunkt-rediger) samler i en fælles kontekst deres inder- hjørner/bredde via --ug-handling-*-tokens; den runde cirkel er STANDALONE- defaulten som den kontekst overstyrer. Hver pille-klods bærer selv sin border-radius: var(--ug-radius-pill) (B1-kravet); på en 28×28 flade ER pille- radius en cirkel, så den runde form og B1 er det samme udtryk. 50% her er den klods-uafhængige backstop. */ :where([data-ug-knap-rund])::part(base) { inline-size: var(--ug-knap-h-s); block-size: var(--ug-knap-h-s); padding: 0; border-radius: 50%; } [data-ug-knap-rund]::part(base) { align-items: center; justify-content: center; /* bart ikon centreret koncentrisk (ikon-only; B.3/vE undtaget) */ line-height: 0; /* WA-kanonisk (github.com/shoelace-style/webawesome#2280): nulstiller line-box'en så det slottede ikons vertical-align:-0.125em ikke skubber glyffen ~1,5px op i cirklen. WA zeroer selv line-height på [part=start]/[part=end], men ikon-only runde knapper lægger glyffen i default-(label-)slotten, som WA ikke rører — derfor her. */ position: relative; /* anker for touch-target + ring */ transition: box-shadow 0.12s ease; } /* Usynligt touch-target ≥44px (A2): en centreret, gennemsigtig klik-flade der udvider hit-arealet uden at vokse den 28px synlige cirkel. ::after arver ::part(base)'s pointer-events, så et klik i det udvidede felt rammer knappen. */ [data-ug-knap-rund]::part(base)::after { content: ""; position: absolute; inset: 50%; inline-size: var(--ug-knap-touch-min); block-size: var(--ug-knap-touch-min); translate: -50% -50%; } /* Hover/fokus: en tydelig ring (A2 «hover-/fokus-feedback»; dommens flade-tint- eller-ring). Ringen erstatter WA's default-outline, så feedbacken er konsistent på tværs af hele det runde knap-sæt. */ [data-ug-knap-rund]::part(base):hover, [data-ug-knap-rund]::part(base):focus-visible { box-shadow: 0 0 0 var(--ug-knap-rund-ring-bredde) var(--ug-knap-rund-ring); } [data-ug-knap-rund]::part(base):focus-visible { outline: none; } /* ── Glyph-dommen C.2: context glyph sizes (A4) ───────────────────────────── The 60 glyph atoms no longer own their size (docs/platform/knap-og-ikon-domme.md §A4): the atom ships `font-size: var(--ug-glyph-size)` (fallback-free — C8 rejects a literal inside var(), so an uncovered glyph inherits its parent size rather than a 1em default), and the size is set by the CONTEXT. Every glyph used on a surface IS covered below or in its element CSS. Most consumers pin the pre-cleanse rendered size in their own element CSS; the rules below cover the contexts that have NO element-CSS home: • display glyphs placed directly by a composition GROUP or the login screen (ADR-0043: the group/context wrapper is the channel for pure arrangement — same precedent as the group-scoped rules above); • three consumers whose element CSS is currently frozen by the tombstone guard (logo-/wordmark-pill, themetoggle: paths git-rm'd 2026-06-23 then legitimately re-created — a guard false-positive an agent may not self- approve), so their glyph-size pin lives here instead. Every value reproduces the measured pre-cleanse size — no visual change in this bundle; the takt tokens replace these in C.3. */ [data-ug-id="grp-claim-kort"] ug-claim-glyph { --ug-glyph-size: var(--ug-glyph-display); } [data-ug-id="grp-tom-liste"] ug-inbox-glyph { --ug-glyph-size: var(--ug-glyph-display); } [data-ug-id="grp-intro-slide"] ug-intro-slide-glyph { --ug-glyph-size: var(--ug-text-3xl); } [data-ug-id="grp-krummesti"] ug-krumme-skiller-glyph { --ug-glyph-size: var(--ug-text-2xs); } [data-ug-id="grp-stab-tom"] ug-users-glyph { --ug-glyph-size: var(--ug-text-2xl-s); } /* Display glyphs placed directly by the login screen (no group/element wrapper). */ ug-link-sendt-glyph { --ug-glyph-size: var(--ug-glyph-display); } ug-totp-glyph { --ug-glyph-size: var(--ug-glyph-display); } /* Consumers whose element CSS is tombstone-frozen (see note above). */ ug-logo-pill ug-brand-glyph, ug-wordmark-pill ug-brand-glyph { --ug-glyph-size: var(--ug-text-2xl); } ug-themetoggle ug-maane-glyph, ug-themetoggle ug-sol-glyph { --ug-glyph-size: var(--ug-text-xl); } /* Tegn-tælleren i rediger-hovedets meta-række pinnes ALTID til højre (Johannes 2026-07-17) — ADR-0043: ren arrangering bor på gruppens wrapper-kontekst, ikke på det delte ug-tegn-taeller (som også bor i inviter-beskeden). rel-rediger-hoved er en wa-split (space-between): med krumme'n til stede står krumme venstre / tæller højre, men når posten ingen forældre-entitet har omittes krummens status-wrapper og space-between glider den lone tæller til VENSTRE. margin-inline- start:auto lader tælleren opsluge al fri plads til venstre for sig, så den hugger højre uanset om krummen er der — identisk med space-between-udfaldet når begge er der. Status-wrapperne er display:contents (status-blokken ovenfor), så tælleren selv er wa-split'ens flex-item og margin'en virker som flex-item-margin. Rammer både gruppe-kompositionen (skærmene) og relations-preview'et (galleriets rel-rediger-hoved-side). */ [data-ug-id="grp-rediger-hoved"] > [data-ug-status] > ug-tegn-taeller, [data-ug-id="rel-rediger-hoved"] > [data-ug-status] > ug-tegn-taeller { margin-inline-start: auto; } /* Fane-zone-skift (ug-rediger-fane.js, review #2178 Important 3): gør hidden universel på composerens noder. (1) [data-ug-status][hidden] status-agnostisk — i dag har kun godkendt/kandidat display:contents (dækket ovenfor), men en fremtidig status der arver contents-reglen må aldrig tavst bryde skjul. (2) [data-ug-scope][hidden] dækker zoneRoot's identity-node-FALLBACK (ingen status-wrapper): identity-noden bærer relations-udtrykkets utility-klasse (wa-stack/wa-grid display:flex/grid) som ellers slår UA-stylesheetets [hidden]{display:none}. Specificity (0,1,1)/(0,1,1) slår (0,1,0). */ [data-ug-status][hidden], [data-ug-scope][hidden] { display: none; } /* (3) ug-fane-aktivstreg[hidden]: the active-tab indicator bar the SAME JS hides on inactive tabs (streg.hidden = true). Its own element CSS declares `display: block`, an AUTHOR rule that beats the UA [hidden]{display:none} regardless of specificity — without this every tab's streg stays painted, so all tabs read as active. The zone rules above never match it: the JS hides the raw element, which carries neither data-ug-status nor data-ug-scope. Element-scoped [hidden] override, mirroring ug-gem-button.css. */ ug-fane-aktivstreg[hidden] { display: none; } /* ── Galleriets egen chrome (IKKE et element — almindelig HTML/CSS) ───────── */ body { font-family: var(--wa-font-family-body, system-ui, sans-serif); color: var(--wa-color-neutral-20); background: var(--wa-color-neutral-95); margin: 0; line-height: 1.5; } .gal-topbar { background: var(--ug-brand); color: var(--ug-on-brand); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.5rem 1.5rem; flex-wrap: wrap; /* ug3-s76ra: 8 nav-punkter overløb på 390px uden wrap */ } .gal-topbar a { color: var(--ug-on-brand); text-decoration: none; font-weight: 600; } .gal-topbar a:hover { text-decoration: underline; } .gal-topbar .gal-brand { font-weight: 800; font-size: 1.1rem; margin-right: auto; } /* Global lys/mørk-toggle i topbaren (base.gohtml #gal-tema-toggle). */ .gal-tema-toggle { background: none; border: 1px solid var(--ug-on-brand); border-radius: var(--ug-radius); color: var(--ug-on-brand); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.2rem 0.45rem; } .gal-tema-toggle:hover { background: color-mix(in srgb, var(--ug-on-brand) 15%, transparent); } /* ── Tematiske undermenuer i topbaren (native

) ─────────────── Bespoke nav-chrome, ikke et registry-element. Vi bruger native

frem for fordi nav-punkter er ÆGTE : åbn-i-ny-fane / midterklik / ingen-JS virker (galleriets statiske eksport skal kunne navigeres uden at WA- loaderen er kørt). fyrer wa-select og kræver JS for at navigere.

er click/tap-toggle (mobil-sikkert) + tastatur-tilgængeligt natively. Spejler gal-topbar-mønstret (selv hand-rullet); alt på --ug-tokens. */ /* Reset WA's native-element styling of

(it gives them a white card background + border + 16px padding) so the trigger reads as a plain teal topbar link, not a white box on the teal bar. */ .gal-nav-group { position: relative; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; } .gal-nav-group > summary { color: var(--ug-on-brand); font-weight: 600; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0; background: transparent; border: 0; border-radius: 0; white-space: nowrap; } .gal-nav-group > summary::-webkit-details-marker { display: none; } /* NO-LAYOUT-SHIFT on open (ug3): WA's native.css gives `details[open] summary` a `margin-inline: calc(-1 * var(--wa-space-m))` (its accordion style, where the open summary bleeds into the panel padding). On a topbar trigger that −16px each side yanked the summary left and shrank the

, så en wrap'et
   reference læser som tekst med en blød affordance. Delt primitiv. */
.gal-ref-aabn { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.gal-ref-aabn code { text-decoration: underline; text-underline-offset: 2px; text-decoration-style: dotted; }
.gal-ref-aabn:hover code, .gal-ref-aabn:focus-visible code { text-decoration-style: solid; }

/* Node-modal layout — delt af /skaerm + /kompositionsgrupper, så samme nodes slice
   rendrer ens uanset hvilken side den åbnes fra. */
.gal-nodemodal::part(dialog) { --width: min(48rem, 94vw); }
.gal-elfull-dialog::part(dialog) { --width: min(56rem, 94vw); }
.gal-nodemodal-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.gal-nodemodal-top code { font-weight: 700; }
/* "Åbn detaljeside →" — pushed to the far right of the header row via margin-left:
   auto on the flex row above (no new WA utility needed for a single flex-item).
   Color reuses the brand link token already used elsewhere for gal-* deep-links. */
.gal-nodemodal-detalje { margin-left: auto; white-space: nowrap; color: var(--wa-color-brand-40); }
.gal-nodemodal-el { display: flex; flex-direction: column; gap: 0.6rem; }
.gal-nodemodal-preview { margin: 0; }
/* Fit the dialog width instead of gal-vp-desktop's fixed 1280px, so a full-width
   element (inline-size:100%) renders fully inside the modal rather than overflowing. */
.gal-nodemodal-preview.gal-vp-desktop { width: 100%; }
.gal-nodemodal-elbadges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0; }

/* Member-rows: en  så :last-child kan bytte connector ├─ → └─ uden
   template-aritmetik (galleriets FuncMap har ingen len/sub). Connector-præfikset
   tegnes UDELUKKENDE i CSS via ::before — .gal-pre i member-template'en er tom. */
.gal-tmembers { list-style: none; margin: 0; padding: 0; }
.gal-tmember .gal-pre::before { content: "│           ├─ "; }
.gal-tmember:last-child .gal-pre::before { content: "│           └─ "; }

/* Relationsmedlemmer inline (ADR-0067): den nested  sidder ÉT
   niveau dybere under sin gruppe-node. flex-wrap på member-rækken + flex-basis:100%
   på .gal-tsub tvinger listen ned på sin egen linje under rækken (uden :has()), så
   nesten virker på enhver Chrome. Connector tegnes igen i CSS via ::before.
   BÅDE .gal-tmember (top-niveau gruppe) OG .gal-tsubmember (en gruppe der selv er
   medlem af en gruppe) skal wrappe — ellers renderer en nestet gruppes egne
   medlemmer i samme flex-række til HØJRE for noden i stedet for indrykket nedenunder. */
.gal-tmember, .gal-tsubmember { flex-wrap: wrap; }
.gal-tsub { flex-basis: 100%; list-style: none; margin: 0; padding: 0; }
.gal-tsubmember .gal-pre::before { content: "│              ├─ "; }
.gal-tsubmember:last-child .gal-pre::before { content: "│              └─ "; }
/* Dybere nesting (gruppe-i-gruppe-i-gruppe): connector-præfikset er fast pr. klasse,
   så dybden vises i stedet ved at rykke hver nestet  ÉT trin til højre. Padding
   componder pr. niveau (en .gal-tsub inde i en .gal-tsubmember), så niveau 2, 3, …
   trapper visuelt — uden at røre niveau-1-layoutet (en .gal-tsub direkte under en
   .gal-tmember har ingen .gal-tsubmember-forælder og rammes derfor ikke). */
.gal-tsubmember > .gal-tsub { padding-left: 1.5rem; }

/* Position-mærke (1-baseret Plads-binding). Lille dæmpet pille foran medlems-noden. */
.gal-tpos {
  flex: none; align-self: center; margin-right: 0.4rem;
  min-width: 1.15rem; text-align: center;
  font-size: 0.6rem; font-weight: 700; line-height: 1.3;
  padding: 0.04rem 0.3rem; border-radius: 9999px;
  background: #1b2630; color: #9fb3c4; border: 1px solid #2c3b49;
}

/* Familie-tilhør (⬡): element-metadata, IKKE en node. Familie-farve (jf. .gal-node-fam). */
.gal-tfam {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3px;
  padding: 0.05rem 0.45rem; border-radius: 0.35rem; margin-left: 0.45rem;
  white-space: nowrap; background: #241a33; color: #c9a8f0;
}

/* "arrangeret af rel-X · følge" — gruppens arrangerende kompositionsrelation, dæmpet annotation. */
.gal-tarr { margin-left: 0.55rem; color: #8a97a6; font-size: 0.68rem; }
.gal-tarr code { color: #f0b169; font-weight: 700; }

/* Betingelse på en valgfri relationsmedlem-Plads (ADR-0067). */
.gal-tcond { margin-left: 0.45rem; color: #9a8ab0; font-size: 0.66rem; font-style: italic; }

/* Annotation-tags (slot-fyldning, dybde, status) — reference .fill/.free/.koster. */
.gal-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3px;
  padding: 0.05rem 0.45rem; border-radius: 0.35rem; margin-left: 0.45rem;
  white-space: nowrap;
}
.gal-tag-fill { background: #13352f; color: #54d6a0; }
.gal-tag-fri  { background: #3a3320; color: #e7c07a; }
.gal-tag-kand { background: #2a2c1a; color: #d4d07a; }
.gal-tag-fejl { background: #3a2330; color: #f5a3c7; }
/* kladde (ug3-j60cc.7): reserved-but-unbuilt — dashed amber outline reads as
   "placeholder, not real yet", distinct from kandidat's solid amber tag. */
.gal-tag-kladde { background: #2a2410; color: #e7c060; outline: 1px dashed #8a7320; outline-offset: -1px; }

.gal-tfoot {
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid #24303d;
  display: flex; gap: 1.25rem; flex-wrap: wrap;
}
.gal-tfoot .gal-okk { color: #54d6a0; font-weight: 700; font-size: 0.72rem; }

/* Byg-flade (byg.gohtml): spacing for the tegnebræt's control row above the
   live gal-tree. Spacing-only — the tree itself reuses the gal-tree block above. */
.gal-byg-kontrol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }

/* Slice-picker fejl-besked (ug3-j60cc.2.3): a WRAPPING red error paragraph in the
   dialog — distinct from the neutral grey .gal-hint tom-tekst. A full sentence,
   so it must wrap (the .gal-tag pill is white-space:nowrap and overflows on 390px),
   hence a block paragraph rather than a status pill. */
.gal-byg-fejl { color: var(--wa-color-danger-40); font-size: 0.85rem; font-weight: 600; margin: 0; }

/* Realisér-flip-knap (ug3-j60cc.2.5): a compact inline button that toggles a node's
   realiseret state (KOMMER ↔ FINDES). Rendered BOTH inside the dark tree row's
   .gal-ann AND in the light mangler-liste, so it carries its own contrast (dark
   background + light text) and reads on either. Spacing/affordance only — no WA-utility
   covers an inline tree-row action button. */
.gal-byg-flip {
  font: inherit; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px;
  cursor: pointer; margin-left: 0.45rem; white-space: nowrap;
  background: #16252f; color: #7fd0ff;
  border: 1px solid #2c4456; border-radius: 0.35rem;
  padding: 0.08rem 0.5rem;
}
.gal-byg-flip:hover { border-color: #7fd0ff; }
.gal-byg-flip:focus-visible { outline: 2px solid #7fd0ff; outline-offset: 1px; }
/* In the light mangler-liste row the same button sits on a pale background, so swap to
   a light-on-brand-tint skin for contrast. */
.gal-findings .gal-byg-flip { background: var(--wa-color-brand-95); color: var(--wa-color-brand-30); border-color: var(--wa-color-brand-80); }

/* ── UG semantic tokens (--ug-*: det ene projekt-semantik-namespace, ADR-0047) ──
   Roller, on-tekst, type/space/tracking/weight/radius. Bygger på --wa-* primitiver.
   Konsolideret fra de tidligere app- og ca-navne (ADR-0047, 2026-06-20). */
:root, .wa-light {
  --ug-bg:            var(--wa-color-neutral-95);
  --ug-surface:       #ffffff;
  --ug-text:          var(--wa-color-neutral-10);
  --ug-text-quiet:    var(--wa-color-neutral-40);
  /* --ug-text-soft sits between quiet and faint on the LIGHT background (most→least
     visible: text > quiet > soft > faint). On a brand-flade a kompositionsrelation re-maps
     it to --ug-on-brand-soft (see brand-surface override below). color-mix gives
     a genuine neutral-45 without inventing a named palette step. ADR-0047. */
  --ug-text-soft:     color-mix(in srgb, var(--wa-color-neutral-40), var(--wa-color-neutral-50));
  --ug-text-faint:    var(--wa-color-neutral-50);
  /* Context-neutral ICON-ink roles (ADR-0047 tier-2). Elements read these and
     NEVER --ug-brand/--ug-accent directly, so a kompositionsrelation/kompositionsgruppe-flade can
     re-map them via the cascade. Default context = dark-on-light: primary teal,
     secondary the RENE accent-core. The duotone foundation below consumes these. */
  --ug-ink-icon-primary:           var(--ug-brand);
  --ug-ink-icon-secondary:         var(--ug-icon-accent);
  /* Duotone-ikoners accent-sekundærfarve = den RENE accent-core (--ug-icon-accent
     = --ug-accent = #EA7246) ved fuld opacity (1), ALDRIG en lysere tint (fx
     accent-70). Identitetsfarven bærer duotone-laget; opacity er et token så en
     kontekst-flade kan re-mappe den, men defaulter til 1. ADR-0047 §2. */
  --ug-ink-icon-secondary-opacity: 1;
  --ug-brand:         #00483e; /* ren brand-identitet (seed, oklch 0.36 0.065 180; jf. :7) — IKKE et tint-trin */
  --ug-brand-strong:  var(--ug-brand); /* brand-TEKST (titler/links): mørk core #00483e på lys flade. Brand-SURFACE (split-panel/CTA) bruger --ug-brand DIREKTE, ikke dette. Dark-mode → brand-80 (lys teal) for kontrast (l.1268). */
  --ug-accent:        var(--wa-color-accent-60); /* ren accent-identitet #EA7246 (farve-token-arkitektur.md:68 + ADR-0047: trin 60, AAA-kravet "accent=sort tekst" loeftede den fra ren mid-coral) */
  /* Rene core-identitetsfarver for ALLE familier (ADR-0047 core-colour, kanonisk
     farve-spec). Hver families "base" — den rene identitet, IKKE et kontrast-stige-trin.
     Kontekst-invariant: ingen .wa-dark-override (jf. --ug-brand/--ug-accent). De familier
     hvis base falder PÅ et trin peger på trinnet; success/warning ligger MELLEM trin (hhv.
     over hele stigen) og er derfor rå hex. */
  --ug-danger:        var(--wa-color-danger-40);     /* #b6000e — danger-base = trin 40 */
  --ug-success:       #63b375;                        /* ren success-base (oklch 0.70 0.120 150) — mellem trin 70/60 */
  --ug-warning:       #fff075;                        /* ren warning-base (oklch 0.94 0.144 102) — lysere end hele stigen */
  --ug-neutral:       var(--wa-color-neutral-50);     /* #787573 — neutral-base = trin 50 */
  --ug-lys-accent:    var(--wa-color-lys-accent-50);  /* #946c5c — lys-accent-base = trin 50 */
  --ug-lys-brand:     var(--wa-color-lys-brand-50);   /* #66797f — lys-brand-base = trin 50 */
  --ug-info:          var(--wa-color-lys-brand-40);   /* #4a5c62 — info-tone (lys-brand trin 40, hvid tekst 7.0:1 AAA). Core-anker; badge + panel afspejler værdien via --ug-surface-info. Distinkt fra brand (CTA/store grafiske flader). */
  /* Accent paa TEKST (ADR-0060 semantisk use-tier). Aliaserer den raa
     --ug-accent-primitiv, saa accent-TEKST senere kan divergere (fx goeres
     moerkere) ET sted uden at roere accent-baggrunde/ikon-fyld. Elementer
     bruger DETTE for color:, ALDRIG den raa --ug-accent (konvention, ikke lintet). Vaerdi-identisk med
     --ug-accent i dag. */
  --ug-text-accent:   var(--ug-accent);
  /* Accent paa duotone-IKON-FYLD (ADR-0060 semantisk use-tier; ADR-0047
     §Consequences-1). Aliaserer den raa --ug-accent-primitiv for den 3.
     divergerbare use-kontekst: duotone-ikon-fyld via wa-icon --secondary-color
     (13 knap-elementer). Parallelt med --ug-text-accent (tekst) saa accent-
     ikon-fyld senere kan divergere fra accent-tekst/-baggrund ET sted uden at
     roere de andre. Elementer peger paa DETTE for --secondary-color, ALDRIG den
     raa --ug-accent. Vaerdi-identisk med --ug-accent i dag (intet dark-override
     -> konstant i begge temaer, som accent-primitiven). */
  --ug-icon-accent:   var(--ug-accent);
  --ug-border:        var(--wa-color-neutral-80);
  --ug-border-quiet:  var(--wa-color-neutral-90);

  /* Grammatik-begrebsgraf node-type-farver (forklaringer/#begrebsgraf). One hue
     per grammar node-type is the doc's pedagogical key — read the graph by colour.
     Lifted verbatim from the source doc's vetted light/dark palettes; the dark
     variants live in the .wa-dark block. Scoped to the graf section only. */
  --ug-graf-skaerm:   #1769aa;  --ug-graf-ramme:    #5a6776;
  --ug-graf-tilstand: #0d7a92;  --ug-graf-indhold:  #48586a;
  --ug-graf-rel:      #6b46c1;  --ug-graf-gruppe:   #8b3fd1;
  --ug-graf-element:  #1a8b5a;  --ug-graf-slice:    #9a5b00;
  --ug-graf-familie:  #c0306a;  --ug-graf-token:    #0d8b6f;
  --ug-graf-overlay:  #9a6b00;

  /* type scale — extracted from auth.css literals */
  --ug-text-2xl: 1.5625rem;   /* 25px — login title */
  --ug-text-14:  0.875rem;    /* 14px — topbar label (search/user/langswitch/logo) */
  --ug-text-m:   0.90625rem;  /* 14.5px — subtitle */
  --ug-text-s:   0.78125rem;  /* 12.5px — footnote */
  --ug-text-xs:  0.6875rem;   /* 11px — eyebrow/divider */
  --ug-text-2xs: 0.65625rem;  /* 10.5px — placeholder label */
  --ug-text-3xs:  0.53125rem; /* 8.5px — micro-label (redform.css) */
  --ug-text-2xs-s:0.59375rem; /* 9.5px — dense meta (samlet/liste.css) */
  --ug-text-xs-s: 0.625rem;   /* 10px — small mono/badge (liste.css) */
  --ug-text-s-d:  0.71875rem; /* 11.5px — table-head/footnote (samlet.css) */
  --ug-text-s-u:  0.75rem;    /* 12px — most-used body-small (37x liste/samlet/redform) */
  --ug-text-ms:   0.8125rem;  /* 13px — 2nd-most-used (31x) row/label text */
  --ug-text-md:   0.84375rem; /* 13.5px — control text (liste.css) */
  --ug-text-m-u:  0.875rem;   /* 14px — input text (samlet.css) */
  --ug-text-l-d:  0.96875rem; /* 15.5px — rare (samlet.css) */
  --ug-text-l:    0.9375rem;  /* 15px — section lead (samlet/liste.css) */
  --ug-text-base: 1rem;       /* 16px — body base (liste/samlet.css) */
  --ug-text-l-u:  1.0625rem;  /* 17px — subheading (samlet.css) */
  --ug-text-xl:   1.125rem;   /* 18px — card title (samlet.css) */
  --ug-text-2xl-xs:1.25rem;   /* 20px — number (redform/samlet.css) */
  --ug-text-2xl-s:1.3125rem;  /* 21px — stat number (redform/samlet.css) */
  --ug-text-2xl-m:1.375rem;   /* 22px — KPI number (samlet.css) */
  --ug-text-2xl-l:1.5rem;     /* 24px — large stat (samlet.css) */
  --ug-text-3xl-s:1.625rem;   /* 26px — hero number (samlet.css) */
  --ug-text-3xl-m:1.75rem;    /* 28px — hero number (samlet.css) */

  /* space scale — from auth.css gaps */
  --ug-space-m:   1rem;     /* 16px */
  --ug-space-s:   0.75rem;  /* 12px */
  --ug-space-xs:  0.5625rem;/* 9px */
  --ug-space-2xs: 0.4375rem;/* 7px */
  --ug-space-4xs: 0.0625rem;  /* 1px — hairline (liste.css) */
  --ug-space-3xs: 0.125rem;   /* 2px — micro gap (samlet/liste.css) */
  --ug-space-2xs-s:0.1875rem; /* 3px — tight gap (liste.css) */
  --ug-space-2xs-u:0.25rem;   /* 4px — tile gap (samlet.css) */
  --ug-space-xs-d:0.3125rem;  /* 5px — chip gap (samlet.css) */
  --ug-space-xs-s:0.375rem;   /* 6px — most-used gap (samlet/liste.css) */
  --ug-space-s-d: 0.5rem;     /* 8px — most-used gap (samlet/liste.css) */
  --ug-space-s-u: 0.625rem;   /* 10px — row gap (samlet.css) */
  --ug-space-s-m: 0.6875rem;  /* 11px — most-used padding (liste.css) */
  --ug-space-m-d: 0.8125rem;  /* 13px — most-used padding (samlet.css) */
  --ug-space-m-u: 0.875rem;   /* 14px — card padding (samlet.css) */
  --ug-space-ml:  0.9375rem;  /* 15px — note padding (samlet.css) */
  --ug-space-l:   1.125rem;   /* 18px — card padding (samlet.css) */
  --ug-space-xl:  1.25rem;    /* 20px — section gap (samlet.css) */
  --ug-space-xl-m:1.375rem;   /* 22px — card padding (samlet.css) */
  --ug-space-2xl: 1.5rem;     /* 24px — block padding (samlet.css) */
  --ug-space-2xl-m:1.625rem;  /* 26px — gap (samlet.css) */
  --ug-space-2xl-l:1.75rem;   /* 28px — gap (samlet.css) */
  --ug-space-3xl: 1.875rem;   /* 30px — block padding (samlet.css) */
  --ug-space-3xl-l:2rem;      /* 32px — block padding (samlet.css) */
  --ug-space-4xl: 2.125rem;   /* 34px — gap (samlet.css) */
  --ug-space-4xl-l:2.25rem;   /* 36px — block padding (samlet.css) */
  --ug-space-5xl: 4rem;       /* 64px — large pad (samlet.css) */
  --ug-space-6xl: 7.5rem;     /* 120px — hero pad (samlet.css) */
  --ug-space-none: 0rem;      /* 0 — flush stack (første brug: fane-aktivstreg, ug3-6nqle) */

  /* tracking scale — from auth.css letter-spacing */
  --ug-tracking-tight: -0.022em;
  --ug-tracking-wide:  0.1em;
  --ug-tracking-wider: 0.12em;
  --ug-tracking-label: 0.08em;
  --ug-tracking-tightest: -0.025em; /* -.025em (samlet.css) */
  --ug-tracking-tighter:  -0.02em;  /* -.02em — most-used negative (6x) */
  --ug-tracking-snug:     -0.01em;  /* -.01em (liste/samlet.css) */
  --ug-tracking-flush:     0.01em;  /* .01em (samlet.css) */
  --ug-tracking-xs:        0.02em;  /* .02em (samlet.css) */
  --ug-tracking-s:         0.03em;  /* .03em (liste.css) */
  --ug-tracking-m:         0.04em;  /* .04em — most-used positive (7x) */
  --ug-tracking-ml:        0.05em;  /* .05em (samlet.css) */
  --ug-tracking-l:         0.06em;  /* .06em — table-head (samlet.css) */
  --ug-tracking-xl:        0.09em;  /* .09em (samlet.css) */
  --ug-tracking-2xl:       0.11em;  /* .11em (samlet.css) */
  --ug-tracking-3xl:       0.14em;  /* .14em (samlet.css) */

  /* weight scale (--fw-* is NOT C8-valid; these are) */
  --ug-weight-light:    300;
  --ug-weight-medium:   500;
  --ug-weight-semibold: 600;
  --ug-weight-bold:     700;

  /* fonts */
  --ug-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ug-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ── Token-runde: surface/border, brand/accent, status, radius, brand-panel ── */
  --ug-surface-2:    var(--wa-color-neutral-95);
  --ug-surface-sunk: var(--wa-color-neutral-90);
  --ug-border-strong: var(--wa-color-neutral-70);
  --ug-icon-tile:    var(--wa-color-neutral-95);
  --ug-brand-line:   var(--wa-color-brand-80);
  --ug-brand-quiet:  var(--wa-color-lys-brand-95);
  --ug-accent-line:  var(--wa-color-accent-80);
  --ug-accent-quiet: var(--wa-color-accent-95);
  --ug-row-hover:    var(--wa-color-neutral-95);
  --ug-shadow:     0 1px 2px rgba(16,19,19,.06), 0 4px 16px -8px rgba(16,19,19,.14);
  --ug-shadow-pop: 0 8px 30px -8px rgba(16,19,19,.26), 0 2px 6px rgba(16,19,19,.10);
  --ug-radius-l: 16px;

  /* brand-panel hvid-på-mørk — kontekst-invariant (KUN her, IKKE gentaget i .wa-dark) */
  --ug-on-brand:       #fff;
  --ug-on-brand-quiet: rgba(255,255,255,.92);
  --ug-on-brand-soft:  rgba(255,255,255,.78);
  --ug-on-brand-faint: rgba(255,255,255,.62);
  /* accent-fladens on-blæk — SORT per ADR-0047 §2-tabellen (accent-familien er låst
     til sort on-tekst, AAA 7.0:1 på ren accent #EA7246). Kontekst-invariant som
     --ug-on-brand: --ug-accent har intet dark-override, så sort holder i begge temaer. */
  --ug-on-accent:      #000;
  --ug-text-3xl: 1.875rem;
}

/* ── Token-runde: mørk-mode-overrides for de nye semantiske tokens ─────────── */
.wa-dark {
  --ug-surface-2:    #1b1a19;
  --ug-surface-sunk: #100f0e;
  --ug-border-strong: var(--wa-color-neutral-30);
  --ug-icon-tile:    var(--wa-color-neutral-20);
  --ug-brand-line:   var(--wa-color-brand-30);
  --ug-brand-quiet:  var(--wa-color-lys-brand-10);
  --ug-accent-line:  var(--wa-color-accent-30);
  --ug-accent-quiet: #2a1610;
  --ug-row-hover:    #1b1a19;
  --ug-shadow:     0 1px 2px rgba(0,0,0,.4), 0 6px 20px -10px rgba(0,0,0,.6);
  --ug-shadow-pop: 0 10px 34px -8px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
  --ug-radius-l: 16px;

  /* Token-runde 2 (2026-06-21): the original .wa-dark flipped the *background*
     roles (surface-2/sunk, brand/accent-quiet) but NOT the base --ug-surface or the
     *ink* roles, so any tinted panel (banner, gal-fk-ex, chips) rendered
     dark-bg + dark-text. Complete the theme: the WA neutral scale is fixed
     lightness (neutral-10=dark … neutral-95=light), so dark mode picks the
     light end for ink and a dark hex for the base --ug-surface. Brand/accent text
     move to their light tints so they stay legible on the now-dark panel fills. */
  --ug-surface:       #1f1d1c;                    /* base card/panel-fyld → dark (elevated above surface-2) */
  --ug-text:          var(--wa-color-neutral-90); /* primary ink → light */
  --ug-text-quiet:    var(--wa-color-neutral-70);
  --ug-text-soft:     var(--wa-color-neutral-80);
  --ug-text-faint:    var(--wa-color-neutral-60);
  --ug-border:        var(--wa-color-neutral-30);
  --ug-border-quiet:  var(--wa-color-neutral-20);
  --ug-brand-strong:  var(--wa-color-brand-80);   /* brand text/links on dark → light teal */
  --ug-text-accent:   var(--wa-color-accent-70);  /* accent text → light coral on dark */
  --ug-warning-text:  var(--wa-color-warning-70); /* warning ink → light tint on dark (facit 30↔70-flip) */
  --ug-ink-icon-primary: var(--wa-color-brand-80);

  /* Begrebsgraf node-type hues — dark variants (source doc's dark palette). */
  --ug-graf-skaerm:   #7cc4ff;  --ug-graf-ramme:    #8a96a6;
  --ug-graf-tilstand: #6fd0e6;  --ug-graf-indhold:  #b6c2cf;
  --ug-graf-rel:      #c4a7ff;  --ug-graf-gruppe:   #d6a4ff;
  --ug-graf-element:  #5ad19a;  --ug-graf-slice:    #ffb454;
  --ug-graf-familie:  #ff8fb1;  --ug-graf-token:    #5fd0b0;
  --ug-graf-overlay:  #ffd479;
}

/* body sets color/background from RAW --wa-color tokens (look.css:201), so the
   --ug- indirection above cannot reach it; flip the page background + ink directly. */
.wa-dark body { background: #131211; color: var(--wa-color-neutral-90); }

/* ── LAG 3 — KONTEKST: brand-surface ink-override (ADR-0047 keystone) ───────────
   A brand-flade re-maps the context-neutral ink-role tokens for its whole
   subtree via the cascade. Elements underneath read the ug-text and ug-ink-icon
   roles exactly as on a light background — they NEVER know they sit on brand; the
   flade alone flips the ink to white. This single block lets a brand-flade
   flip ink for its whole subtree, replacing the per-element hardcoded ug-on-brand
   references AS elements adopt the neutral roles (foundation here migrates ONE
   proof-element; the messe-* sweep is tracked as a follow-up).

   Hooks (pick whichever marks a brand-flade):
     .split-brand       — the co-brand login panel (ramme-login.css render-chrome)
     [data-surface="brand"], .on-brand — generic hooks so future kompositionsrelationer/
       kompositionsgrupper can declare a brand-flade without a bespoke class.

   Icon ink on brand (designregel 2026-06-19): primary white, secondary an
   opaque accent-70 coral-tint — never the .4-blend (went muddy on green). */
.split-brand,
[data-surface="brand"],
.on-brand {
  --ug-text:        var(--ug-on-brand);
  --ug-text-quiet:  var(--ug-on-brand-quiet);
  --ug-text-soft:   var(--ug-on-brand-soft);
  --ug-text-faint:  var(--ug-on-brand-faint);
  --ug-ink-icon-primary:   var(--ug-on-brand);   /* white on brand */
  --ug-ink-icon-secondary: var(--ug-icon-accent); /* rene accent-core @ opacity 1 (ADR-0047 §2) — kontekst-invariant */
  --ug-border:      rgba(255, 255, 255, .22);      /* on-brand hairline */
}

/* ── LAG 3 — KONTEKST: per-familie panel-fyld-surface (ADR-0047 §Consequences-1 /
   ADR-0061 §5 / ug3-njo2o) ─────────────────────────────────────────────────────
   A tone-bearing panel marks its flade with [data-surface=""]; that
   single hook re-maps the context-neutral panel-fyld role --ug-surface to the
   family's --ug-surface- flade for its whole subtree, exactly as the
   brand hook above re-maps ink. A panel-element's CSS already reads the neutral
   `background: var(--ug-surface)` (ug-noegletal-flise, ug-stat-blok, …) and stays
   tone-agnostic — it NEVER hardcodes a family name; the flade alone tints it,
   and a panel with no [data-surface] keeps the global --ug-surface (fallback
   iboende i cascaden). On-tekst flips to the AAA-calibrated --ug-on--surface
   (white/black per familie: success/warning sort, danger/info/plan hvid) so text
   stays legible on the fulde familie-flade.
   This is the panel-fyld counterpart to the brand-surface keystone; status
   families (success/warning/danger/info/plan) get the same treatment as a set. */
[data-surface="success"] {
  --ug-surface:    var(--ug-surface-success);
  --ug-text:       var(--ug-on-success-surface);
}
[data-surface="warning"] {
  --ug-surface:    var(--ug-surface-warning);
  --ug-text:       var(--ug-on-warning-surface);
}
[data-surface="danger"] {
  --ug-surface:    var(--ug-surface-danger);
  --ug-text:       var(--ug-on-danger-surface);
}
[data-surface="info"] {
  --ug-surface:    var(--ug-surface-info);
  --ug-text:       var(--ug-on-info-surface);
}
[data-surface="plan"] {
  --ug-surface:    var(--ug-surface-plan);
  --ug-text:       var(--ug-on-plan-surface);
}

/* ── Duotone icon foundation (sharp-duotone) ──────────────────────────────── */
/* The duotone fill-colors are read from context-neutral ink-role tokens, NOT
   hardcoded to --ug-brand/--ug-accent. A kompositionsrelation/kompositionsgruppe-flade re-maps
   --ug-ink-icon-* for its subtree (ADR-0047 tier-3); the icon CSS stays
   context-free. */
wa-icon {
  --primary-color:     var(--ug-ink-icon-primary);
  --secondary-color:   var(--ug-ink-icon-secondary);
  --secondary-opacity: var(--ug-ink-icon-secondary-opacity);
}
/* ── LAG 3 — KONTEKST: glyph-ink on a loud button fill ──────────────────────
   A duotone glyph on a brand/loud CTA does NOT pick its colours here. Per the
   foundation above, the FLADE re-maps --ug-ink-icon-* for its subtree and the
   glyph stays context-free (ADR-0047 tier-3). The brand CTA buttons
   (ug-confirm-button, ug-magic-link-button, ug-send-nulstilling-button) supply
   the on-fill ink in their own element CSS: white primary + accent secondary on a
   brand-core fill — per docs/arkitektur/farve-token-arkitektur.md (2026-06-15):
   "på brand-fladen: hvid primær + accent sekundær".
   A prior version force-mapped BOTH layers to --wa-color-on-loud here, flattening
   the duotone to solid white. That global component-selector is the anti-pattern
   the foundation comment warns against; the decision belongs on the flade. */

/* ── Gruppe vs. familie forklaringsside (gal-gvf-*) ──────────────────────────
   Alt scopet under .gal-gvf så mockup/visning-CSS ikke lækker. Lokale --ug-gvf-*
   aliasser mapper på de kanoniske --ug-* tokens (graf-farver + semantiske), så
   light/dark flipper automatisk gennem token-systemet. Ingen rå literaler. */
.gal-gvf{
  --ug-gvf-gruppe:var(--ug-graf-gruppe); --ug-gvf-familie:var(--ug-graf-familie);
  --ug-gvf-element:var(--ug-graf-element); --ug-gvf-rel:var(--ug-graf-rel);
  --ug-gvf-ok:var(--ug-success); --ug-gvf-no:var(--ug-danger); --ug-gvf-warn:var(--ug-graf-slice);
  --ug-gvf-panel:var(--ug-surface); --ug-gvf-ink:var(--ug-text);
  --ug-gvf-muted:var(--ug-text-quiet); --ug-gvf-line:var(--ug-border-quiet);
  --ug-gvf-line2:var(--ug-border); --ug-gvf-mono:var(--ug-mono);
}
.gal-gvf .gvf-lead{color:var(--ug-gvf-muted);margin:0 0 12px;max-width:72ch}
.gal-gvf .gvf-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 4px;font-size:0.9rem}
.gal-gvf .gvf-legend span{display:inline-flex;align-items:center;gap:7px}
.gal-gvf .gvf-dot{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block}
.gal-gvf .is-g{color:var(--ug-gvf-gruppe)} .gal-gvf .is-f{color:var(--ug-gvf-familie)}
.gal-gvf .gvf-dot.is-g{background:var(--ug-gvf-gruppe)}
.gal-gvf .gvf-dot.is-f{background:var(--ug-gvf-familie)}
.gal-gvf .gvf-dot.is-e{background:var(--ug-gvf-element)}

/* bordered panel + accent modifiers */
.gal-gvf .gvf-card{background:var(--ug-gvf-panel);border:1px solid var(--ug-gvf-line);
  border-radius:14px;padding:20px 22px;margin:0 0 22px}
.gal-gvf .gvf-card.is-fam{border-color:color-mix(in oklab,var(--ug-gvf-familie) 35%,var(--ug-gvf-line))}
.gal-gvf .gvf-card.is-bad{border-color:color-mix(in oklab,var(--ug-gvf-no) 38%,var(--ug-gvf-line))}
.gal-gvf .gvf-card.is-quiet{border-color:var(--ug-gvf-line2)}
.gal-gvf .gvf-card > h2{margin:0 0 14px;font-size:1.1rem}
.gal-gvf .gvf-sub{color:var(--ug-gvf-muted);font-size:0.92rem;margin:0 0 12px}
.gal-gvf .gvf-key{font-weight:600;color:var(--ug-gvf-ink);font-size:0.92rem;margin:14px 0 0}

/* two- and three-column grids */
.gal-gvf .gvf-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gal-gvf .gvf-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:760px){.gal-gvf .gvf-vs{grid-template-columns:1fr}}
@media (max-width:680px){.gal-gvf .gvf-three{grid-template-columns:1fr}}
.gal-gvf .gvf-mid{align-self:center}

/* concept columns */
.gal-gvf .gvf-col{border:1.5px solid var(--ug-gvf-line2);border-radius:14px;padding:18px;background:var(--ug-gvf-panel)}
.gal-gvf .gvf-col.is-g{border-color:color-mix(in oklab,var(--ug-gvf-gruppe) 55%,var(--ug-gvf-line))}
.gal-gvf .gvf-col.is-f{border-color:color-mix(in oklab,var(--ug-gvf-familie) 55%,var(--ug-gvf-line))}
.gal-gvf .gvf-col.is-ok{border-color:color-mix(in oklab,var(--ug-gvf-ok) 50%,var(--ug-gvf-line))}
.gal-gvf .gvf-col.is-bad{border-color:color-mix(in oklab,var(--ug-gvf-no) 50%,var(--ug-gvf-line))}
.gal-gvf .gvf-col h3{margin:0 0 2px;font-size:1rem;display:flex;align-items:center;gap:8px}
.gal-gvf .gvf-col.is-g h3{color:var(--ug-gvf-gruppe)} .gal-gvf .gvf-col.is-f h3{color:var(--ug-gvf-familie)}
.gal-gvf .gvf-q{font-size:0.85rem;color:var(--ug-gvf-muted);margin:0 0 4px;font-style:italic}
.gal-gvf .gvf-path{font-family:var(--ug-gvf-mono);font-size:0.76rem;color:var(--ug-gvf-muted);margin:0 0 14px;word-break:break-word}

/* viz: composition stack vs family selector */
.gal-gvf .gvf-viz{background:color-mix(in oklab,var(--ug-gvf-ink) 4%,transparent);
  border:1px dashed var(--ug-gvf-line2);border-radius:11px;padding:16px;margin-bottom:12px}
.gal-gvf .gvf-cap{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ug-gvf-muted);margin-bottom:11px;font-weight:600}
.gal-gvf .gvf-stack{display:grid;gap:7px;position:relative;
  border-left:3px solid color-mix(in oklab,var(--ug-gvf-rel) 60%,transparent);padding-left:13px}
.gal-gvf .gvf-rl{position:absolute;left:-6px;top:50%;transform:translate(-100%,-50%) rotate(-90deg);
  transform-origin:center;font-size:0.6rem;color:var(--ug-gvf-rel);font-family:var(--ug-gvf-mono);white-space:nowrap}
.gal-gvf .gvf-mem{border:1px solid color-mix(in oklab,var(--ug-gvf-gruppe) 40%,var(--ug-gvf-line));
  background:color-mix(in oklab,var(--ug-gvf-gruppe) 9%,var(--ug-gvf-panel));border-radius:8px;
  padding:8px 11px;font-size:0.83rem;display:flex;align-items:center;gap:8px}
.gal-gvf .gvf-mem.is-ok{border-color:color-mix(in oklab,var(--ug-gvf-ok) 50%,var(--ug-gvf-line));background:color-mix(in oklab,var(--ug-gvf-ok) 9%,var(--ug-gvf-panel))}
.gal-gvf .gvf-mem.is-bad{border-color:color-mix(in oklab,var(--ug-gvf-no) 55%,var(--ug-gvf-line));background:color-mix(in oklab,var(--ug-gvf-no) 10%,var(--ug-gvf-panel));flex-direction:column;align-items:stretch;gap:7px}
.gal-gvf .gvf-mem .gvf-d,.gal-gvf .gvf-fopt .gvf-d{width:8px;height:8px;border-radius:2px;background:var(--ug-gvf-element);flex:none}
.gal-gvf .gvf-slot{display:flex;align-items:center;gap:8px;font-family:var(--ug-gvf-mono);font-size:0.78rem}
.gal-gvf .gvf-chips{display:flex;gap:5px;flex-wrap:wrap;padding-left:16px}
.gal-gvf .gvf-chips span{font-size:0.66rem;font-family:var(--ug-gvf-mono);border:1px dashed var(--ug-gvf-line2);border-radius:5px;padding:2px 6px;color:var(--ug-gvf-muted);background:var(--ug-gvf-panel)}
.gal-gvf .gvf-gnote{font-size:0.77rem;color:var(--ug-gvf-muted);margin-top:9px;text-align:center}

/* family pick-one selector (kernen) */
.gal-gvf .gvf-fam{display:grid;gap:7px}
.gal-gvf .gvf-fopt{border:1px solid var(--ug-gvf-line2);border-radius:8px;padding:8px 11px;font-size:0.83rem;display:flex;align-items:center;gap:8px;opacity:0.42}
.gal-gvf .gvf-fopt .gvf-d{opacity:0.5}
.gal-gvf .gvf-fopt.is-pick{opacity:1;border-color:color-mix(in oklab,var(--ug-gvf-familie) 60%,var(--ug-gvf-line));background:color-mix(in oklab,var(--ug-gvf-familie) 11%,var(--ug-gvf-panel))}
.gal-gvf .gvf-fopt.is-pick .gvf-d{background:var(--ug-gvf-familie);opacity:1}
.gal-gvf .gvf-pin{margin-left:auto;font-size:0.67rem;font-family:var(--ug-gvf-mono);color:var(--ug-gvf-muted)}
.gal-gvf .gvf-fopt.is-pick .gvf-pin{color:var(--ug-gvf-familie);font-weight:700}

.gal-gvf .gvf-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:0.85rem}
.gal-gvf .gvf-dl dt{color:var(--ug-gvf-muted)} .gal-gvf .gvf-dl dd{margin:0;font-weight:600}

/* concrete login mockups */
.gal-gvf .gvf-mock{border:1px solid var(--ug-gvf-line2);border-radius:12px;padding:13px;background:var(--ug-gvf-panel)}
.gal-gvf .gvf-mh{font-size:0.82rem;font-weight:700;margin:0 0 10px}
.gal-gvf .gvf-field{border:1.5px solid var(--ug-gvf-line2);border-radius:8px;padding:9px 10px;font-size:0.76rem;color:var(--ug-gvf-muted);margin-bottom:8px;display:flex;align-items:center;gap:7px;background:color-mix(in oklab,var(--ug-gvf-ink) 3%,var(--ug-gvf-panel))}
.gal-gvf .gvf-btn{border-radius:8px;padding:8px;text-align:center;font-size:0.76rem;font-weight:600;margin-bottom:7px}
.gal-gvf .gvf-btn.is-primary{background:color-mix(in oklab,var(--ug-gvf-rel) 16%,var(--ug-gvf-panel));color:var(--ug-gvf-rel)}
.gal-gvf .gvf-btn.is-ghost{border:1px solid var(--ug-gvf-line2);color:var(--ug-gvf-ink)}
.gal-gvf .gvf-mock .gvf-btn:last-child,.gal-gvf .gvf-slotgrp .gvf-field:last-child,.gal-gvf .gvf-slotgrp .gvf-btn:last-child{margin-bottom:0}
.gal-gvf .gvf-field.is-slotfam{outline:2px solid var(--ug-gvf-familie);outline-offset:2px}
.gal-gvf .gvf-slotgrp{outline:2px solid var(--ug-gvf-gruppe);outline-offset:3px;border-radius:9px;padding:4px;margin-bottom:8px}
.gal-gvf .gvf-mockcap{font-size:0.71rem;font-family:var(--ug-gvf-mono);color:var(--ug-gvf-muted);text-align:center;margin:8px 0 0}
.gal-gvf .gvf-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--ug-gvf-line2);border-radius:8px;margin-bottom:7px;font-size:0.78rem}
.gal-gvf .gvf-row:last-child{margin-bottom:0}
.gal-gvf .gvf-row .gvf-nm{flex:1}
.gal-gvf .gvf-pill{font-size:0.67rem;font-weight:700;padding:2px 9px;border-radius:999px;outline:2px solid var(--ug-gvf-familie);outline-offset:2px}
.gal-gvf .gvf-pill.is-admin{background:color-mix(in oklab,var(--ug-gvf-no) 16%,var(--ug-gvf-panel));color:var(--ug-gvf-no)}
.gal-gvf .gvf-pill.is-red{background:color-mix(in oklab,var(--ug-gvf-rel) 16%,var(--ug-gvf-panel));color:var(--ug-gvf-rel)}
.gal-gvf .gvf-pill.is-mem{background:color-mix(in oklab,var(--ug-gvf-ink) 9%,var(--ug-gvf-panel));color:var(--ug-gvf-muted)}

/* rule / violation cards */
.gal-gvf .gvf-rules{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.gal-gvf .gvf-rules.is-two{grid-template-columns:1fr 1fr}
@media (max-width:820px){.gal-gvf .gvf-rules,.gal-gvf .gvf-rules.is-two{grid-template-columns:1fr}}
.gal-gvf .gvf-rc{border:1.5px solid var(--ug-gvf-line2);border-radius:12px;padding:15px 16px;background:var(--ug-gvf-panel)}
.gal-gvf .gvf-rc.is-ok{border-color:color-mix(in oklab,var(--ug-gvf-ok) 50%,var(--ug-gvf-line))}
.gal-gvf .gvf-rc.is-bad{border-color:color-mix(in oklab,var(--ug-gvf-no) 50%,var(--ug-gvf-line))}
.gal-gvf .gvf-rc h4{margin:0 0 3px;font-size:0.94rem;display:flex;align-items:center;gap:7px}
.gal-gvf .gvf-rc.is-ok h4{color:var(--ug-gvf-ok)} .gal-gvf .gvf-rc.is-bad h4{color:var(--ug-gvf-no)}
.gal-gvf .gvf-why{font-size:0.83rem;color:var(--ug-gvf-muted);margin:0 0 11px}
.gal-gvf .gvf-badge{font-size:0.63rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-left:auto;white-space:nowrap}
.gal-gvf .gvf-badge.is-ok{background:color-mix(in oklab,var(--ug-gvf-ok) 18%,transparent);color:var(--ug-gvf-ok)}
.gal-gvf .gvf-badge.is-bad{background:color-mix(in oklab,var(--ug-gvf-no) 20%,transparent);color:var(--ug-gvf-no)}
.gal-gvf .gvf-code{font-family:var(--ug-gvf-mono);font-size:0.73rem;line-height:1.55;background:color-mix(in oklab,var(--ug-gvf-ink) 6%,transparent);border:1px solid var(--ug-gvf-line);border-radius:8px;padding:9px 11px;margin:0 0 10px;white-space:pre-wrap;word-break:break-word}
.gal-gvf .gvf-ann{color:var(--ug-gvf-muted)}
.gal-gvf .gvf-hlbad{color:var(--ug-gvf-no);font-weight:700}
.gal-gvf .gvf-hlok{color:var(--ug-gvf-ok);font-weight:700}
.gal-gvf .gvf-err{font-family:var(--ug-gvf-mono);font-size:0.72rem;line-height:1.5;color:var(--ug-gvf-no);background:color-mix(in oklab,var(--ug-gvf-no) 9%,transparent);border-left:3px solid var(--ug-gvf-no);border-radius:0 6px 6px 0;padding:8px 10px;margin:0}
.gal-gvf .gvf-okline{font-family:var(--ug-gvf-mono);font-size:0.72rem;color:var(--ug-gvf-ok);background:color-mix(in oklab,var(--ug-gvf-ok) 9%,transparent);border-left:3px solid var(--ug-gvf-ok);border-radius:0 6px 6px 0;padding:8px 10px;margin:0}
.gal-gvf .gvf-x{color:var(--ug-gvf-no);font-weight:700} .gal-gvf .gvf-ck{color:var(--ug-gvf-ok);font-weight:700}

/* deciding-test callout */
.gal-gvf .gvf-test{margin:16px 0 0;padding:13px 15px;border:1.5px solid color-mix(in oklab,var(--ug-gvf-familie) 45%,var(--ug-gvf-line));border-radius:11px;background:color-mix(in oklab,var(--ug-gvf-familie) 7%,var(--ug-gvf-panel))}
.gal-gvf .gvf-test p{margin:0;font-size:0.88rem;line-height:1.6}
.gal-gvf .gvf-test .gvf-th{font-weight:700;font-size:0.93rem;margin:0 0 7px}

/* side-by-side table */
.gal-gvf table{width:100%;border-collapse:collapse;font-size:0.89rem}
.gal-gvf th,.gal-gvf td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--ug-gvf-line);vertical-align:top}
.gal-gvf thead th{font-size:0.76rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--ug-gvf-muted)}
.gal-gvf thead th.is-g{color:var(--ug-gvf-gruppe)} .gal-gvf thead th.is-f{color:var(--ug-gvf-familie)}
.gal-gvf td.gvf-ax{color:var(--ug-gvf-muted);font-size:0.83rem;width:24%}
.gal-gvf tbody tr:last-child td{border-bottom:none}
.gal-gvf ul.gvf-flat{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gal-gvf ul.gvf-flat li{display:flex;gap:10px;align-items:flex-start;font-size:0.92rem}
.gal-gvf ul.gvf-flat li .gvf-mk{flex:none;font-weight:700;width:18px;text-align:center}

/* ── Slice forklaringsside (gal-slc-*) ──────────────────────────────────────
   Alt scopet under .gal-slc så mockup/visning-CSS ikke lækker (egne slc-*-klasser,
   genbruger IKKE gvf-*). Lokale --ug-slc-* aliasser mapper på de kanoniske --ug-*
   tokens (graf-farver + semantiske), så light/dark flipper automatisk gennem token-
   systemet. Ingen rå literaler. Farve-roller: slice=graf-slice (amber) · data=graf-
   skaerm (blå, = kildens --data) · viewer=graf-familie (magenta, = kildens --view) ·
   grundet=success · forslag=warning · host=info. */
.gal-slc{
  --ug-slc-slice:var(--ug-graf-slice); --ug-slc-data:var(--ug-graf-skaerm);
  --ug-slc-view:var(--ug-graf-familie); --ug-slc-host:var(--ug-info);
  --ug-slc-ok:var(--ug-success); --ug-slc-no:var(--ug-danger); --ug-slc-warn:var(--ug-warning);
  --ug-slc-panel:var(--ug-surface); --ug-slc-ink:var(--ug-text);
  --ug-slc-muted:var(--ug-text-quiet); --ug-slc-line:var(--ug-border-quiet);
  --ug-slc-line2:var(--ug-border); --ug-slc-mono:var(--ug-mono);
}
.gal-slc .slc-lead{color:var(--ug-slc-muted);margin:0 0 12px;max-width:78ch}
.gal-slc .slc-lead .slc-is-s{color:var(--ug-slc-slice)}
.gal-slc .slc-is-data{color:var(--ug-slc-data)} .gal-slc .slc-is-view{color:var(--ug-slc-view)}
.gal-slc .slc-x{color:var(--ug-slc-no);font-weight:700} .gal-slc .slc-ck{color:var(--ug-slc-ok);font-weight:700}

/* GRUNDET / FORSLAG legend + inline tags */
.gal-slc .slc-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 8px;font-size:0.9rem}
.gal-slc .slc-legend span{display:inline-flex;align-items:center;gap:7px}
.gal-slc .slc-tag{font-style:normal;font-size:0.63rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;white-space:nowrap;flex:none}
.gal-slc .slc-tag.slc-is-grundet{background:color-mix(in oklab,var(--ug-slc-ok) 18%,transparent);color:var(--ug-slc-ok);border:1px solid color-mix(in oklab,var(--ug-slc-ok) 45%,transparent)}
.gal-slc .slc-tag.slc-is-forslag{background:color-mix(in oklab,var(--ug-slc-warn) 24%,transparent);color:var(--ug-slc-ink);border:1px solid color-mix(in oklab,var(--ug-slc-warn) 60%,var(--ug-slc-line))}

/* cards */
.gal-slc .slc-card{background:var(--ug-slc-panel);border:1px solid var(--ug-slc-line);
  border-radius:14px;padding:20px 22px;margin:0 0 22px}
.gal-slc .slc-card.is-quiet{border-color:var(--ug-slc-line2)}
.gal-slc .slc-card.is-bad{border-color:color-mix(in oklab,var(--ug-slc-no) 35%,var(--ug-slc-line))}
.gal-slc .slc-card > h2{margin:0 0 12px;font-size:1.1rem}
.gal-slc .slc-card > h2::before{content:"";display:inline-block;width:4px;height:0.95em;margin-right:9px;vertical-align:-0.08em;border-radius:2px;background:var(--ug-slc-slice)}
.gal-slc .slc-sub{color:var(--ug-slc-muted);font-size:0.92rem;margin:0 0 12px}

/* cite chip */
.gal-slc .slc-cite{font-family:var(--ug-slc-mono);font-size:0.68rem;color:var(--ug-slc-host);background:color-mix(in oklab,var(--ug-slc-host) 12%,transparent);padding:1px 6px;border-radius:5px;white-space:nowrap}

/* definition block */
.gal-slc .slc-def{border-left:3px solid var(--ug-slc-slice);padding:6px 0 6px 15px;margin:6px 0 14px;font-size:0.95rem}
.gal-slc .slc-def b{color:var(--ug-slc-slice)}

/* flat note + lists */
.gal-slc .slc-note{background:color-mix(in oklab,var(--ug-slc-no) 8%,transparent);border:1px solid color-mix(in oklab,var(--ug-slc-no) 30%,var(--ug-slc-line));border-radius:11px;padding:12px 15px;font-size:0.9rem;margin:12px 0}
.gal-slc ul.slc-flat{list-style:none;margin:8px 0;padding:0;display:grid;gap:9px}
.gal-slc ul.slc-flat li{display:flex;gap:10px;align-items:flex-start;font-size:0.9rem;line-height:1.55}
.gal-slc ul.slc-flat li .slc-mk{flex:none;font-weight:700;width:16px;text-align:center}

/* trigger → slice → presentation flow */
.gal-slc .slc-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0;font-family:var(--ug-slc-mono);font-size:0.78rem}
.gal-slc .slc-node{border:1.5px solid var(--ug-slc-line2);border-radius:9px;padding:9px 12px;background:var(--ug-slc-panel);text-align:center}
.gal-slc .slc-node small{color:var(--ug-slc-muted);font-size:0.92em}
.gal-slc .slc-node.slc-n-trig{border-color:color-mix(in oklab,var(--ug-slc-host) 55%,var(--ug-slc-line))}
.gal-slc .slc-node.slc-n-src{border-color:color-mix(in oklab,var(--ug-slc-slice) 55%,var(--ug-slc-line))}
.gal-slc .slc-node.slc-n-pres{border:1.5px dashed var(--ug-slc-slice);background:color-mix(in oklab,var(--ug-slc-slice) 9%,var(--ug-slc-panel));color:var(--ug-slc-slice)}
.gal-slc .slc-ar{color:var(--ug-slc-muted);font-size:1.05rem}

/* 2×3 modi axis grid */
.gal-slc .slc-axis{display:grid;grid-template-columns:64px 1fr 1fr 1fr;gap:1px;background:var(--ug-slc-line2);border:1px solid var(--ug-slc-line2);border-radius:10px;overflow:hidden;margin:12px 0;font-size:0.82rem}
.gal-slc .slc-axis > div{background:var(--ug-slc-panel);padding:9px 11px}
.gal-slc .slc-axis .slc-h{font-weight:700;color:var(--ug-slc-muted);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.03em}
.gal-slc .slc-axis .slc-on{background:color-mix(in oklab,var(--ug-slc-slice) 11%,var(--ug-slc-panel));color:var(--ug-slc-slice);font-weight:600}
.gal-slc .slc-axis .slc-on.slc-deleg{background:color-mix(in oklab,var(--ug-slc-warn) 16%,var(--ug-slc-panel));color:var(--ug-slc-ink)}
@media (max-width:640px){.gal-slc .slc-axis{grid-template-columns:54px 1fr 1fr 1fr;font-size:0.72rem}.gal-slc .slc-axis > div{padding:7px 6px}}

/* modi mockup grid */
.gal-slc .slc-modi{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:920px){.gal-slc .slc-modi{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.gal-slc .slc-modi{grid-template-columns:1fr}}
.gal-slc .slc-m{border:1px solid var(--ug-slc-line2);border-radius:13px;padding:0;overflow:hidden;background:var(--ug-slc-panel);display:flex;flex-direction:column}
.gal-slc .slc-m.slc-m-deleg{border-color:color-mix(in oklab,var(--ug-slc-warn) 55%,var(--ug-slc-line))}
.gal-slc .slc-mhd{padding:11px 14px;border-bottom:1px solid var(--ug-slc-line);display:flex;flex-direction:column;gap:2px}
.gal-slc .slc-mhd b{font-size:0.98rem;color:var(--ug-slc-slice)}
.gal-slc .slc-m.slc-m-deleg .slc-mhd b{color:color-mix(in oklab,var(--ug-slc-warn) 70%,var(--ug-slc-ink))}
.gal-slc .slc-cell{font-size:0.72rem;color:var(--ug-slc-muted)}

/* mockup host chrome */
.gal-slc .slc-host{border:1.5px solid color-mix(in oklab,var(--ug-slc-host) 60%,var(--ug-slc-line));border-radius:0;background:color-mix(in oklab,var(--ug-slc-ink) 3%,var(--ug-slc-panel));margin:13px 14px;border-radius:10px;position:relative;overflow:hidden}
.gal-slc .slc-host .slc-bar{background:color-mix(in oklab,var(--ug-slc-host) 13%,var(--ug-slc-panel));color:var(--ug-slc-host);font-size:0.66rem;font-weight:700;padding:5px 10px;border-bottom:1px solid color-mix(in oklab,var(--ug-slc-host) 45%,var(--ug-slc-line))}
.gal-slc .slc-host .slc-content{padding:11px;font-size:0.74rem;color:var(--ug-slc-muted);line-height:1.7}
.gal-slc .slc-host.slc-h-data{border-color:color-mix(in oklab,var(--ug-slc-data) 60%,var(--ug-slc-line))}
.gal-slc .slc-host.slc-h-data .slc-bar{background:color-mix(in oklab,var(--ug-slc-data) 13%,var(--ug-slc-panel));color:var(--ug-slc-data);border-bottom-color:color-mix(in oklab,var(--ug-slc-data) 45%,var(--ug-slc-line))}
.gal-slc .slc-host.slc-h-view{border-color:color-mix(in oklab,var(--ug-slc-view) 60%,var(--ug-slc-line))}
.gal-slc .slc-host.slc-h-view .slc-bar{background:color-mix(in oklab,var(--ug-slc-view) 13%,var(--ug-slc-panel));color:var(--ug-slc-view);border-bottom-color:color-mix(in oklab,var(--ug-slc-view) 45%,var(--ug-slc-line))}
.gal-slc .slc-trig{display:inline-block;border:1.5px solid color-mix(in oklab,var(--ug-slc-host) 60%,var(--ug-slc-line));color:var(--ug-slc-host);border-radius:7px;padding:4px 9px;font-size:0.72rem;font-weight:600;margin:5px 0;background:var(--ug-slc-panel)}
.gal-slc .slc-mu{color:var(--ug-slc-muted);opacity:0.8}

/* slice-flader (drawer/dialog/popover/inline) */
.gal-slc .slc-surf{background:color-mix(in oklab,var(--ug-slc-slice) 11%,var(--ug-slc-panel));border:1.5px solid var(--ug-slc-slice);border-radius:9px;padding:8px 9px;font-size:0.7rem;color:var(--ug-slc-ink);line-height:1.7}
.gal-slc .slc-surf.slc-inline{border-style:dashed;margin:6px 0 0}
.gal-slc .slc-surf.slc-drawer{box-shadow:-4px 0 10px color-mix(in oklab,var(--ug-slc-ink) 10%,transparent)}
.gal-slc .slc-surf.slc-dialog{box-shadow:0 6px 18px color-mix(in oklab,var(--ug-slc-ink) 18%,transparent)}
.gal-slc .slc-surf.slc-popover{box-shadow:0 4px 12px color-mix(in oklab,var(--ug-slc-ink) 14%,transparent)}
.gal-slc .slc-slab{color:var(--ug-slc-slice);font-weight:700;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.04em;display:block;margin-bottom:4px}
.gal-slc .slc-mcap{font-size:0.78rem;color:var(--ug-slc-muted);line-height:1.55;padding:0 14px 13px;margin:0}
.gal-slc .slc-mcap b{color:var(--ug-slc-ink)}

/* §6 field grid */
.gal-slc .slc-dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
@media (max-width:680px){.gal-slc .slc-dl{grid-template-columns:1fr}}
.gal-slc .slc-field{border:1px solid var(--ug-slc-line2);border-radius:11px;padding:13px 15px;background:var(--ug-slc-panel)}
.gal-slc .slc-field.slc-is-grundet-b{border-color:color-mix(in oklab,var(--ug-slc-ok) 40%,var(--ug-slc-line))}
.gal-slc .slc-field h3{margin:0 0 5px;font-size:0.92rem;display:flex;align-items:center;gap:8px}
.gal-slc .slc-field p{margin:0;font-size:0.84rem;color:var(--ug-slc-muted)}

/* toml-style code blocks */
.gal-slc .slc-code{font-family:var(--ug-slc-mono);font-size:0.73rem;line-height:1.6;background:color-mix(in oklab,var(--ug-slc-ink) 6%,transparent);border:1px solid var(--ug-slc-line);border-radius:8px;padding:10px 12px;margin:0 0 12px;white-space:pre-wrap;word-break:break-word}
.gal-slc .slc-ann{color:var(--ug-slc-muted)}
.gal-slc .slc-hlok{color:var(--ug-slc-ok);font-weight:700}
.gal-slc .slc-hlbad{color:var(--ug-slc-no);font-weight:700}

/* scope: mantra + data/viewer columns */
.gal-slc .slc-mantra{background:color-mix(in oklab,var(--ug-slc-slice) 8%,var(--ug-slc-panel));border:1px solid color-mix(in oklab,var(--ug-slc-slice) 45%,var(--ug-slc-line));border-radius:12px;padding:13px 16px;margin:12px 0 18px;text-align:center;font-size:0.95rem}
.gal-slc .slc-mantra small{display:block;font-size:0.72rem;color:var(--ug-slc-muted);margin-top:6px}
.gal-slc .slc-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:800px){.gal-slc .slc-vs{grid-template-columns:1fr}}
.gal-slc .slc-col{border:1.5px solid var(--ug-slc-line2);border-radius:14px;padding:16px 18px;background:var(--ug-slc-panel)}
.gal-slc .slc-col.slc-c-data{border-color:color-mix(in oklab,var(--ug-slc-data) 55%,var(--ug-slc-line))}
.gal-slc .slc-col.slc-c-view{border-color:color-mix(in oklab,var(--ug-slc-view) 55%,var(--ug-slc-line))}
.gal-slc .slc-col.slc-c-ok{border-color:color-mix(in oklab,var(--ug-slc-ok) 50%,var(--ug-slc-line))}
.gal-slc .slc-col.slc-c-bad{border-color:color-mix(in oklab,var(--ug-slc-no) 50%,var(--ug-slc-line))}
.gal-slc .slc-col > h3{margin:0 0 8px;font-size:1rem}
.gal-slc .slc-col.slc-c-data > h3{color:var(--ug-slc-data)} .gal-slc .slc-col.slc-c-view > h3{color:var(--ug-slc-view)}
.gal-slc .slc-col > .slc-q{font-size:0.85rem;color:var(--ug-slc-muted);margin:0 0 12px}
.gal-slc .slc-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.gal-slc .slc-split{grid-template-columns:1fr}}
.gal-slc .slc-split .slc-host{margin:0}
.gal-slc .slc-keep{color:var(--ug-slc-ok);font-weight:600}
.gal-slc .slc-drop{color:var(--ug-slc-muted);text-decoration:line-through;opacity:0.65}

/* Frys-vieweren-testen callout + table */
.gal-slc .slc-frys{margin:18px 0 0;padding:16px 18px;border:1px solid color-mix(in oklab,var(--ug-slc-ok) 45%,var(--ug-slc-line));border-radius:14px;background:color-mix(in oklab,var(--ug-slc-ok) 7%,var(--ug-slc-panel))}
.gal-slc .slc-frys h3{margin:0 0 6px;font-size:1rem;color:var(--ug-slc-ok)}
.gal-slc .slc-frys-q{font-size:0.95rem;font-weight:700;margin:0 0 8px}
.gal-slc table{width:100%;border-collapse:collapse;font-size:0.85rem;margin:8px 0}
.gal-slc th,.gal-slc td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--ug-slc-line);vertical-align:top}
/* Narrow screens: the 4-column Frys-table would push the page wide; let it scroll
   horizontally INSIDE its own card instead of overflowing the viewport. */
@media (max-width:560px){
  .gal-slc .slc-frys table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gal-slc .slc-frys thead,.gal-slc .slc-frys tbody{display:table;width:520px;table-layout:fixed}
  .gal-slc .slc-frys tr{display:table-row}
}
.gal-slc thead th{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--ug-slc-muted)}
.gal-slc tbody tr:last-child td{border-bottom:none}
.gal-slc .slc-badge{font-size:0.63rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;white-space:nowrap}
.gal-slc .slc-badge.slc-b-data{background:color-mix(in oklab,var(--ug-slc-data) 18%,transparent);color:var(--ug-slc-data)}
.gal-slc .slc-badge.slc-b-view{background:color-mix(in oklab,var(--ug-slc-view) 20%,transparent);color:var(--ug-slc-view)}

.gal-slc code{font-family:var(--ug-slc-mono)}

/* ════════════════════════════════════════════════════════════════════════
   Sammenlign elementer (sammenlign.js) — valg-toggle + sticky kurv + panel.
   Chrome-farver på --ug-* / --wa-color-* så panelet arver galleriets lys +
   .wa-dark-temaer; preview-fladen er bevidst hardkodet hvid (som kortet, der
   ikke tema-inverterer). Preview-klonen spejler kort-strukturen: container-type
   på .gal-cmp-prev-inst (= .gal-viewport-body) og den hvide flade på den
   omsluttende .gal-cmp-prev (= .gal-viewport). Panelets rækker deler ét
   grid-spor-sæt (labelw + N×colw) så previews og token-matrix flugter
   kolonne-for-kolonne.
   ════════════════════════════════════════════════════════════════════════ */

/* ── ⊕-toggle i kort-summary (ligger før badges, så margin-left:auto ikke rammer den) ── */
.gal-cmp-toggle {
  appearance: none; cursor: pointer; margin: 0; padding: 0; flex: none;
  inline-size: 1.45rem; block-size: 1.45rem;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  border: 1.5px solid var(--ug-border-quiet, var(--wa-color-neutral-70));
  border-radius: 50%; background: var(--ug-surface, #fff);
  color: var(--ug-text-quiet, var(--wa-color-neutral-50));
  font-size: 0.95rem; font-weight: 700;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gal-cmp-toggle:hover { border-color: var(--ug-brand, #00483e); color: var(--ug-brand, #00483e); }
.gal-cmp-toggle--on { background: var(--ug-brand, #00483e); border-color: var(--ug-brand, #00483e); color: #fff; }
.gal-cmp-toggle:focus-visible { outline: 2px solid var(--ug-brand, #00483e); outline-offset: 2px; }

/* ── Sticky kurv-bar ── */
.gal-cmp-tray {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: var(--ug-surface, #fff);
  border-top: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-85));
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
.gal-cmp-tray[hidden] { display: none; } /* author display:flex would otherwise beat [hidden] */
.gal-cmp-tray-titel { font-size: 0.9rem; }
.gal-cmp-tray-spacer { flex: 1 1 auto; }
.gal-cmp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gal-cmp-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.2rem 0.15rem 0.55rem;
  border: var(--wa-border-width-s, 1px) solid var(--ug-brand-line, var(--ug-brand, #00483e));
  border-radius: var(--ug-radius-pill, 999px);
  font-family: var(--ug-mono, monospace); font-size: 0.78rem;
  background: var(--ug-surface, #fff);
}
.gal-cmp-chip code { font-weight: 700; }
.gal-cmp-chip button {
  appearance: none; border: 0; background: none; cursor: pointer; line-height: 1;
  padding: 0.1rem 0.3rem; border-radius: 50%; color: var(--ug-text-quiet, var(--wa-color-neutral-50));
  font-size: 0.85rem;
}
.gal-cmp-chip button:hover { background: var(--ug-surface-sunk, var(--wa-color-neutral-90)); color: var(--ug-text, inherit); }
.gal-cmp-hint { font-size: 0.78rem; color: var(--wa-color-danger-40); font-weight: 600; }
.gal-cmp-hint[hidden] { display: none; }

/* ── Panel (wa-dialog) ── */
.gal-cmp-dialog { --width: 96vw; }
.gal-cmp-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem;
  padding-bottom: 0.7rem; margin-bottom: 0.5rem;
  border-bottom: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-85));
}
.gal-cmp-bredde { display: inline-flex; align-items: center; gap: 0.3rem; }
.gal-cmp-bredde-pil {
  appearance: none; cursor: pointer;
  border: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-85));
  background: var(--ug-surface, #fff); color: var(--ug-text, inherit);
  padding: 0.25rem 0.6rem; font-size: 0.78rem; border-radius: var(--ug-radius-s, 0.3rem);
}
.gal-cmp-bredde-pil.aktiv { background: var(--ug-brand, #00483e); color: #fff; border-color: var(--ug-brand, #00483e); }

/* ── Aligned column grid: én grid-skabelon delt af alle rækker ── */
.gal-cmp-scroll { overflow-x: auto; overflow-y: visible; }
.gal-cmp-rows { width: max-content; min-width: 100%; }
.gal-cmp-row {
  display: grid;
  grid-template-columns: var(--cmp-labelw, 168px) repeat(var(--cmp-n, 2), var(--cmp-w, 390px));
  border-bottom: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-90));
}
.gal-cmp-lbl {
  position: sticky; left: 0; z-index: 2;
  background: var(--ug-surface, #fff);
  padding: 0.6rem 0.75rem; font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--ug-text-quiet, var(--wa-color-neutral-50));
  border-right: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-85));
}
.gal-cmp-tk { text-transform: none; letter-spacing: 0; }
.gal-cmp-tk code { font-family: var(--ug-mono, monospace); font-weight: 700; font-size: 0.76rem; color: var(--ug-text, inherit); }
.gal-cmp-colhead { padding: 0.6rem 0.75rem; border-left: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-90)); }
.gal-cmp-colhead code { font-weight: 700; font-size: 0.82rem; }
.gal-cmp-colbadges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.gal-cmp-row--head, .gal-cmp-row--matrixhead { background: var(--ug-surface-sunk, var(--wa-color-neutral-95)); }
.gal-cmp-row--head .gal-cmp-lbl, .gal-cmp-row--matrixhead .gal-cmp-lbl { background: var(--ug-surface-sunk, var(--wa-color-neutral-95)); }

/* Preview-celler: klonet element ved valgt container-bredde på hvid flade (= kortet) */
.gal-cmp-prev { border-left: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-90)); background: #fff; overflow: hidden; }
.gal-cmp-prev-inst { container-type: inline-size; padding: 1.25rem 1rem; box-sizing: border-box; }

/* Token-matrix-celler */
.gal-cmp-tv {
  padding: 0.5rem 0.75rem; border-left: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-90));
  font-family: var(--ug-mono, monospace); font-size: 0.76rem; color: var(--ug-text, inherit);
  word-break: break-all; align-self: center;
}
.gal-cmp-none { color: var(--wa-color-neutral-50); font-style: italic; }
.gal-cmp-uloest { color: var(--wa-color-danger-40); font-weight: 700; }
.gal-cmp-diff { background: color-mix(in srgb, var(--wa-color-danger-50) 12%, transparent); }
.gal-cmp-trow:hover { background: color-mix(in srgb, var(--ug-brand, #00483e) 5%, transparent); }

/* "Kun forskelle": skjul rækker der er ens på tværs af alle kolonner */
.gal-cmp-body--kunforskelle .gal-cmp-trow[data-ens="true"] { display: none; }

/* Note når "kun forskelle" skjuler ALLE rækker (elementerne er ens på tokens) */
.gal-cmp-emptynote { position: sticky; left: 0; padding: 0.9rem 0.75rem; font-size: 0.85rem; color: var(--ug-text-quiet, var(--wa-color-neutral-50)); font-style: italic; }
.gal-cmp-emptynote[hidden] { display: none; }

/* Kilde-foldud (skjult indtil "Vis kilde") */
.gal-cmp-row--kilde { display: none; }
.gal-cmp-body--kilde .gal-cmp-row--kilde { display: grid; }
.gal-cmp-kilde-col { border-left: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-90)); padding: 0.5rem 0.75rem; min-width: 0; }
.gal-cmp-kilde-col h4 { margin: 0.4rem 0 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ug-text-quiet, var(--wa-color-neutral-50)); }
.gal-cmp-kilde-col .gal-code { margin: 0; max-height: 320px; overflow: auto; font-size: 0.72rem; }

/* ── invitations-oversigtens række (ug3-trxlr) · flank-flex på de REELLE
   flex-børn ──────────────────────────────────────────────────────────────
   Status-wrapperne er display:contents (universal-reglen i status-blokken
   ovenfor), så wa-flanks > :first/:last-child-regler rammer ALDRIG
   medlemmerne — rækkens indholds-split blev et block-barn på sin egen linje
   (status-flisen stod OVER teksten, Johannes' design-feedback 2026-07-11
   pkt. 1). Giv splittet flank-content-flexen direkte, scoped via composerens
   data-ug-id-identitet (aldrig klasser). Status-flisen er flex:none i sit
   atom, så flisen står på linje, vertikalt centreret (flankens
   align-items: center). */
[data-ug-id="grp-invitation-oversigt-raekke"] > [data-ug-status] > [data-ug-id="grp-invitation-indhold"] {
  flex: 1;
  min-inline-size: 0;
}
/* ── RTE-editor chrome (ug3-qff6r.1.2.6) ─────────────────────────────────────
   Styles the Tiptap richtext editor that rte.js builds IN PLACE of a
   data-ug-rte="ja" : a framed surface with a toolbar (Afsnitsformat
   dropdown + B/I/U/S/ + lists + Link + Ryd) and a live character count. The
   DOM is runtime-built by the DRIVER (cmd/gallery/static/rte.js), not by the
   ug-langtekst-input element, so this driver-chrome lives in look.css — NOT in
   element-CSS — and the C7/C8 element-CSS constraints (tag/::part-only,
   token-only) do not gate it. Token-only regardless; dark mode falls out of the
   --ug-* tokens (each is redefined in the dark :root). */
.ug-rte-wrap {
  border: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-90));
  border-radius: var(--ug-radius, 0.5rem);
  background: var(--ug-surface, #ffffff);
  overflow: hidden;
}
/* Focus-frame: the editable surface's own outline is removed (below), so the
   WRAP shows focus for the whole control. */
.ug-rte-wrap:focus-within {
  border-color: var(--ug-border-strong, var(--wa-color-neutral-70));
}
.ug-rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ug-space-3xs, 0.125rem);
  padding: var(--ug-space-2xs, 0.4375rem) var(--ug-space-xs, 0.5625rem);
  border-bottom: var(--wa-border-width-s, 1px) solid var(--ug-border-quiet, var(--wa-color-neutral-90));
}
.ug-rte-sep {
  align-self: stretch;
  inline-size: var(--wa-border-width-s, 1px);
  min-block-size: 1.25rem;
  margin-inline: var(--ug-space-3xs, 0.125rem);
  background: var(--ug-border-quiet, var(--wa-color-neutral-90));
}
/* Active mark/node: brand-tint the button so the toolbar reads the caret's live
   formatting state, not just the available actions. wa-button styles its interior
   via ::part(base); no WA utility covers a per-button active tint, so ::part is
   the correct tool here (repo Don't: ::part is acceptable when no utility fits). */
.ug-rte-btn[data-active]::part(base) {
  background: var(--ug-brand-quiet, var(--wa-color-lys-brand-95));
  color: var(--ug-brand, #00483e);
}
.ug-rte-surface {
  padding: var(--ug-space-s, 0.75rem) var(--ug-space-m, 1rem);
}
/* .ProseMirror is Tiptap's contenteditable child of the mount surface. Drop its
   default focus outline (the wrap shows focus) and give it a clickable min height
   even when empty. */
.ug-rte-surface .ProseMirror {
  outline: none;
  min-block-size: 6rem;
}
.ug-rte-count {
  display: flex;
  justify-content: flex-end;
  padding: var(--ug-space-3xs, 0.125rem) var(--ug-space-m, 1rem) var(--ug-space-2xs, 0.4375rem);
  font-size: var(--ug-text-xs, 0.6875rem);
  color: var(--ug-text-quiet, var(--wa-color-neutral-50));
  font-variant-numeric: tabular-nums;
}
/* Over the max-length: the driver toggles [data-over] on the count. */
.ug-rte-count[data-over] {
  color: var(--ug-danger, #b6000e);
}

/* ── Form svar-beholder (ADR-0044/M6, ug3-mqbwn) ──────────────────────────────
   The composer closes a [handling] svar="under"  with an empty
   .ug-form-svar container and points hx-target at it, so the endpoint's fragment
   reply lands inline UNDER the submit button instead of navigating.

   While empty it must cost nothing: a form-relation arranges its members in a
   wa-stack (display:flex + gap), where an ordinary empty div is still a flex item
   and would add one full gap below the button. display:contents generates no box
   at all, so the layout is byte-for-byte the pre-swap layout. The rule stops
   matching the moment htmx swaps the reply in, leaving an ordinary block — which
   is also what makes the aria-live region announce (a display:contents element is
   an unreliable live region). */
.ug-form-svar:empty {
  display: contents;
}
/* The confirmation line itself: the  success fragment.
   Quiet confirmation, not a callout — it sits directly under the control that
   caused it.

   DELIBERATELY UNSCOPED (Johannes, 2026-07-31). Four handlers emit this class —
   kontaktSubmit's «Tak — din besked er sendt.» in the svar-container, plus
   kontakt-modtager-gemt (handlers.go) and the two intro confirmations (intro.go)
   on their own targets. They are the same kind of message, so they get the same
   look; the rule was briefly scoped to .ug-form-svar only to keep the styling
   decision out of a bug-fix, and Johannes has since made it explicitly. A future
   fragment that should NOT look like a quiet confirmation needs its own class,
   not a narrower selector here. */
.ug-kontakt-tak {
  margin: 0;
  color: var(--ug-text-quiet);
  font-size: var(--ug-text-s);
}

/* ── Liste-inaktiv placeholder (ug3-t0lj1) ────────────────────────────────────
   The gallery LIST pages (/kompositionsrelationer + /kompositionsgrupper)
   compose every registered relation/group with no host, so a DATA-bound
   handling.rute can never resolve there. In liste-mode the composer emits the
   arrangement as a neutral, non-submittable wrapper (or an hx-less dispatch
   element) carrying data-ug-liste-inaktiv instead of a knækket marker. Dim it
   so "inactive by construction" is visible, and cut pointer events so the dead
   controls do not read as clickable (belt-and-braces with the native `inert`
   attribute the composer emits alongside, which also removes the controls from
   the tab order + accessibility tree). The attribute IS the scope: cockpits can
   never emit it (the composer's liste-mode is structurally unreachable from the
   live entry points), so the rule is dead outside the two list pages. */
[data-ug-liste-inaktiv] {
  opacity: 0.55;
  pointer-events: none;
}
/* The visible WHY — dimming alone cannot tell «inactive by construction» apart
   from «someone forgot a binding», and the composer's title-attribute sits on
   an `inert` element (hit-test lands on , AT-tree pruned), so it can
   never surface as a tooltip. The caption therefore lives OUTSIDE the inert
   subtree, generated on the gallery preview container. Generated content is
   exposed in the accessibility tree, so AT users get the explanation too. */
.gal-viewport-body:has([data-ug-liste-inaktiv])::after {
  content: "Inaktiv på listesiden: DATA-bundet handling har ingen vært her — ruten bindes i et live cockpit.";
  display: block;
  margin-top: var(--ug-space-s, 8px);
  font-size: var(--ug-text-s, 12px);
  color: var(--ug-text-quiet, #6b7280);
}