/* metronome.css — /metronome/ on the studio kit (learning tools, plan A task A4; A5 adds polyrhythm here).
   Loaded after studio.css through templates/metronome.html's page_styles block, so every locale stub gets it.

   Look: a hardware beat counter. Beat keys light like the LEDs of a drum metronome: red on an accented beat,
   green on a normal one, an outline on a muted one; sub-tick LEDs sit under their beat. Everything else on the
   charcoal panel stays quiet. style.css still carries the old .beat-dot rules (round 24 px dots): the .metro
   rules below match or beat their specificity and come later. */

.metro {
    --st-accent: #34D17A;            /* LED green: a normal beat, the selected segment, the scope trace */
    --st-on-accent: #05240F;
    --metro-red: var(--st-led);
    display: grid;
    gap: 1.1rem;
    margin: 1.4rem 0 0;
}
.metro-hero { padding: 2rem 0 1rem; }

/* ── deck head: tempo + tap ──────────────────────────────────────────── */
.metro-head {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(0.8rem, 2.4vw, 1.6rem);
}
.metro-tempo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}
.metro-display {
    --st-display-size: clamp(4.6rem, 13vw, 8.6rem);
    white-space: nowrap;
}
.metro-display .st-unit { font-size: 0.2em; }
.metro-nudge {
    display: grid;
    grid-template-columns: auto auto minmax(5.5rem, 1fr) auto auto;
    align-items: center;
    gap: 0.45rem;
    max-width: 34rem;
}
.metro-step {
    min-width: 3.1rem;
    padding: 0 0.6rem;
    font-variant-numeric: tabular-nums;
}
.metro-fader { padding: 0 0.3rem; }
.metro-tap.st-pad {
    flex: 0 0 auto;
    width: clamp(7rem, 18vw, 10rem);
    min-height: 0;
    padding: 0.85rem 0.9rem 0.95rem;
}
.metro-tap .st-pad-name {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-stretch: 125%;
    font-weight: 850;
}
.metro-tap .st-pad-meta { font-size: 0.8rem; }

/* ── poly mode switch ────────────────────────────────────────────────── */
.metro-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
    padding-top: clamp(1.1rem, 2.4vw, 1.4rem);
    border-top: 1px solid var(--st-line);
}

