/* Supporting music surfaces; the shared palette remains owned by style.css. */
.editor-canvas .drum-grid { padding: 19px 2px 23px; }
.editor-canvas .drum-grid .drum-row { gap: 6px; margin-bottom: 13px; }
.editor-canvas .drum-grid .drum-label { color: var(--ink); font-size: 11px; font-weight: 600; }
.editor-canvas .drum-grid .drum-beat { color: var(--muted); font-size: 10px; }
.editor-canvas .drum-grid .drum-step { height: 44px; border: 1px solid var(--border); border-bottom-color: var(--line); border-radius: 5px; background: var(--surface); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--panel) 48%,transparent); transition: background .1s,border-color .1s; }
.editor-canvas .drum-grid .drum-step:nth-child(8n+6):not(.on), .editor-canvas .drum-grid .drum-step:nth-child(8n+7):not(.on), .editor-canvas .drum-grid .drum-step:nth-child(8n+8):not(.on), .editor-canvas .drum-grid .drum-step:nth-child(8n+9):not(.on) { background: color-mix(in srgb,var(--surface) 62%,var(--panel)); }
.editor-canvas .drum-grid .drum-step.downbeat { border-left: 2px solid var(--line); margin-left: 3px; }
.editor-canvas .drum-grid .drum-step:hover { border-color: var(--line); background: color-mix(in srgb,var(--surface) 65%,var(--track-bg)); }
.editor-canvas .drum-grid .drum-step.on { border-color: color-mix(in srgb,var(--track) 75%,var(--border)); background: var(--track-bg); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--track) 20%,transparent); }
.editor-canvas .drum-grid .drum-step.on::after { width: 8px; height: 8px; border-radius: 50%; background: var(--track); }
.editor-canvas .drum-grid .drum-step.on.accented { background: var(--track); border-color: var(--track); box-shadow: none; }
.editor-canvas .drum-grid .drum-step.on.accented::after { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--panel); }
.editor-canvas .drum-grid .drum-step.selected { outline: 2px solid var(--track); outline-offset: 3px; }
.editor-canvas .drum-grid .drum-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.editor-canvas .drum-grid .drum-step.playing { box-shadow: inset 0 0 0 2px var(--ink); }
.editor-canvas .drum-grid .offgrid-hits { gap: 7px; padding-top: 14px; }
.editor-canvas .drum-grid .offgrid-hits button { border-radius: 6px; min-height: 31px; }

.main .part-settings { border-color: color-mix(in srgb,var(--border) 78%,transparent); background: transparent; border-radius: 9px; }
.main .part-settings > summary { min-height: 43px; padding: 11px 14px; color: var(--muted); font-size: 11px; font-weight: 600; }
.main .part-settings > summary:hover { background: color-mix(in srgb,var(--surface) 55%,transparent); color: var(--ink); }
.main .part-settings > summary > .icon { opacity: .8; }
.main .part-settings > summary > .subtle-label { font-weight: 400; }
.main .part-settings[open] > summary { color: var(--ink); background: color-mix(in srgb,var(--surface) 30%,var(--panel)); }
.main .part-settings .settings-content { gap: 16px 24px; padding: 18px; background: var(--panel); border-radius: 0 0 8px 8px; }
.main .part-settings .settings-content label { font-size: 11px; color: var(--muted); }
.main .part-settings .settings-content input:not([type=range]), .main .part-settings .settings-content select { background: var(--bg); border-color: var(--border); min-height: 37px; }
.main .part-settings .mix-bar button { font: 11px var(--sans); padding-inline: 10px; }
.main .part-settings .mix-bar button.chosen { background: var(--track-bg); border-color: var(--track); color: var(--track); }
.main .writing-tip { color: var(--muted); font-size: 10px; line-height: 1.7; margin-top: 9px; }

