/* ===========================================================================
   ces-surface.css -- the rotatable score surface in chapter 03
   (assets/js/ces-surface.js). Scoped to .cs3.

   The rule buttons reuse .dx-tab from dist-explorer.css, so the controls
   match the chapter 07 panels. Like the chapter 01 figures, the panel IS the
   figure: no frame, the width of a static figure, centred.

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

.cs3 {
  /* The .dx-tab rules read their colours from variables that chapter 07
     defines on its .dx panels. A .cs3 is not a .dx, so without these the
     selected button came out white on white and vanished. */
  --dx-purple: #32006e;
  --dx-lilac:  #c9b6e6;
  --dx-pale:   #efeaf6;
  --dx-rule:   #ddd8e2;
  max-width: 576px; margin: 1.1rem auto; text-align: left;
}

/* One row, always: the formula takes whatever width is left and wraps inside
   its own box on a narrow screen, so "Reset view" never drops to a line of
   its own. */
.cs3-bar { flex-wrap: nowrap; align-items: center; }
.cs3-bar .dx-tab { flex: none; }
.cs3-hint { flex: 1 1 auto; min-width: 0; font-size: 0.78em; color: #595959; margin-left: 0.35rem; }
.cs3-reset { margin-left: auto; }

/* Both rules stay on screen; the one not shown is grey, and turns purple
   under the pointer to say it can be picked. */
.cs3 .dx-tab[data-rule]:not(.dx-on) {
  color: #8a8a96; background: #f4f3f6; border-color: #e2dfe6;
}
.cs3 .dx-tab[data-rule]:not(.dx-on):hover {
  color: var(--dx-purple); background: var(--dx-pale); border-color: var(--dx-rule);
}

/* touch-action: none so a finger or the pen rotates the surface instead of
   panning the page. The wheel is not affected, so trackpad scrolling still
   moves the page. */
.cs3-canvas {
  display: block; width: 100%;
  touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.cs3-canvas.cs3-drag { cursor: grabbing; }

/* A phone has no room for the formula beside three buttons; the button
   labels already name the rule. */
@media (max-width: 480px) { .cs3-hint { display: none; } }

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