/* ===========================================================================
   pct-explorer.css -- the draw-a-distribution panel in chapter 03
   (assets/js/pct-explorer.js). Scoped to .px.

   The preset buttons reuse .dx-tab from dist-explorer.css. Those rules read
   their colours from variables chapter 07 defines on its .dx panels, so they
   are defined here too (the same fix as ces-surface.css). The shape not in
   use is grey, as in the chapter's surface figure.

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

.px {
  --dx-purple: #32006e;
  --dx-lilac:  #c9b6e6;
  --dx-pale:   #efeaf6;
  --dx-rule:   #ddd8e2;
  /* The presets stand in a column on the left and the plots take the rest
     of the text column. The svg scales with its width, text and all, so a
     narrower plot is also a shorter figure. */
  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. */
.px .px-bar {
  flex: none; flex-direction: column; flex-wrap: nowrap;
  align-self: center; margin: 0;
}
.px .px-plots { flex: 1 1 auto; min-width: 0; }
/* A phone column has no width to spare, so the presets go back on top. */
@media (max-width: 575.98px) {
  .px { flex-direction: column; align-items: stretch; gap: 0; }
  .px .px-bar { flex-direction: row; flex-wrap: wrap; align-self: auto; margin: 0 0 0.55rem; }
}
.px .dx-tab[data-p]:not(.dx-on) { color: #8a8a96; background: #f4f3f6; border-color: #e2dfe6; }
.px .dx-tab[data-p]:not(.dx-on):hover {
  color: var(--dx-purple); background: var(--dx-pale); border-color: var(--dx-rule);
}

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

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