.triad-app h1 { margin-bottom: 8px; }
.triad-app .intro { max-width: 900px; margin: 0 auto 16px; text-align: center; color: #333; }
.triad-app .guitar-grid { --board-height: 210px; }
.triad-app .note-marker { pointer-events: none; }
.triad-app .note-marker.triad-tone { background: #777; }
.triad-app .note-marker.root { background: #171717; }
.triad-app .note-marker.sounding {
  background: #236ca5;
  border-color: #123d60;
  color: #fff;
  box-shadow: 0 0 0 3px #aacfe9;
  z-index: 4;
}
.triad-app .note-marker.sounding.current-root { background: #174d76; border-color: #0e314b; }
.triad-app .sounding { animation: triad-note-blink .35s ease-in-out infinite; }
@keyframes triad-note-blink {
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .triad-app .sounding { animation: none; }
}
.triad-app .fret-number.current-fret { color: #145783; text-decoration: underline; }
.triad-app .controls { margin-top: 14px; }
.triad-app #root-select { min-width: 95px; }
.triad-app #quality-select { min-width: 145px; }
.triad-app #group-select { min-width: 130px; }
.triad-app #frets-select { min-width: 72px; }
.progression-panel { margin-top: 18px; padding: 14px; border: 1px solid #222; background: #eee; box-shadow: 2px 2px #777; }
.progression-panel h2 { margin: 0 0 6px; font-size: 16px; }
.progression-panel p { margin-top: 0; }
.progression-boxes { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 12px; align-items: stretch; }
.progression-box { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0; padding: 8px 12px 12px;
  border: 1px solid #222; background: #f8f8f8; box-shadow: 2px 2px #999; min-width: 0; }
.progression-box legend { padding: 1px 7px; border: 1px solid #222; background: #fff; font-weight: bold; font-size: 13px; }
#popular-box { flex: 1 1 100%; }
#numeral-box, #saved-box { flex: 1 1 340px; align-content: center; }
.saved-new { display: flex; flex-wrap: nowrap; flex: 0 1 auto; gap: 8px 12px; align-items: center; padding-left: 12px; border-left: 1px solid #bbb; }
.progression-list-actions .saved-new > label { white-space: nowrap; display: inline-flex; flex-direction: row; align-items: center; align-self: center; margin: 0; }
.saved-new input[type="text"] { width: min(230px, 100%); }
.progression-list-box { display: block; background: #fff; }
.progression-list-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-start; margin-bottom: 8px; }
.progression-list-actions :disabled { opacity: .5; cursor: not-allowed; }
.key-sets { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.key-set { border: 2px solid #444; background: #f1f4f7; padding: 6px 8px 8px; box-shadow: 2px 2px #aaa; }
.key-set-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: bold; font-size: 13px; }
.key-set-name { margin-right: 6px; padding: 1px 7px; border: 1px solid #222; background: #fff; }
.key-set-head .delete-set { min-height: 25px; padding: 1px 9px; margin-left: auto; }
.key-set-empty { margin: 4px 0; color: #555; }
.progression-panel ol.key-set-chords { display: flex; flex-wrap: wrap; list-style: none; gap: 6px; margin: 0; padding: 0; }
.progression-panel li { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #888; background: #fff; }
.progression-panel li.other-key { border-style: dashed; background: #fff8e8; }
.progression-panel li.current-chord { outline: 2px solid #236ca5; outline-offset: 1px; }
.progression-panel li .chord-numeral { min-width: 2.2em; font-weight: bold; text-align: center; }
.progression-panel li .chord-key-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.progression-panel li select, .key-set-head select { min-height: 25px; padding: 1px 4px; }
.progression-panel li button { min-height: 25px; padding: 1px 7px; }
.progression-panel li .remove-chord { margin-left: 2px; }
.triad-app .piano-keyboard { height: 220px; }
.triad-app .piano-key .key-label { bottom: 42px; }
.triad-app .piano-key.black .key-label { bottom: 30px; color: #fff; font-size: 9px; }
.triad-app .piano-key.current-tone::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 12px;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #777;
  transform: translateX(-50%);
}
.triad-app .piano-key.sounding::after { background: #236ca5; box-shadow: 0 0 0 3px #aacfe9; }
.triad-app .piano-key.black.current-tone::after { width: 28px; height: 28px; bottom: 8px; }
.triad-app .piano-key .played-note-label {
  bottom: 12px; width: 30px; height: 30px; padding: 0; line-height: 30px; text-align: center;
  background: transparent; border-radius: 50%; color: #fff; font-size: 12px; font-weight: bold;
}
.triad-app .piano-key.black .played-note-label { bottom: 8px; width: 28px; height: 28px; line-height: 28px; font-size: 12px; font-weight: bold; }
/* Second keyboard: notes played on the MIDI controller. Green = in the chord being practised, red = outside it. */
.triad-app .player-piano { margin-top: 10px; }
.triad-app .player-piano[hidden] { display: none; }
.triad-app .player-caption { margin: 0 0 4px; font-size: 13px; }
.triad-app .player-keyboard { height: 160px; }
.triad-app .player-keyboard .piano-key.held::after { background: #2e7d32; }
.triad-app .player-keyboard .piano-key.held.outside::after { background: #b3261e; }
.triad-app .player-keyboard .piano-key .played-note-label { z-index: 4; }
#midi-connect.connected { background: #171717; color: #fff; }
/* Practice results after a MIDI practice run. */
.practice-report { margin: 14px 0; padding: 12px 14px; border: 2px solid #222; border-radius: 6px; background: #fff; }
.practice-report[hidden] { display: none; }
.practice-report .report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.practice-report h2 { margin: 0; font-size: 20px; }
.practice-report .report-actions { display: flex; gap: 8px; }
.practice-report .danger { border-color: #8a1515; color: #8a1515; }
.practice-report #report-subtitle { margin: 4px 0 10px; }
.practice-report .report-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.practice-report .stat { padding: 8px; border: 1px solid #bbb; border-radius: 4px; background: #f7f5ef; }
.practice-report .stat strong { display: block; font-size: 22px; line-height: 1.1; }
.practice-report .stat span { font-size: 12px; color: #444; }
.practice-report .stat.good strong { color: #2e7d32; }
.practice-report .stat.bad strong { color: #b3261e; }
.practice-report .report-feedback { margin: 10px 0 6px; font-weight: bold; }
.practice-report .report-chart { margin: 0; }
.practice-report .report-chart svg { display: block; width: 100%; height: auto; font-family: Arial, Helvetica, sans-serif; }
.practice-report .report-chart .grid { stroke: #ddd; stroke-width: 1; }
.practice-report .report-chart .pass-line { stroke: #888; stroke-dasharray: 4 3; }
.practice-report .report-chart .axis { font-size: 12px; fill: #555; }
.practice-report .report-chart .series { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.practice-report .report-chart .notes { stroke: #171717; fill: #171717; }
.practice-report .report-chart polyline.notes, .practice-report .report-chart polyline.timing { fill: none; }
.practice-report .report-chart .timing { stroke: #e8710a; fill: #e8710a; }
.practice-report .report-legend { margin: 4px 0; font-size: 12px; }
.practice-report .swatch { display: inline-block; width: 18px; height: 3px; margin: 0 4px 3px 10px; vertical-align: middle; background: #171717; }
.practice-report .swatch.timing { background: #e8710a; }
.practice-report table { border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.practice-report th, .practice-report td { padding: 3px 10px 3px 0; text-align: left; border-bottom: 1px solid #ddd; }
/* The circle sits at the far left of the page; the instrument shifts left with it and keeps its right edge. */
.triad-app .instrument-row { display: flex; align-items: center; gap: 10px; }
.triad-app .instrument-row.with-circle { margin-left: min(0px, calc(50% - 50vw + 8px)); }
.triad-app .circle-column { flex: 0 0 200px; width: 200px; display: flex; flex-direction: column; gap: 6px; }
.triad-app .circle-column[hidden] { display: none; }
.triad-app .circle-chord { margin: 0; min-height: 2.5em; display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: bold; font-size: 14px; line-height: 1.2; color: #171717; }
.triad-app .numeral-strip { display: flex; margin: 0; padding: 0; list-style: none; border: 2px solid #222; background: #fff; }
.triad-app .numeral-strip[hidden] { display: none; }
.triad-app .strip-numeral { flex: 1 1 0; min-width: 0; padding: 4px 0; text-align: center; font-size: 11px; font-weight: bold;
  color: #555; border-left: 1px solid #bbb; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.triad-app .strip-numeral:first-child { border-left: 0; }
.triad-app .strip-numeral.current { flex-grow: 1.5; background: #171717; color: #fff; font-size: 14px; }
.triad-app .instrument-stage { flex: 1 1 auto; min-width: 0; }
.triad-app .key-circle { width: 200px; margin: 0; }
.triad-app .key-circle[hidden] { display: none; }
.triad-app .key-circle svg { display: block; width: 100%; height: auto; font-family: Arial, Helvetica, sans-serif; }
/* Black and white like the guitar grid: #222 2px outlines, #777 for the key's chords, #171717 for the sounding chord. */
.triad-app .key-circle path.seg { fill: #fff; stroke: #222; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.triad-app .key-circle path.in-key { fill: #777; }
.triad-app .key-circle path.current { fill: #171717; }
.triad-app .key-circle circle.hub { fill: #fff; stroke: #222; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.triad-app .key-circle text { text-anchor: middle; dominant-baseline: central; fill: #171717; font-weight: bold; pointer-events: none; }
.triad-app .key-circle text.in-key, .triad-app .key-circle text.current { fill: #fff; }
.triad-app .key-circle .centre-caption { fill: #555; letter-spacing: 1px; }
.triad-app .key-circle .centre-key, .triad-app .key-circle .centre-chord { fill: #171717; }
.triad-app #status { min-height: 1.5em; }
.triad-app #status.error { color: #8a1515; font-weight: bold; }
@media (max-width: 640px) {
  .triad-app .guitar-grid {
    --board-height: 150px;
    --marker: clamp(7px, calc((100vw - 48px) / var(--visible-frets, 12) * .9), 30px);
  }
  .triad-app .guitar-grid .note-marker { font-size: clamp(5px, calc((100vw - 48px) / var(--visible-frets, 12) * .4), 11px); }
  .triad-app .fret-number { font-size: clamp(6px, calc((100vw - 48px) / var(--visible-frets, 12) * .48), 11px); }
  .progression-panel { padding: 10px; }
  .progression-box > *, .saved-new > * { max-width: 100%; }
  .saved-new { flex-wrap: wrap; margin-left: 0; padding-left: 0; border-left: 0; }
  .triad-app .piano-keyboard { height: 175px; }
  .triad-app .piano-key .key-label { bottom: 30px; font-size: 8px; }
  .triad-app .piano-key.black .key-label { bottom: 22px; font-size: 7px; }
  .triad-app .piano-key.current-tone::after { width: 18px; height: 18px; bottom: 8px; border-width: 1px; }
  .triad-app .piano-key.black.current-tone::after { width: 15px; height: 15px; bottom: 5px; border-width: 1px; }
  .triad-app .piano-key .played-note-label { bottom: 8px; width: 18px; height: 18px; line-height: 18px; font-size: 8px; }
  .triad-app .piano-key.black .played-note-label { bottom: 5px; width: 15px; height: 15px; line-height: 15px; font-size: 8px; }
  .practice-report .report-chart { overflow-x: auto; }
  .practice-report .report-chart svg { min-width: 600px; }
  .triad-app .player-keyboard { height: 130px; }
  .triad-app .instrument-row, .triad-app .instrument-row.with-circle { flex-direction: column; align-items: stretch; margin-left: 0; }
  .triad-app .circle-column { flex: none; width: 200px; align-self: center; }
  .triad-app .key-circle { width: 170px; align-self: center; }
}