/* ===========================================================================
   idioms-explorer.css -- the button rows, lines, bars, and time strip of
   chapter 05's idioms panel (assets/js/idioms-explorer.js).

   The container carries `dx cx mx`: the buttons come from the .dx-tab rules
   in dist-explorer.css, in UW purple like every control in the book; the
   frame, text, and axes from the .cx rules in calc-explorer.css. Defined
   here: the four labelled button rows, the color swatch in each filter
   button, the lines and bars (their colors set by the script from the
   chapter's palette), the faded and selected states, the strip under the
   chart with its window, the line under it all, and the tooltip.

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

/* the whole width of the text column, not the 576px of the other .cx
   panels: the script lays the svg out at the column's width */
.cx.mx { max-width: none; position: relative; }

.mx .mx-ctl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.7rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.mx .mx-ctl .dx-tabs { margin-bottom: 0; }
.mx .mx-lab { font-size: 0.8em; font-weight: 600; color: #000; }
.mx .mx-sw {
  display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.35em;
  border-radius: 1px; vertical-align: -0.02em;
}
.mx .dx-tab:not(.dx-on) .mx-sw { opacity: 0.3; }

.mx svg .mx-bg    { fill: transparent; }
.mx svg .mx-grid  { stroke: #ebebeb; stroke-width: 0.8; }
.mx svg .mx-line  { fill: none; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.mx svg .mx-line.mx-thick { stroke-width: 1.7; }
.mx svg .mx-line.mx-sel   { stroke-width: 2.4; }
.mx svg .mx-fade  { stroke-opacity: 0.15; fill-opacity: 0.2; }
.mx svg text.mx-fade { fill-opacity: 0.35; }
.mx svg .mx-hit   { fill: none; stroke: transparent; stroke-width: 9; pointer-events: stroke; cursor: pointer; }
.mx svg .mx-bar   { cursor: pointer; }
.mx svg .mx-bl, .mx svg .mx-end { font-size: 10.5px; }
.mx svg .mx-ttl   { font-size: 12px; }

.mx .mx-nav svg   { display: block; width: 100%; height: auto; touch-action: none; }
.mx svg .mx-area  { fill: #e3e3e3; stroke: #bdbdbd; stroke-width: 0.8; }
.mx svg .mx-brush { fill: rgba(50, 0, 110, 0.08); stroke: #32006e; stroke-width: 1.5; pointer-events: none; }
.mx svg .mx-navhit { fill: transparent; cursor: ew-resize; }

.mx .mx-readout { min-height: 2.8em; margin: 0.3rem 0 0; font-size: 0.9em; color: #000; }

/* the tooltip: beside the pointer, never catching it */
.mx .mx-tip {
  position: absolute; z-index: 5; pointer-events: none;
  max-width: 16rem; padding: 0.3rem 0.5rem;
  background: #fff; border: 1px solid #bdbdbd; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-size: 0.8em; line-height: 1.35; color: #000; white-space: nowrap;
}
.mx .mx-tip[hidden] { display: none; }
.mx svg .mx-dot { stroke: #fff; stroke-width: 1.5; pointer-events: none; }