/* ═══════════════════════════════════════════════════════════
   Interactive Drum Book — shared page chrome
   Palette/typography intentionally mirrors drum-sequencer.html
   and rhythm-randomizer.html so the tools feel native when embedded.
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0D1214;--panel:#121A1C;--panel2:#0F1517;--inset:#0A0F11;
  --border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.2);
  --text:#F0EFED;--dim:#8A9694;
  --accent:#4FC9C4;--accent-light:#8FE3DE;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;
  --ink:#F0EFED;--ink-soft:#8A8F8E;
  --teal:#4FC9C4;--teal-light:#8FE3DE;
  --line:rgba(255,255,255,0.07);
  /* Single source of truth for the page gutter, so full-bleed blocks can
     cancel it exactly instead of guessing. */
  --page-pad:14px;
  /* Fixed site nav height — the sticky playback bar parks directly beneath it. */
  --nav-h:81px;
  /* Shared text-column width. One value for headings and body so the column
     edge (and the rule above each heading) stays flush — a per-element `ch`
     cap would scale with each element's own font size and come out ragged.
     ~44rem lands around 66 characters of body text. */
  --measure:44rem;
}
@media(min-width:721px){:root{--page-pad:20px;}}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);
  min-height:100vh;padding:0 var(--page-pad) 64px;line-height:1.65;
  -webkit-text-size-adjust:100%;}

/* ── Book header ── */
.book-hero{max-width:900px;margin:0 auto;padding:104px 0 8px;text-align:center;}
.book-kicker{font-size:.64rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.book-hero h1{font-size:clamp(1.75rem,1.3rem + 2vw,2.4rem);font-weight:700;
  letter-spacing:.01em;line-height:1.15;margin-bottom:12px;}
.book-hero p{color:var(--dim);font-size:clamp(.95rem,.92rem + .2vw,1.05rem);
  max-width:52ch;margin:0 auto;}

/* ── Chapter nav strip ── */
.chapter-nav{max-width:900px;margin:22px auto 0;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);font-size:.74rem;font-weight:600;}
.chapter-nav a{color:var(--dim);text-decoration:none;padding:6px 14px;border-radius:999px;
  border:1px solid var(--border);transition:color .15s,border-color .15s,background .15s;}
.chapter-nav a:hover{color:var(--text);border-color:var(--border-strong);background:var(--panel);}
.chapter-nav span.disabled{color:rgba(138,150,148,.42);padding:6px 14px;
  border:1px dashed var(--border);border-radius:999px;cursor:default;}

/* ── Prose ──
   Measure is capped in `ch` rather than px: this is dense teaching text and
   long lines are where beginners lose their place. ~66ch is the comfortable
   band for continuous reading. */
.prose{margin:0 auto;}
.prose > h2,.prose > h3,.prose > p{max-width:var(--measure);
  margin-left:auto;margin-right:auto;}
/* Headings get a visible top rule so each new concept reads as a fresh start
   rather than one long scroll of prose. */
.prose h2{font-size:clamp(1.32rem,1.15rem + .8vw,1.65rem);font-weight:700;
  line-height:1.25;letter-spacing:.01em;margin:52px auto 14px;padding-top:22px;
  text-align:center;
  border-top:1px solid var(--border);scroll-margin-top:calc(var(--nav-h) + 70px);}
.prose > h2:first-child{margin-top:34px;border-top:0;padding-top:0;}
.prose h3{font-size:clamp(1rem,.96rem + .3vw,1.14rem);font-weight:600;
  margin:30px auto 8px;color:var(--accent-light);letter-spacing:.005em;
  text-align:center;
  scroll-margin-top:calc(var(--nav-h) + 70px);}
.prose p{color:#C9D2D0;margin-bottom:15px;
  font-size:clamp(1rem,.96rem + .22vw,1.08rem);line-height:1.7;}
.prose p.count{font-family:var(--font-mono);color:var(--accent);
  font-size:clamp(.9rem,.86rem + .2vw,.98rem);
  background:var(--inset);border:1px solid var(--border);border-radius:9px;
  padding:12px 15px;letter-spacing:.04em;line-height:1.5;}
