/* A single writing surface, with instrument identity carried by real notes. */
.layout > .main { padding-top: 19px; }
.main .workspace-header { margin-bottom: 13px; }
.main .project-identity > .eyebrow { display: none; }
.main .project-title { font-size: 22px; line-height: 1.3; letter-spacing: -.45px; font-weight: 600; }
.main .project-subtitle { margin-top: 4px; }
.main .editor-panel { border-radius: 10px; box-shadow: 0 3px 14px color-mix(in srgb,var(--bg) 60%,transparent); }
.editor-panel .editor-heading { gap: 11px; min-height: 53px; padding-block: 9px; }

.sidebar .track-button { min-height: 72px; padding: 10px; gap: 10px; }
.sidebar .track-caption { min-width: 0; flex: 1; gap: 0; }
.sidebar .track-name { font-size: 12px; line-height: 1.4; }
.sidebar .track-subtitle { font-size: 10px; line-height: 1.5; }
.sidebar .part-mini { display: block; width: 96px; max-width: 100%; height: 12px; margin-top: 4px; color: var(--track); opacity: .65; }
.sidebar .track-button:hover { background: color-mix(in srgb,var(--surface) 65%,var(--panel)); }
.sidebar .track-button.is-active { border-color: color-mix(in srgb,var(--track) 54%,var(--border)); background: color-mix(in srgb,var(--track-bg) 64%,var(--panel)); }
.sidebar .track-button.is-active::before { inset-block: 10px; width: 3px; background: var(--track); box-shadow: 0 0 0 2px color-mix(in srgb,var(--track) 8%,transparent); }
.sidebar .track-button.is-active .part-mini { opacity: 1; }
.layout > .sidebar .sidebar-bottom { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.layout > .sidebar .sidebar-bottom > button { display: inline-flex; justify-content: flex-start; gap: 7px; min-height: 34px; padding: 7px 8px; border-radius: 6px; color: var(--muted); font-size: 11px; }
.layout > .sidebar .sidebar-bottom > button:hover { color: var(--ink); background: var(--hover); }
.layout > .sidebar .sidebar-bottom > button .icon { width: 15px; height: 15px; }

.main .bars.compact-rail .bar-card.compact { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 13px 23px; align-content: center; gap: 3px; width: 88px; min-width: 88px; height: 55px; padding: 7px 9px; }
.main .bars.compact-rail .bar-card.compact .bar-number { font-size: 10px; font-weight: 600; line-height: 1.3; }
.main .bars.compact-rail .bar-card.compact .bar-mini { display: block; width: 100%; height: 23px; margin: 0; opacity: .9; }
.main .bars.compact-rail .add-bar-card { height: 55px; }

/* Tools, entry values and selection values share one unboxed control region. */
.editor-panel .compose-controls { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; min-height: 50px; padding: 6px 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
.compose-controls .edit-tool-switch { display: inline-flex; align-items: center; flex-shrink: 0; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: transparent; }
.compose-controls .edit-tool-switch button { min-height: 32px; padding: 5px 7px; gap: 5px; border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.compose-controls .edit-tool-switch .icon { width: 14px; height: 14px; }
.compose-controls .edit-tool-switch button:hover { color: var(--ink); background: var(--hover); }
.compose-controls .edit-tool-switch button[aria-pressed=true] { color: var(--track); background: var(--track-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--track) 25%,transparent); }
.compose-controls .edit-tool-switch kbd { color: var(--muted); font: 9px/1 var(--mono); opacity: .75; }
/* Entry and selected-note controls share one grid cell, so selecting never changes the toolbar height. */
.editor-panel .compose-controls > .compose-swap { display: grid; flex: 1 1 480px; min-width: 0; align-items: center; }
.editor-panel .compose-swap > :is(.editor-tools,#note-context) { grid-area: 1 / 1; }
.editor-panel .compose-swap > .editor-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; }
.editor-panel.has-selection .compose-swap > .editor-tools, .editor-panel:not(.has-selection) .compose-swap > #note-context { visibility: hidden; }
.compose-controls .editor-tools :is(label,.field-label,.subtle-label) { color: var(--muted); font-size: 11px; }
.compose-controls .editor-tools .compact-control { display: inline-flex; align-items: center; gap: 6px; }
.editor-panel .compose-controls .entry-controls { gap: 6px; }
.editor-panel .compose-controls .length-tools { gap: 6px; }
.editor-panel .compose-controls .editor-tools select { min-height: 34px; height: 34px; padding: 5px 22px 5px 7px; border-color: var(--border); background: var(--canvas,var(--panel)); font-size: 12px; }
.editor-panel .compose-controls #entry-fret { width: 42px; min-height: 34px; height: 34px; padding: 5px; font-size: 15px; }
.editor-panel .compose-controls .length-tools select { width: 91px; }
.editor-panel .compose-controls select[aria-label="New note length"] { width: 91px; }
.compose-controls .selection-actions { display: inline-flex; align-items: center; flex-shrink: 0; gap: 2px; margin-left: auto; padding-left: 8px; border-left: 1px solid var(--border); }
.compose-controls .selection-actions button { width: 32px; min-width: 32px; height: 34px; padding: 7px; border-radius: 5px; color: var(--muted); }
.compose-controls .selection-actions button .icon { width: 15px; height: 15px; }
.compose-controls .selection-actions button:hover:not(:disabled) { color: var(--ink); background: var(--hover); }
.compose-controls .selection-actions button:disabled { opacity: .3; background: transparent; }
.compose-controls .selection-actions.is-idle, .compose-controls .selection-actions .selection-done.is-idle { visibility: hidden; }
.compose-controls :is(button,input,select,summary):focus-visible { outline: 2px solid var(--track,var(--accent)); outline-offset: 2px; }

.editor-panel .compose-controls #note-context { display: flex; align-items: center; flex-wrap: wrap; flex: 1 1 490px; gap: 6px; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; }
.editor-panel .compose-controls #note-context:empty { display: none; }
.compose-controls #note-context .context-identity { margin-right: 2px; font-size: 11px; }
.compose-controls #note-context .context-unit { gap: 5px; font-size: 11px; }
.compose-controls #note-context :is(input,select) { min-height: 34px; height: 34px; padding: 5px 7px; border-color: var(--border); background: var(--canvas,var(--panel)); font-size: 12px; }
.editor-panel .compose-controls #context-fret { width: 40px; padding-inline: 4px; font-size: 15px; }
.compose-controls #note-context #context-length { width: 100px; padding-right: 20px; }
.compose-controls #note-context > button { min-height: 34px; padding: 6px 7px; border-color: transparent; background: transparent; font-size: 11px; }
.compose-controls #note-context > button[aria-pressed=true] { color: var(--track); background: var(--track-bg); border-color: color-mix(in srgb,var(--track) 28%,transparent); }
.compose-controls #note-context > .icon-button { width: 30px; min-width: 30px; padding-inline: 6px; color: var(--muted); }
.compose-controls #note-context > button:hover { background: var(--hover); }
.compose-controls #note-context .note-advanced { position: static; flex-shrink: 0; color: var(--muted); }
.compose-controls #note-context .note-advanced > summary { width: fit-content; min-height: 34px; padding: 7px 5px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.compose-controls #note-context .note-advanced > summary::marker { font-size: 9px; }
.compose-controls #note-context .note-advanced > summary > .icon { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.compose-controls #note-context .note-advanced[open] > summary { color: var(--ink); background: var(--hover); }
/* Timing & expression drops down over the canvas edge; opening it never moves the music. */
.compose-controls .note-advanced-body { position: absolute; top: calc(100% - 3px); right: 12px; z-index: 30; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 21px; width: min(480px, calc(100% - 24px)); padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.compose-controls .note-advanced-body .field { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; margin: 0; }
.compose-controls .note-advanced-body :is(label,.field-label) { color: var(--muted); font-size: 11px; }
.compose-controls .note-advanced-body small { flex-basis: 100%; color: var(--muted); font-size: 11px; line-height: 1.6; }

.editor-panel .editor-canvas { box-shadow: none; padding-top: 14px; }
.editor-panel .canvas-footer { min-height: 36px; padding: 5px 14px; gap: 10px; border-top-color: color-mix(in srgb,var(--border) 55%,transparent); }
.editor-panel .canvas-footer > .hint { font-size: 10px; line-height: 1.5; }
.editor-panel .canvas-footer > button { min-height: 28px; padding: 5px 7px; font-size: 10px; color: var(--muted); }
.editor-panel .canvas-footer > button .icon { width: 13px; height: 13px; }
.editor-panel .canvas-footer .pitch-readout { display: inline-flex; align-items: center; flex-shrink: 0; gap: 8px; min-height: 30px; margin-left: auto; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb,var(--panel) 70%,var(--canvas)); }
.editor-panel .pitch-readout .pitch-name { color: var(--track); font: 600 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.editor-panel .pitch-readout .pitch-detail { color: var(--muted); font-size: 10px; line-height: 1.4; white-space: nowrap; }
.editor-panel .pitch-readout:empty { display: none; }
.editor-panel .bar-tools { border-top: 1px solid var(--border); background: var(--panel); }
.editor-panel .bar-tools > summary { min-height: 36px; padding: 7px 14px; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1.7; }
.editor-panel .bar-tools > summary::marker { font-size: 9px; }
.editor-panel .bar-tools > summary > .icon { width: 14px; height: 14px; vertical-align: -3px; margin-right: 6px; }
.editor-panel .bar-tools > summary > :is(small,span) { margin-left: 9px; color: var(--muted); font-size: 10px; }
.editor-panel .bar-tools > summary:hover { color: var(--ink); background: color-mix(in srgb,var(--surface) 35%,transparent); }
.editor-panel .bar-tools > summary:focus-visible { outline: 2px solid var(--track); outline-offset: -3px; border-radius: 5px; }
.editor-panel .bar-tools[open] > summary { color: var(--ink); }
.editor-panel .bar-tools .edit-actions { padding: 8px 12px 11px; gap: 5px; border-top: 0; background: transparent; }
.editor-panel .bar-tools .edit-actions button { min-height: 34px; padding: 6px 8px; font-size: 11px; }
.editor-panel .bar-tools .edit-actions button[aria-pressed=true] { color: var(--track); background: var(--track-bg); }

#dialog .visual-guide { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 20px; }
#dialog .visual-guide > section { min-width: 0; }
#dialog .visual-guide svg { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--canvas,var(--bg)); }
#dialog .visual-guide .guide-string { stroke: var(--line); stroke-width: 1; opacity: .6; }
#dialog .visual-guide .guide-tail { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: .65; }
#dialog .visual-guide .guide-note { fill: var(--guitar-bg); stroke: var(--accent); stroke-width: 1; }
#dialog .visual-guide svg text { fill: var(--ink); font: 600 14px var(--mono); }
#dialog .visual-guide .guide-selection { fill: color-mix(in srgb,var(--accent) 10%,transparent); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
#dialog .visual-guide h3 { margin: 13px 0 6px; color: var(--ink); font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -.2px; }
#dialog .visual-guide p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
#dialog .guide-shortcuts { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
#dialog .guide-shortcuts kbd { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--ink); font: 10px var(--mono); }
#dialog .workspace-preferences { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px 22px; }
#dialog .workspace-preferences .field { min-width: 0; margin: 0; }
#dialog .workspace-preferences .field select { width: 100%; }
#dialog .workspace-preferences > label { display: flex; align-items: center; gap: 9px; min-height: 37px; color: var(--ink); font-size: 12px; }
#dialog .workspace-preferences input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
#dialog .workspace-preferences > .fine-print { grid-column: 1 / -1; margin: 0; }

@media (max-width:1050px) {
  .layout > .sidebar { gap: 9px; padding-block: 8px; }
  .layout > .sidebar > div:first-child { min-width: 0; flex: 1; }
  .sidebar .track-list { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 2px; scrollbar-width: thin; }
  .sidebar .track-button { flex: 0 0 144px; min-width: 144px; min-height: 60px; padding: 7px 9px; gap: 8px; }
  .sidebar .track-icon { width: 27px; height: 32px; }
  .sidebar .track-name { font-size: 11px; }
  .sidebar .track-subtitle { font-size: 9px; }
  .sidebar .part-mini { width: 88px; height: 11px; margin-top: 3px; }
  .layout > .sidebar .sidebar-bottom { display: flex; flex-direction: row; align-items: center; gap: 2px; margin-left: auto; padding: 0; }
  .layout > .sidebar .sidebar-bottom > button { display: inline-flex; justify-content: center; padding-inline: 7px; }
  .layout > .main { padding-top: 17px; }
  .main .project-title { font-size: 22px; }
  .main .workspace-header { margin-bottom: 12px; }
}
@media (max-width:680px) {
  .editor-panel .compose-controls { padding-inline: 11px; gap: 6px 8px; }
  .editor-panel .compose-controls .edit-tool-switch { order: 0; }
  .editor-panel .compose-controls .selection-actions { order: 1; }
  .editor-panel .compose-controls > .compose-swap { order: 2; flex-basis: 100%; padding-top: 2px; }
  .compose-controls .editor-tools { gap: 7px 11px; }
  .compose-controls .edit-tool-switch kbd { display: none; }
  .editor-panel .editor-heading { gap: 7px; }
  .editor-panel .bar-tools > summary > :is(small,span) { display: none; }
  .sidebar .track-list { max-width: none; }
  .layout > .sidebar .sidebar-bottom { flex-direction: column; }
  .layout > .sidebar .sidebar-bottom > button { width: 33px; height: 33px; padding: 7px; font-size: 0; gap: 0; }
}
/* Touch phones: tools get a full row; Scroll/Edit and the reserved selection actions share the next. */
@media (max-width:680px) and (any-pointer:coarse) {
  .editor-panel .compose-controls:has(> .touch-navigation) .edit-tool-switch { flex-basis: 100%; }
}
@media (max-width:440px) {
  .sidebar .track-button { flex-basis: 132px; min-width: 132px; }
  .compose-controls #note-context .context-identity { flex-basis: auto; }
  .compose-controls .note-advanced-body { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (max-width:600px) {
  #dialog .visual-guide, #dialog .workspace-preferences { grid-template-columns: minmax(0,1fr); }
  #dialog .visual-guide { gap: 19px; }
  #dialog .visual-guide svg { max-width: 360px; }
  #dialog .guide-shortcuts { gap: 7px; }
  .editor-panel .canvas-footer .pitch-readout { margin-left: auto; }
}
@media (prefers-reduced-motion:reduce) { .compose-controls button, .sidebar .track-button { transition: none; } }

.pitch-readout .pitch-caption { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }