/**
 * Premium comment area — five styles on one shared skeleton.
 *
 * Loaded only on singular pages with comments (comments.php). Every selector
 * is prefixed with the body class `.sa-cm` so it out-specifies the base
 * theme's comment rules (single.css) regardless of source order — LiteSpeed's
 * CSS combine means order can never be relied on (see bridge.css for the
 * precedent). The active style adds `.sa-cm--a` … `.sa-cm--e`.
 *
 * a — Glow Thread : cards + gradient-ring avatars + a thread rail.  (default)
 * b — Soft Minimal: flat editorial rows, hairline separators, underline form.
 * c — Fan Chat    : chat bubbles + a composer-style form.
 * d — Holo Panel  : one enclosing panel with the holo sweep on top.
 * e — Spotlight   : the most-replied comment framed as "Top Comment".
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Base — shared by every style.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm .comments-area {
	font-family: var(--sa-font-body);
}

/* ── Headings: neutralise Jannah's block-head decoration, restyle fresh ─── */
.sa-cm .comments-area .block-head,
.sa-cm #add-comment-block .block-head {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 18px;
}
.sa-cm #comments-title,
.sa-cm #reply-title {
	font-family: var(--sa-font-display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sa-text);
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.sa-cm #comments-title::before,
.sa-cm #comments-title::after,
.sa-cm #reply-title::before,
.sa-cm #reply-title::after {
	content: none;
	display: none;
}
.sa-cm #comments-title span,
.sa-cm #reply-title span {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}
.sa-cm .sa-cmt-count {
	font-family: var(--sa-font-body);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	padding: 5px 11px;
	border-radius: var(--sa-radius-pill);
	background: var(--sa-surface-2);
	border: 1px solid var(--sa-border);
	color: var(--sa-text-muted);
}

/* ── List resets (undo single.css's light-era look) ─────────────────────── */
.sa-cm .comment-list,
.sa-cm .comment-list ol.children {
	list-style: none;
	padding: 0;
}
.sa-cm .comment-list .comment {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	overflow: visible;
}
.sa-cm .comment-list .comment #respond {
	margin-left: 0;
	margin-top: 14px;
}
.sa-cm .comment-list ol.children {
	margin-top: 14px;
	margin-left: 21px;
	padding-left: 22px;
}
@media (max-width: 670px) {
	.sa-cm .comment-list ol.children {
		margin-left: 8px;
		padding-left: 12px;
	}
}
.sa-cm .comment-list ol.children li {
	padding-bottom: 0;
	margin-bottom: 12px;
}
.sa-cm .comment-list ol.children li:last-child {
	margin-bottom: 0;
}
.sa-cm .comment-list ol.children .reply,
.sa-cm .comment-list ol.children #respond {
	margin-left: 0;
}

/* ── One comment ────────────────────────────────────────────────────────── */
.sa-cm .sa-cmt-row {
	display: flex;
	gap: 12px;
	min-width: 0;
}
.sa-cm .sa-cmt-main {
	min-width: 0;
	flex: 1;
}
.sa-cm .sa-cmt-who {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}
.sa-cm .sa-cmt-name {
	font-weight: 800;
	font-size: 14.5px;
	color: var(--sa-text);
	overflow-wrap: anywhere;
}
.sa-cm .sa-cmt-time {
	font-size: 12px;
	color: var(--sa-text-dim);
}
.sa-cm .sa-cmt-badge {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 4px 8px;
	border-radius: var(--sa-radius-pill);
	background: var(--sa-gradient);
	color: var(--sa-on-accent);
}
.sa-cm .sa-cmt-fandom {
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1;
	padding: 4px 9px;
	border-radius: var(--sa-radius-pill);
	border: 1px solid var(--sa-border-strong);
	color: var(--sa-violet-light);
	background: color-mix(in srgb, var(--sa-violet) 10%, transparent);
	white-space: nowrap;
}
.sa-cm .sa-cmt-text {
	margin-top: 6px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sa-text);
	overflow-wrap: anywhere;
}
.sa-cm .sa-cmt-text p {
	margin: 0 0 8px;
}
.sa-cm .sa-cmt-text p:last-child {
	margin-bottom: 0;
}
.sa-cm .sa-cmt-text a {
	color: var(--sa-violet-light);
}
.sa-cm .sa-cmt-text a:hover {
	color: var(--sa-pink);
}
.sa-cm .sa-cmt-moderation {
	margin: 8px 0 0;
	font-size: 12.5px;
	font-style: italic;
	color: var(--sa-gold);
}

/* Actions: the reply pill (our markup has no .reply wrapper — the link is
   styled directly, so single.css's dark-grey block button never applies). */
