viz: global [hidden] override to stop the whack-a-mole

Caught the same bug three times in two commits — every element with an
explicit display value (.detail-row display:grid, .detail-empty
display:flex, etc.) silently overrides the UA stylesheet's default
[hidden] { display: none }, so JS-set hidden=true leaves the element
visible. User saw this as: empty state + populated detail card showing
simultaneously after asset selection.

Defensive root fix: add a single global rule near the top of style.css.
[hidden] { display: none !important } applies to every element that
gains the hidden attribute, regardless of any other display value
declared elsewhere. Removed the per-element overrides now made
redundant (.detail-row, .detail-empty).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: quantbai

docs/style.css

@@ -155,6 +155,13 @@ input {
   border: 0;
 }
 
+/* Global [hidden] override — any `display` value (flex/grid/block) wins
+   over HTML5's default `[hidden] { display: none }` from the UA stylesheet,
+   leaving JS-hidden elements stuck visible. This rule restores expected
+   semantics for every element on the page (defensive — caught it 3 times
+   in detail-row, detail-empty, and decision row). */
+[hidden] { display: none !important; }
+
 /* Focus ring — WCAG 2.4.13 compliant.
    Excludes <path> because Chrome renders both `outline` and `box-shadow` on
    SVG <path> as the path's bounding-box rectangle, which ignores the arc
@@ -723,11 +730,6 @@ mark {
   border-bottom: 1px solid var(--border);
 }
 
-/* HTML5 [hidden] attribute is overridden by any explicit `display` value,
-   so rows with display:grid stay visible even when JS sets hidden=true.
-   Restore expected behavior. */
-.detail-row[hidden] { display: none !important; }
-
 .detail-row:last-child { border-bottom: none; }
 
 .detail-row dt {