/* /chord-library/ pages (layouts/chord-library/*, layouts/_partials/chordlib/*). Loaded next to stats.css, which styles the shared data
   blocks (short answer, tables, callouts, Wikipedia excerpts). 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-*).
   Fingering diagrams and keyboards are static SVG made by research/scripts/chordlib_build.py and styled here, so they work without
   scripts; static/js/chord-library.js only draws the staves and plays the sound. */

/* ---- the notes of the chord as tiles ---- */
.markdown .cl-notes, .cl-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; padding: 0; }
.cl-notes li { margin: 0; min-width: 72px; padding: 8px 12px 6px; text-align: center; background: rgba(244, 233, 207, .05); border: 1px solid var(--mtp-line); border-radius: 2px; }
.cl-notes li::marker { content: none; }
.cl-notes b { display: block; font-family: "Cormorant Garamond", serif; font-size: 32px; line-height: 1.05; font-weight: 600; color: var(--mtp-paper); }
.cl-notes small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mtp-muted); }
.cl-notes li.is-root { background: rgba(196, 154, 73, .16); border-color: var(--mtp-brass); }
.cl-notes li.is-root b { color: var(--mtp-brass-bright); }
.cl-jump { margin: 14px 0 0; max-width: 80ch; color: var(--mtp-muted); font-size: 13.5px; line-height: 1.7; }
.cl-blocktitle { margin: 0 0 6px; font-family: "Cormorant Garamond", serif; font-size: 1.3rem; font-weight: 600; color: var(--mtp-brass-bright); }

/* ---- staves + sound ---- */
.cl-stavegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px 18px; }
.cl-stave, .cl-pianofig, .cl-shape { margin: 0; min-width: 0; padding: 12px 14px 10px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; }
.cl-stave figcaption, .cl-pianofig figcaption, .cl-shape figcaption { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--mtp-brass-bright); }
.cl-sym { margin-left: 6px; color: var(--mtp-paper); font-weight: 600; }
.cl-vex svg { display: block; width: 100%; height: auto; max-width: 240px; margin: 0 auto; }
.cl-stave-notes { margin: 6px 0 8px; font-size: 14px; color: var(--mtp-muted); }
.cl-play { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cl-play[hidden] { display: none; }
.cl-playall { margin: 14px 0 0; }
.cl-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 12px; box-sizing: border-box;
  background: transparent; color: var(--mtp-brass-bright); border: 1px solid var(--mtp-brass); border-radius: 2px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cl-btn:hover, .cl-btn:focus-visible { background: rgba(196, 154, 73, .16); color: var(--mtp-paper); }
.cl-btn.is-on { background: var(--mtp-brass); color: var(--mtp-night); }
.cl-btn-quiet { border-color: var(--mtp-line); color: var(--mtp-muted); }

/* ---- fingering diagrams ---- */
.cl-shapegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 14px 18px; }
.cl-shape svg.cl-fb { display: block; width: 100%; height: auto; max-width: 190px; margin: 0 auto 8px; }
.cl-fb-fret, .cl-fb-string { stroke: var(--mtp-muted); stroke-width: 1.2; opacity: .8; }
.cl-fb-nut { stroke: var(--mtp-paper); stroke-width: 4.5; }
.cl-fb-dot { fill: var(--mtp-brass); }
.cl-fb-barre { fill: var(--mtp-brass); }
.cl-fb-num { fill: var(--mtp-night); font: 700 11.5px "Source Sans 3", sans-serif; }
.cl-fb-x { fill: var(--mtp-muted); font: 700 16px "Source Sans 3", sans-serif; }
.cl-fb-open { fill: none; stroke: var(--mtp-paper); stroke-width: 1.6; }
.cl-fb-base { fill: var(--mtp-brass-bright); font: 700 12px "Source Sans 3", sans-serif; }
.cl-fb-note { fill: var(--mtp-paper); font: 700 13px "Source Sans 3", sans-serif; }
.cl-fb-note.is-muted { fill: var(--mtp-muted); }
.cl-fb-str { fill: var(--mtp-muted); font: 11px "Source Sans 3", sans-serif; }
.markdown .cl-facts, .cl-facts { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13.5px; line-height: 1.45; }
.cl-facts li { margin: 0; padding: 3px 0; border-top: 1px solid var(--mtp-line); display: flex; gap: 8px; color: var(--mtp-paper); }
.cl-facts li::marker { content: none; }
.cl-facts span { flex: 0 0 3.6em; color: var(--mtp-muted); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }

/* ---- piano keyboards ---- */
.cl-pianogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px 18px; }
.cl-pk { display: block; width: 100%; height: auto; max-width: 440px; }
.cl-pk-w { fill: #efe6d0; stroke: #3b2e1a; stroke-width: 1; }
.cl-pk-b { fill: #17101f; stroke: #000; stroke-width: 1; }
.cl-pk-w.is-on { fill: var(--mtp-brass-bright); }
.cl-pk-b.is-on { fill: var(--mtp-brass); stroke: var(--mtp-brass-bright); }
.cl-pk-w.is-root { fill: #d98a3a; }
.cl-pk-b.is-root { fill: #a84f2a; stroke: #e0bd72; }
.cl-pk-lab { fill: #17101f; font: 700 12px "Source Sans 3", sans-serif; }
.cl-pk-lab-b { font-size: 10.5px; }

.cl-page .st-table tbody th { white-space: nowrap; }

/* ---- links and FAQ ---- */
.markdown .cl-linklist, .cl-linklist { list-style: none; margin: 0 0 14px; padding: 0; max-width: 84ch; }
.cl-linklist li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--mtp-line); font-size: 15.5px; line-height: 1.45; }
.cl-linklist li::marker { content: none; }
.cl-linklist span { display: block; color: var(--mtp-muted); font-size: 13.5px; }
.cl-faq h3 { margin: 22px 0 6px; font-size: 1.2rem; color: var(--mtp-brass-bright); }
.cl-faq p { margin: 0 0 10px; max-width: 74ch; font-size: 16px; line-height: 1.6; }
.cl-licensetext { margin: 10px 0 0; padding: 12px 14px; max-width: 84ch; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; color: var(--mtp-muted); font: 12.5px/1.5 ui-monospace, Menlo, monospace; }

/* ---- hub: grid of chords ---- */
.markdown .cl-grid, .cl-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.cl-grid li { margin: 0; min-width: 0; }
.cl-grid li::marker { content: none; }
.cl-card { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 12px 11px; box-sizing: border-box; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; color: var(--mtp-paper) !important; text-decoration: none; }
.cl-card:hover, .cl-card:focus-visible { background: var(--mtp-raised-2); border-color: var(--mtp-brass); }
.cl-card-pic { display: block; margin-bottom: 6px; }
.cl-card-pic svg { display: block; width: 100%; height: auto; }
.cl-card-name { font-family: "Cormorant Garamond", serif; font-size: 25px; font-weight: 600; line-height: 1.05; color: var(--mtp-brass-bright); }
.cl-card-notes { font-size: 14px; color: var(--mtp-paper); }
.cl-card-meta { font-size: 12px; color: var(--mtp-muted); line-height: 1.4; }

/* ---- narrow screens: nothing may widen the page ---- */
@media (max-width: 760px) {
  .mtp-page:has(.cl-page) { width: 100%; max-width: 100%; box-sizing: border-box; }
  .cl-shapegrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cl-card-name { font-size: 22px; }
  .cl-vex svg { max-width: 190px; }
  .cl-notes li { min-width: 62px; }
  .cl-notes b { font-size: 28px; }
}

/* ---- print: black on white ---- */
@media print {
  .cl-notes li, .cl-stave, .cl-pianofig, .cl-shape, .cl-card { background: transparent !important; border-color: #888 !important; }
  .cl-vex svg { filter: brightness(0); }
  .cl-btn, .cl-play { display: none !important; }
  .cl-fb-fret, .cl-fb-string { stroke: #444; opacity: 1; }
  .cl-fb-nut { stroke: #000; }
  .cl-fb-dot, .cl-fb-barre { fill: #000; }
  .cl-fb-num { fill: #fff; }
  .cl-fb-note, .cl-fb-x, .cl-fb-str, .cl-fb-base { fill: #000; }
  .cl-fb-open { stroke: #000; }
  .cl-pk-w { fill: #fff; } .cl-pk-w.is-on { fill: #bbb; } .cl-pk-b { fill: #222; } .cl-pk-b.is-on { fill: #666; }
  .cl-notes b, .cl-stave figcaption, .cl-shape figcaption, .cl-pianofig figcaption, .cl-card-name { color: #000 !important; }
  .cl-facts li, .cl-facts span { color: #000 !important; }
}

/* hub: chord-type navigation and the collapsible full table (second wave: 14 chord types) */
.cl-typenav { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin: 18px 0 8px; }
.cl-typenav strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--mtp-muted); font-weight: 600; }
.cl-h2-sym { font-size: .62em; color: var(--mtp-muted); font-weight: 400; }
.cl-alltable > summary { cursor: pointer; list-style: revert; }
.cl-alltable > summary h2 { display: inline; }