/* chord chart maker: boxes draw black on white for export; on screen the theme variables take over */
#chord-chart-maker .ccm-main { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; margin-top: 12px; align-items: start; }
@media (max-width: 700px) { #chord-chart-maker .ccm-main { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
#chord-chart-maker .ccm-editor svg { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; touch-action: manipulation; }
#chord-chart-maker .ccm-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#chord-chart-maker .ccm-side .row + .row { margin-top: 0; }
#chord-chart-maker .ccm-display { padding: 12px 16px; }
#chord-chart-maker .ccm-display .mid { font-size: 34px; }
#chord-chart-maker .ccm-wide { display: flex; }
#chord-chart-maker .ccm-wide input { flex: 1; min-width: 0; }
#chord-chart-maker .ccm-num { width: 72px; }
#chord-chart-maker .ccm-lab { margin: 0 0 6px; }
#chord-chart-maker .chips .chip { min-width: 44px; min-height: 44px; justify-content: center; }
#chord-chart-maker .ccm-hidden { margin: 6px 0 0; text-align: center; }
#chord-chart-maker .ccm-svg .ccm-ln, #chord-chart-maker-sheet .ccm-svg .ccm-ln, #chord-chart-maker .ccm-svg .ccm-x, #chord-chart-maker-sheet .ccm-svg .ccm-x, #chord-chart-maker .ccm-svg .ccm-o, #chord-chart-maker-sheet .ccm-svg .ccm-o { stroke: var(--ink); }
#chord-chart-maker .ccm-svg .ccm-dot, #chord-chart-maker-sheet .ccm-svg .ccm-dot, #chord-chart-maker .ccm-svg .ccm-t, #chord-chart-maker-sheet .ccm-svg .ccm-t, #chord-chart-maker .ccm-svg .ccm-base, #chord-chart-maker-sheet .ccm-svg .ccm-base { fill: var(--ink); }
#chord-chart-maker .ccm-svg .ccm-ft, #chord-chart-maker-sheet .ccm-svg .ccm-ft { fill: var(--card); }
#chord-chart-maker .ccm-svg .ccm-sn, #chord-chart-maker-sheet .ccm-svg .ccm-sn { fill: var(--muted); }
#chord-chart-maker .ccm-svg .ccm-hit, #chord-chart-maker-sheet .ccm-svg .ccm-hit { cursor: pointer; }
#chord-chart-maker .ccm-svg .ccm-hit:hover, #chord-chart-maker-sheet .ccm-svg .ccm-hit:hover { fill: var(--strong); fill-opacity: .6; }
#chord-chart-maker-sheet .ccm-h { margin: 0; font-size: 24px; }
#chord-chart-maker-sheet .ccm-h3 { margin: 18px 0 8px; }
#chord-chart-maker-sheet .ccm-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
#chord-chart-maker-sheet .ccm-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
#chord-chart-maker-sheet .ccm-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
#chord-chart-maker-sheet .ccm-pick { display: block; width: 100%; background: none; border: 0; padding: 2px; cursor: pointer; border-radius: 10px; }
#chord-chart-maker-sheet .ccm-pick svg { display: block; width: 100%; height: auto; }
#chord-chart-maker-sheet .ccm-card-tools { display: flex; justify-content: space-between; gap: 2px; }
#chord-chart-maker-sheet .ccm-mini { flex: 1; min-height: 36px; border: 0; border-radius: 9999px; background: var(--strong); color: var(--ink); cursor: pointer; font-size: 16px; }
#chord-chart-maker-sheet .ccm-mini:hover { background: var(--line-strong); }
.chord-chart-maker-printbox { display: none; }
@media print {
  html.chord-chart-maker-print, html.chord-chart-maker-print body { background: #fff; margin: 0; padding: 0; }
  html.chord-chart-maker-print body > *:not(.chord-chart-maker-printbox) { display: none !important; }
  html.chord-chart-maker-print .chord-chart-maker-printbox { display: block; }
  .chord-chart-maker-printbox svg { display: block; width: 100% !important; height: auto !important; }
}
#chord-chart-maker label.field, #chord-chart-maker-sheet label.field { max-width: 100%; min-width: 0; }
#chord-chart-maker select, #chord-chart-maker-sheet select { max-width: 100%; min-width: 0; }
@media (max-width: 480px) { #chord-chart-maker [data-tuning] { max-width: calc(100vw - 120px); } }