@layer native {
  .show-on-native {
    display: none;
  }

  [data-platform~="native"] {
    -webkit-tap-highlight-color: transparent;

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

    .show-on-native {
      display: block;
    }

    .btn--back {
      display: none;
    }

    #main {
      padding-block-end: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
    }

    /* The native navigation bar already accounts for the top inset.
       Remove the web-side padding so there is no double gap. */
    .app-page,
    .dashboard {
      padding-block-start: 0;
      padding-block-end: var(--safe-bottom);
    }

    /* The native nav bar handles title and back navigation — hide the web topbars. */
    .app-topbar,
    .dashboard__topbar {
      display: none;
    }

    /* The native tab bar replaces the web bottom nav. */
    .bottom-nav {
      display: none;
    }

    /* Tighten the gap between the native nav bar and the first content element. */
    .news-search {
      padding-block-start: var(--space-sm);
    }
  }

  [data-platform~="ios"] {
    .header {
      padding-block-start: var(--safe-area-inset-top, env(safe-area-inset-top));
    }
  }

  [data-platform~="android"] {
    .header {
      padding-block-start: var(--safe-area-inset-top, env(safe-area-inset-top));
    }
  }
}