, så .ug-main.ramme-login-main (0,2,0) vinder over .ug-main (0,1,0) uden !important. min-height: 100% (IKKE 100vh): wa-page lægger

i body-grid-arealet (grid-template-rows: …header(auto)… body(minmax(0,1fr))…) af en host på min-height: 100dvh, så body-arealet er allerede "100dvh minus topbaren". 100% af DET areal centrerer split'et under topbaren uden at lægge topbar-højden oveni (100vh ville overflowe = lodret scroll på topbar-højden). Spejler facit-mønstret .ug-shell-preauth { min-height: calc(100vh - 61px) } uden et hårdkodet topbar-tal. */ .ug-main.ramme-login-main { min-height: 100%; display: grid; place-items: center; inline-size: 100%; max-inline-size: none; margin-inline: 0; padding: 24px; box-sizing: border-box; /* INGEN egen baggrund: den delte facit-gradient bor nu på wa-page-HOSTEN (nedenfor) så den dækker HELE login-siden — bag preauth-topbaren (header-slot) OG split'et — ikke kun dette main-areal. main holdes transparent, så host-gradienten slår direkte igennem (var tidligere scopet til .ramme-login-main = stoppede ved topbarens underkant, så gradienten gik ikke ind under menuen). */ background: transparent; } /* DELT BAGGRUND (facit tokens.css §10) — login-fladens baggrund. Facit lægger den på , så ÉN flade dækker hele viewporten, topbar inkl. Vi kan ikke bruge en bar `body`-regel (ramme-login.css er linket i headHTMLConst for ENHVER skærm-render → ville lække til alle skærme) og heller ikke look.css' body (linket på hele galleri-chrome-fladen). Vi scoper i stedet til wa-page-HOSTEN for den login-bærende ramme via :has(.ramme-login-main): den er 1:1 med login- rammen (intet andet wa-page indeholder .ramme-login-main, og galleri-chrome er aldrig ) OG fælles forælder for BÅDE header-slot (preauth-topbaren) og main-slot. wa-pages egen :host maler --wa-color-surface-default OPAKT; vi overrider den her, så gradienten — ikke en flad hvid flade — ligger bag indholdet. main ligger i wa-pages DEFAULT-slot (umarkeret), og wa-pages opake ::slotted-flade (slot[name]…::slotted(*) { background: surface-default }) rammer kun NAVNGIVNE slots — derfor males main ikke, .ramme-login-main holdes transparent, og host- gradienten slår direkte igennem. Topbaren er derimod en NAVNGIVET slot (slot="header") som wa-page maler surface-default-OPAKT; det er .ug-topbar-tonen (ramme-shell.css: gennemsigtig color-mix + blur) der overrider den paint, så gradienten slår igennem topbaren som "en tone af den" (facit shell.css .ug-topbar). background-attachment: fixed anchorer de to bløde radial-glow til viewporten (teal øverst-venstre, terracotta nederst-højre), som facit; rgba'erne er facit-konstanter, base-fladen er --ug-bg-tokenet. */ wa-page:has(.ramme-login-main) { background-color: var(--ug-bg); background-image: radial-gradient(circle at 22% 28%, rgba(127, 190, 198, 0.18), rgba(0, 0, 0, 0) 55%), radial-gradient(circle at 78% 72%, rgba(184, 90, 58, 0.12), rgba(0, 0, 0, 0) 55%); background-attachment: fixed; } /* Dark-mode-variant: --ug-bg har INGEN .wa-dark-override i look.css (kun :root/ .wa-light → #f3f1f1), så uden dette ville login-fladen forblive lysegrå i dark = den lysegrå "ramme" rundt om det mørke login-kort. Vi flipper KUN base-fladen her, scoped til login-wa-page'en (så look.css ikke røres og golden-diffen ikke spredes til chrome). Værdien matcher facit (--app-bg → --ca-neutral-05) + .wa-dark body (#131211); de bløde teal/terracotta-glow lægger sig oven på den mørke base uændret, præcis som facit holder gradienterne konstante mellem temaer. */ .wa-dark wa-page:has(.ramme-login-main) { background-color: var(--wa-color-neutral-05); } /* ── CO-BRANDET SPLIT (udstiller) — løftet verbatim fra auth.css ─────────── */ .split { display: grid; grid-template-columns: var(--ug-split-login); width: 100%; max-width: 880px; min-height: 470px; border-radius: var(--ug-radius-l); overflow: hidden; border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow-pop); background: var(--ug-surface); } /* .split-brand is a BRAND SURFACE: look.css keys the ADR-0047 ink-override on this selector, so every element in the panel's subtree reads white-on-brand ink (app-text and app-ink-icon roles) without knowing its context. The container's own `color: #fff` is the baseline; the override carries the role-tiered inks. */ .split-brand { background: var(--ug-brand); color: #fff; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 22px; position: relative; } .split-form { background: var(--ug-surface); padding: 44px 40px; display: grid; place-items: center; } .split-form .lc { max-width: 340px; } /* login-kort-stak — løftet verbatim fra auth.css .lc */ .lc { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; } /* Tilbage-knappens login-arrangering (F4-1 par 2): venstrejusteret og indrykket negativt så ikon-kanten flugter med kortets venstrekant. Flyttet HERTIL fra ug-back-button.css da knappen blev delt med intro-modalens slide-navigation — ADR-0043: konteksten (rammen), ikke elementet, er kanalen for ren arrangering. */ .ramme-login-main ug-back-button { align-self: flex-start; margin-inline-start: calc(-1 * var(--ug-space-s-d)); } /* Login-kortets ENLIGE handlingsknapper centreres også (Johannes 2026-07-20): hele login-kortet står centreret, så en enlig knap (magic-link, log ind, send-nulstilling) må ikke stå venstre mens metode-listen ved siden af er centreret. Auto bredde (dom A2) + align-self:center pr. flex-item i .lc / form-wa-stakken. Listerne (kodeord/passkey) centreres af --ug-knap-stak-align; gensend af sin egen grp-send-igen-regel i look.css; Tilbage-knappen (back-nav) beholder sin venstre ikon-kant-flugt ovenfor. ADR-0043: rammen er kanalen. */ .ramme-login-main ug-magic-link-button, .ramme-login-main ug-confirm-button, .ramme-login-main ug-send-nulstilling-button { align-self: center; } /* ── Logo-plade i brand-panelet (ug3-fqswg) ────────────────────────────────── The organizer logo (grp-panel-stak Plads 1, ug-billede in bånd format) sat directly on the dark-green brand surface — a dark/red brand mark drowned (Madscenen, staging test-round 1, 2026-07-20). Approved mockup: the logo on a white rounded plate with breathing room, roughly double the default size. Per the ug-billede contract (DDR-0008: "a composing context retunes the box tokens") the FRAME retunes --ug-billede-baand-h here; the element and the look.css default (2.875rem) stay untouched, so other bånd consumers are unaffected. The plate is render-chrome on the composing context, not element CSS. background: var(--ug-on-brand) — NOT --ug-surface: the .split-brand panel fill (--ug-brand) is theme-invariant, so the plate must be too; the theme-adaptive surface token flips dark in .wa-dark and the plate would vanish against the dark-green panel (~1.7:1). --ug-on-brand is #fff, context-invariant by design (declared only in the light root). The ADR-0047 ink-override on .split-brand only re-maps ink roles, not fills, and the logo is an image and reads no ink. NO padding on the logo klods: padding offsets the height-locked inner wa-avatar box against the rounded plate edge and clips the mark (staging feedback 2026-07-21) — breathing room comes from the logo asset's own whitespace, not the container. */ .split-brand ug-billede[format="baand"] { --ug-billede-baand-h: 5rem; /* 80px — ca. double the 46px default */ background: var(--ug-on-brand); border-radius: var(--ug-radius); } /* ── Stor logo-plade (format="plade", per-instance opt-in) ─────────────────── Spec: docs/superpowers/specs/2026-07-21-login-logo-plade-design.md; visual facit: docs/mockups/2026-07-21-login-logo-plade-stor-mockup.html. The frame owns plate chrome + geometry (ADR-0043): stretch the group chain to full panel height, give Plads 1 half of it, pin the drevet-af mark to the bottom. Fill is --ug-on-brand (theme-invariant) for the same reason as the band plate above; no inner offset beyond the symmetric padding — contain-fit letterboxes the mark, so nothing clips. */ .split-brand:has(ug-billede[format="plade"]) > [data-ug-status], .split-brand:has(ug-billede[format="plade"]) .wa-stack[data-ug-id="grp-panel-stak"] { height: 100%; min-height: 0; } .split-brand .wa-stack[data-ug-id="grp-panel-stak"] > :has(ug-billede[format="plade"]) { flex: 0 0 50%; min-height: 0; display: flex; } .split-brand ug-billede[format="plade"] { --ug-billede-plade-h: 100%; width: 100%; height: 100%; background: var(--ug-on-brand); border-radius: var(--ug-radius); padding: 24px; } .split-brand:has(ug-billede[format="plade"]) .wa-stack[data-ug-id="grp-panel-stak"] > :last-child { margin-top: auto; } /* ── Ægte responsivt sammenfald (mobil) — verbatim fra auth.css ──────────── */ @media (max-width: 720px) { .split { grid-template-columns: 1fr; max-width: 420px; min-height: 0; } /* Mobil-stramning (Hinnerup, ikke i auth.css): på smalle viewports (390px) klippede .split (overflow:hidden) input + de lange knap-labels ("...kodeord"). ROD-ÅRSAG: CSS-grid min-width:auto-blowout — 1fr-tracken vokser til indholdets min-content (~379px) frem for at krympe til den 342px brede .split. min-width:0 på grid-børnene + .lc lader tracken krympe under min-content, så indholdet faktisk passer. Reduceret form-padding holder symmetriske margener. Rammen forbliver facit-tro centreret split; desktop urørt (kun i denne @media). */ .split-brand { padding: 26px 28px; gap: 14px; min-width: 0; } .split-form { padding: 28px 22px; min-width: 0; } .split-form .lc { max-width: 100%; min-width: 0; } /* Single column: 50% of a collapsed panel is meaningless — fixed, viewport-scaled plate height instead (spec decision, "ok for nu"). */ .split-brand .wa-stack[data-ug-id="grp-panel-stak"] > :has(ug-billede[format="plade"]) { flex: 0 0 auto; height: clamp(120px, 22vh, 200px); } } /* ── Dev-preview banner — ét skærmniveau, ingen per-element-badges ─────────── */ /* Slim full-width strip above the split frame. Does not push or overlap .ramme-login-main (which is min-height:100% of wa-page's body grid-area and centers with grid). The banner sits above it in normal block flow, so the split scrolls naturally below. */ .ug-preview-banner { font-family: var(--ug-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ug-text-faint, #7a8a8a); background: var(--ug-border-quiet, #e8ecec); padding: 6px 12px; text-align: center; width: 100%; box-sizing: border-box; }