/* ============================================================
   SWISS CLUSTER TO-TOP BUTTON — component styles
   Framework-free. A small dark square with a centred up-arrow,
   fixed to the bottom-right corner of the viewport. Clicking
   scrolls the page to the top.

   Usage:
     <button class="sc-totop" type="button" aria-label="Scroll to top">
       <svg class="sc-totop__icon" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M12 4 L12 20 M5 11 L12 4 L19 11" fill="none"
               stroke="currentColor" stroke-width="2"
               stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>

   Theming: override the CSS variables on .sc-totop.
   ============================================================ */

.sc-totop {
  /* ---- design tokens (match the rest of the design system) ---- */
  --sc-totop-bg: var(--sc-gray-3);
  --sc-totop-bg-hover: #b9b9bb;
  --sc-totop-bg-active: #adadaf;
  --sc-totop-color: var(--sc-ink);
  --sc-totop-size: 72px;
  --sc-totop-radius: 16px;
  --sc-totop-offset: 32px; /* distance from viewport edges */
  --sc-totop-icon-size: 34px;
  --sc-totop-font: var(--sc-font-sans);

  /* ---- positioning ---- */
  position: fixed;
  right: var(--sc-totop-offset);
  bottom: var(--sc-totop-offset);
  z-index: 50;

  /* ---- layout ---- */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sc-totop-size);
  height: var(--sc-totop-size);
  padding: 0;
  border: none;
  border-radius: var(--sc-totop-radius);
  background: var(--sc-totop-bg);
  color: var(--sc-totop-color);
  font-family: var(--sc-totop-font);
  cursor: pointer;

  /* ---- hidden initial state — JS toggles .is-visible on scroll ---- */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    background 0.15s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.sc-totop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sc-totop:hover {
  background: var(--sc-totop-bg-hover);
}
.sc-totop:active {
  background: var(--sc-totop-bg-active);
}

.sc-totop:focus-visible {
  outline: 2px solid var(--sc-totop-color);
  outline-offset: 2px;
}

.sc-totop__icon {
  width: var(--sc-totop-icon-size);
  height: var(--sc-totop-icon-size);
  display: block;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sc-totop {
    transition: opacity 0.195s ease;
    transform: none;
  }
  .sc-totop.is-visible {
    transform: none;
  }
}

/* mobile — slightly smaller, closer to the edges */
@media (max-width: 720px) {
  .sc-totop {
    --sc-totop-size: 64px;
    --sc-totop-offset: 20px;
    --sc-totop-icon-size: 30px;
  }
}