/* DEMO WATERMARK - translucent red "Sample Data".
 *
 * Added 2026-09-14 for the client demo. Joe's instruction: watermark the DOL
 * Profiler card and the page it opens, because both show an invented persona
 * ("dr. maya chen" in _dol_data.js, whose own header reads "NOT real people,
 * invented personas with illustrative numbers").
 *
 * SCOPE IS DELIBERATELY NARROW. Only two places use this:
 *   index.html          - the DOL Profiler card only  -> class="wm-card"
 *   dol_profile.html    - the whole page              -> body class="wm-page"
 * Every other page shows genuinely collected data and is left alone. The DI
 * Profiler card opposite is NOT watermarked: it opens di_profile_norton.html,
 * a real person with real collected data.
 *
 * TO REMOVE AFTER THE DEMO: drop the two <link> lines and the two class names,
 * or empty this file. Nothing depends on it.
 *
 * pointer-events:none on both variants so the watermark can never intercept a
 * click, and user-select:none so it cannot be dragged or copied.
 */

/* ---- the content area of dol_profile.html -------------------------------- */
/* Scoped to .wrap, NOT the viewport. A fixed full-screen layer tiles across the
 * empty margins either side of the content, which puts most of the watermarks
 * on blank background where they mark nothing. Anchoring to the content column
 * keeps every instance over an actual figure.
 *
 * The tile is deliberately large (620 x 460) so only a handful appear over the
 * content rather than a dense repeating field. */
/* EXACTLY TWO marks, each anchored to a specific white panel.
 *
 * Anchoring to .wrap and positioning by percentage put marks over the gray page
 * background and across the Novo logo, because .wrap spans the full column
 * including its gutters. Attaching to the panels themselves means a mark can
 * only ever sit on white, whatever the page height.
 *
 * Chosen panels: "Follower composition", "Geographic distribution of followers"
 * and "Therapeutic relevance" - three of the most fabricated figures on the
 * page. */
.wm-page .grid2 > .card.panel:first-child,
.wm-page .grid2 > .card.panel:last-child,
.wm-page #profile > .card.panel:last-child { position: relative; }

.wm-page .grid2 > .card.panel:first-child::after,
.wm-page .grid2 > .card.panel:last-child::after,
.wm-page #profile > .card.panel:last-child::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* ON TOP of the panel's own content, not tucked into its blank space. A
   * watermark that only occupies empty areas can be cropped out of a screenshot
   * and reads as decoration; sitting over the figures is the point. */
  z-index: 2147483000;
  pointer-events: none;                /* never blocks a click */
  user-select: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;        /* centered over the content */
  background-size: 300px auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='180'%3E%3Ctext x='200' y='90' transform='rotate(-18 200 90)' fill='%23FF0000' fill-opacity='0.34' font-family='Segoe UI, Helvetica, Arial, sans-serif' font-size='42' font-weight='700' letter-spacing='3' text-anchor='middle' dominant-baseline='middle'%3ESample Data%3C/text%3E%3C/svg%3E");
}

/* ---- single card: the DOL Profiler tile on index.html -------------------- */
/* ONE centered watermark, not a repeating tile. A tile smaller than the card
 * crops the text mid-word and renders as "mple Data", which reads as a bug
 * rather than a marking. no-repeat plus a viewBox that scales to the card keeps
 * the words whole at any card size. */
.wm-card { position: relative; overflow: hidden; }

.wm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;        /* follow the card's rounded corners */
  z-index: 5;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 88% auto;     /* fit the width, leave a small margin */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' width='400' height='150'%3E%3Ctext x='200' y='75' transform='rotate(-12 200 75)' fill='%23FF0000' fill-opacity='0.30' font-family='Segoe UI, Helvetica, Arial, sans-serif' font-size='40' font-weight='700' letter-spacing='3' text-anchor='middle' dominant-baseline='middle'%3ESample Data%3C/text%3E%3C/svg%3E");
}

/* A printed or PDF-exported page leaving the room without the marking is the
 * exact failure this exists to prevent. */
@media print {
  body.wm-page::after,
  .wm-card::after { display: block !important; }
}