/* StrokeOrder — the numbered stroke-order clip on kanji cards (#228).
   Layout only; every colour is a token (decision 0008). Strokes inherit
   their ink from `color` via stroke="currentColor"; the numbers take the
   accent so they read as annotation, not as part of the character. */
.sorder{margin:14px auto 0;max-width:260px}
.sorder-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.sorder-title{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.sorder-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:150px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--cell)}
.sorder-svg{width:150px;height:150px;color:var(--ink)}
.sorder-nums text{font-size:8px;fill:var(--accent);font-family:var(--mono, monospace);transition:opacity .15s ease}
.sorder-play{position:absolute;right:8px;bottom:8px;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sorder-play svg{width:16px;height:16px}
.sorder-play:hover{color:var(--ink);border-color:var(--ink)}
.sorder-play:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
/* While drawing, the replay control steps aside; it is the finished state's. */
.sorder.is-playing .sorder-play{opacity:0;pointer-events:none}
.sorder-credit{margin:6px 0 0;font-size:11px;color:var(--dim);text-align:center}
.sorder-credit a{color:var(--dim)}