Add base files

app/assets/stylesheets/_global.css

@@ -1,4 +1,4 @@
-@layer reset, base, components, modules, utilities;
+@layer reset, base, components, modules, utilities, native, android, ios;
 
 :root {
   /* Spacing */

app/assets/stylesheets/android.css

@@ -0,0 +1,7 @@
+@layer native {
+  [data-platform~=android] {
+    .hide-on-android {
+      display: none;
+    }
+  }
+}

app/assets/stylesheets/ios.css

@@ -0,0 +1,7 @@
+@layer native {
+  [data-platform~=ios] {
+    .hide-on-ios {
+      display: none;
+    }
+  }
+}

app/assets/stylesheets/native.css

@@ -0,0 +1,17 @@
+@layer native {
+  [data-platform~=native] {
+    /* The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */
+    --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
+    --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
+    --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
+    --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));
+
+    .hide-on-native {
+      display: none;
+    }
+
+    .show-on-native {
+      display: unset;
+    }
+  }
+}

app/assets/stylesheets/utilities.css

@@ -269,6 +269,10 @@
     }
   }
 
+  .show-on-native {
+    display: none;
+  }
+
   .hide-scrollbar {
     -ms-overflow-style: none;  /* Edge */
     scrollbar-width: none; /* FF */