refined popup appearance

styles/colors/popup.css

@@ -0,0 +1,21 @@
+@import url("/styles/colors/defaults.results.css");
+
+#score {
+	background-color: #88888888;
+}
+
+#score::-webkit-progress-value {
+	background-color: #ffF;    
+}
+
+[result="bad"] {
+     background: var(--color-results_bad_gradient);
+}
+
+[result="ok"] {
+     background: var(--color-results_ok_gradient);
+}
+
+[result="good"], [result="trusted"] {
+     background: var(--color-results_good_gradient);
+}

styles/fonts/popup.css

@@ -0,0 +1,6 @@
+
+
+.card-title, #summary {
+	font-size: 175% !important;
+	font-weight: bold !important;
+}

styles/layouts/popup.css

@@ -0,0 +1,17 @@
+#score {
+     height: 2px;
+}
+
+#results > * {
+     padding: 2em;
+}
+
+#results > details {
+     margin-top: auto;
+     margin-bottom: auto;
+}
+
+#results:not(:has(details[open])) summary {
+     height: 80vh;
+}
+

styles/popup.css

@@ -1,17 +1,3 @@
-#summary {
+@import url("/styles/layouts/popup.css");
-	font-weight: bold;
+@import url("/styles/fonts/popup.css");
-}
+@import url("/styles/colors/popup.css");
-
-
-#score {
-	background-color: #88888888;
-	height: 2px;
-}
-
-#score::-webkit-progress-value {
-	background-color: #ffF;    
-}
-
-body:has(summary + details) summary {
-	padding-bottom: 2em;
-}