/* RL figures share the essay's CMU type and warm paper. Colour is role:
   blue = given (rewards, data), copper = what the agent does (policy, occupancy), violet = value. */
html.lean{--pf-data:#2B67AC;--pf-query:#A8472F;--pf-world:#79609B}
html.lean[data-theme="dark"]{--pf-data:#81AFE6;--pf-query:#E78B70;--pf-world:#BAA1DA}
#doc .eq-data,.k-data{color:var(--pf-data)}
#doc .eq-policy,.k-policy{color:var(--pf-query)}
#doc .eq-value,.k-value{color:var(--pf-world)}
.k-data,.k-policy,.k-value{font-weight:600}
html.lean .pf-figure{margin:2em 0 2.3em}
.pf-plot{position:relative;min-width:0;min-height:180px}
.pf-plot > svg{display:block;width:100%;max-width:100%;overflow:hidden}
.pf-plot > svg text{user-select:none;-webkit-user-select:none}
.pf-plot > svg .pf-handle{cursor:ew-resize;touch-action:pan-y}
.pf-plot > svg .pf-handle.pf-vertical{cursor:ns-resize;touch-action:none}
.pf-plot > svg .pf-handle.pf-free{cursor:grab;touch-action:none}
.pf-plot > svg .pf-pick{cursor:pointer}
.pf-plot > svg:focus-visible{outline:2px solid var(--pf-data);outline-offset:6px;border-radius:2px}
.pf-plot > svg[data-pointer]:focus-visible{outline:none}
.pf-plot > svg .pf-handle:focus-visible{outline:2px solid var(--pf-data);outline-offset:4px}
.pf-control{position:absolute;left:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pf-control input{width:1px;height:1px}
.pf-figure:has(.pf-control input:focus-visible) .pf-plot > svg{outline:2px solid var(--pf-data);outline-offset:6px;border-radius:2px}
.pf-figure{position:relative}
html.lean .pf-figure figcaption{font-family:var(--serif);font-size:.84em;line-height:1.5;color:var(--muted);margin:14px 0 0}
html.lean .pf-figure figcaption b{color:var(--ink);font-weight:400}
html.lean .pf-figure .katex{font-size:1em}
html.lean .pf-figure .kicker{display:none}
html.lean[data-source="rl-derived.md"] .eq,
html.lean[data-source="rl-derived.md"] .tw{position:relative}
.pf-empty{font:14px/1.5 var(--lean-ui);color:var(--muted)}
@media (min-width:1100px){
  html.lean .pf-figure.pf-wide{width:calc(100% + 300px);max-width:calc(100vw - 56px);margin-left:-150px;margin-right:-150px}
  html.lean .pf-figure.pf-wide figcaption{max-width:var(--measure);margin-left:auto;margin-right:auto}
}
@media (max-width:620px){
  html.lean .pf-figure figcaption{font-size:.86em}
}
@media (prefers-reduced-motion:reduce){.pf-plot *{animation:none !important;transition:none !important}}
@media print{.pf-figure{break-inside:avoid}}

.pf-grip circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.pf-grip path{fill:var(--ink)}
.pf-figure svg:has(.pf-handle:focus-visible) .pf-grip circle,.pf-figure:has(.pf-control input:focus-visible) .pf-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%}
