/* ══════════════════════════════════════════════════════════════════════════
   CHAIN MUSIC (Spark Lab marble-run music tool) — js/canvas/play-chain.js
   Scoped exactly like canvas.css so nothing here can leak out of the Creative
   Canvas family of windows. The panel deliberately reuses canvas.css classes
   (.cc-ppanel/.cc-phead/.cc-magicgrid/.cc-magicbtn/.cc-pcheck/.cc-xhint) so it
   inherits the Spark Lab dark theme for free; only the bits that don't exist
   yet live here.
   ══════════════════════════════════════════════════════════════════════════ */

/* the object overlay: pieces + marbles paint here, never on the picture
   (until STAMP INTO PICTURE bakes them). pointer-events:none — every pointer
   event must reach the engine stage underneath. */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-fx {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
}

/* ── floating transport bar (lives inside .cc-stage, over the picture) ───── */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-transport {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 29;                     /* under the tool pill (31) + action pill (30) */
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: #17161d; border: 1px solid #2c2b38; color: #d8d6e6;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  font: 800 10px 'JetBrains Mono', monospace; letter-spacing: .06em;
  max-width: calc(100% - 28px); pointer-events: auto;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-transport[hidden] { display: none; }

:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-run {
  display: flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 16px 8px 12px; border: none; border-radius: 999px; cursor: pointer;
  background: #C6F542; color: #0a0a0a;
  font: 900 12px 'JetBrains Mono', monospace; letter-spacing: .1em;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-run svg { width: 16px; height: 16px; display: block; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-run .chn-runico { display: flex; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-run:hover { filter: brightness(1.08); }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-run.chn-on { background: #FF2E7E; color: #fff; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-say {
  color: #9b98ad; font-weight: 700; letter-spacing: .04em; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-count {
  flex: none; color: #16E0E0; background: #0f0e14; border-radius: 999px;
  padding: 4px 9px; font: 800 10px 'JetBrains Mono', monospace;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-count[hidden] { display: none; }

/* the whole bar must stay usable in a small OS window: drop the prose first,
   then the counter, before anything overlaps the corner pills. */
[data-app="canvas"] .cc-spark.cc-narrow .chn-transport { gap: 8px; }
[data-app="canvas"] .cc-spark.cc-narrow .chn-say { display: none; }
[data-app="canvas"] .cc-spark.cc-tiny .chn-transport { top: auto; bottom: 8px; left: 8px; transform: none; padding: 4px 8px 4px 4px; }
[data-app="canvas"] .cc-spark.cc-tiny .chn-count { display: none; }
[data-app="canvas"] .cc-spark.cc-tiny .chn-run { padding: 6px 11px 6px 9px; font-size: 10px; }

/* ── panel ──────────────────────────────────────────────────────────────── */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-steps {
  margin: 0 0 12px; padding-left: 18px;
  font: 700 9px/1.5 'JetBrains Mono', monospace; color: #9b98ad;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-steps b { color: #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-grid { margin-bottom: 12px; }

/* colour-code the SOUND tiles by timbre so shape colour on the canvas and tile
   colour in the panel are the same language (works for non-hearing students). */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-tile[data-id="marimba"] .cc-pico { color: #FFB800; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-tile[data-id="bell"]    .cc-pico { color: #16E0E0; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-tile[data-id="pluck"]   .cc-pico { color: #C6F542; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-tile[data-id="drum"]    .cc-pico { color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-tile.cc-on .cc-pico { color: inherit; }

:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-sel {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 7px 9px; border-radius: 10px; background: #1f1e28; border: 1.5px solid #C6F542;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-sel[hidden] { display: none; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-selname {
  flex: 1; font: 800 9px 'JetBrains Mono', monospace; letter-spacing: .06em; color: #C6F542;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-btn {
  background: #1f1e28; color: #c3c1d2; border: 2px solid #2c2b38; border-radius: 10px;
  font: 800 9px 'JetBrains Mono', monospace; letter-spacing: .06em; padding: 8px 6px; cursor: pointer;
}
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-btn:hover { border-color: #C6F542; color: #fff; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-sel .chn-btn { flex: none; padding: 6px 10px; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-danger:hover { border-color: #FF2E7E; }
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-reduced { margin-top: 10px; color: #b7b4c8; }

/* focus rings: the Spark Lab rule only covers the shell's own buttons, so the
   tool's controls declare their own (never rely on a shell selector). */
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-run:focus-visible,
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-btn:focus-visible,
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-tile:focus-visible,
:is([data-app="canvas"],[data-app="coloring"],[data-app="cbn"]) .chn-panel input:focus-visible {
  outline: 3px solid #16E0E0; outline-offset: 2px;
}

/* Light shell (the Coloring / By Number mini-apps reuse .cc-play with .cc-mini,
   and canvas.css keeps those white) — mirror that here so the tool would still
   be legible if it were ever mounted in one. */
:is([data-app="coloring"],[data-app="cbn"]) .cc-mini .chn-transport,
:is([data-app="canvas"]) .cc-play.cc-mini .chn-transport { background: #fff; border-color: #e3e3de; color: #3a3a40; box-shadow: 0 6px 24px rgba(10,10,10,.16); }
:is([data-app="canvas"]) .cc-play.cc-mini .chn-say { color: #6a6a72; }
:is([data-app="canvas"]) .cc-play.cc-mini .chn-count { background: #f0f0ea; color: #0a7f7f; }
:is([data-app="canvas"]) .cc-play.cc-mini .chn-btn { background: #fafaf6; color: #4a4a52; border-color: #e3e3de; }