/* ===========================================================================
   calc-explorer.css -- drawing classes for chapter 01's two interactive
   figures (assets/js/calc-explorer.js).

   The containers carry both classes, `dx cx`: the slider row comes from the
   .dx rules in dist-explorer.css, and everything below is
   scoped to .cx. Colours follow the static ggplot figures -- UW purple
   curves and fills, grey guides -- and all text is black, as in those figures.

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

/* The same room as the 6in static figures around it: at most 576px wide (6in
   at 96 px/in), centred, shrinking with a narrow column as those pictures
   do. No box: in chapter 01 the panel IS the figure, so it sits in the text
   like the static figures, without the frame the .dx panels carry. The
   figure environment centres its content; the panel reads left to right. */
.cx {
  max-width: 576px; margin: 1.1rem auto;
  text-align: left; border: none; border-radius: 0; padding: 0; background: none;
}

.cx .cx-ctl input[type="range"] { width: 240px; }
.cx .dx-ctl-name, .cx .dx-ctl output { color: #000; }

.cx-plot svg { display: block; width: 100%; height: auto; }

/* ---- text: the face and sizes of the static figures ----
   The static figures are drawn in Latin Modern Roman (see .Rprofile), so the
   svg text is too, from a subset of TinyTeX's lmroman10 (printable ASCII plus
   the minus sign, <=, and superscript 2; renamed, as the GUST Font License
   asks of a modified font -- see assets/fonts/README.txt). The svg is laid
   out at 1 unit = 1px of a 576px figure, so sizes are the static figures'
   ggplot sizes in px: 3.4mm labels = 12.8px, 3.8mm curve names = 14.4px. */
@font-face {
  font-family: "URBAN520 LM Roman";
  src: url("fonts/lmroman10-regular-subset.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "URBAN520 LM Roman";
  src: url("fonts/lmroman10-italic-subset.woff2") format("woff2");
  font-style: italic; font-weight: 400; font-display: swap;
}
.cx svg text {
  fill: #000;
  font-family: "URBAN520 LM Roman", "Latin Modern Roman", "Times New Roman", Times, serif;
}
.cx svg .cx-tk      { font-size: 11px; }
.cx svg .cx-lb      { font-size: 12.8px;
                      /* a white halo keeps a label legible where it crosses a line */
                      paint-order: stroke; stroke: #fff; stroke-width: 3px;
                      stroke-linejoin: round; }
.cx svg .cx-name    { font-size: 14.4px; }
/* math letters italic, as plotmath's italic() is in the static figures */
.cx svg .cx-m       { font-style: italic; }
.cx svg .cx-mr      { font-style: normal; }
.cx svg .cx-sub     { font-size: 0.75em; }

/* ---- html text: the slider labels ----
   These sit in the page, so they follow the page: Avenir for words, and for
   math letters the TeX faces MathJax declares for the chapter's formulas
   (MJXTEX-I is italic by design and declared normal, hence font-style:
   normal; 1.12em matches the size MathJax sets math at beside Avenir). */
.cx .cx-mi {
  font-family: MJXTEX-I, "Latin Modern Math", "Times New Roman", Times, serif;
  font-style: normal; font-size: 1.12em;
}
.cx sub.cx-mr {
  font-family: MJXTEX, "Latin Modern Roman", "Times New Roman", Times, serif;
  font-style: normal; font-size: 0.9em;
}
/* the value beside the slider, in fixed-width figures so it holds still */
.cx .dx-ctl output { font-family: inherit; font-variant-numeric: tabular-nums; }

/* ---- axes and guides: the static figures' greys and line widths ---- */
.cx svg .cx-ax      { stroke: #737373; stroke-width: 1.1; fill: none; }
.cx svg .cx-one     { stroke: #cccccc; stroke-width: 0.9; stroke-dasharray: 4 3; }
.cx svg .cx-x0      { stroke: #a6a6a6; stroke-width: 0.9; stroke-dasharray: 1 2.5; }
.cx svg .cx-box     { fill: none; stroke: #737373; stroke-width: 1; stroke-dasharray: 1 2.5; }
.cx svg .cx-rr      { stroke: #595959; stroke-width: 1.1; stroke-dasharray: 3 2.5; }
.cx svg .cx-op      { stroke: #262626; stroke-width: 1.1; }
.cx svg .cx-head    { fill: #262626; }

/* ---- curves, lines and fills ---- */
.cx svg .cx-curve   { stroke: #32006e; stroke-width: 2; fill: none; stroke-linejoin: round; }
.cx svg .cx-area    { fill: #32006e; fill-opacity: 0.13; }
.cx svg .cx-sec     { stroke: #595959; stroke-width: 1.3; stroke-dasharray: 5 3.5; }
.cx svg .cx-tan     { stroke: #262626; stroke-width: 1.5; }
.cx svg .cx-hi      { stroke: #8B0000; stroke-width: 2.8; }
.cx svg .cx-pt      { fill: #32006e; }
.cx svg .cx-pq      { fill: #4d4d4d; }

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