/* Online metronome */

#metronome #narrative h3 { font-size: 140%; margin-top: 43px; }
#metronome #narrative p, #metronome #narrative ul { font-size: 110%; }
#metronome article { width: 86%; }
#metronome #sb-locations { margin-top: 10px; }

.metronome { max-width: 520px; margin: 20px 0 10px; padding: 20px; border: 1px solid #d5d9de; border-radius: 4px; background: #f3f6f9; text-align: center; }

.metronomeBeats { display: flex; justify-content: center; gap: 10px; min-height: 22px; margin-bottom: 14px; }
.metronomeBeats span { width: 20px; height: 20px; border-radius: 50%; background: #cfd6dd; border: 1px solid rgba(0,0,0,.15); }
.metronomeBeats span.on { background: #357ae8; transform: scale(1.2); }
.metronomeBeats span.on.accent { background: #e8502a; }

.metronomeTempo { display: flex; align-items: center; justify-content: center; gap: 16px; }
.metronomeTempo button { margin: 0!important; width: 44px!important; min-height: 44px!important; padding: 0; font-size: 1.5rem!important; line-height: 40px!important; flex: 0 0 auto; }
.metronomeBpm { display: flex; flex-direction: column; align-items: center; min-width: 170px; }
.metronomeBpm input { width: 170px; padding: 0; border: 0; background: transparent; text-align: center; font: bold 4rem/1.1 "Lato", sans-serif; color: #222; -moz-appearance: textfield; appearance: textfield; }
.metronomeBpm input::-webkit-outer-spin-button, .metronomeBpm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.metronomeBpm input:focus-visible { outline: 2px solid #357ae8; border-radius: 4px; }
.metronomeUnit { font-size: 85%; letter-spacing: 2px; color: #555; }
.metronomeName { font-size: 95%; color: #016DC5; min-height: 1.6em; }

.metronomeSlider { display: block; width: 100%; margin: 14px 0 0; accent-color: #357ae8; }
.metronomeRange { display: flex; justify-content: space-between; font-size: 80%; color: #666; }

.metronomeActions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.metronomeActions button { margin: 0!important; width: auto!important; min-width: 150px; min-height: 46px!important; line-height: 44px!important; font-size: 1.05rem!important; flex: 0 0 auto; touch-action: manipulation; }
.metronomeTap { background-image: none!important; background-color: #555!important; }
.metronomeTap:hover, .metronomeTap:focus-visible { background-color: #333!important; }
.metronomeTap.tapped { background-color: #e8502a!important; }

#narrative p.metronomeHint { margin: 10px 0 0; font-size: 90%; color: #555; min-height: 1.6em; }

.metronomeOptions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #d5d9de; }
#narrative .metronomeOptions label { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: 95%; }
.metronomeOptions select { padding: 4px 6px; font: inherit; }

#narrative p.metronomeError { margin: 14px 0 0; color: #8a1f17; font-size: 95%; }

@media only screen and (max-width: 600px) {
	.metronome { padding: 14px; }
	.metronomeTempo { gap: 8px; }
	.metronomeBpm, .metronomeBpm input { min-width: 0; width: 140px; }
	.metronomeBpm input { font-size: 3.2rem; }
	.metronomeBeats { gap: 7px; }
	#metronome article { width: auto; }
}

.metronomeTrainer { margin-top: 14px; padding-top: 14px; border-top: 1px solid #d5d9de; }
#narrative .metronomeTrainer label { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: 95%; }
.metronomeTrainerFields { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.metronomeTrainerFields[hidden] { display: none; }
.metronomeTrainerFields input { width: 70px; padding: 4px 6px; font: inherit; text-align: center; }
#narrative .metronomeTrainerFields p.metronomeHint { flex-basis: 100%; margin-top: 2px; }

.metronomeShare { margin-top: 14px; padding-top: 12px; border-top: 1px solid #d5d9de; font-size: 95%; }
.metronomeShare input { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 6px 8px; font: inherit; font-size: 90%; text-align: center; }
.metronomeShare input[hidden] { display: none; }