.sa-cm .sa-cmt-acts {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
}
.sa-cm .sa-cmt-acts .comment-reply-link {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-pill);
	color: var(--sa-text-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 14px;
	transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.sa-cm .sa-cmt-acts .comment-reply-link:hover {
	color: var(--sa-text);
	border-color: var(--sa-violet);
	box-shadow: 0 0 14px color-mix(in srgb, var(--sa-violet) 25%, transparent);
}
.sa-cm .sa-cmt-edit a {
	font-size: 12px;
	font-weight: 700;
	color: var(--sa-text-dim);
	padding-left: 0;
}
.sa-cm .sa-cmt-edit a:hover {
	color: var(--sa-text);
}

/* ── Avatars ────────────────────────────────────────────────────────────── */
.sa-cm .sa-cmt-ava {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
}
.sa-cm .sa-cmt-ava img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: none;
	border: 0;
	margin: 0;
	float: none;
	display: block;
	object-fit: cover;
}
.sa-cm .sa-cmt-ava--i {
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: #fff;
	user-select: none;
}
/* Fixed identity gradients — deliberately NOT palette-driven, so a commenter
   keeps the same colour across style presets (like the vertical accents). */
.sa-cm .sa-cmt-hue-0 { background: linear-gradient(135deg, #A93BFF, #FF3DAE); }
.sa-cm .sa-cmt-hue-1 { background: linear-gradient(135deg, #0EA5E9, #22D3EE); }
.sa-cm .sa-cmt-hue-2 { background: linear-gradient(135deg, #F43F5E, #FB923C); }
.sa-cm .sa-cmt-hue-3 { background: linear-gradient(135deg, #10B981, #34D399); }
.sa-cm .sa-cmt-hue-4 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
.sa-cm .sa-cmt-hue-5 { background: linear-gradient(135deg, #F59E0B, #FCD34D); }

/* ── Pings ──────────────────────────────────────────────────────────────── */
.sa-cm .sa-cmt--ping {
	font-size: 13px;
	color: var(--sa-text-muted);
	padding: 10px 0;
}
.sa-cm .sa-cmt-pinglabel {
	font-weight: 800;
	color: var(--sa-text-dim);
}

/* ── Comments navigation (paginated threads) ────────────────────────────── */
.sa-cm .comment-navigation {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 14px 0;
}
.sa-cm .comment-navigation a {
	font-size: 13px;
	font-weight: 700;
	color: var(--sa-text-muted);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-pill);
	padding: 7px 16px;
}
.sa-cm .comment-navigation a:hover {
	color: var(--sa-text);
	border-color: var(--sa-border-strong);
}

/* ── Compact-comments button (Jannah option, restyled) ──────────────────── */
.sa-cm #show-comments-section {
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border-strong);
	border-radius: var(--sa-radius);
	color: var(--sa-text);
	font-size: 15px;
	font-weight: 800;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sa-cm #show-comments-section:hover {
	border-color: var(--sa-violet);
	box-shadow: var(--sa-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   The form — shared chassis (styles b + c reshape it below).
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm #respond {
	margin-top: 6px;
}
.sa-cm #respond .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.sa-cm #respond .comment-form > p {
	margin: 0;
}
.sa-cm #respond .comment-notes,
.sa-cm #respond .logged-in-as,
.sa-cm #respond .comment-form-comment,
.sa-cm #respond .comment-form-cookies-consent,
.sa-cm #respond .form-submit {
	grid-column: 1 / -1;
}
.sa-cm #respond .comment-form-author,
.sa-cm #respond .comment-form-email,
.sa-cm #respond .comment-form-url,
.sa-cm #respond .comment-form-fandom {
	width: auto;
	float: none;
	margin-right: 0;
}
@media (max-width: 560px) {
	.sa-cm #respond .comment-form {
		grid-template-columns: 1fr;
	}
}
.sa-cm #respond .comment-notes,
.sa-cm #respond .logged-in-as {
	font-size: 12.5px;
	color: var(--sa-text-dim);
	margin-bottom: 2px;
}
.sa-cm #respond .logged-in-as a {
	color: var(--sa-text-muted);
}

/* Visually-hidden labels — placeholders carry the visible cue. */
.sa-cm .sa-cf-srlabel {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sa-cm #respond .sa-cf-in {
	width: 100%;
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-sm);
	color: var(--sa-text);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 1.5;
	padding: 11px 14px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sa-cm #respond .sa-cf-in::placeholder {
	color: var(--sa-text-dim);
	opacity: 1;
}
.sa-cm #respond .sa-cf-in:focus {
	outline: none;
	border-color: var(--sa-violet);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-violet) 22%, transparent);
}
.sa-cm #respond .sa-cf-in--area {
	min-height: 110px;
	resize: vertical;
}
.sa-cm #respond .sa-cf-in--select {
	/* The base theme sets a bare `select { height: 30px }`, which clips the
	   text inside our padded field into invisibility — force natural height. */
	height: auto;
	min-height: 46px;
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--sa-text-dim) 50%), linear-gradient(135deg, var(--sa-text-dim) 50%, transparent 50%);
	background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px;
	cursor: pointer;
}
.sa-cm #respond .sa-cf-in--select option {
	background: var(--sa-surface-2);
	color: var(--sa-text);
}
/* Placeholder look while nothing is picked (progressive — :has() browsers). */
.sa-cm #respond .sa-cf-in--select:has(option[value=""]:checked) {
	color: var(--sa-text-dim);
}

