/* Distribution figures share the essay's CMU type and warm paper. Colour has one role:
   blue = observed or simulated, copper = a hidden quantity, violet = the derived law. */
html.lean{--ds-obs:#2B67AC;--ds-hid:#A8472F;--ds-der:#79609B}
html.lean[data-theme="dark"]{--ds-obs:#81AFE6;--ds-hid:#E78B70;--ds-der:#BAA1DA}
#doc .eq-obs,.k-obs{color:var(--ds-obs)}
#doc .eq-hid,.k-hid{color:var(--ds-hid)}
#doc .eq-der,.k-der{color:var(--ds-der)}
.k-obs,.k-hid,.k-der{font-weight:600}
html.lean .ds-figure{margin:2em 0 2.3em}
.ds-plot{position:relative;min-width:0;min-height:180px}
.ds-plot > svg{display:block;width:100%;max-width:100%;overflow:hidden}
.ds-plot > svg text{user-select:none;-webkit-user-select:none}
.ds-plot > svg .ds-handle{cursor:ew-resize;touch-action:pan-y}
.ds-plot > svg .ds-handle.ds-v{cursor:ns-resize;touch-action:none}
.ds-plot > svg .ds-handle.ds-free{cursor:grab;touch-action:none}
.ds-plot > svg .ds-pick{cursor:pointer}
.ds-plot > svg,.ds-plot > svg:focus,.ds-plot > svg:focus-visible,.ds-plot > svg .ds-handle:focus-visible{outline:none}   /* no frame around a figure, ever; keyboard focus shows on the handle ring below */


.ds-control{position:absolute;left:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ds-control input{width:1px;height:1px}

.ds-figure{position:relative}
html.lean .ds-figure figcaption{font-family:var(--serif);font-size:.84em;line-height:1.5;color:var(--muted);margin:14px 0 0}
html.lean .ds-figure figcaption b{color:var(--ink);font-weight:400}
html.lean .ds-figure .katex{font-size:1em}
html.lean .ds-figure .kicker{display:none}
html.lean[data-source="dist-derived.md"] .eq,
html.lean[data-source="dist-derived.md"] .tw{position:relative}
@media (min-width:1100px){
  html.lean .ds-figure.ds-wide{width:calc(100% + 300px);max-width:calc(100vw - 56px);margin-left:-150px;margin-right:-150px}
  html.lean .ds-figure.ds-wide figcaption{max-width:var(--measure);margin-left:auto;margin-right:auto}
}
@media (max-width:620px){
  html.lean .ds-figure figcaption{font-size:.86em}
}
@media (prefers-reduced-motion:reduce){.ds-plot *{animation:none !important;transition:none !important}}
@media print{.ds-figure{break-inside:avoid}}

.ds-grip circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.ds-grip path{fill:var(--ink)}
.ds-plot > svg:focus-visible:not([data-pointer]) .ds-grip circle{stroke:var(--accent);stroke-width:2.5}
main details.more .eq.lean-wide{width:auto;max-width:100%;left:0;transform:none}
main details.more .katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%}

/* the map scrolls sideways on a phone instead of shrinking its labels */
.ds-graph .ds-plot{overflow-x:auto;overflow-y:hidden}
.ds-graph .ds-plot > svg{max-width:none}

/* a worked example: a boxed, collapsed answer under each teaser */
html.lean details.answer{margin:1.1em 0 1.5em;border:1px solid var(--rule-hard);border-radius:6px;background:color-mix(in srgb,var(--paper) 94%,var(--ds-der))}
html.lean details.answer > summary{cursor:pointer;list-style:none;padding:10px 16px;font:500 .78em/1.3 var(--lean-ui);color:var(--ds-der);letter-spacing:.01em}
html.lean details.answer > summary::-webkit-details-marker{display:none}
html.lean details.answer > summary::before{content:"▸";display:inline-block;margin-right:.6em;transition:transform .15s}
html.lean details.answer[open] > summary::before{transform:rotate(90deg)}
html.lean details.answer[open] > summary{border-bottom:1px solid var(--rule)}
html.lean details.answer > :not(summary){padding:0 16px}
html.lean details.answer > p{margin:.8em 0 1em;font-size:.94em}

/* the map is wider than the text column: centred and wide on a desktop, scrolling sideways below that */
@media (min-width:1100px){
  html.lean .ds-figure.ds-graph{width:min(1000px,calc(100vw - 56px));max-width:none;margin-left:50%;margin-right:0;transform:translateX(-50%)}
  html.lean .ds-figure.ds-graph figcaption{max-width:var(--measure);margin-left:auto;margin-right:auto}
}