From 25630bcb4e27bbd91ca416575a3e22c04a0589b7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 11:50:21 +0000
Subject: [PATCH] style: scope heading rules and fix rem baseline regression

Review feedback fixes:

- Move base font-size off <html> so the browser-default 16px root is
  preserved and all rem-based sizing across the app stays unchanged.
- Scope h1-h6 typography to .page-wrapper/.component-wrapper/.markdown
  so Material dialog titles, mat-card-title, mat-toolbar, etc. are
  never silently overridden by bare-tag rules.
- Drop text-rendering: optimizeLegibility; it has measurable cost on
  long scrollable lists and is unnecessary with modern smoothing.
- Drop dead <time>/.time-display tabular-nums selectors.
- Replace hardcoded 'Open Sans' in nav-item and the loading splash
  with the modern system UI stack so the sidenav and splash match
  the rest of the app.
---
 .../nav-item/nav-item.component.scss          |  2 +-
 src/index.html                                | 13 ++-
 src/styles/page.scss                          | 93 ++++++++++---------
 3 files changed, 62 insertions(+), 46 deletions(-)
diff --git a/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss b/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss
index 818f87d8fd..2282e9c093 100644
--- a/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss
+++ b/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss
@@ -25,7 +25,7 @@
     overflow: hidden;
     flex: 1;
     min-width: 0;
-    font-family: 'Open Sans', sans-serif;
+    font-family: var(--font-primary-stack);
     font-weight: 400;
     letter-spacing: normal;
     color: var(--sidenav-text);
diff --git a/src/index.html b/src/index.html
index 11a9b81712..ab4ce7822f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -179,15 +179,24 @@ TODO configure more restrictive Content-Security-Policy
 
       .app-loading .productivity-tip h2 {
         font:
-          500 20px/32px 'Open Sans',
+          600 20px/28px -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI Variable Text',
+          'Segoe UI',
+          Roboto,
           'Helvetica Neue',
           sans-serif;
+        letter-spacing: -0.01em;
         margin: 0 0 8px !important;
       }
 
       .app-loading .productivity-tip p {
         font:
-          400 14px/20px 'Open Sans',
+          400 14px/20px -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI Variable Text',
+          'Segoe UI',
+          Roboto,
           'Helvetica Neue',
           sans-serif;
         margin: 0 0 8px !important;
diff --git a/src/styles/page.scss b/src/styles/page.scss
index 2c9640cfdc..01d65f205f 100644
--- a/src/styles/page.scss
+++ b/src/styles/page.scss
@@ -17,70 +17,77 @@ app-root,
   // Crisper rendering on macOS/iOS and Windows/Linux
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  // Common kerning + contextual ligatures; tabular numerals keep digits aligned
-  // in tables (time spent, progress %, etc.)
+  // Common kerning + contextual ligatures
   font-feature-settings:
     'kern' 1,
     'liga' 1,
     'clig' 1,
     'calt' 1;
+}
+
+// Base font-size stays on body only so <html> keeps the browser default 16px
+// and `rem`-based sizing across the app is unaffected.
+body,
+app-root,
+.app-frame {
   font-size: var(--font-size-md);
   line-height: var(--line-height-normal);
   letter-spacing: var(--letter-spacing-normal);
 }
 
 // Tabular figures for any numeric display (durations, counts, time)
-.tabular-nums,
-time,
-.time-display {
+.tabular-nums {
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1;
 }
 
-// Headings: tighter tracking + snug leading for a more modern feel.
-// These are non-Material heading tags; Material components keep their own scale.
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: inherit;
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-snug);
-  letter-spacing: var(--letter-spacing-tight);
-  color: var(--text-color-most-intense);
-}
+// Headings — only applied within standard content containers so Material
+// component typography (dialog titles, mat-card-title, mat-toolbar, etc.)
+// is never silently overridden by bare-tag rules.
+.page-wrapper,
+.component-wrapper,
+.markdown {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: inherit;
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-snug);
+    letter-spacing: var(--letter-spacing-tight);
+  }
 
-h1 {
-  font-size: var(--font-size-3xl);
-  letter-spacing: var(--letter-spacing-tighter);
-  line-height: var(--line-height-tight);
-}
+  h1 {
+    font-size: var(--font-size-3xl);
+    letter-spacing: var(--letter-spacing-tighter);
+    line-height: var(--line-height-tight);
+  }
 
-h2 {
-  font-size: var(--font-size-2xl);
-  letter-spacing: var(--letter-spacing-tighter);
-}
+  h2 {
+    font-size: var(--font-size-2xl);
+    letter-spacing: var(--letter-spacing-tighter);
+  }
 
-h3 {
-  font-size: var(--font-size-xl);
-}
+  h3 {
+    font-size: var(--font-size-xl);
+  }
 
-h4 {
-  font-size: var(--font-size-lg);
-}
+  h4 {
+    font-size: var(--font-size-lg);
+  }
 
-h5 {
-  font-size: var(--font-size-md);
-}
+  h5 {
+    font-size: var(--font-size-md);
+  }
 
-h6 {
-  font-size: var(--font-size-sm);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-wide);
-  color: var(--text-color-muted);
+  h6 {
+    font-size: var(--font-size-sm);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wide);
+    color: var(--text-color-muted);
+  }
 }
 
 code,
