/* MA panel: grandMA2 / grandMA3 command section. Flat keys in the studio palette; lit and held states are visible. */
.ma-panel{padding:10px;container-type:inline-size;font-size:var(--text-xs);color:var(--ink)}
.ma-title{font-size:var(--text-sm);margin:0 0 8px}
.workspace-card .ma-title{display:none}
.ma-panel:not(.workspace-card-content > .ma-panel){margin-top:16px}
.ma-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:8px;color:var(--muted)}
.ma-head label{display:flex;align-items:center;gap:6px}
.ma-head select{font-size:var(--text-xs)}
.ma-page,.ma-exec{font-variant-numeric:tabular-nums}
.ma-cmd{display:flex;align-items:center;gap:6px;background:#1d2024;color:#f3e9d9;border:1px solid #3a3f45;border-radius:4px;padding:6px 8px;font-family:ui-monospace,Menlo,Consolas,monospace}
.ma-prompt{color:#e2a46c}
.ma-input{flex:1;min-width:0;background:transparent;border:0;color:inherit;font:inherit;font-size:13px;outline:none;padding:0}
.ma-input::placeholder{color:#8a8f96}
.ma-input:focus{box-shadow:none}
.ma-cmd:focus-within{border-color:var(--accent)}
.ma-feedback{min-height:18px;margin:6px 0 10px;color:var(--muted);line-height:1.4}
.ma-keys{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.ma-block{border:1px solid var(--line);border-radius:4px;padding:6px;background:var(--bg);flex:0 1 auto;min-width:0}
.ma-block-title{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 2px}
.ma-grid{display:grid;grid-template-columns:repeat(3,58px);gap:4px}
.ma-exec .ma-grid{grid-template-columns:repeat(5,46px)}
.ma-functions .ma-grid,.ma-system .ma-grid{grid-template-columns:repeat(4,58px)}
.ma-key{min-height:34px;padding:4px 2px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink);font:inherit;font-size:11px;font-weight:600;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;line-height:1.1;white-space:nowrap;overflow:visible;letter-spacing:0;min-width:0;width:100%}
.ma-key:hover{border-color:var(--accent)}
.ma-key:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ma-key.held,.ma-key:active{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(1px)}
.ma-key.lit{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.ma-key.console-hit{animation:console-hit .35s ease-out}
.ma-key-please{grid-column:1/-1;background:#d9742a;color:#fff;border-color:#b14c17}
.ma-key-go-plus{background:#2f7a3a;color:#fff;border-color:#246030}
.ma-key-go-minus{background:#5b6168;color:#fff;border-color:#454a50}
.ma-key-pause{background:#b8912a;color:#fff;border-color:#8f7020}
.ma-key-go-plus.held,.ma-key-please.held{filter:brightness(1.15)}
.ma-exec .ma-key{font-weight:700}
.ma-map{margin-top:10px;color:var(--muted)}
.ma-map summary{cursor:pointer;font-weight:600;color:var(--ink)}
.ma-map p{line-height:1.5;margin:6px 0}
.ma-map code{font-family:ui-monospace,Menlo,Consolas,monospace}
.ma-map-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ma-map-row label{display:flex;align-items:center;gap:6px}
.ma-map-row input{width:70px;font-size:var(--text-xs)}
.ma-map-row button{font-size:var(--text-xs)}
.mapping-group{grid-column:1/-1;font-size:var(--text-xs);color:var(--muted);margin:10px 0 4px;letter-spacing:.04em;text-transform:uppercase}
@container (max-width:420px){.ma-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ma-functions .ma-grid,.ma-system .ma-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ma-exec .ma-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.ma-block{flex:1 1 100%}.ma-key{min-height:38px}}
@media(max-width:700px){.ma-key{min-height:40px}}

/* Phone standard view: the MA panel lives in its own detachable MA Console card under Layout Controls on the Stage tab (ma-mobile-panel.js). */
.mobile-ma-panel .mobile-control-body{height:auto;max-height:none;overflow:visible}
.mobile-ma-panel .ma-panel{margin-top:0}
.mobile-ma-panel .ma-title{display:none}
.mobile-ma-panel.is-floating .mobile-control-body{overflow:auto;max-height:calc(100dvh - 160px)}
.ma-mini-bar{grid-template-columns:minmax(0,1fr) 40px 40px}
@media(max-width:700px){
 body:not(.custom-workspace-mode) .simulator>.ma-panel{display:none}
 body:not(.custom-workspace-mode) .simulator>.mobile-ma-panel{order:1}
}