/* 🎹 Piano controls (js/midimap.js): the mapping screen, and the settings row
   that opens it. Its own file — the standing rule since the 2026-09-02 split
   is that a new feature's CSS never goes into style.css. */

/* ---- the Settings → Your keyboard row ---- */
.mm-setrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-count { margin-left: 6px; opacity: .75; font-variant-numeric: tabular-nums; }

/* ---- the screen ---- */
.mm-panel { max-width: 880px; text-align: left; }
/* the floating ← Back is a zero-height sticky bar laid OVER the title (see
   .back-bar in style.css), and this panel's title is left-aligned, so it needs
   the excalibur panel's clearance or the two sit on top of each other */
.mm-panel .title.small { margin-top: 42px; }
.mm-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; opacity: .85; }
.mm-lead b { color: #ffd479; }

.mm-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: rgba(255, 255, 255, .045); border-radius: 10px;
}
.mm-spacer { flex: 1 1 auto; }
.mm-state { font-size: 13px; opacity: .8; }

.mm-note {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  line-height: 1.45; border-left: 3px solid #7a7a7a; background: rgba(255, 255, 255, .06);
}
.mm-note.ok   { border-left-color: #57c98a; background: rgba(87, 201, 138, .12); }
.mm-note.warn { border-left-color: #e0a63c; background: rgba(224, 166, 60, .12); }
.mm-note.live { border-left-color: #6cb6ff; background: rgba(108, 182, 255, .13); }

.mm-h {
  margin: 18px 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  opacity: .6; font-weight: 700;
}
.mm-h:first-child { margin-top: 4px; }

.mm-list { max-height: min(58vh, 560px); overflow-y: auto; padding-right: 4px; }

.mm-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 9px;
  border: 1px solid transparent;
}
.mm-row + .mm-row { margin-top: 2px; }
.mm-row:nth-child(even) { background: rgba(255, 255, 255, .028); }
.mm-row.on { background: rgba(108, 182, 255, .075); }
.mm-row.listening { border-color: #6cb6ff; background: rgba(108, 182, 255, .16); }

.mm-lab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-lab b { font-size: 14.5px; }
.mm-lab i { font-style: normal; font-size: 12.5px; opacity: .62; line-height: 1.4; }

.mm-keys { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.mm-keys i { font-style: normal; opacity: .45; font-size: 11px; }
.mm-keys.none { font-size: 12.5px; opacity: .38; font-style: italic; }
.mm-keys kbd {
  font: 600 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 5px 8px; border-radius: 6px; white-space: nowrap;
  background: #f3efe6; color: #23201b; box-shadow: 0 1.5px 0 rgba(0, 0, 0, .45);
}
.mm-btns { display: flex; gap: 6px; }
.mm-set { min-width: 68px; }

@media (max-width: 700px) {
  .mm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mm-keys { grid-column: 1 / -1; justify-content: flex-start; }
  .mm-lab i { display: none; }
}

/* a key pressed while the screen is open lights its row instead of firing it */
.mm-row.flash { background: rgba(87, 201, 138, .2); border-color: #57c98a; }