diff --git a/JournalApp.Tests/Data/PreferenceServiceTests.cs b/JournalApp.Tests/Data/PreferenceServiceTests.cs
index dbae187..269d40a 100644
--- a/JournalApp.Tests/Data/PreferenceServiceTests.cs
+++ b/JournalApp.Tests/Data/PreferenceServiceTests.cs
@@ -43,6 +43,37 @@ public void SelectedAppTheme_WithInvalidStoredValue_FallsBackToUnspecified()
         result.Should().Be(AppTheme.Unspecified);
     }
 
+    [Fact]
+    public void HandleOsThemeChanged_KeepsTheUsersChoice()
+    {
+        // Arrange
+        var preferences = Services.GetService<IPreferences>();
+        var preferenceService = Services.GetService<PreferenceService>();
+        preferenceService.SelectedAppTheme = AppTheme.Light;
+
+        // Act
+        preferenceService.HandleOsThemeChanged();
+
+        // Assert
+        preferenceService.SelectedAppTheme.Should().Be(AppTheme.Light);
+        preferences.Get("theme", string.Empty).Should().Be(nameof(AppTheme.Light));
+    }
+
+    [Fact]
+    public void HandleOsThemeChanged_RaisesThemeChanged()
+    {
+        // Arrange
+        var preferenceService = Services.GetService<PreferenceService>();
+        var raised = 0;
+        preferenceService.ThemeChanged += (_, _) => raised++;
+
+        // Act
+        preferenceService.HandleOsThemeChanged();
+
+        // Assert
+        raised.Should().Be(1);
+    }
+
     [Fact]
     public void SafetyPlan_WithMalformedJson_ReturnsNull()
     {
diff --git a/JournalApp.Tests/MaterialThemeTests.cs b/JournalApp.Tests/MaterialThemeTests.cs
index 06573e0..963fdf0 100644
--- a/JournalApp.Tests/MaterialThemeTests.cs
+++ b/JournalApp.Tests/MaterialThemeTests.cs
@@ -16,6 +16,8 @@ public void DefaultSeedReproducesOrchidPalette()
         Hex(theme.PaletteLight.PrimaryLighten).Should().Be("#FFD8EE");
         Hex(theme.PaletteLight.PrimaryDarken).Should().Be("#69345A");
         Hex(theme.PaletteLight.Secondary).Should().Be("#705766");
+        Hex(theme.PaletteLight.SecondaryLighten).Should().Be("#FADAEB");
+        Hex(theme.PaletteLight.SecondaryDarken).Should().Be("#57404E");
         Hex(theme.PaletteLight.Tertiary).Should().Be("#81533F");
         Hex(theme.PaletteLight.Error).Should().Be("#BA1A1A");
         Hex(theme.PaletteLight.Info).Should().Be("#1A59C2");
@@ -38,6 +40,8 @@ public void DefaultSeedReproducesOrchidPalette()
         Hex(theme.PaletteDark.PrimaryLighten).Should().Be("#69345A");
         Hex(theme.PaletteDark.PrimaryDarken).Should().Be("#FFD8EE");
         Hex(theme.PaletteDark.Secondary).Should().Be("#DDBECF");
+        Hex(theme.PaletteDark.SecondaryLighten).Should().Be("#57404E");
+        Hex(theme.PaletteDark.SecondaryDarken).Should().Be("#FADAEB");
         Hex(theme.PaletteDark.Tertiary).Should().Be("#F4B9A0");
         Hex(theme.PaletteDark.Error).Should().Be("#FFB4AB");
         Hex(theme.PaletteDark.Info).Should().Be("#B0C6FF");
@@ -64,4 +68,49 @@ public void OtherSeedsProduceDistinctPalettes()
         Hex(blue.PaletteLight.Primary).Should().NotBe("#844C72");
         Hex(blue.PaletteLight.Background).Should().NotBe(Hex(blue.PaletteLight.Surface), "the surface container ladder should keep distinct tones");
     }
+
+    [Fact]
+    public void ToggleSegmentPairsStayLegibleForAnySeed()
+    {
+        // Light mode surfaces are only ~1.05:1 apart, so the toggle group leans on chroma and on a filled primary selection instead of tone.
+        // These are the pairs app.css actually draws, and every one of them has to clear the M3 4.5:1 text floor whatever seed the device supplies.
+        foreach (var seed in new uint[] { MaterialTheme.DefaultSeed, 0xFF4285F4, 0xFF4CAF50, 0xFFFF9800, 0xFF000000, 0xFFFFFFFF })
+        {
+            var theme = MaterialTheme.FromSeed(seed);
+
+            foreach (var palette in new Palette[] { theme.PaletteLight, theme.PaletteDark })
+            {
+                Contrast(palette.SecondaryDarken, palette.SecondaryLighten).Should()
+                    .BeGreaterThan(4.5, $"an unselected segment label must read on its tonal fill (seed {seed:X8})");
+
+                Contrast(palette.PrimaryContrastText, palette.Primary).Should()
+                    .BeGreaterThan(4.5, $"a selected segment label must read on the filled primary pill (seed {seed:X8})");
+
+                Contrast(palette.Primary, palette.SecondaryLighten).Should()
+                    .BeGreaterThan(3, $"the selected segment must separate from its unselected neighbours (seed {seed:X8})");
+
+                Contrast(palette.Primary, palette.Surface).Should()
+                    .BeGreaterThan(3, $"the selected segment must separate from the row it sits on (seed {seed:X8})");
+            }
+        }
+    }
+
+    private static double Contrast(MudColor a, MudColor b)
+    {
+        var la = RelativeLuminance(a);
+        var lb = RelativeLuminance(b);
+
+        return la > lb ? (la + 0.05) / (lb + 0.05) : (lb + 0.05) / (la + 0.05);
+    }
+
+    private static double RelativeLuminance(MudColor color)
+    {
+        static double Channel(byte value)
+        {
+            var srgb = value / 255.0;
+            return srgb <= 0.03928 ? srgb / 12.92 : Math.Pow((srgb + 0.055) / 1.055, 2.4);
+        }
+
+        return (0.2126 * Channel(color.R)) + (0.7152 * Channel(color.G)) + (0.0722 * Channel(color.B));
+    }
 }
