🐞 fix: Update footer color for chrome tinting and adjust related tests for iOS compatibility

styles/base/global.css

@@ -81,9 +81,11 @@ main#maincontent {
  * backgroundColor is updated at runtime by
  * static/js/modules/ChromeTint.js.
  *
- * The elements have no background by default — they only become
- * opaque when the matching element (header / footer) is in view.
- * pointer-events: none ensures they never intercept clicks.
+ * The elements are kept as small as possible (12px tall) so they
+ * stay well within the iOS safe-area insets and don't intrude into
+ * the page content. They have no background by default — they only
+ * become opaque when the matching element (header / footer) is in
+ * view. pointer-events: none ensures they never intercept clicks.
  *
  * (iOS 26 ignores <meta name="theme-color">; this technique is
  *  what replaced it.)
@@ -96,9 +98,10 @@ main#maincontent {
 
 .chrome-tint--top {
     left: 0;
-    min-height: 15px;
+    min-height: 12px;
     top: 4px;
-    /* 4px from top + 15px tall = within the 4px-to-12px sampling window. */
+    /* 4px from top + 12px tall = within the 4px-to-12px iOS 26
+       sampling window for top status bar tinting. */
     width: 90%;
     /* width: 90% > 80% iOS minimum for being sampled. */
 }
@@ -107,6 +110,6 @@ main#maincontent {
     bottom: 3px;
     /* 3px from bottom = within the 3px iOS sampling window. */
     left: 0;
-    min-height: 15px;
+    min-height: 12px;
     width: 90%;
 }