DeadAir's pause is its breathing room, greyed out while DeadAir is off (#183)

"Pause it leaves" said how DeadAir works, with an "it" to decode, not
what you hear. Greyed out rather than hidden, so the choice can be seen
before DeadAir is turned on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Choose the pause DeadAir leaves where it cuts a silence, from 0.2 to 0.5 seconds, for each show in its settings, on a slider from brisk to relaxed shown while DeadAir is on. It is 0.3 seconds unless you change it, up from 0.2, which made speech sound rushed (#182, #183).
+- Choose the pause DeadAir leaves where it cuts a silence, from 0.2 to 0.5 seconds, for each show in its settings, as its breathing room, on a slider from brisk to relaxed. It is 0.3 seconds unless you change it, up from 0.2, which made speech sound rushed (#182, #183).
 
 ### Changed
 

web/app.css

@@ -1131,6 +1131,8 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
 .dpslide input[type=range]::-moz-range-thumb{width:var(--t);height:var(--t);box-shadow:0 0 0 3px var(--panel),0 1px 4px rgba(0,0,0,.3)}
 .dpslide input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--t)}
 .dpends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim)}
+.dpause:has(input:disabled){opacity:.45}
+.dpslide input[type=range]:disabled{cursor:default}
 .fdl+.ffield{margin-top:18px}
 .flabel{font-size:14px;font-weight:500}
 .cap{margin:0;font-size:12.5px;line-height:1.45;color:var(--dim)}

web/src/dialogs.ts

@@ -531,11 +531,11 @@ function settingsModal(f, newUrl?: string){
       <p class="cap">Cuts the dead air: long silences in ${isGroup?'these shows':'this show'} shrink to a beat, so
       episodes finish sooner and every voice keeps its own pace. Leave it off for stories whose pauses
       are part of the telling.</p>
-      <div class="dpause" id="sdpausebox"${f.deadair?'':' hidden'}>
+      <div class="dpause">
-        <div class="dphead"><label class="flabel" for="sdpause">Pause it leaves</label><output id="sdpauseout" for="sdpause"></output></div>
+        <div class="dphead"><label class="flabel" for="sdpause">Breathing room</label><output id="sdpauseout" for="sdpause"></output></div>
-        <div class="dpslide"><input type="range" id="sdpause" min="200" max="500" step="100" value="${f.deadair_pause||300}"></div>
+        <div class="dpslide"><input type="range" id="sdpause" min="200" max="500" step="100" value="${f.deadair_pause||300}"${f.deadair?'':' disabled'}></div>
         <div class="dpends" aria-hidden="true"><span>Brisk</span><span>Relaxed</span></div>
-        <p class="cap">A longer pause sounds more relaxed and saves less time.</p></div></div>
+        <p class="cap">The silence kept where a long one is cut. More is easier on the ear; less saves more time.</p></div></div>
     ${isGroup?'':`<div class="ffield"><label class="flabel" for="sblockin">Hide items that mention</label>
       <div class="chips" id="sblock">${chipsHTML(f.blocked||[],'sblockin')}</div>
       <p class="cap">Whole words or phrases. Hidden from your list and not downloaded for you, along
@@ -580,8 +580,8 @@ function settingsModal(f, newUrl?: string){
     if(n) n.oninput=()=>{ newest=Math.max(1,Math.floor(Number(n.value))||1); draw(false); };
   };
   for(const r of $$('[name=swin]')) r.onchange=()=>{ mode=r.value; draw(true); };
-  // The pause only matters with DeadAir on, so it is shown only then.
+  // Breathing room only matters with DeadAir on: greyed out, not hidden, so it can be seen beforehand.
-  $('#sdead').onchange=e=>{ $('#sdpausebox').hidden=!e.target.checked; };
+  $('#sdead').onchange=e=>{ $('#sdpause').disabled=!e.target.checked; };
   const pause=$('#sdpause'), pauseText=()=>{ const s=`${pause.value/1000} s`; $('#sdpauseout').textContent=s; pause.setAttribute('aria-valuetext',s); };
   pause.oninput=pauseText; pauseText();
   draw(true);