/* =========================================================================
   Installed-app adjustments (iOS home screen / standalone).
   Kept separate from styles.css so the main stylesheet stays yours to edit.
   ========================================================================= */

/* The notch and the home indicator overlap the page in standalone mode.
   env() resolves to 0 in a normal browser tab, so this is harmless there. */
.masthead {
  padding-top: env(safe-area-inset-top);
}
.masthead-inner,
main,
.inv-wrap {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
main {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* iOS rubber-band scrolling reveals the page behind the app; painting the
   background on the root stops a flash of the wrong colour at the edges. */
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

@media (display-mode: standalone) {
  /* No browser chrome to grab, so kill the long-press callout and the grey
     tap flash that make a web app feel like a web page. */
  body {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
  }

  /* Text in the log stays selectable; controls shouldn't be. */
  .btn,
  .chip,
  .icon-btn,
  .masthead,
  .tot-label,
  .figure-label,
  .eyebrow {
    -webkit-user-select: none;
    user-select: none;
  }

  /* A back link matters more without a browser back button. */
  .inv-actions .btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* iOS zooms the page when a focused input is under 16px. Keeping form fields
   at 16px on touch devices prevents that jarring auto-zoom. */
@media (hover: none) and (pointer: coarse) {
  .field input,
  .field select,
  .code-input {
    font-size: 16px;
  }
  /* Comfortable touch targets. */
  .chip {
    padding: 6px 12px;
  }
  .icon-btn {
    width: 34px;
    height: 34px;
  }
}