.eu-comments { min-width: 0; padding-top: 1rem; scroll-margin-top: calc(var(--eu-header-h) + 1rem); }
.eu-comments__title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .35rem; font-size: 1.75rem; }
.eu-comments__count {
	display: inline-grid;
	place-items: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	background: var(--eu-red);
	color: #fff;
	font: 700 .95rem/1 var(--wp--preset--font-family--inter);
}
.eu-comments__intro { margin: 0 0 1.25rem; color: var(--eu-grey); }

/*
 * Mastodon posts in the site's own look, always light like the rest of the
 * site. The comments list the replies; the block "Mastodon-Post" (its own
 * style.css) puts a single post in a card.
 */
.eu-toots {
	--md-fg: var(--eu-black);
	--md-fg-2: var(--eu-grey);
	--md-accent: var(--eu-red-text);
	--md-line: var(--eu-line);
	min-width: 0;
	color: var(--md-fg);
	font-size: 1rem;
	line-height: 1.6;
	text-align: start;
}
.eu-toots a { color: inherit; text-decoration: none; }
.eu-toots a:focus-visible, .eu-toots :is(input, button):focus-visible { outline: 2px solid var(--eu-red); outline-offset: 2px; }
.eu-toots svg { flex: none; width: 1.15rem; height: 1.15rem; }

.eu-toots__bar { display: flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--md-line); font-weight: 700; }
.eu-toots__bar > svg { color: var(--eu-red); }
.eu-toots__open { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; color: var(--md-fg-2) !important; font-size: .875rem; font-weight: 400; }
.eu-toots__open svg { width: 1rem; height: 1rem; }

.eu-toot { position: relative; padding: 1.25rem 0; border-bottom: 1px solid var(--md-line); }
.eu-toot__head { display: flex; align-items: center; gap: .75rem; min-width: 0; line-height: 1.35; }
.eu-toot__avatar { flex: none; width: 46px; height: 46px; overflow: hidden; background: var(--md-line); }
.eu-toot__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eu-toot__author { display: flex; flex-direction: column; min-width: 0; color: var(--md-fg-2) !important; font-size: .875rem; }
.eu-toot__name, .eu-toot__acct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-toot__name { color: var(--md-fg); font-size: 1rem; font-weight: 700; }
a.eu-toot__author:hover .eu-toot__name { color: var(--md-accent); }
.eu-toot__time { align-self: flex-start; margin-left: auto; color: var(--md-fg-2) !important; font-size: .875rem; white-space: nowrap; }
.eu-toot__time:hover { text-decoration: underline !important; }

.eu-toot__content { overflow-wrap: anywhere; }
.eu-toot__content p { margin: 0 0 1em; }
.eu-toot__content p:last-child { margin-bottom: 0; }
.eu-toot__content a { text-decoration: underline !important; text-decoration-color: var(--eu-red) !important; text-decoration-thickness: 2px !important; text-underline-offset: .15em; }
.eu-toot__content a:hover { color: var(--md-accent) !important; }
.eu-toot__content a:is(.mention, .hashtag) { color: var(--md-accent) !important; font-weight: 600; text-decoration: none !important; }
.eu-toot__content .invisible { display: none; }
.eu-toot__content .ellipsis::after { content: "…"; }
.eu-toot__cw summary { margin-bottom: .6rem; cursor: pointer; font-weight: 700; }

.eu-toot__actions { display: flex; justify-content: space-between; align-items: center; gap: 1.1rem; max-width: 24rem; margin-top: .75rem; }
.eu-toot__action { display: inline-flex; align-items: center; gap: .3rem; min-width: 2rem; min-height: 2rem; margin: -.375rem; padding: .375rem; color: var(--md-fg-2) !important; font-size: .875rem; font-weight: 600; }
.eu-toot__action:hover { background: var(--eu-light); color: var(--md-accent) !important; }

