/* ===== Mapa: escalas, acordes, campo harmônico e transposição ===== */
@media (max-width:520px){.mp .card{padding:16px}}

/* controles */
.mp-roots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;max-width:780px}
@media (max-width:700px){.mp-roots{grid-template-columns:repeat(6,minmax(0,1fr))}}
.mp-root{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:8px 2px;font-weight:600;font-size:14px;color:var(--ink-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-root.bk{background:var(--surface-2)}
.mp-root:hover{border-color:var(--ink-2);color:var(--ink)}
.mp-root[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mp-ctl{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:end}
.mp-ctl label.f.mp-wide,.mp label.f.mp-wide{flex:1 1 220px;max-width:380px}
.mp-cifra{align-items:end;flex-wrap:nowrap;max-width:560px}
.mp-cifra input{font-size:16px}
.mp-title{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,4vw,34px);text-transform:uppercase;letter-spacing:.01em;line-height:1}
.mp-desc{max-width:72ch}

/* teclados */
.mp-kb{display:grid;gap:6px;min-width:0}
.mp-kbnav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mp .kbwrap{--kbh:150px}
.mp .kbwrap.mp-sm{--kbh:78px;padding-bottom:0}
@media (max-width:600px){.mp .kbwrap{--kbh:132px}.mp .kbwrap.mp-sm{--kbh:72px}}
.mp .kb .k.b em{font-size:9.5px;line-height:1.05;white-space:pre-line;text-align:center;letter-spacing:-.05em;min-height:0}
.mp .kbwrap.mp-sm .kb .k em{font-size:11px;min-height:12px;margin-bottom:3px}
.mp .kb .k.mp-now.w{background:#6A3FD0}
.mp .kb .k.mp-now.w em,.mp .kb .k.mp-now.w .lb{color:#fff}
.mp .kb .k.mp-now.b{background:#3B1E8C;box-shadow:inset 0 0 0 2px #C4B2FD}
.mp .legend .sw.mp-sw-root{background:#B9A2F2}
.mp .legend .sw.mp-sw-on{background:#E4DAFB}
.mp .legend .sw.mp-sw-now{background:#6A3FD0}
.mp .legend .sw.mp-sw-hint{background:#FBFBFD;box-shadow:inset 0 0 0 2px var(--rh)}
.mp .legend .sw.mp-sw-ok{background:#BDEBC9}
.mp .legend .sw.mp-sw-rh{background:color-mix(in srgb,var(--rh) 45%,#fff)}
.mp .legend .sw.mp-sw-lh{background:color-mix(in srgb,var(--lh) 45%,#fff)}

/* notas e dedilhado */
.mp-notes{display:flex;flex-wrap:wrap;gap:8px}
.mp-note{display:grid;justify-items:center;align-content:start;gap:1px;min-width:56px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.mp-note b{font-size:18px;line-height:1.2}
.mp-note span{font:600 12px var(--f-mono);color:var(--accent-strong)}
.mp-note small{font-size:11px;color:var(--muted);text-align:center;line-height:1.2;max-width:88px}
.mp-note.root{border-color:var(--accent);background:var(--accent-soft)}
.mp-note.bass{border-style:dashed}
.mp-fing{display:grid;gap:6px}
.mp-fnums{display:flex;flex-wrap:wrap;gap:4px}
.mp-fnums span{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;background:var(--surface-2);font:600 14px var(--f-mono);color:var(--ink)}
.mp-fnums span.r{background:var(--accent-soft);color:var(--accent-strong)}
.mp-fingtab td{vertical-align:middle}
.mp-fingtab td.mono{font-size:15px;letter-spacing:.08em;white-space:nowrap}

/* acordes */
.mp-chname{font-family:var(--f-display);font-weight:800;font-size:clamp(46px,7vw,66px);line-height:.9;letter-spacing:.01em;overflow-wrap:anywhere}
.mp-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mp-vc{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:8px;align-content:start;background:var(--surface);min-width:0}
.mp-vc>b{font-size:14px}
.mp-id{border-radius:var(--r);background:var(--surface-2);padding:16px 18px;display:grid;gap:6px;min-height:132px;align-content:start}
.mp-idbig{font-family:var(--f-display);font-weight:800;font-size:clamp(46px,9vw,72px);line-height:.9;overflow-wrap:anywhere}
.mp-id p{color:var(--ink-2);font-size:14px}
.mp-id .mp-alt{font-size:16px;color:var(--ink)}
.mp-past{opacity:.6;display:grid;gap:6px}

/* campo harmônico */
.mp .fn-T{--fn:var(--accent)}.mp .fn-SD{--fn:var(--lh)}.mp .fn-D{--fn:var(--crit)}
.mp-field{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@media (max-width:860px){.mp-field{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mp-deg{display:grid;gap:3px;justify-items:start;align-content:start;text-align:left;border:1px solid var(--line);border-top:4px solid var(--fn,var(--accent));border-radius:var(--r);padding:10px;background:var(--surface);min-width:0;color:var(--ink)}
.mp-deg:hover{border-color:var(--ink-2);border-top-color:var(--fn,var(--accent))}
.mp-deg .rom{font:600 13px var(--f-mono);color:var(--muted)}
.mp-deg b{font-size:19px;line-height:1.15;overflow-wrap:anywhere}
.mp-deg .nts{font-size:12px;color:var(--muted);line-height:1.3}
.mp-deg .fnp{font-size:11px;font-weight:700;color:var(--fn);letter-spacing:.06em}
.mp-deg.now{background:var(--accent-soft);border-color:var(--accent);border-top-color:var(--fn,var(--accent))}
@media (max-width:520px){.mp-deg{padding:8px}.mp-deg b{font-size:16px}}
.mp-fnleg .sw{background:var(--fn);border-color:var(--fn)}
.mp-fnleg b{color:var(--ink)}
.mp-bars{display:flex;flex-wrap:wrap;gap:6px}
.mp-bar{display:grid;gap:1px;min-width:64px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.mp-bar span{font:600 11px var(--f-mono);color:var(--muted)}
.mp-bar b{font-size:16px}
.mp-bar.now{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mp-bar.now span{color:var(--accent-ink);opacity:.85}
.mp-bpm{max-width:340px}
.mp-bpm b{font-variant-numeric:tabular-nums;color:var(--ink);min-width:28px;text-align:right}

/* transpor cifra */
.mp-tr textarea{font-family:var(--f-mono);font-size:13.5px;line-height:1.45;min-height:260px;white-space:pre;overflow-wrap:normal;overflow-x:auto;tab-size:4}
.mp-out{margin:0;font-family:var(--f-mono);font-size:13.5px;line-height:1.45;background:var(--surface-2);border-radius:var(--r);padding:14px;white-space:pre;overflow-x:auto;min-height:260px;color:var(--ink)}
.mp-out b{color:var(--accent-strong);font-weight:700}
.mp-semi{font:700 22px var(--f-mono);min-width:44px;text-align:center}