.sa-cm #respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12.5px;
	color: var(--sa-text-dim);
}
.sa-cm #respond .comment-form-cookies-consent input {
	margin-top: 2px;
	accent-color: var(--sa-violet);
}
.sa-cm #respond .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: inherit;
}

.sa-cm #respond .sa-cf-send {
	justify-self: start;
	border: 0;
	border-radius: var(--sa-radius-pill);
	background: var(--sa-gradient);
	color: var(--sa-on-accent);
	font-family: var(--sa-font-body);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	padding: 13px 28px;
	cursor: pointer;
	transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.sa-cm #respond .sa-cf-send:hover {
	filter: brightness(1.08);
	box-shadow: var(--sa-glow);
	transform: translateY(-1px);
}
.sa-cm #respond .form-submit {
	margin-bottom: 0;
}

.sa-cm #cancel-comment-reply-link {
	float: none;
	margin-left: auto;
	font-family: var(--sa-font-body);
	font-size: 12px;
	font-weight: 700;
	color: var(--sa-text-dim);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-pill);
	padding: 5px 12px;
	line-height: 1;
}
.sa-cm #cancel-comment-reply-link:hover {
	color: var(--sa-text);
	border-color: var(--sa-border-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Style A — Glow Thread.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm--a .comment-list > li.comment {
	margin-bottom: 14px;
}
.sa-cm--a .sa-cmt-body {
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius);
	padding: 16px 18px;
	transition: border-color 0.18s ease;
}
.sa-cm--a .sa-cmt-body:hover {
	border-color: var(--sa-border-strong);
}
.sa-cm--a .comment-list ol.children {
	border-left: 2px solid var(--sa-border-strong);
}
.sa-cm--a .comment-list ol.children .sa-cmt-body {
	background: var(--sa-surface-2);
}
/* Accent ring around the avatar — a dark gap + accent ring via box-shadow.
   The avatar is ONE element (initials span or the img wrapper), so the ring
   must not rely on padding/nested markup: a width rule here once blew the
   avatar up to the full row width. */
