/* ramme-shell.css — render-chrome for the cockpit rammer (delt-cockpit,
   admin-cockpit, messe-cockpit, min-konto — see cockpitRammer in render_screen.go).
   Den ENE delte cockpit-shell (ADR-0036): topbar-grid + sticky/blur + main + footer.
   Strukturelle regler WA-utilities ikke dækker; alt andet er wa-cluster/wa-stack.
   Token-mappet til --ug-* (look.css single source of truth). Ingen rå hex/px-farve.

   NAVNEKOLLISION (--ug-space-l/-xl/-3xl, dokumenteret ug3-rkb5v): look.css definerer
   i dag disse tokens (18/20/30px — samlet.css-afledt komponentskala, #1409), men med
   ANDRE værdier end denne shells facit-spacing (liste.css:11 .topbar = 24px inline;
   main/footer var født 40/40/64 + 24px i #1341, FØR tokens fandtes). Da tokens'ene
   kom til, skyggede de var()-fallbacks'ene og re-tunede shellen i det stille. Shellen
   bruger derfor BEVIDST literal px for disse tre trin — peg dem IKKE på
   --ug-space-l/-xl/-3xl uden en designbeslutning. */

/* Status-annotations-wrapper (Gap 2) — flex-transparens-reglen er FLYTTET til
   look.css (loades på ALLE sider; ramme-shell.css loades kun på render/ramme-ruter,
   så preview-siderne manglede den). Se look.css' "Status-annotations-wrapper er
   flex-transparent (UNIVERSELT)"-blok for den fulde begrundelse. */

/* Topbar: sticky blur-bjælke. Facit-flex (liste.css:11 .topbar = display:flex,
   centrering via flex:1 på side-zonerne — IKKE et rigidt grid; det rigide grid
   overflowede 390px). Side-zonerne flex:1 skubber center-zonen til dead-center på
   desktop OG lader zonerne krympe på smal viewport. */
.ug-topbar {
  display: flex; align-items: center; gap: var(--ug-space-s);
  padding: var(--ug-space-2xs) 24px; /* 24px = facit (liste.css:11), IKKE --ug-space-l (18px) — se navnekollisions-noten */
  position: sticky; top: 0; z-index: 50;
  /* Gennemsigtig "tone af baggrunden" (facit shell.css .ug-topbar: color-mix(--app-bg
     58%, transparent) + blur). Toner mod --ug-bg (= facit --app-bg, neutral-95-basen),
     IKKE mod --ug-surface (hvid) — så den side-flade der ligger bag wa-page-hosten
     slår igennem som en tone frem for en flad hvid bjælke: på login er det den delte
     gradient (ramme-login.css' wa-page-host-regel), på cockpit wa-pages surface-default.
     58% + blur giver facit-glasset; de resterende 42% er gennemslaget. */
  background: color-mix(in srgb, var(--ug-bg) 58%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--ug-border-quiet);
}
/* Dark-mode-tone: --ug-bg har INGEN .wa-dark-override i look.css (frosset til
   neutral-95), så den lyse base ville give en lysegrå bjælke over den mørke side.
   Vi flipper KUN topbarens base-flade til facit-dark (--app-bg → --ca-neutral-05 ≡
   --wa-color-neutral-05 #131211), præcis som ramme-login.css flipper login-fladens
   base. Alpha (58%) + blur + border uændret, så glasset/gradient-gennemslaget er
   identisk med lys-tilstand — kun basen flipper, som facit holder gradienterne
   konstante mellem temaer. */
.wa-dark .ug-topbar {
  background: color-mix(in srgb, var(--wa-color-neutral-05) 58%, transparent);
}
.ug-topbar .tz-left   { flex: 1; display: flex; gap: var(--ug-space-2xs); align-items: center; justify-content: flex-start; min-width: 0; }
.ug-topbar .tz-center { flex: 0 1 auto; display: flex; gap: var(--ug-space-2xs); align-items: center; justify-content: center; min-width: 0; }
.ug-topbar .tz-right  { flex: 1; display: flex; gap: var(--ug-space-2xs); align-items: center; justify-content: flex-end; min-width: 0; }
/* Topbar TEXT-elementer: alle wa-button-labels er 14px (langswitch, logo-pill,
   searchbutton, topbar-user) — ét sted, så hele baren læses med samme tekststørrelse.
   .ug-topbar-classen (0,1,0) vinder over element-specifikke label-regler (ug-logo-pill's
   --ug-text-xl m.fl.), så 14px slår igennem konsekvent. themetoggle er et custom-element
   (ikke wa-button) og rammes ikke her — dets sol/måne-glyphs er --ug-text-xl per
   glyph-wrapper (ikke tekst), så de bevarer xl. */
.ug-topbar wa-button::part(label) { font-size: var(--ug-text-14); }

/* Main — fuld-bredde, centreret (base-shell.css' .ug-content-inner). */
.ug-main { inline-size: 100%; max-inline-size: 72rem; margin-inline: auto;
  padding: 40px 40px 64px; /* IKKE --ug-space-xl/-3xl (20/30px) — se navnekollisions-noten */ }

/* Footer — dæmpet signatur-linje. */
.ug-footer { padding: var(--ug-space-s) 24px; /* 24px, IKKE --ug-space-l (18px) — se navnekollisions-noten */ }

