/* Guitar Imp — metronome
   The beat row, the tempo dial and the slider. Everything else on the page
   comes from the shared tool furniture in style.css. */

/* Tap tempo belongs with the tempo controls rather than up beside the title,
   where "Metronome" leaves it nowhere to go on a narrow phone. */
.tap {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: clamp(14px, 3.5vw, 18px);
    border: 1px solid rgba(236, 226, 207, .18);
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    color: var(--bone-dim);
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .04em;
    cursor: pointer;
    touch-action: manipulation;
}

.tap:active {
    background: rgba(245, 163, 60, .16);
    border-color: rgba(245, 163, 60, .5);
    color: var(--glow);
}

/* --------------------------------------------------------------------------
   The bar
   One lane per beat, so a glance tells you where in the bar you are without
   counting. The lit lane is imp green: it is the one thing on the page that
   means "now".
   -------------------------------------------------------------------------- */

.beats {
    display: flex;
    gap: clamp(4px, 1.4vw, 7px);
    margin-bottom: clamp(16px, 4vw, 22px);
}

.pip {
    flex: 1 1 0;
    min-width: 0;
    height: 13px;
    border-radius: 999px;
    background: rgba(236, 226, 207, .13);
}

/* The accented beat is ringed rather than filled, so the ring stays readable
   under the flash that lands on top of it. */
.pip--accent {
    outline: 1.5px solid rgba(245, 163, 60, .7);
    outline-offset: 2px;
}

.pip.is-on {
    animation: pip-hit .38s ease-out forwards;
}

@keyframes pip-hit {
    0% {
        background: var(--imp);
        box-shadow: 0 0 16px rgba(125, 201, 95, .75);
        transform: scaleY(1.45);
    }
    100% {
        background: rgba(125, 201, 95, .32);
        box-shadow: 0 0 0 rgba(125, 201, 95, 0);
        transform: scaleY(1);
    }
}

/* --------------------------------------------------------------------------
   Tempo
   -------------------------------------------------------------------------- */

.tempo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 3vw, 16px);
}

.step {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #241a16;
    color: var(--bone);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.step:active {
    background: rgba(245, 163, 60, .18);
    border-color: rgba(245, 163, 60, .5);
    color: var(--glow);
}

.step:disabled {
    opacity: .35;
    cursor: default;
}

.tempo__readout { text-align: center; }

/* Syne's digits are close to a full em wide apiece, so a three-figure tempo is
   about three times the font size. The middle term is what is left of the row
   once the two step buttons and the gaps are taken out, divided by those three
   digits — without it the number runs under the + button below about 360px. */
.tempo__bpm {
    margin: 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(42px, calc(30vw - 52px), 72px);
    line-height: .95;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tempo__unit {
    margin: 2px 0 0;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--nickel);
}

.tempo__mark {
    margin: 8px 0 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--glow);
}

/* --------------------------------------------------------------------------
   The slider
   Styled by hand rather than left to accent-color: the thumb has to be a
   thumb-sized target on a phone.
   -------------------------------------------------------------------------- */

.slider {
    display: block;
    width: 100%;
    height: 30px;
    margin: clamp(8px, 2.5vw, 14px) 0 clamp(16px, 4vw, 22px);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
}

.slider:focus { outline: none; }
.slider:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }

.slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(236, 226, 207, .10), rgba(236, 226, 207, .26));
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -10px;
    border: 0;
    border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .55);
}

.slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(236, 226, 207, .10), rgba(236, 226, 207, .26));
}

.slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .55);
}

/* The pair of selects uses the shared .fields row in style.css; only the step
   buttons need to give ground on the narrowest phones. */
@media (max-width: 359px) {
    .step { width: 48px; height: 48px; font-size: 23px; }
}