/* ─────────────────────────────────────────────────────────────
   BrightNote · Interactive Chord Diagrams (drop-in)
   Chord symbols in the notation become tappable; a clean modern
   fingering popup opens on demand. Notation stays uncluttered.
   ───────────────────────────────────────────────────────────── */

/* make Verovio chord symbols look tappable */
.harm, g.harm text, .harm text { cursor: pointer; }
.bnc-hot { cursor: pointer; }
.bnc-hot:hover text, g.harm.bnc-hot:hover { fill: #2FA36B !important; }

/* a tiny "tap a chord" hint chip near each chord score */
.bnc-hint{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#2FA36B;
  background:rgba(47,163,107,.10);border:1px solid rgba(47,163,107,.30);border-radius:999px;padding:3px 10px;margin:2px 0 6px}

/* popup */
.bnc-ov{position:fixed;inset:0;z-index:120;background:rgba(15,25,32,.66);display:none;place-items:center;padding:16px}
.bnc-ov.show{display:grid;animation:bncf .18s ease}
@keyframes bncf{from{opacity:0}to{opacity:1}}
.bnc-card{background:#fff;color:#22303a;border-radius:20px;max-width:340px;width:100%;
  padding:18px 18px 16px;box-shadow:0 24px 60px rgba(0,0,0,.35);position:relative;
  font-family:'Baloo 2',ui-rounded,'Nunito',system-ui,'Segoe UI',sans-serif;animation:bncp .22s cubic-bezier(.2,.9,.2,1)}
@keyframes bncp{from{transform:scale(.94) translateY(6px)}to{transform:none}}
.bnc-x{position:absolute;top:10px;right:12px;font-size:20px;line-height:1;color:#9aa7b2;cursor:pointer;font-weight:800}
.bnc-head{display:flex;align-items:baseline;gap:10px}
.bnc-name{font-size:30px;font-weight:900;color:#1F3A5F;letter-spacing:.5px}
.bnc-full{font-size:13px;color:#6b7681;font-weight:700}
.bnc-badges{display:flex;gap:6px;margin:6px 0 2px;flex-wrap:wrap}
.bnc-badge{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 9px}
.bnc-badge.new{background:#e9f8ef;color:#1c8a4e;border:1px solid #b9e6cd}
.bnc-badge.review{background:#eef1f6;color:#5a6a7a;border:1px solid #dbe2ea}
.bnc-diff{display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:#8a94a0;text-transform:uppercase;letter-spacing:.05em}
.bnc-diff i{width:8px;height:8px;border-radius:50%;background:#dbe2ea;display:inline-block}
.bnc-diff i.on{background:#f0a500}
.bnc-diagram{display:block;margin:8px auto 4px}
.bnc-legend{font-size:11.5px;color:#6b7681;font-weight:700;text-align:center;margin-top:2px}
.bnc-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}
.bnc-btn{font-family:inherit;font-weight:800;font-size:14px;border:none;border-radius:12px;padding:9px 16px;cursor:pointer}
.bnc-btn.play{background:#2FA36B;color:#fff;box-shadow:0 4px 0 #1f7d50}
.bnc-btn.strum{background:#ffd23f;color:#3a2c00;box-shadow:0 4px 0 #c99e17}
.bnc-btn:active{transform:translateY(2px);box-shadow:none}
.bnc-tip{font-size:12px;color:#6b7681;font-weight:600;text-align:center;margin-top:8px}