/* Selection, insertion and navigation share one vocabulary across editors. */
@media screen {
  .editor-heading .editor-zoom { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:10px; color:var(--muted); white-space:nowrap; }
  .editor-zoom select { width:82px; min-height:32px; padding:5px 20px 5px 8px; font-size:11px; background:var(--canvas); }
  .editor-heading .bar-jump { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--muted); white-space:nowrap; }
  .bar-jump input { width:47px; min-height:32px; padding:5px 4px; text-align:center; font:12px var(--mono); background:var(--canvas); border:1px solid var(--border); border-radius:5px; }
  .bar-jump input::-webkit-inner-spin-button { appearance:none; }
  .bar-total { font:10px var(--mono); }
  /* The paste destination floats over the canvas corner: copying never inserts a row above the music. */
  .editor-panel > .paste-target { position:relative; z-index:25; height:0; }
  .paste-target .paste-chip { position:absolute; top:6px; right:12px; display:flex; align-items:center; gap:2px; max-width:calc(100% - 24px); padding:2px; border:1px solid color-mix(in srgb,var(--selection) 45%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--selection) 9%,var(--panel)); box-shadow:var(--shadow); font-size:11px; color:var(--muted); }
  .paste-target .paste-here { min-height:30px; padding:5px 9px; color:var(--ink); border:0; background:transparent; font-size:11px; }
  .paste-target .paste-here:hover { background:var(--hover); }
  .paste-target .paste-blocked { min-width:0; padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .paste-target .icon-button { width:30px; height:30px; }
  .insertion-marker { stroke:var(--selection); stroke-width:1.4; stroke-dasharray:4 4; opacity:.8; }
  .insertion-tip { fill:var(--selection); }
  .tab-ruler-target { cursor:copy; }
  .tab-ruler-target:hover { fill:color-mix(in srgb,var(--selection) 6%,transparent); }
  .tab-ruler-target:focus-visible { outline:none; stroke:var(--selection); stroke-width:1.5; }
  .tab-svg[data-visible-bars="8"] .measure-title { font-size:10px; letter-spacing:0; }
  .tab-svg[data-visible-bars="8"] .fret-value { font-size:15px; }
  .tab-svg[data-visible-bars="8"] .note-pitch-label { display:none; }
  .drum-beats button.drum-beat { min-width:0; min-height:32px; padding:0; border:0; border-radius:4px; font:10px var(--mono); }
  .drum-beats button.drum-beat:hover { background:var(--hover); color:var(--ink); }
  .drum-row > .bar-start { border-left:2px solid var(--line); }
  .drum-step.at-cursor { border-bottom:2px solid var(--selection); }
  .part-type-choice { justify-content:flex-start; min-height:52px; padding:12px; gap:12px; border:1px solid var(--border); }
  .part-actions-dialog { display:grid; gap:12px; min-width:0; }
  .part-actions-dialog input { width:100%; }
}
@media screen and (max-width:700px) {
  /* Three rows reach the tab sooner: part + Sound & feel + Focus; bar navigation; View + bar actions. */
  .editor-panel .editor-heading { display:flex; flex-wrap:wrap; align-items:center; gap:5px 6px; }
  .editor-panel .editor-heading .part-title { order:0; flex:1 1 0; min-width:0; }
  .editor-panel #sound-feel-toggle { order:1; flex:0 0 auto; width:auto; margin:0; padding-inline:8px; }
  .editor-panel #focus-writing { order:2; flex:0 0 auto; width:auto; }
  .editor-panel .editor-heading .bar-nav { order:3; flex:1 1 100%; justify-content:center; }
  .editor-panel .editor-heading .editor-zoom { order:4; flex:0 0 auto; margin:0; }
  .editor-panel .editor-heading .pattern-actions { order:5; flex:1 1 190px; width:auto; padding:0; border:0; }
  .editor-panel .bar-jump { font-size:12px; }
  .bar-jump input { width:50px; min-height:38px; }
  .editor-zoom select { width:88px; min-height:38px; }
  .paste-target .paste-chip { right:8px; max-width:calc(100% - 16px); }
  .paste-target .paste-here { min-height:36px; }
  .paste-target .icon-button { width:36px; height:36px; }
  .editor-canvas .tab-svg.phrase-svg:not([data-visible-bars="1"]) { min-width:650px; }
}
/* Narrow phones: the select names its own zoom ("2 bars"); the word View stays as its accessible name. */
@media screen and (max-width:400px) {
  .editor-panel .editor-heading .editor-zoom { font-size:0; gap:0; }
}
@media screen and (any-pointer:coarse) {
  .bar-jump input,.editor-zoom select,.paste-target .paste-here,.paste-target .icon-button { min-height:44px; }
  .drum-beats button.drum-beat { min-height:44px; }
}

@media screen {
  .task-help .help-intro { margin:0 0 14px; }
  .help-topic { border:1px solid var(--border); border-radius:8px; margin-top:8px; overflow:hidden; }
  .help-topic > summary { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 12px; font-size:12px; font-weight:600; cursor:pointer; background:var(--surface); }
  .help-topic > summary::after { content:'+'; margin-left:auto; color:var(--muted); font:16px var(--mono); }
  .help-topic[open] > summary::after { content:'−'; }
  .help-topic > summary .icon { width:16px; height:16px; flex-shrink:0; }
  .help-topic > summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
  .help-topic-body { padding:12px 15px 2px; }
  .help-steps { margin:0; padding-left:22px; }
  .help-steps li { margin:0 0 12px; padding-left:4px; color:var(--muted); font-size:12px; }
  .help-steps li::marker { color:var(--accent); font-weight:700; }
  .help-steps strong { color:var(--ink); font-size:12px; }
  #dialog .help-steps p { margin:4px 0 0; line-height:1.55; }
  .help-topic-body .shortcut-guide { margin:0 0 12px; }
}