/* Digital Greenhouse — kids-piano.css
   /tools/kids-piano-sheet-music (the index) and each piece's own page. */
.kp-wrap { max-width: 980px; margin-inline: auto; }
.kp-intro { display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; margin-bottom: var(--space-6); }
.kp-intro h2 { font-size: var(--fs-xl); margin: 0 0 var(--space-2); }
.kp-intro p { margin: 0 0 var(--space-3); color: var(--text-muted); }
.kp-intro p:last-child { margin-bottom: 0; }
.kp-status { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-4); min-height: 1.8em; font-size: var(--fs-sm); }
.kp-status [hidden] { display: none !important; }

/* ---------- The index of pieces ---------- */
.kp-h2 { font-size: var(--fs-xl); margin: var(--space-5) 0 var(--space-2); }
.kp-sets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.kp-set { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-line); background: var(--bg-card); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.kp-set:hover { border-color: var(--color-sprout); }
.kp-set span { color: var(--text-muted); font-weight: 500; }
.kp-group-toggle { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.kp-group-toggle .kp-ctl { color: var(--text); border-color: var(--color-line); background: var(--bg-card); }
.kp-group-toggle .kp-ctl[aria-pressed="true"] { background: var(--color-emerald); border-color: var(--color-emerald); color: #fff; }
[data-group-view][hidden] { display: none; }
.kp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-5); }
.kp-filter input { flex: 1 1 260px; max-width: 420px; }
.kp-filter output { color: var(--text-muted); font-size: var(--fs-sm); }
.kp-level { margin-top: var(--space-6); }
.kp-level h2 { font-size: var(--fs-xl); margin: 0 0 var(--space-1); }
.kp-level > p { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); }
.kp-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; background: var(--bg-card); }
.kp-row { display: grid; grid-template-columns: 2.4rem 80px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); padding: 10px 14px; border-top: 1px solid var(--color-line); }
.kp-row:first-child { border-top: 0; }
.kp-row[hidden] { display: none; }
.kp-row__num { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.kp-row__pic { display: block; line-height: 0; }
.kp-row__pic img { width: 80px; height: 50px; border-radius: 8px; display: block; }
.kp-row__main { min-width: 0; }
.kp-row__main a { font-weight: 600; }
.kp-row__meta { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
.kp-chip { text-decoration: none; font-size: 0.72rem; padding: 1px 8px; }
.kp-level h2 a { text-decoration: none; }
.kp-row__play { display: flex; align-items: center; }
.kp-play--sm { width: 36px; height: 36px; }
.kp-play--sm svg { width: 16px; height: 16px; }
.kp-song--playing .kp-row__main a { color: var(--color-emerald); }

/* ---------- One piece ---------- */
.kp-song { margin-top: var(--space-6); border-radius: 18px; overflow: clip; border: 1px solid var(--color-line); background: var(--bg-card); box-shadow: 0 18px 40px -28px rgba(5, 12, 9, 0.45); scroll-margin-top: 90px; }
[data-theme="dark"] .kp-song { border-color: rgba(255, 255, 255, 0.12); }
.kp-song__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5) var(--space-3); }
.kp-song__title { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.kp-song__title h2 { font-size: var(--fs-xl); margin: 0; }
.kp-song__num { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-emerald); color: #fff; font-weight: 700; font-size: 0.95rem; align-self: center; }
.kp-song__meta { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kp-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; color: #e9efe9;
  background: linear-gradient(180deg, #23292d 0%, #161a1d 100%);
}
.kp-play {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--color-emerald);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.kp-play:hover { background: var(--color-emerald-2); }
.kp-play:disabled { opacity: 0.45; cursor: not-allowed; }
.kp-play svg { width: 20px; height: 20px; fill: currentColor; }
.kp-play:focus-visible, .kp-ctl:focus-visible { outline: 3px solid #9be3bf; outline-offset: 2px; }
.kp-ctl {
  flex: 0 0 auto; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #e9efe9;
  font: 600 0.82rem/1 var(--font-body, system-ui); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.kp-ctl:hover { background: rgba(255, 255, 255, 0.14); }
.kp-ctl[aria-pressed="true"] { background: #2f7d5b; border-color: #58b98b; color: #fff; }
.kp-ctl svg { width: 16px; height: 16px; fill: currentColor; }
.kp-time { font: 600 0.82rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c9d4cc; min-width: 6.5em; }
.kp-hands { display: inline-flex; border-radius: 9px; overflow: hidden; }
.kp-hands .kp-ctl { border-radius: 0; margin-left: -1px; }
.kp-hands .kp-ctl:first-child { border-radius: 9px 0 0 9px; margin-left: 0; }
.kp-hands .kp-ctl:last-child { border-radius: 0 9px 9px 0; }
.kp-print { margin-left: auto; }

/* ---------- The score: always on paper, whatever the site theme ---------- */
.kp-paper { background: #fffdf8; color: #1b1b1b; padding: 14px 18px 4px; }
.kp-score { width: 100%; }
.kp-score svg { display: block; width: 100%; height: auto; }
.kp-score .abcjs-note, .kp-score .abcjs-rest { cursor: pointer; }
/* levels 1-4 (one line in middle C position): the left hand's notes in purple (kids-piano.js lineHands) */
.kp-score .kp-lh, .kp-score .kp-lh path { fill: #7048b6; stroke: #7048b6; }
.kp-score .kp-on, .kp-score .kp-on path, .kp-score .kp-on text { fill: #d9480f; stroke: #d9480f; }
.kp-score .kp-at, .kp-score .kp-at path { fill: #1971c2; }
.kp-song--playing .kp-paper { box-shadow: inset 0 0 0 2px rgba(47, 125, 91, 0.35); }
.kp-hint { margin: 0; padding: 6px 0 10px; font-size: 0.78rem; color: #6b6b63; }
.kp-about { padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--text-muted); }
.kp-about p { margin: 0 0 var(--space-2); }
.kp-about p:last-child { margin: 0; }
.kp-tip strong { color: var(--text); }

/* ---------- A piece's own page ---------- */
.page-header__inner.kp-head { max-width: none; display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: var(--space-4) var(--space-7); align-items: center; justify-content: space-between; }
.kp-pic { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 18px 40px -28px rgba(5, 12, 9, 0.55); }
[data-theme="dark"] .kp-pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.kp-head .eyebrow { display: block; line-height: 1.7; }   /* inline-flex split the links into columns on a phone */
.kp-head .eyebrow::before { display: inline-block; vertical-align: middle; margin-right: 0.5rem; }
@media (max-width: 900px) {
  .page-header__inner.kp-head { grid-template-columns: minmax(0, 1fr); }
  .kp-pic { max-width: 320px; }
}
.kp-page { margin-top: var(--space-7); max-width: var(--container-narrow); }
.kp-page h2 { font-size: var(--fs-xl); }
.kp-words { white-space: pre-line; }
.kp-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.kp-facts dt { font-weight: 600; }
.kp-facts dd { margin: 0; color: var(--text-muted); }
.kp-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); }
.kp-nav a { display: block; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: 12px; background: var(--bg-card); }
.kp-nav a span { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
.kp-nav a.kp-nav__next { text-align: right; }
.kp-all { margin-top: var(--space-4); }

@media (max-width: 720px) {
  .kp-intro { grid-template-columns: 1fr; }
  .kp-song__head { padding: var(--space-3) var(--space-4) var(--space-2); }
  .kp-song__title h2 { font-size: var(--fs-lg); }
  .kp-controls { gap: 8px 10px; padding: 8px 10px; }
  .kp-print { margin-left: 0; }
  .kp-paper { padding: 10px 6px 2px; }
  .kp-about { padding: var(--space-3) var(--space-4) var(--space-4); }
  .kp-row { grid-template-columns: 1.6rem 56px minmax(0, 1fr) auto; padding: 8px 10px; gap: var(--space-2); }
  .kp-row__pic img { width: 56px; height: 35px; border-radius: 6px; }
  .kp-facts { grid-template-columns: 1fr; gap: 0; }
  .kp-facts dd { margin-bottom: var(--space-2); }
  .kp-nav { grid-template-columns: 1fr; }
}

/* ---------- Chords: keyboard diagrams (chords.py) + the chord on the staff ---------- */
.kp-chords { margin-top: var(--space-7); }
.kp-chords > h2, .kp-chord-sec > h2 { font-size: var(--fs-xl); margin: 0 0 var(--space-2); }
.kp-chords > p, .kp-chord-sec > p { max-width: var(--container-narrow); color: var(--text-muted); margin: 0 0 var(--space-4); }
.kp-chord-sec { margin-top: var(--space-7); scroll-margin-top: 90px; }
.kp-chord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: var(--space-4); }
.kp-chord { margin: 0; padding: 12px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--bg-card); scroll-margin-top: 90px; }
[data-theme="dark"] .kp-chord { border-color: rgba(255, 255, 255, 0.12); }
.kp-chord__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.kp-chord__sym { flex: 0 0 auto; min-width: 2.4rem; padding: 2px 8px; border-radius: 9px; background: var(--color-emerald); color: #fff; font-weight: 800; font-size: 1.15rem; text-align: center; }
.kp-chord__name { font-weight: 700; min-width: 0; }
.kp-chord__play { margin-left: auto; color: var(--text); border-color: var(--color-line); background: var(--bg-card); }
.kp-chord__play:hover { background: var(--bg-soft, rgba(0, 0, 0, 0.05)); }
.kp-chord__play[aria-pressed="true"] { background: var(--color-emerald); border-color: var(--color-emerald); color: #fff; }
.kp-chord__paper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 12px 10px 8px; border-radius: 12px; background: #fffdf8; color: #1b1b1b; }
.kp-keys { flex: 1 1 240px; width: 100%; max-width: 314px; height: auto; display: block; }
.kp-keys .kp-key { transition: fill 0.12s; }
.kp-keys .kp-key--lit { fill: #f59f00; }
.kp-keys .kp-key--black.kp-key--lit { fill: #d9480f; }
.kp-chord__staff { flex: 0 0 auto; }
.kp-chord__staff svg { display: block; }
.kp-chord__notes { margin: 10px 2px 2px; font-size: var(--fs-sm); }
.kp-chord__line { margin: 4px 2px 0; font-size: var(--fs-sm); color: var(--text-muted); }
.kp-chord-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-4); }
.kp-chord-actions .kp-ctl { color: var(--text); border-color: var(--color-line); background: var(--bg-card); height: 38px; padding: 0 14px; }
.kp-keytable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kp-keytable th, .kp-keytable td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-line); }
.kp-keytable td a { font-weight: 700; }
.kp-learn > .kp-notes-sec + .kp-chords { margin-top: var(--space-6); }
.kp-chord-grid--notes { grid-template-columns: minmax(0, 520px); }
/* middle C position diagrams: 9 or 11 keys, wider than a chord's 8 */
.kp-keys--pos { max-width: 420px; flex-basis: 300px; }
.kp-chord-grid--pos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 470px), 1fr)); }
.kp-pos-levels { margin: var(--space-5) 0 var(--space-3); padding-left: 1.2rem; }
.kp-pos-levels li { margin-bottom: var(--space-2); }
.kp-chords-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: 14px; background: var(--bg-card); }
.kp-chords-link p { margin: 0; flex: 1 1 300px; color: var(--text-muted); }
.kp-chords-link a.btn { flex: 0 0 auto; }

/* ---------- Paper size: A4 unless the picker beside Print says US Letter (kids-piano.js) ---------- */
@page { size: A4; }
.kp-paper-size { padding: 0 6px; }
.kp-paper-size option { color: #1b1b1b; background: #fff; }
.kp-chord-actions .kp-paper-size { height: 38px; }

/* ---------- Print: the music only, one piece per page ---------- */
@media print {
  .kp-paper-size { display: none !important; }
  .kp-chord__play, .kp-chord-actions, .kp-chords > p, .kp-chord-sec > p, .kp-chord__line { display: none !important; }
  .kp-chords { margin-top: 3mm; break-inside: avoid; }
  .kp-chords, .kp-chords h2, .kp-chord-sec h2, .kp-chord, .kp-chord__notes { color: #000 !important; }
  .kp-chords > h2 { font-size: 11pt; margin: 0 0 1.5mm; }
  .kp-chord-grid { grid-template-columns: repeat(2, 1fr); gap: 3mm; }
  .kp-chord-grid--piece { grid-template-columns: repeat(4, 32mm); gap: 4mm; }
  #kp-list:has(~ .kp-chords) .kp-print-foot, #kp-list:has(~ .kp-learn) .kp-print-foot { margin-top: 3mm; }   /* room for the chords under the music */
  /* First pieces: the right-hand notes beside the chords, one row, so the page stays one A4 sheet */
  .kp-learn { display: flex; gap: 5mm; align-items: flex-start; margin-top: 3mm; break-inside: avoid; }
  .kp-learn > .kp-chords, .kp-learn > .kp-notes-sec + .kp-chords { margin-top: 0; }
  .kp-chord-grid--notes { grid-template-columns: 32mm; }
  .kp-learn .kp-chord-grid--piece { grid-template-columns: repeat(4, 30mm); gap: 3mm; }
  .kp-chord-grid--notes .kp-chord__name, .kp-chord-grid--notes .kp-chord__staff, .kp-chord-grid--notes .kp-chord__notes { display: none; }
  .kp-chord-grid--piece .kp-chord__notes { display: none; }   /* the diagram already names the keys and fingers */
  .kp-chord-grid--piece .kp-chord__head { margin-bottom: 0.5mm; }
  .kp-chord { padding: 1.5mm 2mm; border: 1px solid #999; border-radius: 3mm; break-inside: avoid; background: #fff !important; }
  .kp-chord__head { margin: 0 0 1mm; }
  .kp-chord-grid--piece .kp-chord__name, .kp-chord-grid--piece .kp-chord__staff { display: none; }
  .kp-chord__paper { padding: 0; background: #fff; }
  .kp-chord__notes { margin: 1mm 0 0; font-size: 8pt; }
  .kp-chord__sym { background: #fff; color: #000; border: 1px solid #000; font-size: 10pt; min-width: 0; }
  .site-header, .site-footer, .cta-banner, .page-header, .kp-intro, .kp-status, .kp-controls, .kp-hint, .kp-about, .kp-page, .kp-nav, .kp-all, .kp-filter, .kp-level, .privacy-badge, .tool-related, [data-reveal]:not(.is-visible) { display: none !important; }
  body, .kp-paper { background: #fff !important; color: #000 !important; }
  .kp-wrap { max-width: none; }
  .kp-song { margin: 0; border: 0; box-shadow: none; border-radius: 0; break-after: page; page-break-after: always; break-inside: avoid; }
  .kp-song:last-child { break-after: auto; page-break-after: auto; }
  .kp-song__head, .kp-song__num { display: none; }   /* abcjs prints the title itself */
  .kp-paper { padding: 0; }
  .kp-score .kp-on, .kp-score .kp-on path, .kp-score .kp-on text, .kp-score .kp-at, .kp-score .kp-at path { fill: #000; stroke: #000; }
  .kp-score .kp-lh, .kp-score .kp-lh path { fill: #000; stroke: #000; }
  .kp-learn .kp-chord-grid--notes { grid-template-columns: 64mm; }
  .kp-printing .kp-song:not(.kp-print-me) { display: none !important; }
  .kp-print-foot { display: block !important; margin-top: 8mm; font-size: 9pt; color: #555; }
}
.kp-print-foot { display: none; }

/* ---------- Notation for players (/tools/reading-music-the-other-way-round) ---------- */
.rq-prose { max-width: var(--container-narrow); margin-top: var(--space-2); }
.rq-prose h2 { font-size: var(--fs-xl); margin-top: var(--space-7); }
.rq-prose h3 { font-size: var(--fs-lg); margin-top: var(--space-5); }
.rq-prose li { margin-bottom: var(--space-2); }
.rq-cover { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-emerald); border-radius: 0 14px 14px 0; background: var(--bg-card); }
.rq-cover h3 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
.rq-cover p { margin: 0; color: var(--text-muted); }
.rq-ex { margin: var(--space-5) 0; }
.rq-paper { width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; padding: 10px 12px 4px; border: 1px solid var(--color-line); border-radius: 12px; background: #fffdf8; color: #1b1b1b; overflow-x: auto; }
[data-theme="dark"] .rq-paper { border-color: rgba(255, 255, 255, 0.12); }
.rq-abc { max-width: 100%; margin-inline: auto; }
.rq-abc svg { display: block; max-width: 100%; height: auto; }
.rq-ex figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.rq-start { margin: var(--space-6) 0 0; }
.rq-start p { color: var(--text); }