.sa-cm--a .sa-cmt-ava {
	box-shadow: 0 0 0 2px var(--sa-bg-2), 0 0 0 4px var(--sa-violet);
	margin: 4px 4px 0 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Style B — Soft Minimal.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm--b .comment-list > li.comment {
	border-bottom: 1px solid var(--sa-border);
	padding: 20px 2px;
}
.sa-cm--b .comment-list > li.comment:last-child {
	border-bottom: 0;
}
.sa-cm--b .sa-cmt-ava,
.sa-cm--b .sa-cmt-ava img {
	border-radius: 14px;
}
.sa-cm--b .sa-cmt-name {
	font-size: 15px;
}
.sa-cm--b .comment-list ol.children {
	border-top: 1px dashed var(--sa-border);
	padding-top: 14px;
	margin-left: 34px;
	padding-left: 0;
	border-left: 0;
}
.sa-cm--b .sa-cmt-acts .comment-reply-link {
	border: 0;
	padding: 0;
	border-radius: 0;
	color: var(--sa-text-dim);
	letter-spacing: 0.02em;
}
.sa-cm--b .sa-cmt-acts .comment-reply-link:hover {
	color: var(--sa-violet);
	box-shadow: none;
}
.sa-cm--b .sa-cmt-acts .comment-reply-link::after {
	content: " ↩";
	opacity: 0.7;
}
/* Underline form fields. */
.sa-cm--b #respond .sa-cf-in {
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--sa-border-strong);
	border-radius: 0;
	padding: 10px 2px;
}
.sa-cm--b #respond .sa-cf-in:focus {
	box-shadow: none;
	border-bottom-color: var(--sa-violet);
}
.sa-cm--b #respond .sa-cf-send {
	border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Style C — Fan Chat.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm--c .comment-list > li.comment {
	margin-bottom: 16px;
}
.sa-cm--c .sa-cmt-ava {
	width: 38px;
	height: 38px;
	margin-top: 2px;
}
.sa-cm--c .sa-cmt-ava--i {
	font-size: 13px;
}
.sa-cm--c .sa-cmt-row {
	gap: 10px;
}
.sa-cm--c .sa-cmt-main {
	flex: 0 1 auto;
	max-width: 600px;
	background: var(--sa-surface-2);
	border: 1px solid var(--sa-border);
	border-radius: 4px 18px 18px 18px;
	padding: 10px 14px 12px;
}
.sa-cm--c .sa-cmt-name {
	font-size: 13.5px;
}
.sa-cm--c .sa-cmt-text {
	margin-top: 3px;
	font-size: 14px;
}
.sa-cm--c .sa-cmt-acts {
	margin-top: 8px;
}
.sa-cm--c .sa-cmt-acts .comment-reply-link {
	border: 0;
	padding: 0;
	border-radius: 0;
	color: var(--sa-text-dim);
}
.sa-cm--c .sa-cmt-acts .comment-reply-link:hover {
	color: var(--sa-violet);
	box-shadow: none;
}
.sa-cm--c .comment-list ol.children {
	margin-left: 26px;
	padding-left: 0;
	border-left: 0;
}
.sa-cm--c .comment-list ol.children .sa-cmt-main {
	background: color-mix(in srgb, var(--sa-violet) 12%, var(--sa-surface-1));
}
/* Composer-ish form: rounder fields. */
.sa-cm--c #respond .sa-cf-in {
	border-radius: 18px;
	padding-left: 16px;
}
.sa-cm--c #respond .sa-cf-in--area {
	min-height: 84px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Style D — Holo Panel.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm--d #comments-box {
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius);
	overflow: hidden;
	padding: 0;
	position: relative;
}
.sa-cm--d #comments-box::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--sa-holo-1), var(--sa-holo-2), var(--sa-holo-3));
}
.sa-cm--d .comments-area .block-head {
	padding: 18px 22px 0;
	margin-bottom: 8px;
}
.sa-cm--d .comment-list > li.comment {
	border-top: 1px solid var(--sa-border);
	padding: 18px 22px;
	transition: background 0.18s ease;
}
.sa-cm--d .comment-list > li.comment:hover {
	background: color-mix(in srgb, var(--sa-surface-2) 55%, transparent);
}
.sa-cm--d .comment-list ol.children {
	position: relative;
	margin-left: 20px;
	padding-left: 20px;
	border-left: 0;
}
.sa-cm--d .comment-list ol.children::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--sa-holo-1), var(--sa-holo-3));
}
.sa-cm--d .comment-navigation {
	padding: 0 22px;
}
/* The form joins the panel when there is a list; standalone it gets its own. */
.sa-cm--d #add-comment-block {
	background: var(--sa-bg-2);
	border: 1px solid var(--sa-border);
	border-radius: 0 0 var(--sa-radius) var(--sa-radius);
	padding: 18px 22px 22px;
}
.sa-cm--d #comments-box + #add-comment-block,
.sa-cm--d .comments-area #add-comment-block {
	margin-top: 0;
}
.sa-cm--d #respond .sa-cf-in {
	background: var(--sa-surface-1);
}
@media (max-width: 560px) {
	.sa-cm--d .comment-list > li.comment {
		padding: 14px 14px;
	}
	.sa-cm--d .comments-area .block-head,
	.sa-cm--d #add-comment-block {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Style E — Spotlight.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm--e .comment-list > li.comment {
	border-bottom: 1px solid var(--sa-border);
	padding: 16px 4px;
}
.sa-cm--e .comment-list > li.comment:last-child {
	border-bottom: 0;
}
.sa-cm--e .comment-list ol.children {
	margin-left: 34px;
	padding-left: 0;
	border-left: 0;
}
/* The spotlit thread gets the gradient frame + floating label. */
.sa-cm--e .comment-list > li.sa-cmt--spot {
	background: var(--sa-gradient);
	border-radius: var(--sa-radius);
	padding: 2px;
	border-bottom: 0;
	margin: 14px 0 22px;
	position: relative;
	overflow: visible;
}
.sa-cm--e li.sa-cmt--spot > .sa-cmt-body {
	background: var(--sa-surface-1);
	border-radius: 14px;
	padding: 18px 20px;
}
.sa-cm--e li.sa-cmt--spot .sa-cmt-spotlabel {
	position: absolute;
	top: -11px;
	left: 18px;
	z-index: 1;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1;
	padding: 5px 12px;
	border-radius: var(--sa-radius-pill);
	background: var(--sa-gradient);
	color: var(--sa-on-accent);
}
/* Replies inside the frame need their own surface — without it they'd sit on
   the raw gradient. The body loses its bottom radius when children follow so
   the two surfaces read as one card (:has browsers; elsewhere the seam is a
   hairline of rounding, harmless). */
