/*
 * Purpose: Shared "back" control for the marketing pages
 * Last modified: 2026-08-13 | Author: Agent (Claude) | Completeness: 100
 *
 * Deliberately standalone rather than folded into clay-theme.css. Several marketing pages carry
 * their own large inline style blocks and their own page stylesheet; loading the whole theme just
 * to style one 40px button would let the theme's base rules land on top of those pages and change
 * layouts that have nothing to do with this control. A shared component should cost only itself.
 *
 * Everything here is scoped under .mkt-back for the same reason.
 */

.mkt-back {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(12, 10, 34, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mkt-back:hover,
.mkt-back:focus-visible {
  background: rgba(12, 10, 34, 0.85);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateX(-2px);
}

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

.mkt-back svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* No prefers-color-scheme override here on purpose. The marketing pages are dark whatever the
   visitor's OS is set to (html carries data-theme="marketing"), so keying the control to the OS
   scheme puts a white button on a dark page for every reader whose system is in light mode — as
   it did on first render. The control follows the pages, not the operating system. */

/* A fixed control would collide with a sticky nav's own logo on narrow screens. */
@media (max-width: 640px) {
  .mkt-back {
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-back {
    transition: none;
  }
  .mkt-back:hover,
  .mkt-back:focus-visible {
    transform: none;
  }
}

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