@charset "UTF-8";
/* Tone generator: layout for the bench readout, the play key and the note row.
   Everything else comes from tools.css. */
@layer page {

.tone-gen .tone-play { display: grid; gap: .6rem; justify-items: start; min-width: 11rem; }
.tone-gen .tone-big { min-width: 10rem; min-height: 3.2rem; font-size: 1.1rem; }
.tone-gen .tone-readout { display: grid; gap: .25rem; min-width: 12rem; }
.tone-gen .tone-readout .readout-big { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.2rem); }
.tone-gen .tone-readout .readout-unit { font-size: 1rem; font-weight: 620; margin-left: .5em; }

.tone-gen .tone-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .8rem 1rem; margin-bottom: .9rem; }
.tone-gen .tone-sweep-row { align-items: center; margin-bottom: .9rem; }

.tone-gen .tone-notes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .55rem; }
.tone-gen .tone-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .45rem; margin-bottom: 1.4rem; }
.tone-gen .tone-notes .btn { min-height: 2.75rem; font-variant-numeric: tabular-nums; }
.tone-gen .tone-notes .btn[aria-pressed="true"] { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }

.tone-gen .tone-shortcuts { margin-top: 1.1rem; }

/* touch targets: the segmented controls and the buttons are at least 40 px tall */
.tone-gen .seg button, .tone-gen .seg label { min-height: 2.5rem; display: inline-flex; align-items: center; }
.tone-gen .btn { min-height: 2.6rem; }

.tone-gen .meter { margin-bottom: .6rem; }

}