/* IlluminateScrollTop.v12 — bottom-left scroll-to-top near First Light cluster.
   Avoids overlapping .illuminate-mode-control hit target (left:12 / right dock). */
@layer legacy {
  .illuminate-scroll-top {
    position: fixed;
    z-index: 10010; /* below mode control 10020 */
    left: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(145, 238, 230, 0.42);
    background: rgba(1, 6, 21, 0.88);
    color: #f7fbfc;
    box-shadow: 0 10px 28px rgba(1, 6, 21, 0.45), inset 0 1px rgba(255,255,255,0.12);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .illuminate-scroll-top[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .illuminate-scroll-top:hover {
    background: rgba(7, 19, 29, 0.96);
    border-color: rgba(145, 238, 230, 0.7);
  }
  .illuminate-scroll-top:focus-visible {
    outline: 3px solid #f4d4a6;
    outline-offset: 3px;
  }
  .illuminate-scroll-top svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  /* After Dark: keep cream/teal chrome readable */
  html.illuminate-mode-night .illuminate-scroll-top,
  [data-illuminate-mode="night"] .illuminate-scroll-top {
    background: rgba(7, 19, 29, 0.92);
    border-color: rgba(145, 238, 230, 0.55);
    color: #f7fbfc;
  }
  /* Lift above consent when present — consent is bottom; keep left clear of right-side manage */
  body:has(.illuminate-consent:not([hidden])) .illuminate-scroll-top,
  body:has([data-manifest-consent]:not([hidden])) .illuminate-scroll-top {
    bottom: 96px;
  }
  /* When First Light control is docked left, nest scroll-top below it */
  body:has(.illuminate-mode-control[data-dock="left"]) .illuminate-scroll-top {
    bottom: 16px;
    left: 16px;
  }
  @media (max-width: 480px) {
    .illuminate-scroll-top {
      left: 12px;
      bottom: 12px;
      width: 44px;
      height: 44px;
    }
    body:has(.illuminate-consent:not([hidden])) .illuminate-scroll-top {
      bottom: 110px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .illuminate-scroll-top {
      transition: none;
    }
  }
}