fix(studio): keep the tone curve's channels, and drop the strip that repeats them

Two halves of one report: the R/G/B channel picks belong on the graph, and
the chips down the sidebar were reading as a second copy of the sliders.

- ToneCurvePanel.tsx + app.css: the channel row (RGB/R/G/B and RESET) and
  the .curve-tabs rules come back, so the card picks a channel again and
  bends that one. Undoes the row's removal; the graph itself is unchanged.
- app.css: the strip a LIGHT panel opens is hidden on a desktop, with the
  row of panel chips it is opened from. Both name the seven rows the panel
  already stands in, so a desktop was drawing every knob twice — the strip
  beside the sliders, and the sliders. The phone keeps it: there the panels
  are the strip, not the column.

Verified in Chrome at 1440x900 and 820x700 with a photo loaded: on the
desktop the strip is gone and the card carries RGB/R/G/B/RESET, the R tab
bends the red curve while the composite stays drawn beneath it; on the
phone the strip still opens TONE -> EV..BLACK, TONE CURVE, and the card is
the same.

docker/frontend/src/styles/app.css

@@ -114,10 +114,11 @@
 /* RESET is the way out of an edit, not one more chip: a rule and some air keep
    it apart from the tab's own buttons at the foot of the column. */
 .reset-row { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
-/* Two things that belong to the phone alone: the path back up under the strip,
-   and LIGHT's panels as a chip row. A desktop draws neither — every column is
-   in sight, and LIGHT's panels are the column itself. */
-.crumb, .dev-chips { display: none; }
+/* Three things that belong to the phone alone: the path back up under the strip,
+   LIGHT's panels as a chip row, and the strip those chips open. A desktop draws
+   none of them — every column is in sight, LIGHT's panels are the column itself,
+   and a strip beside them only repeats the seven rows standing in it. */
+.crumb, .dev-chips, .col-dev ~ .col-sub[data-col="options"] { display: none; }
 .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
 /* The rule a strip is read across (the mixer's PICK, its bands, the three
    knobs): a line of its own, so it breaks the row it is written into whichever
@@ -556,14 +557,51 @@ button.hint:disabled { cursor: default; }
   cursor: pointer;
 }
 .curve-close:hover { color: var(--fg); }
+.curve-tabs { display: flex; gap: 4px; align-items: center; }
+.curve-tab {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1 1 0;
+  justify-content: center;
+  padding: 3px 0;
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.curve-tab.on { border-color: var(--accent-line); color: var(--fg); }
+/* The dot carries the channel's own colour, so the tab says which line it draws;
+   it goes amber once that channel has left the diagonal. */
+.curve-dot { width: 7px; height: 7px; border-radius: 999px; }
+.curve-tab.moved .curve-dot { box-shadow: 0 0 0 2px var(--accent); }
+.curve-reset {
+  flex: 0 0 auto;
+  padding: 3px 7px;
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.curve-reset:hover { color: var(--fg); border-color: var(--accent-line); }
 .curve-graph { display: block; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 3px; cursor: crosshair; }
 /* The picture's own distribution, the floor the graph is read against. Light on
    both themes because the graph itself is always the dark box over a photo. */
 .curve-hist { fill: rgba(255, 255, 255, 0.22); }
 .curve-grid { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
 .curve-diagonal { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 3 3; }
-/* The line the composite curve draws. */
+/* The line the active tab draws, and — on a channel tab — the composite curve
+   under it, so the two moves can be told apart. */
 .curve-line { fill: none; stroke-width: 2; stroke-linecap: round; }
+.curve-line.ghost { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 4 3; }
 .curve-point { fill: var(--bg-elev); stroke-width: 2; cursor: grab; }
 .curve-point:active { cursor: grabbing; }
 
@@ -1772,6 +1810,9 @@ input[type="range"].track-temp::-webkit-slider-thumb, input[type="range"].track-
      the wrapper's place, exactly as .chips itself stands in its columns'. */
   .col-dev .dev-chips { display: contents; }
   .col-dev .dev-panels { display: none; }
+  /* The strip those chips open is the phone's whole way to a row, so it comes
+     back with them (see the base rule that hides it on a desktop). */
+  .col-dev ~ .col-sub[data-col="options"] { display: flex; }
 
   /* --- the way back up: the path under the strip -------------------------- */
   /* TABS > LIGHT > WB. The bar is as deep as the visitor walked, so the bar's