web: frame through the recipe, with the viewfinder where the stage was

The live view is the one place where the look is chosen before the picture
exists, so the columns that hold it have to stay in reach while the camera is
open. The viewfinder was a fixed black sheet over the whole app: the rail and
every slider were behind it, and the only way to change the look was to close
the camera, grade the file, and open it again. It now covers the stage and
nothing else — the stage and the view share a slot (`.stage-slot`, position
relative) and the view is absolutely placed inside it, z-index 5, black in
either theme. Measured at 1600px: the rail and the columns are on screen, the
feed takes 1347px of the 1600 and the stage's own 253px rail the rest. A slider
moved with the camera open reaches the very next frame (the render loop reads
the recipe per frame, so nothing had to be wired), a monochrome sim takes the
live feed from sat 42.1 to 0, and the shutter hands the studio that same frame
with the sim already on it.

The preview render is skipped while the viewfinder is up (`|| shooting` in the
guard, and in the effect's deps): it would run the same recipe through the same
renderer as the frames the user is actually watching, and the live one wins.

Opening it is PRO, like the HSL chips and the geotag — the frames are the paid
ones. The button stays on the page for everyone and carries the badge, and the
click runs the app's own `promptPro`: the account dialog for a guest, the
verification panel for a signed-in account, `/api/auth/me` being what says
which. A verified account gets the camera; a guest gets `.modal-backdrop` and no
`camera-view` at all.

Probes: cam-pro-gate (guest sees the badge, the click opens the dialog, no
viewfinder; verified opens it), cam-live-edit (rail and columns survive the
live view, feed covers the stage, the recipe reaches the live frames and the
shot), cam-smoke, cam-renegotiate, cam-close-flip.

docker/frontend/src/styles/app.css

@@ -717,13 +717,19 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
 .stage .toolbar .dims { font-family: var(--mono); white-space: nowrap; }
 .err { color: var(--danger); font-size: 12px; max-width: 520px; text-align: center; }
 
+/* The stage and, over it, the live viewfinder: the slot they share in the
+   workspace. The columns beside it are the app's own — a slider there moves the
+   look on the frames the camera is grading right now. */
+.stage-slot { flex: 1 1 auto; min-width: 0; display: flex; position: relative; }
+
 /* --- live viewfinder ---------------------------------------------------- */
-/* Full screen and black whatever the theme: a viewfinder is something the user
-   looks through, not a panel in the page. */
-.camera-backdrop {
-  position: fixed;
+/* Covers the stage, not the app: black whatever the theme, because a viewfinder
+   is something the user looks through, but the tabs stay in reach — that is the
+   whole point of framing through the recipe. */
+.camera-view {
+  position: absolute;
   inset: 0;
-  z-index: 70;
+  z-index: 5;
   background: #000;
   display: flex;
   flex-direction: column;