/* 0.9ap - authoritative shared toolbar layout for all practice routes.
   Only one physical set of controls exists. These rules deliberately override
   historical practice display modes and their positional grid overrides. */
#practice-view .practice-transport.shared-practice-toolbar,
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar,
#practice-view.is-fullscreen.menu-hidden .practice-transport.shared-practice-toolbar,
#practice-view.touch-inpage .practice-transport.shared-practice-toolbar {
 display:flex!important; flex-flow:row nowrap!important; align-items:center!important;
 justify-content:flex-start!important; gap:8px!important; grid-template-columns:none!important;
 grid-template-rows:none!important; grid-template-areas:none!important;
 min-width:0!important; width:100%!important; padding:0!important; margin:0!important;
 overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:thin;
 border:0!important; box-sizing:border-box!important;
}
#practice-view .practice-transport.shared-practice-toolbar::before,
#practice-view .practice-transport.shared-practice-toolbar::after{content:none!important;display:none!important}
#practice-view .practice-transport.shared-practice-toolbar>.shared-control:not(.persistent-tempo){
 grid-area:auto!important; grid-column:auto!important;grid-row:auto!important;
 position:static!important; flex:0 0 56px!important; min-width:56px!important;
 width:56px!important; max-width:56px!important; min-height:56px!important;height:56px!important;
 padding:5px!important; margin:0!important;border-radius:10px!important;
 align-items:center!important;justify-content:center!important;font-size:20px!important;
 box-sizing:border-box!important;white-space:nowrap!important;
}
#practice-view .practice-transport.shared-practice-toolbar>.quick-count input,
#practice-view .practice-transport.shared-practice-toolbar>.persistent-hear input{
 position:absolute!important;opacity:0!important;width:100%!important;height:100%!important;
 inset:0!important;margin:0!important;cursor:pointer!important;
}
#practice-view .practice-transport.shared-practice-toolbar>.quick-count,
#practice-view .practice-transport.shared-practice-toolbar>.persistent-hear {position:relative!important;cursor:pointer!important}
#practice-view .practice-transport.shared-practice-toolbar>.quick-count span,
#practice-view .practice-transport.shared-practice-toolbar>.persistent-hear span{font-size:20px!important;font-weight:800!important}
#practice-view .practice-transport.shared-practice-toolbar>.persistent-tempo,
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar>.persistent-tempo{
 grid-area:auto!important;grid-column:auto!important;grid-row:auto!important;
 flex:0 0 184px!important; width:184px!important; min-width:184px!important;
 max-width:184px!important; margin:0 0 0 auto!important; padding:0!important;
 display:inline-flex!important;justify-content:space-between!important;align-items:center!important;
 min-height:56px!important;border:0!important;background:transparent!important;
}
#practice-view .practice-transport.shared-practice-toolbar>.persistent-tempo::before{display:none!important}
#practice-view .practice-transport.shared-practice-toolbar>.persistent-tempo>button{
 min-width:52px!important;width:52px!important;max-width:52px!important;
 min-height:56px!important;height:56px!important;padding:0!important;margin:0!important;
 font-size:20px!important;border-radius:10px!important;
}
#practice-view .practice-transport.shared-practice-toolbar>.persistent-tempo>#practice-bpm{white-space:nowrap!important;font-size:16px!important}
body[data-shared-toolbar-mode="manual"] #practice-view .practice-transport.shared-practice-toolbar>:is(#practice-note-choose,#practice-rhythm-choose),
body[data-shared-toolbar-mode="progressive"] #practice-view .practice-transport.shared-practice-toolbar>#practice-progressive-hide{
 display:inline-flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
}
body[data-shared-toolbar-mode="progressive"] #practice-view .practice-transport.shared-practice-toolbar>:is(#practice-note-choose,#practice-rhythm-choose),
body:not([data-shared-toolbar-mode="progressive"]) #practice-view .practice-transport.shared-practice-toolbar>#practice-progressive-hide,
body:not([data-shared-toolbar-mode="manual"]) #practice-view .practice-transport.shared-practice-toolbar>:is(#practice-note-choose,#practice-rhythm-choose){
 display:none!important;visibility:hidden!important;pointer-events:none!important;
}
@media(max-width:800px){
 #practice-view .practice-transport.shared-practice-toolbar{gap:5px!important}
 #practice-view .practice-transport.shared-practice-toolbar>.shared-control:not(.persistent-tempo){flex-basis:46px!important;width:46px!important;min-width:46px!important;max-width:46px!important;height:48px!important;min-height:48px!important}
 #practice-view .practice-transport.shared-practice-toolbar>.persistent-tempo{flex-basis:152px!important;width:152px!important;min-width:152px!important}
 #practice-view .practice-transport.shared-practice-toolbar>.persistent-tempo>button{width:44px!important;min-width:44px!important;max-width:44px!important;height:48px!important;min-height:48px!important}
}

