/* Approved transport C. One visual family, independent of the audio engine.
   Listening choices and notation rows keep their descriptive content.
   Quiz answers, mic capture, repeat counts,
   native video controls and BPM editors are not playback toggles. */
:root {
  --playback-size: 44px;
  --playback-icon: 18px;
  --playback-surface: #171717;
  --playback-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5 19 12 8 19Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  --playback-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='1' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  --playback-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14M16 5v14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --playback-repeat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16 3 4 4-4 4M20 7H7a3 3 0 0 0-3 3m4 11-4-4 4-4M4 17h13a3 3 0 0 0 3-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --playback-slow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19a9 9 0 1 1 16 0M12 14 7 9' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Enough specificity to supersede legacy page-local buttons without changing
   their classes, event handlers, translated labels or disabled state. */
#practice-page .tool-card .practice-control-bar .pb-play.pb-play,
#earApp .pb-play.pb-play,
body .pb-play.pb-play {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: auto; min-width: 96px;
  max-width: 100%; height: var(--playback-size); min-height: var(--playback-size);
  padding: 0 16px; margin-block: 0; gap: 9px; border: 1px solid var(--accent);
  border-radius: var(--radius-pill); background: var(--accent); color: #17130b;
  font-size: 0; line-height: 1; box-shadow: none; transform: none;
}
body .pb-play::after {
  content: attr(data-pb-label); font: 500 14px/1.3 var(--font-main);
  white-space: nowrap;
}
/* Ear Training already places the sound description beside the transport.
   Keep that description, without repeating the action now on the button. */
@media (min-width: 601px) {
  #earApp .ear-play-label { font-size: 0; }
  #earApp .ear-play-label small { margin-top: 0; }
}
/* The diagram already supplies the chord context: a named icon is enough. */
body .pb-play.pb-play:is(.cv-play-btn,.chord-play-btn) {
  width: 44px; min-width: 44px; max-width: 44px; padding: 0; gap: 0;
}
body .pb-play:is(.cv-play-btn,.chord-play-btn)::after { display: none; }
body .pb-play.pb-play > * {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip-path: inset(50%) !important; white-space: nowrap !important;
}
.pb-play::before, .pb-choice::before, .pb-row .rhy-play-icon::before {
  content: ''; display: block; width: var(--playback-icon); height: var(--playback-icon);
  flex: 0 0 var(--playback-icon); background: currentColor; mask: var(--playback-play) center / contain no-repeat;
}
[data-pb-state="stop"]::before, .pb-row[data-pb-state="stop"] .rhy-play-icon::before { mask-image: var(--playback-stop); }
[data-pb-state="pause"]::before { mask-image: var(--playback-pause); }
#earApp .pb-play.pb-play:hover:not(:disabled),
body .pb-play.pb-play:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
body :is(.pb-play,.pb-choice,.pb-repeat,.pb-slow,.pb-rate):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
body .pb-play.pb-play:disabled { opacity: 0.4; cursor: not-allowed; }
#practice-page .tool-card .practice-control-bar :is(.pb-repeat,.pb-slow),
#earApp :is(.pb-repeat,.pb-slow),
body .pb-repeat.pb-repeat, body .pb-slow.pb-slow {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex-direction: row; flex: 0 0 auto; gap: 8px; width: auto; min-width: 44px; max-width: none;
  height: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--text-main); font: 500 14px/1 var(--font-main); box-shadow: none;
}
.pb-repeat::before,.pb-slow::before { content: ''; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; mask: var(--playback-repeat) center / contain no-repeat; }
.pb-slow::before { mask-image: var(--playback-slow); }
body :is(.pb-repeat,.pb-slow) > :is(svg,.btn-icon) { display: none; }
body .pb-repeat .fretboard-sequence-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; font-size: 14px; }
body :is(.pb-repeat,.pb-slow) .btn-label { display: inline; }
.song-page .pb-repeat.pb-repeat span { font-size: 14px; font-weight: 500; }
#practice-page .tool-card .practice-control-bar :is(.pb-repeat,.pb-slow) .btn-label {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
}
body .pb-repeat.pb-repeat[aria-pressed="true"],body .pb-slow.pb-slow[aria-pressed="true"] { color: var(--accent); background: rgba(216,168,79,.12); border-color: rgba(216,168,79,.55); }
.pb-repeat[aria-pressed="true"]::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
body :is(.pb-repeat,.pb-slow):disabled { opacity: .4; cursor: not-allowed; }
body .fretboard-sequence-controls, body .pb-transport {
  display: inline-flex; align-items: center; flex-wrap: wrap; width: max-content;
  max-width: 100%; gap: 12px 20px; padding: 0; border: 0;
  border-radius: 0; background: transparent;
}
body .pb-speed-group { display: inline-flex; align-items: center; gap: 12px; }
.pb-speed-label { color: var(--text-muted); font: 400 12px/1.4 var(--font-main); }
body .pb-speeds { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--playback-surface); }
body .pb-rate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 44px; padding: 0 12px; margin: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--text-main); font: 500 14px/1 var(--font-main); cursor: pointer;
}
body .pb-rate[aria-pressed="true"] { color: var(--accent); background: rgba(216,168,79,.12); border-color: rgba(216,168,79,.4); }
body :is(.pb-rate,.pb-repeat,.pb-slow):hover:not(:disabled) { background: rgba(var(--w),.06); }
/* Named alternatives must remain distinguishable (e.g. Play scale/melody).
   They use the same icon and radius but stay neutral to avoid many primaries. */
