/* ------------------------------------------------------------------------
 * ccx-bgtopo.css
 *
 * One thing only: where the canvas of assets/ccx-bgtopo.js sits inside the
 * block it belongs to. Everything the map looks like is drawn in the script,
 * because a stylesheet cannot draw a contour.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * THE LAYER
 *
 * The canvas is put in as the first child of the block and has to end up
 * behind everything the block holds, without any element inside the block
 * knowing about it. A negative z-index does that: it is painted after the
 * background of the block and before its content.
 *
 * For that layer to stay inside the block, the block has to be a stacking
 * context of its own. Otherwise a layer at -1 escapes upwards and lands
 * next to the two fixed canvases of inc/ccx-stickybg.php, which sit at -1
 * and -2 on the body. isolation is the quietest way to say it: unlike a
 * z-index of its own it changes neither the order the block itself is
 * painted in nor its layout. The only thing a new stacking context does
 * change is how a blend mode inside it reaches out, and it was checked on
 * the live page first that the opening block of /references/ holds no blend
 * mode at all.
 *
 * position: relative is written out although the block already carries it,
 * so the rule holds for whatever block this module is pointed at next.
 * -------------------------------------------------------------------- */
.ccbt-host {
  position: relative;
  isolation: isolate;
}

.ccbt-host > .ccbt-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* --------------------------------------------------------------------
 * THE OPENING BLOCK OF /references/
 *
 * That block clips at overflow: hidden and is exactly as tall as the title
 * and the sentence under it, so the canvas fills it and needs no reach of
 * its own. The two ends of the map are softened in the drawing, not here:
 * an alpha ramp inside the canvas takes the lines back out at the top and
 * the bottom, which a css mask on the element could not do without also
 * masking whatever the block will hold later.
 *
 * The class is written by the script and is here so a second mounting place
 * with a different box can be given one without touching the rule above.
 * -------------------------------------------------------------------- */
.ccbt-host.ccbt-intro > .ccbt-canvas {
  inset: 0;
  height: 100%;
}

/* Under 1025 pixels the script does not build the map at all, so there is
 * nothing to hide. This rule stands for the one case the script cannot
 * catch on its own: a wide window that is dragged narrow after the canvas
 * was built. measure() gives up the grid in the same breath, this takes the
 * picture off the screen. */
@media (max-width: 1024px) {
  .ccbt-host > .ccbt-canvas { display: none; }
}

/* On paper a contour map behind a headline is a grey haze that says nothing
 * and costs ink. */
@media print {
  .ccbt-host > .ccbt-canvas { display: none; }
}