/* /metronome/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.mt-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-head .sub{margin-bottom:1rem}
@media(max-width:520px){.mt-head h1{margin-bottom:0.25rem}.mt-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
@media(min-width:920px){.mt-duo{grid-template-columns:minmax(0,1.3fr) minmax(20rem,.8fr)}}

.mt-stage,.mt-card{padding:1rem;display:grid;gap:0.875rem;align-content:start}
.mt-side{display:grid;gap:1.375rem;align-content:start}
@media(max-width:520px){.mt-stage,.mt-card{padding:0.75rem;gap:0.75rem}}
.mt-stage .k,.mt-card .k{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mt-h{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.mt-stage .chip:focus-visible,.mt-card .chip:focus-visible,.mt-beat:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.mt-tempo{display:grid;gap:0.5rem}
.mt-numrow{display:flex;gap:0.375rem;align-items:stretch}
.mt-step{flex:none;min-width:2.75rem;padding:0.5rem;font-family:var(--mono)}
.mt-num{flex:1;min-width:0;display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:0.625rem;box-shadow:inset 0.1875rem 0 0 var(--signal)}
.mt-num input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:2rem;font-weight:600;padding:0.25rem 0 0.25rem 0.875rem;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.mt-num input:focus{box-shadow:none}
.mt-num:focus-within{border-color:var(--accent);box-shadow:inset 0.1875rem 0 0 var(--signal),0 0 0 3px var(--accent-soft)}
.mt-num input::-webkit-inner-spin-button,.mt-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mt-unit{flex:none;padding-right:0.75rem;font-family:var(--mono);font-size:0.875rem;color:var(--muted)}
@media(max-width:400px){.mt-num input{font-size:1.5rem;padding-left:0.625rem}.mt-step{min-width:2.375rem;padding:0.5rem 0.25rem;font-size:0.8125rem}}
.mt-mark{margin:0;font-family:var(--mono);font-size:0.875rem;font-weight:600;color:var(--ink-2)}
.mt-now{color:var(--accent)}

.mt-playrow{display:flex;flex-wrap:wrap;gap:0.625rem 0.75rem;align-items:center}
.mt-start{flex:none;min-width:7.5rem;height:3rem;font-size:1rem}
.mt-start[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.mt-tap{flex:none;height:3rem}
.mt-vol{flex:1;min-width:8rem;margin:0}
.mt-vol .head{margin-bottom:0.25rem}

.mt-beatbox{display:grid;gap:0.5rem}
.mt-beatshead{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem}
.mt-pos{font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2);white-space:nowrap}
.mt-beats{display:grid;grid-template-columns:repeat(auto-fit,minmax(2.5rem,1fr));gap:0.375rem}
.mt-beats.many{grid-template-columns:repeat(auto-fill,minmax(2.25rem,1fr))}
.mt-beat{height:3.25rem;border-radius:0.5rem;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);font:inherit;font-family:var(--mono);font-weight:600;font-size:0.9375rem;cursor:pointer;position:relative;transition:background-color .06s,transform .06s}
.mt-beat.accent{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0.25rem 0 var(--accent)}
.mt-beat.mute{border-style:dashed;color:var(--muted);background:transparent}
.mt-beat.now{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.mt-beat.now.accent{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.mt-beat.now.silent{background:var(--surface);color:var(--ink);border-color:var(--ink-2)}
@media(prefers-reduced-motion:no-preference){.mt-beat.now{transform:scale(1.04)}}
.mt-legend{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;font-size:0.75rem;color:var(--muted)}
.mt-sw{display:inline-block;width:0.75rem;height:0.75rem;border-radius:0.1875rem;border:1px solid var(--line-2);background:var(--surface-2);margin-left:0.25rem}
.mt-sw.accent{border-color:var(--accent);box-shadow:inset 0 0.1875rem 0 var(--accent)}
.mt-sw.mute{border-style:dashed;background:transparent}

.mt-opt{display:grid;gap:0.375rem}
.mt-opt .chips{display:flex;flex-wrap:wrap;gap:0.375rem}
.mt-custom{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-top:0.25rem}
.mt-custom input{width:4.25rem;font-family:var(--mono)}
.mt-custom select{width:auto;font-family:var(--mono)}
.mt-swing{margin-top:0.25rem}
.mt-swing input:disabled{opacity:.45}
.mt-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
#msg:empty,#trsum:empty{display:none}

.mt-cardhead{display:flex;justify-content:space-between;align-items:center;gap:0.75rem}
.mt-switch{display:inline-flex;align-items:center;gap:0.375rem;font-weight:600;font-size:0.875rem;cursor:pointer}
.mt-switch input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}
.mt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.625rem}
.mt-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mt-grid label{display:grid;gap:0.25rem;min-width:0}
.mt-grid input{font-family:var(--mono);min-width:0}