/* Orbace Sudoku — canonical Su-Pu replay block (docs/orbace-brand-standard.md
 * §Su-Pu Replay Anatomy). Namespaced under .osr- (Orbace Supu Replay).
 *
 * Replaces 3 previously-divergent replay implementations that each had their
 * own board container style, transport-control style, and (on two of them) a
 * move-list style: #supu detail (.replay-controls / .movelist), #supu library
 * inline (.v1-supu-lib-controls-bar), and the Home hero theater (.v1-rp-btn /
 * a single-line readout, no list at all). See docs/2026-07-14-grid-cta-audit.md.
 *
 * The board itself reuses .og-board/.og-cell from orbace-grid.css directly —
 * same border weights, same digit sizing formula, same given/user/err colors
 * — so a replay board and a live play board read as the same visual object.
 * This file adds only what's new for playback: a non-interactive board
 * modifier, unified transport controls, and the two move-list presentation
 * modes (sidebar / strip).
 */

/* ---- Board (non-interactive variant of .og-board/.og-cell) ---- */
.osr-board.og-board{cursor:default}
.osr-board .og-cell{cursor:default}
.osr-board .og-cell.justplaced{animation:osrJustPlaced .5s ease-out}
@keyframes osrJustPlaced{from{background:var(--celadon)}to{background:#FFF}}
.osr-board .og-cell.err{animation:none} /* err is momentary during replay, not a persistent state */

.osr-layout{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.osr-board-col{flex-shrink:0}

/* ---- Meta (title/subtitle above or beside the board) ---- */
.osr-meta{margin-bottom:14px}
.osr-meta-title{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink)}
.osr-meta-sub{font-family:var(--mono);font-size:13px;color:var(--mid);margin-top:4px}

/* ---- Transport controls — one style everywhere ---- */
.osr-controls{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.osr-btn{background:var(--ivory);border:1px solid var(--line);border-radius:10px;padding:9px 14px;
  font-size:15px;color:var(--ink);cursor:pointer}
.osr-btn:not(:disabled):hover{background:var(--celadon)}
.osr-btn:disabled{opacity:.35;cursor:default}
.osr-btn-play{background:var(--tea);border-color:var(--tea);color:#FFF;padding:9px 18px}
.osr-btn-play:not(:disabled):hover{background:var(--tea-deep)}
.osr-speed{border:1px solid var(--line);background:var(--ivory);border-radius:10px;padding:8px 10px;
  font-size:13px;font-family:var(--sans);color:var(--ink)}
.osr-step{font-family:var(--mono);font-size:13px;color:var(--mid);margin-left:auto}

/* ---- Sidebar mode (#supu page only) — full vertical move list, same
 * height as the board so the two visually pair as one unit. Full words,
 * never abbreviations: "Correct" / "Mistake" / "Hint", or a technique name
 * (e.g. "Naked Single") when the move carries one. ---- */
.osr-movelist{flex:1;min-width:220px;max-height:min(540px,92vw);overflow-y:auto;
  background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:8px}
.osr-mv{font-family:var(--mono);font-size:13px;padding:7px 10px 7px 12px;border-radius:6px;
  color:var(--mid);cursor:pointer;border-left:3px solid transparent;display:flex;gap:8px}
.osr-mv:hover{background:var(--rice)}
.osr-mv.done{color:var(--ink)}
.osr-mv.cur{background:var(--celadon);color:var(--ink);font-weight:500}
.osr-mv-label{font-weight:600;min-width:92px}
.osr-mv.correct .osr-mv-label,.osr-mv.technique .osr-mv-label{color:var(--tea-deep)}
.osr-mv.mistake{border-left-color:var(--amber)}
.osr-mv.mistake .osr-mv-label{color:var(--amber-deep)}
.osr-mv.hint .osr-mv-label{color:var(--mid)}
.osr-mv.correct,.osr-mv.technique{border-left-color:var(--tea)}

/* ---- Strip mode (multi-section pages, e.g. Home) — compact horizontal
 * move-chip row, auto-scrolls to keep the current step centered. A condensed
 * cousin of the sidebar list for pages that can't spare a tall sidebar. ---- */
.osr-strip-wrap{margin-top:14px}
.osr-strip{display:flex;gap:6px;overflow-x:auto;padding:4px 2px;scroll-behavior:smooth;
  scrollbar-width:thin}
.osr-strip::-webkit-scrollbar{height:5px}
.osr-strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.osr-chip{flex:0 0 auto;font-family:var(--mono);font-size:12px;padding:6px 10px;border-radius:8px;
  background:var(--ivory);border:1px solid var(--line);color:var(--mid);white-space:nowrap}
.osr-chip.correct,.osr-chip.technique{border-color:var(--tea);color:var(--tea-deep)}
.osr-chip.mistake{border-color:var(--amber);color:var(--amber-deep);background:rgba(201,134,43,.1)}
.osr-chip.hint{border-color:var(--celadon-d);color:var(--mid)}
.osr-chip.cur{background:var(--celadon);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--celadon-d)}

@media (max-width:720px){
  .osr-layout{gap:16px}
  .osr-movelist{max-height:280px;width:100%}
  .osr-controls{gap:6px}
  .osr-btn{padding:8px 11px;font-size:14px}
}