Improve markup and styling consistency

- Extract 14+ repeated inline checkbox label styles into .checkbox-label class
- Move inline font-size:13px from ~15 summary elements into CSS rule
- Add textarea to global input styling rule for consistent theming
- Remove redundant .section-group > summary duplicate styles
- Simplify padding:10px 10px to padding:10px
- Add left/right safe-area insets for landscape notch devices
- Extend touch target media query to cover range inputs and checkboxes
- Extract stereo indicator color into .indicator-ok CSS class
- Remove redundant inline styles on heatmap labels (match base label rule)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: lifeart

index.html

@@ -47,15 +47,15 @@ <h1>Echoscope — Browser Sonar</h1>
         <span class="small">Mic</span>
         <canvas id="levelMeter" width="200" height="16" role="img" aria-label="Audio input level meter"></canvas>
         <span class="small" id="levelDb"></span>
-        <span id="stereoIndicator" class="small" style="display:none; color:#4caf50;"></span>
+        <span id="stereoIndicator" class="small indicator-ok" style="display:none;"></span>
       </div>
 
       <p class="hint warn">
         Run on <b>https</b> (or localhost). Keep volume low to avoid feedback. On iPhone, tap buttons to start/resume audio.
       </p>
 
       <details id="quickSetup" class="section-group" open>
-        <summary style="font-size:13px">Quick setup</summary>
+        <summary>Quick setup</summary>
 
       <div class="row">
         <div>
@@ -92,7 +92,7 @@ <h1>Echoscope — Browser Sonar</h1>
           </select>
         </div>
         <div>
-          <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;">
+          <label class="checkbox-label">
             <input id="presetApplyScan" type="checkbox" title="Also apply recommended scan parameters when a laptop preset is selected.">
             Also apply scan settings
           </label>
@@ -101,7 +101,7 @@ <h1>Echoscope — Browser Sonar</h1>
       <p class="hint">Presets set speaker spacing and mic position for known devices. Your selection is remembered across sessions.</p>
 
       <details class="section-group" style="margin-top:10px">
-        <summary style="font-size:13px">Scan parameters</summary>
+        <summary>Scan parameters</summary>
 
       <div class="row" style="margin-top:10px">
         <div>
@@ -146,7 +146,7 @@ <h1>Echoscope — Browser Sonar</h1>
       </details>
 
       <details id="probeSettings" class="section-group" style="margin-top:10px">
-        <summary style="font-size:13px">Probe parameters</summary>
+        <summary>Probe parameters</summary>
         <p class="hint" style="margin:6px 0 0">Tune probe parameters only when you need higher quality or speed.</p>
 
       <div id="chirpBox" style="margin-top:10px">
@@ -327,13 +327,13 @@ <h1>Echoscope — Browser Sonar</h1>
         </div>
         <div class="row" style="margin-top:8px">
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;">
+            <label class="checkbox-label">
               <input id="multiplexUseCalibrated" type="checkbox" checked title="Use carrier set selected by prior calibration if available.">
               Use calibrated carriers
             </label>
           </div>
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;">
+            <label class="checkbox-label">
               <input id="multiplexFallbackToChirp" type="checkbox" checked title="Fallback to chirp probe when multiplex confidence is too low.">
               Fallback to chirp on low confidence
             </label>
@@ -344,7 +344,7 @@ <h1>Echoscope — Browser Sonar</h1>
       </details>
 
       <details class="section-group" style="margin-top:10px">
-        <summary style="font-size:13px">Advanced</summary>
+        <summary>Advanced</summary>
       <div class="row" style="margin-top:10px">
         <div>
           <label for="spacing" title="Distance between L/R speakers. Steering delay &amp; TDOA gating depend on this. Must be > 0.02 m.">Speaker spacing d (m)</label>
@@ -369,13 +369,13 @@ <h1>Echoscope — Browser Sonar</h1>
       </details>
 
       <details id="expertSettings" class="section-group" style="margin-top:10px">
-        <summary style="font-size:13px">Expert scan &amp; tracking</summary>
+        <summary>Expert scan &amp; tracking</summary>
 
       <details style="margin-top:10px">
