/* [music15] Make Music (public/music.js): the little ones' keyboard and pads, the beat grid,
   the keyboard, and the player. Colors from the shared tokens; each instrument has its own color. */

.mu-home, .mu-editor, .mu-little { max-width: 820px; width: 100%; margin: 0 auto; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.mu-start { display: grid; gap: var(--space-2); }

/* ---------- little ones ---------- */

.mu-linsts { display: flex; gap: var(--space-3); justify-content: center; }
.mu-linst {
  width: 64px; height: 64px; border-radius: 50%; border: 3px solid transparent; background: var(--surface); box-shadow: var(--shadow-1);
  display: grid; place-items: center; color: var(--ink); cursor: pointer;
}
.mu-linst[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.mu-linst .mu-art { width: 40px; height: 40px; }

.mu-lkeys { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; height: clamp(170px, 34vh, 300px); }
/* [circle11] A phone is too narrow for 8 keys of 44px or more in a row (about 37px on a 375px phone):
   two rows of 4, each key still tall (the low notes on top, the high notes below). */
@media (max-width: 479px) {
  .mu-lkeys { grid-template-columns: repeat(4, minmax(44px, 1fr)); grid-template-rows: repeat(2, minmax(110px, 1fr)); height: clamp(240px, 42vh, 360px); gap: 8px; }
}
.mu-lkey {
  position: relative; border: 0; border-radius: 16px 16px 22px 22px; background: var(--key); cursor: pointer; min-width: 0;
  box-shadow: inset 0 -10px 0 rgb(0 0 0 / 0.16), var(--shadow-1); touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform var(--dur-fast) var(--ease-play), filter var(--dur-fast);
}
.mu-lkey:active, .mu-lkey.is-hit { transform: translateY(4px) scale(0.97); }
.mu-lkey-dot {
  position: absolute; left: 50%; bottom: 18px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: rgb(255 255 255 / 0.55);
}
.mu-lkey.is-lit { filter: brightness(1.18); box-shadow: 0 0 0 4px #FFF6D8, 0 0 22px 8px var(--firefly-glow, #FFE08A), inset 0 -10px 0 rgb(0 0 0 / 0.16); animation: mu-glow 0.9s var(--ease-in-out) infinite alternate; }
.mu-lkey.is-lit .mu-lkey-dot { background: #fff; box-shadow: 0 0 10px 4px #FFF6D8; }
@keyframes mu-glow { to { transform: translateY(-4px); } }

.mu-tunes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mu-tune { flex: 1 1 200px; min-height: 56px; }
.mu-tune-name { margin: var(--space-2) 0 0; font: var(--weight-display) var(--text-lg) / 1.2 var(--font-display); text-align: center; }
.mu-tune-name:empty { display: none; }
.mu-stars { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: var(--space-2); }
.mu-star { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-sunken); transition: background var(--dur-fast); }
.mu-star.is-on { background: var(--amber, #F2A93B); box-shadow: 0 0 6px var(--firefly-glow, #FFE08A); }

.mu-pads { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.mu-pad {
  aspect-ratio: 1; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer; padding: 10px;
  display: grid; place-items: center; touch-action: manipulation; transition: transform var(--dur-fast) var(--ease-play);
}
.mu-pad:nth-child(6n+1) { background: #FDE6E1; } .mu-pad:nth-child(6n+2) { background: #FFF1D6; } .mu-pad:nth-child(6n+3) { background: #E3F3E7; }
.mu-pad:nth-child(6n+4) { background: #E0EEF8; } .mu-pad:nth-child(6n+5) { background: #ECE6F7; } .mu-pad:nth-child(6n+6) { background: #DFF3F1; }
.mu-pad.is-hit { animation: mu-bounce 0.35s var(--ease-play); }
.mu-pad .mu-art { width: 100%; height: 100%; }
@keyframes mu-bounce { 40% { transform: scale(0.9); } 70% { transform: scale(1.06); } }
.mu-lsongs { display: grid; gap: var(--space-2); }
.mu-lsong {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; font: var(--weight-display) var(--text-lg) / 1.2 var(--font-display); min-height: 72px;
}
.mu-lsong > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mu-lsong-play { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }

/* ---------- the editor ---------- */

.mu-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mu-title { flex: 1 1 220px; min-width: 0; font: var(--weight-display) var(--text-xl) / 1.2 var(--font-display); }
.mu-status { color: var(--ink-muted); font-size: var(--text-sm); }
.mu-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mu-bar .ui-stepper output { min-width: 7.5em; text-align: center; }
.mu-rec[aria-pressed="true"] { background: var(--danger); color: #fff; border-color: var(--danger); }
.mu-rec[aria-pressed="true"] svg { animation: mu-blink 1s steps(2) infinite; }
@keyframes mu-blink { 50% { opacity: 0.3; } }
.mu-tabs { overflow-x: auto; max-width: 100%; }
.mu-tabs .ui-seg { width: max-content; min-width: 100%; }

/* the grid scrolls sideways on small screens; the row names stay put */
.mu-grid-wrap { overflow-x: auto; max-width: 100%; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); padding: var(--space-2) 0; overscroll-behavior-x: contain; }
.mu-grid {
  --cell: 34px; display: grid; grid-template-columns: var(--label-w, 52px) repeat(var(--steps), var(--cell)); gap: 3px; width: max-content; padding: 0 var(--space-2) 0 0;
}
.mu-teen .mu-grid, .mu-kid .mu-grid--read { --cell: 30px; }
.mu-grid--drums, .mu-grid--read { --label-w: 84px; }
@media (min-width: 700px) { .mu-grid { --cell: 38px; } .mu-teen .mu-grid { --cell: 32px; } }
.mu-row-label {
  position: sticky; left: 0; z-index: 1; display: flex; align-items: center; padding: 0 6px 0 var(--space-2); background: var(--surface);
  font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--ink); border-left: 5px solid var(--c); min-height: var(--cell); white-space: nowrap; overflow: hidden;
}
.mu-row-sound { all: unset; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.mu-row-sound:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mu-cell {
  width: var(--cell); height: var(--cell); border: 0; border-radius: 7px; background: var(--surface-sunken); cursor: pointer; padding: 0;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.mu-cell.is-odd { background: color-mix(in srgb, var(--surface-sunken) 80%, var(--ink) 6%); }
.mu-cell.is-beat { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ink) 18%, transparent); }
.mu-cell[aria-pressed="true"], .mu-cell[data-on] { background: var(--c); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.18); }
.mu-cell.is-now { outline: 3px solid var(--amber, #F2A93B); outline-offset: -2px; }
.mu-cell.is-now[aria-pressed="true"], .mu-cell.is-now[data-on] { transform: scale(1.1); filter: brightness(1.15); }
.mu-grid--read .mu-cell { cursor: default; }
.mu-empty { padding: var(--space-3); margin: 0; }

/* the keyboard under the grid */
.mu-keys-wrap { overflow-x: auto; max-width: 100%; }
.mu-keys { display: grid; grid-template-columns: repeat(8, minmax(40px, 1fr)); gap: 4px; height: 128px; }
.mu-keys--many { grid-template-columns: repeat(15, minmax(44px, 1fr)); width: max-content; min-width: 100%; }
.mu-key {
  border: 0; border-radius: 10px 10px 16px 16px; cursor: pointer; background: color-mix(in srgb, var(--key) 22%, #FFFDF8); color: var(--ink);
  border-bottom: 10px solid var(--key); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-weight: var(--weight-strong);
  box-shadow: var(--shadow-1); touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform var(--dur-fast);
}
.mu-key:active, .mu-key.is-down { transform: translateY(3px); background: color-mix(in srgb, var(--key) 45%, #FFFDF8); }
.mu-drum-pads { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); }
.mu-dpad {
  min-height: 72px; border: 0; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c) 20%, var(--surface)); border-bottom: 6px solid var(--c);
  font-weight: var(--weight-strong); color: var(--ink); cursor: pointer; touch-action: manipulation; box-shadow: var(--shadow-1);
}
.mu-dpad:active { transform: translateY(3px); }

.mu-track-tools { display: grid; gap: var(--space-2); }
.mu-track-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface); }
.mu-track-name { font-weight: var(--weight-strong); border-left: 5px solid var(--c); padding-left: var(--space-2); flex: 1 1 110px; }
.mu-track-row .ui-switch { flex: 0 0 auto; gap: var(--space-2); }
.mu-row-actions, .mu-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mu-actions { justify-content: flex-end; }
.mu-field { flex: 1 1 160px; min-width: 0; }
.mu-settings { display: grid; gap: var(--space-3); padding: var(--space-3); }
.mu-settings-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mu-fx { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mu-fx output { min-width: 5.5em; text-align: center; }
.mu-add { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
.mu-share-people { flex-wrap: wrap; }

/* ---------- the player ---------- */

.mu-player-head { display: flex; align-items: center; gap: var(--space-3); }
.mu-player-title { margin: 0; font: var(--weight-display) var(--text-xl) / 1.2 var(--font-display); overflow-wrap: anywhere; }
.mu-player-head p { margin: 2px 0 0; }
.mu-little.mu-player .mu-play, .mu-player.mu-little .mu-play { min-height: 88px; font-size: var(--text-xl); flex: 1; }

/* teens: calmer */
[data-skin="teen"] .mu-lkey, [data-skin="teen"] .mu-key { border-radius: 6px 6px 10px 10px; }

@media (prefers-reduced-motion: reduce) {
  .mu-lkey.is-lit { animation: none; }
  .mu-pad.is-hit, .mu-rec[aria-pressed="true"] svg { animation: none; }
}
:root[data-motion="reduce"] .mu-lkey.is-lit, :root[data-motion="reduce"] .mu-pad.is-hit { animation: none; }

/* ---------- [landscape] a phone on its side (wide and short) ----------
   Use the width: the beat grid stretches so a whole loop shows without sideways scrolling (cells
   between 28 and 46px, sized to the screen), Play, Record and tempo share one row with the instrument
   tabs, and the grid (scrolling inside when there are many notes) and the keyboard fit on the screen
   together once that row is at the top. The little ones' rainbow keyboard fills the screen, with the
   sound buttons beside it. */
@media (orientation: landscape) and (max-height: 500px) {
  .mu-home, .mu-editor, .mu-little, .mu-player { max-width: none; }
  /* contain: the long grid and keyboard scroll inside; they never make the page wider than the screen */
  .mu-editor { --mu-keys-h: 84px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); contain: inline-size; }
  .mu-editor > * { flex: 1 1 100%; min-width: 0; }
  .mu-editor > .mu-bar { flex: 0 0 auto; flex-wrap: nowrap; scroll-margin-top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px) + var(--space-2)); }
  .mu-editor > .mu-tabs { flex: 1 1 200px; }
  .mu-head { flex-wrap: nowrap; }
  .mu-head .mu-title { min-height: var(--tap); padding-block: 4px; font-size: var(--text-lg); }
  .mu-bar .ui-stepper output { min-width: 6.5em; }
  .mu-grid-wrap {
    container-type: inline-size; overflow: auto; overscroll-behavior: contain;
    max-height: calc(100vh - var(--appbar-h) - var(--tap) - var(--mu-keys-h) - 56px);
    max-height: calc(100dvh - var(--appbar-h) - env(safe-area-inset-top, 0px) - var(--tap) - var(--mu-keys-h) - 56px);
    min-height: 120px;
  }
  .mu-editor .mu-grid, .mu-editor.mu-teen .mu-grid {
    --cell: clamp(28px, calc((100cqw - var(--label-w, 52px) - 16px) / var(--steps) - 3px), 46px); --cell-h: 30px;
  }
  .mu-player .mu-grid-wrap { max-height: none; }
  .mu-editor .mu-cell { height: var(--cell-h); }
  .mu-editor .mu-row-label { min-height: var(--cell-h); }
  .mu-keys { height: var(--mu-keys-h); }
  .mu-key { padding-bottom: 4px; border-bottom-width: 8px; }
  .mu-dpad { min-height: 56px; }
  .mu-drum-pads { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

  .mu-little { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
  .mu-little > * { grid-column: 1 / -1; }
  .mu-little > .mu-linsts { grid-column: 1; flex-direction: column; justify-content: center; }
  .mu-little > .mu-lkeys {
    grid-column: 2; gap: 8px;
    height: clamp(170px, calc(100vh - var(--appbar-h) - 40px), 420px);
    height: clamp(170px, calc(100dvh - var(--appbar-h) - env(safe-area-inset-top, 0px) - 40px), 420px);
  }
  .mu-little .mu-lkey-dot { bottom: 22px; width: 22px; height: 22px; margin-left: -11px; }
  .mu-pads { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .mu-little.mu-player .mu-play, .mu-player.mu-little .mu-play { min-height: 64px; }
}