/* Colours and weights match the figure library and widgets/graph-walk, so the widget looks like the figures around it. */
* { box-sizing: border-box; }
html, body { margin: 0; overflow: hidden; background: transparent; font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.walk { position: relative; width: 100%; max-width: 720px; margin: 0 auto; background: #fff; border-radius: 6px; }
#map { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#map text { font-family: "New Computer Modern", "Latin Modern Roman", "CMU Serif", "Times New Roman", serif; font-variant-numeric: lining-nums; }
/* filled cells: light green while the table grows, dark green when the table is complete; the cell to fill now is ringed blue */
.bar { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; border-radius: 9999px;
  background: rgb(0 0 0 / 0.7); color: #fff; font-variant-numeric: tabular-nums; }
#dots { display: flex; gap: 5px; }
#dots span { width: 10px; height: 10px; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .7); transition: background .2s; }
#dots span.on { background: #4ac26b; border-color: #4ac26b; }
#misses { min-width: 2.5em; color: #ff8182; font-size: 13px; }
#misses:empty { min-width: 0; }
#reset { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9999px;
  background: transparent; color: #fff; cursor: pointer; }
#reset:hover { background: rgb(255 255 255 / .15); }
#reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.walk.complete #dots span.on { animation: pop .4s ease-out both; }
@keyframes pop { 50% { transform: scale(1.5); } }
.cell rect { fill: #fff; stroke: #1f2328; stroke-width: 1.4; transition: fill .15s; }
.cell text { font-size: 24px; text-anchor: middle; dominant-baseline: central; fill: #1f2328; pointer-events: none; }
.cell.go { cursor: pointer; outline: none; }
.cell.go:hover rect, .cell.go:focus-visible rect { fill: #ddf4ff; }
/* the number moved last: green; printed numbers light green, dark green when all are printed; the target waits in grey */
.cell.last rect { fill: #4ac26b; }
.cell.last text { fill: #fff; font-weight: 700; }
.cell.target text { fill: #afb8c1; }
.cell.out rect { fill: #dafbe1; }
.cell.final rect { fill: #1a7f37; }
.cell.final text { fill: #fff; font-weight: 700; }
.cell.wrong rect { fill: #ffd8d3; stroke: #cf222e; stroke-width: 3; }
.idx { font-size: 15px; text-anchor: middle; dominant-baseline: central; fill: #6e7781; }
.flow { fill: none; stroke: #8c959f; stroke-width: 2; }
.flow-head { fill: #8c959f; }