/* === Modal Overlay + Harmony Keyboard (scoped to .mpo-modal) === */
/* Comments in English. No global keyboard styles leak outside the modal. */

/* Backdrop */
.mpo-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9990;
}

.mpo-modal-backdrop.is-open {
  display: flex;
}

/* Modal shell */
.mpo-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 95vw;
  /* max-width: 1100px;
  max-height: 95vh; */
  overflow: auto;
  background: #fff;
  color: #111;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  position: relative;
  padding: 32px;
}

.mpo-modal .mpo-close {
  position: absolute;
  top: 4px;
  right: 8px;
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
}

.mpo-modal .mpo-content {
  line-height: 1.5;
}

.mpo-modal .mpo-content h2 {
  color: #111;
}

/* Harmony panel wrapper */
.mpo-modal .harmony-panel {
  margin-top: 4px;
}

/* Controls row (scale, tonic, mode, enharmonics etc.) */
.mpo-modal .harmony-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-bottom: .6rem;
}

.mpo-modal .harmony-controls label {
  font-weight: 600;
}

.mpo-modal .harmony-controls select {
  margin-left: .35rem;
}

/* 7-cell solfege/harmony keyboard row */
.mpo-modal .harmony-keyboard {
  display: grid;
  grid-template-columns: repeat(7, minmax(38px, 1fr));
  gap: 6px;
}

.mpo-modal .hk-key {
  padding: .6rem .4rem;
  border: 1px solid var(--mpo-border, #888);
  border-radius: 6px;
  background: var(--mpo-surface, #f6f6f6);
  cursor: pointer;
  width: 100%;
  justify-content: center;
}

.mpo-modal .hk-key:active {
  transform: translateY(1px);
}

.mpo-modal .hk-active {
  outline: 2px solid var(--mpo-accent, #4aa);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mpo-accent, #4aa) 28%, transparent);
}

/* 12+1 keys in one row so C2 sits at the right end (no wrap). */
.mpo-modal .kc-group {
  display: grid;
  grid-template-columns: repeat(13, 1fr); /* C..B + C2 */
  gap: 6px;
  width: 100%;
}

/* Base button look for BOTH rows (pitch-name row + solfege row). */
.mpo-modal .kc-btn,
.mpo-modal .solfege-wrap button {
  padding: .55rem .3rem;
  border: 1px solid var(--mpo-border, #888);
  border-radius: 8px;
  background: var(--mpo-surface, #f6f6f6);
  cursor: pointer;
  font-weight: 600;
  width: 100%;
  line-height: 1.15;
  text-align: center;

  /* allow 2-line wrap like solfeggio labels */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;          /* enable wrapping */
  overflow-wrap: anywhere;      /* allow breaking at '/' etc. */
  /* Avoid text selection / long-press callout */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Keep fixed height for pitch-name row only */
.mpo-modal .kc-btn { height: 48px; }

.mpo-modal .kc-btn:active,
.mpo-modal .solfege-wrap button:active {
  transform: translateY(1px);
}

.mpo-modal .kc-active {
  background: #1b7f3b;
  color: #fff;
  border-color: #1b7f3b;
}

/* Equal width alignment helper (if you mirror key rows) */
.mpo-modal .equal-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  width: 100%;
}

/* Hide legacy transpose widgets ONLY inside modal, if present */
.mpo-modal .keyboard-controls #kb-minus,
.mpo-modal .keyboard-controls #kb-plus,
.mpo-modal .keyboard-controls .kb-transpose-ind {
  display: none !important;
}

/* Optional: allow the modal to host a "solfege-wrap" for visual parity without leaking global styles */
.mpo-modal .solfege-wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  width: 100%;
}

.mpo-modal .solfege-wrap button {
  padding: .45rem .25rem;
  border: 1px solid var(--mpo-border, #88888881);
  border-radius: 6px;
  background: var(--mpo-surface, #f4d8d8);
      color: #0000004f;
  cursor: pointer;
  /* Height twice the width: width/height = 1/2 */
  aspect-ratio: 1 / 2;
  height: auto;
  
}

/* Harmony keyboard keys: height twice the width */
.mpo-modal .harmony-keyboard .hk-key {
  aspect-ratio: 1 / 2; /* width/height */
  /* Avoid text selection / long-press callout */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure uniform sizing on small screens */
@media (max-width: 545px) {
  /* Let grid control widths; clear any inline width set by JS */
  #kb-host .solfege-wrap button,
  .mpo-modal .solfege-wrap button {
    width: auto !important;
    min-width: 0;
    overflow: hidden; /* keep equal heights with aspect-ratio */
  }
  /* Slightly adapt font-size to avoid overflow */
  .mpo-modal .solfege-wrap button {
    font-size: clamp(10px, 2.6vw, 0.95rem);
  }
}

/* --- ONLY pitch-name row gets black/white theming -------------------------- */
.mpo-modal .kc-group .kc-btn.is-white, .mpo-modal .solfege-wrap button.is-white {
  background: #fff;
  color: #111;
  border-color: #cfcfcf;
}

.mpo-modal .kc-group .kc-btn.is-black, .mpo-modal .solfege-wrap button.is-black {
  background: #2a2f3a;
  color: #fff;
  border-color: #1d2230;
}

/* Optional: slight inset sheen for black keys (purely cosmetic). */
/* .mpo-modal .kc-group .kc-btn.is-black::after {
  content: "";
  position: absolute;
  inset: 4px 18%;
  border-radius: 6px;
  background: #111;
  opacity: .18;
  pointer-events: none;
} */



/* --- Solfege row: 13 cells to align with kc-group and NO black/white theme -- */
.mpo-modal .solfege-wrap {
  display: grid;
  grid-template-columns: repeat(13, 1fr); /* aligns with pitch-name row */
  gap: 6px;
  width: 100%;
}

/* External keyboard host (non-modal) */
#kb-host .solfege-wrap {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 6px;
  width: 100%;
}
#kb-host .solfege-wrap button { aspect-ratio: 1 / 2; }
#kb-host .solfege-wrap button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Hide legacy transpose widgets ONLY inside modal. */
.mpo-modal .keyboard-controls #kb-minus,
.mpo-modal .keyboard-controls #kb-plus,
.mpo-modal .keyboard-controls .kb-transpose-ind {
  display: none !important;
}

.mpo-modal .solfege-wrap button.in-scale {
  /* white key look */
  background: #fff;
  color: #111;
  border-color: #cfcfcf;
  box-shadow: none;            /* remove any previous glow */
  filter: none;                /* kill former green tint if any */
}

.mpo-modal .solfege-wrap button.in-scale[data-chroma="1"],
.mpo-modal .solfege-wrap button.in-scale[data-chroma="3"],
.mpo-modal .solfege-wrap button.in-scale[data-chroma="6"],
.mpo-modal .solfege-wrap button.in-scale[data-chroma="8"],
.mpo-modal .solfege-wrap button.in-scale[data-chroma="10"] {
  background: #2a2f3a;
  color: #fff;
  border-color: #1d2230;
}