/* Floating Social Rail — front end */
.fsr {
	--fsr-size: 44px;
	--fsr-bg: #fff;
	--fsr-fg: #1d1d1f;
	--fsr-accent: #0a66c2;
	--fsr-x: 24px;
	--fsr-y: 50%;
	--fsr-shift: translateY(-50%);
	--fsr-hide: translateX(calc(-100% - var(--fsr-x) - 8px));
	--fsr-glide: 0px;
	position: fixed;
	top: var(--fsr-y);
	left: var(--fsr-x);
	z-index: 9990;
	transform: var(--fsr-shift) var(--fsr-hide) translateY(var(--fsr-glide));
	opacity: 0;
	visibility: hidden;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility 0s linear .35s;
	pointer-events: none;
}
.fsr--right {
	left: auto;
	right: var(--fsr-x);
	--fsr-hide: translateX(calc(100% + var(--fsr-x) + 8px));
}
.fsr.is-visible {
	--fsr-hide: translateX(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility 0s;
}
/* While gliding, the JS updates --fsr-glide every frame; keep that part un-transitioned. */
.fsr.is-gliding { transition: opacity .25s ease, visibility 0s; }

.fsr__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--fsr-bg);
	border-radius: calc(var(--fsr-size) / 2 + 6px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .10);
}
.fsr__list li { margin: 0; padding: 0; list-style: none; }
.fsr__list li::before { content: none; }

.fsr__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fsr-size);
	height: var(--fsr-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--fsr-fg);
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.fsr__btn:hover,
.fsr__btn:focus-visible {
	color: var(--fsr-bg);
	background: var(--fsr-accent);
	text-decoration: none;
}.fsr__btn:focus-visible { outline: 2px solid var(--fsr-accent); outline-offset: 2px; }

.fsr__btn svg {
	width: 46%;
	height: 46%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fsr__btn img { width: 46%; height: 46%; object-fit: contain; }

.fsr__sep { height: 1px; margin: 2px 8px !important; background: color-mix(in srgb, var(--fsr-fg) 15%, transparent); }

/* Tooltip label — also the link's accessible name. */
.fsr__tip {
	position: absolute;
	top: 50%;
	left: calc(100% + 12px);
	transform: translate(-4px, -50%);
	padding: 4px 9px;
	border-radius: 6px;
	background: #1d1d1f;
	color: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
	font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.fsr--right .fsr__tip { left: auto; right: calc(100% + 12px); transform: translate(4px, -50%); }
.fsr__btn:hover .fsr__tip,
.fsr__btn:focus-visible .fsr__tip { opacity: 1; transform: translate(0, -50%); }

@media (prefers-reduced-motion: reduce) {
	.fsr, .fsr.is-visible, .fsr__tip { transition: opacity .2s ease, visibility 0s; }
}
@media print { .fsr { display: none !important; } }