From 243ac3fc90961c843e2ab32148c3b344f6149641 Mon Sep 17 00:00:00 2001
From: harikiran-lab <79027849+harikiran-lab@users.noreply.github.com>
Date: Wed, 21 Oct 2026 00:22:17 -0500
Subject: [PATCH] Keep note controls visible and fix reminder overlay layers

---
 CHANGELOG.md                             |   6 +
 scripts/backdrop-click.test.js           |   2 +-
 scripts/overlay-layer.test.js            |  32 ++++
 scripts/read-only.test.js                |   5 +-
 scripts/toolbar-fit.test.js              |  26 +++
 src/App.svelte                           |   2 +-
 src/components/notes/NoteEditor.svelte   | 225 ++++++++++++-----------
 src/components/notes/Popover.svelte      |   6 +-
 src/components/notes/TipTapEditor.svelte |   8 +-
 src/components/ui/Sheet.svelte           |   2 +
 src/components/ui/TimePicker.svelte      |   2 +
 src/i18n/en.json                         |   4 +
 src/lib/overlay-layer.js                 |  24 +++
 src/lib/toolbar-fit.js                   |   9 +
 src/routes/Shopping.svelte               |   2 +-
 src/styles/base.css                      |  13 +-
 16 files changed, 241 insertions(+), 127 deletions(-)
 create mode 100644 scripts/overlay-layer.test.js
 create mode 100644 scripts/toolbar-fit.test.js
 create mode 100644 src/lib/overlay-layer.js
 create mode 100644 src/lib/toolbar-fit.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ec9822..799d557 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,12 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Fixed
+
+- Keep Read Only note controls visible while disabling content changes, fit reader actions to the available width, and expose available actions in maximized desktop note windows.
+- Open nested reminder calendars and time pickers above their parent form, and dismiss only the top overlay on Escape.
+- Use consistent rounded page headers and the theme button foreground for banner contrast.
+
 ---
 
 ## [1.2.0-dev01] - 2026-10-20 (pre-release)