-        <summary style="font-size:13px">Microphone spectrogram</summary>
+        <summary>Microphone spectrogram</summary>
         <div class="row" style="margin-top:10px">
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;">
+            <label class="checkbox-label">
               <input id="spectrogramEnabled" type="checkbox" checked title="Enable real-time microphone spectrogram view.">
               Enable spectrogram
             </label>
@@ -404,7 +404,7 @@ <h1>Echoscope — Browser Sonar</h1>
       </details>
 
       <details style="margin-top:10px">
-        <summary style="font-size:13px">Advanced scan settings</summary>
+        <summary>Advanced scan settings</summary>
         <div class="row" style="margin-top:10px">
           <div>
             <label for="strengthGate" title="Min correlation strength to report target. 0-1. Lower = more sensitive but noisier.">Min strength gate</label>
@@ -419,7 +419,7 @@ <h1>Echoscope — Browser Sonar</h1>
             <input id="cfarPfa" type="number" step="0.0005" min="0.000001" max="0.5" value="0.001" title="Cell-averaging CFAR false-alarm probability used for detection thresholding.">
           </div>
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;">
+            <label class="checkbox-label">
               <input id="scanClutterOn" type="checkbox" checked title="Enable static clutter suppression across scan frames.">
               Suppress static reflections
             </label>
@@ -465,7 +465,7 @@ <h1>Echoscope — Browser Sonar</h1>
             <input id="continuityBins" type="number" step="1" min="1" max="64" value="8" title="Maximum allowed peak-bin mismatch for continuity checks.">
           </div>
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;" title="Enable adaptive auto-quality with hysteresis.">
+            <label class="checkbox-label" title="Enable adaptive auto-quality with hysteresis.">
               <input id="adaptiveQualityOn" type="checkbox" checked title="Automatically switch quality mode based on signal conditions.">
               Adaptive auto quality
             </label>
@@ -478,7 +478,7 @@ <h1>Echoscope — Browser Sonar</h1>
 
         <div class="row" style="margin-top:10px">
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;" title="Back off subtraction when profile collapses too much.">
+            <label class="checkbox-label" title="Back off subtraction when profile collapses too much.">
               <input id="subtractionBackoffOn" type="checkbox" checked title="Reduce subtraction automatically when profile collapse is detected.">
               Subtraction self-limiting
             </label>
@@ -495,7 +495,7 @@ <h1>Echoscope — Browser Sonar</h1>
 
         <div class="row" style="margin-top:10px">
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;" title="Use Kalman-estimated per-bin noise floor during scanning.">
+            <label class="checkbox-label" title="Use Kalman-estimated per-bin noise floor during scanning.">
               <input id="noiseKalmanEnabled" type="checkbox" checked title="Enable per-bin noise-floor Kalman subtraction.">
               Noise-floor Kalman
             </label>
@@ -513,7 +513,7 @@ <h1>Echoscope — Browser Sonar</h1>
             <input id="noiseKalmanStrength" type="number" step="0.05" min="0" max="1.5" value="0.55" title="Strength of noise-floor subtraction.">
           </div>
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;" title="Freeze Kalman floor updates on confident detections to avoid target swallowing.">
+            <label class="checkbox-label" title="Freeze Kalman floor updates on confident detections to avoid target swallowing.">
               <input id="noiseKalmanFreezeHighConf" type="checkbox" checked title="Freeze noise-floor update when confidence is high.">
               Freeze on high confidence
             </label>
@@ -534,7 +534,7 @@ <h1>Echoscope — Browser Sonar</h1>
 
         <div class="row" style="margin-top:10px">
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;" title="Attenuate near-field bins where laptop display multipath often dominates.">
+            <label class="checkbox-label" title="Attenuate near-field bins where laptop display multipath often dominates.">
               <input id="displayBlankingOn" type="checkbox" title="Enable near-field attenuation window to suppress display-related reflections.">
               Display reflection blanking
             </label>
@@ -587,10 +587,10 @@ <h1>Echoscope — Browser Sonar</h1>
       </div>
 
       <details style="margin-top:10px">
-        <summary style="font-size:13px">Virtual array (SAFT/DAS)</summary>
+        <summary>Virtual array (SAFT/DAS)</summary>
         <div class="row" style="margin-top:10px">
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;" title="Coherently combine neighboring steering angles to synthesize a larger aperture.">
+            <label class="checkbox-label" title="Coherently combine neighboring steering angles to synthesize a larger aperture.">
               <input id="vaEnabled" type="checkbox" title="Enable synthetic aperture focusing by combining neighboring angle rows.">
               Enable SAFT/DAS
             </label>
