/* AXIOM 16-P - COMPACT layout (phone / small touch screens). Active when body has .cx-on. */
body.cx-on { overflow: hidden; touch-action: manipulation; overscroll-behavior: none; }
body.cx-on > .workstation-chassis, body.cx-on > .app-shell, body.cx-on > main { display: none !important; }
.cx { position: fixed; inset: 0; display: flex; flex-direction: column; background: #0b0d12; color: #dfe6f1; font: 600 12px/1.2 system-ui, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); user-select: none; -webkit-user-select: none; z-index: 50; }
.cx button { font: inherit; color: inherit; background: #1a2030; border: 1px solid #2c3550; border-radius: 8px; padding: 0 10px; min-height: 40px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cx button.on, .cx .cx-mode.on, .cx .cx-tab.on, .cx .cx-st.on { background: #2b6cff; border-color: #6d9bff; color: #fff; }
.cx-top { display: flex; gap: 6px; padding: 6px; align-items: center; }
.cx-modes { flex: 1; display: flex; gap: 4px; }
.cx-mode { flex: 1; font-weight: 800; letter-spacing: .5px; }
.cx-mode.dj.on { background: #e0701a; border-color: #ffb06a; }
.cx-tabs { display: flex; gap: 4px; padding: 0 6px; }
.cx-tab { flex: 1; font-weight: 800; min-height: 38px; }
.cx-info { display: flex; align-items: center; gap: 5px; padding: 6px; min-height: 46px; overflow-x: auto; white-space: nowrap; }
.cx-info .cx-b { min-width: 40px; padding: 0 8px; }
.cx-title { flex: 1; text-align: center; font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.cx-title.sm { flex: 0 0 auto; min-width: 54px; font-size: 11px; }
.cx-lab, .cx-hint { color: #8a97ad; font-size: 10px; }
.cx-hint { flex: 1; text-align: right; white-space: normal; }
.cx-chip { min-height: 34px; padding: 0 12px; }
.cx-chip.A.on { background: #1e8f5a; border-color: #5fe0a0; } .cx-chip.B.on { background: #a63ec9; border-color: #e08cff; }
.cx-chip.assign.on { background: #d4a017; border-color: #ffe27a; color: #000; }
.cx-pads { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; padding: 6px; touch-action: none; }
.cx-pad { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #151b28; border: 1px solid #2a3350; border-radius: 10px; overflow: hidden; min-height: 0; transition: background .08s; }
.cx-pad .n { position: absolute; top: 3px; left: 6px; font-size: 10px; color: #6f7c93; }
.cx-pad .t { font-size: 11px; font-weight: 800; text-align: center; padding: 0 4px; line-height: 1.15; max-height: 3.6em; overflow: hidden; word-break: break-word; }
.cx-pad.hit { background: #3d7bff; border-color: #aac6ff; }
.cx-pad.sel { border-color: #6d9bff; box-shadow: inset 0 0 0 2px #2b6cff; }
.cx-pad.mute { opacity: .45; }
.cx-pad.dirty .n::after { content: " \2022"; color: #ffb06a; }
.cx-pad.step { background: #10141f; } .cx-pad.step.beat0, .cx-pad.step.beat2 { background: #151b2b; }
.cx-pad.step.on { background: #e8483c; border-color: #ff9a92; }
.cx-pad.step.head { outline: 3px solid #ffd84a; outline-offset: -3px; }
.cx-pad.pat.empty, .cx-pad.loop.empty, .cx-pad.user.empty { opacity: .5; }
.cx-pad.pat.act { background: #1e8f5a; border-color: #5fe0a0; } .cx-pad.pat.pend { background: #b8860b; border-color: #ffe27a; animation: cxblink .5s infinite alternate; }
.cx-pad.deckA { background: #1e8f5a; border-color: #5fe0a0; } .cx-pad.deckB { background: #7d2fa0; border-color: #e08cff; }
.cx-pad.user.toggle.on { background: #1e8f5a; border-color: #5fe0a0; } .cx-pad.user.trigger { background: #1a2640; } .cx-pad.user.plus { background: #1d3b2a; } .cx-pad.user.minus { background: #3b2020; }
.cx-pad.assignable { border-style: dashed; border-color: #d4a017; }
@keyframes cxblink { to { opacity: .55; } }
.cx-mid { display: flex; gap: 6px; padding: 0 6px 6px; }
.cx-lpbox { flex: 1; display: flex; gap: 4px; } .cx-lp { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; }
.cx-lp span { font-weight: 800; } .cx-lp em { font-style: normal; font-size: 10px; color: #9fb0cc; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-lp.hit { background: #3d7bff; } .cx-lpon { width: 52px; } .cx-lpon.on { background: #1e8f5a; border-color: #5fe0a0; }
.cx-deck { flex: 1; display: flex; gap: 4px; align-items: center; border: 1px solid #2c3550; border-radius: 8px; padding: 4px; }
.cx-deck b { width: 48px; font-size: 10px; } .cx-deck.A b { color: #5fe0a0; } .cx-deck.B b { color: #e08cff; }
.cx-deck button { flex: 1; padding: 0 4px; min-height: 48px; } .cx-deck.playing { border-color: #ffd84a; }
.cx-deck button.sync.on { background: #2b6cff; }
.cx-transport { display: flex; gap: 5px; padding: 6px; align-items: center; }
.cx-tbtn { min-width: 46px; min-height: 48px; font-weight: 800; font-size: 14px; }
.cx-tbtn.play.on { background: #1e8f5a; border-color: #5fe0a0; } .cx-tbtn.rec.on { background: #c62828; border-color: #ff8a80; } .cx-tbtn.rec { color: #ff6b6b; }
.cx-tbtn.sheet { margin-left: auto; font-size: 12px; }
.cx-bpm { display: flex; align-items: center; gap: 2px; } .cx-bpm button { min-width: 34px; padding: 0; } .cx-bpm b { min-width: 46px; text-align: center; font-size: 16px; }
.cx-sheet { display: none; flex-direction: column; background: #0f1320; border-top: 2px solid #2b6cff; height: 52%; min-height: 0; }
.cx.sheet-open .cx-sheet { display: flex; }
.cx.sheet-open .cx-pads { flex: 0 0 auto; height: 30%; }
.cx.sheet-open .cx-info, .cx.sheet-open .cx-mid { display: none; }
.cx-sheet-tabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; flex: 0 0 auto; }
.cx-st { flex: 0 0 auto; min-height: 34px !important; font-size: 11px; }
.cx-sheet-body { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 4px; }
.cx-sheet-pane { display: none; } .cx-sheet-pane.on { display: block; }
.cx-sheet-pane .deep-deck-box { width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; }
.cx-sheet-pane #panel-deep-pad-editor { display: flex !important; flex-direction: column !important; gap: 8px; }
.cx-sheet-pane #panel-deep-pad-editor > * { width: 100% !important; max-width: none !important; min-width: 0 !important; }
.cx-sheet-pane #container-full-grid { display: block !important; position: static !important; width: 100% !important; overflow-x: auto; }
.cx-sheet-pane .step-automation-toolbar, .cx-sheet-pane .sequencer-preset-management { width: 100% !important; max-width: none !important; flex-wrap: wrap; }
.cx-big { display: block; width: 100%; margin: 8px 0; min-height: 56px !important; font-size: 14px; }
.cx-mixer { display: flex; gap: 8px; } .cx-chan { flex: 1; border: 1px solid #2c3550; border-radius: 8px; padding: 6px; } .cx-chan b { display: block; text-align: center; margin-bottom: 4px; }
.cx-chan.A b { color: #5fe0a0; } .cx-chan.B b { color: #e08cff; }
.cx-row { display: flex; gap: 4px; margin-bottom: 4px; } .cx-sc { flex: 1; font-size: 10px; padding: 0 2px; }
.cx-eq { display: flex; align-items: center; gap: 4px; margin: 4px 0; } .cx-eq label { width: 34px; font-size: 10px; color: #8a97ad; } .cx-eq input[type=range] { flex: 1; min-width: 0; height: 28px; }
.cx-kill { min-height: 30px !important; font-size: 9px; padding: 0 4px !important; }
.cx-xf { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .cx-xf input { flex: 1; height: 36px; }
.cx-menu, .cx-picker { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.cx-menu.hidden, .cx-picker.hidden { display: none; }
.cx-menu-card, .cx-pick-card { background: #121827; border: 1px solid #2c3550; border-radius: 14px 14px 0 0; width: 100%; max-width: 560px; max-height: 88%; display: flex; flex-direction: column; }
.cx-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #2c3550; }
.cx-menu-body, .cx-pick-body { overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cx-menu-body label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: #8a97ad; } .cx-menu-body select { min-height: 40px; font-size: 14px; background: #1a2030; color: #fff; border-radius: 8px; }
.cx-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .cx-menu-grid button { font-size: 11px; }
.cx-menu-note { font-size: 10px; color: #8a97ad; }
.cx-pgroup summary { padding: 10px; background: #1a2030; border-radius: 8px; font-weight: 800; cursor: pointer; } .cx-pgroup summary i { color: #8a97ad; font-weight: 400; }
.cx-pgroup[open] { display: flex; flex-direction: column; gap: 4px; }
.cx-pitem { text-align: left; min-height: 40px; } .cx-pitem.both { display: flex; align-items: center; gap: 4px; padding: 2px 4px; background: #151b28; border-radius: 8px; } .cx-pitem.both span { flex: 1; } .cx-pitem.both button { min-height: 36px; }
.cx-pitem.clear { color: #ff8a80; }
/* landscape phone: pads left, controls right */
@media (orientation: landscape) and (max-height: 520px) {
  .cx { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto auto 1fr auto; }
  .cx-top { grid-column: 2; grid-row: 1; } .cx-tabs { grid-column: 2; grid-row: 2; } .cx-info { grid-column: 2; grid-row: 3; }
  .cx-pads { grid-column: 1; grid-row: 1 / 6; } .cx-mid { grid-column: 2; grid-row: 4; align-self: start; } .cx-transport { grid-column: 2; grid-row: 5; }
  .cx-sheet { position: fixed; left: 0; right: 0; bottom: 0; height: 70%; z-index: 40; }
  .cx.sheet-open .cx-pads { height: auto; } .cx.sheet-open .cx-info, .cx.sheet-open .cx-mid { display: flex; }
}

.cx-mixer, .cx-chan { min-width: 0; } .cx-chan { overflow: hidden; } .cx-sheet-body { overflow-x: hidden; }
.cx-eq input[type=range] { width: 100%; }
.cx-tbtn { min-width: 38px; padding: 0 6px; } .cx-transport { gap: 4px; padding: 6px 4px; } .cx-bpm b { min-width: 38px; font-size: 15px; } .cx-bpm button { min-width: 28px; }
.cx-tbtn.sheet { font-size: 10px; min-width: 52px; }
.cx.sheet-open[data-mode=dj] .cx-mid { display: flex; }
.cx.sheet-open { }

.cx-pad.k-verse { border-color: #c62828; background: #3a1414; } .cx-pad.k-chorus { border-color: #ff7a1a; background: #3d2108; } .cx-pad.k-bridge { border-color: #ffb000; background: #3d3008; } .cx-pad.k-intro, .cx-pad.k-fill { border-color: #ffee00; background: #3b3a06; } .cx-pad.k-perc { border-color: #e8e8e8; background: #2c2f36; }
.cx-pad.pat.act.k-verse { background: #e53935; } .cx-pad.pat.act.k-chorus { background: #ff7a1a; } .cx-pad.pat.act.k-bridge { background: #ffb000; color: #000; } .cx-pad.pat.act.k-intro, .cx-pad.pat.act.k-fill { background: #ffee00; color: #000; } .cx-pad.pat.act.k-perc { background: #fff; color: #000; }
.cx-pad.deckA, .cx-pad.deckB { box-shadow: inset 0 0 0 3px currentColor; }