/* Comments Mic: restrained labels and engagement controls that inherit the theme. */
:root {
	--comments-mic-accent: currentColor;
	--comments-mic-target: max(44px, 2.75rem);
	--comments-mic-border: color-mix(in srgb, currentColor 30%, transparent);
	--comments-mic-pressed-bg: color-mix(in srgb, currentColor 12%, transparent);
	--comments-mic-radius: 999px;
}

.comments-mic-attributed {
	border-inline-start: 3px solid var(--comments-mic-accent);
	padding-inline-start: 0.75rem;
}

.comments-mic-badge {
	display: inline-block;
	margin-inline-start: 0.4em;
	padding: 0.05em 0.6em;
	border: 1px solid var(--comments-mic-badge-border, var(--comments-mic-accent));
	border-radius: var(--comments-mic-radius);
	background: var(--comments-mic-badge-bg, transparent);
	color: var(--comments-mic-badge-text, inherit);
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.6;
	vertical-align: middle;
	box-sizing: border-box;
	max-width: 100%;
	/* A long label wraps inside its pill instead of overflowing a narrow comment. */
	overflow-wrap: anywhere;
	hyphens: manual;
}

.comments-mic-engagement {
	margin-block-start: 0.5rem;
}

.comments-mic-engagement__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
}

.comments-mic-engagement__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.comments-mic-engagement__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	box-sizing: border-box;
	min-width: var(--comments-mic-target);
	min-height: var(--comments-mic-target);
	padding: 0.2rem 0.75rem;
	border: 1px solid var(--comments-mic-border);
	border-radius: var(--comments-mic-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	cursor: pointer;
}

/*
 * Themes often style every button (Twenty Twenty-One uses
 * button:not(:hover):not(:active):not(.has-background), specificity 0,3,1). These
 * controls inherit the theme's text color and font instead; the repeated class keeps
 * that independent of the theme's selector.
 */
.comments-mic-engagement .comments-mic-engagement__group .comments-mic-engagement__button.comments-mic-engagement__button {
	box-sizing: border-box;
	min-width: var(--comments-mic-target);
	min-height: var(--comments-mic-target);
	margin: 0;
	padding: 0.2rem 0.75rem;
	border: 1px solid var(--comments-mic-border);
	border-radius: var(--comments-mic-radius);
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 0.875em;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.comments-mic-engagement .comments-mic-engagement__group .comments-mic-engagement__button.comments-mic-engagement__button:hover {
	border-color: var(--comments-mic-accent);
}

.comments-mic-engagement .comments-mic-engagement__group .comments-mic-engagement__button.comments-mic-engagement__button:focus-visible {
	outline: 2px solid var(--comments-mic-accent);
	outline-offset: 2px;
}

.comments-mic-engagement .comments-mic-engagement__group .comments-mic-engagement__button.comments-mic-engagement__button[aria-pressed="true"] {
	border-color: var(--comments-mic-accent);
	background: var(--comments-mic-pressed-bg);
	font-weight: 600;
}

.comments-mic-engagement .comments-mic-engagement__group .comments-mic-engagement__button.comments-mic-engagement__button[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.comments-mic-engagement__emoji {
	font-size: 1.15em;
	line-height: 1;
}

.comments-mic-engagement__legacy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	box-sizing: border-box;
	min-width: var(--comments-mic-target);
	min-height: var(--comments-mic-target);
	padding: 0.2rem 0.75rem;
	border: 1px dashed var(--comments-mic-border);
	border-radius: var(--comments-mic-radius);
	font-size: 0.875em;
	line-height: 1.4;
	opacity: 0.8;
}

.comments-mic-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.comments-mic-engagement__count {
	font-variant-numeric: tabular-nums;
}

.comments-mic-engagement__status {
	margin: 0.25rem 0 0;
	font-size: 0.8125em;
}

.comments-mic-engagement__status:empty {
	display: none;
}

.comments-mic-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin-block: 0.75rem 1rem;
	font-size: 0.875em;
}

.comments-mic-sort__label {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.comments-mic-sort__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.comments-mic-sort__list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--comments-mic-target);
	min-height: var(--comments-mic-target);
	padding: 0 0.75rem;
	border: 1px solid transparent;
	border-radius: var(--comments-mic-radius);
	color: inherit;
}

.comments-mic-sort__list a[aria-current="true"] {
	border-color: var(--comments-mic-border);
	font-weight: 600;
	text-decoration: none;
}

.comments-mic-sort__list a:focus-visible {
	outline: 2px solid var(--comments-mic-accent);
	outline-offset: 2px;
}

.comments-mic-burst {
	position: fixed;
	inset: 0;
	z-index: 99999;
	overflow: hidden;
	pointer-events: none;
}

.comments-mic-burst span {
	position: absolute;
	width: 8px;
	height: 12px;
	border-radius: 2px;
}

/*
 * Avatar ring for labelled comments: a shadow outside the image, so its size, shape and
 * the layout around it never change. Colors come from the inline label styles.
 */
.comments-mic-ring {
	box-shadow: 0 0 0 3px var(--comments-mic-ring, currentColor);
}

