diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index 094e493..7738a70 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -1635,7 +1635,29 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
   .crumb-btn:hover { color: var(--text); }
   .crumb-here { color: var(--accent); }
 
-  /* --- a chip's own sub-chips: the row over the bar ----------------------- */
+  /* --- the strip a chip opens takes the bar -------------------------------- */
+  /* One strip at a time, as on the rail: a chip that opens a strip of its own
+     takes the bar with it, and the tab's own chips stand down. The way back to
+     them is the path under the bar (.crumb), which names the strip they are —
+     so a second row of chips over the first would only repeat where the finger
+     already is, and charge the photo a row for it while a knob is being moved.
+     Only the two columns that ARE a strip a chip opened displace the bar: the
+     RECIPES list, a photo's history and the mask's own column are an open
+     chip's content, not the strip its chip opened, and they keep the bar in
+     sight under them. Both wear the bar's slot and the bar's own skin, not the
+     sub-column's — this row IS the bar now. */
+  .col-sub[data-col="options"], .col-sub[data-col="wm"] {
+    order: 3;
+    background: var(--bg);
+    max-height: 46vh;
+  }
+  /* A watermark's column is not a row of chips: it keeps the column's shape in
+     the slot, with the bar's rule over it and the same ceiling. */
+  .col-sub[data-col="wm"] { border-top: 1px solid var(--border-soft); overflow-y: auto; }
+  .workspace:has(.chips > .col-sub[data-col="options"]) .col-main,
+  .workspace:has(.chips > .col-sub[data-col="wm"]) .col-main { display: none; }
+
+  /* --- a chip's own sub-chips: the tiles the strip is drawn as ------------- */
   .col-sub:not(.wm-extra) {
     flex-direction: row;
     align-items: center;