fix(org): stop the phone settings title painting its own strip in the top bar

The surface carrying the title into the host's bar painted the canvas, which
the bar's own surface shows through everywhere else.

Author: waleedlatif1

apps/sim/platform/design-system/styles/embedded.css

@@ -51,6 +51,11 @@
   background: var(--ui-canvas);
 }
 
+/* A part carried into the host's own bar: the bar paints, so the surface around it must not. */
+[data-platform-ui][data-canvas]:has(> [data-host-chrome]) {
+  background: transparent;
+}
+
 [data-platform-ui][data-theme="dark"] {
   color-scheme: dark;
 }

apps/sim/platform/embedded/app/(shell)/settings/_components/settings-screen/settings-screen.tsx

@@ -24,7 +24,7 @@ export function SettingsBreadcrumb({ title }: SettingsBreadcrumbProps) {
 /** The section's name, for the phone top bar that replaces the breadcrumb. */
 export function SettingsMobileTitle({ title }: SettingsBreadcrumbProps) {
   return (
-    <span className={styles.mobileTitle} data-type='T057'>
+    <span className={styles.mobileTitle} data-host-chrome data-type='T057'>
       {title}
     </span>
   )