/* Ink figures (see core.js): buttons, picker chips, stats, the toast and the drawing itself.
   The page sets the tokens; these are the defaults of the Colorfigures look: warm paper, brown-black ink.
   Pages that carry the hand-drawn sprite (#wob) also give the buttons a wobbly inked outline (site.css). */
:root{--paper:#f2efe7;--ink:#231e16;--muted:#5f574a;--rule:#ddd6c8;--accent:#f4b829;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.ink-fig{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"btns" "art";gap:8px;color:var(--ink);min-width:0}
.ink-svg{grid-area:art;display:block;width:100%;height:auto;overflow:visible;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.ink-svg [data-act]{cursor:pointer}
.ink-btns{grid-area:btns;display:flex;flex-wrap:wrap;gap:9px 8px;align-items:flex-start;position:relative;z-index:3;min-width:0}
.ink-step{position:relative}
.ink-btn{font:700 13px/1.1 var(--mono);color:var(--ink);background:var(--paper);border:1.6px solid var(--ink);border-radius:999px;min-height:44px;min-width:46px;padding:0 16px;cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease;white-space:nowrap}
.ink-btn:hover{background:color-mix(in srgb,var(--accent) 30%,var(--paper));transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.ink-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.ink-btn:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px}
.ink-btn .car{margin-left:6px;font-size:10px;display:inline-block;transition:transform .15s}
.ink-step.open .ink-btn .car{transform:rotate(180deg)}
.ink-chips{display:none;flex-wrap:wrap;gap:6px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);
  padding:8px;width:max-content;max-width:min(320px,80vw);position:absolute;left:0;top:calc(100% + 6px);z-index:6}
.ink-step.open .ink-chips{display:flex}
.ink-step:last-child .ink-chips,.ink-step:nth-last-child(2) .ink-chips{left:auto;right:0}
.ink-step:first-child .ink-chips{left:0;right:auto}
.ink-chip{font:700 12px/1 var(--mono);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;min-height:44px;padding:0 11px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.ink-chip:hover{background:var(--accent)}
.ink-chip.current{background:var(--ink);color:var(--paper)}
.ink-chip.off{opacity:.5}
.ink-chip:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.ink-stats{grid-area:art;position:relative;align-self:start;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:2;text-align:right;pointer-events:none;padding:2px 2px 0 0}
.ink-stat .k{font:700 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ink-stat .v{font:800 28px/1.05 var(--mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ink-stat.small .v{font-size:17px}
.ink-stat .v.bump{animation:ink-bump .35s ease-out}
@keyframes ink-bump{0%{transform:scale(1.2)}100%{transform:none}}
.ink-toast{position:absolute;left:0;top:52px;z-index:4;font:700 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:#fff4d6;color:#231e16;
  border:1.6px solid #231e16;border-radius:10px;padding:6px 11px;box-shadow:2px 2px 0 #231e16;opacity:0;transition:opacity .2s;pointer-events:none;max-width:min(300px,90%)}
.ink-toast.show{opacity:1}
.ink-fig .tag text{font-family:var(--mono)}
.nolabels .ink-fig .tag{display:none}
@media (max-width:640px){.ink-btn{padding:0 13px;font-size:12.5px}.ink-btns{gap:8px 7px}.ink-stat .v{font-size:22px}.ink-stat.small .v{font-size:15px}.ink-toast{max-width:62%}}
@media (prefers-reduced-motion:reduce){.ink-btn,.ink-toast,.ink-btn .car{transition:none}.ink-stat .v.bump{animation:none}}