/* Tool-specific layout — main.css handles fonts, colours, body, buttons */


.bpm-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
input#bpm {
  font-family: inherit;
  font-size: clamp(32px, 8vw, 48px);
  width: 160px;
  background: var(--color-input-bg);
  border: 1px dotted var(--color-fg);
  border-radius: 8px;
  color: var(--color-accent);
  padding: 8px 14px;
}
input#bpm:focus { outline: none; border-color: var(--color-accent); }
.bpm-unit { color: var(--color-fg); font-size: clamp(32px, 8vw, 48px); }

.stat-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  border-top: 1px dotted var(--color-fg);
  padding-top: 14px;
  font-size: 16px; color: var(--color-fg);
}
.stat-row b { color: var(--color-fg); }
.stat-row .val { color: var(--color-accent); }

.grid-scroll { overflow-x: auto; }
table.divisions { border-collapse: collapse; width: 100%; margin-bottom: 8px; table-layout: fixed; min-width: 480px; }
table.divisions th:first-child, table.divisions td.divlabel { width: 90px; }
table.divisions th {
  text-align: left; color: var(--color-fg);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0 10px 10px 0;
}
table.divisions td.divlabel {
  color: var(--color-fg); white-space: nowrap; padding: 8px 14px 8px 0;
  border-top: 1px dotted var(--color-muted);
  vertical-align: top;
}
td.cell {
  border-top: 1px dotted var(--color-muted);
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s;
  vertical-align: top;
}
td.cell:hover { background: var(--color-bg-deep); }
td.cell.copied { background: var(--color-bg); }
td.cell .ms { display: block; color: var(--color-fg); }
td.cell .hz { display: block; color: var(--color-fg); }
td.cell.copied .ms { color: var(--color-accent); }

.hint { color: var(--color-fg); }
.hint b { color: var(--color-fg); }