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

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%;