/* Rhythm pad shared by the classic site and v2. Colours come from palette.css. */
.rhythm-pad { display: grid; gap: 14px; }
.rhythm-grid { position: relative; height: 72px; margin: 6px 4px 18px; border-radius: 12px; background: var(--jgg-surface-raised); border: 1px solid var(--jgg-border); }
.rhythm-track { position: absolute; inset: 0 22px; }
.rhythm-beat { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--jgg-border); }
.rhythm-beat.bar { border-left: 2px solid var(--jgg-control-border); }
.rhythm-beat b { position: absolute; top: calc(100% + 4px); left: 0; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--jgg-text-muted); }
.rhythm-target { position: absolute; top: 14px; width: 18px; height: 18px; transform: translateX(-50%); border-radius: 50%; background: var(--jgg-accent); }
.rhythm-mark { position: absolute; bottom: 10px; width: 4px; height: 22px; transform: translateX(-50%); border-radius: 2px; background: var(--jgg-pick); }
.rhythm-mark.off { background: var(--jgg-error); }
.rhythm-head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--jgg-text); }
.rhythm-head[hidden] { display: none; }
.rhythm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rhythm-controls button, .rhythm-cal-go { min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--jgg-control-border); background: var(--jgg-surface); color: var(--jgg-text); font: inherit; font-weight: 650; cursor: pointer; }
.rhythm-controls .rhythm-go { background: var(--jgg-accent); border-color: transparent; color: var(--jgg-on-accent); }
.rhythm-controls button:disabled { opacity: .5; cursor: default; }
.rhythm-meta { font-size: 13px; color: var(--jgg-text-muted); }
.rhythm-tap { min-height: 120px; border-radius: 16px; border: 2px dashed var(--jgg-control-border); background: var(--jgg-surface); color: var(--jgg-text); font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.rhythm-tap small { display: block; font-size: 13px; font-weight: 600; color: var(--jgg-text-muted); }
.rhythm-tap:not(:disabled) { border-style: solid; border-color: var(--jgg-accent); }
.rhythm-tap:disabled { opacity: .6; cursor: default; }
.rhythm-tap.hit { animation: rhythm-hit .12s ease-out; }
@keyframes rhythm-hit { from { background: var(--jgg-selected); } }
.rhythm-status { margin: 0; font-size: 15px; color: var(--jgg-text-muted); min-height: 1.4em; }
.rhythm-calibrate { font-size: 14px; color: var(--jgg-text-muted); }
.rhythm-calibrate summary { cursor: pointer; min-height: 32px; font-weight: 650; color: var(--jgg-text); }
.rhythm-calibrate p { margin: 6px 0 10px; }
@media (prefers-reduced-motion: reduce) { .rhythm-tap.hit { animation: none; } }
/* Classic exercise cards pad their own sections; give the pad the same inset. */
.exercise-card #rhythm-pad { padding: 4px 28px 18px; }
@media (max-width: 580px) { .exercise-card #rhythm-pad { padding: 4px 16px 16px; } }