/* ===========================================================================
   var-explorer.css -- chapter 02's two variance figures
   (assets/js/var-explorer.js).

   The containers carry `cx vx`: the width, text faces and axes come from the
   .cx rules in calc-explorer.css; only the marks are defined here, in the
   purples and greys of the static figures.

   Nothing here is needed by the PDF build; the LaTeX format never loads css.
   =========================================================================== */

/* The whole figure takes the pointer, so dragging a point on a touch screen
   does not scroll the page instead. */
.vx svg {
  touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

.vx svg .vx-free   { fill: #32006e; cursor: ns-resize; }
.vx svg .vx-forced { fill: #fff; stroke: #32006e; stroke-width: 1.6; }
.vx svg .vx-stem   { stroke: #32006e; stroke-width: 1.4; }
.vx svg .vx-sq     { fill: #32006e; fill-opacity: 0.13; stroke: #32006e; stroke-width: 0.8; }
.vx svg .vx-area   { font-size: 11px; }

.vx svg .vx-mean   { stroke: #595959; stroke-width: 1.1; }
.vx svg .vx-ref    { stroke: #262626; stroke-width: 1.4; }
.vx svg .vx-pop    { stroke: #595959; stroke-width: 1.1; stroke-dasharray: 5 3.5; }
.vx svg .vx-smean  { stroke: #a6a6a6; stroke-width: 0.9; stroke-dasharray: 1 2.5; }
/* the line's hit area: wide and invisible, but still a target for the cursor */
.vx svg .vx-grip   { stroke: transparent; stroke-width: 16; cursor: ns-resize; }

/* while a drag is on, the cursor holds wherever the pointer goes */
.vx.vx-drag svg, .vx.vx-drag svg * { cursor: ns-resize !important; }