/* A prominent arrow repeatedly travels in the direction of the settled change. */
.value-change-flash {
  --value-flash-color: #ffe36e;
  position:relative;
  display:inline-block;
  line-height:1;
  border-radius:0;
  z-index:1;
}
.value-change-increase::after,.value-change-decrease::after {
  content:"";
  position:absolute;left:50%;margin-left:-.625em;width:1.25em;height:1.05em;
  background:var(--value-flash-color);pointer-events:none;
  animation:gantry-value-arrow 2500ms ease-out both,gantry-value-travel 625ms ease-out infinite;
  animation-delay:inherit;
}
.value-change-increase::after {
  --arrow-travel:-.25em;bottom:100%;
  clip-path:polygon(50% 0,100% 50%,65% 50%,65% 100%,35% 100%,35% 50%,0 50%);
}
.value-change-decrease::after {
  --arrow-travel:.25em;top:100%;
  /* A transparent centre keeps the underlying panel visible. */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 1H13V10H19L10 19L1 10H7Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 1H13V10H19L10 19L1 10H7Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* Leave room for the tip in the small count-per-pixel cells. */
#gantryLive .pixel-panel td { height:46px;overflow:visible; }
#gantryWorkspace #gantryLive .live-info,#gantryLive .pixel-total { line-height:2.4; }
.value-change-pending {
  color: #16232e;
  animation: gantry-value-pending 1000ms ease-in-out infinite;
}
@keyframes gantry-value-pending {
  0%, 100% { background-color: #ffe36e; box-shadow: 0 0 5px #ffe36e80; }
  50% { background-color: #b79c32; box-shadow: none; }
}
@keyframes gantry-value-arrow {
  0%, 70% { opacity:1; }
  100% { opacity:0; }
}
@keyframes gantry-value-travel {
  from { transform:translateY(0); }
  to { transform:translateY(var(--arrow-travel)); }
}
@media (prefers-reduced-motion: reduce) {
  .value-change-flash::after { animation:gantry-value-arrow 2500ms step-end both;animation-delay:inherit; }
  .value-change-pending { animation: none; background-color: #ffe36e; color: #16232e; }
}