/* ── beat keys ───────────────────────────────────────────────────────── */
.metro-beats-block { margin-top: clamp(1rem, 2.2vw, 1.4rem); }
.metro-beats-block[hidden],
.metro-poly[hidden] { display: none; }
.metro-beats {
    --metro-n: 4;
    display: grid;
    grid-template-columns: repeat(var(--metro-n), minmax(0, 1fr));
    gap: clamp(6px, 1.3vw, 12px);
}
.metro-col {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}
.metro .beat-dot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: auto;
    height: clamp(4.4rem, 10.5vw, 6.6rem);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0.5rem 0.7rem 0.6rem;
    border: 0;
    border-radius: 10px;
    background: #2C3035;
    color: var(--st-panel-muted);
    font: inherit;
    font-family: var(--st-font);
    cursor: pointer;
    transform: none;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background-color 0.16s ease-out, box-shadow 0.16s ease-out, color 0.16s ease-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.metro .beat-dot::before {        /* the key's own LED lens */
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.metro .beat-dot:hover { color: var(--st-panel-ink); }
.metro .beat-dot.is-accent {
    background: color-mix(in srgb, var(--metro-red) 26%, #2C3035);
    color: #FFB7A9;
}
.metro .beat-dot.is-accent::before { background: color-mix(in srgb, var(--metro-red) 55%, #000); }
.metro .beat-dot.is-mute {
    background: transparent;
    color: #6B7178;
    box-shadow: inset 0 0 0 1.5px #464B52;
}
.metro .beat-dot.is-mute::before { background: transparent; box-shadow: inset 0 0 0 1.5px #464B52; }
.metro .beat-dot.is-on {
    background: var(--st-accent);
    color: var(--st-on-accent);
    box-shadow: 0 0 26px 2px color-mix(in srgb, var(--st-accent) 55%, transparent), inset 0 -5px 0 rgba(0, 0, 0, 0.2);
    animation: metro-flash 0.2s ease-out;
}
.metro .beat-dot.is-on::before { background: #EFFFF4; box-shadow: 0 0 8px 2px #EFFFF4; }
.metro .beat-dot.is-on.is-accent {
    background: var(--metro-red);
    color: #fff;
    box-shadow: 0 0 30px 3px color-mix(in srgb, var(--metro-red) 60%, transparent), inset 0 -5px 0 rgba(0, 0, 0, 0.2);
}
.metro .beat-dot.is-on.is-mute {
    background: rgba(255, 255, 255, 0.05);
    color: var(--st-panel-ink);
    box-shadow: inset 0 0 0 2px var(--st-panel-muted);
    animation: none;
}
.metro .beat-dot.is-on.is-mute::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-panel-muted); }
@keyframes metro-flash {
    from { filter: brightness(1.5); }
    to { filter: brightness(1); }
}
.metro-num {
    font-size: clamp(1.7rem, 4.2vw, 2.7rem);
    font-weight: 850;
    font-stretch: 125%;
    line-height: 0.8;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* sub-tick LEDs under each beat; quarters have none to show (one click a beat) but keep the row's height */
.metro-ticks {
    --st-n: 1;
    display: grid;
    grid-template-columns: repeat(var(--st-n), minmax(0, 1fr));
    gap: 4px;
}
.metro .metro-tick {
    min-width: 0;
    height: 7px;
    min-height: 0;
    border-radius: 2px;
    transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out;
}
.metro[data-sub="4"] .metro-ticks { visibility: hidden; }

.metro-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.1rem;
    margin: 0.95rem 0 0;
    color: var(--st-muted);
    font-size: 0.85rem;
    font-weight: 600;
    font-stretch: 92%;
}
.metro-key { display: inline-flex; align-items: center; gap: 0.45rem; }
.metro-key::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.metro-key--accent::before { background: var(--metro-red); box-shadow: 0 0 7px var(--metro-red); }
.metro-key--normal::before { background: var(--st-accent); box-shadow: 0 0 7px var(--st-accent); }
.metro-key--mute::before { box-shadow: inset 0 0 0 1.5px var(--st-panel-muted); }
.metro-legend-hint { margin-inline-start: auto; }

/* ── poly mode (A5): a dial of concentric rings, one per layer ───────────
   Ring colours: cyan, the beat-key green, 808 yellow (outer to inner). The one (hit 0) is LED red on every ring,
   so in a polyrhythm the downbeat stacks into one red spoke. The ivory hand is drawn in pieces, one per ring band:
   joined in a polyrhythm, apart in a polymeter. Dots light on their hit (class only, no keyframes). */
.metro {
    --poly-c0: var(--st-cyan);
    --poly-c1: #34D17A;
    --poly-c2: var(--st-808-yellow);
}
.poly-c0 { --poly-c: var(--poly-c0); }
.poly-c1 { --poly-c: var(--poly-c1); }
.poly-c2 { --poly-c: var(--poly-c2); }

.metro-poly {
    display: grid;
    grid-template-columns: minmax(14rem, 19.5rem) minmax(0, 1fr);
    grid-template-areas: "dial side" "layers layers";
    gap: clamp(1.1rem, 2.6vw, 1.8rem) clamp(1.2rem, 3vw, 2.2rem);
    align-items: center;
    margin-top: clamp(1rem, 2.2vw, 1.4rem);
}
.poly-dial {
    grid-area: dial;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.poly-rings {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 46%, #23262A 0, #17191C 58%, #0F1113 100%);
    box-shadow: inset 0 3px 14px rgba(0, 0, 0, 0.65), 0 0 0 1px #3A3E44, 0 0 0 7px #1F2225, 0 0 0 8px #3A3E44;
}
.poly-track {
    fill: none;
    stroke: color-mix(in srgb, var(--poly-c) 28%, transparent);
    stroke-width: 1.3;
}
.poly-dot {
    fill: color-mix(in srgb, var(--poly-c) 30%, #26292D);
    stroke: #121416;
    stroke-width: 1.4;
    transition: fill 0.12s ease-out;
}
.poly-dot.is-accent { fill: color-mix(in srgb, var(--metro-red) 46%, #26292D); }
.poly-dot.is-on {
    fill: var(--poly-c);
    filter: drop-shadow(0 0 4px var(--poly-c));
}
.poly-dot.is-on.is-accent {
    fill: var(--metro-red);
    filter: drop-shadow(0 0 6px var(--metro-red));
}
.poly-hand line {
    stroke: var(--st-808-ivory);
    stroke-width: 2.6;
    stroke-linecap: round;
    opacity: 0.94;
}
.poly-ratio {
    fill: var(--st-panel-ink);
    font-family: var(--st-font);
    font-weight: 850;
    font-stretch: 125%;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.poly-repeat {
    margin: 1.05rem 0 0;
    color: var(--st-panel-ink);
    font-size: 0.98rem;
    font-weight: 700;
    font-stretch: 104%;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.poly-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 0;
}
.poly-hint {
    margin: 0;
    max-width: 46ch;
    color: var(--st-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}
.metro:not([data-mode="meter"]) .poly-hint--meter,
.metro[data-mode="meter"] .poly-hint--rhythm { display: none; }
.poly-presets-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.poly-presets.st-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.poly-preset.st-pad { min-width: 0; min-height: 4.2rem; }
.poly-preset .st-pad-name {
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-stretch: 122%;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.poly-preset.is-on { background: color-mix(in srgb, var(--st-accent) 20%, var(--st-key)); }
.poly-preset.is-on::before { background: var(--st-accent); box-shadow: 0 0 10px 2px var(--st-accent); }

/* layer cards: the ring's colour as the card's LED strip */
.poly-layers {
    grid-area: layers;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 1.3vw, 12px);
}
.poly-layer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.85rem 0.8rem 0.85rem;
    border-radius: 10px;
    background: #2C3035;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.poly-layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.8rem;
    right: 0.8rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--poly-c);
    box-shadow: 0 0 9px var(--poly-c);
}
.poly-layer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
}
.poly-layer-name {
    color: var(--poly-c);
    font-size: 0.85rem;
    font-weight: 750;
    font-stretch: 96%;
}
.poly-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--st-target);
    height: var(--st-target);
    margin: -0.7rem -0.55rem -0.7rem 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--st-panel-muted);
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.poly-remove:hover { color: var(--st-panel-ink); background: rgba(255, 255, 255, 0.06); }
.poly-remove[hidden],
.poly-add[hidden] { display: none; }
.poly-amount { display: flex; flex-direction: column; gap: 0.15rem; }
.poly-stepper {
    display: grid;
    grid-template-columns: auto minmax(2.6rem, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
}
.poly-step.st-btn {
    min-width: var(--st-target);
    padding: 0;
    font-size: 1.3rem;
    font-weight: 700;
}
.poly-count {
    color: var(--st-panel-ink);
    font-family: var(--st-font);
    font-size: clamp(2.1rem, 4.4vw, 2.7rem);
    font-weight: 850;
    font-stretch: 125%;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.poly-unit {
    color: var(--st-panel-muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
}
.poly-sounds.st-seg { display: flex; }
.poly-sounds.st-seg > button {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding: 0 0.3rem;
    font-size: 0.82rem;
}
.poly-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    padding: 0.8rem;
    border: 1.5px dashed #4A4F56;
    border-radius: 10px;
    background: transparent;
    color: var(--st-panel-muted);
    font: inherit;
    font-family: var(--st-font);
    font-size: 0.98rem;
    font-weight: 750;
    font-stretch: 108%;
    cursor: pointer;
}
.poly-add::before {
    content: "+";
    margin-inline-end: 0.45rem;
    color: var(--poly-c2);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
}
.poly-add:hover { border-color: var(--poly-c2); color: var(--st-panel-ink); }

/* ── controls row ────────────────────────────────────────────────────── */
.metro-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem 1rem;
    margin-top: clamp(1.1rem, 2.4vw, 1.5rem);
    padding-top: clamp(1.1rem, 2.4vw, 1.4rem);
    border-top: 1px solid var(--st-line);
}
.metro-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-width: 8.6rem;
    min-height: 3.6rem;
    padding: 0 1.4rem 0 1.15rem;
    border: 0;
    border-radius: 12px;
    background: var(--st-808-orange);
    color: #17191B;
    font: inherit;
    font-family: var(--st-font);
    font-size: 1.2rem;
    font-weight: 800;
    font-stretch: 112%;
    cursor: pointer;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.metro-play::before {             /* play triangle; a square while playing */
    content: "";
    width: 0;
    height: 0;
    border-inline-start: 14px solid currentColor;
    border-block: 8.5px solid transparent;
}
.metro-play:hover { filter: brightness(1.06); }
.metro-play[aria-pressed="true"] {
    background: var(--st-808-red);
    color: #fff;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
}
.metro-play[aria-pressed="true"]::before {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 2px;
    background: currentColor;
}
.metro-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.metro-field-label {
    color: var(--st-muted);
    font-size: 0.8rem;
    font-weight: 650;
    font-stretch: 90%;
}
.metro-select {
    min-height: calc(var(--st-target) + 6px);
    padding: 0 2.3rem 0 0.95rem;
    border: 0;
    border-radius: 11px;
    background-color: var(--st-sunk);
    background-image: linear-gradient(45deg, transparent 50%, var(--st-muted) 50%),
        linear-gradient(135deg, var(--st-muted) 50%, transparent 50%);
    background-position: right 1.05rem center, right 0.75rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--st-ink);
    font: inherit;
    font-family: var(--st-font);
    font-size: 1rem;
    font-weight: 750;
    font-stretch: 105%;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.metro-select option { background: #1A1C1F; color: #ECEAE3; }
.metro-select:disabled { opacity: 0.4; cursor: default; }
.metro .st-seg > button { font-variant-numeric: tabular-nums; }
.metro-scope { height: 4.25rem; margin-top: 1.2rem; }

/* ── genre tempos ────────────────────────────────────────────────────── */
.metro-h {
    margin: 0 0 0.85rem;
    color: var(--st-ink);
    font-family: var(--st-font);
    font-size: 1.05rem;
    font-weight: 750;
    font-stretch: 108%;
}
.metro-presets.st-pads { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.metro-preset.st-pad { min-width: 0; min-height: 5.4rem; }
.metro-preset .st-pad-name {
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    font-stretch: 122%;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.metro-preset.is-on { background: color-mix(in srgb, var(--st-accent) 20%, var(--st-key)); }
.metro-preset.is-on::before { background: var(--st-accent); box-shadow: 0 0 10px 2px var(--st-accent); }

/* ── small screens ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .metro-presets.st-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .metro-poly { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dial" "side" "layers"; }
    .poly-dial { width: 100%; max-width: 19rem; margin: 0 auto; }
}
@media (max-width: 560px) {
    .metro-head { gap: 0.7rem; }
    .metro-display { --st-display-size: clamp(3.6rem, 19vw, 4.8rem); }
    .metro-tap.st-pad { width: 6.4rem; padding: 0.7rem 0.7rem 0.75rem; }
    .metro-tap .st-pad-meta { font-size: 0.72rem; }
    .metro-nudge { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .metro-fader { grid-column: 1 / -1; order: -1; padding: 0; }
    .metro-step { min-width: 0; }
    .metro .beat-dot { height: 4rem; padding: 0.4rem 0.5rem 0.5rem; border-radius: 8px; }
    .metro .beat-dot::before { top: 7px; right: 7px; width: 7px; height: 7px; }
    .metro-num { font-size: 1.55rem; }
    .metro-legend-hint { margin-inline-start: 0; flex-basis: 100%; }
    .metro-play { flex: 1 1 100%; }
    .metro-field { flex: 1 1 auto; }
    label.metro-field { flex: 0 0 auto; }
    .metro-field--sub { flex: 1 1 100%; order: 2; }
    .metro .st-seg { display: flex; }
    .metro .st-seg > button { flex: 1 1 auto; justify-content: center; padding: 0 0.7rem; }
    .metro-mode .st-seg { flex: 1 1 100%; }
    .metro-mode .st-seg > button { padding: 0 0.45rem; }
    .poly-layers { grid-template-columns: minmax(0, 1fr); }
    .poly-layer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; }
    .poly-layer-head { flex: 1 1 100%; }
    .poly-amount { flex: 0 0 auto; }
    .poly-stepper { grid-template-columns: auto 2.9rem auto; }
    .poly-count { font-size: 2rem; }
    .poly-sounds.st-seg { flex: 1 1 9rem; }
    .metro .poly-sounds.st-seg > button { padding: 0 0.25rem; }
    .poly-add { min-height: 3.2rem; }
}