/* Shared interactions; skins supply only colours, shape and typography. */
#play, #tap {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  min-width: 0;
  min-height: 52px;
  padding: 10px 8px;
  transition: background-color 80ms, color 80ms;
}
#play svg { flex: 0 0 17px; }
/* An inset highlight never changes button dimensions or moves its hit area. */
#play:active, #tap:active, #tap.tapped {
  box-shadow: inset 0 0 0 2px currentColor;
  transition: none;
}
@media (hover: hover) and (pointer: fine) {
  #play:hover, #tap:hover { box-shadow: inset 0 0 0 1px currentColor; }
  #play:active, #tap:active, #tap.tapped { box-shadow: inset 0 0 0 2px currentColor; }
}
/* Keep actions beside the tempo on phones, including landscape and installed
   mode. A fixed dock nested in a skin's isolated/clipped panel is fragile in
   mobile WebKit; normal flow avoids compositing and viewport dependencies. */
@media (max-width: 619px), (hover: none) and (pointer: coarse) {
  html body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  html .transport, html[data-skin] .transport {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: 490px;
    margin: 12px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    z-index: auto;
  }
}