site(css): the filter notes stopped overlapping each other

Two sentences rendered on top of one another under CELL SHOWN, illegibly.

`.filters .fnote` pinned `grid-row: 3`. That was right while exactly ONE axis had
an explanatory sentence - it put the note below both axes so they read as a pair.
The concurrency axis added a second sentence, both were placed in the same cell,
and a hardcoded row cannot hold two occupants.

The row is now left to auto-placement, so each sentence follows the axis it
explains - which is also what makes it obvious WHICH control it describes, now
that there is more than one. Column 2 is kept, so every sentence still starts at
its own chips' left edge rather than the label's, and a hidden axis still takes
its note with it.

Guarded: the layout test now refuses a hardcoded row on that rule and asserts the
block carries more than one sentence, which is the condition that broke it. Proven
red by restoring `grid-row: 3`.

Author: MattJackson

site/style.css

@@ -584,12 +584,14 @@ td.failcell {
    line of 0.76rem text run to 1440px is not a sentence anyone reads.
    The bound must be legible as WORDS and not only as a highlighted button: the defect this whole surface
    exists to prevent is a reader inferring a bar the test never enforced. */
-/* Explicitly the THIRD row, so it sits BELOW both axes rather than between them. In DOM order it belongs to
-   the bound axis (it explains the bound), but auto-placed it split the two axis rows apart and they stopped
-   reading as a pair - which is the one thing this block exists to make legible. Explicit placement does not
-   advance the auto cursor, so the cell axis still lands on row 2, and when the bound axis is hidden this
-   element is hidden with it and the row simply does not exist. */
-.filters .fnote { grid-column: 2; grid-row: 3; font-size: .76rem; max-width: 46rem; margin: 0; }
+/* IN THE CONTROLS COLUMN, ON THE ROW AFTER ITS OWN AXIS - not pinned to a fixed row.
+   This was `grid-row: 3`, correct while exactly ONE axis had a sentence: it put the note below both axes
+   so they read as a pair. A second axis with a sentence (concurrency) then landed in the SAME cell and the
+   two rendered on top of each other, illegibly - a hardcoded row cannot hold more than one occupant.
+   Column 2 keeps every sentence starting at its chips' left edge; the row is left to auto-placement so
+   each note follows the axis it explains, which is also what makes it obvious WHICH control it describes
+   once there is more than one. A hidden axis still takes its own note with it. */
+.filters .fnote { grid-column: 2; font-size: .76rem; max-width: 46rem; margin: 0; }
 .filters .fnote:empty { display: none; }
 /* CONSISTENT CHIP GEOMETRY WITHIN AN AXIS. "1 ms" and "no bound" are the same kind of choice, so they are
    the same size of target; six chips of six different widths was the other half of "ugly". Centred, because

site/test.mjs

@@ -6639,6 +6639,16 @@ test("UI: the two filter axes are ONE labelled control block, not two ragged row
   assert.ok(note, "the explanatory sentence has its own rule");
   assert.match(note[0], /grid-column:\s*2/, "it starts at the chips' left edge, not the label's");
   assert.match(note[0], /max-width:/, "and is capped rather than running to whatever width the page happens to be");
+  /* AND IT IS NOT PINNED TO A FIXED ROW. `grid-row: 3` was correct while exactly one axis had a
+     sentence; the concurrency axis added a second, both were placed in the same cell, and they
+     rendered on top of each other. A hardcoded row cannot hold two occupants, and the block now has
+     three axes - so the row is left to auto-placement and each sentence follows the axis it explains. */
+  assert.doesNotMatch(note[0], /grid-row:/,
+    `the note's row must not be hardcoded, or a second axis's sentence overlaps the first: ${note[0]}`);
+  // More than one axis carries a sentence now, which is what broke the fixed row.
+  const html2 = readFileSync(join(HERE, "index.html"), "utf8");
+  const notes = (html2.match(/class="fnote muted"/g) || []).length;
+  assert.ok(notes >= 2, `the block carries ${notes} explanatory sentences; the layout must hold them all`);
 
   // CONSISTENT CHIP GEOMETRY across both axes: "1 ms" and "100 ms" must not be two different-sized chips.
   assert.match(css, /#bound-seg \.seg-btn \{[^}]*min-width:/,