/* lux2-vorm.css — DE HUISHOEK EN HET LOGO, overgenomen uit C:\dev\lux2.
   =======================================================================================
   Besluit Auke, 28-8-2026: "lux2 heeft prioriteit boven luxnl design rules in alles,
   tenzij het functionaliteit in luxnl breekt of wegneemt." Daarmee vervalt de uitzondering
   die DESIGN.md §2 maakte op de hoekvorm; deze laag zet de vorm van lux2 op elk scherm van
   LUX-NL.

   DE VORM. Elke afgeronde rechthoek houdt drie ronde hoeken en verliest die RECHTSBOVEN.
   Gekozen door Auke op 26-7-2026 in lux2 (kaart A-35, optie B, uit vier proefopstellingen).
   De volgorde van de verkorting is linksboven-rechtsboven-rechtsonder-linksonder, dus elk
   token wordt `<R> 0 <R> <R>`. De MATEN veranderen niet — dit gaat over de ontbrekende
   hoek, niet over rondere hoeken. Pillen en cirkels houden hun vorm: een vierkante hoek op
   een cirkel is schade, geen stijl, dus --lux-radius-full blijft ongemoeid.

   DE ENE VAL, en de reden dat een handvol plekken de getallen uitschrijft: een
   vier-waarden-eigenschap is alleen geldig als hij de HELE waarde van een
   `border-radius`-verkorting is. In een langvorm (`border-top-left-radius`) is hij
   ongeldig, en genest in een andere verkorting ook — `border-radius: 0 0 var(--lux-radius-lg)
   var(--lux-radius-lg)` wordt TIEN waarden, de browser gooit de hele regel weg en het
   element wordt op alle vier de hoeken vierkant. Die fout is onzichtbaar in review en
   zichtbaar op het scherm. Heb je een hoek-per-hoek-vorm nodig, SCHRIJF DE GETALLEN UIT.
   `node verify/hoek-gate.js` rekent elke border-radius in de repo na en wordt rood zodra
   een token in een verkorting genest raakt.

   WAAROM HIER EN NIET IN styleguide/lux-tokens.css. Dat bestand is sinds 11-8-2026 de ENE
   bron die `verify/stijlbron-gate.js` byte-voor-byte met drie kopieën vergelijkt, waarvan
   er twee in ANDERE repo's staan (holonstudie, p2p). De hoek daar neerzetten betekent
   `node C:\dev\luxnl\tools\stijlbron.js --verspreid` draaien en dus in die repo's
   schrijven. Dat is mensenwerk. Deze laag geeft LUX-NL exact dezelfde vorm zonder buiten
   deze repo iets aan te raken; wil je de andere twee mee, dan is dat één commando.

   WIE HEM LAADT. `lib/css/components.css` en `data/_assets/viewer.css` importeren hem
   bovenaan, en `data/viewer/nl-netdata.html` linkt hem los (die pagina laadt geen van
   beide). Altijd NA styleguide/lux-tokens.css, anders wint het origineel.
   ======================================================================================= */

[data-theme], .lux-root {
  --lux-radius-sm: 6px 0 6px 6px;
  --lux-radius-md: 10px 0 10px 10px;
  --lux-radius-lg: 14px 0 14px 14px;
  /* Merkvorm: houdt de brede afronding linksonder (20px) en verliest rechtsboven, net
     als al het andere. */
  --lux-radius-brand: 10px 0 10px 20px;
  /* --lux-radius-full blijft 999px — zie de kop van dit bestand. */
}

/* =======================================================================================
   HET LUX-LOGO (lib/merk.js zet de markup neer op elke pagina zonder bundelaar;
   frontend/src/schermen/Merk.svelte rendert dezelfde structuur voor de voorpagina)

       LUX   NL   (beeldmerk)

   Vorm vastgesteld door Auke op 29-8-2026: de blokletters LUX uit het huisstijlbestand in
   LUX-geel, een spatie, en dan de productnaam in DEZELFDE letter op DEZELFDE letterhoogte;
   daarachter het beeldmerk. `--lux-merk-h` is die letterhoogte en stuurt de rest.
   ======================================================================================= */

/* Het slot is één regel: LUX (geel, uit het bestand) — de productnaam in dezelfde letter
   en op dezelfde letterhoogte — het beeldmerk. `--lux-merk-h` is de LETTERHOOGTE van de
   blokletters; de rest rekent daarmee. */
[data-luxmerk], .lux-merkslot {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lux-merk-h, 20px) * 0.42);
  flex: none;
  text-decoration: none;
  color: var(--lux-text);
}
/* De uitsnede is 285 x 121 eenheden waarvan de letters 113,3 hoog zijn. Om de letters
   precies --lux-merk-h hoog te krijgen moet de svg 121/113,3 = 1,068 keer zo hoog zijn. */
[data-luxmerk] .lux-logo-letters, .lux-merkslot .lux-logo-letters {
  display: block;
  height: calc(var(--lux-merk-h, 20px) * 1.068);
  width: auto;
}
/* De naam in DEZELFDE letter en op dezelfde letterhoogte als de blokletters. De factor
   1,39 zet letterhoogte om naar font-size voor HolonBLOCK2CAPS; gemeten in de browser
   (kaphoogte / em = 0,72) en nagemeten op het scherm: LUX en NL zijn even hoog. */
[data-luxmerk] .lux-logo-naam, .lux-merkslot .lux-logo-naam {
  font-family: var(--lux-font-display);
  font-size: calc(var(--lux-merk-h, 20px) * 1.39);
  line-height: 1;
  color: var(--lux-brand-yellow);
}
/* Het beeldmerk is 282 x 187 eenheden; op 1,32 x de letterhoogte staat het naast LUX-NL
   zoals in het bronbestand naast LUX. */
[data-luxmerk] .lux-logo-merk, .lux-merkslot .lux-logo-merk {
  display: block;
  height: calc(var(--lux-merk-h, 20px) * 1.32);
  width: auto;
}

/* ---------------------------------------------------------------------------------------
   HET ZENMO-LOGO, rechts in de balk zoals in lux2. Twee merkbestanden, ongewijzigd uit de
   Zenmo-huisstijl overgenomen (lib/merk/zenmo-logo*.svg); de CSS toont er één per thema.
   Dit is de ene plek waar het Zenmo-roze in een LUX-scherm binnenkomt: een merkbestand is
   geen UI-kleur, en lux2 doet het net zo (besluit 28-8-2026, zie docs/dossiers/besluiten.md).
   --------------------------------------------------------------------------------------- */
[data-zenmomerk] { display: inline-flex; align-items: center; flex: none; }
[data-zenmomerk] img { display: block; height: var(--lux-zenmo-h, 22px); width: auto; }
[data-zenmomerk] .zenmo-donker { display: none; }
[data-theme="dark"] [data-zenmomerk] .zenmo-licht, .lux-root [data-zenmomerk] .zenmo-licht { display: none; }
[data-theme="dark"] [data-zenmomerk] .zenmo-donker, .lux-root [data-zenmomerk] .zenmo-donker { display: block; }
[data-theme="light"] [data-zenmomerk] .zenmo-licht { display: block; }
[data-theme="light"] [data-zenmomerk] .zenmo-donker { display: none; }