fix(ui): walk the eleven dangling-style reports — two were real

#2444. Each needed reading rather than a batch fix, and the split was 2 real
losses, 4 false reports, 5 wrappers that are bare on purpose.

REAL:

  .system-card   was a flex row, and every child still says so —
                 .system-swatch and .system-actions are flex-shrink: 0,
                 .system-body and .system-form--inline are flex: 1.
                 align-items: flex-start is why the swatch carries
                 margin-top: 0.3rem: nudged onto the first line of text.
  .systems-list  no rule AT ALL, so the systems list rendered with browser
                 bullets and indent. Invisible to the check — see below.
  .graph-embed   the panel is a flex column whose header is flex-shrink: 0,
                 so this is the item that takes the remaining height. Without
                 it the `height: 100%` on the line below resolves against auto
                 and does nothing, which left the comment above it specifying
                 a rule that could not work.

FALSE REPORTS, and the checker was wrong rather than the code:

`.pane.empty` and `td.num` are base rules for the element that carries those
classes — the check read any compound with more than a lone class as a
modifier. It now records a compound's whole class SET and clears an element
carrying all of them, which is exact: recording the classes individually would
have cleared `.pane` everywhere on the strength of a rule that only applies
alongside `.empty`. Four reports gone, and a check with false reports is one
that gets skimmed.

BARE ON PURPOSE — .rb, .topic-group, .new-topic, .sub-list, .dash-head, and
both .detail-row rows. Each namespaces descendant rules and assumes nothing
about layout, which is the tell that separates them from a deleted base. All
seven now carry a comment saying so, so the next reader doesn't re-litigate
them and a NEW entry in the report means something actually changed.

Also recorded in the script: it cannot see a class with no rule anywhere, since
that is indistinguishable from a semantic-only hook. `.systems-list` was found
by reading the file beside a class that WAS half-styled.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs

frontend/src/views/DashboardView.vue

@@ -176,6 +176,9 @@ onMounted(async () => {
 
 <style scoped>
 .dash-root { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
+/* `.dash-head` is deliberately bare: a block header whose two children carry
+   all the spacing between them (h1 zeroed, .dash-sub margined). Nothing in it
+   assumes a flex parent, which is the tell for a deleted rule (#2444). */
 .dash-head h1 { margin: 0; font-family: 'Fraunces', Georgia, serif; }
 .dash-sub { margin: 0.2rem 0 1.25rem; color: var(--color-muted); font-size: 0.9rem; }
 .dash-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.6rem; }

frontend/src/views/KnowledgeView.vue

@@ -936,6 +936,17 @@ onUnmounted(() => {
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
+/* RESTORED (#2444). The panel is a flex COLUMN and its header is
+   `flex-shrink: 0`, so this is the item that takes the remaining height — and
+   without it the `height: 100%` below resolves against `auto` and does
+   nothing, which made the comment underneath a spec for a rule that could not
+   work. `min-height: 0` is the companion that lets a flex item shrink under
+   its content instead of overflowing the panel. */
+.graph-embed {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Override GraphView's 100vh height so it fills the panel instead */
 .graph-embed :deep(.graph-page) {
   height: 100%;

frontend/src/views/LogsView.vue

@@ -454,6 +454,8 @@ function clearFilters() {
 }
 
 /* Detail row */
+/* `.detail-row` is deliberately bare: a `<tr>` has nothing to style that its
+   cells don't carry, and the row exists to scope the rule below (#2444). */
 .detail-row td {
   padding: 0 0.75rem 0.75rem;
   border-bottom: 1px solid var(--color-border);

frontend/src/views/SettingsView.vue

@@ -2937,6 +2937,8 @@ function formatUserDate(iso: string): string {
 .cell-status { font-family: monospace; font-size: 0.85rem; }
 .cell-duration { color: var(--color-text-muted); font-size: 0.8rem; white-space: nowrap; }
 .text-error { color: var(--color-danger); }
+/* Bare by design, like LogsView's twin of this: a `<tr>` has nothing to style
+   that its cells don't carry (#2444). */
 .detail-row td { padding: 0 0.75rem 0.75rem; border-bottom: 1px solid var(--color-border); }
 .detail-ip { font-family: monospace; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
 .detail-json {