/* Shared floating control; independent of the page's card and button styles. */
.back-to-top {
    --top-background: #143f32;
    --top-foreground: #fff;
    --top-border: #d5b369;
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 80;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--top-border);
    border-radius: 50%;
    background: var(--top-background);
    color: var(--top-foreground);
    box-shadow: 0 5px 18px rgb(20 30 40 / 20%);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.back-to-top[hidden] { display: none; }
.back-to-top svg { display: block; width: 24px; height: 24px; margin: 0; pointer-events: none; }
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgb(20 30 40 / 26%); }
.back-to-top:focus-visible { outline: 3px solid var(--top-background); outline-offset: 4px; }
:root[data-design="civic"] .back-to-top { --top-background: #203f91; --top-border: #f1ce40; }
:root[data-design="crimson"] .back-to-top { --top-background: #861c30; --top-border: #dbb76b; }
:root[data-design="blush"] .back-to-top { --top-background: #ffe4e8; --top-foreground: #a51f45; --top-border: #a51f45; }
:root[data-design="blush"] .back-to-top:focus-visible { outline-color: #a51f45; }
@media (max-width: 620px) {
    .back-to-top { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: none; }
    .back-to-top:hover { transform: none; }
}
@media print { .back-to-top { display: none; } }