diff --git a/client/src/mobile/components/MSheet.tsx b/client/src/mobile/components/MSheet.tsx
index 53714ebfa..9be381238 100644
--- a/client/src/mobile/components/MSheet.tsx
+++ b/client/src/mobile/components/MSheet.tsx
@@ -154,6 +154,9 @@ const SHORT_FORM_SHAPE = 'm-form-sheet short:flex-1 short:border-b-0 short:[--m-
 // behind read through as sharp ghost text: the frosting it counted on is
 // dropped whenever an ancestor animates its opacity (the scrim fading in),
 // which WebKit and Chromium both do, so the fields floated over the list behind.
+// For the same reason the dim fades on a layer of its own, beside the sheet and
+// not around it: opacity multiplies down the tree, so a fading parent made even
+// the opaque sheet see-through for its first frames.
 const SURFACE = 'bg-[color:var(--m-sheetop)] border border-[color:var(--m-shbr)]'
 
 // The docked sheet rises from below the screen edge like a native sheet; the
@@ -283,12 +286,17 @@ export default function MSheet({
     // has to fall back to document.body (sheet mounted in the same commit as
     // the shell).
     <div
-      className={`m-root fixed inset-0 z-[60] ${dimTransparent ? 'bg-transparent short:bg-[color:var(--m-dim)]' : 'bg-[color:var(--m-dim)]'} ${open ? 'm-fade-in' : 'm-fade-out'}`}
+      className="m-root fixed inset-0 z-[60]"
       role="presentation"
       onClick={(e) => {
         if (e.target === e.currentTarget) requestClose()
       }}
     >
+      <div
+        aria-hidden="true"
+        data-m-scrim=""
+        className={`pointer-events-none absolute inset-0 ${dimTransparent ? 'bg-transparent short:bg-[color:var(--m-dim)]' : 'bg-[color:var(--m-dim)]'} ${open ? 'm-fade-in' : 'm-fade-out'}`}
+      />
       <div className={regionClass(variant, wideAnchor, form)}>
         <div className={boxClass(variant, wideWidth, form)}>
           <PopoverArrow variant={variant} anchor={wideAnchor} />
diff --git a/client/src/mobile/mobile.css b/client/src/mobile/mobile.css
index 0b89257e1..2d9c7a191 100644
--- a/client/src/mobile/mobile.css
+++ b/client/src/mobile/mobile.css
@@ -123,9 +123,11 @@ html[dir='rtl']:has(.m-shell[data-size='wide'], .m-shell[data-size='split']) .m-
 
 /* ── Keyframes ──────────────────────────────────────────────────────────── */
 
-/* The floating card pops in place, the way a native alert does. */
+/* The floating card pops in place, the way a native alert does. It is opaque
+   halfway through the pop, so the page behind never reads through its fields. */
 @keyframes m-sheet-in {
   from { opacity: 0; transform: translateY(10px) scale(.96); }
+  45% { opacity: 1; }
   to { opacity: 1; transform: translateY(0) scale(1); }
 }
 @keyframes m-sheet-out {
diff --git a/client/tests/unit/mobile/MSheet.test.tsx b/client/tests/unit/mobile/MSheet.test.tsx
index dacbc2fe3..2eece0357 100644
--- a/client/tests/unit/mobile/MSheet.test.tsx
+++ b/client/tests/unit/mobile/MSheet.test.tsx
@@ -538,11 +538,35 @@ describe('MSheet', () => {
           <span>body</span>
         </MSheet>,
       );
-      const scrim = panel().closest('[role="presentation"]') as HTMLElement;
+      const root = panel().closest('[role="presentation"]') as HTMLElement;
+      const scrim = root.querySelector('[data-m-scrim]') as HTMLElement;
       expect(scrim.className).toContain('bg-transparent');
       expect(scrim.className).toContain('short:bg-[color:var(--m-dim)]');
     });
 
+    it('FE-MOB-SHEET-036: the dim fades beside the sheet, never around it, so the opaque sheet is never see-through', () => {
+      const { rerender } = render(
+        <MSheet open onClose={() => {}} ariaLabel="Sheet">
+          <span>body</span>
+        </MSheet>,
+      );
+      const root = panel().closest('[role="presentation"]') as HTMLElement;
+      const scrim = root.querySelector('[data-m-scrim]') as HTMLElement;
+      expect(scrim.className).toContain('m-fade-in');
+      expect(scrim.className).toContain('pointer-events-none');
+      expect(scrim.contains(panel())).toBe(false);
+      // No ancestor of the sheet animates its opacity.
+      for (let el: HTMLElement | null = panel().parentElement; el; el = el.parentElement) {
+        expect(el.className || '').not.toMatch(/\bm-fade-(in|out)\b/);
+      }
+      rerender(
+        <MSheet open={false} onClose={() => {}} ariaLabel="Sheet">
+          <span>body</span>
+        </MSheet>,
+      );
+      expect(scrim.className).toContain('m-fade-out');
+    });
+
     it('FE-MOB-SHEET-035: the region lets taps through to the scrim, the sheet itself takes them', () => {
       render(
         <MSheet open onClose={() => {}} ariaLabel="Sheet">