feat: add timed mobile Today breaks (Closes #1036)

frontend/index.html

@@ -1536,8 +1536,30 @@
   <button data-mobile-today-complete type="button" hidden>Done &amp; next</button>
   <div class="small" data-work-session-progress aria-live="polite"></div>
   <button data-mobile-today-toggle data-work-session-timer-toggle type="button">Pause timer</button>
+  <button data-today-break-open type="button">Take break</button>
   <button data-work-session-adjust-plan type="button" hidden>Adjust remaining plan</button>
 </section>
+<div class="today-break-status" role="status" aria-live="polite">
+  <span id="today-break-status" hidden></span>
+  <button id="resume-today-break" type="button" hidden>Resume Today</button>
+</div>
+<dialog class="today-break-sheet" id="today-break-sheet" aria-labelledby="today-break-title">
+  <section class="today-break-panel">
+    <header><div><p class="small muted">Today timer</p><h2 id="today-break-title">Take a timed break</h2></div><button id="cancel-today-break" type="button">Cancel</button></header>
+    <p class="small">Your current item stays selected and tracked time remains paused until you explicitly resume.</p>
+    <div class="today-break-actions" aria-label="Break duration">
+      <button type="button" data-today-break-minutes="5">5 minutes</button>
+      <button type="button" data-today-break-minutes="15">15 minutes</button>
+      <button type="button" data-today-break-minutes="30">30 minutes</button>
+    </div>
+    <form id="today-break-custom-form" class="today-break-custom">
+      <label for="today-break-custom-minutes">Custom minutes</label>
+      <input id="today-break-custom-minutes" type="number" inputmode="numeric" min="1" max="120" step="1" required />
+      <button type="submit">Start break</button>
+      <p id="today-break-error" class="small" role="alert"></p>
+    </form>
+  </section>
+</dialog>
 <dialog class="mobile-queue-sheet" id="mobile-queue-sheet" aria-labelledby="mobile-queue-heading">
   <section class="mobile-queue-panel">
     <header><h2 id="mobile-queue-heading">Work queues</h2><button id="close-mobile-queues" type="button">Close</button></header>
@@ -1632,6 +1654,7 @@
 <script src="static/work-selection.js"></script>
 <script src="static/today-work.js"></script>
 <script src="static/today-timer.js"></script>
+<script src="static/today-break.js"></script>
 <script src="static/today-lock-screen.js"></script>
 <script src="static/today-session-sync.js"></script>
 <script src="static/today-recap.js"></script>