/* ════════════════════════════════════════════════════════════════════
   LM scroll-to-top — small circular button shown on mobile after the
   page is scrolled down. Sits 16px above the fixed 64px bottom nav and
   respects the iOS home-indicator safe area. Hidden until scrolled, and
   hidden entirely on >=768px (matches the bottom-nav breakpoint).
   Markup: _footer.tpl  ·  behaviour: lm-scrolltop.js
   ════════════════════════════════════════════════════════════════════ */
.lm-scrolltop {
  position: fixed;
  right: 16px;
  /* 16px above the fixed 64px bottom nav. The nav itself ignores the safe-area
     inset (constant 64px on iOS + Android), so we match it — no env() here — to
     keep the gap identical on both platforms. */
  bottom: 80px;
  z-index: 89;                 /* just under the bottom nav (z-index: 90) */
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 999px;
  background: var(--lm-surface, #ffffff);
  color: var(--lm-primary-strong, #0a5439);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lm-scrolltop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lm-scrolltop:active { transform: translateY(0) scale(0.94); }
.lm-scrolltop svg { width: 20px; height: 20px; display: block; }

/* Desktop: no bottom nav, page isn't cramped — hide it (mobile-only widget). */
@media (min-width: 768px) {
  .lm-scrolltop { display: none !important; }
}

/* Dark theme — keep the same tokens explicit so they don't fall back to white. */
html[data-lm-theme="dark"] .lm-scrolltop {
  background: var(--lm-surface, #161b22);
  border-color: var(--lm-border, #2a313a);
  color: var(--lm-primary, #2fa572);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}