/* 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;
	}

	/* a custom emoji (CustomEmojis): the height of the text it sits in */
	.custom-emoji {
		display: inline;
		height: 1.3em;
		width: auto;
		max-width: 3em;
		vertical-align: -0.25em;
		object-fit: contain;
	}

	.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. Hidden, it takes no room (daisyUI
	   only makes it transparent, and one past a card's edge made a phone's feed scroll sideways), and on a touch screen
	   it never shows: a tap opens the rows in a sheet instead (NerdTip). */
	.tooltip-content:has(> .nerd-stats) {
		border-radius: var(--radius-box);
		padding: 0.5rem 0.65rem;
		max-width: min(22rem, 90vw);
	}

	.tooltip:not(:hover, :focus-within, .tooltip-open) > .tooltip-content:has(> .nerd-stats) {
		display: none;
	}

	@media (hover: none) {
		.tooltip-content:has(> .nerd-stats) {
			display: none;
		}
	}

	.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;
	}
}