diff --git a/app/static/style.css b/app/static/style.css
index 6fc848a..e4bd24d 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -19,6 +19,13 @@
   box-sizing: border-box;
 }
 
+/* The `hidden` attribute must always win — class rules like `.metric { display: flex }`
+   otherwise beat the UA `[hidden]` default (specificity 0,1,0 vs 0,0,0), leaving
+   data-optional cards (e.g. Board when Redfish reports no temp) stuck visible. */
+[hidden] {
+  display: none !important;
+}
+
 html,
 body {
   width: 100%;
diff --git a/tests/test_ui_contract.py b/tests/test_ui_contract.py
index b83eb58..9647fee 100644
--- a/tests/test_ui_contract.py
+++ b/tests/test_ui_contract.py
@@ -57,6 +57,16 @@ def test_mobile_css_prevents_390px_horizontal_overflow():
     assert "minmax(0, 1fr)" in css
 
 
+def test_hidden_attribute_beats_class_display_rules():
+    # data-optional cards (e.g. Board when Redfish has no temp) set hidden=true in JS;
+    # without this rule .metric{display:flex} wins on specificity and the card stays
+    # visible. Regression guard for the live bug where Board showed a dead --deg.
+    css = read("app/static/style.css")
+
+    assert "[hidden]" in css
+    assert "display: none !important" in css
+
+
 def test_dashboard_formats_missing_values_and_machine_reasons_for_people():
     javascript = read("app/static/js/dashboard.js")