/* Pilates Compass — PWA install guide and app-mode adjustments. */

.pwa-install-guide {
  padding: 40px 0 60px;
}

.pwa-install-guide__intro {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.pwa-install-guide__intro h1 {
  color: #584c45;
  margin-bottom: 12px;
}

.pwa-steps {
  max-width: 640px;
  margin: 0 auto 32px;
  padding: 24px;
  border: 1px solid #bcc8ba;
  border-radius: 12px;
  background: #fff;
}

.pwa-steps h2 {
  color: #506243;
  margin: 0 0 8px;
  font-size: 20px;
}

.pwa-steps__list {
  margin: 16px 0 0;
  padding-left: 22px;
}

/* style.css:102 applies `list-style: none` to a bare `li`, which strips the
 * numbers off these steps -- and a step-by-step guide without step numbers has
 * lost the thing it exists for. That rule carries no !important, so the extra
 * class here is enough to win on specificity; do not escalate to !important. */
.pwa-steps__list li {
  list-style: decimal outside;
  margin-bottom: 12px;
  line-height: 1.6;
}

.pwa-steps__list li::marker {
  color: #506243;
  font-weight: 600;
}

.pwa-steps__icon {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 6px;
}

.pwa-steps__note {
  margin: 12px 0 0;
  color: #584c45;
  font-size: 14px;
  line-height: 1.6;
}

.pwa-steps__warning {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #506243;
  background: #f3f5f1;
  font-size: 14px;
  line-height: 1.6;
}

/* --- Standalone safe areas ------------------------------------------------
 * In app mode there is no browser chrome, so the OS stops insetting the page
 * and content runs under the iPhone notch and under the home indicator.
 * header.php's viewport-fit=cover opts into that full screen; these rules pay
 * the inset back.
 *
 * Scoped to display-mode: standalone so the ordinary browser layout is
 * untouched. Every inset carries a 0px fallback, so on a device with no notch
 * -- and in every desktop browser -- these resolve to nothing.
 */
@media all and (display-mode: standalone) {
  /* All four sides on body: it starts with zero padding in this theme, so
   * these are purely additive and nothing existing is overridden. The 15px
   * that .container already carries stays on top of this. */
  body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* The dashboard sidebar is `position: fixed; top: 0; height: 100vh`
   * (style.css:804), so under viewport-fit=cover it spans the whole screen
   * including the unsafe strips. Padding on body cannot reach a fixed
   * element -- it is positioned against the viewport -- so it needs its own. */
  .main_dashboard .left_side {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  /* Its close button is fixed too, and sits at the top of that panel. */
  .main_dashboard .left_side .sidebar_content a.close_btn {
    margin-top: env(safe-area-inset-top, 0px);
  }
}

/* --- Push opt-in ---------------------------------------------------------- */
.pc-push-optin {
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid #bcc8ba;
  border-radius: 12px;
  background: #f3f5f1;
}

.pc-push-optin__title {
  margin: 0 0 6px;
  color: #506243;
  font-weight: 600;
}

.pc-push-optin__text {
  margin: 0 0 14px;
  color: #584c45;
  font-size: 14px;
  line-height: 1.6;
}

.pc-push-optin__button {
  display: inline-block;
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #506243;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.pc-push-optin__link {
  padding: 0;
  border: 0;
  background: none;
  color: #584c45;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.pc-push-optin__feedback {
  margin: 10px 0 0;
  color: #506243;
  font-size: 13px;
}

.pc-push-optin__feedback:empty {
  display: none;
}