/* Stopwatch.ca — metronome and tap tempo. Builds on the dark instrument panel in app.css. */

.mt-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:16px;font:700 11px/1 system-ui;letter-spacing:1.4px;text-transform:uppercase;color:var(--pmuted)}
.mt-clock{color:var(--digit);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
[data-state=running] .mt-top .state-dot{color:var(--digit)}

/* ---------- beat lights ---------- */
.mt-lights{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:10px;width:min(100%,calc(var(--cols) * 76px));margin:14px auto 0;justify-items:center}
.mt-lights.dense{gap:8px 6px}
.mt-dot{--pip:34%;appearance:none;display:grid;place-items:center;width:100%;max-width:62px;aspect-ratio:1;padding:0;border-radius:50%;border:3px solid #3a4452;background:var(--panel2);color:var(--pmuted);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background .06s,box-shadow .06s,border-color .06s}
.mt-dot::after{content:"";display:block;width:var(--pip);height:var(--pip);border-radius:50%;background:currentColor}
.mt-dot:hover{border-color:#566274}
.mt-dot.lv0{border-style:dashed;border-color:#3a4452;background:transparent;opacity:.7}
.mt-dot.lv0::after{background:transparent}
.mt-dot.lv1{--pip:30%}
.mt-dot.lv2{--pip:52%;border-color:var(--accent2)}
.mt-dot.lv3{--pip:74%;border-color:var(--accent)}
.mt-dot.on{background:var(--best);border-color:var(--best);color:#0e1116;box-shadow:0 0 22px -2px var(--best)}
.mt-dot.lv2.on,.mt-dot.lv3.on{background:var(--accent);border-color:var(--accent2);color:#fff;box-shadow:0 0 26px -2px var(--accent)}
.mt-dot.lv0.on{background:transparent;border-color:var(--pmuted);box-shadow:none;opacity:1}
.mt-lights.countin .mt-dot.on{background:var(--warn);border-color:var(--warn);color:#0e1116;box-shadow:0 0 22px -2px var(--warn)}
.mt-hint{text-align:center;margin:8px 0 0}

/* ---------- pendulum + dial ---------- */
.mt-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;margin:14px 0 0;align-items:center}
.mt-main>*{min-width:0}
.mt.no-pend .mt-main{grid-template-columns:minmax(0,1fr)}
.mt-visual{background:radial-gradient(120% 140% at 50% 0%,#1a2029 0%,#10141a 55%,#0c0f13 100%);border:1px solid var(--pline);border-radius:16px;padding:14px;display:grid;place-items:center}
.mt-visual svg{width:min(100%,220px);height:auto;display:block}
.mt-body{fill:var(--panel3);stroke:#3a4452;stroke-width:2}
.mt-base{fill:#2a313b}
.mt-rod{stroke:var(--digit);stroke-width:4;stroke-linecap:round}
.mt-weight{fill:var(--accent);stroke:rgba(0,0,0,.35);stroke-width:1.5}
.mt-pivot{fill:var(--accent2);stroke:rgba(0,0,0,.35);stroke-width:1.5}
.mt-arm{transform-box:view-box;transform-origin:100px 176px;transition:transform .3s ease-out}
.mt-arm.run{transition:none}

.mt-dial{display:flex;flex-direction:column;gap:12px}
.mt-bpmrow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.4vw,16px)}
.mt-step{flex:none;width:58px;height:58px;padding:0;border-radius:50%;font-size:30px;line-height:1;display:grid;place-items:center;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.mt-bpmbox{display:flex;flex-direction:column;align-items:center;min-width:0;flex:0 1 auto}
.mt-bpmbox input{width:3.5ch;max-width:100%;padding:0;border:0;border-bottom:2px solid transparent;border-radius:6px;background:transparent;color:var(--digit);text-align:center;font-size:clamp(58px,13vw,96px);font-weight:650;line-height:1.05;letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";-moz-appearance:textfield;appearance:textfield}
.mt-bpmbox input::-webkit-inner-spin-button,.mt-bpmbox input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mt-bpmbox input:hover{border-bottom-color:var(--pline)}
.mt-bpmbox input:focus-visible{outline-offset:4px}
.mt-bpmbox span{font:700 11px/1 system-ui;letter-spacing:1.6px;text-transform:uppercase;color:var(--pmuted)}
.mt-name{margin:0;text-align:center;color:var(--pmuted);line-height:1.25}
.mt-name b{display:block;font-size:22px;letter-spacing:-.2px;color:var(--accent2)}
.mt-name small{display:block;font-size:13px;margin-top:3px}
.mt-slider{width:100%;height:30px;margin:0;accent-color:var(--accent);cursor:pointer}

.mt-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mt-actions .btn{margin:0}
.mt-start{min-height:64px}
.mt-tap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.mt-tap small{font:600 12px/1.2 system-ui;color:var(--pmuted);text-align:center}
.mt-tap.hit,.mt-tap.hit:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(.985)}
.mt-tap.hit small{color:#ffe1d3}
.mt-tapstats{margin:0}
.mt-tapstats b{font-size:23px}
.mt-tapfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:20px}
.mt-tapfoot .note-s{margin:0;flex:1;min-width:0}
.mt-tapfoot .btn{flex:none}
.mt-msg{margin:12px 0 0;padding:9px 12px;border-left:3px solid var(--warn);background:var(--panel2);border-radius:8px;font-size:14px;color:var(--digit)}

/* tap-tempo page: the tap button leads */
.mt[data-focus=tap] .mt-dial{order:-1}
.mt[data-focus=tap] .mt-actions{grid-template-columns:1fr}
.mt[data-focus=tap] .mt-tap{min-height:150px;background:var(--accent);border-color:var(--accent);color:#fff;border-radius:18px}
.mt[data-focus=tap] .mt-tap:hover{background:var(--accent2)}
.mt[data-focus=tap] .mt-tap-t{font-size:clamp(28px,6vw,40px);letter-spacing:-.5px}
.mt[data-focus=tap] .mt-tap small{color:#ffe1d3;font-size:14px}
.mt[data-focus=tap] .mt-tap.hit{background:#fff;border-color:#fff;color:var(--accent)}
.mt[data-focus=tap] .mt-tap.hit small{color:var(--accent)}
.mt[data-focus=tap] .mt-start{min-height:52px}

/* ---------- options ---------- */
.mt .opt select{min-height:42px}
.mt .opt input[type=number]{min-height:42px}
.mt .seg button{font-size:12.5px;padding:10px 2px;white-space:nowrap;min-height:38px}
.mt .opt output{color:var(--digit);letter-spacing:0;text-transform:none;margin-left:6px;font-variant-numeric:tabular-nums}
.mt .grp .opt .btn.sm{width:100%}

@media (max-width:720px){
  .mt-main{grid-template-columns:minmax(0,1fr);gap:14px}
  .mt-dial{order:-1}
  .mt-visual svg{width:min(100%,170px)}
  .mt-visual{padding:10px}
}
@media (max-width:420px){
  .mt-step{width:52px;height:52px;font-size:27px}
  .mt-lights{gap:8px}
  .mt .seg button{font-size:12px}
  .mt[data-focus=tap] .mt-tap{min-height:130px}
}
@media (prefers-reduced-motion:reduce){
  .mt-arm{transition:none}
}

/* in an embedded frame: no keyboard hints, tighter spacing */
body.emb-tool .mt .kbd{display:none}
body.emb-tool .mt-visual svg{width:min(100%,180px)}