fix(clip): a time's error line sits in the flow, the remove button off the cut, and every player surface rings amber

- useTimecodeField holds a time field's draft for its caller, which places TimecodeError (role
  alert) in its own flow under the fields' row: it no longer lies over the crop row taking its
  clicks, runs out of the editor's card, or joins the field's <label> name.
- The editor's remove-cut buttons sit in a row under the track at their cut (trackLeft), off the
  cut's grab area, where a press drags it; RangeTrack's adornment slot is gone.
- media-focus re-points --focus to the media amber on the Plex player, the YouTube stage and every
  bg-media-chrome surface; a contract test holds each such class string to media-focus or
  media-scope, the field's focus edge to the focus token, and --color-focus to the inline theme.
- An upload's quota headline says the converted file does not fit, not "Storage full".
- DESIGN.md: the tokens paragraph says what is re-pointed where; the decision row measures all
  three colours on the chrome.

frontend/src/components/ui/TimecodeField.dom.test.tsx

@@ -1,10 +1,11 @@
 // @vitest-environment jsdom
 //
-// The time field: invalid only once a time was offered, said in words under the field, and a draft
-// that never outlives the value it was typed over.
+// The time field: invalid only once a time was offered, said in words on the caller's line, and a
+// draft that never outlives the value it was typed over.
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { TimecodeField } from "./TimecodeField";
+import { TimecodeError, TimecodeField } from "./TimecodeField";
+import { useTimecodeField } from "./useTimecodeField";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -13,25 +14,39 @@ vi.mock("react-i18next", async (importOriginal) => {
 
 afterEach(cleanup);
 
+function Harness({ value, onCommit }: { value: number; onCommit: (s: number) => void }) {
+  const field = useTimecodeField(value, false, onCommit);
+  return (
+    <>
+      <TimecodeField aria-label="In" field={field} errorId="err" />
+      {field.invalid && <TimecodeError id="err" hours={false} />}
+    </>
+  );
+}
+
 const field = () => screen.getByRole("textbox") as HTMLInputElement;
 
 describe("TimecodeField", () => {
   it("is not invalid while a time is still being typed, only once it is offered", () => {
-    render(<TimecodeField aria-label="In" value={10} onCommit={() => {}} />);
+    render(<Harness value={10} onCommit={() => {}} />);
     fireEvent.change(field(), { target: { value: "" } });
     fireEvent.change(field(), { target: { value: "1:" } });
     expect(field().getAttribute("aria-invalid")).toBeNull();
     fireEvent.blur(field());
     expect(field().getAttribute("aria-invalid")).toBe("true");
+    // Once one was offered, the field re-checks as it is typed: the mark goes the moment it reads.
+    fireEvent.change(field(), { target: { value: "1:0" } });
+    expect(field().getAttribute("aria-invalid")).toBeNull();
   });
 
-  it("says in words, under the field and linked to it, how a time is typed", () => {
-    render(<TimecodeField aria-label="In" value={10} onCommit={() => {}} />);
+  it("says in words, read out and linked to the field, how a time is typed", () => {
+    render(<Harness value={10} onCommit={() => {}} />);
     fireEvent.change(field(), { target: { value: "abc" } });
     fireEvent.keyDown(field(), { key: "Enter" });
     const id = field().getAttribute("aria-describedby");
     expect(id).toBeTruthy();
     expect(document.getElementById(id!)?.textContent).toBe("common.timecodeInvalid");
+    expect(screen.getByRole("alert").id).toBe(id);
     fireEvent.change(field(), { target: { value: "0:12" } });
     fireEvent.keyDown(field(), { key: "Enter" });
     expect(field().getAttribute("aria-describedby")).toBeNull();
@@ -39,10 +54,10 @@ describe("TimecodeField", () => {
 
   it("drops a draft when the value moves under it, and never commits it to the new value", () => {
     const onCommit = vi.fn();
-    const { rerender } = render(<TimecodeField aria-label="In" value={10} onCommit={onCommit} />);
+    const { rerender } = render(<Harness value={10} onCommit={onCommit} />);
     fireEvent.change(field(), { target: { value: "0:05" } });
     // Another segment selected under the same field (or a nudge): the field edits a new value now.
-    rerender(<TimecodeField aria-label="In" value={40} onCommit={onCommit} />);
+    rerender(<Harness value={40} onCommit={onCommit} />);
     expect(field().value).toBe("0:40.0");
     fireEvent.blur(field());
     expect(onCommit).not.toHaveBeenCalled();
@@ -50,7 +65,7 @@ describe("TimecodeField", () => {
     fireEvent.change(field(), { target: { value: "x" } });
     fireEvent.blur(field());
     expect(field().getAttribute("aria-invalid")).toBe("true");
-    rerender(<TimecodeField aria-label="In" value={41} onCommit={onCommit} />);
+    rerender(<Harness value={41} onCommit={onCommit} />);
     expect(field().value).toBe("0:41.0");
     expect(field().getAttribute("aria-invalid")).toBeNull();
   });