/* =====================================================================
 * Comments — articles, courses and workshops (K2, docs/plans/2026-09-30-comments.md).
 *
 * Loaded for `is_singular( array( 'post', 'courses' ) )` (functions.php), after kit.css, article.css /
 * learning.css and chrome.css, so the site's rules win by order and never by `!important`. The markup
 * is template-parts/comments/*; assets/js/comments.js lists the class names and data hooks both sides
 * keep. Borrowed by class, not copied: `.iz-field` / `.iz-input` / `.iz-textarea` for the fields,
 * `.iz-btn` for the buttons, `.iz-status` for the badges, `.iz-count` for the count, and the shape of
 * the lesson page's conversation (avatar column, hairline-indented replies, one text button per action —
 * lesson.css, decisions.md 2026-09-28).
 *
 * The owner's direction: small headings, grey (not tint) for inner boxes, colour only on full-width
 * bands, less on every page. So the comments are not a band and not a card — a grey composer box, then
 * plain rows on the host's white box, separated by a hairline.
 *
 * Logical properties throughout — RTL only. Spacing and type are the tokens; sizes that are a
 * control's or an avatar's own (40, 36, 32px) are exempt by rule 5 of the spacing standard.
 * ===================================================================== */

/* A container, so the composer's two-up name/email row follows the room it has — a reply form sits
 * indented inside a thread and is narrower than the composer at the same viewport width. */
.comments { display: grid; gap: var(--space-block); min-width: 0; container: comments / inline-size; scroll-margin-block-start: var(--space-8); }
/* On the article page the section follows «درباره نویسنده» and the share row, which each open with a hairline. */
.article-main > .comments { padding-top: var(--space-4); border-top: 1px solid var(--iz-line-soft); }

.comments__top { display: grid; gap: var(--space-head); min-width: 0; }
.comments__head { display: grid; gap: var(--gap-title); }
.comments__title { display: flex; align-items: center; gap: var(--gap-inline); margin: 0; color: var(--iz-ink); font: var(--text-h4); }
/* On a course or workshop the neighbouring sections take the kit's section title (leaf and all). */
.comments__title.iz-h2 { margin: 0; font: var(--text-h2); }
.comments__count { flex: none; }
.comments__invite, .comments__note { margin: 0; color: var(--iz-text); font: var(--text-body-s); }
.comments__closed { margin: 0; color: var(--iz-ink-soft); font: var(--text-caption); }

/* ------------------------------------------------------------- the composer */
.comment-form { position: relative; display: grid; gap: var(--gap-form); padding: var(--pad-card); border-radius: var(--iz-r); background: var(--iz-sunk); }
.comment-form--reply { gap: var(--space-3); margin-top: var(--space-stack); padding: var(--pad-row); }
.comment-form__as { margin: 0; color: var(--iz-text); font: var(--text-body-s); }
.comment-form__as strong { color: var(--iz-ink); font-weight: 600; }
.comment-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--gap-form) var(--gap-grid); }
.comment-form .iz-field > label { overflow-wrap: anywhere; } /* «پاسخ به <name>» on a reply form */
.comment-form .iz-textarea { min-height: 96px; }
.comment-form--reply .iz-textarea { min-height: 72px; }
.comment-form .iz-field__help { flex: 1; min-width: 0; }
.comment-form .iz-field__row { align-items: flex-start; }
.comment-form .iz-field__count { flex: none; }
.comment-form .iz-field__count.is-near { color: var(--accent-700); }

/* The honeypot: clipped, not `display: none` (a bot that skips hidden fields would skip it too), and
 * out of the accessibility tree and the tab order in the markup. */
.comment-form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* The checkbox, the two lines of small print and the send button read as one group under the fields. */
.comment-form__end { display: grid; gap: var(--space-stack); }
.comment-form__check { display: inline-flex; align-items: center; justify-self: start; gap: var(--gap-inline); min-height: 44px; color: var(--iz-ink); font: var(--text-body-s); cursor: pointer; }
.comment-form__check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--secondary-500); }
.comment-form__check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); border-radius: 4px; }

.comment-form__notes { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.comment-form__note { margin: 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.comment-form__note a { border-radius: 4px; color: var(--primary-700); font-weight: 600; text-decoration: none; }
.comment-form__note a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .comment-form__note a:hover { text-decoration: underline; } }

.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline) var(--space-2); }
.comment-form__status { flex: 1 1 200px; min-width: 0; margin: 0; color: var(--iz-text); font: var(--text-caption); }
.comment-form__status:empty { flex-basis: 0; }
.comment-form__status.is-error { color: var(--accent-700); font-weight: 600; }
/* The inert look of a busy or rate-limited send button: `aria-disabled`, so it keeps focus (comments.js). */
.comments [data-comment-submit][aria-disabled="true"] { border-color: var(--color-border); background: var(--color-bg); color: var(--iz-ink-soft); cursor: not-allowed; pointer-events: none; }

@container comments (max-width: 520px) {
	.comment-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- the list */
.comments__list { display: grid; margin: 0; padding: 0; list-style: none; }
.comments__list > .comment { padding-block: var(--space-4); border-top: 1px solid var(--iz-line-soft); }
.comments__list > .comment:first-child { padding-top: 0; border-top: 0; }
.comments__list > .comment:last-child { padding-bottom: 0; }

.comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-2); scroll-margin-block-start: var(--space-8); }
.comment--reply { grid-template-columns: 32px minmax(0, 1fr); }
/* Focus lands on a comment when it is posted or linked to; the ring shows for the keyboard only. */
.comment:focus { outline: none; }
.comment:focus-visible { border-radius: var(--iz-r-sm); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.comment__body { min-width: 0; }

.comment__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--iz-leaf); background: var(--secondary-50); color: var(--secondary-700); font: 700 var(--text-caption-size)/1 var(--font-body); }
.comment__avatar i { font-size: var(--text-h3-size); }
.comment__avatar--coach { background: var(--primary-50); color: var(--primary-700); }
.comment--reply .comment__avatar { width: 32px; height: 32px; }
.comment--reply .comment__avatar i { font-size: var(--text-h4-size); }

