/* The pictures on the ELI5 pages (see notes/eli5/eli5.js). Copied to public/eli5/ by tools/build-notes.mjs.
   Colours and type come from the lgkm tokens, so the pictures follow the light and dark themes. */
.pic{margin:var(--space-6) 0 0;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);display:flex;flex-direction:column;gap:var(--space-4)}
.pic-controls{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.pic-controls button{font:500 14px/20px var(--font-sans);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer}
.pic-controls button:hover{border-color:var(--ink)}
.pic-controls button[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.pic:not(.js) .pic-controls{display:none}
.pic svg{display:block;width:100%;height:auto;overflow:visible}
.pic-say{margin:0;min-height:96px;font-size:16px;line-height:24px;color:var(--ink)}
.pic-hint{margin:0;font-size:13px;line-height:20px;color:var(--ink-muted)}
.pic:not(.js) .pic-hint{display:none}

.pic text{fill:var(--ink);font:500 13px var(--font-sans)}
.pic .sm{font-size:11px;fill:var(--ink-muted)}
.pic .b{font-weight:600}
.pic .mid{text-anchor:middle}
.pic .bx{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5}
.pic .bx2{fill:var(--surface-sunken);stroke:var(--line);stroke-width:1.5}
.pic .ln{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.pic .ink{fill:var(--ink)}
.pic .mut{fill:var(--ink-muted)}
.pic .inks{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pic .sig{fill:var(--signal)}
.pic .sigs{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linecap:round}
.pic text.sigt{fill:var(--signal-ink);font-weight:600}
.pic .dash{stroke-dasharray:5 4}

/* Highlighted in the current state: shapes (fx), filled shapes (fx solid), lines (ed), labels (tx). */
.pic .fx{transition:fill .3s,stroke .3s}
.pic .fx.on{fill:var(--signal-tint);stroke:var(--signal);stroke-width:2.5;animation:pic-pop .5s var(--d,0s) ease-out backwards}
.pic .fx.solid.on{fill:var(--signal)}
.pic .ed.on,.pic .ed.run{stroke:var(--signal);stroke-width:3;stroke-dasharray:7 5;animation:pic-flow .9s linear infinite}
.pic text.tx.on{fill:var(--signal-ink);font-weight:600}

/* Visible only in some states. */
.pic [data-show]{opacity:0;visibility:hidden}
.pic [data-show].show{opacity:1;visibility:visible;animation:pic-fade .5s var(--d,0s) ease-out backwards}
.pic .pulse.show{animation:pic-fade .5s var(--d,0s) ease-out backwards,pic-pulse 1.4s calc(var(--d,0s) + .5s) ease-in-out infinite}

/* Dots that stay in the current state; the rest fade back. */
.pic .dot{fill:var(--ink-muted);transition:opacity .5s,fill .5s}
.pic .dot:not(.on){opacity:.15}
.pic[data-state="matters"] .dot.m{fill:var(--signal)}

/* Things that travel: --x and --y are where they stop. */
.pic .go{transform:translate(var(--x,0),var(--y,0))}
.pic .go.show{animation:pic-fade .3s backwards,pic-go 3.2s var(--d,0s) ease-in-out infinite}

.pic [data-set]{cursor:pointer}
.pic svg [data-set]:focus{outline:none}
.pic svg [data-set]:focus-visible .hl{stroke:var(--signal-ink);stroke-width:3}
.pic svg [data-set][aria-pressed="true"] .hl{stroke:var(--signal);stroke-width:2.5}

@keyframes pic-pop{from{fill:var(--surface);stroke:var(--line-strong)}}
@keyframes pic-fade{from{opacity:0}}
@keyframes pic-pulse{50%{opacity:.35}}
@keyframes pic-flow{to{stroke-dashoffset:-12}}
@keyframes pic-go{0%{transform:translate(0,0);opacity:0}10%{opacity:1}65%,100%{transform:translate(var(--x,0),var(--y,0));opacity:1}}

@media (prefers-reduced-motion:reduce){
  .pic *{animation:none!important;transition:none!important}
}