/*
 * Transposer and Capo (/tools/transpose/). Loaded after site.css; uses its tokens only.
 * Mobile first: chart, controls, result in one column. From 1100 px the controls run across the top
 * and the chart and result sit side by side; the capo and instrument panels go side by side from 1280 px.
 */
.tr-stage { text-align: left; padding: var(--s-4); display: block; }
@media (min-width: 640px) { .tr-stage { padding: var(--s-5) var(--s-6) var(--s-6); } }
.tr-h2 { margin: 0 0 var(--s-3); font-size: var(--step-2); }
.tr-h3 { margin: 0; font-size: var(--step-1); }
.tr-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "controls" "out"; }
.tr-in { grid-area: in; min-width: 0; }
.tr-controls { grid-area: controls; min-width: 0; }
.tr-out { grid-area: out; min-width: 0; }
@media (min-width: 1100px) {
  .tr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "controls controls" "in out"; }
}
.tr-in > label { display: block; }
.tr-in .hint { margin: 2px 0 var(--s-2); }
.tr-in textarea {
  display: block; width: 100%; min-height: 18rem; resize: vertical; font-family: var(--font-mono); font-size: .9375rem; line-height: 1.5;
  white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 4;
}
.tr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.tr-row .button, .tr-row button { margin-bottom: 4px; }

/* controls */
.tr-controls { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .tr-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tr-controls { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); } }
.tr-controls select { width: 100%; }
.tr-controls .field .hint { margin: 0; }
.tr-move-label { font-weight: 600; }
.tr-stepper { display: inline-flex; align-items: center; gap: var(--s-3); }
.tr-stepper .round-btn { width: 48px; height: 48px; font-size: 1.5rem; }
.tr-semis { min-width: 3ch; text-align: center; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 750; }
.tr-spell { margin: 0; }
.tr-spell legend { margin-bottom: 6px; }
.tr-spell .chip span { min-width: 0; padding: 8px 12px; }

/* result */
.tr-out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.tr-view { margin: 0; }
.tr-view .seg span { padding: 8px 12px; }
.tr-summary { margin: var(--s-2) 0; min-height: 1.5em; }
.tr-summary.is-warn { border-left: 4px solid var(--rose); padding-left: var(--s-3); }
.tr-pre {
  margin: 0; padding: var(--s-3); min-height: 18rem; max-height: 70vh; overflow: auto; background: var(--surface-2); color: var(--text);
  border: 2px solid var(--line-strong); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: .9375rem; line-height: 1.5;
  white-space: pre; tab-size: 4;
}
.tr-pre.is-empty { color: var(--muted); font-family: var(--font-body); white-space: normal; }
.tr-chord { background: var(--indigo-soft); color: var(--text); font-weight: 700; border-radius: 3px; box-shadow: 0 0 0 1px var(--indigo-soft); }
.tr-skip { text-decoration: underline dotted var(--rose); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tr-label { color: var(--muted); font-weight: 650; }
.tr-legend { margin: var(--s-2) 0 0; }
.tr-legend .tr-chord, .tr-legend .tr-skip { padding: 0 2px; }
.tr-copy-status { margin: 0; flex: 1 1 12rem; }

/* capo and instruments */
.tr-more { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); margin-top: var(--s-5); align-items: start; }
@media (min-width: 1280px) { .tr-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tr-panel { min-width: 0; }
.tr-panel > p { max-width: 46em; }
.tr-capo-controls, .tr-inst-controls { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: flex-end; margin-bottom: var(--s-3); }
.tr-capo-controls .chips span, .tr-inst-controls .chips span { min-width: 0; padding: 8px 12px; }
.tr-capo-fret select { min-width: 9rem; }
.tr-capo-chords { margin-bottom: var(--s-3); }
.tr-capo-chords .tr-row { margin-top: 0; }
.tr-capo-chords input { flex: 1 1 14rem; min-width: 0; font-family: var(--font-mono); }
.tr-note-pick { margin-top: 0; flex-wrap: nowrap; }
.tr-note-pick select { min-width: 5.5rem; }
.tr-table-wrap { overflow-x: auto; }
.tr-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tr-table th, .tr-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.tr-table thead th { font-size: var(--step--1); color: var(--muted); font-weight: 650; }
.tr-table tbody th { font-weight: 650; }
.tr-table.no-fingering th:nth-child(3), .tr-table.no-fingering td:nth-child(3) { display: none; }
.tr-strong { font-weight: 700; }
.tr-frets { font-family: var(--font-mono); font-size: .9375rem; white-space: nowrap; }
.tr-frets.is-none { font-family: var(--font-body); font-size: var(--step--1); color: var(--muted); white-space: normal; }
.tr-inst-sounds { display: block; font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.tr-nowrap { white-space: nowrap; }
.tr-suggest { list-style: none; padding: 0; margin: var(--s-2) 0 var(--s-3); display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tr-suggest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-sugg {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 48px; padding: 8px 14px; text-align: left; line-height: 1.25;
  border-radius: var(--r-md); border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); touch-action: manipulation;
}
.tr-sugg:hover { background: var(--surface-2); }
.tr-sugg.is-current { border-color: var(--indigo); background: var(--indigo-soft); }
.tr-sugg-main { font-weight: 700; }
.tr-sugg-sub { font-size: .8125rem; color: var(--muted); }
.tr-sugg.is-current .tr-sugg-sub { color: var(--text); }
#capo-suggest-box .tr-h3 { margin-top: var(--s-4); }
.tr-details summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.tr-shapes { display: block; margin-bottom: var(--s-2); }