.sa-cm--e li.sa-cmt--spot > .sa-cmt-body:has(+ ol.children) {
	border-radius: 14px 14px 0 0;
}
.sa-cm--e li.sa-cmt--spot > ol.children {
	background: var(--sa-surface-1);
	border-radius: 0 0 14px 14px;
	margin: 0;
	padding: 0 20px 16px 54px;
}
@media (max-width: 560px) {
	.sa-cm--e li.sa-cmt--spot > ol.children {
		padding-left: 18px;
		padding-right: 14px;
	}
}
.sa-cm--e li.sa-cmt--spot ol.children li.comment {
	border-bottom: 0;
	padding: 10px 0 0;
}
/* The label only renders on the spotlit item, but keep strays invisible. */
.sa-cm--e .sa-cmt:not(.sa-cmt--spot) .sa-cmt-spotlabel,
.sa-cm:not(.sa-cm--e) .sa-cmt-spotlabel {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Load more — the control that walks a long thread.

   It sits under the list and reads as a continuation of it, not as a second
   call to action competing with the comment form below: a quiet outlined pill,
   the count line under it, and no colour until it is hovered. The whole block
   is centred because it is the seam between "what you have read" and "what is
   left", and a seam belongs in the middle.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm .sa-cmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 22px 0 4px;
	text-align: center;
}
.sa-cm .sa-cmore__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 26px;
	border: 1px solid var(--sa-border-strong);
	border-radius: var(--sa-radius-pill);
	background: var(--sa-surface-1);
	color: var(--sa-text);
	font-family: var(--sa-font-body);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
/* The prose rules inside .entry-content outrank component CSS on bare links —
   pin the colour on every state so the button never inherits a link blue. */
.sa-cm .sa-cmore__btn:link,
.sa-cm .sa-cmore__btn:visited {
	color: var(--sa-text);
}
.sa-cm .sa-cmore__btn:hover,
.sa-cm .sa-cmore__btn:focus-visible {
	border-color: transparent;
	background: var(--sa-gradient);
	color: var(--sa-on-accent);
	box-shadow: var(--sa-glow);
	transform: translateY(-1px);
}
.sa-cm .sa-cmore__arrow {
	font-size: 15px;
	transition: transform 0.18s ease;
}
.sa-cm .sa-cmore__btn:hover .sa-cmore__arrow {
	transform: translateY(2px);
}

/* Busy: the arrow becomes a spinner and the button stops inviting clicks. */
.sa-cm .sa-cmore__btn[aria-busy="true"] {
	pointer-events: none;
	opacity: 0.75;
}
.sa-cm .sa-cmore__btn[aria-busy="true"] .sa-cmore__arrow {
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	font-size: 0;
	animation: sa-cmore-spin 0.7s linear infinite;
}
@keyframes sa-cmore-spin {
	to { transform: rotate(360deg); }
}

.sa-cm .sa-cmore__note {
	margin: 0;
	font-size: 12.5px;
	color: var(--sa-text-muted);
}
.sa-cm .sa-cmore__back {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sa-text-dim);
	text-decoration: none;
	border-bottom: 1px solid var(--sa-border);
}
.sa-cm .sa-cmore__back:hover {
	color: var(--sa-text);
}
.sa-cm .sa-cmore--end {
	margin-top: 18px;
}

/* The live region carries announcements for screen readers only. */
.sa-cm .sa-cmore__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* An appended comment must not steal the eye with an outline just because the
   script moved focus to it — the reader asked for it, they know it is there. */
