/* Standalone / Add-to-Home-Screen: keep chrome clear of notch & home indicator.
   Used with apple-mobile-web-app-status-bar-style=black-translucent + viewport-fit=cover. */
@media (display-mode: standalone) {
  .app-header.navbar {
    /* Preserve Bootstrap navbar Y padding, then clear the status bar / Dynamic Island. */
    padding-top: calc(var(--bs-navbar-padding-y, 0.5rem) + constant(safe-area-inset-top));
    padding-top: calc(var(--bs-navbar-padding-y, 0.5rem) + env(safe-area-inset-top, 0px));
    padding-left: calc(var(--bs-navbar-padding-x, 0.5rem) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--bs-navbar-padding-x, 0.5rem) + env(safe-area-inset-right, 0px));
  }

  .app-sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  .login-page {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* iOS < display-mode media: class set by pwa.js when navigator.standalone is true. */
body.hp-pwa-standalone .app-header.navbar {
  padding-top: calc(var(--bs-navbar-padding-y, 0.5rem) + constant(safe-area-inset-top));
  padding-top: calc(var(--bs-navbar-padding-y, 0.5rem) + env(safe-area-inset-top, 0px));
  padding-left: calc(var(--bs-navbar-padding-x, 0.5rem) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--bs-navbar-padding-x, 0.5rem) + env(safe-area-inset-right, 0px));
}

body.hp-pwa-standalone .app-sidebar {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

body.hp-pwa-standalone.login-page {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Horton Press installable web-app prompt (mobile only). */
.hp-install-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 2000;
  width: min(calc(100vw - 28px), 360px);
  transform: translateX(-50%);
  pointer-events: none;
  animation: hp-install-in 280ms ease both;
}

.hp-install-bubble {
  position: relative;
  pointer-events: auto;
  padding: 14px 36px 14px 16px;
  border-radius: 14px;
  background: #111111;
  color: #f4f7f3;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(27, 158, 79, 0.45);
}

.hp-install-copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #f4f7f3;
}

.hp-install-copy strong {
  font-weight: 700;
}

.hp-install-share {
  display: inline-block;
  vertical-align: -3px;
  margin: 0 2px;
  color: #f4f7f3;
}

.hp-install-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(244, 247, 243, 0.72);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.hp-install-dismiss:hover,
.hp-install-dismiss:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.hp-install-action {
  display: inline-flex;
  margin-top: 10px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: #1b9e4f;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.hp-install-action:hover,
.hp-install-action:focus-visible {
  background: #15803d;
  outline: none;
}

.hp-install-pointer {
  width: 14px;
  height: 14px;
  margin: -7px auto 0;
  background: #111111;
  transform: rotate(45deg);
  border-radius: 2px;
  border-right: 1px solid rgba(27, 158, 79, 0.45);
  border-bottom: 1px solid rgba(27, 158, 79, 0.45);
}

@keyframes hp-install-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (min-width: 901px) {
  .hp-install-prompt {
    display: none;
  }
}

@media (display-mode: standalone) {
  .hp-install-prompt {
    display: none !important;
  }
}