Merge branch 'mobile-app/scoped-styles' into mobile-app/prepare-webviews

* mobile-app/scoped-styles:
  Replace android and ios css layers with platform layer
  Change how show-on-native works
  Use the correct css layers for Android and iOS

app/assets/stylesheets/_global.css

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

app/assets/stylesheets/android.css

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

app/assets/stylesheets/ios.css

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

app/assets/stylesheets/native.css

@@ -10,10 +10,6 @@
       display: none;
     }
 
-    .show-on-native {
-      display: unset;
-    }
-
     /* Header
     /* ------------------------------------------------------------------------ */
 

app/assets/stylesheets/utilities.css

@@ -270,7 +270,9 @@
   }
 
   .show-on-native {
-    display: none;
+    body:not([data-platform~=native]) & {
+      display: none;
+    }
   }
 
   .hide-scrollbar {