.directive-jmp {
  position: relative;
  border: 1px solid var(--color-nav-border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 300px;
}

.directive-jmp java-memory-playground {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bottom right is the one corner the playground leaves alone: the sidebar sits
   top left, the toolbar top right, the zoom controls bottom left and the step bar
   bottom centre. */
.directive-jmp .buttons {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
  z-index: 5;
}

/* In the playground's compact layout (below 1024×640, measured on the
   playground itself) the step bar spans the width of the bottom edge and would
   run under these buttons, so it is lifted clear of them: 8px gap + 32px button
   + 8px gap. The extra `.directive-jmp` outranks the playground's own
   `margin: 8px auto` on that panel. */
.directive-jmp
  .java-memory-playground
  .jmp-compact
  .react-flow__panel.bottom.center {
  margin-bottom: 48px;
}

/* The buttons sit outside the playground element, so they cannot read its
   `--jmp-*` tokens (those are scoped to the element); they wear the book's own
   tokens instead, which flip with the theme — the same pattern learningmap
   uses — so in a dark book they match the playground's dark panels rather than
   staying light. */
.directive-jmp .buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background-color: var(--color-author-background, #f5f5f5);
  color: var(--color-author-color, #3c3c3c);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  cursor: pointer;
}

.directive-jmp .buttons button:hover {
  background-color: var(--color-spacer, #d6d6d6);
}

.directive-jmp .buttons button .icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* A toggle reads as on by being filled in, matching the playground's own:
   the page's ink on its background. */
.directive-jmp .buttons button.active {
  background-color: var(--color-text, #242428);
  color: var(--color-background, #ffffff);
}

.directive-jmp .buttons button.active:hover {
  background-color: var(--color-text-deactivated, #3c3c3c);
  color: var(--color-background, #ffffff);
}

/* The figure is sized by an inline `height` from the directive, which has to
   give way once it owns the screen. */
.directive-jmp:fullscreen {
  width: 100vw;
  height: 100dvh !important;
  border: none;
  border-radius: 0;
  /* The playground's canvas follows the book's theme (`--jmp-surface` reads
     `--color-background`), so the fullscreen backdrop does too — a light
     backdrop would show as a frame around a dark canvas while the browser
     animates into fullscreen. */
  background-color: var(--color-background, #ffffff);
}

.directive-jmp:fullscreen::backdrop {
  background-color: var(--color-background, #ffffff);
}