/* tone-generator.css : tone generator. Hard-coded colours only inside the .display panel. */
#tone-generator .tg-display { padding: 16px 12px 14px; }
#tone-generator .tg-freq { margin: 6px 0 4px; overflow-wrap: anywhere; }
#tone-generator .tg-unit { font-size: .38em; font-weight: 500; color: #a8a29e; margin-left: 4px; }
#tone-generator .tg-note { color: #e7e5e4; }
#tone-generator .tg-display[data-playing="true"] { box-shadow: 0 0 0 3px #4ade80 inset; }
#tone-generator .tg-main { margin-top: 14px; }
#tone-generator .tg-play { min-width: 128px; }
#tone-generator .tg-hz input { width: 128px; font-size: 18px; font-variant-numeric: tabular-nums; }
#tone-generator .tg-slider { display: block; width: 100%; margin: 16px 0 0; min-height: 32px; }
#tone-generator .tg-ticks { position: relative; height: 18px; margin: 0 10px; }
#tone-generator .tg-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; }
#tone-generator .tg-steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
#tone-generator .tg-steps .chip { justify-content: center; min-height: 44px; padding: 6px 2px; font-variant-numeric: tabular-nums; }
#tone-generator .tg-block { margin-top: 14px; }
#tone-generator .tg-label { margin-bottom: 6px; }
#tone-generator .chips .chip { min-height: 44px; }
#tone-generator .tg-vol input { width: 200px; }
#tone-generator .tg-bal input { width: 140px; }
#tone-generator input[type="range"][disabled] { opacity: .4; }
#tone-generator .tg-safety { margin: 6px 0 0; color: var(--body); }
#tone-generator .tg-share { margin-top: 14px; }
#tone-generator .tg-keys { margin: 10px 0 0; }
@media (max-width: 640px) {
  #tone-generator .tg-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #tone-generator .tg-vol input { width: 160px; }
  #tone-generator .tg-hz input { width: 116px; }
}

#tone-generator-more .tg-tabs { margin-bottom: 10px; }
#tone-generator-more .tg-tabs .chip { min-height: 44px; }
#tone-generator-more .tg-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
#tone-generator-more .tg-voice input[type="number"] { width: 110px; }
#tone-generator-more .tg-voice .tg-vnote { min-width: 36px; }
#tone-generator-more .tg-voice .chip { min-height: 44px; min-width: 44px; justify-content: center; }
#tone-generator-more .tg-xvol input { width: 110px; }
#tone-generator-more [data-voices] { margin-bottom: 10px; }
#tone-generator-more .row .chip { min-height: 44px; }
#tone-generator-more .tg-sweep { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
#tone-generator-more .tg-sweep input { width: 110px; }
#tone-generator-more .tg-progress { height: 6px; border-radius: 3px; background: var(--strong); margin-top: 12px; overflow: hidden; }
#tone-generator-more .tg-progress i { display: block; height: 100%; width: 0; background: var(--primary); }
#tone-generator-more [data-sw-play] { margin-left: auto; }