/**
 * <back-to-top> — standalone stylesheet (light DOM, no shadow DOM)
 * Clean rewrite of the y888 back-to-top button (strangler rewrite)
 *
 * Specs (from ToTopIndex.DqZup6-v.css + FloatBarIndex):
 *  - Pill button: 1.16rem × 0.56rem, radius 0.14rem
 *  - Dark background (#161616), thin #414141 border
 *  - Magenta circle icon (0.36rem) with white rocket SVG
 *  - "TOP" label, 0.18rem
 *  - Fixed bottom-right (bottom: 1.5rem, right: 0.1rem)
 *  - Appears after scrolling past 100px (fade 300ms)
 *
 * Requires: css/tokens.css loaded before this file.
 * Pair with back-to-top.js (Web Component) OR use the light-DOM
 * markup below with your own scroll handler toggling
 * .back-to-top-wrap--show on the wrapper.
 *
 * Light-DOM markup:
 *   <div class="back-to-top-wrap">
 *     <div class="back-to-top" role="button" aria-label="Back to top" tabindex="0">
 *       <span class="back-to-top__icon"><svg …></svg></span>
 *       <span class="back-to-top__label">TOP</span>
 *     </div>
 *   </div>
 */

.back-to-top-wrap {
  position: fixed;
  bottom: 1.5rem;
  right: 0.1rem;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms;
}

.back-to-top-wrap--show {
  opacity: 1;
  visibility: visible;
}

.back-to-top {
  width: 1.16rem;
  height: 0.56rem;
  min-height: 0.56rem;
  padding: 0 0 0 0.16rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 0.14rem;
  background-color: var(--y888-bg-card);
  border: thin solid var(--y888-border);
  position: relative;
  cursor: pointer;
  box-shadow: none;
  font-family: var(--y888-font-family);
}

.back-to-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.9;
  border-radius: 0.14rem;
  box-shadow: 0 0.01rem 0.1rem rgba(0, 0, 0, 0.1);
}

.back-to-top__icon {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.36rem;
  min-width: 0.36rem;
  height: 0.36rem;
  background-color: var(--y888-primary);
  border-radius: 50%;
}

.back-to-top__icon svg,
.back-to-top__icon img {
  width: 0.15rem;
  height: 0.24rem;
  display: block;
}

.back-to-top__label {
  padding-left: 0.1rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  color: var(--y888-text);
  font-size: 0.18rem;
  font-weight: var(--y888-font-weight);
  line-height: 1;
}

/* Keyboard focus visibility */
.back-to-top:focus-visible {
  outline: 2px solid var(--y888-primary);
  outline-offset: 2px;
}