.machine {
  position: relative;
  height: 360px;
  margin-top: 40px;
}

.scroll-x {
  overflow-x: auto;
  /* For some reason, this is needed or else children input outlines are cut off... */
  margin: -5px;
  padding: 5px;
}

.min-height-grid {
  min-height: 292px;
}

.machine-grid {
  display: inline-grid;
  column-gap: 2px;
  row-gap: 10px;
  /* Four rows: cells, tape head X2. */
}

input,
i {
  display: none;
}

input {
  cursor: pointer;
}

[id*="TAPE_VALUE_PREFIX"],
s {
  appearance: none;
  color: white;
  background-color: rgb(66, 139, 202);
  font-family: "Courier New";
  font-size: 28px;
  line-height: normal;
  text-decoration: none;
  padding: 5px 12px;
  margin: 39px 0px 0px 0px;
  grid-row: 1;
}

s+s {
  grid-row: 3;
}

[id*="TAPE_VALUE_PREFIX"]::after,
s::after {
  content: "0";
}

[id*="TAPE_VALUE_PREFIX"]:checked::after,
:checked+*+*+*+*+*+s::after {
  content: "1";
}

/* Unlike with checkboxes, we can display radio buttons without the user being able to toggle them (by hiding all other options). */
[id*="HEAD_POS_PREFIX"] {
  display: block;
  position: relative;
  top: -18px;
  appearance: none;
  pointer-events: none;
  color: #444;
  font-family: "Courier New";
  font-size: 28px;
  margin: 0px 0px 20px 0px;
  text-align: center;
  grid-row: 2;
}

[id*="BUFFER_PREFIX1HEAD_POS_PREFIX"] {
  grid-row: 4;
}

[id*="HEAD_POS_PREFIX"]:not(:checked) {
  visibility: hidden;
}

[id*="HEAD_POS_PREFIX"]::after {
  content: "▲";
}

label {
  display: none;
  cursor: pointer;
  position: absolute;
  left: 0px;
  bottom: 0px;
  font-family: "Segoe UI";
  font-size: 16px;
  color: white;
  text-align: center;
  background-color: #22c55e;
  width: 115px;
  padding: 6px 0px;
  border-radius: 6px;
}

label:hover {
  background-color: #16a34a;
}

label::after {
  content: "Execute Step";
}

[for="STARTED_ID"]::after {
  content: "Start";
}

/* Label ordering: start -> tape value -> tape head -> state -> switch buffer. */
[for="STARTED_ID"],
[for*="TAPE_VALUE_PREFIX"] {
  z-index: 2;
}

[for*="HEAD_POS_PREFIX"] {
  z-index: 1;
}

/* Reuse some of the dummy elements to display the state. */
s+i,
s+i+i {
  display: block;
  font-style: normal;
  position: absolute;
  left: 0px;
  /* Don't block horizontal scrolling. */
  z-index: -1;
}

s+i+i {
  transform: translate(0px, 151px);
}

/* Show the start label initially. */
#STARTED_ID:not(:checked)~[for="STARTED_ID"] {
  display: block;
}

/* Allow the user to toggle the top row tape cell inputs before starting. */
#STARTED_ID:not(:checked)~[id*="BUFFER_PREFIX0TAPE_VALUE_PREFIX"] {
  display: block;
}

/* Hide display cells/bottom tape head before starting. */
#STARTED_ID:not(:checked)~s,
#STARTED_ID:not(:checked)~[id*="BUFFER_PREFIX1"] {
  display: none;
}

/* Use the second state label to show a help message before starting. */
#STARTED_ID:not(:checked)~s+i+i::after {
  content: "Set the initial tape input by clicking on the squares above." !important;
}

/* Fade the top elements after starting and the bottom is the destination. */
#STARTED_ID:checked~#BUFFER_SWITCH_ID:not(:checked)~:not(s)+s,
#STARTED_ID:checked~#BUFFER_SWITCH_ID:not(:checked)~[id*="BUFFER_PREFIX0"],
#STARTED_ID:checked~#BUFFER_SWITCH_ID:not(:checked)~s+i {
  opacity: 0.5;
}

/* Fade the bottom elements when the top is the destination and swap positions. */
#BUFFER_SWITCH_ID:checked~s+s,
#BUFFER_SWITCH_ID:checked~[id*="BUFFER_PREFIX1"],
#BUFFER_SWITCH_ID:checked~s+i+i {
  opacity: 0.5;
  transform: translate(0px, -151px);
}

#BUFFER_SWITCH_ID:checked~s+i+i {
  transform: translate(0px, 0px);
}

#BUFFER_SWITCH_ID:checked~:not(s)+s,
#BUFFER_SWITCH_ID:checked~[id*="BUFFER_PREFIX0"],
#BUFFER_SWITCH_ID:checked~s+i {
  transform: translate(0px, 151px);
}

* {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}