/* A single post in a card (block "Mastodon-Post"): larger text, full date and counts. */
.eu-toot--detailed .eu-toot__content { margin-top: 1rem; font-size: 1.125rem; line-height: 1.55; }
.eu-toot__card { display: flex; flex-direction: column; margin-top: 1rem; overflow: hidden; border: 1px solid var(--md-line); }
.eu-toot__card img { display: block; width: 100%; aspect-ratio: 1.91; object-fit: cover; border-bottom: 1px solid var(--md-line); }
.eu-toot__card-text { display: grid; gap: 2px; padding: .9rem 1rem; font-size: .875rem; line-height: 1.4; color: var(--md-fg-2); }
.eu-toot__card-text strong { color: var(--md-fg); font-size: 1rem; }
.eu-toot__card-description { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.eu-toot__meta { margin-top: 1.25rem; color: var(--md-fg-2); font-size: .875rem; line-height: 1.3; }
.eu-toot__meta p { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: .5rem 0; border-bottom: 1px solid var(--md-line); }
.eu-toot__meta p:first-child { padding-top: 0; }
.eu-toot__meta p:last-child { padding-bottom: 0; border-bottom: 0; }
.eu-toot__meta strong { color: var(--md-fg); font-weight: 700; }

.eu-toots__reply { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--md-line); }
.eu-toots .eu-toots__reply-button { color: #fff; font-size: 1rem; }
.eu-toots__reply-button svg { width: 1.2rem; height: 1.2rem; }
.eu-comments__remote { display: none; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; }
.js .eu-comments__remote { display: flex; }
.eu-comments__remote label { color: var(--md-fg-2); }
.eu-comments__remote input { width: 11rem; padding: .55rem .75rem; border: 1px solid #cfcfd6; border-radius: 0; background: #fff; color: var(--md-fg); font: inherit; }
.eu-comments__remote input::placeholder { color: #8a8a93; }
.eu-comments__remote input:focus { border-color: var(--eu-black); outline: none; }
.eu-comments__remote button { padding: .55rem .85rem; border: 1px solid #cfcfd6; border-radius: 0; background: #fff; color: var(--md-fg); font: inherit; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.eu-comments__remote button:hover { border-color: var(--eu-black); background: var(--eu-black); color: #fff; }

.eu-toots__list { margin: 0; padding: 0; list-style: none; }
.eu-toots__list > .eu-toot:last-child { border-bottom: 0; }
/* Replies sit beside the avatar so thread lines can join them. */
.eu-toots__list .eu-toot__body { margin-left: calc(46px + .75rem); padding-top: .15rem; }
.eu-toot.has-reply { border-bottom-color: transparent; }
.eu-toot.has-reply::after,
.eu-toot.is-continued::before {
	content: "";
	position: absolute;
	left: 22px;
	width: 2px;
	background: var(--md-line);
}
.eu-toot.has-reply::after { top: calc(1.25rem + 46px + 4px); bottom: 0; }
.eu-toot.is-continued::before { top: 0; height: calc(1.25rem - 4px); }
.eu-emoji { display: inline; width: 1.2em; height: 1.2em; vertical-align: -.25em; }
.eu-toots__empty { margin: 0; padding: 1.5rem 0; color: var(--md-fg-2); }

/* Likes, shares and comments of the article, above the author box (eu_reactions_markup()). */
.eu-reactions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.eu-reactions__item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .85rem;
	border: 1px solid #cfcfd6;
	background: #fff;
	color: var(--eu-black);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s, background .2s, color .2s;
}
.eu-reactions__item strong { font-weight: 800; }
.eu-reactions__item .eu-icon { width: 1.05rem; height: 1.05rem; color: var(--eu-red); transition: color .2s; }
.eu-reactions__item:hover { border-color: var(--eu-black); background: var(--eu-black); color: #fff; }
.eu-reactions__item:hover .eu-icon { color: #fff; }