/* What the app shows and hides. The phone brings chrome of its own and
   the page stops showing the web's; what only the phone can do, the page
   shows only there. This layer sits above the components and the
   utilities, so nothing here needs weight in its selector to win — the
   body's class is the whole condition. (The web-only counterpart,
   show-on-native, is a utility.) */
@layer native {

body.hotwire-native {
  .hide-on-native { display: none; }

  /* The masthead is the web's chrome; the app has its own. */
  .masthead { display: none; }

  /* In the app the seeker has already arrived, and the server keeps
     everything below the hero out of the payload (home/show.html.erb);
     the hero breathes a little wider in the room it has to itself. */
  .front__wheel { margin-top: 2.5rem; }
}

}