[style](trx-frontend-http): name and fence the three audio groups

The row carries three unrelated things — how loud it is, whether there
is any audio at all, and how much is arriving — and only the middle one
was named.  Each is a group now: VOLUME over the two sliders, SQL on its
own switch, LEVEL over the meter, with a hairline between each.

The rules are drawn only while the row is one line, measured against the
row rather than the viewport: what fits depends on whether the rig
transmits and whether it has a squelch at all.  A rule divides what sits
either side of it, so once a group wraps the wrap is the division and
the rule would just be a mark at the start of a line — which is what it
was at 900px before this.  The labels carry the grouping on their own
below that width, and the groups stack whole on a phone.

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

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

@@ -1856,9 +1856,35 @@ 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. */
+/* The row carries three unrelated things — how loud, whether there is audio at
+   all, and how much is arriving — so each is named and fenced from the next.
+   Each rule belongs to the block that follows it, so it leaves when that block
+   does (the squelch is absent on rigs without one). */
+.audio-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.audio-volume-group {
+  flex: 0 1 auto;
+}
+.audio-level-group {
+  flex: 1 1 12rem;
+  min-width: 8rem;
+}
+.audio-group-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+.audio-level-group #audio-status {
+  min-width: 3.4rem;
+}
+.audio-level-group::before,
 .sql-control::before {
   content: "";
   align-self: stretch;
@@ -1866,6 +1892,22 @@ small { color: var(--text-muted); }
   min-height: 1.5rem;
   margin-inline: 0.5rem 0.6rem;
   background: color-mix(in srgb, var(--border-light) 65%, transparent);
+  display: none;
+}
+/* Only while the row is one line. A rule divides what sits either side of it,
+   so once a group wraps onto its own line the wrap is the division and the
+   rule would just be a mark at the start of a line. Measured against the row,
+   not the viewport: what fits depends on whether the rig transmits and whether
+   it has a squelch at all. */
+#audio-row .inline {
+  container-type: inline-size;
+  container-name: audio-row;
+}
+@container audio-row (min-width: 57rem) {
+  .audio-level-group::before,
+  .sql-control::before {
+    display: block;
+  }
 }
 /* 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. */
@@ -4567,9 +4609,11 @@ 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; }
+  .audio-group {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+  .audio-group-label { width: 100%; }
   .vol-label {
     flex-direction: row;
     align-items: center;
@@ -4589,8 +4633,8 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   }
   #rx-audio-btn,
   #tx-audio-btn,
-  #audio-level,
-  #audio-status,
+  .audio-volume-group,
+  .audio-level-group,
   #sdr-squelch-wrap {
     grid-column: 1 / -1;
   }