/* The share bar and the quote bar (modules/site/views/share.php,
   public/site/share.js). The articles and the articles of the codes load it. */

.site-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.site .site-share-label { font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.site .site-share-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.site-share-list li:has(> [hidden]) { display: none; }
.site .site-share-icon {
	display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
	border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-2);
	cursor: pointer; transition: color .15s, border-color .15s, background-color .15s;
}
.site .site-share-icon svg { width: 17px; height: 17px; fill: currentColor; }
.site .site-share-icon:hover { color: var(--brand, var(--ink)); border-color: var(--brand, var(--ink-3)); background: color-mix(in srgb, var(--brand, var(--ink)) 8%, transparent); }
.site .site-share-copy {
	display: inline-flex; align-items: center; gap: var(--s2); height: 38px; margin-left: auto; padding: 0 var(--s4);
	border: 1px solid var(--line); border-radius: 999px; background: transparent;
	font: 500 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: color .15s, border-color .15s;
}
.site .site-share-copy:hover { color: var(--ink); border-color: var(--ink-3); }
.site .site-share-icon:focus-visible, .site .site-share-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-share svg.site-share-line { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Close under the text: less than the gap of the column around it. */
.lx-share { margin-top: calc(var(--s2) * -1); }
.ar-share { margin-top: var(--s5); }
/* At the end of the article: closer than the gap of the body. */
.ar-share-end { margin-top: calc(var(--s5) * -1); }
/* In the hero the copy button follows the icons: the row is wider than the text. */
.site .ar-share .site-share-copy { margin-left: 0; }

@media (max-width: 560px) {
	.site .site-share-copy { margin-left: 0; }
}

/* The name of a network over its icon. A touch screen has no hover, so it shows none. */
@media (hover: hover) {
	.site-share-icon { position: relative; }
	.site-share-icon[data-tip]::after {
		content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5;
		padding: 6px 9px; border-radius: 6px; background: var(--ink); color: var(--bg);
		font: 500 12px/1 var(--sans); white-space: nowrap; pointer-events: none;
		opacity: 0; transform: translate(-50%, 4px); transition: opacity .12s, transform .12s;
	}
	.site-share-icon[data-tip]:hover::after, .site-share-icon[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}

/* The bar over a selected quote. */
.site-quote-bar {
	position: absolute; z-index: 50; display: flex; gap: 2px; padding: 4px;
	border-radius: 10px; background: var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}
.site-quote-bar[hidden] { display: none; }
/* A bar on the screen slides to its new place. A bar that just shows stands
   there at once (share.js sets .site-quote-fresh for one frame). */
.site-quote-bar { transition: top .2s ease-out, left .2s ease-out; }
.site-quote-bar.site-quote-fresh { transition: none; }
@media (prefers-reduced-motion: reduce) {
	.site-quote-bar { transition: none; }
}
/* share.js sets max-width to the screen: the buttons then wrap, never overflow. */
.site-quote-bar { flex-wrap: wrap; box-sizing: border-box; }
.site-quote-bar button {
	padding: 8px 12px; border: 0; border-radius: 7px; background: transparent;
	font: 500 13px/1 var(--sans); color: var(--bg); cursor: pointer; white-space: nowrap;
}
@media (pointer: coarse) {
	.site-quote-bar button { padding: 12px 14px; font-size: 14px; }
}
.site-quote-bar button:hover, .site-quote-bar button:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }

/* The quote that a text fragment link points to. */
::target-text { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; }