/* ── Simple / Expert modes ──────────────────────────────────────────
   <body data-ns-mode="simple|expert"> is set by js/modes.js. Elements
   tagged .ns-expert disappear in Simple mode; .ns-simple only exists in
   Simple mode. Nothing is removed from the DOM, so every existing id and
   handler keeps working in both modes. */
body[data-ns-mode="simple"] .ns-expert { display: none !important; }
body:not([data-ns-mode="simple"]) .ns-simple { display: none !important; }

/* Simple toolbar: Play | Undo-Redo | Next beat | More.
   css/noteswar.css turns #toolbarActions into a swipeable one-row scroller on
   phones with ID-level !important rules, so these use the id too. */
body[data-ns-mode="simple"] #toolbarActions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px 10px 8px !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
body.asm-open[data-ns-mode="simple"] #toolbarActions { display: none !important; }
body[data-ns-mode="simple"] #toolbarActions > :not(.ns-keep) { display: none !important; }
body[data-ns-mode="simple"] #toolbarActions > .ns-keep {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    padding: 4px 6px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}
body[data-ns-mode="simple"] #toolbarActions > #undoRedoGroup { flex-direction: row !important; padding: 0; }
body[data-ns-mode="simple"] #undoRedoGroup button { font-size: 22px !important; min-height: 48px; min-width: 40px; }
body[data-ns-mode="simple"] #playBtn { order: 1; }
body[data-ns-mode="simple"] #undoRedoGroup { order: 2; }
body[data-ns-mode="simple"] #simpleBeatBtn { order: 3; }
body[data-ns-mode="simple"] #moreBtn { order: 4; }
.ns-ico { font-size: 20px; line-height: 1; }
.ns-lbl { font-size: 12px; }

/* Simple palette: the 13 note keys plus a wide Delete, 44px+ targets */
body[data-ns-mode="simple"] .notes-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important; }
body[data-ns-mode="simple"] .note-btn { min-height: 48px; }
body[data-ns-mode="simple"] .note-btn.ns-del { font-size: 20px; }
body[data-ns-mode="simple"] .note-btn.ns-del { font-size: 14px; }
body[data-ns-mode="simple"] #bottomPanel { max-height: 40vh; max-height: 40dvh; }
.spacebar-label { font-size: 12px; opacity: .8; }

/* More sheet */
.more-sheet { max-height: 86vh; max-height: 86dvh; overflow-y: auto; }
.more-list { display: flex; flex-direction: column; gap: 6px; }
.more-group { margin-top: 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #9aa7b8; }
.more-item {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 10px 12px;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07); color: inherit;
    font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.more-item:hover { background: rgba(74,158,255,0.16); }

.note-legend { margin: 8px 4px 2px; font-size: 12px; line-height: 1.4; color: #9aa7b8; text-align: center; }

/* Simple palette on phones: no header row (tabs are gone, title is hidden
   there anyway); Show/hide note keys lives in More. */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
    body[data-ns-mode="simple"] .bottom-panel > .panel-header { display: none; }
}
/* Narrowest phones (folded foldables): keep all four controls on one row */
@media (max-width: 340px) {
    body[data-ns-mode="simple"] #toolbarActions { gap: 4px !important; padding: 6px 6px 8px !important; }
    body[data-ns-mode="simple"] #toolbarActions > .ns-keep { padding-left: 2px; padding-right: 2px; font-size: 12px; }
    /* No room for two 44px buttons in one column: Redo stays in More. */
    body[data-ns-mode="simple"] #redoBtn { display: none !important; }
    body[data-ns-mode="simple"] #undoRedoGroup button { font-size: 20px !important; }
    body[data-ns-mode="simple"] #toolbarActions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    body[data-ns-mode="simple"] .ns-lbl { font-size: 11px; }
}

/* ── Notation system (js/system.js sets <body data-ns-system>) ──────────── */
body[data-ns-system="western"] .ns-h { display: none !important; }
body:not([data-ns-system="western"]) .ns-w { display: none !important; }

/* sargam marks (underline = komal, bar = tivra, octave dots) don't apply to note names */
body[data-ns-system="western"] .note.flat { text-decoration: none; }
body[data-ns-system="western"] .note.sharp::after { display: none; }

/* ── Expert toolbar ───────────────────────────────────────────────────
   Play | Undo/Redo | Palette | Info | Mixer | Sa | File | Live | More.
   Remark, Theme and the Assignments switch live in More (.tb-menu). */
body:not([data-ns-mode="simple"]) #toolbarActions > .tb-menu { display: none !important; }
body:not([data-ns-mode="simple"]) #toolbarActions { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 6px; }
body:not([data-ns-mode="simple"]) #toolbarActions > * { flex: 1 1 88px; min-height: 40px; }
body:not([data-ns-mode="simple"]) #toolbarActions > #moreBtn { flex-direction: row; gap: 6px; }
body:not([data-ns-mode="simple"]) #toolbarActions > * { order: 5; }
body:not([data-ns-mode="simple"]) #toolbarActions > #playBtn { order: 1; }
body:not([data-ns-mode="simple"]) #toolbarActions > #undoRedoGroup { order: 2; }
body:not([data-ns-mode="simple"]) #toolbarActions > #moreBtn { order: 20; }
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
    body:not([data-ns-mode="simple"]) #toolbarActions { flex-wrap: nowrap; }
    body:not([data-ns-mode="simple"]) #toolbarActions > * { flex: 0 0 auto; min-height: 44px; }
}

