/* Heat field. The canvas is a fixed, full-viewport layer BEHIND the page: give your content position:relative and a
   z-index above --hf-z, with transparent backgrounds where the field should show through. */
.heat-field {
  --hf-bg: #fff;          /* canvas ground */
  --hf-grid: #fafafa;     /* 1px grid lines on every cell */
  --hf-1: #1c2541;        /* navy  (heat >= .30) */
  --hf-2: #3b5bd9;        /* blue  (>= .46) */
  --hf-3: #f5c518;        /* yellow (>= .62) */
  --hf-4: #e0492a;        /* red   (>= .78) */
  --hf-hot: #d8ff00;      /* neon, the hottest band (.86 - 1.02) */
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  z-index: var(--hf-z, 0); pointer-events: none;
}

/* heat-strip (data-heat-mode="strip", off by default): the field as a band IN the page, not a fixed layer behind it.
   Size it with its parent (craftwild's bcp header strip: height clamp(90px,15vh,150px), 1px rules top and bottom).
   It takes its own pointer events, so it can be hovered, held and blasted. */
.heat-field[data-heat-mode="strip"] {
  --hf-grid: #f4f4f4;     /* the strip's grid line */
  position: relative; inset: auto; width: 100%; height: 100%;
  z-index: auto; pointer-events: auto; touch-action: manipulation;
}