/* 0.9aq: button dimensions and order are authoritative, regardless of fullscreen mode. */
#practice-view .practice-transport.shared-practice-toolbar > button:is(#practice-note-choose,#practice-rhythm-choose,#practice-progressive-hide),
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar > button:is(#practice-note-choose,#practice-rhythm-choose,#practice-progressive-hide),
#practice-view.touch-inpage .practice-transport.shared-practice-toolbar > button:is(#practice-note-choose,#practice-rhythm-choose,#practice-progressive-hide){
 flex:0 0 56px!important; width:56px!important; min-width:56px!important; max-width:56px!important;
 height:56px!important;min-height:56px!important;max-height:56px!important;
 padding:0!important; margin:0!important;line-height:1!important;align-self:center!important;
 box-sizing:border-box!important;position:static!important;
}
#practice-view .practice-transport.shared-practice-toolbar>#practice-generate{order:1!important}
#practice-view .practice-transport.shared-practice-toolbar>#play{order:2!important}
#practice-view .practice-transport.shared-practice-toolbar>#stop{order:3!important}
#practice-view .practice-transport.shared-practice-toolbar>#practice-note-choose{order:4!important}
#practice-view .practice-transport.shared-practice-toolbar>#practice-rhythm-choose{order:5!important}
#practice-view .practice-transport.shared-practice-toolbar>#practice-progressive-hide{order:4!important}
#practice-view .practice-transport.shared-practice-toolbar>.quick-count{order:6!important}
#practice-view .practice-transport.shared-practice-toolbar>.persistent-hear{order:7!important}
#practice-view .practice-transport.shared-practice-toolbar>#practice-path-edit{order:8!important}
#practice-view .practice-transport.shared-practice-toolbar>.persistent-tempo{order:9!important}
#practice-view #quick-rhythm-apply{display:none!important}
#practice-view .quick-rhythm-mode{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 14px;font-weight:700}
#practice-view .quick-rhythm-mode select{min-width:220px;max-width:100%;font-weight:600}
/* H owns only the Progressive panel display, never its skills or generation state. */
body[data-shared-toolbar-mode="progressive"] #practice-view.shared-progressive-skills-visible #pathway-toolbar,
body[data-shared-toolbar-mode="progressive"] #practice-view.is-fullscreen.shared-progressive-skills-visible #pathway-toolbar{
 display:block!important;visibility:visible!important;max-height:none!important;overflow:visible!important;
 background:#edf5ef!important;padding:8px 12px!important;
}
body[data-shared-toolbar-mode="progressive"] #practice-view.shared-progressive-skills-visible #pathway-toolbar #independent-practice-bar{
 display:block!important;visibility:visible!important;max-height:none!important;opacity:1!important;
}
#practice-view.progressive-panel-collapsed #pathway-toolbar{display:none!important}
@media(max-width:800px){
 #practice-view .practice-transport.shared-practice-toolbar > button:is(#practice-note-choose,#practice-rhythm-choose,#practice-progressive-hide){
 flex-basis:46px!important;width:46px!important;min-width:46px!important;max-width:46px!important;height:48px!important;min-height:48px!important;max-height:48px!important}
}