.sa-cm .comment-list > li[tabindex="-1"]:focus {
	outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility + motion.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm .sa-cmt-acts .comment-reply-link:focus-visible,
.sa-cm #respond .sa-cf-send:focus-visible,
.sa-cm #respond .sa-cf-in:focus-visible,
.sa-cm #cancel-comment-reply-link:focus-visible {
	outline: 2px solid var(--sa-focus);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.sa-cm .sa-cmt-body,
	.sa-cm .sa-cmt-acts .comment-reply-link,
	.sa-cm #respond .sa-cf-in,
	.sa-cm #respond .sa-cf-send {
		transition: none;
	}
	.sa-cm #respond .sa-cf-send:hover {
		transform: none;
	}
	.sa-cm .sa-cmore__btn,
	.sa-cm .sa-cmore__arrow {
		transition: none;
	}
	.sa-cm .sa-cmore__btn:hover {
		transform: none;
	}
	.sa-cm .sa-cmore__btn:hover .sa-cmore__arrow {
		transform: none;
	}
	.sa-cm .sa-cmore__btn[aria-busy="true"] .sa-cmore__arrow {
		animation-duration: 2s;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fan prose — the rich elements inside a comment.

   Until this block existed, `.sa-cmt-text` styled exactly two things: <p> and
   <a>. Everything else a comment could contain fell through to the base
   theme's unscoped `q, blockquote { background:#2c2f34; padding:30px 50px }`
   rule in single.css — which is why a one-line quote in a comment rendered as
   a 90px-tall grey slab with a 26px icon-font quote glyph bolted on top. These
   selectors are two classes deep on purpose: they out-specify both that rule
   and the .entry-content prose rules, so LiteSpeed's CSS combining cannot
   decide the outcome by source order.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm .sa-cmt-text strong,
.sa-cm .sa-cmt-text b {
	font-weight: 800;
	color: var(--sa-text);
}
.sa-cm .sa-cmt-text em,
.sa-cm .sa-cmt-text i,
.sa-cm .sa-cmt-text cite {
	font-style: italic;
}
.sa-cm .sa-cmt-text u {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--sa-violet) 70%, transparent);
}
.sa-cm .sa-cmt-text s,
.sa-cm .sa-cmt-text del,
.sa-cm .sa-cmt-text strike {
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	color: var(--sa-text-dim);
}

/* Quote: a rail, not a slab. It has to read as a quieter aside INSIDE a
   comment that is itself only ~14px, so it borrows the comment's own scale
   instead of jumping to the article's 19px pull-quote size. */
.sa-cm .sa-cmt-text blockquote,
.sa-cm .sa-cmt-text q {
	display: block;
	margin: 10px 0;
	padding: 9px 14px;
	background: color-mix(in srgb, var(--sa-violet) 7%, transparent);
	border: 0;
	border-left: 3px solid var(--sa-violet);
	border-radius: 0 10px 10px 0;
	color: var(--sa-text-muted);
	font-size: 14px;
	line-height: 1.6;
	font-style: normal;
	box-sizing: border-box;
	width: auto;
	float: none;
	quotes: none;
}
/* The tiefonticon glyph the base theme injects above every quote. */
.sa-cm .sa-cmt-text blockquote::before,
.sa-cm .sa-cmt-text q::before,
.sa-cm .sa-cmt-text blockquote::after,
.sa-cm .sa-cmt-text q::after {
	content: none;
	display: none;
}
.sa-cm .sa-cmt-text blockquote p,
.sa-cm .sa-cmt-text q p {
	margin: 0 0 6px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-style: inherit;
}
.sa-cm .sa-cmt-text blockquote p:last-child,
.sa-cm .sa-cmt-text blockquote > :last-child {
	margin-bottom: 0;
}
.sa-cm .sa-cmt-text blockquote cite {
	display: block;
	margin-top: 6px;
	text-align: left;
	font-size: 12px;
	color: var(--sa-text-dim);
}

