/* The canvas owns the surface; controls take only their visible hit regions. */
#jamApp .jam-field{container-type:inline-size;container-name:visual-note}
#jamApp .jam-field-controls{position:absolute;inset:0;z-index:6;pointer-events:none}
#jamApp .jam-field-controls :is(button,input,select,a){pointer-events:auto}
#jamApp .jam-field-head,#jamApp .jam-beat-pads,#jamApp .jam-pad-tools,#jamApp .piano-field-controls,#jamApp .jam-field-volume{pointer-events:none}
#jamApp .jam-chaos-layers{pointer-events:none}
#jamApp .jam-chaos-layers :is(button,select,input){pointer-events:auto}
#jamApp[data-controls=off] .jam-field-controls,#jamApp[data-controls=off] .jam-dock,#jamApp[data-controls=off] .jam-view-options{display:none!important}
#jamApp[data-layout=chaotic] .jam-field-controls{display:none!important}
#jamApp[data-controls=off] .jam-phase{pointer-events:none}
#jamApp[data-controls=off]:is([data-layout=split],[data-layout=focus]) .jam-stage{bottom:calc(56px + env(safe-area-inset-bottom));padding-top:0}
#jamApp[data-controls=off] .jam-viewbar{bottom:calc(8px + env(safe-area-inset-bottom));justify-content:center}
#jamApp .jam-layout-switch{max-width:100%;gap:1px}
#jamApp .jam-layout-switch .jam-view-toggle{padding:6px 10px;min-height:36px;font-size:10px}
#jamApp .jam-field-head{top:6px!important;left:10px!important;right:42px!important;gap:2px!important}
#jamApp .jam-field-head .jam-material-name{min-width:0;max-width:none!important;flex:1;overflow:hidden}
#jamApp .jam-material-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#jamApp .jam-field-head .jam-field-fx{flex:0 0 30px;min-width:30px}
#jamApp .jam-round-icon{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;aspect-ratio:1;padding:0!important;display:grid!important;place-items:center;line-height:0;flex:none}
#jamApp .jam-round-icon svg{width:16px;height:16px;margin:0;display:block}
#jamApp .jam-note-close{position:absolute;top:6px!important;right:6px!important;z-index:20;border:1px solid #ccd7cf26;border-radius:50%;background:#080d12b8}
#jamApp .jam-note-close:disabled{opacity:.2}
#jamApp .jam-field-refresh{top:44px!important;right:6px!important;border-radius:50%}
#jamApp .jam-field-metro{top:44px!important;right:44px!important;border-radius:50%}
#jamApp .jam-control-free{top:44px!important;right:82px!important;max-width:90px;min-height:32px!important;padding:3px 7px!important;font-size:9px!important}
#jamApp .jam-pad-effect{top:44px!important;left:10px!important;max-width:calc(100% - 192px)!important;min-height:32px!important;padding:3px 7px!important}
#jamApp .jam-control-volume{bottom:26px!important;left:10px!important;right:10px!important;padding:0!important;min-height:32px!important;margin:0;gap:8px}
#jamApp .jam-control-volume input{min-height:32px!important;touch-action:none}
#jamApp .jam-volume-toggle{position:absolute;bottom:26px;right:10px;z-index:8;display:none;align-items:center;justify-content:center;gap:5px;padding:5px 8px;min-height:32px;border:1px solid #ccd7cf26;border-radius:18px;background:#080d12d9;font:10px/1 ui-monospace,monospace}
#jamApp .jam-volume-toggle svg{width:13px;height:13px}
#jamApp .jam-field-bars{top:auto!important;bottom:10px!important;left:12px!important;right:auto!important;padding:0;background:none;font-size:9px;pointer-events:none}
#jamApp .jam-motion-readout{display:none!important}
#jamApp .jam-start-hint{gap:6px;opacity:.55;transition:opacity .5s}
#jamApp .jam-start-hint strong{font-size:16px;letter-spacing:0}
#jamApp .jam-start-hint small{font-size:9px;letter-spacing:.3px}
#jamApp .jam-field[data-guide-dismissed=true] .jam-start-hint,#jamApp .jam-entry-scale{opacity:0;pointer-events:none}
#jamApp .jam-field-controls .piano-field-controls{right:10px;left:auto;top:84px}
#jamApp .jam-field-controls .piano-field-controls button{min-height:30px;padding:3px 7px;font-size:9px}
#jamApp .jam-stage .jam-field .jam-beat-pads{pointer-events:none}
#jamApp .jam-stage .jam-field .jam-beat-pads :is(button,input,select){pointer-events:auto}
#jamApp .jam-field[data-control-size=compact] .jam-pad-effect,
#jamApp .jam-field[data-control-size=micro] .jam-pad-effect{display:none!important}
#jamApp .jam-field:is([data-control-size=compact],[data-control-size=micro],[data-control-height=short],[data-control-height=tiny]) .jam-control-volume{display:none!important}
#jamApp .jam-field:is([data-control-size=compact],[data-control-size=micro],[data-control-height=short],[data-control-height=tiny]) .jam-volume-toggle{display:flex}
#jamApp .jam-field[data-volume-expanded=true] .jam-control-volume{display:flex!important;bottom:62px!important;background:#080d12f2;border:1px solid #ccd7cf35;border-radius:15px;padding:5px 8px!important;z-index:14}
#jamApp .jam-field[data-volume-expanded=true] .jam-control-volume>span{display:none}
#jamApp .jam-field[data-control-size=micro] .jam-field-head .jam-tiny-icon{display:none!important}
#jamApp .jam-field[data-control-size=micro] .jam-material-name{font-size:9px!important;letter-spacing:0!important;gap:4px!important;padding:3px 0!important}
#jamApp .jam-field[data-control-size=micro] .jam-control-free{left:10px!important;right:auto!important;max-width:68px}
#jamApp .jam-field[data-control-size=micro] .piano-field-controls,
#jamApp .jam-field[data-control-height=short] .piano-field-controls{display:none}
#jamApp .jam-field[data-control-height=short] .jam-beat-pads .jam-pad-tools{display:none!important}
#jamApp .jam-field[data-control-height=short] .jam-beat-pads .jam-take-status{display:none!important}
#jamApp .jam-field[data-control-height=short] .jam-beat-pads,
#jamApp .jam-field[data-control-height=short] .jam-beat-pads.expanded{inset:82px 8px 66px!important;width:auto!important;transform:none!important;display:flex!important}
#jamApp .jam-field[data-control-height=short] .jam-beat-pads .jam-pad-record{position:absolute;right:0;top:-37px;min-height:28px!important;padding:2px 7px!important;font-size:9px!important}
#jamApp .jam-field[data-control-height=short] .jam-beat-pads .jam-drum-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;height:100%}
#jamApp .jam-field[data-control-height=short] .jam-drum-pad{padding:2px!important;font-size:8px!important;min-height:18px!important}
#jamApp .jam-field[data-control-height=short] .jam-drum-pad .jam-pc-hint{display:none}
#jamApp .jam-stage .jam-field .jam-field-head .jam-field-fx{display:flex!important}
#jamApp .jam-stage .jam-field .jam-field-head .jam-material-name{display:flex!important}
#jamApp .jam-stage .jam-field .jam-beat-pads [data-field-focus]{display:none!important}
#jamApp[data-controls=on] .jam-phase{pointer-events:auto}
@container visual-note (max-width:219px){
 #jamApp .jam-start-hint strong{font-size:13px}
 #jamApp .jam-start-hint small{display:none}
}
@media(max-width:360px){#jamApp .jam-layout-switch .jam-view-toggle{padding:6px 7px;font-size:9px}#jamApp .jam-header{gap:5px}#jamApp .jam-top-actions button{padding-left:5px;padding-right:5px}}
@media(prefers-reduced-motion:reduce){#jamApp .jam-start-hint{transition:none}}

/* Very short Beat Notes expose pads in the existing sheet rather than crush eight hit targets. */
#jamApp .jam-beat-open{display:none;position:absolute;left:10px;top:82px;min-height:28px;padding:3px 9px;border:1px solid #ccd7cf26;border-radius:16px;background:#080d12d9;font-size:9px}
#jamApp .jam-field[data-control-height=tiny] .jam-beat-pads,#jamApp .jam-field[data-control-height=tiny] .piano-field-controls{display:none!important}
#jamApp .jam-field[data-control-height=tiny] .jam-beat-open{display:block}

#jamApp[data-controls=off] .jam-chaos-fx{display:none}

/* Tiny Notes use two bounded rows; volume opens Mix when a slider cannot fit. */
#jamApp .jam-field[data-control-height=tiny] .jam-field-head{top:4px!important;min-height:26px}
#jamApp .jam-field[data-control-height=tiny] .jam-field-head button{min-height:26px!important;height:26px;padding-top:0!important;padding-bottom:0!important}
#jamApp .jam-field[data-control-height=tiny] .jam-field-head .jam-material-name{flex:0 1 auto;max-width:52px!important;margin-right:auto}
#jamApp .jam-field[data-control-height=tiny] .jam-field-head .jam-tiny-icon{display:none!important}
#jamApp .jam-field[data-control-height=tiny] .jam-round-icon{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}
#jamApp .jam-field[data-control-height=tiny] .jam-note-close{top:4px!important;right:4px!important}
#jamApp .jam-field[data-control-height=tiny] .jam-field-refresh{top:32px!important;right:4px!important}
#jamApp .jam-field[data-control-height=tiny] .jam-field-metro{top:32px!important;right:36px!important}
#jamApp .jam-field[data-control-height=tiny] .jam-control-free{top:32px!important;left:50px!important;right:auto!important;width:34px;max-width:34px;min-height:26px!important;height:26px;padding:0!important;font-size:0!important}
#jamApp .jam-field[data-control-height=tiny] .jam-control-free:before{content:'FREE';font:8px/1 ui-monospace,monospace}
#jamApp .jam-field[data-control-height=tiny] .jam-volume-toggle{top:32px;bottom:auto;left:4px;right:auto;width:42px;min-height:26px;height:26px;padding:0;font-size:9px}
#jamApp .jam-field[data-control-height=tiny] .jam-volume-toggle svg{display:none}
#jamApp .jam-field[data-control-height=tiny][data-material=beat] .jam-control-free{display:none}
#jamApp .jam-field[data-control-height=tiny] .jam-beat-open{top:32px;left:50px;width:34px;min-height:26px;height:26px;padding:0;font-size:8px}
@media(min-width:500px) and (max-height:500px) and (orientation:landscape){
 #jamApp[data-layout=split] .jam-stage:is([data-count="5"],[data-count="6"]){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
}
@media(max-height:359px) and (orientation:landscape){
 #jamApp[data-controls=on][data-layout=split] .jam-stage{overflow-y:auto;overscroll-behavior:contain}
 #jamApp[data-controls=on][data-layout=split] .jam-stage:is([data-count="2"],[data-count="3"],[data-count="4"],[data-count="5"],[data-count="6"]){grid-template-rows:repeat(2,minmax(84px,1fr))}
}

/* Short Beat recordings keep the right-side refresh and metronome hit regions clear. */
#jamApp .jam-field[data-control-height=short][data-material=beat] .jam-control-free{display:none!important}
#jamApp .jam-field[data-control-height=short] .jam-beat-pads .jam-pad-record{left:2px!important;right:auto!important;width:68px!important;max-width:68px;height:28px}

#jamApp[data-layout=chaotic] .jam-chaos-touch{top:calc(68px + env(safe-area-inset-top))}
#jamApp[data-controls=off][data-layout=chaotic] .jam-chaos-touch{bottom:calc(56px + env(safe-area-inset-bottom))}
@media(max-height:500px) and (orientation:landscape){
 #jamApp[data-layout=focus] .jam-stage .jam-field{min-height:0;height:100%}
}

/* Regular Beat Notes start their recording/pad grid below the common control row. */
#jamApp .jam-stage .jam-field[data-control-height=regular] .jam-beat-pads:not(.collapsed){top:82px!important}