/* Fallback-main — centreret kort inde i wa-page (render-unifikation, ug3-a7pi8;
   ramme=ug-hub-login + ukendt-ramme). Erstatter den gamle inline <main style="…">.
   Som .ug-main-variant nulstiller den cockpit-mainens centrerede max-bredde, så
   .lc-kortet kan centreres i hele viewporten. .ug-main.ramme-fallback-main (0,2,0)
   vinder over .ug-main (0,1,0). */
.ug-main.ramme-fallback-main {
  min-height: 100vh; display: grid; place-items: center;
  inline-size: 100%; max-inline-size: none; margin-inline: 0;
  padding: 24px; box-sizing: border-box; background: var(--ug-bg);
}

/* COCKPIT-CANVAS (neutral-95) — spejler ramme-login.css' wa-page-host-override.
   wa-pages egen :host maler --wa-color-surface-default OPAKT (hvid), oven på body'ens
   tiltænkte --ug-bg neutral-95-flade — så cockpit-dashboardet fremstod hvidt frem for
   den lette grå. Main ligger i wa-pages DEFAULT-slot (umarkeret) som wa-page IKKE maler
   (kun NAVNGIVNE slots males af slot[name]…::slotted(*)), så baggrunden må ligge på
   HOSTEN. Vi scoper til wa-page-hosten via :has(.ramme-cockpit-main): 1:1 med cockpit-
   mainen (intet andet wa-page indeholder .ramme-cockpit-main, og galleri-chrome er
   aldrig <wa-page>) OG fælles forælder for BÅDE header-slot (topbaren) og main-slot.
   FLAD canvas — INGEN gradient (kun login-rammen har gradienten). Den semi-transparente
   .ug-topbar (58% --ug-bg + 42% host-gennemslag) toner nu mod denne grå host frem for
   den hvide surface-default = facit-tro tone, konsistent med login. Content-cards
   (wa-card/surface-default) ligger som opake flader OVEN på hosten og forbliver hvide. */
wa-page:has(.ramme-cockpit-main) {
  background-color: var(--ug-bg);
}
/* Dark-mode-tone: --ug-bg har INGEN .wa-dark-override i look.css (frosset til neutral-95
   #f3f1f1), så uden dette ville cockpit-canvasen forblive lysegrå bag det mørke indhold.
   Vi flipper KUN host-basen til facit-dark (--wa-color-neutral-05 #131211), symmetrisk med
   .ug-topbar-dark-reglen ovenfor OG ramme-login.css' login-host-dark-flip. */
.wa-dark wa-page:has(.ramme-cockpit-main) {
  background-color: var(--wa-color-neutral-05);
}

/* Mobil (≤720px): reducér gaps/padding; tillad wrap som last resort. Side-zonerne
   BEHOLDER base-reglens flex:1 (ug3-433zt): en tidligere flex:0 1 auto-override
   (#1342, før elementernes egne ≤560px-kollaps landede) fjernede balancen og
   EKSPONEREDE wa-pages shadow-regel ::slotted([slot="header"]) { justify-content:
   space-between } — light-DOM .ug-topbar sætter ingen justify-content, så
   space-between vandt og skubbede tz-center ~37px højre om midten ved 390px
   (~56px med tom tz-right, staging-symptomet). Med flex:1-balancen absorberer
   side-zonerne al fri plads igen → tz-center dead-center ved 390px, med og uden
   højre-medlem. Kendt trade-off: under ~385px layout-bredde overstiger
   venstre-indholdet (langswitch + themetoggle, ~99px) sin zone-andel og skubber
   ind over pillens kant — fix er element-kollaps (langswitch-caret o.l.), ikke
   zone-flex. */
@media (max-width: 720px) {
  .ug-topbar { gap: var(--ug-space-2xs); padding-inline: var(--ug-space-s); flex-wrap: wrap; }
  .ug-main { padding-inline: var(--ug-space-s); }
}

/* ══ Adresse-rækken i redformens felt-grid (Johannes 2026-07-26) ══════════════
   Postnummer (1/3) og By (2/3) står på SAMME række. Felt-grid'en er en lodret
   wa-stack; :has()-nøglen gør containeren til et 3-kolonne-grid hvor alle
   blokke spænder fuld bredde — undtagen postnr (1 kolonne) og by (2 kolonner).
   Ramme-lags-CSS (ADR-0043: konteksten er kanalen for ren arrangering). */
[data-ug-id="grp-felt-grid"]:has(wa-input[name="postnr"]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wa-gap, var(--ug-space-l));
}
/* De direkte børn er display:contents-status-wrappers — grid-items er deres
   BØRN (felt-blokkene), så span-reglerne rammer begge niveauer. */
[data-ug-id="grp-felt-grid"]:has(wa-input[name="postnr"]) > :where(*),
[data-ug-id="grp-felt-grid"]:has(wa-input[name="postnr"]) > :where(*) > :where(*) {
  grid-column: 1 / -1;
}
[data-ug-id="grp-felt-grid"]:has(wa-input[name="postnr"]) > :has(wa-input[name="postnr"]),
[data-ug-id="grp-felt-grid"]:has(wa-input[name="postnr"]) > :has(wa-input[name="postnr"]) > :where(*) {
  grid-column: span 1;
}
[data-ug-id="grp-felt-grid"]:has(wa-input[name="postnr"]) > :has(wa-input[name="by"]),
[data-ug-id="grp-felt-grid"]:has(wa-input[name="postnr"]) > :has(wa-input[name="by"]) > :where(*) {
  grid-column: span 2;
}