/*
 * 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.
 */

/* The masthead is the top edge of the window now; it owns the notch. */
.site-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,
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,
  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 three targets are 44px apart in a window with no address bar
   to aim around — the thumb is the only pointer here. */
.site-nav > a,
.site-nav .nav-top,
.site-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}