fix(clip): typed times belong to their value, and every mark on the player chrome can be seen

TimecodeField drops a draft when the value moves under it (another segment selected, a nudge), so
leaving the field never commits it to another cut; it is invalid only once offered, with a line
under it saying how to type a time. On the always-dark chrome media-scope points every focus ring
at --media-mark and errors at the new --media-danger (a light theme's accent and danger were under
3:1 there). A track whose dragged handle unmounts ends the drag on the pointer's release instead of
locking up; a remove refused while clips are queued leaves no focus to take later; each remove-cut
button names its cut and is a 24px target. DESIGN.md records the media tokens; stale comments fixed.

frontend/src/lib/theme.contract.test.ts

@@ -55,6 +55,21 @@ describe("the media colours", () => {
     const strip = mixHex("#ffffff", media()["media-chrome"]!, 0.1);
     expect(hexContrast(media()["media-mark"]!, strip)).toBeGreaterThanOrEqual(3);
   });
+  // A form on that chrome (the clip panel, `media-scope`) keeps neither the theme's danger nor its
+  // accent for what must be seen: a light theme's are dark (#b91c1c 2.8:1, Slate's accent 2.8:1 on
+  // the chrome). Its error edge and text take the media red, and every focus ring in it — the base
+  // ring and a field's focus edge both read --focus — the media amber. [WCAG 1.4.11, 1.4.3]
+  it("a form on the player chrome says an error and a focus in colours that hold there", () => {
+    expect(hexContrast(media()["media-danger"]!, media()["media-chrome"]!)).toBeGreaterThanOrEqual(
+      4.5,
+    );
+    const at = css.indexOf("@utility media-scope {");
+    const scope = css.slice(at, css.indexOf("\n}", at));
+    expect(scope).toMatch(/--danger:\s*var\(--media-danger\);/);
+    expect(scope).toMatch(/--focus:\s*var\(--media-mark\);/);
+    expect(css).toMatch(/outline: 2px solid var\(--focus, var\(--accent\)\);/);
+    expect(css).toMatch(/--color-focus: var\(--focus, var\(--accent\)\);/);
+  });
 });
 
 it("styles exactly the schemes the app offers", () => {