/* /bach/ pages (layouts/bach/*, layouts/_partials/bach/*) and the "Bach's prelude in this key" module on /keys/<slug> pages.
   Loaded next to stats.css, which styles the shared data blocks (short answer, tables, bars, Wikipedia excerpts, related links).
   Own file on purpose: changing assets/styles/custom.css rewrites the stylesheet hash that every page links to.
   Colours come from the site variables (--mtp-*). Everything works without scripts; static/js/bach.js only stops one player
   when another one starts. */

/* ---- the list of pieces: one card each ---- */
.markdown .b-list, .b-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.b-item { margin: 0; min-width: 0; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 7px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; scroll-margin-top: 16px; }
.b-item::marker { content: none; }
.b-item:target { border-color: var(--mtp-brass-bright); box-shadow: 0 0 0 1px var(--mtp-brass); }
.b-num { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mtp-brass); }
.st-section .b-title, .b-title { margin: 0; font-size: 1.22rem; line-height: 1.18; color: var(--mtp-paper); overflow-wrap: anywhere; }
.markdown .b-chips, .b-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.b-chips li { margin: 0; padding: 1px 8px; border: 1px solid var(--mtp-line); border-radius: 2px; background: rgba(244, 233, 207, .04); color: var(--mtp-muted); font-size: 12.5px; line-height: 1.5; }
.b-chips li::marker { content: none; }
.b-descr { margin: 0; color: var(--mtp-muted); font-size: 13.5px; line-height: 1.5; }
.b-players { display: grid; gap: 10px; }
.b-players:last-child { margin-top: auto; }
.st-page .b-player, .b-player { margin: 2px 0 0; min-width: 0; }
.b-player figcaption { margin: 0 0 3px; color: var(--mtp-muted); font-size: 13px; line-height: 1.35; }
.b-dur { margin-left: 6px; color: var(--mtp-brass-bright); font-variant-numeric: tabular-nums; font-weight: 600; }
.b-player audio { display: block; width: 100%; max-width: 100%; height: 40px; color-scheme: dark; }
.b-player audio a { color: var(--mtp-brass-bright); }
.b-note { margin: 4px 0 0; color: var(--mtp-muted); font-size: 14px; font-style: italic; line-height: 1.52; }
.b-note a { color: var(--mtp-brass-bright); }
.b-links { margin: auto 0 0; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.b-links a { color: var(--mtp-brass-bright); }
.b-wikisrc { margin-top: 14px; }

/* ---- the three recordings on the hub ---- */
.markdown .b-projects, .b-projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.b-proj { margin: 0; padding: 16px 18px 14px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-top: 3px solid var(--mtp-brass); border-radius: 2px; min-width: 0; }
.b-proj::marker { content: none; }
.b-proj h3 { margin: 0 0 4px; font-size: 1.4rem; line-height: 1.12; }
.b-proj h3 a { color: var(--mtp-brass-bright); }
.b-proj p { margin: 0 0 8px; }
.b-proj-meta { color: var(--mtp-paper); font-size: 13.5px; line-height: 1.45; }
.b-proj-what { color: var(--mtp-muted); font-size: 14.5px; line-height: 1.55; }
.b-proj-by { color: var(--mtp-muted); font-size: 12.5px; }

/* ---- questions and answers ---- */
.b-qa { max-width: 76ch; margin: 0 0 6px; padding: 4px 0 2px; border-bottom: 1px solid var(--mtp-line); }
.st-section .b-qa h3 { margin: 8px 0 4px; font-size: 1.25rem; }
.b-a p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--mtp-paper); }
.b-a a { color: var(--mtp-brass-bright); }
.markdown .b-keychips, .b-keychips { margin-top: 4px; }

/* ---- "Bach's prelude in this key" on a key page ---- */
.b-keymod .b-keyplayer { max-width: 560px; margin: 8px 0 6px; padding: 12px 14px 10px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-left: 3px solid var(--mtp-brass); border-radius: 2px; }
.b-keymod .st-cap { margin-top: 8px; }

/* ---- narrow screens ---- */
@media (max-width: 520px) {
  .b-item { padding: 12px 12px 10px; }
  .b-proj { padding: 14px 14px 12px; }
}
@media print { .b-player audio { display: none; } }