/* Figures of the transformer note. Colour is role: blue = keys (what is matched), copper = the query (the question),
   violet = values (what is stored and returned). Matrix cells: teal positive, rose negative. */
html.lean{--pf-data:#2B67AC;--pf-query:#A8472F;--pf-world:#79609B;--sg-pos:#1E7D74;--sg-neg:#B64A78}
html.lean[data-theme="dark"]{--pf-data:#81AFE6;--pf-query:#E78B70;--pf-world:#BAA1DA;--sg-pos:#5FC4B6;--sg-neg:#E58AAE}
#doc .eq-key,.k-key{color:var(--pf-data)}
#doc .eq-query,.k-query{color:var(--pf-query)}
#doc .eq-value,.k-value{color:var(--pf-world)}
.k-key,.k-query,.k-value{font-weight:600}
.k-pos{color:var(--sg-pos);font-weight:600}.k-neg{color:var(--sg-neg);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}
.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%}

/* the one-sentence reading of the current state, so a figure says what it just showed */
.pf-say{margin:.7em 0 0;padding:.45em .8em;border-left:3px solid var(--rule-hard);font:400 .86em/1.45 var(--lean-ui,system-ui);color:var(--ink);background:color-mix(in srgb,var(--paper) 94%,var(--ink))}
.pf-say[data-tone="good"]{border-left-color:var(--sg-pos)}
.pf-say[data-tone="bad"]{border-left-color:var(--pf-query)}
.pf-say[data-tone="info"]{border-left-color:var(--pf-data)}

/* chapter frames: what you will be able to do, what you need, the one idea to keep */
aside.goal,aside.take{margin:1.2em 0;padding:.1em 0 .1em 1em;border-left:2px solid var(--pf-data);font-size:.93em}
aside.take{border-left-color:var(--pf-world)}
aside.goal > p:first-child::before{content:"goal \00B7  ";font:500 .72em var(--lean-ui,ui-monospace,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--pf-data)}
aside.take > p:first-child::before{content:"keep \00B7  ";font:500 .72em var(--lean-ui,ui-monospace,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--pf-world)}
aside.def{margin:1.2em 0;padding:.1em 0 .1em 1em;border-left:2px solid var(--rule-hard);font-size:.93em}
aside.def > p:first-child::before{content:"definition \00B7  ";font:500 .72em var(--lean-ui,ui-monospace,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.toc-list{columns:1;margin:1em 0}