/* Course III, Rhythm. Book tokens from book.css; course colour is --course (#b8862f). */

/* Tap pad */
.rh-tap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;padding:6px 0}
.rh-pad{position:relative;width:168px;height:168px;border-radius:50%;padding:0;border:0;background:radial-gradient(circle at 50% 38%,#f3dcb0 0,#dca853 58%,#b8862f 100%);color:#4b3514;font:500 26px var(--serif);box-shadow:0 8px 0 #9a6f22,0 18px 40px #b8862f33;touch-action:manipulation;user-select:none;-webkit-user-select:none;display:grid;place-items:center}
.rh-pad:hover{background:radial-gradient(circle at 50% 38%,#f3dcb0 0,#dca853 58%,#b8862f 100%)}
.rh-pad.hit{animation:rh-press .16s ease-out}
.rh-pad-ring{position:absolute;inset:-12px;border-radius:50%;border:3px solid var(--course);opacity:0;pointer-events:none}
.rh-pad-ring.beat{animation:rh-ring .2s ease-out}
.rh-readout{min-width:220px;max-width:340px;flex:1}
.rh-bpm b{display:block;font:500 64px/1 var(--serif);color:var(--course);font-variant-numeric:tabular-nums}
.rh-bpm small{font-size:12px;color:var(--muted);font-weight:600}
.rh-mark{margin:10px 0 0;font-size:15px}
@keyframes rh-press{40%{transform:translateY(5px) scale(.97);box-shadow:0 3px 0 #9a6f22,0 8px 20px #b8862f33}}
@keyframes rh-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.12)}}

/* Tempo walk */
.rh-tempo{display:flex;flex-direction:column;gap:14px;align-items:center;padding:4px 0 2px}
.rh-tempo-word{text-align:center}
.rh-tempo-word b{display:block;font:italic 500 44px/1.1 var(--serif);color:var(--course)}
.rh-tempo-word span{font-size:14px;color:var(--muted)}
.rh-feet{display:flex;gap:clamp(8px,3vw,22px);align-items:center;height:64px}
.rh-feet i{width:18px;height:30px;border-radius:50% 50% 45% 45%;background:#e8e1cc;transition:background .1s}
.rh-feet i.left{transform:translateY(-10px) rotate(-8deg)}
.rh-feet i.right{transform:translateY(10px) rotate(8deg)}
.rh-feet i.on{background:var(--course);box-shadow:0 0 0 5px color-mix(in srgb,var(--course) 22%,transparent)}

/* Note glyphs */
.rh-glyph{width:22px;height:32px;flex-shrink:0;color:var(--ink);stroke:none}

/* Note ladder */
.rh-ladder{display:flex;flex-direction:column;gap:8px}
.rh-ladder-count{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;font-size:12px;color:var(--muted)}
.rh-ladder-count>span:last-child{display:grid;grid-template-columns:repeat(4,1fr);text-align:left}
.rh-ladder-count b{font-weight:600;padding-left:4px;border-left:2px solid #d8d2bd}
.rh-ladder-count b.on{color:var(--course);border-color:var(--course)}
.rh-ladder-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;padding:6px 8px;border-radius:14px;min-height:56px;text-align:left;font-weight:500}
.rh-ladder-row.playing{background:color-mix(in srgb,var(--course) 10%,var(--sheet));border-color:color-mix(in srgb,var(--course) 45%,var(--line))}
.rh-ladder-name{display:flex;gap:8px;align-items:center;font-size:14px;line-height:1.2}
.rh-ladder-name small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.rh-ladder-blocks{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;height:34px}
.rh-ladder-blocks i{border-radius:7px;background:color-mix(in srgb,var(--course) 55%,#fff6e0);transition:background .06s}
.rh-ladder-blocks i.on{background:var(--rust)}

/* Bar builder */
.rh-modes .segmented{flex:1;max-width:360px}
.rh-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.rh-palette button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;min-height:84px;font-size:13px;line-height:1.15;background:#fffdf6}
.rh-palette button small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.rh-palette button.wont-fit{opacity:.4}
.rh-palette.resting button{border-style:dashed}
.rh-palette.resting .rh-glyph{opacity:.35}
.rh-bar{position:relative;padding:22px 0 4px}
.rh-bar-beats{position:absolute;inset:0 0 auto 0;display:grid;grid-template-columns:repeat(4,1fr);font-size:11px;color:var(--muted);font-weight:600}
.rh-bar-beats span{padding-left:4px}
.rh-bar-track{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;height:70px;padding:6px;background:#f4f1e4;border:1px solid #e3dfcc;border-radius:14px;background-image:linear-gradient(90deg,transparent calc(25% - 1px),#d6cfb6 calc(25% - 1px),#d6cfb6 25%,transparent 25%,transparent calc(50% - 1px),#d6cfb6 calc(50% - 1px),#d6cfb6 50%,transparent 50%,transparent calc(75% - 1px),#d6cfb6 calc(75% - 1px),#d6cfb6 75%,transparent 75%)}
.rh-block{grid-row:1;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--course) 70%,#fff6e0);color:#3b2a10;min-width:0;overflow:hidden;box-shadow:inset 0 -3px 0 #0001;transition:background .06s}
.rh-block .rh-glyph{color:#3b2a10}
.rh-block.rest{background:transparent;border:2px dashed #c6b98f;box-shadow:none;color:var(--muted)}
.rh-block.rest small{font-size:11px;font-weight:600}
.rh-block.on{background:var(--rust);color:#fffaf0}
.rh-block.on .rh-glyph{color:#fffaf0}
.rh-block.rest.on{background:color-mix(in srgb,var(--rust) 12%,transparent);border-color:var(--rust)}
.rh-slot{grid-row:1;border-radius:6px;border:1px dotted #d6cfb6}
.rh-bar-head{position:absolute;top:22px;bottom:4px;width:3px;margin-left:5px;background:var(--gold);border-radius:2px;pointer-events:none}
.rh-tools{gap:6px}
.rh-presets{gap:8px}
.rh-presets button{font-size:13px}

/* Meter lane */
.rh-sig{display:flex;flex-direction:column;align-items:center;font:600 30px/0.95 var(--serif);color:var(--course);align-self:center}
.rh-lane{display:flex;gap:0;justify-content:center;flex-wrap:wrap}
.rh-lane-bar{display:flex;gap:10px;padding:12px 16px;border-right:3px solid #cfc7ac;align-items:center}
.rh-lane-bar:first-child{border-left:3px solid #cfc7ac}
.rh-lane span{width:46px;height:46px;border-radius:50%;background:#ece6d2;display:grid;place-items:center;font:600 15px var(--body);color:var(--muted);transition:background .06s,transform .06s}
.rh-lane span.strong{width:62px;height:62px;font-size:20px;background:color-mix(in srgb,var(--course) 30%,#f5ecd4);color:#5a3f12}
.rh-lane span.on{background:var(--course);color:#fffaf0}
.rh-lane span.strong.on{background:var(--rust)}
.rh-mystery{display:grid;place-items:center;height:92px}
.rh-mystery span{width:52px;height:52px;border-radius:50%;background:#ece6d2}
.rh-mystery span.on{animation:rh-blink .25s ease-out}
@keyframes rh-blink{0%{background:var(--course);transform:scale(1.12)}100%{background:#ece6d2;transform:scale(1)}}
.rh-answers{gap:10px}
.rh-answers span{font-size:14px;font-weight:600;flex-basis:100%}
.rh-answers button{min-width:72px;font:500 24px var(--serif)}
.rh-answers button.right{background:var(--teal);border-color:var(--teal);color:#fffdf4}
.rh-answers button.tried{border-style:dashed;color:var(--muted)}
.rh-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rh-bars span{text-align:center;padding:8px 4px;border-radius:10px;background:#f1eddd;font-size:13px;font-weight:600;color:var(--muted)}
.rh-bars span.on{background:var(--course);color:#fffaf0}

/* Accents */
.rh-accents{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;justify-items:center;padding:6px 0}
.rh-accents button{width:clamp(56px,14vw,86px);height:clamp(56px,14vw,86px);border-radius:50%;padding:0;font:500 22px var(--serif);background:#f1eddd;border:2px solid #ddd5bb;color:var(--muted);transition:transform .08s,background .1s}
.rh-accents button[aria-pressed=true]{background:color-mix(in srgb,var(--course) 40%,#f7eed6);border-color:var(--course);color:#4b3514;font-size:30px;font-weight:600}
.rh-accents button.now{outline:4px solid var(--gold);outline-offset:3px}
.rh-accents button[aria-pressed=true].now{background:var(--rust);color:#fffaf0;border-color:var(--rust)}
.rh-layer{background:var(--course);border-color:var(--course);color:#fffaf0}
.rh-layer:hover{background:#9a6f22;border-color:#9a6f22}

/* Syncopation */
.rh-skip{display:flex;flex-direction:column;gap:6px}
.rh-skip-notes,.rh-skip-count{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.rh-skip-notes{height:64px}
.rh-skip-notes span{grid-row:1;border-radius:10px;background:color-mix(in srgb,var(--pc) 30%,#fffaf0);border:2px solid color-mix(in srgb,var(--pc) 55%,#fff);display:flex;align-items:center;padding-left:10px;font:600 16px var(--body);color:color-mix(in srgb,var(--pc) 75%,#000);transition:background .06s}
.rh-skip-notes span.mover{border-style:dashed}
.rh-skip-notes span.sounding{background:var(--pc);color:#fffaf0}
.rh-skip-count span{text-align:center;font-size:12px;padding:6px 0;border-radius:8px;color:var(--muted)}
.rh-skip-count span.on-beat{font:600 16px var(--serif);color:var(--ink);background:#f1eddd}
.rh-skip-count span.now{background:var(--gold);color:#3b2a10}
.rh-rag{display:flex;flex-direction:column;gap:14px}
.rh-rag-bar{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid #e3dfcc;border-radius:14px;background:#fffdf6}
.rh-rag-lane{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:2px;position:relative;min-height:34px}
.rh-rag-lane b{position:absolute;right:4px;top:-2px;font-size:10px;color:var(--muted);font-weight:600;pointer-events:none}
.rh-rag-lane.beats{min-height:6px}
.rh-rag-lane.beats i{grid-row:1;height:6px;border-radius:3px;background:#ebe5cf;margin:0 2px}
.rh-rag-lane span{grid-row:1;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;min-width:0;overflow:hidden;transition:background .06s}
.rh-rag-lane.right span{background:color-mix(in srgb,var(--pc) 28%,#fffaf0);color:color-mix(in srgb,var(--pc) 75%,#000);margin-top:12px}
.rh-rag-lane.right span.sounding{background:var(--pc);color:#fffaf0}
.rh-rag-lane.left span{background:#e9e4d2;color:var(--muted)}
.rh-rag-lane.left span.bass{background:color-mix(in srgb,var(--rust) 25%,#f6ecdf);color:#6f3525}
.rh-rag-lane.left span.sounding{background:var(--teal);color:#fffaf0}
.rh-rag-lane.left span.bass.sounding{background:var(--rust)}

/* Drum pads */
.rh-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rh-pads button{min-height:84px;border-radius:18px;border:0;background:color-mix(in srgb,var(--pad) 22%,#fffaf0);color:color-mix(in srgb,var(--pad) 80%,#000);font:500 18px var(--serif);box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--pad) 35%,transparent);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.rh-pads button:hover{background:color-mix(in srgb,var(--pad) 30%,#fffaf0)}
.rh-pads button.hit{animation:rh-pad-hit .3s ease-out}
@keyframes rh-pad-hit{0%{background:var(--pad);color:#fffaf0;transform:translateY(3px)}100%{transform:none}}
.rh-playground-lower{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.rh-playground-lower .segmented{min-width:220px}

@media(max-width:600px){
  .rh-pad{width:140px;height:140px}
  .rh-tap{gap:18px}
  .rh-readout{text-align:center}
  .rh-ladder-count,.rh-ladder-row{grid-template-columns:104px minmax(0,1fr);gap:8px}
  .rh-ladder-name{font-size:12px}
  .rh-ladder-name .rh-glyph{width:16px}
  .rh-ladder-blocks{height:28px;gap:2px}
  .rh-ladder-blocks i{border-radius:4px}
  .rh-palette{gap:5px}
  .rh-palette button{font-size:11px;padding:8px 2px;min-height:76px}
  .rh-bar-track{height:58px;gap:2px;padding:4px}
  .rh-block .rh-glyph{width:14px;height:22px}
  .rh-lane-bar{gap:6px;padding:10px 8px}
  .rh-lane span{width:36px;height:36px}
  .rh-lane span.strong{width:48px;height:48px}
  .rh-pads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rh-playground-lower{grid-template-columns:1fr}
  .rh-skip-count span{font-size:10px}
  .rh-rag-lane b{display:none}
  .rh-rag-lane.right span{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .rh-pad.hit,.rh-pad-ring.beat,.rh-mystery span.on,.rh-pads button.hit{animation:none}
  .rh-pad-ring.beat{opacity:.8}
  .rh-mystery span.on{background:var(--course)}
  .rh-feet i,.rh-lane span,.rh-accents button{transition:none}
}

/* Ragtime legend */
.rh-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12px;color:var(--muted);margin:0}
.rh-legend span{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.rh-key{display:inline-block;width:18px;height:10px;border-radius:4px}
.rh-key.right{background:color-mix(in srgb,#5e9463 35%,#fffaf0)}
.rh-key.left{background:color-mix(in srgb,var(--rust) 25%,#f6ecdf)}

/* Dynamics */
.rh-dyn{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;height:170px}
.rh-dyn button{height:100%;padding:0;border:0;background:transparent;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:6px;min-width:0}
.rh-dyn button:hover{background:transparent}
.rh-dyn button i{display:block;height:var(--h);border-radius:12px 12px 6px 6px;background:color-mix(in srgb,var(--course) 32%,#f6eed8);transition:background .1s}
.rh-dyn button b{font:italic 600 22px var(--serif);color:var(--ink);text-align:center}
.rh-dyn button[aria-pressed=true] i{background:var(--course)}
.rh-dyn.sounding button[aria-pressed=true] i{background:var(--rust)}
.rh-dyn-word{text-align:center;margin:0;font-size:16px}
.rh-dyn-word b{font:italic 600 24px var(--serif);color:var(--course);margin-right:4px}
.rh-hairpin{width:100%;height:80px;display:block}
.rh-hairpin path{fill:color-mix(in srgb,var(--course) 28%,transparent);stroke:var(--course);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rh-levels{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;height:150px}
.rh-levels button{position:relative;padding:0;min-width:0;height:100%;border-radius:12px;background:#f4f1e4;border:1px solid #e3dfcc;overflow:hidden;touch-action:none}
.rh-levels button:hover{background:#efeadb}
.rh-levels button i{position:absolute;left:5px;right:5px;bottom:5px;height:calc((100% - 10px) * var(--lv,.5));border-radius:8px;background:color-mix(in srgb,var(--course) 70%,#fff6e0);pointer-events:none}
.rh-levels button.now i{background:var(--rust)}
.rh-surprise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.rh-surprise>div{display:grid;grid-template-columns:52px repeat(4,minmax(44px,1fr));gap:6px;align-items:center}
.rh-surprise span{font-size:12px;font-weight:600;color:var(--muted)}
.rh-surprise button{padding:0;min-height:48px;border-radius:50%;aspect-ratio:1;max-width:56px;justify-self:center;width:100%;font-size:14px;background:#f1eddd;border:1px solid #ddd5bb;color:var(--muted)}
.rh-surprise button.bang{background:var(--gold);border-color:#b8862f;color:#3b2a10;font-weight:700}
.rh-surprise button.now{outline:3px solid var(--teal);outline-offset:2px}
.rh-surprise button.bang.now{background:var(--rust);color:#fffaf0}
.rh-surprise.jolt{animation:rh-jolt .4s ease-out}
@keyframes rh-jolt{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-2px,1px)}100%{transform:none}}
@media(max-width:600px){
  .rh-dyn{height:140px;gap:5px}
  .rh-levels{height:130px;gap:4px}
  .rh-surprise{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.rh-surprise.jolt{animation:none}}