diff --git a/scripts/backdrop-click.test.js b/scripts/backdrop-click.test.js
index fae5cf3..0b51a43 100644
--- a/scripts/backdrop-click.test.js
+++ b/scripts/backdrop-click.test.js
@@ -75,7 +75,7 @@ test('it follows the latest close action and lets go when removed', () => {
 
 test('the note editor and every popup close only on a deliberate backdrop click', () => {
   const editor = read('../src/components/notes/NoteEditor.svelte');
-  assert.match(editor, /class="editor-backdrop" class:inline use:backdropClick=\{\(\) => \{ if \(!inline\) close\(\); \}\}/);
+  assert.match(editor, /class="editor-backdrop" class:inline[^\n]*use:backdropClick=\{\(\) => \{ if \(!inline\) close\(\); \}\}/);
   assert.doesNotMatch(editor, /class="editor-backdrop"[^\n]*on:click/);
   const pop = read('../src/components/notes/Popover.svelte');
   assert.match(pop, /class="pop-backdrop" class:narrow use:backdropClick=\{closeOutside\} use:closeOnBack=\{close\}/);
diff --git a/scripts/overlay-layer.test.js b/scripts/overlay-layer.test.js
new file mode 100644
index 0000000..323b220
--- /dev/null
+++ b/scripts/overlay-layer.test.js
@@ -0,0 +1,32 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { overlayLayer, isTopOverlay } from '../src/lib/overlay-layer.js';
+
+globalThis.getComputedStyle = node => ({ zIndex: node.baseline });
+const node = baseline => ({ baseline, style: { zIndex: '' } });
+
+test('a calendar with a lower CSS z-index opens above its reminder popover', () => {
+  const popover = node('300'), calendar = node('200');
+  const parent = overlayLayer(popover), child = overlayLayer(calendar);
+  assert.ok(Number(calendar.style.zIndex) > Number(popover.style.zIndex));
+  assert.equal(isTopOverlay(popover), false);
+  assert.equal(isTopOverlay(calendar), true);
+  child.destroy();
+  assert.equal(isTopOverlay(popover), true);
+  assert.equal(calendar.style.zIndex, '');
+  parent.destroy();
+  assert.equal(isTopOverlay(popover), false);
+});
+test('higher baseline layers and nested layers retain their ordering', () => {
+  const reminder = node('300'), time = node('9999'), child = node('200');
+  const a = overlayLayer(reminder), b = overlayLayer(time), c = overlayLayer(child);
+  assert.equal(time.style.zIndex, '9999');
+  assert.equal(child.style.zIndex, '10000');
+  a.destroy(); // Account/navigation teardown can remove a parent first.
+  assert.equal(isTopOverlay(child), true);
+  c.destroy(); assert.equal(isTopOverlay(time), true);
+  b.destroy();
+  const reopened = node('200'), d = overlayLayer(reopened);
+  assert.equal(reopened.style.zIndex, '200');
+  d.destroy();
+});
diff --git a/scripts/read-only.test.js b/scripts/read-only.test.js
index 29fff0e..7635dc2 100644
--- a/scripts/read-only.test.js
+++ b/scripts/read-only.test.js
@@ -269,7 +269,10 @@ test('the note opens for reading: content guarded, ticking and color kept, Edit
   // Turned on, what's typed is saved first.
   assert.match(ed, /if \(next\) await flushAll\(\);\s*readOnlyNote = next;/);
   assert.match(ed, /checkable=\{!baseLocked\}/);
-  assert.equal((ed.match(/\{#if !baseLocked( && !tightBar)?\}\s*<button class="(icon-btn|sheet-item)"[^\n]*openColor/g) || []).length, 4, 'color stays on every bar');
+  assert.equal((ed.match(/\{#if !baseLocked\}\s*<button class="icon-btn"[^\n]*openColor/g) || []).length, 2, 'color stays on the compact and full editor bars');
+  assert.match(ed, /!baseLocked \? \[\{ key: 'color',[^\n]*run: openColor/, 'the responsive reader keeps color available on Read Only notes');
+  assert.match(ed, /\{#each readerVisible as action \(action\.key\)\}/);
+  assert.match(ed, /\{#each readerOverflow as action \(action\.key\)\}/);
   assert.match(ed, /role="menuitemcheckbox" aria-checked=\{readOnlyNote\} on:click=\{\(\) => \{ moreOpen = false; toggleReadOnly\(\); \}\}/);
   const cl = read('../src/components/notes/ChecklistEditor.svelte');
   assert.match(cl, /function toggle\(item\) \{\s*if \(!checkable\) return;/);
diff --git a/scripts/toolbar-fit.test.js b/scripts/toolbar-fit.test.js
new file mode 100644
index 0000000..b330ccb
--- /dev/null
+++ b/scripts/toolbar-fit.test.js
@@ -0,0 +1,26 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { visibleToolbarCount } from '../src/lib/toolbar-fit.js';
+
+test('wide note panes show all eligible actions', () => {
+  assert.equal(visibleToolbarCount(1280, 19), 19);
+  assert.equal(visibleToolbarCount(960, 15), 15);
+});
+
+test('shrinking panes progressively move actions into More', () => {
+  const counts = [1000, 900, 800, 700, 600].map(width => visibleToolbarCount(width, 19));
+  for (let i = 1; i < counts.length; i++) assert.ok(counts[i] <= counts[i - 1]);
+  assert.ok(new Set(counts).size >= 4);
+});
+
+test('phone toolbars reserve room for touch-sized More and Close buttons', () => {
+  assert.equal(visibleToolbarCount(360, 19), 4);
+  assert.equal(visibleToolbarCount(320, 19), 3);
+  assert.equal(visibleToolbarCount(180, 19), 0);
+});
+
+test('the count remains bounded when actions disappear or before layout measures', () => {
+  assert.equal(visibleToolbarCount(0, 19), 0);
+  assert.equal(visibleToolbarCount(1280, 0), 0);
+  assert.equal(visibleToolbarCount(360, 2), 2);
+});
diff --git a/src/App.svelte b/src/App.svelte
index 6903843..9d7ddcb 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -737,7 +737,7 @@
   // editor or dialog is open, where the shortcut would pull focus away.
   async function _searchShortcut(e) {
     if (!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey || e.key.toLowerCase() !== 'k') return;
-    if (document.querySelector('.editor-backdrop, [role="dialog"][aria-modal="true"]')) return;
+    if (document.querySelector('.editor-backdrop, dialog[open], [role="dialog"][aria-modal="true"]')) return;
     e.preventDefault();
     const onNotes = $location === '/' || /^\/(notes|shared|archive|trash|reminders|label\/)/.test($location);
     if (!onNotes) { await push('/'); await new Promise(r => setTimeout(r, 60)); }
diff --git a/src/components/notes/NoteEditor.svelte b/src/components/notes/NoteEditor.svelte
index bf2e808..3eb0caa 100644
--- a/src/components/notes/NoteEditor.svelte
+++ b/src/components/notes/NoteEditor.svelte
@@ -40,6 +40,7 @@
   import { ensureReminderPermission, rescheduleReminders } from '../../lib/note-reminders.js';
   import ShareDialog from './ShareDialog.svelte';
   import TraceActions from './TraceActions.svelte';
+  import { visibleToolbarCount } from '../../lib/toolbar-fit.js';
   import CooktraceSend from './CooktraceSend.svelte';
   import { cooktraceLink, cooktraceOn, loadCooktraceLink } from '../../lib/cooktrace.js';
   import VoiceRecorder from './VoiceRecorder.svelte';
@@ -117,7 +118,7 @@
   let saving = false;
   let showHistory = false;
   let colorOpen = false, labelsOpen = false, reminderOpen = false, shareOpen = false, traceOpen = false, recordOpen = false, cookOpen = false;
-  // Ask Trace while it works or has an answer waiting: a click outside doesn't close it (#35).
+  // Ask Trace retains upstream's cancellation and unsaved-answer protection.
   let traceActions, traceHolding = false;
   $: if (!traceOpen) traceHolding = false;
   let colorAnchor = null, labelsAnchor = null, reminderAnchor = null, shareAnchor = null, traceAnchor = null, recordAnchor = null, cookAnchor = null;
@@ -347,6 +348,7 @@
   const canRecord = recordingSupported();
 
   function openRecorder(e) {
+    if (contentLocked) return;
     recordAnchor = e.currentTarget.getBoundingClientRect();
     recordOpen = true;
   }
@@ -552,7 +554,7 @@
   let pendingFiles = [];          // shown as "Uploading" until they're stored
   let fileInput;
   let fileViewerIndex = null;
-  function openFilePicker() { tick().then(() => fileInput?.click()); }
+  function openFilePicker() { if (contentLocked) return; tick().then(() => fileInput?.click()); }
 
   async function addOtherFiles(files) {
     if (contentLocked) return;
@@ -736,6 +738,7 @@
 
   // ── Trace actions ─────────────────────────────────────────────────
   async function openTrace(e) {
+    if (contentLocked) return;
     traceAnchor = e.currentTarget.getBoundingClientRect();
     await flushAll();
     traceOpen = true;
@@ -1037,8 +1040,34 @@
   let barW = 800;
   // A narrow editor card (beside a half-open fold) uses the phone's compact toolbar.
   let panelW = 0;
+  let maximized = false;
   $: compactBar = narrow || (!inline && panelW > 0 && panelW < 560);
-  $: tightBar = inline && barW < 600;
+  $: readerActions = [
+    { key: 'pin', icon: 'keep', label: pinned ? $_('notes.unpin') : $_('notes.pin'), pressed: pinned, run: togglePin },
+    ...(isOwner ? [{ key: 'reminder', icon: 'notification_add', label: $_('reminders.remind_me'), run: openReminder }] : []),
+    ...($traceReady && kind === 'text' && !baseLocked && body.trim() ? [{ key: 'trace', icon: 'auto_awesome', label: $_('trace_actions.title'), run: openTrace }] : []),
+    ...(!baseLocked ? [{ key: 'convert', icon: kind === 'text' ? 'checklist' : 'notes', label: kind === 'text' ? $_('notes.to_checklist') : $_('notes.to_text'), run: () => convert() }] : []),
+    ...(noteId && !baseLocked ? [{ key: 'readonly', icon: 'edit_off', label: $_('notes.read_only'), pressed: readOnlyNote, run: toggleReadOnly }] : []),
+    ...($sharingAvailable ? [{ key: 'share', icon: 'person_add', label: $_('sharing.share'), run: openShare }] : []),
+    ...(!baseLocked ? [
+      { key: 'image', icon: 'add_photo_alternate', label: $_('attachments.add_image'), run: () => imageInput.click() },
+      { key: 'file', icon: 'attach_file', label: $_('files.attach'), run: openFilePicker },
+      { key: 'drawing', icon: 'draw', label: $_('drawing.new'), run: newDrawing },
+      ...(canRecord ? [{ key: 'voice', icon: 'mic', label: $_('voice.record'), run: openRecorder }] : []),
+    ] : []),
+    ...(!baseLocked ? [{ key: 'color', icon: 'palette', label: $_('notes.color'), run: openColor }] : []),
+    { key: 'labels', icon: 'label', label: $_('notes.labels'), run: openLabels },
+    ...(canShowInTasks ? [{ key: 'tasks', icon: 'task_alt', label: $_('tasks.show_in_tasks'), pressed: inTasks, run: toggleInTasks }] : []),
+    ...(cooktraceOn($cooktraceLink) && kind === 'checklist' ? [{ key: 'cooktrace', icon: 'add_shopping_cart', label: $_('cooktrace.send'), run: openCooktrace }] : []),
+    { key: 'archive', icon: archived ? 'unarchive' : 'archive', label: archived ? $_('notes.unarchive') : $_('notes.archive'), run: archive },
+    { key: 'print', icon: 'print', label: $_('print.print'), run: printThis },
+    ...(canTemplate({ title, body_md: body, kind, items }) ? [{ key: 'template', icon: 'note_stack_add', label: $_('templates.save_as'), run: saveAsTemplate }] : []),
+    ...(noteId ? [{ key: 'history', icon: 'history', label: $_('notes.version_history'), run: async () => { await flushAll(); showHistory = true; } }] : []),
+    ...(isOwner ? [{ key: 'trash', icon: 'delete', label: $_('notes.move_to_trash'), danger: true, run: trash }] : []),
+  ].map(action => ({ ...action, disabled: contentLocked && ['trace', 'convert', 'image', 'file', 'drawing', 'voice'].includes(action.key) }));
+  $: readerVisibleCount = visibleToolbarCount(barW, readerActions.length);
+  $: readerVisible = readerActions.slice(0, readerVisibleCount);
+  $: readerOverflow = readerActions.slice(readerVisibleCount);
   // The desktop editor's own bar (not the phone bar or the list pane's): what it shows stays out of the More menu.
   $: fullBar = !inline && !compactBar;
   /** Save anything pending, for switching notes in the side pane. */
@@ -1095,7 +1124,7 @@
   let formats = {};
   $: fmtTools = bodyRef?.formatTools?.() || [];
   $: if (kind !== 'text' || contentLocked) fmtMode = false;
-  function openAdd(e) { addAnchor = e.currentTarget.getBoundingClientRect(); addOpen = true; }
+  function openAdd(e) { if (contentLocked) return; addAnchor = e.currentTarget.getBoundingClientRect(); addOpen = true; }
   function openMore(e) { moreAnchor = e.currentTarget.getBoundingClientRect(); moreOpen = true; }
   // Run a sheet item once its sheet has closed, anchored where the sheet's button was.
   function fromSheet(fn, anchorRect) {
@@ -1159,8 +1188,8 @@
 <!-- The host stays in place while the backdrop moves to <body>. Without a fixed
      first node, closing the editor left its other top-level nodes behind. -->
 <div class="editor-host">
-<div use:portal={!inline} class="editor-backdrop" class:inline use:backdropClick={() => { if (!inline) close(); }} transition:fade|global={{ duration: $disableAnimations || inline ? 0 : 160 }}>
-  <div class="editor-panel" class:inline class:narrow class:compact-bar={compactBar} bind:clientWidth={panelW} class:kb-open={narrow && kb > 0} class:drag-over={dragOver} style="{noteColorStyle(color)} --kb:{narrow ? kb : 0}px"
+<div use:portal={!inline} class="editor-backdrop" class:inline class:maximized use:backdropClick={() => { if (!inline) close(); }} transition:fade|global={{ duration: $disableAnimations || inline ? 0 : 160 }}>
+  <div class="editor-panel" class:inline class:maximized class:narrow class:compact-bar={compactBar} bind:clientWidth={panelW} class:kb-open={narrow && kb > 0} class:drag-over={dragOver} style="{noteColorStyle(color)} --kb:{narrow ? kb : 0}px"
     on:paste={onPaste} on:dragover={onDragOver} on:dragleave={() => dragOver = false} on:drop={onDrop}
     role={inline ? 'region' : 'dialog'} aria-modal={inline ? undefined : 'true'} aria-label={title || $_('notes.untitled')}
     tabindex="-1" use:dialogFocus={{ disabled: inline, autofocus: false }}
@@ -1181,53 +1210,22 @@
             {/if}
             <span class="crumb-text">{crumb}</span>
           </span>
-          <span class="edited" aria-live="polite">
+          {#if barW >= 1100}<span class="edited" aria-live="polite">
             {#if saving}{$_('notes.saving')}{:else if updatedAt}{$_('notes.edited', { values: { when: relativeTime(updatedAt).toLowerCase() } })}{/if}
-          </span>
+          </span>{/if}
           <span class="spacer"></span>
-          <button class="icon-btn" class:on={pinned} on:click={togglePin}
-            title={pinned ? $_('notes.unpin') : $_('notes.pin')} aria-label={pinned ? $_('notes.unpin') : $_('notes.pin')} aria-pressed={pinned}>
-            <span class="material-symbols-rounded" class:fill={pinned}>keep</span>
-          </button>
-          {#if isOwner}
-            <button class="icon-btn" on:click={openReminder} title={$_('reminders.remind_me')} aria-label={$_('reminders.remind_me')}>
-              <span class="material-symbols-rounded">notification_add</span>
-            </button>
-          {/if}
-          {#if $sharingAvailable && !tightBar}
-            <button class="icon-btn" on:click={openShare} title={$_('sharing.share')} aria-label={$_('sharing.share')}>
-              <span class="material-symbols-rounded">person_add</span>
-            </button>
-          {/if}
-          {#if !contentLocked && !tightBar}
-            <button class="icon-btn" on:click={() => imageInput.click()} title={$_('attachments.add_image')} aria-label={$_('attachments.add_image')}>
-              <span class="material-symbols-rounded">add_photo_alternate</span>
-            </button>
-            <button class="icon-btn" on:click={openFilePicker} title={$_('files.attach')} aria-label={$_('files.attach')}>
-              <span class="material-symbols-rounded">attach_file</span>
+          {#each readerVisible as action (action.key)}
+            <button class="icon-btn" class:on={action.pressed} class:danger={action.danger}
+              disabled={action.disabled} on:click={action.run} title={action.label} aria-label={action.label} aria-pressed={action.pressed}
+              data-record={action.key === 'voice' ? '' : undefined}>
+              <span class="material-symbols-rounded" class:fill={action.pressed}>{action.icon}</span>
             </button>
-            <button class="icon-btn" on:click={newDrawing} title={$_('drawing.new')} aria-label={$_('drawing.new')}>
-              <span class="material-symbols-rounded">draw</span>
-            </button>
-            {#if canRecord}
-              <button class="icon-btn" data-record on:click={openRecorder} title={$_('voice.record')} aria-label={$_('voice.record')}>
-                <span class="material-symbols-rounded">mic</span>
-              </button>
-            {/if}
-          {/if}
-          {#if !baseLocked && !tightBar}
-            <button class="icon-btn" on:click={openColor} title={$_('notes.color')} aria-label={$_('notes.color')}>
-              <span class="material-symbols-rounded">palette</span>
-            </button>
-          {/if}
-          {#if !tightBar}
-            <button class="icon-btn" on:click={openLabels} title={$_('notes.labels')} aria-label={$_('notes.labels')}>
-              <span class="material-symbols-rounded">label</span>
-            </button>
-          {/if}
+          {/each}
+          {#if readerOverflow.length}
           <button class="icon-btn" on:click={openMore} title={$_('notes.more_options')} aria-label={$_('notes.more_options')} aria-haspopup="menu">
             <span class="material-symbols-rounded">more_horiz</span>
           </button>
+          {/if}
           <span class="bar-sep" aria-hidden="true"></span>
           <button class="icon-btn" on:click={() => close()} title={$_('common.close')} aria-label={$_('common.close')}>
             <span class="material-symbols-rounded">close</span>
@@ -1258,6 +1256,12 @@
             <span class="material-symbols-rounded" class:fill={pinned}>keep</span>
           </button>
         {/if}
+        {#if !inline && !narrow}
+          <button class="icon-btn" class:on={maximized} on:click={() => maximized = !maximized}
+            title={$_(maximized ? 'note_window.restore_size' : 'note_window.maximize')} aria-label={$_(maximized ? 'note_window.restore_size' : 'note_window.maximize')} aria-pressed={maximized}>
+            <span class="material-symbols-rounded">{maximized ? 'fullscreen_exit' : 'fullscreen'}</span>
+          </button>
+        {/if}
       </div>
 
       <div class="editor-scroll">
@@ -1301,7 +1305,7 @@
           on:open={openFile} on:remove={removeImage} />
         {#key editorKey}
           {#if kind === 'text'}
-            <TipTapEditor bind:this={bodyRef} bind:value={body} editable={!contentLocked} checkable={!baseLocked} showToolbar={!narrow}
+            <TipTapEditor bind:this={bodyRef} bind:value={body} editable={!contentLocked} checkable={!baseLocked} showToolbar={!narrow} showLockedToolbar={!baseLocked}
               on:formats={(e) => formats = e.detail}
               slashActions={contentLocked ? [] : ['checklist', 'image', 'file', 'drawing', ...(canRecord ? ['voice'] : []), ...(isOwner ? ['reminder'] : [])]}
               on:slash={(e) => onSlash(e.detail)}
@@ -1359,7 +1363,7 @@
       </div>
 
       {#if !inline || readOnly}
-      <footer class="editor-bar">
+      <footer class="editor-bar" class:expanded={maximized && !narrow}>
         {#if readOnly}
           <span class="edited">{$_('notes.in_trash')}</span>
           <span class="spacer"></span>
@@ -1367,6 +1371,17 @@
             <span class="material-symbols-rounded">restore_from_trash</span>{$_('notes.restore')}
           </button>
           <button class="btn btn-danger" on:click={deleteForever}>{$_('notes.delete_forever')}</button>
+        {:else if maximized && !narrow}
+          <div class="bar-actions expanded-actions" role="toolbar" aria-label={$_('notes.more_options')}>
+            {#each readerActions.filter(action => action.key !== 'pin') as action (action.key)}
+              <button class="icon-btn" class:on={action.pressed} class:danger={action.danger}
+                disabled={action.disabled} on:click={action.run} title={action.label} aria-label={action.label} aria-pressed={action.pressed}
+                data-record={action.key === 'voice' ? '' : undefined}>
+                <span class="material-symbols-rounded" class:fill={action.pressed}>{action.icon}</span>
+              </button>
+            {/each}
+          </div>
+          <button class="btn btn-primary done" on:click={() => close()}>{$_('notes.done')}</button>
         {:else if compactBar && fmtMode}
           <div class="phone-bar fmt-row" role="toolbar" aria-label={$_('notes.formatting')}>
             <button class="icon-btn" on:mousedown|preventDefault on:click={() => fmtMode = false} aria-label={$_('notes.close_formatting')}>
@@ -1375,7 +1390,7 @@
             <div class="fmt-scroll">
               {#each fmtTools.filter(t => (t.inTable ? formats.table : t.notInTable ? !formats.table : true)) as t (t.key)}
                 <button class="icon-btn" class:on={formats[t.key]} aria-pressed={!!formats[t.key]} aria-label={$_(t.label)}
-                  on:mousedown|preventDefault on:click={() => bodyRef?.format(t.key)}>
+                  on:mousedown|preventDefault on:click={() => bodyRef?.format(t.key)} disabled={contentLocked}>
                   <span class="material-symbols-rounded">{t.icon}</span>
                 </button>
               {/each}
@@ -1383,21 +1398,21 @@
           </div>
         {:else if compactBar}
           <div class="phone-bar">
-            {#if !contentLocked}
-              <button class="icon-btn" on:mousedown|preventDefault on:click={openAdd} aria-label={$_('notes.add_to_note')} title={$_('notes.add_to_note')}>
+            {#if !baseLocked}
+              <button class="icon-btn" on:mousedown|preventDefault on:click={openAdd} aria-label={$_('notes.add_to_note')} title={$_('notes.add_to_note')} disabled={contentLocked}>
                 <span class="material-symbols-rounded">add_box</span>
               </button>
               {#if kind === 'text'}
-                <button class="icon-btn" on:mousedown|preventDefault on:click={() => fmtMode = true} aria-label={$_('notes.formatting')} title={$_('notes.formatting')}>
+                <button class="icon-btn" on:mousedown|preventDefault on:click={() => fmtMode = true} aria-label={$_('notes.formatting')} title={$_('notes.formatting')} disabled={contentLocked}>
                   <span class="material-symbols-rounded">text_format</span>
                 </button>
                 <button class="icon-btn" class:on={formats.todo} aria-pressed={!!formats.todo} on:mousedown|preventDefault on:click={() => bodyRef?.format('todo')}
-                  aria-label={$_('notes.fmt_checkboxes')} title={$_('notes.fmt_checkboxes')}>
+                  aria-label={$_('notes.fmt_checkboxes')} title={$_('notes.fmt_checkboxes')} disabled={contentLocked}>
                   <span class="material-symbols-rounded">check_box</span>
                 </button>
               {/if}
               {#if canRecord}
-                <button class="icon-btn" data-record on:mousedown|preventDefault on:click={openRecorder} aria-label={$_('voice.record')} title={$_('voice.record')}>
+                <button class="icon-btn" data-record on:mousedown|preventDefault on:click={openRecorder} aria-label={$_('voice.record')} title={$_('voice.record')} disabled={contentLocked}>
                   <span class="material-symbols-rounded">mic</span>
                 </button>
               {/if}
@@ -1427,8 +1442,8 @@
                 <span class="material-symbols-rounded">notification_add</span>
               </button>
             {/if}
-            {#if $traceReady && kind === 'text' && !contentLocked && body.trim()}
-              <button class="icon-btn trace-btn" on:click={openTrace} title={$_('trace_actions.title')} aria-label={$_('trace_actions.title')}>
+            {#if $traceReady && kind === 'text' && !baseLocked && body.trim()}
+              <button class="icon-btn trace-btn" on:click={openTrace} title={$_('trace_actions.title')} aria-label={$_('trace_actions.title')} disabled={contentLocked}>
                 <span class="material-symbols-rounded">auto_awesome</span>
               </button>
             {/if}
@@ -1442,18 +1457,18 @@
                 <span class="material-symbols-rounded">person_add</span>
               </button>
             {/if}
-            {#if !contentLocked}
-              <button class="icon-btn" on:click={() => imageInput.click()} title={$_('attachments.add_image')} aria-label={$_('attachments.add_image')}>
+            {#if !baseLocked}
+              <button class="icon-btn" on:click={() => imageInput.click()} title={$_('attachments.add_image')} aria-label={$_('attachments.add_image')} disabled={contentLocked}>
                 <span class="material-symbols-rounded">add_photo_alternate</span>
               </button>
-              <button class="icon-btn" on:click={openFilePicker} title={$_('files.attach')} aria-label={$_('files.attach')}>
+              <button class="icon-btn" on:click={openFilePicker} title={$_('files.attach')} aria-label={$_('files.attach')} disabled={contentLocked}>
                 <span class="material-symbols-rounded">attach_file</span>
               </button>
-              <button class="icon-btn" on:click={newDrawing} title={$_('drawing.new')} aria-label={$_('drawing.new')}>
+              <button class="icon-btn" on:click={newDrawing} title={$_('drawing.new')} aria-label={$_('drawing.new')} disabled={contentLocked}>
                 <span class="material-symbols-rounded">draw</span>
               </button>
               {#if canRecord}
-                <button class="icon-btn" data-record on:click={openRecorder} title={$_('voice.record')} aria-label={$_('voice.record')}>
+                <button class="icon-btn" data-record on:click={openRecorder} title={$_('voice.record')} aria-label={$_('voice.record')} disabled={contentLocked}>
                   <span class="material-symbols-rounded">mic</span>
                 </button>
               {/if}
@@ -1472,10 +1487,10 @@
                 <span class="material-symbols-rounded" class:fill={inTasks}>task_alt</span>
               </button>
             {/if}
-            {#if !contentLocked}
+            {#if !baseLocked}
               <button class="icon-btn" on:click={() => convert()}
                 title={kind === 'text' ? $_('notes.to_checklist') : $_('notes.to_text')}
-                aria-label={kind === 'text' ? $_('notes.to_checklist') : $_('notes.to_text')}>
+                aria-label={kind === 'text' ? $_('notes.to_checklist') : $_('notes.to_text')} disabled={contentLocked}>
                 <span class="material-symbols-rounded">{kind === 'text' ? 'checklist' : 'notes'}</span>
               </button>
             {/if}
@@ -1518,7 +1533,7 @@
 
 <Popover bind:open={addOpen} anchor={addAnchor} label={$_('notes.add_to_note')}>
   <div class="sheet-menu">
-    <button class="sheet-item" on:click={() => fromSheet(() => imageInput.click(), addAnchor)}>
+    <button class="sheet-item" on:click={() => fromSheet(() => imageInput.click(), addAnchor)} disabled={contentLocked}>
       <span class="material-symbols-rounded">add_photo_alternate</span>{$_('attachments.add_image')}
     </button>
     <button class="sheet-item" on:click={() => { addOpen = false; openFilePicker(); }}>
@@ -1528,64 +1543,37 @@
       <span class="material-symbols-rounded">draw</span>{$_('drawing.new')}
     </button>
     {#if canRecord}
-      <button class="sheet-item" on:click={() => fromSheet(openRecorder, addAnchor)}>
+      <button class="sheet-item" on:click={() => fromSheet(openRecorder, addAnchor)} disabled={contentLocked}>
         <span class="material-symbols-rounded">mic</span>{$_('voice.record')}
       </button>
     {/if}
     <button class="sheet-item" on:click={() => { addOpen = false; tick().then(() => audioInput?.click()); }}>
       <span class="material-symbols-rounded">audio_file</span>{$_('voice.add_file')}
     </button>
-    <button class="sheet-item" on:click={() => fromSheet(() => convert(), addAnchor)}>
+    <button class="sheet-item" on:click={() => fromSheet(() => convert(), addAnchor)} disabled={contentLocked}>
       <span class="material-symbols-rounded">{kind === 'text' ? 'checklist' : 'notes'}</span>{kind === 'text' ? $_('notes.to_checklist') : $_('notes.to_text')}
     </button>
   </div>
 </Popover>
 <Popover bind:open={moreOpen} anchor={moreAnchor} label={$_('notes.more_options')}>
   <div class="sheet-menu">
+    {#if inline}
+      {#each readerOverflow as action (action.key)}
+        <button class="sheet-item" class:danger={action.danger}
+          role={typeof action.pressed === 'boolean' ? 'menuitemcheckbox' : 'menuitem'} aria-checked={action.pressed}
+          disabled={action.disabled} on:click={() => fromSheet(action.run, moreAnchor)}>
+          <span class="material-symbols-rounded" class:fill={action.pressed}>{action.icon}</span>{action.label}
+          {#if action.pressed}<span class="material-symbols-rounded sheet-check">check</span>{/if}
+        </button>
+      {/each}
+    {:else}
     {#if canShowInTasks && !fullBar}
       <button class="sheet-item" role="menuitemcheckbox" aria-checked={inTasks} on:click={() => { toggleInTasks(); moreOpen = false; }}>
         <span class="material-symbols-rounded" class:fill={inTasks}>task_alt</span>{$_('tasks.show_in_tasks')}
         {#if inTasks}<span class="material-symbols-rounded sheet-check">check</span>{/if}
       </button>
     {/if}
-    {#if inline}
-      {#if tightBar}
-        {#if !contentLocked}
-          <button class="sheet-item" on:click={() => fromSheet(() => imageInput.click(), moreAnchor)}>
-            <span class="material-symbols-rounded">add_photo_alternate</span>{$_('attachments.add_image')}
-          </button>
-          <button class="sheet-item" on:click={() => { moreOpen = false; openFilePicker(); }}>
-            <span class="material-symbols-rounded">attach_file</span>{$_('files.attach')}
-          </button>
-          <button class="sheet-item" on:click={() => { moreOpen = false; newDrawing(); }}>
-            <span class="material-symbols-rounded">draw</span>{$_('drawing.new')}
-          </button>
-          {#if canRecord}
-            <button class="sheet-item" on:click={() => fromSheet(openRecorder, moreAnchor)}>
-              <span class="material-symbols-rounded">mic</span>{$_('voice.record')}
-            </button>
-          {/if}
-        {/if}
-        {#if !baseLocked}
-          <button class="sheet-item" on:click={() => fromSheet(openColor, moreAnchor)}>
-            <span class="material-symbols-rounded">palette</span>{$_('notes.color')}
-          </button>
-        {/if}
-        <button class="sheet-item" on:click={() => fromSheet(openLabels, moreAnchor)}>
-          <span class="material-symbols-rounded">label</span>{$_('notes.labels')}
-        </button>
-        {#if $sharingAvailable}
-          <button class="sheet-item" on:click={() => fromSheet(openShare, moreAnchor)}>
-            <span class="material-symbols-rounded">person_add</span>{$_('sharing.share')}
-          </button>
-        {/if}
-      {/if}
-      {#if !contentLocked}
-        <button class="sheet-item" on:click={() => fromSheet(() => convert(), moreAnchor)}>
-          <span class="material-symbols-rounded">{kind === 'text' ? 'checklist' : 'notes'}</span>{kind === 'text' ? $_('notes.to_checklist') : $_('notes.to_text')}
-        </button>
-      {/if}
-    {:else if !fullBar}
+    {#if !fullBar}
     <button class="sheet-item" on:click={() => fromSheet(openLabels, moreAnchor)}>
       <span class="material-symbols-rounded">label</span>{$_('notes.labels')}
     </button>
@@ -1595,8 +1583,8 @@
         <span class="material-symbols-rounded">person_add</span>{$_('sharing.share')}
       </button>
     {/if}
-    {#if $traceReady && kind === 'text' && !contentLocked && body.trim() && !fullBar}
-      <button class="sheet-item" on:click={() => fromSheet(openTrace, moreAnchor)}>
+    {#if $traceReady && kind === 'text' && !baseLocked && body.trim() && !fullBar}
+      <button class="sheet-item" on:click={() => fromSheet(openTrace, moreAnchor)} disabled={contentLocked}>
         <span class="material-symbols-rounded">auto_awesome</span>{$_('trace_actions.title')}
       </button>
     {/if}
@@ -1632,6 +1620,7 @@
         <span class="material-symbols-rounded">delete</span>{$_('notes.move_to_trash')}
       </button>
     {/if}
+    {/if}
   </div>
 </Popover>
 <Popover bind:open={colorOpen} anchor={colorAnchor} label={$_('notes.color')}>
@@ -1720,17 +1709,19 @@
     height: 58px; padding: 0 12px 0 32px;
     border-bottom: 1px solid var(--note-border);
   }
-  .crumb { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
+  .crumb { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 0 96px; font-size: 13px; font-weight: 600; color: var(--text-2); }
   .crumb .material-symbols-rounded { font-size: 17px; color: var(--note-glow, var(--accent)); }
   .crumb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .reader-bar .edited { margin-left: 12px; overflow: hidden; text-overflow: ellipsis; }
-  .reader-bar .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
+  .reader-bar .edited { margin-left: 12px; flex: 0 0 124px; overflow: hidden; text-overflow: ellipsis; }
+  .reader-bar .icon-btn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; }
   .reader-bar .icon-btn .material-symbols-rounded { font-size: 21px; }
   .bar-sep { width: 1px; height: 22px; background: var(--note-border); margin: 0 6px; }
   .inline .editor-top { padding-top: 26px; }
-  @media (max-width: 1320px) { .reader-bar .edited { display: none; } }
   .reader-bar.tight { padding-left: 20px; }
-  .reader-bar.tight .crumb { flex-shrink: 1; }
+  .reader-bar.tight .crumb { flex-basis: 24px; }
+  .reader-bar.tight .crumb-text { display: none; }
+  .reader-bar.tight .icon-btn { width: 44px; height: 44px; }
+  .reader-bar .icon-btn.danger { color: var(--danger); }
   .editor-backdrop {
     position: fixed; inset: 0; z-index: 200;
     background: rgba(0, 0, 0, 0.55);
@@ -1750,6 +1741,13 @@
     color: var(--text-1);
     overflow: hidden;
   }
+  .editor-backdrop.maximized { padding: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom)); }
+  .editor-panel.maximized:not(.narrow) {
+    max-width: none;
+    height: calc(100dvh - max(12px, var(--safe-top)) - max(12px, var(--safe-bottom)));
+    max-height: calc(100dvh - max(12px, var(--safe-top)) - max(12px, var(--safe-bottom)));
+  }
+  .icon-btn:disabled, .sheet-item:disabled { opacity: 0.45; cursor: not-allowed; }
   .editor-panel.narrow {
     max-width: none; max-height: none;
     position: fixed; inset: 0;
@@ -1811,6 +1809,9 @@
     -webkit-backdrop-filter: blur(24px) saturate(180%);
   }
   .bar-actions { display: flex; flex-wrap: nowrap; gap: 2px; min-width: 0; }
+  .editor-bar.expanded { flex-shrink: 0; }
+  .bar-actions.expanded-actions { flex: 1; flex-wrap: wrap; }
+  .expanded-actions .icon-btn { flex-shrink: 0; }
   .spacer { flex: 1; }
   .edited { font-size: 12px; color: var(--text-3); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
   .compact-bar .edited { display: none; }
diff --git a/src/components/notes/Popover.svelte b/src/components/notes/Popover.svelte
index 89155e4..fc3cd95 100644
--- a/src/components/notes/Popover.svelte
+++ b/src/components/notes/Popover.svelte
@@ -10,6 +10,7 @@
   import { fade, fly } from 'svelte/transition';
   import { portal } from '../../lib/portal.js';
   import { dialogFocus } from '../../lib/dialog-focus.js';
+  import { overlayLayer, isTopOverlay } from '../../lib/overlay-layer.js';
   import { backdropClick } from '../../lib/backdrop-click.js';
 
   export let open = false;
@@ -28,6 +29,7 @@
 
   const dispatch = createEventDispatcher();
   let panel;
+  let backdrop;
   let style = '';
   let narrow = false;
 
@@ -104,7 +106,7 @@
   }
   $: observeSize(panel);
 
-  function onKey(e) { if (open && e.key === 'Escape') { e.stopPropagation(); close(); } }
+  function onKey(e) { if (open && e.key === 'Escape' && isTopOverlay(backdrop)) { e.stopPropagation(); close(); } }
   // A keyboard opening or closing moves the popover with it.
   let _vvFrame = 0;
   function onViewport() {
@@ -127,7 +129,7 @@
 </script>
 
 {#if open}
-  <div use:portal class="pop-backdrop" class:narrow use:backdropClick={closeOutside} use:closeOnBack={close} transition:fade={{ duration: 120 }}>
+  <div use:portal class="pop-backdrop" class:narrow use:backdropClick={closeOutside} use:closeOnBack={close} use:overlayLayer bind:this={backdrop} transition:fade={{ duration: 120 }}>
     <div class="pop-panel" class:sheet={narrow} bind:this={panel} {style}
       role="dialog" aria-modal="true" aria-label={label || undefined} tabindex="-1" use:dialogFocus
       in:fly={{ y: narrow ? 40 : 6, duration: 160 }}>
diff --git a/src/components/notes/TipTapEditor.svelte b/src/components/notes/TipTapEditor.svelte
index b499593..4e16439 100644
--- a/src/components/notes/TipTapEditor.svelte
+++ b/src/components/notes/TipTapEditor.svelte
@@ -39,6 +39,7 @@
   /** Checkboxes in the text can be ticked while it can't be edited (a Read Only note), not on a public page. */
   export let checkable = false;
   export let showToolbar = true;
+  export let showLockedToolbar = false;
   /** Titles offered after typing [[ (other notes the user can see). */
   export let linkTitles = [];
   /** Note-level slash commands the parent handles: 'checklist' | 'image' | 'file' | 'voice' | 'reminder'. */
@@ -292,7 +293,7 @@
   /** The formatting tools, for a toolbar outside this component (the phone editor bar). */
   export function formatTools() { return tools.map(({ key, icon, label, inTable, notInTable }) => ({ key, icon, label, inTable, notInTable })); }
   export function format(key) { const t = tools.find(x => x.key === key); if (t) useTool(t); }
-  function useTool(t) { if (t.action) t.action(); else run(t.fn); }
+  function useTool(t) { if (!editable) return; if (t.action) t.action(); else run(t.fn); }
 
   function run(fn) {
     if (!editor) return;
@@ -387,10 +388,10 @@
   }
 </script>
 
-{#if showToolbar && editable}
+{#if showToolbar && (editable || showLockedToolbar)}
   <div class="fmt-bar" bind:this={fmtBarEl} role="toolbar" aria-label={$_('notes.formatting')}>
     {#each tools.filter(t => !t.phone && toolShown(t, active.table)) as t (t.key)}
-      <button type="button" class="fmt-btn" class:on={active[t.key]}
+      <button type="button" class="fmt-btn" class:on={active[t.key]} disabled={!editable}
         title={$_(t.label)} aria-label={$_(t.label)} aria-pressed={!!active[t.key]}
         on:mousedown|preventDefault
         on:click={() => useTool(t)}>
@@ -445,6 +446,7 @@
   }
   .fmt-btn .material-symbols-rounded { font-size: 20px; }
   .fmt-btn:hover { background: color-mix(in srgb, var(--text-1) 8%, transparent); color: var(--text-1); }
+  .fmt-btn:disabled { opacity: 0.45; cursor: not-allowed; }
   .fmt-btn.on { background: var(--accent-dim); color: var(--accent); }
 
   .sel-bubble {
diff --git a/src/components/ui/Sheet.svelte b/src/components/ui/Sheet.svelte
index 71afe18..35d9df8 100644
--- a/src/components/ui/Sheet.svelte
+++ b/src/components/ui/Sheet.svelte
@@ -6,6 +6,7 @@
   import { _ } from 'svelte-i18n';
   import { portal } from '../../lib/portal.js';
   import { dialogFocus } from '../../lib/dialog-focus.js';
+  import { overlayLayer } from '../../lib/overlay-layer.js';
 
   export let open   = false;
   export let title  = '';
@@ -35,6 +36,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div use:portal class="sheet-backdrop" on:click={onBackdropClick} use:closeOnBack={close}
+    use:overlayLayer
     in:fade={{ duration: 200 }} out:fade={{ duration: 160 }}>
     <div
       class="sheet-panel"
diff --git a/src/components/ui/TimePicker.svelte b/src/components/ui/TimePicker.svelte
index 1433828..aa58cdf 100644
--- a/src/components/ui/TimePicker.svelte
+++ b/src/components/ui/TimePicker.svelte
@@ -5,6 +5,7 @@
   import { createEventDispatcher } from 'svelte';
   import { portal } from '../../lib/portal.js';
   import { timeFormat } from '../../stores/settings.js';
+  import { overlayLayer } from '../../lib/overlay-layer.js';
 
   export let value = '12:00'; // HH:MM (24h internal)
   export let label = '';
@@ -77,6 +78,7 @@
 
 {#if open}
   <div use:portal class="tp-backdrop" role="presentation" use:closeOnBack={() => open = false}
+    use:overlayLayer
     on:click|self={() => open = false}>
     <!-- svelte-ignore a11y_click_events_have_key_events (keys: dialogFocus) -->
     <div class="tp-sheet" role="dialog" aria-modal="true" aria-label={label || undefined} tabindex="-1"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a25bcf4..8b4a26a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1,4 +1,8 @@
 {
+  "note_window": {
+    "maximize": "Maximize note",
+    "restore_size": "Restore note size"
+  },
   "nav": {
     "notes":    "Notes",
     "reminders": "Reminders",
diff --git a/src/lib/overlay-layer.js b/src/lib/overlay-layer.js
new file mode 100644
index 0000000..724fc59
--- /dev/null
+++ b/src/lib/overlay-layer.js
@@ -0,0 +1,24 @@
+// Portalled children are siblings in <body>, so CSS ancestry cannot place a
+// calendar above its reminder popover. Each newly opened layer gets at least
+// its normal z-index, and sits above every layer already open.
+const layers = [];
+
+export function overlayLayer(node) {
+  const baseline = Number.parseInt(getComputedStyle(node).zIndex, 10) || 0;
+  const z = Math.max(baseline, ...layers.map(layer => layer.z + 1));
+  const previous = node.style.zIndex;
+  const layer = { node, z };
+  node.style.zIndex = String(z);
+  layers.push(layer);
+  return {
+    destroy() {
+      const index = layers.indexOf(layer);
+      if (index >= 0) layers.splice(index, 1);
+      node.style.zIndex = previous;
+    },
+  };
+}
+
+export function isTopOverlay(node) {
+  return layers.at(-1)?.node === node;
+}
diff --git a/src/lib/toolbar-fit.js b/src/lib/toolbar-fit.js
new file mode 100644
index 0000000..bbcd016
--- /dev/null
+++ b/src/lib/toolbar-fit.js
@@ -0,0 +1,9 @@
+/** Number of icon actions that fit beside note context, Close and optional More. */
+export function visibleToolbarCount(width, count) {
+  const compact = width < 600;
+  const slot = compact ? 46 : 38;
+  const context = (compact ? 32 + 24 : 44 + 96) + slot + 18 + (width >= 1100 ? 136 : 0);
+  const available = Math.max(0, width - context);
+  if (count * slot <= available) return count;
+  return Math.max(0, Math.min(count, Math.floor((available - slot) / slot)));
+}
diff --git a/src/routes/Shopping.svelte b/src/routes/Shopping.svelte
index 2dcab6b6..2c8705f 100644
--- a/src/routes/Shopping.svelte
+++ b/src/routes/Shopping.svelte
@@ -173,7 +173,7 @@
   .shopping-page .header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
   .shopping-page .header-btn { border-radius: 12px; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
   .shopping-page .header-btn:hover { background: color-mix(in srgb, var(--text-1) 10%, transparent); color: var(--text-1); }
-  .page-header.banner-gradient .header-btn, .page-header.banner-animated .header-btn { color: rgba(255, 255, 255, 0.92); }
+  .page-header.banner-gradient .header-btn, .page-header.banner-animated .header-btn { color: var(--accent-text); }
   .spin { animation: spin 0.9s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
diff --git a/src/styles/base.css b/src/styles/base.css
index cbdd677..5ce60f7 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -124,6 +124,7 @@ input[type="number"]::-webkit-inner-spin-button {
 
 /* Shared page header — sticky, consistent padding and title style */
 .page-header {
+  border-radius: var(--radius-lg);
   position: sticky;
   top: 0;
   z-index: 10;
@@ -179,8 +180,8 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 .page-header.banner-gradient h1 {
   background: none;
-  -webkit-text-fill-color: #fff;
-  color: #fff;
+  -webkit-text-fill-color: var(--accent-text);
+  color: var(--accent-text);
 }
 
 /* Animated variant — same geometry + base look as Gradient. The
@@ -210,8 +211,8 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 .page-header.banner-animated h1 {
   background: none;
-  -webkit-text-fill-color: #fff;
-  color: #fff;
+  -webkit-text-fill-color: var(--accent-text);
+  color: var(--accent-text);
 }
 .page-header.banner-animated > * {
   position: relative;
@@ -294,7 +295,7 @@ html.banner-animation-aurora .page-header.banner-animated::after {
 .page-header.banner-gradient .btn-icon,
 .page-header.banner-animated .btn-icon {
   background: rgba(255, 255, 255, 0.14);
-  color: #fff;
+  color: var(--accent-text);
 }
 .page-header.banner-gradient .btn-icon:hover,
 .page-header.banner-animated .btn-icon:hover {
@@ -302,7 +303,7 @@ html.banner-animation-aurora .page-header.banner-animated::after {
 }
 .page-header.banner-gradient .btn-icon .material-symbols-rounded,
 .page-header.banner-animated .btn-icon .material-symbols-rounded {
-  color: #fff;
+  color: var(--accent-text);
 }
 
 /* Page shell — used by all route pages.