/* trim-audio: waveform that takes the selection by drag or click, range sliders, time and fade fields, bit depth, players. */
.ta-wave { display: block; width: 100%; height: 96px; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.ta-wave[hidden] { display: none; }
/* a drag across the waveform selects, so a touch on it does not scroll the page */
.ta-wave:not([hidden]) { cursor: crosshair; touch-action: none; }
.ta-hint { margin: var(--matrix-space-4) 0 0; font-size: var(--matrix-type-caption); }
.ta-wave[hidden] + .ta-hint { display: none; } /* no hint before there is a waveform */
.ta-ranges { display: grid; gap: 2px; margin-top: var(--matrix-space-8); }
.matrix-ui .ta-range { display: block; width: 100%; margin: 0; accent-color: var(--matrix-brand); }
.ta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--matrix-space-12) var(--matrix-space-16); align-items: end; margin-top: var(--matrix-space-12); }
.ta-field { display: grid; gap: var(--matrix-space-8); min-width: 0; }
.ta-field label { font-weight: 600; }
.ta-field--buttons { align-self: end; }
.ta-with-unit { display: flex; align-items: center; gap: var(--matrix-space-8); }
.ta-with-unit input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; }
.matrix-ui .ta-num { font-family: var(--matrix-font-mono); }
.ta-error, .ta-summary { margin: var(--matrix-space-8) 0 0; font-size: var(--matrix-type-caption); }
.ta-error:empty, .ta-summary:empty { display: none; }
.ta-preview { display: flex; align-items: center; gap: var(--matrix-space-12); margin-top: var(--matrix-space-8); }
.ta-time { font-family: var(--matrix-font-mono); font-size: var(--matrix-type-caption); }
/* A radio or checkbox stays beside the first line of its label when a long label wraps on a narrow screen. */
#options .option-row:has(> input:first-child + label:last-child) { flex-wrap: nowrap; align-items: flex-start; }
#options .option-row:has(> input:first-child + label:last-child) > input { flex: none; min-height: 0; margin-top: 3px; } /* tokens.css min-height would push a 20 px control low */
#options .option-row:has(> input:first-child + label:last-child) > label { flex: 1 1 auto; min-width: 0; }