/* see CLAUDE_notes.md */

:root {
    /* Layer for the button. Above every page surface, below every pop-up. */
    --fadb-btt-z: 980;
    /* Button diameter and its inset from the viewport corner. */
    --fadb-btt-size: 44px;
    --fadb-btt-gap: 1.25rem;
    /* How slowly it fades in / out. */
    --fadb-btt-fade: 450ms;
}

.scrollBackToTopBtn {
    position: fixed;
    right: var(--fadb-btt-gap);
    bottom: var(--fadb-btt-gap);
    z-index: var(--fadb-btt-z, 980);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fadb-btt-size);
    height: var(--fadb-btt-size);
    padding: 0;
    margin: 0;

    /* The glyph is a plain ↑ character — bump it up so it fills the
       circle the way an icon would. */
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--primary-color, #2563eb);
    border: 1px solid var(--primary-hover, #1d4ed8);
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    cursor: pointer;

    /* ── Hidden by default ──────────────────────────────────────────────
       opacity + visibility (not display) so the fade can actually run;
       pointer-events:none keeps the hidden button from eating clicks, and
       visibility:hidden takes it out of the tab order. The delayed
       `visibility` step is what lets the fade-OUT finish before it goes
       untabbable. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity var(--fadb-btt-fade) ease,
                transform var(--fadb-btt-fade) ease,
                visibility 0s linear var(--fadb-btt-fade),
                right 160ms ease,
                background 160ms ease;
}

/* ── Shown (scroll_top.js adds .is-visible past the threshold) ─────────── */
.scrollBackToTopBtn.is-visible {
    opacity: 0.7;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--fadb-btt-fade) ease,
                transform var(--fadb-btt-fade) ease,
                visibility 0s,
                right 160ms ease,
                background 160ms ease;
}

/* Full strength on hover / keyboard focus. */
.scrollBackToTopBtn:hover,
.scrollBackToTopBtn:focus-visible { opacity: 1; }
.scrollBackToTopBtn:hover { background: var(--primary-hover, #1d4ed8); }
.scrollBackToTopBtn:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}
.scrollBackToTopBtn:active { transform: translateY(1px); }

/* ── Docked references panel — sit to its LEFT, never underneath ─────────
   PubRefsPop.js sets body.prp-docked while the panel is pinned AND open, and
   clears it on close, so this tracks "docked and visible" exactly. --panel-w
   is the same token coreLayout.css uses to reserve the panel's space, so the
   two can't drift. */
body.prp-docked .scrollBackToTopBtn {
    right: calc(var(--panel-w, 460px) + var(--fadb-btt-gap));
}

/* ── Full-page surfaces own their own scrolling ─────────────────────────
   In full page the window no longer scrolls (body is overflow:hidden), so a
   "back to top" that drives window scroll would be a dead control. Hide it
   for the duration; FullPage clears the class on exit. */
body.fadb-fp-active .scrollBackToTopBtn { display: none; }

/* ── Mobile ─────────────────────────────────────────────────────────────
   Under 560px the docked panel goes full-width (see PubRefsPop.css), so there
   is no "left of it" to sit in — drop back to the plain corner position. */
@media (max-width: 560px) {
    :root { --fadb-btt-size: 40px; --fadb-btt-gap: 0.9rem; }
    body.prp-docked .scrollBackToTopBtn { right: var(--fadb-btt-gap); }
}

@media (prefers-reduced-motion: reduce) {
    .scrollBackToTopBtn,
    .scrollBackToTopBtn.is-visible {
        transform: none;
        transition: opacity 1ms linear, visibility 0s;
    }
}