/* /keys/ pages (layouts/keys/*, layouts/_partials/keys/*). Loaded next to stats.css, which styles the shared data blocks
   (short answer, tables, bars, song lists, 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-*).
   Everything here works without scripts; static/js/keys.js only draws the staves and plays sound. */

/* ---- the notes of the scale as a row of tiles ---- */
.markdown .k-notes, .k-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; padding: 0; }
.k-notes li { margin: 0; min-width: 62px; padding: 8px 10px 6px; text-align: center; background: rgba(244, 233, 207, .05); border: 1px solid var(--mtp-line); border-radius: 2px; }
.k-notes li::marker { content: none; }
.k-notes b { display: block; font-family: "Cormorant Garamond", serif; font-size: 28px; line-height: 1.05; font-weight: 600; color: var(--mtp-paper); }
.k-notes small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .08em; color: var(--mtp-muted); }
.k-notes li.is-tonic { background: rgba(196, 154, 73, .16); border-color: var(--mtp-brass); }
.k-notes li.is-tonic b { color: var(--mtp-brass-bright); }

/* ---- staves + sound ---- */
.k-staves { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 22px; }
.k-stave { margin: 0; min-width: 0; padding: 12px 14px 10px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; }
.k-stave figcaption { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--mtp-brass-bright); }
.k-vex { min-height: 104px; }
.k-vex svg { display: block; width: 100%; height: auto; max-width: 480px; }
.k-stave-notes { margin: 4px 0 6px; font-size: 14px; color: var(--mtp-muted); }
.k-stave-notes .is-tonic { color: var(--mtp-brass-bright); font-weight: 700; }
.k-stave-play { margin: 0; }
.k-stave-play[hidden], .k-controls[hidden] { display: none; }
.k-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.k-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; box-sizing: border-box;
  background: transparent; color: var(--mtp-brass-bright); border: 1px solid var(--mtp-brass); border-radius: 2px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.k-btn:hover, .k-btn:focus-visible { background: rgba(196, 154, 73, .16); color: var(--mtp-paper); }
.k-btn.is-on { background: var(--mtp-brass); color: var(--mtp-night); }
.k-btn-quiet { border-color: var(--mtp-line); color: var(--mtp-muted); }
.k-chordtext { margin: 10px 0 0; max-width: 80ch; color: var(--mtp-muted); font-size: 14.5px; line-height: 1.55; }
.k-chordtext strong { color: var(--mtp-paper); }
.k-print-title { display: none; margin: 0 0 8px; font-weight: 700; }

/* ---- closely related keys ---- */
.k-neighbors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: 20px 30px; align-items: start; }
.markdown .k-nblist, .k-nblist { list-style: none; margin: 0; padding: 0; }
.k-nblist li { margin: 0; display: grid; grid-template-columns: minmax(7.5em, auto) 1fr; gap: 2px 14px; padding: 9px 0; border-bottom: 1px solid var(--mtp-line); font-size: 14.5px; line-height: 1.4; }
.k-nblist li::marker { content: none; }
.k-nb-name { grid-row: span 3; font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 600; line-height: 1.1; }
.k-nb-rel { color: var(--mtp-paper); }
.k-nb-sig, .k-nb-n { color: var(--mtp-muted); font-size: 13.5px; }

/* ---- circle of fifths (SVG made by Hugo; the slices are links) ---- */
.k-circle-wrap { min-width: 0; max-width: 100%; }
.k-circle-big { max-width: 560px; margin: 8px auto 0; }
.k-circle { display: block; width: 100%; height: auto; }
.k-circle .k-slice path { stroke: var(--mtp-line); stroke-width: 1.5; transition: fill .12s; }
.k-circle .k-maj path { fill: #241a3a; }
.k-circle .k-min path { fill: #150e25; }
.k-circle .k-slice:hover path, .k-circle .k-slice:focus-visible path { fill: rgba(196, 154, 73, .34); }
.k-circle .k-slice:focus { outline: none; }
.k-circle .k-slice:focus-visible path { stroke: var(--mtp-brass-bright); }
.k-circle .k-slice.is-current path { fill: var(--mtp-brass); }
.k-circle .k-slice-name { fill: var(--mtp-paper); font-family: "Cormorant Garamond", serif; font-size: 34px; font-weight: 600; pointer-events: none; }
.k-circle .k-min .k-slice-name { font-size: 25px; }
.k-circle .k-slice-sig { fill: var(--mtp-muted); font-size: 17px; pointer-events: none; }
.k-circle .k-slice.is-current text { fill: var(--mtp-night); }
.k-circle .k-centre { fill: var(--mtp-muted); font-family: "Cormorant Garamond", serif; font-size: 22px; }
.k-circle-small { max-width: 340px; margin: 0 auto; }
.k-circle-small .k-slice-name { font-size: 38px; }
.k-circle-small .k-min .k-slice-name { font-size: 25px; }
.k-circle-small .k-slice-sig { font-size: 19px; }

/* ---- index tables ---- */
.k-table .k-scalecell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-index .k-table th a { font-weight: 700; }

/* ---- narrow screens: nothing may widen the page ---- */
@media (max-width: 760px) {
  .mtp-page:has(.k-page) { width: 100%; max-width: 100%; box-sizing: border-box; }
  .k-neighbors { grid-template-columns: minmax(0, 1fr); }
  .k-staves { grid-template-columns: minmax(0, 1fr); }
  .k-nblist li { grid-template-columns: 1fr; }
  .k-nb-name { grid-row: auto; }
  .k-notes li { min-width: 52px; }
  .k-notes b { font-size: 24px; }
  .k-index .k-table { min-width: 560px; }
}

/* ---- print: the staves section on its own (button) or the whole page in black on white ---- */
@media print {
  .k-notes li, .k-stave { background: transparent !important; border-color: #888 !important; }
  .k-vex svg { filter: brightness(0); }
  .k-btn, .k-stave-play, .k-controls, .k-circle-wrap { display: none !important; }
  .k-print-title { display: block; }
  .k-notes b, .k-stave figcaption, .k-stave-notes .is-tonic { color: #000 !important; }
  .k-staves { display: block; }
  .k-stave { break-inside: avoid; margin-bottom: 8pt; }
  .k-nblist li { break-inside: avoid; }
  body.k-print-one .st-page > *:not(.k-printable-sec) { display: none !important; }
  body.k-print-one .st-page .k-printable-sec { margin-top: 0; }
  body.k-print-one .st-page .k-printable-sec > h2 { font-size: 20pt; }
  body.k-print-one .st-page .k-printable-sec .st-lede { display: block; font-size: 10pt; }
}