.ex-layout { display:grid; gap:10px; width:min(100%,850px); margin-inline:auto; min-width:0; }
body:not(.is-native-app).exercises-active .main-view-heading-content { width:min(100%,850px); }
.ex-controls.control-block { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:12px; min-width:0; }
.ex-filter-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(var(--ex-type-width,0px),.9fr) minmax(0,1.7fr); gap:9px; min-width:0; }
.ex-exercise-field { display:grid; gap:5px; min-width:0; }
.ex-exercise-heading, .ex-exercise-label { display:flex; align-items:center; gap:8px; min-width:0; }
.ex-exercise-heading { display:grid; grid-template-columns:minmax(max-content,1fr) max-content minmax(max-content,1fr); gap:5px; min-height:36px; }
.ex-exercise-label { justify-self:start; white-space:nowrap; }
.ex-exercise-field .ex-favorites { justify-self:end; white-space:nowrap; }
/* Long translations keep the button text, using a second row only if needed. */
.ex-exercise-heading.is-wrapped { grid-template-columns:minmax(0,1fr) max-content; }
.ex-exercise-heading.is-wrapped .ex-favorites { grid-column:2; grid-row:1; }
.ex-exercise-heading.is-wrapped .ex-discovery-actions { grid-column:1/-1; grid-row:2; justify-self:center; }
.ex-discovery-actions { display:flex; align-items:center; justify-self:center; gap:6px; }
.ex-reset-label { display:none; }
/* Reserve both counters independently of the current result count or index. */
.ex-result-count { inline-size:var(--ex-count-width,9ch); flex:none; font:500 10px/1 var(--sans-stack); font-variant-numeric:tabular-nums; letter-spacing:0; color:var(--muted); white-space:nowrap; }
/* Allow rapid stepping without waiting for a possible double-tap zoom. */
.ex-exercise-step { touch-action:manipulation; }
.ex-exercise-row { display:grid; grid-template-columns:32px minmax(0,1fr) 32px 32px; gap:6px; align-items:center; margin-top:3px; }
.ex-exercise-field.has-inline-actions .ex-exercise-heading { grid-template-columns:minmax(0,1fr); min-height:0; }
.ex-exercise-field.has-inline-actions .ex-exercise-row { grid-template-columns:32px minmax(0,1fr) 32px 32px max-content max-content; }
/* Native menus retain full labels; closed labels omit stars or enharmonic aliases. */
.ex-picker-value { display:block; min-width:0; height:32px; padding:0 var(--picker-text-inset,22px) 0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid rgba(96,61,36,.22); border-radius:var(--control-shell-radius); background:rgba(255,255,255,.75) var(--picker-chevron-image) right var(--picker-chevron-inset,9px) center / var(--picker-chevron-width,12px) 8px no-repeat; background-origin:border-box; box-shadow:var(--elevation-control),var(--edge-light-control); color:var(--ink); font:500 12px/30px var(--sans-stack); pointer-events:none; }
#exercise-trainer-section :is(.ex-exercise-picker,.ex-key-picker) select { position:absolute; inset:0 var(--control-rail); width:calc(100% - 2 * var(--control-rail)); margin:0; opacity:0; }
#exercise-trainer-section .ex-key-picker select { top:auto; }
:root.keyboard-dropdown-focus :is(.ex-exercise-picker,.ex-key-picker):has(select:focus-visible:not([data-ex-committed])) .ex-picker-value { outline:2px solid var(--accent); outline-offset:2px; }
.ex-exercise-picker:has(select:disabled) .ex-picker-value { opacity:.5; }
.ex-exercise-picker .ex-picker-trigger { position:relative; z-index:1; width:100%; text-align:start; pointer-events:auto; letter-spacing:normal; text-transform:none; cursor:pointer; }
#exercise-trainer-section .ex-exercise-picker select { pointer-events:none; }
.ex-exercise-picker:has(select:disabled) .ex-picker-trigger { opacity:1; }
:root[data-theme='dark'] .ex-picker-value { border-color:rgba(244,238,230,.13); background-color:rgba(43,36,29,.9); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.ex-settings-row { display:grid; grid-template-columns:var(--ex-key-width,52px) var(--ex-guitar-width,96px) minmax(0,1fr); gap:9px; align-items:end; }
.ex-settings-row.is-tempo-wrapped { grid-template-columns:var(--ex-key-width,52px) minmax(var(--ex-guitar-width,96px),1fr); }
.ex-settings-row.is-tempo-wrapped .ex-tempo-field { grid-column:1/-1; }
#exercise-trainer-section .ex-layout .ex-field select { height:32px; min-height:32px; font:500 12px/1.2 var(--sans-stack); text-overflow:ellipsis; }
:root:not(.keyboard-dropdown-focus) #exercise-trainer-section select:focus { outline:none; }
#exercise-trainer-section .ex-layout select[data-ex-committed]:focus { outline:none; }
.ex-stage.progression-scale-card[hidden] { display:none; }
.ex-field { min-width:0; gap:4px; }
.ex-field select { width:100%; min-width:0; padding-block:5px; }
#exercise-trainer-section .ex-filter-menu { width:100%; margin:0; touch-action:manipulation; }
#exercise-trainer-section .ex-filter-trigger { height:32px; min-height:32px; padding-block:0; font:500 12px/30px var(--sans-stack); }
:root:not(.keyboard-dropdown-focus) #exercise-trainer-section .ex-filter-trigger:focus { outline:none; }
.ex-filter-panel { transform:none; max-width:none; min-height:0; }
.ex-filter-panel .mode-dropdown-options { touch-action:pan-y; }
.ex-filter-panel .mode-dropdown-options label { min-height:44px; font:500 12px/1.3 var(--sans-stack); }
.ex-filter-panel input[type='checkbox'] { flex-shrink:0; }
.ex-filter-panel .mode-dropdown-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 10px; padding-top:8px; border-top:1px solid var(--panel-border); }
.ex-filter-bulk-actions,.ex-filter-commit-actions { display:flex; gap:6px; }
.ex-filter-commit-actions { margin-inline-start:auto; }
.ex-filter-panel .ex-filter-action { display:flex; align-items:center; justify-content:center; min-width:52px; min-height:32px; padding:5px 8px; border:1px solid var(--panel-border); border-radius:8px; background:var(--surface-card-muted); box-shadow:none; color:var(--ink); font:600 12px/1.2 var(--sans-stack); letter-spacing:normal; text-transform:none; white-space:nowrap; touch-action:manipulation; }
.ex-filter-panel .ex-filter-action-apply { border-color:var(--accent); background:var(--accent); color:var(--theme-on-accent,var(--page-bg)); }
.ex-filter-panel .ex-filter-action:disabled { border-color:var(--panel-border); background:var(--surface-card-muted); color:var(--muted); cursor:default; }
.ex-filter-panel .ex-filter-action:not(:disabled):active { transform:translateY(1px); }
.ex-goal { margin:0; color:var(--muted); font:11px/1.45 var(--sans-stack); }
.ex-creator-credit { display:inline-block; max-width:100%; vertical-align:top; }
.ex-creator-link { color:var(--accent); font:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; overflow-wrap:anywhere; touch-action:manipulation; }
.ex-creator-link:hover { color:var(--accent-deep); }
.ex-creator-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.ex-icon-button { display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--panel-border); border-radius:var(--action-control-radius,8px); width:32px; min-width:32px; height:32px; min-height:32px; padding:0; color:var(--ink); box-shadow:none; cursor:pointer; }
.ex-icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* Keep gears and favorites consistent across the practice screens. */
.ex-icon-button:is(.scale-highlight-toggle, .ex-star, [data-ex-appearance]) { width:30px; min-width:30px; height:30px; min-height:30px; }
/* Appearance controls share the Exercises gear surface and icon sizing. */
.scale-highlight-toggle.ex-icon-button { --diagram-settings-inset:12px; top:var(--diagram-settings-inset); right:var(--diagram-settings-inset); padding:0; color:var(--ink); }
.scale-highlight-toggle.ex-icon-button circle { fill:none; stroke:currentColor; fill-opacity:1; }
/* The star communicates its state through its fill, without a sticky hover border. */
.ex-icon-button:not(.ex-exercise-step):not(.ex-star):hover:not(:disabled) { background:var(--surface-card-muted); border-color:var(--muted); }
/* Touch browsers can retain :hover after a tap. Only pointers get step hover. */
@media (hover:hover) and (pointer:fine) {
  .ex-exercise-step:hover:not(:disabled) { background:var(--surface-card-muted); border-color:var(--muted); }
}
.ex-icon-button:disabled { opacity:.32; cursor:default; }
.ex-random.ex-icon-button { width:auto; min-width:0; gap:4px; padding:0 4px; border-color:color-mix(in srgb,var(--accent) 34%,transparent); background:color-mix(in srgb,var(--accent) 6%,transparent); color:var(--accent); font:600 11px var(--sans-stack); white-space:nowrap; }
.ex-random.ex-icon-button:hover:not(:disabled) { border-color:color-mix(in srgb,var(--accent) 34%,transparent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
:root:not(.keyboard-dropdown-focus) :is(.ex-discovery-actions button,.ex-exercise-step):focus { outline:none; }
:root:not(.keyboard-dropdown-focus) [data-ex-appearance]:focus { outline:none; }
[data-ex-appearance] { touch-action:manipulation; }
.ex-random.ex-icon-button svg { width:14px; height:14px; }
.ex-playback { display:grid; gap:9px; min-width:0; border-top:1px solid var(--panel-border); padding-top:10px; }
.ex-transport { display:flex; gap:8px; align-items:center; min-width:0; }
.ex-playback-row { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; }
.ex-play.transport-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:74px; width:auto; flex-shrink:0; height:32px; min-height:32px; padding:4px 10px; border-radius:var(--action-control-radius,8px); font:600 12px var(--sans-stack); }
.ex-play-labels { display:inline-grid; place-items:center; }
.ex-play-labels > span { grid-area:1/1; }
.ex-play-size { visibility:hidden; }
.ex-play-size::after { content:attr(data-label); }
.ex-play svg { width:13px; height:13px; fill:currentColor; }
.ex-tempo-controls { display:flex; align-items:center; gap:6px; height:32px; min-width:0; }
.ex-tempo-range { flex:1; min-width:25px; display:flex; align-items:center; height:32px; touch-action:none; user-select:none; }
.ex-tempo-range input { width:100%; min-width:0; margin:0; pointer-events:none; }
#exercise-trainer-section .ex-bpm { flex:0 0 38px; width:38px; min-width:0; height:28px; min-height:28px; padding:2px; text-align:center; background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--panel-border); border-radius:0; box-shadow:none; font:600 14px var(--sans-stack); font-variant-numeric:tabular-nums; appearance:textfield; }
.ex-bpm::-webkit-inner-spin-button, .ex-bpm::-webkit-outer-spin-button { appearance:none; margin:0; }
.ex-toggle-row { display:flex; align-items:center; justify-content:center; gap:3px 10px; flex-wrap:wrap; }
.ex-favorites.arp-check { min-height:32px; color:var(--muted); }
.ex-stage.progression-scale-card { display:grid; gap:8px; padding:8px 14px 14px; min-width:0; margin:0; }
.ex-stage-heading { position:relative; z-index:1; display:grid; grid-template-columns:32px minmax(0,1fr) 32px; align-items:center; gap:8px; font:11px var(--sans-stack); color:var(--muted); }
.ex-stage-titles { position:relative; grid-column:2; align-self:start; min-width:0; text-align:center; }
.ex-scale-title { margin:0; min-width:0; color:var(--ink); font:700 clamp(17px,1.5vw,20px)/1.2 var(--serif-stack); }
/* Use the existing gap above the neck without changing the heading height. */
.ex-exercise-reference { position:absolute; inset-block-start:100%; inset-inline:0; margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font:400 11px/1.2 var(--sans-stack); }
.ex-stage-titles.has-wrapped-title .ex-exercise-reference { margin-top:-1px; font-size:9px; line-height:1; }
.ex-fretboard-wrap { width:min(100%,570px); min-width:0; margin:auto; overflow:visible; overscroll-behavior-x:contain; }
.ex-fretboard-wrap:not(.is-full) { margin-bottom:-10px; }
/* Horizontal scrolling also clips vertical overflow. The high E needs extra
   glow room; overlap that blank area with the heading gap to keep the layout
   compact. Fret numbers already provide most of the room below the low E. */
.ex-fretboard-wrap.is-full { width:100%; max-width:100%; margin-top:-20px; margin-bottom:-4px; padding-block:32px 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.ex-fretboard-wrap.is-full .ex-fretboard { max-width:none; height:220px; }
.ex-fretboard-wrap.is-shape-scroll { max-width:570px; margin-top:-20px; margin-bottom:-4px; padding-block:32px 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.ex-fretboard-wrap.is-shape-scroll .ex-fretboard { max-width:none; }
.ex-fretboard-wrap:is(.is-full,.is-shape-scroll) { touch-action:pan-x pan-y pinch-zoom; user-select:none; -webkit-user-select:none; cursor:grab; }
.ex-fretboard-wrap.is-panning { cursor:grabbing; }
.ex-fretboard-wrap:is(.is-full,.is-shape-scroll).has-scroll-before { --ex-scroll-left:transparent; }
.ex-fretboard-wrap:is(.is-full,.is-shape-scroll).has-scroll-after { --ex-scroll-right:transparent; }
.ex-fretboard-wrap:is(.is-full,.is-shape-scroll) { mask-image:linear-gradient(to right,var(--ex-scroll-left,#000),#000 14px,#000 calc(100% - 14px),var(--ex-scroll-right,#000)); }
.ex-scale-note .scale-dot, .ex-scale-note .arp-note-label { opacity:.48; }
.ex-scale-note .scale-dot.is-practice-active { opacity:1; }
.ex-fretboard-wrap.is-context-off .ex-scale-note { display:none; }
.ex-fretboard-wrap.is-context-off.has-shape-outlines .ex-scale-note.ex-shape-note { display:inline; }
.ex-fretboard-wrap.is-context-filled .ex-scale-note :is(.scale-dot, .arp-note-label) { opacity:1; }
#exercise-scale-appearance .scale-note-preview { width:10px; height:10px; background:currentColor; }
#exercise-scale-appearance .scale-note-preview-subtle { opacity:.48; }
#exercise-scale-appearance .scale-highlight-segments { display:grid; grid-template-columns:repeat(var(--scale-menu-columns,2),minmax(0,1fr)); gap:4px; padding:3px; margin:0 8px 8px; border:1px solid var(--panel-border); border-radius:10px; }
#exercise-scale-appearance .scale-highlight-segments .scale-highlight-option { position:relative; display:flex; justify-content:center; gap:6px; min-width:0; min-height:32px; padding:4px 8px; font-size:12px; border-radius:6px; }
/* Extend the tap area beyond the compact visible segment. */
#exercise-scale-appearance .scale-highlight-segments .scale-highlight-option::before { content:""; position:absolute; inset:-6px 0; }
#exercise-scale-appearance .scale-highlight-group-detail { margin-top:2px; font-weight:400; line-height:1.3; }
#exercise-scale-appearance .scale-highlight-segments .scale-highlight-check { display:none; }
/* Keep the glow steady on mobile; restart only the outline at each attack. */
.ex-fretboard .scale-dot.is-practice-active.is-practice-pulse { animation-name:scale-practice-outline-pulse; animation-duration:var(--ex-attack-duration,150ms); }
.ex-fretboard { overflow:visible; }
.ex-fretboard-wrap.has-shape-outlines:not(.is-full) { padding-top:calc(12px + var(--ex-shape-top-adjustment,0px)); }
.ex-fretboard-wrap.has-shape-outlines.is-full { padding-top:44px; }
/* Match the fitted inset after the scroller's -20px margin. Compensate for
   SVG scaling so extending the range grows below the anchored high E. */
.ex-fretboard-wrap.has-shape-outlines.is-shape-scroll { padding-top:calc(32px + var(--ex-shape-top-adjustment,0px)); }
.ex-fretboard-wrap.has-shape-outlines.is-full .ex-fretboard { height:230px; }
.ex-shape-controls { text-align:center; min-width:0; }
.ex-shape-controls[hidden] { display:none; }
.ex-shape-0 { --ex-shape-color:color-mix(in srgb,#087ff5 80%,var(--chord-tone-second,#2676ae)); }
.ex-shape-1 { --ex-shape-color:color-mix(in srgb,#00bc7d 80%,var(--chord-tone-third,#488935)); }
.ex-shape-2 { --ex-shape-color:color-mix(in srgb,#ff8b00 80%,var(--chord-tone-fifth,#d57825)); }
.ex-shape-3 { --ex-shape-color:color-mix(in srgb,#a432f4 80%,var(--chord-tone-seventh,#8054b3)); }
.ex-shape-4 { --ex-shape-color:color-mix(in srgb,#f02f7e 80%,var(--chord-tone-fourth,#b63e79)); }
.ex-shape-contour { fill:none; stroke:var(--ex-shape-color); stroke-width:3.6; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:1; }
.ex-shape-buttons { display:flex; justify-content:center; gap:5px; direction:ltr; }
.ex-shape-buttons .ex-shape-button { position:relative; box-sizing:border-box; min-width:28px; min-height:26px; padding:3px 6px; border:1px solid var(--panel-border); border-radius:6px; background:var(--surface-card-muted); color:var(--ink); box-shadow:none; font:600 12px/1.2 var(--sans-stack); letter-spacing:normal; text-transform:none; cursor:pointer; }
.ex-shape-buttons :is(.ex-shape-button,.ex-shape-reset)::before { content:""; position:absolute; inset:-8px -2px; }
.ex-shape-buttons .ex-shape-reset { position:relative; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:24px; min-width:24px; min-height:26px; padding:3px; border:1px solid var(--panel-border); border-radius:6px; background:transparent; color:var(--ink); box-shadow:none; cursor:pointer; }
.ex-shape-reset svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ex-shape-reset:disabled { opacity:.35; cursor:default; }
.ex-shape-buttons .ex-shape-button[aria-pressed='true'] { border-color:var(--ex-shape-color); box-shadow:inset 0 0 0 1px var(--ex-shape-color); background:color-mix(in srgb,var(--ex-shape-color) 10%,var(--surface-card-muted)); }
.ex-shape-buttons .ex-shape-button[aria-disabled='true'] { opacity:.35; cursor:help; }
.ex-shape-caption { margin:4px auto 0; max-width:36em; color:var(--muted); font:11px/1.3 var(--sans-stack); }
[data-ex-slide-overlay] { pointer-events:none; }
.ex-string { fill:none; }
#exercise-trainer-section .ex-nut { stroke:var(--ink); stroke-width:5; stroke-opacity:.72; }
.ex-fretboard .is-dead-note circle { stroke-dasharray:2 2; }
.ex-tab-bend { fill:none; stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.ex-bend-label { fill:var(--ink); stroke:var(--surface-card); stroke-width:4px; paint-order:stroke; text-anchor:middle; font:600 10px var(--sans-stack); }
.ex-tab-title { fill:var(--ink); font:700 10px var(--sans-stack); letter-spacing:.12em; }
.ex-tab-shell { position:relative; min-width:0; }
.ex-tab-viewport { overflow-x:auto; overflow-y:hidden; min-width:0; width:100%; border-top:1px solid var(--panel-border); padding-top:2px; overscroll-behavior-x:none; touch-action:pan-x pan-y pinch-zoom; user-select:none; -webkit-user-select:none; }
.ex-tab { display:block; max-width:none; margin-inline:auto; }
.ex-tab-track { position:relative; margin-inline:auto; box-sizing:content-box; }
.ex-bar-line,.ex-rhythm-stem { stroke:var(--muted); stroke-width:1; }
.ex-measure,.ex-beat-label { fill:var(--muted); font:10px var(--sans-stack); text-anchor:middle; }
.ex-event-hit { fill:transparent; stroke:none; }
.ex-tab-event { cursor:pointer; outline:none; }
.ex-tab-event.is-active .ex-event-hit { fill:#168aff; opacity:.1; }
[data-ex-tab-segment].is-current > .arp-tab-number-bg { fill:#087ff5; }
[data-ex-tab-segment].is-current > .arp-tab-number { fill:white; }
.ex-tab-event:focus-visible .ex-event-hit { stroke:#087ff5; stroke-width:2; }
.ex-rest { fill:var(--muted); text-anchor:middle; font:11px var(--sans-stack); }
.ex-articulation { fill:none; stroke:var(--ink); stroke-width:1; pointer-events:none; }
.ex-tab-tie { fill:none; stroke:var(--ink); stroke-width:1; pointer-events:none; }
.ex-tab-continuation { opacity:.75; }
.ex-technique { fill:var(--ink); font:italic 11px var(--sans-stack); text-anchor:middle; pointer-events:none; }
.ex-playhead { position:absolute; left:0; top:max(21px,calc(25px + var(--ex-tab-offset,0px))); bottom:12px; width:1.5px; background:#087ff5; opacity:.7; pointer-events:none; will-change:transform; }
.ex-tab-shell > .ex-playhead { top:max(24px,calc(28px + var(--ex-tab-offset,0px))); }
/* Trim the surrounding gaps while preserving the slider's full touch target. */
.ex-seek { display:flex; align-items:center; min-width:0; min-height:44px; margin-block:-4px; }
.ex-seek input { display:block; width:100%; height:44px; min-height:44px; margin:0; padding:0; }
/* Equal side columns center the buttons on phones and wider screens alike. */
.ex-footer-controls { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; min-width:0; }
.ex-phrase-footer { display:grid; align-content:center; min-width:0; gap:2px; font:12px/1.4 var(--sans-stack); color:var(--muted); }
.ex-tab-hint { min-width:0; text-align:start; }
.ex-tab-status { display:flex; grid-column:3; grid-row:1; flex-wrap:wrap; justify-content:flex-end; gap:2px 6px; min-width:0; text-align:end; font:12px/1.4 var(--sans-stack); color:var(--muted); }
.ex-tab-status > span { min-width:0; overflow-wrap:anywhere; }
.ex-tab-status [data-ex-pass]:empty { display:none; }
.ex-phrase-footer > strong { font-weight:inherit; }
.ex-count-in-beats { display:none; }
.ex-bar-practice[hidden] { display:none; }
/* Preserve the label's measured width so the other playback toggles stay put. */
.ex-toggle-row label.is-unavailable { visibility:hidden; }
.ex-practice-range { fill:var(--accent,#087ff5); fill-opacity:.08; pointer-events:none; }
.ex-phrase-footer { grid-column:1; grid-row:1; }
.ex-bar-practice { --ex-footer-button-size:38px; --ex-footer-button-gap:4px; display:grid; grid-column:2; grid-row:1; grid-template-columns:repeat(4,var(--ex-footer-button-size)); gap:var(--ex-footer-button-gap); min-width:0; }
.ex-stage:not(.is-bar-practice) .ex-bar-practice { grid-template-columns:repeat(2,var(--ex-footer-button-size)); }
.ex-phrase-footer .ex-tab-hint { display:none; }
.ex-phrase-footer [data-ex-progress] { color:var(--ink); font-weight:600; }
/* Center the pills between the visible slider track and the button tops. */
.ex-footer-controls .ex-count-in-beats { position:absolute; inset-block-start:-16px; inset-inline-start:50%; transform:translateX(-50%); display:flex; justify-content:center; align-items:center; gap:4px; width:92px; height:8px; visibility:hidden; pointer-events:none; }
html.desktop-app-layout .ex-footer-controls .ex-count-in-beats { inset-block-start:-14px; }
.ex-footer-controls .ex-count-in-beats.is-counting { visibility:visible; }
.ex-count-in-beats > .beat-dot { flex:0 1 22px; min-width:0; min-height:8px; }
.ex-bar-actions { display:grid; grid-column:1/-1; grid-template-columns:subgrid; gap:var(--ex-footer-button-gap); }
#exercise-trainer-section .ex-bar-actions button { display:grid; place-items:center; box-sizing:border-box; min-width:38px; width:var(--ex-footer-button-size); min-height:38px; height:var(--ex-footer-button-size); padding:0; border:1px solid var(--panel-border); border-radius:9px; background:var(--surface-card-muted); color:var(--ink); touch-action:manipulation; }
.ex-bar-actions button > svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ex-bar-actions [data-ex-action='replay-bar'] > svg { fill:currentColor; stroke:none; }
#exercise-trainer-section .ex-bar-actions :is(.is-unavailable,[hidden]) { display:none; }
#exercise-trainer-section .ex-bar-actions button:disabled { opacity:.45; cursor:default; }
#exercise-trainer-section .ex-bar-actions button:focus-visible { outline:2px solid var(--accent,#087ff5); outline-offset:2px; }
@media(min-width:640px) {
  .ex-bar-practice { --ex-footer-button-size:48px; --ex-footer-button-gap:8px; }
}
@media(max-width:350px) {
  .ex-footer-controls { column-gap:4px; }
  .ex-phrase-footer, .ex-tab-status { font-size:11px; }
}
.ex-search-dialog { padding:var(--safe-top,0px) var(--safe-right,0px) var(--safe-bottom,0px) var(--safe-left,0px); }
.ex-search-dialog:not([open]) { display:none; }
.ex-search-dialog[data-ex-search-preparing] { display:block; visibility:hidden; pointer-events:none; }
.ex-search-dialog[data-ex-search-fallback][open] { display:block; z-index:2147483646; background:rgba(24,17,12,.18); }
.ex-search-panel { position:fixed; box-sizing:border-box; display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px; border:1px solid var(--panel-border); border-radius:16px; background:var(--surface-card); color:var(--ink); box-shadow:0 16px 48px rgba(0,0,0,.2); font:13px/1.4 var(--sans-stack); }
.ex-search-panel > * { flex-shrink:0; }
.ex-search-panel .chord-appearance-heading { font-size:15px; }
.ex-search-panel input[type='search'] { box-sizing:border-box; width:100%; min-width:0; height:44px; min-height:44px; margin:0; padding:8px 12px; border:1px solid var(--panel-border); border-radius:8px; background:var(--surface-card-muted); color:var(--ink); font:16px var(--sans-stack); }
.ex-search-field { position:relative; min-width:0; }
.ex-search-field > .ex-search-icon { position:absolute; inset-inline-start:12px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--muted); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.ex-search-field input[type='search'] { padding-inline-start:38px; padding-inline-end:12px; }
.ex-search-field input[type='search']::-webkit-search-decoration { -webkit-appearance:none; }
.ex-search-results { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; list-style:none; margin:0; padding:0; }
.ex-search-results button { display:flex; align-items:center; gap:8px; box-sizing:border-box; width:100%; min-height:48px; padding:10px 8px; border:0; border-radius:7px; background:transparent; box-shadow:none; color:inherit; text-align:start; font:inherit; letter-spacing:normal; text-transform:none; cursor:pointer; }
.ex-search-results button:hover { background:var(--surface-card-muted); }
.ex-search-results button[aria-current='true'] { background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent); }
.ex-search-results button[aria-current='true'] .ex-search-name { font-weight:600; }
.ex-search-results button:focus-visible,.ex-search-panel button:focus-visible,.ex-search-panel input:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.ex-search-check { flex:0 0 14px; color:var(--accent); }
.ex-search-name { display:block; overflow-wrap:anywhere; }
.ex-search-results small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.ex-search-empty { padding:20px 8px; color:var(--muted); text-align:center; }
.ex-layout :is(button,input,select,summary) { -webkit-tap-highlight-color:transparent; }
.ex-layout :is(button,input,select,summary):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.display-shortcut-button-exercises path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body.exercises-active .control-deck { min-width:0; }

@media(min-width:701px), (orientation:landscape) and (min-width:561px) {
  .ex-reset-filters.ex-icon-button { width:auto; gap:4px; padding-inline:6px; font:600 11px var(--sans-stack); }
  .ex-reset-label { display:inline; }
  .ex-playback { grid-template-columns:auto minmax(0,1fr); gap:8px 16px; align-items:end; }
  .ex-settings-row { grid-column:2; grid-row:1; }
  .ex-playback-row { display:contents; }
  .ex-transport { grid-column:1; grid-row:1; }
  .ex-toggle-row { grid-column:1/-1; grid-row:2; }
  .ex-settings-row.has-inline-toggles { grid-template-columns:var(--ex-key-width,52px) var(--ex-guitar-width,96px) max-content minmax(0,1fr); }
  .ex-settings-row.has-inline-toggles .ex-toggle-row { grid-column:auto; grid-row:auto; flex-wrap:nowrap; min-height:32px; }
}
@media(max-width:560px) {
  .ex-filter-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ex-filter-row > :last-child { grid-column:1/-1; }
  .ex-filter-row.is-type-wrapped { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:380px) {
  .ex-controls.control-block, .ex-stage.progression-scale-card { padding:10px; }
  .ex-stage.progression-scale-card { padding-top:8px; }
  .ex-filter-row { gap:8px; }
  /* Stack the count on compact phones so discovery actions stay centered. */
  .ex-exercise-label { flex-direction:column; align-items:flex-start; gap:3px; }
  .ex-settings-row { gap:7px; }
  .ex-playback-row { column-gap:8px; }
  .ex-transport { gap:6px; }
  .ex-toggle-row { column-gap:6px; }
}
@media(max-width:350px) {
  .ex-play.transport-button { width:32px; min-width:32px; padding:0; gap:0; }
  .ex-play-labels { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media(orientation:landscape) and (max-height:540px) {
  /* Leave room for iPhone safe-area insets and native checkbox widths. */
  .ex-playback { column-gap:10px; }
  .ex-settings-row { column-gap:6px; }
  .ex-transport { gap:6px; }
  .ex-play.transport-button { min-width:64px; padding-inline:6px; gap:4px; }
  .ex-toggle-row { column-gap:6px; }
  .ex-fretboard-wrap:not(.is-full) { max-width:340px; }
}