@@ -619,7 +619,7 @@ <h1>Echoscope — Browser Sonar</h1>
         <div class="pill"><span id="bestReadout">Best: &#x2014;</span></div>
         <div class="pill"><span id="dirReadout">Direction: &#x2014;</span></div>
         <div class="pill" id="pingStats" style="display:none"></div>
-        <label style="display:flex; align-items:center; gap:8px; margin:0;">
+        <label class="checkbox-label">
           <input id="showTrace" type="checkbox" checked title="Overlay current best-target trajectory on the heatmap/geometry views.">
           Show best-target trace
         </label>
@@ -632,18 +632,18 @@ <h1>Echoscope — Browser Sonar</h1>
       <!-- Calibration -->
       <p class="hint">Calibration measures speaker-to-mic distances to lock direct-path timing and improve range accuracy.</p>
       <div class="row" style="justify-content:space-between">
-        <label style="display:flex; align-items:center; gap:8px; margin:0;">
+        <label class="checkbox-label">
           <input id="useCalib" type="checkbox" checked title="Use calibration data to constrain direct-path search and reduce ambiguity.">
           Use calibration to lock direct-path search
         </label>
-        <label style="display:flex; align-items:center; gap:8px; margin:0;">
+        <label class="checkbox-label">
           <input id="useMultiband" type="checkbox" checked title="Use multiple frequency bands during calibration for more robust lock.">
           Multiband calibration
         </label>
       </div>
 
       <details style="margin-top:10px">
-        <summary style="font-size:13px">Advanced calibration settings</summary>
+        <summary>Advanced calibration settings</summary>
         <div class="row" style="margin-top:10px">
           <div>
             <label for="calRepeats" title="Independent L/R measurement pairs. 1-9. More = more robust.">Calibration repeats (N)</label>
@@ -662,13 +662,13 @@ <h1>Echoscope — Browser Sonar</h1>
             <input id="envBaselineStrength" type="number" step="0.05" min="0" max="1.2" value="0.55" title="Strength of environmental baseline subtraction.">
           </div>
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;">
+            <label class="checkbox-label">
               <input id="useEnvBaseline" type="checkbox" checked title="Capture ambient baseline and subtract static room reflections during calibration.">
               Use env baseline
             </label>
           </div>
           <div>
-            <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;" title="Also apply Kalman noise-floor filtering while collecting calibration baseline pings.">
+            <label class="checkbox-label" title="Also apply Kalman noise-floor filtering while collecting calibration baseline pings.">
               <input id="noiseKalmanUseInCalibration" type="checkbox" title="Enable Kalman filtering during baseline calibration pings.">
               Kalman in calibration
             </label>
@@ -677,7 +677,7 @@ <h1>Echoscope — Browser Sonar</h1>
       </details>
 
       <details id="diagnostics" class="section-group" style="margin-top:12px;">
-        <summary style="font-size:13px">Diagnostics</summary>
+        <summary>Diagnostics</summary>
 
       <details id="sanityDetails" style="margin-top:12px;">
         <summary>Calibration sanity view</summary>
@@ -700,7 +700,7 @@ <h1>Echoscope — Browser Sonar</h1>
       </details>
 
       <details id="peerSection" style="margin-top:12px;">
-        <summary style="font-size:13px">Network / Peers</summary>
+        <summary>Network / Peers</summary>
         <p class="hint">Connect two devices via WebRTC. One creates an offer, the other accepts.</p>
 
         <div class="row" style="margin-top:8px">
@@ -710,7 +710,7 @@ <h1>Echoscope — Browser Sonar</h1>
         </div>
 
         <div class="row" style="margin-top:8px; align-items:flex-end;">
-          <label style="display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:#bdbdbd;" title="Use connected peer microphones as additional channels during ping/scan.">
+          <label class="checkbox-label" title="Use connected peer microphones as additional channels during ping/scan.">
             <input id="distributedEnabled" type="checkbox">
             Use remote captures in ping/scan
           </label>
