/* Layout additions only. Uploads, controls, players and result cards use the
   same shared classes as the other NiceVois tools. */
.harmony-tool { min-width: 0; }
.harmony-tool .panel-heading > div { min-width: 0; }
.harmony-tool .sep-drop:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.harmony-result-section { display: grid; gap: 16px; min-width: 0; margin-top: 8px; }
.harmony-tool[hidden], .harmony-result-section[hidden], .harmony-tool .input-audio-list[hidden],
.harmony-tool .sep-start[hidden] { display: none; }
.harmony-results-heading h3 { margin: 0 0 5px; font-size: 1rem; }
.harmony-results-heading p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.harmony-tool .sep-output-part { min-width: 0; }
.harmony-tool .sep-output-head { flex-wrap: wrap; gap: 4px 12px; padding-block: 4px; }
.harmony-tool .sep-output-head strong { flex: 1 1 90px; min-width: 0; }
.harmony-tool .harmony-mix { --green: #5f83c8; --green-soft: #eef4ff; margin-top: 8px; }
.harmony-mix .sep-output-head { color: #354c83; border-bottom-color: #d1def4; }
.harmony-tool .sep-output-body { min-width: 0; }
.harmony-tool .sep-status:empty { display: none; }

/* Who may start a harmony, and how (public release, 18 Oct 2026). */
.harmony-access { margin: 0; }
.harmony-access[hidden] { display: none; }
.harmony-tool #harmony-history[hidden], .harmony-tool #harmony-subscription-cta[hidden],
.harmony-tool #harmony-allowance-note[hidden], .harmony-tool #harmony-allowance-track[hidden] { display: none; }
.harmony-tool #harmony-history-list > details { min-width: 0; }
.harmony-tool #harmony-history-list .sep-output-parts { padding: 12px; }
.harmony-tool #harmony-allowance-note { display: block; margin-bottom: 14px; }
.harmony-tool #harmony-subscription-cta { margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.harmony-tool #harmony-subscription-cta > div { flex: 1 1 220px; min-width: 0; }
.harmony-tool #harmony-subscription-cta a { min-width: 0; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }
.harmony-access .link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--purple-dark); text-decoration: underline; cursor: pointer; }
.harmony-tool .panel-heading > :first-child { flex: 1; }
.harmony-tool #harmony-eta[hidden] { display: none; }
.harmony-output-voice { min-width: 0; margin-block: 4px 16px; }
.harmony-voice-label { display: block; margin-bottom: 7px; font-size: .8rem; font-weight: 600; }
.harmony-output-voice .vc-combo-panel { position: static; margin-top: 6px; width: 100%; box-sizing: border-box; box-shadow: none; }
.harmony-output-voice .vc-model-search { width: calc(100% - 20px); margin: 10px; box-sizing: border-box; min-height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .82rem; background: #fff; }
.harmony-voice-row { display: flex; align-items: center; padding-inline: 8px; gap: 5px; }
.harmony-voice-row .vc-combo-option { flex: 1; min-width: 0; }
.harmony-voice-row .vc-combo-option:disabled { color: var(--muted); cursor: default; }
.harmony-voice-row .vc-voice-info { flex-shrink: 0; }
.harmony-output-voice .vc-combo-panel[hidden], .harmony-tool #harmony-voice-notice[hidden],
.harmony-tool .harmony-voice-credit[hidden] { display: none; }
.harmony-voice-credit { color: var(--muted); font-size: .76rem; line-height: 1.6; }
@media (max-width: 520px) {
  .harmony-tool #harmony-subscription-cta { flex-direction: column; align-items: stretch; }
  .harmony-tool #harmony-subscription-cta > div { flex: 0 0 auto; width: 100%; }
  .harmony-tool #harmony-subscription-cta a { width: 100%; min-height: 44px; }
  .harmony-tool .panel-heading { flex-wrap: wrap; }
  .harmony-tool .panel-heading > :first-child { flex-basis: 100%; }
}