/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Copy that is only true inside the installed app ──
 *
 * `app/views/pwa/manifest.json.erb` asks for `display: standalone`, which the
 * Web App Manifest spec defines as the mode where "the user agent will exclude
 * UI elements for controlling navigation". That is the address bar, and the
 * address bar is the entire mechanism by which a person tells a real consent
 * screen from a copy of one. Anything this app has to say about that is true
 * in the installed window and merely noise in an ordinary tab, so it is
 * switched on by the window it is in rather than by a class the server picks:
 * the server cannot know, and a media query cannot be wrong about it.
 *
 * A media query rather than JavaScript because there is nothing to compute and
 * nothing to wait for — `display-mode` has been available in every engine
 * since January 2020 — and because a paragraph that only appears once a
 * controller has connected is a paragraph that can fail to appear.
 *
 * The default is hidden, so every one of these lines is invisible outside the
 * installed app and no flow that works today renders a character more.
 */
.pwa-only {
  display: none;
}

@media (display-mode: standalone),
       (display-mode: fullscreen),
       (display-mode: minimal-ui),
       (display-mode: window-controls-overlay) {
  .pwa-only {
    display: revert;
  }
}