/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CSS — MODALS
   Overlay, modales accord / annotation / section
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.overlay { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.7); z-index:200; align-items:center; justify-content:center; }
.overlay.active { display:flex; }
.modal-box { background:#16213e; border-radius:10px; padding:22px; max-width:95vw; max-height:92vh; overflow-y:auto; }
#modal { border:2px solid #f0a500; width:480px; }
#modal h3 { color:#f0a500; margin-bottom:14px; }
.modal-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.modal-row label { min-width:100px; font-size:0.85rem; color:#aaa; }
.chord-btn-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:8px 0; }
.chord-btn { padding:5px; background:#2d4a7a; border:1px solid #3d6a9a; color:#eee; border-radius:3px; cursor:pointer; font-size:0.75rem; text-align:center; transition:background 0.15s; }
.chord-btn:hover,.chord-btn.active { background:#f0a500; color:#1a1a2e; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
#annot-modal-box { border:2px solid #a78bfa; width:580px; }
#annot-modal-box h3 { color:#a78bfa; margin-bottom:12px; font-size:1rem; }
.annot-block { background:#12102a; border:1px solid #2d1a5a; border-radius:8px; padding:12px; margin-bottom:10px; }
.annot-block-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.annot-block-title { font-size:0.72rem; color:#a78bfa; text-transform:uppercase; letter-spacing:1px; font-weight:bold; }
.toggle-btn { padding:4px 12px; border-radius:20px; border:1px solid #3d2a6a; background:#1a1a2e; color:#aaa; cursor:pointer; font-size:0.75rem; transition:all 0.15s; user-select:none; }
.toggle-btn.on { background:#2d1a5a; border-color:#a78bfa; color:#c4b5fd; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mode-card { background:#1e2a4a; border:1px solid #2d4a7a; border-radius:6px; padding:8px 10px; cursor:pointer; transition:all 0.15s; }
.mode-card:hover { border-color:#a78bfa; }
.mode-card.selected { border-color:#a78bfa; background:#2a1a5a; }
.mode-name { font-weight:bold; color:#c4b5fd; font-size:0.82rem; }
.mode-notes { font-size:0.7rem; color:#7dd3fc; font-family:'Courier New',monospace; margin-top:2px; }
.mode-desc { font-size:0.68rem; color:#666; margin-top:1px; font-style:italic; }
.mode-selected-badge { font-size:0.62rem; color:#a78bfa; background:#1a1a2e; border-radius:10px; padding:1px 6px; border:1px solid #a78bfa; }
.arp-root-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.arp-pill { background:#1e3a5f; border:1px solid #3d6aaa; border-radius:10px; padding:3px 10px; font-size:0.8rem; color:#eee; }
.arp-pill.root { background:#f0a500; color:#1a1a2e; font-weight:bold; border-color:#f0a500; }
.inv-list { display:flex; flex-direction:column; gap:5px; }
.inv-card { display:flex; align-items:center; gap:10px; background:#1a2a3a; border:1px solid #2d4a7a; border-radius:6px; padding:6px 10px; cursor:pointer; transition:all 0.15s; }
.inv-card:hover { border-color:#7dd3fc; }
.inv-card.selected { border-color:#7dd3fc; background:#1a2a4a; }
.inv-label { font-size:0.7rem; color:#556; min-width:140px; }
.inv-notes { font-family:'Courier New',monospace; font-size:0.82rem; color:#7dd3fc; }
.inv-intervals { font-size:0.65rem; color:#556; margin-left:auto; }
.inv-selected-badge { font-size:0.62rem; color:#7dd3fc; background:#1a1a2e; border-radius:10px; padding:1px 6px; border:1px solid #7dd3fc; margin-left:auto; }
.tens-pills { display:flex; flex-wrap:wrap; gap:6px; }
.tens-pill { background:#1e3a5f; border:1px solid #3d6aaa; border-radius:10px; padding:3px 10px; font-size:0.8rem; color:#eee; cursor:pointer; transition:all 0.15s; }
.tens-pill.available { border-color:#4aaa6a; color:#86efac; }
.tens-pill.available.selected { background:#1e4a2e; }
.tens-pill.avoid { border-color:#aa4a4a; color:#fca5a5; text-decoration:line-through; cursor:default; }
#annot-text { width:100%; min-height:52px; background:#1e1630; border:1px solid #a78bfa; color:#eee; padding:8px; border-radius:6px; font-size:0.9rem; font-family:Georgia,serif; resize:vertical; }
#annot-color-row { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.color-swatch { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.color-swatch.active { border-color:#fff; }
#annot-style-row { display:flex; gap:10px; align-items:center; margin-top:6px; font-size:0.8rem; color:#aaa; }
#annot-style-row label { display:flex; align-items:center; gap:4px; cursor:pointer; }
#print-contrast-bar { display:none; position:fixed; bottom:0;left:0;right:0; z-index:150; background:#16213e; border-top:2px solid #f0a500; padding:8px 20px; align-items:center; gap:16px; flex-wrap:wrap; }
#print-contrast-bar span { font-size:0.82rem; color:#aaa; }
#contrast-slider { width:160px; accent-color:#f0a500; }
#contrast-preview { font-size:0.75rem; color:#f0a500; }

/* Mode diagram displayed under measure */
.mode-diagram-wrap { 
  padding:6px 4px 2px; 
  background:#0d1e35;
  border-radius:4px;
  margin:4px 0 2px;
}
.mode-diagram-wrap svg { 
  width:100%; 
  height:auto; 
  display:block;
  filter: invert(0);
}
.mode-diagram-wrap svg text { 
  fill: #eee !important; 
}
.mode-diagram-wrap svg line { 
  stroke: #aaa !important; 
}
.mode-diagram-label { display:none; }
@media print {
  .mode-diagram-wrap { background: #f8f8f8; border-top: 1px solid #ccc; }
}