/* SPDX-License-Identifier: GPL-3.0-only */
/* Continuous local gesture surface and contextual routing amount. */
.cabine-route-inspector{margin-top:12px;padding-top:10px;border-top:1px solid #303725;min-width:0}.cabine-route-name{font:10px/1.5 var(--mono);color:var(--route-color,#a3ad94);overflow-wrap:anywhere;margin:6px 0}
.cabine-depth-controls{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px;align-items:center}.cabine-depth-controls[hidden]{display:none}.cabine-depth-controls>button{grid-column:1/-1;min-height:30px}.cabine-depth-controls>output{font:12px var(--mono);color:var(--route-color,var(--accent));text-align:center}
.cabine-depth-dial{position:relative;width:44px;height:44px;border:2px solid var(--route-color,var(--accent));border-radius:50%;background:#171e12;touch-action:none;cursor:ns-resize;box-sizing:border-box}.cabine-depth-dial:before{content:'';position:absolute;left:19px;top:5px;width:2px;height:14px;background:var(--route-color,var(--accent));transform-origin:1px 15px;transform:rotate(var(--turn,0deg))}.cabine-depth-dial:focus-visible{outline:2px solid #fff;outline-offset:3px}
#view:has(>.cabine-local-console) .cabine-pad.route-selected{outline:2px solid var(--pad-color);outline-offset:-3px}
#view:has(>.cabine-local-console)>.cabine-gesture-surface{grid-column:2;grid-row:1/-1;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;min-width:0;min-height:0;padding:8px;border:1px solid #2c3224;border-radius:5px;background:#0b0e08;box-sizing:border-box}
.cabine-gesture-strips{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;min-height:0}.cabine-gesture-field{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;text-align:center;font:10px var(--mono);color:var(--gesture-color)}.cabine-gesture-field>span{min-height:24px;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}.cabine-gesture-field output{height:30px;font:10px var(--mono);display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere;color:#d5dfc9}
.cabine-gesture-strip{position:relative;flex:1;min-height:40px;border:1px solid color-mix(in srgb,var(--gesture-color) 50%,#242b1a);border-radius:5px;background:repeating-linear-gradient(to top,transparent 0,transparent calc(12.5% - 1px),#303827 12.5%);overflow:hidden;cursor:ns-resize;touch-action:none}.cabine-gesture-strip:focus-visible{outline:2px solid #fff;outline-offset:2px}.cabine-gesture-fill{position:absolute;left:4px;right:4px;bottom:3px;max-height:calc(100% - 6px);background:var(--gesture-color);opacity:.55;border-radius:2px;pointer-events:none}.cabine-gesture-fill:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#fff;opacity:.85}
.cabine-gesture-shortcuts{display:flex;gap:14px;flex-wrap:wrap}.cabine-gesture-macro-row{display:flex;align-items:center;gap:5px;min-width:0;font:9px var(--mono);color:#ff83b9;flex:1}.cabine-gesture-macro-row .play-toggle{flex:1;min-width:0;padding:4px;font-size:10px}
@media(max-height:520px){.cabine-route-inspector{margin-top:8px;padding-top:6px}.cabine-route-name{font-size:9px}.cabine-depth-dial{width:38px;height:38px}.cabine-depth-dial:before{left:16px;top:4px;transform-origin:1px 13px;height:12px}#view:has(>.cabine-local-console)>.cabine-gesture-surface{gap:8px;padding:6px}.cabine-gesture-strips{gap:6px}.cabine-gesture-field{gap:4px;font-size:9px}.cabine-gesture-field output{height:24px;font-size:9px}.cabine-gesture-shortcuts{gap:8px}.cabine-gesture-macro-row{font-size:8px}.cabine-gesture-macro-row .play-toggle{min-height:30px;font-size:9px}}
@media(max-width:599px) and (min-height:521px){#view:has(>.cabine-local-console)>.cabine-gesture-surface{grid-column:1;grid-row:2/-1}.cabine-gesture-strips{gap:4px}.cabine-gesture-field{font-size:8px}.cabine-gesture-field output{font-size:8px}.cabine-gesture-shortcuts{flex-direction:column}.cabine-route-inspector{margin-top:4px}.cabine-depth-controls{grid-template-columns:44px 1fr auto}.cabine-depth-controls>button{grid-column:auto}}
/* DRUMS: read accent as a strip across the step, separate from the white playhead. */
.cabine-sequencing .cabine-pad[data-accent]::after{left:3px;right:3px;bottom:3px;width:calc((100% - 6px)*var(--accent-amount,0));height:3px;max-height:none;opacity:.95;background:var(--pad-color);border-radius:2px;pointer-events:none}
.cabine-gesture-strip.bipolar:before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px solid #bac4aa;z-index:1;pointer-events:none}
@media(max-height:520px){
 .cabine-local-console:has(.cabine-route-inspector) .cabine-surfaces{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cabine-local-console:has(.cabine-route-inspector) .perform-note{display:none}
 .cabine-route-inspector .cabine-depth-controls{grid-template-columns:38px minmax(0,1fr) 38px;gap:4px}
 .cabine-route-inspector .cabine-depth-controls>button{grid-column:auto;min-width:0;padding:3px;font-size:9px}
 .cabine-route-inspector .cabine-depth-controls>output{font-size:11px}
}
#view:has(>.cabine-local-console)>.cabine-drum-legend{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:center;font:9px var(--mono);text-align:center;min-width:0}
.cabine-drum-legend span{padding:3px;min-width:0;overflow-wrap:anywhere}.cabine-drum-legend .selected{background:#202710;border-radius:3px}
.cabine-sequencing .cabine-pad.cursor[data-accent]::after{background:#111}
@media(max-width:599px) and (min-height:521px){#view:has(>.cabine-local-console)>.cabine-drum-legend{grid-column:1;grid-row:2;font-size:8px}}
.cabine-more{margin-top:10px}.cabine-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:32px;box-sizing:border-box}.cabine-more>summary:after{content:'⌄';margin-left:auto}.cabine-more[open]>.cabine-tools{margin-top:8px!important}.cabine-more .perform-note{margin-top:8px}
@media(max-height:520px){.cabine-sequencing .cabine-local-console .cabine-surfaces{grid-template-columns:repeat(3,minmax(0,1fr))}.cabine-more{margin-top:6px}}

@media(max-height:520px){.cabine-sequencing .cabine-more{margin-top:2px}}
.cabine-user[data-gesture-hint]:not(:disabled):after{content:attr(data-gesture-hint);position:absolute;bottom:3px;right:4px;font:7px var(--mono);letter-spacing:.04em;color:var(--pad-color);opacity:.85;pointer-events:none}
#view:has(>.cabine-local-console) .cabine-user:not(:disabled){padding-bottom:13px}.cabine-user.active[data-behavior=hold]{box-shadow:inset 0 0 0 2px var(--pad-color)}
.cabine-local-console .cabine-tools>.cabine-browse{flex-basis:100%;color:var(--accent);border-color:#839d20;white-space:normal}
@media(max-height:520px){.cabine-user[data-gesture-hint]:not(:disabled):after{font-size:6px;bottom:2px}#view:has(>.cabine-local-console) .cabine-user:not(:disabled){padding-bottom:10px;font-size:8px}}
.cabine-user-views{display:flex;gap:4px;flex:1 0 100%;min-width:0}.cabine-user-views .play-toggle{flex:1;min-width:0;font-size:9px;padding:4px}
#view:has(>.cabine-local-console)>.cabine-user-deck{grid-column:2;grid-row:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:2px;box-sizing:border-box}
#view>.cabine-user-deck[hidden],#view>.cabine-grid[hidden],#view>.cabine-headers[hidden]{display:none!important}
.cabine-user-group{padding:8px;background:#0b0e08;border:1px solid #303725;border-radius:5px;min-width:0}.cabine-user-group h3{margin:0 0 8px;font:10px var(--mono);color:#b5c3a1;font-weight:400;letter-spacing:.04em}.cabine-user-actions{display:flex;gap:5px;min-width:0}
#view:has(>.cabine-local-console) .cabine-user-deck .cabine-user{flex:1;min-width:0;min-height:46px;height:auto;aspect-ratio:auto;font:10px/1.3 var(--mono);padding:6px 4px 15px;white-space:normal;overflow-wrap:anywhere}
.user-group-macros,.user-group-throws{grid-column:1/-1}.user-group-macros>.cabine-user-actions{display:flex;flex-direction:column;gap:6px}.cabine-user-macro-row{display:grid;grid-template-columns:66px repeat(8,minmax(0,1fr));gap:5px;align-items:stretch}.cabine-user-macro-row>span{align-self:center;color:#ff83b9;font:9px var(--mono)}
#view:has(>.cabine-local-console) .cabine-user-macro-row .cabine-user{min-height:40px;padding:5px 3px 13px}
@media(max-height:520px){.cabine-user-group{padding:5px}.cabine-user-group h3{font-size:9px;margin-bottom:5px}#view:has(>.cabine-local-console)>.cabine-user-deck{gap:6px}.cabine-user-actions{gap:3px}.cabine-user-macro-row{grid-template-columns:50px repeat(8,minmax(0,1fr));gap:3px}.cabine-user-macro-row>span{font-size:8px}#view:has(>.cabine-local-console) .cabine-user-deck .cabine-user{min-height:38px;font-size:9px;padding:4px 2px 11px}#view:has(>.cabine-local-console) .cabine-user-macro-row .cabine-user{min-height:36px}.user-group-macros>.cabine-user-actions{gap:3px}}
@media(max-width:599px) and (min-height:521px){#view:has(>.cabine-local-console)>.cabine-user-deck{grid-column:1;grid-row:2/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.cabine-user-group{padding:5px}.user-group-macros,.user-group-throws{grid-column:1/-1}.cabine-user-macro-row{grid-template-columns:40px repeat(8,minmax(0,1fr));gap:2px}.cabine-user-macro-row>span{font-size:7px}#view:has(>.cabine-local-console) .cabine-user-macro-row .cabine-user{font-size:8px;padding:3px 1px 12px}.cabine-user-macro-row .cabine-user:after{font-size:5px;right:1px}.user-group-throws>.cabine-user-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Let the controls occupy the performance area instead of leaving a large unused panel. */
#view:has(>.cabine-local-console)>.cabine-user-deck{grid-template-rows:minmax(70px,.8fr) minmax(180px,2fr) minmax(62px,.8fr);align-content:stretch}
.cabine-user-group{display:flex;flex-direction:column;min-height:0}.cabine-user-group h3{flex:none}.cabine-user-group>.cabine-user-actions{flex:1;min-height:0}.user-group-macros>.cabine-user-actions{display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}
@media(max-width:599px) and (min-height:521px){#view:has(>.cabine-local-console)>.cabine-user-deck{grid-template-rows:auto auto minmax(180px,1fr) auto}.user-group-throws>.cabine-user-actions{min-height:90px}}
@media(max-height:520px){.instrument-app .cabine-local-console:has(.cabine-user-views) .cabine-tools>button{min-height:32px;padding:4px;font-size:9px}.cabine-local-console:has(.cabine-user-views) .perform-note{font-size:9px}}
@media(max-width:599px) and (min-height:521px){
 .user-group-tap>.cabine-user-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .user-group-throws>.cabine-user-actions{min-height:128px;grid-auto-rows:minmax(64px,auto)}
 #view:has(>.cabine-local-console) .user-group-throws .cabine-user{min-height:64px}
}