#practice-page .tool-card .practice-control-bar .pb-choice.pb-choice,
body .pb-choice.pb-choice {
  display: inline-flex; align-items: center; gap: 10px; width: auto; max-width: 100%;
  min-height: 44px; padding: 10px 16px; border: 1px solid rgba(var(--w),.15);
  border-radius: 6px; background: var(--playback-surface); color: var(--text-main);
  font: 500 14px/1.4 var(--font-main); white-space: normal; text-align: left;
}
body .pb-choice[data-pb-state="stop"]::before { mask-image: var(--playback-stop); }
body .pb-choice > :is(.melody-play-icon,.btn-icon,svg) { display: none; }
body .pb-choice.pb-choice[aria-pressed="true"] { border-color: var(--accent); }
/* A clickable notation row is not replaced by an icon-only button. */
body .pb-row .rhy-play-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; background: var(--playback-surface); border: 1px solid rgba(var(--w),.15); border-radius: 6px; color: var(--text-main); }
.pb-row .rhy-play-icon > svg { display: none; }
body .pb-row[data-pb-state="stop"] .rhy-play-icon { color: var(--accent); border-color: var(--accent); }
body :is(.pb-play,.pb-choice,.pb-repeat,.pb-slow)[hidden] { display: none !important; }
@media (max-width: 600px) {
  #practice-page .tool-card .practice-control-bar :is(.pb-play.pb-play,.pb-repeat.pb-repeat),
  #earApp :is(.pb-play.pb-play,.pb-repeat.pb-repeat),
  body .pb-play.pb-play, body .pb-repeat.pb-repeat {
    width: 44px; min-width: 44px; max-width: 44px; height: 44px;
    flex: 0 0 44px; padding: 0; gap: 0; font-size: 0;
    flex-direction: row;
  }
  body .pb-play::after { display: none; }
  body .pb-repeat > *,
  body .pb-speed-label {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip-path: inset(50%) !important;
    margin: -1px !important; padding: 0 !important;
  }
  body .pb-repeat[aria-pressed="true"]::after { position: absolute; right: 4px; top: 4px; }
  body .fretboard-sequence-controls { justify-content: center; gap: 10px; }
  body .fretboard-sequence-controls .pb-speed-group { justify-content: center; }
  body .pb-rate { min-width: 48px; padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.pb-play,.pb-choice,.pb-repeat,.pb-slow) { transition: none; animation: none; }
}