/* Tone generator: the big frequency readout, the logarithmic slider with its
   scale, and the controls in rows. Site tokens only, so dark mode follows. */
.tg-k { margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--muted); }

.tg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.tg-display { display: grid; gap: 2px; min-width: 0; }
.tg-display .tg-k { margin: 0; }
.tg-hz { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 600 clamp(54px, 11vw, 96px)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tg-hz .u { font: 500 20px/1 var(--f-body); color: var(--muted); }
.tg-note { margin: 0; font: 500 16px/1.4 var(--f-mono); color: var(--muted); }
.tg-play { min-width: 172px; }
.tool.is-playing .tg-hz output { color: var(--accent); }

.tg-track { display: grid; gap: 2px; }
.tg-track input[type=range] { width: 100%; height: 30px; margin: 0; }
/* The scale under the slider: --at is the position from 0 to 1. The thumb
   never reaches the very edges, hence the side margins. */
.tg-ticks { position: relative; height: 16px; margin: 0 10px; font: 400 12px/1 var(--f-mono); color: var(--muted); }
.tg-ticks span { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); white-space: nowrap; }
.tg-ticks span:first-child { transform: translateX(-10px); }

.tg-fine { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.tg-hz-field { flex: 0 1 11em; min-width: 9em; }

.tg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px 24px; align-items: start; }
.tg-group { min-width: 0; }
.tg-vol-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.tg-vol-label output { font: 500 14px/1.4 var(--f-mono); color: var(--ink); }
.tg-row input[type=range] { width: 100%; height: 30px; margin: 0; }
.tg-presets { gap: 8px; }

.tg-sweep { gap: 14px; padding-top: 16px; border-top: 1px dashed var(--line); }
.tg-sweep > legend { float: left; padding: 0; font-weight: 600; }
.tg-sweep-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.tg-sweep-fields > label { flex: 1 1 108px; max-width: 160px; }
.tg-sweep-run { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tg-progress { flex: 1 1 200px; }

.tg-status { margin: 0; font-weight: 500; }
.tg-keys kbd { white-space: nowrap; }

@media (max-width: 520px) {
  .tg-play, .tg-sweep-run > button { width: 100%; }
  .tg-sweep-fields > label { max-width: none; }
}