/* Digital Greenhouse — jazz-guitar.css
   /music/jazz-guitar: the hub, the theory page and the ten tune pages.
   Builds on music.css (.mt-paper, .mt-play, .mt-toc, .mt-part, .mt-fig).
   Music and chord boxes sit on white paper in both themes, like printed music. */

.jg-facts {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin: var(--space-4, 1rem) 0 0; padding: 0; list-style: none;
}
.jg-facts li {
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--color-mist, #E6EFE9); color: var(--text, #0B1F17);
  font-size: var(--fs-sm, .9rem);
}
.jg-facts strong { font-weight: 700; }
[data-theme="dark"] .jg-facts li { background: rgba(255, 255, 255, .08); }

/* ---------- chord boxes ---------- */
.jg-chords {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.4rem, 1fr));
  gap: .75rem;
  margin: var(--space-4, 1rem) 0 var(--space-5, 1.5rem);
}
.jg-chord {
  margin: 0; padding: .55rem .5rem .6rem;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-align: center;
}
.jg-chord__name { font: 700 1.15rem/1.1 var(--font-sans, system-ui, sans-serif); color: #0B1F17; }
.jg-chord__long { font-size: var(--fs-xs, .78rem); color: #5b6b62; line-height: 1.3; min-height: 2.1em; }
.jg-chord svg.jg-box { display: block; width: 132px; max-width: 100%; height: auto; }
.jg-chord__tab { font: 600 .82rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #2a3a32; letter-spacing: .08em; }
.jg-chord .mt-play { font-size: var(--fs-xs, .78rem); }
/* the paper is always white, so the button keeps its light-theme colours */
[data-theme="dark"] .mt-paper .mt-play { color: var(--color-emerald, #0E5C3A); border-color: var(--color-emerald, #0E5C3A); }
[data-theme="dark"] .mt-paper .mt-play:hover, [data-theme="dark"] .mt-paper .mt-play[aria-pressed="true"] { background: var(--color-emerald, #0E5C3A); color: #fff; }

/* ---------- the player ---------- */
.jg-player { margin: var(--space-5, 1.5rem) 0; }
.jg-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: .6rem;
}
.jg-btn {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .95em; min-height: 44px;
  border: 1px solid var(--color-line, #d8e2db); border-radius: 999px;
  background: var(--bg-card, #fff); color: var(--text, #0B1F17);
  font: 600 var(--fs-sm, .9rem)/1.1 var(--font-sans, system-ui, sans-serif);
  cursor: pointer;
}
.jg-btn:hover { border-color: var(--color-emerald, #0E5C3A); }
.jg-btn[aria-pressed="true"] { background: var(--color-emerald, #0E5C3A); border-color: var(--color-emerald, #0E5C3A); color: #fff; }
.jg-btn:focus-visible { outline: 3px solid var(--color-sprout, #3FB37F); outline-offset: 2px; }
.jg-btn--play { background: var(--color-emerald, #0E5C3A); border-color: var(--color-emerald, #0E5C3A); color: #fff; padding-inline: 1.2em; }
.jg-btn--play svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.jg-btn--play .jg-i-pause { display: none; }
.jg-btn--play[aria-pressed="true"] .jg-i-play { display: none; }
.jg-btn--play[aria-pressed="true"] .jg-i-pause { display: inline; }
[data-theme="dark"] .jg-btn { background: rgba(255, 255, 255, .04); color: var(--text-on-dark, #eaf3ed); border-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .jg-btn[aria-pressed="true"], [data-theme="dark"] .jg-btn--play { background: var(--color-sprout, #3FB37F); border-color: var(--color-sprout, #3FB37F); color: #0B1F17; }
.jg-seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .2rem; border-radius: 999px; background: var(--color-mist, #E6EFE9); }
[data-theme="dark"] .jg-seg { background: rgba(255, 255, 255, .06); }
.jg-seg .jg-btn { border-color: transparent; min-height: 40px; padding: .4em .85em; }
.jg-time { margin-left: auto; font: 600 var(--fs-sm, .9rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-muted, #5b6b62); }
.jg-hint { margin: .2rem 0 .7rem; font-size: var(--fs-sm, .9rem); color: var(--text-muted, #5b6b62); }
.jg-msg { margin: .5rem 0; font-size: var(--fs-sm, .9rem); color: var(--color-danger, #b3261e); }

.jg-paper { padding: .75rem .6rem .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jg-swipe { display: none; margin: 0 0 .4rem; font-size: var(--fs-xs, .78rem); color: var(--text-muted, #5b6b62); }
.jg-player--narrow .jg-swipe { display: block; }
.jg-player--narrow .jg-score-wrap { width: 600px; }   /* abcjs sizes the score to its parent */
.jg-score svg { display: block; }
.jg-score .abcjs-note, .jg-score .abcjs-rest { cursor: pointer; }
.jg-score .jg-on, .jg-score .jg-on path { fill: #0E5C3A; color: #0E5C3A; }
.jg-score .abcjs-chord { font-weight: 700; }

/* small staff + TAB examples */
.jg-ex { margin: var(--space-5, 1.5rem) 0; }
.jg-ex .mt-paper { padding: .6rem .8rem .3rem; overflow-x: auto; }
.jg-abc { max-width: 100%; }
.jg-abc svg { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.prose .jg-ex figcaption { margin-top: .5rem; font-size: var(--fs-sm, .9rem); color: var(--text-muted, #5b6b62); line-height: 1.5; }

/* fretboard maps */
.jg-neck { margin: var(--space-5, 1.5rem) 0; }
.jg-neck .mt-paper { padding: .6rem; overflow-x: auto; }
.jg-neck svg { display: block; width: 100%; min-width: 420px; max-width: 680px; height: auto; margin-inline: auto; }
.prose .jg-neck figcaption { margin-top: .5rem; font-size: var(--fs-sm, .9rem); color: var(--text-muted, #5b6b62); line-height: 1.5; }
.jg-neck .mt-plays { margin: .6rem 0 0; }

/* ---------- the hub: the ten tunes ---------- */
.jg-steps { margin: var(--space-5, 1.5rem) 0; }
.jg-step-h { margin: var(--space-6, 2rem) 0 .6rem; font-size: var(--fs-xs, .78rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-emerald, #0E5C3A); }
[data-theme="dark"] .jg-step-h { color: var(--color-sprout, #3FB37F); }
.jg-tunes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .75rem; }
.jg-tune {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .8rem; align-items: start;
  height: 100%; padding: .9rem 1rem;
  background: var(--bg-card, #fff); border: 1px solid var(--color-line, #d8e2db); border-radius: var(--radius, 10px);
  color: inherit; text-decoration: none;
}
.jg-tune:hover { border-color: var(--color-emerald, #0E5C3A); }
[data-theme="dark"] .jg-tune { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.jg-tune__n {
  grid-row: span 3; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-emerald, #0E5C3A); color: #fff; font-weight: 700;
}
[data-theme="dark"] .jg-tune__n { background: var(--color-sprout, #3FB37F); color: #0B1F17; }
.jg-tune__title { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.jg-tune__blurb { font-size: var(--fs-sm, .9rem); color: var(--text-muted, #5b6b62); line-height: 1.45; }
.jg-tune__meta { font-size: var(--fs-xs, .78rem); color: var(--text-muted, #5b6b62); }
.jg-tune__meta b { color: var(--text, #0B1F17); font-weight: 600; }
[data-theme="dark"] .jg-tune__meta b { color: var(--text-on-dark, #eaf3ed); }
.jg-orig { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: .1em; background: var(--color-cream-2, #efeae0); color: var(--color-gold-deep, #8A6526); }
[data-theme="dark"] .jg-orig { background: rgba(200, 162, 74, .18); color: var(--color-gold, #C8A24A); }

/* tables on the theory page */
.prose .jg-table { width: 100%; border-collapse: collapse; margin: var(--space-4, 1rem) 0; font-size: var(--fs-sm, .9rem); }
.prose .jg-table th, .prose .jg-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--color-line, #d8e2db); text-align: left; vertical-align: top; }
.prose .jg-table th { font-weight: 700; }
.jg-table-wrap { overflow-x: auto; }
.jg-blues { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: var(--space-4, 1rem) 0; max-width: 34rem; }
.jg-blues span { padding: .55rem .3rem; text-align: center; font-weight: 700; border-radius: 6px; background: var(--color-mist, #E6EFE9); color: var(--text, #0B1F17); }
.jg-blues span.iv { background: #d7ebdf; }
.jg-blues span.v { background: #f1e3c3; }
[data-theme="dark"] .jg-blues span { background: rgba(255, 255, 255, .08); color: var(--text-on-dark, #eaf3ed); }
[data-theme="dark"] .jg-blues span.iv { background: rgba(63, 179, 127, .25); }
[data-theme="dark"] .jg-blues span.v { background: rgba(200, 162, 74, .25); }

.jg-nav { display: flex; justify-content: space-between; gap: 1rem; margin: var(--space-6, 2rem) 0 var(--space-3, .75rem); }
.jg-nav a { display: flex; flex-direction: column; gap: .15rem; max-width: 48%; font-weight: 700; text-decoration: none; }
.jg-nav a span { font-size: var(--fs-xs, .78rem); font-weight: 600; color: var(--text-muted, #5b6b62); }
.jg-nav__next { margin-left: auto; text-align: right; }

@media (max-width: 560px) {
  .jg-time { margin-left: 0; width: 100%; }
  .jg-chords { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Print (a tune's page): the chord boxes in one row, then the music, on A4 */
@page { size: A4; margin: 12mm; }
@media print {
  .site-header, .site-footer, .cta-banner, .jg-no-print, .mt-play, .jg-bar, .jg-hint, .jg-swipe, .jg-msg { display: none !important; }
  :root { color-scheme: light !important; }
  html, body, main, section { background: #fff !important; color: #000 !important; }
  .jg-tune-page .jg-score-wrap { width: 86%; margin: 0 auto; }   /* chord row + music on one A4 sheet */
  .jg-tune-page .page-header, .jg-tune-page .prose, .jg-tune-page .jg-nav, .jg-tune-page .kp-all, .jg-tune-page .privacy-badge,
  .jg-tune-page #chords + p, .jg-tune-page .jg-player > h2 { display: none !important; }
  .jg-tune-page .section--tight { padding: 0 !important; }
  .jg-tune-page .container { max-width: none !important; padding: 0 !important; }
  .jg-tune-page #chords { margin: 0 0 2mm; font-size: 12pt; color: #000 !important; }
  .jg-tune-page .jg-chords { grid-template-columns: repeat(6, 1fr); gap: 2mm; margin: 0 0 3mm; }
  .jg-tune-page .jg-chord__long { display: none; }
  .jg-tune-page .jg-chord svg.jg-box { width: 26mm; }
  .jg-tune-page .jg-player { margin: 0; }
  .jg-tune-page .jg-paper { border: 0 !important; padding: 0 !important; }
  .jg-chord { border: 1px solid #999 !important; break-inside: avoid; }
  .jg-tune-page .jg-player--narrow .jg-score-wrap { width: 86%; }
  .jg-score .jg-on, .jg-score .jg-on path { fill: #000; }
}