/* Chrome injected into every scene page by scripts/build.py.

   Scoped hard to .ah-back and loaded LAST, because it lands inside thirteen
   stylesheets that were each written as if they owned the page. Everything
   here is either a fresh class name or an explicit reset, and the element is
   fixed-position so it cannot disturb any scene's layout or scroll maths.

   position: fixed rather than sticky, and pointer-events only on the control
   itself, so scroll-driven scenes (the frame sequences especially) behave
   exactly as they did before. */

.ah-back {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 2147483000; /* above scene overlays, below nothing that matters */

  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0;
  padding: 9px 15px 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;

  background: rgba(10, 10, 12, 0.62);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);

  color: #fff;
  font: 600 0.83rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: none;

  opacity: 0.45;
  transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.ah-back:hover,
.ah-back:focus-visible {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(10, 10, 12, 0.85);
}

.ah-back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.ah-back svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
}

/* Some scenes hide overflow and lock scroll on small screens; keep the control
   from crowding the content there. */
@media (max-width: 560px) {
  .ah-back {
    top: 12px;
    left: 12px;
    padding: 8px 12px 8px 9px;
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ah-back {
    transition: none;
  }
}

@media print {
  .ah-back {
    display: none;
  }
}