/* Reader comments -- JatimSatu ID, STEP 12D.

   Its own file rather than an addition to main.css: LiteSpeed strips
   ?ver= on this site, so an edit to an already-cached stylesheet stays
   invisible to returning browsers. A NEW filename is the only reliable
   cache-bust here (the same reasoning documented for jsn-nav and
   jsn-gam-article).

   Namespaced .jsn-cmt-* throughout, so nothing here can reach the share
   bar (.jsn-share), the engagement bar (.jsn-gart), the profile panel
   (.jsn-gpro-*) or Phase 2 (.jsn-gam-*).

   Every var() carries a fallback -- the section must stay readable even
   if it somehow renders before main.css.
*/

.jsn-cmt{
	margin: 40px auto 8px;
	padding-top: 28px;
	border-top: 3px solid var(--color-ink, #14161C);
}

.jsn-cmt-title{
	font-family: var(--font-headline, Georgia, serif);
	font-size: 24px;
	line-height: 1.2;
	color: var(--color-ink, #14161C);
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.jsn-cmt-count{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--color-red, #C8102E);
	border-radius: 99px;
	padding: 5px 10px;
	font-variant-numeric: tabular-nums;
}

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

.jsn-cmt-list,
.jsn-cmt-list .children{
	list-style: none;
	margin: 0;
	padding: 0;
}

.jsn-cmt-item{
	margin: 0 0 18px;
}

/* Depth is capped at 3 by thread_comments_depth; the indent stays small
   so the third level still has a usable measure on a 360px screen. */
.jsn-cmt-list .children{
	margin-top: 18px;
	padding-left: 22px;
	border-left: 2px solid var(--color-rule, #E4E2DC);
}

/* ---- card: horizontal on desktop ---- */

.jsn-cmt-card{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--color-paper, #fff);
	border: 1px solid var(--color-rule, #E4E2DC);
	border-radius: var(--radius-sm, 6px);
	padding: 16px 18px;
}

.jsn-cmt-avatar{
	flex: 0 0 auto;
	line-height: 0;
}

.jsn-cmt-avatar .jsn-cmt-img,
.jsn-cmt-avatar img{
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--color-canvas, #FAFAF8);
}

.jsn-cmt-body{
	flex: 1 1 auto;
	min-width: 0;
}

.jsn-cmt-head{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.jsn-cmt-author{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--color-ink, #14161C);
	line-height: 1.2;
}

.jsn-cmt-date{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 12.5px;
	color: var(--color-muted, #6B6F76);
	margin-left: auto;
	white-space: nowrap;
}

.jsn-cmt-text{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--color-ink-soft, #2B2E35);
	overflow-wrap: anywhere;
}

.jsn-cmt-text p{ margin: 0 0 10px; }
.jsn-cmt-text p:last-child{ margin-bottom: 0; }

.jsn-cmt-text a{
	color: var(--color-red, #C8102E);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.jsn-cmt-pending{
	margin: 10px 0 0;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-red-deep, #A50D25);
	background: var(--color-red-wash, rgba(200,16,46,.05));
	border-radius: var(--radius-sm, 6px);
	padding: 7px 10px;
}

.jsn-cmt-actions{
	margin-top: 10px;
}

.jsn-cmt-reply a{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-ink, #14161C);
	text-decoration: none;
	border: 1px solid var(--color-rule, #E4E2DC);
	border-radius: 99px;
	padding: 5px 13px;
	display: inline-block;
	transition: border-color var(--transition-fast, 180ms ease),
	            background var(--transition-fast, 180ms ease);
}

.jsn-cmt-reply a:hover{
	border-color: var(--color-ink, #14161C);
	background: var(--color-canvas, #FAFAF8);
}

/* ---- empty / closed ---- */

.jsn-cmt-empty,
.jsn-cmt-closed{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 15px;
	color: var(--color-muted, #6B6F76);
	background: var(--color-canvas, #FAFAF8);
	border-radius: var(--radius-sm, 6px);
	padding: 16px 18px;
	margin: 0 0 24px;
}

/* ---- pagination ---- */

.jsn-cmt-pagination{
	margin: 8px 0 24px;
}

.jsn-cmt-pagination .page-numbers{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-ink, #14161C);
	text-decoration: none;
	border: 1px solid var(--color-rule, #E4E2DC);
	border-radius: var(--radius-sm, 6px);
	padding: 6px 12px;
	display: inline-block;
	margin-right: 6px;
}

.jsn-cmt-pagination .page-numbers.current{
	background: var(--color-ink, #14161C);
	border-color: var(--color-ink, #14161C);
	color: #fff;
}

/* ---- form ---- */

.jsn-cmt-form,
.comment-respond{
	margin-top: 8px;
}

.comment-reply-title{
	font-family: var(--font-headline, Georgia, serif);
	font-size: 19px;
	color: var(--color-ink, #14161C);
	margin: 0 0 14px;
}

.comment-reply-title small{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	margin-left: 8px;
}

.comment-reply-title small a{
	color: var(--color-red, #C8102E);
	text-decoration: none;
}

.jsn-cmt-field{
	margin: 0 0 12px;
	position: relative;
}

.jsn-cmt-textarea{
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--color-ink, #14161C);
	background: var(--color-paper, #fff);
	border: 1px solid var(--color-rule-strong, #D3D0C8);
	border-radius: var(--radius-sm, 6px);
	padding: 12px 14px;
	resize: vertical;
	min-height: 110px;
}

.jsn-cmt-textarea:focus{
	outline: 2px solid var(--color-red, #C8102E);
	outline-offset: 1px;
	border-color: var(--color-red, #C8102E);
}

.jsn-cmt-counter{
	display: block;
	text-align: right;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 12px;
	color: var(--color-muted, #6B6F76);
	margin-top: 5px;
	font-variant-numeric: tabular-nums;
	min-height: 15px;
}

.jsn-cmt-counter.is-short{ color: var(--color-muted, #6B6F76); }
.jsn-cmt-counter.is-near{  color: var(--color-red-deep, #A50D25); font-weight: 600; }

.jsn-cmt-submit,
.jsn-cmt-form input[type="submit"],
.comment-respond input[type="submit"]{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	background: var(--color-ink, #14161C);
	border: 1px solid var(--color-ink, #14161C);
	border-radius: 99px;
	padding: 11px 26px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--transition-fast, 180ms ease);
}

.jsn-cmt-submit:hover,
.comment-respond input[type="submit"]:hover{
	background: var(--color-red, #C8102E);
	border-color: var(--color-red, #C8102E);
}

.jsn-cmt-submit[disabled]{
	opacity: .5;
	cursor: not-allowed;
}

.jsn-cmt-rules,
.jsn-cmt-login{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-muted, #6B6F76);
	margin: 12px 0 0;
}

.jsn-cmt-login{
	background: var(--color-canvas, #FAFAF8);
	border-radius: var(--radius-sm, 6px);
	padding: 16px 18px;
	font-size: 14.5px;
	margin: 0;
}

.jsn-cmt-login a{
	color: var(--color-red, #C8102E);
	font-weight: 700;
	text-decoration: none;
}

/* ---- gamification badges (rendered by the plugin, styled here so the
       theme keeps ownership of presentation) ---- */

.jsn-cmt-badge{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	border-radius: 99px;
	padding: 4px 8px;
	white-space: nowrap;
}

.jsn-cmt-badge--verified{
	color: #0B6B3A;
	background: rgba(11,107,58,.09);
}

.jsn-cmt-badge--tier{
	color: var(--color-ink, #14161C);
	background: var(--color-canvas, #FAFAF8);
	border: 1px solid var(--color-rule, #E4E2DC);
}

.jsn-cmt-badge--level{
	color: #fff;
	background: var(--color-charcoal, #3A3D45);
	font-variant-numeric: tabular-nums;
}

/* ---- mobile: stack vertical ---- */

@media (max-width: 600px){
	.jsn-cmt{
		margin-top: 32px;
		padding-top: 22px;
	}

	.jsn-cmt-title{ font-size: 20px; }

	/* The card becomes a vertical stack: avatar and name on one row,
	   then the text at full width instead of a narrow column beside a
	   48px image. */
	.jsn-cmt-card{
		flex-direction: column;
		gap: 10px;
		padding: 14px;
	}

	.jsn-cmt-avatar{
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.jsn-cmt-avatar .jsn-cmt-img,
	.jsn-cmt-avatar img{
		width: 40px;
		height: 40px;
	}

	.jsn-cmt-date{
		margin-left: 0;
		width: 100%;
	}

	.jsn-cmt-text{ font-size: 15px; }

	.jsn-cmt-list .children{
		padding-left: 12px;
		margin-top: 14px;
	}
}

@media (max-width: 380px){
	.jsn-cmt-card{ padding: 12px; }
	.jsn-cmt-list .children{ padding-left: 9px; }
	.jsn-cmt-badge{ font-size: 10.5px; padding: 3px 7px; }
	.jsn-cmt-submit{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
	.jsn-cmt-reply a,
	.jsn-cmt-submit{ transition: none; }
}