.prose strong{color:var(--text);font-weight:600;}
.prose code{font-family:var(--font-mono);font-size:.92em;color:var(--accent);
  background:var(--inset);border:1px solid var(--border);border-radius:5px;
  padding:1px 6px;white-space:nowrap;}

/* ── Exercise block ──
   Deliberately wider than the prose measure: notation needs horizontal room,
   text does not. */
.exercise{max-width:min(1500px,calc(100vw - (var(--page-pad) * 2)));
  margin:22px auto 44px;
  background:var(--panel2);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;}
.exercise-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px 14px;flex-wrap:wrap;padding:12px 16px;
  border-bottom:1px solid var(--border);background:var(--panel);}
.exercise-title{font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);display:flex;align-items:center;gap:8px;}
/* Reading drills and play-along grooves are different activities; tag them so
   students can tell at a glance which one they're looking at. */
.exercise-title::before{content:"Play";font-size:.58rem;font-weight:700;
  letter-spacing:.1em;color:#0D1214;background:var(--accent);
  border-radius:999px;padding:3px 9px;}
.exercise:has(iframe[src*="rhythm-randomizer"]) .exercise-title::before{
  content:"Read";background:#f0b429;}

/* ── Global transport bar (drives every embed via postMessage) ──
   Sticky just below the fixed site nav so tempo/volume stay reachable
   wherever you are on the page. */
.global-controls{position:sticky;top:var(--nav-h);z-index:30;
  margin:18px calc(-1 * var(--page-pad)) 0;padding:11px var(--page-pad);
  background:rgba(13,18,20,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.global-controls-inner{display:flex;align-items:center;justify-content:center;
  gap:9px;flex-wrap:wrap;max-width:900px;margin:0 auto;}
.global-label{font-size:.58rem;font-weight:600;color:var(--dim);
  letter-spacing:.2em;text-transform:uppercase;margin-right:2px;}

.ex-ctrls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.ex-ctrl{display:flex;align-items:center;gap:8px;background:var(--panel2);
  border:1px solid var(--border);border-radius:999px;padding:0 13px;height:34px;}
.ex-ctrl > label{font-size:.58rem;font-weight:600;color:var(--dim);
  letter-spacing:.12em;text-transform:uppercase;}
.ex-ctrl input[type=range]{accent-color:var(--accent);cursor:pointer;}
.ex-bpm-range{width:104px;}
.ex-vol-range{width:64px;}
.ex-bpm-val{font-family:var(--font-mono);font-size:.8rem;color:var(--accent);
  width:42px;text-align:center;background:var(--inset);border:1px solid var(--border);
  border-radius:6px;padding:2px;}
.ex-bpm-val:focus{outline:none;border-color:var(--accent);}
.ex-step{background:transparent;border:1px solid var(--border);color:var(--dim);
  font-family:var(--font-mono);font-size:.7rem;line-height:1;border-radius:6px;
  padding:4px 7px;cursor:pointer;transition:color .12s,border-color .12s;}
.ex-step:hover{color:var(--text);border-color:var(--border-strong);}
.ex-click{cursor:pointer;user-select:none;}
.ex-click input{display:none;}
.ex-sw{width:30px;height:16px;background:var(--border-strong);border-radius:9px;
  position:relative;flex-shrink:0;transition:background .18s;}
.ex-sw::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;
  background:#c8d0ce;top:2px;left:2px;transition:left .18s,background .18s;}
.ex-click input:checked + .ex-sw{background:var(--accent);}
.ex-click input:checked + .ex-sw::after{left:16px;background:#0D1214;}
.exercise-picker{display:flex;gap:6px;flex-wrap:wrap;}
/* min 38px square keeps these comfortably tappable on a phone — they're the
   most-used control on the page. */
.ex-btn{background:transparent;border:1px solid var(--border);color:var(--dim);
  font-family:var(--font-ui);font-weight:600;font-size:.8rem;
  min-width:38px;min-height:34px;padding:5px 13px;border-radius:999px;
  cursor:pointer;transition:color .12s,border-color .12s,background .12s;}
.ex-btn:hover{color:var(--text);border-color:var(--border-strong);}
.ex-btn.active{background:var(--accent);color:#0D1214;border-color:var(--accent);}
.ex-btn:focus-visible,.chapter-nav a:focus-visible,.ex-step:focus-visible,
.chapter-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.exercise iframe{width:100%;border:0;display:block;background:var(--bg);}

/* ── Chapter cards (index page) ── */
.chapter-grid{max-width:900px;margin:30px auto 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.chapter-card{display:block;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--border);border-radius:14px;padding:18px 18px 20px;
  transition:border-color .15s,transform .15s,background .15s;}
a.chapter-card:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--panel2);}
.chapter-card .num{font-size:.6rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px;}
.chapter-card h3{font-size:1.06rem;font-weight:700;margin-bottom:7px;}
.chapter-card p{font-size:.82rem;color:var(--dim);line-height:1.5;}
.chapter-card.soon{opacity:.5;}
.chapter-card.soon .num{color:var(--dim);}
.chapter-card .tag{display:inline-block;margin-top:11px;font-size:.6rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border:1px dashed var(--border-strong);border-radius:999px;padding:3px 10px;}

/* ═══ Tablet ═══ */
@media(max-width:900px){
  .prose h2{margin-top:44px;}
}

/* ═══ Phone ═══
   Two things dominate readability here: how much vertical space the fixed nav
   plus sticky bar steal before any content shows, and how wide the notation
   gets to be. Both are addressed below. */
@media(max-width:640px){
  .book-hero{padding-top:92px;padding-bottom:2px;}
  .chapter-nav{flex-wrap:wrap;justify-content:center;gap:8px;font-size:.72rem;}
  .chapter-nav a,.chapter-nav span.disabled{padding:7px 13px;}

  /* Exercise cards run edge-to-edge so the staff gets every available pixel —
     on a 375px phone this is the difference between a readable bar and a
     cramped one. */
  .exercise{margin-left:calc(-1 * var(--page-pad));
    margin-right:calc(-1 * var(--page-pad));
    max-width:none;width:auto;
    border-radius:0;border-left:0;border-right:0;}
  .exercise-head{padding:11px var(--page-pad);}

  /* Collapse the playback bar to a single row. The ±5 steps and the "Playback"
     label are redundant next to the slider, and phones have hardware volume —
     so tempo and click (the two that actually matter musically) get to stay
     on one line instead of wrapping to three. */
  .global-controls{padding:8px var(--page-pad);}
  .global-controls-inner{gap:8px;flex-wrap:nowrap;}
  .global-label,
  #global-controls .ex-step,
  .global-controls .ex-ctrl:has(.ex-vol-range){display:none;}
  .global-controls .ex-ctrl{height:34px;padding:0 11px;gap:7px;}
  .global-controls .ex-bpm-range{width:clamp(70px,26vw,120px);}
  .global-controls .ex-ctrl > label{letter-spacing:.08em;}
}

/* Very narrow phones: drop the "Tempo" word, the number field makes it obvious. */
@media(max-width:380px){
  .global-controls .ex-ctrl > label{display:none;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ── Site nav (shared with the standalone tools) ── */
/* Scoped to .site-nav so the in-page .chapter-nav strip isn't also made fixed. */
nav.site-nav,nav.site-nav *,nav.site-nav a,nav.site-nav a:visited,nav.site-nav a:hover,
.nav-links a,.nav-links a:visited,.nav-links a:hover,
.brand-badge,.nav-cta{font-family:'Inter',sans-serif !important;text-decoration:none !important;}
.nav-links a{color:rgba(240,239,237,0.8) !important;}
.nav-cta{color:#0D1214 !important;}
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:18px 6vw;background:rgba(13,18,20,0.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.brand-badge{background:#fff;border-radius:7px;padding:5px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);display:flex;align-items:center;
  transition:transform .25s,box-shadow .25s;}
.brand-badge:hover{transform:scale(1.12);box-shadow:0 4px 16px rgba(0,0,0,0.5);}
.brand-badge img{height:34px;width:auto;display:block;}
.nav-links{display:flex;gap:10px;font-size:.82rem;font-weight:600;}
.nav-links a{padding:8px 18px;border-radius:999px;background:#0a0a0a;
  color:rgba(240,239,237,0.85);border:1px solid rgba(255,255,255,0.12);
  transition:background .2s,color .2s,border-color .2s,transform .15s;white-space:nowrap;}
.nav-links a:hover{background:#1a1a1a;color:#fff;border-color:rgba(255,255,255,0.25);transform:translateY(-1px);}
.nav-tools-toggle{padding:8px 18px;border-radius:999px;background:#0a0a0a;
  color:rgba(240,239,237,0.85);border:1px solid rgba(255,255,255,0.12);
  white-space:nowrap;display:inline-flex;align-items:center;}
.nav-dropdown:hover .nav-tools-toggle{background:#1a1a1a;color:#fff;border-color:rgba(255,255,255,0.25);}
.nav-cta{font-size:.82rem;font-weight:600;padding:9px 20px;border-radius:999px;
  background:var(--teal);color:#0D1214;transition:background .2s,transform .2s;}
.nav-cta:hover{background:var(--teal-light);transform:translateY(-1px);}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:8px;z-index:60;}
.nav-burger span{display:block;width:24px;height:2px;background:var(--ink);
  transition:transform .25s,opacity .25s;}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:65;
  background:rgba(13,18,20,0.98);backdrop-filter:blur(12px);flex-direction:column;
  align-items:center;justify-content:center;gap:22px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:1.3rem;font-weight:600;color:var(--ink);padding:10px 24px;border-radius:999px;}
.mobile-menu a.nav-cta{background:var(--teal);color:#0D1214;}
.mobile-menu .mobile-tools-label{font-size:.85rem;letter-spacing:.05em;color:var(--ink-soft);
  text-transform:uppercase;margin-top:6px;}
@media(max-width:860px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  nav.site-nav > .nav-cta{display:none;}
}
.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#111;border:1px solid rgba(255,255,255,0.14);border-radius:10px;
  padding:14px 6px 6px 6px;min-width:180px;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .2s;z-index:100;}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:all;}
.nav-dropdown-menu a{display:block;padding:9px 16px;border-radius:7px;
  color:rgba(240,239,237,0.8);font-size:.82rem;font-weight:600;background:none;
  border:none;transition:background .15s,color .15s;white-space:nowrap;transform:none !important;}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,0.07);color:#fff;transform:none !important;}

/* ── Inline rhythm figures (Chapter 5) ────────────────────────────────
   The four-character shorthand (x x - x) is shown as the notation it
   actually stands for. Drawn as plain shapes rather than copied out of
   the tools: those use VexFlow's Bravura font, which only exists inside
   the tool iframes, so a copied glyph would render as fallback junk here.
   fill:currentColor keeps them in step with the heading colour in both
   themes without a second set of rules. */
.rfig{
  display:inline-block;vertical-align:-.34em;
  height:2.05em;width:auto;
  fill:currentColor;
  margin:0 .06em;
}
h2 .rfig{height:1.72em;vertical-align:-.3em;}
.exercise-title .rfig{height:1.85em;vertical-align:-.36em;}
/* Sit the figures on the same baseline run as the label text */
h2:has(.rfig){display:flex;align-items:center;justify-content:center;gap:.1em;
  flex-wrap:wrap;text-align:center;}
.exercise-title:has(.rfig){display:inline-flex;align-items:center;gap:.1em;flex-wrap:wrap;}
.rlegend{display:flex;flex-wrap:wrap;gap:10px 14px;margin:14px 0 22px;}
.rlegend-item{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 12px 4px;border:1px solid var(--border);border-radius:9px;min-width:74px;}
.rlegend-item code{font-size:.74rem;letter-spacing:.06em;color:var(--dim);background:none;padding:0;}
.rlegend-item .rfig{height:2.4em;}

/* Count labels: "1 e - a" names the four semiquavers of a beat, with the
   ones you leave out shown as a dash. Red so the gaps read at a glance
   against the played counts. */
:root{--rest:#FF7A66;}
.rcount{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
  color:var(--dim);white-space:nowrap;}
.rcount i,.rdash{color:var(--rest);font-style:normal;font-weight:700;}
/* Centre the figure legend and give each card room to breathe */
.rlegend{justify-content:center;}
.rlegend-item{gap:6px;}
/* Figures sitting inside a sentence */
.prose p .rfig{height:2em;vertical-align:-.55em;margin:0 .12em;}