/* 20 Bluegrass Tunes: interactive edition prototype.
   Every page is laid out on a fixed 816 x 1056 sheet (US Letter at 96 dpi,
   the same page as the KDP print edition) and scaled to fit the book. */

:root {
  --paper: #fbf8f1;
  --paper-edge: #efe8da;
  --ink: #1d1b18;
  --ink-2: #6b645a;
  --rule: #cfc6b6;
  --accent: #b5471f;
  --accent-deep: #8a3212;
  --desk: #1c1916;
  --desk-2: #2c2622;
  --cover: #0d0c0b;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --display: "Oswald", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 35%, var(--desk-2), var(--desk) 70%);
  color: var(--ink);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- stage and book ---------- */
.stage {
  position: absolute;
  inset: 0 0 64px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 8px;
}
/* Until book.js has laid out the pages, show a note instead of the book. */
body:not(.book-ready) .book-wrap,
body:not(.book-ready) .toolbar { visibility: hidden; }
.opening {
  position: absolute;
  margin: 0;
  color: rgba(243, 237, 226, .7);
  font: italic 18px Georgia, serif;
}
body.book-ready .opening { display: none; }
.book-wrap {
  position: relative;
  width: min(100%, calc((100vh - 110px) * 1.545));
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .55));
}
@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  .book-wrap { width: min(100%, calc((100vh - 110px) * .7727)); }
}
/* A demo (tools/make_demo.py): one tune's spread in a frame on the sales
   page. The spread fills the frame; one page at a time keeps the page
   buttons, without Contents, full book and page sound. */
body.demo .toolbar .opt { display: none; }
body.demo:not(.demo-portrait) .toolbar { display: none; }
body.demo:not(.demo-portrait) .stage { inset: 0; padding: 14px; }
@media (min-aspect-ratio: 1/1) and (min-width: 721px) {
  body.demo .book-wrap { width: min(100%, calc((100vh - 28px) * 1.545)); }
}
#book { margin: 0 auto; }

.page {
  background: var(--paper);
  overflow: hidden;
}
.page .sheet {
  position: absolute;
  left: 0;
  top: 0;
  width: 816px;
  height: 1056px;
  transform-origin: 0 0;
  transform: scale(var(--s, .5));
  padding: 76px 84px 70px;
}
/* paper grain and the curve into the spine */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .33  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Wire-O binding: punched holes along the inner edge of every page (they
   turn with the page), 22 to the page to line up with the wire loops drawn
   over the spine by book.js. Hole centres sit 23px (sheet units) from the spine. */
.page .sheet::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  z-index: 6;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='48'><defs><linearGradient id='h' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23000' stop-opacity='.88'/><stop offset='.7' stop-color='%23231d18' stop-opacity='.82'/><stop offset='1' stop-color='%234a4038' stop-opacity='.7'/></linearGradient></defs><rect x='3' y='17' width='16' height='14' rx='3.5' fill='url(%23h)'/><rect x='3.5' y='30.2' width='15' height='1.2' rx='.6' fill='%23fff' fill-opacity='.45'/></svg>") 0 0 / 22px 48px repeat-y;
}
.page.p-right .sheet::after { left: 12px; }
.page.p-left .sheet::after { right: 12px; }
#book.is-portrait .page.p-left .sheet::after { right: auto; left: 12px; }
.page.hard { background: var(--cover); }
.page.hard::before { display: none; }

/* running heads and folios, as in the 2019 print book */
.runhead {
  position: absolute;
  top: 40px;
  left: 84px;
  right: 84px;
  display: flex;
  justify-content: space-between;
  font: 500 13px/1 var(--display);
  letter-spacing: .08em;
  color: var(--ink);
}
.p-left .runhead { flex-direction: row; }
.p-right .runhead { flex-direction: row-reverse; }
/* the way back to the contents, at the inner end of every running head */
.runhead .to-toc { color: var(--ink-2); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; transition: color .15s; }
.runhead .to-toc:hover { color: var(--accent); }

/* ---------- typography ---------- */
.sheet p { font-size: 18px; line-height: 1.48; margin: 0 0 12px; text-align: justify; hyphens: auto; }
.sheet p + p { text-indent: 1.4em; }
.sheet ul { margin: 0 0 12px; padding-left: 1.2em; font-size: 18px; line-height: 1.42; }
.sheet li { margin-bottom: 8px; }
.sheet h2 {
  font: 500 26px/1.1 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 auto 36px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ink);
  width: max-content;
  max-width: 100%;
}
.sheet h3 {
  font: 500 17px/1.2 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 22px 0 9px;
}
.badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: 500 15px/1 var(--display);
}
.center { text-align: center; }
.muted { color: var(--ink-2); }

/* ---------- front and back covers ---------- */
.cover .sheet { padding: 0; color: #f3ede2; background: var(--cover); }
/* The owner's photo (DSC01833, copied; img/print/ holds a 300 dpi copy for
   the paperback), drawn at 86% of the width so the scroll and upper body sit
   above the title, its sides faded into the cover (wide enough to hide a
   wooden stand at the photo's lower left). */
.cover .photo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  background: url("../img/cover-mandolin.jpg") 50% 31% / 86% auto no-repeat;
}
.cover .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--cover) 12%, transparent 24%, transparent 76%, var(--cover) 88%),
    linear-gradient(to bottom, rgba(13, 12, 11, .55) 0, transparent 22%, transparent 55%, var(--cover) 92%);
}
/* the Play Like a Natural logo (copied from playlikeanatural, wordmark turned
   cream for the dark covers): the publisher's mark, bottom right on the front,
   level with the author's name, so the top is left to the series mark */