/* 0.9ar: one exact button box model, including route-specific controls. */
#practice-view .practice-transport.shared-practice-toolbar > :is(button.shared-control,.quick-count.shared-control,.persistent-hear.shared-control){
 flex:0 0 56px!important;inline-size:56px!important;min-inline-size:56px!important;max-inline-size:56px!important;
 block-size:56px!important;min-block-size:56px!important;max-block-size:56px!important;
 box-sizing:border-box!important;padding:0!important;margin:0!important;align-self:center!important;
 line-height:1!important;display:inline-flex;align-items:center!important;justify-content:center!important;
}
#practice-view .practice-transport.shared-practice-toolbar>#practice-time-choose {order:6!important;}
#practice-view .practice-transport.shared-practice-toolbar>#practice-key-choose {order:7!important;}
#practice-view .practice-transport.shared-practice-toolbar>.quick-count {order:8!important;}
#practice-view .practice-transport.shared-practice-toolbar>.persistent-hear {order:9!important;}
#practice-view .practice-transport.shared-practice-toolbar>#practice-path-edit {order:10!important;}
#practice-view .practice-transport.shared-practice-toolbar>.persistent-tempo {order:11!important;}
/* A real internal scroller for the expanded NRTK skills panel. */
body[data-shared-toolbar-mode="progressive"] #practice-view.shared-progressive-skills-visible #pathway-toolbar{
 max-height:min(67vh,720px)!important;overflow-y:auto!important;overflow-x:hidden!important;
 overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
}
body[data-shared-toolbar-mode="progressive"] #practice-view.shared-progressive-skills-visible #independent-practice-bar{
 max-height:none!important;overflow:visible!important;
}
#practice-view #practice-signature-panel {position:absolute;z-index:100;top:94px;left:12px;width:min(540px,calc(100% - 24px));
 background:#f7faf8;border:1px solid #b1cdbd;box-shadow:0 14px 30px #0003;border-radius:13px;padding:18px;color:#18453d;}
#practice-view #practice-signature-panel[hidden]{display:none!important}
#practice-signature-panel .signature-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
#practice-signature-panel label{display:grid;gap:7px;margin:8px 0}
#practice-signature-panel select,#practice-signature-panel input{max-width:100%;width:100%;padding:10px;border:1px solid #b1cdbd;border-radius:7px}
@media(max-width:800px){#practice-view .practice-transport.shared-practice-toolbar > :is(button.shared-control,.quick-count.shared-control,.persistent-hear.shared-control){
 flex-basis:46px!important;inline-size:46px!important;min-inline-size:46px!important;max-inline-size:46px!important;
 block-size:48px!important;min-block-size:48px!important;max-block-size:48px!important;}}

/* 0.9as: one measured square for every icon in all routes.
   Override historical ID-specific button heights, min/max and margins. */
#practice-view .practice-transport.shared-practice-toolbar > :is(button.shared-control, label.quick-count.shared-control, label.persistent-hear.shared-control):not(.persistent-tempo),
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar > :is(button.shared-control, label.quick-count.shared-control, label.persistent-hear.shared-control):not(.persistent-tempo) {
  flex:0 0 56px!important; width:56px!important; min-width:56px!important; max-width:56px!important;
  height:56px!important; min-height:56px!important; max-height:56px!important;
  padding:0!important; margin:0!important; box-sizing:border-box!important;
  line-height:1!important; border-radius:10px!important; align-self:center!important;
  display:inline-flex!important; justify-content:center!important; align-items:center!important;
  appearance:none; -webkit-appearance:none; font-size:20px!important;
}
/* Visibility is exclusively route-managed by the shared toolbar JS. */
#practice-view .practice-transport.shared-practice-toolbar > [hidden] {display:none!important;}
@media(max-width:800px){
 #practice-view .practice-transport.shared-practice-toolbar > :is(button.shared-control,label.quick-count.shared-control,label.persistent-hear.shared-control):not(.persistent-tempo),
 #practice-view.is-fullscreen .practice-transport.shared-practice-toolbar > :is(button.shared-control,label.quick-count.shared-control,label.persistent-hear.shared-control):not(.persistent-tempo) {
  flex:0 0 46px!important; width:46px!important; min-width:46px!important; max-width:46px!important;
  height:48px!important; min-height:48px!important; max-height:48px!important;
 }
}
/* Keep the pathway-toolbar as an unbounded wrapper; scroll the actual NRTK content.
   iPad Safari requires a constrained height on the element receiving touch scroll. */
