feat(web): series detail view with season and episode decks

web/index.html

@@ -306,6 +306,44 @@
       </section>
     </main>
 
+    <!--
+    SERIES DETAIL (§4.1 + §4.2 + §9.3, issue #129): a series row anywhere
+    opens /series/{id} — the title line carries the audience chip, the
+    derived status and the wanted/on-disk count (season 0 excluded, per
+    §4.2). Seasons are collapsible groups: engraved name, the tracked
+    toggle (the one way an operator wants a season — no bulk backfill,
+    §4.1), counts, search and deck. Episodes read as tag, title, air date,
+    state, then the imported file's probed attribute chips — ffprobe truth,
+    not name claims — with want/search/deck only where they can do
+    something: an unaired episode offers no search button at all.
+    -->
+
+    <main class="deck releases" id="series" hidden aria-label="series detail">
+      <header class="releases-head">
+        <button type="button" class="control" id="series-back">back</button>
+        <div class="releases-id">
+          <h2 class="releases-title" id="series-title">—</h2>
+          <span class="releases-year readout dim" id="series-year"></span>
+          <span class="row-chips series-chips" id="series-chips"></span>
+        </div>
+      </header>
+      <p class="deck-status readout" id="series-status" role="status" hidden></p>
+      <ul class="deck-rows seasons" id="rows-seasons"></ul>
+    </main>
+
+    <main class="deck releases" id="tv-releases" hidden aria-label="season and episode releases">
+      <header class="releases-head">
+        <button type="button" class="control" id="tv-releases-back">back</button>
+        <div class="releases-id">
+          <h2 class="releases-title" id="tv-releases-title">—</h2>
+          <span class="releases-year readout dim" id="tv-releases-sub"></span>
+        </div>
+        <button type="button" class="control" id="tv-releases-sweep">search indexers</button>
+      </header>
+      <p class="deck-status readout" id="tv-releases-status" role="status" hidden></p>
+      <div id="tv-buckets"></div>
+    </main>
+
     <main class="board">
       <section class="chain" aria-label="signal chain">
         <article class="module area-tmdb" data-check="tmdb">

web/src/style.css

@@ -1101,6 +1101,135 @@ body {
   padding: 0;
 }
 
+/* ---- series detail (§4.1 + §4.2, issue #129) --------------------------- */
+
+/* the title line carries its readouts beside the name, not pushed right */
+.series-chips {
+  margin-left: var(--space-3);
+}
+
+/* one season: a collapsible group with its rule, counts and actions */
+.season {
+  border-bottom: 1px solid oklch(from var(--line) l c h / 45%);
+}
+
+.season-line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-3);
+  padding: var(--space-2) var(--space-1);
+}
+
+/* the disclosure is a drawn chevron — no glyph standing in for an icon */
+.season-disclose {
+  flex: none;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: border-color 150ms var(--ease-out);
+}
+
+.season-disclose:hover,
+.season-disclose:focus-visible {
+  border-color: var(--accent);
+}
+
+.season-disclose::before {
+  content: "";
+  width: 0.4rem;
+  height: 0.4rem;
+  border-right: 2px solid var(--ink-muted);
+  border-bottom: 2px solid var(--ink-muted);
+  transform: rotate(-45deg) translate(-5%, -5%);
+  transition: transform 200ms var(--ease-out);
+}
+
+.season-disclose[aria-expanded="true"]::before {
+  transform: rotate(45deg) translate(-5%, -5%);
+}
+
+.season-name {
+  font-family: var(--font-display);
+  font-size: var(--text-base);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--ink);
+}
+
+/* the tracked toggle reads as the rule it is; pressed = on */
+.season-line .control,
+.ep-actions .control {
+  min-height: 2.25rem;
+  padding: 0 var(--space-3);
+}
+
+.season-space {
+  flex: 1;
+}
+
+.episodes {
+  margin: 0;
+  padding: 0 0 var(--space-2) var(--space-8);
+  list-style: none;
+}
+
+.episode {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  padding: var(--space-2) var(--space-1);
+  border-bottom: 1px solid oklch(from var(--line) l c h / 45%);
+}
+
+.ep-tag {
+  flex: none;
+  width: 2.75rem;
+  color: var(--ink-faint);
+}
+
+.ep-title {
+  min-width: 0;
+  font-size: var(--text-sm);
+  color: var(--ink);
+}
+
+.ep-air {
+  flex: none;
+  width: 6.5rem;
+  color: var(--ink-faint);
+}
+
+.ep-chips {
+  margin-left: auto;
+}
+
+.ep-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: var(--space-3);
+}
+
+.ep-unaired {
+  font-size: var(--text-xs);
+}
+
+/* #122: gone upstream while its file remained — a conflict, amber dashed */
+.chip[data-flag="vanished"] {
+  color: var(--signal-warn);
+  border-style: dashed;
+  border-color: oklch(from var(--signal-warn) l c h / 55%);
+}
+
 /* ---- attention queues (§5.2 + §5.7) ------------------------------------ */
 
 /* the badge is a signal, not a control: amber attention on the cyan word */
@@ -1194,6 +1323,20 @@ body {
     flex-basis: 100%;
   }
 
+  /* an episode row wraps: identity first, chips full-width, actions right */
+  .ep-chips {
+    margin-left: 0;
+    flex-basis: 100%;
+  }
+
+  .ep-actions {
+    margin-left: auto;
+  }
+
+  .episodes {
+    padding-left: var(--space-4);
+  }
+
   .releases-id {
     order: -1;
     flex-basis: 100%;