feat(web): state ramp on status and counts chips

Per amended DESIGN.md §4.2: green --signal-ok for on disk/complete,
amber --signal-warn for wanted-but-missing, violet --status-airing for
downloading, neutral for untracked and waiting. Stars go amber. Words
stay in every chip; verdict chips untouched.

web/src/main.ts

@@ -715,6 +715,37 @@ function chip(text: string, extra?: (chip: HTMLSpanElement) => void): HTMLSpanEl
   return span;
 }
 
+/** §4.2 state ramp on a media-state chip; the word carries, colour accelerates. */
+function mediaStateChip(state: string, wanted: boolean): HTMLSpanElement {
+  return chip(state, (span) => {
+    span.dataset.movieState = state;
+    span.dataset.wanted = String(wanted);
+  });
+}
+
+/** The ramp read off N/M itself: green when full, amber while a gap remains. */
+function countsTone(available: number, wanted: number): "complete" | "partial" | null {
+  if (wanted === 0) {
+    return null;
+  }
+  return available >= wanted ? "complete" : "partial";
+}
+
+function countsChip(
+  label: string,
+  available: number,
+  wanted: number,
+  ariaLabel: string,
+): HTMLSpanElement {
+  return chip(label, (span) => {
+    const tone = countsTone(available, wanted);
+    if (tone !== null) {
+      span.dataset.counts = tone;
+    }
+    span.setAttribute("aria-label", ariaLabel);
+  });
+}
+
 function rowTitle(title: string, year: number | null): HTMLElement {
   const wrap = document.createElement("span");
   wrap.className = "row-id";
@@ -873,11 +904,7 @@ function libraryRow(
   const { item, row, body, chips } = richRow();
   const root = roots.find((candidate) => candidate.id === movie.root_id);
   chips.append(chip(root ? root.audience : `root ${movie.root_id}`));
-  chips.append(
-    chip(movie.state, (span) => {
-      span.dataset.movieState = movie.state;
-    }),
-  );
+  chips.append(mediaStateChip(movie.state, movie.wanted));
   // §5.7 honesty: a waived import is never presented as a clean match
   const waiver = waiverLabel(movie.waiver);
   if (waiver !== null) {
@@ -1412,11 +1439,7 @@ function movieMain(board: HTMLElement, views: HideableView[]): MovieView {
     chipsEl.replaceChildren();
     const root = roots.find((candidate) => candidate.id === movie.root_id);
     chipsEl.append(chip(root ? root.audience : `root ${movie.root_id}`));
-    chipsEl.append(
-      chip(movie.state, (span) => {
-        span.dataset.movieState = movie.state;
-      }),
-    );
+    chipsEl.append(mediaStateChip(movie.state, movie.wanted));
     // §5.7 honesty: a waived import is never presented as a clean match
     const waiver = waiverLabel(movie.waiver);
     if (waiver !== null) {
@@ -2573,12 +2596,12 @@ function seriesRow(
   chips.append(chip(root ? root.audience : `root ${series.root_id}`));
   if (series.wanted_episodes > 0) {
     chips.append(
-      chip(`${series.available_episodes}/${series.wanted_episodes} eps`, (span) => {
-        span.setAttribute(
-          "aria-label",
-          `${series.available_episodes} of ${series.wanted_episodes} wanted episodes on disk`,
-        );
-      }),
+      countsChip(
+        `${series.available_episodes}/${series.wanted_episodes} eps`,
+        series.available_episodes,
+        series.wanted_episodes,
+        `${series.available_episodes} of ${series.wanted_episodes} wanted episodes on disk`,
+      ),
     );
   }
   if (series.blocked) {
@@ -2685,12 +2708,12 @@ function seriesCard(
   const chips = [chip(root ? root.audience : `root ${series.root_id}`)];
   if (series.wanted_episodes > 0) {
     chips.push(
-      chip(`${series.available_episodes}/${series.wanted_episodes} eps`, (span) => {
-        span.setAttribute(
-          "aria-label",
-          `${series.available_episodes} of ${series.wanted_episodes} wanted episodes on disk`,
-        );
-      }),
+      countsChip(
+        `${series.available_episodes}/${series.wanted_episodes} eps`,
+        series.available_episodes,
+        series.wanted_episodes,
+        `${series.available_episodes} of ${series.wanted_episodes} wanted episodes on disk`,
+      ),
     );
   }
   if (series.blocked) {
@@ -2717,11 +2740,7 @@ function movieCard(
 ): HTMLLIElement {
   const root = roots.find((candidate) => candidate.id === movie.root_id);
   const chips = [chip(root ? root.audience : `root ${movie.root_id}`)];
-  chips.push(
-    chip(movie.state, (span) => {
-      span.dataset.movieState = movie.state;
-    }),
-  );
+  chips.push(mediaStateChip(movie.state, movie.wanted));
   // §5.7 honesty: a waived import is never presented as a clean match
   const waiver = waiverLabel(movie.waiver);
   if (waiver !== null) {
@@ -3020,12 +3039,12 @@ function seriesMain(board: HTMLElement, tvDeck: TvReleasesView, views: HideableV
     const root = roots.find((candidate) => candidate.id === current.root_id);
     chipsEl.append(chip(root ? root.audience : `root ${current.root_id}`));
     chipsEl.append(
-      chip(`${current.available_episodes}/${current.wanted_episodes} eps`, (span) => {
-        span.setAttribute(
-          "aria-label",
-          `${current.available_episodes} of ${current.wanted_episodes} wanted episodes on disk`,
-        );
-      }),
+      countsChip(
+        `${current.available_episodes}/${current.wanted_episodes} eps`,
+        current.available_episodes,
+        current.wanted_episodes,
+        `${current.available_episodes} of ${current.wanted_episodes} wanted episodes on disk`,
+      ),
     );
     chipsEl.append(
       chip(current.status, (span) => {
@@ -3132,12 +3151,12 @@ function seriesMain(board: HTMLElement, tvDeck: TvReleasesView, views: HideableV
 
   function seasonCountsChip(season: ApiSeason): HTMLSpanElement {
     const counts = seasonCounts(season);
-    return chip(`${counts.available}/${counts.wanted} on disk`, (span) => {
-      span.setAttribute(
-        "aria-label",
-        `${counts.available} of ${counts.wanted} wanted episodes on disk`,
-      );
-    });
+    return countsChip(
+      `${counts.available}/${counts.wanted} on disk`,
+      counts.available,
+      counts.wanted,
+      `${counts.available} of ${counts.wanted} wanted episodes on disk`,
+    );
   }
 
   function seasonRow(season: ApiSeason): HTMLLIElement {
@@ -3287,11 +3306,7 @@ function seriesMain(board: HTMLElement, tvDeck: TvReleasesView, views: HideableV
 
     const chips = document.createElement("span");
     chips.className = "row-chips ep-chips";
-    chips.append(
-      chip(episode.state, (span) => {
-        span.dataset.movieState = episode.state;
-      }),
-    );
+    chips.append(mediaStateChip(episode.state, episode.wanted));
     // issue 122: gone upstream while its file remained — a conflict, not a state
     if (episode.vanished) {
       chips.append(