body[data-shared-toolbar-mode="progressive"] #practice-view.shared-progressive-skills-visible #pathway-toolbar {
  overflow:visible!important;max-height:none!important;min-height:0!important;touch-action:auto!important;
}
body[data-shared-toolbar-mode="progressive"] #practice-view.shared-progressive-skills-visible #pathway-toolbar #independent-practice-bar {
 display:block!important;position:relative!important;
 height:auto!important; max-height:min(62dvh,580px)!important; min-height:0!important;
 overflow-y:auto!important;overflow-x:hidden!important;
 overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
 scrollbar-width:thin; box-sizing:border-box!important;
}
body[data-shared-toolbar-mode="progressive"] #practice-view.shared-progressive-skills-visible #independent-practice-bar .independent-bar-heading {
 position:sticky!important;top:0!important;z-index:2!important;background:#edf5f1!important;
}

/* 0.9at - match the compact C button, not the larger legacy selector buttons. */
#practice-view .practice-transport.shared-practice-toolbar > .shared-control:not(.persistent-tempo){
 border-width:1px!important; box-shadow:none!important; outline-offset:0!important;
}

/* 0.9au: all compact toolbar controls share one visible border treatment.
   C/Hear instruments previously inherited an extra coloured ring from their toggle styles.
   Preserve background-fill state and keyboard focus indicators. */
#practice-view .practice-transport.shared-practice-toolbar > :is(
  button.shared-control, .quick-count.shared-control, .persistent-hear.shared-control
):not(.persistent-tempo),
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar > :is(
  button.shared-control, .quick-count.shared-control, .persistent-hear.shared-control
):not(.persistent-tempo) {
  border:1px solid #a5c0b8!important;
  outline:none!important;
  box-shadow:none!important;
  background-clip:padding-box!important;
}
#practice-view .practice-transport.shared-practice-toolbar > :is(
  button.shared-control, .quick-count.shared-control, .persistent-hear.shared-control
):not(.persistent-tempo):focus-visible {
  outline:3px solid #e3b557!important;
  outline-offset:2px!important;
}

/* 0.9az: tempo belongs to the far-right edge of the full-screen transport.
   The same DOM node, so BPM +/- and display continue to work as before. */
#practice-view .practice-transport.shared-practice-toolbar > .persistent-tempo,
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar > .persistent-tempo,
#practice-view.touch-inpage .practice-transport.shared-practice-toolbar > .persistent-tempo {
  order:999!important;
  margin-inline-start:auto!important;
  margin-inline-end:0!important;
  flex-shrink:0!important;
}

/* 0.9be: One dark toolbar, no white sticky BPM capsule. The JS sizes the
   original BPM controls and all icons as a unit when the iPad rotates. */
#practice-view .practice-transport.shared-practice-toolbar > .persistent-tempo,
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar > .persistent-tempo {
 position:relative!important;right:auto!important;flex-shrink:0!important;
 background:transparent!important;border:0!important;box-shadow:none!important;
 overflow:visible!important;z-index:auto!important;
}
#practice-view .practice-transport.shared-practice-toolbar > .persistent-tempo > #practice-bpm,
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar > .persistent-tempo > #practice-bpm {
 color:#f5f6ee!important; background:transparent!important;
 display:block!important;opacity:1!important;white-space:nowrap!important;
}
#practice-view .practice-transport.shared-practice-toolbar > .persistent-tempo > :is(#tempo-down,#tempo-up),
#practice-view.is-fullscreen .practice-transport.shared-practice-toolbar > .persistent-tempo > :is(#tempo-down,#tempo-up) {
 flex-shrink:0!important;box-sizing:border-box!important;
}

/* 0.9be: Match the N / R / T / K progression in Build. */
#practice-view .practice-transport.shared-practice-toolbar > #practice-time-choose {order:6!important}
#practice-view .practice-transport.shared-practice-toolbar > #practice-key-choose {order:7!important}