/*
 * CILI: the comment block of an artwork's page (ADR-0047 D10; templates/single/single.php, cili/utillz/comments.php,
 * assets/js/comments.js; WEB-245 to WEB-257).
 *
 * After layout-artwork.css. Grayscale tokens only (colour comes from the artworks and the avatars), `html body` first so a
 * tie with a vendor rule ends here, the keyboard ring is the frame's, targets 44 pixels (24 at least, WCAG 2.5.8), phone
 * first with no horizontal scroll at 320 pixels. Every colour is a token that ADR-0045 redefines for the dark mode, so the
 * block follows the member's mode (and the system's) with no rule of its own for it.
 *
 * The block: a title ("N comments"), the composer, a line for the status, the list (a comment, then its replies indented
 * once: two levels, as Facebook and TikTok show them), "Load more". A comment is a round avatar and a column: the name, how
 * long ago, "Edited"; the text as typed (line breaks and spaces kept); the actions row (Reply, the clap, the total beside it, the
 * "..." menu). The clap is the artwork's control (layout-applause.css) at a compact size (WEB-768 to WEB-770). The menu is a small panel under its button; the confirmation and the report are native dialogs.
 */

/* ------------------------------------------------------------------------------------------------------- the block */

html body .lcr-comments {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-16);
	box-sizing: border-box;
	width: 100%;
	margin: var(--lcr-space-32) 0 0;
	padding: var(--lcr-space-24) 0 0;
	border-top: var(--lcr-size-hairline) solid var(--lcr-color-divider);
	color: var(--lcr-color-body);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-body-font-size);
	line-height: var(--lcr-type-body-line-height);
}

html body .lcr-comments :is([hidden], .lcr-comment-edited[hidden]) {
	display: none !important; /* the rules below set a display, which the attribute alone would not beat */
}

html body .lcr-comments-title {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-8);
	margin: 0;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-title-font-size);
	font-weight: var(--lcr-type-title-font-weight);
	line-height: var(--lcr-type-title-line-height);
}

html body .lcr-comments-title .lcr-icon {
	flex: none;
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
}

html body .lcr-comments p {
	margin: 0;
}

html body .lcr-comments-guest .lcr-comments-signin,
html body .lcr-comments-more-signin .lcr-comments-signin,
html body .lcr-comments-more,
html body .lcr-comments-retry,
html body .lcr-comments-reload {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--lcr-size-icon-button);
	padding: 0 var(--lcr-space-20);
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	box-shadow: none;
	color: var(--lcr-color-ink);
	cursor: pointer;
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-label-line-height);
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

html body .lcr-comments-guest .lcr-comments-signin {
	align-self: flex-start;
	border-color: transparent;
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .lcr-comments-more,
html body .lcr-comments-more-signin {
	align-self: center;
}

html body .lcr-comments-more:disabled,
html body .lcr-comments-retry:disabled {
	cursor: default;
	opacity: 0.6;
}

html body .lcr-comments-closed,
html body .lcr-comments-empty,
html body .lcr-comments-failed p {
	color: var(--lcr-color-muted);
}

html body .lcr-comments-failed {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lcr-space-12);
}

html body .lcr-comments-status {
	color: var(--lcr-color-body);
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
}

html body .lcr-comments-status:empty {
	display: none;
}

html body .lcr-comments-status--error {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

html body .lcr-comments-reload {
	min-height: var(--lcr-size-control-small);
	margin-left: var(--lcr-space-8);
}

/* ------------------------------------------------------------------------------------------------------ the composer */

html body .lcr-composer {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-8);
	margin: 0;
}

html body .lcr-composer-context {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lcr-space-8);
	padding: var(--lcr-space-4) var(--lcr-space-4) var(--lcr-space-4) var(--lcr-space-16);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-body);
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
}

html body .lcr-composer-context-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

html body .lcr-composer-row {
	display: flex;
	align-items: flex-end;
	gap: var(--lcr-space-8);
}

html body .lcr-composer-text {
	flex: 1 1 auto;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--lcr-size-icon-button);
	margin: 0;
	padding: var(--lcr-space-12) var(--lcr-space-16);
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-field);
	background-color: var(--lcr-color-background);
	box-shadow: none;
	color: var(--lcr-color-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-body-font-size);
	line-height: var(--lcr-type-body-line-height);
	resize: none;
}

html body .lcr-composer-text::placeholder {
	color: var(--lcr-color-muted);
	opacity: 1;
}

html body .lcr-composer-text[aria-invalid="true"] {
	border-color: var(--lcr-color-ink);
}

html body .lcr-composer-send,
html body .lcr-composer-cancel,
html body .lcr-comment-menu-button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	box-shadow: none;
	color: var(--lcr-color-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

html body .lcr-composer-send {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .lcr-composer-send:disabled {
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-muted);
	cursor: default;
}

html body .lcr-composer-cancel {
	width: var(--lcr-size-control-small);
	height: var(--lcr-size-control-small);
}

html body .lcr-comments .lcr-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

html body .lcr-comments .lcr-comments-title .lcr-icon {
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
}

html body .lcr-composer-limit {
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-meta-font-size);
	line-height: var(--lcr-type-meta-line-height);
	text-align: right;
}

