/* Marks every page of the TEST copy so nobody mistakes it for the live site.
   Pure CSS on the body's own pseudo-elements, so it needs no change to any
   page's markup and cannot be forgotten on a new page. Both are
   pointer-events:none, so nothing underneath becomes unclickable, and neither
   occupies layout space, so nothing moves. */

/* The diagonal wash across the middle of the page. */
body::after {
  content: "TEST SITE";
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  pointer-events: none;
  font: 700 clamp(3rem, 15vw, 11rem)/1 "Arial Black", system-ui, sans-serif;
  letter-spacing: .12em;
  color: rgba(214, 0, 28, .13);
  transform: rotate(-24deg);
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

/* A small badge that stays put, for when the wash is behind a solid panel. */
body::before {
  content: "TEST SITE \2014  not the live website";
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
  background: #d6001c;
  color: #fff;
  font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .45rem .8rem;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
  user-select: none;
}

/* Printing a test page by accident should still be obvious on paper. */
@media print {
  body::after { color: rgba(214, 0, 28, .3); }
  body::before { position: static; display: block; }
}