/* Keep the complete fingering guide visible beside the song. */
.practice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 314px;
  gap: 52px;
  align-items: start;
}

.practice-layout .chord-tray {
  position: sticky;
  top: 98px;
  display: block;
  margin-top: 25px;
  padding: 22px;
  background: #ebe6d9;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px #263a2a12;
}

.chord-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.chord-heading .eyebrow { max-width: 90px; }
.practice-layout .chord-tray h2 { font-size: 21px; text-align: right; }
.diagram-help { margin: -5px 0 16px; color: var(--muted); font-size: 11px; line-height: 1.4; }

.practice-layout .diagrams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.practice-layout .diagram { width: auto; min-width: 0; padding: 11px; }
.practice-layout .diagram-head span { font-size: 9px; }
.board-wrap { position: relative; margin-left: 11px; }
.fretboard {
  position: relative;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 11px, #b8b7ae 11px, #b8b7ae 12px);
}
.fret-numbers { position: absolute; top: 0; right: calc(100% + 3px); display: grid; grid-template-rows: repeat(4,12px); color: var(--muted); font-size: 8px; line-height: 12px; }
.fret-numbers i { font-style: normal; }
.practice-layout .string { height: 48px; }
.practice-layout .dot { width: 14px; height: 14px; left: -8px; display: grid; place-items: center; color: white; font: 800 8px/1 system-ui; }
.strum-from { display: block; margin-top: 8px; color: var(--green); font-size: 9px; font-weight: 800; line-height: 1.25; text-transform: uppercase; }

@media (max-width: 960px) {
  .practice-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
  .practice-layout .chord-tray { padding: 15px; }
  .practice-layout .diagrams { gap: 7px; }
}

@media (max-width: 760px) {
  .practice-layout { display: block; }
  .practice-layout .chord-tray { position: static; margin-top: 10px; }
  .practice-layout .diagrams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .practice-layout { display: block; }
  .practice-layout .chord-tray { display: none; }
}