/* ------------------------------------------------------------------------
 * ccx-appdots.css
 *
 * Where the canvas of assets/ccx-appdots.js sits inside the opening section of
 * the three app product pages. Everything the field looks like is drawn in the
 * script; there is nothing to style here, which is the point - a stylesheet
 * cannot make a dot lean out of the way of a pointer.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * THE LAYER
 *
 * The canvas is put in as the first child of the section and has to end up
 * behind everything the section holds without any element inside knowing
 * about it. A negative depth does exactly that: it is painted after the
 * background of the section - which is where the static artwork lives, and
 * that artwork stays - and before its content.
 *
 * For a layer at -1 to stay inside the section, the section has to be a
 * stacking context of its own, otherwise the layer escapes upwards and lands
 * next to whatever else on the page sits at a negative depth.
 *
 * z-index: 0 on a positioned element is what makes that context here, and it
 * is chosen over `isolation: isolate` on purpose. Both create a stacking
 * context, but isolation is one of the properties that also start a new
 * backdrop root, and a backdrop root cuts the ground away from every
 * backdrop-filter below it. The glass of inc/ccx-appglass.php sits inside
 * this very section and has to be able to reach past it to the page ground,
 * so the section must not become one. z-index does not have that side
 * effect.
 *
 * There is one thing z-index does that isolation does not: it puts the
 * section into the z-order of its siblings at level 0. That changes nothing
 * here, because the sections of these pages neither overlap nor carry a
 * z-index of their own, and the sticky header sits far above them.
 *
 * position: relative is written out although the section already carries it.
 * The rule has to hold for whatever section the module is pointed at next.
 * -------------------------------------------------------------------- */
.ccad-host {
  position: relative;
  z-index: 0;
}

.ccad-host > .ccad-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  /* Written out, and the reason is worth keeping: a canvas is a replaced
     element with an intrinsic size of 300 by 150. Given height: auto it does
     not read the insets at all, it takes the width and applies that two to
     one ratio - on a 1440 window a canvas 720 pixels tall instead of the
     1600 the insets ask for. It even looks stable afterwards, because the
     bitmap the script then sets keeps the same ratio. */
  height: 100%;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* Under 1025 pixels the script does not build the field 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 field was built.
 * The grid is given up in measure(), this takes the picture off the screen in
 * the same breath. */
@media (max-width: 1024px) {
  .ccad-host > .ccad-canvas { display: none; }
}

/* On paper the field is a grey haze over the whole section and says nothing. */
@media print {
  .ccad-host > .ccad-canvas { display: none; }
}