/* Screen-only rules preserve the existing score print stylesheet. */
@media screen {
  body > #dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); max-height: min(88dvh,900px); }
  #dialog[open] { display: flex; flex-direction: column; }
  body > #dialog::backdrop { background: color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter: blur(8px); }
  #dialog .dialog-header { flex-shrink: 0; gap: 20px; padding: 22px 25px 19px; background: var(--panel); border-bottom: 1px solid var(--border); }
  #dialog .dialog-header h2 { font: 650 22px/1.3 var(--sans); letter-spacing: -.5px; }
  #dialog .dialog-header .icon-button { width: 32px; height: 32px; border-radius: 7px; color: var(--muted); }
  #dialog .dialog-body { min-height: 0; overflow: auto; padding: 22px 25px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  #dialog .dialog-body p { font-size: 12px; line-height: 1.75; }
  #dialog .dialog-body .fine-print { font-size: 11px; }
  #dialog .dialog-body .field { gap: 7px; margin-bottom: 16px; }
  #dialog .dialog-body .field > label { color: var(--muted); font-size: 11px; font-weight: 600; }
  #dialog .dialog-body input:not([type=range]):not([type=checkbox]), #dialog .dialog-body select, #dialog .dialog-body textarea { min-height: 37px; border-radius: 7px; border-color: var(--border); background: var(--bg); font-size: 12px; }
  #dialog .dialog-body textarea { font: 12px/1.85 var(--mono); padding: 12px 14px; }
  #dialog .dialog-footer { position: relative; flex-shrink: 0; flex-wrap: wrap; gap: 8px; padding: 16px 25px; background: color-mix(in srgb,var(--surface) 25%,var(--panel)); border-top: 1px solid var(--border); }
  /* Action feedback floats just above the footer: nothing in the dialog moves under the pointer. */
  #dialog .dialog-footer > .dialog-feedback { position: absolute; inset: auto 16px calc(100% + 8px); z-index: 3; margin: 0; padding: 9px 12px; border-color: color-mix(in srgb,var(--accent) 35%,var(--border)); background: var(--panel); color: var(--ink); font-size: 12px; line-height: 1.5; box-shadow: 0 8px 22px color-mix(in srgb,var(--bg) 70%,transparent); pointer-events: none; animation: dialog-feedback-out 250ms ease 7s forwards; }
  @keyframes dialog-feedback-out { to { opacity: 0; visibility: hidden; } }
  #dialog .dialog-footer button, #dialog .preview-actions button { min-height: 37px; padding: 8px 13px; font-size: 12px; border-radius: 7px; }
  #dialog .notice { padding: 12px 14px; background: color-mix(in srgb,var(--surface) 65%,var(--panel)); border: 1px solid var(--border); border-radius: 8px; font-size: 11px; line-height: 1.7; }
  #dialog .dialog-body .error:not(:empty) { margin-block: 12px; padding: 8px 11px; border-left: 2px solid var(--accent); color: var(--ink); font-size: 12px; }
  #dialog :is(.export-card,.feel-option,.idea-option,.chord-shape) { border-color: var(--border); border-radius: 9px; background: color-mix(in srgb,var(--surface) 28%,var(--panel)); box-shadow: none; }
  #dialog :is(.export-card,.feel-option,.idea-option,.chord-shape):hover { border-color: var(--line); background: color-mix(in srgb,var(--surface) 60%,var(--panel)); }
  #dialog :is(.feel-option,.idea-option,.chord-shape).chosen { border-color: var(--accent); background: var(--guitar-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent); }
  #dialog .export-card { min-height: 146px; padding: 18px; gap: 11px; }
  #dialog .export-card strong { font-size: 14px; font-weight: 650; }
  #dialog .export-card span { font-size: 11px; line-height: 1.7; }
  #dialog :is(.feel-option,.idea-option) { min-height: 132px; padding: 16px 14px; gap: 10px; }
  #dialog :is(.feel-option,.idea-option) strong { font-size: 13px; font-weight: 650; }
  #dialog :is(.feel-option,.idea-option) span { font-size: 11px; line-height: 1.65; }
  #dialog .chord-shape { padding: 12px 7px 5px; gap: 5px; }
  #dialog .chord-chip { border-color: var(--border); background: var(--bg); border-radius: 7px; }
  #dialog .preview-status, #dialog .idea-status { padding-block: 4px; font-size: 11px; color: var(--muted); }
  #dialog .range-controls { gap: 10px; }
  #dialog .tap-target { border-style: solid; border-color: color-mix(in srgb,var(--accent) 55%,var(--border)); border-radius: 9px; background: var(--guitar-bg); }
  #dialog .tap-progress { gap: 7px; }
  #dialog .tap-progress span { border-radius: 5px; width: 28px; height: 28px; }
  #dialog .help-grid { gap: 22px 25px; }
  #dialog .help-grid h3 { margin-bottom: 7px; font-size: 13px; font-weight: 650; }
  #dialog .dialog-body .library-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; max-width: none; padding: 0; }
  #dialog .dialog-body .library-actions button { min-height: 75px; padding: 16px; font-size: 12px; border-radius: 8px; background: color-mix(in srgb,var(--surface) 30%,var(--panel)); }
}