@@ -728,7 +728,7 @@ <h1>Echoscope — Browser Sonar</h1>
 
         <div id="peerSignalBox" style="display:none; margin-top:10px;">
           <label id="peerSignalLabel" for="peerSignalText">Signal:</label>
-          <textarea id="peerSignalText" class="mono" rows="3" title="Paste incoming signaling payload here, or copy the generated payload to send to another device." style="width:100%; font-size:11px; background:#111; color:#eee; border:1px solid #333; border-radius:6px; padding:6px; resize:vertical;"></textarea>
+          <textarea id="peerSignalText" class="mono" rows="3" title="Paste incoming signaling payload here, or copy the generated payload to send to another device."></textarea>
           <div class="row" style="margin-top:6px">
             <button id="btnPeerCopySignal" title="Copy the current signaling payload to clipboard.">Copy</button>
             <button id="btnPeerApplySignal" style="display:none" title="Apply the pasted signaling payload and continue the handshake.">Apply</button>
@@ -767,13 +767,13 @@ <h1>Echoscope — Browser Sonar</h1>
       </div>
 
       <details id="heatmapDetails" open style="margin-top:10px">
-        <summary style="font-size:13px">Angle x Range heatmap</summary>
+        <summary>Angle x Range heatmap</summary>
         <p class="hint" style="margin:4px 0 8px">
           Main scan view: bright spots show stronger reflections by angle and range.
         </p>
         <canvas id="heatmap" width="1000" height="520" role="img" aria-label="Angle versus range heatmap showing echo strength"></canvas>
         <div class="row" style="margin-top:6px;display:flex;gap:12px;align-items:center;flex-wrap:wrap">
-          <label style="font-size:12px;color:#bdbdbd">Colormap
+          <label>Colormap
             <select id="colormapSelect" title="Choose color mapping for heatmap intensity rendering.">
               <option value="inferno" selected>Inferno</option>
               <option value="viridis">Viridis</option>
@@ -783,22 +783,22 @@ <h1>Echoscope — Browser Sonar</h1>
           <label style="font-size:12px;color:#bdbdbd;display:flex;align-items:center;gap:4px">
             <input id="heatmapDbScaleOn" type="checkbox" title="Display heatmap values on logarithmic dB scale."> dB scale
           </label>
-          <label style="font-size:12px;color:#bdbdbd">Dynamic range (dB)
+          <label>Dynamic range (dB)
             <input id="heatmapDynamicRangeDb" type="number" step="5" min="10" max="120" value="40" title="Dynamic range window in dB; lower values increase contrast for weak echoes." style="width:50px">
           </label>
         </div>
       </details>
 
       <details id="profileDetails" style="margin-top:10px">
-        <summary style="font-size:13px">Range profile</summary>
+        <summary>Range profile</summary>
         <p class="hint" style="margin:4px 0 8px">
           Correlation vs range for the latest ping/scan row.
         </p>
         <canvas id="profile" width="1000" height="260" role="img" aria-label="Correlation profile showing echo strength vs range"></canvas>
       </details>
 
       <details id="micSpectrogramDetails" style="margin-top:10px">
-        <summary style="font-size:13px">Microphone spectrogram</summary>
+        <summary>Microphone spectrogram</summary>
         <p class="hint" style="margin:4px 0 8px">
           Real-time STFT waterfall of microphone input. After successful calibration it shows filtered (noise-floor suppressed) spectrum.
         </p>
@@ -809,13 +809,13 @@ <h1>Echoscope — Browser Sonar</h1>
       </details>
 
       <details id="geometryDetails" style="margin-top:10px">
-        <summary style="font-size:13px">Geometry view</summary>
+        <summary>Geometry view</summary>
         <p class="hint" style="margin:4px 0 8px">
           Device layout and target position estimate in top view.
         </p>
         <canvas id="geometry" width="1000" height="280" role="img" aria-label="Geometry view showing speaker and microphone positions"></canvas>
         <div class="row" style="margin-top:8px">
-          <label style="display:flex; align-items:center; gap:8px; margin:0;">
+          <label class="checkbox-label">
             <input id="geomWizardOn" type="checkbox" title="Enable interactive geometry editing by dragging handles on the geometry plot.">
             Geometry wizard
           </label>