slim down doc comments, tidy inline notes

src/lib/components/BreakScreen.svelte

@@ -483,7 +483,7 @@
     background: rgba(255, 255, 255, 0.03);
   }
 
-  /* Ripple container - sits behind the ring, overflows the card */
+  /* Ripple container -- sits behind the ring, overflows the card */
   .ripple-container {
     position: absolute;
     inset: 0;

src/lib/components/ColorPicker.svelte

@@ -259,7 +259,7 @@
       </button>
     {/each}
 
-    <!-- Custom toggle swatch - ring shows when picker open OR value is custom -->
+    <!-- Custom toggle swatch -- ring shows when picker open OR value is custom -->
     <button
       type="button"
       class="group flex items-center justify-center min-h-[44px] min-w-[44px] bg-transparent border-none p-0"
@@ -277,7 +277,7 @@
     </button>
   </div>
 
-  <!-- Inline custom picker - slides open/closed -->
+  <!-- Inline custom picker -- slides open/closed -->
   {#if showCustom}
     <div
       class="flex flex-col gap-3 rounded-xl bg-[#0f0f0f] p-3 border border-[#1a1a1a]"

src/lib/components/Dashboard.svelte

@@ -104,7 +104,7 @@
 
   // Gap between ring and button, compensating for CSS transform phantom space.
   // transform: scale() doesn't affect layout, so the 280px box stays full-size
-  // even when visually shrunk - creating phantom space below the visual ring.
+  // even when visually shrunk -- creating phantom space below the visual ring.
   const ringSize = 280;
   const phantomBelow = $derived((ringSize * (1 - ringScale)) / 2);
   const targetGap = $derived(Math.max(16, Math.round((windowH - 400) * 0.05 + 16)));

src/lib/components/MicrobreakOverlay.svelte

@@ -45,7 +45,7 @@
       <path d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
       <circle cx="12" cy="12" r="3"/>
     </svg>
-    <span id="microbreak-msg" class="text-[15px] font-medium text-white">Look away - 20 feet for {timeRemaining}s</span>
+    <span id="microbreak-msg" class="text-[15px] font-medium text-white">Look away -- 20 feet for {timeRemaining}s</span>
   </div>
 
   {#if activity && $config.microbreak_show_activity}

src/lib/components/StatsView.svelte

@@ -88,7 +88,7 @@
     return milestones.find((m) => m > current) ?? null;
   });
 
-  // Chart rendering - 7-day
+  // Chart rendering -- 7-day
   let chartCanvas: HTMLCanvasElement | undefined = $state();
 
   $effect(() => {
@@ -96,7 +96,7 @@
     drawChart(chartCanvas, history);
   });
 
-  // Chart rendering - 30-day
+  // Chart rendering -- 30-day
   let monthChartCanvas: HTMLCanvasElement | undefined = $state();
 
   $effect(() => {
@@ -154,7 +154,7 @@
         ctx.fill();
       }
 
-      // Day label - show every Nth for 30-day
+      // Day label -- show every Nth for 30-day
       if (data.length <= 7 || i % 5 === 0) {
         ctx.fillStyle = "#a8a8a8";
         ctx.font = "10px -apple-system, sans-serif";

src/lib/components/TimeSpinner.svelte

@@ -7,7 +7,7 @@
 
   let { value, onchange, countdownFont = "" }: Props = $props();
 
-  // Local display values - driven by prop normally, overridden during drag/momentum
+  // Local display values -- driven by prop normally, overridden during drag/momentum
   let displayHours = $state(0);
   let displayMinutes = $state(0);
   let isAnimating = $state(false); // true during drag OR momentum
@@ -373,7 +373,7 @@
     border-color: rgba(255, 255, 255, 0.18);
   }
 
-  /* Perspective container - looking into the cylinder from outside */
+  /* Perspective container -- looking into the cylinder from outside */
   .wheel-viewport {
     width: 100%;
     height: 100%;

src/lib/components/TimerRing.svelte

@@ -55,7 +55,7 @@
   aria-label={label}
   aria-valuetext={valueText}
 >
-  <!-- Glow SVG - drawn larger than the container so blur isn't clipped -->
+  <!-- Glow SVG -- drawn larger than the container so blur isn't clipped -->
   <svg
     aria-hidden="true"
     width={viewSize}
@@ -145,7 +145,7 @@
     {/if}
   </svg>
 
-  <!-- Non-glow SVG - exact size, draws the track + crisp ring -->
+  <!-- Non-glow SVG -- exact size, draws the track + crisp ring -->
   <svg
     aria-hidden="true"
     width={size}

src/lib/components/Titlebar.svelte

@@ -9,7 +9,7 @@
   data-tauri-drag-region
   class="group absolute top-0 left-0 right-0 z-50 flex h-10 items-center justify-end pr-3.5 select-none"
 >
-  <!-- Centered app name (decorative - OS window title handles screen readers) -->
+  <!-- Centered app name (decorative -- OS window title handles screen readers) -->
   <span
     aria-hidden="true"
     class="pointer-events-none absolute inset-0 flex items-center justify-center
@@ -61,7 +61,7 @@
       </span>
     </button>
 
-    <!-- Close (red) - rightmost -->
+    <!-- Close (red) -- rightmost -->
     <button
       aria-label="Close"
       class="group/btn relative flex h-[44px] w-[44px] items-center justify-center"