/* Back to Top -- opt-in component (extras/s3_back-to-top.php) */
@property --s3-btt-progress { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

button.s3-back-to-top { --btt-size: 3rem; --btt-offset: var(--s-md); position: fixed; z-index: 9990; inset-inline-end: max(var(--btt-offset), env(safe-area-inset-right)); inset-block-end: max(var(--btt-offset), env(safe-area-inset-bottom)); display: grid; place-items: center; inline-size: var(--btt-size); block-size: var(--btt-size); margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--c-lightest); color: var(--c-blue-600); box-shadow: var(--shdw-md); cursor: pointer; opacity: 0; visibility: hidden; translate: 0 0.75rem; transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0.25s, color 0.2s ease, background-color 0.2s ease; }
/* Salient forces rounded radii on buttons with !important -- mirror the existing override pattern */
body[data-button-style^="rounded"] button.s3-back-to-top { border-radius: 50% !important; }

button.s3-back-to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; box-shadow: var(--shdw-xs); }
button.s3-back-to-top:hover { background: var(--c-blue-600); color: var(--c-lightest); }
button.s3-back-to-top:focus-visible { outline: 2px solid var(--c-blue-400); outline-offset: 3px; }

.s3-back-to-top__icon { position: relative; z-index: 1; }
.s3-back-to-top__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Visibility sentinel (created by JS): one viewport tall at the top of the document */
.s3-back-to-top-sentinel { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 100vh; pointer-events: none; visibility: hidden; }

/* Progressive enhancement: scroll-progress ring, no JS */
@supports (animation-timeline: scroll()) {
	button.s3-back-to-top::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(var(--c-blue-400) var(--s3-btt-progress), var(--c-gray-50) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: s3-btt-progress linear both; animation-timeline: scroll(root block); }
	button.s3-back-to-top:hover::before { background: conic-gradient(var(--c-blue-200) var(--s3-btt-progress), var(--c-blue-500) 0); }
}
@keyframes s3-btt-progress { to { --s3-btt-progress: 100%; } }

@media (width <= 768px) {
	button.s3-back-to-top { --btt-size: 2.75rem; --btt-offset: var(--s-sm); } /* stays >= 44px target */
}
@media (prefers-reduced-motion: reduce) {
	button.s3-back-to-top, button.s3-back-to-top.is-visible { translate: none; transition-duration: 0.01ms; }
}
@media print {
	button.s3-back-to-top { display: none; }
}