/* Controls for the small tool pages under /tap-tempo/ and /bpm-to-ms/. Builds on blog.css's tokens. */

.tool {
  margin: 0 0 2.5rem;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #151516;
}

.tool-readout {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--vfd);
  font: 500 clamp(2.75rem, 12vw, 4.5rem) / 1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.tool-readout small {
  color: var(--ink-quiet);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tool-note {
  margin: 0 0 1rem;
  color: var(--ink-quiet);
  font: 400 0.85rem/1.5 var(--mono);
}

.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.tool button,
.tool input {
  min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  background: #1f1f21;
  font: 500 0.9rem var(--mono);
}

.tool button {
  padding: 0 1.1rem;
  cursor: pointer;
}

.tool button:hover {
  border-color: var(--ink-quiet);
}

.tool .tool-tap {
  flex: 1 1 12rem;
  min-height: 7rem;
  border-color: var(--orange);
  color: var(--orange);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  touch-action: manipulation;
}

.tool .tool-tap:active {
  background: #2a1a12;
}

.tool label {
  color: var(--ink-quiet);
  font: 500 0.75rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tool input {
  width: 8rem;
  padding: 0 0.75rem;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.tool td,
.tool th {
  font-variant-numeric: tabular-nums;
}