/* HM Speaker — thick black speaker buttons (HM article buttons keep their own colours) */
.hms-btn{
  all:unset;
  box-sizing:border-box!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:32px!important;height:32px!important;min-width:32px!important;
  margin:0 0 0 8px!important;padding:0!important;
  border:2.5px solid #000!important;border-radius:50%!important;
  background:#fff!important;color:#000!important;
  box-shadow:0 2px 0 #000!important;
  cursor:pointer!important;vertical-align:middle!important;line-height:1!important;
  transition:background .15s,color .15s,transform .1s!important;
  -webkit-tap-highlight-color:transparent;
}
.hms-btn svg{width:18px!important;height:18px!important;display:block!important;fill:none}
.hms-btn:hover,.hms-btn:focus-visible{background:#000!important;color:#fff!important}
.hms-btn:active{transform:translateY(2px)!important;box-shadow:none!important}
.hms-btn.hms-play{background:#000!important;color:#fff!important;animation:hmsPulse .8s infinite!important}
@keyframes hmsPulse{50%{transform:scale(1.12)}}
/* headings get a slightly bigger button */
h2>.hms-btn,h3>.hms-btn{width:34px!important;height:34px!important;min-width:34px!important}

/* table cells: keep the button on the same line */
td>.hms-btn,th>.hms-btn{margin-left:6px!important}

/* floating "listen to selected text" button */
.hms-btn.hms-sel{display:none!important}
.hms-btn.hms-sel.hms-show{display:inline-flex!important}
.hms-btn.hms-sel{position:absolute!important;z-index:99999!important;width:40px!important;height:40px!important;margin:0!important;box-shadow:0 3px 0 #000,0 6px 16px rgba(0,0,0,.25)!important}
.hms-btn.hms-sel svg{width:21px!important;height:21px!important}

.hms-say{white-space:nowrap}
.hms-say>.hms-btn{margin-left:6px!important}