/* Code. */
.sa-cm .sa-cmt-text code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.88em;
	padding: 1px 6px;
	border-radius: 6px;
	border: 1px solid var(--sa-border);
	background: color-mix(in srgb, var(--sa-violet) 10%, var(--sa-surface-2));
	color: var(--sa-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.sa-cm .sa-cmt-text pre {
	margin: 10px 0;
	padding: 12px 14px;
	border: 1px solid var(--sa-border);
	border-radius: 12px;
	background: var(--sa-bg-2);
	max-width: 100%;
	overflow-x: auto;
}
.sa-cm .sa-cmt-text pre code {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 13px;
	line-height: 1.55;
	white-space: pre;
	overflow-wrap: normal;
}

/* Lists — the bullet is the site's sparkle, the number is its accent. */
.sa-cm .sa-cmt-text ul,
.sa-cm .sa-cmt-text ol {
	margin: 8px 0;
	padding-left: 4px;
	list-style: none;
}
.sa-cm .sa-cmt-text li {
	margin: 3px 0;
	position: relative;
	padding-left: 20px;
}
.sa-cm .sa-cmt-text ul > li::before {
	content: "✦";
	position: absolute;
	left: 2px;
	top: 0;
	font-size: 11px;
	line-height: 1.9;
	color: var(--sa-violet);
}
.sa-cm .sa-cmt-text ol {
	counter-reset: sa-cmt-ol;
}
.sa-cm .sa-cmt-text ol > li {
	counter-increment: sa-cmt-ol;
}
.sa-cm .sa-cmt-text ol > li::before {
	content: counter(sa-cmt-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.75;
	color: var(--sa-violet-light);
}
.sa-cm .sa-cmt-text li > ul,
.sa-cm .sa-cmt-text li > ol {
	margin: 3px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Spoilers.

   A K-Drama thread runs on them, so they get the blur treatment rather than a
   "click to expand" box: the shape of the sentence stays visible (nothing
   reflows when it opens) while the words do not. `color: transparent` plus a
   blurred text-shadow is what keeps the layout stable; a `filter: blur()`
   would bleed outside the element and give the letters away at the edges.

   ::selection is neutralised because "select all" would otherwise reveal every
   spoiler on the page at once. :active is a no-JavaScript escape hatch — press
   and hold reads it — while a real click latches it open.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm .sa-sp {
	display: inline;
	padding: 0 4px;
	border-radius: 5px;
	background: var(--sa-surface-2);
	color: transparent;
	text-shadow: 0 0 9px color-mix(in srgb, var(--sa-text) 62%, transparent);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: color 0.18s ease, background 0.18s ease, text-shadow 0.18s ease;
}
.sa-cm .sa-sp::selection {
	background: transparent;
	color: transparent;
}
.sa-cm .sa-sp:active,
.sa-cm .sa-sp.is-open {
	color: inherit;
	background: color-mix(in srgb, var(--sa-violet) 10%, transparent);
	text-shadow: none;
}
.sa-cm .sa-sp.is-open {
	cursor: text;
	-webkit-user-select: text;
	user-select: text;
}
.sa-cm .sa-sp.is-open::selection {
	background: color-mix(in srgb, var(--sa-violet) 40%, transparent);
	color: inherit;
}
.sa-cm .sa-sp:focus-visible {
	outline: 2px solid var(--sa-focus);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   The composer.

   The whole thing is one bordered surface that the textarea dissolves into —
   toolbar, box and footer share a focus ring instead of stacking three of
   them.

   🔴 The toolbar is visible from the first paint and is hidden ONLY inside
   <noscript>. The obvious alternative — hide it and let the script reveal
   itself — is wrong on this site: LiteSpeed rewrites our script to
   `type="litespeed/javascript"` and holds it until the visitor's first
   interaction, so "reveal on boot" means an empty comment box for everyone
   who has not touched the page yet. A button that is a moment early is a far
   smaller problem than a button nobody can see.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-cm .sa-ce-emoji[hidden],
.sa-cm .sa-ce-pane[hidden] {
	display: none;
}

/* Without the Website field the fandom select is left alone on its row with an
   empty cell beside it, which reads as a missing field rather than a finished
   form. Let it take the row. (:has browsers; elsewhere it stays half-width,
   which is merely the old look.) */
.sa-cm #respond .comment-form:not(:has(.comment-form-url)) .comment-form-fandom {
	grid-column: 1 / -1;
}

/* The wrapper is now the form's grid child, so the full-width rule that used
   to land on .comment-form-comment has to land here — without this the
   composer is squeezed into one column next to the Name field. */
.sa-cm #respond .comment-form > .sa-ce {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}

.sa-cm .sa-ce {
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius);
	background: var(--sa-surface-1);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sa-cm .sa-ce:focus-within {
	border-color: var(--sa-violet);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-violet) 14%, transparent);
}
/* The box loses its own chrome — the wrapper is the field now. */
.sa-cm .sa-ce .sa-cf-field--comment {
	margin: 0;
}
.sa-cm .sa-ce #respond .sa-cf-in--area {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	min-height: 112px;
	padding: 13px 14px;
	display: block;
	width: 100%;
}
.sa-cm .sa-ce #respond .sa-cf-in--area:focus,
.sa-cm .sa-ce #respond .sa-cf-in--area:focus-visible {
	border: 0;
	box-shadow: none;
	outline: none;
}

/* Tabs. */
.sa-cm .sa-ce .sa-ce-tabs {
	display: flex;
	gap: 2px;
	padding: 7px 8px 0;
	background: var(--sa-bg-2);
	border-bottom: 1px solid var(--sa-border);
}
.sa-cm .sa-ce-tab {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 8px 8px 0 0;
	margin-bottom: -1px;
	padding: 8px 14px;
	font-family: var(--sa-font-body);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--sa-text-dim);
	cursor: pointer;
	transition: color 0.16s ease, border-color 0.16s ease;
}
.sa-cm .sa-ce-tab:hover {
	color: var(--sa-text);
}
.sa-cm .sa-ce-tab.is-on {
	color: var(--sa-text);
	border-bottom-color: var(--sa-violet);
}

/* Toolbar — scrolls sideways on a narrow phone rather than wrapping to a
   second row, so the box below never jumps down as buttons reflow. */
