@font-face { font-family: 'MtpAccPcf'; src: url('/vendor/vexflow/fonts/bravura-acc.woff2') format('woff2'); font-style: normal; font-weight: 400 700; unicode-range: U+266D-266F; size-adjust: 175%; font-display: swap; }
/* Piano chord finder (/piano-chord-chart); script: /js/piano-chord-finder.js. Everything is scoped to .pcf.
   Screen: dark skin (--mtp-* tokens). Print (html.mtp-print-tool): white paper, black ink, pressed keys grey. */
.pcf, .pcf .kt, .pcf-kb text { font-family: 'MtpAccPcf', 'Source Sans 3', Arial, sans-serif; }
.pcf { margin: 8px 0 26px; padding: clamp(14px, 2.4vw, 24px); }
.pcf-controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.pcf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pcf-field select { min-width: 150px; }
.pcf-field-wide select { min-width: 230px; }
.pcf-loading, .pcf-empty { color: var(--mtp-muted); }
.pcf-label { color: var(--mtp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.pcf-muted { color: var(--mtp-muted); font-size: 14px; }

.pcf-main { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mtp-line); }
.pcf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.pcf-name { margin: 0; font-family: inherit; font-size: clamp(34px, 6vw, 54px); line-height: 1.05; color: var(--mtp-brass-bright); font-weight: 700; }
.pcf-full { margin: 0; color: var(--mtp-muted); font-size: 16px; }
.pcf-fig { min-width: 0; margin-top: 8px; }
.pcf-btns { margin: 14px 0 16px; }
.pcf-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 30px; align-items: start; }
.pcf-facts { min-width: 0; }
.pcf-facts > p { margin: 0 0 12px; }
.pcf-notes-text { font-size: 20px; letter-spacing: .02em; }
.pcf-table { border-collapse: collapse; font-size: 14px; width: 100%; max-width: 520px; }
.pcf-table th, .pcf-table td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--mtp-line); font-weight: 400; }
.pcf-table thead th { color: var(--mtp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.pcf-table tbody th { color: var(--mtp-brass-bright); font-weight: 700; }
.pcf-table tr.is-on th, .pcf-table tr.is-on td { background: rgba(224, 189, 114, .2); }
.pcf-variants { font-size: 14px; color: var(--mtp-muted); }
.pcf-sym { color: var(--mtp-paper); font-weight: 600; }
.pcf-sym-main { color: var(--mtp-brass-bright); }
.pcf-btns, .pcf-actions, .pcf-keyrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pcf-keyrow { margin-bottom: 14px; align-items: flex-end; }
.pcf-status { color: var(--mtp-muted); font-size: 14px; }

/* keyboard (own svg) */
.pcf-kb { display: block; width: 100%; height: auto; max-width: 900px; }
.pcf-kb .wk rect { fill: #f4e9cf; stroke: #3a2c18; stroke-width: 1; }
.pcf-kb .bk rect { fill: #1c1428; stroke: #000; stroke-width: 1; }
.pcf-kb .kt { font-size: 9px; font-weight: 700; fill: #6b5a3a; pointer-events: none; }
.pcf-kb .kt-on { font-size: 11px; fill: #1a1209; }
.pcf-kb .bk .kt-on { font-size: 9px; }
.pcf-kb .wk.on rect { fill: #e0bd72; }
.pcf-kb .bk.on rect { fill: #c49a49; }
.pcf-kb .wk.root rect { fill: #e7835a; }
.pcf-kb .bk.root rect { fill: #d9693c; }
.pcf-kb .k.is-on rect { fill: #fff3c4; }

/* sheet */
.pcf-sheet { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--mtp-line); }
.pcf-h2 { margin: 0; font-size: 22px; }
.pcf-sub { margin: 4px 0 12px; color: var(--mtp-muted); font-size: 14px; }
.pcf-printtitle { margin: 0 0 8px; font-size: 18px; }
.pcf ol.pcf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pcf ol.pcf-cards.pcf-large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.pcf li.pcf-card { list-style: none; margin: 0; padding: 10px; border: 1px solid var(--mtp-line); background: var(--mtp-night); break-inside: avoid; page-break-inside: avoid; min-width: 0; }
.pcf-card-name { margin: 0 0 6px; font-family: inherit; font-size: 20px; color: var(--mtp-brass-bright); }
.pcf-card-kb { overflow: hidden; }
.pcf-card-kb .pcf-kb { max-width: none; }
.pcf-card-notes { margin: 6px 0 0; font-size: 14px; }
.pcf-card-n2 { color: var(--mtp-muted); margin-top: 2px; }
.pcf-card-tools { display: flex; gap: 3px; margin-top: 8px; }
.pcf-card-tools button { flex: 1 1 0; min-width: 0 !important; min-height: 36px !important; padding: 2px 8px !important; }
.pcf-empty { margin: 6px 0 12px; }
.pcf-actions { margin-top: 14px; }

@media (max-width: 720px) {
  .pcf-info { grid-template-columns: minmax(0, 1fr); }
  .pcf-field, .pcf-field select { width: 100%; }
  .pcf-field { flex: 1 1 140px; }
  .pcf ol.pcf-cards, .pcf ol.pcf-cards.pcf-large { grid-template-columns: minmax(0, 1fr); }
  .pcf-table { font-size: 13px; }
}

/* print: white paper, black ink. html.mtp-print-tool is set by printTool(); data-pcf-print says what to print.
   Pressed keys are grey with the note name; the root is darker grey with a thick outline; black keys stay black. */
@media print {
  html.mtp-print-tool .pcf { border: 0; padding: 0; margin: 0; background: #fff; }
  html.mtp-print-tool .pcf[data-pcf-print="chord"] .pcf-sheet { display: none !important; }
  html.mtp-print-tool .pcf[data-pcf-print="sheet"] .pcf-main { display: none !important; }
  html.mtp-print-tool .pcf:not([data-pcf-print]) .pcf-sheet:not(:has(.pcf-card)) { display: none !important; }
  html.mtp-print-tool .pcf .pcf-main, html.mtp-print-tool .pcf .pcf-sheet { border: 0; padding: 0; margin: 8px 0 0; }
  html.mtp-print-tool .pcf .pcf-name, html.mtp-print-tool .pcf .pcf-card-name { color: #111 !important; }
  html.mtp-print-tool .pcf .pcf-info { grid-template-columns: 1fr; }
  html.mtp-print-tool .pcf .pcf-kb { max-width: 170mm; }
  html.mtp-print-tool .pcf .pcf-card { background: #fff; border: 1px solid #111; }
  html.mtp-print-tool .pcf .pcf-cards { grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }
  html.mtp-print-tool .pcf .pcf-cards.pcf-large { grid-template-columns: 1fr; gap: 10px; }
  html.mtp-print-tool .pcf .pcf-card-name { font-size: 18px; }
  html.mtp-print-tool .pcf .pcf-cards.pcf-large .pcf-card-name { font-size: 24px; }
  html.mtp-print-tool .pcf .pcf-cards.pcf-large .pcf-card-kb { max-width: 125mm; }
  html.mtp-print-tool .pcf .pcf-cards.pcf-large .pcf-card-notes { font-size: 16px; }
  html.mtp-print-tool .pcf .pcf-table th, html.mtp-print-tool .pcf .pcf-table td { border-bottom-color: #888; }
  html.mtp-print-tool .pcf .pcf-table tr.is-on th, html.mtp-print-tool .pcf .pcf-table tr.is-on td { background: transparent !important; }
  html.mtp-print-tool .pcf .pcf-kb .wk rect { fill: #fff; stroke: #111; }
  html.mtp-print-tool .pcf .pcf-kb .bk rect { fill: #111; stroke: #000; }
  html.mtp-print-tool .pcf .pcf-kb .wk.on rect { fill: #b3b3b3; stroke-width: 1.6; }
  html.mtp-print-tool .pcf .pcf-kb .bk.on rect { fill: #9a9a9a; stroke-width: 1.6; }
  html.mtp-print-tool .pcf .pcf-kb .wk.root rect { fill: #808080; stroke-width: 2.4; }
  html.mtp-print-tool .pcf .pcf-kb .bk.root rect { fill: #6e6e6e; stroke-width: 2.4; }
  html.mtp-print-tool .pcf .pcf-kb .kt { fill: #333 !important; }
  html.mtp-print-tool .pcf .pcf-kb .kt-on { fill: #000 !important; font-weight: 800; }
  html.mtp-print-tool .pcf .pcf-kb .root .kt-on { fill: #fff !important; }
}