.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--gap-inline); }
/* A name is someone's typing, up to 60 unbroken characters: it may shrink and it may break anywhere
 * (a flex item's default `min-width: auto` made a 60-character name 792px wide at 375). */
.comment__name { min-width: 0; max-width: 100%; color: var(--iz-ink); font: var(--text-body-s); font-weight: 600; overflow-wrap: anywhere; }
/* `.iz-status` is `nowrap`; a long coach name in the badge wraps rather than push the line out. */
.comment__badge { max-width: 100%; font-size: var(--text-micro-size); white-space: normal; }
.comment__date { padding-block: 2px; border-radius: 4px; color: var(--iz-ink-soft); font: var(--text-caption); text-decoration: none; }
.comment__date:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) { .comment__date:hover { color: var(--iz-ink); text-decoration: underline; text-underline-offset: 3px; } }
.comment__edited { color: var(--iz-ink-soft); font: var(--text-caption); }
.comment__edited::before { content: "·"; margin-inline-end: var(--gap-inline); }

.comment__text { margin: var(--gap-title) 0 0; color: var(--iz-text); font: var(--text-body-s); overflow-wrap: anywhere; }
.comment__text p { margin: 0; }
.comment__text p + p { margin-top: var(--space-stack); }
.comment__text a { border-radius: 3px; color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; }
.comment__text a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.comment__text--deleted { color: var(--iz-ink-soft); font: var(--text-caption); }

/* One text button per action, the lesson page's shape. The negative margin lines the first label up
 * with the text above; the pseudo-element lifts the 36px control to a 44px hit area. */
.comment__actions { display: flex; flex-wrap: wrap; gap: 0 var(--gap-inline); margin-top: var(--space-0); margin-inline-start: calc(-1 * var(--space-1)); }
.comment__action { position: relative; display: inline-flex; align-items: center; gap: var(--space-0); min-height: 36px; padding: 0 var(--space-1); border: 0; border-radius: 8px; background: none; color: var(--primary-700); font: var(--text-button-s); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.comment__action::after { content: ""; position: absolute; inset: -4px 0; }
.comment__action i { font-size: var(--icon-xs); }
.comment__action--quiet { color: var(--iz-ink-soft); }
.comment__action:active { transform: scale(var(--iz-press)); }
.comment__action:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.comment__action[aria-expanded="true"] { background: var(--iz-sunk); }
@media (hover: hover) and (pointer: fine) { .comment__action:hover { background: var(--iz-sunk); } }

/* Delete confirm and report: a small grey box under the actions. */
.comment__panel { display: grid; gap: var(--space-stack); margin-top: var(--space-1); padding: var(--pad-row); border-radius: var(--iz-r-sm); background: var(--iz-sunk); }
.comment__panel:focus { outline: none; }
.comment__panel:focus-visible { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.comment__panel p { margin: 0; color: var(--iz-ink); font: var(--text-body-s); }
.comment__panel-actions { display: flex; flex-wrap: wrap; gap: var(--gap-inline); }
.comment__danger { background: var(--accent-600); color: #fff; }
.comment__danger:active { background: var(--accent-800); }
@media (hover: hover) and (pointer: fine) { .comment__danger:hover { background: var(--accent-700); } }

.comment-edit { display: grid; gap: var(--space-stack); margin-top: var(--gap-title); }
.comment-edit .iz-textarea { min-height: 96px; }

/* The replies: the lesson page's hairline down the inline start, one level only. */
.comment__replies { display: grid; gap: var(--space-3); margin: var(--space-stack) 0 0; padding: 0; padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--iz-line-soft); list-style: none; }

/* The deep-link highlight: a quiet wash that fades. With reduced motion it appears and goes, no fade. */
.comment.is-flash { border-radius: var(--iz-r-sm); background: var(--primary-50); box-shadow: 0 0 0 var(--space-1) var(--primary-50); }
@media (prefers-reduced-motion: no-preference) {
	.comment { transition: background-color .9s var(--iz-ease), box-shadow .9s var(--iz-ease); }
}

.comments__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1) var(--space-2); }
.comments__more [data-comments-more-button][aria-disabled="true"] { border-color: var(--color-border); background: var(--color-bg); color: var(--iz-ink-soft); cursor: not-allowed; pointer-events: none; }
.comments__more-error { flex-basis: 100%; margin: 0; color: var(--accent-700); font: var(--text-caption); font-weight: 600; text-align: center; }

@container comments (max-width: 460px) {
	.comment { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-1); }
	.comment__avatar { width: 32px; height: 32px; }
	.comment__avatar i { font-size: var(--text-h4-size); }
	.comment--reply { grid-template-columns: 28px minmax(0, 1fr); }
	.comment--reply .comment__avatar { width: 28px; height: 28px; }
	.comment__replies { padding-inline-start: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
	.comment, .comment__action { transition: none; }
}

/* An empty email field (LTR for the address) shows its Persian placeholder from the right, like every
   other field; once the visitor types, the address is LTR again. */
.comments .iz-input.iz-ltr:placeholder-shown { direction: rtl; text-align: right; }
.comment-form .iz-field__count { margin-inline-start: auto; }