/* Reliability layer for mobile browsers and Capacitor shells. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-height: var(--temvera-viewport-height, 100dvh);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-topbar,
.app-account-bar {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
}

/* The mobile menu is absolutely positioned below .site-topbar.
   styles.css clips the topbar for its glass effect, which also clips the
   menu and can make Android WebView look frozen after the menu button is
   tapped. Keep the landing topbar open for its controlled child panel. */
.site-topbar {
  overflow: visible;
}

.touch-ui button,
.touch-ui input,
.touch-ui select,
.touch-ui a.btn,
.touch-ui .text-btn {
  min-height: 44px;
}

body.dialog-open {
  overflow: hidden;
}

dialog {
  max-height: min(88vh, calc(var(--temvera-viewport-height, 100dvh) - 28px));
  overflow: auto;
  overscroll-behavior: contain;
}

.keyboard-open dialog[open] {
  max-height: calc(var(--temvera-viewport-height, 100dvh) - 18px);
  margin-top: calc(var(--temvera-viewport-offset-top, 0px) + 9px);
  margin-bottom: 9px;
}

input,
select,
button {
  touch-action: manipulation;
}

@media (max-width: 700px) {
  .app-shell,
  body[data-active-view="appView"] .app-shell {
    width: min(100% - 20px, 1240px);
  }

  .app-account-bar,
  .pricing-account-actions,
  .app-account-actions {
    min-width: 0;
  }

  .app-account-actions,
  .pricing-account-actions {
    flex-wrap: wrap;
  }

  .task-card,
  .timeline-block,
  .focus-card,
  .account-card,
  .price-card,
  .card {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Bound the panel to the real visual viewport so rotating the phone or
     opening the keyboard cannot create an unreachable full-screen layer. */
  .mobile-nav-panel {
    max-height: calc(var(--temvera-viewport-height, 100dvh) - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Android WebView can stall while compositing nested sticky glass layers.
     The menu is transient, so prefer a solid surface on coarse/touch UIs. */
  .touch-ui .mobile-nav-panel {
    background: rgba(255, 255, 255, .98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Native Android WebView stability mode.
   Large translucent layers + backdrop-filter + sticky compositing can stall
   some WebView/GPU combinations as soon as the user scrolls. The native
   shell uses solid/translucent surfaces instead of live background blur. */
html.android-webview,
html.android-webview body {
  scroll-behavior: auto;
}

html.android-webview *,
html.android-webview *::before,
html.android-webview *::after,
html.android-webview dialog::backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Native transitions must not keep the WebView compositor alive across a
   full view swap (landing -> signup/app). The browser version keeps its
   motion; only the packaged Android shell uses the stability path. */
html.android-webview *,
html.android-webview *::before,
html.android-webview *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

html.android-webview .steps-track {
  will-change: auto;
}

/* The opening artwork must remain centered even in the native stability
   mode below, which intentionally disables transforms and animations. */
html.android-webview .intro-art-ring,
html.android-webview .intro-art-core { inset: 0; margin: auto; }

@media (max-width: 700px) {
  html.android-webview .site-topbar {
    position: relative;
    top: auto;
  }

  html.android-webview .site-topbar,
  html.android-webview .app-account-bar,
  html.android-webview .product-preview,
  html.android-webview .account-card,
  html.android-webview .app-setup-grid .card,
  html.android-webview .inventory-empty,
  html.android-webview .empty-state,
  html.android-webview .timeline,
  html.android-webview .deferred {
    background-color: rgba(255, 255, 255, .96);
  }

  html.android-webview .motion-item,
  html.android-webview body[data-active-view="appView"] .app-view {
    animation: none !important;
  }
}


/* Diagnostic Android interaction safe mode.
   The renderer crash can be reproduced even when the CTA handler does no
   navigation or data work, so isolate CSS state changes that happen before
   JavaScript runs (:active/:focus/hover paint + compositor updates). */
html.android-webview *,
html.android-webview *::before,
html.android-webview *::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.android-webview button,
html.android-webview .btn,
html.android-webview a,
html.android-webview [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
}

html.android-webview button:hover,
html.android-webview button:active,
html.android-webview button:focus,
html.android-webview .btn:hover,
html.android-webview .btn:active,
html.android-webview .btn:focus,
html.android-webview a:hover,
html.android-webview a:active,
html.android-webview a:focus,
html.android-webview [role="button"]:hover,
html.android-webview [role="button"]:active,
html.android-webview [role="button"]:focus {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}

html.android-webview .js-start-trial .icon {
  display: none !important;
}