/* metronomo.css — estilos da ferramenta em /metronomo/.
   Namespace .mtr-* para não colidir com .rr-* do estilos.css. */

/* ── Cabeçalho compacto (esta página não tem hero: a ferramenta vem primeiro).
   .rr-h1 e .rr-byline do estilos.css são brancos, feitos pro hero escuro —
   por isso as versões claras vivem aqui. ── */
.mtr-head { margin: 4px 0 16px; }
.mtr-head__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.mtr-head__date { font-size: 12px; color: var(--text-muted); }
/* A pílula outline nasceu branca pro hero escuro — aqui o fundo é claro. */
.mtr-head .rr-pill--outline {
  border-color: var(--border);
  color: var(--text-muted);
}
.mtr-head__title {
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text);
  margin: 0;
  text-wrap: pretty;
}

.mtr-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--text-muted);
}
.mtr-byline img {
  /* o estilos.css tem uma regra global img{width:100%} — sem largura
     explicita o avatar estica e quebra a linha da byline */
  width: 40px; height: 40px; border-radius: 9px;
  flex-shrink: 0; display: block; object-fit: cover;
}
.mtr-byline a { color: var(--text); }

.mtr {
  background: #0f1210;
  border-radius: 12px;
  padding: 26px 22px;
  color: #fff;
}

/* ── Display do BPM ── */
.mtr__display { text-align: center; margin-bottom: 22px; }

.mtr__bpm {
  font-size: clamp(3.2rem, 13vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.mtr__bpm-unit {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
}
.mtr__tempo-name {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #30df47;
  background: rgba(48, 223, 71, 0.1);
  border: 1px solid rgba(48, 223, 71, 0.25);
  border-radius: 99px;
  padding: 4px 12px;
}

/* ── Slider de BPM ── */
.mtr__tempo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.mtr__step {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #2f322e;
  background: #1a1d19;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.mtr__step:hover { background: #232722; border-color: #3f443c; }
.mtr__step:active { transform: scale(0.95); }

.mtr__slider {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: #2a2e28;
  outline: none;
  cursor: pointer;
}
.mtr__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #30df47;
  border: 3px solid #0f1210;
  cursor: pointer;
}
.mtr__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #30df47;
  border: 3px solid #0f1210;
  cursor: pointer;
}

/* ── Dots do compasso ── */
.mtr__beats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  min-height: 46px;
}
.mtr__beat {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #2f322e;
  background: #1a1d19;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7280;
  transition: transform 0.08s ease, background 0.08s ease;
}
.mtr__beat[data-state="accent"] { border-color: #30df47; color: #30df47; }
.mtr__beat[data-state="mute"] { opacity: 0.35; }
.mtr__beat.is-current { background: #30df47; border-color: #30df47; color: #08240f; transform: scale(1.16); }
.mtr__beat[data-state="mute"].is-current { background: #3f443c; border-color: #3f443c; color: #9ca3af; }

@media (prefers-reduced-motion: reduce) {
  .mtr__beat { transition: none; }
  .mtr__beat.is-current { transform: none; }
}

/* ── Transporte ── */
.mtr__transport {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.mtr__play {
  flex: 1;
  height: 54px;
  border: none;
  border-radius: 10px;
  background: #30df47;
  color: #08240f;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.12s ease;
}
.mtr__play:hover { background: #4ae85f; }
.mtr__play.is-playing { background: #f97316; color: #fff; }
.mtr__play.is-playing:hover { background: #fb8c3c; }

.mtr__tap {
  flex-shrink: 0;
  width: 108px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid #2f322e;
  background: #1a1d19;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.12s ease;
}
.mtr__tap:hover { background: #232722; }
.mtr__tap:active { background: #30df47; color: #08240f; }

/* ── Controles inferiores ── */
.mtr__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 16px;
  padding-top: 20px;
  border-top: 1px solid #23261f;
}
.mtr__field { min-width: 0; }
.mtr__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 7px;
}
.mtr__select {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #2f322e;
  background: #1a1d19;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0 10px;
  cursor: pointer;
}
.mtr__volume {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  margin-top: 17px;
  border-radius: 99px;
  background: #2a2e28;
  outline: none;
  cursor: pointer;
}
.mtr__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.mtr__volume::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

.mtr__hint {
  margin: 18px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #6b7280;
  text-align: center;
}
.mtr__hint kbd {
  background: #1a1d19;
  border: 1px solid #2f322e;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 0.72rem;
  color: #9ca3af;
}

.mtr :focus-visible {
  outline: 2px solid #30df47;
  outline-offset: 2px;
}

/* Atalhos de teclado não existem no toque — some com a dica no mobile. */
@media (max-width: 640px) {
  .mtr__hint-keys { display: none; }
}

@media (max-width: 420px) {
  .mtr { padding: 20px 14px; }
  .mtr__beat { width: 34px; height: 34px; font-size: 0.72rem; }
  .mtr__tap { width: 88px; }
  .mtr__controls { grid-template-columns: 1fr; }
}