/* ===========================================================================
   dice-explorer.css -- chapter 08's loaded die
   (assets/js/dice-explorer.js).

   The container carries `dx cx dc`: the slider and buttons come from the .dx
   rules in dist-explorer.css, the frame and text from the .cx rules in
   calc-explorer.css. Defined here: one row holding the slider and the
   buttons, the two panels side by side on top (each half the width, so all
   three svgs share one scale), the dice, the floor and the dashed normal
   curve. The bars of the die and of the histogram take their colours from
   R (DCDATA.colors, set as fill attributes by the script), so no rule here
   may set their fill: a css fill would beat the attribute. The static PDF
   figure uses the same colours (chunk distribution-dice-static).

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

.dc .dc-row { gap: 0.4rem 1.2rem; margin-bottom: 0.4rem; }
.dc .dc-row .dx-tabs { margin-bottom: 0; }
.dc .dc-row .cx-ctl input[type="range"] { width: 150px; }

.dc .dc-top { display: flex; }
.dc .dc-top svg { display: block; width: 50%; height: auto; }
/* a finger on the die drags a bar instead of scrolling the page */
.dc svg.dc-die { touch-action: none; }

/* the die: bars to drag */
.dc svg .dc-base  { stroke: #737373; stroke-width: 1.1; }
.dc svg .dc-face:hover .dc-bar { opacity: 0.8; }
.dc svg .dc-hit   { fill: transparent; cursor: ns-resize; }
.dc svg .dc-hit:focus { outline: none; }
.dc svg .dc-hit:focus-visible { stroke: #c9b6e6; stroke-width: 2; }
.dc.dc-drag svg, .dc.dc-drag svg * { cursor: ns-resize !important; }

/* dice: grey faces; the rolled dice have purple pips */
.dc svg .dc-box   { fill: #fff; stroke: #737373; stroke-width: 1.1; }
.dc svg .dc-blank { fill: none; stroke: #cccccc; stroke-width: 1; }
.dc svg .dc-pip   { fill: #404040; }
.dc svg.dc-roll .dc-pip { fill: #32006e; }

/* the sums */
.dc svg .dc-floor { stroke: #737373; stroke-width: 1.1; }
.dc svg .dc-curve { fill: none; stroke: #000; stroke-width: 1.1; stroke-dasharray: 3 3; }

@media (max-width: 520px) {
  .dc .dc-row .cx-ctl input[type="range"] { width: 110px; }
}