html body .lcr-composer-limit--over {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

/* Comments that are closed (or not known): no reply, and the composer stays away (the script keeps it hidden). */
html body .lcr-comments:not([data-accepts="1"]) .lcr-comment-reply {
	display: none;
}

/* ------------------------------------------------------------------------------------------------------- the list */

html body .lcr-comment-list,
html body .lcr-comment-replies {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .lcr-comment {
	display: flex;
	align-items: flex-start;
	gap: var(--lcr-space-12);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .lcr-comment-avatar {
	display: block;
	flex: none;
	width: var(--lcr-size-avatar-row);
	height: var(--lcr-size-avatar-row);
	overflow: hidden;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
}

html body .lcr-comment--reply .lcr-comment-avatar {
	width: var(--lcr-size-avatar-card);
	height: var(--lcr-size-avatar-card);
}

html body .lcr-comment-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html body .lcr-comment-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--lcr-space-4);
	min-width: 0;
}

html body .lcr-comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lcr-space-4) var(--lcr-space-8);
}

html body .lcr-comment-name {
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-label-line-height);
	overflow-wrap: anywhere;
	text-decoration: none;
}

html body a.lcr-comment-name:hover {
	text-decoration: underline;
}

html body .lcr-comment-time,
html body .lcr-comment-edited {
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-meta-font-size);
	line-height: var(--lcr-type-meta-line-height);
}

/* The text as typed (ADR-0027): its line breaks and spaces are kept, a long word breaks rather than overflow. */
html body .lcr-comment-text {
	color: var(--lcr-color-body);
	font-size: var(--lcr-type-body-font-size);
	line-height: var(--lcr-type-body-line-height);
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

html body .lcr-comment-pending {
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	font-style: italic;
	line-height: var(--lcr-type-small-line-height);
}

html body .lcr-comment-actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lcr-space-4) var(--lcr-space-8);
	margin-top: calc(-1 * var(--lcr-space-4));
}

html body .lcr-comment-reply,
html body .lcr-comment-claps {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-6);
	box-sizing: border-box;
	min-width: var(--lcr-size-control-small);
	min-height: var(--lcr-size-control-small);
	margin: 0;
	padding: 0 var(--lcr-space-8);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	box-shadow: none;
	color: var(--lcr-color-muted);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-small-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-small-line-height);
	-webkit-appearance: none;
	appearance: none;
}

html body .lcr-comment-reply {
	cursor: pointer;
}

html body .lcr-comment-reply:hover {
	color: var(--lcr-color-ink);
	background-color: var(--lcr-color-fill);
}

/* Another member's comment: the artwork's clap control (layout-applause.css gives it the hands, the applauded look, the word on a
   hover and the three-beat clap) at the comment's compact size, 34 pixels, with the total beside it, outside the button. */
html body .lcr-comment-clap-group {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-4);
}

html body .lcr-comment-actions .lcr-clap--comment {
	flex: none;
	min-width: var(--lcr-size-control-small);
	height: var(--lcr-size-control-small);
	padding: 0 calc((var(--lcr-size-control-small) - var(--lcr-space-20)) / 2);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
}

html body .lcr-comment-actions .lcr-clap--comment.lcr-clap--on,
html body .lcr-comment-actions .lcr-clap--comment.lcr-clap--on:hover {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .lcr-comment-actions .lcr-clap--comment .lcr-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

@media (hover: hover) and (pointer: fine) {

	html body .lcr-comment-actions .lcr-clap--comment:not(.lcr-clap--on):hover {
		background-color: var(--lcr-color-outline);
	}
}

html body .lcr-comment-clap-total {
	display: inline-flex;
	align-items: center;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-small-line-height);
}

/* One's own comment: the plain hands and the total. */
html body .lcr-comment-clap-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

html body .lcr-comment-clap-count {
	font-variant-numeric: tabular-nums;
}

html body .lcr-comment-clap-count[hidden],
html body .lcr-comment-clap-total[hidden] {
	display: none;
}

html body .lcr-comment-menu-button {
	width: var(--lcr-size-control-small);
	height: var(--lcr-size-control-small);
	color: var(--lcr-color-muted);
}

html body .lcr-comment-menu-button:hover,
html body .lcr-comment-menu-button[aria-expanded="true"] {
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
}

/* Replies: one indent, no more (two levels). */
html body .lcr-comment-replies {
	gap: var(--lcr-space-12);
	margin-top: var(--lcr-space-8);
}

html body .lcr-comment-replies:empty {
	display: none;
}