.cover .brand-logo { position: absolute; bottom: 49px; right: 58px; width: 150px; height: auto; }
.back .brand-logo { top: auto; right: auto; left: 50%; bottom: 168px; width: 190px; transform: translateX(-50%); }
/* the Interactive Series mark: top left, on its own, clear of the headstock */
.cover .series-mark { position: absolute; top: 48px; left: 58px; width: 225px; height: auto; overflow: visible; }
.cover .title {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 150px;
  text-align: center;
}
.cover .title .big { font: 500 86px/.95 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.cover .title .for { font: 400 30px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; margin-top: 16px; color: #e0b27a; }
.cover .title .plus { font: italic 400 22px/1.3 var(--serif); margin-top: 20px; color: #d8d0c2; }
.cover .author { position: absolute; bottom: 64px; left: 0; right: 0; text-align: center; font: 500 20px/1 var(--display); letter-spacing: .24em; }
.cover.endpaper .sheet {
  background:
    radial-gradient(circle at 30% 30%, rgba(181, 71, 31, .16), transparent 60%),
    repeating-linear-gradient(45deg, #181513 0 6px, #1c1815 6px 12px);
}
/* the chord pages at the back: tappable diagrams in a grid */
.chord-page h3 { margin-top: 22px; }
.chord-lead { font-size: 17px !important; margin-bottom: 18px !important; }
.chord-index { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px 6px; justify-items: center; margin: 6px 0 14px; }
.chord-index figure { margin: 0; text-align: center; }
.chord-index chord-shape { display: block; max-width: 100%; }
.chord-index chord-shape button { background: transparent; border: 1px solid var(--rule); border-radius: 8px; padding: 6px 5px 4px; max-width: 100%; }
.chord-index chord-shape svg { width: 64px; }
.chord-index chord-shape .cs-name { font: 500 17px/1 var(--display); margin-top: 2px; }
.chord-index chord-shape .cs-hint { display: none; }
#chords-used { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 10px; }
#chords-used chord-shape svg { width: 90px; }
#chords-used chord-shape .cs-name { font-size: 19px; }
.chord-index figcaption { font: italic 14px/1.2 var(--serif); color: var(--ink-2); margin-top: 2px; }
/* the two-finger chords, a page to themselves: larger diagrams */
.two-finger { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px 12px; margin: 18px 0 8px; }
.two-finger chord-shape svg { width: 104px; }
.two-finger chord-shape .cs-name { font-size: 21px; }
/* chords by key: a heading, then the five chords with their job (I, IV, V, V7, vi) */
.key-block { margin: 6px 0 18px; }
.key-block h4 { font: 500 17px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.key-block h4 span { margin-left: 12px; font: italic 400 16px var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.key-chords { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; margin-bottom: 0; }
.key-chords chord-shape svg { width: 78px; }
.key-chords .role { display: inline-block; min-width: 26px; padding: 2px 7px; margin-bottom: 4px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 12px/1.3 var(--display); letter-spacing: .06em; }
.chord-key { font-size: 15px !important; color: var(--ink-2); text-align: left !important; margin-top: 10px !important; }

/* inside back cover: where to go next */
.keep-learning { padding: 150px 96px 0 !important; color: #f3ede2; }
.keep-learning h2 { font: 500 44px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1.5px solid #e0b27a; color: #f3ede2; }
.keep-learning .lead { font: italic 400 22px/1.45 var(--serif); color: #d8d0c2; text-align: left; margin: 0 0 40px; }
.keep-learning .kl-site { display: block; text-decoration: none; margin: 0 0 30px; padding: 18px 22px; border: 1px solid rgba(224, 178, 122, .35); border-radius: 10px; background: rgba(13, 12, 11, .45); }
.keep-learning .kl-site:hover { border-color: #e0b27a; }
.keep-learning .kl-url { display: block; font: 500 26px/1.1 var(--display); letter-spacing: .06em; color: #e0b27a; }
.keep-learning .kl-what { display: block; margin-top: 8px; font: 400 19px/1.4 var(--serif); color: #e8e0d2; }
.keep-learning .kl-series { display: flex; align-items: center; gap: 22px; margin-top: 44px; }
.keep-learning .kl-series img { width: 190px; height: auto; flex: none; }
.keep-learning .kl-series p { font: italic 400 18px/1.4 var(--serif); color: #d8d0c2; margin: 0; text-align: left; }
.keep-learning .kl-sign { position: absolute; left: 96px; bottom: 70px; font: 500 16px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: #b9b0a2; }
.back .sheet { padding: 110px 90px; }
.back .blurb { font: 400 22px/1.5 var(--serif); color: #e8e0d2; text-align: left; }
.back .blurb p { font-size: 22px; text-align: left; }
.back .barcode { position: absolute; right: 70px; bottom: 70px; width: 192px; height: 115px; background: #fff; display: grid; place-items: center; color: #999; font: 12px var(--display); letter-spacing: .1em; }

/* ---------- title, copyright, contents ---------- */
.titlepage .sheet { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.titlepage .t1 { font: 500 52px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
.titlepage .t2 { font: 500 20px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; margin: 22px 0 110px; }
.titlepage .t3 { font: 500 24px/1 var(--display); letter-spacing: .18em; }
.titlepage .imprint { position: absolute; left: 50%; bottom: 96px; width: 118px; height: auto; transform: translateX(-50%); }
.copyright .sheet { display: flex; flex-direction: column; justify-content: flex-end; }
.copyright p { font-size: 15px; text-align: left; text-indent: 0 !important; color: var(--ink-2); }
.copyright .copyright-sign { margin-top: 18px !important; color: var(--ink) !important; }
/* The owner's name as a handwritten signature, a little below the sign-off. */
.copyright .signature { display: block; margin-top: 26px; font: 34px/1 "Allura", cursive; }

.toc { list-style: none; padding: 0; margin: 0; font-size: 19px; }
/* 2.5px rows: 22 tunes, the bonus and chord headings and three chord pages fit above the folio. */
.toc li { display: flex; align-items: baseline; gap: 10px; padding: 2.5px 0; margin: 0; }
.toc .n { width: 28px; color: var(--ink-2); font: 500 15px var(--display); }
.toc .name { white-space: nowrap; }
.toc .dots { flex: 1; border-bottom: 1.5px dotted var(--rule); transform: translateY(-5px); }
.toc .grade { font: 500 13px var(--display); letter-spacing: .1em; color: var(--ink-2); white-space: nowrap; }
.toc .pg { width: 28px; text-align: right; font: 500 15px var(--display); }
.toc li.toc-sub { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--rule); font: 500 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.toc a { color: inherit; text-decoration: none; cursor: pointer; }
.toc a:hover { color: var(--accent-deep); }
.toc-note { font-size: 15px !important; color: var(--ink-2); margin-top: 18px !important; text-align: center !important; }

/* ---------- chapter opener ---------- */
.opener .sheet { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 230px; }
.opener .photo { margin-top: 70px; width: 100%; height: 400px; background: url("../img/playing.jpg") center / cover; filter: grayscale(1) contrast(1.05); }

/* ---------- song pages ---------- */
.song-title { font: 400 50px/1.15 var(--serif); text-align: center; margin: -8px 0 10px; }
.song-sub { font: 500 14px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; text-align: center; color: var(--ink-2); margin-bottom: 26px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.facts div { padding: 10px 6px; text-align: center; }
.facts b { display: block; font: 500 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.facts span { font-size: 20px; }
/* Chord diagrams (the site's <chord-shape> widget, restyled for the page; the
   widget injects its own styles, so these selectors are more specific). */
.chords-row { display: flex; justify-content: center; gap: 22px; margin: 4px 0 8px; }
.chords-row.many { gap: 12px; }
.chords-row chord-shape { margin: 0; }
.chords-row chord-shape button {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 8px 6px;
}
.chords-row chord-shape svg { width: 96px; }
.chords-row.many chord-shape svg { width: 72px; }
.chords-row chord-shape .cs-name { font: 500 18px/1 var(--display); margin-top: 2px; }
.chords-row chord-shape .cs-hint { font: italic 13px var(--serif); color: var(--ink-2); }

.score-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -8px 0 14px; }
.score-head .song-title { font-size: 36px; margin: 0; text-align: left; }
.score-head .arr { font: italic 15px var(--serif); color: var(--ink-2); margin-top: 7px; }
/* The buttons go on the spine side and the title on the outer edge: a click
   near a page's outer corners turns the page. */
.p-right .score-head { flex-direction: row-reverse; }
.p-right .score-head .song-title, .p-right .score-head .arr { text-align: right; }
.score { position: relative; }
.score svg { display: block; overflow: visible; }
.score .chord-sym { font: 700 19px var(--serif); fill: var(--ink); transition: fill .12s; }
/* the chord sounding now, in the colour of the note sounding */
.score .chord-sym.on { fill: #e09f3e; }


/* on-page player controls (screen only; hidden in the print render) */
.play-strip { display: flex; gap: 8px; align-items: center; font-family: var(--display); }
.page-tools { position: absolute; left: 84px; bottom: 22px; display: flex; align-items: center; gap: 10px; }
.btn {
  appearance: none;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 9px 18px;
  font: 500 15px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.btn.ghost { background: transparent; color: var(--ink); }
/* the sheet music PDF on each tune's intro page (tools/make_pdfs.mjs makes
   the files), styled like Loop and Backing: at the foot, on the side away
   from the page number; it opens in a new tab to look at, print or save */
a.btn, a.loop-toggle { text-decoration: none; }
.intro-tools { position: absolute; bottom: 22px; left: 84px; display: flex; gap: 10px; }
.p-left .intro-tools { left: auto; right: 84px; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.speed { font: 500 14px var(--display); letter-spacing: .06em; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
select { font: 500 15px var(--display); padding: 6px 8px; border-radius: 8px; border: 1px solid var(--rule); background: #fff; color: var(--ink); }
.qr-note { position: absolute; left: 84px; right: 84px; bottom: 30px; font: italic 13px var(--serif); color: var(--ink-2); text-align: center; }

.folio { position: absolute; bottom: 30px; font: 500 14px var(--display); }
.p-left .folio { left: 84px; }
.p-right .folio { right: 84px; }

/* ---------- toolbar under the book ---------- */
.toolbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #e9e1d4;
  font: 500 14px var(--display);
  letter-spacing: .08em;
}
.toolbar button {
  appearance: none;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: inherit;
  border-radius: 999px;
  min-width: 44px;
  height: 40px;
  padding: 0 14px;
  font: inherit;
  cursor: pointer;
}
.toolbar button:hover { background: rgba(255, 255, 255, .16); }
.toolbar .where { min-width: 110px; text-align: center; opacity: .85; }

/* ---------- full-screen play-along ---------- */
.fs {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.fs[hidden] { display: none; }
.fs header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
}
.fs header .name { font: 500 20px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; margin-right: auto; }
.fs header .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.fs header .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .4); }
.fs header .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.fs header label { font: 500 13px var(--display); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; opacity: .9; }
/* side margins wide enough for the previous and next arrows (book.js reads them) */
.fs .scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 84px 40vh; }
/* the previous and next tune: round arrows at the sides, half way down */
.fs-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 5px;
  border: 0;
  border-radius: 50%;
  background: rgba(29, 27, 24, .82);
  color: #fff;
  font: 400 40px/1 var(--display);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: background .15s, transform .15s;
}
.fs-nav:hover { background: var(--accent); transform: scale(1.06); }
.fs-nav:focus-visible { outline: 3px solid #3b82f6; outline-offset: 3px; }
.fs-nav[hidden] { display: none; }
.fs-nav.prev { left: 14px; }
.fs-nav.next { right: 14px; }
.fs .fs-score { max-width: 1500px; margin: 0 auto; }
.fs .hint { text-align: center; font: italic 15px var(--serif); color: var(--ink-2); margin: 0 0 14px; }


@media (max-width: 640px) {
  .toolbar { gap: 8px; }
  .toolbar .opt { display: none; }
  .fs header { gap: 8px; }
  .fs header .name { width: 100%; }
}

/* practice log */
.log { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 16px; }
.log th { font: 500 13px var(--display); letter-spacing: .12em; text-transform: uppercase; text-align: left; border-bottom: 1.5px solid var(--ink); padding: 6px 4px; }
.log td { border-bottom: 1px solid var(--rule); height: 38px; }
.log th:nth-child(1) { width: 16%; } .log th:nth-child(2) { width: 30%; } .log th:nth-child(3) { width: 14%; }

.no-audio { font: italic 15px var(--serif); color: var(--ink-2); margin-right: 4px; }

/* the wire loops over the spine (drawn by book.js) */
.binding { position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none; }
.binding svg { display: block; overflow: visible; }

/* score details */
.score .tab-label { font: 600 12px/1 var(--display); fill: var(--ink); text-anchor: middle; }
.score .volta { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.score .volta-label { font: 700 12px var(--serif); fill: var(--ink); }
.score .rep { fill: var(--ink); }
/* the gap in the tab line behind each fret number (score.js), the page colour */
.score .tab-gap { fill: var(--paper); }
.notes-page .blank { margin-top: 6px; }
/* the page number is bottom left on left-hand pages, so the speed control moves right */
.p-left .page-tools { left: auto; right: 84px; }

/* ---------- moving tab and loops, as on playlikeanatural.com ---------- */
/* red playhead line through the line of music */
.score-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: #c8102e;
  pointer-events: none;
  display: none;
  will-change: transform;
  z-index: 3; /* over the loop's blue band */
}
/* In Loop mode the playhead is easy to see and to move: a slightly thicker
   line, edged in white, with a grabber at its top like the trim handle in
   a recording or video editor (arrows either side of two bars; score.js
   draws it). Drag the grabber, or the line anywhere along it (a wide,
   invisible strip), to start somewhere else; the pointer shows the
   left-right arrows. Sizes are divided by the page's scale (--s), so they
   are the same on a phone as on a big screen; full screen has no --s. */
.score-cursor .cursor-hit, .score-cursor .cursor-grip { display: none; }
.picking .score-cursor {
  width: calc(3px / var(--s, 1));
  margin-left: calc(-1.5px / var(--s, 1));
  box-shadow: 0 0 0 calc(1px / var(--s, 1)) rgba(255, 255, 255, .9), 0 0 calc(6px / var(--s, 1)) rgba(200, 16, 46, .45);
}
.picking .score-cursor .cursor-hit {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(36px / var(--s, 1));
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}
.picking .score-cursor .cursor-grip {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(36px / var(--s, 1));
  height: calc(20px / var(--s, 1));
  transform: translate(-50%, -55%);
  border-radius: calc(6px / var(--s, 1));
  background: linear-gradient(#d82440, #a30c25);
  border: calc(1.5px / var(--s, 1)) solid #fff;
  box-shadow: 0 calc(1px / var(--s, 1)) calc(4px / var(--s, 1)) rgba(0, 0, 0, .35);
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
  transition: transform .12s;
}
.picking .score-cursor .cursor-grip svg { display: block; width: 100%; height: 100%; fill: #fff; pointer-events: none; }
/* a bigger target for a finger than the grabber looks */
.picking .score-cursor .cursor-grip::before { content: ""; position: absolute; inset: calc(-12px / var(--s, 1)); border-radius: calc(12px / var(--s, 1)); }
.picking .score-cursor .cursor-grip:focus-visible { outline: calc(3px / var(--s, 1)) solid #3b82f6; outline-offset: calc(2px / var(--s, 1)); }
.score-cursor.dragging .cursor-grip { transform: translate(-50%, -55%) scale(1.1); }
/* With a mouse the pointer's white arrows show the line can be dragged, so
   the grabber stays out of sight (the owner found the line cleaner without
   it), unless the keyboard brings it into focus. On a touch screen there is
   no pointer to show the arrows, so the grabber marks the line to drag. */
@media (hover: hover) and (pointer: fine) {
  .picking .score-cursor .cursor-grip { opacity: 0; }
  .picking .score-cursor .cursor-grip:focus-visible { opacity: 1; }
}
/* The music is for tapping and dragging, not selecting as text. */
.score { -webkit-user-select: none; user-select: none; }
/* In Loop mode a finger drag on the music chooses bars, not scrolling (pinching still zooms). */
.score.picking, .picking .score { touch-action: pinch-zoom; }
/* the note sounding: a black pick on the tab, an orange head on the staff */
.score .pick { display: none; }
.score .pick.on { display: inline; }
.score .pick path { fill: #1a1a1a; }
.score .pick text { fill: #fff; font: 700 12px Arial, Helvetica, sans-serif; text-anchor: middle; }
.score .vf-stavenote.on path, .score .vf-stavenote.on use, .score .vf-stavenote.on rect, .score .vf-stavenote.on text { fill: #e09f3e !important; stroke: #e09f3e; }
/* notes already played in this pass */
.score .vf-stavenote.past path, .score .vf-stavenote.past use, .score .vf-stavenote.past rect, .score .vf-stavenote.past text { fill: #b5aa97; stroke: #b5aa97; }
.score .vf-tabnote.past text { fill: #b5aa97; }
.score .bar-num { font: italic 12px var(--serif); fill: var(--ink-2); }
/* choosing bars to loop */
.score.picking { cursor: crosshair; }
.sel-band { position: absolute; border: 2px solid #3b82f6; background: rgba(59, 130, 246, 0.1); border-radius: 6px; pointer-events: none; }
/* In Loop mode, each side of the loop can be dragged (book.js): a strip
   along the band's left or right edge, where the pointer shows the white
   left-right arrows and the side lights up. Under the red line, which wins
   where they meet. */
.loop-side {
  position: absolute;
  z-index: 2;
  width: calc(20px / var(--s, 1));
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: none;
}
.loop-side::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(5px / var(--s, 1));
  transform: translateX(-50%);
  border-radius: calc(3px / var(--s, 1));
  background: #3b82f6;
  opacity: 0;
  transition: opacity .12s;
}
.loop-side:hover::after, .loop-side.dragging::after { opacity: 1; }
/* while the red line is dragged, the left-right arrows stay, wherever the pointer goes */
html.trimming, html.trimming * { cursor: ew-resize !important; }

/* the Loop switch on the page */
.loop-toggle {
  appearance: none;
  font: 500 14px/1 var(--display);
  letter-spacing: .06em;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.loop-toggle[aria-pressed="true"] { background: #2f9e63; border-color: #2f9e63; color: #fff; }
/* Loop and Backing on the music pages: core features, so bigger, with an icon
   and a warm gradient that sets them apart; once on, the solid green (Loop)
   or navy (Backing) they always had, ringed in white */
.loop-toggle.feature {
  --feature: linear-gradient(135deg, #f0a43a 0%, #d8622b 55%, #b5471f 100%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 16px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--feature);
  border: 0;
  padding: 10px 18px 10px 14px;
  box-shadow: 0 2px 6px rgba(120, 50, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.loop-toggle.feature:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(120, 50, 20, .32), inset 0 1px 0 rgba(255, 255, 255, .25); }
.loop-toggle.feature .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.loop-toggle.feature .ic rect { fill: currentColor; stroke: none; }
.loop-toggle.feature[aria-pressed="true"] { background: #2f9e63; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f9e63; }
.loop-toggle.feature.is-on { background: #1d3557; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d3557; }

/* practice bar: which bars loop, Play, Clear */
.practice-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(26, 26, 26, 0.94);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-family: var(--display);
}
.practice-bar[hidden] { display: none; }
.practice-bar-label { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--display); letter-spacing: .04em; color: #fff; padding: 0 8px 0 6px; white-space: nowrap; }
.practice-bar-loop-dot { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; animation: practice-loop-pulse 1.6s ease-out infinite; }
@keyframes practice-loop-pulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.practice-bar-btn { font: 500 13px/1 var(--display); letter-spacing: .04em; background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.practice-bar-btn:hover { background: rgba(255, 255, 255, 0.22); }
.practice-bar-btn[hidden] { display: none; }
.practice-bar-btn.ghost { background: transparent; }
.fs > .practice-bar { position: absolute; right: 16px; bottom: 14px; z-index: 5; }

/* Practice mode switch in the full-screen header */
.practice-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.practice-switch[hidden] { display: none; }
.practice-switch input { position: absolute; opacity: 0; pointer-events: none; }
.practice-switch-track { position: relative; display: inline-block; width: 38px; height: 22px; background: #c7c2b6; border-radius: 999px; transition: background .15s ease; }
.practice-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.practice-switch input:checked ~ .practice-switch-track { background: #2f9e63; }
.practice-switch input:checked ~ .practice-switch-track .practice-switch-thumb { transform: translateX(16px); }
.practice-switch input:focus-visible ~ .practice-switch-track { box-shadow: 0 0 0 3px rgba(47, 158, 99, .35); }
.practice-switch-label { font: 500 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }

/* ---------- backing tracks, as on the site's song pages ---------- */
/* the Backing button (navy once a backing track is on) and its mixer */
.mix-wrap { position: relative; }
.mix-toggle.is-on { background: #1d3557; border-color: #1d3557; color: #fff; }
.mix-toggle[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(29, 53, 87, .22); }
.mixer {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  z-index: 20;
  width: 318px;
  padding: 16px 18px 14px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .2);
  font-family: var(--display);
  text-transform: none;
  letter-spacing: normal;
}
.mixer[hidden] { display: none; }
.p-left .mixer { left: auto; right: 0; }
.mixer-head { font: 500 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.mixer-channel { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 0; }
.mixer-toggle {
  appearance: none;
  min-width: 118px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 999px;
  font: 500 16px/1 var(--display);
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.mixer-toggle:hover { border-color: var(--ink-2); }
.mixer-toggle[aria-pressed="true"] { background: #1d3557; border-color: #1d3557; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.mixer-toggle[aria-pressed="true"]:hover { background: #25446e; border-color: #25446e; }
.mixer-toggle.loading { animation: mixer-loading 1s ease-in-out infinite alternate; }
@keyframes mixer-loading { to { opacity: .55; } }
.mixer-volume {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  height: 5px;
  margin: 0;
  background: var(--rule);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.mixer-volume:disabled { opacity: .35; cursor: default; }
.mixer-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #1d3557;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.mixer-volume::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #1d3557;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.mixer-volume:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(29, 53, 87, .3); }
.mixer-note { font: italic 15px/1.35 var(--serif); color: var(--ink-2); margin: 10px 0 0; }
/* in full screen it drops down from the header */
.fs header { position: relative; }
.fs header .mixer { top: calc(100% + 8px); bottom: auto; left: auto; right: 16px; width: 300px; }
.fs header .mixer .mixer-toggle { font-size: 15px; min-width: 110px; }
.fs header .mixer-note { font-size: 14px; }
.fs header .btn.is-on { background: #2b4a75; border-color: #2b4a75; color: #fff; }

/* ---------- transpose, in the full-screen header (as on the site's song pages) ---------- */
.fs .transpose { display: inline-flex; align-items: center; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 999px; overflow: hidden; }
.fs .transpose[hidden] { display: none; }
.fs .transpose button { appearance: none; background: transparent; color: var(--paper); border: 0; font: 500 19px/1 var(--display); padding: 6px 13px 7px; cursor: pointer; }
.fs .transpose button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.fs .transpose button:disabled { opacity: .35; cursor: default; }
.fs .transpose button:focus-visible { outline: 2px solid var(--paper); outline-offset: -3px; }
.fs .transpose [data-fs="key-reset"] { border-left: 1px solid rgba(255, 255, 255, .3); font-size: 17px; }
.fs .transpose-key { font: 500 15px/1 var(--display); letter-spacing: .04em; text-transform: none; padding: 9px 12px; min-width: 92px; text-align: center; white-space: nowrap; border-left: 1px solid rgba(255, 255, 255, .3); border-right: 1px solid rgba(255, 255, 255, .3); }
/* laptops: a little less padding, so the header (with Tab only and Notation
   only) stays on one row down to about 1280px wide */
@media (max-width: 1440px) {
  .fs header { gap: 7px; }
  .fs header .btn { padding: 9px 13px; }
}
/* phones: keep the full-screen header to three rows under the title, and
   smaller arrows in narrower margins */
@media (max-width: 640px) {
  .fs .scroll { padding-left: 44px; padding-right: 44px; }
  .fs-nav { width: 36px; height: 36px; margin-top: -18px; font-size: 28px; padding-bottom: 4px; }
  .fs-nav.prev { left: 4px; }
  .fs-nav.next { right: 4px; }
  .fs header .btn { padding: 8px 12px; font-size: 14px; }
  .fs header .label-text { display: none; }
  .fs header select { font-size: 14px; padding: 6px; }
  .fs .transpose button { padding: 6px 10px 7px; }
  .fs .transpose-key { min-width: 64px; padding: 9px 8px; }
}

/* full screen with the whole tune on one screen (book.js sizes the music) */
.fs.fit .scroll { padding-bottom: 16px; }
.fs.fit .fs-score { max-width: none; }