/* ===== Share buttons (2026-10-17) – html/layouts/pixel/share.php, js/share.js ===== */
.px-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.px-share__btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 40px; height: 40px; margin: 0; padding: 0;
	border: 1.5px solid var(--ds-line-strong, #d9dee5); border-radius: var(--ds-r-pill, 999px); background: #fff;
	color: var(--ds-navy, #050038); font: inherit; line-height: 1; text-decoration: none; cursor: pointer;
	transition: border-color .2s, color .2s, background-color .2s;
}
.px-share__btn svg { display: block; width: 17px; height: 17px; }
.px-share__btn:hover, .px-share__btn:focus-visible { border-color: var(--ds-green, #34c759); color: var(--ds-green-ink, #15803d); text-decoration: none; }
.px-share__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ds-green-soft, rgba(52,199,89,.14)); }
.px-share__btn.is-copied { border-color: var(--ds-green, #34c759); background: var(--ds-green, #34c759); color: #fff; }
.px-share__tip {
	position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2;
	padding: 4px 10px; border-radius: 8px; background: var(--ds-navy, #050038); color: #fff;
	font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.px-share__tip:empty { display: none; }
.px-share__btn.is-copied .px-share__tip { opacity: 1; }
/* phone share sheet: navy pill with text, only where navigator.share exists (share.js removes [hidden]) */
.px-share__native { width: auto; gap: 8px; padding: 0 18px; border-color: var(--ds-navy, #050038); background: var(--ds-navy, #050038); color: #fff; font-size: .9rem; font-weight: 600; }
.px-share__native[hidden] { display: none; }
.px-share__native:hover, .px-share__native:focus-visible { border-color: #1a1550; background: #1a1550; color: #fff; }

/* end-of-article bar */
.px-share-end {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	margin: 40px 0 0; padding: 20px 24px; border: 1px solid var(--ds-line, #e7ebf0); border-radius: var(--ds-r-md, 16px); background: #fff;
}
.px-share-end__txt strong { display: block; color: var(--ds-navy, #050038); font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.px-share-end__txt span { display: block; margin-top: 2px; color: var(--ds-muted, #5b6474); font-size: .9rem; line-height: 1.5; }
@media (max-width: 575.98px) {
	.px-share-end { padding: 16px; }
	.px-share-end__txt { flex: 1 1 100%; }
}

/* blog sidebar: footer of the TOC card (blog-toc.css), smaller buttons; on one-column layouts the bar at the end is enough */
.item-blog .sidebar .px-share { justify-content: flex-end; gap: 6px; }
.item-blog .sidebar .px-share__btn { width: 34px; height: 34px; }
.item-blog .sidebar .px-share__btn svg { width: 15px; height: 15px; }
.item-blog .sidebar .px-share__native { display: none; }
@media (max-width: 991.98px) {
	.item-blog .sidebar > .item.px-share-side { display: none; }
}

/* case study: inside the story column */
.pf-story-body > .px-share-end { margin-top: 48px; }