/*
 * The page inside a native app (Hotwire Native, docs/planning/15-push-native-design.md §2.1). The user agent of the app makes
 * the server put class="is-native" on <html> and leave out the web bars (templates/base.html.twig): the title bar, the tabs
 * and the tab bar are the app's own. This file is what is left to say about the frame, and the only place that does:
 * where the bars were there is room. (The h1 is hidden from the eye by the template, with .visually-hidden.)
 */

@layer components {
  /*
   * No bars of the page are on the screen, so nothing sticks below them and nothing is above the bottom of the screen but
   * its safe area: the cart bar, the messages and the foot of a page stay clear of where the tab bar of the app sits, and
   * the keyboard focus scrolls in view with that room (base.css reads the same variables).
   */
  html.is-native {
    --chrome-h: 0px;
    --tabbar-h: 0px;
    --bottom-bars: env(safe-area-inset-bottom);
  }

  /*
   * The page of a dish in an app is what the native sheet shows (the page rules make /menu/{id} a modal, ADR-038): the sheet has the
   * colour of a surface, white in the light looks, as screen N2 draws it, and not the colour of the pages behind it. The one rule for
   * the page of a modal; the sheet of the app, its bar and its web view have the same colour (ios/, Appearance.sheetBar).
   */
  html.is-native:has(.dish-view) .app {
    background: var(--surface);
  }

  /*
   * In the sheet of an app the page of a dish shows what the sheet of the website shows (screen 2): not the line "Categorie: …" (the
   * sheet of the website has none: the dish is a place on the menu behind it) and no room above the title (the bar of the sheet,
   * with its close button, is above the page already). The kitchen note stays: it is part of the dish form (E12).
   */
  html.is-native:has(.dish-view) .dish-page__category {
    display: none;
  }

  html.is-native:has(.dish-view) .dish-page {
    padding-top: 0;
  }

  /* An app that does not have the bridge component nav-buttons keeps Info and Bellen in the card of the menu, at every width: its bar has none. */
  html.is-native .resto__actions {
    display: flex;
  }

  /* A page without categories has no sidebar in the app (the sections are the app's tabs): the page, and the cart panel next to it, take its place. */
  @media (min-width: 1024px) {
    html.is-native .frame:not(.frame--categories) {
      grid-template-columns: minmax(0, 1fr);
    }

    html.is-native .frame--panel:not(.frame--categories) {
      grid-template-columns: minmax(0, 1fr) var(--panel-w);
    }
  }
}