.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; }
: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; }
.ex-controls .field-label { font:650 9px/1.2 var(--sans-stack); letter-spacing:.08em; }
: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 { padding-top:2px; }
.ex-filter-panel .mode-dropdown-button:disabled { opacity:.4; cursor:default; }
.ex-goal { margin:0; color:var(--muted); font:11px/1.45 var(--sans-stack); }
.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; }
.ex-icon-button: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) .ex-discovery-actions button: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; }
.ex-tempo-range input { width:100%; min-width:0; margin:0; }
#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:14px; min-width:0; margin:0; }
.ex-stage-heading { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:8px; font:11px var(--sans-stack); color:var(--muted); }
.ex-scale-title { margin:0; min-width:0; color:var(--ink); font:700 clamp(17px,1.5vw,20px)/1.2 var(--serif-stack); }
.ex-fretboard-wrap { width:min(100%,570px); 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; scrollbar-width:thin; }
.ex-fretboard-wrap.is-full .ex-fretboard { max-width:none; height:220px; }
.ex-scale-note .scale-dot, .ex-scale-note .arp-note-label { opacity:.48; }
.ex-scale-note .scale-dot.is-practice-active { opacity:1; }
/* 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; }
[data-ex-slide-overlay] { pointer-events:none; }
.ex-string { fill:none; }
.ex-fretboard .ex-nut { stroke-width:4; }
.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-viewport { overflow-x:auto; min-width:0; width:100%; border-top:1px solid var(--panel-border); padding-top:8px; overscroll-behavior-x:contain; }
.ex-tab { display:block; max-width:none; margin-inline:auto; }
.ex-tab-track { position:relative; margin-inline:auto; }
.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; }
.ex-tab-event.is-active .arp-tab-number-bg { fill:#087ff5; }
.ex-tab-event.is-active .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:25px; width:1.5px; height:168px; background:#087ff5; opacity:.7; pointer-events:none; will-change:transform; }
.ex-seek { display:block; min-width:0; }
.ex-seek input { width:100%; margin:0; }
.ex-phrase-footer { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:4px 8px; font:10px/1.4 var(--sans-stack); color:var(--muted); }
.ex-tab-hint { min-width:0; text-align:start; }
.ex-tab-status { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px 8px; min-width:0; text-align:end; }
.ex-technique-key { margin:0; text-align:center; color:var(--muted); font:10px/1.5 var(--sans-stack); }
.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-filter-row { gap:8px; }
  .ex-settings-row { gap:7px; }
  .ex-playback-row { column-gap:8px; }
  .ex-transport { gap:6px; }
  .ex-toggle-row { column-gap:6px; }
  .ex-field .field-label { letter-spacing:.04em; }
}
@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(max-width:360px) {
  .ex-exercise-label { flex-direction:column; align-items:flex-start; gap:3px; }
}
@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; }
}