@font-face { font-family: "Score Bravura"; src: url("../fonts/Bravura.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Score Pori"; src: url("../fonts/PoriChordsStd.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Score Petaluma"; src: url("../fonts/PetalumaScript.otf") format("opentype"); font-display: swap; }
.nc-score-dialog { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: 92vh; padding: 18px; border: 1px solid #9c9b97; border-radius: 12px; background: #f6f5f1; color: #202322; }
.nc-score-dialog::backdrop { background: #10201dcc; }
.nc-score-editor { font: 14px/1.5 system-ui, sans-serif; color: #202322; }
.nc-score-editor h2 { margin: 0 0 10px; }
.nc-score-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.nc-score-controls label { display: flex; flex-direction: column; gap: 4px; max-width: 100%; font-size: 12px; }
.nc-score-controls input, .nc-score-controls select { box-sizing: border-box; width: 170px; max-width: 100%; min-height: 34px; padding: 5px 7px; border: 1px solid #9baba5; border-radius: 5px; color: #172920; background: white; font: 14px system-ui, sans-serif; }
.nc-score-controls input[type="number"] { width: 100px; }
.nc-score-controls input[type="file"], .nc-score-controls select { width: 270px; }
.nc-score-controls button, .nc-score-close { min-height: 34px; padding: 6px 11px; border: 1px solid #778c82; border-radius: 5px; color: #172920; background: #fff; font: 13px system-ui, sans-serif; cursor: pointer; }
.nc-score-controls button:hover, .nc-score-close:hover { background: #e2eee7; }
.nc-score-controls button:disabled { opacity: .5; cursor: default; }
.nc-score-editor fieldset { min-width: 0; margin: 12px 0; border: 1px solid #b1b9b2; border-radius: 6px; }
.nc-score-help { max-width: 1000px; margin: 10px 0; color: #45534b; font: 13px/1.55 system-ui, sans-serif; }
.nc-score-error { color: #9b1723; font-weight: 600; }
.nc-score-preview { overflow-x: auto; border: 1px solid #c8ccc7; border-radius: 6px; background: white; margin: 12px 0; }
.nc-score-paper { box-sizing: border-box; min-width: 760px; padding: 24px; background: white; color: #111; }
.nc-score-paper header { text-align: center; }
.nc-score-paper h2 { font: 32px/1.25 "Score Petaluma", Georgia, serif; margin: 6px 0; }
.nc-score-paper header p { margin: 4px; font: 15px/1.4 "Score Petaluma", Georgia, serif; }
.nc-score-system { display: block; width: 100%; height: auto; overflow: visible; break-inside: avoid; }
.nc-score-editor .nc-score-system { touch-action: none; }
.nc-score-system text { fill: #111; }
.nc-score-view { display: flex; gap: 10px; align-items: center; padding: 10px; font: 14px system-ui, sans-serif; }
.nc-score-view select { max-width: 100%; min-height: 34px; font: inherit; }
.nc-harmony-paper .nc-chord { font-size: 18px; }
.nc-repeat-label { font: 12px system-ui, sans-serif; }
.nc-harmony-cell.nc-current-bar .nc-cell-background { fill: #dceeff; }
.nc-harmony-cell.nc-selected-bar .nc-cell-background { fill: #edf4ec; }
.nc-harmony-paper .nc-score-help { font-size: 12px; }
.nc-score-beat { cursor: pointer; }
.nc-score-append { cursor: pointer; }
.nc-score-append circle { fill: #e2eee7; stroke: #19714e; }
.nc-score-append text { font: bold 20px system-ui, sans-serif; }
.nc-score-append:focus circle, .nc-score-append:hover circle { fill: #bddcc9; stroke-width: 2; }
.nc-score-beat:focus rect { stroke: #19714e; stroke-width: 1; }
.nc-score-beat path, .nc-score-beat text { display: none; }
.nc-score-drop-active, .nc-score-drop-active * { cursor: copy !important; }
.nc-score-drop-active .nc-score-beat.current path { display: block; stroke: #1763ae; stroke-width: 4; }
.nc-score-drop-active .nc-score-beat.current rect { fill: #368ae433; stroke: #1763ae; stroke-width: 2; }
.nc-score-drop-active .nc-score-beat.current text { display: block; fill: #12487c; stroke: white; stroke-width: 5px; paint-order: stroke fill; font: 700 18px system-ui, sans-serif; pointer-events: none; }
.nc-barline { stroke: #111; stroke-width: 1; fill: none; }
.nc-staff-line, .nc-signature-line { stroke: #555; stroke-width: .8; fill: none; }
.nc-rhythm-tools button { min-width: 40px; padding: 2px 5px; }
.nc-rhythm-tools button svg { pointer-events: none; }
.nc-music { font-family: "Score Bravura", serif; font-size: 28px; }
.nc-chord { font: 22px "Score Pori", Georgia, serif; cursor: pointer; }
.nc-chord-empty { font: italic 16px Georgia, "Times New Roman", serif; pointer-events: none; }
[data-score-chord]:focus { outline: 2px solid #19714e; }
[data-score-chord], [data-score-rhythm] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.nc-selected-item > rect { stroke: #236ca5; stroke-width: 1; }
[data-score-rhythm]:focus { outline: 2px solid #19714e; }
.nc-bar-number { font: 11px system-ui, sans-serif; fill: #555 !important; }
.nc-score-footnote { color: #555; font: 11px/1.5 system-ui, sans-serif; }
.nc-score-print { margin: 0; background: white; }
@media (max-width: 600px) {
  .nc-score-dialog { width: calc(100vw - 16px); max-height: 96vh; padding: 10px; box-sizing: border-box; }
  .nc-score-controls { gap: 8px; }
}
@media print {
  .nc-score-append { display: none; }
  .nc-score-beat { display: none; }
  @page { size: auto; margin: 12mm; }
  .nc-score-paper { min-width: 0; padding: 0; }
  .nc-score-system { break-inside: avoid; page-break-inside: avoid; }
  .nc-score-paper header { break-after: avoid; }
  .nc-score-footnote { margin-top: 10px; }
}

.nc-score-style { margin: 14px 0 0 6%; font: 700 16px system-ui, sans-serif; }
.nc-score-warning:empty { display: none; }
.nc-score-warning { color: #8a4300; font-weight: 600; }
.nc-score-editor [data-s="snap"], .nc-score-editor [data-s="clef"], .nc-score-editor [data-s="staff2"] { width: 170px; }
.nc-score-clef { font-size: 36px; }
.nc-key-signature { font-size: 20px; }
.nc-meter-number { font: 700 17px Georgia, serif; }
.nc-score-note { color: #111; stroke: currentColor; stroke-width: 1.3; cursor: grab; touch-action: none; }
.nc-score-note.nc-selected-item { color: #1763ae; }
.nc-score-note:focus { outline: none; color: #1763ae; }
.nc-note-accidental { stroke: none; font-size: 22px; }
.nc-score-tuplet { fill: none; stroke: #111; stroke-width: 1.2; pointer-events: none; }
.nc-tuplet-number { fill: #111; stroke: none; font: italic 700 13px Georgia, serif; }
.nc-tuplet-rest, .nc-note-rest { pointer-events: none; }
[data-score-mark] { cursor: grab; touch-action: none; }
[data-score-mark] > :is(rect, circle) { fill: white; stroke: #111; stroke-width: 1.5; }
[data-score-mark]:focus > :is(rect, circle) { stroke: #1763ae; stroke-width: 3; }
.nc-score-mark-text { font: 700 16px system-ui, sans-serif; pointer-events: none; }
.nc-note-tools button { min-width: 43px; height: 48px; padding: 1px 3px; }
.nc-note-tools svg, [data-score-tool^="mark:"] svg { pointer-events: none; }

.nc-native-score-ghost { position: fixed; z-index: 2147483647; pointer-events: none; padding: 10px 15px; border-radius: 8px; background: #1f5fbf; color: white; font: 700 20px/1.25 system-ui, sans-serif; box-shadow: 0 3px 10px #0005; white-space: nowrap; }

.nc-score-info-wrap { height: 24px; margin-left: 6%; }
.nc-score-info { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid #778c82; border-radius: 50%; color: #355147; font: 700 14px system-ui, sans-serif; cursor: help; }
.nc-score-info:focus-visible { outline: 2px solid #19714e; outline-offset: 2px; }
.nc-score-info-bubble { position: fixed; z-index: 2147483646; box-sizing: border-box; width: min(330px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid #9baba5; border-radius: 7px; background: #fffef7; color: #26342b; box-shadow: 0 5px 20px #0003; font: 13px/1.5 system-ui, sans-serif; }
.nc-triplet-popup { position: fixed; z-index: 2147483646; padding: 10px; border: 1px solid #778c82; border-radius: 8px; background: #fffef7; box-shadow: 0 5px 20px #0004; }
.nc-triplet-popup p { margin: 0 0 5px; font: 600 13px system-ui, sans-serif; }
.nc-triplet-popup > div { display: flex; gap: 5px; }
.nc-triplet-popup button { padding: 2px; border: 1px solid #9baba5; border-radius: 4px; background: white; cursor: pointer; }
.nc-triplet-popup button:disabled { opacity: .35; cursor: not-allowed; }
.nc-triplet-popup button:focus-visible { outline: 2px solid #19714e; }
.nc-triplet-popup button svg { pointer-events: none; }
@media print { .nc-score-info-wrap, .nc-triplet-popup { display: none; } }

.nc-score-drop-active .nc-score-beat.current path { stroke: #23824a; }
.nc-score-drop-active .nc-score-beat.current rect { stroke: #23824a; fill: #45b56b22; }
.nc-note-drop-preview { color: #167139; fill: currentColor; stroke: currentColor; stroke-width: 1.4; pointer-events: none; }
.nc-drop-pitch { fill: #12632f !important; stroke: white; stroke-width: 3px; paint-order: stroke fill; font: 700 13px system-ui,sans-serif; }
.nc-triplet-slot { pointer-events: none; }
.nc-triplet-slot-outline { fill: none; stroke: none; }
.nc-triplet-slot-current .nc-triplet-slot-outline { fill: #49bc6d33; stroke: #15813b; stroke-width: 2; }
.nc-triplet-slot-current text { fill: #16823b !important; }
[data-score-tuplet], [data-score-repeat] { cursor: grab; outline: none; }
[data-score-tuplet] path, [data-score-repeat] path { pointer-events: stroke; stroke-width: 2; }
[data-score-tuplet].nc-selected-item, [data-score-tuplet]:focus, [data-score-repeat].nc-selected-item, [data-score-repeat]:focus { color: #16813d; }
[data-score-tuplet].nc-selected-item path, [data-score-repeat].nc-selected-item path { stroke: #16813d; stroke-width: 3; }
.nc-triplet-delete-popup button { font: 600 13px system-ui; padding: 9px; min-height: 40px; }
.nc-native-score-ghost { font-size: 14px; padding: 6px 10px; }
.nc-score-paper header .nc-score-composer { text-align: right; margin: .35em 0 .7em auto; max-width: 60%; overflow-wrap: anywhere; font-size: clamp(12px, 2.2vw, 16px); }
.nc-score-paper header h2 { text-align: center; }
@media print { .nc-score-paper header .nc-score-composer { text-align: right; } }
[data-score-tuplet], [data-score-repeat], [data-score-tuplet] .nc-tuplet-number, [data-score-repeat] .nc-repeat-label { pointer-events: all; }

[data-score-tuplet]:focus > rect, [data-score-repeat]:focus > rect, [data-score-tuplet].nc-selected-item > rect, [data-score-repeat].nc-selected-item > rect { stroke: #16813d; stroke-width: 2; fill: #45c56a22; }
.nc-score-editing-unavailable #openScoreEditorBtn,
.nc-score-editing-unavailable #scoreEditorActionRow,
.nc-score-editing-unavailable #scoreEditorMount,
.nc-score-editing-unavailable #scoreEditorBtn {
  display: none !important;
}

/* Score toolbar and floating tool windows */
.nc-score-toolbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px; border: 1px solid #9baba5; border-radius: 6px; background: #e4ebe7; font: 13px system-ui, sans-serif; }
.nc-score-toolbar button { min-height: 32px; padding: 5px 10px; border: 1px solid #778c82; border-radius: 5px; color: #172920; background: #fff; font: 13px system-ui, sans-serif; cursor: pointer; }
.nc-score-toolbar button:hover:not(:disabled) { background: #e2eee7; }
.nc-score-toolbar button:disabled { opacity: .5; cursor: not-allowed; }
.nc-score-toolbar button[aria-pressed="true"], .nc-score-toolbar button[aria-expanded="true"] { border-color: #19714e; background: #cfe5d8; box-shadow: inset 0 0 0 1px #19714e; }
.nc-score-toolbar .nc-score-close { float: none; position: static; font-weight: 600; }
.nc-toolbar-group { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.nc-toolbar-spacer { flex: 1 1 0; }
.nc-transport { align-items: center; padding: 0 6px; border-left: 1px solid #9baba5; border-right: 1px solid #9baba5; }
.nc-score-toolbar .nc-transport button { min-width: 36px; padding: 5px 8px; font-size: 12px; line-height: 1; }
.nc-score-toolbar .nc-transport button[data-s="play"].nc-active { color: white; background: #19714e; }
.nc-toolbar-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.nc-playhead { fill: none; stroke: #c0392b; stroke-width: 2; pointer-events: none; }
@media print { .nc-transport, .nc-playhead { display: none !important; } }
.nc-toolbar-sound { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.nc-toolbar-sound select { min-height: 32px; max-width: 150px; border: 1px solid #9baba5; border-radius: 5px; background: white; font: 12px system-ui, sans-serif; }
.nc-toolbar-menu { position: relative; }
.nc-toolbar-menu-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 100000; display: flex; flex-direction: column; gap: 2px; min-width: 230px; padding: 5px; border: 1px solid #778c82; border-radius: 6px; background: white; box-shadow: 0 6px 18px #0003; }
.nc-toolbar-menu-list[hidden] { display: none; }
.nc-toolbar-menu-list button { text-align: left; border-color: transparent; }
.nc-toolbar-menu-list button[aria-checked="true"]::before { content: "✓ "; color: #19714e; font-weight: 700; }
.nc-menu-check { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font: 12px system-ui, sans-serif; }
.nc-score-toolbar .nc-score-info { flex: none; }
.nc-score-window { position: fixed; z-index: 1000; top: 80px; left: 20px; box-sizing: border-box; width: 290px; max-width: calc(100vw - 16px); overflow: auto; padding: 0 7px 7px; border: 1px solid #555; border-radius: 6px; background: #eee; box-shadow: 3px 4px 12px #0005; font: 12px system-ui, sans-serif; }
.nc-score-window[hidden] { display: none; }
.nc-score-window[data-window="details"], .nc-score-window[data-window="file"], .nc-score-window[data-window="chords"], .nc-score-window[data-window="form"] { width: 360px; }
.nc-window-handle { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; margin: 0 -7px 4px; padding: 6px 7px; background: #dfe6e2; border-bottom: 1px solid #b5beb9; cursor: move; font-weight: 700; }
.nc-window-handle > span:first-child { flex: 1; }
.nc-window-handle button { min-width: 28px; min-height: 26px; padding: 0 6px; border: 1px solid #778c82; border-radius: 4px; background: white; cursor: pointer; }
.nc-help-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid #778c82; border-radius: 50%; background: white; color: #355147; font: 700 11px system-ui, sans-serif; cursor: help; }
.nc-help-dot:focus-visible { outline: 2px solid #19714e; outline-offset: 2px; }
.nc-score-window .nc-score-controls { gap: 4px; margin: 5px 0; }
.nc-score-window .nc-score-controls button { min-height: 34px; padding: 3px 6px; font-size: 11px; }
.nc-score-window .nc-score-controls label { font-size: 11px; }
.nc-score-window .nc-score-controls :is(select, input) { min-height: 30px; padding: 3px; font-size: 12px; width: 100%; }
.nc-score-window[data-window="repeats"] .nc-score-controls :is(select, input) { width: 65px; }
.nc-score-window[data-window="details"] .nc-score-controls label, .nc-score-window[data-window="chords"] .nc-score-controls label, .nc-score-window[data-window="form"] .nc-score-controls label { width: calc(50% - 2px); }
.nc-score-window[data-window="file"] .nc-score-controls label { width: 100%; }
.nc-score-window .nc-rhythm-tools button, .nc-score-window .nc-note-tools button { min-width: 36px; width: 36px; height: 38px; padding: 1px; }
.nc-score-window .nc-note-tools button[data-score-tool="triplet"] { width: 42px; }
.nc-score-window .nc-rhythm-tools button[data-score-tool="erase-rhythm"] { width: auto; }
.nc-score-window button svg { max-width: 32px; height: 32px; pointer-events: none; }
.nc-score-window [draggable="true"] { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.nc-score-window p:empty { display: none; }
.nc-help-bubble { pointer-events: none; }
@media print { .nc-score-toolbar, .nc-score-window, .nc-suggestion-popup, .nc-help-bubble { display: none !important; } }

/* Note drops show only a short guide at chord-track height, above the cursor. */
.nc-score-beat path.nc-note-guide, .nc-score-drop-active .nc-score-beat.current path.nc-note-guide { display: none; }
.nc-score-drop-active.nc-note-drop .nc-score-beat.current path { display: none; }
.nc-score-drop-active.nc-note-drop .nc-score-beat.current path.nc-note-guide { display: block; stroke: #23824a; stroke-width: 4; }
.nc-score-drop-active.nc-note-drop .nc-score-beat.current rect { stroke: none; fill: #45b56b14; }

/* Section letters and text marks in the headroom above the barline. */
[data-score-mark] > circle { fill: white; }
[data-score-mark][data-mark-kind="section"] .nc-score-mark-text { font-size: 18px; }

/* Chord suggestions above the chord track */
.nc-score-preview { position: relative; }
.nc-suggestion-popup { position: absolute; z-index: 5; display: flex; flex-wrap: wrap; gap: 3px; max-width: 200px; padding: 4px; transform: translateY(-100%); border: 1px solid #19714e; border-radius: 6px; background: #f3fbf6ee; box-shadow: 0 3px 10px #0003; }
.nc-suggestion { display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 6px; border: 1px solid #8fb5a0; border-radius: 4px; background: white; color: #10291c; font: 600 13px system-ui, sans-serif; cursor: grab; touch-action: none; user-select: none; }
.nc-suggestion small { color: #19714e; font-size: 9px; }
.nc-suggestion:hover, .nc-suggestion:focus-visible { background: #d9efe2; outline: none; border-color: #19714e; }
.nc-suggestion[data-level="2"] { border-color: #b68b2f; }
.nc-suggestion[data-level="3"] { border-color: #3768b3; }
.nc-suggestion[data-level="4"] { border-color: #8a4fb0; }
.nc-suggestion[data-level="5"] { border-color: #b4483c; }