/* Compact practice controls, preserving the gold console's visual language. */
:where(#stemRoom) #practicePanel{padding:20px}
:where(#stemRoom) #practicePanel>.panel-heading{margin-bottom:12px}
:where(#stemRoom) #practicePanel>.panel-heading h2{margin:0;font-size:20px}
:where(#stemRoom) #practicePanel .adjustments{gap:12px}
:where(#stemRoom) #practicePanel .adjust-card{padding:8px 12px 10px;border-radius:10px}
:where(#stemRoom) #practicePanel .control-title{padding:0;font-size:12px;min-height:30px}
:where(#stemRoom) #practicePanel .control-title .text-btn{min-height:30px;padding:4px 0 4px 10px}
:where(#stemRoom) #practicePanel .number-control{margin:0;gap:8px}
:where(#stemRoom) #practicePanel .number-control button{height:44px;width:44px;min-height:44px;font-size:22px}
:where(#stemRoom) #practicePanel .number-control output{font-size:30px;line-height:1.2;letter-spacing:-1px}
:where(#stemRoom) #practicePanel .number-control output span{font-size:13px}
:where(#stemRoom) #practicePanel .adjust-card input[type=range]{height:28px;display:block}
:where(#stemRoom) #practicePanel .pitch-note{height:28px;font-size:11px}
:where(#stemRoom) #practicePanel .adjust-card p{font-size:10px;margin:0;line-height:1.4}
:where(#stemRoom) #practicePanel .section-heading{margin:12px 0 6px;min-height:36px}
:where(#stemRoom) #practicePanel .section-heading h3{font-size:14px;margin:0}
:where(#stemRoom) #practicePanel .section-heading button{min-height:36px;padding:6px 0 6px 8px;font-size:12px}
:where(#stemRoom) #practicePanel .sections{gap:5px}
:where(#stemRoom) #practicePanel .section-row{padding:0;gap:0;border-radius:8px}
:where(#stemRoom) #practicePanel .section-jump{min-height:44px;padding:6px 10px;gap:10px;border-radius:7px}
:where(#stemRoom) #practicePanel .section-jump strong{font-size:12px}
:where(#stemRoom) #practicePanel .edit-section{min-height:44px;padding:6px 12px;font-size:11px}
:where(#stemRoom) #practicePanel .count-row{margin-top:12px;padding-top:10px}
:where(#stemRoom) #practicePanel .count-row p{display:inline;margin-left:8px;font-size:10px}
:where(#stemRoom) #practicePanel .count-row select{min-height:36px;padding:6px 10px;font-size:12px}
:where(#stemRoom) #practicePanel .preview-note{margin-top:12px;font-size:10px;line-height:1.5}
@media(max-width:760px){:where(#stemRoom) #practicePanel{padding:16px}:where(#stemRoom) #practicePanel .control-title .text-btn,:where(#stemRoom) #practicePanel .section-heading button,:where(#stemRoom) #practicePanel .count-row select{min-height:44px}:where(#stemRoom) #practicePanel .count-row p{display:block;margin:2px 0 0}:where(#stemRoom) #practicePanel .adjustments{gap:8px}:where(#stemRoom) #practicePanel .adjust-card{padding:6px 8px 8px}}

/* Keep the reset and slider hit areas comfortable on touch screens. */
@media(max-width:760px),(pointer:coarse){
 :where(#stemRoom) #practicePanel .control-title .text-btn{min-width:44px;min-height:44px;padding-inline:4px}
 :where(#stemRoom) #practicePanel .adjust-card input[type=range]{height:44px}
}
/* Keep time and loop controls close to the output strip. */
:where(#stemRoom) #practiceView .player{padding-bottom:10px}
:where(#stemRoom) #practiceView .player .output-meter{margin-bottom:12px}
:where(#stemRoom) #practiceView .timeline-footer{margin:0;min-height:30px;gap:12px;font-size:12px}
:where(#stemRoom) #practiceView .timeline-footer .pill{min-height:30px;padding:4px 10px;font-size:12px;line-height:1.2}
@media(max-width:760px){:where(#stemRoom) #practiceView .timeline-footer .pill{min-height:44px}:where(#stemRoom) #practiceView .player{padding-bottom:8px}}
:where(#stemRoom) #practiceView .region{z-index:4;pointer-events:none}
:where(#stemRoom) #practiceView .loop-handle{position:absolute;top:0;bottom:0;width:20px;pointer-events:auto;touch-action:none;cursor:ew-resize;outline-offset:1px}
:where(#stemRoom) #practiceView .loop-handle-a{left:-10px}
:where(#stemRoom) #practiceView .loop-handle-b{right:-10px}
:where(#stemRoom) #practiceView .loop-handle::after{content:'';position:absolute;left:7px;top:0;width:6px;height:18px;background:#d4a84b;border-radius:2px;box-shadow:0 0 0 1px #17130b}
:where(#stemRoom) #practiceView .loop-handle:hover::after,:where(#stemRoom) #practiceView .loop-handle:focus-visible::after{background:#ffe09a}

/* The key note sits inline now that the pitch slider has its row. */
:where(#stemRoom) #practicePanel .pitch-note-inline{color:#5eead4}:where(#stemRoom) .practice #practicePanel .pitch-note-inline{color:var(--practice-gold-light)}
@media(max-width:760px){:where(#stemRoom) #practicePanel .pitch-help{display:none}}
/* Grab tabs on the loop edges: the visible target for the drag-to-resize gesture (hit testing lives in the shared waveform handler). */
:where(#stemRoom) #practiceView .region::before,:where(#stemRoom) #practiceView .region::after{content:'';position:absolute;top:0;width:6px;height:18px;background:#d4a84b;border-radius:2px;box-shadow:0 0 0 1px #17130b;pointer-events:none}
:where(#stemRoom) #practiceView .region::before{left:-4px}
:where(#stemRoom) #practiceView .region::after{right:-4px}
@media(pointer:coarse){:where(#stemRoom) #practiceView .region::before,:where(#stemRoom) #practiceView .region::after{width:10px;height:24px}:where(#stemRoom) #practiceView .region::before{left:-6px}:where(#stemRoom) #practiceView .region::after{right:-6px}}
/* An edge outside the zoomed view has no tab: the box is clipped there, and a tab at the view boundary would not resize anything. */
:where(#stemRoom) #practiceView .region.clip-a::before,:where(#stemRoom) #practiceView .region.clip-b::after{display:none}
/* The beat grid on the waveform: faint bar lines, the numbered ones a little stronger with their number at the foot,
   and beat ticks along the top once zoomed in. Under the loop region and the playhead, and never in the way of a drag. */
:where(#stemRoom) #practiceView .beat-grid{position:absolute;inset:0;overflow:hidden;pointer-events:none}
:where(#stemRoom) #practiceView .beat-grid i{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:#f0f3ef1f}
:where(#stemRoom) #practiceView .beat-grid i.phrase{background:#f0f3ef40}
:where(#stemRoom) #practiceView .beat-grid i.beat{bottom:auto;height:7px;background:#f0f3ef59}
:where(#stemRoom) #practiceView .beat-grid i[data-n]::after{content:attr(data-n);position:absolute;bottom:2px;left:3px;font:9px/1 'Space Mono',monospace;color:#a5b3aecc}
:where(#stemRoom) #practiceView .grid-note{position:absolute;top:4px;left:6px;z-index:2;padding:2px 5px;border-radius:4px;background:#182022d9;font:10px/1.3 'Space Mono',monospace;color:#a5b3ae;pointer-events:none}
/* The loop row: the Loop button, then ½ ×2 ◀ ▶ while it is on. On a phone the steps take their own row. */
:where(#stemRoom) #practiceView .loop-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
:where(#stemRoom) #practiceView .loop-steps{display:flex;gap:4px}
:where(#stemRoom) #practiceView .loop-step{min-width:34px;min-height:30px;padding:4px 8px;border-radius:22px;border-color:#d4a84b55;background:#211d16;color:var(--practice-gold-light);font:12px/1.2 system-ui}
:where(#stemRoom) #practiceView .loop-step:focus-visible,:where(#stemRoom) #practiceView .loop-snap:focus-visible{outline-color:var(--practice-gold-light)}
/* Snap: a switch, gold while on, quiet while off (not the room's mint pressed buttons). */
:where(#stemRoom) #practiceView .loop-snap{min-height:30px;padding:4px 10px;border-radius:22px;font:12px/1.2 system-ui}
:where(#stemRoom) #practiceView .loop-snap[aria-pressed=true]{background:#2a2416;border-color:var(--practice-gold);color:var(--practice-gold-light)}
:where(#stemRoom) #practiceView .loop-snap[aria-pressed=false]{background:transparent;border-color:#d4a84b40;color:#a5b3ae}
:where(#stemRoom) #practiceView .loop-snap::before{content:'';display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border-radius:50%;border:1px solid currentColor;vertical-align:middle}
:where(#stemRoom) #practiceView .loop-snap[aria-pressed=true]::before{background:var(--practice-gold-light)}
/* After the pressed states (same specificity): a hovered Snap, on or off, shows its gold border. */
@media(hover:hover){:where(#stemRoom) #practiceView .loop-step:hover:not(:disabled),:where(#stemRoom) #practiceView .loop-snap:hover{border-color:var(--practice-gold)}}
@media(max-width:760px){:where(#stemRoom) #practiceView .timeline-footer{flex-wrap:wrap;row-gap:8px}:where(#stemRoom) #practiceView .loop-controls{display:contents}:where(#stemRoom) #practiceView .loop-steps{flex:1 0 100%;justify-content:flex-end}:where(#stemRoom) #practiceView .loop-step{min-height:44px;flex:0 1 56px}:where(#stemRoom) #practiceView .loop-snap{min-height:44px;margin-right:auto}}