/* ── Settings strip on the score ─────────────────────────────────────── */
.song-bar {
    display: flex; gap: 6px; margin-top: 10px; padding: 2px 2px 4px;
    justify-content: center; flex-wrap: wrap;
}
.sb-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 4px 0 12px;
    border: 1px solid rgba(74,158,255,0.35); border-radius: 22px;
    background: rgba(74,158,255,0.08); color: #1f3550; font-size: 14px;
    white-space: nowrap;
}
.sb-k { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: #5a6b80; }
.sb-chip select {
    border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600;
    min-height: 44px; min-width: 52px; padding: 0 8px 0 0; cursor: pointer; max-width: 46vw;
}
.sb-tempo { padding: 0; gap: 0; }
.sb-tempo button {
    min-width: 44px; min-height: 44px; border: 0; background: transparent;
    color: inherit; font-size: 20px; cursor: pointer; border-radius: 22px;
}
.sb-v { display: inline-flex; align-items: baseline; gap: 3px; min-width: 56px; justify-content: center; }
.sb-v small { font-size: 10px; color: #5a6b80; }
.sb-toggle { padding: 0 14px; cursor: pointer; font: inherit; font-size: 14px; }
.sb-toggle.on { background: #1f6fd1; border-color: #1f6fd1; color: #fff; }
body.dark-mode .sb-chip { color: #e6edf5; background: rgba(74,158,255,0.12); }
body.dark-mode .sb-k, body.dark-mode .sb-v small { color: #9aa7b8; }
body.dark-mode .sb-chip select option { color: #111; }
@media (max-width: 768px) {
    /* one swipeable row on phones instead of wrapping into a block */
    .song-bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .song-bar::-webkit-scrollbar { display: none; }
    .sb-chip { flex: 0 0 auto; }
}

/* ── Entry bar on the keyboard ───────────────────────────────────────── */
.entry-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 10px; }
.seg { display: inline-flex; align-items: center; gap: 4px; }
.seg-k { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: #9aa7b8; margin-right: 2px; }
.seg button {
    min-height: 44px; min-width: 44px; padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
    background: rgba(255,255,255,0.06); color: #dde6f0; font: inherit; font-size: 13px; cursor: pointer;
}
.seg button[aria-checked="true"] { background: #1f6fd1; border-color: #1f6fd1; color: #fff; font-weight: 600; }
@media (max-width: 340px) { .seg button { padding: 0 8px; } .seg-k { display: none; } }

/* ── Shortcuts sheet ─────────────────────────────────────────────────── */
.kbd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kbd-table th { text-align: left; font-weight: 500; color: #9aa7b8; padding: 7px 8px 7px 0; vertical-align: top; width: 38%; }
.kbd-table td { padding: 7px 0; }
.kbd-table tr + tr { border-top: 1px solid rgba(255,255,255,0.08); }
kbd {
    display: inline-block; min-width: 1.4em; padding: 1px 6px; border-radius: 5px; text-align: center;
    border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); font: 12px/1.6 ui-monospace, monospace;
}
.more-item small { color: #9aa7b8; font-size: 12px; margin-left: 4px; }

/* The taal line duplicates the settings chips on screen; exports keep it
   (html2canvas clones the page with body.ns-exporting) and drop the chips. */
body:not(.ns-exporting) #displayTaal, body:not(.ns-exporting) .meta-sep { display: none; }
body.ns-exporting .song-bar { display: none !important; }
body[data-ns-system="western"]:not(.ns-exporting) .score-meta { display: none; }

/* Octave + notes-per-beat on one row on phones; labels only where they fit */
.seg button { font-size: 15px; }
#perBeatSeg button { font-size: 20px; line-height: 1; }
@media (max-width: 768px) {
    .entry-bar { gap: 6px 8px; margin-bottom: 8px; }
    .seg { gap: 3px; }
    .seg-k { display: none; }
    .seg button { padding: 0 6px; }
}
.trip { font-size: 11px; vertical-align: super; margin-left: 1px; }
body[data-ns-system="western"] .note-btn.flat { text-decoration: none; }

/* ── Staff / tab views (js/staff.js sets <body data-ns-view>) ─────────── */
.view-seg { justify-content: center; margin-top: 10px; display: flex; }
.view-seg button { color: #1f3550; background: rgba(74,158,255,0.08); border-color: rgba(74,158,255,0.35); }
body.dark-mode .view-seg button { color: #e6edf5; }
.view-seg button[aria-checked="true"] { color: #fff; }
body:not([data-ns-view="staff"]):not([data-ns-view="stafftab"]) #staffView { display: none; }
body[data-ns-view="staff"] #composition, body[data-ns-view="stafftab"] #composition { display: none; }
.ns-staff { background: #fff; border-radius: 12px; padding: 8px 4px; margin: 0 0 12px; overflow-x: auto; min-height: 140px; }
.ns-staff svg { display: block; }
.ns-staff .ns-staff-note { cursor: pointer; }
.ns-staff .ns-staff-note.playing path, .ns-staff .ns-staff-note.playing text { fill: #e8590c; stroke: #e8590c; }
.ns-staff .ns-staff-cursor { fill: #1f6fd1; }
.ns-staff-msg { color: #5a6b80; text-align: center; padding: 30px 10px; margin: 0; }
.tab-entry { display: none; margin: 0 0 10px; }
body[data-ns-view="stafftab"] .tab-entry { display: block; }
.fret-pad { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.fret-pad button {
    min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06); color: #dde6f0; font: inherit; font-size: 15px; cursor: pointer;
}
.tab-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-size: 13px; color: #9aa7b8; }
.tab-opts select { min-height: 44px; margin-left: 6px; }
.tab-hint { font-size: 12px; color: #9aa7b8; margin: 6px 2px 0; }
/* Staff lines, beams and ties are drawn over noteheads; let clicks reach the notes. */
.ns-staff .vf-stave, .ns-staff .vf-tabstave, .ns-staff .vf-stavetie, .ns-staff .vf-beam,
.ns-staff .vf-stavebarline, .ns-staff .vf-clef, .ns-staff .vf-timesignature { pointer-events: none; }
.ns-staff .ns-hit { fill: transparent; stroke: none; pointer-events: all; }
.ns-staff .ns-staff-note:hover path { fill: #1f6fd1; }
/* What an exported page (PDF/PNG) leaves out: editing aids, and the full score
   instead of the scroll window. */
body.ns-exporting .workspace { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding-bottom: 20px !important; }
body.ns-exporting .composition-cursor, body.ns-exporting .ns-staff-cursor, body.ns-exporting .view-seg { display: none !important; }
body.ns-exporting .note.selected, body.ns-exporting .note.multi-selected { background: transparent !important; box-shadow: none !important; outline: none !important; }
body.ns-exporting .ns-staff .ns-staff-note path { fill: #000 !important; stroke: #000 !important; }
body.ns-exporting .main-container { height: auto !important; display: block !important; }
body.ns-exporting .workspace { width: 1100px !important; max-width: 1100px !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#composition:focus-visible { outline: 2px solid #1f6fd1; outline-offset: 4px; border-radius: 12px; }

/* ── Taal marks: sam (X), khali (0), tali (numbers) at each vibhaag ───── */
.taal-start { position: relative; }
.taal-start::before {
    content: attr(data-taal-mark);
    position: absolute; top: -14px; left: 2px;
    font: 600 11px/1 system-ui, sans-serif; color: #8a5a00;
}
.taal-divide { border-left: 2px solid rgba(138, 90, 0, 0.35); padding-left: 4px; margin-left: 2px; }
.measure-content { padding-top: 14px; }
body.dark-mode .taal-start::before { color: #ffc27a; }

/* Plan locks shown up front (body classes set from the server's plan answer) */
body.ns-export-locked button[onclick^="exportPDF"]::after,
body.ns-export-locked button[onclick^="exportImage"]::after,
body.ns-export-locked button[onclick^="exportMIDI"]::after,
body.ns-export-locked button[onclick^="exportMusicXML"]::after,
body.ns-export-locked button[onclick^="exportSwar"]::after,
body.ns-collab-locked #collabBtn::after { content: " 🔒"; font-size: .85em; }
body.ns-export-locked #shareExportModal .modal-content::before {
    content: "🔒 Exports need the Plus or Pro plan. Share links and text export are free.";
    display: block; margin-bottom: 10px; font-size: 12px; color: #ffd666;
}

/* Chord symbols */
.note { position: relative; }
.note-chord {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    margin-bottom: 2px; font: 700 13px/1 system-ui, sans-serif; color: #1f3550; white-space: nowrap; pointer-events: none;
}
body.dark-mode .note-chord { color: #e6edf5; }
.chord-entry { display: inline-flex; align-items: center; gap: 6px; }
.chord-entry input {
    width: 90px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06); color: #dde6f0; font: inherit; font-size: 15px;
}
.chord-entry button {
    min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06); color: #dde6f0; font: inherit; cursor: pointer;
}
@media (max-width: 768px) { .chord-entry .seg-k { display: inline; } }

/* Room for the score on phones */
body:not(.ns-exporting) .score-meta.no-raag { display: none; }
@media (max-width: 768px) {
    .score-header { margin-bottom: 10px !important; padding-bottom: 8px !important; }
    .score-title { margin-bottom: 4px !important; }
    .song-bar, .view-seg { margin-top: 6px; }
    #durStatusLine { display: none !important; }
    #durationStrip { padding-bottom: 4px !important; }
}
.presence-chip { display: inline-block; padding: 1px 7px; border: 1px solid; border-radius: 10px; font-size: 11px; line-height: 16px; }

.modal-h { margin: 0 0 12px; font-size: 18px; color: #6aafff; }

/* ── Safari/WebKit: selects inside the settings chips ──────────────────
   WebKit keeps a native grey box unless appearance is removed; draw our own caret. */
.sb-chip select {
    -webkit-appearance: none; appearance: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f3550' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center;
    padding-right: 22px; border-radius: 0; box-shadow: none; outline-offset: 2px;
}
body.dark-mode .sb-chip select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e6edf5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Staff views on phones: give the notation the room ─────────────────
   The header (title, view switch, chips) and a full-height palette left ~110px
   for the staff on an iPhone. Compact the header and let the palette scroll
   inside a shorter sheet. */
@media (max-width: 768px) {
    body[data-ns-view="staff"] .score-title, body[data-ns-view="stafftab"] .score-title { display: none; }
    body[data-ns-view="staff"] .score-header, body[data-ns-view="stafftab"] .score-header { margin-bottom: 4px !important; padding-bottom: 4px !important; border-bottom: 0; }
    body[data-ns-view="staff"] .bottom-panel, body[data-ns-view="stafftab"] .bottom-panel { max-height: 40vh; max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain; }
    body[data-ns-view="staff"] .workspace, body[data-ns-view="stafftab"] .workspace { padding-bottom: 42dvh; }
    body[data-ns-view="staff"] .ns-staff, body[data-ns-view="stafftab"] .ns-staff { margin-bottom: 6px; }
    body[data-ns-view="stafftab"] .fret-pad button, body[data-ns-view="stafftab"] #tabStringSeg button { min-height: 44px; }
    body[data-ns-view="stafftab"] .tab-hint { display: none; }
    body[data-ns-view="staff"] .status-bar, body[data-ns-view="stafftab"] .status-bar { display: none; }
}

/* Phones: the translucent palette let the fixed status footer show through
   behind the keys; and on the narrowest screens the tab row pushed past
   its container so "Hide" sat on top of "Lyrics". */
@media (max-width: 768px) {
    .bottom-panel { background: #0f172a; backdrop-filter: none; }
    .bottom-panel > .panel-tabs { min-width: 0; }
    .panel-tab { min-width: 0; padding-left: 6px; padding-right: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 340px) {
    .toggle-btn { min-width: 0 !important; padding-left: 8px; padding-right: 8px; }
    .panel-tab { font-size: 12px; }
}
/* Dark theme: keep the staff readable without a glaring white card. */
body.dark-mode .ns-staff { background: #0f172a; }
body.dark-mode .ns-staff svg { filter: invert(1) hue-rotate(180deg); }

/* Short landscape phones: the title, legend and tall settings pills pushed the
   score below the palette. Compact them so the notes you type stay in view. */
@media (max-height: 500px) and (orientation: landscape) {
    .score-title, .note-legend, .tab-hint { display: none !important; }
    .score-header { margin-bottom: 2px !important; padding-bottom: 2px !important; border-bottom: 0; }
    .song-bar { padding-top: 2px; padding-bottom: 2px; }
    .sb-chip { min-height: 36px; }
    .bottom-panel { max-height: 48dvh; overflow-y: auto; overscroll-behavior: contain; }
    .workspace { padding-bottom: 50dvh; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .bottom-panel { background: #0f172a; backdrop-filter: none; }
    .status-bar { display: none; }
    body[data-ns-view="staff"] .bottom-panel, body[data-ns-view="stafftab"] .bottom-panel { max-height: 40dvh; }
    body[data-ns-view="staff"] .workspace, body[data-ns-view="stafftab"] .workspace { padding-bottom: 42dvh; }
    body[data-ns-view="staff"] .view-seg, body[data-ns-view="stafftab"] .view-seg { margin-bottom: 2px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .score-header { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; }
    .score-header > * { flex: 0 0 auto; margin-top: 0 !important; }
    .score-header .song-bar { flex-wrap: nowrap; }
}

/* Smoothness on phones and tablets: blurred translucent layers over a
   scrolling score are the most expensive thing the page paints, and
   `transition: all` animates layout-affecting properties on every state
   change. Keep the look, drop the cost. */
@media (pointer: coarse), (max-width: 768px) {
    * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .note, .note-btn, .toolbar-btn, .toggle-btn, .panel-tab, .dur-btn, .sb-chip, .more-item, .seg button {
        transition-property: background-color, border-color, color, opacity, transform, box-shadow;
    }
    .workspace, .bottom-panel, .toolbar-actions, .side-panel { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .bottom-panel, .side-panel, .toolbar-actions { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}

/* Phones: one-line note that Expert is meant for a laptop. */
.expert-hint { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin: 6px 10px 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.3; color: #1f3550; background: #e8f1ff; border: 1px solid rgba(74,158,255,0.45); }
.expert-hint[hidden] { display: none; }
.expert-hint span { flex: 1; }
.expert-hint button { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(74,158,255,0.6); background: #fff; color: #1f3550; font: inherit; cursor: pointer; }
body.dark-mode .expert-hint { color: #e6edf5; background: rgba(74,158,255,0.14); }
body.dark-mode .expert-hint button { background: transparent; color: #e6edf5; }

/* Quick search (/) */
.ns-palette { align-items: flex-start; padding-top: 12vh; }
.ns-palette.active { display: flex; }
.ns-pal-box { width: min(560px, 92vw); max-width: 560px; padding: 12px; }
.ns-pal-box input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(74,158,255,0.6); background: rgba(255,255,255,0.06); color: inherit; font: inherit; font-size: 16px; }
.ns-pal-box ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.ns-pal-box li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.ns-pal-box li[aria-selected="true"] { background: #1f6fd1; color: #fff; }
.ns-pal-box li kbd { font: inherit; font-size: 12px; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.ns-pal-box .ns-pal-empty { cursor: default; opacity: 0.75; }
.ns-pal-hint { margin: 8px 2px 0; font-size: 12px; opacity: 0.7; }

/* A tied note shows a small arc linking it to the next note. */
.note.tied { position: relative; }
.note.tied::after { content: ""; position: absolute; left: 55%; right: -45%; bottom: -5px; height: 7px; border-bottom: 2px solid currentColor; border-radius: 0 0 60% 60% / 0 0 100% 100%; opacity: 0.75; pointer-events: none; }