/* Step 5 locked-screen audio test. Builds on today.css and listen.css. */
.at-steps { margin: 0 0 var(--space-4); padding-left: 1.25rem; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
.at-opts { display: flex; flex-direction: column; gap: var(--space-3); }
.at-opt { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin: 0; }
.at-opt legend { padding: 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.at-choice { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; font-size: var(--text-base); }
.at-choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }
.at-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.at-btn {
  min-height: 2.75rem; padding: 0 var(--space-4); border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font: inherit; font-weight: 500; cursor: pointer;
}
.at-btn.at-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse, #17130e); }
.at-now { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3); min-height: 1.5em; overflow-wrap: anywhere; }
.at-list { list-style: decimal; margin: 0 0 var(--space-4); padding-left: 1.5rem; display: flex; flex-direction: column; gap: var(--space-2); }
.at-row { padding: var(--space-2) var(--space-1); cursor: pointer; overflow-wrap: anywhere; }
.at-row.is-current { color: var(--color-primary); }
.at-summary {
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono, monospace); font-size: 0.8rem;
  line-height: 1.5; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); margin: 0; user-select: text; -webkit-user-select: text;
}