/* BPM Finder — page-specific styles. Reuses variables from styles.css. */

.bpm-head{padding-bottom:8px}
.bpm-head h1{margin:0}

.tool{padding:clamp(16px,2.4vw,24px)}

/* input-mode tabs */
.modes{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:0 0 18px;padding:6px;border-radius:12px;background:var(--well);
  border:1px solid var(--line);
}
.mode{
  flex:1 1 0;min-width:120px;min-height:44px;padding:0 12px;
  border:1px solid transparent;background:transparent;border-radius:9px;
  font:inherit;font-size:15px;font-weight:600;color:var(--ink-2);cursor:pointer;
  white-space:nowrap;
}
.mode:hover{background:#fff}
.mode.is-on{background:#fff;border-color:var(--line-2);color:var(--ink);box-shadow:0 1px 2px rgba(16,21,28,.06)}

.pane{padding:2px 0 0}

/* tap */
.tapbtn{
  display:block;width:100%;min-height:clamp(120px,26vw,180px);
  border:2px dashed var(--line-2);border-radius:var(--radius);
  background:var(--well);color:var(--ink);font:inherit;font-size:clamp(17px,2.2vw,21px);
  font-weight:700;cursor:pointer;transition:border-color .12s,background .12s,transform .05s;
  -webkit-tap-highlight-color:transparent;
}
.tapbtn:hover{border-color:var(--accent);background:var(--accent-soft)}
.tapbtn:active{transform:scale(.99);border-color:var(--accent);background:var(--accent-soft)}
.tapbtn.is-live{border-color:var(--accent);background:var(--accent-soft)}

#tapreset{margin-top:12px}

.btn-mic{width:100%;min-height:clamp(90px,20vw,140px);font-size:clamp(16px,2vw,19px);font-weight:700}
.btn-mic.is-live{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* results */
.tool .results{margin-top:22px}
.score{
  display:flex;align-items:baseline;gap:clamp(14px,3vw,26px);flex-wrap:wrap;
  padding:6px 0 2px;
}
.bpm{display:flex;align-items:baseline;gap:8px;line-height:1}
.bpm span{
  font-size:clamp(48px,12vw,76px);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.bpm small{font-size:clamp(14px,2.4vw,18px);font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.tempos{font-size:clamp(14px,2.2vw,16px);color:var(--ink-3);font-variant-numeric:tabular-nums}

.facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin:18px 0 0;padding:0;
}
.facts > div{
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--well);
  min-width:0;
}
.facts dt{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px}
.facts dd{margin:0;font-size:clamp(15px,2.4vw,18px);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}

.tool .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:18px}
.tool .actions .btn-primary{grid-column:auto}
.tool .actions .btn{min-height:48px;font-size:15px;font-weight:600}
.tool .actions .btn:disabled{opacity:.45;cursor:not-allowed}

#resultMeta{margin-top:10px}

/* keyboard/tap hint on small screens */
@media (max-width:560px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mode{min-width:0;flex:1 1 30%;font-size:14px;padding:0 6px}
  .tool .actions{grid-template-columns:1fr}
  .bpm span{font-size:clamp(44px,15vw,64px)}
}