/* The feed: post HTML as PrivaPub's Mastodon API sends it (already sanitized; Mastodon's link markup hides the
   scheme in .invisible and shortens long links with .ellipsis), the globe's point labels, which replace the look of
   globe.gl's own tooltip box, its CDN groups and country names, and the card it is pinned to. */
@layer components {
	.post-content p {
		margin-block: 0 0.5em;
	}

	.post-content p:last-child {
		margin-bottom: 0;
	}

	.post-content a {
		color: var(--color-primary);
		overflow-wrap: anywhere;
	}

	.post-content a.mention,
	.post-content a.hashtag {
		text-decoration-line: none;
		font-weight: 600;
	}

	.post-content .invisible {
		display: none;
	}

	.post-content .ellipsis::after {
		content: "…";
	}

	.post-content blockquote {
		border-inline-start: 3px solid var(--neo-strong);
		padding-inline-start: 0.75rem;
		opacity: 0.85;
	}

	.post-content pre,
	.post-content code {
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size: 0.85em;
		white-space: pre-wrap;
	}

	.post-content ul {
		list-style: disc;
		padding-inline-start: 1.25rem;
	}

	.post-content ol {
		list-style: decimal;
		padding-inline-start: 1.25rem;
	}

	/* daisyUI's tooltip is a pill; a block of nerd stats needs the corners of a box. */
	.tooltip-content:has(> .nerd-stats) {
		border-radius: var(--radius-box);
		padding: 0.5rem 0.65rem;
		max-width: min(22rem, 90vw);
	}

	.float-tooltip-kap {
		padding: 0 !important;
		background: transparent !important;
	}

	.globe-label {
		font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
		padding: 0.4rem 0.55rem;
		border-radius: 0.5rem;
		color: var(--color-base-content);
		background: var(--color-base-100);
		box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
	}

	.globe-label span {
		opacity: 0.65;
	}

	/* A CDN's group on the globe: a label in orbit, not a place. */
	.globe-cdn {
		font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
		white-space: nowrap;
		padding: 0.15rem 0.45rem;
		border-radius: 999px;
		color: var(--color-base-content);
		background: color-mix(in oklab, var(--color-base-100) 80%, transparent);
		box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
		pointer-events: none;
	}

	/* A country's name on the globe, on the land by day and by night alike: light text in a dark halo. The globe sets
	   its size and opacity by zoom, and hides it through visibility (the label renderer owns display). */
	.globe-country {
		font-family: ui-sans-serif, system-ui, sans-serif;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.03em;
		white-space: nowrap;
		color: rgb(255 255 255 / 0.9);
		text-shadow: 0 0 2px rgb(0 0 0 / 0.95), 0 0 6px rgb(0 0 0 / 0.6);
		pointer-events: none;
		user-select: none;
	}

	/* The card the globe is pinned to (a click on it): its moment and place stay on the globe. */
	[data-globe-pinned] {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}
}