diff --git a/JournalApp/Components/DataPointView.razor b/JournalApp/Components/DataPointView.razor
index 0768125..19d0c96 100644
--- a/JournalApp/Components/DataPointView.razor
+++ b/JournalApp/Components/DataPointView.razor
@@ -21,7 +21,8 @@ else if (Point.Type == PointType.Sleep)
 }
 else if (Point.Type == PointType.Scale)
 {
-    <MudRating SelectedValue="DataPointService.GetScaleIndex(Point)" SelectedValueChanged="ScaleValueChanged" FullIcon="@Icons.Material.Rounded.Circle" EmptyIcon="@Icons.Material.Rounded.Circle" Color="Color.Primary" />
+    @* A filled and an outlined dot, because MudRating paints both icons in the same color and two filled circles would look identical. *@
+    <MudRating SelectedValue="DataPointService.GetScaleIndex(Point)" SelectedValueChanged="ScaleValueChanged" FullIcon="@Icons.Material.Rounded.Circle" EmptyIcon="@Icons.Material.Rounded.RadioButtonUnchecked" Color="Color.Primary" />
 }
 else if (Point.Type == PointType.LowToHigh)
 {
diff --git a/JournalApp/Components/JaMessageBox.razor b/JournalApp/Components/JaMessageBox.razor
index 8717432..ac3d305 100644
--- a/JournalApp/Components/JaMessageBox.razor
+++ b/JournalApp/Components/JaMessageBox.razor
@@ -3,13 +3,13 @@
 
 <MudDialog @attributes="UserAttributes" Class="@Classname" OnBackdropClick="OnBackdropClick">
     <TitleContent>
-        @if (TitleContent is null)
+        @if (TitleContent is not null)
         {
-            <MudText Typo="Typo.h6">@Title</MudText>
+            @TitleContent
         }
-        else
+        else if (!string.IsNullOrWhiteSpace(Title))
         {
-            @TitleContent
+            <MudText Typo="Typo.h6">@Title</MudText>
         }
     </TitleContent>
     <DialogContent>
diff --git a/JournalApp/Data/MaterialTheme.cs b/JournalApp/Data/MaterialTheme.cs
index 5ce4140..cb79ffc 100644
--- a/JournalApp/Data/MaterialTheme.cs
+++ b/JournalApp/Data/MaterialTheme.cs
@@ -59,15 +59,15 @@ public static MudTheme FromSeed(uint seed)
                 Info = Hex(info[40]),
                 InfoContrastText = "#FFFFFF",
                 InfoLighten = Hex(info[90]),
-                InfoDarken = Hex(info[10]),
+                InfoDarken = Hex(info[30]),
                 Success = Hex(success[40]),
                 SuccessContrastText = "#FFFFFF",
                 SuccessLighten = Hex(success[90]),
-                SuccessDarken = Hex(success[10]),
+                SuccessDarken = Hex(success[30]),
                 Warning = Hex(warning[40]),
                 WarningContrastText = "#FFFFFF",
                 WarningLighten = Hex(warning[90]),
-                WarningDarken = Hex(warning[10]),
+                WarningDarken = Hex(warning[30]),
                 Background = Hex(neutral[98]),
                 BackgroundGray = Hex(neutral[96]),
                 Surface = Hex(neutral[94]),
@@ -85,6 +85,9 @@ public static MudTheme FromSeed(uint seed)
                 Dark = Hex(neutral[20]),
                 DarkContrastText = Hex(neutral[95]),
 
+                // M3 scrim is the neutral black at 32%; MudBlazor's default is a grey that lightens the page in dark mode.
+                OverlayDark = "rgba(0,0,0,0.32)",
+
                 HoverOpacity = 0.08,
             },
 
@@ -135,16 +138,26 @@ public static MudTheme FromSeed(uint seed)
                 Dark = Hex(neutral[90]),
                 DarkContrastText = Hex(neutral[20]),
 
+                // M3 scrim is the neutral black at 32%; MudBlazor's default is a grey that lightens the page in dark mode.
+                OverlayDark = "rgba(0,0,0,0.32)",
+
                 HoverOpacity = 0.08,
             },
 
             LayoutProperties = new()
             {
-                DefaultBorderRadius = "8px",
+                // The M3 medium corner, so anything not styled by hand still lands on a real shape token.
+                DefaultBorderRadius = "12px",
             },
 
             Typography = new()
             {
+                Default = new DefaultTypography()
+                {
+                    // The device's own UI font is what makes a WebView app read as native; Roboto is the Android fallback.
+                    FontFamily = ["system-ui", "Roboto", "Helvetica", "Arial", "sans-serif"],
+                },
+
                 Button = new ButtonTypography()
                 {
                     TextTransform = "none",
diff --git a/JournalApp/Data/PreferenceService.cs b/JournalApp/Data/PreferenceService.cs
index f9bf1be..d23fea3 100644
--- a/JournalApp/Data/PreferenceService.cs
+++ b/JournalApp/Data/PreferenceService.cs
@@ -52,7 +52,7 @@ public PreferenceService(ILogger<PreferenceService> logger, IPreferences prefere
             _application.RequestedThemeChanged += Application_RequestedThemeChanged;
         }
 
-        UpdateStatusBar();
+        ApplyPlatformTheme();
     }
 
     public AppTheme SelectedAppTheme
@@ -181,26 +181,44 @@ public DateTimeOffset LastExportDate
 
     public event EventHandler<bool> ThemeChanged;
 
-    private void Application_RequestedThemeChanged(object sender, AppThemeChangedEventArgs e)
-    {
-        _theme = e.RequestedTheme;
-        OnThemeChanged();
-    }
+    private void Application_RequestedThemeChanged(object sender, AppThemeChangedEventArgs e) => HandleOsThemeChanged();
+
+    /// <summary>
+    /// Repaints for an OS theme change without touching the theme the user picked, which stays whatever they chose including System.
+    /// </summary>
+    internal void HandleOsThemeChanged() => OnThemeChanged();
 
     private void OnThemeChanged()
     {
-        UpdateStatusBar();
+        ApplyPlatformTheme();
         ThemeChanged?.Invoke(this, IsDarkMode);
     }
 
-    private void UpdateStatusBar()
+    /// <summary>
+    /// Pushes the active theme out to the native chrome that the web layer can't reach.
+    /// </summary>
+    public void ApplyPlatformTheme()
     {
+        if (_application == null)
+            return;
+
+        logger.LogDebug("Applying platform theme");
+
+        // The window's appearance drives the native resources the WebView sits inside, so it follows the in-app choice rather than only the OS.
+        if (_application.UserAppTheme != SelectedAppTheme)
+            _application.UserAppTheme = SelectedAppTheme;
+
+        var surface = IsDarkMode ? GetTheme().PaletteDark.Background : GetTheme().PaletteLight.Background;
+        var background = Color.FromRgb(surface.R, surface.G, surface.B);
+
+        // On Android 15 and up the system bars are transparent, so what shows behind them is this page background rather than any status bar color we set.
+        if (_application.Windows.Count > 0 && _application.Windows[0].Page is ContentPage page)
+            page.BackgroundColor = background;
+
         if (OperatingSystem.IsAndroid())
         {
-            logger.LogDebug("Updating status bar");
-            // Match the M3 surface tone so the status bar blends into the page header.
-            var surface = IsDarkMode ? GetTheme().PaletteDark.Background : GetTheme().PaletteLight.Background;
-            StatusBar.SetColor(Color.FromRgb(surface.R, surface.G, surface.B));
+            // Still needed below Android 15, where the status bar has its own color instead of showing the page through.
+            StatusBar.SetColor(background);
             StatusBar.SetStyle(IsDarkMode ? StatusBarStyle.LightContent : StatusBarStyle.DarkContent);
         }
     }
diff --git a/JournalApp/MainPage.xaml b/JournalApp/MainPage.xaml
index 24477a3..2562bb7 100644
--- a/JournalApp/MainPage.xaml
+++ b/JournalApp/MainPage.xaml
@@ -5,6 +5,7 @@
              x:Class="JournalApp.MainPage"
              SafeAreaEdges="Container"
              BackgroundColor="{AppThemeBinding Light=#FFF8F9, Dark=#181215}">
+    <!-- The background is a first-frame default only; PreferenceService.ApplyPlatformTheme repaints it from the generated palette so device colors reach the letterbox too. -->
 
     <BlazorWebView HostPage="wwwroot/index.html" BlazorWebViewInitialized="OnBlazorWebViewInitialized">
         <BlazorWebView.RootComponents>
diff --git a/JournalApp/Pages/Calendar/CalendarMonth.razor.css b/JournalApp/Pages/Calendar/CalendarMonth.razor.css
index 2ba557c..db64492 100644
--- a/JournalApp/Pages/Calendar/CalendarMonth.razor.css
+++ b/JournalApp/Pages/Calendar/CalendarMonth.razor.css
@@ -5,10 +5,13 @@
   padding-top: 16px;
 }
 
