/* transposition: scoped under #transposition and #transposition-chart */
#transposition .tr-dir { margin-top: 8px; }
#transposition .chip { min-height: 44px; }
#transposition .tr-grid { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; align-items: flex-end; }
#transposition .tr-f { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
#transposition .tr-f > span { font-size: 13px; color: var(--muted); }
#transposition .tr-f select { min-height: 44px; max-width: 100%; }
#transposition .tr-in { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
#transposition .tr-out { margin-top: 14px; text-align: left; }
#transposition .tr-big { margin: 2px 0; }
#transposition .tr-sig:empty { display: none; }
#transposition .tr-note { margin-top: 8px; color: #e7e5e4; font-size: 15px; line-height: 1.5; }
#transposition .tr-actions { margin-top: 12px; }
#transposition .tr-keys { margin: 10px 0 0; }
#transposition-chart .tr-h { margin: 0 0 4px; font-size: 24px; }
#transposition-chart .tr-cap { margin: 0 0 8px; }
.tr-scroll { overflow-x: auto; }
.tr-table { border-collapse: collapse; width: 100%; font-size: 16px; font-variant-numeric: tabular-nums; }
.tr-table th, .tr-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: center; white-space: nowrap; color: var(--ink); }
.tr-table thead th { vertical-align: bottom; font-size: 15px; }
.tr-table thead th small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); white-space: normal; max-width: 150px; margin: 2px auto 0; line-height: 1.3; }
.tr-table tbody th { font-weight: 600; background: var(--strong); position: sticky; left: 0; }
@media (max-width: 640px) {
  #transposition .tr-grid { gap: 8px 10px; }
  #transposition .tr-grid > .tr-f { flex: 1 1 100%; }
  #transposition .tr-grid > .tr-f select { width: 100%; }
  #transposition .chips .chip { font-size: 13px; padding-left: 12px; padding-right: 12px; }
  #transposition .tr-display .big, #transposition .tr-big { font-size: 48px; }
  .tr-table { font-size: 14px; }
  .tr-table th, .tr-table td { padding: 7px 6px; }
  .tr-table thead th { min-width: 104px; }
  .tr-table thead th small { max-width: 120px; }
}