/* capo: scoped under #capo and #capo-chart */
#capo .capo-in { margin-top: 14px; }
#capo .capo-in input { flex: 1 1 220px; min-width: 0; min-height: 44px; font-size: 17px; }
#capo .capo-frets { margin-top: 10px; }
#capo .capo-frets .chip { min-width: 40px; min-height: 40px; justify-content: center; font-variant-numeric: tabular-nums; }
#capo .capo-out, #capo .capo-best { margin-top: 14px; text-align: left; }
#capo .capo-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
#capo .capo-pair { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px; border: 1px solid #44403c; border-radius: 14px; }
#capo .capo-from { font-size: 13px; color: #a8a29e; }
#capo .capo-to { font: 600 24px/1.2 var(--sans); }
#capo .capo-bad { color: #fbbf24; }
#capo .capo-best .mid { margin: 4px 0; }
.capo-scroll { overflow-x: auto; margin-top: 12px; }
.capo-table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
.capo-table th, .capo-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; white-space: nowrap; color: var(--ink); }
.capo-table thead th { color: var(--muted); font-weight: 600; font-size: 13px; }
#capo .capo-table tr.capo-open td { background: var(--strong); }
#capo .capo-table tr.capo-open td:last-child { color: var(--ok); font-weight: 600; }
#capo-chart .capo-h { margin: 0; font-size: 24px; }
#capo-chart .capo-full th[scope="row"] { font-weight: 600; position: sticky; left: 0; background: var(--card); }
#capo-chart .capo-full td, #capo-chart .capo-full th { text-align: center; padding: 8px 6px; }
@media (max-width: 640px) {
  #capo .chips .chip { font-size: 13px; }
  #capo .capo-to { font-size: 20px; }
  #capo [data-step] { display: none; }
}