html body .lcr-comment-more-replies {
	align-self: flex-start;
	min-height: var(--lcr-size-control-small);
	margin: 0;
	padding: 0 var(--lcr-space-8);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	box-shadow: none;
	color: var(--lcr-color-muted);
	cursor: pointer;
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-small-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	-webkit-appearance: none;
	appearance: none;
}

html body a.lcr-comment-more-replies--signin {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

html body .lcr-comment-more-replies:hover {
	color: var(--lcr-color-ink);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------------------------------------- the menu */

html body .lcr-comment-menu {
	position: absolute;
	z-index: 2;
	top: 100%;
	right: 0;
	display: flex;
	flex-direction: column;
	width: max-content;
	max-width: 100%;
	padding: var(--lcr-space-4);
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-field);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
}

html body .lcr-comment-menu-item {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-12);
	box-sizing: border-box;
	white-space: nowrap;
	min-height: var(--lcr-size-icon-button);
	margin: 0;
	padding: 0 var(--lcr-space-16);
	border: 0;
	border-radius: var(--lcr-radius-thumb);
	background-color: transparent;
	box-shadow: none;
	color: var(--lcr-color-ink);
	cursor: pointer;
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-body-font-size);
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}

html body .lcr-comment-menu-item:is(:hover, :focus-visible) {
	background-color: var(--lcr-color-fill);
}

html body .lcr-comment-menu-icon {
	display: inline-flex;
	flex: none;
}

/* ------------------------------------------------------------------------------------- the confirmation and the report */

html body dialog.lcr-comments-dialog {
	box-sizing: border-box;
	width: var(--lcr-web-container-auth);
	max-width: calc(100% - 2 * var(--lcr-web-gutter-phone));
	max-height: calc(100% - 2 * var(--lcr-web-gutter-phone));
	padding: var(--lcr-space-24);
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-panel);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-body);
	font-family: var(--lcr-font-family-sans);
}

html body dialog.lcr-comments-dialog::backdrop {
	background-color: var(--lcr-color-scrim);
}

html body dialog.lcr-comments-dialog .lcr-comments-dialog-title {
	margin: 0 0 var(--lcr-space-12);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-section-font-size);
	font-weight: var(--lcr-type-section-font-weight);
	line-height: var(--lcr-type-section-line-height);
}

html body dialog.lcr-comments-dialog .lcr-comments-dialog-text {
	margin: 0 0 var(--lcr-space-16);
}

html body dialog.lcr-comments-dialog .lcr-comments-dialog-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--lcr-space-8);
	margin-top: var(--lcr-space-16);
}

html body dialog.lcr-comments-dialog :is(.lcr-comments-dialog-cancel, .lcr-comments-dialog-confirm) {
	min-width: var(--lcr-size-icon-button);
	min-height: var(--lcr-size-icon-button);
	padding: 0 var(--lcr-space-20);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	box-shadow: none;
	color: var(--lcr-color-ink);
	cursor: pointer;
	font-family: var(--lcr-font-family-sans);
	font-weight: var(--lcr-font-weight-semibold);
}

html body dialog.lcr-comments-dialog .lcr-comments-dialog-confirm {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body dialog.lcr-comments-dialog .lcr-comments-dialog-confirm:disabled {
	cursor: default;
	opacity: 0.6;
}

html body dialog.lcr-comments-dialog .lcr-comments-report {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-12);
	margin: 0;
}

html body dialog.lcr-comments-dialog .lcr-comments-report-reasons {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-4);
	margin: 0;
	padding: 0;
	border: 0;
}

html body dialog.lcr-comments-dialog .lcr-comments-report-reasons legend {
	padding: 0;
	margin-bottom: var(--lcr-space-8);
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

html body dialog.lcr-comments-dialog .lcr-comments-report-reason {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-12);
	min-height: var(--lcr-size-icon-button);
	cursor: pointer;
}

html body dialog.lcr-comments-dialog .lcr-comments-report-reason input {
	flex: none;
	margin: 0;
	accent-color: var(--lcr-color-ink);
}

html body dialog.lcr-comments-dialog .lcr-comments-report-note-label {
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-small-font-size);
	font-weight: var(--lcr-font-weight-semibold);
}

html body dialog.lcr-comments-dialog .lcr-comments-report-note {
	box-sizing: border-box;
	width: 100%;
	padding: var(--lcr-space-12) var(--lcr-space-16);
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-field);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-body-font-size);
	resize: vertical;
}

html body dialog.lcr-comments-dialog .lcr-comments-report-problem {
	margin: 0;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-small-font-size);
	font-weight: var(--lcr-font-weight-semibold);
}

html body dialog.lcr-comments-dialog .lcr-comments-report-problem:empty {
	display: none;
}

/* ---------------------------------------------------------------------------------------------------------- wider */

@media (min-width: 768px) {

	html body .lcr-comments {
		margin-top: var(--lcr-space-48);
		padding-top: var(--lcr-space-32);
	}
}