/* Shared menu design settings. Existing menus inherit these values; use the
   menu-* classes for new compact rows instead of copying per-menu CSS. */
.toolbar-popup {
  --menu-padding: 24px;
  --menu-gap: 12px;
  --menu-row-gap: 18px;
  --menu-field-gap: 8px;
  --menu-card-gap: 14px;
  --menu-section-gap: 16px;
  --menu-control-height: 44px;
  --menu-number-width: 72px;
  --menu-step-width: 32px;
  --menu-step-gap: 4px;
  --menu-number-group: calc(var(--menu-number-width) + var(--menu-field-gap) + var(--menu-step-width) + var(--menu-step-width) + var(--menu-step-gap));
  --menu-label-width: 112px;
  --menu-radius: 7px;
  --menu-thumb-size: 24px;
  --menu-track-height: 6px;
  --menu-accent: #2994d0;
  --menu-track: #d2d6dc;
  --menu-track-border: #b9c2ce;
  --menu-input-border: #c6d0db;
}
.toolbar-popup .panel-header { padding: var(--menu-padding) var(--menu-padding) 0; gap: var(--menu-section-gap); }
.toolbar-popup .popup-panel-grid { padding: 18px var(--menu-padding) var(--menu-padding); gap: var(--menu-section-gap); }
.toolbar-popup .popup-card { padding: 16px var(--menu-padding); gap: var(--menu-card-gap); }
.toolbar-popup .form-grid { gap: var(--menu-card-gap); }
.toolbar-popup .field-group { gap: var(--menu-field-gap); }
.toolbar-popup .toggle-grid, .toolbar-popup .status-stack, .toolbar-popup .info-stack { gap: var(--menu-gap); }
.toolbar-popup input[type='number'], .toolbar-popup select { min-height: var(--menu-control-height); }
.menu-content { padding: 18px var(--menu-padding) 22px; }
.toolbar-popup #midi-capture-report {
  width: 100%; box-sizing: border-box; min-height: 160px; resize: vertical;
  padding: var(--menu-field-gap); border: 1px solid var(--menu-input-border);
  border-radius: var(--menu-radius); background: #fff; color: inherit;
  font: 12px/1.5 monospace;
}
.menu-content h2 { margin: 0 0 20px; font-size: 1.15rem; font-weight: 500; }
.menu-row {
  display: grid;
  grid-template-columns: var(--menu-label-width) minmax(0, 1fr) var(--menu-number-group);
  align-items: center;
  gap: var(--menu-gap);
  margin: var(--menu-row-gap) 0;
}
.menu-number { display: flex; align-items: center; gap: var(--menu-field-gap); width: var(--menu-number-group); }
.toolbar-popup .menu-number input {
  width: var(--menu-number-width);
  flex: 0 0 var(--menu-number-width);
  min-width: 0;
  min-height: var(--menu-control-height);
  padding: 6px;
  border: 1px solid var(--menu-input-border);
  border-radius: var(--menu-radius);
  background: #fff;
  box-shadow: none;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  appearance: textfield;
  -moz-appearance: textfield;
}
.menu-number input::-webkit-inner-spin-button, .menu-number input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.toolbar-popup .menu-number input:disabled { color: #9aa5b1; background: #f8f9fb; }
.menu-steppers { display: flex; gap: var(--menu-step-gap); }
.toolbar-popup .menu-steppers button {
  width: var(--menu-step-width);
  min-height: var(--menu-control-height);
  padding: 0;
  border: 1px solid var(--menu-input-border);
  border-radius: var(--menu-radius);
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  line-height: 1;
}
.toolbar-popup .menu-steppers button:hover:not(:disabled) { background: var(--control-bg-hover); transform: none; }
.toolbar-popup input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: var(--menu-control-height);
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.toolbar-popup input[type='range']::-webkit-slider-runnable-track {
  height: var(--menu-track-height);
  border: 1px solid var(--menu-track-border);
  border-radius: 4px;
  background: var(--menu-track);
}
.toolbar-popup input[type='range']::-moz-range-track {
  height: var(--menu-track-height);
  border: 1px solid var(--menu-track-border);
  border-radius: 4px;
  background: var(--menu-track);
}
.toolbar-popup input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--menu-thumb-size);
  height: var(--menu-thumb-size);
  margin-top: calc((var(--menu-track-height) - var(--menu-thumb-size)) / 2 - 1px);
  border: 2px solid #3b5267;
  border-radius: 50%;
  background: var(--menu-accent);
  box-shadow: 0 1px 2px rgba(34, 48, 62, 0.25);
}
.toolbar-popup input[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--menu-thumb-size);
  height: var(--menu-thumb-size);
  border: 2px solid #3b5267;
  border-radius: 50%;
  background: var(--menu-accent);
  box-shadow: 0 1px 2px rgba(34, 48, 62, 0.25);
}
.toolbar-popup input[type='range']:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; }
.toolbar-popup input[type='range']:disabled { opacity: 0.45; cursor: default; }
.menu-option { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: var(--menu-control-height); margin-top: 4px; touch-action: manipulation; }
.menu-content hr { margin: 20px 0; border: 0; border-top: 1px solid var(--section-rule); }

