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

/* Keep time and loop controls close to the output strip. */
#practiceView .player{padding-bottom:10px}
#practiceView .player .output-meter{margin-bottom:12px}
#practiceView .timeline-footer{margin:0;min-height:30px;gap:12px;font-size:12px}
#practiceView .timeline-footer .pill{min-height:30px;padding:4px 10px;font-size:12px;line-height:1.2}
@media(max-width:760px){#practiceView .timeline-footer .pill{min-height:44px}#practiceView .player{padding-bottom:8px}}
#practiceView .region{z-index:4;pointer-events:none}
#practiceView .loop-handle{position:absolute;top:0;bottom:0;width:20px;pointer-events:auto;touch-action:none;cursor:ew-resize;outline-offset:1px}
#practiceView .loop-handle-a{left:-10px}
#practiceView .loop-handle-b{right:-10px}
#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}
#practiceView .loop-handle:hover::after,#practiceView .loop-handle:focus-visible::after{background:#ffe09a}

/* The key note sits inline now that the pitch slider has its row. */
#practicePanel .pitch-note-inline{color:#5eead4}.practice #practicePanel .pitch-note-inline{color:var(--practice-gold-light)}
@media(max-width:760px){#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). */
#practiceView .region::before,#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}
#practiceView .region::before{left:-4px}
#practiceView .region::after{right:-4px}
@media(pointer:coarse){#practiceView .region::before,#practiceView .region::after{width:10px;height:24px}#practiceView .region::before{left:-6px}#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. */
#practiceView .region.clip-a::before,#practiceView .region.clip-b::after{display:none}