+/* The month grid is a group container like every other list group: flat, tonal, large radius. */
 ::deep .calendar-month-grid {
   display: flex;
   flex-direction: column;
-  padding: 0;
+  padding: 4px;
+  border-radius: var(--ja-shape-lg-increased);
+  box-shadow: none;
 }
 
 ::deep .calendar-day-cell {
@@ -18,14 +21,27 @@
   padding: 1%;
   min-width: 32px;
   max-width: 96px;
-  border-radius: 8px;
-  transition: transform 0.1s ease-out;
+  border-radius: var(--ja-shape-md);
+  transition: transform var(--ja-motion-spatial);
 }
 
 ::deep .calendar-day-cell:has(:not(.calendar-day-empty)):active {
   transform: scale(0.95);
 }
 
+/* M3 calendar weekday labels are label-medium on onSurfaceVariant, not bold body text. */
+::deep .calendar-day-header {
+  justify-content: center;
+  color: var(--mud-palette-text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+::deep .calendar-day-header b {
+  font-weight: 500;
+}
+
 /* M3 marks today with a solid primary ring instead of a dashed generic outline. */
 ::deep .calendar-day-current {
   outline: 3px solid var(--mud-palette-primary);
diff --git a/JournalApp/Pages/ManageCategoriesPage.razor.css b/JournalApp/Pages/ManageCategoriesPage.razor.css
index a0bac21..e63a247 100644
--- a/JournalApp/Pages/ManageCategoriesPage.razor.css
+++ b/JournalApp/Pages/ManageCategoriesPage.razor.css
@@ -2,7 +2,7 @@
 .manage-list {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 4px;
 }
 
 .manage-category {
@@ -11,18 +11,18 @@
   align-items: center;
   gap: 4px;
   background-color: var(--mud-palette-surface);
-  border-radius: 6px;
+  border-radius: var(--ja-shape-sm);
   padding: 6px 14px 6px 6px;
 }
 
 .manage-category:first-child {
-  border-top-left-radius: 18px;
-  border-top-right-radius: 18px;
+  border-top-left-radius: var(--ja-shape-lg-increased);
+  border-top-right-radius: var(--ja-shape-lg-increased);
 }
 
 .manage-category:last-child {
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
+  border-bottom-left-radius: var(--ja-shape-lg-increased);
+  border-bottom-right-radius: var(--ja-shape-lg-increased);
 }
 
 ::deep .manage-category-edit-button {
diff --git a/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor.css b/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor.css
index 02af801..563838f 100644
--- a/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor.css
+++ b/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor.css
@@ -2,7 +2,7 @@
 .safety-plan-items-container {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 4px;
 }
 
 ::deep .safety-plan-item {
@@ -10,18 +10,18 @@
   flex-direction: column;
   gap: 12px;
   background-color: var(--mud-palette-surface);
-  border-radius: 6px;
+  border-radius: var(--ja-shape-sm);
   padding: 14px 16px;
 }
 
 ::deep .safety-plan-item:first-child {
-  border-top-left-radius: 18px;
-  border-top-right-radius: 18px;
+  border-top-left-radius: var(--ja-shape-lg-increased);
+  border-top-right-radius: var(--ja-shape-lg-increased);
 }
 
 ::deep .safety-plan-item:last-child {
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
+  border-bottom-left-radius: var(--ja-shape-lg-increased);
+  border-bottom-right-radius: var(--ja-shape-lg-increased);
 }
 
 ::deep .safety-plan-item-header {
diff --git a/JournalApp/Pages/SettingsPage.razor.css b/JournalApp/Pages/SettingsPage.razor.css
index e62d60a..971eef0 100644
--- a/JournalApp/Pages/SettingsPage.razor.css
+++ b/JournalApp/Pages/SettingsPage.razor.css
@@ -8,7 +8,7 @@
 .settings-group {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 4px;
 }
 
 ::deep .settings-item {
@@ -16,18 +16,18 @@
   flex-direction: column;
   gap: 12px;
   background-color: var(--mud-palette-surface);
-  border-radius: 6px;
+  border-radius: var(--ja-shape-sm);
   padding: 14px 16px;
 }
 
 ::deep .settings-item:first-child {
-  border-top-left-radius: 18px;
-  border-top-right-radius: 18px;
+  border-top-left-radius: var(--ja-shape-lg-increased);
+  border-top-right-radius: var(--ja-shape-lg-increased);
 }
 
 ::deep .settings-item:last-child {
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
+  border-bottom-left-radius: var(--ja-shape-lg-increased);
+  border-bottom-right-radius: var(--ja-shape-lg-increased);
 }
 
 ::deep .settings-item-title {
diff --git a/JournalApp/Pages/Trends/TrendsPage.razor b/JournalApp/Pages/Trends/TrendsPage.razor
index f0b534b..1b4909d 100644
--- a/JournalApp/Pages/Trends/TrendsPage.razor
+++ b/JournalApp/Pages/Trends/TrendsPage.razor
@@ -17,6 +17,25 @@
 </header>
 
 <main class="page-body">
+    @if (!_loaded)
+    {
+        <div class="trends-status">
+            <MudProgressCircular Color="Color.Primary" Indeterminate />
+        </div>
+    }
+    else if (AllPoints.Count == 0)
+    {
+        <div class="trends-status">
+            <MudIcon Class="trends-status-icon" Icon="@Icons.Material.Rounded.ShowChart" />
+
+            <MudText Typo="Typo.h6">Nothing to chart yet</MudText>
+
+            <MudText Class="trends-status-detail" Typo="Typo.body2" Align="Align.Center">
+                Anything you record on these days will show up here.
+            </MudText>
+        </div>
+    }
+
     <div id="trends-category-list">
         @foreach (var (category, points) in AllPoints.OrderBy(x => x.Key.Group).ThenBy(x => x.Key.Index))
         {
@@ -52,6 +71,8 @@
 
     Dictionary<DataPointCategory, IReadOnlyDictionary<DateOnly, IReadOnlyCollection<DataPoint>>> AllPoints = new();
 
+    bool _loaded;
+
     protected override void OnInitialized()
     {
         logger.LogDebug("Initializing");
@@ -68,6 +89,10 @@
         logger.LogInformation("Loading trends for {StartDate}..{EndDate}", SelectedDates[0], SelectedDates[^1]);
         var sw = Stopwatch.StartNew();
 
+        // Charts take a moment to come back, and without this the page is blank in exactly the same way an empty month is.
+        _loaded = false;
+        StateHasChanged();
+
         await using var db = await DbFactory.CreateDbContextAsync();
 
         // All the points we want to show.
@@ -97,6 +122,8 @@
             AllPoints.Add(group.Key, pointsByDate);
         }
 
+        _loaded = true;
+
         sw.Stop();
         logger.LogInformation("Loaded trends data in {ElapsedMilliseconds}ms (categories: {CategoryCount})", sw.ElapsedMilliseconds, AllPoints.Count);
     }
diff --git a/JournalApp/Pages/Trends/TrendsPage.razor.css b/JournalApp/Pages/Trends/TrendsPage.razor.css
index e2bba2d..6d2a18a 100644
--- a/JournalApp/Pages/Trends/TrendsPage.razor.css
+++ b/JournalApp/Pages/Trends/TrendsPage.razor.css
@@ -10,9 +10,30 @@
   flex-direction: column;
 }
 
+/* A month with no entries used to render nothing at all, which reads as a broken page rather than an empty one. */
+.trends-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20vh;
+  color: var(--mud-palette-text-secondary);
+}
+
+::deep .trends-status-icon {
+  width: 48px;
+  height: 48px;
+  font-size: 48px;
+}
+
+::deep .trends-status-detail {
+  max-width: 32ch;
+}
+
+/* Each chart sits in a group container, so it takes the same large radius as a grouped list. */
 ::deep .trend-view {
   padding: 8px;
   gap: 16px;
   background-color: var(--mud-palette-surface);
-  border-radius: 16px;
+  border-radius: var(--ja-shape-lg-increased);
 }
diff --git a/JournalApp/Pages/Worksheets/WorksheetsPage.razor.css b/JournalApp/Pages/Worksheets/WorksheetsPage.razor.css
index 90eb448..a6e9916 100644
--- a/JournalApp/Pages/Worksheets/WorksheetsPage.razor.css
+++ b/JournalApp/Pages/Worksheets/WorksheetsPage.razor.css
@@ -13,30 +13,37 @@
 .worksheet-group-items {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 4px;
   list-style-type: none;
   padding: 0;
   margin: 0;
 }
 
+/* The title is a MudLink whose inline box hugs its text, so a wrapped title used to sit lower in its card than a single-line one. */
+/* Blocking it out gives every card the same 14px above the first line of the title. */
 ::deep .worksheet-view {
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: stretch;
   gap: 4px;
   background-color: var(--mud-palette-surface);
-  border-radius: 6px;
+  border-radius: var(--ja-shape-sm);
   padding: 14px 16px;
 }
 
+::deep .worksheet-view-title {
+  display: block;
+  line-height: 1.4;
+}
+
 ::deep .worksheet-view:first-child {
-  border-top-left-radius: 18px;
-  border-top-right-radius: 18px;
+  border-top-left-radius: var(--ja-shape-lg-increased);
+  border-top-right-radius: var(--ja-shape-lg-increased);
 }
 
 ::deep .worksheet-view:last-child {
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
+  border-bottom-left-radius: var(--ja-shape-lg-increased);
+  border-bottom-right-radius: var(--ja-shape-lg-increased);
 }
 
 ::deep .worksheet-view-title {
@@ -59,10 +66,11 @@
   margin: 0;
 }
 
+/* M3 assist chips: a medium-radius container with the outline role, the only neutral boundary that clears 3:1 on a light surface. */
 .worksheet-group-toc-item {
   white-space: nowrap;
-  border: 1px solid var(--mud-palette-lines-default);
-  border-radius: 8px;
+  border: 1px solid var(--mud-palette-lines-inputs);
+  border-radius: var(--ja-shape-md);
   padding: 6px 12px;
 }
 
diff --git a/JournalApp/Platforms/Android/MainActivity.cs b/JournalApp/Platforms/Android/MainActivity.cs
index e97653c..eba6853 100644
--- a/JournalApp/Platforms/Android/MainActivity.cs
+++ b/JournalApp/Platforms/Android/MainActivity.cs
@@ -10,6 +10,11 @@ public class MainActivity : MauiAppCompatActivity
 {
     protected override void OnCreate(Bundle savedInstanceState)
     {
+        // The WebView's selection handles, magnifier and caret are native chrome tinted from the activity theme, and the theme is read once when the view is created.
+        // The theme's own accent is the stock Orchid, so it only needs an overlay while the palette is actually coming from the wallpaper instead.
+        if (Preferences.Default.Get("device_colors", true) && OperatingSystem.IsAndroidVersionAtLeast(31))
+            Theme.ApplyStyle(Resource.Style.JournalApp_DeviceAccent, force: true);
+
         base.OnCreate(savedInstanceState);
 
         // The web layer dodges the keyboard itself by watching the visual viewport, so keep the window static and let CSS animate the dodge.
diff --git a/JournalApp/Platforms/Android/Resources/values-night-v31/styles.xml b/JournalApp/Platforms/Android/Resources/values-night-v31/styles.xml
new file mode 100644
index 0000000..e1b6649
--- /dev/null
+++ b/JournalApp/Platforms/Android/Resources/values-night-v31/styles.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Tone 200 is the system step matching the dark scheme's tone 80 primary. -->
+    <style name="JournalApp.DeviceAccent" parent="">
+        <item name="colorAccent">@android:color/system_accent1_200</item>
+        <item name="colorSecondary">@android:color/system_accent1_200</item>
+        <item name="colorControlActivated">@android:color/system_accent1_200</item>
+    </style>
+</resources>
diff --git a/JournalApp/Platforms/Android/Resources/values-night/colors.xml b/JournalApp/Platforms/Android/Resources/values-night/colors.xml
index 052cb0c..9632a5b 100644
--- a/JournalApp/Platforms/Android/Resources/values-night/colors.xml
+++ b/JournalApp/Platforms/Android/Resources/values-night/colors.xml
@@ -2,4 +2,6 @@
 <resources>
     <!-- Matches the Orchid theme's dark background (neutral 6) so the splash flows straight into the Blazor loading screen. -->
     <color name="splash_background">#181215</color>
+    <!-- The dark palette lifts the primary to tone 80, and the selection handles have to follow or they read as ink on ink. -->
+    <color name="colorAccent">#F7B1DE</color>
 </resources>
diff --git a/JournalApp/Platforms/Android/Resources/values-v31/styles.xml b/JournalApp/Platforms/Android/Resources/values-v31/styles.xml
index 89ff053..baf48c3 100644
--- a/JournalApp/Platforms/Android/Resources/values-v31/styles.xml
+++ b/JournalApp/Platforms/Android/Resources/values-v31/styles.xml
@@ -1,7 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <!-- No windowSplashScreenAnimatedIcon: the system then shows the real launcher icon, plate and all, which is the standard Android 12+ splash look. -->
-    <style name="Maui.SplashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="Maui.SplashTheme" parent="JournalApp.Theme">
         <item name="android:windowSplashScreenBackground">@color/splash_background</item>
     </style>
+
+    <!-- Applied over the activity theme at startup only while the app is actually seeded from the wallpaper, so the native handles track the same palette the UI does. -->
+    <!-- Tone 600 is the system step closest to the primary the generator produces for a light scheme. -->
+    <style name="JournalApp.DeviceAccent" parent="">
+        <item name="colorAccent">@android:color/system_accent1_600</item>
+        <item name="colorSecondary">@android:color/system_accent1_600</item>
+        <item name="colorControlActivated">@android:color/system_accent1_600</item>
+    </style>
 </resources>
diff --git a/JournalApp/Platforms/Android/Resources/values/colors.xml b/JournalApp/Platforms/Android/Resources/values/colors.xml
index 40d24be..6990704 100644
--- a/JournalApp/Platforms/Android/Resources/values/colors.xml
+++ b/JournalApp/Platforms/Android/Resources/values/colors.xml
@@ -2,6 +2,8 @@
 <resources>
     <color name="colorPrimary">#844C72</color>
     <color name="colorPrimaryDark">#844C72</color>
+    <!-- The stock Orchid primary, used for the native selection handles below Android 12 and whenever there is no system palette to follow. -->
+    <color name="colorAccent">#844C72</color>
     <!-- Matches the Orchid theme's light background (neutral 98) so the splash flows straight into the Blazor loading screen. -->
     <color name="splash_background">#FFF8F9</color>
     <!-- The launcher icon's pink plate, drawn behind the pre-Android-12 splash glyph so it reads as the app icon; 12+ shows the real launcher icon instead. -->
diff --git a/JournalApp/Platforms/Android/Resources/values/styles.xml b/JournalApp/Platforms/Android/Resources/values/styles.xml
index 5f3932d..78b4cd0 100644
--- a/JournalApp/Platforms/Android/Resources/values/styles.xml
+++ b/JournalApp/Platforms/Android/Resources/values/styles.xml
@@ -1,6 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="Maui.SplashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <!-- The selection handles, the magnifier and the caret inside the WebView are native chrome tinted from the activity theme, which CSS cannot reach. -->
+    <!-- Without these the platform falls back to the Material Components default secondary, a teal that belongs to no palette this app generates. -->
+    <style name="JournalApp.Theme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+        <item name="colorAccent">@color/colorAccent</item>
+        <item name="colorSecondary">@color/colorAccent</item>
+        <item name="colorControlActivated">@color/colorAccent</item>
+    </style>
+
+    <style name="Maui.SplashTheme" parent="JournalApp.Theme">
         <item name="android:windowBackground">@drawable/splash_screen</item>
     </style>
+
+    <!-- Below Android 12 there is no wallpaper palette to follow, so the device-accent overlay is the stock Orchid the app falls back to anyway. -->
+    <style name="JournalApp.DeviceAccent" parent="">
+        <item name="colorAccent">@color/colorAccent</item>
+        <item name="colorSecondary">@color/colorAccent</item>
+        <item name="colorControlActivated">@color/colorAccent</item>
+    </style>
 </resources>
diff --git a/JournalApp/wwwroot/app.css b/JournalApp/wwwroot/app.css
index aaadd96..47602eb 100644
--- a/JournalApp/wwwroot/app.css
+++ b/JournalApp/wwwroot/app.css
@@ -1,4 +1,4 @@
-* {
+* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -6,12 +6,44 @@ body {
   user-select: none;
   --mud-palette-action-default: var(--mud-palette-text-primary);
   color-scheme: light dark;
+
+  /* The M3 shape scale, so every container picks its radius from one ladder instead of an ad-hoc number. */
+  --ja-shape-xs: 4px;
+  --ja-shape-sm: 8px;
+  --ja-shape-md: 12px;
+  --ja-shape-lg: 16px;
+  --ja-shape-lg-increased: 20px;
+  --ja-shape-xl: 28px;
+  --ja-shape-full: 999px;
+
+  /* M3 Expressive motion. Spatial springs are underdamped so size, position and shape overshoot slightly. */
+  --ja-motion-spatial: 300ms cubic-bezier(0.27, 1.06, 0.18, 1);
+  /* Effects springs are critically damped, so color and opacity must never overshoot. */
+  --ja-motion-effects: 200ms cubic-bezier(0.2, 0, 0, 1);
+
+  /* The two soft lifts the app uses: a container resting above the page, and the header once content passes under it. */
+  --ja-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.10), 0 2px 6px 1px rgba(0, 0, 0, 0.07);
+  --ja-shadow-scrolled: 0 6px 10px -6px rgba(0, 0, 0, 0.16), 0 10px 24px -10px rgba(0, 0, 0, 0.10);
+  /* M3 elevation level 3, which is what dialogs and menus sit at. */
+  --ja-shadow-level3: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 
   body::-webkit-scrollbar {
     display: none;
   }
 
+/* Text selection and the caret otherwise fall back to the platform accent, which is the stock blue rather than the app's primary. */
+::selection {
+  background-color: var(--mud-palette-primary-lighten);
+  color: var(--mud-palette-primary-darken);
+}
+
+input,
+textarea,
+[contenteditable] {
+  caret-color: var(--mud-palette-primary);
+}
+
 /* Background colors come from the theme-matched media queries at the bottom so the native splash, this loading screen, and the app all share one tone. */
 #splash-screen {
   display: flex;
@@ -28,31 +60,39 @@ body {
   font-size: 6vw;
 }
 
-/* The sticky header ends flush at the pill so scrolling content passes under a clean edge instead of a same-color strip. */
+/* The day, month and year switcher is a full-corner container that rests above the page, like an M3 search bar. */
+/* It carries its own lift instead of relying on a full-width line under the header, which used to slice straight through the pill. */
 .switcher {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 999px;
+  min-height: 48px;
+  border-radius: var(--ja-shape-full);
   margin: 0 8px;
-  background-color: var(--mud-palette-surface);
+  background-color: var(--mud-palette-gray-lighter);
+  box-shadow: var(--ja-shadow-raised);
+  /* The steppers are supporting icons next to the date, so they read on onSurfaceVariant like every other trailing icon. */
+  --mud-palette-action-default: var(--mud-palette-text-secondary);
 }
 
 .switcher-header {
   display: flex;
   justify-content: center;
-  width: 55vw;
+  flex: 1;
+  min-width: 0;
 }
 
 .page {
 }
 
+/* M3 small top app bar: 64dp tall, title-large title, trailing icons on the neutral action color. */
 .page-toolbar {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
-  padding: 0;
+  /* Android insets the leading glyph 16dp; an icon button already carries 12dp of its own, so the row adds the last 4dp. */
+  padding: 0 4px;
   box-shadow: none;
   background-color: var(--mud-palette-background);
   color: var(--mud-palette-text-primary);
@@ -65,6 +105,11 @@ body {
   font-weight: 400;
 }
 
+/* The leading navigation icon is onSurface; only the trailing icons are onSurfaceVariant. */
+.page-toolbar > .mud-icon-button:first-child {
+  color: var(--mud-palette-text-primary);
+}
+
 /* Match the date button to title-large as well. */
 .switcher-header .mud-typography-h5 {
   font-size: 22px;
@@ -83,7 +128,13 @@ body {
   color: var(--mud-palette-text-primary);
 }
 
-/* On-scroll separation for the sticky header: a soft M3 level-1 shadow fades in once content passes underneath. */
+/* Only a header carrying the switcher needs room under it, so scrolling content passes below the pill instead of through it. */
+/* Pages without one stay as tight as they were. */
+.page-header:has(.switcher) {
+  padding-bottom: 8px !important;
+}
+
+/* On-scroll separation for the sticky header: a soft lift fades in once content passes underneath. */
 /* MD3 proper would retone the container instead, but that desyncs the natively colored status bar, so elevation stands in until edge-to-edge lands. */
 @supports (animation-timeline: scroll()) {
   .page-header {
@@ -93,9 +144,11 @@ body {
   }
 }
 
+/* The lift carries an outlineVariant hairline as well, because a black shadow does nothing over a tone-6 dark surface. */
+/* The hairline has to come from the palette rather than a prefers-color-scheme branch: the WebView reports the OS theme, not the theme the user picked in the app. */
 @keyframes header-on-scroll {
   to {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 1px 0 var(--mud-palette-lines-default), var(--ja-shadow-scrolled);
   }
 }
 
@@ -105,7 +158,7 @@ body {
   margin: 0 auto !important;
   padding: 8px !important;
   padding-bottom: 15vh !important;
-  animation: fadeInUp 0.15s ease-out;
+  animation: fadeInUp var(--ja-motion-spatial);
 }
 
 @keyframes fadeInUp {
@@ -143,93 +196,171 @@ body {
 }
 
 /* M3E connected button group: tonal segments separated by 2px gaps instead of an outlined pill with dividers. */
-/* The row of segments keeps fully rounded outer corners, and the selected segment morphs to a full pill with a secondaryContainer fill. */
+/* The row of segments keeps fully rounded outer corners, and the selected segment morphs to a full pill. */
 .mud-toggle-group {
   flex-grow: 1;
   gap: 2px;
   border: none !important;
+  border-radius: var(--ja-shape-full);
   background-color: transparent;
 }
 
+/* MudBlazor pulls each segment 1px left to collapse outlined borders, which eats half of the 2dp M3E gap. */
 .mud-toggle-group .mud-toggle-item {
-  color: var(--mud-palette-text-primary);
-  background-color: var(--mud-palette-gray-lighter);
+  margin-left: 0 !important;
+}
+
+/* Tone alone cannot separate a control from its card in light mode, where neighbouring neutral surfaces are only 1.05:1 apart. */
+/* Chroma can: an unselected segment takes the tonal-button pair (secondaryContainer on onSecondaryContainer, 7.25:1), and the selected one is a filled primary pill (5.5:1 against the card). */
+.mud-toggle-group .mud-toggle-item {
+  color: var(--mud-palette-secondary-darken);
+  background-color: var(--mud-palette-secondary-lighten);
   border: none !important;
-  border-radius: 8px;
+  /* The M3E extra-small connected group height. The timeline stacks a lot of these, so the taller sizes cost too much of the screen. */
   min-height: 32px;
-  transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: var(--ja-shape-sm);
+  transition: border-radius var(--ja-motion-spatial), background-color var(--ja-motion-effects), color var(--ja-motion-effects);
 }
 
 .mud-toggle-group .mud-toggle-item:first-child {
-  border-top-left-radius: 999px;
-  border-bottom-left-radius: 999px;
+  border-top-left-radius: var(--ja-shape-full);
+  border-bottom-left-radius: var(--ja-shape-full);
 }
 
 .mud-toggle-group .mud-toggle-item:last-child {
-  border-top-right-radius: 999px;
-  border-bottom-right-radius: 999px;
+  border-top-right-radius: var(--ja-shape-full);
+  border-bottom-right-radius: var(--ja-shape-full);
 }
 
 .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
+  background-color: var(--mud-palette-primary);
+  color: var(--mud-palette-primary-text);
+  border-radius: var(--ja-shape-full);
+}
+
+/* MudBlazor renders an unselected segment as an outlined button, whose own :active rule swaps the container to primary-hover, so the tonal fill vanished exactly while a finger was on it. */
+/* M3 press feedback is a state layer composited over the resting fill, never a container swap, so both states keep their fill and take a 10% onSurface layer. */
+.mud-toggle-group .mud-toggle-item:not(.mud-toggle-item-selected):active,
+.mud-toggle-group .mud-toggle-item:not(.mud-toggle-item-selected):focus-visible {
   background-color: var(--mud-palette-secondary-lighten);
-  color: var(--mud-palette-secondary-darken);
-  border-radius: 999px;
+}
+
+.mud-toggle-group .mud-toggle-item:active {
+  background-image: linear-gradient(rgba(var(--mud-palette-text-primary-rgb), 0.10), rgba(var(--mud-palette-text-primary-rgb), 0.10));
 }
 
 .mud-button {
-  border-radius: 999px;
+  border-radius: var(--ja-shape-full);
 }
 
-/* M3 outlined buttons and button groups use the neutral outline-variant, not a text- or primary-tinted border. */
-.mud-button-outlined {
-  border-color: var(--mud-palette-lines-default);
+/* M3 outlined buttons and button groups draw their boundary in the outline role, which is the only neutral that clears 3:1 against a light surface. */
+/* The compound selectors are needed because MudBlazor's own per-color rules outrank a single class. */
+.mud-button-outlined,
+.mud-button-outlined.mud-button-outlined-primary,
+.mud-button-outlined.mud-button-outlined-default {
+  border-color: var(--mud-palette-lines-inputs);
 }
 
 .mud-button-group-outlined.mud-button-group-override-styles .mud-button-root {
-  border-color: var(--mud-palette-lines-default);
+  border-color: var(--mud-palette-lines-inputs);
 }
 
+/* M3E connected button group geometry, the same one the toggle groups use: 2dp gaps, small inner corners, full outer corners. */
+/* MudBlazor collapses the inner corners to 0 and overlaps the members by 1px, which reads as a table rather than a button group. */
 .mud-button-group-root {
-  border-radius: 999px;
+  border-radius: var(--ja-shape-full);
+  gap: 2px;
+}
+
+.mud-button-group-horizontal:not(.mud-button-group-rtl) > .mud-button-root:not(:last-child),
+.mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:last-child) .mud-button-root {
+  border-top-right-radius: var(--ja-shape-sm);
+  border-bottom-right-radius: var(--ja-shape-sm);
+}
+
+.mud-button-group-horizontal:not(.mud-button-group-rtl) > .mud-button-root:not(:first-child),
+.mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:first-child) .mud-button-root {
+  border-top-left-radius: var(--ja-shape-sm);
+  border-bottom-left-radius: var(--ja-shape-sm);
+  margin-left: 0;
+}
+
+.mud-button-group-root > .mud-button-root:first-child {
+  border-top-left-radius: var(--ja-shape-full);
+  border-bottom-left-radius: var(--ja-shape-full);
+}
+
+.mud-button-group-root > .mud-button-root:last-child {
+  border-top-right-radius: var(--ja-shape-full);
+  border-bottom-right-radius: var(--ja-shape-full);
 }
 
 .mud-button-filled.mud-button-filled-primary {
   color: var(--mud-palette-primary-text);
 }
 
-/* M3 expressive slider: thick rounded track, primary fill, and a narrow bar handle instead of a floating circle. */
+/* M3E slider: a 16dp rounded track, primary active fill, and a narrow bar handle instead of a floating circle. */
+/* MudBlazor paints the range input above the active bar, so the inactive track moves onto the container beneath it and the active bar gets its own layer. */
 /* Selectors include the size class because MudBlazor's size rules (e.g. .mud-slider-small) otherwise win the cascade. */
-.mud-slider .mud-slider-input::-webkit-slider-runnable-track,
-.mud-slider.mud-slider-small .mud-slider-input::-webkit-slider-runnable-track {
-  height: 12px;
-  margin: 5px 0;
-  border-radius: 999px;
+.mud-slider.mud-slider-primary .mud-slider-input::-webkit-slider-runnable-track,
+.mud-slider.mud-slider-small .mud-slider-input::-webkit-slider-runnable-track,
+.mud-slider.mud-slider-medium .mud-slider-input::-webkit-slider-runnable-track {
+  background-color: transparent;
+  background-image: none;
+  height: 16px;
+  margin: 3px 0;
 }
 
 /* The inactive track carries the M3E stop indicator dot near its trailing end. */
-.mud-slider.mud-slider-primary .mud-slider-input::-webkit-slider-runnable-track {
+.mud-slider .mud-slider-inner-container::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 16px;
+  transform: translateY(-50%);
+  border-radius: var(--ja-shape-full);
   background-color: var(--mud-palette-secondary-lighten);
   background-image: radial-gradient(circle, var(--mud-palette-primary) 0 2px, transparent 2.5px);
   background-repeat: no-repeat;
-  background-position: right 5px center;
+  background-position: right 6px center;
   background-size: 5px 5px;
 }
 
 .mud-slider .mud-slider-filled,
-.mud-slider.mud-slider-small .mud-slider-filled {
-  height: 12px;
-  border-radius: 6px 2px 2px 6px;
+.mud-slider.mud-slider-small .mud-slider-filled,
+.mud-slider.mud-slider-medium .mud-slider-filled {
+  position: relative;
+  z-index: 1;
+  height: 16px;
+  border-radius: var(--ja-shape-full);
 }
 
 .mud-slider .mud-slider-input::-webkit-slider-thumb,
-.mud-slider.mud-slider-small .mud-slider-input::-webkit-slider-thumb {
+.mud-slider.mud-slider-small .mud-slider-input::-webkit-slider-thumb,
+.mud-slider.mud-slider-medium .mud-slider-input::-webkit-slider-thumb {
   width: 4px;
-  height: 24px;
+  height: 32px;
   transform: none;
-  border-radius: 2px;
-  margin-top: -6px;
-  /* M3E carves a gap between the handle and the track; surface-colored blocks either side of the bar fake it over the row container. */
-  box-shadow: 6px 0 0 var(--mud-palette-surface), -6px 0 0 var(--mud-palette-surface);
+  border-radius: var(--ja-shape-full);
+  margin-top: -8px;
+  background-color: var(--mud-palette-primary);
+  /* M3E carves a 6dp gap either side of the handle; a surface-colored spread ring cuts it out of both tracks at once. */
+  box-shadow: 0 0 0 6px var(--mud-palette-surface);
+}
+
+/* MudBlazor swaps in an M2 focus ring on press, which would drop the gap exactly while the handle is being dragged. */
+.mud-slider .mud-slider-input:active::-webkit-slider-thumb,
+.mud-slider .mud-slider-input:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 6px var(--mud-palette-surface) !important;
+}
+
+/* The active bar needs its own layer to clear the inactive track, which puts it above the range input too, so the input is lifted higher again or the handle and its gap are painted over. */
+.mud-slider .mud-slider-input {
+  z-index: 2;
 }
 
 /* M3 switch: 52x32 pill track with an outline, solid colors instead of translucent overlays, and a thumb that grows when checked. */
@@ -241,7 +372,7 @@ body {
 }
 
 .mud-switch-span .mud-switch-track {
-  border-radius: 999px;
+  border-radius: var(--ja-shape-full);
   opacity: 1;
   background-color: var(--mud-palette-gray-light);
   border: 2px solid var(--mud-palette-lines-inputs);
@@ -301,9 +432,34 @@ label.mud-switch.mud-disabled .mud-switch-span {
   margin-inline-start: 0;
 }
 
-/* M3 menus and popovers sit on surfaceContainerHigh. */
+/* MudBlazor's text alerts are a low-alpha wash that all but disappears on a light surface, so they take a real tonal container instead. */
+.mud-alert-text-info {
+  background-color: var(--mud-palette-info-lighten);
+}
+
+.mud-alert-text-warning {
+  background-color: var(--mud-palette-warning-lighten);
+}
+
+.mud-alert-text-error {
+  background-color: var(--mud-palette-error-lighten);
+}
+
+.mud-alert-text-success {
+  background-color: var(--mud-palette-success-lighten);
+}
+
+/* Menus and popovers take surfaceContainerHighest, one step above the dialog container, so a dropdown opened inside a dialog still separates from it. */
 .mud-popover {
-  --mud-palette-surface: var(--mud-palette-gray-lighter);
+  --mud-palette-surface: var(--mud-palette-gray-light);
+  border-radius: var(--ja-shape-lg);
+  max-width: calc(100vw - 16px);
+  box-shadow: var(--ja-shadow-level3);
+}
+
+.mud-popover.mud-popover-top-right,
+.mud-popover.mud-popover-bottom-right {
+  margin-right: 8px;
 }
 
 /* The keyboard overlays the WebView and shrinks the visual viewport; pinning the container to it glides dialogs out of the keyboard's way. */
@@ -322,12 +478,13 @@ body {
   padding-bottom: var(--keyboard-inset, 0px);
 }
 
-/* M3 dialogs sit on surfaceContainerHigh with the 24px container inset. */
+/* M3 dialogs sit on surfaceContainerHigh with the 24px container inset, at elevation Level3 rather than MudBlazor's M2 elevation 24. */
 .mud-dialog {
   padding: 24px !important;
   gap: 16px !important;
-  border-radius: 28px;
+  border-radius: var(--ja-shape-xl);
   --mud-palette-surface: var(--mud-palette-gray-lighter);
+  box-shadow: var(--ja-shadow-level3);
 }
 
 /* M3 dialog headline is headline-small on the leading edge, not a centered bold h6. */
@@ -338,6 +495,11 @@ body {
   justify-content: flex-start;
 }
 
+/* Message boxes ship an empty title, which would otherwise leave a headline-sized gap above the message. */
+.mud-dialog-title:not(:has(*)) {
+  display: none;
+}
+
 .mud-dialog-title .mud-typography-h6 {
   font-size: 24px;
   font-weight: 400;
@@ -349,6 +511,15 @@ body {
   color: var(--mud-palette-text-secondary);
 }
 
+/* The rule above is for supporting text, so anything the user actually reads back, edits or operates stays on onSurface. */
+.mud-dialog-content .mud-input-slot,
+.mud-dialog-content .mud-input-root,
+.mud-dialog-content .mud-select-input,
+.mud-dialog-content label.mud-switch,
+.mud-dialog-content .mud-expand-panel-text {
+  color: var(--mud-palette-text-primary);
+}
+
 .mud-dialog-actions {
   gap: 8px;
   justify-content: flex-end;
@@ -358,7 +529,7 @@ body {
 .mud-card {
   padding: 12px !important;
   gap: 12px !important;
-  border-radius: 16px;
+  border-radius: var(--ja-shape-md);
   box-shadow: none;
 }
 
@@ -389,10 +560,12 @@ body {
   display: none;
 }
 
-/* M3 snackbar: inverse surface. */
-.mud-snackbar {
+/* M3 snackbar: inverse surface. The compound selector is needed because MudBlazor's own .mud-snackbar-surface rule outranks a single class. */
+.mud-snackbar,
+.mud-snackbar.mud-snackbar-surface {
   background-color: var(--mud-palette-dark);
   color: var(--mud-palette-dark-text);
+  border-radius: var(--ja-shape-xs);
 }
 
 .emoji-button {
@@ -406,11 +579,14 @@ body {
 .emoji-popover-content {
   display: flex;
   flex-direction: column;
-  border-radius: 12px;
+  border-radius: var(--ja-shape-lg);
   box-shadow: var(--mud-elevation-8);
 }
 
-.list-group-title {
+/* M3 list section headers are title-small on onSurfaceVariant. The link variants inherit onSurface, so they need naming here too. */
+.list-group-title,
+.list-group-title.mud-link,
+a.list-group-title {
   font-size: var(--mud-typography-subtitle2-size);
   font-family: var(--mud-typography-subtitle2-family);
   font-weight: var(--mud-typography-subtitle2-weight);
@@ -428,38 +604,38 @@ body {
 .main-timeline .mud-card.data-point-group {
   background-color: transparent;
   padding: 0 !important;
-  gap: 3px !important;
+  gap: 4px !important;
 }
 
 .main-timeline .data-point-group .data-point-list {
-  gap: 3px;
+  gap: 4px;
 }
 
 .main-timeline .data-point-container {
   background-color: var(--mud-palette-surface);
-  border-radius: 6px;
+  border-radius: var(--ja-shape-sm);
   padding: 14px 16px;
 }
 
 .main-timeline .data-point-container:first-child {
-  border-top-left-radius: 18px;
-  border-top-right-radius: 18px;
+  border-top-left-radius: var(--ja-shape-lg-increased);
+  border-top-right-radius: var(--ja-shape-lg-increased);
 }
 
 .main-timeline .data-point-container:last-child {
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
+  border-bottom-left-radius: var(--ja-shape-lg-increased);
+  border-bottom-right-radius: var(--ja-shape-lg-increased);
 }
 
 /* When the group ends with an action row (New note), that row becomes the closing container instead of the last list item. */
 .main-timeline .data-point-group:has(.mud-card-actions .mud-button) .data-point-container:last-child {
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: var(--ja-shape-sm);
+  border-bottom-right-radius: var(--ja-shape-sm);
 }
 
 .main-timeline .mud-card-actions:has(.mud-button) {
   background-color: var(--mud-palette-surface);
-  border-radius: 6px 6px 18px 18px;
+  border-radius: var(--ja-shape-sm) var(--ja-shape-sm) var(--ja-shape-lg-increased) var(--ja-shape-lg-increased);
   padding: 12px 16px !important;
 }
 
@@ -470,6 +646,49 @@ body {
   letter-spacing: 0.15px;
 }
 
+/* Number and text rows are borderless transparent text, so an unedited one is invisible. */
+/* An active indicator alone says the value is editable, without a filled box turning a journal row into a form field. */
+.main-timeline .data-point-container-number .mud-input,
+.main-timeline .data-point-container-text .mud-input {
+  border-bottom: 1px solid var(--mud-palette-lines-inputs);
+}
+
+/* A number never needs the whole row, and an indicator far wider than the value it sits under reads as a stray rule. */
+.main-timeline .data-point-container-number .mud-input {
+  max-width: 120px;
+}
+
+.main-timeline .data-point-container-number .mud-input:focus-within,
+.main-timeline .data-point-container-text .mud-input:focus-within {
+  border-bottom-color: var(--mud-palette-primary);
+}
+
+/* ApexCharts bakes its own greys into the SVG it draws, so the axis ink, gridlines and tooltip are re-pointed at the palette here. */
+/* These rules can't live in the scoped stylesheet because the chart's SVG is created outside Blazor and carries no scope attribute. */
+.apexcharts-xaxis-label,
+.apexcharts-yaxis-label {
+  fill: var(--mud-palette-text-secondary);
+}
+
+.apexcharts-gridline,
+.apexcharts-xaxis line,
+.apexcharts-xaxis-tick {
+  stroke: var(--mud-palette-lines-default);
+}
+
+.apexcharts-tooltip {
+  background-color: var(--mud-palette-dark) !important;
+  color: var(--mud-palette-dark-text) !important;
+  border: none !important;
+  border-radius: var(--ja-shape-xs) !important;
+  box-shadow: var(--ja-shadow-level3) !important;
+}
+
+.apexcharts-tooltip-title {
+  background-color: var(--mud-palette-dark) !important;
+  border-bottom-color: var(--mud-palette-lines-default) !important;
+}
+
 #blazor-error-ui {
   background: darkorange;
   bottom: 0;
@@ -500,6 +719,29 @@ body {
   }
 }
 
+/* Android honors Remove animations under accessibility settings, so drop every entrance, transition and transform the app adds. */
+/* The scroll-driven header lift stays: it is tied to scroll position rather than to time, and it is the only cue that content is passing underneath. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .page-body {
+    animation: none;
+  }
+
+  .mud-overlay .mud-overlay-scrim {
+    animation: none;
+  }
+
+  .calendar-day-cell:active {
+    transform: none;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .status-bar-safe-area, #splash-screen {
     background-color: #181215;
diff --git a/JournalApp/wwwroot/index.html b/JournalApp/wwwroot/index.html
index bb44166..619a34a 100644
--- a/JournalApp/wwwroot/index.html
+++ b/JournalApp/wwwroot/index.html
@@ -7,7 +7,6 @@
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>Journal App</title>
     <base href="/" />
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="app.css" rel="stylesheet" />
     <link href="JournalApp.styles.css" rel="stylesheet" />