/*
 * What a home-screen launch needs, and a tab does not.
 *
 * Linked from Base.astro with
 *   media="(display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen)"
 * so a browser tab fetches it at idle priority and is never held up by it,
 * while an installed window has it before the first paint. Nothing here is
 * behind JavaScript, because a notch is not a progressive enhancement.
 *
 * `env(safe-area-inset-*)` only reports a real number when the viewport meta
 * carries `viewport-fit=cover`. That, plus
 * `apple-mobile-web-app-status-bar-style: black-translucent` — which Base.astro
 * already sets, and which makes iOS draw the page UNDER the clock — is why
 * without this file the masthead sits behind the status bar on any notched
 * iPhone. The two belong together or not at all.
 *
 * It is a plain file in public/, not part of the bundle, because it has to be
 * cacheable by /sw.js under a URL that never changes.
 *
 * Inside the Capacitor wrapper (docs/MOBILE.md "§1a applied, 2026-10-08")
 * `display-mode` is plain `browser`, so the media query above never matches
 * there; pwa.js §6 recognises the wrapper by its user-agent token and flips
 * this link's media to `all`. Nothing here may assume a notch or a wrapper:
 * every rule is safe in a plain standalone window too.
 */

/* The masthead is the top edge of the window now; it owns the notch. The
   signed-in app header (.app-head, appbar.css) is the same edge for a member. */
.site-head,
.app-head {
  padding-top: env(safe-area-inset-top, 0px);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Left and right: a landscape iPhone puts the rounded corner and the camera
   housing inside the viewport. 16px is what .wrap already uses, so this only
   ever adds, never takes away. */
.site-head .wrap,
.app-head .wrap,
main .wrap,
.site-foot .wrap,
.push-nudge .wrap {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 720px) {
  .site-head .wrap,
  .app-head .wrap,
  main .wrap,
  .site-foot .wrap,
  .push-nudge .wrap {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
}

/* The home indicator sits over the bottom 34px on a gesture iPhone. */
.site-foot {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* An installed window is not a document that can be selected, dragged and
   long-pressed into a share sheet — except where the text IS the point. */
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
.site-head,
.site-foot,
.btn,
.nav-top {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* No browser chrome means no visible URL, so an outbound link has to say so
   itself. The glyph is already in the markup; standalone gives it weight. */
a.ext .ext-glyph {
  opacity: 1;
}

/* The masthead's targets are 44px apart in a window with no address bar to
   aim around — the thumb is the only pointer here. Both mastheads: the
   visitor's (.site-head) and the member's (.app-head, appbar.css). */
.site-nav > a,
.site-nav .nav-top,
.site-cta,
.app-head .app-nav > a,
.app-head .app-ic,
.app-head .app-firm,
.app-head .wg,
.app-head .app-out button,
.site-head .wg {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.app-head .app-ic {
  min-width: 44px;
  justify-content: center;
}

/* The notification strip's two buttons, and the footer's one-line links. */
.push-nudge .btn,
.site-foot .links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