.sa-cm .sa-ce .sa-ce-bar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	background: var(--sa-bg-2);
	border-bottom: 1px solid var(--sa-border);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.sa-cm .sa-ce-bar::-webkit-scrollbar {
	display: none;
}
.sa-cm .sa-ce-b {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--sa-text-muted);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.sa-cm .sa-ce-b:hover {
	background: color-mix(in srgb, var(--sa-violet) 15%, transparent);
	color: var(--sa-text);
}
.sa-cm .sa-ce-b:active {
	transform: scale(0.93);
}
.sa-cm .sa-ce-b[aria-expanded="true"] {
	background: var(--sa-gradient);
	color: var(--sa-on-accent);
}
.sa-cm .sa-ce-b:focus-visible {
	outline: 2px solid var(--sa-focus);
	outline-offset: 1px;
}
.sa-cm .sa-ce-sep {
	flex: none;
	width: 1px;
	height: 18px;
	margin: 0 5px;
	background: var(--sa-border-strong);
}

/* Emoji panel. */
.sa-cm .sa-ce-emoji {
	padding: 10px 12px 12px;
	background: var(--sa-bg-2);
	border-bottom: 1px solid var(--sa-border);
	max-height: 208px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sa-cm .sa-ce-emoji__g + .sa-ce-emoji__g {
	margin-top: 8px;
}
.sa-cm .sa-ce-emoji__lab {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sa-text-dim);
}
.sa-cm .sa-ce-emoji__row {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}
.sa-cm .sa-ce-emoji__b {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.14s ease, transform 0.12s ease;
}
.sa-cm .sa-ce-emoji__b:hover {
	background: color-mix(in srgb, var(--sa-violet) 16%, transparent);
	transform: scale(1.12);
}
.sa-cm .sa-ce-emoji__b:focus-visible {
	outline: 2px solid var(--sa-focus);
	outline-offset: 1px;
}

/* Preview pane — same prose rules as a posted comment, because that is the
   whole promise of the tab. */
.sa-cm .sa-ce-pane--prev {
	padding: 13px 14px;
	min-height: 112px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sa-text);
	overflow-wrap: anywhere;
}
.sa-cm .sa-ce-prev__empty {
	margin: 0;
	font-style: italic;
	color: var(--sa-text-dim);
}

/* Footer. */
.sa-cm .sa-ce .sa-ce-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px 12px;
	background: var(--sa-bg-2);
	border-top: 1px solid var(--sa-border);
	font-size: 11.5px;
	color: var(--sa-text-dim);
}
.sa-cm .sa-ce-hint {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 0;
}
.sa-cm .sa-ce-hint b,
.sa-cm .sa-ce-hint i,
.sa-cm .sa-ce-hint u,
.sa-cm .sa-ce-hintsp {
	font-size: 11px;
	color: var(--sa-text-muted);
}
.sa-cm .sa-ce-nolink {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 800;
	white-space: nowrap;
	color: var(--sa-text-dim);
}
.sa-cm .sa-ce-nolink .sa-ce-i {
	width: 13px;
	height: 13px;
}
.sa-cm .sa-ce-count {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sa-cm .sa-ce-count.is-warn {
	color: var(--sa-gold);
}
.sa-cm .sa-ce-count.is-max {
	color: var(--sa-heart);
}

/* Per-style fit: the chat composer keeps its rounder shell, the minimal one
   drops the filled surface so the underline form still reads as flat. */
.sa-cm--c .sa-ce {
	border-radius: 20px;
}
.sa-cm--b .sa-ce {
	border-radius: 12px;
	background: transparent;
}
.sa-cm--d .sa-ce {
	background: var(--sa-surface-1);
}

@media (max-width: 560px) {
	.sa-cm .sa-ce-b {
		width: 38px;
		height: 38px;
	}
	.sa-cm .sa-ce-emoji__b {
		width: 36px;
		height: 36px;
	}
	.sa-cm .sa-ce #respond .sa-cf-in--area,
	.sa-cm .sa-ce-pane--prev {
		min-height: 96px;
	}
}
/* The formatting cheat-sheet is the first thing to go when the row is tight —
   the toolbar already says everything it says, with pictures. */
@media (max-width: 520px) {
	.sa-cm .sa-ce-hint {
		display: none;
	}
	.sa-cm .sa-ce-nolink {
		margin-left: 0;
	}
	.sa-cm .sa-ce-count {
		margin-left: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sa-cm .sa-ce,
	.sa-cm .sa-ce-b,
	.sa-cm .sa-ce-tab,
	.sa-cm .sa-ce-emoji__b,
	.sa-cm .sa-sp {
		transition: none;
	}
	.sa-cm .sa-ce-b:active,
	.sa-cm .sa-ce-emoji__b:hover {
		transform: none;
	}
}