/* Pads fill the current view; shared A/B rails live outside all three views. */
.play-view { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.play-hint { flex-shrink: 0; margin: 0; color: var(--muted,#5b7277); font-size: .8rem; line-height: 1.35; }
.play-view .pad-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(70px,1fr)); flex: 1; gap: 10px; min-height: 150px; }
.play-view .pad-grid.drum-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.play-pad { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-width: 0; min-height: 44px; padding: 13px; border: 1px solid var(--line,#d2dedb); border-bottom: 4px solid #a9c7c1; border-radius: 13px; background: #f8fbfa; color: var(--ink,#18343b); text-align: left; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background-color .1s,border-color .1s; }
.play-pad:hover { border-color: var(--teal,#176b70); }
.play-pad.active { background: var(--teal,#176b70); border-color: var(--teal-strong,#0e5358); color: #fff; }
.pad-number { color: #ac563b; font: 800 .7rem/1.2 ui-monospace,monospace; letter-spacing: .04em; }
.play-pad strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1rem,1.8vw,1.5rem); line-height: 1.15; font-weight: 850; }
.play-pad small { color: var(--muted,#5b7277); font-size: .73rem; }
.play-pad.active .pad-number, .play-pad.active small { color: #e3f2ef; }
.performance-control { --control-color: var(--teal,#176b70); --control-wash: #e4f2ef; display: flex; flex-direction: column; align-items: stretch; height: 100%; min-height: 0; width: 100%; border: 1px solid var(--line,#d2dedb); border-radius: 12px; background: #fff; color: var(--ink,#18343b); }
.performance-control.control-sliderB { --control-color: #b25e43; --control-wash: #fbede7; }
.performance-label { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; gap: 4px; width: 100%; min-height: 82px; padding: 6px 4px; border: 0; border-radius: 11px 11px 0 0; background: var(--control-wash); color: var(--control-color); text-align: center; }
.performance-label strong { font-size: 1.35rem; line-height: 1.1; }
.performance-label span { max-width: 100%; overflow-wrap: anywhere; font-size: .64rem; line-height: 1.2; font-weight: 750; }
.performance-slider { position: relative; flex: 1; min-height: 88px; width: 100%; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.performance-track { position: absolute; top: 24px; bottom: 24px; left: 50%; width: 8px; border-radius: 99px; background: #dbe9e5; transform: translateX(-50%); pointer-events: none; }
.control-sliderB .performance-track { background: #efdbd3; }
.performance-thumb { position: absolute; left: 50%; bottom: var(--control-value); width: 44px; height: 44px; border: 3px solid #fff; border-radius: 12px; background: var(--control-color); box-shadow: 0 1px 7px #18343b40; transform: translate(-50%,50%); }
.performance-thumb::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 -6px #fff,0 6px #fff; transform: translate(-50%,-50%); }
.performance-value { flex-shrink: 0; display: grid; place-items: center; min-height: 35px; font-size: .78rem; font-weight: 850; font-variant-numeric: tabular-nums; color: var(--control-color); }
.performance-assign { flex: 1; min-height: 44px; border: 0; background: transparent; color: var(--control-color); font-size: 1.7rem; }
.performance-control :focus-visible { outline: 3px solid var(--control-color); outline-offset: -3px; }
.motion-panel { position: absolute; z-index: 40; right: 82px; bottom: 12px; display: flex; flex-direction: column; gap: 7px; width: 266px; max-width: calc(100% - 100px); max-height: calc(100% - 80px); overflow: auto; padding: 10px; border: 1px solid #a4ccc2; border-radius: 14px; background: #fff; box-shadow: 0 8px 35px #18343b35; }
.motion-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.motion-panel-heading strong { font-size: .94rem; }
.motion-close { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 8px; background: #f6f9f7; color: var(--ink,#18343b); font-size: 1.45rem; }
.motion-axis-labels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.motion-axis-labels button { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding: 5px; border: 1px solid var(--line,#d2dedb); border-radius: 8px; background: #f6f9f7; color: var(--ink,#18343b); font-size: .75rem; overflow-wrap: anywhere; }
.motion-axis-labels .is-assigned { border-color: #b8bfdc; background: #edf0fb; color: #414e85; }
.motion-pad-wrap { display: flex; flex-direction: column; gap: 6px; }
.motion-pad { position: relative; height: 142px; flex-shrink: 0; margin: 0 10px; border: 1px solid #8abdb4; border-radius: 10px; background: #e4f2ef; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.motion-pad-axis { position: absolute; background: #a3c7bf; pointer-events: none; }
.motion-pad-axis.horizontal { left: 0; right: 0; top: 50%; height: 1px; }
.motion-pad-axis.vertical { top: 0; bottom: 0; left: 50%; width: 1px; }
.motion-pad-cursor { position: absolute; width: 25px; height: 25px; border: 3px solid #fff; border-radius: 50%; background: #b25e43; box-shadow: 0 1px 5px #18343b45; transform: translate(-50%,50%); pointer-events: none; }
.motion-empty, .motion-panel > small { color: var(--muted,#5b7277); font-size: .69rem; line-height: 1.3; }
.motion-panel-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.motion-panel-actions button { min-height: 44px; padding: 5px; border: 1px solid var(--line,#d2dedb); border-radius: 8px; background: #fff; color: var(--teal-strong,#0e5358); font-size: .73rem; font-weight: 750; }
.motion-panel-actions button[aria-pressed=true] { background: #e4f2ef; border-color: var(--teal,#176b70); }
@media (max-width: 760px) {
  .play-view { gap: 7px; }
  .play-hint { font-size: .72rem; }
  .play-view .pad-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(4,minmax(58px,1fr)); gap: 6px; min-height: 250px; }
  .play-view .pad-grid.drum-grid { grid-template-rows: repeat(2,minmax(58px,1fr)); min-height: 122px; }
  .play-pad { padding: 6px 9px; border-radius: 9px; border-bottom-width: 3px; }
  .play-pad strong { font-size: 1rem; }
  .pad-number { font-size: .6rem; }
  .play-pad small { font-size: .64rem; }
  .performance-control { display: grid; grid-template-columns: minmax(0,1fr) 44px; grid-template-rows: 44px 44px; overflow: hidden; }
  .performance-label { grid-column: 1; grid-row: 1; flex-direction: row; justify-content: start; gap: 6px; min-height: 44px; padding: 3px 8px; border-radius: 11px 0 0 0; }
  .performance-label strong { font-size: 1.1rem; }
  .performance-label span { font-size: .68rem; line-height: 1.1; text-align: left; }
  .performance-value { grid-column: 2; grid-row: 1; min-height: 44px; background: var(--control-wash); border-radius: 0 11px 0 0; font-size: .7rem; }
  .performance-slider { grid-column: 1 / -1; grid-row: 2; min-height: 44px; cursor: ew-resize; }
  .performance-track { left: 24px; right: 24px; top: 50%; bottom: auto; width: auto; height: 8px; transform: translateY(-50%); }
  .performance-thumb { left: var(--control-value); top: 50%; bottom: auto; width: 38px; height: 38px; border-radius: 10px; transform: translate(-50%,-50%); }
  .performance-thumb::after { width: 3px; height: 15px; box-shadow: -6px 0 #fff,6px 0 #fff; }
  .performance-assign { grid-column: 1 / -1; grid-row: 2; min-height: 44px; }
  .motion-panel { right: 6px; bottom: 110px; max-width: calc(100% - 12px); max-height: calc(100% - 120px); width: 254px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .play-pad { padding: 8px 10px; }
  .performance-label { min-height: 68px; }
  .motion-pad { height: 95px; }
}