/* Sheet Music Maker. Dark skin on screen; the score itself sits on a white "paper" card; print = white page, black ink. */
.smm { --smm-paper: #fff; }
.smm-settings { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.smm-settings label, .smm-lyr, .smm-inline { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.smm-settings input, .smm-settings select, .smm-lyr textarea, .smm-inline input { width: 100%; }
.smm-gl { display: block; margin: 0 0 6px; color: var(--mtp-brass-bright); font-size: 13px; font-weight: 600; }
.smm kbd { display: inline-block; min-width: 1.3em; padding: 0 5px; margin-left: 4px; border: 1px solid var(--mtp-line); border-radius: 3px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--mtp-muted); text-align: center; background: transparent; }
.smm button[aria-pressed="true"] kbd { color: inherit; border-color: currentColor; }

.smm-entry { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 18px; }
.smm-group { min-width: 0; }
.smm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.smm-btns button { display: inline-flex; align-items: center; gap: 6px; }
.smm [data-smm-durs] button { flex-direction: column; justify-content: center; gap: 0; padding: 4px 12px; min-width: 64px; }
.smm .smm-dn { font-size: 12px; line-height: 1.1; }
.smm [data-smm-durs] button kbd { margin: 2px 0 0; }
.smm-sym { font-size: 18px; line-height: 1; }
.smm button:disabled { opacity: .45; cursor: default; }

.smm-keysrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 8px; }
.smm-keysrow .smm-gl { margin: 0; }
.smm-kbtns { display: flex; align-items: center; gap: 8px; }
.smm-range { color: var(--mtp-muted); font-size: 13px; min-width: 7em; text-align: center; }
.smm-keys { position: relative; height: 112px; max-width: 760px; min-width: 330px; margin-bottom: 6px; user-select: none; }
.smm-keys button { position: absolute; top: 0; padding: 0; margin: 0; min-height: 0 !important; border-radius: 0 0 4px 4px; cursor: pointer; }
.smm .smm-keys button.smm-wk { height: 100%; background: #f4efe3; border: 1px solid #2a2418; color: #2a2418; display: flex; align-items: flex-end; justify-content: center; font-size: 11px; box-sizing: border-box; }
.smm .smm-keys button.smm-wk:hover { background: #fff5cf; }
.smm .smm-keys button.smm-wk:active { background: #ffe38a; }
.smm .smm-keys button.smm-bk { height: 62%; background: #1b1812; border: 1px solid #000; z-index: 2; box-sizing: border-box; }
.smm .smm-keys button.smm-bk:hover { background: #4a4234; }
.smm .smm-keys button.smm-bk:active { background: #8a6d2f; }
.smm-wk span { padding-bottom: 3px; pointer-events: none; }
.smm-keys-wrap { overflow-x: auto; }

.smm-hands { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.smm-hands[hidden] { display: none; }

.smm-paper { margin-top: 16px; background: var(--smm-paper); color: #000; border-radius: 2px; overflow-x: auto; overflow-y: hidden; padding: 8px 10px; outline-offset: 2px; box-sizing: border-box; max-width: 100%; }
.smm-paper:focus-visible { outline: 2px solid var(--mtp-brass-bright); }
.smm-score { min-height: 120px; color: #000; }
.smm-score svg { display: block; width: 100%; height: auto; }
.smm-score svg .abcjs-note, .smm-score svg .abcjs-rest { cursor: pointer; }
.smm-status { margin: 8px 0 0; font-size: 14px; color: var(--mtp-muted); }
.smm-msg { margin: 6px 0 0; min-height: 1.4em; font-size: 14px; color: var(--mtp-brass-bright); }
.smm-msgbtn { min-height: 28px !important; padding: 2px 12px !important; }

.smm-edit { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mtp-line); }
.smm-edit .smm-inline { margin-top: 12px; max-width: 320px; }
.smm-lyr { margin-top: 14px; }
.smm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.smm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.smm-check input { width: 18px; height: 18px; }

.smm details { margin-top: 16px; border-top: 1px solid var(--mtp-line); padding-top: 10px; }
.smm summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.smm-hint { margin: 4px 0 10px; color: var(--mtp-muted); font-size: 14px; }
.smm-abc textarea { width: 100%; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; margin-bottom: 10px; box-sizing: border-box; }
.smm-table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.smm-table th { text-align: left; white-space: nowrap; padding: 6px 14px 6px 0; vertical-align: top; font-weight: 400; }
.smm-table td { padding: 6px 0; color: var(--mtp-muted); }
.smm-table tr { border-top: 1px solid var(--mtp-line); }

.smm .smm-print { position: absolute !important; left: -9999px; top: 0; width: 720px; height: 0; overflow: hidden; visibility: hidden; }  /* drawn off-screen so it can be measured; shown only when printing */

@media (max-width: 560px) {
  .smm [data-smm-durs] button { min-width: 52px; padding: 4px 8px; }
  .smm-keys { height: 96px; }
}

/* Print: only the sheet, on white paper in black ink (title, composer and all lines come from the drawing itself). */
@media print {
  @page { margin: 14mm; }
  body:has(.smm) .mtp-tool > *:not(.mtp-tool-root),
  body:has(.smm) .smm > *:not(.smm-print),
  body:has(.smm) .mtp-topnav, body:has(.smm) header, body:has(.smm) footer, body:has(.smm) .mtp-footer, body:has(.smm) nav, body:has(.smm) aside { display: none !important; }
  body:has(.smm), body:has(.smm) .mtp-tool-panel { background: #fff !important; color: #000 !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
  body:has(.smm) .mtp-tool, body:has(.smm) .mtp-tool-root { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body:has(.smm) .mtp-tool h1, body:has(.smm) .mtp-eyebrow, body:has(.smm) .lede { display: none !important; }
  .smm .smm-print { display: block !important; position: static !important; visibility: visible !important; height: auto !important; overflow: visible !important; width: 100% !important; }
  .smm .smm-print svg { display: block; width: 100% !important; height: auto; break-inside: avoid; page-break-inside: avoid; }
}