fix(overlay): apply the configured theme on load, and make the clock card legible (#250)

Two bugs and one legibility fix, all in the same path.

1. The theme never applied on initial render. css_block emitted _theme_css()
   BEFORE OVERLAY_CSS, and both declare :root with identical specificity, so the
   static defaults won. A kiosk showed its configured accent only until the page
   reloaded, then silently reverted to the built-in #88C0D0 until some card
   happened to appear -- because the refresh loop copies the theme onto
   documentElement, and that runs solely on an overlay CONTENT version change.
   Swapping the order lets the theme win in the sheet itself, with no JS involved.

2. applyThemeVariables() took the FIRST :root in the document. Once the theme
   moved to the end (fix 1), the first block became the static defaults -- so
   every content update copied #88C0D0 onto inline style, and inline beats the
   sheet. It now reads the last :root, i.e. the theme block.

3. The clock card is the only card rendered without a background plate; it sits
   directly on the wallpaper. Its title was drawn in the accent colour at 0.95rem
   and disappeared over a bright photo. Colour alone cannot fix this -- white
   vanishes over a pale wallpaper just as the accent vanishes over a bright one --
   so the title joins the time/date in white and all three get a text-shadow.
   The accent still marks titles on the backed cards, where it reads fine.

Verified on pulse-office over a live camera background: computed
--overlay-accent-color is now the configured value on a cold load, the title is
legible against bright concrete, and NOW PLAYING renders in the accent.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: weirdtangent

assets/overlay/overlay.css

@@ -1018,6 +1018,29 @@ body {
   color: var(--overlay-accent-color);
 }
 
+/* The clock card is the ONLY card rendered without a background plate -- every other
+   card carries --ambient or --alert, so its text is read against a known dark scrim.
+   The clock sits directly on the wallpaper, which can be any photo at any luminance,
+   so colour alone cannot make it legible: the accent disappeared over a bright sunlit
+   shot, and white would disappear over a pale one just as badly. The time and date
+   only get away with being unshadowed because they are enormous (up to 6.5rem); the
+   title is 0.95rem and had no such margin.
+
+   So: the title joins its siblings in white rather than the accent, and all three get
+   a shadow so the card holds up over an arbitrary background. The accent still marks
+   titles on the backed cards, where it reads fine. */
+.overlay-card--clock .overlay-card__title {
+  color: var(--overlay-text-color, #ffffff);
+}
+
+.overlay-card--clock .overlay-card__title,
+.overlay-card--clock .overlay-clock__time,
+.overlay-card--clock .overlay-clock__date {
+  text-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.85),
+    0 0 14px rgba(0, 0, 0, 0.55);
+}
+
 /* The clock gets its own family. It is the one thing on screen rendered at 100px+, where a
    face picked for legibility in a 14px badge often reads badly, so the two are chosen
    separately. Falls back to the overlay font when no clock font is set. */

pulse/overlay.py

@@ -1256,7 +1256,14 @@ def _add_card(cell: str, markup: str) -> None:
         f'data-info-endpoint="{info_endpoint_attr}"'
     )
 
-    css_block = f"{_theme_css(theme)}\n{OVERLAY_CSS}"
+    # Theme AFTER the static sheet, not before. Both blocks target :root with the same
+    # specificity, so whichever comes last wins -- with the theme first, OVERLAY_CSS's
+    # :root defaults silently overrode every configured colour and font on initial
+    # render. It only ever looked right because the refresh loop copies the theme onto
+    # documentElement's inline style, and that runs solely when the overlay CONTENT
+    # version changes: so a display showed its configured accent until the next reload,
+    # then reverted to the built-in default until some card happened to appear.
+    css_block = f"{OVERLAY_CSS}\n{_theme_css(theme)}"
     html_document = f"""<!DOCTYPE html>
 <html lang="en">
 <head>

pulse/overlay_server.py

@@ -326,7 +326,13 @@ def _render_framed_overlay(self, target_url: str) -> str:
     const style = doc.querySelector('style');
     if (!style) return;
     const text = style.textContent || '';
-    const rootAt = text.indexOf(':root');
+    // LAST :root, not the first. The document carries two: the static stylesheet's
+    // defaults come first, and the theme block is appended after it so it wins the
+    // cascade (see the css_block ordering in overlay.py). Taking the first one here
+    // would copy the built-in DEFAULTS onto documentElement's inline style -- and
+    // inline beats the sheet, so it would defeat the very ordering that makes the
+    // configured theme apply at all.
+    const rootAt = text.lastIndexOf(':root');
     if (rootAt < 0) return;
     const open = text.indexOf('{{', rootAt);
     const close = text.indexOf('}}', open);

tests/test_overlay.py

@@ -37,6 +37,42 @@ def setUp(self) -> None:
             show_notification_bar=True,
         )
 
+    def test_theme_css_wins_over_the_static_stylesheet(self) -> None:
+        """The theme block must come AFTER OVERLAY_CSS in the rendered document.
+
+        Both declare :root with identical specificity, so source order decides. With
+        the theme emitted first, OVERLAY_CSS's :root defaults silently overrode every
+        configured colour on initial render, and the display only picked the real theme
+        up when the refresh loop next copied it onto documentElement -- which happens
+        solely on an overlay CONTENT change. Net effect: a kiosk showed its configured
+        accent until the page reloaded, then reverted to the built-in default until
+        some card happened to appear.
+        """
+        from pulse.overlay_assets import OVERLAY_CSS
+
+        theme = OverlayTheme(
+            ambient_background="rgba(0,0,0,0.32)",
+            alert_background="rgba(0,0,0,0.65)",
+            text_color="#FFFFFF",
+            accent_color="#ff5c5c",
+            show_notification_bar=True,
+        )
+        html = render_overlay_html(self._snapshot(), theme)
+
+        themed = html.rfind("--overlay-accent-color: #ff5c5c")
+        self.assertGreaterEqual(themed, 0, "themed accent missing from the document")
+
+        # The static sheet also defines --overlay-accent-color; the themed one has to
+        # come later or it loses the cascade.
+        static_default = OVERLAY_CSS[OVERLAY_CSS.find("--overlay-accent-color") :][:60]
+        self.assertIn("--overlay-accent-color", static_default)
+        static_at = html.find("--overlay-accent-color")
+        self.assertLess(
+            static_at,
+            themed,
+            "static :root default must precede the theme block, otherwise it wins",
+        )
+
     def _snapshot(self, **overrides) -> OverlaySnapshot:
         data = {
             "version": 1,