/* Run button: the designed pill image (img/run-pill.png) as the button. The word Run stays for screen readers.
   To go back to the old look, remove the run-pill.css link from the course pages. */
.run-inline { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important; padding: 0 !important; border-radius: 999px; gap: 10px; }
.run-inline:has(#run:hover:not(:disabled)), .run-inline:has(#run:focus-visible) { background: none !important; box-shadow: none !important; }
.run-inline #run {
  position: relative; margin-left: 0 !important; width: 88px; height: 50px; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important;
  background: url("img/run-pill.png?v=3") center / contain no-repeat !important; box-shadow: none !important;
  color: transparent !important; text-shadow: none !important; transition: transform .08s ease, filter .15s;
}
/* the page lines the ▶ up with the line numbers by measuring the icon: keep an invisible icon exactly over the picture's arrow */
.run-inline #run svg { position: absolute; left: 13px; top: 19px; width: 11px !important; height: 12px !important; opacity: 0; }
.run-inline #run > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.run-inline #run:hover:not(:disabled) { filter: brightness(1.05); }
.run-inline #run:active:not(:disabled) { transform: translateY(2px) scale(.98) !important; }
.run-inline #run:focus-visible { outline: 3px solid var(--blue, #2f6fdf) !important; outline-offset: 2px; }
.run-inline #run:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .run-inline #run { transition: none; } }
/* the keyboard hint (⌘↵) inside the button would draw a box over the picture */
.run-inline #run .run-kbd { display: none !important; }