.harmony-show-view {
  --harmony-show-panel-radius: 0.5rem;
}

.harmony-show-view .card {
  border-radius: var(--harmony-show-panel-radius);
}

.harmony-show-view__actions .btn {
  white-space: nowrap;
}

.harmony-show-view__filter .form-label,
.harmony-show-view__filter .small {
  line-height: 1.2;
}

.harmony-show-view__key-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.harmony-show-view__key-summary br {
  display: none;
}

.harmony-show-view__panel > .card-header {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
}

.harmony-show-view__section-box {
  min-height: 5rem;
}

.harmony-show-view__section-box .fw-semibold,
.harmony-show-view__section-box .small {
  line-height: 1.2;
}

.harmony-show-view__tabs {
  gap: 0.15rem;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

.harmony-show-view__tabs .nav-link {
  padding: 0.35rem 0.65rem;
  white-space: nowrap;
}

.harmony-show-view__tab-content {
  min-height: 18rem;
}

.harmony-show-view .chord-progression-grid .card-body {
  padding: 0.35rem !important;
}

.harmony-show-view .chord-progression-grid canvas {
  max-width: 40rem;
  margin-inline: auto;
}

.harmony-show-view .fullscreen-panel-action {
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.45rem;
  --bs-btn-font-size: 0.75rem;
}

.harmony-show-view .sandbox-graphical-harmony {
  border-radius: var(--harmony-show-panel-radius);
}

.harmony-show-view .sandbox-graphical-harmony__toolbar {
  gap: 0.35rem;
  padding: 0.4rem 0.45rem 0.2rem;
}

.harmony-show-view .sandbox-graphical-harmony__toolbar label {
  min-width: min(9rem, 100%);
}

.harmony-show-view .sandbox-harmony-board {
  --sh-canvas-height: 160px;
  grid-template-columns: minmax(5.75rem, 7.5rem) minmax(0, 1fr);
}

.harmony-show-view .sandbox-harmony-gutter__cell {
  padding-inline: 0.45rem;
}

.harmony-show-view .sandbox-harmony-gutter__label {
  font-size: 0.72rem;
}

@media (max-width: 767.98px) {
  .harmony-show-view {
    padding-inline: 0.5rem;
  }

  .harmony-show-view__actions {
    width: 100%;
  }

  .harmony-show-view__actions .btn,
  .harmony-show-view__actions form {
    flex: 1 1 auto;
  }

  .harmony-show-view__actions .btn {
    justify-content: center;
  }

  .harmony-show-view__tabs .nav-link {
    padding-inline: 0.5rem;
  }

  .harmony-show-view .sandbox-harmony-board {
    --sh-canvas-height: 140px;
    grid-template-columns: minmax(4.75rem, 5.75rem) minmax(0, 1fr);
  }

  .harmony-show-view .sandbox-graphical-harmony__toolbar {
    align-items: stretch;
  }
}