FIX - correct Clock control states

Remove the empty title reservation from World Clock and Timer views. Switch running stopwatch and timer actions to the danger treatment and lock both layout and color behavior with contract tests.

frontend/src/assets/main.css

@@ -4389,6 +4389,9 @@ button {
   overflow-y: auto;
   padding: 0;
 }
+.clock-navbar__empty-inner {
+  height: 0;
+}
 .phone-call-content {
   min-height: 0;
   flex: 1;

frontend/src/views/apps/ClockApp.contract.test.ts

@@ -0,0 +1,31 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const clockView = readFileSync(
+  new URL('./ClockApp.vue', import.meta.url),
+  'utf8',
+)
+const mainCss = readFileSync(
+  new URL('../../assets/main.css', import.meta.url),
+  'utf8',
+)
+
+describe('Clock app controls', () => {
+  it('removes the empty navigation row from world clock and timer titles', () => {
+    expect(clockView).toContain("tab === 'world' || tab === 'timer'")
+    expect(clockView).toContain("'clock-navbar__empty-inner'")
+    expect(mainCss).toMatch(
+      /\.clock-navbar__empty-inner\s*\{[^}]*height:\s*0;/s,
+    )
+  })
+
+  it('uses the danger color while stopwatch and timer controls are running', () => {
+    expect(clockView).toMatch(
+      /clock\.stopwatchStartedAt === null[\s\S]*?positiveActionColors[\s\S]*?: dangerActionColors/,
+    )
+    expect(clockView).toMatch(
+      /clock\.timerStartedAt === null[\s\S]*?positiveActionColors[\s\S]*?: dangerActionColors/,
+    )
+  })
+})

frontend/src/views/apps/ClockApp.vue

@@ -248,6 +248,11 @@ onBeforeUnmount(() => {
       <k-navbar
         v-if="tab !== 'stopwatch'"
         :title="phone.t(`Apps.clock.tabs.${tab}`)"
+        :inner-class="
+          tab === 'world' || tab === 'timer'
+            ? 'clock-navbar__empty-inner'
+            : ''
+        "
         large
         transparent
         class="clock-navbar"
@@ -351,7 +356,11 @@ onBeforeUnmount(() => {
             </k-button>
             <k-button
               rounded
-              :colors="positiveActionColors"
+              :colors="
+                clock.stopwatchStartedAt === null
+                  ? positiveActionColors
+                  : dangerActionColors
+              "
               class="clock-action-button"
               @click="
                 clock.stopwatchStartedAt === null
@@ -460,7 +469,11 @@ onBeforeUnmount(() => {
             </k-button>
             <k-button
               rounded
-              :colors="positiveActionColors"
+              :colors="
+                clock.timerStartedAt === null
+                  ? positiveActionColors
+                  : dangerActionColors
+              "
               class="clock-action-button"
               :disabled="clock.timerStartedAt === null && timerValue <= 0"
               @click="