/* audio-delay.css : audio delay test. Hard-coded colours only inside the .display panel. */
#audio-delay .ad-display { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 20px 16px; flex-wrap: wrap; }
#audio-delay .ad-flash { width: 120px; height: 120px; border-radius: 50%; background: #292524; border: 2px solid #44403c; flex: none; }
#audio-delay .ad-flash[data-on="true"] { background: #ffffff; border-color: #ffffff; box-shadow: 0 0 40px rgba(255, 255, 255, .55); }
#audio-delay .ad-read { min-width: 0; flex: 1 1 180px; max-width: 360px; }
#audio-delay .ad-unit { font-size: .38em; font-weight: 500; color: #a8a29e; margin-left: 4px; }
#audio-delay .ad-display[data-running="true"] { box-shadow: 0 0 0 3px #4ade80 inset; }
#audio-delay .ad-main { margin-top: 14px; }
#audio-delay .ad-go { min-width: 140px; }
#audio-delay .ad-main .chip, #audio-delay .ad-steps .chip { min-height: 44px; }
#audio-delay .ad-slider-wrap { display: block; margin-top: 16px; }
#audio-delay .ad-slider { display: block; width: 100%; margin: 8px 0 0; min-height: 32px; }
#audio-delay .ad-ticks { position: relative; height: 18px; margin: 0 10px; }
#audio-delay .ad-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; white-space: nowrap; }
#audio-delay .ad-ticks span:nth-child(1) { left: 0; transform: none; }
#audio-delay .ad-ticks span:nth-child(2) { left: 37.5%; }
#audio-delay .ad-ticks span:nth-child(3) { left: 68.75%; }
#audio-delay .ad-ticks span:nth-child(4) { right: 0; left: auto; transform: none; }
#audio-delay .ad-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; max-width: 420px; }
#audio-delay .ad-steps .chip { justify-content: center; font-variant-numeric: tabular-nums; }
#audio-delay .ad-vol { margin-top: 14px; }
#audio-delay .ad-vol input { width: 200px; }
#audio-delay [data-loud] { margin: 8px 0 0; }
#audio-delay .ad-reported { margin: 10px 0 0; }
#audio-delay .ad-keys { margin: 8px 0 0; }
@media (max-width: 640px) {
  #audio-delay .ad-display { gap: 14px; }
  #audio-delay .ad-flash { width: 96px; height: 96px; }
  #audio-delay .ad-vol input { width: 160px; }
}
@media (hover: none) { #audio-delay .ad-keys { display: none; } }