/* clean-audio: recording check, waveform with the noise sample, noise sample fields, sliders, warnings and the comparison player. */
.ca-check { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ca-notes { margin: var(--matrix-space-8) 0 0; padding-left: 1.2em; }
.ca-notes:empty { display: none; }
.ca-notes li { margin-top: var(--matrix-space-4); }
.ca-wave { display: block; width: 100%; height: 96px; margin-top: var(--matrix-space-12); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); cursor: crosshair; touch-action: none; }
.ca-wave[hidden] { display: none; }
.ca-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); }
.ca-field { display: grid; gap: var(--matrix-space-8); min-width: 0; }
.ca-field label { font-weight: 600; }
.ca-field--buttons { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8); align-self: end; }
.ca-with-unit { display: flex; align-items: center; gap: var(--matrix-space-8); }
.ca-with-unit input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; }
.matrix-ui .ca-num { font-family: var(--matrix-font-mono); }
.ca-slider-row { display: grid; grid-template-columns: minmax(9em, auto) minmax(0, 1fr) 4em; align-items: center; gap: var(--matrix-space-8) var(--matrix-space-12); margin-top: var(--matrix-space-8); }
.matrix-ui .ca-slider { width: 100%; min-width: 0; margin: 0; accent-color: var(--matrix-brand); }
.ca-value { font-variant-numeric: tabular-nums; text-align: right; }
.ca-note, .ca-error { margin: var(--matrix-space-8) 0 0; font-size: var(--matrix-type-caption); }
.ca-error:empty, .ca-note:empty { display: none; }
.ca-warning { margin: var(--matrix-space-8) 0 0; padding: var(--matrix-space-8) var(--matrix-space-12); border-radius: var(--matrix-radius-control); background: var(--matrix-warning-background); color: var(--matrix-warning); }
.ca-warning[hidden] { display: none; }
.ca-reset { margin-top: var(--matrix-space-12); }
.ca-compare { margin-top: var(--matrix-space-12); }
.ca-listen { display: flex; flex-wrap: wrap; gap: var(--matrix-space-4) var(--matrix-space-16); }
.ca-transport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--matrix-space-12); margin-top: var(--matrix-space-8); }
.ca-time { font-family: var(--matrix-font-mono); font-size: var(--matrix-type-caption); white-space: nowrap; }
@media (max-width: 480px) {
  .ca-slider-row { grid-template-columns: minmax(0, 1fr) 4em; }
  .ca-slider-row label { grid-column: 1 / -1; }
  .ca-transport { grid-template-columns: auto minmax(0, 1fr); }
  .ca-time { grid-column: 1 / -1; }
}
/* 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),
#result .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,
#result .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,
#result .option-row:has(> input:first-child + label:last-child) > label { flex: 1 1 auto; min-width: 0; }