/* The one round button (row 762): 44 px, the raised fill with no ring (v5 2.4, row 2093r: only a field has a border), the icon alone. The word stays for a screen reader: it is clipped, never display:none, so Play and Pause read as they change. */
.part-round:not([data-reach="phone"]) { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--raised); color: var(--fg); }
.part-round:not([data-reach="phone"]) .word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 899px) {
  .part-round[data-reach="phone"] { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0;
    border: 0; border-radius: 50%; background: var(--raised); color: var(--fg); }
  .part-round[data-reach="phone"] .word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* row 1889: at a desk the round is the kit's 32 px (--control-h), as tall as its buttons; a phone keeps 44 */
@media (min-width: 900px) {
  .part-round:not([data-reach="phone"], [data-size="small"]) { width: var(--control-h); height: var(--control-h); min-height: var(--control-h); }
}
.part-round { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.part-round:active:not(:disabled) { background: var(--control); }   /* held pressed, its ground one step lighter, as the button's */
/* small: a row of a list, with a mouse on a desk. A finger and a phone keep the 44 px above */
@media (min-width: 900px) and (pointer: fine) {
  .part-round[data-size="small"]:not([data-reach="phone"]) { width: 24px; height: 24px; min-height: 24px; border: 0; background: none; }
  .part-round[data-size="small"]:not([data-reach="phone"]):active:not(:disabled) { background: var(--control); }   /* no ground at rest, so a held press brings the full size's (K6); the rest above would otherwise take it away */
  .part-round[data-size="small"] svg { width: 14px; height: 14px; }
}