/* Menu composition; control appearance comes from the shared rules above. */
#tempo-popup { width: min(740px, calc(100vw - 32px)); border-radius: 16px; background: #f5f7f9; }
#looper-popup { --menu-label-width: 160px; width: min(780px, calc(100vw - 32px)); border-radius: 16px; background: #f5f7f9; }
#loop-count-in-label { margin: 8px 0 22px 16px; }
.menu-unavailable { opacity: 0.45; }
.loop-help, #loop-controls-status { font-size: 0.75rem; color: var(--muted); line-height: 1.5; margin: 14px 0 0; }
#loop-controls-status:empty { display: none; }
#btn-looper.is-loop-enabled, #more-loop-shortcut.is-loop-enabled {
  background: #d9edfc;
  border-color: #2994d0;
  color: #1c4e70;
  box-shadow: inset 0 0 0 1px #2994d0;
}
.app-toolbar.is-collapse-to-more #btn-more.has-enabled-loop::after { content: '↻'; color: #1c4e70; margin-left: 6px; }
.loop-notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 6px);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border: 1px solid #c6d0db;
  border-radius: 8px;
  background: #f5f7f9;
  color: #1c4e70;
  box-shadow: 0 4px 16px rgba(34, 48, 62, 0.18);
  text-align: center;
  font-size: 0.9rem;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}
