/* Shared back-to-top control for every public blog page. */
:root {
    --back-top-size: 46px;
    --back-top-radius: 15px;
    --back-top-right: 28px;
    --back-top-bottom: 28px;
    --back-top-surface: rgba(255, 255, 255, .86);
    --back-top-surface-hover: rgba(255, 255, 255, .98);
    --back-top-border: rgba(73, 104, 242, .2);
    --back-top-border-hover: rgba(73, 104, 242, .42);
    --back-top-icon: #4968f2;
    --back-top-shadow: 0 12px 30px rgba(35, 52, 105, .14), inset 0 1px 0 rgba(255, 255, 255, .72);
    --back-top-shadow-hover: 0 16px 34px rgba(73, 104, 242, .22), inset 0 1px 0 rgba(255, 255, 255, .84);
}

.back-to-top:not(.article-speed-action),
#back-to-top:not(.article-speed-action),
#backToTop:not(.article-speed-action),
#scroll-to-top-btn:not(.article-speed-action),
#air-global-back-to-top:not(.article-speed-action) {
    position: fixed !important;
    top: auto !important;
    right: var(--back-top-right) !important;
    bottom: var(--back-top-bottom) !important;
    left: auto !important;
}

.back-to-top,
#back-to-top,
#backToTop,
#scroll-to-top-btn,
#air-global-back-to-top {
    box-sizing: border-box !important;
    width: var(--back-top-size) !important;
    height: var(--back-top-size) !important;
    min-width: var(--back-top-size) !important;
    min-height: var(--back-top-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--back-top-border) !important;
    border-radius: var(--back-top-radius) !important;
    background: var(--back-top-surface) !important;
    color: var(--back-top-icon) !important;
    box-shadow: var(--back-top-shadow) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(12px) scale(.94) !important;
    transition: opacity .2s ease, visibility .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1),
    border-color .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    isolation: isolate !important;
    z-index: 10000 !important;
}

/* The article page places this control inside its compact speed dial. */
body.airjournal-article .article-speed-dial #scroll-to-top-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border: 1px solid var(--back-top-border) !important;
    border-radius: 13px !important;
    background: var(--back-top-surface) !important;
    color: var(--back-top-icon) !important;
    box-shadow: var(--back-top-shadow) !important;
}

.back-to-top::before,
.back-to-top::after,
#back-to-top::before,
#back-to-top::after,
#backToTop::before,
#backToTop::after,
#scroll-to-top-btn::before,
#scroll-to-top-btn::after,
#air-global-back-to-top::before,
#air-global-back-to-top::after {
    display: none !important;
    content: none !important;
}

.back-to-top.visible,
#back-to-top.visible,
#backToTop.visible,
#scroll-to-top-btn.visible,
#air-global-back-to-top.visible,
body.airjournal-article.quick-settings-open .article-speed-dial #scroll-to-top-btn {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.back-to-top.visible:not(.article-speed-action),
#back-to-top.visible:not(.article-speed-action),
#backToTop.visible:not(.article-speed-action),
#scroll-to-top-btn.visible:not(.article-speed-action),
#air-global-back-to-top.visible:not(.article-speed-action) {
    transform: translateY(0) scale(1) !important;
}

.back-to-top i,
#back-to-top i,
#backToTop i,
#scroll-to-top-btn i,
#air-global-back-to-top i,
.back-to-top svg,
#back-to-top svg,
#backToTop svg,
#scroll-to-top-btn svg,
#air-global-back-to-top svg {
    width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    font-size: 17px !important;
    line-height: 1 !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
    .back-to-top:hover,
    #back-to-top:hover,
    #backToTop:hover,
    #scroll-to-top-btn:hover,
    #air-global-back-to-top:hover {
        border-color: var(--back-top-border-hover) !important;
        background: var(--back-top-surface-hover) !important;
        color: var(--back-top-icon) !important;
        box-shadow: var(--back-top-shadow-hover) !important;
    }

    body.airjournal-article .article-speed-dial #scroll-to-top-btn:hover {
        border-color: var(--back-top-border-hover) !important;
        background: var(--back-top-surface-hover) !important;
        color: var(--back-top-icon) !important;
        box-shadow: var(--back-top-shadow-hover) !important;
    }

    .back-to-top:hover:not(.article-speed-action),
    #back-to-top:hover:not(.article-speed-action),
    #backToTop:hover:not(.article-speed-action),
    #scroll-to-top-btn:hover:not(.article-speed-action),
    #air-global-back-to-top:hover:not(.article-speed-action) {
        transform: translateY(-3px) scale(1) !important;
    }

    .back-to-top:hover i,
    #back-to-top:hover i,
    #backToTop:hover i,
    #scroll-to-top-btn:hover i,
    #air-global-back-to-top:hover i,
    .back-to-top:hover svg,
    #back-to-top:hover svg,
    #backToTop:hover svg,
    #scroll-to-top-btn:hover svg,
    #air-global-back-to-top:hover svg {
        transform: translateY(-1px) !important;
    }
}

.back-to-top:active:not(.article-speed-action),
#back-to-top:active:not(.article-speed-action),
#backToTop:active:not(.article-speed-action),
#scroll-to-top-btn:active:not(.article-speed-action),
#air-global-back-to-top:active:not(.article-speed-action) {
    transform: translateY(0) scale(.96) !important;
    box-shadow: 0 7px 18px rgba(35, 52, 105, .14) !important;
}

.back-to-top:focus-visible,
#back-to-top:focus-visible,
#backToTop:focus-visible,
#scroll-to-top-btn:focus-visible,
#air-global-back-to-top:focus-visible {
    outline: 3px solid rgba(73, 104, 242, .3) !important;
    outline-offset: 3px !important;
}

html[data-blog-theme="dark"] {
    --back-top-surface: rgba(54, 67, 84, .86);
    --back-top-surface-hover: rgba(62, 77, 97, .96);
    --back-top-border: rgba(137, 180, 255, .25);
    --back-top-border-hover: rgba(137, 180, 255, .46);
    --back-top-icon: #9ec5ff;
    --back-top-shadow: 0 14px 32px rgba(5, 10, 18, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
    --back-top-shadow-hover: 0 18px 38px rgba(4, 8, 16, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.air-modal-open .back-to-top,
body.air-modal-open #back-to-top,
body.air-modal-open #backToTop,
body.air-modal-open #scroll-to-top-btn,
body.air-modal-open #air-global-back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    :root {
        --back-top-size: 44px;
        --back-top-radius: 14px;
        --back-top-right: max(16px, env(safe-area-inset-right));
        --back-top-bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top,
    #back-to-top,
    #backToTop,
    #scroll-to-top-btn,
    #air-global-back-to-top,
    .back-to-top i,
    #back-to-top i,
    #backToTop i,
    #scroll-to-top-btn i,
    #air-global-back-to-top i,
    .back-to-top svg,
    #back-to-top svg,
    #backToTop svg,
    #scroll-to-top-btn svg,
    #air-global-back-to-top svg {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .back-to-top,
    #back-to-top,
    #backToTop,
    #scroll-to-top-btn,
    #air-global-back-to-top {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #fff !important;
    }

    html[data-blog-theme="dark"] .back-to-top,
    html[data-blog-theme="dark"] #back-to-top,
    html[data-blog-theme="dark"] #backToTop,
    html[data-blog-theme="dark"] #scroll-to-top-btn,
    html[data-blog-theme="dark"] #air-global-back-to-top {
        background: #364354 !important;
    }
}