Seamless mobile Safari edges

Make the colors behind mobile Safari's status bar and bottom toolbar match the page's top and bottom edges, including when the background changes as you scroll. You're inside the repo already. Find the app's root layout and global styles first, and check which pages have full-bleed or colored heroes.

How it works: Safari extends the background of a fixed element behind its controls. A thin fixed strip at the top and another at the bottom, each painted the color of the edge it sits on, fills those areas. theme-color alone isn't enough, because in the browser it can't set separate top and bottom colors.

1. Edge strips. Add aria-hidden .edge-top and .edge-bottom elements outside any transformed ancestor. Paint their ::after with --edge-top-background and --edge-bottom-background. Make them position: fixed, full-width, pointer-events: none, and max(12px, env(safe-area-inset-top)) or max(12px, env(safe-area-inset-bottom)) tall. Keep them clear of content.
2. Document backgrounds. Set the html background to the top color and the body background to the bottom color.
3. Meta tags. Add viewport-fit=cover but keep text and controls inside the safe areas. Add a theme-color meta tag that tracks the top color.
4. One source of truth. Work out the palette once per page or state, then apply the same values to the visible background, both strips, the document backgrounds, and the meta tag.
5. Dynamic colors. If a page's background changes on scroll, update all of the above together. Handle restored scroll positions, viewport resizes, and Safari's toolbar expanding or collapsing. Clean up listeners and restore shared document styles when you leave the page.
6. Limits. Each edge has to be a solid color. Don't try to extend images or left-to-right gradients behind the controls; pick the closest solid color instead.

Report which pages you changed, the edge colors you used, and anything you skipped.