/* BLOOM - the line that says the comments below are examples.

   The conversation itself is drawn by bloom-recipes.css and is not touched
   here. This is one line, above the block, and nothing else: the comments
   themselves carry no badge and no mark, so the design reads exactly as it
   will read when real readers have written.

   Removing this file removes the line's styling; the sentence itself is
   printed by bloom-comments.php and would still be there, unstyled. */

.br-talk-demo {
	display: flex;
	align-items: baseline;
	gap: 9px;
	max-width: 760px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--line, rgba(196, 168, 130, .5));
	border-radius: 10px;
	background: var(--sand, #F7EFE7);
	font-family: var(--serif);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--quiet, #63584F);
}

/* A small dot rather than an icon, so it reads as a note and not as a warning. */
.br-talk-demo::before {
	content: "";
	flex: none;
	align-self: center;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold, #C4A882);
}

.br-talk-demo strong {
	font-weight: 400;
	color: var(--ink, #211913);
}

@media (max-width: 640px) {
	.br-talk-demo {
		margin-bottom: 16px;
		padding: 11px 14px;
		font-size: 13.5px;
		line-height: 1.6;
	}
}

/* ---------------------------------------------------------------------------
   The names, without the circle.

   The conversation was drawn with a round avatar beside every comment. On this
   site those come from Gravatar, which has no picture for any of these people,
   so every one of them was the same grey placeholder - and the circle sat over
   the name and hid it.

   The circle is removed and the name takes its place. Nothing else about the
   row changes: the date, the text, the reply and the helpful button all stay
   exactly where they were.
   --------------------------------------------------------------------------- */

.br-cm .br-cm-face { display: none; }

/* Without the avatar the row no longer needs the 52px gutter beside it. */
.br-cm .br-cm-in { gap: 0; }

.br-cm .br-cm-name {
	font-size: 16.5px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: .01em;
}

/* BLOOM's own replies read as hers rather than as another reader's. */
.br-cm .br-cm-name:not(:empty) { display: inline-block; }

.br-cm .children { padding-inline-end: 28px; }

@media (max-width: 640px) {
	.br-cm .children { padding-inline-end: 16px; }
	.br-cm .br-cm-name { font-size: 15.5px; }
}