Move the presets under Delay and give them a heading

They sat between Match and Time as three bare buttons, above the two
settings they set. Now they follow Delay, after the numbers they are a
shortcut for, with a "Preset time limits" heading and "Quickly pick a
setting." — the same heading-and-description shape every other row in the
sheet already has.

The row stacks at every width rather than only under the .row--wide
breakpoint: three buttons wide enough to read "3m / 15s" can't share a
line with a label on any phone.

The buttons themselves are untouched, and are still found by class rather
than position, so the highlight logic came along unchanged — checked that
opening the sheet lights the preset matching the current numbers,
stepping the delay off it clears every highlight, and stepping back
relights it.

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

README.md

@@ -127,10 +127,10 @@ score down to fit.
 
 ## Settings
 
-At the top of the sheet are three presets — **2m / 12s**, **3m / 12s** and
+Under **Delay** are three presets — **2m / 12s**, **3m / 12s** and **3m / 15s**.
-**3m / 15s**. Tapping one jumps both timers there and lights it up. Change the
+Tapping one jumps both timers there and lights it up. Change the time or delay by
-time or delay by hand and the highlight goes out; land back on a preset's
+hand and the highlight goes out; land back on a preset's numbers and it comes
-numbers and it comes back on.
+back on.
 
 | Setting | Range | Default |
 | --- | --- | --- |

public_html/index.html

@@ -248,7 +248,10 @@
     .row--wide .val{min-width:46px}
   }
 
-  .row--presets{gap:11px}
+  /* three buttons wide enough to read can't share a line with a label, so the
+     row stacks at every width rather than only under the .row--wide breakpoint */
+  .row--presets{flex-direction:column;align-items:stretch;gap:12px}
+  .presets{display:flex;gap:11px}
   .preset{
     flex:1;
     padding:13px 6px;
@@ -422,12 +425,6 @@
     </div>
   </div>
 
-  <div class="row row--presets">
-    <button class="preset" data-base="120000" data-preset-delay="12000" aria-pressed="false">2m / 12s</button>
-    <button class="preset" data-base="180000" data-preset-delay="12000" aria-pressed="false">3m / 12s</button>
-    <button class="preset" data-base="180000" data-preset-delay="15000" aria-pressed="false">3m / 15s</button>
-  </div>
-
   <div class="row row--wide">
     <div>
       <h2>Time</h2>
@@ -455,6 +452,18 @@
     </div>
   </div>
 
+  <div class="row row--presets">
+    <div>
+      <h2>Preset time limits</h2>
+      <p>Quickly pick a setting.</p>
+    </div>
+    <div class="presets">
+      <button class="preset" data-base="120000" data-preset-delay="12000" aria-pressed="false">2m / 12s</button>
+      <button class="preset" data-base="180000" data-preset-delay="12000" aria-pressed="false">3m / 12s</button>
+      <button class="preset" data-base="180000" data-preset-delay="15000" aria-pressed="false">3m / 15s</button>
+    </div>
+  </div>
+
   <div class="row">
     <div>
       <h2>Colour</h2>

public_html/sw.js

@@ -1,5 +1,5 @@
 /* Cache-first: once installed the clock never touches the network again. */
-const CACHE = "bgclock-v12";
+const CACHE = "bgclock-v13";
 const FILES = [
   "./",
   "./index.html",