.loop-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .loop-notice { transition: none; } }
.menu-bpm-row { grid-template-columns: var(--menu-label-width) var(--menu-number-group) minmax(0, 1fr); }
.tempo-metronome-row { display: grid; grid-template-columns: auto auto minmax(60px, 1fr) var(--menu-number-group); align-items: center; gap: var(--menu-gap); }
.tempo-metronome-row label { display: flex; align-items: center; gap: 10px; min-height: var(--menu-control-height); }
.tempo-speed-help { display: flex; align-items: center; gap: var(--menu-gap); font-size: 0.75rem; color: var(--muted); }
.toolbar-popup #reset-playback-speed { flex: 0 0 auto; min-height: var(--menu-control-height); padding: 6px 10px; border-radius: var(--menu-radius); font-size: 0.75rem; box-shadow: none; }
.tempo-unavailable { opacity: 0.45; }
#tempo-controls-status { margin: 14px 0 0; font-size: 0.75rem; color: var(--muted); }
@keyframes tempo-beat { from { background: #b8e3ff; box-shadow: 0 0 0 4px rgba(41, 148, 208, 0.3); } to { background: var(--control-bg); } }
#btn-tempo.metronome-pulse { animation: tempo-beat 170ms ease-out; }
@media (prefers-reduced-motion: reduce) { #btn-tempo.metronome-pulse { animation: none; background: #b8e3ff; } }
@media (any-pointer: coarse) {
  .toolbar-popup { --menu-step-width: 44px; --menu-thumb-size: 28px; }
}
@media (max-width: 600px) {
  .toolbar-popup { --menu-padding: 16px; --menu-gap: 10px; --menu-row-gap: 12px; }
  .menu-row { grid-template-columns: minmax(0, 1fr) var(--menu-number-group); }
  .menu-row > label { grid-column: 1 / -1; }
  .menu-bpm-row .menu-number { grid-column: 1 / -1; }
  .tempo-speed-help { flex-wrap: wrap; }
  .tempo-metronome-row { grid-template-columns: minmax(0, 1fr) var(--menu-number-group); }
  .tempo-metronome-row > label { grid-column: 1 / -1; }
}

/* Piano-style toolbar and remaining menu compositions. */
.app-toolbar { padding: 10px 20px; gap: 20px; }
.app-toolbar button { min-height: 36px; padding: 7px 13px; font-size: 14px; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.app-toolbar.is-compact { padding: 10px; gap: 12px; }
.app-toolbar.is-compact button { padding: 7px 12px; }
.toolbar-popup { top: calc(var(--toolbar-height, 58px) + 12px) !important; max-height: calc(100dvh - var(--toolbar-height, 58px) - 28px) !important; border-radius: 16px !important; background: #f5f7f9 !important; }
.toolbar-popup .panel-kicker { display: none; }
.toolbar-popup .compact-header h2 { font-size: 1.15rem; font-weight: 500; }
.toolbar-popup .popup-card { align-content: start; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; }
.toolbar-popup .popup-card + .popup-card { border-top: 1px solid var(--section-rule); padding-top: 16px; }
.toolbar-popup .popup-card-title, .toolbar-popup .midi-panel-title { font-size: 1rem; }
.toolbar-popup .field-label, .toolbar-popup .status-label { font-size: .78rem; }
.toolbar-popup .field-help, .toolbar-popup .help-text, .toolbar-popup .track-meta, .toolbar-popup .practice-visual-legend { font-size: .82rem; line-height: 1.45; }
.toolbar-popup .toggle-row { min-height: 44px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.toolbar-popup .toggle-row:hover, .toolbar-popup .toggle-row:active { transform: none; box-shadow: none; background: transparent; }
.toolbar-popup select, .toolbar-popup input[type='number'] { border-radius: 7px; box-shadow: none; padding-top: 6px; padding-bottom: 6px; }
#practice-popup, #display-popup, #options-overlay { width: min(780px, calc(100vw - 32px)); }
#scores-panel { width: min(1180px, calc(100vw - 32px)); }
#practice-popup .form-grid--practice { grid-template-columns: minmax(0, 1fr); }
#display-popup .toggle-row { align-self: start; }
#display-popup .field-group--compact { max-width: none; justify-self: stretch; }
#display-popup .popup-panel-grid { gap: 10px; padding-top: 8px; }
#display-popup .popup-card { gap: 6px; }
#display-popup .popup-card + .popup-card { padding-top: 12px; }
#display-popup .menu-row { margin: 8px 0; }
#more-popup { width: min(520px, calc(100vw - 32px)); }
#more-popup .panel-header--more { padding-bottom: 12px; }
#more-popup .more-popup-grid { padding: 0 var(--menu-padding) var(--menu-padding); gap: 10px; }
#more-popup .more-shortcut-button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--menu-input-border); border-radius: 7px; box-shadow: none; display: flex; align-items: center; gap: 10px; }
#media-popup, #audio-popup, #transpose-popup, #help-popup { width: min(740px, calc(100vw - 32px)); }
#audio-popup { --menu-label-width: max-content; }
#audio-popup label[for='master-volume'] { white-space: nowrap; }
.menu-content h3 { font-size: 1rem; margin: 0 0 12px; }
.menu-content p { line-height: 1.5; }
.menu-content fieldset { min-width: 0; padding: 12px; border: 1px solid var(--menu-input-border); border-radius: 7px; }
.menu-content fieldset:disabled { opacity: .55; }
.menu-content legend { font-size: .85rem; font-weight: 600; }
.menu-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.menu-setting input { width: 90px; }
.pitch-offset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pitch-offset-row input { width: 90px; }
.pitch-offset-row button { min-height: 40px; padding: 6px 12px; font-size: .85rem; border-radius: 7px; box-shadow: none; }
.menu-status { font-size: .75rem; color: var(--muted); font-weight: 400; }
.more-shortcut-button .menu-status { margin-left: auto; text-align: right; }
.menu-future, .menu-track-details { margin: 12px 0; }
.toolbar-popup summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.menu-debug:not([open]) { display: block; }
.menu-debug > .popup-card { margin: 12px 0; }
.menu-library-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--section-rule); padding-top: 12px; }
.menu-action-row button { min-height: 44px; padding: 6px 10px; font-size: .85rem; border-radius: 7px; box-shadow: none; }
.menu-action-row .field-help { flex: 1 1 220px; }
.menu-help-list { padding-left: 22px; line-height: 1.6; }
.practice-setup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.practice-setup > .form-grid { grid-column: 1 / -1; margin: 0; }
.practice-setup > .practice-mode-options { grid-column: 1 / -1; }
.practice-wait-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-column: 1 / -1; }
.practice-wait-controls[hidden] { display: none; }
.practice-wait-controls > label[for='wait-chord-window']:has(input:disabled) { opacity: .55; }
.practice-wait-controls > #wait-chord-status { grid-column: 1 / -1; margin: 0; }
.practice-setup > label[for='midi-latency-ms'] { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 90px; align-items: center; }
.practice-setup > label[for='midi-latency-ms'] .field-help { grid-column: 1; grid-row: 2; }
.practice-setup > label[for='midi-latency-ms'] input { grid-column: 2; grid-row: 1 / 3; width: 90px; }
@media (min-width: 961px) { .toolbar-score-group { display: flex; } .toolbar-separator--score { display: block; } }
@media (max-width: 1000px) { .app-toolbar:not(.is-stacked) { padding-left: 6px; padding-right: 6px; gap: 8px; } .app-toolbar:not(.is-stacked) button { padding-left: 10px; padding-right: 10px; } }
@media (max-width: 620px) {
  .app-toolbar.is-stacked { grid-template-columns: 1fr 1fr; grid-template-areas: 'left right' 'center center'; gap: 8px; padding: 8px 10px; }
  .app-toolbar.is-stacked .toolbar-left { width: auto; justify-content: flex-start; }
  .app-toolbar.is-stacked .toolbar-right { width: auto; justify-content: flex-end; }
  .app-toolbar.is-stacked .toolbar-center { width: 100%; justify-content: center; }
  #scores-panel .status-stack { grid-template-columns: minmax(0, 1fr); }
  .practice-setup, .practice-wait-controls { grid-template-columns: minmax(0, 1fr); }
}
/* A secondary touchscreen must not enlarge a mouse-driven desktop toolbar. */
@media (pointer: coarse) { .app-toolbar button { min-height: 44px; } }

.toolbar-popup .menu-radio-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.menu-radio-group legend { font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.menu-radio-group label { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: .85rem; cursor: pointer; }
.menu-radio-group input { flex: 0 0 auto; width: 18px; height: 18px; color-scheme: light; accent-color: var(--menu-accent); }
.menu-radio-group label:has(input:disabled) { opacity: .55; cursor: default; }
#practice-popup .popup-panel-grid { gap: 8px; padding-top: 8px; }
#practice-popup .popup-card { gap: 6px; }
#practice-popup .popup-card + .popup-card { padding-top: 12px; }
#practice-popup .feedback-group { margin: 0; padding: 0; }
#practice-popup .help-text, #practice-popup .menu-future { margin: 4px 0; }
#practice-popup .practice-poly-option { margin-left: 24px; }
#wait-chord-status:empty, #tab-feedback-status:empty { display: none; }

/* Score library browser: clear top actions, folder navigation and score rows. */
.practice-advanced { grid-column: 1 / -1; }
.practice-advanced .field-group { margin: 0; }
.scores-menu-content { padding: 14px 22px 22px; }
.scores-demos { margin: 12px 0 16px; }
.scores-demos .scores-library-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.scores-demos > a { color: #245f88; }
#demo-score-status:empty { display: none; }
.scores-library-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.scores-library-actions > button, .scores-library-actions .button-like { width: 100%; min-height: 48px; padding: 8px 10px; border-radius: 9px; box-shadow: none; text-align: center; box-sizing: border-box; }
.scores-library-actions .file-picker { display: flex; min-width: 0; margin: 0; }
.scores-library-actions .button-like { font-size: .9rem; }
#library-status { min-height: 1.25em; margin: 10px 2px; }
#library-status:empty { display: none; }
.library-browser { display: grid; grid-template-columns: minmax(190px, 0.32fr) minmax(0,1fr); gap: 14px; min-height: 310px; }
.library-pane { min-width: 0; border: 1px solid var(--menu-input-border); border-radius: 12px; background: rgba(255,255,255,.56); overflow: hidden; }
.library-pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--section-rule); }
.library-pane-heading h3 { margin: 0; font-size: .98rem; color: var(--text); }
.library-folders-pane .library-pane-heading { flex-wrap: wrap; gap: 6px; }
.library-folders-pane .library-pane-heading h3 { flex: 1 1 100%; }
.library-bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(77,174,234,.07); border-bottom: 1px solid var(--section-rule); }
.library-bulk-toolbar[hidden] { display: none; }
.library-bulk-toolbar > span { flex-basis: 100%; font-size: .8rem; color: var(--muted); }
.library-bulk-toolbar button { min-height: 40px; padding: 6px 9px; border-radius: 8px; box-shadow: none; font-size: .85rem; }
.library-bulk-toolbar .is-danger { color: #a43232; border-color: #e7aaa4; }
.library-selection-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; margin-bottom: 6px; border: 1px solid var(--menu-input-border); border-radius: 9px; cursor: pointer; box-sizing: border-box; }
.library-selection-row:has(input:checked) { background: rgba(77,174,234,.14); border-color: rgba(77,174,234,.65); }
.library-selection-row input { width: 20px; height: 20px; flex: 0 0 20px; }
.library-selection-row span { min-width: 0; overflow-wrap: anywhere; }
.library-pane-heading button { min-height: 40px; padding: 6px 10px; border-radius: 8px; box-shadow: none; white-space: nowrap; }
.library-scores-heading { flex-wrap: wrap; }
.library-scores-context { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.library-scores-context h3 { overflow-wrap: anywhere; }
.library-scores-actions { display: flex; gap: 8px; margin-left: auto; }
.library-score-count { margin: 0; white-space: nowrap; }
.library-folder-list, .library-score-list { max-height: min(42vh,420px); min-height: 245px; overflow: auto; padding: 8px; }
.library-folder-row { display: grid; grid-template-columns: minmax(0,1fr) 40px; align-items: center; gap: 6px; margin-bottom: 6px; }
.library-folder-open { min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text); text-align: left; box-shadow: none; overflow-wrap: anywhere; }
.library-folder-open:hover { background: rgba(77,174,234,.08); }
.library-folder-open.is-active { border-color: rgba(77,174,234,.65); background: rgba(77,174,234,.14); color: #204f76; }
.library-row-menu { width: 40px; min-height: 40px; padding: 0; border: 1px solid var(--menu-input-border); border-radius: 9px; background: #fff; color: var(--text); box-shadow: none; font-size: 1.2rem; line-height: 1; }
.library-score-row { display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: center; gap: 8px; margin-bottom: 7px; }
.library-score-open { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; min-width: 0; min-height: 58px; padding: 9px 12px; border: 1px solid var(--menu-input-border); border-radius: 10px; background: rgba(255,255,255,.78); color: var(--text); text-align: left; box-shadow: none; }
.library-score-open:hover { border-color: rgba(77,174,234,.7); background: #fff; }
.library-score-title { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-weight: 700; }
.library-loaded-badge { padding: 3px 9px; border: 1px solid rgba(77,174,234,.32); border-radius: 999px; background: rgba(77,174,234,.13); color: #28658d; font-size: .76rem; font-weight: 700; }
.library-score-filename { flex-basis: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: .78rem; }
.library-search-row { display: grid; grid-template-columns: minmax(0,1fr); align-items: end; gap: 7px 10px; padding: 10px 12px 2px; }
.library-search-row label { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); }
.library-search-row input { min-width: 0; width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--menu-input-border); border-radius: 8px; background: #fff; color: inherit; color-scheme: light; box-sizing: border-box; }
.library-search-row > button { min-height: 42px; padding: 7px 12px; border-radius: 8px; box-shadow: none; white-space: nowrap; }
.library-empty-state { margin: 4px; padding: 24px 16px; color: var(--muted); font-size: .9rem; }
.current-score-card { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border-top: 1px solid var(--section-rule); }
.current-score-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; color: var(--muted); font-size: .8rem; }
.current-score-heading strong { color: var(--text); font-size: .9rem; overflow-wrap: anywhere; }
.current-score-card .menu-track-details { margin: 0; }
.current-score-card .menu-track-details summary { min-height: 40px; }
.library-action-dialog { width: min(420px,calc(100vw - 40px)); max-height: min(80vh,620px); padding: 20px; border: 1px solid #c6d0db; border-radius: 14px; background: #f5f7f9; color: #364152; box-shadow: 0 16px 48px rgba(30,45,60,.25); }
.library-action-dialog::backdrop { background: rgba(20,30,40,.42); backdrop-filter: blur(2px); }
.library-action-dialog h2 { margin: 0 0 14px; font-size: 1.08rem; overflow-wrap: anywhere; }
.library-dialog-actions { display: grid; gap: 8px; }
.library-dialog-actions button { min-height: 46px; padding: 8px 12px; border: 1px solid #c6d0db; border-radius: 9px; background: #fff; color: inherit; box-shadow: none; }
.library-dialog-actions button.is-danger { border-color: #e7aaa4; color: #a43232; }
.library-dialog-label { display: grid; gap: 7px; margin: 12px 0 18px; font-size: .85rem; }
.library-dialog-label input, .library-dialog-label select { min-width: 0; min-height: 44px; width: 100%; padding: 8px 10px; border: 1px solid #c6d0db; border-radius: 8px; background: #fff; color: inherit; box-sizing: border-box; }
.mixer-track { display: grid; grid-template-columns: minmax(0,1fr) 44px auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--section-rule); }
.mixer-title { grid-column: 1 / -1; font-size: .85rem; overflow-wrap: anywhere; }
.mixer-track input[type='range'] { min-width: 0; width: 100%; }
.mixer-track output { font-size: .82rem; }
.library-confirm p { font-size: .9rem; line-height: 1.5; }
#display-popup .menu-radio-group { margin-bottom: 12px; }
@media (max-width: 620px) {
  .scores-menu-content { padding: 10px 14px 16px; }
  .scores-library-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .library-browser { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .library-folder-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; max-height: 150px; min-height: 0; }
  .library-folder-row { margin: 0; }
  .library-score-list { max-height: 34vh; min-height: 170px; }
}

/* Keep each input tolerance setting and its explanation together. */
#practice-popup .practice-input-filters { min-width: 0; margin: 0; }
#practice-popup .practice-tuning { border-top: 1px solid var(--section-rule); }
#practice-popup .practice-tuning > summary { font-size: 1rem; }
#practice-popup .practice-setting-summary { display: block; margin: 4px 0 0 18px; color: var(--muted); font-size: .78rem; line-height: 1.4; font-weight: 400; }
#practice-popup summary:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; border-radius: 4px; }
#practice-popup .practice-score-feedback .feedback-group--tabs { border: 0; }
#practice-popup .practice-filter-select { display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: center; gap: 6px 16px; }
#practice-popup .practice-filter-select > label { min-width: 0; font-size: .85rem; font-weight: 600; }
#practice-popup .practice-filter-select > select { width: 100%; min-width: 0; }
#practice-popup .practice-filter-select > .field-help { grid-column: 1 / -1; margin-left: 0; }
#practice-popup .practice-filter-intro { margin: 4px 0 10px; }
#practice-popup .practice-filter-option { min-width: 0; padding: 8px 0 12px; border-bottom: 1px solid rgba(125,139,156,.2); }
#practice-popup .practice-filter-option .toggle-row { box-sizing: border-box; align-items: center; gap: 10px; }
#practice-popup .practice-filter-option .toggle-row > span { min-width: 0; font-weight: 600; }
#practice-popup .practice-filter-option small { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--menu-input-border); border-radius: 4px; color: var(--muted); font-size: .72rem; font-weight: 400; white-space: nowrap; }
#practice-popup .practice-filter-option .field-help { margin: 0 0 0 32px; }
#practice-popup .practice-filter-option input { flex: 0 0 auto; }
#practice-popup .practice-filter-option .toggle-row:has(input:disabled) { opacity: .55; cursor: default; }
#practice-popup .practice-filter-details { margin-top: 12px; }
#practice-popup .practice-filter-details .field-help { margin: 8px 0; }

#practice-popup .brief-error-duration { margin: 10px 0 0 32px; gap: 12px; }
#practice-popup .brief-error-duration { grid-template-columns: minmax(0, 1fr) var(--menu-number-group); }
#practice-popup .brief-error-duration[hidden] { display: none; }
#practice-popup #brief-error-availability:empty { display: none; }
/* Device setup follows one reading column; diagnostics retain their own layout. */
#options-overlay .midi-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
#options-overlay .settings-connection-status { margin: 2px 0; font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
#options-overlay .settings-connection-status[hidden] { display: none; }
#options-overlay .midi-mode-section { gap: 6px; }
#options-overlay .midi-mode-section > .field-group { max-width: none; width: auto; justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: center; gap: 4px 16px; }
#options-overlay .midi-mode-section .field-label { grid-column: 1; grid-row: 1; }
#options-overlay .midi-mode-section .field-help { grid-column: 1; grid-row: 2; }
#options-overlay .midi-mode-section select { grid-column: 2; grid-row: 1 / 3; width: 100%; min-width: 0; }
#options-overlay .midi-mode-section .help-text { margin: 0 0 6px; }
#options-overlay .midi-mode-section .toggle-row { margin: 0; }
#options-overlay .settings-device-help { border-top: 1px solid var(--section-rule); }
#options-overlay .settings-device-help .field-help { margin: 6px 0 12px; }
#options-overlay .settings-midi-diagnostics { display: grid; gap: 6px; margin-bottom: 16px; font-size: .82rem; overflow-wrap: anywhere; }
#options-overlay summary:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 620px) {
  #options-overlay .midi-mode-section > .field-group { grid-template-columns: minmax(0, 1fr); }
  #options-overlay .midi-mode-section select { grid-column: 1; grid-row: 3; }
  #practice-popup .practice-filter-select { grid-template-columns: minmax(0, 1fr); }
  #practice-popup .brief-error-duration { margin-left: 0; }
  #practice-popup .brief-error-duration > label { grid-column: 1 / -1; }
}