/*
 * Block themes (Twenty Twenty-Five) print core's avatar block in a no-wrap flex row beside the
 * comment body. There the engagement controls, badges, handles and a labelled comment's accent
 * left the avatar to give way, and a site rule that fixes the image's width and height (with
 * max-width: 100%) turned it oval. This stylesheet loads only on enhanced posts (instant posting
 * on or off). Inside core's comment template:
 * - the avatar keeps its own size and stays square (cropped, never stretched);
 * - the comment body takes the rest of the row, and moves below the avatar when its narrowest
 *   form (the 44 px controls) does not fit beside it;
 * - on small screens a reply list (the list core prints directly inside a comment, never a list
 *   in the comment's text) indents by 0.75rem, so a reply at the deepest level still has the
 *   width of its own controls. Nesting, accents and every control stay as they are.
 */
.wp-block-comment-template .wp-block-avatar {
	flex-shrink: 0;
}

.wp-block-comment-template .wp-block-avatar img {
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.wp-block-comment-template .is-nowrap:has(> .wp-block-avatar) {
	flex-wrap: wrap;
}

.wp-block-comment-template .is-nowrap > .wp-block-avatar + .wp-block-group {
	flex: 1 1 0%;
	max-width: 100%;
}

@media (max-width: 600px) {
	.wp-block-comment-template li[id^="comment-"] > ol {
		margin-inline-start: 0;
		padding-inline-start: 0.75rem;
	}
}

/* Instagram link beside the commenter's name: a 44px target without changing the line. */
.comments-mic-instagram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	/* A handle may break anywhere but never gains hyphens it does not have. */
	overflow-wrap: anywhere;
	hyphens: manual;
	min-width: var(--comments-mic-target);
	min-height: var(--comments-mic-target);
	margin-block: calc((1.5em - var(--comments-mic-target)) / 2);
	margin-inline-start: 0.4em;
	padding-inline: 0.25em;
	font-size: 0.875em;
	letter-spacing: 0.01em;
	vertical-align: middle;
}

.comments-mic-profile-link,
.comments-mic-instant-status {
	margin-block: 0.5rem;
	font-size: 0.875em;
}

/* The theme's own reply links on a configured post (this stylesheet is enqueued on
   configured discussion content only): the signed-in Reply link and the signed-out
   "Log in to Reply" link become a 44px target. The theme's type, colors, border, radius
   and the link's destination stay as they are; nothing is added in markup. */
[id^="comment-"] .comment-reply-link,
[id^="comment-"] .comment-reply-login {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--comments-mic-target);
	min-height: var(--comments-mic-target);
}

/* A comment opened by its #comment-ID link, or focused after an instant post, scrolls
   clear of a sticky site header: the default clears a responsive header up to 112px (a
   pixel floor, so a small root font size cannot shrink it below the header; 7rem above
   that). The admin bar is WordPress's own scroll-padding on html, which adds to this; a
   theme with a taller sticky header sets the custom property. */
[id^="comment-"] {
	scroll-margin-block-start: var(--comments-mic-anchor-offset, max(112px, 7rem));
}

/* 44px targets that do not grow the line they sit in. */
.comments-mic-profile-link a,
.comments-mic-instant-status a {
	display: inline-flex;
	align-items: center;
	min-height: var(--comments-mic-target);
	margin-block: calc((1.5em - var(--comments-mic-target)) / 2);
	vertical-align: middle;
}

.comments-mic-instant-status:empty,
.comments-mic-instant-status[hidden] {
	display: none;
}

form[aria-busy="true"] [type="submit"] {
	opacity: 0.6;
	cursor: progress;
}

/* The author's own pending comment, visible only in their browser. */
.comments-mic-pending {
	margin-block: 1rem;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--comments-mic-border);
	border-radius: 8px;
}

.comments-mic-pending p {
	margin-block: 0 0.5rem;
}

.comments-mic-pending__text {
	margin: 0;
	padding-inline-start: 0.75rem;
	border-inline-start: 3px solid var(--comments-mic-border);
}

.comments-mic-pending__text p:last-child {
	margin-block-end: 0;
}

/* Settings > Discussion: the scope fieldsets stay inside narrow admin viewports. */
.comments-mic-scope .regular-text {
	max-width: 100%;
}

.comments-mic-pilot-list {
	margin: 4px 0 0 1em;
	list-style: disc;
	overflow-wrap: anywhere;
}

/* Settings > Discussion label preview. */
.comments-mic-badge-settings__group {
	margin: 0 0 12px;
	padding: 8px 12px 4px;
	border: 1px solid #dcdcde;
}

.comments-mic-badge-settings__group legend {
	padding: 0 4px;
	font-weight: 600;
}

.comments-mic-badge-settings__group input[aria-invalid="true"] {
	border-color: #d63638;
}

.comments-mic-badge-preview__avatar {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #c3c4c7;
	vertical-align: middle;
}

.comments-mic-badge-preview__name {
	margin-inline-start: 8px;
	font-weight: 600;
	vertical-align: middle;
}