/* ===========================================================================
   qq-explorer.css -- the draw-a-distribution Q-Q panel in chapter 06
   (assets/js/qq-explorer.js). Scoped to .qx.

   The same layout as pct-explorer.css (chapter 03): the shape buttons stand
   in a column on the left and the two plots take the rest of the text
   column. The buttons reuse .dx-tab from dist-explorer.css, whose colours
   come from variables chapter 08 defines on its .dx panels, so they are
   defined here too. The shape not in use is grey, as in chapter 03.

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

.qx {
  --dx-purple: #32006e;
  --dx-lilac:  #c9b6e6;
  --dx-pale:   #efeaf6;
  --dx-rule:   #ddd8e2;
  display: flex; align-items: flex-start; gap: 0.5rem;
  width: 100%; margin: 1.1rem 0; text-align: left;
}
/* The stack is centred on the height of the whole figure. */
.qx .qx-bar {
  flex: none; flex-direction: column; flex-wrap: nowrap;
  align-self: center; margin: 0;
}
.qx .qx-plots { flex: 1 1 auto; min-width: 0; }
/* A phone column has no width to spare, so the buttons go back on top. */
@media (max-width: 575.98px) {
  .qx { flex-direction: column; align-items: stretch; gap: 0; }
  .qx .qx-bar { flex-direction: row; flex-wrap: wrap; align-self: auto; margin: 0 0 0.55rem; }
}
.qx .dx-tab[data-p]:not(.dx-on) { color: #8a8a96; background: #f4f3f6; border-color: #e2dfe6; }
.qx .dx-tab[data-p]:not(.dx-on):hover {
  color: var(--dx-purple); background: var(--dx-pale); border-color: var(--dx-rule);
}

.qx svg { display: block; width: 100%; height: auto; }
.qx svg text {
  font-family: "URBAN520 LM Roman", "Latin Modern Roman", "Times New Roman", Times, serif;
}
/* Only the drawing takes the finger or the pen; the Q-Q plot leaves touch to
   the page, so it can still be scrolled past. */
.qx .qx-in {
  touch-action: none; cursor: crosshair;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

@media print { .qx { display: none; } }