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

scripts/check_dangling_styles.py

@@ -33,11 +33,22 @@ class with only modifier rules is a deletion that went half-way.
 
 Descendant selectors count as a base — `.panel .row {}` styles `.row` — because
 from the element's side there is no difference. Only the LAST compound of a
-selector is what it styles.
+selector is what it styles, and a compound's whole class SET is what it
+requires: `.pane.empty` and `td.num` are base rules for the element carrying
+those classes, not modifiers. Reading them as modifiers cost this check four
+false reports on its first run, and a check with false reports is one that gets
+skimmed.
 
 REPORT, NOT FAIL. Bare wrappers with no styling of their own are legitimate,
 so this cannot be a gate without a suppression mechanism nobody would maintain.
-A count that grows is the signal to look.
+A count that grows is the signal to look. Where a wrapper is bare on purpose,
+say so in a comment beside its descendant rules — the remaining reports here
+all carry one, so a new entry means something changed.
+
+KNOWN BLIND SPOT: a class with NO rule anywhere is invisible to this, because
+it cannot be told from a semantic-only hook. `.systems-list` had lost its
+entire rule and was rendering with browser bullets; it was found by reading the
+file next to a class that WAS half-styled, not by this check.
 
 INSTANCE-AGNOSTIC (rule #115). Nothing here knows a class name, a component, or
 a convention; point it at any Vue tree.
@@ -57,7 +68,6 @@ CSS_COMMENT = re.compile(r"/\*.*?\*/", re.S)
 STATIC_CLASS = re.compile(r'(?<![:\w-])class="([^"{}\[\]]*)"')
 SELECTOR = re.compile(r"([^{}]+)\{")
 CLASS_TOKEN = re.compile(r"\.([A-Za-z][\w-]*)")
-BARE_CLASS = re.compile(r"\.([\w-]+)\Z")
 
 
 def shared_classes(sheets: list[pathlib.Path]) -> set[str]:
@@ -69,24 +79,40 @@ def shared_classes(sheets: list[pathlib.Path]) -> set[str]:
     return names
 
 
-def based_classes(css: str) -> set[str]:
-    """Classes this stylesheet gives a base rule to.
+def base_class_sets(css: str) -> list[frozenset[str]]:
+    """Class combinations this stylesheet gives a base rule to.
 
     The last compound of a selector is what the rule styles: in
-    `.panel .row:hover` that is `.row:hover`, a modifier — but in `.panel .row`
-    it is `.row`, a base. So a selector qualifies only when its final compound
-    is a lone class with nothing appended.
+    `.panel .row:hover` that is `.row:hover`, a state — but in `.panel .row` it
+    is `.row`, a base.
+
+    A compound may carry more than one class, and a type selector alongside
+    them. `.pane.empty` and `td.num` are both base rules for the element that
+    matches, so each is recorded as the SET of classes it requires; an element
+    is styled when it carries all of them. Recording the classes individually
+    instead would clear `.pane` everywhere on the strength of a rule that only
+    ever applies with `.empty` — precision matters more here than reach, since
+    a missed base is a false report and a wrong one is a defect gone quiet.
+
+    A compound with no class at all (`ul`, `li`) is skipped: it styles by tag,
+    which this cannot verify without parsing the template's elements, and an
+    empty set would clear every element in the file.
     """
-    out: set[str] = set()
+    out: list[frozenset[str]] = []
     for selector in SELECTOR.findall(css):
         for part in selector.split(","):
             part = part.strip()
             if not part or part.startswith("@"):
                 continue
             last = re.split(r"[\s>+~]+", part)[-1]
-            match = BARE_CLASS.fullmatch(last)
-            if match:
-                out.add(match.group(1))
+            # A pseudo-class, pseudo-element or attribute selector makes it a
+            # state or a variant, not the element's base appearance.
+            if ":" in last or "[" in last:
+                continue
+            names = CLASS_TOKEN.findall(last)
+            # Everything outside the class tokens must be a bare type selector.
+            if names and re.fullmatch(r"[A-Za-z][\w-]*|\*|", CLASS_TOKEN.sub("", last)):
+                out.append(frozenset(names))
     return out
 
 
@@ -97,7 +123,7 @@ def scan(path: pathlib.Path, shared: set[str]) -> list[tuple[str, list[str]]]:
     if not css.strip():
         return []
 
-    based = based_classes(css)
+    base_sets = base_class_sets(css)
     mentioned = set(CLASS_TOKEN.findall(css))
 
     findings: list[tuple[str, list[str]]] = []
@@ -105,7 +131,10 @@ def scan(path: pathlib.Path, shared: set[str]) -> list[tuple[str, list[str]]]:
         names = [n for n in attr.split() if re.fullmatch(r"[A-Za-z][\w-]*", n)]
         if not names:
             continue
-        if any(n in based or n in shared for n in names):
+        carried = set(names)
+        if any(carried >= required for required in base_sets):
+            continue
+        if any(n in shared for n in names):
             continue
         dangling = [n for n in names if n in mentioned]
         if dangling: