/* =====================================================================
   HEX BACKGROUND LAYER — drop-in. Paints the two hex layers (--hex-nodes
   over --hex-lattice) as a fixed texture behind all content. Pair with a
   <brand>-hex-tile.css (defines the vars) + theme-switch.js (injects the
   #mx-hexbg element below + handles day/night).

   Wiring per surface (tile defines vars first):
     <link rel="stylesheet" href=".../<brand>-hex-tile.css">
     <link rel="stylesheet" href=".../hex-bg.css">
     <script src=".../theme-switch.js" defer></script>

   We use a DEDICATED injected element (#mx-hexbg), NOT body::before, because
   many surfaces already use body::before/::after for their own glow. This
   layer sits above the page ground color but below content, pointer-events
   none, so it never collides and never intercepts clicks.
   ===================================================================== */
#mx-hexbg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Global knock-back so the texture stays a whisper behind content. Tune per
     surface by overriding --hex-bg-opacity (e.g. lighter pages may want less). */
  opacity: var(--hex-bg-opacity, 0.6);
  background-image: var(--hex-nodes), var(--hex-lattice);
  background-size: var(--hex-nodes-size), var(--hex-lattice-size);
  background-position: 0 0, 0 0;
}

/* Lift real content above the texture without disturbing existing stacking:
   surfaces with their own positioned wrappers already sit above z-index:0. */
body > *:not(#mx-hexbg):not(script):not(style) { position: relative; z-index: 1; }