/* Key signature finder (/key-signatures-chart). Scoped to .kf (and the print sheet). */
@font-face { font-family: 'MtpKsBravura'; src: url('/vendor/vexflow/fonts/bravura-staff.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: block; }

.kf { padding: 14px; margin: 0; }
.kf-tabs, .kf-group { display: flex; flex-wrap: wrap; gap: 6px; }
.kf-tabs { margin: 0 0 12px; }
.kf-tabs button { min-height: 44px; }
.kf-grid { display: grid; gap: 16px 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 880px) { .kf-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.kf-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 10px; }
.kf-count { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; width: min(100%, 340px); }
.mtp-tool-panel .kf-count button { min-width: 0; padding: 6px 0; }
.kf-field { display: inline-flex; align-items: center; gap: 8px; }
.kf-staffbox, .kf-qstaff { width: min(100%, 360px); }
.kf-hint { margin: 6px 0 0; font-size: 13px; color: var(--mtp-muted); }
.kf-two { display: grid; gap: 8px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); max-width: 520px; }
.kf-fig { margin: 0; }
.kf-fig figcaption { text-align: center; font-size: 12px; color: var(--mtp-muted); }

.ks-staff { display: block; width: 100%; height: auto; color: var(--mtp-paper); }
.ks-staff .ks-line { stroke: currentColor; stroke-width: 1; }
.ks-staff .ks-glyph { fill: currentColor; font-family: 'MtpKsBravura'; font-size: 40px; }
.ks-staff .ks-ghost { opacity: .18; }
.ks-staff .ks-hit { fill: transparent; cursor: pointer; }
.ks-staff .ks-hit:hover { fill: rgba(224, 189, 114, .12); }

.kf-keys { margin: 0 0 4px; font-size: 26px; font-weight: 700; line-height: 1.15; }
.kf-sig { margin: 0 0 8px; font-size: 18px; color: var(--mtp-brass-bright); }
.kf-rules { margin: 0 0 8px; padding-left: 1.2em; max-width: 60ch; }
.kf-rules li { margin: 0 0 4px; }
.kf-order, .kf-equiv { margin: 0 0 6px; color: var(--mtp-muted); font-size: 14px; max-width: 60ch; }
.kf-setup { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 12px; }
.kf-qhead { margin: 0 0 4px; color: var(--mtp-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.kf-qask { margin: 0 0 6px; font-weight: 600; font-size: 18px; }
.kf-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mtp-tool-panel .kf-choices button { min-width: 112px; min-height: 44px; font-size: 16px; }
.mtp-tool-panel .kf-choices button.right { background: #3f7d4e; color: #fff; border-color: #3f7d4e; }
.mtp-tool-panel .kf-choices button.wrong { background: #8c3a32; color: #fff; border-color: #8c3a32; }
.kf-fb { min-height: 1.4em; margin: 4px 0 8px; max-width: 60ch; font-weight: 600; }
.kf-fb.ok { color: #8fd19e; } .kf-fb.bad { color: #f0a090; }
.kf-score { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.kf-missed { margin: 0 0 10px; padding-left: 1.2em; }
.kf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.kf-status { font-size: 13px; color: var(--mtp-muted); }
.kf [hidden] { display: none !important; }
@media (max-width: 480px) { .kf { padding: 8px 6px; } .kf-keys { font-size: 23px; } }

/* print: result view = what is on screen in black on white; sheet view = the quiz sheet and its answer key */
.kf-sheet { margin: 0; }
@media print {
  html.mtp-print-tool .kf { border: 0; padding: 0; }
  html.mtp-print-tool .kf-grid { display: block; }
  html.mtp-print-tool .kf-staffbox, html.mtp-print-tool .kf-qstaff { width: 95mm; }
  html.mtp-print-tool .ks-staff { color: #111; }
  html.mtp-print-tool .ks-staff .ks-ghost, html.mtp-print-tool .ks-staff .ks-hit { display: none; }
  html.mtp-print-tool .kf-two { display: flex; gap: 10mm; max-width: none; }
  html.mtp-print-tool .kf-two .kf-fig { width: 80mm; }
  html.mtp-print-tool .kf-keys { font-size: 22pt; }
  html.mtp-print-tool .kf[data-view="find"] .kf-pane[data-kf-pane="quiz"], html.mtp-print-tool .kf[data-kf-printmode="sheet"] .kf-screen { display: none !important; }
  html.mtp-print-tool .kf[data-kf-printmode="sheet"] .kf-pane { display: none !important; }
  html.mtp-print-tool:has(.kf[data-kf-printmode="sheet"]) .mtp-chart-page > h1 { display: none !important; }
  .kf .kf-sheet h2 { font-size: 18pt; margin: 0 0 4mm; }
  .kf .kf-sh-name, .kf .kf-sh-ask { margin: 0 0 3mm; font-size: 11pt; }
  .kf .kf-sh-grid { list-style: decimal; display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 10mm; padding-left: 7mm; margin: 0; }
  .kf .kf-sh-grid li { break-inside: avoid; padding: 0 0 2mm; }
  .kf .kf-sh-grid .ks-staff { width: 48mm; }
  .kf .kf-sh-blank { display: block; font-size: 11pt; margin-top: 1mm; }
  .kf .kf-sh-key { break-before: page; page-break-before: always; }
  .kf .kf-sh-key ol { font-size: 12pt; line-height: 1.7; }
}