[style](trx-frontend-http): fence the squelch off from the volume controls

The squelch sat in the audio row on the same gap as everything else, so
it read as a continuation of the volume sliders.  It decides whether
there is audio at all, which is not the same kind of control as how loud
it is, and a hairline says so.

The rule belongs to the squelch block, so it leaves with it on a rig
that has none, and it stands down where the row stacks: there the line
break separates them already and a leading rule would just start a line.

Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -1856,6 +1856,17 @@ small { color: var(--text-muted); }
   font-size: 0.82rem;
   white-space: nowrap;
 }
+/* Fenced off from the volume controls beside it: squelch decides whether there
+   is audio at all, which is not the same kind of control as how loud it is.
+   The rule belongs to the block, so it leaves with it on rigs without one. */
+.sql-control::before {
+  content: "";
+  align-self: stretch;
+  width: 1px;
+  min-height: 1.5rem;
+  margin-inline: 0.5rem 0.6rem;
+  background: color-mix(in srgb, var(--border-light) 65%, transparent);
+}
 /* The name is the switch: one target instead of a label and a button that
    said the same thing twice, with the dot carrying the state. */
 .sql-toggle {
@@ -4556,6 +4567,9 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
 
   /* Wider volume sliders for touch */
   .vol-slider { width: 100%; flex: 1 1 auto; }
+  /* The row stacks at this width, so the line break already separates the
+     squelch from the volumes and the rule would just start a line. */
+  .sql-control::before { display: none; }
   .vol-label {
     flex-direction: row;
     align-items: center;