/* "Hear the real instrument" module on /instruments/<slug> (layouts/_partials/instruments/realsound.html,
   static/js/instrument-sound.js).  Own file so extras.css / custom.css / instruments.css stay untouched.
   Colour tokens come from custom.css (--mtp-*); table and text styles from instruments.css (.mtp-ins-*). */
.mtp-isound { min-width: 0; max-width: 100%; margin-bottom: 44px; }
.mtp-isound .mtp-ins-intro { margin: 0 0 16px; }
.mtp-isound-range { margin-bottom: 8px; }
.mtp-isound-range strong { color: var(--mtp-brass-bright); font-weight: 700; }
.mtp-isound-dim { color: var(--mtp-muted); font-size: 13.5px; }

/* ---- staff ---- */
.mtp-isound-staff { margin: 20px 0 6px; max-width: 100%; }
.mtp-isound-staves { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.mtp-isound-fig {
  margin: 0; padding: 8px 10px 10px; background: var(--mtp-raised); border: 1px solid var(--mtp-line);
  max-width: 100%; min-width: 0;
}
.mtp-isound-svgbox { max-width: 100%; overflow: hidden; }
.mtp-isound-svgbox svg { display: block; max-width: 100%; height: auto; }
.mtp-isound-fig figcaption { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--mtp-paper); }
.mtp-isound-fig figcaption strong { color: var(--mtp-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.mtp-isound-fig figcaption span { color: var(--mtp-muted); font-size: 12.5px; }
.mtp-isound-staffnote { margin: 8px 0 0; }

/* ---- controls ---- */
.mtp-isound-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 10px; }
.mtp-isound-btn {
  background: var(--mtp-brass); color: #1a1208; border: 1px solid var(--mtp-brass-bright); border-radius: 2px;
  padding: 10px 20px; min-height: 44px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.mtp-isound-btn:hover:not(:disabled), .mtp-isound-btn:focus-visible { background: var(--mtp-brass-bright); }
.mtp-isound-btn:disabled { opacity: .5; cursor: default; }
.mtp-isound-btn[hidden] { display: none; }
.mtp-isound-btn-quiet { background: transparent; color: var(--mtp-brass-bright); }
.mtp-isound-btn-quiet:hover:not(:disabled), .mtp-isound-btn-quiet:focus-visible { background: rgba(196, 154, 73, .18); color: var(--mtp-paper); }
.mtp-isound-status { color: var(--mtp-muted); font-size: 14.5px; line-height: 1.4; min-height: 1.4em; flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }

/* ---- keyboard: scrolls inside its own box, never widens the page ---- */
.mtp-isound-kbd {
  max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 0 8px; -webkit-overflow-scrolling: touch;
  border-top: 3px solid var(--mtp-brass); background: #0c0817; scrollbar-color: var(--mtp-brass) var(--mtp-raised);
}
.mtp-isound-kbd:empty { display: none; }
.mtp-isound-svg { display: block; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.mtp-isound-svg .k { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.mtp-isound-svg .k-w rect { fill: var(--mtp-paper); stroke: #7a6a45; stroke-width: 1; }
.mtp-isound-svg .k-b rect { fill: #17101f; stroke: #0a0610; stroke-width: 1; }
.mtp-isound-svg .k-w:hover rect { fill: #fff3cf; }
.mtp-isound-svg .k-b:hover rect { fill: #3a2c4d; }
.mtp-isound-svg .k text { fill: #5c4a22; font: 600 10px "Source Sans 3", sans-serif; pointer-events: none; }
.mtp-isound-svg .k-on rect, .mtp-isound-svg .k-on:hover rect { fill: var(--mtp-brass-bright); stroke: var(--mtp-copper); }
.mtp-isound-svg .k-b.k-on rect, .mtp-isound-svg .k-b.k-on:hover rect { fill: var(--mtp-copper); stroke: var(--mtp-brass-bright); }
.mtp-isound-svg .k:focus-visible rect { stroke: var(--mtp-copper); stroke-width: 3; }
.mtp-isound-svg .k-off { cursor: not-allowed; }
.mtp-isound-svg .k-w.k-off rect { fill: #2a2433; stroke: #3b3347; }
.mtp-isound-svg .k-b.k-off rect { fill: #120d19; stroke: #1e1727; }
.mtp-isound-svg .k-off text { fill: #5b5268; }

.mtp-isound-nojs { margin-top: 12px; }
.mtp-isound-credit { margin: 12px 0 0; }
.mtp-isound-credit a { color: var(--mtp-brass-bright); }

@media screen and (max-width: 560px) {
  .mtp-isound-btn { width: 100%; }
  .mtp-isound-staves { gap: 10px; }
  .mtp-isound-fig { padding: 6px 6px 8px; }
}
@media print {
  .mtp-isound-kbd, .mtp-isound-bar { display: none; }
}