/* Expectation as an area — page styles.
   Teal = probability mass / density, magenta = negative values,
   grey = not yet integrated, blue = the current position ("now"). */

:root {
  --ex-surface: #f6f8f9;
  --ex-ink: #1c2238;
  --ex-ink-soft: #56607a;
  --ex-rule: #c9d2da;
  --ex-grid: #e1e7ec;
  --ex-mass: #13707f;
  --ex-mass-soft: rgba(19, 112, 127, .20);
  --ex-neg: #b02e68;
  --ex-neg-soft: rgba(176, 46, 104, .22);
  --ex-now: #2f5bd3;
  --ex-now-soft: rgba(47, 91, 211, .16);
  --ex-ghost: rgba(86, 96, 122, .38);
  --ex-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- which case is showing: set by the script on <body>; discrete until then ---- */
body:not([data-ex-case="cont"]) .ex-cont { display: none; }
body[data-ex-case="cont"] .ex-disc { display: none; }

/* ---- display math scrolls inside its own box rather than running off the page ---- */
mjx-container[display="true"] { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

/* ---- math between the figures, back to the text column ---- */
.ex-math { max-width: var(--main-width, 745px); margin: 1.2rem auto; }

/* ---- the sticky control bar: a block of its own in the post's main column (with the
   theme's .wide .extra-wide width), so it sticks over both figures and the text between ---- */
/* the theme's .wide scrolls horizontally, which would make it the bar's scroll
   container and stop it sticking; the figures scroll on their own instead */
.wide.ex-wrap { overflow: visible; }
/* the bar and the figures reach into the margin, where sidenotes float: start below any
   still running */
.ex-bar, .wide.ex-wrap { clear: right; }
.ex-bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--background-color, #fff);
  border-bottom: 1px solid var(--ex-rule);
  padding: .55rem .25rem .5rem;
  font-family: var(--ex-sans); font-size: .82rem; line-height: 1.3;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem;
}
.ex-grp { display: flex; align-items: center; gap: .4rem; }
/* a group a page hides by script (the mix slider, off unless p_X is two bumps): `hidden`
   must beat the flex display above */
.ex-grp[hidden] { display: none; }
/* a slider in the bar (the mix weight here; the entropy post adds β): short, flush with the
   other controls, in the mass colour */
.ex-bar input[type=range] { width: 8rem; margin: 0; accent-color: var(--ex-mass); }
.ex-lab { color: var(--ex-ink-soft); }
/* every control the same: native select or button, one height, one border */
.ex-bar select, .ex-bar button {
  font: inherit; color: var(--ex-ink); background: #fff;
  border: 1px solid var(--ex-rule); border-radius: 4px;
  height: 1.75rem; padding: 0 .5rem;
}
.ex-bar button { cursor: pointer; white-space: nowrap; }
/* a toggle is the same buttons, joined; the chosen one is filled lightly */
.ex-seg { display: inline-flex; }
.ex-seg button {
  font: inherit; color: var(--ex-ink-soft); background: #fff;
  border: 1px solid var(--ex-rule); border-radius: 0; height: 1.75rem; padding: 0 .6rem;
}
.ex-seg button + button { margin-left: -1px; }
.ex-seg button:first-child { border-radius: 4px 0 0 4px; }
.ex-seg button:last-child { border-radius: 0 4px 4px 0; }
.ex-seg button[aria-pressed="true"] { color: var(--ex-ink); background: #e9eef2; font-weight: 600; position: relative; }
.ex-bar button:hover, .ex-bar select:hover, .ex-seg button:hover { border-color: var(--ex-ink-soft); position: relative; }
/* the case toggle in the opening sentence: the bar's toggle, at the text's size */
p .ex-seg { vertical-align: baseline; font-family: var(--ex-sans); font-size: .8em; }
p .ex-seg button { height: 1.75em; padding: 0 .55em; }
/* the g menu: typeset options, in a list that opens below its button */
.ex-menu-btn { display: inline-flex; align-items: center; gap: .45rem; }
.ex-menu-note { color: var(--ex-ink-soft); }
.ex-menu-caret { color: var(--ex-ink-soft); font-size: .8em; }
.ex-menu-list {
  position: fixed; z-index: 30; margin: 0; padding: .25rem 0; list-style: none;
  background: #fff; border: 1px solid var(--ex-rule); border-radius: 4px; box-shadow: 0 4px 14px rgba(28, 34, 56, .12);
  font-family: var(--ex-sans); font-size: .82rem; color: var(--ex-ink);
}
.ex-menu-list[hidden] { display: none; }
.ex-menu-list > li { padding: .35rem .75rem; white-space: nowrap; cursor: pointer; }
.ex-menu-list > li:hover, .ex-menu-list > li:focus { background: #f0f3f6; outline: none; }
.ex-menu-list > li[aria-selected="true"] { background: #e9eef2; font-weight: 600; }
/* each play button holds both labels */
.ex-bar button:not(.playing) .ex-stop, .ex-bar button.playing .ex-go { display: none; }
/* on a narrow screen the bar wraps into rows; tighter gaps keep them few */
@media (max-width: 640px) { .ex-bar { gap: .4rem .5rem; } .ex-bar .ex-grp { gap: .3rem; } }
.ex-bar :focus-visible, .ex-fig :focus-visible { outline: 2px solid var(--ex-now); outline-offset: 2px; }

/* ---- figures ---- */
.ex-fig { margin: .9rem 0 0; background: var(--ex-surface); border: 1px solid var(--ex-rule); border-radius: 6px; padding: .7rem; overflow-x: auto; }
/* the SVG and, over it, the layer of typeset math labels; 1cqw = 1/100 of the figure's width,
   and --ex-k (set by fit.js) = 1000 / the layout's width, so labels keep their size in viewBox units */
.ex-canvas { position: relative; container-type: inline-size; }
svg.ex-plot { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ex-math-layer { position: absolute; inset: 0; pointer-events: none; }
.ex-ml { position: absolute; width: max-content; white-space: nowrap; line-height: 1; color: var(--ex-ink-soft); font-size: calc(1.45cqw * var(--ex-k, 1)); }
.ex-ml mjx-container { margin: 0 !important; }
/* a note on what a part of the figure is: wrapped prose, centred in its space */
.ex-ml.ex-ml-note { white-space: normal; text-align: center; line-height: 1.3; color: var(--ex-ink-soft); font-size: calc(1.6cqw * var(--ex-k, 1)); }
.ex-ml.ex-ml-formula { color: var(--ex-ink); font-size: calc(1.9cqw * var(--ex-k, 1)); }
.ex-ml.ex-ml-result { color: var(--ex-ink); font-size: calc(2.5cqw * var(--ex-k, 1)); }
.ex-ml .ex-now { color: var(--ex-now); }
.ex-ml .ex-neg { color: var(--ex-neg); }

/* ---- SVG marks ---- */
svg.ex-plot .gl { stroke: var(--ex-grid); stroke-width: 1; }
svg.ex-plot .ax { stroke: var(--ex-ink-soft); stroke-width: 1; }
svg.ex-plot .ax0 { stroke: var(--ex-ink); stroke-width: 1.2; }
svg.ex-plot .tk { fill: var(--ex-ink-soft); font: 11px var(--ex-sans); font-variant-numeric: tabular-nums; }
svg.ex-plot .tk.now { fill: var(--ex-now); font-weight: 600; }
svg.ex-plot .done { fill: var(--ex-mass-soft); stroke: var(--ex-mass); stroke-width: 1.2; }
svg.ex-plot .done.neg { fill: var(--ex-neg-soft); stroke: var(--ex-neg); }
svg.ex-plot .todo { fill: none; stroke: var(--ex-ghost); stroke-width: 1; stroke-dasharray: 3 3; }
svg.ex-plot .curve { fill: none; stroke: var(--ex-mass); stroke-width: 2; stroke-linejoin: round; }
svg.ex-plot .curve.later { stroke: var(--ex-ghost); stroke-width: 1.3; stroke-dasharray: 4 3; }
svg.ex-plot .fm { fill: var(--ex-mass-soft); }
svg.ex-plot .fn { fill: var(--ex-neg-soft); }
/* the area plot's frame; at u = 1 it stands out on a brighter ground, as the boxed result does */
svg.ex-plot .result-box { fill: none; stroke: var(--ex-rule); stroke-width: 1; }
svg.ex-plot .result-box.final { fill: #fff; stroke: var(--ex-ink); stroke-width: 1.8; }
/* the average-height line's label, readable over the blocks or the curve */
.ex-ml.ex-ml-avg { color: var(--ex-ink); background: rgba(255, 255, 255, .85); padding: .1em .3em; border-radius: 3px; }
.ex-ml.ex-ml-boxed { background: #fff; border: 1.5px solid var(--ex-ink); border-radius: 4px; padding: .2em .45em .1em; }
svg.ex-plot .cursor { stroke: var(--ex-now); stroke-width: 1.5; }
svg.ex-plot .dot { fill: var(--ex-now); stroke: var(--ex-surface); stroke-width: 2; }
svg.ex-plot .cross { stroke: var(--ex-now); stroke-width: 1.3; stroke-dasharray: 4 3; fill: none; }
svg.ex-plot .hline { stroke: var(--ex-ink); stroke-width: 1.2; stroke-dasharray: 2 3; }
svg.ex-plot .stem-done { stroke: var(--ex-mass); stroke-width: 2; }
svg.ex-plot .stem-todo { stroke: var(--ex-ghost); stroke-width: 1.2; stroke-dasharray: 3 3; }
svg.ex-plot .pin-done { fill: var(--ex-mass); }
svg.ex-plot .stem-done.neg { stroke: var(--ex-neg); }
svg.ex-plot .pin-done.neg { fill: var(--ex-neg); }
svg.ex-plot .pin-todo { fill: var(--ex-surface); stroke: var(--ex-ghost); stroke-width: 1.2; }
svg.ex-plot .br-done { stroke: var(--ex-mass); stroke-opacity: .5; stroke-width: .9; }
/* the map, discrete: each outcome to its block of u, outlined only, since the
   triangle's area means nothing */
svg.ex-plot .tri-done { fill: none; stroke: var(--ex-mass); stroke-opacity: .5; stroke-width: 1; stroke-linejoin: round; }
svg.ex-plot .tri-todo { fill: none; stroke: var(--ex-ghost); stroke-width: .8; stroke-dasharray: 2 3; stroke-linejoin: round; }
/* an atom without mass: no block, a grey dotted line where it would be, a hollow pin on the axis */
svg.ex-plot .br-null { stroke: var(--ex-ghost); stroke-width: .9; stroke-dasharray: 1 5; fill: none; }
svg.ex-plot .pin-null { fill: var(--ex-surface); stroke: var(--ex-ghost); stroke-width: 1.2; }
/* the pmf being edited, drawn faint behind its tempered version (the entropy post's β) */
svg.ex-plot .stem-base { stroke: var(--ex-ink-soft); stroke-width: 1; stroke-dasharray: 3 2; opacity: .55; }
svg.ex-plot .pin-base { fill: none; stroke: var(--ex-ink-soft); stroke-width: 1; stroke-dasharray: 2 2; opacity: .55; }
svg.ex-plot .br-cur { stroke: var(--ex-now); stroke-width: 2.2; }
svg.ex-plot .br-todo { stroke: var(--ex-ghost); stroke-width: .8; stroke-dasharray: 2 3; }
svg.ex-plot .wax { stroke: var(--ex-ink-soft); stroke-width: 1.2; }
svg.ex-plot .wax.done { stroke: var(--ex-mass); stroke-width: 2.4; }
svg.ex-plot .wtk { stroke: var(--ex-ink-soft); stroke-width: 1; }
svg.ex-plot .odot { fill: var(--ex-surface); stroke: var(--ex-ink); stroke-width: 1.5; }
svg.ex-plot .cdot { fill: var(--ex-ink); }
svg.ex-plot .graphline { fill: none; stroke: var(--ex-ink); stroke-width: 1.8; }
svg.ex-plot .band-done { fill: var(--ex-mass-soft); }
svg.ex-plot .band-todo { fill: rgba(86, 96, 122, .07); }
/* a light edge between neighbouring blocks, so each atom's block reads on its own */
svg.ex-plot [class^="band-"] { stroke: var(--ex-surface); stroke-width: 1.5; }
svg.ex-plot .jump { stroke: var(--ex-ghost); stroke-width: 1; stroke-dasharray: 2 3; }
/* p_X handles */
svg.ex-plot .handle { fill: var(--ex-surface); stroke: var(--ex-mass); stroke-width: 2.2; cursor: grab; }
svg.ex-plot .handle.active { stroke: var(--ex-now); }
svg.ex-plot .handle-break { cursor: ew-resize; }
svg.ex-plot .grip { stroke: var(--ex-ink); stroke-width: 2.5; stroke-linecap: round; }
svg.ex-plot .grip.active { stroke: var(--ex-now); }
/* touch targets larger than the marks, which take a touch as a drag rather than a scroll */
svg.ex-plot .hit { fill: rgba(0, 0, 0, 0); touch-action: none; }
svg.ex-plot .grip-hit { stroke: rgba(0, 0, 0, 0); stroke-width: 18; touch-action: none; }
svg.ex-plot .handle { touch-action: none; }

/* ---- entropy as a size (the transform figure's width mode, and the entropy post's figures) ---- */
svg.ex-plot .eqbox { fill: none; stroke: var(--ex-ink); stroke-width: 1.3; stroke-dasharray: 6 4; }
/* the same uniform's quantile function on the graph of F_X⁻¹, in the box's dashes, and the
   guides that carry its ends across to the box's edges */
svg.ex-plot .eqline { fill: none; stroke: var(--ex-ink); stroke-width: 1.3; stroke-dasharray: 6 4; }
svg.ex-plot .eqguide { fill: none; stroke: var(--ex-ghost); stroke-width: 1; stroke-dasharray: 2 3; }
svg.ex-plot .tread, svg.ex-plot .tangent { fill: none; stroke: var(--ex-now); stroke-width: 5; stroke-linecap: round; opacity: .85; }
svg.ex-plot .bin { fill: var(--ex-now-soft); stroke: var(--ex-now); stroke-width: 1; }
svg.ex-plot .qcurve { fill: none; stroke: var(--ex-now); stroke-width: 2.6; stroke-linejoin: round; }
svg.ex-plot .asym { fill: none; stroke: var(--ex-mass); stroke-width: 1.6; stroke-dasharray: 7 5; }
svg.ex-plot .negzone { fill: var(--ex-neg-soft); opacity: .45; }