@media screen and (max-width:600px) {
  #dialog .dialog-header { padding: 18px; }
  #dialog .dialog-header h2 { font-size: 20px; }
  #dialog .dialog-body { padding: 18px; }
  #dialog .dialog-footer { padding: 14px 18px; }
  #dialog :is(.feel-option,.idea-option) { min-height: 0; padding: 13px 11px; }
  #dialog .dialog-body .library-actions { grid-template-columns: minmax(0,1fr); }
  .main .part-settings .settings-content { padding: 15px; }
  .main .part-settings > summary > .subtle-label { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) { .editor-canvas .drum-grid .drum-step { transition: none; } }

/* A single scrolling paper surface keeps print controls and actions in reach. */
@media screen {
  #dialog.score-dialog .dialog-body { display: flex; flex-direction: column; overflow: hidden; }
  #dialog.score-dialog .dialog-body > div { display: flex; flex-direction: column; min-height: 0; width: 100%; }
  #dialog.score-dialog .score-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; margin-bottom: 12px; }
  #dialog.score-dialog .score-controls p { margin-bottom: 8px; }
  #dialog.score-dialog .score-preview { min-height: 0; max-height: none; flex: 1; overflow: auto; scrollbar-gutter: stable; }
  #dialog.score-dialog .phrase-score p { color: #555b56; line-height: 1.5; }
  #dialog.score-dialog .phrase-score { padding: 20px 24px; }
  /* The octave line (only present with a guitar/bass staff) always shows; longer notes wait for Notation key. */
  #dialog.score-dialog .score-preview:not(.show-score-notes) .score-intro ~ .score-intro ~ .score-intro:not(.score-octave),
  #dialog.score-dialog .score-preview:not(.show-score-notes) .score-legend { display: none; }
  #dialog.score-dialog .score-rhythm-details summary { min-height: 32px; }
  #dialog.score-dialog .score-rhythm-details summary:focus-visible { outline: 2px solid #5266a7; outline-offset: 2px; }
}

/* Export names the parts Mute/Solo leaves out of MIDI/WAV; Loop & practice states what Play will do. */
@media screen {
  #dialog .dialog-choice-copy .export-mix-warning { color: var(--playing-caution,var(--ink)); font-weight: 600; }
  #dialog .export-mix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 15px; }
  #dialog .export-mix p.export-mix-note { flex: 1 1 260px; margin: 0; }
  #dialog .export-mix .export-include-all { flex-shrink: 0; min-height: 34px; padding: 6px 12px; font-size: 12px; border-radius: 7px; }
  #dialog .loop-summary { margin: 4px 0 12px; }
  #dialog .range-controls input[type=checkbox] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
  #dialog label.range-controls { margin-top: 0; font-size: 12px; font-weight: 600; cursor: pointer; }
  #dialog .dialog-body .loop-range { margin: 10px 0 16px; }
}

/* Recovery is a list to find and act on, with original copies retained. */
@media screen {
  #dialog .recovery-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; position:sticky; top:0; z-index:1; padding:0 0 12px; background:var(--panel); }
  #dialog .recovery-filter input { flex:1 1 220px; width:0; min-width:160px; min-height:38px; }
  #dialog .recovery-count { margin:0; color:var(--muted); font-size:11px; }
  #dialog .recovery-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 16px; margin:0 0 10px; padding:14px; }
  #dialog .recovery-row[hidden], #dialog .recovery-filter button[hidden] { display:none; }
  #dialog .recovery-copy { min-width:0; overflow-wrap:anywhere; }
  #dialog .recovery-copy p { margin:5px 0 0; font-size:11px; color:var(--muted); }
  #dialog .recovery-actions { display:flex; flex-wrap:wrap; gap:6px; }
  #dialog .recovery-actions button { margin:0; }
}
@media screen and (max-width:520px) {
  #dialog .recovery-row { grid-template-columns:minmax(0,1fr); }
  #dialog .recovery-actions button { flex:1; min-height:42px; }
  #dialog .recovery-filter input { min-height:42px; }
}