/* A replay sits in the page like a figure: full measure, its own space, a caption underneath.
   The frame is the application's `.replay` -- same surface, same hairline, same 18px radius --
   so a match embedded in a lesson is framed the way a match is framed on /matches.

   THE BOARD ITSELF IS NOT DRESSED FROM HERE. The viewer owns its palette and keeps it in both
   themes, because a match has to look like itself; theme/tb-replay.js tells it which theme it is
   in and nothing on this side reaches inside. */
.tb-replay {
  margin: 1.4em 0 0.5em;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tb-replay > * { min-width: 0; }

/* THE CAPTION IS THE PARAGRAPH AFTER THE SLOT -- plain markdown, not a classed <p>, because the
   translations are made from the markdown and an HTML block is left as it is. The graph
   theme/tb-replay.js mounts under a slot sits between the two, so it is named as well. */
.tb-replay + p,
.tb-replay-graph + p {
  margin: 0 0 1.6em;
  font-size: 0.9em;
  color: var(--muted);
}