/* Shared "back to portfolio" pill. Demos may override the --pf-back-* tokens. */
.pf-back {
  --pf-back-bg: rgb(12 12 14 / 0.72);
  --pf-back-fg: #fff;
  --pf-back-ring: rgb(255 255 255 / 0.28);
  position: fixed;
  z-index: 9999;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem 0 0.8rem;
  border-radius: 999px;
  background: var(--pf-back-bg);
  color: var(--pf-back-fg);
  font: 600 0.875rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--pf-back-ring), 0 8px 24px rgb(0 0 0 / 0.25);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Shown only to visitors who opened this build from the portfolio. Direct links stay on the one build. */
html.pf-from-hub .pf-back { display: inline-flex; }
.pf-back:hover { transform: translateX(-2px); }
.pf-back:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #111; }
.pf-back svg { width: 16px; height: 16px; flex: none; }
@media (prefers-reduced-motion: reduce) { .pf-back { transition: none; } .pf-back:hover { transform: none; } }

/* ---- Shared phone behaviour for every demo (this file loads on all four) ---- */

/* No double-tap zoom on controls: tapping a stepper's "+" twice quickly must not zoom the page. */
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }

/* While an overlay is open the page behind it stays put (see /assets/overlay-guard.js). */
html.pf-lock, html.pf-lock body { overflow: hidden; overscroll-behavior: none; }